CSS 简介
如上篇《HTML 知识总结》所描述的那样：HTML 是页面的骨架，CSS 是页面的样式， JavaScript 是页面的行为。CSS 的基本语法如下图所示：
CSS 常用属性
Colors 属性
颜色可以使用预定义的颜色名称或RGB、十六进制、HSL、RGBA、HSLA值指定,详情可查看 CSS Colors。例如：1
p {color: blue;}
1 | p {color: #46AEDA;} |
等等。
Background Color
1 | p {background-color: blue;} |
Text Color
1 | p {color: blue;} |
Border Color
1 | p {border-color: blue;} |
Backgrounds 属性
background-color
1 | body {background-color: lightblue;} |
background-image
background-image 属性指定样式的背景图片，url 中指定图片路径即可，如：1
body {background-image: url("page.gif");}
background-repeat
background-repeat 属性指定背景图片的排版，属性值有：repeat-x（水平方向重复）、repeat-y（垂直方向重复）、repeat（向x y方向重复，这是默认值）、round（平铺图片）、no-repeat（不重复）、inherit（继承）等，如：1
2
3
4body {
background-image: url("page.gif");
background-repeat: repeat-x;
}
background-attachment
background-attachment 属性指定背景图片的附着方式，属性值有：fixed（固定）、scroll（滚动），设置为 fixed 图片不随页面的滚动而滚动，设置为 scroll 则会随着页面的滚动而滚动，如：1
2
3
4body {
background-image: url("page.gif");
background-attachment: scroll;
}
background-position
background-position 属性指定背景图片的位置，属性值有：left、right、top、center 等，如：1
2
3
4body {
background-image: url("page.gif");
background-position: top right;
}
Height/Width 属性
可以用属性 height/width 修饰元素的宽高，属性值可以是 px、cm 或者百分比的形式，如：1
2
3
4
5div {
height: 300px;
width: 50%;
background-color: burlywood;
}
另外，除了 height/weight 属性还有：max-height/max-width（设置元素最大高度/宽度）、min-height/min-width（设置元素最小高度/宽度）。
Text 属性
Text Alignment
text-align 用作文本的排列，属性值有：center、left、right、justify（每行宽度一样）等，如：1
2
3div {
text-align: justify;
}
Text Decoration
text-decoraton 用于装饰文本，属性值有：overline（上划线）、line-through（中划线）、underline（下划线）、none（不要装饰文本），如：1
2
3h2 {
text-decoration: line-through;
}
Text Transformation
text-transform 用于指定文本大小写，属性值有：uppercase（文本全部大写）、lowercase（文本全部小写）、capitalize（文本首字母大写），如：1
2
3p {
text-transform: capitalize;
}
Text Indentation
text-indent 用于指定文本首行缩进，如：1
2
3p {
text-indent: 40px;
}
除了以上的文本属性外，还有：letter-spacing（设置字符直接的空格）、line-height（设置文本行与行之间的行高）、direction（设置文本的元素方向）、word-spacing（设置单词之间的空格）、text-shadow（设置文本阴影效果）等等属性，感兴趣的同学自行 google 了，这里不再介绍。
Fonts 属性
Font Family
fon-family 可以指定文本字体类型，属性值有：Time New Roman、Times、serif、Arial、Helvetica、sans-serif等字体类型，如：1
2
3p {
font-family: "Times New Roman";
}
Font Style
fon-style 可以指定文本字体样式，属性值有：normal（正常字体）、italic（斜体）、oblique（与 italic 相似的斜体，但是可能浏览器支持没有 italic 广）字体，如：1
2
3p {
font-style: italic;
}
Font Size
fon-size 指定文字体尺寸，属性值可以用 px 或 em （px/16=em），如：1
2
3p {
font-size: 16px;
}
Font Weight
fon-weight 指定文字重量，属性值可以是：normal、bold（粗体）等，如：1
2
3p {
font-weight: bold;
}
Links 属性
链接标签 <a> 有四个状态：link（当未访问链接时）、visited（当用户访问了链接）、hover（当鼠标放在链接上时）、active（当鼠标点击了链接）。同时需要注意的是：hover 需要写在 link 和 visited 之后；active 需要写在 hover 之后。可以看下面的例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color:blue;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">This is a link</a></b></p>
</body>
</html>
以上的例子在打开网页时链接会显示为绿色，将鼠标移动到链接上时会显示为蓝色，当鼠标点击了链接后颜色会变成黄色。
Position 属性
元素的位置定位需要用到 positon 属性，其属性值有：static（默认值，没有定位属性，元素正常出现在文档流中）、relative（相对定位，相对于元素的正常位置进行定位）、absolute（绝对定位，相对于除 static 定位以外的元素进行定位）、fixed（固定位置，相对于浏览器进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的），如：1
2
3
4
5div {
position: relative;
left: 30px;
border: 3px solid #00acec; /* 分别是 border-width、border-style（虚线、实线、双线等）、border-color 的缩写 */
}
以上的 div 就会偏离左侧 30 个像素开始显示。
Float 属性
float 属性用户定位和格式化内容，其属性值有：left（元素在容器的左侧浮动）、right（元素在容器的右侧浮动）、none（默认值，不浮动）、inherit（继承父类的属性值）。如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style>
img {
float: left;
}
</style>
<body>
<p>The image will float to the left in the paragraph.</p>
<p><img src="example.jpg" style="width:170px;height:170px;"></p>
</body>
</head>
</html>
以上的图片就会浮动在浏览器页面的左侧。
再举个例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<style>
.div1 {
float: left;
width: 200px;
height: 100px;
margin: 20px;
border: 3px solid #4c75a3;
}
.div2 {
border: 1px solid #8e908c;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</head>
</html>
结果如下图所示：
我们先不用管 div1 中各个属性是什么意思，只知道它是向左浮动的，然后肯定是希望 div2 是在 div1 下方显示。但是，很不幸，事与愿违。其实这背后的原因是这样的，指明了 float 属性的元素是脱离文档流（页面的显示像流水一样，比如鼠标上下滑动页面也跟着上下滑动）的，所以 div2 的元素就显示在 div1 的上方了。那有什么办法实现我们预期的效果呢？答案就是使用 clear 属性。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style>
.div1 {
float: left;
width: 200px;
height: 100px;
margin: 20px;
border: 3px solid #4c75a3;
}
.div2 {
border: 1px solid #8e908c;
clear: left;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</head>
</html>
其中，clear: left 的意思就是说 div2 的左侧不允许出现 float 元素。所以，这样就达到了预期效果，结果如下图所示：
Align 排列
居中元素
居中块级元素（如：div）可以使用 margin: auto，如：1
2
3
4
5. center {
margin: auto;
width: 60%;
border: 5px solid red;
}
其中选择器用于修饰块级元素（如：div）元素就会居中显示。
居中文本
居中文本可以使用 text-align: center，如：1
2
3
4. center {
text-align: center;
border: 5px solid red;
}
居中图片
居中图片可以设置 margin-left 和 margin-right 为 auto，并让其作为块元素，如：1
2
3
4
5
6img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Inline-block 显示
关于显示 display 有三个属性值：inline（元素行内显示，可是设置 width 和 height，但是设置 top
和 bottom 无效）、inline-block（跟 inline 类似，但是设置 top 和 bottom 可以生效）、block（跟 inline-block 相似，但是多了 line-break（会换行显示））。如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 <html>
<head>
<style>
.inline {
display: inline;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
}
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
}
.block {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
}
</style>
<body>
<h2>inline display</h2>
<div>
So you want to learn CSS? Great decision; CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements.<span class="inline">inline1</span> <span class="inline">inline2</span>If you are unfamiliar with HTML you will have little use for CSS, so I recommend you begin reading my HTML Lessons.
</div>
<h2>inline-block display</h2>
<div>
So you want to learn CSS? Great decision; CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements.<span class="inline-block">inline-block1</span> <span class="inline-block">inline-block2</span>If you are unfamiliar with HTML you will have little use for CSS, so I recommend you begin reading my HTML Lessons.
</div>
<h2>block display</h2>
So you want to learn CSS? Great decision; CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements.<span class="block">block1</span> <span class="block">block2</span>If you are unfamiliar with HTML you will have little use for CSS, so I recommend you begin reading my HTML Lessons.
</div>
</body>
</head>
</html>
结果如下所示：
CSS 盒子模型
关于 CSS 的盒子模型，其实上面的介绍中或多或少都有所涉及到。盒子模型如下图所示：
所有的 HTML 元素都可以看做是盒子，盒子内又分为：Content（盒子的内容用于显示文本和图片）、Padding（盒子的内边框围绕着盒子的内容，但内边框是透明的）、Border（盒子的边框围绕着内容和内边框）、Margin（外边框围绕着边框，跟 Padding 一样，它也是透明的）。如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
margin: 20px;
border: 3px solid #4c75a3;
padding: 30px;
}
</style>
<body>
<h2>Box Model Demo</h2>
<div>
width: 200px;height: 100px;margin: 20px;border: 3px solid #4c75a3;padding: 30px;
</div>
</body>
</head>
</html>
页面显示如下所示：
另外，关于盒子模型，我还想补充下 outline（轮廓）属性：outline-style（轮廓样式）、outline-color（轮廓颜色）、outline-width（轮廓宽度）、outline-offset（轮廓偏移量，即指定偏移元素的偏移量）等。接上一例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
margin: 20px;
border: 3px solid #4c75a3;
padding: 30px;
outline-width: 3px;
outline-style: solid;
outline-color: red;
}
</style>
<body>
<h2>Box Model Demo</h2>
<div>
width: 200px;height: 100px;margin: 20px;border: 3px solid #4c75a3;padding: 30px;
</div>
</body>
</head>
</html>
页面显示效果如下所示：
CSS 选择器
元素选择器
元素选择器是以 HTML 的标签元素命名，其实，文档的元素本身也是选择器。看下面的例子你的印象会更深刻：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<style>
html {
color: red;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h1>This is head1</h1>
<h2>This is head2</h2>
<p>This is a paragraph.</p>
</body>
</html>
显示效果如下图所示：
从上图元素选择器渲染的效果我们可以知道：html 父元素可以正常渲染子元素 h1 和 p，但是由于 h2 是已经定义的元素选择器，所以子元素 h2 会覆盖父元素 html 的选择器渲染效果。即：子元素中的元素选择器会覆盖父元素的元素选择器，类似于编程语言中局部变量会覆盖全局变量的意思。
选择器分组
我们可以对选择器进行分组，实现有针对性的样式渲染。比如我们只想对 h2 和 p 设置成蓝色，那么可以这么写选择器：1
2
3h2, p {
color: blue;
}
其实还有通配符的选择器，如：1
2
3* {
color: blue;
}
这样声明的选择器，会对所以 html 元素起作用。
类选择器
元素选择器只对指定的元素起作用，但是类选择器只要某个元素通过 class 属性指定了该类选择器，那么类选择器对该元素就起作用。如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style>
. class-selector {
color: green;
}
</style>
</head>
<body>
<h2>Class Selector Demo</h2>
<p class="class-selector">with class selector</p>
<p>without class selector</p>
</body>
</html>
以上的例子对于指定了类选择器的 p 的文本就会是绿色，但是未指定类选择器的 p 就不会是绿色。这样就可以实现更加灵活的控制。
其实类选择器结合指定的元素可以实现更精细化的渲染控制，举个例子，我想要指定段落 p 进行渲染控制，那么可以这么写：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
p.render {
color: green;
}
</style>
</head>
<body>
<h2>Element Class Selector Demo</h2>
<p class="render">with p class selector</p>
<p>without p class selector</p>
<div class="render">div use p class selector,it doesn't work</div>
</body>
</html>
以上的例子对于指定了类选择器的 p 的文本就会是绿色，但是未指定类选择器的 p 就不会是绿色，尽管 div 也指定了该选择器，但是因为该选择器只对元素 p 有效，所以 div 也不起作用。
ID 选择器
ID 选择器的名称以 # 开始，如果一个 HTML 文档中有多个相同的 ID，那肯定会引起不必要的麻烦，所以在使用 ID 选择器的时候强烈建议只使用一次，例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style>
#render {
color: green;
}
</style>
</head>
<body>
<h2>ID Selector Demo</h2>
<p id="render">with id selector</p>
<p>without id selector</p>
</body>
</html>
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。通过 “*[属性名]” 来定义的属性选择器，只要某个元素中含有该属性就会生效；通过“标签名[属性名][属性名]”来定义的属性选择器，只会满足该标签的属性的元素生效。如：
1 |
|
在以上例子中没有 title 属性的链接标签就不会对改属性选择器生效。
后代选择器
后代选择器只会对满足后代规则的元素其作用，如：1
2
3div p {
color: red;
}
以上的后代选择器只会对 div 下 的 p 起作用，而对于不是 div 下的 p 不起作用，如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<h2>Descendant Selector Demo</h2>
<div>
<p>match descendant selector</p>
</div>
<div>
<section>
<p>match descendant selector</p>
</section>
</div>
<p>doesn't match descendant selector</p>
</body>
</html>
注意：针对上面的例子，div 下 的 p 会生效，div 下的 xxx（任意元素）下的 p 还是会生效。
子元素选择器
子元素选择器相对后代选择器，可以实现更精准的匹配，如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style>
div > p {
color: red;
}
</style>
</head>
<body>
<h2>Child Selector Demo</h2>
<div>
<p>match Child selector</p>
</div>
<div>
<section>
<p>doesn't match Child selector</p>
</section>
</div>
<p>doesn't match Child selector</p>
</body>
</html>
这个时候 div 下的 xxx（任意元素）下的 p 就不会生效了。
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，那么可以使用相邻兄弟选择器，如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
h2 + p {
color: red;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector Demo</h2>
<p>match adjacent sibling selector</p>
<p>doesn't match adjacent sibling selector</p>
<p>doesn't match adjacent sibling selector</p>
</body>
</html>
伪类
前面文章中有提到过链接标签 a 有四个状态：a:link、a:visited、a:hover、a:active，其实这就是伪类，这里不再赘述。
这里重点介绍下伪类 first-child ，包括他它的三种使用场景：元素的 first-child（如：“p:first-child”）、子元素的 first-child（如：“p > i:first-child”）、后代元素的 first-child（如：“p:first-child i”），以下结合例子说明。
p:first-child
这个写法的意思是 p 标签作为子元素，匹配作为子元素 p 的首个 p，如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style>
p:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>match p:first-child</p>
<p>doesn't match p:first-child</p>
<p>doesn't match p:first-child</p>
</div>
</body>
</html>
p > i:first-child
对于这个写法可以把 p > i 看成一个整体，然后将其作为子元素，匹配作为子元素 p > i 的首个 p > i，如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
p > i:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph <i>match</i>paragraph <i>doesn't match</i></p>
<p>paragraph <i>doesn't match</i>paragraph <i>doesn't match</i></p>
</div>
</body>
</html>
p:first-child i
对于这个写法，可以将其分两部分来理解：前半部分 p:first-child，先匹配作为子元素 p 的首个 p;后半部分是后代选择器 i，作为后代选择器会匹配所以的 i，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
p:first-child i {
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph <i>match</i>paragraph <i>match</i></p>
<p>paragraph <i>doesn't match</i>paragraph <i>doesn't match</i></p>
</div>
</body>
</html>
伪元素
CSS 的伪元素用于向某些选择器设置特殊效果
对于 :first-letter
向文本的第一个字母添加特殊样式，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
p:first-letter {
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</body>
</html>
那么 paragraph1 和 paragraph2 的首字母 p 会为红色。
对于 :first-line
向文本的首行添加特殊样式，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style>
p:first-line {
color: red;
}
</style>
</head>
<body>
<div>
<p>
line1<br />
line2<br />
line3<br />
</p>
</div>
</body>
</html>
那么 line1 为红色。
对于 :before
在元素之前添加内容，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style>
p:before {
content: "before content";
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</body>
</html>
那么 paragraph1 和 paragraph2 的前面都会加上红色的 before content 字符串。
对于 :after
在元素之后添加内容，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style>
p:after {
content: "before content";
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</body>
</html>
那么 paragraph1 和 paragraph2 的后面都会加上红色的 before content 字符串。
