第03章CSS樣式控制

1、第第3章章 CSS樣式控制樣式控制2022年4月9日星期六2Ch3 CSS樣式控制樣式控制3.1 基本概念基本概念3.2 CSS選擇器選擇器3.3 CSS的盒模型的盒模型3.4 定位與布局控制定位與布局控制3.5 邊框控制邊框控制3.6 字體和文本控制字體和文本控制3.7 背景控制背景控制2022年4月9日星期六33.1 基本概念基本概念lCSS的定義與作用的定義與作用CSS是是Cascading Style Sheets的縮寫，稱為級(jí)聯(lián)樣式表，也的縮寫，稱為級(jí)聯(lián)樣式表，也叫層疊式樣式表。叫層疊式樣式表。CSS的作用是控制的作用是控制HTML元素在瀏覽器中呈現(xiàn)的樣式，比如字體元素在瀏覽器中呈現(xiàn)

2、的樣式，比如字體大小、顏色、背景色以及背景圖像等。大小、顏色、背景色以及背景圖像等。l CSS的級(jí)聯(lián)控制的級(jí)聯(lián)控制內(nèi)聯(lián)式（內(nèi)聯(lián)式（Inline Styles） 嵌入式（嵌入式（Embedding a Style Block）外部鏈接式（外部鏈接式（Linking to a Style Sheet） 3.1.1 CSS的級(jí)聯(lián)控制的級(jí)聯(lián)控制內(nèi)聯(lián)式內(nèi)聯(lián)式l內(nèi)聯(lián)式是指直接在內(nèi)聯(lián)式是指直接在HTML元素內(nèi)通過元素內(nèi)通過style屬性設(shè)置元素的樣式屬性設(shè)置元素的樣式每個(gè)每個(gè)style內(nèi)可以包含一個(gè)或多個(gè)樣式屬性，其一般形式為：內(nèi)可以包含一個(gè)或多個(gè)樣式屬性，其一般形式為：ustyle=屬性名屬性名1: 值值

3、1; 屬性名屬性名2: 值值2; “屬性名與屬性值之間用冒號(hào)屬性名與屬性值之間用冒號(hào)“:”分隔，如果一個(gè)樣式中有多個(gè)屬性，各分隔，如果一個(gè)樣式中有多個(gè)屬性，各屬性之間用分號(hào)屬性之間用分號(hào)“;”隔開。隔開。 u例如：例如：定義了帶樣式的層定義了帶樣式的層l內(nèi)聯(lián)式適用于單獨(dú)控制某個(gè)元素樣式的情況。內(nèi)聯(lián)式適用于單獨(dú)控制某個(gè)元素樣式的情況。優(yōu)點(diǎn)是設(shè)置樣式直觀、方便優(yōu)點(diǎn)是設(shè)置樣式直觀、方便 ；缺點(diǎn)是無法一次性設(shè)置所有相同元素的樣式缺點(diǎn)是無法一次性設(shè)置所有相同元素的樣式 。l一般情況下，如果某個(gè)元素的樣式與其他元素的樣式不同，或者具有相同樣一般情況下，如果某個(gè)元素的樣式與其他元素的樣式不同，或者具有相同樣

4、式的元素比較少，可以采用內(nèi)聯(lián)式。式的元素比較少，可以采用內(nèi)聯(lián)式。 3.1.1 CSS的級(jí)聯(lián)控制的級(jí)聯(lián)控制嵌入式嵌入式 l嵌入式是指在嵌入式是指在與與之間定義的樣式。之間定義的樣式。例如：例如： h1 font-size:30pt; color:Red; h2 font-size:20pt; color:Blue; l嵌入式適用于控制一個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的多個(gè)元素。嵌入式適用于控制一個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的多個(gè)元素。 優(yōu)點(diǎn)：當(dāng)修改某些元素的樣式時(shí)，只需要修改優(yōu)點(diǎn)：當(dāng)修改某些元素的樣式時(shí)，只需要修改head部分部分style的的屬性。屬性。缺點(diǎn)：這種方式僅僅適用于修改當(dāng)前網(wǎng)頁(yè)內(nèi)具有相同樣式的元素缺

5、點(diǎn)：這種方式僅僅適用于修改當(dāng)前網(wǎng)頁(yè)內(nèi)具有相同樣式的元素，如果多個(gè)網(wǎng)頁(yè)內(nèi)的很多元素均采用相同的樣式，仍然需要分別，如果多個(gè)網(wǎng)頁(yè)內(nèi)的很多元素均采用相同的樣式，仍然需要分別在各個(gè)網(wǎng)頁(yè)內(nèi)重復(fù)定義。在各個(gè)網(wǎng)頁(yè)內(nèi)重復(fù)定義。3.1.1 CSS的級(jí)聯(lián)控制的級(jí)聯(lián)控制外部鏈接式外部鏈接式 l外部鏈接式是指在擴(kuò)展名為外部鏈接式是指在擴(kuò)展名為.css的文件中單獨(dú)保存樣式的定義。的文件中單獨(dú)保存樣式的定義。將樣式分類后放在單獨(dú)的將樣式分類后放在單獨(dú)的CSS文件中，然后在網(wǎng)頁(yè)中添加所引用的文件中，然后在網(wǎng)頁(yè)中添加所引用的CSS文件文件 。當(dāng)需要修改元素的樣式時(shí)，只需要修改當(dāng)需要修改元素的樣式時(shí)，只需要修改.css文件中的

6、樣式即可。文件中的樣式即可。 一旦修改了一旦修改了.css文件中的某個(gè)樣式，則凡是引用了該文件中的某個(gè)樣式，則凡是引用了該.css文件的網(wǎng)文件的網(wǎng)頁(yè)，都會(huì)自動(dòng)應(yīng)用新的樣式。頁(yè)，都會(huì)自動(dòng)應(yīng)用新的樣式。CSS文件中每個(gè)樣式定義的一般格式為文件中每個(gè)樣式定義的一般格式為 ：選擇符：選擇符 屬性屬性1:值值1; 屬屬性性2:值值2; l引用方式：直接拖放引用方式：直接拖放CSS文件到要引用樣式表的文件。文件到要引用樣式表的文件。3.1.1 CSS的級(jí)聯(lián)控制的級(jí)聯(lián)控制級(jí)聯(lián)控制級(jí)聯(lián)控制l如果某個(gè)元素既使用了外部鏈接式，又使用了嵌入式，同時(shí)也如果某個(gè)元素既使用了外部鏈接式，又使用了嵌入式，同時(shí)也定義了內(nèi)聯(lián)式

