HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)-第6章-CSS概述課件

第1頁(yè)第6章CSS概述本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第6章CSS概述本章概述第2頁(yè)本章概述目前流行的，符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)模式是將頁(yè)面內(nèi)容和外觀樣式分離，前面5章我們學(xué)習(xí)了用HTML來(lái)創(chuàng)建網(wǎng)頁(yè)，在網(wǎng)頁(yè)中添加各類元素，從本章開(kāi)始，我們將學(xué)習(xí)如何使用CSS為網(wǎng)頁(yè)元素定義外觀樣式，美化頁(yè)面，將網(wǎng)頁(yè)裝扮的更漂亮，具有獨(dú)特的風(fēng)格和個(gè)性。第2頁(yè)本章概述目前流行的，符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)模式是將頁(yè)第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的基本概念了解CSS的發(fā)展歷史理解使用CSS的好處掌握在HTML這使用CSS的幾種方法理解CSS中的繼承了解!important的用法掌握CSS的優(yōu)先級(jí)第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的基本概念第4頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS6.2在HTML中使用CSS6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第4頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS第5頁(yè)6.1為什么要在網(wǎng)頁(yè)中加入CSSCSS的全稱是層疊樣式表(CascadingStyleSheets)，它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化

CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。第5頁(yè)6.1為什么要在網(wǎng)頁(yè)中加入CSSCSS的全稱是層疊樣式第6頁(yè)CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀，HTML本身也并不善于此道。在使用HTML描述Web頁(yè)面的外觀時(shí)，需要使用大量的標(biāo)記，而且常常要使用許多復(fù)雜堆棧或嵌套表。頁(yè)面的布局工作涉及隱藏的像素圖像、專有元素與屬性、圖像中的文本和其他隱秘的復(fù)雜方式，這些都需要提供高質(zhì)量、高可靠度的HTML標(biāo)記代碼，這簡(jiǎn)直就是一場(chǎng)噩夢(mèng)。因此，人們將表示網(wǎng)頁(yè)外觀的功能標(biāo)記或?qū)傩苑蛛x出來(lái)，這就形成了表示網(wǎng)頁(yè)外觀的替代方法——CSS。第6頁(yè)CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀，第7頁(yè)CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時(shí)就存在了。從1994年第一次提出CSS觀點(diǎn)至今，已經(jīng)有了3個(gè)主要版本。但隨著HTML的成長(zhǎng)，為了滿足設(shè)計(jì)師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，用來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。1994年哈坤·利(HakunLee)提出了CSS的最初建議。第7頁(yè)CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時(shí)就存第8頁(yè)CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布。CSS1的大部分特征在Web瀏覽器中都獲得支持，但是一些不常用的功能(例如空白處理、字母間隔、顯示等)存在一些問(wèn)題。CSS自從第一版發(fā)布之后，又在1998年5月發(fā)布了第二版，CSS得到了豐富。CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過(guò)CSS2.0的樣式控制顯示效果第8頁(yè)CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布第9頁(yè)CSS的發(fā)展歷史CSS2.0提供了一個(gè)機(jī)制，讓程序員開(kāi)發(fā)時(shí)可以不考慮顯示和界面，就可以制作表單，顯示問(wèn)題可由美工或程序員到后期再編寫(xiě)相應(yīng)的CSS2.0樣式來(lái)解決。不過(guò)，由于沒(méi)有很好的CSS2.0編輯軟件，所以無(wú)法做到所見(jiàn)即所得，編寫(xiě)起來(lái)不易。CSS3在CSS2的基礎(chǔ)上，結(jié)合業(yè)務(wù)發(fā)展需求，以及過(guò)去瀏覽者操作習(xí)慣和開(kāi)發(fā)者習(xí)慣，做了大幅改進(jìn)。第9頁(yè)CSS的發(fā)展歷史CSS2.0提供了一個(gè)機(jī)制，讓程序員第10頁(yè)使用CSS的好處(1)大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，縮減帶寬成本。(2)結(jié)構(gòu)清晰。容易被搜索引擎搜索到。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)記，搜索引擎將更有效地搜索到內(nèi)容。(3)縮短改版時(shí)間。只要簡(jiǎn)單地修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)。(4)強(qiáng)大的字體控制和排版能力。使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。(5)提高易用性。使用CSS可以結(jié)構(gòu)化HTML，如<p>標(biāo)記只用來(lái)控制段落，<table>標(biāo)記只用來(lái)表現(xiàn)表格式數(shù)據(jù)等。(6)表現(xiàn)和內(nèi)容相分離。將設(shè)計(jì)部分分離出來(lái)放在一個(gè)獨(dú)立樣式文件中(7)<table>布局靈活性不大，只能遵循<table>、<tr>、<td>的格式，而使用CSS+div可以有更多格式。(8)便于更新和維護(hù)。可以將站點(diǎn)中的所有頁(yè)面風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件，就可以更新所以頁(yè)面的風(fēng)格樣式。第10頁(yè)使用CSS的好處(1)大大縮減頁(yè)面代碼，提高頁(yè)面瀏第11頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第11頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 第12頁(yè)6.2在HTML中使用CSS在HTML網(wǎng)頁(yè)中使用CSS的方法有4種：第一，內(nèi)聯(lián)樣式，通過(guò)HTML元素的style屬性直接將樣式嵌入HTML標(biāo)記中；第二，定義內(nèi)部樣式表，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，然后將其放在<style>元素中，這樣，整個(gè)HTML文件中都可以使用該樣式；第三，鏈接外部樣式文件，將樣式獨(dú)立成文件，供任何頁(yè)面調(diào)用；第四，導(dǎo)入外部樣式表，這種方法與鏈接相似，外部樣式表獨(dú)立成文件，但是導(dǎo)入樣式表是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL。有的書(shū)籍把第三和第四種方法算作一種，因?yàn)樗麄兌际菍邮奖愍?dú)立成為外部文件。第12頁(yè)6.2在HTML中使用CSS在HTML網(wǎng)頁(yè)中使用第13頁(yè)內(nèi)聯(lián)樣式如果只是簡(jiǎn)單的隊(duì)某個(gè)元素單獨(dú)定義樣式，則可以使用內(nèi)聯(lián)樣式。例如，只希望針對(duì)某個(gè)特定的<h1>標(biāo)簽設(shè)置樣式為字號(hào)為50、綠色的楷體字體。則可以使用<h1>標(biāo)簽的style屬性。style是核心屬性，幾乎任何HTML元素都有該屬性。<h1style="font-size:50px;font-family:楷體;color:green;">內(nèi)聯(lián)樣式,50號(hào)綠色楷體</h1>第13頁(yè)內(nèi)聯(lián)樣式如果只是簡(jiǎn)單的隊(duì)某個(gè)元素單獨(dú)定義樣式，則可以第14頁(yè)內(nèi)聯(lián)樣式style屬性的值是若干個(gè)CSS屬性名/值對(duì)。CSS規(guī)則要求屬性名的后面緊跟一個(gè)冒號(hào)，然后是屬性值。每一個(gè)樣式規(guī)則以分號(hào)結(jié)束，最后一個(gè)樣式規(guī)則的結(jié)尾可以不加分號(hào)。格式如下：property-name1:value1;...property-nameN:valueN;第14頁(yè)內(nèi)聯(lián)樣式style屬性的值是若干個(gè)CSS屬性名/值對(duì)第15頁(yè)定義內(nèi)部樣式表為了避免CSS樣式和HTML標(biāo)簽的關(guān)系過(guò)于緊密，可以采用另外一種更合適的方法來(lái)中添加樣式規(guī)則，那就是創(chuàng)建與一個(gè)特定元素或一組元素綁定的樣式規(guī)則，這樣可以重復(fù)使用樣式規(guī)則。第15頁(yè)定義內(nèi)部樣式表為了避免CSS樣式和HTML標(biāo)簽的關(guān)系第16頁(yè)定義內(nèi)部樣式表當(dāng)CSS屬性名是多個(gè)單詞時(shí)，應(yīng)該用短橫線分隔，例如font-face、font-size、line-height等。CSS屬性值允許多種形式，例如關(guān)鍵字(xx-small)、字符串(Arial)、數(shù)字(0)、帶單位的數(shù)字(100px或2cm)和特殊值等。CSS屬性名稱和很多屬性值不區(qū)分大小寫(xiě)，但有的屬性值卻區(qū)分大小寫(xiě)，例如，如果涉及到與HTML文檔一起工作的話，class和id名稱對(duì)大小寫(xiě)是敏感的。為了安全起見(jiàn)，Web開(kāi)發(fā)人員應(yīng)假定CSS規(guī)則的所有部分都區(qū)分大小寫(xiě)。第16頁(yè)定義內(nèi)部樣式表當(dāng)CSS屬性名是多個(gè)單詞時(shí)，應(yīng)該用短橫第17頁(yè)<style>元素CSS樣式是通過(guò)<style>標(biāo)記嵌入到頁(yè)面中的。<style>元素位于<head>元素內(nèi)，用于在網(wǎng)頁(yè)內(nèi)包含樣式表規(guī)則，而非鏈接某個(gè)外部文檔。有時(shí)，它還被用于需要在單一頁(yè)面中包含某些額外規(guī)則，而且這些規(guī)則不必應(yīng)用于網(wǎng)站內(nèi)共享同一樣式表的其他頁(yè)面的情況。第17頁(yè)<style>元素CSS樣式是通過(guò)<style>標(biāo)記第18頁(yè)鏈接外部樣式文件在HTML頁(yè)面中，通過(guò)在文檔的head部分使用<link>元素，引用外部鏈接樣式文件。<link>元素用于在網(wǎng)頁(yè)中描述兩個(gè)文檔之間的關(guān)系。例如，可以在HTML頁(yè)面中使用其指定應(yīng)該用于設(shè)置該頁(yè)面風(fēng)格的樣式表，也可以為對(duì)應(yīng)頁(yè)面指定一個(gè)RSS訂閱。<link>元素永遠(yuǎn)是空元素，而且當(dāng)與樣式表一同使用時(shí)，它必須帶有兩個(gè)屬性：rel和href。

