第4章CSS3選擇器《HTML5+CSS3網(wǎng)站設計基礎教程》（第2版）學習目標/Target掌握CSS3中新增加的屬性選擇器，能夠運用屬性選擇器為頁面中的元素添加樣式。理解關系選擇器的用法，能夠準確判斷元素與元素間的關系。掌握常用的偽類選擇器，能夠為相同名稱的元素定義不同樣式。掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容。掌握CSS偽類，會使用CSS偽類實現(xiàn)超鏈接特效。章節(jié)概述/Summary選擇器是CSS3中一個重要的內(nèi)容，使用它可以大幅度提高開發(fā)人員書寫和修改樣式表的效率。實際上，在上一章中已經(jīng)介紹過一些常用的選擇器，這些選擇器基本上能夠滿足Web設計師常規(guī)的設計需求。本章將向讀者介紹CSS3中新增的多種選擇器。通過本章的學習，讀者可以更輕松的控制網(wǎng)頁元素。目錄/Contents0102屬性選擇器關系選擇器03偽類選擇器目錄/Contents04鏈接偽類05偽元素選擇器06階段案例—制作網(wǎng)頁設計軟件列表屬性選擇器014.1屬性選擇器屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。CSS3中新增了3種屬性選擇器：E[att^=value]、E[att$=value]和E[att*=value]，本節(jié)將詳細介紹這3種選擇器。4.1屬性選擇器掌握E[att^=value]屬性選擇器的用法，能夠選擇包含指定前綴字符的字符串。學習目標1.

E[att^=value]屬性選擇器4.1屬性選擇器1.

E[att^=value]屬性選擇器E[att^=value]屬性選擇器是指選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含前綴為value的子字符串。E是可以省略的，如果省略則表示可以匹配滿足條件的任意元素。4.1屬性選擇器掌握E[att$=value]屬性選擇器的用法，能夠選擇包含指定后綴字符的字符串。學習目標2.E[att$=value]屬性選擇器4.1屬性選擇器2.E[att$=value]屬性選擇器E[att$=value]屬性選擇器是指選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含后綴為value的子字符串。與E[att^=value]選擇器一樣，E元素可以省略，如果省略則表示可以匹配滿足條件的任意元素。例如：div[id$=section]表示匹配包含id屬性，且id屬性值是以“section”字符串結尾的div元素。4.1屬性選擇器掌握E[att*=value]屬性選擇器的用法，能夠選擇包含指定任意字符的字符串。學習目標3.E[att*=value]屬性選擇器4.1屬性選擇器3.E[att*=value]屬性選擇器E[att*=value]選擇器用于選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含value子字符串。該選擇器與前兩個選擇器一樣，E元素也可以省略，如果省略則表示可以匹配滿足條件的任意元素。例如：div[id*=section]表示匹配包含id屬性，且id屬性值包含“section”字符串的div元素。關系選擇器024.2關系選擇器CSS3中的關系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號“>”連接，兄弟選擇器由符號“+”和“~”連接，本節(jié)將詳細講解這兩種選擇器。4.2關系選擇器掌握子代選擇器的用法，能夠選擇某個元素的第一級子元素。學習目標1.子代選擇器（>）4.2關系選擇器1.子代選擇器（>）子代選擇器主要用來選擇某個元素的第一級子元素。例如：希望選擇只作為

h1元素子元素的

