結(jié)構(gòu)
語(yǔ)法結(jié)構(gòu)
- 兩種方法使用 RGB 值
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
// 當(dāng)使用 RGB 百分比時(shí)搞监，即使當(dāng)值為 0 時(shí)也要寫(xiě)百分比符號(hào)。
- 如果值為若干單詞镰矿，則要給值加引號(hào)
p {font-family: "sans serif";}
- 選擇器的分組：用逗號(hào)分開(kāi)
h1,h2,h3,h4,h5,h6 { color: green; }
繼承及其問(wèn)題
- 子元素從父元素繼承屬性
body {
font-family: Verdana, sans-serif;
}
不需要另外的規(guī)則腺逛，所有 body 的子元素都應(yīng)該顯示 Verdana 字體，子元素的子元素也一樣
派生選擇器 | 上下文選擇器
依據(jù)元素位置的上下文關(guān)系定義樣式
- 后代選擇器（descendant selector）又稱為包含選擇器
h1 em {color:red;}
- 子元素選擇器（Child selectors）
h1 > strong {color:red;}
- 相鄰兄弟選擇器（Adjacent sibling selector）
h1 + p {margin-top:50px;}
li + li {font-weight:bold;} // 除了第一個(gè)li
屬性選擇器
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式
注意：只有在規(guī)定了 !DOCTYPE 時(shí)衡怀，IE7 和 IE8 才支持屬性選擇器棍矛。
[title] { color:red; } // 屬性選擇器
[title=W3School] { border:5px solid blue; } //屬性和值選擇器
[title~=hello] { color:red; } // 包含空格分隔的值 hello world
[lang|=en] { color:red; } // 包含連字符分隔的值 en-us
- 選擇器參考手冊(cè)
創(chuàng)建CSS
- 外部樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
- 內(nèi)部樣式表
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
- 內(nèi)聯(lián)樣式
<p style="color: sienna; margin-left: 20px">