<linkhref="mystyle.css"rel="stylesheet"type="text/css">第18頁(yè)鏈接外部樣式文件在HTML頁(yè)面中，通過(guò)在文檔的he第19頁(yè)導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)入外部樣式表。這種方法與鏈接相似。導(dǎo)入樣式表的語(yǔ)法是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL，最后以分號(hào)結(jié)束，如下所示：@importurl(corerules.css);@import指令必須在<style>標(biāo)簽中使用，而且必須在樣式表中所有其他類型的規(guī)則之前使用。在實(shí)踐中，我們會(huì)在一個(gè)<style>標(biāo)簽中看到導(dǎo)入的和嵌入的樣式混合在一起。第19頁(yè)導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)第20頁(yè)link與@import的區(qū)別link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；而@import不支持。第20頁(yè)link與@import的區(qū)別link是XHTML標(biāo)第21頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第21頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 6.3CSS繼承和優(yōu)先級(jí)繼承即子類元素繼承父類的樣式，CSS中的繼承相對(duì)簡(jiǎn)單，但也容易讓人混淆。CSS規(guī)則應(yīng)用在標(biāo)記中，而應(yīng)用于特定元素的不同樣式值可以是從它的父級(jí)元素，甚至更遠(yuǎn)的元素繼承而來(lái)。大多數(shù)元素可從其父元素那里繼承樣式屬性，但是有一些樣式屬性(例如邊框)卻不可以。第22頁(yè)6.3CSS繼承和優(yōu)先級(jí)繼承即子類元素繼承父類的樣式，C!important指示符如果一個(gè)特定的規(guī)則不希望被其他規(guī)則覆蓋，那么可以使用!important指示符。對(duì)于不會(huì)被忽略的規(guī)則，則在規(guī)則的分號(hào)前面插入!important指示符。例如，下面的樣式規(guī)則將設(shè)置所有的段落文本為紅色：p{color:red!important;font-size:12px;}這樣，即使有一個(gè)如下所示的內(nèi)聯(lián)樣式的段落：<pstyle="color:green;font-size:24px;">帶內(nèi)聯(lián)樣式的段落</p>因?yàn)樯厦娴囊?guī)則使用了!important指示符，所以color屬性不能被內(nèi)聯(lián)樣式覆蓋，文本顏色依然會(huì)是紅色的，而字號(hào)會(huì)被覆蓋，變?yōu)?4px。第23頁(yè)!important指示符如果一個(gè)特定的規(guī)則不希望被其他規(guī)則!important指示符當(dāng)使用!important指示符時(shí)，要確認(rèn)把它放在樣式規(guī)則的最后；否則就會(huì)被忽略。

