第6章用CSS设置文本与图像样式.ppt

6.3.3 设置列表属性 6.3.3 设置列表属性 ul { width: 200px; list-style-type: disc; list-style-position: outside; } 6.3.3 设置列表属性（续） ul { width: 200px; list-style-type: circle; list-style-position: inside; } 6.3.3 设置列表属性（续） ul { width: 200px; list-style-image: url(images/bullet.gif); } 6.3.4 列表属性缩写 list-style: list-style-type | list-style-position | list-style-image 例如： ol { list-style: lower-alpha inside; } ul { list-style: none; } 6.3.5 列表在不同浏览器中的差异 IE 默认设置 ul 具有 margin-left 值。 FF 默认设置 ul 具有 padding-left 值。 项目符号的大小与位置也不同。 ul { background-color: #66CCFF; } 6.3.6 让列表在不同的浏览器中 表现一致 ul { margin: 0px; padding: 0px; list-style: none; } 6.3.7 用背景图像替代项目符号 设置了 list-style:none 后，可以利用背景图像替代项目符号。 ul { margin: 0px; padding: 0px; list-style: none; } li { background: url(images/bullet.gif) no-repeat left top; padding-left: 20px; } 对链接应用样式 6.4 6.4.1 简单的链接样式 a { color: #000000; } 上面的样式设置网页上超链接的全部状态都为黑色。 6.4.2 使用伪类选择器找到 链接的不同状态 a:link, a:visited { color: #000000; text-decoration: none; } a:hover, a:active { color: #FF0000; text-decoration: underline; } 注意：要按照 a:link, a:visited, a:hover, a:active 的顺序为链接应用样式。 6.4.3 使用后代选择器找到 特定区域中的链接 a { color: #002B5E; text-decoration: none; } a:hover { color: #FF0000; } #navigation a { color: #FFFFFF; } #navigation a:hover { color: #FF0000; } a.button { color: #000000; text-decoration: none; background-color: #94b8e9; border: 1px solid #000000; width: 90px; height: 30px; display: block; text-align: center; line-height: 30px; } a:hover.button { color: #FFFFFF; background-color: #336699; } 6.4.4 让链接看起来像按钮之一： 使用背景颜色 a.button { color:#000000; text-decoration:none; width: 200px; height: 40px; background: #94b8e9 url(images/button.gif) no-repeat left top; display: block; line-height: 40px; padding-left: 50px; } a:hover.button { color:#FFFFFF; background: #336699 url(images/button-