上課-層疊樣式單CSS

1、 層疊樣式單CSS1CSS(Cascading Style Sheets)層疊樣式表是一組樣式的集合。它的主要作用是統(tǒng)一定義頁面中相同類型對(duì)象的樣式，使頁面上應(yīng)用了相同層疊樣式表的對(duì)象具有相同的顯示效果和屬性。所以采用CSS使用的網(wǎng)頁具有良好的統(tǒng)一性、易用性和擴(kuò)展性，而且減少了樣式定義的重復(fù)代碼，縮短下載時(shí)間，同時(shí)使用CSS設(shè)定的文字大小是不會(huì)隨瀏覽器的設(shè)定而改變2CSS和HTML同樣都是標(biāo)記性語言，可以把它看作是HTML的組成部分或是對(duì)HTML的補(bǔ)充和加強(qiáng)。一個(gè)CSS可以應(yīng)用于多個(gè)對(duì)象或多個(gè)頁面，只要修改CSS中定義的選擇符的內(nèi)容，應(yīng)用了該選擇符的對(duì)象和頁面都隨之發(fā)生改變31.使用CSS的方

2、法如何在HTML文檔中加入層疊樣式表呢？常用的方法有三種：(1) 外聯(lián)樣式表(2) 內(nèi)嵌樣式表(3) 元素內(nèi)定 同時(shí)使用這三種方法時(shí)要考慮的應(yīng)用的優(yōu)先級(jí)問題，下面分別介紹這三種方法。4外聯(lián)樣式表外聯(lián)樣式表是將網(wǎng)頁的內(nèi)容與樣式定義分離，將樣式定義單獨(dú)保存在一個(gè)CSS文檔(后綴名為css)。這個(gè)方法適用于網(wǎng)站管理，一個(gè)CSS外部文檔可以應(yīng)用于多個(gè)文檔，只要每一個(gè)文檔的頭部中鏈入CSS樣式定義外部文檔。rel屬性說明鏈接的是一個(gè)獨(dú)立的CSS文件，href屬性值為要鏈接的CSS文件的URL地址。5內(nèi)嵌樣式表內(nèi)嵌樣式表是在HTML文檔的頭部直接定義樣式。這個(gè)方式適用于對(duì)單個(gè)網(wǎng)頁的樣式定義，一般作為對(duì)外聯(lián)

3、樣式表的補(bǔ)充，如果內(nèi)嵌樣式表的定義與外聯(lián)樣式表的定義相沖突，網(wǎng)頁的顯示以內(nèi)嵌樣式表的定義為準(zhǔn)。 6元素內(nèi)定元素內(nèi)定是指隨時(shí)在HTML的標(biāo)簽中插入一段CSS樣式定義，是最靈活的一種方式，通常適用于指定網(wǎng)頁內(nèi)一小段文字的指定，例如： 7CSS的基本語法1)CSS的書寫 書寫CSS的基本語法如下：selectorproperty:value;property:value;.selector是選擇符，主要分三類，第一種是HTML語言的標(biāo)記，第二種是類選擇符，第三種是ID。property是能夠被修改或者重新定義的屬性。8 HTML語言的標(biāo)記任何一個(gè)HTML的標(biāo)記都可以是一個(gè)CSS的選擇符，例如 ： H

4、1color:blue; 使用這條規(guī)則后，所有的1號(hào)標(biāo)題都為藍(lán)色顯示。 9類選擇符在樣式表中可以設(shè)置樣式類，樣式類的名稱反映它們的功能或類別，例如：warningfont-weight:bolder;color:red;background:white上述代碼定義了warning類，從名稱上可知是用于警告文本的樣式設(shè)置。使用類選擇符定義的CSS樣式在HTML中通過使用class屬性引用，例如：這是一段警告文本示例10ID選擇符ID選擇符用于定義一個(gè)元素的獨(dú)特樣式，可以通過使用ID屬性在HTML中引用，例如： #titlefont_size:larger 歡迎訪問Interstage Web L