雖然!important指示符可以讓樣式不被覆蓋，讓復(fù)雜的繼承變得簡(jiǎn)單清晰，但并不鼓勵(lì)初學(xué)者使用!important指示符覆蓋，因?yàn)镃SS會(huì)根據(jù)層疊和權(quán)重產(chǎn)生正常的作用順序，使用了!important就擾亂了原本的順序，讓更多的權(quán)重給了正常情況下本不應(yīng)該獲得這么多權(quán)重的樣式。如果你從不使用!important，那么這標(biāo)志著你真正理解了CSS，并且證明你在編寫(xiě)代碼前經(jīng)過(guò)深思熟慮。第24頁(yè)!important指示符當(dāng)使用!important指示符時(shí)CSS優(yōu)先級(jí)層疊的基本思想是為應(yīng)用于文檔的包含多個(gè)樣式表的規(guī)則的系統(tǒng)進(jìn)行整理。當(dāng)這些疊加的樣式之間有沖突時(shí)，就要根據(jù)樣式的優(yōu)先級(jí)進(jìn)行選擇。前面已經(jīng)介紹過(guò)，內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)如下：內(nèi)聯(lián)樣式>內(nèi)部樣式表>外部樣式表同一個(gè)樣式表中定義的樣式，使用不同的選擇器也可能存在疊加，從選擇器的角度，當(dāng)某個(gè)元素同時(shí)應(yīng)用標(biāo)簽選擇器、ID選擇器、類選擇器定義的樣式時(shí)，將按照下面的優(yōu)先級(jí)進(jìn)行處理：ID選擇器>類選擇器>標(biāo)簽選擇器第25頁(yè)CSS優(yōu)先級(jí)層疊的基本思想是為應(yīng)用于文檔的包含多個(gè)樣式表的規(guī)第26頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié)

