1. CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值构成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
2. CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来：
p {color:red;text-align:center;}
3. CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/*”开始，以"*/"结束。
4. id 选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置选择器，css中id选择器以‘#’来定义。
以下的样式规则应用于元素属性 id="para1":
<p id="para1">Hello css</p>
注意：id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器中不起作用
5. class选择器
class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
6. CSS创建
当读到一个样式表时，浏览器会根据它来格式化HTML文档。
1）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过
改变一个文件来改变整个站点的外观。
每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部：
浏览器会从文件 mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 HTML 标签。
样式表应该以 .css 扩展名进行保存。
注意：不要在属性值与单位之间留有空格(如: "margin-left:20 px"),正确的写法是"margin-left: 20px"
2) 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。
3）内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。
4）多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的
CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
7. CSS背景
CSS背景属性用于定义HTML元素的背景。
1) 背景颜色
backgroud-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中：
CSS中，颜色值通常以以下方式定义：
十六进制 - 如："#ff0000"
RGB - 如："rgb(255, 0, 0)"
颜色名称 - 如："red"
以下实例中，h1, p 和 div元素拥有不同的背景颜色:
2）背景图像
backgroud-image属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
页面背景图片设置实例：
3）背景图像 - 水平或垂直平铺
默认情况下，backgroud-image属性会在页面的水平或者垂直方向平铺。
其中属性 background-repeat 属性可以设置background-image的平铺属性：
background-repeat: no-repeat 表示background-image不会重复
background-repeat: repeat-x 表示只有水平位置会重复背景图像
background-repeat: repeat-y 表示只有垂直位置会重复背景图像
inherit 表示指定 background-repeat属性设置应该从父元素继承
4）背景图像 - 设置定位与不平铺
background-position属性设置背景图像的起始位置。
注意对于这个工作在 firefox和Opera，background-attachment必须设置为‘fixed(固定)’，如：
background-position: left top/left center/left bottom/right top/right center/right bottom/center top/center bottom
background-position:x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是0% 0%，右下角是100% 100%。
如果仅指定了一个值，其他值将是50%。默认值为：0% 0%
background-position: xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0.单位可以是像素(0px0px)或其他css
单位。如果仅指定了一个值，其他值将是50%，你可以混合使用%和positions。
inherit 指定background-position属性设置应该从父元素继承
5）背景 - 简写属性
页面的背景颜色可以通过很多的属性来控制。为了简化属性的代码，可以将这些属性合并在同一个属性中。
背景颜色的简写属性为“background”:
当使用简写属性时，属性值的顺序为：
background-color -- background-image -- background-repeat -- background-attachment -- background-position
这些属性无需全部使用，可以案主页面的实际需要使用。
8. CSS文本属性
9. CSS字体
CSS字体属性定义字体、加粗、大小、文字样式。
1）serif 和 sans-serif 字体之间的区别
在计算机屏幕上，sans-serif 字体被认为是比serif字体容易阅读
2) CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 -- 拥有相似外观的字体系统组合（如"Serif" 或 "Monospace"）
特定字体系列 -- 一个特定的字体系列（如"Times" 或 "Courier"）
3) 字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔，如下：
4）字体样式
font-sytle 主要用于指定斜体文字的字体样式属性。
这个属性由三个值：
正常 -- 正常显示文本
斜体 -- 让斜体字显示的文字
倾斜的文字 -- 文字向一边倾斜(和斜体非常类似，但不太支持)
5）字体大小
font-size 属性设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者
使标题看上去像段落。请务必使用正确的HTML标签，<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
注意：如果你不指定字体的大小，默认大小和普通文本段落一样，是16像素(16px=1em)。
6）设置字体大小像素
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
7）用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
8）使用百分比和EM组合
在所有浏览器的解决方案中，设置<body>元素的默认字体大小的是百分比:
我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
9) 所有CSS字体属性
10. CSS链接
不同的链接可以有不同的样式。
1）链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
2）文本修饰
text-decoration 属性主要用于删除链接中的下划线
3）背景颜色
背景颜色属性指定链接背景色：