5、earning 11樣式規(guī)則繼承 組合 層疊12繼承選擇符的定義可以嵌套定義，嵌套定義的選擇符都會(huì)繼承外層選擇符指定的屬性值，但有些情況例外，內(nèi)部選擇符不繼承設(shè)置周邊屬性的選擇符的值，例如，上邊界屬性是不會(huì)繼承13組合具有相同屬性定義的選擇符可以組合定義，以減少樣式表的重復(fù)聲明，例如： H1,H2,H3,H4,H5,H6color:black 14層疊當(dāng)一個(gè)HTML文檔使用了多個(gè)樣式表，而同一個(gè)選擇符的定義在不同的樣式表中的定義引起沖突時(shí)，不同類型的樣式表遵循優(yōu)先級(jí)規(guī)則，同一類型的樣式表可以設(shè)置!important搶奪控制權(quán)。例如： .warningfont-weight:bolder;col

6、or:red;background:white !important15CSS屬性最常用的CSS屬性有：字體屬性、文本屬性、背景屬性、定位屬性、布局屬性、外邊距屬性、邊框?qū)傩浴?nèi)邊距屬性、列表項(xiàng)目屬性、表格屬性、滾動(dòng)條屬性。要使用好CSS，必須對(duì)它的屬性有深入的了解，這部分內(nèi)容請(qǐng)讀者自行查閱有關(guān)書籍。16學(xué)習(xí)要點(diǎn)： 1了解CSS的特點(diǎn)。2掌握CSS中各種選擇符的定義及使用方法。3掌握CSS樣式常用的屬性例如字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩缘取?掌握在HTML中使用CSS的幾種方式。5了解CSS中各種濾鏡的定義及顯示效果。 17 層疊樣式單CSS 3.2 層疊樣式單CSS183.2

7、層疊樣式單CSS3.2.1 CSS的特點(diǎn)3.2.2 CSS的定義3.2.3 CSS中的選擇符3.2.4 CSS的使用方式3.2.5 用CSS控制Web頁元素的顯示外觀3.2.6 CSS應(yīng)用實(shí)例193.2 層疊樣式單CSS初步了解CSS CSS（Cascading Style Sheets，層疊樣式單）是W3C協(xié)會(huì)為彌補(bǔ) HTML在顯示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。早在1996年W3C便提出了一個(gè)定義CSS的草案，很快這個(gè)草案就成為一個(gè)被廣泛采納的標(biāo)準(zhǔn)。到1998年，W3C在原有草案的基礎(chǔ)上進(jìn)行了擴(kuò)展，建立了CSS2規(guī)范，它不僅包括了原有的表現(xiàn)形式標(biāo)準(zhǔn)，還有許多增強(qiáng)功能。 CSS重新

8、定義了HTML中原來的文字顯示樣式，并增加了一些新概 念，如：類、層等，還可以處理文字重疊、定位等，它提供了更豐富的 樣式。同時(shí)CSS可集中進(jìn)行樣式管理。允許將樣式定義單獨(dú)存儲(chǔ)于樣式 文件中，把顯示的內(nèi)容和樣式定義分離，便于多個(gè)HTML文件共享。一 個(gè)HTML文件也可以應(yīng)用多個(gè)CSS樣式文件。 CSS是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。 可惜的是，到目前為止，還沒有任何一個(gè)瀏覽器能完全遵從CSS2標(biāo)準(zhǔn)，也就是 CSS2定義的某些標(biāo)記在某些瀏覽器上可能不起任何作用。 203.2.1 CSS的特點(diǎn) 使用CSS可以很方便地管理顯示格式方面的工作，首先它能夠?yàn)榫W(wǎng)頁上的元素精

