CSS樣式表基礎(chǔ)pptConvertor

1、僅供個(gè)人參考第 6 章 CSS 樣式表基礎(chǔ)Web 標(biāo)準(zhǔn)的基本組成XHTML的基本知識CSS 編寫基本模式CSS 的基本語法本章主要內(nèi)容：網(wǎng)頁設(shè)計(jì)制作基礎(chǔ)與上機(jī)指導(dǎo)HTML+CSS+JavaScript 清華大學(xué)出版社6.1Web 標(biāo)準(zhǔn)Web 標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，用戶只有在了解了其概念之后，網(wǎng)頁制作才能做到有的放矢，在全局上把握各種技術(shù)。6.1.1Web 標(biāo)準(zhǔn)的基本組成Web 標(biāo)準(zhǔn)是很多網(wǎng)站表現(xiàn)層技術(shù)標(biāo)準(zhǔn)的集合，由著名的W3C 組織制定。所謂表現(xiàn)層技術(shù)，即網(wǎng)頁前臺技術(shù)，包括 HTML 、XHTML 、 CSS、JavaScript 等。有了統(tǒng)一的標(biāo)準(zhǔn)，才能保持技術(shù)的穩(wěn)定發(fā)展

2、，使網(wǎng)頁表現(xiàn)技術(shù)層能在任何設(shè)備中正常瀏覽。網(wǎng)頁主要由三部分組成，即結(jié)構(gòu)（Structure）、表現(xiàn)（ Presentation）和行為（ Behavior ），因此對應(yīng)的語言標(biāo)準(zhǔn)也分3 方面：（1）結(jié)構(gòu)標(biāo)準(zhǔn)語言：主要包括XHTML和 XML 。（ 2）表現(xiàn)標(biāo)準(zhǔn)語言：主要包括CSS。（ 3）行為標(biāo)準(zhǔn)：主要包括對象模型及ECMAScript 。6.1.2 建立 Web 標(biāo)準(zhǔn)的目的與好處傳統(tǒng)的網(wǎng)頁布局（使用table 進(jìn)行布局）已經(jīng)有很長的歷史和比較成熟的技術(shù)規(guī)范了。但是仍然存在一些缺點(diǎn)。由于頁面的內(nèi)容和修飾沒有分離，導(dǎo)致修改的困難，由于頁面代碼的語義不明確，導(dǎo)致數(shù)據(jù)利用的困難。而使用 CSS 進(jìn)行

3、網(wǎng)頁布局，分離了結(jié)構(gòu)和表現(xiàn)，上述的問題也就迎刃而解了。1. 建立 Web 標(biāo)準(zhǔn)的目的建立 Web 標(biāo)準(zhǔn)的目的是解決網(wǎng)站中由于瀏覽器升級、網(wǎng)站代碼冗余、臃腫等帶來的問題。2. 使用 Web 標(biāo)準(zhǔn)的好處使用 Web 標(biāo)準(zhǔn)最大的好處就是大大縮減了頁面代碼，提高了瀏覽速度，縮減了寬待成本。由于結(jié)構(gòu)清晰，能使網(wǎng)頁更容易被搜索引擎搜索到。6.1.3Web 標(biāo)準(zhǔn)與瀏覽器的兼容性W3C 對標(biāo)準(zhǔn)的推進(jìn)，F(xiàn)irefox ， Chrome， Safari， Opera 的出現(xiàn)，結(jié)束了IE 雄霸天下的日子。然而這對開發(fā)者來說，是好事，也是壞事。說它是好事，是因?yàn)闉g覽器廠商為了取得更多的市場份額，會(huì)促使各瀏覽器更符合W

