CSS 知识总结

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
4
body {
background-image: url("page.gif");
background-repeat: repeat-x;
}

background-attachment

background-attachment 属性指定背景图片的附着方式,属性值有:fixed(固定)、scroll(滚动),设置为 fixed 图片不随页面的滚动而滚动,设置为 scroll 则会随着页面的滚动而滚动,如:

1
2
3
4
body {
background-image: url("page.gif");
background-attachment: scroll;
}

background-position

background-position 属性指定背景图片的位置,属性值有:left、right、top、center 等,如:

1
2
3
4
body {
background-image: url("page.gif");
background-position: top right;
}

Height/Width 属性

可以用属性 height/width 修饰元素的宽高,属性值可以是 px、cm 或者百分比的形式,如:

1
2
3
4
5
div {
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
3
div {
text-align: justify;
}

Text Decoration

text-decoraton 用于装饰文本,属性值有:overline(上划线)、line-through(中划线)、underline(下划线)、none(不要装饰文本),如:

1
2
3
h2 {
text-decoration: line-through;
}

Text Transformation

text-transform 用于指定文本大小写,属性值有:uppercase(文本全部大写)、lowercase(文本全部小写)、capitalize(文本首字母大写),如:

1
2
3
p {
text-transform: capitalize;
}

Text Indentation

text-indent 用于指定文本首行缩进,如:

1
2
3
p {
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
3
p {
font-family: "Times New Roman";
}

Font Style

fon-style 可以指定文本字体样式,属性值有:normal(正常字体)、italic(斜体)、oblique(与 italic 相似的斜体,但是可能浏览器支持没有 italic 广)字体,如:

1
2
3
p {
font-style: italic;
}

Font Size

fon-size 指定文字体尺寸,属性值可以用 px 或 em (px/16=em),如:

1
2
3
p {
font-size: 16px;
}

Font Weight

fon-weight 指定文字重量,属性值可以是:normal、bold(粗体)等,如:

1
2
3
p {
font-weight: bold;
}

链接标签 <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
<!DOCTYPE html>
<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
5
div {
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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
6
img {
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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
3
h2, 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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<style>
a[href][title] {
color: yellow;
}
</style>
</head>
<body>
<h2>property Selector Demo</h2>
<a href="www.baidu.com" title="百度一下">百度一下</a>
<a href="www.baidu.com">百度一下</a>
</body>
</html>

在以上例子中没有 title 属性的链接标签就不会对改属性选择器生效。

后代选择器

后代选择器只会对满足后代规则的元素其作用,如:

1
2
3
div 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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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 字符串。