9、確地定位，讓網(wǎng)頁設(shè)計(jì)者自由控制文字、圖片在網(wǎng)頁上按要求顯示。其次它能夠?qū)崿F(xiàn)把網(wǎng)頁上的內(nèi)容結(jié)構(gòu)和格式控制相分離。瀏覽者想要看的是網(wǎng)頁上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息，就要通過格式控制來幫忙了。以前兩者在使用傳統(tǒng)HTML語言設(shè)計(jì)的網(wǎng)頁上的分布是交錯(cuò)結(jié)合的，查看修改很不方便，而現(xiàn)在把兩者分開就會(huì)大大方便網(wǎng)頁的設(shè)計(jì)者。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁可以僅由內(nèi)容構(gòu)成，而將所有網(wǎng)頁的格式控制指向某個(gè)CSS樣式表文件。 21使用CSS帶來兩個(gè)方面的好處：（1）簡(jiǎn)化了網(wǎng)頁的格式代碼，外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被

10、只保存一次）。（2）只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。避免了一個(gè)一個(gè)網(wǎng)頁的修改，大大減少了重復(fù)勞動(dòng)的工作量。223.2.2 CSS的定義 CSS是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方法，它就顏色、字體、間隔、定位以及邊距等格式提供了幾十種屬性，這些屬性可通過style應(yīng)用于在HTML標(biāo)記中。 一個(gè)樣式表是由許多樣式規(guī)則組成的，用來控制網(wǎng)頁元素的顯示方式，其規(guī)則的形式為： 選擇符屬性1：值1；屬性2：值2； 規(guī)則由選擇符以及緊跟其后的一系列“屬性：值”對(duì)組成，所有“屬性：值”對(duì)用 “”包括，各“屬性：值”對(duì)之間用分號(hào)“;”分隔。選擇

11、符是指要引用樣式的對(duì)象，可以是一個(gè)或多個(gè)HTML標(biāo)記（各標(biāo)記之間用逗號(hào)分開），也可以是類選擇符（如.text）、id選擇符或上下文選擇符。樣式定義中還可以加入注釋來說明代碼的意思，注釋有利于自己或別人以后編輯和更改代碼時(shí)理解代碼的含義。 CSS定義范例 233.2.3 CSS中的選擇符 CSS中有六種選擇符，分別是HTML標(biāo)記、具有上下文關(guān)系的HTML標(biāo)記、用戶自定義類選擇符、用戶定義的ID選擇符、虛類、虛元素。分別說明如下：3.2.3.1 HTML標(biāo)記類選擇符 直接用HTML標(biāo)記或HTML元素名稱作為CSS選擇符，例如： td,input,select,body font-family:Ve

12、rdana;font-size:12px;form,body margin:0;padding:0;select,body,textarea background:#fff;font-size:12px;select font-size:13px;textarea width:540px;border:1px solid #718da6;img border:nonea text-decoration:underline;cursor:pointer;h1 color: #ff0000 243.2.3.2 具有上下文關(guān)系的HTML標(biāo)記類選擇符 如果我們定義了這樣的樣式規(guī)則 body color

13、: blue，則網(wǎng)頁中所有的文字都以藍(lán)色顯示，除非另外指定樣式或格式來更改這一設(shè)定，這是因?yàn)閎ody標(biāo)記包含了所有其他的標(biāo)記符和內(nèi)容。如果我們要為位于某個(gè)元素內(nèi)的元素設(shè)置特定的樣式規(guī)則，則應(yīng)將選擇符指定為具有上下文關(guān)系的HTML標(biāo)記，例如，如果只想使位于H1標(biāo)記符的B標(biāo)記符具有特定的屬性，應(yīng)使用的格式為：h1 b color: blue 這表示只有位于h1標(biāo)記內(nèi)的B元素具有藍(lán)色屬性，其他任何B元素保持原有顏色。具有上下文關(guān)系的HTML標(biāo)記類選擇符 范例253.2.3.3用戶定義的類選擇符 使用類選擇符能夠把相同的標(biāo)記分類定義成不同的樣式，定義類選擇符時(shí)，在自定義類的名稱前面加一個(gè)點(diǎn)號(hào)。假如你想

