版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第5章CSS基础概念
课前导读
前面我们介绍了CSS的作用、局限性及在网页中使用CSS的方法，在深入介绍CSS
属性之前我们首先介绍CSS选择符以及CSS常用属性值。CSS选择符非常重要，熟练掌
握CSS选择符的使用，可以使CSS样式定义更加高效，更加准确。
本章重点
在本章我们将重点学习：
□CSS选择符
□CSS伪类
□CSS伪元素
5.1CSS选择符
通过前面的例4-2我们己经看到，一个普通的CSS样式定义语句具有如下的形式：
li{color:red;font-style:italic;}
这一语句中，我们又把它分为两个部分，我们称“li”为选择符，而称花括号部分为
“样式声明”。在样式声明中"color”以及“font-style”称为CSS属性，而“red”和“italic”
分别是上述属性对应的属性值。
明确了这几个概念之后，本章我们首先来介绍选择符。选择符的作用是指定页面元素，
以便将随后声明的CSS样式作用于该页面元素上。选择符有多种形式并且也存在诸如优先
级及继承顺序等规则。需要注意的是选择符同HTML标记一样不区分大小写，我们建议使
用小写字母。
5.1.1标记选择符
语法：Tag{…}
版本：CSS1
兼容性：IE4+,NS4+
标记选择符是直接以页面中的HTML标记作为标识的选择符，例如以下的CSS样式
声明均采用了标记选择符。
hl{coloured;}
body{margin:2px;}
p{font-family:Arial;}
input{border-width:Ipx;}
在声明了上述CSS样式之后，整个网页中的<hl>,<body>,<p>及<inpul>标记就具有
了定制的样式。
5.1.2类选择符
语法：.法ass{…}
版本：CSS1
兼容性：IE4+,NS4+
类选择符是以号开头，以HTML标记中的class属性值做为选择标识的选择符。
前面在HTML语言部分我们一经看到绝大多数的HTML标记都具有class属性，因此类选
择符是比较常用的选择符形式。
例5・1：类选择符
<html>
<headxtitle>CSS选择符</title></head>
<body>
<styletype="text/css">
2
<!-
.menu{font-weight:bold;}
.news{font-style:italic;}
div.music{border:1pssolid#000;width:200px;}
—>
</style>
<divclass="menu”:>这是class=menu的div元素v/div>
<pclass="news”>这是class=news的p元素</p>
<spanclass="music”>这是class=music的span元素</span>
<divclass="music”>这是class=music的div元素</div>
</html>
例5-1中，我们还使用了一个比较特殊的选择符“div.music"，这个选择符同样也属于
类选择符，它的含义是class属性为“music”的vdiv>元素。
该例运行结果如图5-1。我们看到class属性为“menu”的元素使用了粗体；class属
性为“news”的元素使用了斜体。但是class属性同样为“music”的vdiv>元素和vspan>
元素显示却不相同，只有<div>元素应用了该边框样式。
勺jCSS选择符-MicrosoftInternetExplorei
文件(E)编辑®查看⑵收藏®工»电
。后退回囹e)i»
地址(8闿C:\code\5-l.htm勺目转到链接》
▲
这是class=menu的div兀素
这是classFews的p元素
这是c]ass=music的span兀素
这是class=music的div兀素|
萄带厂厂厂厂厂〕士我的电脑
图5-1类选择符
3
5.1.3ID选择符
语法：#ID{...}
版本：CSS1
兼容性：IE4+,NS4+
ID选择符同类选择符非常类似，它以“#"符号开头，以HTML标记中的id属性做
为选择标识的选择符。同样，大部分的HTML标记都具有id属性，因此ID选择符是也是
比较常用的选择符形式。例如：
#NavBar{color:red;}
#LeftBar{font-family:Arial;}
#Content{width:600px;}
#Copyright{background-color:#DDDDDD;}
在经过上述声明之后，我们就可以通过如下方式使用了：
<divid=''NavBar”>这是NavBar部分v/div>
<pid="Content”>这是Content部分</p>
ID选择符可不可以像上例中“div.music”那样的写为“div#music”呢？答案是不可以。
严格来讲HTML元素的id属性值应是整个页面范围内的唯一标识符，也就是说ID值在一
个页面中不应重复，因此1D选择符应该能够准确并且唯一地指定某一个元素，这样一来
诸如"div#music”的写法是没有意义的。
5.1.4选择符分组
语法:Selectorl,Selectorl,.
版本:CSS1
兼容性：IE4+,NS4+
选择符分组是指可以将具有相同CSS声明的选择符合并，以便简化声明代码。方法是
将多个选择符以“，”分隔。例如：
4
#NavBar,.title,hl{colorred;}
这个简单的例子中使用了三个不同类型的选择符，ID选择符，类选择符和标记选择符,
这三个选择符具有相同的CSS样式，即“{colored}”。
5.1.5包含选择符
语法：AncestorDescendant)...}
版本：CSS1
兼容性：IE4+,NS4+
包含选择符以语法形式来说就是指定所有包含在Ancestor卜.的Descendant元素。我们
通过例5-2展示包含选择符的作用。
例5・2包含选择符
<html>
<head><title>CSS选择符v/title></head>
<body>
<styletype="text/css">
<!-
div{border:Ipxsolidblack;margin:3px;}
divh3{text-align:right;text-decoration:underline}
—>
</style>
<h3>在div元素之外的h3元素</h3>
vdiv>vh3>在div元素之内的h3元素v/h3></div>
<divxpxh3>h3元素</h3>在div元素的p元素里</p></div>
</body>
</html>
例5-2运行结果如图5.2。在这个例子中，为了使显示结果清晰，我们令vdiv>元素具
5
有黑色边框，然后我们使用包含选择符声明了包含在＜div＞元素中的＜h3＞元素文字对齐方
向为右对齐，并且为其加上下划线。页面中我们使用了三个＜h3＞元素，前两个分别放置在
＜div＞元素内外，我们看到只有在＜div＞元素内的＜h3＞元素应用了定制样式。接下来我们重
点观察第三个＜h3＞元素，这个＜h3＞元素是在＜div＞元素内的＜p＞元素内部，虽然＜h3＞并非
＜div＞的子元素，但是依然适用于包含选择符。因此包含选择符涉及的两个元素不必一定
是父元素和子元素的关系。
图5-2包含选择符
至此我们介绍的选择符都是CSS1.0标准下的，并且得到了目前绝大多数浏览器的支
持。而下面我们介绍的选择符都是CSS2.0标准下的，对这部分选择符的支持程度各浏览
器都不相同，但随着浏览器的新版本的发布，这只是一个时间问题。本书中我们只是以
InternetExplorer6.0（以下简称IE6）及Firefox2.0（以下简称FF2）浏览器为对象对这些选
择符进行测试。
6
5.1.6通配选择符
语法：*{...}
版本:CSS2
兼容性：IE6,FF2
通配选择符以“*”符号表示，它指定页面中的所有确定元素。如果以通配选择符做
为一个选择符的开头，即第一个字符，那么“*”可以省略。例如以下两对声明是相同的。
.title{...}
*.title{...}
#menu{...}
*#menu{...}
我们看一下例5-3。
例5-3通配选择符
<html>
<head><title>CSS选择符v/title></head>
<body>
<styletype=utext/css">
<!-
*{font-family:黑体;}
div*{border:Ipxsolid#000;}
—>
</style>
<div><p>在div元素之内的p元素v/p></div>
<div><span>在div元素之内的span元素v/span></div>
<div>div元素</div>
<p>P元素</p>
<span>span元素</span>
7
</body>
</html>
例5-3在IE6.0中运行结果如图5-3；在Firefox2.0中运行结果如图5』。
图5-3通配选择符(IE6)
图5-4通配选择符(FF2)
8
在例5-3中我们使用了两次通配选择符，第一次使用通配选择符声明的CSS样式将应
用于文档中所有元素，从图5-3可以看出所有元素均使用了黑体就是该样式的显示要求，
第二次使用通配选择符声明的CSS样式仅应用于<div>元素中的所有元素，因此无论是<p>
元素还是<span>元素只要出现在<div>元素内均应用了边框样式。
尽管在例5-3中通配选择符的使用非常有限，似乎也没有发挥出多大的作用，但是随
着后文对于其他选择符的学习，你将发现配合通配选择符的使用，很多选择符变得更加灵
活，这就是通配选择符的优势所在。
5.1.7子对象选择符
语法：Parent>Child{...}
版本：CSS2
兼容性：FF2
子对象选择符指定Parent元素的Child子元素。与包含选择符不同的是子对象选择符
涉及的Parent元素与Child元素必须是父子关系。我们以例5-4来进一步说明该选择符的
作用。
例5-4子对象选择符
<html>
<head><title>CSS选择符v/titlex/head>
<body>
<styletype="text/cssn>
<!-
div{border:Ipxsolidblack;margin:2px;}
div>p{text-decoration:underline}
—>
</style>
<div>div元素的<p>子元素p</px/div>
9
＜div＞div元素＜span＞span元素＜p＞P元素＜/px/span＞＜/div＞
＜/body＞
＜/html＞
例5-4的运行结果如图5-5。在此例中根据我们的声明，＜div＞元素的子元素＜p＞具有
下划线。我们看到第二个＜p＞元素与＜div＞元素之间有＜span＞元素间隔，＜p＞元素不是＜div＞
元素的子元素，因此没用应用该样式，这与包含选择符是不同的。
图5-5子元素选择符
目前IE浏览器尚不支持该选择符，正因为这一点我们可以用它在CSS样式表中定义
在Firefox浏览器下的样式。
5.1.8相邻选择符
语法:Selectorl+Selector{...}
版本：CSS2
兼容性：FF2
相邻选择符的作用是指定紧随Selector1元素之后的Selector2元素。例如：
例5-5相邻选择符
<html>
10
<headxtitle>CSS选择符v/title></head>
<body>
<styletype=Mtext/cssM>
<!-
div{borde亡Ipxsolidred;margin:2px;}
div+span{text-decoration:underline}
—>
</style>
vdiv>DIV元素v/div>（有文本间隔）vspan>第一个SPAN元素</span><span>第:个SPAN
元素</span>
</body>
</html>
例5-5运行结果如图5-6。该例中指定紧随vdiv>元素的vspan>元素具有下划线，因此
我们看到第一个vspan>元素具有了下划线，而第二个vspan>元素却没有，并且即使我们在
vdiv>元素和vspan>元素之间加入文本，该选择符依然生效。
选择符-MozillaFirefox
文件旧媪辑⑹查看"）历史⑸
@.公UT
DIV元素一
（有文本间隔）第一个SPAN元素
第二个SPAN元素
完成/
图5-6相邻选择符
此外，相邻选择符也可以包含多层，例如：
例5-6多层相邻选择符
<html>
<headxtitle>CSS选择符v/title></head>
11
<body>
<styletype=Mtext/cssM>
<!-
div{borde亡Ipxsolidred;margin:2px;}
div+span+p{text-decoration:underline}
—>
</style>
<div>DIV元素</div>vspan>SPAN元素</span>vp>第一个P元素</p>vp>第二个P元素</p>
</body>
</html>
例5-6运行结果如图5-7,可以看出多层相邻选择符同样遵循相邻规则。
图5-7多层相邻选择符
5.1.9属性选择符
属性选择符符合CSS2.0标准，目前Firefox2.0能够较好的支持，属性选择符有如下四
种形式：
(1)Tag[attribute]{...}
该属性选择符指定具有attribute属性的Tag元素。
12
例5-7属性选择符I
<html>
<headxtitle>CSS选择符v/title></head>
<body>
<styletype=utext/cssM>
<!-
divtidj{border:Ipxsolidred;margin:2px;}
—>
</style>
<divid="first”>具有id属性的div元素v/div>
vdiv>普通的div元素</div>
</body>
</html>
例5-7运行结果如图5-8。
)CSS选择符-Moz曲laFirefox-1□!x|3css选择符-MozillaFirefox-Inljd
文件(E)编辑但)查看(V)历史⑤文件(F)骗辑(E)查看(V)历史(S
"eGfile:///；”—”怨，公|□file：///
昆T有i瞩性的div元素I|lD=first的DIV元素~|
普通的div元素ID=second的DIV兀素
完成/完成
图5-8属性选择符I图5-9属性选择符II
(2)Tag[attribute=value]{...}
该属性选择符指定具有attribute属性并且属性值为value的Tag元素。
例5-8属性选择符II
<htmi>
<headxtitle>CSS选择符</title></head>
13
<body>
<styletype="text/cssM>
<!-
divlid=first]{border:1pxsolidred;margin:2px;}
—>
</style>
<divid="firstn>ID=first的DIV元素</div>
<divid=nsecond">ID=second的DIV元素</div>
</body>
</html>
例5-8运行结果如图5-9,此时只有id属性值为first的vdiv>元素应用了声明样式。这
里只是为了演示属性选择符的作用，对于id属性来说使用属性选择符有些多此一举，我们
完全可以用ID选择符“#first”来声明其样式，所以实际应用时是以其他属性为选取对象
的。
(3)Tag[attribute~=value]{...}
该属性选择符指定具有attribute属性且属性值为value或者属性值中“包含"value的
元素。注意：“包含”不是普通意义上包含，而是指属性具有多个属性值时，其中有一个
属性值等于value。我们看下例：
例5-9属性选择符III
<html>
<headxtitle>CSS选择符v/title></head>
<body>
<styletype="text/cssn>
<!--
div[title-=book]{border:1pxsolid#000000;margin:2px;}
—>
14
</style>
<divtitle=nbook">HTMLReference</div>
<divtitle=nbookl">JavaScriptReference</div>
<divtitle=*'Thisisabook">CSSReference</div>
<divtitle=nItisthebook2">XHTMLReference</div>
</body>
</html>
例5-9运行结果如图5-10。我们看到只有第一个和第三个<div>元素应用了指定的样
式。为什么第二个和第四个<div>元素没有应用该样式？
我们说HTML标记中如果属性具有多个属性值时，每个属性值用空格分隔开，这样一
来第二个和第四个<div>元素中title的属性分别包含属性值“bookl”和“book2”，因此未
应用指定样式。
图5-10属性选择符in
(4)Tag[attributel=value]{...}
该属性选择符指定具有attribute属性，属性值为用连字符连接的单词并且以value开
头的Tag元素。我们看下例：
例5-10属性选择符IV
<htmi>
<headxtitle>CSS选择符</title></head>
15
<body>
<styletype=utext/cssn>
<!-
div[titlel=bookj{border:1pxsolidred;margin:2px;}
—>
</style>
<divtitle="book',>Book1</div>
<divtitle=Hbook-2u>Book2</div>
<divtitle=Hbook3n>Book3</div>
<divtitle="book4">Book4</div>
<divtitle="itisthebook-5M>Book5</div>
</body>
</html>
例5-10运行结果如图5-11。我们看到只有前两个<div>元素使用了指定的样式。以本
例来讲，也就是只有属性值是“book”或第一个属性值是以“book”开头紧跟连字符的这
种形式才符合选择符的要求。
为什么要提供一个这么“苛刻”的选择符呢？我们知道绝大部分HTML标记都具有
lang属性，lang是为了适应国际化需要提供的一个值为语言代码的属性，提供上述属性选
择符正是为了更好地匹配语言代码，比如同时匹配支持“en”，“en-US”和“en-cockney”。
16
图5-11属性选择符IV
5.2CSS伪类和伪元素
前面我们学习了CSS选择符，尽管选择符有多种但是它们的共同点在于都以文档树为
基础，也就是说我们的选择符所指定的元素都是文档树的节点。而我们考虑到另一种特殊
的需要，例如，我们想要为超链接赋予更好的效果，使它能根据鼠标移入、移出或点击而
呈现不同的样式；我们还想在文字排版时把文章正文第一个字的字号放大，或者让一个段
落的第一行显得与众不同。这些通过以往的选择符是不能或不方便指定的，因为在不做特
殊处理的情况下，一段的第一个字或是第一行并非是文档树中的节点，而对于超链接，尽
管鼠标动作不同但这并不改变它在文档树中的各种性质。
本节我们将要学习的css伪类和伪元素在•定程度上解决了这方面的问题。
CSS伪类和伪元素都具有如下的形式。
选择符:伪类/伪元素{…}
二者区别在于css伪类通过限定特征来指定元素，理论上这些特征是不能在文档树中
提取到，而CSS伪元素提供了新的机制来指定元素，比如说上文提到的段落首行；还有
CSS伪类可以出现在选择符中的任意位置，而CSS伪元素只能出现在选择符中最后一个简
单选择符后。
17
5.2.1伪类:first-child
版本:CSS2
兼容性：FF2
该伪类用来指定做为第一子元素的某个元素。例如：
p:first-child{color:red;)
指定的是做为某个元素的第一子元素的<p>元素，究竟是谁的第一子元素呢？由于没
有指定父元素所以VP>元素可以是任意元素的第一子元素。我们可以通过如下方法为<P>
元素指定父元素。
div>p:first-child{color:red;}
这样一来，只有当vp>元素是Vdiv>元素的第一子元素才适用该样式。我们来看例5-11
及例5-12o
例5・11伪类:first-child(1)
<html>
<head><title>css基本属性</title></head>
<styletype=utext/cssn>
<!-
p:first-child{border:1pxsolid#000;}
->
</style>
<body>
<p>body元素的第一子元素po</p>
<p>body元素的第二子元素p。</p>
<div>
<p>div元素的第•子元素p。</p>
<p>div元素的第二子元素po</p>
</div>
18
<bxp>b元素的第•子元素p。</px/b>
</body>
</html>
例5-11运行结果如图5-12。正如前面我们讲的那样，只要是vp>元素是以第一子元素
的角色出现就会应用指定的样式。
，3css基本尾性-MozillaFirefox
文件(F)编辑(E)查看(V)历史(S)书签
华，-,•纺、-公|-file:〃八I▼I4]
body元素的第一子元素p。|—
body元素的第二子元素p。
div元素的第一子元素p。
div元素的第二子元素p。
b元素的第一子元素p。|—
▼
完成/
图5-12伪类:first-child(1)
例5-12伪类:first-child(2)
<html>
<headxtitle>css基本属性</title></head>
<styletype=utext/cssn>
<!-
div>p:first-child{border:1pxsolid#000;}
—>
</style>
<body>
<p>body元素的第子元素p。</p>
19
<p>body元素的第二子元素p。</p>
<div>
<p>div元素的第一子元素p。</p>
vp>div元素的第二子元素p。</p>
</div>
<b>vp>b元素的第一子元素p。</p></b>
</body>
</html>
例5-12的运行结果如图5-13,此时只有vp>元素作为vdiv>元素的第一子元素时才会
应用该样式。
基本屈性-MozillaFirefox
文件(F)编辑(E)查看(V)历史(S)书签
华▼-G□file：»
body元素的第一子兀素p。
body元素的第二子元素p。
div元素的第一子元素p。
div元素的第二子元素p。
b元素的第一子元素p。
完成/
图5-13伪类:first-child(2)
5.2.2伪类:link和:visited
版本:CSS1
兼容性:IE4+,NS4+
当我们浏览网页的时候经常会看•到，对于已经点击浏览过的超链接颜色上与未浏览过
20
的有些不同，这是因为浏览器通常会使用不同的颜色来区别已浏览超链接和未浏览超连
接。伪类:link和:visitied就是CSS提供的用于定制样式以区分这两种超链接的工具。通过
字面我们很容易知道：link是用于定制未浏览超链接的，而:visited是用于定制已访问超链接
的。由于在HTML4中超链接是具有href属性的<a>元素，因此以下的写法是等价的。
a:link{color:red;}
:link{coloured;}
注意：不具有href的va>元素由于不是有效的超链接并不应用此样式。此外，我们同
样可以通过类选择符来进一步限定应用该样式的vA>元素。例如：
a.someclass:link{color:red;}
限定只是class属性为"someclass"的va>元素才适用。
例5-13伪类“ink和:visited
<html>
<head><title>CSS基本属性</title></head>
<body>
<styletype="text/cssH>
<!-
*{line-height:25px;}
a:link{text-decoration:none;}
:visited{text-decoration:underline;}
a.classl:link{background:#BBB;}
a.classkvisited{border:1pxsolid#000;}
—>
</style>
<a^^=7叫:/刖\¥\¥50面.（：0111”>访问过的超链接。</axbr>
<ahref="http:〃”>未访问过的超链接</a>vbr>
<aclass="classr'href="http:〃”>访问过的class1超链接。</axbr>
21
<aclass="classr,href="http:〃”>未访问过的class1超链接</a>
</body>
</html>
例5-13运行结果如图5-14,显示符合我们前面的讲述。但是如果你细心的话可能会
看到本例中具有class属性的未浏览va>元素的样式是a.classl:link(...)^Ua.classl:link{...}
的叠加，这也符合逻辑，因为虽然具有class属性但它毕竟还是va>元素，关于叠加的一些
细节知识后面我们还会讲到。
)CSS基本尾性-MozillaFirefox「ICSS基本届性-MicrosoftIni
文件(F)编辑(E)查看(V)历史(S)文件⑹编辑©查看⑦收》胪
令▼cG□旭/〃(
地址(Q)|邑C:\code臼.转到|随》
访问过的超链接。
▲
未访问过的超链接
访问过的超链接。
防问过的classl超链接"未访问过的超链接
未访问过的classl超链接
防问过的classl超链接"
未访问过的classl超链接
zJ
完成I厂厂厂厂门我的电脑一
图5-14Firefox浏览器及IE浏览器下的伪类:link和:visited
5.2.3伪类:hover,:active和:focus
版本:CSS1(:focus为CSS2)
兼容性：IE4+,NS4+(:focus为FF2)
CSS提供了三个伪类以便增强浏览器与用户之间的交互性。
：hover适用于某个元素被用户选择但尚未激发的状态。例如鼠标移动到超链接上但未
点击。
：active适用于元素被用户激发的状态。例如鼠标键按下但没释放的状态。
:focus适用于元素获取焦点的状态。例如元素准备接受文本输入或键盘事件的状态。
22
例5・14伪类:hover,:active和:focus
<html>
<headxtitle>CSS基本属性v/title></head>
<body>
<styletype=utext/cssn>
<!-
a:hover{background:red;}
a.class1:active{background:blue;}
a.class2:focus{background:yellow;}
p:hover{background:red;}
p.class1:active{background:blue;}
p.class2:focus{background:yellow;}
->
</style>
<aclass=,,classr,href="#”>超链接元素classl</a><br>
<aclass="class2"href="#”>超链接元素class2</a>
<pclass="class1"tabindex=,'OM>p元素</p>
<pclass=Mclass2utabindex=uln>p元素</p>
</body>
</html>
对于上述三个伪类，首先要注意它们的兼容性。对于:hover和:active目前主流浏览器
都支持，但是IE浏览器只对<a>元素适用，以本例来讲IE浏览器中<p>元素没有使用定制
样式。Firefox2.0浏览器能够很好的支持这三个伪类。由于鼠标按下后元素处于激活状态
同时也获得了焦点，所以此时元素的样式会发生叠加，如果是相同的属性，：active与:focus
谁先定义谁将被覆盖，因此为了更好的观察效果我们没有对于同选择符同时定义:active
与:focus样式；此外本例中我们给<P>元素加上了tabindex属性，这样<p>元素就可以通过
23
Tab键获得焦点了。
5.2.4伪类:lang
版本：CSS2
兼容性：FF2
伪类:lang允许我们为不同的语言定义特殊的规则。我们看例5-15,
例5-15伪类:lang
<html>
<head>
<styletype="text/css">
<!-
q:lang(no){quotes:
->
</style>
</head>
<body>
<p>Sometext<qlang=nnou>Aquoteinaparagraph</q>Sometext.</p>
</body>
</html>
例5-15运行结果如图5-15。该例为带有值为"no”的lang属性的q元素定义了引号符
号。
24
图2-15伪类:kmg
5.2.5伪元素:first-line和:first-letter
版本：CSS2
兼容性：IE5+,NS8
伪元素:first-line和:first-letter分别为我们提供了指定元素内的第一行和第一个字符的
方法。
例5-16伪元素:firstJine和:flrst-letter
<html>
<head>
<styletype="text/cssn>
<!-
p.line:first-line{background:#BBB;}
p.letter:first-letter{background:#BBB;}
—>
</style>
</head>
<body>
vpclass="line”>这是class为line的P元素，该P元素的第一行具有背景色。</p>
25
vpclass="letter”>这是class为letter的P元素，该P元素的第•个字符具有背景色。</p>
</body>
</html>
例5-16运行结果如图5-16。当我们调节浏览器窗口宽度时第一个vp>元素第一行的容
纳的字数会发生变化但是第一行始终是具有背景色的。第二个vp>元素的第一个字符始终
具有深色背景。
OMozillaFirefox
文件任）编辑回查看Q）历史⑤）书筌Q
v■--0自ID।।
这是class为line的P元素，该P元素的
第一行具有背景色。
这是class为letter的P元素，该P元素
的第一个字符具有背景色。
完成N
图5-16伪元素:first-line和frst-letter
5.2.6伪元素:after和:before
版本：CSS2
兼容性：FF2
伪元素:after和:before分别为我们提供了在某个元素之后和之前插入某些内容的方法。
例5・17伪元素:after和:before
<html>
<head>
<styletype="text/cssn>
<!-
p:before{content:"Start：";}
26
p:after{content:"End!";}
—>
</style>
</head>
<body>
vp>这是p元素</p>
</body>
</html>
例5-17运行结果如图5-17。我们看到通过使用两伪元素，vp>元素的前后分别加上了
文本“Start：”和“End!”。
图5-17伪元素:after和:bcfore
5.3CSS常用属性值
在深入学习CSS属性之前，我们先对常用的属性值进行介绍，这些属性值包括长度、
颜色、百分比及URL单位。
27
5.3.1长度
涉及到长度的属性值是由一•个数字加一个长度单位组成的，对于数字，整数或是小数
都是允许的；对于单位除非长度是“o”否则是必须的。长度可以带有正负符号，但是部
分属性并不支持负值。我们把长度单位分为绝对长度单位和相对长度单位，绝对长度单位
的具体长度我们可以准确计算出，相对长度单位的具体长度要受到元素大小，屏幕分辨率
等的影响。
1.绝对长度单位
尽管绝对长度单位长度固定并且精确，但实际上我们在CSS中还是较少使用的，毕竟
我们的页面不确定要在怎样的分辨率与浏览器下显示，而且浏览器对于硬件的参数也无法
把握从而使绝对化的长度不能精确显示。绝对长度单位包括五种：
(1)cm：代表厘米；
(2)in：代表英寸;
(3)mm：代表毫米；
(4)pc：Pica,印刷术语，长度为1/6英寸；
(5)pt：磅，印刷术语，长度为1/72英寸。
那么我们可以给出它们之间的换算关系了：
1in=2.54cm=25,4mm=6pc=72pt
例5-18绝对长度单位
<html>
<head>
<title>CSS绝对长度单位
<styletype="text/css">
<!-
div{margin:2pxOpxOpx80px;}
div.in{width:1in;border:1pxsolid#000;)
div.cm{width:2.54cm;border:1pxsolid#000;}
28
div.mm{width:25.4mm;border:1pxsolid#000;}
div.pc{width:6pc;border:Ipxsolid#000;}
div.pt{width:72pt;border:1pxsolid#000;}
—>
</style>
</head>
<body>
<divclass=,'in">1in</div>
<divclass=ncmM>2.54cm</div>
<divclass=nmm">25.4mm</div>
<divclass=npc">6pc</div>
<divclass=npt">72pt</div>
</body>
</html>
例5-18运行结果如图5-18。参照其进制设定的各<div>元素的宽度一致。绝对长度单
位更适合用于对打印文档的样式定义，网页中对于相对长度单位的使用还是较为常见的，
因此绝对长度单位我们简单介绍到这里。
29
图5-18绝对长度单位
2.相对长度单位
相对长度单位包括三种：
（1）em：该单位是相对于元素字体大小的长度单位，如果元素字体大小为14pt,那
么lem=14pt,而如果字体大小为18Pt那么lem=18pto
（2）ex：该单位是相对于小写字母“x”高度的长度单位，而“x”的高度通常是字
体高度的一半。因此，如果元素字体大小为14pt,那么lex=7pt,而如果字体大小为18pt
那么lex=9pto
（3）px：该单位是相对于屏幕像素大小的长度单位。我们知道在不同的分辨率下，
同一个显示器显示同一图标大小会有所不同，这就是因为不同分辨率下屏幕像素的大小不
同。因此我们说px是一个相对长度单位，Ipx即是一个像素点的宽度（高度）。
例5-19相对长度单位
<html>
<head>
<styletype="text/cssH>
ci
body{font-size:16px;}
div.em{width:5em;border:1pxsolid#000;}
div.ex{width:lOex;border:Ipxsolid#000;}
div.px{width:80px;border:Ipxsolid#000;}
—>
</style>
</head>
<body>
字体大小:16px
<divclass="pxn>80px</div>
<divclass=nem">5em</div>
30
<divclass="ex">1Oex</div>
</body>
</html>
例5-19显示结果如图5-19。由于我们设定页面的字体大小为16px,于是em为16px,
ex为8pXo
图5-19相对长度单位
5.3.2颜色
颜色在CSS属性值中也十分常见，颜色的表示方式有三种，我们下面依次进行介绍。
1.颜色名称
我们在前面一系列的例子中使用过颜色名称，例如“red”，直接使用颜色名称做为颜
色值对于部分颜色是允许的，但是我们不建议使用，因为在对预命名颜色的支持上各浏览
器是有差别的。根据W3c规范，以下16中颜色是最基本的，可以说最安全的：
aqua（水绿）gray（灰）navy（深蓝）silver（银）
black（黑）green（绿）olive（橄榄绿）teal（深青）
blue（蓝）lime（浅绿）purple（紫）white（白）
fuchsia（紫红）maroon（褐）red（红）yellow（黄）
31
对于4.0版本以上的IE浏览器除了支持140中预命名颜色外还支持28中诸如
''windowtext","activecaption”等等的Windows系统色盘，在这里我们不列出，感兴
趣的读者可以查阅相关的资料。
2.RGB颜色
我们知道计算机通过组合不同饱和度的红、绿、蓝来产生各种颜色，RGB颜色的表示
方法就是以此为依据，其语法格式如下：
rgb(rgb)
其中，参数r,g,b可以是用百分数表示的红，绿，蓝的饱和度，也可以是用0至255
表示的红，绿，蓝的饱和度。例如：
红色：rgb(255,0,0)或者rgb(100%,0%,0%)
绿色：rgb(0,255,0)或者rgb(0%,100%,。％)
蓝色：rgb(0,0,255)或者rgb(0%,0%,100%)
黄色:rgb(255,255,0)或者rgb(100%,100%,0%)
尽管参数超出范围或是参数的形式不统一(百分数和。至255的数字同时使用)再或
者使用小数参数可能会被浏览器按照一定规则进行处理或纠正，但是仍然要强调的是参数
使用范围内整数形式，三个参数形式必须统一，即使是“0”也要明确其形式“0”或者“0%”,
笔者在Firefox2.0下测试“rgb(100%,100%,0)”不能生效。
3.十六进制颜色
十六进制颜色的表示实际上是基于RGB颜色的简写，其语法形式为：
#RRGGBB
其中RR两位是以十六进制数字表示的红颜色，同理其他四位。例如：
红色：#FF0000绿色：#00FF00蓝色：#0000FF黄色：#FFFF00
我们还遇到过类似“#000”，“#F00”这样的颜色表示方法，这是怎么回事儿呢？
实际上十六进制颜色表示方法中，如果表示每种颜色的两位数值都相同那么就可以简
写为#RGB的形式，这称为短十六进制表示。例如上面提到的四种颜色可以写为：
红色：#F00绿色：#0F0蓝色：#00F黄色：#FF0
32
在HTML标记有关颜色的属性中我们也常用十六进制颜色表示方法,但是不可以使用
短表示法。
5.3.3百分比值
百分比值也是CSS属性值中常见的一种形式，就百分比值本身来说已经无需多说，不
过在使用的过程中要注意如下几点：
(1)百分比值是对相对值，因此必须首先明确其参照对象；
(2)百分比值可正可负，但是有部分CSS属性不接受负值；
(3)尽量不要使用小数值。
5.3.4URL值
URL值是CSS属性值中一个较为特殊的值的形式。有时我们需要在CSS定义中引入
另外一个CSS样式表，有时我们需要为元素指定一个背景图像，这些都需要使用URL值
来确定外部资源的位置。URL值的语法形式为：
url(path)
其中参数path可以是绝对路径也可以是相对路径。只要被引用资源的位置正确，以下
都是合法的URL值：
url(decoration.jpg)
url(style/include.css)
url(http:〃/images/bg.gif)
5.3.5角度单位
角度单位在个别属性中会使用。角度单位有如下三种：
(1)deg：度。直角等于90度。
(2)grad：梯度。直角等于100梯度。
33
(3)rad：弧度。直角等于PI/2弧度。
5.3.6时间单位
时间单位
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 产品质量持续改进培训课件
- 电子产品回收处理标准
- 单病种临床路径管理制度
- 智能小区物联网应用系统
- 《Excel数据获取与处理实战》 课件 陈青 第3、4章 数据的输入、工作表的格式化
- 溶剂泄露应急处置
- GMP基础知识培训
- 病从口入教案反思
- 胸腔闭式引流器的护理
- 城市娱乐设施建筑平房施工合同
- 赵珍珠《商业银行-金融企业会计》第二版课后参考答案 (第二到十一章)
- 大班科学《红薯现形记》课件
- GB/T 43336-2023舵轮控制系统通用技术条件
- JGJT294-2013 高强混凝土强度检测技术规程
- 2022-2023学年天津市某中学高三上学期第二次月考英语试题（解析版）
- 扬州某校2023-2024苏教版五年级上册数学期中课堂练习及答案
- 高级职称竞聘PPT
- 《数字影音处理》课程标准
- 电动叉车堆垛车日常点检表
- 2022年1月浙江高考读后续写分析课件-2023届高三英语写作专项突破
- 危险化学品和烟花爆竹安全管理
评论
0/150
提交评论