从零开始学CSS3

Author Avatar
MagicDo 6月 02, 2017
  • 在其它设备中阅读本文章

CSS3基础入门

Cascading Style Sheet(级联样式表),简称为CSS,也称为层叠样式表,用于网页的风格设计,包括字体大小、颜色,以及元素的精确定位。CSS3是CSS技术的一个升级版本。

CSS样式表的基本使用

CSS样式表,可以控制HTML文档的显示。但在控制文档显示之前,首先应在需要显示的HTML文档中导入CSS样式表。有如下四种使用样式表的方式。

  • 链接外部样式文件:这种方式将样式文件彻底与HTML文档分离,样式文件需要额外引入。在这种方式下,一批样式可以控制多份文档。
  • 导入外部样式文件:这种方式与上一种方式类似,只是用@import来引入外部样式表。
  • 使用内部样式定义:这种方式是通过HTML文档定义样式单部分来实现的。则这种方式下,每批CSS样式只控制一份文档。
  • 使用内联样式:这种方式将样式内联定义到具体的HTML元素,通常用于精确的控制一个HTML元素的表现。在这种方式下,每份CSS样式只控制单个HTML元素。

下面依次介绍使用样式表的各种方式。

引入外部样式文件

1
<link rel="stylesheet" type="text/css" href="css文件的url">

示例:

1.定义样式文件

1
2
3
4
5
6
7
8
9
10
11
12
    /**设置整个表格的背景色**/