strong元素，可以這樣寫：h1>strong。h1strong>4.2關系選擇器掌握兄弟選擇器的用法，能夠使用臨近兄弟選擇器和普通兄弟選擇器選擇頁面中的元素。學習目標2.兄弟選擇器（+、-）4.2關系選擇器2.兄弟選擇器（+、-）兄弟選擇器用來選擇與某元素位于同一個父元素之中，且位于該元素之后的兄弟元素。該選擇器使用加號“+”來鏈接前后兩個選擇器。選擇器中的兩個元素有同一個父親，而且第二個元素必須緊跟第一個元素。臨近兄弟選擇器普通兄弟選擇器使用“~”來鏈接前后兩個選擇器。選擇器中的兩個元素有同一個父親，但第二個元素不必緊跟第一個元素。普通兄弟選擇器偽類選擇器034.3偽類選擇器偽類選擇器是CSS3中新增加的選擇器。常用的偽類選擇器有:root選擇器、:not選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器、:nth-child(n)選擇器、:nth-last-child(n)選擇器、:nth-of-type(n)選擇器、:nth-last-of-type(n)選擇器、:empty選擇器、:target選擇器。本節(jié)將對這些選擇器進行詳細講解。4.3偽類選擇器掌握:root選擇器的用法，能夠匹配文檔根元素。學習目標1.:root選擇器4.3偽類選擇器1.:root選擇器:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說使用“:root選擇器”定義的樣式，對所有頁面元素都生效。對于不需要該樣式的元素，可以單獨設置樣式進行覆蓋。4.3偽類選擇器掌握:not選擇器的用法，能夠排除指定的子結構元素。學習目標2.:not選擇器4.3偽類選擇器2.:not選擇器如果對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，可以使用:not選擇器。4.3偽類選擇器掌握:only-child選擇器的用法，能夠選擇父元素中唯一的一個子元素。學習目標3.:only-child選擇器4.3偽類選擇器:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說，如果某個父元素僅有一個子元素，則使用“:only-child選擇器”可以選擇這個子元素。3.:only-child選擇器4.3偽類選擇器掌握:first-child選擇器的用法，能夠為父元素中的第一個子元素設置樣式。掌握:last-child選擇器的用法，能夠為父元素中的最后一個子元素設置樣式。學習目標4.:first-child選擇器和:last-child選擇器4.3偽類選擇器:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個或者最后一個子元素設置樣式。4.:first-child選擇器和:last-child選擇器4.3偽類選擇器熟悉:nth-child(n)的用法，能夠選擇父元素中的第二個子元素。掌握:nth-last-child(n)選擇器的用法，能夠選擇父元素中的倒數(shù)第二個子元素。學習目標5.:nth-child(n)和:nth-last-child(n)選擇器4.3偽類選擇器使用:first-child選擇器和:last-child選擇器可以選擇某個父元素中第一個或最后一個子元素，但是如果用戶想要選擇第2個或倒數(shù)第2個子元素，這兩個選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴展。5.:nth-child(n)和:nth-last-child(n)選擇器6.:nth-of-type(n)和:nth-last-of-type(n)選擇器4.3偽類選擇器熟悉:nth-of-type(n)和:nth-last-of-type(n)選擇器的用法，能夠選擇父元素中的任意元素。學習目標4.3偽類選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類型的第n個子元素和倒數(shù)第n個子元素。6.:nth-of-type(n)和:nth-last-of-type(n)選擇器4.3偽類選擇器掌握:empty選擇器的用法，能夠選擇沒有子元素或文本內(nèi)容為空的所有元素。學習目標7.:empty選擇器4.3偽類選擇器:empty選擇器用來選擇沒有子元素或文本內(nèi)容為空的所有元素。7.:empty選擇器4.3偽類選擇器掌握:target選擇器用的用法，能夠為頁面中的元素制定樣式。學習目標8.:target選擇器4.3偽類選擇器:target選擇器用于為頁面中的某個target元素（該元素的id被當做頁面中的超鏈接來使用）指定樣式。只有用戶單擊了頁面中的超鏈接，并且跳轉到target元素后，:target選擇器所設置的樣式才會起作用。8.:target選擇器偽元素選擇器044.4偽元素選擇器所謂偽元素選擇器，是針對CSS中已經(jīng)定義好的偽元素使用的選擇器。CSS中常用的偽元素選擇器有:before偽元素選擇器和:after偽元素選擇器，下面將詳細介紹這兩種偽元素選擇器。4.4偽元素選擇器掌握:before偽元素選擇器的基本語法格式，能夠在元素的內(nèi)容前面插入內(nèi)容。學習目標1.:before偽元素選擇器4.4偽元素選擇器:before偽元素選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合content屬性來指定要插入的具體內(nèi)容。<元素>:before{ content:文字

或url();}1.:before偽元素選擇器4.4偽元素選擇器掌握:before偽元素選擇器的用法，能夠在元素之后插入內(nèi)容。學習目標2.

:after偽元素選擇器4.4偽元素選擇器:after偽元素選擇器用于在某個元素之后插入一些內(nèi)容，使用方法與:before選擇器相同。2.

:after偽元素選擇器鏈接偽類054.5鏈接偽類定義超鏈接時，為了提高用戶體驗，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在點擊前、點擊后和鼠標懸停時的樣式不同。在CSS中，通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)。本節(jié)將對鏈接偽類控制超鏈接的樣式進行詳細講解。4.5鏈接偽類熟悉超鏈接標記<a>的偽類能夠舉例說明標記<a>的偽類及其含義。掌握超鏈接標記<a>的偽類的用法，能夠為超鏈接制定不同的狀態(tài)。學習目標4.5鏈接偽類所謂偽類并不是真正意義上的類，他的名稱是由系統(tǒng)定義的，通常由標記名、類名或id名加“：”構成。超鏈接標記<a>的偽類含義a:link{CSS樣式規(guī)則;}未訪問時超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標經(jīng)過、懸停時超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標點擊不動時超鏈接的狀態(tài)4.5鏈接偽類注意：1、同時使用鏈接的4種偽類時，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。2、除了文本樣式之外，鏈接偽類還常常用于控制超鏈接的背景、邊框等樣式。階段案例——制作網(wǎng)頁設計軟件列表064.6階段案例——制作網(wǎng)頁設計軟件列表4.6.1分析效果圖1結構分析效果圖2樣式分析4.6階段案例——制作網(wǎng)頁設計軟件列表4.6.1分析效果圖1結構分析效果圖2樣式分析定義導航欄中<a>鏈接的樣式，包括訪問前后和訪問時兩種樣式。定義內(nèi)容介紹部分，將頁面加載完成時內(nèi)容部分的顯示狀態(tài)設為隱藏，并統(tǒng)一設置內(nèi)容部分的文字樣式，文字前的小圖標通過偽元素選擇器定義。為了突出內(nèi)容部分的文字效果，通過偽類選擇器搭配<em>標記進行定義。通過target選擇器將鏈接到的內(nèi)容設置為顯示，從而實現(xiàn)點擊導航中的某一款軟件時，顯示該軟件相對應的內(nèi)容介紹信息。4.6階段案例——制作網(wǎng)頁設計軟件列表4.6.2制作頁面結構4.6階段案例——制作網(wǎng)頁設計軟件列表4.6.3定義CSS樣式本章小結本章從CSS3新增的選擇器開始介紹，依次介紹了屬性選擇器、關系選擇器、偽類選擇器、偽元素選擇器等選擇器的使用方法。最后利用本周知識點實現(xiàn)了一個網(wǎng)頁設計軟件列表頁面的階段案例。選擇器是CSS3中很重要的組成部分，它實現(xiàn)了頁面內(nèi)對樣式的各種需求，本章僅僅演示了這些選擇器比較常用的功能和使用方法，讀者深入研究學習其他高級功能。本章小結第5章CSS盒子模型學習目標/Target掌握盒子的相關屬性，能夠制作常見的盒子模型效果。掌握背景屬性的設置方法，能夠設置背景顏色和圖像。理解漸變屬性的原理，能夠設置漸變背景。熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號。章節(jié)概述/Summary盒子模型是網(wǎng)頁布局的基礎，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素所呈現(xiàn)的效果。接下來，本章將對盒子模型的概念、盒子相關屬性進行詳細講解。目錄/Contents01盒子模型概述02盒子模型相關屬性03背景屬性04漸變屬性05階段案例——制作音樂排行榜盒子模型概述015.1盒子模型概述了解盒子模型，能夠說出盒子模型的概念和盒子模型中包含的內(nèi)容。學習目標1.認識盒子模型5.1盒子模型概述1.認識盒子模型什么是盒子模型？5.1盒子模型概述1.認識盒子模型聯(lián)想一下生活中常見的盒子？它們的共同特點5.1盒子模型概述1.認識盒子模型以手機盒子為例，分析盒子模型5.1盒子模型概述1.認識盒子模型當多個手機盒子放在一起時，它們之間的距離就是CSS盒子模型的外邊距5.1盒子模型概述1.認識盒子模型所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。5.1盒子模型概述了解div標記，能夠說出<div>標記的概念。熟悉div標記的用法，能夠將網(wǎng)頁分成多個模塊。學習目標2.div標記5.1盒子模型概述2.div標記1<div>標記是一個塊容器標記。2可以將網(wǎng)頁分割為獨立的部分，以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。3大多數(shù)HTML標記都可以嵌套在<div>標記中，<div>中還可以嵌套多層<div>。4可以替代大多數(shù)的塊級文本標記。5.1盒子模型概述2.div標記注意：1、<div>標記最大的意義在于和浮動屬性float配合，實現(xiàn)網(wǎng)頁的布局，這就是常說的DIV+CSS網(wǎng)頁布局。對于浮動和布局這里了解即可，后面的章節(jié)將會詳細介紹。2、<div>可以替代塊級元素如<h>、<p>等，但是它們在語義上有一定的區(qū)別。例如<div>和<h2>的不同在于<h2>具有特殊的含義，語義較重，代表著標題，而<div>是一個通用的塊級元素，主要用于布局。5.1盒子模型概述掌握盒子的寬高屬性，能夠對盒子的大小進行控制。學習目標3.盒子的寬與高5.1盒子模型概述3.盒子的寬與高網(wǎng)頁是由多個盒子排列而成的，每個盒子都有固定的大小，在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比，實際工作中最常用的是像素值。高度寬度5.1盒子模型概述3.盒子的寬與高結論盒子的總寬度=