7、，而這些樣式的定義又發(fā)生了沖突，元素最終呈定義了內(nèi)聯(lián)式，而這些樣式的定義又發(fā)生了沖突，元素最終呈現(xiàn)的效果會(huì)是什么呢？現(xiàn)的效果會(huì)是什么呢？l實(shí)際上瀏覽器會(huì)按照文檔解析的順序，依次應(yīng)用樣式。實(shí)際上瀏覽器會(huì)按照文檔解析的順序，依次應(yīng)用樣式。 3.1.2 CSS的單位表示形式的單位表示形式l1.長(zhǎng)度單位長(zhǎng)度單位lCSS的長(zhǎng)度單位分為絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位兩種。的長(zhǎng)度單位分為絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位兩種。l絕對(duì)長(zhǎng)度單位有絕對(duì)長(zhǎng)度單位有px（像素）、（像素）、cm（厘米）、（厘米）、mm（毫米）、（毫米）、in（英寸）、（英寸）、pt（點(diǎn)，（點(diǎn)，1pt=1/72英寸）、英寸）、pc（1pc=12點(diǎn)）

8、。點(diǎn)）。一般來說，使用一般來說，使用“px”以及以及“%”作為長(zhǎng)度單位的網(wǎng)頁(yè)比較多。作為長(zhǎng)度單位的網(wǎng)頁(yè)比較多。l相對(duì)長(zhǎng)度單位常用有兩種，一種是（百分比）；相對(duì)長(zhǎng)度單位常用有兩種，一種是（百分比）；例如例如50%，另一種是，另一種是em，例如，例如0.1em。em指相對(duì)于父元素的字體大小比例，指相對(duì)于父元素的字體大小比例， 一般用來表示一行文字的一般用來表示一行文字的高度。高度。 控制字間距和行間距時(shí)，多數(shù)情況下都是使用控制字間距和行間距時(shí)，多數(shù)情況下都是使用“em”作為長(zhǎng)度單作為長(zhǎng)度單位。位。3.1.2 CSS的單位表示形式的單位表示形式l2.顏色單位顏色單位lCSS 3.0中，有中，有HEX

9、、RGB、RGBA、HSL、HSLA以及以及transparent等顏色表示形式。等顏色表示形式。 HEX：使用兩位十六進(jìn)制數(shù)表示：使用兩位十六進(jìn)制數(shù)表示RGB顏色，每個(gè)顏色通道的取值顏色，每個(gè)顏色通道的取值范圍均為范圍均為00-FF ； u例如例如“#3B04C5” RGB ：使用十進(jìn)制數(shù)表示顏色，格式為：使用十進(jìn)制數(shù)表示顏色，格式為rgb(R, G, B)，其中，其中R、G、B三個(gè)值都是三個(gè)值都是0255的整數(shù)或者范圍為的整數(shù)或者范圍為0%-100%的百分?jǐn)?shù)。的百分?jǐn)?shù)。u.foregroundcolor:rgb(255,0,0); RGBA ：格式為：格式為rgba(R，G，B，A)。它和

10、。它和rgb(R,G,B)的區(qū)別是的區(qū)別是多了一個(gè)多了一個(gè)alpha通道（即透明度）；通道（即透明度）； ubackground-color:rgba(255,0,0,0.5);3.1.2 CSS的單位表示形式的單位表示形式l2. 顏色單位顏色單位HSL ：使用：使用CSS 3.0支持的色調(diào)（支持的色調(diào)（Hue）、飽和度（）、飽和度（Saturation）和亮）和亮度（度（Lightness）來表示顏色，格式為）來表示顏色，格式為HSL(H,S,L) 。ubackground-color:hsl(0,100%,50%);HSLA ：前三個(gè)值的含義與：前三個(gè)值的含義與HSL相同，最后一個(gè)相同，最

11、后一個(gè)A表示透明度（表示透明度（Alpha），取值為），取值為0-1之間之間 。ubackground-color:hsla(0,100%,50%,0.5);transparent ：transparent是全透明黑色（是全透明黑色（black）的速記法，即一個(gè)）的速記法，即一個(gè)類似類似rgba(0,0,0,0)這樣的值。這樣的值。u在在CSS 3.0中，中，transparent被延伸到任何一個(gè)有被延伸到任何一個(gè)有color值的屬性上。例如：值的屬性上。例如：u.testcolor:transparent;border:1px solid transparent;background:tra

12、nsparent;3.1.2 CSS的單位表示形式的單位表示形式l3、角度、時(shí)間和頻率單位、角度、時(shí)間和頻率單位lCSS 3.0新增了表示各種角度變換的單位，這些單位有新增了表示各種角度變換的單位，這些單位有deg（度）、度）、rad（弧度）、（弧度）、turn（旋轉(zhuǎn)圈數(shù)）、（旋轉(zhuǎn)圈數(shù)）、grad（梯度，一圈（梯度，一圈為為400grad） 。“30deg”表示順時(shí)針旋轉(zhuǎn)表示順時(shí)針旋轉(zhuǎn)30度，度，“-30deg”表示逆時(shí)針旋轉(zhuǎn)表示逆時(shí)針旋轉(zhuǎn)30度度 l時(shí)間單位主要用于控制動(dòng)畫顯示，表示時(shí)間的單位有時(shí)間單位主要用于控制動(dòng)畫顯示，表示時(shí)間的單位有ms（毫（毫秒）、秒）、s（秒）（秒） 。l頻率主要

13、用于表示語音閱讀文本的音調(diào)。頻率越小音調(diào)越低，頻率主要用于表示語音閱讀文本的音調(diào)。頻率越小音調(diào)越低，頻率越大音調(diào)越高。表示頻率的單位有頻率越大音調(diào)越高。表示頻率的單位有Hz（赫茲）、（赫茲）、kHz（千（千赫）等。赫）等。 3.1.3 設(shè)計(jì)和引用CSSl1. 利用輔助窗口使用利用輔助窗口使用CSSl利用可視化輔助窗口設(shè)置利用可視化輔助窗口設(shè)置CSS樣式的最簡(jiǎn)單的辦法是先利用拖樣式的最簡(jiǎn)單的辦法是先利用拖放方式，將網(wǎng)頁(yè)開發(fā)界面變?yōu)槿鐖D放方式，將網(wǎng)頁(yè)開發(fā)界面變?yōu)槿鐖D3-1所示的形式。所示的形式。 l【應(yīng)用樣式應(yīng)用樣式】、【管理樣式管理樣式】以及以及【CSS屬性屬性】窗口如圖窗口如圖3-2所示。所示

14、。 圖3-1 主菜單【視圖】下的子菜單項(xiàng)圖3-2 CSS輔助設(shè)計(jì)窗口3.1.3 設(shè)計(jì)和引用CSSl1. 利用輔助窗口使用利用輔助窗口使用CSS利用利用【屬性屬性】窗口的窗口的“style”設(shè)置標(biāo)記的設(shè)置標(biāo)記的CSS樣式樣式聯(lián)合使用聯(lián)合使用【管理樣式管理樣式】、【應(yīng)用樣式應(yīng)用樣式】和和【CSS屬性屬性】窗口設(shè)置窗口設(shè)置CSS樣式；樣式；l2. 直接編輯直接編輯CSS代碼設(shè)置代碼設(shè)置CSS【例例3-1】演示演示CSS樣式的基本用法。樣式的基本用法。運(yùn)行效果：運(yùn)行效果：3.2 CSS選擇器lCSS選擇器是指網(wǎng)頁(yè)中元素的樣式定義規(guī)則，也稱為選擇器是指網(wǎng)頁(yè)中元素的樣式定義規(guī)則，也稱為CSS樣式樣式規(guī)則。

