CSS應用基礎教程(2) 應用方式

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css|基礎教程

Ｃ　Ｓ　Ｓ　的　聲　明　方　式

　　這章節將開始為您介紹ＣＳＳ的應用。當然一開始要介紹的是如何去建立個樣式表（Style Sheets），包括了聲明的方式和應用在網頁上的方法，最後還會為您概述一下ＣＳＳ的一些特性。概略來說，ＣＳＳ的聲明有三種方式：

一、基本聲明：最典型的ＣＳＳ聲明方式。 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%}這樣子的聲明方式並不會互相抵觸，因為所聲明的性質是不同的。如果不小心對同樣一個性質作了重複的聲明，則只有後來聲明的設定值才會發生作用。
　　要附帶提一下的是，在您的聲明中，只要您的格式正確就會被接受，而不論是大小寫、空白或換行都不會對顯示的結果有影響的，您可依自己習慣來編寫。

Ｃ　Ｓ　Ｓ　的　應　用　方　法

接下來要為您介紹的是將所建立的樣式表應用在網頁上的四種基本方法。

一、使用STYLE屬性：將STYLE屬性直接加在個別的元件標籤裡。 <元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}
例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>這種用法的優點是可靈巧應用樣式於各標籤中，但是缺點則是沒有整篇檔案的『統一性』。
二、使用STYLE標籤：將樣式規則寫在<STYLE>...</STYLE>標籤之中。 <STYLE TYPE="text/css">

</STYLE>
例如： <STYLE TYPE="text/css">

</STYLE>通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於整篇檔案的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。
三、使用 LINK標籤：將樣式規則寫在.css的樣式檔案中，再以<LINK>標籤引入。假設我們把樣式規則存成一個example.css的檔案，我們只要在網頁中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">即可套用該樣式檔案中所制定好的樣式了。通常是將LINK標籤寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇檔案都指定到同一個樣式檔案即可。缺點也是在個別檔案或元件的靈活度不足。
四、使用@import引入：跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。 <STYLE TYPE="text/css">

</STYLE>
例如： <STYLE TYPE="text/css">

</STYLE>要注意的是，行末的分號是絕對不可少的！切記切記！
　　很明顯的，不管是LINK還是@import的用法都可能可以直接套用他人現有的樣式表。不過，基於網路的禮儀，這種事別做的好，至少也應該知會對方一聲，要先取得人家的同意才行！

　　而四種應用方法各有其優缺點，您可以綜合地使用，並不會相互抵觸。但是如果相同的性質屬性遇上重複的聲明的話，就要考量套用優先權的問題了！一般來講，優先權的順序有以下的幾點原則：網頁設計者的樣式設定＞使用者的樣式設定＞瀏覽器的樣式設定
STYLE屬性的樣式設定＞ STYLE標籤樣式設定＞鏈結進來的樣式設定
後面聲明的樣式設定＞前面的樣式設定

所謂『鏈結進來的樣式設定』指的就是用上面提到過的LINK標籤與@import引入這兩種應用方式所鏈結進來的的樣式設定。

　　以上就是ＣＳＳ最基本的聲明與應用的方法介紹，有了這些基本的認識與方法，您已經可以開始建立您的樣式表！除了上面提到的基本的聲明與應用的方法之外，還有其它的聲明與應用的方法，將為您在下一章中再作介紹。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More