第8章CSS基礎(chǔ)語法

1、23.1 CSS概述v CSS指的是Cascading Style Sheets，即層疊樣式表，是一種設(shè)計(jì)網(wǎng)頁樣式及布局的技術(shù)。所謂“層疊”，實(shí)際上指的是將顯示樣式與顯示內(nèi)容分離。 33.1 CSS概述v 為了解決設(shè)計(jì)樣式和風(fēng)格的問題，1997年，W3C在頒布HTML4標(biāo)準(zhǔn)的同時(shí)也發(fā)布了樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1.0。 v 從2010年開始，W3C已開始了對(duì)CSS3的研發(fā)，現(xiàn)在大部分的瀏覽器已支持CSS3，下一版的CSS4仍處在開發(fā)過程中。43.1 CSS概述使用CSS有許多優(yōu)點(diǎn)，主要表現(xiàn)在：v 可以方便地控制頁面布局；v 整個(gè)網(wǎng)站可以統(tǒng)一風(fēng)格，只要整個(gè)網(wǎng)站使用統(tǒng)一的CSS文件即可；v 網(wǎng)站的

2、風(fēng)格維護(hù)起來簡單，只需要更改相應(yīng)的CSS文件；v 由于HTML文件基本上只包含內(nèi)容，而不包括樣式，因而結(jié)構(gòu)簡化，體積更小，下載更快，更加靈活，可讀性增強(qiáng)；v 瀏覽器的界面更友好5認(rèn)識(shí)CSS樣式使用CSS樣式的一個(gè)好處是通過定義某個(gè)樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號(hào)或者顏色等。6CSS代碼語法v CSS的定義是由三部分組成的，包括選擇器（selector）、屬性（properties）、屬性的取值（value）。其語法為：selectorproperty1:value;property2:value;propertyN:value其中v selector是選擇器，最常見的選擇器是

3、HTML標(biāo)簽；property是選擇器的屬性，value為選擇器的屬性值。多個(gè)選擇器屬性之間使用分號(hào)隔開7CSS代碼語法v 可以使用單個(gè)選擇器，也可以使用多個(gè)選擇器，選擇器之間用逗號(hào)隔開，即將一組屬性值應(yīng)用于多個(gè)選擇器，例如：h1,h2,pbackground-color:#00FF00;color:red8例1：css1.html:CSS使用示例使用示例-HTML選擇器選擇器body background-color: yellowh1,h2,p background-color: #00FF00;color: red 這是這是body內(nèi)的文字內(nèi)的文字 這是標(biāo)題這是標(biāo)題1文字文字 這是標(biāo)題這

4、是標(biāo)題2文字文字 這是段落文字這是段落文字98.2 在網(wǎng)頁上插入CSS樣式表從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。1.內(nèi)聯(lián)式：把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中2.嵌入式css樣式，就是可以把css樣式代碼寫在標(biāo)簽之間。1011128.2 在網(wǎng)頁上插入CSS樣式表外部式css樣式(也可稱為外聯(lián)式)：把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在內(nèi)（不是在標(biāo)簽內(nèi)）使用標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)注意：1、css樣式文件名稱以有意義的英文字母命名，如 main.css。2、rel=stylesheet

5、type=text/css 是固定寫法不可修改。3、標(biāo)簽位置一般寫在標(biāo)簽之內(nèi)。138.2 在網(wǎng)頁上插入CSS樣式表在使用樣式表的各種方法中，外部樣式表使用最為常見。使用外部樣式表有以下優(yōu)點(diǎn)：u多個(gè)樣式可以重復(fù)利用，一個(gè)外部CSS文件可以被多個(gè)網(wǎng)頁使用；u修改、維護(hù)簡單。當(dāng)需要修改樣式時(shí)，只需要修改CSS文件，不需要修改頁面源代碼；u可以有效地減少頁面的代碼量，提高網(wǎng)頁的加載速度，CSS可以駐留在緩存中，再次使用時(shí)不需要加載；u整個(gè)網(wǎng)站的風(fēng)格很容易統(tǒng)一，只要網(wǎng)站中的文件都鏈接同樣的CSS文件即可。 148.2 在網(wǎng)頁上插入CSS樣式表u除了可以使用標(biāo)記鏈接外部樣式表之外，還可以使用CSS提供的i

