资源描述
在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.swf11.2CSS 3.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:|transparent1,4实战练习实战练习实现网页元素多色彩边框效果实现网页元素多色彩边框效果border-image属性属性图像边框图像边框为了增强边框效果，CSS3.0中新增了border-image属性，专门用于图像边框的处理，它的强大之处在于它能灵活地分割图像，并应用于边框。border-image属性的语法格式如下。border-image:none|1,4/1,4?stretch|repeat|round0,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|1,4/1,4?实战练习实战练习在网页中实现圆角边在网页中实现圆角边框框效果效果最终文件：光盘最终文件第11章11-2-3.html视频：光盘视频第11章11-2-3.swf11.3超超链接接CSS样式式伪类伪类是一种特殊的选择符，能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果，是CSS本身定义的一种类。CSS样式中用于超链接的伪类有如下4种。:link伪类，用于定义超链接对象在没有访问前的样式。:hover伪类，用于定义当鼠标移至超链接对象上时的样式。:active伪类，用于定义当鼠标单击超链接对象时的样式。:visited伪类，用于定义超链接对象已经被访问过后的样式。:link伪类伪类:link伪类用于设置超链接对象在没有被访问时的样式。:hover 伪类伪类:hover伪类用来设置对象在其鼠标悬停时的样式表属性。该状态是非常实用的状态之一，当鼠标动到链接对象上时，改变其颜色或是改变下划线状态，这些都可以通过a:hover状态控制实现。对于无href属性的标签，该伪类不发生作用。:active 伪类伪类:active伪类用于设置链接对象在被用户激活（在被点击与释放之间发生的事件）时的样式。实际应用中，本状态很少使用。对于无href属性的标签，该伪类不发生作用。在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.swf11.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.swf11.5本章小本章小结超链接是网页中非常重要的功能，通过CSS样式不但可以设置超链接标签标签的样式，还可以对超链接4种伪类的样式分别进行设置，从而实现更加美观的网页超链接效果，本章介绍主要介绍使用CSS设置边框和超链接，以及新增的CSS3.0属性，并通过实战练习的方式介绍了各种CSS样式属性的使用方法和技巧，读者需要能够掌握CSS样式属性的设置方法，并能够将其应用了实际的工作中。
展开阅读全文