15、規(guī)則。 一般格式為：選擇器一般格式為：選擇器屬性屬性1:值值1; 屬性屬性2:值值2; 格式中的格式中的“選擇器選擇器”用來指定樣式定義的符號(hào)。用來指定樣式定義的符號(hào)。u例如：例如：h1 color:red; font-size:14px; lCSS 3.0提供的選擇器分為基本選擇器、關(guān)系選擇器、特性選提供的選擇器分為基本選擇器、關(guān)系選擇器、特性選擇器、偽元素選擇器以及偽類選擇器等。擇器、偽元素選擇器以及偽類選擇器等。3.2.1 基本選擇器l基本選擇器是基本選擇器是CSS中最常用的選擇器，包括通配符選擇器、元中最常用的選擇器，包括通配符選擇器、元素選擇器、類選擇器、素選擇器、類選擇器、id選擇

16、器以及群組選擇器等。如表選擇器以及群組選擇器等。如表3-1所所示。示。 3.2.1 基本選擇器l1.通配符選擇器（通配符選擇器（*）通配符選擇器是指選擇通配符選擇器是指選擇HTML文檔內(nèi)的所有元素。文檔內(nèi)的所有元素。u例如：例如：*color:Red; u這行代碼的含義是設(shè)置這行代碼的含義是設(shè)置HTML文檔中的所有元素顏色為紅色。文檔中的所有元素顏色為紅色。l2.元素選擇器（元素選擇器（E） 元素選擇器是指以元素選擇器是指以HTML文檔的元素名作為選擇器，此處的文檔的元素名作為選擇器，此處的E表表示任何一個(gè)示任何一個(gè)HTML元素，如元素，如html、body、p、div等。等。 u例如：例如：

17、p font-size: 14px;u這行代碼表示所有這行代碼表示所有p元素的字體大小全部為元素的字體大小全部為14像素。像素。3.2.1 基本選擇器l3.類選擇器（類選擇器（.classname、E.classname） l類選擇器指自定義的類選擇器指自定義的CSS類。類。一般形式為：一般形式為：.自定義類名自定義類名屬性屬性1:值值1; 屬性屬性2:值值2; l注意，自定義類名的左邊有一個(gè)點(diǎn)注意，自定義類名的左邊有一個(gè)點(diǎn)“.”。 l在在HTML文檔中，使用文檔中，使用class=“classname”設(shè)置設(shè)置“.classname”定義的樣式定義的樣式 。引用時(shí)自定義類名的左邊不包含。引用

18、時(shí)自定義類名的左邊不包含點(diǎn)點(diǎn)“.”。l類選擇器還可以結(jié)合元素選擇器來使用，類選擇器還可以結(jié)合元素選擇器來使用，一般形式為：一般形式為：E.類名類名屬性屬性1:值值1; 屬性屬性2:值值2; 其中，其中，E表示元素名（表示元素名（Element），），myclass指自定義類名。指自定義類名。 3.2.1 基本選擇器l4. id選擇器（選擇器（#idname） lid選擇器的定義和用法與類選擇器的定義和用法從形式上來看選擇器的定義和用法與類選擇器的定義和用法從形式上來看非常相似，但是這兩者之間在概念上有明顯的區(qū)別，在同一個(gè)非常相似，但是這兩者之間在概念上有明顯的區(qū)別，在同一個(gè)HTML網(wǎng)頁(yè)中，多個(gè)

19、元素可以使用同一個(gè)自定義類，但不能有網(wǎng)頁(yè)中，多個(gè)元素可以使用同一個(gè)自定義類，但不能有相同的相同的id特性名。特性名。例如在例如在CCS中定義：中定義：#customId1 color:red在在HTML文檔中，用文檔中，用id=“myid”設(shè)置設(shè)置id選擇器定義的樣式（不包選擇器定義的樣式（不包含含“#”前綴）。前綴）。 l利用利用CSS定義樣式時(shí)，如果在一個(gè)元素的樣式定義中，既有定義樣式時(shí)，如果在一個(gè)元素的樣式定義中，既有HTML元素，又有自定義類和自定義元素，又有自定義類和自定義ID，則自定義，則自定義ID的優(yōu)先級(jí)的優(yōu)先級(jí)最高，其次是自定義類，最高，其次是自定義類，HTML元素的優(yōu)先級(jí)最低

20、。元素的優(yōu)先級(jí)最低。 3.2.1 基本選擇器l5.群組選擇器（群組選擇器（s1,s2,.,sN）l如果有多個(gè)選擇器定義的樣式相同，則可以使用群組選擇器來如果有多個(gè)選擇器定義的樣式相同，則可以使用群組選擇器來簡(jiǎn)化定義，這樣就可以一次性地設(shè)置所選元素的樣式。簡(jiǎn)化定義，這樣就可以一次性地設(shè)置所選元素的樣式。 例如：例如：div1, div2, div3 color:redl【例例3-2】演示基本選擇器的用法。演示基本選擇器的用法。該例子的完整源程序見該例子的完整源程序見S02文件夾下的文件夾下的BasicSelector.css和和BasicSelector.htm 。運(yùn)行效果：運(yùn)行效果：3.2.2

21、 關(guān)系選擇器l關(guān)系選擇器也叫層次選擇器。如表關(guān)系選擇器也叫層次選擇器。如表3-2所示。所示。 3.2.2 關(guān)系選擇器l1.后代選擇器（后代選擇器（E F）l后代選擇器也稱為包含選擇器，用于選擇某元素的一個(gè)或多個(gè)后代選擇器也稱為包含選擇器，用于選擇某元素的一個(gè)或多個(gè)后代元素，包括具有多層次包含關(guān)系的元素。后代元素，包括具有多層次包含關(guān)系的元素。 一般格式為：選擇符一般格式為：選擇符1 選擇符選擇符2 選擇符選擇符n 屬性屬性1:值值1; 屬性屬性2:值值2; 屬性屬性n:值值n;注意，各選擇符之間用空格分隔。注意，各選擇符之間用空格分隔。 u例如：例如：p b color:redu在這行代碼中，

