CSS 宣告、套用方式

宣告方式

CSS 的宣告方式是這樣寫的

選擇器 {
屬性a : 設定值a ;
屬性b : 設定值b ;
屬性c : 設定值c ;
}

選擇器的名字是自己取的，而屬性是一些像 color , font-size , background-color 之類的「可設定屬性」，這些是有固定寫法的，後面章節會介紹。

設定值則是搭配前面屬性該有的設定值格式，比如說 font-size : 18px; 意思就是字體的尺寸設定為18px。
＊每一行設定值後面都要有一個「 ; 」不要忘了，常常語法會不作用都是漏掉「 ; 」

• Grouping

不一樣的選擇器可以一起共用一樣的樣式，可以這樣寫。

div, p, tr {
color:red;
font-size:16px;
}

上面這三項屬性雖然一樣，但是任何一項可以在其它地方另外宣告其它的屬性。
比如說

div {
background-color:yellow;
}

所以 div 除了前面的三種屬性，它還另外有 background-color:yellow; 這個屬性設定。

現在我們看看另一個 CSS 的例子：

假設現在要把 h1,h2,h3 三種不同大小的標題通通設成紅色，就要如下宣告。(選擇器之間用逗號隔開就好)

h1, h2, h3 {
color:red;
}

＊上面的例子，因為h1, h2, h3 是 html 的語法，所以可以直接寫，前面不用加一個點或是井號。詳細說明可以參考CSS 語法：02 class 與 id 套用

• 子代選擇器 (Descendant Selectors)

假設說 div 標籤裡面的 p 標籤背景色要是黃色的，如果p 標籤不在 div 標籤裡面，則不要套用黃色背景的屬性。(選擇器之間用空格分開就好)

div p{
background-color:yellow;
}

假設現在要把表格 <td> 標籤裡面的粗體 <b> 標籤通通設為藍色，但是如果<b>標籤不是在<td>標籤裡面，則維持原本設定。

td b{
color:blue;
}

套用方式

CSS 要叫進 HTML 裡面使用的方式有4種

行內套用	inline	直接放在那行html
嵌入套用	embed	放在head
外部連結(常用)	external link	連結外部CSS檔
匯入套用(不建議)	import	連結外部CSS檔

• 行內套用

行內套用，就是直接寫在那行html標籤裡面

顯示的結果為：
紅色的字

• 嵌入套用

嵌入套用就是先把 CSS 寫在 html 某處（通常是head），並且用<style type=”text/css”>為開頭，</style>為結尾。

顯示結果為：
紅色的字

• 外部連結套用 (常用)

就是將 css 的宣告都寫在另一個檔案，並且取名為 XXX.css，然後在 HTML 的 <HEAD>….</HEAD>之間用以下的語法匯入.css檔案使用。

這個方式很常用於個大型網站，如此可以集中管理CSS樣式，比如說今天老闆突然說，根據算命師指示，要把整個網站字體都放大5倍、連結全部變為紅色。如果CSS是分別設在每一頁 HTML 裡面那就傷心了，如果 CSS 樣式全部都由同一個(或某幾個).css 檔案來控制，那就只要修改 .css 檔案中的某幾個設定就全部完成了。

• 匯入套用 (少用)

功能和「外部連結套用」差不多，不同的瀏覽器處理的方式，但根據國外文章討論，「外部連結套用」(<link>)的效能比較好，甚至建議不要使用「匯入套用」(@import)，這算是一個瀏覽器歷史的產物，過去的就讓它過去吧。

匯入套用的語法如下

<STYLE TYPE="text/css">
<!--
@import url(https://www.abc.com/XXX.css);
-->
</STYLE>

• 串接優先順序(cascade)

如果用多種不一樣的方式匯入 CSS，那優先順序是「越靠近那一行html的宣告，優先順位越高。」

假設我們用了行內套用、嵌入套用、外部連結、匯入套用的CSS，這4份CSS宣告都同時有在定義<b>標籤，但是每一個的定義都不一樣，這時候到底要聽誰的？
這時候行內套用，因為直接寫在那行HTML裡面，所以擁有最高優先權，接下來是寫在<head>…</head>裡面的CSS，再來是匯入套用，最後才是外部連結。
而瀏覽起本身的樣式表，則是順位最低的，比如說如果我們都沒有設樣式，連結文字通常是藍色的並且有一條底線，那就是瀏覽器本身的樣式表。

順位1	行內套用	inline	直接放在那行html
順位2	嵌入套用	embed	放在head
順位3	匯入套用(不建議)	import	連結外部CSS檔
順位4	外部連結(常用)	external link	連結外部CSS檔
順位5	瀏覽器本身樣式	Browser’s own stylesheet	瀏覽器本身

匯入套用以及外部連結，因為可能同時匯入好幾個樣式表，這個時候如果有重複定義的樣式，則是越後被匯入的有越高的優先權。
比如說有以下的CSS匯入：

<head>
<link rel=stylesheet type="text/css" href="AAA.css">
<link rel=stylesheet type="text/css" href="BBB.css">
<link rel=stylesheet type="text/css" href="CCC.css">
</head>

以上狀況以最後一個 CCC.css 最優先。

!important 語法

如果在宣告 CSS 樣式時，有重複宣告的狀況，但是又找不到重複宣告的文件在哪邊，可以在屬性的值後面接上 !important 然後才是「; 」
用這樣來讓這個宣告有絕對優先權。這個在 WordPress 上很常遇到，因為不是整個網站都自己開發的，所以有時候也搞不懂其 CSS 設定在哪邊。
所以當宣告沒有作用時，試試看用 !important 語法

例子：

h2 {
font-size: 25px!important;
}

[badgeos_achievement id=”4041″] [badgeos_submission achievement_id=”4041″]

Daco Note