CSS 再學，基礎篇
阿新 • • 發佈：2018-12-22
語法
h1 {color:red; font-size:14px;}
共享宣告
h1,h2,h3,h4,h5,h6 {
color: green;
}繼承
通過 CSS 繼承，子元素將繼承最高階元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字型，子元素的子元素也一樣。
如果你不希望 "Verdana, sans-serif" 字型被所有的子元素繼承，又該怎麼做呢？比方說，你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則。
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}派生
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}id選擇器
#red {color:red;} #green {color:green;}
id 選擇器和派生選擇器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}類選擇器
.center {text-align: center}class 也可被用作派生選擇器
.fancy td {
color: #f60;
background: #666;
}類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。
元素也可以基於它們的類而被選擇：
td.fancy { color: #f60; background: #666; }
<td class="fancy">那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。
屬性選擇器
對帶有指定屬性的 HTML 元素設定樣式。
<style>
[lang|=en]
{
background:yellow;
}
</style>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>只有中間是橫槓才有效。
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用於選取帶有指定屬性的元素。 |
| [attribute=value] | 用於選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用於選取屬性值中包含指定詞彙的元素。 |
| [attribute|=value] | 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
引入樣式表
引入（優）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>內部（次之）
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>內聯（不建議）
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 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;即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。