- 認識CSS
- HTML設計網頁版面的不足
- CSS的特點
- CSS的排版樣式
- 1 内聯樣式表
- 2 内部樣式表
- 3 外部樣式表
- 樣式表層疊
1. 認識CSS
CSS是Cascading Style Sheets的縮寫，中文翻譯為層疊式樣式表。CSS2 規範于1998 年02 月通過W3C 的稽核與推薦。HTML,XHTML,XML等标記語言都可以使用CSS來制作排版樣本。
2. HTML設計網頁版面的不足
使用傳統HTML控制标記來設計網頁，在排版方面先天上就遠不及層疊式樣式表，因為HTML并非完全着眼于網頁排版的功能上。而對于XHTML而言更是如此，因為XHTML有意将原先HTML中有關網頁版面的标簽和屬性廢棄不用，如
<font>,<center>,color,background,bgcolor
等。也就是說對于XHTML而言，其排版和顯示功能比HTML更弱。是以，使用XHTML來設計網頁更需要搭配CSS排版樣本。
3. CSS的特點
-
HTML排版時的缺點
設定麻煩，修改麻煩，功能嚴重不足
-
CSS樣式排版的優點
排版屬性功能相對完整，排版檔案可以獨立存在，可以共用排版檔案
-
CSS樣式排版的分類
内聯樣式表，内部樣式表，外部樣式表
- CSS排版專用标記 :
<div>
<span>
<div>
<span>
4. CSS的排版樣式
1. 内聯樣式表 :
格式：
<标記名稱 style="屬性1:屬性值1;屬性2:屬性值2>...</标記名稱>"
執行個體 :
<p style="text-align:center;color:red;font-size=20px">排版樣式</p>
2. 内部樣式表:
内部樣式表中所有的樣式定義必須在
<style>...</style>
之間，而
<style>...</style>
又必須在
<head>...</head>
之間。
内部樣式表和外部樣式表在功能上都可分為三種 :
- 标記定義型
- class定義型
- id定義型
(1). 标記定義型的格式
<head>
<style type="text/css">
标記名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
标記名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
</style>
</head>
<body>
<标記名稱>...</标記名稱>
</body>
(2). class定義型的格式
<head>
<style type="text/css">
.定義名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
.定義名稱1,.定義名稱2{
屬性1:屬性值1;
屬性2:屬性值2
}
</style>
</head>
<body>
<标記名稱 class="定義名稱">...</标記名稱>
</body>
(3). id定義型的格式
<head>
<style type="text/css">
#定義名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
#定義名稱1,#定義名稱2{
屬性1:屬性值1;
屬性2:屬性值2
}
</style>
</head>
<body>
<标記名稱 id="定義名稱">...</标記名稱>
</body>
3. 外部樣式表:
外部樣式表需要在字尾為.css的檔案中定義樣式，如
标記名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
.定義名稱{
屬性1:屬性值1;
屬性2:屬性值2
}
外部樣式表可使用link鍊入，也可使用import導進到html檔案中
在
<head>...</head>
之間使用
<link>
,格式 :
<head>
<link rel="stylesheet" type="text/css" href="URL"/>
</head>
在
<style>...</style>
之間使用import, 格式 :
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
5. 樣式表層疊
規則一，CSS規定範圍越小優先級越高，是以内聯（或稱行内）樣式表、内部樣式表和外部樣式表排版定義的優先級由高到低為
行内 > id定義型 > class定義型 > 标記定義型
規則二，相同優先級，靠後的樣式會覆寫前面的樣式。
所有的樣式會根據以上兩條規則層疊于一個新的虛拟樣式表中。
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)