CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 <head> 标签内部）
4、内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
CSS 选择器
元素选择器：html/boyd/p/li/...
元素选择器又称为类型选择器（type selector）。
类型选择器匹配文档语言元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例。
h1 {color:blue;}
h2, p {color:gray;} （选择器分组）
h1, h4 {color:silver; background:white;} （选择器和声明分组）
* {color:red;} （通配符选择器）
类选择器：class=""
类选择器允许以一种"独立于文档元素"的方式来指定样式。
要"应用样式"而"不考虑具体设计"的元素，最常用的方法就是使用类选择器.
.important {color:red;}
p.important {color:red;}（元素和类选择器的结合）
.important.warning {background:silver;}（多类选择器）
例：<p class="important warning">
ID 选择器：id=""
ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
*#intro {font-weight:bold;}
属性选择器：
选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
[title] {color:red;}
[title="W3School"] {color: red;}（指定属性的值）更多用法W3C
a[href][title] {color:red;}（元素和属性选择器的结合）
后代元素选择器：" "
后代选择器可以选择作为某元素后代的元素。不论嵌套层次深度。
h1 em {color:red;}
子元素选择器：">"
作为某元素子元素的元素。
h1 > strong {color:red;}
相邻兄弟元素选择器："+"
紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
伪类：
向某些选择器添加特殊的效果。
:link、:first-child、:hover 更多伪类W3C
伪元素：
某些选择器设置特殊效果。
:first-letter、:first-line、:before、:after
CSS创建
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
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>
浙公网安备 33010602011771号