《网页设计》――使用CSS样式表修饰页面.ppt

《《网页设计》――使用CSS样式表修饰页面.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计5.1CSS概述5.2CSS的类型5.3创建样式5.4样式的其他操作5.5常用的CSS设置5.6实践技能训练-----利用CSS修饰页面第5章使用CSS样式表修饰页面经常上网的人都会有这样的经验，将浏览器的显示字体变大或变小，网页中的文字也会随着发生变化。虽然有时会给浏览者带来帮助，但是也会对网页的布局产生影响，网页的版面会变得参差不齐。但是如果使用CSS，网页中的文本始终不随之发生变化，总是保持原有的外观，现代网页制作离不开CSS技术，采用CSS技术，可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制

2、。用CSS不仅可以制作令浏览着赏心悦目的网页，还能给网页添加许多特效。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握CSS属性设置非常重要。第5章使用CSS样式表修饰页面CSS（CascadingStyleSheets层叠样式表）是一种制作网页的新技术，已经成为网页设计必不可少的工具之一。目前，InternetExplorer4.0、NetscapeNavigator4.0或更高版本的浏览器都能正确的显示带有CSS样式的网页，使用CSS样式不仅可以轻松地网页中的对象产生动态效果，同时还简化了HTM

3、L中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性。CSS样式甚至超越了Web页面本身的显示功能，将样式扩展到多媒体上，可显示出令人难以抗拒的强大魅力。简言之，应用CSS样式就可以使网页锦上添花。CSS样式的主要功能如下:可以更加灵活地控制网页中文字的字体、大小、颜色等属性。可以精确地控制网页中各个元素的位置。简化代码，提高下载速度。可以和脚本语言相结合，从而使网页中的元素实现动态效果。代码兼容性更好。5.1CSS概述5.2.1标签样式在前面第1章中介绍的HTML语言属于标签语言，很多标签都是成对出现的

4、。对于HTML标签的样式定义，被称为标签样式。而有些HTML标签，如
标签，不是成对出现的，就不能设定样式。例如，链接符号a引号的样式即是标签样式。如下：a{color:#000099;font-size:9pt;text-decoration:none}标签a的样式包括颜色（color）、字号：（font-size）、文字的修饰（text-decoration），网页之中所有的链接文字（因为链接文字两端都会有ERROR[Basicsyntaxerror]in:

5、:>ERROR[Basicsyntaxerror]in:标签）都会应用标签样式中定义的外观。链接文子取消下划线就是通过定义标签实现的，代码为"text-decoration:none"。标签样式的缺点是不具有选择性，如果定义了某个HTML标签，网页上该标签之内的对象都会应用。5.2CSS的类型5.2.2CSS选择器CSS选择器是一种特殊类型的样式，在Dreamweaver中提供的有4种，分别为：a:link、a:active、a:visited、a:hov

6、erDreamweaver中的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-decorat

7、ion:none;}CSS选择器和对特定标签中的文字在特定情况下的外观作出了设定，和标签样式一样，网页中所有的链接文字在特定情况下都会显示出CSS选择器定义的外观。5.2CSS的类型5.2.3自定义样式标签样式和CSS选择器的缺点是不够灵活啊，网页中的HTML标签内的对象，只要定义了标签样式，外观都会发生变化。自定义样式比标签样式和CSS选择器更加灵活，在网页之中，可以选择应用自定义样式的范围。自定义的样式首先要命名。命名的方式很特别，以一个英文的句号开始，然后是英文的名字，这里不能使用中文名。例如：.bg{backgr

8、ound-imag:url(../images/bg.gif);}其中background-imag:url(../images/bg.gif)设定的是背景图像的路径。设定了自定义样式之后，另一个问题是在网页中选择应用范围。方法是在应用自定义样式的HTML标签中添加class=""，引号之内为使用自定义样式的名字。例