第12章+css美化页面元素

1、CS第12章 css美化页面元素田兵软件工程系WEB DESIGNSC目录目录12.112.4WEB DESIGNSC1、CSS 链接v以不同的方法为链接设置样式。以不同的方法为链接设置样式。 设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。 能够根据链接所处的状态来设置它们的样式。v链接的四种状态：链接的四种状态： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻WEB DESIGNSCv实例实例a:link

2、color:#FF0000; /* 未被访问的链接 */ a:visited color:#00FF00; /* 已被访问的链接 */ a:hover color:#FF00FF; /* 鼠标指针移动到链接上 */ a:active color:#0000FF; /* 正在被点击的链接 */ v常见的链接样式 在上面的例子中，链接根据其状态改变颜色。 让我们看看其他几种常见的设置链接样式的方法：WEB DESIGNSCv文本修饰文本修饰 text-decoration 属性大多用于去掉链接中的下划线：v实例实例 a:link text-decoration:none; a:visited te

3、xt-decoration:none; a:hover text-decoration:underline; a:active text-decoration:underline; WEB DESIGNSCv背景色背景色 background-color 属性规定链接的背景色：v实例实例 a:link background-color:#B2FF99; a:visited background-color:#FFFF85; a:hover background-color:#FF704D; a:active background-color:#FF704D;WEB DESIGNSC向链接添加其

4、他样式向链接添加其他样式 vvvvva.one:link color:#ff0000;va.one:visited color:#0000ff;va.one:hover color:#ffcc00;va.two:link color:#ff0000;va.two:visited color:#0000ff;va.two:hover font-size:150%;va.three:link color:#ff0000;va.three:visited color:#0000ff;va.three:hover background:#66ff66;va.four:link color:#ff000

5、0;va.four:visited color:#0000ff;va.four:hover font-family:微软雅黑微软雅黑;va.five:link color:#ff0000;text-decoration:none;va.five:visited color:#0000ff;text-decoration:none;va.five:hover text-decoration:underline;vvvv请把鼠标指针移动到下面的链接上，看看它们的样式变化。请把鼠标指针移动到下面的链接上，看看它们的样式变化。v这个链接改变颜色这个链接改变颜色v这个链接改变字体尺寸这个链接改变字体尺寸

6、v这个链接改变背景色这个链接改变背景色v这个链接改变字体这个链接改变字体v这个链接改变文本的装饰这个链接改变文本的装饰vvWEB DESIGNSC把链接显示为方框把链接显示为方框 vvvvva:link,a:visitedvvdisplay:block;vfont-weight:bold;vfont-size:14px;vfont-family:Verdana, Arial, Helvetica, sans-serif;vcolor:#FFFFFF;vbackground-color:#98bf21;vwidth:120px;vtext-align:center;vpadding:4px;vt

7、ext-decoration:none;vva:hover,a:activevvbackground-color:#7A991A;vvvvvW3SchoolvvWEB DESIGNSC2. cursor 属性v定义和用法定义和用法 cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。v实例：一些不同的光标：实例：一些不同的光标： span.crosshair cursor:crosshair; span.help cursor:help; span.wait cursor:wait;WEB DESIGNSC值值描述描述url需使用的自

8、定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右（东）移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。n-resize此光标指示矩形框的边缘可被向上（北）移动。se-resize此光标指示矩形框的边缘可被向下及向

9、右移动（南/东）。sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。s-resize此光标指示矩形框的边缘可被向下移动（南）。w-resize此光标指示矩形框的边缘可被向左移动（西）。text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。help此光标指示可用的帮助（通常是一个问号或一个气球）。WEB DESIGNSC如何改变光标如何改变光标 请把鼠标移动到单词上，可以看到鼠标指针发生变化：AutoCrosshairDefaultPointerMovee-resizene-resizenw-resizen-resizese-resizesw-resize