4、3C 標(biāo)準(zhǔn)，而得到更好的兼容性，并且不同瀏覽器的擴(kuò)展功能對 W3C 標(biāo)準(zhǔn)也是個(gè)推進(jìn)；說它是壞事，是因?yàn)槎鄠€(gè)瀏覽器同時(shí)存在，這些瀏覽器在處理一個(gè)相同的頁面時(shí)，表現(xiàn)有時(shí)會(huì)有差異。這種差異可能很小，甚至不會(huì)被注意到；也可能很大， 甚至造成在某個(gè)瀏覽器下無法正常瀏覽。一般把引起這些差異的問題統(tǒng)稱為“瀏覽器兼容性問題” 。從瀏覽器內(nèi)核的角度來看，瀏覽器兼容性問題可分為以下3 類：（ 1）渲染相關(guān)：和樣式相關(guān)的問題，即體現(xiàn)在布局效果上的問題。（ 2）腳本相關(guān)： 和腳本相關(guān)的問題， 包括 JavaScript 和 DOM 等方面的問題。 對于某些瀏覽器的功能方面的特性，也屬于這一類。（ 3）其他類別：除以上

5、兩類問題外的功能性問題，一般是瀏覽器自身提供的功能，在內(nèi)核層之上的。6.1.3Web 標(biāo)準(zhǔn)與瀏覽器的兼容性不得用于商業(yè)用途僅供個(gè)人參考6.2XHTML與 CSS2000年底，國際 W3C 組織公布發(fā)行了 XHTML1.0 版本，這是一種在HTML 4.0 基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，目的是基于XML 應(yīng)用。 XHTML是一種增強(qiáng)了的HTML ，它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。由于HTML 結(jié)構(gòu)混亂，條理不清晰，樣式與結(jié)構(gòu)沒有分離，所以符合Web 標(biāo)準(zhǔn)的網(wǎng)頁結(jié)構(gòu)推薦使用XHTML 。XHTML 是 HTML 的升級版，側(cè)重點(diǎn)在于對網(wǎng)頁的結(jié)構(gòu)設(shè)計(jì)，其語法嚴(yán)謹(jǐn)，有語義，而且頁面的樣式

6、部分即表現(xiàn)部分由CSS 負(fù)責(zé)。6.2.1XHTML的基本知識6.2.1XHTML的基本知識與 HTML 相比 XHTML主要有以下特點(diǎn)：（1） XHTML解決了 HTML 語言所存在的嚴(yán)重制約其發(fā)展的問題。（2） XML 是 Web 發(fā)展的趨勢，所以人們急切的希望加入XML 的潮流中。（ 3）使用 XHTML 的另一個(gè)優(yōu)勢是它非常嚴(yán)密。（ 4） XHTML 能與其它基于 XML 的標(biāo)記語言、應(yīng)用程序及協(xié)議進(jìn)行良好的交互工作。（ 5） XHTML 是 Web 標(biāo)準(zhǔn)家族的一部分，能很好在無線設(shè)備等其它用戶代理上。（ 6）在網(wǎng)站設(shè)計(jì)方面， XHTML 可助設(shè)計(jì)者去掉表現(xiàn)層代碼的惡習(xí)，幫助設(shè)計(jì)者養(yǎng)成標(biāo)

7、記校驗(yàn)來測試頁面工作的習(xí)慣6.2.2XHTML中的元素XHTML的相應(yīng)代碼為：1）文檔結(jié)構(gòu)XHTML的文檔結(jié)構(gòu)和HTML 是一樣的，定義文檔開始和結(jié)束時(shí)使用HTML元素。頁面同樣分為 head 和 body 兩部分，其中head 部分的內(nèi)容是不顯示在頁面上的，head 部分還包括meta 和 title 等元素，6.2.2XHTML中的元素2）文本基礎(chǔ)元素文本基礎(chǔ)元素包括div 、 p、 strong、b、 span、 br、標(biāo)題等元素。div ：塊元素，可以將文檔分成不同的部分，可以使用class 和 id 屬性進(jìn)一步控制頁面表現(xiàn)。div 元素是 CSS 布局中使用最多的元素。p：塊元素，表