6、mport標(biāo)記導(dǎo)入樣式表，其格式如下： import url(“”);15css9.html:CSS使用示例使用示例-使用使用import標(biāo)記導(dǎo)入樣式表標(biāo)記導(dǎo)入樣式表 import url(css/style.css); 我是超級(jí)鏈接我是超級(jí)鏈接 我是我是DIV 我是段落我是段落 168.2 在網(wǎng)頁上插入CSS樣式表使用鏈接樣式表和使用import標(biāo)記導(dǎo)入樣式表的方法類似，但是二者仍有區(qū)別。主要再現(xiàn)在以下幾點(diǎn)：（1）屬于XHTML標(biāo)簽，import屬于CSS標(biāo)記。標(biāo)簽除了可以鏈接CSS文件之外，還可以鏈接其它的外部資源，而import標(biāo)記只能導(dǎo)入CSS文件。（2）當(dāng)頁面加載時(shí)，鏈接的外部資源會(huì)

7、同時(shí)被加載；而import標(biāo)記導(dǎo)入的CSS文件會(huì)等到頁面全部下載完成后再被加載，所以使用import標(biāo)記導(dǎo)入CSS的頁面有可能剛開始顯示時(shí)并沒有樣式。（3）import標(biāo)記只有IE5以上的才能支持，而標(biāo)簽無此限制178.2 在網(wǎng)頁上插入CSS樣式表u以上各種使用樣式表的優(yōu)先級(jí)順序?yàn)椋簝?nèi)嵌樣式表 內(nèi)部樣式表 外部樣式表 瀏覽器的默認(rèn)設(shè)置188.3 CSS選擇器每一條css樣式聲明（定義）由兩部分組成在 之前的部分就是“選擇器”，“選擇器”指明了 中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。v CSS中常用的選擇器包括v 標(biāo)簽選擇器v 類選擇器v id選擇器191標(biāo)簽選擇器（HT

8、ML選擇器）v 標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。v 所有的HTML標(biāo)簽都可以作為CSS的選擇器，HTML選擇器后是對(duì)應(yīng)的元素的屬性及屬性值，指定了HTML選擇器的樣式后，當(dāng)前頁面中的相應(yīng)元素會(huì)自動(dòng)套用定義的樣式。v HTML選擇器后的屬性必須是對(duì)應(yīng)的標(biāo)簽元素的有效屬性，否則屬性和屬性值無效，例如：p text-align:center; color:red將段落的對(duì)齊方式設(shè)置成居中對(duì)齊，文字顏色為紅色。202類選擇器v 如果要對(duì)頁面中的元素定義不同的格式，僅使用標(biāo)簽選擇器是不夠的，還需要類選擇器。v 類選擇器在選擇器之前需要加一個(gè)實(shí)心的圓點(diǎn)，表示選擇器的類型是類選擇器。其格式為：sel

9、ector.classname property1:value; property2:value; 212類選擇器例如：p.lefttext-align:leftp.centertext-align:center222類選擇器v 要使用類選擇器定義的樣式，需要在標(biāo)簽中利用class屬性指定，例如：這是居左顯示的段落 這是居中顯示的段落v 使用類選擇器時(shí)，也可以不指定具體的選擇器，直接使用“.”加類名，或者在“.”前添加“*”。這樣可以使不同的選擇器共享樣式，提高代碼的重用性。如果要對(duì)頁面中的多種元素分類定義不同的格式，可以使用這種方式。其語法為：.classnameproperty1:valu

10、e;propertyN:value;23 .important color: red; This heading is very important. This paragraph is very important. This is a paragraph. This is a paragraph. This is a paragraph.24css2.html:CSS使用示例使用示例-類選擇器類選擇器.one color: red;font-size: 12pt;.two color: green;font-size: 14pt;.three color: #800080;font-siz

11、e: 16pt;這是引用這是引用one類樣式的標(biāo)題類樣式的標(biāo)題1這是引用這是引用one類樣式的段落類樣式的段落這是引用這是引用two類樣式的段落類樣式的段落這是引用這是引用three類樣式的段落類樣式的段落25263id選擇器v 當(dāng)需要為某一個(gè)元素單獨(dú)設(shè)計(jì)樣式時(shí)，可以使用id選擇器。v 使用id選擇器可以為每個(gè)元素的具體對(duì)象定義不同的模式，使用id選擇器要先為設(shè)計(jì)樣式的對(duì)象定義一個(gè)id屬性。v id選擇器是唯一的，不同的元素的id值是不能重復(fù)的。例如： v 然后使用以下方式定義top的樣式：#top property1:value; property2:value; 27css3.html:C

12、SS使用示例使用示例-id選擇器選擇器#top color: blue;font-size:18pt;font-family: 黑體黑體;background-color: #FFB6C1; 白日依山盡白日依山盡 黃河入海流黃河入海流 欲窮千里目欲窮千里目 更上一層樓更上一層樓28類和類和IDID選擇器的區(qū)別選擇器的區(qū)別相同點(diǎn)：相同點(diǎn)：可以應(yīng)用于任何元素不同點(diǎn)不同點(diǎn)： 1、ID選擇器只能在文檔中使用一次選擇器只能在文檔中使用一次。而類選擇器可以使用多次。29類和類和IDID選擇器的區(qū)別選擇器的區(qū)別 2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)

13、樣式，但多個(gè)樣式，但I(xiàn)D選擇器是不可以的（不能使用不能使用 ID 詞詞列表）。列表）。304其它選擇器v 除了以上幾種常用的選擇器之外，在CSS中還會(huì)用到組合選擇器、包含（后代）選擇器、子元素選擇器、相鄰兄弟選擇器等。v 組合選擇器是使用逗號(hào)將各個(gè)選擇器隔開，使多類元素共享樣式。v 包含選擇器是使用空格分隔各個(gè)選擇器，選擇器之間必須是包含關(guān)系時(shí)，才能使用樣式。ul em color:red; font-weight:bold;li + li font-weight:bold;31css4.html:CSS使用示例使用示例-包含選擇器包含選擇器p em color: red;font-size:

14、16pt;p元素中的元素中的em元素，紅色，元素，紅色，16pt非非p元素中的元素中的em元素，黑色，默認(rèn)大小元素，黑色，默認(rèn)大小325. 偽類u偽類是一種特殊的類選擇符，是能夠被支持CSS的瀏覽器自動(dòng)識(shí)別的特殊的選擇符。偽類的最大的用途就是為超級(jí)鏈接在不同的狀態(tài)下定義不同的樣式效果。u偽類的語法是在原有的選擇符后加一個(gè)偽類，如：selector:pseudo-class property1:value; property2:value; 335. 偽類u偽類是在CSS中已經(jīng)定義好的，不能象類選擇符一樣使用別的名字，可以解釋為對(duì)象在某個(gè)特殊狀態(tài)下的樣式。常用的偽類有：1selector:lin

15、k sRules（sRules表示樣式規(guī)則）：設(shè)置a對(duì)象在未被訪問前的樣式，對(duì)于無href屬性的a對(duì)象，此偽類不起作用。2selector:hover sRules：設(shè)置a對(duì)象在鼠標(biāo)懸停在其上時(shí)的樣式。3selector:active sRules：設(shè)置a對(duì)象被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。4selector:visited sRules：設(shè)置a對(duì)象在其鏈接地址已被訪問過時(shí)的樣式。34css10.html:CSS使用示例使用示例-偽類偽類 a:linkfont-size:14pt;text-decoration:underline;color:red a:visitedfont-size:12pt;text-decoration:none;color:green a:hoverfont-size:16pt;text-decoration:none;color:#FFCC00 a:activefont-size:18pt;text-decoration:underline;color:blue 我是超級(jí)鏈接我是超級(jí)鏈接1 我是超級(jí)鏈接我是超級(jí)鏈接2 我是超級(jí)鏈接我是超級(jí)鏈接3 我是超級(jí)鏈接我是超級(jí)鏈接435363.4.2 偽對(duì)象偽對(duì)象通過對(duì)插入到文檔中的虛構(gòu)元素進(jìn)行觸發(fā)從而實(shí)現(xiàn)特定的樣式。偽對(duì)象主要包括：1selector:after,