22、如果在這行代碼中，如果b為為p的后代元素，則選中它的后代元素，則選中它 。l后代選擇器定義的樣式規(guī)則并不是僅僅適用于選擇后代選擇器定義的樣式規(guī)則并不是僅僅適用于選擇HTML元素元素，也可以將其應(yīng)用到自定義類、自定義，也可以將其應(yīng)用到自定義類、自定義id以及任何樣式選擇器以及任何樣式選擇器中。中。 3.2.2 關(guān)系選擇器l【例例3-3】演示后代選擇器的用法。將演示后代選擇器的用法。將ul的后代的后代ul中的中的li全部顯全部顯示為紅色背景示為紅色背景 。 3.2.2 關(guān)系選擇器l2.子選擇器（子選擇器（EF） l子元素選擇器只能選擇某元素的子元素，其中子元素選擇器只能選擇某元素的子元素，其中E為

23、父元素，而為父元素，而F為子元素，為子元素，EF表示選擇表示選擇E元素下的所有子元素元素下的所有子元素F，但不包括孫，但不包括孫元素等更深層次的元素。元素等更深層次的元素。l【例例3-4】演示子選擇器的用法。當(dāng)選擇綠色背景、文字為演示子選擇器的用法。當(dāng)選擇綠色背景、文字為“04”的元素時(shí)，將其子元素全部用紅色背景顯示出來的元素時(shí)，將其子元素全部用紅色背景顯示出來 。3.2.2 關(guān)系選擇器l3.相鄰兄弟選擇器（相鄰兄弟選擇器（E+F） l相鄰兄弟選擇器選擇相鄰兄弟選擇器選擇E元素和元素和F元素相鄰，而且元素相鄰，而且F和和E具有相同具有相同的父元素的所有元素。的父元素的所有元素。l【例例3-5】

24、演示相鄰兄弟選擇器的用法演示相鄰兄弟選擇器的用法 3.2.2 關(guān)系選擇器l4.兄弟選擇器（兄弟選擇器（EF） l兄弟選擇器是兄弟選擇器是CSS 3.0新增加的一種選擇器，用于選擇某元素新增加的一種選擇器，用于選擇某元素后面的所有兄弟元素。換句話說，選擇的條件是后面的所有兄弟元素。換句話說，選擇的條件是F元素和元素和E元素元素屬于同一父元素，并且屬于同一父元素，并且F元素在元素在E元素之后。元素之后。 l【例例3-6】演示兄弟選擇器的用法演示兄弟選擇器的用法 3.2.3 特性選擇器l特性選擇器（特性選擇器（Attribute Selectors）用于在標(biāo)記內(nèi)匹配某些特）用于在標(biāo)記內(nèi)匹配某些特性名

25、，從而得到對(duì)應(yīng)的元素。性名，從而得到對(duì)應(yīng)的元素。l特性選擇器的格式是元素后跟中括號(hào)，中括號(hào)內(nèi)為所選的特性特性選擇器的格式是元素后跟中括號(hào)，中括號(hào)內(nèi)為所選的特性名。名。l表表3-3列出了列出了CSS 3.0支持的特性選擇器。支持的特性選擇器。3.2.3 特性選擇器l1. Eattl選擇所有具有選擇所有具有att特性的特性的E元素，而不考慮特性的值。元素，而不考慮特性的值。下面代碼的含義是選擇所有聲明了下面代碼的含義是選擇所有聲明了class特性的特性的a元素，并將選中元素，并將選中元素的顏色設(shè)置為紅色：元素的顏色設(shè)置為紅色：uaclasscolor:#f00;下面的代碼將所有帶有下面的代碼將所有

26、帶有alt特性的特性的img元素的顏色設(shè)置為紅色：元素的顏色設(shè)置為紅色：uimgalt color:#f00;下面是稍微復(fù)雜一點(diǎn)的例子，用于選擇同時(shí)帶下面是稍微復(fù)雜一點(diǎn)的例子，用于選擇同時(shí)帶href和和title特性的特性的a元素：元素：uahreftitle font-weight: bold;3.2.3 特性選擇器l2. Eatt=vall選擇具有選擇具有att特性且特性值等于特性且特性值等于val的的E元素。元素。例如：例如：ahref=http:/ font-size: 115%;l3Eatt=vall選擇具有選擇具有att特性且特性值為一用空格分隔的單詞，其中一個(gè)單詞等于特性且特性值

27、為一用空格分隔的單詞，其中一個(gè)單詞等于val的的E元素。元素。例如：例如： pclass=warning font-weight: bold;下面的下面的p標(biāo)記演示了基本用法：標(biāo)記演示了基本用法：u一路小心一路小心u在這行代碼中，由于在這行代碼中，由于class包含單詞包含單詞“warning”，所以該，所以該p元素將被選中。元素將被選中。3.2.3 特性選擇器l4. Eatt|=vall選擇具有選擇具有att特性性且特性值為一用連接符分隔的字符串，并以特性性且特性值為一用連接符分隔的字符串，并以val開頭的開頭的E元素。元素。例如：例如： *lang|=en color: white;這條規(guī)

28、則將會(huì)選擇特性這條規(guī)則將會(huì)選擇特性lang的值的值“en”或者或者“en-”開頭的元素。開頭的元素。就是說，它可以匹配：就是說，它可以匹配：uHello!uGreetings!uGday!3.2.3 特性選擇器l5. Eatt=vall選擇具有選擇具有att特性且特性值為以特性且特性值為以val開頭的開頭的E元素。元素。例如：例如： ptitle=val color:#FF0000;l6Eatt$=vall選擇具有選擇具有att特性且特性值為以特性且特性值為以val結(jié)尾的字符串的結(jié)尾的字符串的E元素。元素。例如：例如： ptitle$=val color:#FF0000;l7Eatt*=val

29、l選擇具有選擇具有att特性且特性值為包含特性且特性值為包含val的字符串的的字符串的E元素。元素。例如：例如：id*=abcmargin-right:10px; width:200px; height:200px;3.2.4 偽元素選擇器l在在CSS 2.1中，偽元素選擇器（中，偽元素選擇器（Pseudo-Element Selectors）和偽類選擇器（和偽類選擇器（Pseudo-Classes Selectors）都是用一個(gè)冒號(hào)）都是用一個(gè)冒號(hào)“:”作為分隔符；作為分隔符；l在在CSS 3.0中，為了將為元素選擇器和偽類選擇器區(qū)分，改為中，為了將為元素選擇器和偽類選擇器區(qū)分，改為將偽元素

30、選擇器全部用兩個(gè)冒號(hào)將偽元素選擇器全部用兩個(gè)冒號(hào)“:”分隔。分隔。 l表表3-4列出了列出了CSS 3.0支持的偽元素選擇器。支持的偽元素選擇器。3.2.4 偽元素選擇器l1E:first-letterl設(shè)置元素內(nèi)的第一個(gè)字符的樣式，一般用于配合設(shè)置元素內(nèi)的第一個(gè)字符的樣式，一般用于配合CSS的的font-size屬性和屬性和float屬性制作首字下沉的效果。屬性制作首字下沉的效果。 注意，此偽元素僅作用于塊元素。注意，此偽元素僅作用于塊元素。 l內(nèi)聯(lián)元素必須先通過內(nèi)聯(lián)元素必須先通過CSS的的display屬性將其設(shè)置為塊級(jí)元素屬性將其設(shè)置為塊級(jí)元素才可以使用該偽元素選擇器。才可以使用該偽元素

