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

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…