第5章使用CSS样式表修饰页面讲义.ppt

网页设计;5.1 CSS概述 5.2 CSS的类型 5.3 创建样式 5.4 样式的其他操作 5.5 常用的CSS设置 5.6 实践技能训练-----利用CSS修饰页面; 经常上网的人都会有这样的经验，将浏览器的显示字体变大或变小，网页中的文字也会随着发生变化。虽然有时会给浏览者带来帮助，但是也会对网页的布局产生影响，网页的版面会变得参差不齐。但是如果使用CSS，网页中的文本始终不随之发生变化，总是保持原有的外观，现代网页制作离不开CSS技术，采用CSS 技术，可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制。用CSS不仅可以制作令浏览着赏心悦目的网页，还能给网页添加许多特效。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握CSS属性设置非常重要。 ; CSS（Cascading Style Sheets 层叠样式表 ）是一种制作网页的新技术，已经成为网页设计必不可少的工具之一。目前，Internet Explorer 4.0、Netscape Navigator 4.0或更高版本的浏览器都能正确的显示带有CSS样式的网页，使用CSS样式不仅可以轻松地网页中的对象产生动态效果，同时还简化了HTML中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性。CSS样式甚至超越了Web页面本身的显示功能，将样式扩展到多媒体上，可显示出令人难以抗拒的强大魅力。简言之，应用CSS样式就可以使网页锦上添花。 CSS样式的主要功能如下: ?可以更加灵活地控制网页中文字的字体、大小、颜色等属性。 ?可以精确地控制网页中各个元素的位置。 ?简化代码，提高下载速度。 ?可以和脚本语言相结合，从而使网页中的元素实现动态效果。 ?代码兼容性更好。;5.2.1标签样式 在前面第1章中介绍的HTML语言属于标签语言，很多标签都是成对出现的。对于HTML标签的样式定义，被称为标签样式。 而有些HTML标签，如br标签，不是成对出现的，就不能设定样式。 例如，链接符号a引号的样式即是标签样式。如下： a { color :#000099 ;font-size:9pt;text-decoration:none } 标签a的样式包括颜色（color）、字号：（font-size）、文字的修饰（text-decoration），网页之中所有的链接文字（因为链接???字两端都会有ERROR[Basic syntax error]in: aERROR[Basic syntax error] in: ERROR[Basic syntax error]in: /ERROR[Basic syntax error] in:a 标签）都会应用标签样式中定义的外观。 链接文子取消下划线就是通过定义a标签实现的，代码为 text-decoration:none。 标签样式的缺点是不具有选择性，如果定义了某个HTML标签，网页上该标签之内的对象都会应用。;5.2.2 CSS选择器 CSS选择器是一种特殊类型的样式，在Dreamweaver中提供的有4种，分别为： a:link 、a:active 、a:visited 、a:hover Dreamweaver中的CSS选择器都是针对链接文字设定属性。 a:link设定正常状态下链接文字的样式。 a:active设定鼠标单击时链接的外观。 a:visited设定访问过的链接外观。 a:hover设定鼠标放置在链接文字之上时文字的外观， 其中最后一种a:hover最为常用。例如： a:hover { color :# ff6600 ;font-family:宋体; text-decoration:underline; } a:visited {font-family:宋体; color :# 339900 ; text-decoration:none; } CSS选择器和对特定标签中的文字在特定情况下的外观作出了设定，和标签样式一样，网页中所有的链接文字在特定情况下都会显示出CSS选择器定义的外观。;5.2.3 自定义样式 标签样式和CSS选择器的缺点是不够灵活啊，网页中的HTML标签内的对象，只要定义了标签样式，外观都会发生变化。