31、選擇器。例如：例如： p:first-letter float:left;font-size:40px;font-weight:bold;line-height:1; 3.2.4 偽元素選擇器l2E:first-linel設(shè)置元素內(nèi)容第一行的樣式。設(shè)置元素內(nèi)容第一行的樣式。 例如：例如：p:first-line color:#090; l3.E:beforel設(shè)置在元素顯示前發(fā)生的內(nèi)容，一般和設(shè)置在元素顯示前發(fā)生的內(nèi)容，一般和content屬性一起使用屬性一起使用例如：例如： p:beforeposition:absolute;background:#fff;color:#000;conten

32、t:如果你看到這段文字，說明你的瀏覽器同時(shí)支持如果你看到這段文字，說明你的瀏覽器同時(shí)支持E:before和和E:before;font-size:14px;3.2.4 偽元素選擇器l4E:afterl設(shè)置在元素顯示后發(fā)生的內(nèi)容，一般將它和設(shè)置在元素顯示后發(fā)生的內(nèi)容，一般將它和CSS的的content屬屬性一起使用性一起使用 l5. E:selectionl選擇頁(yè)面中突出顯示的部分，包括可編輯文本字段中的文本。選擇頁(yè)面中突出顯示的部分，包括可編輯文本字段中的文本。此偽元素可以應(yīng)用于此偽元素可以應(yīng)用于color和和background-color屬性。屬性。 例如：例如： p:selectionb

33、ackground:#000;color:#f00;3.2.5 偽類選擇器l偽類選擇器也稱為虛類選擇器。偽類選擇器也稱為虛類選擇器。l1. 結(jié)構(gòu)偽類結(jié)構(gòu)偽類通過結(jié)構(gòu)偽類，可以基于文檔樹中無法使用簡(jiǎn)單選擇器或連結(jié)符選擇的通過結(jié)構(gòu)偽類，可以基于文檔樹中無法使用簡(jiǎn)單選擇器或連結(jié)符選擇的額外信息進(jìn)行選擇。額外信息進(jìn)行選擇。l2. 目標(biāo)偽類目標(biāo)偽類目標(biāo)偽類選擇引用目標(biāo)偽類選擇引用 URI 的目標(biāo)元素。段標(biāo)識(shí)符用于標(biāo)識(shí)頁(yè)面中的位置的目標(biāo)元素。段標(biāo)識(shí)符用于標(biāo)識(shí)頁(yè)面中的位置，使用數(shù)字符號(hào)以及隨后的錨點(diǎn)標(biāo)識(shí)符組成，使用數(shù)字符號(hào)以及隨后的錨點(diǎn)標(biāo)識(shí)符組成 。超鏈接虛類是專用于超鏈接標(biāo)記的選擇符，使用虛類可以為超鏈接

34、虛類是專用于超鏈接標(biāo)記的選擇符，使用虛類可以為4種狀態(tài)的種狀態(tài)的超鏈接定義不同的顯示樣式。超鏈接定義不同的顯示樣式。uA:link未被訪問過的超鏈接樣式未被訪問過的超鏈接樣式uA:visited已被訪問過的超鏈接樣式已被訪問過的超鏈接樣式uA:active 當(dāng)超鏈接處于選中狀態(tài)的樣式當(dāng)超鏈接處于選中狀態(tài)的樣式uA:hover當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接上的樣式當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接上的樣式3.2.5 偽類選擇器l3. 求反偽類求反偽類l求反偽類采用簡(jiǎn)單選擇器作為參數(shù)，選擇未被該參數(shù)選擇的元求反偽類采用簡(jiǎn)單選擇器作為參數(shù)，選擇未被該參數(shù)選擇的元素。素。下面的代碼選擇與簡(jiǎn)單選擇器下面的代碼選擇與簡(jiǎn)單選擇

35、器s不匹配的不匹配的E元素：元素：E:not(s) 3.3 CSS的盒模型l3.3.1 盒模型簡(jiǎn)介盒模型簡(jiǎn)介l在在CSS 3.0中，規(guī)定中，規(guī)定HTML元素的盒模型由元素的盒模型由4個(gè)區(qū)域組成。個(gè)區(qū)域組成。content：指顯示元素內(nèi)容的區(qū)域。：指顯示元素內(nèi)容的區(qū)域。content的外邊界包圍的矩形的外邊界包圍的矩形區(qū)域稱為區(qū)域稱為“content-box”。padding：內(nèi)邊距。：內(nèi)邊距。padding的外邊界包圍的矩形區(qū)域稱為的外邊界包圍的矩形區(qū)域稱為“padding-box”。內(nèi)邊距區(qū)域是指。內(nèi)邊距區(qū)域是指padding-box減去減去content-box構(gòu)成的矩形環(huán)區(qū)域。構(gòu)成的矩形

36、環(huán)區(qū)域。border：邊框。：邊框。border的外邊界包圍的矩形區(qū)域稱為的外邊界包圍的矩形區(qū)域稱為“border-box”。邊框區(qū)域是指。邊框區(qū)域是指border-box減去減去padding-box構(gòu)成的矩形構(gòu)成的矩形環(huán)區(qū)域。環(huán)區(qū)域。margin：外邊距。指圖中虛線包圍的矩形區(qū)域減去：外邊距。指圖中虛線包圍的矩形區(qū)域減去border-box構(gòu)成的矩形環(huán)區(qū)域。構(gòu)成的矩形環(huán)區(qū)域。3.3.2 外邊距（margin）lmargin屬性用于設(shè)置元素邊框的所有屬性用于設(shè)置元素邊框的所有4個(gè)方向的外邊距屬性，個(gè)方向的外邊距屬性，控制環(huán)繞某元素的矩形區(qū)域與其他元素之間的距離?？刂骗h(huán)繞某元素的矩形區(qū)域與其他

37、元素之間的距離。包括包括margin-top、margin-right、 margin-bottom和和 margin-left四個(gè)屬性。四個(gè)屬性。左、右兩邊的外邊距對(duì)所有元素都起作用，而上、下兩邊的外邊左、右兩邊的外邊距對(duì)所有元素都起作用，而上、下兩邊的外邊距只對(duì)塊級(jí)元素才起作用。距只對(duì)塊級(jí)元素才起作用。l基本用法：基本用法：margin屬性的值一般使用屬性的值一般使用px或或em作為長(zhǎng)度單位，也可以是百分作為長(zhǎng)度單位，也可以是百分比或者比或者“auto”，還可以是負(fù)值。，還可以是負(fù)值。3.3.2 外邊距（margin）l基本用法：基本用法：如果提供全部如果提供全部4個(gè)參數(shù)值，將按上、右、下

