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

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,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,CSS 3.0,新增边框样式属性,在,CSS 3.0,中新增了,3,个有关边框设置的属性，分别是,border-colors,、,order-radius,和,border-image,，通过这,3,个新增的边框属性能够实现更加丰富的边框效果。,border-colors,属性,多重边框颜色,border-color,属性可以用来设置对象边框的颜色，在,CSS 3.0,中对增强了该属性的功能。如果设置了,border,的宽度为,Npx,，那么就可以在这个,border,上使用,N,种颜色，每种颜色显示,1px,的宽度。如果所设置的,border,的宽度为,10,像素，但只声明了,5,或,6,种颜色，那么最后一个颜色将被添加到剩下的宽度,。,border-colors,语法格式如下。,border-colors:|transparent 1,4,实战练习,实现网页元素多色彩边框效果,border-image,属性,图像边框,为了增强边框效果，,CSS 3.0,中新增了,border-image,属性，专门用于图像边框的处理，它的强大之处在于它能灵活地分割图像，并应用于边框。,border-image,属性的语法格式如下。,border-image:none|1,4/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,属性,圆角边框,在,CSS 3.0,中新增了圆角边框的定义属性,border-radius,，通过该属性，可以轻松的在网页中实现圆角边框效果。,border-radius,属性的语法格式如下。,border-radius:none|1,4 /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,属性的,标签，该伪类不发生作用。,: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.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,样式不但可以设置超链接标签,标签的样式，还可以对超链接,4,种伪类的样式分别进行设置，从而实现更加美观的网页超链接效果，本章介绍主要介绍使用,CSS,设置边框和超链接，以及新增的,CSS 3.0,属性，并通过实战练习的方式介绍了各种,CSS,样式属性的使用方法和技巧，读者需要能够掌握,CSS,样式属性的设置方法，并能够将其应用了实际的工作中。,