6.5思考和練習(xí)第26頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 第27頁(yè)6.4本章小結(jié)本章主要介紹了CSS的基本概念。首先介紹了為什么要使用CSS，包括CSS的基本概念、CSS產(chǎn)生的原因、CSS的發(fā)展歷史喝使用CSS的好處，使用CSS可以使頁(yè)面布局定位更精確、樣式更豐富，實(shí)行代碼重用，易于移植，更有利于網(wǎng)站的設(shè)計(jì)與維護(hù)；接著介紹了在網(wǎng)頁(yè)中使用CSS的4種方法：內(nèi)聯(lián)樣式、定義內(nèi)部樣式表、鏈接外部樣式文件和導(dǎo)入外部樣式文件；最后介紹了CSS的繼承和優(yōu)先級(jí)以及!important指示符的使用。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該了解CSS的基本概念，掌握在HTML使用CSS的幾種方法以及CSS的繼承和層疊樣式的優(yōu)先級(jí)。第27頁(yè)6.4本章小結(jié)本章主要介紹了CSS的基本概念。第28頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié)

6.5思考和練習(xí)第28頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 第29頁(yè)6.5思考和練習(xí)1.CSS的全稱是

(CascadingStyleSheets)，它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。2.CSS3語(yǔ)言在朝著模塊化方向發(fā)展。這些模塊包括：盒子模型、

、超鏈接方式、語(yǔ)言模塊、

、

、多欄布局等。3.簡(jiǎn)述使用業(yè)CSS的好處。4.在HTML中使用CSS的方法有幾種？5.CSS選擇器的優(yōu)先級(jí)是什么樣的？6.!important指示符的作用是什么？如何使用該指示符？第29頁(yè)6.5思考和練習(xí)1.CSS的全稱是第30頁(yè)第6章CSS概述本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第6章CSS概述本章概述第31頁(yè)本章概述目前流行的，符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)模式是將頁(yè)面內(nèi)容和外觀樣式分離，前面5章我們學(xué)習(xí)了用HTML來(lái)創(chuàng)建網(wǎng)頁(yè)，在網(wǎng)頁(yè)中添加各類元素，從本章開(kāi)始，我們將學(xué)習(xí)如何使用CSS為網(wǎng)頁(yè)元素定義外觀樣式，美化頁(yè)面，將網(wǎng)頁(yè)裝扮的更漂亮，具有獨(dú)特的風(fēng)格和個(gè)性。第2頁(yè)本章概述目前流行的，符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)模式是將頁(yè)第32頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的基本概念了解CSS的發(fā)展歷史理解使用CSS的好處掌握在HTML這使用CSS的幾種方法理解CSS中的繼承了解!important的用法掌握CSS的優(yōu)先級(jí)第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解CSS的基本概念第33頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS6.2在HTML中使用CSS6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第4頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS第34頁(yè)6.1為什么要在網(wǎng)頁(yè)中加入CSSCSS的全稱是層疊樣式表(CascadingStyleSheets)，它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化

CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。第5頁(yè)6.1為什么要在網(wǎng)頁(yè)中加入CSSCSS的全稱是層疊樣式第35頁(yè)CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀，HTML本身也并不善于此道。在使用HTML描述Web頁(yè)面的外觀時(shí)，需要使用大量的標(biāo)記，而且常常要使用許多復(fù)雜堆棧或嵌套表。頁(yè)面的布局工作涉及隱藏的像素圖像、專有元素與屬性、圖像中的文本和其他隱秘的復(fù)雜方式，這些都需要提供高質(zhì)量、高可靠度的HTML標(biāo)記代碼，這簡(jiǎn)直就是一場(chǎng)噩夢(mèng)。因此，人們將表示網(wǎng)頁(yè)外觀的功能標(biāo)記或?qū)傩苑蛛x出來(lái)，這就形成了表示網(wǎng)頁(yè)外觀的替代方法——CSS。第6頁(yè)CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀，第36頁(yè)CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時(shí)就存在了。從1994年第一次提出CSS觀點(diǎn)至今，已經(jīng)有了3個(gè)主要版本。但隨著HTML的成長(zhǎng)，為了滿足設(shè)計(jì)師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，用來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。1994年哈坤·利(HakunLee)提出了CSS的最初建議。第7頁(yè)CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時(shí)就存第37頁(yè)CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布。CSS1的大部分特征在Web瀏覽器中都獲得支持，但是一些不常用的功能(例如空白處理、字母間隔、顯示等)存在一些問(wèn)題。CSS自從第一版發(fā)布之后，又在1998年5月發(fā)布了第二版，CSS得到了豐富。CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過(guò)CSS2.0的樣式控制顯示效果第8頁(yè)CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布第38頁(yè)CSS的發(fā)展歷史CSS2.0提供了一個(gè)機(jī)制，讓程序員開(kāi)發(fā)時(shí)可以不考慮顯示和界面，就可以制作表單，顯示問(wèn)題可由美工或程序員到后期再編寫(xiě)相應(yīng)的CSS2.0樣式來(lái)解決。不過(guò)，由于沒(méi)有很好的CSS2.0編輯軟件，所以無(wú)法做到所見(jiàn)即所得，編寫(xiě)起來(lái)不易。CSS3在CSS2的基礎(chǔ)上，結(jié)合業(yè)務(wù)發(fā)展需求，以及過(guò)去瀏覽者操作習(xí)慣和開(kāi)發(fā)者習(xí)慣，做了大幅改進(jìn)。第9頁(yè)CSS的發(fā)展歷史CSS2.0提供了一個(gè)機(jī)制，讓程序員第39頁(yè)使用CSS的好處(1)大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，縮減帶寬成本。(2)結(jié)構(gòu)清晰。容易被搜索引擎搜索到。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)記，搜索引擎將更有效地搜索到內(nèi)容。(3)縮短改版時(shí)間。只要簡(jiǎn)單地修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)。(4)強(qiáng)大的字體控制和排版能力。使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。(5)提高易用性。使用CSS可以結(jié)構(gòu)化HTML，如<p>標(biāo)記只用來(lái)控制段落，<table>標(biāo)記只用來(lái)表現(xiàn)表格式數(shù)據(jù)等。(6)表現(xiàn)和內(nèi)容相分離。將設(shè)計(jì)部分分離出來(lái)放在一個(gè)獨(dú)立樣式文件中(7)<table>布局靈活性不大，只能遵循<table>、<tr>、<td>的格式，而使用CSS+div可以有更多格式。(8)便于更新和維護(hù)?？梢詫⒄军c(diǎn)中的所有頁(yè)面風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件，就可以更新所以頁(yè)面的風(fēng)格樣式。第10頁(yè)使用CSS的好處(1)大大縮減頁(yè)面代碼，提高頁(yè)面瀏第40頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第11頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 第41頁(yè)6.2在HTML中使用CSS在HTML網(wǎng)頁(yè)中使用CSS的方法有4種：第一，內(nèi)聯(lián)樣式，通過(guò)HTML元素的style屬性直接將樣式嵌入HTML標(biāo)記中；第二，定義內(nèi)部樣式表，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，然后將其放在<style>元素中，這樣，整個(gè)HTML文件中都可以使用該樣式；第三，鏈接外部樣式文件，將樣式獨(dú)立成文件，供任何頁(yè)面調(diào)用；第四，導(dǎo)入外部樣式表，這種方法與鏈接相似，外部樣式表獨(dú)立成文件，但是導(dǎo)入樣式表是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL。有的書(shū)籍把第三和第四種方法算作一種，因?yàn)樗麄兌际菍邮奖愍?dú)立成為外部文件。第12頁(yè)6.2在HTML中使用CSS在HTML網(wǎng)頁(yè)中使用第42頁(yè)內(nèi)聯(lián)樣式如果只是簡(jiǎn)單的隊(duì)某個(gè)元素單獨(dú)定義樣式，則可以使用內(nèi)聯(lián)樣式。例如，只希望針對(duì)某個(gè)特定的<h1>標(biāo)簽設(shè)置樣式為字號(hào)為50、綠色的楷體字體。則可以使用<h1>標(biāo)簽的style屬性。style是核心屬性，幾乎任何HTML元素都有該屬性。<h1style="font-size:50px;font-family:楷體;color:green;">內(nèi)聯(lián)樣式,50號(hào)綠色楷體</h1>第13頁(yè)內(nèi)聯(lián)樣式如果只是簡(jiǎn)單的隊(duì)某個(gè)元素單獨(dú)定義樣式，則可以第43頁(yè)內(nèi)聯(lián)樣式style屬性的值是若干個(gè)CSS屬性名/值對(duì)。CSS規(guī)則要求屬性名的后面緊跟一個(gè)冒號(hào)，然后是屬性值。每一個(gè)樣式規(guī)則以分號(hào)結(jié)束，最后一個(gè)樣式規(guī)則的結(jié)尾可以不加分號(hào)。格式如下：property-name1:value1;...property-nameN:valueN;第14頁(yè)內(nèi)聯(lián)樣式style屬性的值是若干個(gè)CSS屬性名/值對(duì)第44頁(yè)定義內(nèi)部樣式表為了避免CSS樣式和HTML標(biāo)簽的關(guān)系過(guò)于緊密，可以采用另外一種更合適的方法來(lái)中添加樣式規(guī)則，那就是創(chuàng)建與一個(gè)特定元素或一組元素綁定的樣式規(guī)則，這樣可以重復(fù)使用樣式規(guī)則。第15頁(yè)定義內(nèi)部樣式表為了避免CSS樣式和HTML標(biāo)簽的關(guān)系第45頁(yè)定義內(nèi)部樣式表當(dāng)CSS屬性名是多個(gè)單詞時(shí)，應(yīng)該用短橫線分隔，例如font-face、font-size、line-height等。CSS屬性值允許多種形式，例如關(guān)鍵字(xx-small)、字符串(Arial)、數(shù)字(0)、帶單位的數(shù)字(100px或2cm)和特殊值等。CSS屬性名稱和很多屬性值不區(qū)分大小寫(xiě)，但有的屬性值卻區(qū)分大小寫(xiě)，例如，如果涉及到與HTML文檔一起工作的話，class和id名稱對(duì)大小寫(xiě)是敏感的。為了安全起見(jiàn)，Web開(kāi)發(fā)人員應(yīng)假定CSS規(guī)則的所有部分都區(qū)分大小寫(xiě)。第16頁(yè)定義內(nèi)部樣式表當(dāng)CSS屬性名是多個(gè)單詞時(shí)，應(yīng)該用短橫第46頁(yè)<style>元素CSS樣式是通過(guò)<style>標(biāo)記嵌入到頁(yè)面中的。<style>元素位于<head>元素內(nèi)，用于在網(wǎng)頁(yè)內(nèi)包含樣式表規(guī)則，而非鏈接某個(gè)外部文檔。有時(shí)，它還被用于需要在單一頁(yè)面中包含某些額外規(guī)則，而且這些規(guī)則不必應(yīng)用于網(wǎng)站內(nèi)共享同一樣式表的其他頁(yè)面的情況。第17頁(yè)<style>元素CSS樣式是通過(guò)<style>標(biāo)記第47頁(yè)鏈接外部樣式文件在HTML頁(yè)面中，通過(guò)在文檔的head部分使用<link>元素，引用外部鏈接樣式文件。<link>元素用于在網(wǎng)頁(yè)中描述兩個(gè)文檔之間的關(guān)系。例如，可以在HTML頁(yè)面中使用其指定應(yīng)該用于設(shè)置該頁(yè)面風(fēng)格的樣式表，也可以為對(duì)應(yīng)頁(yè)面指定一個(gè)RSS訂閱。<link>元素永遠(yuǎn)是空元素，而且當(dāng)與樣式表一同使用時(shí)，它必須帶有兩個(gè)屬性：rel和href。

