首頁  >  文章  >  web前端  >  第二章CSS的應用方式

第二章CSS的應用方式

黄舟
黄舟原創
2016-12-19 16:01:541187瀏覽

C S S 的 聲 明 方 式

   

   這章節將開始為您介紹這章節將開始介紹的應用。當然一開始要介紹的是如何去建立個樣式表 (Style Sheets),包括了聲明的方式和應用在網頁上的方法,最後還會為您概述一下CSS的一些特性。概略來說,CSS的聲明有三種方式:一、基本聲明:最典型的CSS聲明方式。 element {PRoperty: value} 用中文來表示的話,也就是元件(標籤) {性質(屬性)名稱: 設定值}例如:H3 {COLOR: BLUE} 即為一組宣告。二、集體宣告:同時宣告某個或數個元件(標籤)(各元件(標 簽)間以逗號分隔)的一組或陣列樣式規則(性質)(各組規則間以分號分隔)。元件(標籤) {性質(屬性)名稱1: 設定值1;性質(屬性)名稱2: 設定值2;... }或是元件A(標籤A), 元件B(標籤B), 元件C(標籤C), ... {性質(屬性)名稱1: 設定值1;性質(屬性)名稱2: 設定值2;...}例如:TD {COLOR: BLUE;font-size: 9pt;}或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; }三、分項宣告:將許多樣式規則分組再分別宣告。元件A(標籤A) {性質(屬性)名稱1: 設定值1; 性質(屬性)名稱2: 設定值2; }元件A(標籤A) {性質(屬性)名稱3: 設定值3 ; 性質(屬性)名稱4: 設定值4; }例如:TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "標楷體"; line-height: 150%}這樣子的聲明方式並不會互相抵觸,因為所聲明的性質是不同的。如果不小心對同樣一個性質作了重複的聲明,則只有後來聲明的設定值才會發生作用。要附帶​​提一下的是,在您的聲明中,只要您的格式正確就會被接受,而不論是大小寫、空白或換行都不會對顯示的結果有影響的,您可依自己習慣來編寫。    

C S S 的 應 用 方 法

   

  接下來要為您介紹的是將所建立的樣式表套用在網頁上的四種基本方法。一、使用STYLE屬性: 將STYLE屬性直接加在個別的元件標籤裡。 這種用法的優點是可靈巧應用樣式於各標籤中,但是缺點則是沒有整篇文件的『統一性』。二、使用STYLE標籤: 將樣式規則寫在標籤之中。 例如:通常是將整個的 結構寫在網頁的

部份之中。這種用法的優點就是在於整篇文件的統一性,只要是有聲明的元件即會套用該樣式規則。缺點就是在個別元件的彈性不足。三、使用 LINK標籤: 將樣式規則寫在.css的樣式檔案中,再以標籤引入。假設我們把樣式規則存成example.css的檔案,我們只要在網頁中加入即可套用該樣式檔案中所製定好的樣式了。 通常是將LINK標籤寫在網頁的 部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇檔案都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的彈性不足。四、使用@import引進: 跟LINK用法很像,但必 放在 中。  例如:要注意的是,行末的分號是絕對不可少的!切記記得!  很明顯的,不管是LINK或@import的用法都可能可以 直接套用他人現有的樣式表。不過,基於網路的禮儀,這種事別做的好,至少也應該知會 對方一聲,要先取得人家的同意才行!  而四種應用方法各有其優缺點,您可以綜合地使用,並不會相互抵觸。但是如果相同的性質屬性遇上重複的聲明的話,就要考慮套用優先權的問題了!一般來講,優先權的順序有以下的幾點原則:網頁設計者的樣式設定> 用戶的樣式設定> 瀏覽器的樣式設定STYLE屬性的樣式設定> STYLE標籤樣式設定> 鏈結進來的樣式設定後面聲明的樣式設定> 前面的樣式設定所謂『鏈結進來的樣式設定』指的就是用上面提到的LINK標籤與@import引入這兩種應用方式所鏈結進來的的樣式設定。  以上就是CSS最基本的聲明與應用的方法介紹,有了這些基本的認識與方法,您已經可以開始建立您的樣式表!除了上述的基本的聲明與應用的方法之外,還有其它的聲明與應用的方法,將為您在下一章中再作介紹。    

 以上就是第二章CSS的應用方式的內容,更多相關內容請關注PHP中文網(www.php.cn)! 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn