第11章-边框与超链接设置

11.1边框样式CSS属性在CSS样式中，通过对border属性进行定义，可以使网页元素的边框有更加丰富的样式，从而使元素的效果更加美观。border属性的基本语法格式如下。border:border-style|border-color|border-width;

border-width属性——边框宽度

可以通过CSS样式中的border-width来设置元素边框的宽度，以增强边框的效果。border-width的语法格式如下。border-width:medium|thin|thick|length;

border-style属性——边框样式border-style属性用于设置元素边框的样式，既定义图片边框的风格。border-style的语法格式如下。border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-color属性——边框颜色

在定义页面元素的边框时，不仅可以对边框的样式进行设置，为了突出显示边框的效果，还可以通过CSS样式中的border-color属性来定义边框额的颜色。border-color的语法格式如下。border-color:颜色值;实战练习——为网页元素添加边框效果最终文件：光盘\最终文件\第11章\11-1-3.html视频：光盘\视频\第11章\11-1-3.swf

11.2

CSS3.0新增边框样式属性在CSS3.0中新增了3个有关边框设置的属性，分别是border-colors、order-radius和border-image，通过这3个新增的边框属性能够实现更加丰富的边框效果。

border-colors属性——多重边框颜色

border-color属性可以用来设置对象边框的颜色，在CSS3.0中对增强了该属性的功能。如果设置了border的宽度为Npx，那么就可以在这个border上使用N种颜色，每种颜色显示1px的宽度。如果所设置的border的宽度为10像素，但只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。border-colors语法格式如下。border-colors:[<color>|transparent]{1,4}实战练习——实现网页元素多色彩边框效果

border-image属性——图像边框为了增强边框效果，CSS3.0中新增了border-image属性，专门用于图像边框的处理，它的强大之处在于它能灵活地分割图像，并应用于边框。border-image属性的语法格式如下。border-image:none|<image>[<number>|<percentage>]{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}实战练习——实现网页元素添加图像边框效果最终文件：光盘\最终文件\第11章\11-2-1.html视频：光盘\视频\第11章\11-2-1.swf最终文件：光盘\最终文件\第11章\11-2-2.html视频：光盘\视频\第11章\11-2-2.swf

border-radius属性——圆角边框

在CSS3.0中新增了圆角边框的定义属性border-radius，通过该属性，可以轻松的在网页中实现圆角边框效果。border-radius属性的语法格式如下。border-radius:none|<length>{1,4}[/<length>{1,4}]?实战练习——在网页中实现圆角边框效果最终文件：光盘\最终文件\第11章\11-2-3.html视频：光盘\视频\第11章\11-2-3.swf

11.3超链接CSS样式伪类伪类是一种特殊的选择符，能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果，是CSS本身定义的一种类。CSS样式中用于超链接的伪类有如下4种。:link伪类，用于定义超链接对象在没有访问前的样式。:hover伪类，用于定义当鼠标移至超链接对象上时的样式。:active伪类，用于定义当鼠标单击超链接对象时的样式。:visited伪类，用于定义超链接对象已经被访问过后的样式。

:link伪类

:link伪类用于设置超链接对象在没有被访问时的样式。

:hover伪类:hover伪类用来设置对象在其鼠标悬停时的样式表属性。该状态是非常实用的状态之一，当鼠标动到链接对象上时，改变其颜色或是改变下划线状态

，这些都可以通过a:hover状态控制实现。对于无href属性的<a>标签，该伪类不发生作用。

:active伪类:active伪类用于设置链接对象在被用户激活（在被点击与释放之间发生的事件）时的样式。

实际应用中，本状态很少使用。对于无href属性的<a>标签，该伪类不发生作用。在CSS样式中该伪类可以应用于任何对象，并且:active状态可以和:link以及:visited状态同时发生。

:visited伪类

:visited伪类用于设置超链接对象在其链接地址已被访问过后的样式属性。实战练习——设置网页中超链接文字效果最终文件：光盘\最终文件\第11章\11-3-4.html视频：光盘\视频\第11章\11-3-4.swf按钮式超链接在很多网页中，超链接制作成各种按钮的效果，这些效果大多采用图像的方式来实现。通过CSS样式的设置，同样可以制作出类似于按钮效果的导航菜单超链接。实战练习——制作网站导航菜单最终文件：光盘\最终文件\第11章\11-3-5.html视频：光盘\视频\第11章\11-3-5.swf

11.4光标指针样式通常在浏览网页时，看到的鼠标指针形状有箭头、手形和I字形，而通常在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML语言在这方面的不足，通过cursor属性可以设置各种鼠标指针样式。

cursor属性——光标效果通常在浏览网页时，看到的鼠标指针的形状有箭头、手形和I字形，而通常在windows环境下实际看到的鼠标指针种类要比这个多得多。CSS样式弥补了HTML语言在这方面的不足，通过cursor属性可以设置各式各样的光标效果。cursor属性包含17个属性值，对应光标的17种样式，而且还可以通过url链接地址自定义光标指针。设置网页中光标指针效果在CSS样式中可以通过cursor属性设置光标指针效果，该属性可以在网页的任何标签中使用，从而可以改变各种页面元素的光标效果。在网页中光标移至某个超链接对象上时，可以实现超链接颜色变化和背景图像变化，并且光标指针也可以发生变化。实战练习——在网页中实现多种光标指针效果最终文件：光盘\最终文件\第11章\11-4-2.html视频：光盘\视频\第11章\11-4-2.swf

11.5本章小结超链接是网页中非常重要的功能，通过CSS样式