table{
background-color: #003366;
width: 400px;
}
/** 设置单元格的背景色字体等 **/
td{
background-color: #fff;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}

2.在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>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table>
<tr>
<td>黑客与画家</td>
</tr>
<tr>
<td>数学之美</td>
</tr>
<tr>
<td>算法导论</td>
</tr>
</table>
</body>
</html>

导入外部样式表

导入外部样式表跟链接外部样式表功能差不多,只是在语法上存在差别。导入外部样式表需要在<style .../>元素中使用@import来执行导入。
例如:

1
2
3
   <style type="text/css">
@import url("css/style.css");
</style>

但是,为了兼容某些浏览器,我们开发者应该尽量避免使用@import导入外部样式表,而是应该考虑使用链接外部样式表的方式。

使用内部CSS样式

一般来说,我们不建议使用内部CSS样式,因为这种做法需要在HTML文档内嵌入CSS样式定义,这种内部CSS样式主要有三大劣势。

  • 如果此CSS样式需要被其他HTML文档使用,那么这些CSS样式必须在其他HTML文档中重复定义。
  • 大量CSS嵌套在HTML文档中,必将导致HTML文档过大,大量的重复下载,导致网络负载过重。
  • 如果需要修改整个网站的风格时,必须依次打开每个页面重复修改,不利于软件工程化管理。

但是内部样式并非一无是处,如果想让某些CSS样式对某个页面有效,而不会影响整个站点,则应该选择使用内部CSS样式定义。

内部CSS样式定义的语法格式如下:

1
2
3
   <style type="text/css">
样式表文件定义
</style>

示例:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
background-color: #003366;
width: 400px;
}
td {
background-color: #fff;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}
</style>

</head>
<body>
<table>
<tr>
<td>黑客与画家</td>
</tr>
<tr>
<td>数学之美</td>
</tr>
<tr>
<td>算法导论</td>
</tr>
</table>
</body>
</html>

使用内联样式

内联CSS样式只对单个标签有效,它不会影响整个文件。为了使用内联样式,CSS扩展了HTML元素,几乎所有的HTML元素都增加了一个style通用属性,该值是一个或多个CSS样式定义。

语法:

1
style="property1:value1;property2:value2..."

示例:

1
<div style="font-size: 30pt;color: #60C;height: 100px;width: 400px; ">HELLO WORLD</div>

CSS选择器

选择器是CSS中的一个重要内容,它可以大幅度提高开发人员书写或者修改样式表时的工作效率。

元素选择器

元素选择器是最简单的选择器,其语法格式如下

1
2
3
E {
...
} /*其中E代表有效的HTML元素名*/

例如:

1
2
3
4
5
6
7
8
9
10
11
12
/*定义对div元素起作用的CSS样式*/
div{
background-color: grey;
font: italic normal bold 14pt normal 楷体_GB2312;

}
/*定义对p标签起作用的CSS样式*/
p{
background-color: #444;
color: #fff;
font: normal small-caps bold 20pt 宋体;
}

属性选择器

从广义的角度上来看,元素选择器其实是属性选择器的特例。属性选择器的语法格式如下:

1
2
3
4
5
6
7
8
E{...} //指定该CSS样式对所有E元素起作用
E[attr]{...}//指定该CSS样式对具有attr属性的E元素起作用
E[attr=value]{...}//指定该CSS样式对所有包含attr属性,且属性值为value的E元素起作用
E[attr~=value]{...}//指定该CSS样式对所有包含attr属性,且属性值为以空格隔开的系列值,其中某个值为value的E元素起作用
E[attr|=value]{...}//指定该CSS样式对所有包含attr属性,且属性值为以连字符隔开的系列值,第一个值为value的Tag元素起作用
E[attr^="value"]{...}//指定该CSS样式对所有包含attr属性,且属性值为以value开头的字符串的E元素起作用
E[att$="value"]{...}//指定该CSS样式对所有包含attr属性,且属性值为以value结尾的字符串的E元素起作用
E[attr*="value"]{...}//指定该CSS样式对所有包含attr属性,且属性值为包含value的字符串的E元素起作用

示例:

html 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div>没有带任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性包含xx子字符串的div元素</div>
<div id="xxyy">id属性以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

CSS样式表

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
/*对所有div都起作用的CSS样式*/
div{
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
/*对有id属性的div起作用的CSS样式*/
div[id]{
background-color: #aaa;
}
/*对有id属性值包含xx的div起作用的CSS样式*/
div[id*=xx]{
background-color: #999;
}
/*对有id属性值以xx开头的div起作用的CSS样式*/
div[id^=xx]{
background-color: #555;
color: #fff;
}
/*对有id属性值等于xx的div起作用的CSS样式*/
div[id=xx]{
background-color: #111;
color: #fff;
}

上面定义的5个选择器匹配规则依次升高,因此它们的优先级也是依次升高的。优先级越高的选择器对应的CSS样式的背景色越深。效果图如下:

注意:当多个CSS样式定义都可以对某个HTML元素起作用时,该HTML元素的显示外观将是多个CSS样式定义“迭加”作用的效果。如果多个CSS样式定义之间有冲突,则冲突属性以优先级更高的CSS样式定义取胜

ID选择器

ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式如下:

1
#idValue{...}

上面语法指定该CSS样式将会对具有指定id属性值的HTML元素起作用。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<link rel="stylesheet" type="text/css" href="css/id.css">
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="dd">id为dd的元素</div>
</body>
</html>

CSS样式表

1
2
3
4
5
6
7
8
9
10
11
12
/*对所div元素都起作用*/
div{
width: 300px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
/*对id为dd的元素起作用*/
#dd{
border:2px dotted black;
background-color: #888;
}

仅仅指定对对应元素起作用的id选择器
语法:

1
E#idValue{...}/*其中E是有效的HTML元素*/

例如:

1
2
3
4
5
/*对id为xx的p元素起作用*/
p#xx{
font-size: 30px;
color: #0033ee;
}

class选择器

class选择器指定CSS样式对具有指定class属性的元素起作用。语法格式如下:

1
[E].classValue{......}/*其中E是有效的而HTML元素*/

指定该CSS定义对class属性值为classValue 的E元素起作用。此处可以省略E,如果省略E,则指定该CSS对所有的class属性为classValue的元素都起作用。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/class.css">
</head>
<body>
<div class="myclass">class属性为myclass的div元素</div>
<p class="myclass">class属性为myclass的p元素</p>
</body>
</html>

CSS样式表:

1
2
3
4
5
6
7
8
9
10
11
/*对class属性myclass的所有元素起作用*/
.myclass{
width: 300px;
height: 30px;
background-color: #eed333;
}
/*对class属性为myclass的div元素起作用*/
div.myclass{
border: 2px dotted black;
background-color: #888888;
}

既指定标签又指定class值的选择器优先级更高

包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下:

1
Selector1 Selector2{...}/*其中Selector1、Selector2都是有效的选择器*/

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>include</title>
<link rel="stylesheet" type="text/css" href="css/include.css">
</head>
<body>
<div>不包含任何属性的div元素</div>
<div>
<p class="a">包含在div中class属性为a的p元素</p>
</div>
<p class="a">没有处于div内,但class属性为a的p元素</p>
</body>
</html>

CSS样式表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*对所有的div元素起作用*/
div{
width: 300px;
height: 100px;
background-color: #66455f;
margin: 5px;
}
/*对div元素内包含class属性为a的元素起作用*/
div .a{
width: 200px;
height: 80px;
border:2px dotted black;
background-color: #888;
}

子选择器

子选择器用于指定目标选择器必须是某个选择器对应的子元素。子选择器的语法格式如下:

1
Selector1>Selector2{...}/*其中Selector1、Selector2都是有效的选择器*/

包含选择器与子选择器有点类似,他们之间存在如下区别:对于包含选择器,只要目标选择器位于外部选择器对应元素内部,即使是“孙子元素”也可;对于子选择器,要求目标选择器必须作为外部选择器对应的元素的直接子元素才行。
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>childSelector</title>
<link rel="stylesheet" type="text/css" href="css/childSelector.css">
</head>
<body>
<div>不包含任何属性的div元素</div>
<div>
<p class="a">包含在div中class属性为a的直接子元素p元素</p>
<section>
<p class="a">包含在div中class属性为a的非直接子元素p元素</p>
</section>
</div>

</body>
</html>

CSS样式表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*对所有的div元素起作用*/
div{
width: 300px;
height: 100px;
background-color: #66455f;
margin: 5px;
}
/*对div元素内包含class属性为a的直接子元素起作用*/
div>.a{
width: 200px;
height: 80px;
border:2px dotted black;
background-color: #888;
}

CSS新增的兄弟选择器

语法:

1
Selector ~ Selector{...}/*其中Selector1、Selector2都是有效的选择器*/

兄弟选择器匹配与Selector1对应的元素后面、能匹配Selector2的兄弟节点。用法示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器</title>
<style type="text/css">
/*匹配id为ss的元素后面、class属long的兄弟节点*/
#ss ~ .long{
background-color: #00FF00;
}
</style>

</head>
<body>
<div>黑客与画家</div>
<div class="long">浪潮之巅</div>
<div id="ss">平凡的世界</div>
<p class="long">陆犯焉识</p>
<div class="long">苏菲的世界</div>
</body>
</html>

上面页面为id为ss的元素后面、class属性为long的所有兄弟节点增加了绿色背景。

选择器组合

有些时候,我们需要让一份CSS样式对多个选择器起作用,那就可以利用选择器组合来实现。选择器组合的语法格式:

1
Selector,Selector,Selector,...{...}/*其中 Selector1,Selector2、Selector3 都是有效的选择器*/

对于组合选择器而言,{}中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style type="text/css">
div,.a,#abc{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class="a">class属性为a的元素</p>
<section id="abc">id为abc的元素</section>
</body>
</html>

上面页面使用选择器组合定义了一个CSS样式,这个CSS样式可以对div元素,class属性为a的元素、id为abc的元素都起作用

伪元素选择器

伪元素选择器并不是针对真正元素使用的选择器,伪元素选择器只能针对CSS样式中的伪元素起作用。

CSS提供的伪元素有如下几个:

  • :first-letter:该选择器对应的CSS样式对指定对象内第一个字符起作用。
  • :first-line:该选择器对应的CSS样式对指定对象内的第一行内容起作用。
  • :before:该选择器与内容相关的属性结合使用,用于在指定对象内部的前端插入内容。
  • :after:该选择器与内容相关的属性结合使用,用于在指定对象内部的尾端插入内容。
    下面,先看first-letter伪元素选择器的用法。:first-letter选择器仅对块元素(如<div../>、<p../>、<section .../>)起作用。如果想对内联元素(如<span ../>)使用该属性,必须先设定对象的height、width属性,或者设定position属性为absolute,或者设定display属性为block。通过该选择器配合font-size、float属性可制作首字下沉效果。
    示例:
    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
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>伪元素选择器</title>
    <style type="text/css">
    span{
    display: block;
    }
    /*span 元素里第一个字母加粗变红
    由于span是内联元素,因此需要把display设置为block*/
    span:first-letter{
    color: #f00;
    font-size: 20pt;
    }
    /*section 元素第一个字母加粗变蓝*/
    section:first-letter{
    color: #00f;
    font-size: 30pt;
    font-weight: bold;
    }
    /*p元素第一个字母加粗变蓝*/
    p:first-letter{
    color: #00f;
    font-size: 40pt;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <span>abc</span>
    <section>其实我是一个流氓程序员</section>
    <p>是不是啊</p>
    </body>
    </html>

:first-line选择器同样只对块元素起作用。如果要对内联元素使用该属性,必须先设定对象的height、width属性,或者设定position属性为absolute,或者设定display属性为block。示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
display: block;
}
/*span 元素里第一行加粗变红
span是内联元素,需要设置display为block
*/

span:first-line{
color: #f00;
font-size: 20pt;
}
/*section元素第一行字体加大,变蓝*/
section:first-line{
color: #00f;
font-size: 30pt;
}
/*p元素第一行字体加大,变蓝*/
p:first-line{
color: #00f;
font-size: 30pt;
}
</style>

</head>
<body>
<span>xyz<br/>abc</span>
<section>去年今日此门中<br/>
人面桃花相映红</section>
<p style="width: 160px;">苏菲的世界</p>

</body>
</html>

内容相关的属性

