概述
CSS 指层叠样式表 (Cascading Style Sheets)
所有的主流浏览器均支持层叠样式表。
样式层叠次序优先级 （从上到下，由底到高）
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
选择器的分组
被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承与兼容性
我们可以通过对body元素设置规则，来使子元素都可以继承该规则。
如果某些浏览器不支持继承原则的话，可采用针对性设置，解决问题，如下：
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
派生选择器
当strong为li元素内时生效。
li strong {
font-style: italic;
font-weight: normal;
}
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
id 选择器
id 选择器以 "#" 来定义。
#red {color:red;}
#green {color:green;}
通过id，指定特有的元素独立发挥作用
div#template {
border: 1px dotted #000;
padding: 10px;
}
<div id="template">
...
</div>
类选择器
类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
其它同id选择器类似，优先级比id选择器低。
属性选择器
对带有指定属性的 HTML 元素设置样式。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
[title]
{
color:red;
}
[title=haha]
{
border:5px solid blue;
}
[title~=hello] /*适用于由空格分隔的属性值*/
{
background-color:salmon;
}
属性如下
<li title="haha hello"> message </li>
如何创建 CSS
- 外部样式表
<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>
作者：Zyao89；转载请保留此行，谢谢；
网友评论