width+左右內(nèi)邊距之和+左右邊框寬度之和+左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框寬度之和+上下外邊距之和盒子模型的總寬度與總高度注意：寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素無效（<img/>標記和<input/>除外）。盒子模型相關屬性025.2盒子模型相關屬性理解了盒子模型的結構后，要想自如地控制頁面中每個盒子的樣式，還需要掌握盒子模型的相關屬性，本節(jié)將對這些屬性進行詳細講解。5.2盒子模型相關屬性了解CSS常用的邊框屬性。，能夠列舉出常用的邊框屬性及其常用屬性值。掌握各個邊框屬性的用法，能夠為元素設置邊框想，例如邊框寬度、邊框顏色等。學習目標1.邊框屬性5.2盒子模型相關屬性1.邊框屬性為了分割頁面中不同的盒子，常常需要給元素設置邊框效果。設置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊下邊左邊];none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線邊框寬度border-width:上邊[右邊下邊左邊];像素值邊框顏色border-color:上邊[右邊下邊左邊];顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設置邊框border:四邊寬度四邊樣式四邊顏色;

圓角邊框border-radius:水平半徑參數(shù)/垂直半徑參數(shù);像素值或百分比圖片邊框border-images:圖片路徑裁切方式/邊框寬度/邊框擴展距離重復方式;

5.2盒子模型相關屬性1.邊框屬性none：沒有邊框solid：邊框為單實線dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實線*/

border-style:soliddotted;/*上下實線、左右點線*/border-style:soliddotteddashed;/*上實線、左右點線、下虛線*/5.2盒子模型相關屬性1.邊框屬性邊框寬度（border-width）屬性值在設置邊框寬度時，必須同時設置邊框樣式，如果未設置樣式或設置為none，則不論寬度設置為多少都無效。注意：常用取值單位為像素。border-width:5px;/*四邊寬度均為5像素*/border-width:5px3px;/*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px3px4px;/*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性5.2盒子模型相關屬性1.邊框屬性邊框顏色（border-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍色*/border-color:#f00#00f#0f0;/*上紅色、左右藍色、下綠色*/border-color綜合屬性5.2盒子模型相關屬性1.邊框屬性邊框顏色（border-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)CSS3在原邊框顏色屬性（border-color）的基礎上派生了4個邊框顏色屬性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colors5.2盒子模型相關屬性1.邊框屬性邊框顏色（border-color）屬性值p{