此处先介绍内容相关的属性,与前面介绍过的color、font-size等CSS属性本质上是相同的。这些内容相关的二属性同样需要定在CSS样式的花括号里。

CSS支持的内容相关的属性有如下几个。

  • include-source:该属性的值应为url(url),插入绝对或者相对URL地址所对应的文档。ps:目前还没有浏览器支持该属性,不详述。
  • content:该属性的值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name,list-style-type)、open-quote等格式。该属性用于向指定元素之前或之后插入指定内容。
  • quotes:该属性用于为content属性定义open-quote和close-quote,该属性的值可以是两个空格分隔的字符串,其中前面的字符串是open-quote,后面的字符串是close-quote
  • counter-increment:该属性用于定义一个计数器。该属性的值就是所定义的计数器的名称
  • counter-reset: 该属性用于对指定的计数器复位。

上面介绍的content属性是核心,counter-increment、counter-reset都需要和content结合使用。示例:

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>
<meta charset="utf-8">
<title>content</title>
<style type="text/css">
/*向div元素内部的属性插入content属性的内容*/
div>div:before{
content: 'Hello,World:';
color:blue;
font-weight: bold;
background-color: gray;
}
</style>

</head>
<body>
<div>
<div>苏菲的世界</div>
<div>黑客与画家</div>
<div>大学之路</div>
</div>
</body>
</html>

插入图像

content属性的值除了支持普通字符串之外,还可以使用url(url)格式的值,这种格式可用于插入图像。示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
<style type="text/css">
div>div:after{
content: url("http://stormzhang.com/image/logo_128.png");
}
</style>

</head>
<body>
<div>
<div>Hello World</div>
<div>To be or not to be</div>
<div>Where there is a will</div>
</div>
</body>
</html>

只插入部分元素

有些时候,我们并不需要为元素的前、后插入内容,只需要向部分元素插入内容,可以在使用:before、:after之前先使用更严格的CSS选择器。
示例:我们只想在class属性为no的元素的尾端添加一张图片,页面代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>another</title>
<style type="text/css">
div>div.no:after{
content: url("http://stormzhang.com/image/logo_128.png");
}
</style>

</head>
<body>
<div>
<div class="no">hello</div>
<div class="no">son of a bitch</div>
<div>you believe it or not</div>
</div>
</body>
</html>

配合quotes属性执行插入

使用quotes属性可以定义open-quote和close-quote,然后就可以在content属性中应用quotes属性所定义的open-quote和close-quote了,示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>quote</title>
<style type="text/css">
/*定义open-quote为<< close-quote为>>*/
div>div{
quotes: "<<" ">>";
}
/*指定为div的子div的前端插入open-quote*/
div>div:before{
content: open-quote;
}
/*指定为div的子div的后端插入close-quote*/
div>div:after{
content: close-quote;
}
</style>

</head>
<body>
<div>
<div>苏菲的世界</div>
<div>Hello World</div>
<div>浪潮之巅</div>
</div>
</body>
</html>

上面的代码指定在div的子div前端插入open-quote,在div的子div后端插入close-quote。open-quote和close-quote是由quotes属性定义的两个字符串”<<”和”>>”

配合counter-increment属性添加编号

有些时候,我们需要为多条内容添加编号,这可以通过counter-increment属性定义计数器,然后通过content属性引用计数器即可

使用counter-increment属性定义计数器非常简单,该属性的值所指定的字符串就是该计数器的名称。示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>counter-increment</title>
<style type="text/css">
/*为div的子div定义一个计数器:mycounter*/
div>div{
counter-increment: mycounter;
}
/*在div的子div前面插入mycounter计数器和"."*/
div>div:before{
content: counter(mycounter) '.';
font-size: 20pt;
font-weight: bold;
}
</style>

</head>
<body>
<div>
<div>苏菲的世界</div>
<div>Hello World</div>
<div>浪潮之巅</div>
</div>
</body>
</html>

上面的代码,中为div的子div元素定义了一个计数器:mycounter,然后在content属性中使用counter(mycounter)来引用这个计数器–这样就可以为页面上的3条内容都添加了编号。

使用自定义编号

从上面可以看出CSS默认的编号都是数字编号,有时候我们需要自定义编号,这种需求可以通过counter(name,list-style-type)用法来实现。其中list-style-type指定编码风格,该参数支持如下值:

  • decimal:阿拉伯数字,默认值
  • disc:实心圆
  • circle:空心圆
  • square:实心方块
  • lower-roman:小写罗马数字
  • upper-roman:大写罗马数字
  • lower-alpha:小写英文字母
  • upper-alpha:大写英文字母
  • none:不使用项目符号
  • cjk-ideoggraphic:浅白的表意数字
  • georgian:传统的乔治数字
  • lower-greek:基本的希腊小写字母
  • hebrew:传统的希伯来数字
  • hiragana:日文平假名字符
  • hirigana-iroha:日文平假名序号
  • katakana:日文片假名字符
  • katakana-iroha:日文片假名序号
  • lower-latin:小写拉丁字母
  • upper-latin:大写拉丁字母

