目录
前言：
终于到了CSS部分，我们有了HTML和XHTML的基础，就来让我们的页面变得好看起来吧~
CSS指层叠样式表（Cascading Style Sheets)，一般我们使用样式的优先级为浏览器缺省设置、外部样式表、内部样式表、内联样式。
直通车：
硬核归纳HTML+CSS+JS系列之HTML+XHTML部分（W3C标准）
硬核归纳HTML+CSS+JS系列之JavaScript部分（W3C标准）
一、基础语法
CSS语法由三部分构成：选择器、属性和值：
selector {property:value}
选择器通常是你希望定义的HTML元素或标签，属性是你希望改变的属性，注意属性和值被冒号分开。
比如将body元素内的文字颜色定义为蓝色：
body {color:blue}
1、若值为单词，则要给值加引号：
p {font-family:"sans serif";}
2、多重声明：
当然，我们使用分隔符;即可，例如：
p {
text-align: center;
color: black;
font-family: arial;
}二、高级语法
1、选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号分开就好。
h1,h2,h2,h3,h5,h6 {
color: green;
}2、继承及其问题
继承在这里就理解为我们要继承大框架的属性
body {
font-family: Verdana, sans-serif;
}如果不希望body里面包含的所有元素都被继承，那么我们就是用单独出来就好：
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}三、派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标签的样式。
比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，你可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}我们发现是先有li标签，然后是strong，所以才会出现这样的效果，比如：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>四、id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式，id选择器以“#”来定义。
例如，定义元素的颜色为红色和绿色：
#red {color:red;}
#green{color:green;}那么应用就是这样的：
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>并且注意id属性只能在每个HTML文档中出现一次。
五、id选择器和派生选择器
在现在布局中，id选择器常常用于建立派生选择器：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}上面的样式只会应用于出现在id是sidebar的元素内的段落，这个元素可能是div或是胆原表格。即使被标注为sidebar的选择器只能在文档中出现一次，这个id选择器作为派生选择器可以被使用很多次：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}六、类选择器
在CSS中，类选择器以一个点号显示：
.center {text-align: center}意为所有拥有center类的HTML元素均为居中。
当然，它也可以作为派生选择器，例如：
.fancy td {
color: #f60;
background: #666;
}在这个例子中，类名为fancy的更大的元素内部的表格单元会以灰色背景显示橙色文字。
以上介绍的基础语法，高级语法和各种选择器，那么如果创建CSS呢，答案在HMTL中我们已经知道了，外部样式表、内部样式白表、内联样式都可以的。
七、CSS框模型
我们知道有:
-
element : 元素。
-
padding : 内边距，也有资料将其翻译为填充。
-
border : 边框。
-
margin : 外边距，也有资料将其翻译为空白或空白边。
在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）
八、背景、文本、字体
在HTML中我们不建议使用背景属性，因为我们可以在css中使用。这里介绍属性如下：
| 属性 | 描述 |
|---|---|
| background | 作用是将背景属性设置在一个声明中 |
| background-attachment | 背景图像是否固定或随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-position | 设置背景图形的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
文本我们也有：
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| line-height | 设置行高 |
| letter-spacing | 设置字符间距 |
| text-align | 对齐元素中的文本 |
| text-indent | 缩进元素中文本的首行 |
| text-transform | 控制元素中的字母 |
| white-space | 设置元素中空白的处理方式 |
| word-spacind | 设置字间距 |
文字属性有：
| 属性 | 描述 |
|---|---|
| font | 作用是把所有针对字体的属性设置在一个声明中 |
| font-family | 设置字体系列 |
| font-size | 设置字体的尺寸 |
| font-style | 设置字体风格 |
| font-variant | 以小型小写字体或者正常字体显示文本 |
| font-weight | 设置字体的粗细 |
九、边框
元素外边距内就是元素的边框，元素的边框就是围绕元素内容和内边距的一条或多条线。
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
|---|---|
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
十、外边距和内边距
1、外边距：
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
2、内边距
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
十一、列表和表格
1、列表类型
要修改用于列表项的标志类型，可以用list-style-type
ul {list-style-type:square}将无序列表项标志设置为方块
2、列表项图像
ul li{list-style-image : url(xxx,gif)}
3、简写列表样式
可以将多个列表属性合并为一个方便的属性：list-style，例如：
li {list-style : url(example.gif) square inside}
4、表格中也就是border属性，与HTML一致。
十二、尺寸
我们可以使用像素、百分比来设置元素的高度和宽度。
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度 |
| line-height | 设置行高 |
| max-height | 设置元素的最大高度 |
| max-width | 设置元素的最大宽度 |
| min-height | 设置元素的最小高度 |
| min-width | 设置元素的最小宽度 |
十三、分类
元素分类属性允许你规定如何以及在何处显示元素。
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素 |
| cursor | 规定当指向元素之上时显示的指针类型 |
| display | 设置是否显示元素 |
| float | 定义元素在哪个方向浮动 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中 |
| visibility | 设置元素是否为可见或不可见 |
十四、定位
CSS定位（Positioning)属性允许你对元素进行定位。我们有相对定位、绝对定位、固定定位等等。
| 属性 | 描述 |
|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移 |
| clip | 定义了元素的形状。元素被剪入这个形状中，然后显示出来 |
| left | 定了了定位元素左外边距边界与其包含块左边界之间的偏移 |
| overflow | 设置当元素的内容溢出其区域时发生的事情 |
| position | 把元素放到一个静态的、相对的、绝对的、或固定的位置中 |
| right | 定义了元素右外边界与其包含块右边界之间的偏移 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 |
| vertical-align | 设置元素的垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
十五、伪类（Pseudo-classes)
1、伪类的语法：
selector:pseudo-class {property: value}
当然，CSS类也可以与伪类搭配使用
selector.class:paseudo-class {property: value},例如：
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>链接被访问过，显示为红色。
2、锚伪类
在支持CSS的浏览器中，链接的不同状态都可以用不同的方式显示，包括：活动状态、已被访问状态、未被访问状态、和鼠标悬停状态。
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
3、:first-child伪类
:first-child伪类对另一个元素的第一个子元素进行匹配。
例如：
选择器对任何元素的第一个子元素为a的元素进行匹配，将text-decoration属性设置为none:
a:first-child
{
text-decoration:none
}4、:lang伪类
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>列出上面的伪类信息：
| 伪类 | 作用 | IE | F | N | W3C |
|---|---|---|---|---|---|
| :active | 将样式添加到被激活的元素 | 4 | 1 | 8 | 1 |
| :focus | 将样式添加到被选中的元素 | - | - | - | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 | 4 | 1 | 7 | 1 |
| :link | 将特殊的样式添加到未被访问过的链接 | 3 | 1 | 4 | 1 |
| :visited | 将特殊的样式添加到被访问过的链接 | 3 | 1 | 4 | 1 |
| :first-child | 将特殊的样式添加到元素的第一个子元素 | 1 | 7 | 2 | |
| :lang | 允许创作者来定义指定的元素中使用的语言 | 1 | 8 | 2 |
十六、伪元素（Pseudo-elements)
伪元素用于将特殊的效果添加到某些选择器。
语法：
选择器：伪元素 {属性：值}
也可以配合CSS类使用
选择器.类：伪元素{属性：值}
| 伪元素 | 作用 | IE | F | N | W3C |
|---|---|---|---|---|---|
| :first-letter | 将特殊的样式添加到文本的首字母 | 5 | 1 | 8 | 1 |
| :first-line | 将特殊的样式添加到文本的首行 | 5 | 1 | 8 | 1 |
| :before | 在某元素之前插入某些内容 | 1.5 | 8 | 2 | |
| :after | 在某元素之后插入某些内容 | 1.5 | 8 | 2 |
后记：
那么我们的CSS部分也就结束了，接下来就是最后一部分了，如果对你有帮助，可以点个赞哦，谢谢~