border-style:solid; border-width:10px; -moz-border-top-colors:#a0a#909#808#707#606#505#404#303; -moz-border-right-colors:#a0a#909#808#707#606#505#404#303; -moz-border-bottom-colors:#a0a#909#808#707#606#505#404#303; -moz-border-left-colors:#a0a#909#808#707#606#505#404#303;}例如：對段落文本<p>添加漸變邊框效果，示例代碼如下：5.2盒子模型相關屬性1.邊框屬性邊框綜合屬性（border）border-top:上邊框寬度樣式顏色;border-right:右邊框寬度樣式顏色;border-bottom:下邊框寬度樣式顏色;border-left:左邊框寬度樣式顏色;border:四邊寬度樣式顏色;例如：border:寬度,樣式,顏色寬度、樣式、顏色順序任意，不分先后5.2盒子模型相關屬性1.邊框屬性圓角邊框（border-radius）border-radius:參數(shù)1/參數(shù)2border-radius屬性同樣遵循值復制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設置1-4個參數(shù)值，用來表示四角圓角半徑的大小。5.2盒子模型相關屬性1.邊框屬性圖片邊框（border-image）border-image:border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat;屬性說明border-image-source指定圖片的路徑border-image-slice指定邊框圖像頂部、右側、底部、左側內(nèi)偏移量。border-image-width指定邊框寬度border-image-outset指定邊框背景向盒子外部延伸的距離。border-image-repeat指定背景圖片的平鋪方式5.2盒子模型相關屬性掌握各個邊距屬性的用法，能夠為元素設置內(nèi)邊距和外邊距。學習目標2.邊距屬性5.2盒子模型相關屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。內(nèi)邊距padding-top:上邊距;padding-right:右邊距;padding-bottom:下邊距;padding-left:左邊距;padding：四邊內(nèi)邊距;注意：內(nèi)邊距padding不允許使用負值。padding:5px/*四個方向內(nèi)邊距為5像素寬度*/padding:5px3px/*上下內(nèi)邊距為5像素，左右內(nèi)邊距為3像素*/padding:5px3px4px/*上內(nèi)邊距為5像素，左右內(nèi)邊距為3像素，下內(nèi)邊距為4像素*/5.2盒子模型相關屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距margin-top:上外邊距;margin-right:右外邊距;margin-bottom:下外邊距;margin-left:左外邊距;margin:上外邊距[右外邊距下外邊距左外邊距];margin:5px/*四邊外邊距為5像素寬度*/margin:5px3px/*上下外邊距為5像素，左右外邊距為3像素*/margin:5px3px4px/*外邊距：上為5像素，左右為3像素，下為4像素*/注意：和內(nèi)邊距不同，外邊距margin允許使用負值5.2盒子模型相關屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距當對塊級元素應用寬度屬性width，并將左右的外邊距都設置為auto，可使塊級元素水平居中，實際工作中常用這種方式進行網(wǎng)頁布局。margin:0auto/*利用margin實現(xiàn)塊元素水平居中*/margin:5pxauto/*利用margin實現(xiàn)塊元素水平居中，并且上下拉開5像素邊距*/5.2盒子模型相關屬性2.邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種。外邊距為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，通常先清除元素的默認內(nèi)外邊距。*{ padding:0;/*清除內(nèi)邊距*/ margin:0;/*清除外邊距*/}內(nèi)外邊距清除5.2盒子模型相關屬性掌握box-shadow屬性的用法，能夠為盒子添加陰影效果。學習目標3.box-shadow屬性5.2盒子模型相關屬性3.box-shadow屬性CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。box-shadow:像素值1像素值2像素值3像素值4顏色值陰影類型;參數(shù)值說明像素值1表示元素水平陰影位置，可以為負值（必選屬性）。像素值2表示元素垂直陰影位置，可以為負值（必選屬性）。像素值3陰影模糊半徑（可選屬性）。像素值4陰影擴展半徑，不能為負值（可選屬性）。顏色值陰影顏色（可選屬性）。陰影類型內(nèi)陰影（inset）/外陰影（默認）（可選屬性）。5.2盒子模型相關屬性3.box-shadow屬性CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。box-shadow:像素值1像素值2像素值3像素值4顏色值陰影類型;例如：