<linkhref="mystyle.css"rel="stylesheet"type="text/css">第18頁(yè)鏈接外部樣式文件在HTML頁(yè)面中，通過(guò)在文檔的he第48頁(yè)導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)入外部樣式表。這種方法與鏈接相似。導(dǎo)入樣式表的語(yǔ)法是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL，最后以分號(hào)結(jié)束，如下所示：@importurl(corerules.css);@import指令必須在<style>標(biāo)簽中使用，而且必須在樣式表中所有其他類型的規(guī)則之前使用。在實(shí)踐中，我們會(huì)在一個(gè)<style>標(biāo)簽中看到導(dǎo)入的和嵌入的樣式混合在一起。第19頁(yè)導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)第49頁(yè)link與@import的區(qū)別link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；而@import不支持。第20頁(yè)link與@import的區(qū)別link是XHTML標(biāo)第50頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級(jí)6.4本章小結(jié) 6.5思考和練習(xí)第21頁(yè)主要內(nèi)容6.1為什么要在網(wǎng)頁(yè)中加入CSS 6.3CSS繼承和優(yōu)先級(jí)繼承即子類元素繼承父類的樣式，CSS中的繼承相對(duì)簡(jiǎn)單，但也容易讓人混淆。CSS規(guī)則應(yīng)用在標(biāo)記中，而應(yīng)用于特定元素的不同樣式值可以是從它的父級(jí)元素，甚至更遠(yuǎn)的元素繼承而來(lái)。大多數(shù)元素可從其父元素那里繼承樣式屬性，但是有一些樣式屬性(例如邊框)卻不可以。第51頁(yè)6.3CSS繼承和優(yōu)先級(jí)繼承即子類元素繼承父類的樣式，C!important指示符如果一個(gè)特定的規(guī)則不希望被其他規(guī)則覆蓋，那么可以使用!important指示符。對(duì)于不會(huì)被忽略的規(guī)則，則在規(guī)則的分號(hào)前面插入!important指示符。例如，下面的樣式規(guī)則將設(shè)置所有的段落文本為紅色：p{color:red!important;font-size:12px;}這樣，即使有一個(gè)如下所示的內(nèi)聯(lián)樣式的段落：<pstyle="color:green;font-size:24px;">帶內(nèi)聯(lián)樣式的段落</p>因?yàn)樯厦娴囊?guī)則使用了!important指示符，所以color屬性不能被內(nèi)聯(lián)樣式覆蓋，文本顏色依然會(huì)是紅色的，而字號(hào)會(huì)被覆蓋，變?yōu)?4px。第52頁(yè)!important指示符如果一個(gè)特定的規(guī)則不希望被其他規(guī)則!important指示符當(dāng)使用!important指示符時(shí)，要確認(rèn)把它放在樣式規(guī)則的最后；否則就會(huì)被忽略。

雖然!important指示符可以讓樣式不被覆蓋，讓復(fù)雜的繼承變得簡(jiǎn)單清晰，但并不鼓勵(lì)初學(xué)者使用!important指示符覆蓋，因?yàn)镃SS會(huì)根據(jù)層疊和權(quán)重產(chǎn)生正常