14、要兩個(gè)不同的段落，一段落向右對(duì)齊，一個(gè)段落居中，你可以先定義兩個(gè)類：p.right text-align: rightp.center text-align: center 如果要用在不同的段落里，只要在HTML標(biāo)記里加入前面定義的類：這個(gè)段落向右對(duì)齊的 這個(gè)段落是居中排列的 用戶定義的類選擇符的一般格式是：selector.classname property: value; CSS類選擇符示例 263.2.3.4ID選擇符 用戶定義的ID選擇符的一般格式是：#IDname property: value; 其中Idname為某個(gè)標(biāo)記ID屬性值。ID選擇符的用途及概念和類選擇符相似，不同之處

15、在于同一個(gè)ID選擇符樣式只能在HTML文件內(nèi)被應(yīng)用一次，而類選擇符樣式則可以多次被應(yīng)用，也就是說，如果有些較特別的標(biāo)記需要應(yīng)用較為特殊的樣式，則建議使用ID選擇符。在定義ID選擇符的時(shí)候用“#”號(hào)開頭而不是“.”號(hào)。 CSS ID選擇符示例 273.2.3.5 虛類 虛類可以看做是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的特殊選擇符。虛類主要針對(duì)超鏈接A標(biāo)記符，可以為超鏈接定義不同狀態(tài)下的不同樣式效果。 虛類的形式如下:選擇符:虛類 property: value; 定義虛類的方法和常規(guī)類很相似，但有兩點(diǎn)不同：一是連接符是冒號(hào)而不是句點(diǎn)號(hào)；二是它們有預(yù)先定義好的名稱，而不能隨便取

16、名。虛類中最常見的是a虛類，a虛類可以指定超鏈接標(biāo)記a以不同的方式顯示鏈接，表示鏈接處在4種不同的狀態(tài)下：link、visited、active、hover 。 CSS虛類范例 CSS虛類和類選擇符組合使用 范例 283.2.3.6 虛元素 在CSS中有兩個(gè)特殊的選擇符，用于P、div、span等塊級(jí)元素的首字母和首行效果，它們是：first-letter和first-line。有些瀏覽器不支持這兩個(gè)虛元素。格式為：選擇符: first-letter property: value; 選擇符: first-line property: value; 選擇符.類: first-letter pr

17、operty: value; 選擇符.類: first-line property: value; CSS虛元素范例 293.2.4 CSS的使用方式 為網(wǎng)頁添加樣式表的方法有四種：鏈入外部樣式表、導(dǎo)入外部樣式表、聯(lián)入樣式表和內(nèi)聯(lián)樣式。其中聯(lián)入樣式表和內(nèi)聯(lián)樣式是將CSS的功能組合于HTML文件之內(nèi)，而鏈接及導(dǎo)入外部樣式表則是將CSS功能以個(gè)別文件的方式獨(dú)立于HTML文件之外，然后再通過鏈接或?qū)氲姆绞綄TML文件和CSS文件鏈接在一起。3.2.4.1鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個(gè)CSS文件，在HTML的頭信息標(biāo)識(shí)符里添加標(biāo)記鏈接到這個(gè)CSS文件即可使用。 鏈入外部樣式表示

18、例 30外部樣式表不能含有任何像或這樣的HTML標(biāo)記，僅僅由樣式規(guī)則或聲明組成，并且只能以.CSS為擴(kuò)展名。標(biāo)記放置在HTML文檔頭部，屬性主要有rel，href，type，media。一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯。同時(shí)，大多數(shù)瀏覽器會(huì)保存外部樣式表在緩沖區(qū)，從而瀏覽時(shí)也減少了重復(fù)下載代碼，避免了在展示網(wǎng)頁時(shí)的延遲。313.2.4.2導(dǎo)入外部樣式表 導(dǎo)入外部樣式表是指在HTML文件頭部的 標(biāo)記之間，利用CSS的import聲明引入外部樣式表