38、、左的順序作用于四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。邊。如果只提供一個(gè)參數(shù)值，將用于全部的四邊如果只提供一個(gè)參數(shù)值，將用于全部的四邊 ；如果提供兩個(gè)參數(shù)值，第一個(gè)用于上、下，第二個(gè)用于左、右。如果提供兩個(gè)參數(shù)值，第一個(gè)用于上、下，第二個(gè)用于左、右。 如果提供如果提供3個(gè)參數(shù)值，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)參數(shù)值，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。個(gè)用于下。 也可以使用也可以使用marigin-top、margin-right、 margin-bottom和和 margin-left這這4個(gè)屬性分別設(shè)置各個(gè)邊的外邊距。個(gè)屬性分別設(shè)置各個(gè)邊的外邊距。 l讓塊級(jí)元素

39、居中顯示讓塊級(jí)元素居中顯示 只需要將左右兩邊的外邊距設(shè)置為只需要將左右兩邊的外邊距設(shè)置為auto即可。即可。 3.3.3 內(nèi)邊距（padding）lpadding用于控制元素內(nèi)部與元素邊框之間的間距。用于控制元素內(nèi)部與元素邊框之間的間距。包括包括padding-top、padding-right、padding-bottom和和padding-left這這4個(gè)屬性。個(gè)屬性。padding屬性可以使用長(zhǎng)度值或百分比值，但不允許為負(fù)值。屬性可以使用長(zhǎng)度值或百分比值，但不允許為負(fù)值。lpadding的用法和的用法和margin的用法相似。的用法相似。 3.3.4 盒大?。╞ox-sizeing）lb

40、ox-sizeing屬性主要用于設(shè)置如何計(jì)算元素的屬性主要用于設(shè)置如何計(jì)算元素的width和和height屬性。取值屬性。取值有：有： （1）content-box：在：在CSS中，元素的中，元素的width屬性和屬性和height屬性默認(rèn)是屬性默認(rèn)是指元素內(nèi)容（指元素內(nèi)容（content）的寬度和高度，而不是指元素內(nèi)容、內(nèi)邊距、）的寬度和高度，而不是指元素內(nèi)容、內(nèi)邊距、邊框以及外邊距的總和。邊框以及外邊距的總和。 u.t1 box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; （2）border-

41、box：該屬性值的含義是：該屬性值的含義是padding和和border被包含在元素被包含在元素的的width和和height之內(nèi)。元素的實(shí)際寬度就等于設(shè)置的之內(nèi)。元素的實(shí)際寬度就等于設(shè)置的width值，即使定值，即使定義有義有border和和padding也不會(huì)改變?cè)氐膶?shí)際寬度，但會(huì)改變?cè)貎?nèi)容也不會(huì)改變?cè)氐膶?shí)際寬度，但會(huì)改變?cè)貎?nèi)容的寬度。的寬度。u.t2 box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; 3.3.4 盒大?。╞ox-sizeing）l【例例3-7】演示外邊距和內(nèi)邊距的基本

42、用法，在演示外邊距和內(nèi)邊距的基本用法，在IE 9.0瀏覽器中瀏覽器中運(yùn)行的效果如圖運(yùn)行的效果如圖3-17所示。所示。3.3.5 盒陰影效果（box-shadow）lbox-shadow用于設(shè)置邊框盒的陰影效果。常用形式為：用于設(shè)置邊框盒的陰影效果。常用形式為：box-shadow：none 無陰影無陰影(默認(rèn)默認(rèn))box-shadow：inset , , n1, n2 設(shè)置外設(shè)置外陰影。陰影。box-shadow：inset , , n1, n2 inset 設(shè)設(shè)置內(nèi)陰影置內(nèi)陰影udx、dy分別表示對(duì)象的陰影水平偏移值和陰影垂直偏移值，這兩個(gè)分別表示對(duì)象的陰影水平偏移值和陰影垂直偏移值，這兩個(gè)

43、值都可以為負(fù)值。值都可以為負(fù)值。un1表示對(duì)象的陰影模糊值，表示對(duì)象的陰影模糊值，n2表示對(duì)象的陰影擴(kuò)散值，這兩個(gè)值都表示對(duì)象的陰影擴(kuò)散值，這兩個(gè)值都不允許負(fù)值，可省略。不允許負(fù)值，可省略。ucolor表示外延陰影的顏色。表示外延陰影的顏色。3.3.5 盒陰影效果（box-shadow）l【例例3-8】演示演示box-shadow的基本用法。的基本用法。3.4 定位與布局控制l3.4.1 寬度和高度控制l定義元素樣式時(shí)，使用最頻繁的就是元素的大小控制。定義元素樣式時(shí)，使用最頻繁的就是元素的大小控制。lWidth、Height：分別用于檢索或設(shè)置對(duì)象的寬度、高度。：分別用于檢索或設(shè)置對(duì)象的寬度、

44、高度。語法為：語法為：width： | | autoheigh： | | auto uauto（默認(rèn)）表示對(duì)象的大小取決于其它屬性值；（默認(rèn)）表示對(duì)象的大小取決于其它屬性值；表示用表示用長(zhǎng)度值來定義寬度或高度，不允許負(fù)值；長(zhǎng)度值來定義寬度或高度，不允許負(fù)值；表示用百分表示用百分比來定義寬度或高度，不允許負(fù)值比來定義寬度或高度，不允許負(fù)值 3.4.1 寬度和高度控制l2. min-width、min-height、max-width、max-heightlmin-width和和max-width屬性分別表示對(duì)象的最小寬度、最大屬性分別表示對(duì)象的最小寬度、最大寬度。寬度。lmin-width的默認(rèn)

45、值為的默認(rèn)值為0，max-width的默認(rèn)值為的默認(rèn)值為none。l【例例3-9】演示寬度、高度、最大最小寬高的用法演示寬度、高度、最大最小寬高的用法 。3.4.2 定位控制l頁(yè)面中的元素定位分為流布局（頁(yè)面中的元素定位分為流布局（static）、絕對(duì)定位（）、絕對(duì)定位（absolute）、相對(duì)定位（）、相對(duì)定位（relative）和固定布局（）和固定布局（fixed）。）。 l流布局是頁(yè)面中的元素按照從左到右、從上到下的順序顯示，流布局是頁(yè)面中的元素按照從左到右、從上到下的順序顯示，各元素之間不重疊。如果不設(shè)置元素定位方式，則網(wǎng)頁(yè)默認(rèn)為各元素之間不重疊。如果不設(shè)置元素定位方式，則網(wǎng)頁(yè)默認(rèn)為流