示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mycounter</title>
<style type="text/css">
/*为div的子元素div添加计数器*/
div>div{
counter-increment: mycounter;
}
div>div:before{
content: counter(mycounter,lower-roman)'.';
font-size: 20pt;
font-weight: bold;
}
</style>

</head>
<body>
<div>
<div>苏菲的世界</div>
<div>hello world</div>
<div>黑客与画家</div>
</div>
</body>
</html>

添加多级编号

为了在页面添加多级编号,需要通过CSS定义多个编号计数器,然后为不同的选择器插入不同的计数器即可
示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>manycounters</title>
<style type="text/css">
/*为div子元素h2定义计数器*/
div>h2{
counter-increment: hcounter;
}
/*为div元素的子div定义计数器*/
div>div{
counter-increment: subcounter;
}
/*在div的子元素h2前端插入计数器*/
div>h2:before{
content: counter(hcounter,georgian)'.';
}
/*在div子元素div前端插入计数器*/
div>div:before{
content: counter(subcounter,lower-latin)'.';
}
</style>

</head>
<body>
<div>
<h2>小说</h2>
<div>陆犯焉识</div>
<div>卿本佳人</div>
<div>最后一个子弹留给我</div>
<h2>技术</h2>
<div>Linu从入门到精通</div>
<div>Java编程思想</div>
<div>算法导论</div>
</div>
</body>
</html>

CSS3新增的伪类选择器

伪类选择器与前面介绍的伪元素选择器有些类似,分为如下三类:

  • 结构性伪类选择器
  • UI元素状态伪类选择器
  • 其他伪类选择器

    结构性伪类选择器

    结构性伪类选择器指根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器有如下几个:

  • Selector:root 匹配文档的根元素。在HTML文档中,根元素永远是<html.../>元素。

  • Selector:first-child:匹配符合Selector选择器,而且必须是其父元素的第一个子节点的元素
  • Selector:last-child:匹配符合Selector选择器,而且必须是其父元素的最后一个子节点的元素
  • Selector:nth-child(n):匹配符合Selector选择器,而且是其父元素的第n个子节点的元素。
  • Selector:nth-last-child:匹配符合Selector选择器,而且必须是其父元素的倒数第n个子节点的元素
  • Selector:only-child:匹配符合selector选择器,而且必须是其父元素的唯一子节点的元素
  • Selector:first-of-type:要求匹配符合Selector选择器,而且是与它同类型、同级的兄弟元素中的第一个元素。
  • Selector:last-of-type:要求匹配符合Selector选择器,而是与它同类型,同级的兄弟元素中的最后一个元素。
  • Selector:nth-of-type(n):要求匹配符合Selector选择器,而且是与它同类型、同级兄弟元素中的第n个元素
  • Selector:nth-last-of-type(n):要求匹配符合Selector选择器,而且是与它同类型、同级的兄弟元素中的倒数第n个元素
  • Selector:only-of-type:要求匹配符合Selector选择器,而且是与它同类型、同级的兄弟元素中的唯一一个元素
  • Selector:empty:匹配符合Selector选择器,而且其内部没有任何子元素(包括文本节点)的元素

上面这些伪类选择器中,伪类选择器前面的Selector选择器可以省略,如果省略了该选择器,则Selector将不作为匹配条件。

:root伪类选择器用于匹配HTML文档的根元素,根元素只能是<html.../>元素。下面页面代码示范了:root的用法

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>
<meta charset="utf-8">
<title>root</title>
<style type="text/css">
:root{
background-color: #ddd;
}
body{
background-color: #888;
}
</style>

</head>
<body>
苏菲的世界<br/>
平凡的世界<br/>
楚门的世界<br/>
Android深入浅出<br/>
陆犯焉识<br>
</body>
</html>

从上面的示例可以看出,HTML文档的根元素和<body../>元素的表示的范围是不同的,显然HTML文档的根元素的范围更大。需要指出,如果没有显式的为HTML文档的根元素指定样式,那么<body../>元素的样式将对整个文档起作用。

:first-child、last-child、:nth-child、:nth-last-child、:only-child
这组伪类选择器依次要求匹配该选择器的元素必须是其父元素的第一个子节点、最后一个子节点、第n个子节点、倒数第n个子节点、唯一的子节点。这是它们的共同特征。

