CSS(01)CSS層疊樣式表
阿新 • • 發佈:2022-05-13
一、什麼是 CSS?
CSS 指層疊樣式表 ( C ascading S tyle S heets) ,樣式定義 如何顯示 HTML 元素
,通常儲存在 樣式表 中 。
把樣式新增到 HTML 4.0 中,是為了 解決內容與表現分離的問題
外部樣式表 可以極大提高工作效率 ,通常儲存在 CSS 檔案 中 。多個樣式定義可 層疊 為一個
二、CSS語法
CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告:
![](https://www.runoob.com/wp-
content/uploads/2013/07/632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg)
- 選擇器通常是您需要改變樣式的 HTML 元素。
- 每條宣告由一個屬性和一個值組成。
- 屬性(property)是您希望設定的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。
CSS宣告
CSS宣告總是以分號(;)結束,宣告總以大括號({})括起來:
p {color:red;text-align:center;}
為了讓CSS可讀性更強,你可以每行只描述一個屬性:
$1```
text-align:center;
}
```css
p {font-family: "sans serif";}
p {font-family: "sans serif";}
空格和大小寫
包含空格不會影響 CSS 在瀏覽器的工作效果,同樣,與 XHTML 不同,CSS 對大小寫不敏感。不過存在一個例外:如果涉及到與 HTML
文件一起工作的話,class 和 id 名稱對大小寫是敏感的。
三、CSS 註釋
$1``` text-align:center; /*這是另一個註釋*/ color:black; ```css $1``` ### 1、外部樣式表(External style sheet) 當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用 標籤連結到樣式表。 標```css $1``` </head> 瀏覽器會從檔案 mystyle.css 中讀到樣式宣告,並根據它來格式文件。 外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是一個樣式表文件的例子: ```css $1``` ### 2、內部樣式表(Internal style sheet) 當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標籤在文件頭部定義內部樣式表,就像這樣: ```css <p style="color:sienna;margin-left:20px">這是一個段落。</p>
hr {color:sienna;}
p {margin-left:20px;}
$1```
要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:
```css
$1```
例如,外部樣式表擁有針對 h3 選擇器的三個屬性:
```css
$1```
color:red;
text-align:left;
font-size:8pt;
}
而內部樣式表擁有針對 h3 選擇器的兩個屬性:
```css
$1```
text-align:right;
font-size:20pt;
即顏色屬性將被繼承於外部樣式表,而文字排列(text-alignment)和字型尺寸(font-size)會被內部樣式表中的規則取代。
### 4、多重樣式優先順序
樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 HTML 元素中,在 HTML 頁的頭元素中,或在一個外部的 CSS 檔案中。甚至可以在同一個
HTML 文件內部引用多個外部樣式表。
一般情況下,優先順序如下:
**內聯樣式)Inline style > (內部樣式)Internal style sheet >(外部樣式)External style sheet >
瀏覽器預設樣式**
<head>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設定:h3{color:blue;} -->
<style type="text/css">
/* 內部樣式 */
h3{color:green;}
</style>
</head>
<body>
<h3>測試!</h3>
</body>
> **注意:** 如果外部樣式放在內部樣式的後面,則外部樣式將覆蓋內部樣式。