46、布局（流布局（static）方式。）方式。 l1.定位屬性（定位屬性（position） position屬性有屬性有4個(gè)值：個(gè)值：static、relative、absolute和和fixed 。相對(duì)位置（相對(duì)位置（relative） ：相對(duì)定位（：相對(duì)定位（relative）是指相對(duì)于正常流）是指相對(duì)于正常流的偏移量的偏移量 。采用相對(duì)定位時(shí)，元素在頁(yè)中顯示的位置由。采用相對(duì)定位時(shí)，元素在頁(yè)中顯示的位置由left、top以及以及z-index屬性決定，具有相同屬性決定，具有相同z-index值的元素不重疊。值的元素不重疊。 3.4.2 定位控制l1. 定位屬性（定位屬性（position）

47、l絕對(duì)位置（絕對(duì)位置（absolute） ：坐標(biāo)絕對(duì)定位（：坐標(biāo)絕對(duì)定位（absolute）在頁(yè)中）在頁(yè)中的位置由元素的左上角（的位置由元素的左上角（left，top）、右下角（）、右下角（right，bottom）、寬和高（）、寬和高（width，height）以及）以及z-index屬性決定。屬性決定。l固定定位（固定定位（fixed） ：這種方式也是絕對(duì)定位，但是它與：這種方式也是絕對(duì)定位，但是它與absolute不同的是不同的是fixed是相對(duì)于瀏覽器窗口進(jìn)行定位，而不是是相對(duì)于瀏覽器窗口進(jìn)行定位，而不是相對(duì)于父元素進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，用相對(duì)于父元素進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，用f

48、ixed定位的對(duì)象定位的對(duì)象也不會(huì)隨著滾動(dòng)條滾動(dòng)。也不會(huì)隨著滾動(dòng)條滾動(dòng)。 3.4.2 定位控制l2. Z索引（索引（z-index）lz-index稱為稱為Z索引或者索引或者Z順序，用于控制元素重疊時(shí)顯示的順順序，用于控制元素重疊時(shí)顯示的順序，其效果就像多張紙（透明或不透明）按順序重疊在一起一序，其效果就像多張紙（透明或不透明）按順序重疊在一起一樣。樣。z-index值可以為正值也可以為負(fù)值，值可以為正值也可以為負(fù)值，z-index大的元素會(huì)覆蓋大的元素會(huì)覆蓋z-index值小的元素內(nèi)容，即值小的元素內(nèi)容，即z-index值大的元素顯示在上面。值大的元素顯示在上面。必須定義必須定義positi

49、on屬性值為屬性值為absolute、relative或或fixed，z-index才起作用。才起作用。3.4.2 定位控制l【例例3-10】將塊級(jí)元素（例如將塊級(jí)元素（例如div）在瀏覽器窗口中水平、垂）在瀏覽器窗口中水平、垂直都居中顯示，在直都居中顯示，在IE 9.0瀏覽器中運(yùn)行的效果如圖所示。瀏覽器中運(yùn)行的效果如圖所示。3.4.2 定位控制l【例例3-11】將塊級(jí)元素（例如將塊級(jí)元素（例如div）顯示在瀏覽器窗口或者某）顯示在瀏覽器窗口或者某個(gè)容器的四個(gè)角，在個(gè)容器的四個(gè)角，在IE 9.0瀏覽器中運(yùn)行的效果如圖所示。瀏覽器中運(yùn)行的效果如圖所示。3.4.2 定位控制l【例例3-12】設(shè)計(jì)如

50、圖所示的布局效果。設(shè)計(jì)如圖所示的布局效果。 3.4.2 定位控制l【例例3-13】演示演示z-index的基本用法，在的基本用法，在IE 9.0瀏覽器中運(yùn)行的瀏覽器中運(yùn)行的效果如圖所示。效果如圖所示。3.4.3 布局控制l布局控制主要用于控制元素顯示的樣式、是否浮動(dòng)、溢出時(shí)如布局控制主要用于控制元素顯示的樣式、是否浮動(dòng)、溢出時(shí)如何處理等。何處理等。l1. 顯示（顯示（display）ldisplay控制元素是否顯示以及是作為塊元素顯示還是在線性控制元素是否顯示以及是作為塊元素顯示還是在線性流內(nèi)顯示。流內(nèi)顯示。 l在在CSS 3.0中，中，diplay可選的屬性值非常多?？蛇x的屬性值非常多。在段

51、落或者標(biāo)題中，如果希望讓文字居中，利用在段落或者標(biāo)題中，如果希望讓文字居中，利用text-align屬性屬性即可實(shí)現(xiàn)。即可實(shí)現(xiàn)。 如果希望將塊級(jí)元素居中排列，只需要將其左右外邊距設(shè)置為如果希望將塊級(jí)元素居中排列，只需要將其左右外邊距設(shè)置為“auto”，并指定寬度即可，并指定寬度即可 。3.4.3 布局控制l2. 可見性（可見性（visibility）lvisibility屬性用于控制元素在頁(yè)面中是否隱藏，但不論是顯示屬性用于控制元素在頁(yè)面中是否隱藏，但不論是顯示還是隱藏，都會(huì)占據(jù)空間。還是隱藏，都會(huì)占據(jù)空間。取值有：取值有：visible、hidden、collapse。collapse主要用

52、來隱藏表主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內(nèi)容使用。對(duì)于表格外的格的行或列。隱藏的行或列能夠被其他內(nèi)容使用。對(duì)于表格外的其他對(duì)象，其作用等同于其他對(duì)象，其作用等同于hidden。l3.浮動(dòng)和清除（浮動(dòng)和清除（float、clear） lfloat屬性用于定義元素在哪個(gè)方向浮動(dòng)。屬性用于定義元素在哪個(gè)方向浮動(dòng)?？蛇x項(xiàng)有：可選項(xiàng)有：none（默認(rèn)值。元素不浮動(dòng)），（默認(rèn)值。元素不浮動(dòng)），left（元素向左浮動(dòng)（元素向左浮動(dòng)，其他元素流向該元素的右邊），其他元素流向該元素的右邊），right（元素向右浮動(dòng)，其他元（元素向右浮動(dòng)，其他元素流向該元素的左邊）。素流向該元素的左邊）。3.4.

53、3 布局控制l3. 浮動(dòng)和清除（浮動(dòng)和清除（float、clear）lclear定義元素的哪個(gè)方向不允許出現(xiàn)浮動(dòng)元素。定義元素的哪個(gè)方向不允許出現(xiàn)浮動(dòng)元素?？蛇x項(xiàng)有可選項(xiàng)有none（默認(rèn)值，兩邊都可以有浮動(dòng)元素）、（默認(rèn)值，兩邊都可以有浮動(dòng)元素）、right（清（清除右側(cè)的浮動(dòng)元素）、除右側(cè)的浮動(dòng)元素）、left（清除左側(cè)的浮動(dòng)元素）和（清除左側(cè)的浮動(dòng)元素）和both（清（清除左右兩側(cè)的浮動(dòng)元素）。除左右兩側(cè)的浮動(dòng)元素）。l4. 剪切（剪切（clip）lclip屬性定義一個(gè)剪切矩形，按屬性定義一個(gè)剪切矩形，按“上上-右右-下下-左左”的順序提供從的順序提供從元素左上角為元素左上角為(0,0)坐

