HTML5和CSS3基礎教程(第8版）-讀書筆記(3)

時間 2019-11-15

標籤 html5 html css3 css 基礎教程讀書筆記欄目 HTML5 简体版

原文原文鏈接

第11章用CSS 進行佈局

網站設計主要有兩大類型：固定寬度和響應式。css

對於固定（fixed）佈局，整個頁面和每一欄都有基於像素的寬度。顧名思義，不管是使用移動電話和平板電腦等較小的設備查看頁面，仍是使用桌面瀏覽器並對窗口進行縮小，它的寬度都不會改變。web

響應式頁面也稱爲流式（fluid 或liquid）頁面，它使用百分數定義寬度，容許頁面隨顯示環境的改變進行放大或縮小。除了具備流動欄，響應式頁面還能夠根據屏幕尺寸以特定方式調整其設計。chrome

11.5　盒模型瀏覽器

CSS 處理網頁時，它認爲每一個元素都包含在一個不可見的盒子裏。這就是盒模型，這裏的盒子由內容區域、內容區域周圍的空間（內邊距，padding）、內邊距的外邊緣（邊框，border）和邊框外面將元素與相鄰元素隔開的不可見區域（外邊距，margin）構成。服務器

關於 CSS 的 width 屬性對元素所顯示寬度的影響，有兩種處理方式。（不包含任何將其與鄰近元素隔開的外邊距。）ssh

（1）默認的處理方式實際上有些有悖於常理。瀏覽器中元素的寬度與其width 屬性值並不一致（除非它沒有內邊距和邊框）。CSS 中的寬度指示的是內邊距裏內容區域的寬度。而元素在瀏覽器中的顯示寬度則是內容寬度、左右內邊距和左右邊框的總和。顯示高度與之相似，只不過計算的是上下內邊距和邊框值。ide

（2）另外一種方式則更爲直觀。使用這種方式的話，元素的顯示寬度就等於width 屬性的值。內容寬度、內邊距和邊框都包含在裏面。height屬性與之相似。要使用這種模式，僅需對元素設置 box-sizing: border-box;。佈局

11.6　 控制元素的顯示類型和可見性性能

默認狀況下，元素會按照它們在HTML 中自上而下出現的次序顯示（這稱爲文檔流，document flow），並在每一個非行內元素的開頭和結尾處換行。字體

1. 指定元素的顯示方式display:

block：讓元素顯示爲塊級元素；
inline：讓元素顯示爲行內元素；
inline-block，讓元素顯示爲行內元素，同時具備塊級元素的特徵，便可覺得元素的四條邊設置width、height、margin、padding等屬性；
none，隱藏元素，並將其從文檔流中徹底移除。

設置爲 display: inline; 的元素不接受 padding 的設置，但 padding-top 和padding-bottom會越界進入相鄰元素的區域，而不是侷限於該元素自己的空間

2. 控制元素可見性

visibility 屬性的主要目的是控制元素是否可見。與 display 屬性不一樣的是，使用visibility 隱藏元素時，元素及其內容應該出現的位置會留下一片空白區域。隱藏元素的空白區域仍然會在文檔流中佔據位置。

hidden：讓元素不可見，但在文檔流中保留它；
visible：讓元素顯示出來。

11.7　設置元素的高度和寬度

能夠爲不少元素設置高度和寬度，如分塊內容、段落、列表項、div、圖像、video、表單元素等。

同時，能夠爲短語內容元素（默認以行內方式顯示）設置 display: block; 或display: inline-block;，再對它們設置寬度或高度。、

設置元素高度或寬度：

(1) 輸入 width: w，其中的w 是元素內容區域的寬度，能夠表示爲長度（帶單位，如 px、em 等）或父元素的百分數。或者使用auto 讓瀏覽器計算寬度（這是默認值）。

(2) 輸入 height: h，其中的h 是元素內容區域的高度，只能表示爲長度（帶單位，如 px、em 等）。或者使用 auto 讓瀏覽器計算高度（這是默認值）。

還有min-width、min-height、 max-width 和 max-height 屬性用來設置最小和最大尺寸。

width 和 height 不是繼承的。

若是不顯式設置寬度和高度，瀏覽器就會使用 auto。對於大多數默認顯示爲塊級元素的元素，width 的 auto 值是由包含塊的寬度減去元素的內邊距、邊框和外邊距計算出來的。

11.8　在元素周圍添加內邊距

內邊距就是元素內容周圍、邊框之內的空間。能夠改變內邊距的厚度，不能改變它的顏色或紋理。顯示在內邊距區域的顏色和紋理是元素的背景，是經過background、background-color或者 background-image 設置的。

內邊距的值可使用像素、百分數、em 或 rem的組合。

padding 的簡記法：同 border 和 margin 屬性同樣，padding 也可使用簡記法，從而沒必要使用padding-top、padding-right 等屬性爲每一個邊都單獨設定內邊距。

padding: 5px;——使用一個值，這個值就會應用於所有四個邊。
padding: 5px 9px;——使用兩個值，則前一個值會應用於上下兩邊，後一個值會應用於左右兩邊。
padding: 5px 9px 11px;——使用三個值，則第一個值會應用於上邊，第二個值會應用於左右兩邊，第三個值會應用於下邊
padding: 5px 9px 11px 0;——使用四個值，它們會按照時鐘順序，依次應用於上、右、下、左四個邊。

也能夠輸入 padding-top: x;、padding-right: x;、padding-bottom: x;或者padding- left: x; 單獨爲一個邊添加內邊距。

11.9　設置邊框

能夠在元素周圍建立邊框，或針對元素的某一邊設置邊框，並設置它的厚度、風格和顏色。

1. 定義邊框風格

輸入 border-style: type，其中的type能夠是none、dotted （點線）、dashed （虛線）、solid （實線）、double （雙線）、 groove （槽線）、ridge （脊線）、 inset （凹邊）或outset （凸邊）。

2. 設置邊框寬度

輸入 border-width: n，這裏的n 是須要的寬度（含單位，如4px）。

3. 設置邊框顏色

輸入border-color: color，這裏的color是顏色名稱、十六進制值或 RGB、HSL、RGBA、 HSLA顏色。

4. 使用簡記法同時設置多個邊框屬性border。

能夠指定全部三種邊框屬性（如 border:1px solid 和 border-right: 2px dashed green;）。

border-top、border-right、border-bottom 或 border-left 將邊框效果限制在某一條邊上。

border-property，這裏的property 能夠是style（風格）、width（寬度）或color（顏色），僅使用單個屬性設置邊框。

border 簡寫屬性及各個邊框屬性（border-width、border-style 和 border-color）都可接受一至四個值。

若是使用一個值，那麼它會應用於所有四個邊；

若是使用兩個值，那麼前一個值會應用於上下兩邊，後一個值會應用於左右兩邊；

若是使用三個值，那麼第一個值會應用於上邊，第二個值會應用於左右兩邊，第三個值會應用於下邊；

若是使用四個值，那麼它們會按照時鐘順序，依次應用於上、右、下、左四個邊。

要讓邊框顯示出來，至少必須定義邊框樣式。若是沒有定義樣式，就不會顯示邊框。邊框樣式的默認值是border-style: none。

11.10　設置元素周圍的外邊距

外邊距是元素與相鄰元素之間的透明空間。

設置元素外邊距的方法：

輸入 margin: x，其中的x 是要添加的空間量，能夠表示爲長度、相對父元素寬度的百分數或auto。
也能夠輸入margin-top: x;、 margin-right: x;、margin-bottom: x;或者 margin-left: x; 爲元素的一條邊應用外邊距。

若是元素位於另外一個元素的上面，對於相互接觸的兩個 margin（即元素相互接觸的下外邊距和上外邊距），僅使用其中較大的一個，另外一個外邊距會被疊加。左右外邊距不疊加。

外邊距不是繼承的。

當 em 值用於內邊距和外邊距時，它的值是相對於元素的字體大小的，而不是相對於父元素的字體大小的。

對於內邊距和外邊距的設置，建議使用相對單位。

若是要對內邊距和外邊距使用百分數，一般不會將它們用於上下邊距的值，由於這樣的值是基於其包含塊的寬度的。

11.11　使元素浮動

能夠經過 float 屬性使元素浮動在文本或其餘元素上。可使用這種技術讓文本環繞在圖像或者其餘元素周圍，也可使用這種技術建立多欄佈局等。

讓文本環繞元素float:

left：讓元素浮動到左邊，其餘內容圍繞在它右邊；
right：讓元素浮動到右邊，其餘內容圍繞在它左邊；
none：讓元素徹底不浮動。（none是默認值，所以只有在特定狀況下須要覆蓋某個浮動元素的樣式規則時才須要用到它。）

使用 width 屬性顯式地設置元素的寬度，以便有空間放置圍繞它的內容。

float 屬性不是繼承的。

11.12　控制元素浮動的位置

浮動的元素對文檔流的影響與非浮動元素的影響是不一樣的。浮動元素會讓接下來的內容環繞在它周圍。不過，它並不會影響父元素或其餘祖先元素的高度，所以從這一點來講，它不屬於文檔流的一部分。

可使用 clear 屬性清除浮動效果。

控制元素浮動位置clear:

left：阻止元素浮動在該元素的左邊；
right：阻止元素浮動在該元素的右邊；
both：阻止元素浮動在該元素的左右兩邊；
none（默認值）：容許元素浮動在該元素的左右兩邊。

若是要讓浮動元素的祖先元素在高度上包含浮動元素，並消除浮動，可使用clearfix或overflow 方法替代。

要使用clearfix 方法，只須要在樣式表中引入.clearfix 的規則，而後爲浮動元素的父元素（該元素爲但願清除浮動的元素）添加clearfix 類.

clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

使用overflow 建立自清除浮動元素

.container {

overflow: hidden;

}

應該將clear屬性添加到不但願環繞浮動對象的元素上。而 clearfix 和overflow 方法是應用於浮動元素的父元素或祖先元素的。

浮動元素的 display 屬性會變成display: block;，哪怕將其設置爲 display: inline;（不管是瀏覽器的默認樣式仍是手動顯式設置），該屬性值依然爲 block。

11.13　對元素進行相對定位

每一個元素在頁面的文檔流中都有一個天然位置。相對於這個原始位置對元素進行移動就稱爲相對定位。周圍的元素徹底不受此影響。

記住，既要指明採用相對位置，還要給出偏移量。

偏移天然流中元素的步驟：

(1) 輸入position: relative;。

(2) 輸入 top、right、bottom 或 left。再輸入 :d，這裏的d 是但願元素從它的天然位置偏移的距離，能夠表示爲絕對值（如10px）、相對值（如 2em）或百分數。值可負可正。

其餘元素不會受到偏移的影響，仍然按照這個元素原來的盒子進行排列。設置了相對定位的內容可能與其餘內容重疊，這取決於top、right、bottom 和 left 的值。

使用相對定位、絕對定位或固定定位時，對於相互重疊的元素，能夠用 z-index屬性指定它們的疊放次序。

對元素設置 position: static，能夠覆蓋 position: relative 設置。static 是元素的默認值，這就是元素出如今常規文檔流中的緣由。

定位不是繼承的。

11.14　對元素進行絕對定位

經過對元素進行絕對定位，即指定它們相對於 body或最近的已定位祖先元素的精確位置，可讓元素脫離正常的文檔流。

這與相對定位不一樣，絕對定位的元素不會在原先的位置留下空白。

這與讓元素浮動也不一樣。對於絕對定位的元素，其餘元素不會環繞在它的周圍。事實上，其餘內容不知道它的存在，它也不知道其餘內容的存在。

對元素進行絕對定位的步驟：

(1) 輸入position: absolute;。

(2) 根據須要，輸入 top、right、bottom或 left。再輸入 :d，這裏的d 是但願元素相對於其祖先元素偏移的距離（如 10px 或 2em）或相對於其祖先的百分數。

(3) 根據須要，對但願成爲絕對定位參照體的祖先元素添加 position: relative;。若是跳過這一步，將對元素相對於body 計算偏移量。

因爲絕對定位的元素脫離了文檔流，所以它們可能會相互重疊，或與其餘元素重疊。

若是不爲絕對定位的元素指定偏移量，這個元素將顯示在它的天然位置上，但不會影響後續元素在文檔流中的位置。

還有一種定位類型稱爲固定定位。當訪問者滾動瀏覽器窗口時，頁面內容一般隨之上下移動。若是對元素設置 position: fixed;，它就會固定在瀏覽器窗口中。當訪問者上下滾動瀏覽器窗口時，該元素不會隨之移動，頁面的其他部分仍照常滾動。

使用相對定位、絕對定位或固定定位時，可使用 z-index 屬性指定相互重疊的元素的疊放次序。

對元素設置position: static 將覆蓋position: absolute; 的設置。

11.15　在棧中定位元素

當你開始使用相對定位、絕對定位和固定定位之後，極可能發現元素相互重疊的狀況。

在棧中定位元素：

輸入 z-index: n，其中的n 是表示元素在定位過的對象堆中的層級的數字。

z-index 的值越大，元素在堆中就越高。

z-index 屬性僅對定位過的元素（即設爲絕對定位、相對定位或固定定位的元素）有效。

z-index 屬性不是繼承的。

11.16　處理溢出

元素並不老是包含在它們本身的盒子裏。可使用 overflow 屬性控制元素在盒子外面的部分。

決定瀏覽器如何處理溢出overflow:

visible：讓元素盒子中的全部內容可見，這是默認項；
hidden：隱藏元素盒子容納不了的內容；
scroll：不管元素是否須要，元素上添加滾動條；
auto：讓滾動條僅在訪問者訪問溢出內容時出現。

overflow 屬性不是繼承的。

11.17　垂直對齊元素

使元素垂直對齊vertical-align:

baseline：使元素的基準線對齊父元素的基準線；
middle：使元素位於父元素中央；
sub：使元素成爲父元素的下標；
super：使元素成爲父元素的上標；
text-top：使元素的頂部對齊父元素的頂部；
text-bottom：使元素的底部對父元素的底部；
top：使元素的頂部對齊當前行裏最高元素的頂部；
bottom：使元素的底部對齊當前行裏最低元素的底部；
元素行高的百分比，能夠是正數，也能夠是負數；
某個值（正負都可，單位爲像素或 em）分別按照特定的值向上或者向下移動元素。

可使用 vertical-align 設置表格單元格中內容的對齊方式。除了表格之外，vertical-align 屬性僅適用於行內元素，不能應用於塊級元素。

11.18　修改鼠標指針

修改指針形狀cursor:

pointer表示停留在連接上時一般顯示的指針形狀（）、default表示箭頭（）、crosshair（）、move（）、wait（）、help（）、text（）或 progress（）；
auto 顯示特定情形下一般使用的指針形狀；
x-resize 顯示雙向箭頭，這裏的x 是其中一個箭頭須要指向的方向，能夠是 n（北）、nw（西北）、e（東），等等。例如，e-resize 指針顯示成。

不一樣瀏覽器、不一樣系統的指針形狀可能有細微的差別。

第12章構建響應式網站

響應式 Web 設計（responsive Web design）方法植根於如下三點：

靈活的圖像和媒體。圖像和媒體資源的尺寸是用百分數定義的，從而能夠根據環境進行縮放。

靈活的、基於網格的佈局，也就是流式佈局。對於響應式網站，全部的width 屬性都用百分數設定，所以全部的佈局成分都是相對的。其餘水平屬性一般也會使用相對單位（em、百分數和 rem 等）。

媒體查詢。使用這項技術，能夠根據媒體特徵（如瀏覽器可視頁面區域的寬度）對設計進行調整。

12.2　建立可伸縮圖像

製做可伸縮圖像的步驟：

(1) 對任何想作成可伸縮圖像的圖像，在HTML 的 img 標籤中省略 width 和 height 屬性。

(2) 在樣式表中，爲每一個想作成可伸縮圖像的圖像應用 max-width: 100%。

圖像縮放的可用空間是由其父元素創建的內容區域。若是父元素有水平方向上的內邊距，可用空間就會相應減少。

必定要使用 max-width: 100% 而不是width: 100%。它們都能讓圖像在容器內縮放，不過，width: 100% 會讓圖像儘量地填充容器，若是容器的寬度比圖像寬，圖像就會放大到超過其原本尺寸，有可能會顯得較爲難看。

不要忘了對圖像進行優化，讓文件尺寸儘量小。

可使用 background-size 屬性對背景圖像進行縮放（對 IE8 無效）。

還可使用 video, embed, object { max-width: 100%; } 讓 HTML5 視頻及其餘媒體變成可伸縮的（一樣也不要在 HTML中爲它們指定 width 和 height）。

12.3　建立彈性佈局網格

建立彈性佈局須要使用百分數寬度，並將它們應用於頁面裏的主要區域。

可使用下面的公式計算須要使用的百分數：

要指定的寬度（以像素爲單位）／容器寬度（以像素爲單位）＝值

建立彈性佈局的步驟：

對於須要某個寬度實現預期佈局的元素，設置 width: percentage;，其中 percentage表示你但願元素在水平方向上佔據容器空間的比例。一般說來，沒必要設置 width: 100%;，由於默認設置爲 display: block; 的元素（如 p 以及其餘不少元素）或手動設置爲 display: block; 的元素在默認狀況下會佔據整個可用空間。

做爲可選的一步，對包含整個頁面內容的元素設置 max-width: value;，其中 value表示你但願頁面最多可增加到的最大寬度。一般，value以像素爲單位，不過也可使用百分數、em 值或其餘單位的值。

若是父元素有水平方向上的內邊距，它爲子元素創建的容器就會變小。

還能夠對元素設置基於百分數的margin 和 padding 值。也可使用em 值。內邊距和外邊距的 em 值是相對於元素的font-size 的，而基於百分數的值則是相對於包含元素的容器的。

對於設置了body { font-size: 100%; } 的頁面，對 font-size、margin、padding 和max-width 使用 em 值還有一個好處——若是用戶更改了瀏覽器默認字體大小，那麼頁面也會跟着變大或變小。

將 box-sizing 屬性設置爲 border-box，就能夠很方便地對擁有水平方向內邊距（使用 em 或其餘的單位）的元素定義寬度，而沒必要進行復雜的數學計算來找出百分數的值。

12.4　理解和實現媒體查詢

可使用三種方式針對特定的媒體類型定位 CSS：

第一種方式是使用 link 元素的 media屬性，位於 head 內。

第二種方式是在樣式表中使用 @media 規則。

第三種方式，即便用 @import 規則（會影響性能）。

媒體查詢加強了媒體類型方法，容許根據特定的設備特性定位樣式。要調整網站的呈現樣式，讓其適應不一樣的屏幕尺寸，採用媒體查詢特別方便。

下面列出了能夠包含在媒體查詢裏的媒體特性：

width（寬度）

height（高度）

device-width（設備寬度）

device-height（設備高度）

orientation（方向）

aspect-ratio（高寬比）

device-aspect-ratio（設備高寬比）

color（顏色）

color-index（顏色數）

monochrome（單色）

resolution（分辨率）

scan（掃描）

grid（柵格）

還有一些非標準的媒體特性，如-webkit-device-pixel-ratio （WebKit①設備像素比） -moz-device-pixel-ratio（Mozilla②設備像素比）

除了 orientation、scan 和 grid 之外，上述屬性都可添加 min- 和 max- 前綴。min-前綴定位的是「大於等於」對應值的目標，而 max- 前綴定位的則是「小於等於」對應值的目標。

如下是媒體查詢的基本語法。

指向外部樣式表的連接：

位於樣式表中的媒體查詢：

@media logic type and (feature: value) {

/* 目標CSS樣式規則寫在這裏 */

}

logic（邏輯）部分是可選的，其值能夠是 only 或 not。only 關鍵字能夠確保舊的瀏覽器不讀取餘下的媒體查詢，同時一併忽略連接的樣式表。not 關鍵字能夠對媒體查詢的結果求反，讓其反面爲真。例如，使用 media="notscreen" 會在媒體類型爲 screen 之外的任何類型時加載樣式表。

type（類型）部分是媒體類型，如screen、print 等。

feature: value 對是可選的，但一旦包含它們，它們必須用括號包圍且前面要有 and 這個字。feature 是預約義的媒體特性，如 min-width、max-width 或者 resolution。對 color、color-index和monochrome特性來講，value 是可選的。

可使用 and 將多個特性和值的組合串接起來，還能夠建立一系列媒體查詢（使用逗號分隔每一個媒體查詢）。在用逗號分隔的媒體查詢列表中，若是有一個媒體查詢爲真，則整個媒體查詢列表爲真。

12.6　兼容舊版IE

是 Internet Explorer 8 及如下的版本不支持媒體查詢。這意味着這些瀏覽器只會呈現媒體查詢之外的樣式，即基準樣式。

對於 IE8（及更早的版本），有三種解決方法：

什麼都不作。讓網站顯示基本的版本。
爲它們單首創建一個樣式表，讓它們顯示網站最寬的版本（不會造成響應式的網頁）。一種作法是複製一份常規的樣式表，將其命名爲 old-ie.css 之類的文件名。將媒體查詢語句去掉，但保留其中的樣式規則。在 HTML中添加條件註釋，從而讓不一樣的瀏覽器都能找到正確的樣式表。
若是但願頁面有響應式的效果，就在頁面中引入 respond.min.js。

第13章使用Web字體

CSS 規則 @font-face 爲 Web 字體創造了可能，該樣式規則容許 CSS 連接到服務器上的一種字體供網頁使用。

第14章使用CSS3進行加強

14.2　理解廠商前綴

CSS3 規範要達到 W3C 的推薦標準（即定稿）狀態要通過數年。瀏覽器則一般在W3C 開發標準的過程當中就會提早實現這些特性。在包含某個特性的初始階段，瀏覽器一般會使用廠商前綴實現這類特性。這樣，每一個瀏覽器均可以引入本身的 CSS 屬性支持方式，從而能夠獲取反饋，並且一旦標準發生改變也不會形成影響。

每一個主流瀏覽器都有其自身的前綴：-webkit-（Webkit/Safari/舊版本的Chrome）、-moz-（Firefox）、-ms-（Internet Explorer）、-o-（Opera）。應該將前綴放在 CSS 屬性名的前面。現在，在多數狀況下，咱們通常只須要-webkit 前綴。

14.3　爲元素建立圓角

使用CSS3，能夠在不引入額外的標記或圖像的狀況下，爲大多數元素（包括表單元素、圖像，甚至段落文本）建立圓角

1. 爲元素建立四個相同的圓角

-webkit-border-radius: r，這裏的r 是圓角的半徑大小，表示爲長度（帶單位）。
border-radius: r，這裏的r 是圓角的半徑大小。這是該屬性的標準短形式語法。

2. 爲元素建立一個圓角

-webkit-border-top-left-radius: r，這裏的r 是左上方圓角的半徑大小，表示爲長度（帶單位）。
border-top-left-radius: r。建立左上方圓角。這是該屬性的標準長形式語法。

此外，還能夠單首創建其餘方位的圓角：

建立右上方圓角：用 top-right 替換

建立右下方圓角：用 bottom-right 替

建立左下方圓角：用 bottom-left 替

3. 建立橢圓形圓角

-webkit-border-radius: x/y，其中x 是圓角在水平方向上的半徑大小， y 是圓角在垂直方向上的半徑大小，均表示爲長度（帶單位）。
border-radius: x/y

4. 使用border-radius 建立圓形

-webkit-border-radius: r，這裏的r 是元素的半徑大小（帶長度單位）。要建立圓形，可使用短形式的語法，r 的值應該等於元素高度或寬度的一半。
border-radius: r，這是標準的無前綴語法。

不支持 border-radius 的舊的瀏覽器僅會以方角呈現元素。

border-radius 僅影響施加該樣式的元素的角，不會影響其子元素的角。所以，若是一個子元素有背景，該背景就有可能顯示在一個或多個父元素的角的位置，從而影響圓角樣式。

有時元素的背景（這裏講的不是子元素的背景）會透過其圓角。爲了不這種狀況能夠在元素的border-radius 聲明後面增長一條樣式規則：background-clip: padding-box;。

border-radius 屬性不是繼承的。

14.4　爲文本添加陰影

使用text-shadow元素，能夠在不使用圖像表示文本的狀況下，爲段落、標題等元素中的文本添加動態的陰影效果。

1. 爲元素的文本添加陰影text-shadow:

分別輸入表示 x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半徑）和color的值（前三個值帶長度單位，四個值之間不用逗號分隔）。

2. 爲元素的文本添加多重陰影text-shadow:

（1）分別輸入 x-offset、y-offset、blur-radius 和 color 的值（前三個帶長度單位，四個值之間不用逗號分隔）。blur-radius 的值是可選的。

（2）輸入 ,（逗號）。

（3）對四種屬性使用不一樣的值重複上述步驟。

3. 將text-shadow 改回默認值

輸入 text-shadow: none;。

text-shadow屬性不須要使用廠商前綴。

x-offset 和 y-offset 值能夠是正整數，也能夠是負整數。blur-radius 值必須是正整數。這三個值均可覺得 0。

不能像邊框和背景那樣單獨地指定四個屬性值。

text-shadow 屬性是繼承的。

14.5　爲其餘元素添加陰影

使用 text-shadow 屬性能夠爲元素的文本添加陰影，使用 box-shadow 屬性則能夠爲元素自己添加陰影。它們的基礎屬性集是相同的，不過box-shadow 還容許使用兩個可選的屬性——inset 關鍵字屬性和 spread 屬性（用於擴張或收縮陰影）。

若是你但願兼容舊版 Android、Mobile Safari 和 Safari 瀏覽器，那麼 box-shadow 須要加上 -webkit- 廠商前綴。

box-shadow 屬性接受六個值：帶長度單位的 x-offset 和 y-offset、可選的帶長度單位的 blur-radius、可選的 inset 關鍵字、可選的帶長度單位的 spread 值及 color 值。若是不指定 blur-radius 和 spread 的值，則設爲0。

1. 爲元素添加陰影

-webkit-box-shadow:分別輸入表示 x-offset、y-offset、blur-radius、spread 和color 的值（前四個值均帶長度單位）。
box-shadow: 分別輸入表示 x-offset、y-offset、blur-radius、spread 和color 的值。

2. 建立內陰影

-webkit-box-shadow:分別輸入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四個值均帶長度單位）。
-webkit-box-shadow: 輸入 inset，再輸入一個空格，分別輸入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四個值均帶長度單位）。
box-shadow:

3. 爲元素應用多重陰影

-webkit-box-shadow:

(1) 分別輸入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四個值均帶長度單位）。若是有必要能夠將 inset 關鍵字包含在內。

(2) 輸入,（逗號）。

(3) 對每種屬性使用不一樣的值重複上述步驟。

box-shadow:

4. 將box-shadow 改回默認值

-webkit-box-shadow: none;。
box-shadow: none;。

可使用負的spread 值，讓整個陰影比應用樣式的元素小一些。

inset關鍵字可讓陰影位於元素內部。

box-shadow 屬性是不繼承的。

14.6　應用多重背景

爲單個HTML元素指定多個背景是CSS3引入的一個特性。

1. 爲單個元素應用多重背景圖像

(1) 輸入 background-color: b，這裏的b 是但願爲元素應用的備用背景顏色。

(2) 輸入 background-image: u，這裏的u是絕對或相對路徑圖像引用的 URL 列表（用逗號分隔）。

(3) 輸入 background-position: p，這裏的p 是成對的 x-offset 和 y-offset（能夠是正的,也能夠是負的；帶長度單位或者關鍵字，如 center top）的集合，用逗號分隔。對於第 (2) 步中指定的每一個 URL，都應有一組 x-offset 和 y-offset。

(4) 輸入 background-repeat: r，這裏的r 是 repeat-x、repeat-y 或 no-repeat 值，用逗號分隔，第 (2) 步中指定的每一個 URL 對應一個值。

對於多重背景圖像，可使用標準的短形式語法，即便用逗號分隔每組背景參數.

指定多重背景不須要使用廠商前綴。

14.7　使用漸變背景

漸變背景也是 CSS3 中的新特性，經過它能夠在不使用圖像的狀況下建立從一種顏色到另外一種顏色的過渡。

使用 CSS 建立漸變有兩種主要的方式：線性漸變和徑向漸變，每種方式都有不一樣的必選參數和可選參數。除非指定一種顏色向另外一種顏色過渡的位置，不然瀏覽器會自行決定不一樣顏色之間的過渡。

根據漸進加強的原則，最好爲不支持背景漸變屬性的瀏覽器提供一個備用選項。在CSS 中，它能夠位於背景漸變規則的前面。

1. 建立備用背景顏色

輸入background: color 或者background- color: color，這裏的color 能夠是十六進制數、RGB 值以及其餘任何支持的顏色名稱，另外也可使用圖像。最好不要將 RGBA、HSL 或 HSLA 值做爲備用背景顏色，由於IE8 及之前的版本不支持。

2. 定義線性漸變background: linear-gradient(參數);

3. 定義徑向漸變background: radial-gradient(參數);

4. 指定顏色

輸入至少兩種顏色，每一個顏色之間用逗號分隔。指定的第一個顏色出如今漸變的開始位置，最後一個顏色出如今漸變的結束位置。對於徑向漸變，它們分別爲最裏邊的顏色和最外邊的顏色。

5. 指定顏色和顏色的中止位置

根據「指定顏色」中的說明進行操做。若是須要，對每一個顏色值指定一個百分數以控制顏色出如今漸變中的位置。這個值能夠是負數，也能夠是大於100% 的數。

14.8　爲元素設置不透明度

opacity: o，這裏的o 表示元素的不透明程度（兩位小數，不帶單位）。

opacity的默認值爲1。該屬性值可使用 0.00（徹底透明）至 1.00（徹底不透明）之間的兩位小數。例如，pacity:.09;、opacity: .2; 或者 opacity: 75;。小數點前的0是可選的。

opacity 屬性與使用 RGBA 或 HSLA設置的 alpha 透明背景色是兩個容易混淆的概念。opacity影響的是整個元素（包括其內容），而background-color: rgba(128,0,64,.6); 這樣的設置僅影響背景的透明度。

Internet Explorer 9 以前的版本並不原生支持 opacity 屬性，但對於它們，可使用專有的濾鏡效應.。

不管顯示成什麼樣子，opacity 屬性並非繼承的。opacity 的值小於 1 的元素的子元素也會受到影響，但這些子元素的opacity 值仍爲1。

14.9　生成內容的效果

:before 和 :after 僞元素與 content 屬性結合使用，從而建立所謂的生成內容（generated content）。生成內容指的是經過 CSS 建立的內容，而不是由HTML 生成的。

不過，生成內容並非爲頁面添加段落或標題。使用生成內容能夠添加符號，建立用於添加樣式的空內容元素，還能夠作不少其餘的事情。

14.10　使用sprite 拼合圖像

瀏覽器一般很快就能夠將文本顯示出來，但圖像每每會減慢頁面的加載速度。這一現象在移動設備上尤其明顯。爲了解決這一問題，能夠將多個圖像拼合成單個背景圖像（sprite），再經過 CSS 控制具體顯示圖像的哪一部分。其中的祕密就是 background-position 屬性。

第15章列表

HTML 包含專門用於建立項目列表的元素。你能夠建立普通列表、編號列表、符號列表以及描述列表，能夠在一個列表中嵌套另一個或多個列表。

全部的列表都是由父元素和子元素構成的。父元素用於指定要建立的列表的類型，子元素用於指定要建立的列表項目類型。

下面列出了三種列表類型以及組成它們的元素：

有序列表，ol爲父元素，li爲列表項。
無序列表，ul爲父元素，li爲列表項。
描述列表，dl 爲父元素，dt 和 dd 分別表明 dl 中的術語和描述。描述列表在 HTML5以前稱爲定義列表。

除非使用CSS另行指定，有序列表中的項目使用阿拉伯數字（一、二、3 等）進行編號。

默認狀況下，無序列表的項目前面顯示實心的圓點。

15.2　選擇標記

建立列表時，不管是有序列表仍是無序列表，均可以選擇出如今列表項目左側的標記的類型。

1. 選擇標記

在樣式表中，輸入 list-style-type:marker，這裏的marker是如下屬性值中的一種：

disc（圓點，●）、 circle（圓圈，○）、 square（方塊，■）、

decimal（數字，一、二、3……）、

upper-alpha（大寫字母，A、B、C……）、

lower-alpha（小寫字母，a、b、c……）、

upper-roman（大寫羅馬數字，Ⅰ、Ⅱ、Ⅲ、Ⅳ……）、

lower-roman（小寫羅馬數字，i、ii、iii、iv……）。

2.顯示無標記列表

在樣式表規則中，輸入list-style-type: none。

15.3　使用定製的標記

在目標列表或列表項的樣式規則中，

(1) 輸入list-style: none; 以取消常規的標記。

(2) 輸入 background: url(image.ext) repeat-type horizontal vertical;，其中

image.ext 是要做爲定製標記的圖像的路徑和文件名，

repeat-type 是 no-repeat、repeat-x 和repeat-y 中的一種（一般設爲 no-repeat），horizontal 和vertical 值表示列表項目中背景圖像的位置。

(3) 輸入 padding-left: value;，這裏的value 應不小於背景圖像的寬度，以防列表項目的內容覆蓋到定製標記的上面。

默認標記在默認狀況下位於列表項目的外面，而定製標記顯示在列表項目的裏面，由於定製標記是爲列表項目自己應用的背景圖像。

15.4　選擇列表的起始編號

1. 設置整個列表編號方案的初始值

在 ol 開始標籤中輸入 start="n"，這裏的n 表示列表的初始值。

2. 修改有序列表中某列表項目的編號

在目標 li 項目內輸入 value="n"，這裏的n 表明該列表項目的值。

若是使用 start 和 type，請始終使用數字。即使決定使用字母或羅馬數字對列表進行編號，也應使用數字。

value 屬性的值會覆蓋 start 屬性的值。

列表能夠包含一個以上的帶 value 屬性的 li。

15.5　控制標記的位置

控制標記位置list-style-position:

inside：讓標記縮在文本塊內。
outside：讓標記顯示在列表項目文本的左邊（這是默認的設置）。

若是列表項目中的文本顯得較爲擁擠，則能夠經過設置 line-height 增大文本行間距。

list-style-position屬性是繼承的。

15.6　 同時設置全部的列表樣式屬性

CSS 也爲 list-style 提供了簡寫形式。它將 list-style-type、list-style-position 和較少使用的list-style-image放到了一條屬性中。

能夠指定三個list-style 屬性，也能夠指定其中的任意一個，指定多個屬性時順序任意。任何沒有顯式地指定的屬性都會設爲其默認值（list-style-type 的默認值爲 disc，list-style-image 的默認值爲 none，list-style-position的默認值爲outside）。

list-style 屬性是繼承的。這也是咱們能夠將它應用到父元素ol 或 ul 上的緣由。

15.8　建立描述列表

HTML 提供了專門用於描述成組出現的名稱（術語）及其值之間關聯的列表類型。

根據 HTML5 規範，「由名稱及其值構成的組合能夠是術語和定義、元數據主題和值、問題和答案，以及任何其餘的名 – 值組。」

每一個列表都包含在 dl 中，其中的每一個名 – 值組都有一個或多個 dt 元素（名稱或術語）以及一個或多個 dd 元素（它們的值）。