box-shadow:5px5px10px2px#999inset,-5px-5px10px2px#333inset;5.2盒子模型相關屬性掌握box-sizing屬性的用法，能夠寫出box-sizing屬性的語法格式。學習目標4.box-sizing屬性5.2盒子模型相關屬性box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框box-sizing:content-box/border-box;content-box：瀏覽器對盒模型的解釋遵從W3C標準，當定義width和height時，它的參數(shù)值不包括border和padding。border-box：當定義width和height時，border和padding的參數(shù)值被包含在width和height之內(nèi)。4.box-sizing屬性背景屬性035.3背景屬性網(wǎng)頁能通過背景圖像給讀者留下更深刻的印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設計中，合理控制背景顏色和背景圖像至關重要。接下來本節(jié)將詳細介紹CSS控制背景樣式的方法。5.3背景屬性掌握設置背景顏色的方法，能夠使用background-color屬性設置元素的背景顏色。掌握設置背景圖像的方法，能夠通過background-image屬性設置元素的背景圖像。學習目標5.3背景屬性1.設置背景顏色在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設置。background-color:背景顏色屬性顏色值，例：red、yellow#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)5.3背景屬性2.設置背景圖像在CSS中，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實現(xiàn)。background-image:背景圖像屬性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}5.3背景屬性掌握設置背景不透明度的方法，在網(wǎng)頁中能夠設置背景的不透明度。學習目標3.背景與圖片不透明度的設置5.3背景屬性3.背景與圖片不透明度的設置通過引入RGBA模式和opacity屬性，可以設置圖片的不透明度。RGBA模式rgba(r,g,b,alpha);例如：使用RGBA模式為p元素指定透明度為0.5，顏色為紅色的背景。p{background-color:rgba(255,0,0,0.5);}5.3背景屬性3.背景與圖片不透明度的設置通過引入RGBA模式和opacity屬性，可以設置圖片的不透明度。opacity屬性opacity：opacityValue;opacity屬性用于定義元素的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個介于0~1之間的浮點數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。5.3背景屬性掌握設置背景圖像平鋪的方法，能夠通過background-repeat屬性設置背景圖像的平鋪方式。掌握設置背景圖像位置的方法，能夠通過background-position設置背景圖像的位置。學習目標5.3背景屬性4.設置背景圖像平鋪平鋪屬性值含義repeat沿水平和豎直兩個方向平鋪（默認值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制。5.3背景屬性5.設置背景圖像位置如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將默認以元素的左上角為基準點顯示。background-position屬性：位置屬性取值含義單位數(shù)值設置圖像左上角在元素中的坐標，例如background-position:20px20px;預定義的關鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比0%0%：圖像左上角與元素的左上角對齊。50%50%：圖像50%50%中心點與元素50%50%的中心點對齊。20%30%：圖像20%30%的點與元素20%30%的點對齊。100%100%：圖像右下角與元素的右下角對齊，而不是圖像充滿元素。5.3背景屬性掌握設置背景圖像固定的方法，能夠通過background-attachment屬性設置背景圖像的固定方式。掌握設置背景圖像大小的方法，能夠通過background-size屬性設置背景圖像的大小。學習目標5.3背景屬性6.設置背景圖像固定如果希望背景圖像固定在屏幕的某一位置，不隨著滾動條移動，可以使用background-attachment屬性來設置。固定屬性取值含義scroll圖像隨頁面元素一起滾動（默認值）。fixed圖像固定在屏幕上，不隨頁面元素滾動。5.3背景屬性7.設置背景圖像大小在CSS3中，background-size屬性用于控制背景圖像的大小屬性值說明像素值設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto；百分比以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto；cover把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中；contain把圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域；5.3背景屬性掌握設置背景圖像顯示區(qū)域的方法，能夠通過background-origin屬性定義背景圖像的相對位置。掌握設置背景圖像裁剪區(qū)域的方法，能夠通過background-clip屬性定義背景圖像的裁剪區(qū)域。學習目標5.3背景屬性8.設置背景的顯示區(qū)域默認情況下，background-position屬性總是以元素左上角為坐標原點定位背景圖像，運用CSS3中的background-origin屬性可以自行定義背景圖像的相對位置。background-origin:屬性值;在上面的語法格式中，background-origin屬性有三種取值，分別表示不同的含義，具體解釋如下。padding-box：背景圖像相對于內(nèi)邊距區(qū)域來定位。border-box：背景圖像相對于邊框來定位。content-box：背景圖像相對于內(nèi)容框來定位。5.3背景屬性9.設置背景圖像的裁剪區(qū)域在CSS樣式中，background-clip屬性用于定義背景圖像的裁剪區(qū)域。background-clip:屬性值;在語法格式上，background-clip屬性和background-origin屬性的取值相似，但含義不同，具體解釋如下。border-box：默認值，從邊框區(qū)域向外裁剪背景。padding-box：從內(nèi)邊距區(qū)域向外裁剪背景。content-box：從內(nèi)容區(qū)域向外裁剪背景。5.3背景屬性掌握設置多重背景圖像的方法，能夠通過多個屬性設置多重背景圖像。學習目標10.設置多重背景圖像5.3背景屬性10.設置多重背景圖像在CSS3中，通過background-image、background-repeat、background-position和background-size等屬性提供多個屬性值可以實現(xiàn)多重背景圖像效果，各屬性值之間用逗號隔開。background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);例如：5.3背景屬性掌握使用background屬性綜合設置背景樣式的方法，能夠使用background屬性綜合設置背景樣式。學習目標11.背景復合屬性5.3背景屬性11.背景復合屬性CSS中的背景屬性也是一個復合屬性，可以將背景相關的樣式都綜合定義在一個復合屬性background中。background:[background-color][background-image][background-repeat][background-attachment][background-position][background-size][background-clip][background-origin];5.3背景屬性使用背景圖像屬性定義列表樣式list-style是一個復合屬性，用于控制列表項目符號的樣式。在實際網(wǎng)頁制作過程中，為了更高效地控制列表項目符號，通常將list-style的屬性值定義為none，然后通過為<li>設置背景圖像的方式實現(xiàn)不同的列表項目符號。多學一招:CSS3漸變屬性045.4CSS3漸變屬性在CSS3之前如果需要添加漸變效果，通常要設置背景圖像來實現(xiàn)。而CSS3中增加了漸變屬性，通過漸變屬性可以輕松實現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變和徑向漸變，本節(jié)將對這兩種常見的漸變方式進行講解。5.4CSS3漸變屬性掌握實現(xiàn)線性漸變的方法，能夠通過“background-image:linear-gradient（參數(shù)值）;”樣式設置線性漸變。學習目標1.線性漸變5.4CSS3漸變屬性在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結束顏色。運用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果。background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);1.線性漸變linear-gradient用于定義漸變方式為線性漸變，括號內(nèi)用于設定漸變角度和顏色值。5.4CSS3漸變屬性在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結束顏色。運用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果。1.線性漸變漸變角度漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度數(shù)值或關鍵詞。顏色值顏色值用于設置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結束顏色，起始顏色和結束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。5.4CSS3漸變屬性掌握實現(xiàn)徑向漸變的方法，能夠通過“background-image:radial-gradient（參數(shù)值）;”樣式設置徑向漸變。學習目標2.徑性漸變5.4CSS3漸變屬性2.徑性漸變徑向漸變是網(wǎng)頁中另一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點開始，依據(jù)橢圓或圓形形狀進行擴張漸變。運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);radial-gradient用于定義漸變的方式為徑向漸變，括號內(nèi)的參數(shù)值用于設定漸變形狀、圓心位置和顏色值。5.4CSS3漸變屬性2.徑性漸變徑向漸變是網(wǎng)頁中另一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點開始，依據(jù)橢圓或圓形形狀進行擴張漸變。運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。漸變形狀漸變形狀用來定義徑向漸變的形狀，其取值即可以是定義水平和垂直半徑的像素值或百分比，也可以是相應的關鍵詞。圓心位置圓心位置用于確定元素漸變的中心位置，使用“at”加上關鍵詞或參數(shù)值來定義徑向漸變的中心位置。顏色值“顏色值1”表示起始顏色，“顏色值n”表示結束顏色，起始顏色和結束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。5.4CSS3漸變屬性掌握實現(xiàn)重復漸變的方法，能夠通過“background-image:repeating-linear-gradient（參數(shù)值）;”樣式設置重復漸變，通過“background-image:repeating-radial-gradient（參數(shù)值）;”樣式設置重復徑向漸變。學習目標3.重復漸變5.4CSS3漸變屬性3.重復漸變在網(wǎng)頁設計中，經(jīng)常會遇到在一個背景上重復應用漸變模式的情況，這時就需要使用重復漸變。重復線性漸變重復徑向漸變在CSS3中，通過“background-image:repeating-linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復線性漸變的效果。background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);5.4CSS3漸變屬性3.重復漸變在網(wǎng)頁設計中，經(jīng)常會遇到在一個背景上重復應用漸變模式的情況，這時就需要使用重復漸變。重復線性漸變重復徑向漸變在CSS3中，通過“background-image:repeating-radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復徑向漸變的效果。background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);階段案例——制作音樂排行榜055.5階段案例——制作音樂排行榜1結構分析效果圖5.5.1分析效果圖2樣式分析5.5階段案例——制作音樂排行榜5.5.1分析效果圖1結構分析效果圖2樣式分析通過最外層的大盒子對頁面的整體控制，需要對其設置寬度、高度、圓角、邊框、漸變及內(nèi)邊距等樣式，實現(xiàn)唱片背景效果。整體控制列表內(nèi)容（ul），需要對其設置寬度、高度、圓角、陰影等樣式。設置5個列表項（li）的寬高、背景樣式屬性。其中第一個li需要添加多重背景圖像，最后一個li底部要圓角化，需要對它們單獨進行控制。5.5階段案例——制作音樂排行榜5.5.2制作頁面結構5.5階段案例——制作音樂排行榜5.5.3定義CSS樣式本章小結本章首先介紹了盒子模型的概念，盒子模型相關的屬性，然后講解了背景屬性和漸變屬性，最后運用所學知識制作了一個音樂排行榜效果。通過本章的學習，讀者應該能夠熟悉盒子模型的構成，熟練運用盒子模型相關屬性控制網(wǎng)頁中的元素，完成頁面中一些簡單模塊的制作。本章小結第6章浮動與定位《HTML5+CSS3網(wǎng)站設計基礎教程》（第2版）學習目標/Target理解元素的浮動，能夠為元素設置浮動樣式。熟悉清除浮動的方法，可以使用不同方法清除浮動。掌握元素的定位，能夠為元素設置常見的定位模式。章節(jié)概述/Summary默認情況下，網(wǎng)頁中的元素會按照從上到下或從左到右的順序一一羅列，如果按照這種默認的方式進行排版，網(wǎng)頁將會單調(diào)、混亂。為了使網(wǎng)頁的排版更加豐富、合理，在CSS中可以對元素設置浮動和定位樣式。本章將對元素的浮動和定位進行詳細講解。目錄/Contents01元素的浮動02元素的定位03元素的類型與轉換04階段案例—制作網(wǎng)頁焦點圖元素的類型與轉換046.4元素的類型與轉換在前面的章節(jié)中介紹CSS屬性時，經(jīng)常會提到“僅適用于塊級元素”，那么究竟什么是塊級元素，在HTML標記語言中元素又是如何分類的呢？接下來，本節(jié)將對元素的類型與轉換進行詳細講解。6.4元素的類型與轉換在CSS中一切都是盒子CSS有三種基本的布局機制：標準流、浮動、絕對定位、彈性盒子標準流：web網(wǎng)頁的制作，是一個“流”，必須從上至下、從左只右有順序的制作。默認所有的盒模型在標準流中布局，元素顯示的位置由其在HTML中的位置決定。標準流的特征：空白折疊現(xiàn)象一行內(nèi)有多個高度不同的元素時，底邊對齊自動換行標準流嚴格將元素分為兩個等級：塊級元素和行內(nèi)元素。其布局有各自嚴格的限制。可以使用浮動和絕對定位使元素擺脫標準流的限制6.4元素的類型與轉換了解元素的類型，能夠列舉常用的塊元素和常用的行位元素。熟悉塊元素和行內(nèi)元素的特點，能夠知道塊元素和行內(nèi)元素的使用范圍。學習目標1.元素的類型6.4元素的類型與轉換1.元素的類型HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素。在頁面中以區(qū)域塊的形式出現(xiàn)。每個塊元素通常都會獨自占據(jù)一整行且排斥其他元素?？梢詫ζ湓O置寬度、高度、對齊、以及頂和底邊距等屬性。不占有獨立的區(qū)域。僅僅靠自身的字體大小和圖像尺寸來支撐結構，內(nèi)聯(lián)元素只能容納文本或其他內(nèi)聯(lián)元素。不可以設置寬度、高度、對齊、以及頂和底邊距等屬性。塊元素行內(nèi)元素6.4元素的類型與轉換1.元素的類型HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素。<p><ul><h1>—<h6><ol><div><li>其中<div>標記是最典型的塊元素。常見