示例代码:

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
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>child</title>
<style type="text/css">
/*定义对作为其父元素的第1个子节点的li元素起作用*/
li:first-child{
border: 1px solid black;
}
/*定义对作为其父元素的最后1个子节点的li元素起作用*/
li:last-child{
background-color: #aaa;
}
/*定义对作为其父元素的第2个子节点的li元素起作用*/
li:nth-child(2){
color: #888;
}
/*定义对作为其父元素的倒数第二个子节点的li元素起作用*/
li:nth-last-child(2){
font-weight: bold;
}
/*定义对作为其父元素的唯一子节点的span元素起作用*/
span:only-child{
background-color: #ff0000;
}
</style>

</head>
<body>
<ol>
<li>www.baidu.com</li>
<li>www.google.com</li>
<li>www.bing.com</li>
<li>谷歌地球</li>
<li>百度地图</li>
</ol>
<ul>
<li>苏菲的世界</li>
<li>楚门的世界</li>
<li>阿里巴巴与四十大盗</li>
<li>陆犯焉识</li>
<li>数学之美</li>
<li>算法导论</li>
</ul>
<div>
<span>Spring 实战</span>
</div>
</body>
</html>

对于:nth-child、:nth-last-child两个伪类选择器,他们的功能不止于此,他们还支持如下用法。

  • Selector:nth-child(odd/even):匹配符合Selector选择器,而且必须是其父元素的第奇数个/偶数个子节点的元素
  • Selector:nth-last-child(odd/even):匹配符合Selector选择器,而且必须是其父元素的倒数第奇数个/偶数个子节点的元素
  • Selector:nth-child(xn+y):匹配符合Selector选择器,而且必须是其父元素的第xn+y个子节点的元素
  • Selector:nth-last-child(xn+y):匹配符合Selector选择器,而且必须是其父元素的倒数第xn+y个子节点的元素

奇偶节点选择器的用法:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>odd_event</title>
<style type="text/css">
li:nth-child(odd){
margin: 10px;
border: 2px dotted black;
}
li:nth-child(even){
padding: 4px;
border: 1px solid black;
}
</style>

</head>
<body>
<ul>
<li>苏菲的世界</li>
<li>楚门的世界</li>
<li>阿里巴巴与四十大盗</li>
<li>陆犯焉识</li>
<li>数学之美</li>
<li>算法导论</li>
</ul>
</body>
</html>

xn+y 用法示范:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xn+y</title>
<style type="text/css">
/*定义对作为其父元素的倒数第3n+1个子节点的li元素起作用*/
li:nth-last-child(3n+1){
border:1px solid black;
}
</style>

</head>
<body>
<ul>
<li>平凡的世界</li>
<li>苏菲的世界</li>
<li>全栈工程师</li>
<li>重构的魅力</li>
<li>被窝是青春的坟墓</li>
<li>澜本嫁衣</li>
<li>陆犯焉识</li>
<li>猫捉</li>
</ul>
</body>
</html>

:first-of-type、:last-of-type、:nth-of-type、:nth-last-of-type、:only-of-type

这组伪类选择器与前面那组xxx-child伪类选择器有点类似,但这组伪类选择器并不要求他们是其父元素的第一个、最后一个、第n个倒数第n个,唯一一个元素。这组伪类选择器只要求他们是与其有共同类型、同级元素的第一个、最后一个、第n个倒数第n个、唯一一个元素。

示例代码:

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
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>type</title>
<style type="text/css">
span{
display: block;
padding: 5px;
}
/*匹配span选择器,且是与它同类型、同级的兄弟元素中的第一个元素*/
span:first-of-type{
border:1px solid black;
}
/*匹配span选择器,且是与它同类型、同级的兄弟元素中的最后一个元素*/
span:last-of-type{
background-color: #aaa;
}
/*匹配span选择器,且是与它同类型、同级的兄弟元素中的第2个元素*/
span:nth-of-type(2){
color: #888;
}
/*匹配span选择器,且是与它同类型、同级的兄弟元素中的倒数第2个元素*/
span:nth-last-of-type{
font-weight: bold;
}
</style>

</head>
<body>
<div>www.baidu.com</div>
<span>www.google.com</span>
<span>www.bing.com</span>
<span>我的兄弟叫顺溜</span>
<span>扶桑三绝</span>
<span>Hello World</span>
<hr>
<div>
<div>www.baidu.com</div>
<div>www.google.com</div>
<span>Spring实战</span>
<span>互联网金融</span>
<span>大数据处理</span>
<span>计算机视觉</span>
<span>网络 安全</span>
<div>浪潮之巅</div>
</div>
</body>
</html>