8、示段落。strong：內(nèi)聯(lián)元素，使文本以粗體顯示。b：內(nèi)聯(lián)元素，使文本以粗體顯示。span：內(nèi)聯(lián)元素，用來區(qū)分文本中的一個(gè)部分。br：使文本換行顯示。標(biāo)題：塊元素，用來定義文本中的各種標(biāo)題。包括列元素h1、 h2、 h3、 h4、 h5、 h6，其中每個(gè)元素對應(yīng)有默認(rèn)的字體6.2.2XHTML中的元素3）列表元素ul：塊元素，定義一個(gè)無序列表。li ：塊元素，定義列表中具體的條目。4）分隔線，圖像等修飾元素bgsound：用來添加背景音樂。hr：塊元素，用來分隔頁面的各個(gè)部分。不得用于商業(yè)用途僅供個(gè)人參考img ：內(nèi)聯(lián)元素，用來插入圖像文件。5）鏈接元素a：內(nèi)聯(lián)元素，用來定義頁面中的超級鏈接。

9、6）表格元素table：定義一個(gè)表格。tr：定義表格中的行。td：定義表格中的單元格。7）表單元素form ：定義一個(gè)表單，同時(shí)定義處理表單的服務(wù)器等。input ：用來定義通常的表單控件。6.2.3什么是 CSSCSS 語言是一種標(biāo)記語言，它不需要編譯， 可以直接由瀏覽器解釋執(zhí)行，屬于瀏覽器解釋型語言，在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中CSS 負(fù)責(zé)網(wǎng)頁內(nèi)容的表現(xiàn)。層疊給每個(gè)規(guī)則分配一個(gè)重要度，作者的樣式表被認(rèn)為是最重要的，其次是用戶的樣式表，最后是瀏覽器或用戶代理使用的默認(rèn)樣式表。為了讓用戶有更多的控制能力，可以通過將任何規(guī)則指定為 !important 來提高它的重要度，讓它優(yōu)先于任何規(guī)則，甚至優(yōu)先于作者加

10、上!important 標(biāo)志的規(guī)則。因此，層疊采用以下重要次序：標(biāo)為 !important 的用戶樣式 - 標(biāo)為 !important 的作者樣式 -作者樣式 -用戶樣式 -瀏覽器 /用戶代理應(yīng)用的樣式。6.2.4XHTML與 CSS 實(shí)現(xiàn)樣式與結(jié)構(gòu)分離“XHTML+CSS ”制作的網(wǎng)頁，其各要素關(guān)系如圖所示。6.2.5CSS 布局與表格布局的分析在布局效果一樣的情況下，表格布局導(dǎo)致結(jié)構(gòu)與樣式雜糅在一起，條理混亂，不易維護(hù)，而XHTML+CSS布局則將內(nèi)容與樣式做了分離，代碼的重用性較高，很利于維護(hù)與修改。正是因?yàn)榇a的重用性高，所以在大多數(shù)合格的網(wǎng)頁代碼編寫中，使用XHTML+CSS布局比單

11、純使用傳統(tǒng)的HTML 表格布局要簡潔的多。6.3CSS 編寫基本模式由于 CSS 在布局、樣式控制方面有著巨大的優(yōu)勢，所以CSS 成了美化頁面的最佳利器，本節(jié)所要介紹的 CSS 的編寫模式，雖然是簡單的 CSS 基礎(chǔ)，但對于頁面的樣式控制來說非常的關(guān)鍵。6.3.1CSS 的插入形式在網(wǎng)頁中插入CSS 樣式表后，要想在瀏覽器中顯示出效果，就要讓瀏覽器識別并調(diào)用。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來讀取，這里介紹4 種在頁面中插入樣式表的方法：1鏈入外部樣式表鏈入外部樣式表是要先把樣式表保存為一個(gè)單獨(dú)的文件，然后在頁面中用 標(biāo)記鏈接到這個(gè)文件，注意這個(gè) 標(biāo)記必須放到頁面的區(qū)內(nèi)，其語法格式如下：6

