CSS樣式表基礎pptConvertor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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