高考艺术世界.docVIP

　　 /body 　　 /html 　　您如果想看上述代码的效果，请点击这里。 　　我们从例子中看到没有访问过的链接以绿色显示，并且去掉了下划线；而访问过的链接以红色且没有下划线显示；另外，当鼠标激活链接时，链接以蓝色显示，并且加上了上划线。这种效果是怎么实现的呢？它除了运用了文本属性中的text-decoration属性，而且采用了伪类元素。 　　通过上面的代码注释，相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”，它规定了链接不同状态下的效果。 　　怎么样，是不是很简单的就可以实现动态链接的效果，赶紧自己动手试一试吧！下一节我将向您介绍“容器”属性。 　　※装饰超链接 　　网页默认的链接方式是这样的：未访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式，是不是很单调呢？ 　　其实，利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码： 　　html 　　　titlelink css/title 　　　head 　　　style 　　　!-- 　　　//*定义伪类元素（ａ：），大括号内定义了前景色属性和文本装饰属性， 　　　hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*// 　　　a：link{color：green;text-decoration：none} 　　　//*未访问时的状态，颜色为绿色(green)，文本装饰属性(text-decoration)值 　　　为没有(none)*// 　　　a：visited{color：red;text-decoration：none} 　　　//*访问过的状态，颜色为红色(red)，文本装饰属性值为没有*// 　　　a：hover{color：blue;text-decoration：overline;font-size：20pt} 　　　//*鼠标激活的状态，颜色为蓝色(blue)， 文本装饰属性值为上划(overline)， 　　　字体大小为20pt*// 　　　-- 　　 /style 　　 /head 　　 body 　　 p style=“font-family:行书体；font-size：18pt” 　　 a href=“http：//”未访问的链接/a/p 　　 //*加链接，显示三种不同状态，并且定义了链接文本的字体和大小*// 　　 p a href=“http：//”访问过的链接/a/p 　　 p a href=“http：//”鼠标激活的链接/a/p 　　 /body 　　 /html 　　您如果想看上述代码的效果，请点击这里。 　　我们从例子中看到没有访问过的链接以绿色显示，并且去掉了下划线；而访问过的链接以红色且没有下划线显示；另外，当鼠标激活链接时，链接以蓝色显示，并且加上了上划线。这种效果是怎么实现的呢？它除了运用了文本属性中的text-decoration属性，而且采用了伪类元素。 　　通过上面的代码注释，相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”，它规定了链接不同状态下的效果。 怎么样，是不是很简单的就可以实现动态链接的效果，赶紧自己动手试一试吧！ 　　4、“容器”属性 　　※边距属性 　　听起来是不是很有趣，什么叫“容器”属性呢？CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。 　　您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。 　　和font属性一样，表中的四个属性可以用一个属性一次。边距顺序是上、右、下、左。我们还是用定义边距属性前后的两个例子来看一下吧。请看下面的这幅图： 　我们看到上图是没有加上边距属性的效果，而下图则在head中加入了如下代码： 　　body{margin：1em 2em 3em 4em} 　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 　　定义了边距后的页面，无论您怎么改变窗口的大小，它都会按照您定义好的边距样式显示。 　　如果在margin里有缺失的属性，则按照顺序依次排列。比如： 　　body{margin：1em 3em} 上面这段代码的含义是：body的上、右边距为1、3em。 　　※填充距属性 　　本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表： 　　首先我们得先了解什么叫填充距，它与边距有什么差别呢？填充距指的是文本边框与文本之间的距离。 　　这样讲是不是有些难懂，由于填充距属性与margin一样，都有一个一次定义