css 样式表
使用方式包括行内样式、内嵌样式、链接样式、导入样式。
行内样式
直接在 html 标记中使用 style 属性，属性的内容就是 css 的属性和值。
<p style="color:red"> 段落样式 </p>
内嵌样式
添加 css 样式代码到
之间，用 标记声明。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> 内嵌样式 </title>
<style type="text/css">
p {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p> 采得百花成蜜后 </p>
<p> 为谁辛苦为谁甜 </p>
</body>
</html>
效果：
链接样式
在
标记中采用 标签，<link rel="stylesheet" type="text/css" href="file.css" />
导入样式
在 标记中，使用 @import 导入一个外部样式表
<style type="text/css">
@import "file.css"
</style>
优先级问题
浏览器在显示网页是这样处理的，先检查有没有行内样式，有就执行，针对本句的其他 css 就不去管了，其次检查内嵌样式，有就执行，若前两者都没有的情况下再检查链接样式的 css。综上所述，3 种 css 的执行优先级是：行内样式、内嵌样式、链接样式。
css 选择器
按用途可以分为标签选择器、类选择器、全局选择器、ID 选择器、伪类选择器等。
标签选择器
基本形式如下所示
tagName { property: value }
其中 tagName 表示标记名称，比如 p,h1 等 html 标记，property 表示 css 属性，value 表示属性值。
body, p, td, th, div, blockquote, dl, ul, ol {
font-family: Tahoma;
font-size: 1em;
color: #000000;
}
类选择器
语法格式如下所示
.classValue { property: value }
其中 classValue 是选择器的名称，自己命名，如果一个标记中具有 class 属性且 class 属性值为 classValue，那么呈现的样式由该选择器指定。在定义类选择器时要加句点.
ID 选择器
语法格式如下所示
#idValue { property: value }
ID 选择器定义的是某一个特定的 html 元素，一个网页文件只能有一个元素使用某一 ID 的属性值。
全局选择器
语法格式如下所示
* { property: value }
* 表示对所有元素起作用。
组合选择器
只是一种组合形式，并不是一种真正的选择器，但在实际中经常使用，例如
h1.red {color:red}
<h1 class="red">h1</h1>
继承选择器
规则是，子标记在没有定义的情况下所有的样式都是继承父标记的，当子标记重复定义了父标记定义过的声明时，子标记就执行后面的声明；与父标记不冲突的地方仍然沿用父标记的声明。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
color: red;
text-decoration: underline;
}
h1 strong {
color: #004400;
font-size: 40px;
}
</style>
</head>
<body>
<h1> 等待太久得来的 <strong> 东西 </strong></h1>
<h1> 多半已经不是当初自己 <font> 想要 </font> 的样子了 </h1>
</body>
</html>
伪类选择器
伪类作用在标记的状态上，包括:first-child, :link, :visited, :hover, :active, :focus, :lang 等等。
伪类选择符定义的样式最常用在标记 <a> 标记上，它表示链接的 4 中不同状态：未访问链接 (:link)、已访问链接(:visited)、激活状态(:active) 和鼠标停留在链接上(:hover)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> 伪类 </title>
<style>
a:link { color: red }
a:visited { color: green}
a:hover { color: blue }
a:active { color: orange }
</style>
</head>
<body>
<a href="http://www.netcan.xyz"> 访问 NetCan_Space</a>
</body>
</html>
属性选择器
直接通过标记的属性来进行修饰，就是根据某个属性是否存在或属性值来寻找元素。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[align="left"] {
font-size: 20px;
font-weight: bolder;
}
[lang^="zh"] {
color:blue;
font-size: 25px;
}
[href$="xyz"] {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p> 沧海月明珠有泪 </p>
<p> 蓝田日暖玉生烟 </p>
<p> 此情可待成追忆？只是当时已惘然。</p>
<a href="http://www.netcan.xyz"> 访问 NetCan_Space</a>
</body>
</html>
选择器声明
集体声明
在一个页面中，有时候需要将不同种类的标记样式保持一致，例如需要 p 标记和 h1 字体保持一致，此时可以使 p 和 h1 标记共同使用类选择器，或者使用集体声明方法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1,h2,h3,p {
color: blue;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<h1> 国破山河在，城春草木深。</h1>
<h2> 感时花溅泪，恨别鸟惊心。</h2>
<h3> 烽火连三月，家书抵万金。</h3>
<p> 白头搔更短，浑欲不胜簪。 </p>
</body>
</html>
多重嵌套声明
在通过 css 控制 html 样式时，还可以使用层层递进的方式，即嵌套方式，例如当 <p> 和</p>标记之间包含 <a></a> 标记时，就可以使用这种方式对 html 标记进行修饰。具体案例看3.6。
css 继承
具体请看3.6。