与:nth-child、:nth-last-child类似,:nth-of-type、nth-last-of-type同样支持以下几种用法:

  • Selector:nth-of-type(odd/even):匹配符合Selector选择器,而且必须是与其同类型,同级元素的第奇(偶)数个元素
  • Selector:nth-last-of-type(odd/even):匹配符合Selector选择器,而且必须是与其同类型、同等级的倒数第奇(偶)数个元素
  • Selector:nth-of-type(xn+y):匹配符合Selector选择器,而且必须是与其同类型、同等级的倒数第xn+y个元素
  • Selector:nth-last-of-type(xn+y):匹配符合Selector选择器,而且必须是与其用类型、同级元素的倒数第xn+y个元素

:empty伪类选择器要求该元素只能是空元素,不能包含子节点,也不能包含文本内容(连空额都不允许)

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>empty</title>
<style type="text/css">
:empty{
border: 1px solid black;
height: 60px;
};
</style>

</head>
<body>
<img src="img/1.png">
<div></div>
<div> </div>
</body>
</html>

上面代码,一个div为空元素,一个img也为空元素,因此empty对他们起作用。

UI元素状态伪类选择器

UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选。UI元素的状态伪类选择器有如下几个:

  • Selector:link:匹配Selector选择器且未被访问前的元素(通常只能是超链接)
  • Selector:visited:匹配Selector选择器且已被访问过的元素(通常只能是超链接)
  • Selector:active:匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的事件)状态的元素
  • Selector:hover:匹配Selector选择器且处于鼠标悬停状态的元素。
  • Selector:focus:匹配Selector选择器且已经得到焦点的元素
  • Selector:enabled:匹配Selector选择器且当前处于可用状态的元素
  • Selector:disabled:匹配Selector选择器且处于不可用状态的元素
  • Selector:checked:匹配Selector选择器且处于只读状态的元素
  • Selector:default:匹配Selector选择器且页面打开时处于选中状态(即使当前没有被选中亦可)的元素
  • Selector:read-only:匹配Selector选择器且只处于可读状态的元素
  • Selector:read-write:匹配Selector选择器且处于读写状态的元素
  • Selector::selection:匹配Selector选择器的元素中当前被选中的元素

在上面这些伪类选择器中,伪类选择器前面的Selector选择器可以省略,如果省略了该选择器,则Selector将不作为匹配条件,而且::selection选择器前面有两个冒号,不要搞错

示例代码:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI</title>
<style type="text/css">
td{
border: 1px solid balck;
padding: 4px;
}
/*为处于鼠标悬停状态的表格行定义css样式*/
tr:hover{
background-color: #aaa;
}
/*为处于激活状态的input元素定义CSS样式*/
input:active{
background-color: blue;
}
/*为得到任意焦点的元素定义CSS样式*/
:focus{
text-decoration: underline;
}
/*为可用的任意元素定义CSS样式*/
:enabled{
font-family: "黑体";
font-weight: bold;
font-size: 14pt;
}
/*为不可用的任意元素定义css样式*/
:disabled{
font-family: "隶书";
font-size: 14pt;
}
/*为处于勾选状态的任意元素定义CSS样式*/
:checked{
outline: red solid 5px;
}
/*为页面打开时处于勾选状态的元素定义CSS样式*/
:default{
outline: #bbb solid 5px;
}
</style>

</head>
<body>
<table style="width: 400px;border-collapse: collapse">
<tr>
<td>苏菲的世界</td>
<td>54</td>
</tr>
<tr>
<td>算法导论</td>
<td>107</td>
</tr>
<tr contenteditable="true">
<td>黑客与画家</td>
<td>37</td>
</tr>
</table>
<button disabled="true">不可用的按钮</button>
<input type="text" value="可用的文本框"/>
男:<input type="radio" name="gender" value="male"/>
女:<input type="radio" name="gender" value="female"/>
保密:<input type="radio" checked="checked" name="gender" value="unknown">
</body>
</html>

:read-only、read-write选择器示例

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
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read</title>
<style type="text/css">
td{
border: 1px solid black;
padding: 4px;
}
/*只读CSS*/
:read-only{
background-color: #eee;
}
/*可读写元素*/
:read-write{
background-color: #8e8;
}
/*专为基于Gecko内核浏览器指定CSS样式*/
:moz-read-only{
background-color: #eee;
}
:moz-read-write{
background-color: #8e8;
}
</style>

</head>
<body>
<table style="width: 400px;border-collapse: collapse">
<tr>
<td>苏菲的世界</td>
<td>54</td>
</tr>
<tr>
<td>算法导论</td>
<td>107</td>
</tr>
<tr contenteditable="true">
<td>黑客与画家</td>
<td>37</td>
</tr>
</table>
<input type="text" readonly="true" value="只读文本框">
<input type="text" value="可读写文本框">

</body>
</html>

浏览器专属属性

有些时候,某些CSS属性还只是预览版,只有小部分浏览器专有。为了让浏览器识别专属属性,CSS规范允许在CSS属性前增加各自浏览器的前缀。
常见的浏览器前缀:
































前缀 组织 示例 说明
-ms- Microsoft -ms-interpolation-mode IE浏览器专属的CSS属性需添加-ms-前缀
-moz- Mozilla -moz-read-only 所有基于Gecko引擎的浏览器(如firefox)专属的CSS属性需添加-moz-前缀
-o- Opera -o-text-overflow Opera浏览器专属的CSS属性添加-o-前缀
-webkit- Webkit -webkit-box-shadow 所有基于webkit引擎的浏览器(如chrome、Safari)专属的CSS属性添加-webkit-前缀

:not和target

CSS3还有两个特殊的伪类选择器

  • Selector:target:匹配符合Selector选择器且必须是目标锚点目标的元素
  • Selector1:not(Selector):匹配符合Selector1选择器,但不符合Selector2选择器的元素,相当于用Selector1减去Selector2元素

:target选择器要求元素必须是命名锚点的目标,而且必须是当前正在被访问的目标。

示例:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>target</title>
<style type="text/css">
:target{
background-color: #ff0;
}
</style>

</head>
<body>
<p id="menu">
<a href="#java">苏菲的世界</a>
<a href="#ee">活着</a>
<a href="#android">疯狂Android讲义</a>
<a href="#ejb">经典javaEE实战</a>
</p>
<div id="java">
<h2>苏菲的世界</h2>
<p>哲学入门书</p>
</div>
<div id="ee">
<h2>活着</h2>
<p>人应该如何活着,苟延残喘,不爱惜生命吗?</p>
</div>
<div id="android">
<h2>疯狂android讲义</h2>
<p>一本带你领略android世界的经典书籍</p>
</div>
<div id="ejb">
<h2>经典javaEE实战</h2>
<p>详细介绍企业应用的书籍</p>
</div>
</body>
</html>

:not伪类选择器就是用两个选择器做减法,下面示范:not选择器的用法:

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>
<meta charset="utf-8">
<title>not</title>
<style type="text/css">
li:not(#ajax){
color: #999;
font-weight: bold;
}
</style>

</head>
<body>
<ul>
<li id="java">疯狂java讲义</li>
<li id="javaee">JavaEE应用实战</li>
<li id="ajax">疯狂Ajax讲义</li>
<li id="xml">疯狂xml讲义</li>
<li id="android">疯狂android讲义</li>
</ul>
</body>
</html>

在脚本中修改显示样式

我们可以按照如下步骤实现脚本动态修改CSS样式

  1. 获取到需要设置CSS样式的目标元素,如getElementById()方法
  2. 修改目标元素的CSS样式。常用方式有以下两种:

    • 修改内联CSS属性:使用如“obj.style.属性名=属性值”的JavaScript代码即可。
    • 修改HTML元素的class属性值:使用如“obj.className=class选择器”JavaScript脚本即可

注意:脚本中CSS属性名与静态页面中CSS属性名并不完全相同。如果静态CSS属性名中没有包含中线(-),则脚本中CSS 属性名与静态CSS属性名相同。

修改HTML元素的class属性值应该通过设置该元素的className属性来完成,合法className属性值是一个class选择器

随机改变页面背景色

改变页面背景色是非常简单的事情,只要随机生成一个6位数,并将该值赋给body元素的backgroundColor CSS属性即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsControl</title>
<script type="text/javascript">
function changeBg(){
//将自定义值定义为空字符串
var bgColor="";
//循环6次,生成6位随机数
for (var i = 0; i <6; i++) {
bgColor+=""+Math.round(Math.random()*9);
}
//将背景颜色赋值给背景色
document.body.style.backgroundColor="#"+bgColor;
}
//为页面绑定点击事件
document.onclick=changeBg;
</script>

</head>
<body>

</body>
</html>

动态增加立体效果

立体效果是一种很简单的CSS效果,其原理是通过为其增加4个边框实现的,其中左上边框颜色稍浅,而下、右边框颜色稍深。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js-3D</title>
<script type="text/javascript">
function chg(){
document.getElementById('up').className='solid';
}
</script>

<style type="text/css">
/*对所有class属性为solid元素起作用*/
.solid{
width: 160px;
text-align: center;
border-right: #222 3px solid;
border-top: #ddd 3px solid;
border-left: #ddd 3px solid;
border-bottom: #222 3px solid;
background-color: #ccc;
}
</style>

</head>
<body>
<input type="button" value="增加立体效果" onclick="chg()">
<div id="up">有立体效果的层</div>
</body>
</html>