概述
CSS 指層疊樣式表 (Cascading Style Sheets)
所有的主流瀏覽器均支持層疊樣式表。
樣式層疊次序優(yōu)先級 （從上到下峻仇，由底到高）
- 瀏覽器缺省設置
- 外部樣式表
- 內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
- 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
選擇器的分組
被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開边臼。
在下面的例子中倾鲫，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的吗氏。
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承與兼容性
我們可以通過對body元素設置規(guī)則，來使子元素都可以繼承該規(guī)則雷逆。
如果某些瀏覽器不支持繼承原則的話弦讽，可采用針對性設置，解決問題膀哲，如下：
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
派生選擇器
當strong為li元素內(nèi)時生效往产。
li strong {
font-style: italic;
font-weight: normal;
}
<li><strong>我是斜體字被碗。這是因為 strong 元素位于 li 元素內(nèi)。</strong></li>
id 選擇器
id 選擇器以 "#" 來定義仿村。
#red {color:red;}
#green {color:green;}
通過id蛮放，指定特有的元素獨立發(fā)揮作用
div#template {
border: 1px dotted #000;
padding: 10px;
}
<div id="template">
...
</div>
類選擇器
類選擇器以一個點號顯示：
.center {text-align: center}
在上面的例子中，所有擁有 center 類的 HTML 元素均為居中奠宜。
在下面的 HTML 代碼中包颁，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 .center 選擇器中的規(guī)則压真。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
其它同id選擇器類似娩嚼，優(yōu)先級比id選擇器低。
屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式滴肿。
注釋：只有在規(guī)定了 !DOCTYPE 時岳悟，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中泼差，不支持屬性選擇贵少。
[title]
{
color:red;
}
[title=haha]
{
border:5px solid blue;
}
[title~=hello] /*適用于由空格分隔的屬性值*/
{
background-color:salmon;
}
屬性如下
<li title="haha hello"> message </li>
如何創(chuàng)建 CSS
- 外部樣式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 內(nèi)部樣式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
- 內(nèi)聯(lián)樣式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
作者：Zyao89；轉載請保留此行堆缘，謝謝滔灶；