12、.3.1CSS 的插入形式2內(nèi)部樣式表內(nèi)部樣式表是通過 標(biāo)記把樣式表的內(nèi)容直接放到HTML頁面的 區(qū)里，這些定不得用于商業(yè)用途僅供個(gè)人參考義的樣式就應(yīng)用到頁面中了，樣式表是用 標(biāo)記插入的，其語法格式如下： 6.3.1CSS 的插入形式3導(dǎo)入外部樣式表導(dǎo)入外部樣式表是指在內(nèi)部樣式表的 區(qū)域內(nèi)導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)需要用 import 做聲明，該聲明可放在 標(biāo)記外也可以放在 標(biāo)記內(nèi)，但根據(jù)語法規(guī)則，一般都是放在 標(biāo)記內(nèi)，其語法格式如下：importurl（外部樣式表文件地址）；6.3.1CSS 的插入形式4. 內(nèi)嵌樣式內(nèi)嵌樣式是混合在 HTML 標(biāo)記里使用的，即在 標(biāo)記里加入 style 參數(shù)

13、。而 style 參數(shù)的內(nèi)容就是 CSS 的屬性和值，用這種方法，可以很簡單的對某個(gè)元素單獨(dú)定義樣式。其語法格式如下：6.3.2CSS 的媒介控制media 值說明all應(yīng)用于所有的設(shè)備screen應(yīng)用于計(jì)算機(jī)屏幕print應(yīng)用于頁面的打印及打印預(yù)覽的狀態(tài)不得用于商業(yè)用途僅供個(gè)人參考handheld應(yīng)用于手持設(shè)備（小屏幕、單色及帶寬有限制的設(shè)備）projection應(yīng)用于投影演示braille應(yīng)用于盲文觸摸式的反饋設(shè)備aural應(yīng)用于語音合成設(shè)備CSS 支持媒介列表6.4CSS 的基本語法CSS 是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的，它簡化并擴(kuò)展了HTML 中的各種標(biāo)記， 大大提高了HTML開發(fā)的效率。在

14、制作網(wǎng)頁時(shí)采用CSS 技術(shù)，可以有效的對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制， 只要對相應(yīng)的代碼做一些簡單的修改， 就可改變同一頁面的不同部分，或頁數(shù)不同的網(wǎng)頁的外觀和格式6.4.1CSS 的基本格式CSS 語法的核心包括三部分：選擇符，樣式屬性及屬性值。其基本語法如下：選擇符 屬性 1：屬性值1；屬性 2：屬性值2； ；屬性 n：屬性值n；6.4.2CSS 的注釋語句開發(fā)人員可以在 CSS 中插入注釋來說明代碼的含義，注釋有利于自己別人以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS 注釋以“ /* ” 開頭，以“ */ ”結(jié)尾。6.4.3CSS 的

15、選擇符CSS 中的選擇符可以分為5 種，分別是：標(biāo)簽選擇符、類選擇符、id 選擇符、偽類及偽對象選擇符、通配選擇符。1.HTML標(biāo)簽選擇符標(biāo)簽選擇符即使用XHTML中已有的標(biāo)簽作為選擇符。如：其中“ p”是 HTML 標(biāo)記選擇符。6.4.3CSS 的選擇符2.類選擇符一個(gè)選擇符能有不同的類，因而允許同一元素有不同樣式，用類選擇符可以把相同的元素分類定義成不同的樣式。在定義類選擇符時(shí)，在自定義類名稱的前面加一個(gè)句點(diǎn)標(biāo)記（.），其格式為：選擇符 .類別名 屬性：值 不得用于商業(yè)用途僅供個(gè)人參考3.id 選擇符id 選擇符的定義方法與類選擇符大同小異，一個(gè)id 選擇符以“ #”開頭，只需要把句點(diǎn)改為

16、井號（ #）即可，其語法格式如下：#idstyle font-family: Arial, Helvetica, sans-serif;color: blue;6.4.3CSS 的選擇符4.偽類和偽元素選擇符偽類和偽元素選擇符是一組 CSS 預(yù)定義好的類和對象，不需要進(jìn)行 id 和 class 屬性的聲明，能自動(dòng)地被支持 CSS 的瀏覽器所識別。1）偽類 : 偽類的基本格式為：選擇符 :偽類 屬性: 值 2）偽元素 :偽元素指元素的一部分，如段落的第一個(gè)字母。偽元素的基本格式為：選擇符 .類: 偽元素屬性: 值 不得用于商業(yè)用途僅供個(gè)人參考僅供個(gè)人用于學(xué)習(xí)、研究；不得用于商業(yè)用途。For person