一、CSS简介
1、简单介绍
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，通常存储在样式表中。把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。使文档内容（HTML内容）清晰地独立于文档表现层。
外部样式表可以极大提高工作效率，通常存储在 CSS 文件中，多个样式定义可层叠为一（样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表）。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中内联样式（在 HTML 元素内部）拥有最高的优先权。
1、浏览器的样式声明（缺省设置）；2、外部样式表；3、内部样式表（位于
标签内部）；4、内联样式（在 HTML 元素内部）2、CSS基础语法
selector {declaration1; declaration2; ... declarationN } ——选择器{N条声明以分号隔开}
选择器：需要设置样式的 HTML 元素
声明：由以冒号连接的属性和值构成，属性（property）是希望设置的样式属性（style attribute）。多条声明以花括号包围
注意：
属性值的单位，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。其他的情况不用。
如果值为若干单词，则要给值加引号。p {font-family: "sans serif";}
多重声明每行只描述一个属性以增强样式定义的可读性，均以分号结尾（最后一行不用分号也可）
空格和大小写，是否包含空格不会影响 CSS 在浏览器的工作效果，CSS 对大小写不敏感（与 XHTML 不同）。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
3、选择器的分组
对选择器进行分组，被分组的选择器可以分享相同的声明，用逗号将需要分组的选择器分开。h1,h2,h3,h4,h5,h6{ color: green; }
4、继承问题
CSS子元素从父元素继承属性，但是并不总是按此方式工作。Netscape 4.0 浏览器无法理解继承，不过可以理解组选择器。因此添加使用分组选择器来处理旧式浏览器无法理解继承的问题。
同理，需要摆脱对父元素的继承，可针对HTML元素添加CSS规则。
5、常用CSS选择器
①派生选择器
通过依据元素在其位置的上下文关系来定义样式，简洁标记。
head部分css代码：li strong { font-style: italic; }
body部分HTML代码：
②id 选择器
为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。id 属性只能在每个 HTML 文档中出现一次。
head部分css代码：#green {color:green;}
body部分HTML代码：
id="green">这个段落是绿色。
id 选择器常常用于建立派生选择器，可以被使用很多次。#sidebar p {…}花括号内的样式只会应用于出现在 id 是 sidebar 的元素内的p元素。
③类选择器
为标有特定 class 的 HTML 元素指定样式，以 点号来显示。类名的第一个字符不能使用数字，无法在 Mozilla 或 Firefox 中起作用。
head部分css代码：.center {text-align: center}
body部分HTML代码：
class="center">这个段落是绿色。
class 也可被用作派生选择器，元素也可以基于它们的类而被选择。
.fancy td{color: #f60;} 类名为 fancy 的更大的元素内部的表格单元都会以显示橙色文字。
td.fancy{color: #f60;} 类名为 fancy 的表格单元将是橙色。
④属性选择器
对带有指定属性的 HTML 元素设置样式。（在 IE6 及更低的版本中，不支持属性选择。）选择器以中括号包围指定属性定义，如【title】{…}
1）属性和值选择器
单个值：[title=W3School]{border:5px solid blue;} 为 title="W3School" 的所有元素设置样式
多个值：[title~=hello] { color:red; } 适用由空格分隔的属性值，为title属性值包含hello的所有元素设置样式
[lang|=en] { color:red; } 适用于由连字符分隔的属性值，……
2）设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。input[type="text"]{……}
6、插入css样式表
①外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />适用于将样式应用于很多页面时，可以通过改变一个文件来改变整个站点的外观。浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
注意：不要在属性值与单位之间留有空格。在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
②内部样式表