19、。導(dǎo)入外部樣式表示例 import “mystyle.css”表示導(dǎo)入mystyle.css樣式表，注意使用時(shí)外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表輸入方式更有優(yōu)勢(shì)。因?yàn)槌藢?dǎo)入外部樣式外，還可添加本頁面的其他樣式。 注意：import 聲明必須放在樣式表的開始部分，其他的CSS規(guī)則應(yīng)仍然包括在Style元素中。 323.2.4.3聯(lián)入樣式表 利用標(biāo)記將樣式表聯(lián)入HTML文件的頭部。前面的例子大都采用這種方法 聯(lián)入樣式表示例 style元素放在文檔的head部分。必須的type屬性用于指出樣式類別，通常取值為text/css。有些低版本的瀏覽器不能識(shí)別style標(biāo)記，

20、這意味著低版本的瀏覽器會(huì)忽略style標(biāo)記里的內(nèi)容，直接以源代碼的方式在網(wǎng)頁上顯示我們?cè)O(shè)置的樣式表。 為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（）隱藏內(nèi)容而不讓它顯示，像上述例子那樣。聯(lián)入樣式表的作用范圍是本HTML文件。333.2.4.4內(nèi)聯(lián)樣式 內(nèi)聯(lián)樣式是混合在HTML標(biāo)記里使用的，用這種方法，可以很簡(jiǎn)單的對(duì)某個(gè)元素單獨(dú)定義樣式，是連接樣式和HTML標(biāo)記的最簡(jiǎn)單的方法。內(nèi)聯(lián)樣式的使用是直接在HTML標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值。 內(nèi)聯(lián)樣式表示例 Style屬性是隨CSS擴(kuò)展出來的。它可以應(yīng)用于除了basefont、param和script的

21、任意body元素(包括body本身) 。 內(nèi)聯(lián)樣式會(huì)向標(biāo)記中添加更多屬性及內(nèi)容，因此對(duì)于網(wǎng)頁設(shè)計(jì)者來說很難維護(hù)，更難閱讀。而且由于它只對(duì)局部起作用，因此必須對(duì)所有需要的標(biāo)簽都作設(shè)置，這樣就失去了CSS在控制頁面布局方面的優(yōu)勢(shì)。所以，內(nèi)聯(lián)樣式主要用于樣式僅適用于單個(gè)頁面的的情況，應(yīng)盡量減少使用內(nèi)聯(lián)樣式，而采用其他樣式。 343.2.4.5 多重樣式表的疊加 如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表，遇到?jīng)_突的地方會(huì)以最后定義的為準(zhǔn)。多重樣式表的疊加示例 字體顏色從外部樣式表里保留下來，而對(duì)齊方式和字體尺寸都有定義時(shí)，按照后定義優(yōu)先的原則。依照后定義優(yōu)先的原則，優(yōu)先

22、級(jí)最高的是內(nèi)聯(lián)樣式，聯(lián)入樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和聯(lián)入樣式表之間是最后定義的優(yōu)先級(jí)高。 353.2.5 用CSS控制Web頁元素的顯示外觀 CSS可以通過一些屬性來控制Web頁元素的顯示外觀，這些屬性是： 控制文字字體屬性 文本屬性 大小寫轉(zhuǎn)換文本橫向排列 文本縱向排列 文本縮排 行高 用CSS控制文本顯示示例 363.2.5.3控制顏色和背景屬性 控制顏色和背景屬性包括以下六個(gè)部分 ：顏色屬性 背景顏色 背景圖片 背景圖片重復(fù) 背景圖片固定 背景定位 用CSS控制圖片顯示示例 373.2.5.4方框?qū)傩?用于設(shè)置元素的邊界(MARGIN)、邊界補(bǔ)白(PADDING)、邊框(

23、BORDER)等屬性值。使用方框?qū)傩缘拇蠖嗍菈K元素。3.2.5.5列表屬性 用于設(shè)置列表標(biāo)記(和)的顯示特性。包括LIST-STYLE-TYPE、LIST-STYLE-IMAGE、LIST-STYLE-POSITION、LIST-STYLE等。383.2.5.6定位屬性 CSS提供POSITION、TOP、LEFT和Z-INDEX屬性用于在二維或三維空間定位某個(gè)元素相對(duì)于其他元素的相對(duì)位置或絕對(duì)位置。POSITION屬性用于設(shè)置元素位置的模式。當(dāng)POSITION為ABSOLUTE時(shí)，TOP和LEFT屬性分別用于設(shè)置元素與窗口或框架上端以及左端的距離；當(dāng)POSITION為RELATIVE時(shí)，TO

