CSS 指層疊樣式表 (Cascading Style Sheets)
樣式，定義了如何顯示 HTML 元素
作用
將 HTML 中元素的編寫，和樣式定制分開
只需定義一個外部 CSS 文件，可以供全網站所有頁面使用，方便修改
CSS 規則的語法
由兩個主要的部分構成：選擇器，以及一條或多條聲明。聲明用花括號包圍。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。屬性是希望設置的樣式屬性，每個屬性有一個值，屬性與值通過冒號分隔。
selector {property: value}
多重聲明
如果要定義不止一個聲明，則需要用分號將每個聲明分開。
最后一條規則是不需要加分號的。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這么做的好處是方便增刪，避免出錯。
應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性：
p {
text-align: center;
color: black;
font-family: arial;
}
class 和 id 名稱對大小寫是敏感的。
選擇器
選擇器的分組
有相同聲明的選擇器可以被分在一組共享聲明，只需要用逗號將同一個分組的選擇器分開。
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生選擇器
用空格表示層級關系
li strong {
font-style: italic;
font-weight: normal;
}
為 li 元素中 strong 元素中的內容定制樣式
HTML 代碼：
<li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內。</strong></li>
id 選擇器
用#來表示對有某個 id 的元素指定樣式
#red {color:red;}
將下面代碼中，id 屬性為 red 的 p 元素顯示為紅色
<p id="red">這個段落是紅色。</p>
或者
對 id 為 sidebar 的 div 元素定制樣式
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
- 用作派生選擇器
可以用 id 選擇器 建立 派生選擇器
id 為 sidebar 的元素中的 段落 和 二級標題 定制樣式
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
類選擇器
用.表示針對類指定樣式
.center {text-align: center}
所有擁有 center 類的 HTML 元素均為居中。
<h1 class="center">
This heading will be center-aligned
</h1>
- 用作派生選擇器
和 id選擇器 一樣，類選擇器 也可被用作派生選擇器
.fancy td {
color: #f60;
background: #666;
}
類名為 fancy 的元素內部的表格單元會以灰色背景顯示橙色文字
元素也可以基于它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
屬性選擇器
可以為擁有指定屬性的 HTML 元素設置樣式
[title]
{
color:red;
}
[title=W3School]
{
border:5px solid blue;
}
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
使用
樣式可以在以下幾個地方定義并被頁面使用
(優先級由高到低)
- HTML 元素內部定義
- HTML 文件頭元素中
- 外部 CSS 文件/樣式表文件
將多重樣式定義層疊為一個
當同一個 HTML 元素的一個屬性被不止一個樣式定義時，只有一個優先級最高的樣式定義會生效。所有根據規則生效的樣式，會組成一個新的虛擬樣式表。
外部樣式表擁有針對 h3 選擇器的三個屬性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3 {
text-align: right;
font-size: 20pt;
}
假如內部樣式表和外部樣式表鏈接同時定義，那么 h3 得到的樣式是：
color: red;
text-align: right;
font-size: 20pt;
HTML 元素內部定義
當樣式僅需要在一個元素上應用一次時
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
HTML 文件頭元素中
當單個文檔需要特殊的樣式時
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
外部 CSS 文件
樣式可以存儲在樣式表中，外部樣式表是 CSS 文件。可以在同一個 HTML 文檔內部引用多個外部樣式表。
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面在<head>標簽中使用 <link>標簽鏈接到樣式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據它來格式文檔。
樣式表文件內容的例子
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
HTML 代碼：
一個類中可以指定多個樣式，用空格隔開
<body>
<ul class="nav">
<li>[站外圖片上傳中……(2)]</li>
</ul>
<ul class="nav header">
<li><a href="">Home</a></li>
<li><a href="">Site</a></li>
<li><a href="">Other</a></li>
</ul>
</body>
- 覆蓋
在樣式表中這樣定義：
}
h1, h2, h3 {
color: #37A5F0;
}
h1 {
color: #ffffff;
margin: 10px 0 15px 0;
text-align: center;
}
h2 {
margin: 10px 0 20px 0;
text-align: center;
font-size: 26px;
font-weight: bold;
}
h3 {
margin: 15px 0 15px 0;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 3px;
font-size: 18px;
font-weight: bold;
}
選擇器組中定義的聲明，優先級低于單獨定義的
疑問？
li:last-child
.nav {
padding-left: 0;
margin: 5px 0 20px 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 10px;
}
.nav li:last-child {
padding-right: 0;
}