54、標(biāo)計(jì)算的四個(gè)邊的偏移值，其中任何一個(gè)坐標(biāo)計(jì)算的四個(gè)邊的偏移值，其中任何一個(gè)值都可用值都可用auto替換，替換，auto表示此邊不剪切。表示此邊不剪切。 例如：例如：clip:rect(auto 50px 20px auto);3.4.3 布局控制l【例例3-14】演示演示clip的基本用法，在的基本用法，在IE 9.0瀏覽器中運(yùn)行的效瀏覽器中運(yùn)行的效果如圖所示。果如圖所示。3.4.3 布局控制l5.溢出（溢出（overflow、overflow-x、overflow-y） loverflow屬性用于設(shè)置當(dāng)元素的內(nèi)容溢出顯示區(qū)域時(shí)，如何處屬性用于設(shè)置當(dāng)元素的內(nèi)容溢出顯示區(qū)域時(shí)，如何處理溢出的內(nèi)容

55、。選項(xiàng)有：理溢出的內(nèi)容。選項(xiàng)有：auto：瀏覽器自動(dòng)判斷是否顯示滾動(dòng)條以便查看溢出的內(nèi)容。：瀏覽器自動(dòng)判斷是否顯示滾動(dòng)條以便查看溢出的內(nèi)容。hidden：剪切掉溢出的內(nèi)容。：剪切掉溢出的內(nèi)容。scroll：瀏覽器會(huì)始終顯示滾動(dòng)條，以便查看溢出的內(nèi)容。：瀏覽器會(huì)始終顯示滾動(dòng)條，以便查看溢出的內(nèi)容。visible：默認(rèn)值。不剪切，溢出部分會(huì)自動(dòng)呈現(xiàn)在元素框之外。：默認(rèn)值。不剪切，溢出部分會(huì)自動(dòng)呈現(xiàn)在元素框之外。loverflow-x和和overflw-y這兩個(gè)屬性是這兩個(gè)屬性是CSS 3.0新增加的屬性。新增加的屬性。overflow-x用于檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定寬度時(shí)如用于檢索或設(shè)置當(dāng)

56、對(duì)象的內(nèi)容超過其指定寬度時(shí)如何處理內(nèi)容。何處理內(nèi)容。overflw-y用于檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指用于檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度時(shí)如何處理內(nèi)容。定高度時(shí)如何處理內(nèi)容。 3.5 邊框控制l邊框控制是指對(duì)盒模型中邊框的寬度、樣式、顏色、圓角、陰邊框控制是指對(duì)盒模型中邊框的寬度、樣式、顏色、圓角、陰影、圖像等進(jìn)行設(shè)置。影、圖像等進(jìn)行設(shè)置。l3.5.1 復(fù)合屬性（復(fù)合屬性（border） border屬性是一個(gè)復(fù)合屬性，用于一次性設(shè)置邊框的寬度、樣式屬性是一個(gè)復(fù)合屬性，用于一次性設(shè)置邊框的寬度、樣式、顏色。、顏色。語法為：語法為： border： border-width | bord

57、er-style | border-color 如果指定一個(gè)值，則該值表示邊框的寬度；如果指定兩個(gè)值，則如果指定一個(gè)值，則該值表示邊框的寬度；如果指定兩個(gè)值，則第第1個(gè)值表示邊框?qū)挾龋趥€(gè)值表示邊框?qū)挾?，?個(gè)值表示邊框樣式；如果指定三個(gè)值個(gè)值表示邊框樣式；如果指定三個(gè)值，則分別表示邊框?qū)挾取⑦吙驑邮?、邊框顏色。，則分別表示邊框?qū)挾?、邊框樣式、邊框顏色?.5.2 邊框?qū)挾群蜆邮絣border-width和和border-style屬性為元素的邊框設(shè)置寬度和樣屬性為元素的邊框設(shè)置寬度和樣式，這兩個(gè)屬性都按式，這兩個(gè)屬性都按“上、右、下、左上、右、下、左”的順序進(jìn)行定義。的順序進(jìn)行定義。 lbo

58、rder-width可以使用可以使用border-top-width、border-right-width、border-bottom-width和和border-left-width分別為單個(gè)分別為單個(gè)邊定義邊框的寬度。邊定義邊框的寬度。如果邊框樣式是如果邊框樣式是“none”，則邊框?qū)挾葹?，則邊框?qū)挾葹?；邊框?qū)挾炔辉试S指定負(fù)長(zhǎng)度值，默認(rèn)寬度為邊框?qū)挾炔辉试S指定負(fù)長(zhǎng)度值，默認(rèn)寬度為0，只有當(dāng)邊框?qū)挾?，只有?dāng)邊框?qū)挾却笥诖笥?而且而且border-style的值不是的值不是none時(shí)邊框才可能出現(xiàn)。時(shí)邊框才可能出現(xiàn)。 lborder-style屬性也可以使用屬性也可以使用border-top

59、-style、border-right-style、border-bottom-style和和border-left-style分別為分別為單個(gè)邊定義邊框樣式。單個(gè)邊定義邊框樣式。 3.5.3 邊框顏色（border-color）lborder-color屬性用于設(shè)置元素屬性用于設(shè)置元素4條邊框的顏色?？梢允褂煤?jiǎn)條邊框的顏色?？梢允褂煤?jiǎn)寫形式設(shè)置一個(gè)元素的所有邊框中可見部分的顏色，也可以使寫形式設(shè)置一個(gè)元素的所有邊框中可見部分的顏色，也可以使用用border-top-color、border-right-color、border-bottom-color和和border-left-color分

60、別為分別為4個(gè)邊設(shè)置顏色。個(gè)邊設(shè)置顏色。 l如果如果border-width等于等于0或者或者border-style設(shè)置為設(shè)置為none，則，則border-color屬性不起作用。屬性不起作用。3.5.4 邊框圓角（border-radius）lborder-radius屬性用于設(shè)置或檢索對(duì)象使用圓角邊框。屬性用于設(shè)置或檢索對(duì)象使用圓角邊框。 該屬性可以提供該屬性可以提供2個(gè)參數(shù)，第個(gè)參數(shù)，第1個(gè)參數(shù)表示水平半徑，第個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)個(gè)參數(shù)表示垂直半徑。表示垂直半徑。 這這2個(gè)參數(shù)以個(gè)參數(shù)以“/”分隔，其中每個(gè)參數(shù)允許設(shè)置分隔，其中每個(gè)參數(shù)允許設(shè)置14個(gè)值。如果省個(gè)值。如果省略