24、P和LEFT屬性分別用于設(shè)置元素與父元素上端以及左端的距離。 在三維空間中定位元素時(shí)，與之相關(guān)的屬性是Z-INDEX。 三維空間定位范例 39 3.2.5.7 控制鼠標(biāo)形狀 CSS提供了多達(dá)13種的鼠標(biāo)形狀供我們選擇 ，如下表所示：403.2.5.8濾鏡 CSS提供了一些內(nèi)置的多媒體濾鏡特效，使用這種技術(shù)可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本容器、以及其他一些對(duì)象。 （1） Alpha 濾鏡 語法：FILTER：ALPHA(OPACITY=屬性值,FINISHOPACITY=屬性值,STYLE=屬性值,STARTX=屬性值,STARTY=屬性值,FINISH

25、X=屬性值,FINISHY=屬性值) 作用：該濾鏡能夠使對(duì)象呈現(xiàn)漸變半透明效果，其效果是由小括號(hào)中的各屬性名及其對(duì)應(yīng)的屬性值決定。 ALPHA濾鏡示例 41（2） BLUR濾鏡 語法： FILTER:BLUR(ADD=屬性值,DIRECTION=屬性值,STRENGTH=屬性值)； 作用： 該濾鏡能夠使對(duì)象表現(xiàn)一種模糊的效果，其效果是由小括號(hào)中的各屬性名及其對(duì)應(yīng)的屬性值決定。 BLUR濾鏡示例 42（3） DropShadow 濾鏡 語法： FILTER:DROPSHADOW(COLOR=屬性值,OFFX=屬性值,OFFY=屬性值,POSITIVE=屬性值)； 作用： 該濾鏡主要是用來產(chǎn)生重疊

26、效果的，其效果是由小括號(hào)中的各屬性名及其對(duì)應(yīng)的屬性值來產(chǎn)生的。 DROPSHADOW濾鏡示例 43（4） GLOW 濾鏡 語法： FILTER:GLOW(COLOR=屬性值,STRENGTH屬性值)； 作用： 該濾鏡能夠在原對(duì)象周圍產(chǎn)生一種類似發(fā)光的效果，其具體效果是由小括號(hào)中的各屬性名及其對(duì)應(yīng)的屬性值來產(chǎn)生的。 GLOW濾鏡示例 44（5） Chroma 濾鏡 語法： FILTER:CHROMA(COLOR=屬性值)； 作用： 該濾鏡能夠使圖像中的某一顏色變成透明色。CHROMA濾鏡示例 45（6） FlipH與FlipV濾鏡 語法： FILTER: FILPH 或者FILTER: FILPV 作用： 該濾鏡能夠使HTML圖片對(duì)象進(jìn)行左右或上 下翻轉(zhuǎn)。該濾鏡沒有參數(shù)。FLIPH、FLIPV濾鏡示例 46（7） Wave 濾鏡 語法： FILTER:WAVE(ADD=屬性值,FREQ=屬性值,LIGHTSTRENGTH=屬性值,PHASE=屬性值,STRENGTH=屬性值)； 作用： 該濾