CSS 指层叠样式表 (Cascading Style Sheets)

内联样式（行内样式）

在开始标记中通过style属性(attribute)来设置元素的样式。注意，这里的 property 指的是 CSS 属性(property)

<table align="center" style="background-color: aquamarine; width: 300px;height: 200ox;"><caption><b>购物清单</b></caption><tr><th>商品名</th><th>数量</th><th>价格（元）</th></tr><tr><td>牙刷</td><td>2</td><td>10.5</td></tr><tr><td>毛巾</td><td>4</td><td>24</td></tr><tr><td>衣架</td><td>20</td><td>16.8</td></tr><tr><td>牙刷</td><td>2</td><td>10.5</td></tr></table>

内嵌样式（内部样式）

在 HTML 文档中通过 style 元素插入CSS样式。通常将内嵌样式(内部样式) 添加到 head 区域内。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">caption{font-size: 20px;color: darkblue;}th{background-color: cornflowerblue;}</style>
</head>
<body><table align="center"><caption><b>购物清单</b></caption><tr><th>商品名</th><th>数量</th><th>价格（元）</th></tr><tr><td>牙刷</td><td>2</td><td>10.5</td></tr><tr><td>毛巾</td><td>4</td><td>24</td></tr><tr><td>衣架</td><td>20</td><td>16.8</td></tr><tr><td>牙刷</td><td>2</td><td>10.5</td></tr></table>
</body>
</html>

其中内嵌样式的 style元素实在head元素中的。

 <style type="text/css">caption{font-size: 20px;color: darkblue;}th{background-color: cornflowerblue;}</style>

选择器

Type Selector

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

    <style type="text/css">html{color: rgb(191, 121, 248);}caption{font-size: 20px;color: darkblue;}th{background-color: cornflowerblue;}</style>

Type Selector也称作 tag name selector，国内资料上通常称作标签选择器 <p>Type Selector是根据元素类型(即标签名称)来选择页面上的元素。

type selector

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

h1 {font-family: sans-serif;}

class selector

class selector允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。所有元素的 calss 属性值中都可以包含多个 class-name （它们之间使用空格隔开即可）

<style type="text/css">/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 *//*[class~=odd] { */.odd{background-color: #dfdfdf;}/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`even`一词的元素 */.even {background-color: #ffff00;}.yuan-fang {border: 1px solid blue;}</style>

ID selector

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

 #seventh {border: 1px solid green;}

并且要保证元素中的 id属性是唯一的。

 <div id="first" class="odd afang yuan-fang di-pang lao-wang">第一个</div><p id="second" class="even yuan-fang">老二</p><div id="third" class="odd di-pang">小三</div><section id="fourth" class="even lao-wang">老四</section><div id="fifth" class="odd laowu">小五</div><div class="even xiaoliu">小六汤包</div><div id="seventh">每一天</div>

Attribute Selector

Attribute Selector被翻译为属性选择器。[attribute]用于选择显式定义了指定属性的元素。

[attribute~=word]用于选择显式定义了指定属性并且该属性值中包含指定单词的元素。[attrivute=value]用于选择显式定义了指定属性并且该属性值等于给定值的元素。

            [id] {color: blue;border: 1px solid green;}/* 选择页面上显式书写了 class 属性(attribute)的元素 */[class] {text-align: right;border: 1px solid green;}/* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */[class~=odd] {background-color: #dfdfdf;}/* 选择页面上显式书写了id属性(attribute)且该属性值等于给定值的元素 */[id=seventh] {background-color: #ff0;}

structural pseudo-classes

超链接

本例演示如何向文档中的超链接添加不同的颜色。
超链接 2

本例演示如何向超链接添加其他样式。
超链接 - :focus 的使用

本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。
:first-child（首个子对象）

本例演示 :first-child 伪类的用法。
: lang（语言）

本例演示 : lang 伪类的用法。

            /* Universal Selector */* {margin: 50px;border: 1px solid blue;}/* structural pseudo-classes */:root {border-color: red;}:empty {height: 20px;background-color: #dfdfdf;}