10、s-resizew-resizetextwaithelpWEB DESIGNSCCSS 列表vCSS 列表属性允许你放置、改变列表项标志，或者将列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。图像作为列表项标志。v要影响列表的样式，就是改变其标志类型。要影响列表的样式，就是改变其标志类型。 例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。v要修改用于列表项的标志类型，可以使用属性：要修改用于列表项的标志类型，可以使用属性： list-style-type ul list-styl

11、e-type : square 上面的声明把无序列表中的列表项标志设置为方块。 所有浏览器都支持 list-style-type 属性。WEB DESIGNSCv设置不同的列表样式：设置不同的列表样式：ul.circle list-style-type:circle;ul.square list-style-type:square;ol.upper-roman list-style-type:upper-roman;ol.lower-alpha list-style-type:lower-alpha;ul.circle list-style-type:circleul.square list-

12、style-type:squareol.upper-roman list-style-type:upper-romanol.lower-alpha list-style-type:lower-alphaType circle:CoffeeTeaCoca ColaType square:CoffeeTeaCoca ColaType upper-roman:CoffeeTeaCoca ColaType lower-alpha:CoffeeTeaCoca ColaWEB DESIGNSCvlist-style-position 属性属性 list-style-position 属性设置在何处放置列表

13、项标记：ul list-style-position:inside; v说明说明值值描述描述inside列表项目标记放置在文本以内，好像它们是插入在列表项内容最前面的好像它们是插入在列表项内容最前面的行内元素一样，行内元素一样，且环绕文本根据标记对齐。outside默认值。会放在离列表项边框边界一定距离处，会放在离列表项边框边界一定距离处，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承 list-style-position 属性的值。WEB DESIGNSC本例演示在何处放置列表标记本例演示在何处放置列表标记 ul.insid

14、e list-style-position: insideul.outside list-style-position: outside该列表的 list-style-position 的值是 inside：Earl Grey Tea - 一种黑颜色的茶Jasmine Tea - 一种神奇的“全功能”茶Honeybush Tea - 一种令人愉快的果味茶该列表的 list-style-position 的值是 outside：Earl Grey Tea - 一种黑颜色的茶Jasmine Tea - 一种神奇的“全功能”茶Honeybush Tea - 一种令人愉快的果味茶WEB DESIGNS

15、C列表项图像列表项图像v列表项图像列表项图像 有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：ul li list-style-image : url(xxx.gif) 只需要简单地使用一个 url() 值，就可以使用图像作为标志。v例如：例如：ul list-style-image:url(arrow.gif); list-style-type:square; WEB DESIGNSCul list-style-image: url(eg_arrow.gif)咖啡茶可口可乐WEB DESIGNSCv简写列表样式简写列表样式 为简

16、单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样： li list-style : url(example.gif) square inside list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。WEB DESIGNSCv无序列表无序列表UL在网页中除显示树状结构外，最常用的用在网页中除显示树状结构外，最常用的用途就是作为导航栏的菜单使用，而它的样式通过途就是作为导航栏的菜单使用，而它的样式通过CSS来设定，这种把样式与数据分离的做法既能有丰富多彩来设定，这种把样式与数据分离的做法既能有丰富多

17、彩的效果的效果菜单001菜单002菜单003菜单004菜单005菜单006菜单007菜单008WEB DESIGNSC实例：竖向导航栏的实现效果实例：竖向导航栏的实现效果v竖向导航栏的实现效果竖向导航栏的实现效果 取消无序列表的圆点效果 代码如下：vlist-style-type:none; 无序列表菜单项的按钮效果实现 设置无序列表子项的背景，出现方块效果。代码举例如下：vbackground:#efb57c; 使无序列表子项出现按钮的效果，对边框设置进行设置：vborder:2px outset #efb57c;ullist-style-type:none;libackground:#efb57c;border:2px outset #efb57c;width:50px;margin:20px;WEB DESIGNSC无序列表菜单项的动态效果实现无序列表菜单项的动态效果实现v 实现动态效果，对实现动态效果，对ul中的中的链接状态进行设置即可链接状态进行设置即可:ul a:linkbackground:#efb57c;border:2px outset #efb57c;ul a:visited