的塊元素6.4元素的類型與轉換1.元素的類型HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素。其中<span>標記是最典型的行內(nèi)元素。常見的

行內(nèi)元素<a><em><strong><span><b><u>6.4元素的類型與轉換1.元素的類型注意：在行內(nèi)元素中有幾個特殊的標記，一般稱它們?yōu)樾袃?nèi)塊級元素。——<img/>和<input/>，可以對它們設置寬高和對齊屬性、多個元素并排在一行顯示。6.4元素的類型與轉換了解<span>標記，能夠說出<span>標記和<div>標記的區(qū)別與共同點。掌握<span>標記的用法，能夠通過<span>標記定義網(wǎng)頁中特殊顯示的文本。學習目標2.<span>標記6.4元素的類型與轉換2.<span>標記1<span>標記是一個行內(nèi)標記。2<span>與</span>之間只能包含文本和各種行內(nèi)標記。3

<span>標記常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。4當其他行內(nèi)標記都不合適時，就可以使用<span>標記。6.4元素的類型與轉換掌握元素轉換和方法，能夠使用display屬性的常用值，將塊元素轉換為行內(nèi)元素，或將行內(nèi)元素轉換為塊元素。學習目標3.元素的轉換6.4元素的類型與轉換3.元素的轉換displayinlineblockinline-blocknone此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的display屬性值）。此元素將顯示為塊元素（塊元素默認的display屬性值）。此元素將顯示為行內(nèi)塊元素，可以對其設置寬高和對齊等屬性，但是該元素不會獨占一行。此元素將被隱藏，不顯示，也不占用頁面空間。元素的浮動016.1元素的浮動初學者在設計一個頁面時，通常會按照默認的排版方式，將頁面中的元素從上到下一一羅列。這樣的布局看起來呆板、不美觀，那么，如何對頁面重新排版，使頁面變得整齊、有序呢？這就需要為元素設置浮動。本節(jié)將對元素的浮動進行詳細講解。6.1元素的浮動掌握元素的浮動屬性float的用法，能夠設置元素的浮動。學習目標1.元素的浮動屬性float6.1元素的浮動1.元素的浮動屬性float究竟是什么是浮動？應用排列圖文排列論壇分享說到浮動，其實大家并不陌生6.1元素的浮動1.元素的浮動屬性float浮動屬性作為CSS的重要屬性，在網(wǎng)頁布局中至關重要。在CSS中，通過float屬性來定義浮動，所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。選擇器{float:屬性值;}屬性值描述left元素向左浮動right元素向右浮動none元素不浮動（默認值）浮動是CSS中常用的布局方式浮動盒子可以向左或向右移動，直到它的外邊緣碰到包含盒子的父類元素或另一個浮動盒子的邊框為止。6.1元素的浮動浮動元素脫離標準流，即不再受標準流的限制下例中的紅色盒子設置了浮動屬性則脫離標準流的限制，則藍色盒子即標準流中的第一個盒子，則被渲染在頁面的最上方。6.1元素的浮動<div>設置了浮動屬性，則<p>為標準流的第一個標簽，渲染在頁面的最上方，圖片擋住了p這個盒子，但是沒有擋住其中的文字6.1元素的浮動6.1元素的浮動思考：如果span標簽變成了浮動元素會怎么樣？6.1元素的浮動掌握清除浮動的方法，能夠為元素清除浮動。學習目標2.清除浮動6.1元素的浮動2.清除浮動為什么要清除浮動？嘗試接下來這個案例，并試想效果兩個<div>作為父標簽，<li>作為<div>的子標簽<div>沒有設置任何樣式，<li>設置向左浮動6.1元素的浮動推斷顯示效果：兩個<div>中各自的<li>應該各獨占一行實際顯示效果：第一個<div>中的最后一個<li>緊貼著第二個div中的第一個<li>因<div>標簽未設置高度屬性，<li>設置了向左浮動此時第二個div中的第一個<li>就向左貼靠第一個<div>中的最后一個<li>此時需要清除浮動，清除浮動并不是將浮動清除，而是將浮動帶來的影響清除清除浮動方法1：給祖先元素加上高度清除浮動方法2：clear屬性清除浮動方法3：overflow屬性清除浮動方法4：偽元素6.1元素的浮動overflow屬性026.2overflow屬性overflow屬性是CSS中的重要屬性。當盒子內(nèi)的元素超出盒子自身的大小時，內(nèi)容就會溢出，如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用overflow屬性。給此盒子設置overflow:hidden，子元素仍為浮動，則它可以被其子元素自動填充出高度，清除浮動帶來的影響選擇器{overflow:屬性值;}屬性值描述visible內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（默認值）hidden溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時產(chǎn)生滾動條，即自適應所要顯示的內(nèi)容scroll溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條6.1元素的浮動2.清除浮動在CSS中，使用clear屬性對父類盒子進行設置清除浮動。選擇器{clear:屬性值;}屬性值描述left不允許左側有浮動元素（清除左側浮動的影響）right不允許右側有浮動元素（清除右側浮動的影響）both同時清除左右兩側浮動的影響清除浮動方法4：偽元素.box::after{content:"";display:block;height:0;clear:both;visibility:hidden;}6.1元素的浮動元素的定位036.3元素的定位浮動布局雖然靈活，但是卻無法對元素的位置進行精確的控制。在CSS中，通過定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。下面，本節(jié)將對元素的定位屬性以及常用的幾種定位方式進行詳細講解。6.3元素的定位掌握元素的定位屬性，不僅能夠通過position屬性對元素進行定位，還能通過邊偏移屬性精確定位元素的位置。學習目標1.元素的定位屬性6.3元素的定位1.元素的定位屬性什么是定位？6.3元素的定位在CSS中，通過CSS定位（CSSposition）可以實現(xiàn)網(wǎng)頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。1.元素的定位屬性定位模式選擇器{position:屬性值；}值描述static靜態(tài)定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位6.3元素的定位在CSS中，通過CSS定位（CSSposition）可以實現(xiàn)網(wǎng)頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。1.元素的定位屬性邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比。邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側偏移量，定義元素相對于其父元素左邊線的距離right右側偏移量，定義元素相對于其父元素右邊線的距離6.3元素的定位掌握靜態(tài)定位，能夠通過static將元素的定位模式設置為靜態(tài)位置。學習目標2.靜態(tài)定位static6.3元素的定位2.靜態(tài)定位static靜態(tài)定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。任何元素在默認狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。6.3元素的定位掌握相對定位的方式，能夠通過relative對元素進行相對定位。學習目標3.相對定位relative6.3元素的定位3.相對定位relative相對定位是將元素相對于它在標準文檔流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。6.3元素的定位3.相對定位relative距離左邊150px距離上圖100px在文檔流中的位置仍然保留著6.3元素的定位了解絕對定位，能夠說出相對定位和絕對定位的區(qū)別。掌握實現(xiàn)絕對定位的方法。，能夠通過absolute將元素的定位模式設置為絕對定位。學習目標4.絕對定位absolute6.3元素的定位4.絕對定位absolute絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進行定位。top、left、right、bottom設置的值就相對于哪一條邊而言6.3元素的定位4.絕對定位absolute距離左邊150px距離頂部100px在文檔流中的位置沒被保存絕對定位的元素脫離標準流，標準流的規(guī)則合部不適用標準流中，margin:

0

auto可以使盒子水平居中，絕對定位的元素失效使用以下方法使絕對定位的元素水平居中：6.3元素的定位了解固定定位，能夠說出固定定位的定位方式。掌握實現(xiàn)絕對固定的方法。能夠通過fixed將元素的定位模式設置為固定定位。學習目標5.固定定位fixed6.3元素的定位5.固定定位fixed固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。6.粘性定位div.sticky{position:-webkit-sticky;position:sticky;top:0;padding:5px;background-color:#cae8ca;border:2pxsolid#4CAF50;}6.3元素的定位掌握調(diào)整重疊定位元素堆疊順序的方法能夠設置多個元素的堆疊順序。學習目標6.z-index層疊等級屬性6.3元素的定位6.z-index層疊等級屬性當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊，如右圖所示。定位導致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負整數(shù)和0。z-index的默認值是0。解決重疊問題階段案例——制作網(wǎng)頁焦點圖056.5階段案例——制作網(wǎng)頁焦點圖1結構分析效果圖6.5.1分析效果圖2樣式分析6.5階段案例——制作網(wǎng)頁焦點圖1結構分析效果圖6.5.1分析效果圖2樣式分析通過<div>對頁面進行整體控制，設置相對定位方式。通過<a>標記控制左右兩側的切換按鈕樣式及其位置，并設置左浮動樣式。通過<ul>控制切換圖標模塊，設置絕對定位方式。通過<li>控制切換小圖標，設置小圖標的顯示效果。6.5階段案例——制作網(wǎng)頁焦點圖6.5.2制作頁面結構6.5階段案例——制作網(wǎng)頁焦點圖6.5.3定義CSS樣式本章小結本章首先介紹了元素的浮動、不同浮動方向所呈現(xiàn)的效果、清除浮動的常用方法，然后講解了元素的定位屬性以及網(wǎng)頁中常見的幾種定位模式，最后講解了元素的類型及相互間的轉換。在本章的最后，使用浮動、定位進行布局，并通過元素間的轉換制作了一個網(wǎng)頁焦點圖模塊。通過本章的學習，讀者應該能夠熟練地運用浮動和定位進行網(wǎng)頁布局，掌握清除浮動的幾種常用方法，理解元素的類型與轉換。本章小結第9章CSS3高級應用《HTML5+CSS3網(wǎng)站設計基礎教程》（第2版）學習目標/Target理解過渡屬性，能夠控制過渡時間、動畫快慢等常見過渡效果。掌握CSS3中的變形屬性，能夠制作2D轉換、3D轉換效果。掌握CSS3中的動畫，能夠熟練制作網(wǎng)頁中常見的動畫效果。章節(jié)概述/Summary在傳統(tǒng)的Web設計中，當網(wǎng)頁中需要顯示動畫或特效時，需要使用JavaScript腳本或者Flash來實現(xiàn)。在CSS3中，提供了對動畫的強大支持，可以實現(xiàn)旋轉、縮放、移動和過渡等效果。本章將對CSS3中的過渡、變形和動畫進行詳細講解。目錄/Contents01過渡02變形03動畫04階段案例——制作工作天氣預報過渡019.1過渡CSS3提供了強大的過渡屬性，它可以在不使用Flash動畫或者JavaScript腳本的情況下，為元素從一種樣式轉變?yōu)榱硪环N樣式時添加效果，例如漸顯、漸弱、動畫快慢等。在CSS3中，過渡屬性主要包括transition-property、transition-duration、transition-timing-function、transition-delay，本節(jié)將分別對這些過渡屬性進行詳細講解。9.1過渡掌握transition-property屬性的使用方法，能夠指定應用過渡效果的CSS屬性的名稱。學習目標1.transition-property屬性9.1過渡1.transition-property屬性transition-property屬性用于指定應用過渡效果的CSS屬性的名稱，其過渡效果通常在用戶將指針移動到元素上時發(fā)生。當指定的CSS屬性改變時，過渡效果才開始。transition-property:none|all|property;屬性值描述none沒有屬性會獲得過渡效果。all所有屬性都將獲得過渡效果。property定義應用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔。9.1過渡掌握transition-duration屬性的使用方法，能夠設置過渡效果花費的時間。學習目標2.transition-duration屬性9.1過渡2.transition-duration屬性transition-duration屬性用于定義過渡效果花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms）。transition-duration:time;3.transition-timing-function屬性9.1過渡掌握transition-timing-function屬性的使用方法，能夠設置過渡效果的速度曲線。學習目標9.1過渡transition-timi