文档介绍：网页设计与制作教程
中国水利水电出版社
《网页设计与制作》教材
CSS概述
CSS的类型
创建样式
样式的其他操作
常用的CSS设置
实践技能训练-----利用CSS修饰页面
第5章使用CSS样式表修饰页面
经常上网的人都会有这样的经验,将浏览器的显示字体变大或变小,网页中的文字也会随着发生变化。虽然有时会给浏览者带来帮助,但是也会对网页的布局产生影响,网页的版面会变得参差不齐。但是如果使用CSS,网页中的文本始终不随之发生变化,总是保持原有的外观,现代网页制作离不开CSS技术,采用CSS 技术,可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制。用CSS不仅可以制作令浏览着赏心悦目的网页,还能给网页添加许多特效。创建CSS样式表的过程,就是对各种CSS属性的设置过程,所以了解和掌握CSS属性设置非常重要。
第5章使用CSS样式表修饰页面
CSS(Cascading Style Sheets 层叠样式表)是一种制作网页的新技术,已经成为网页设计必不可少的工具之一。目前, Explorer Navigator ,使用CSS样式不仅可以轻松地网页中的对象产生动态效果,同时还简化了HTML中各种繁琐的标签,使得各个标签的属性更具有一般性和通用性。CSS样式甚至超越了Web页面本身的显示功能,将样式扩展到多媒体上,可显示出令人难以抗拒的强大魅力。简言之,应用CSS样式就可以使网页锦上添花。
CSS样式的主要功能如下:
可以更加灵活地控制网页中文字的字体、大小、颜色等属性。
可以精确地控制网页中各个元素的位置。
简化代码,提高下载速度。
可以和脚本语言相结合,从而使网页中的元素实现动态效果。
代码兼容性更好。
CSS概述
在前面第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标签,网页上该标签之内的对象都会应用。
CSS的类型
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选择器定义的外观。
CSS的类型
自定义样式
标签样式和CSS选择器的缺点是不够灵活啊,网页中的HTML标签内的对象,只要定义了标签样式,外观都会发生变化。
自定义样式比标签样式和CSS 选择器更加灵活,在网页之中,可以选择应用自定义样式的范围。
自定义的样式首先要命名。命名的方式很特别,以一个英文的句号开始,然后是英文的名字,这里不能使用中文名。例如:
.bg{background-im