文档介绍：网页设计与制作
第一章 HTML语言基础 2
第二章初识Dreamweaver 4
第三章创建与应用表格 3
第四章使用层和框架布局页面 3
第五章 CSS样式与模板的使用 3
第六章行为、库和资源管理 3
第七章建立动态网站 3
第八章 Flash动画基础知识 3
第九章创建动画 3
第十章使用Fireworks编辑网页图像 3
1
第五章 CSS样式与模板的使用
一、层叠样式表概述
1、什么是CSS
层叠样式表(CSS)是一系列格式设置规则,它们控制网页内容的外观。使用层叠样式表可以为部分文件、整份文件乃至整个网站定义样式。
CSS样式规则由两部分组成:选择器和声明。
选择器是样式名称(如tr或p),而声明则用于定义样式元素。声明由属性(如color)和值(如red)两部分组成。
如:p{font-size:16px;color:red}
CSS样式表的主要优点是提供便利的更新功能。
第五章 CSS样式与模板的使用
2、 CSS的作用
CSS样式主要是实现网页中各种元素的准确定位,它可以帮助用户对网页的布局、字体、颜色、背景和其他图文效果实现更加精确的控制。
CSS样式只需修改一个文件就可以改变一批网页的外观和格式,并保证在所有浏览器和平台之间的兼容性,使用户设计的网站拥有更少的编码、更少的页数和更快的下载速度。
使用CSS样式可以控制许多使用HTML无法控制的属性。如:
指定自定义列表项目符号;
指定不同的字体大小和单位(像素、点数等);
设置HTML卷标、段落等的样式。
第五章 CSS样式与模板的使用
3、 CSS的基本语法
在代码视图模式中辨别CSS语法,最简单的方法就是寻找span标识符,凡是包含在<span></span>标识符之间的部分,就是CSS语法。
CSS可将原有的HTML卷标定义成自己想要的效果,其基本语法是在卷标之后加上{}符号,在此符号内填入CSS所设置的HTML属性。
如:h2{font-size:16px;color:red}
第五章 CSS样式与模板的使用
二、 CSS样式的创建与应用
Dreamweaver MX 2004拥有自动创建样式的功能,如用户选定某段文字后,为其设置字体、字号和颜色等属性后,系统自动创建以StyleX (X为数字序列)为名的样式,且自动显示在属性面板的“样式”下拉列表框中。
用户除了可以应用Dreamweaver创建的样式外,还可以定义自己需要的样式。
1、认识“CSS样式”面板
窗口/CSS样式
2、认识“相关CSS”面板
窗口/标签检查器/相关CSS(点击CSS属性标签)
第五章 CSS样式与模板的使用
3、创建CSS样式
文本/CSS样式/新建
对话框中选项的说明(P120)
示例:创建一个名为“test1”的样式,要求此样式的字体为“宋体”,颜色为#FF0000,字号为24像素,背景颜色为#00FFFF。
4、应用类样式
类样式是惟一可以应用于文档中任何文本(与控制文本的标签无关)的CSS样式类型。与当前文档关联的所有类样式都显示在“CSS样式”面板中(样式名称前有一个句点)和文本属性面板的“样式”下拉列表框中。
第五章 CSS样式与模板的使用
1)应用自定义的CSS样式
属性面板的“样式”下拉列表框
2)删除自定义的CSS样式
“样式”下拉列表框中选择“无”
三、 CSS样式的导出与编辑
1、导出样式以创建CSS样式表
用户可以从文档中导出样式以创建新的CSS样式表。然后,再链接到其他文档以应用这些样式。
文本/CSS样式/导出
2、管理CSS样式
文本/CSS样式/管理样式
第五章 CSS样式与模板的使用
3、链接和导入外部样式表
可以导入或链接到外部样式表以应用那里包含的样式。
文本/CSS样式/管理样式/附加
示例:创建新文档,并为其链接一个外部样式表。
4、编辑CSS样式
CSS样式面板
对CSS样式表进行编辑时,会立刻重新设置该CSS样式表控制的所有文本的格式。
编辑外部样式表会影响与它链接的所有文档。
第五章 CSS样式与模板的使用
四、 CSS样式的优先顺序
(1) 如果将两种样式应用于同一文本,浏览器显示这两种样式的所有属性。
(2) 如果应用于同一文本的两种样式的属性发生冲突(如,一种样式可能将蓝色指定为文本颜色,而另一种样式可能指定红色作为文本颜色。),则浏览器显示最里面的样式(离文本本身最近的样式)的属性。
(3) 如果有直接冲突,则CSS样式(使用class属性应用的样式)中的属性将取代HTML标签样式中的属性。
第五章 CSS样式与模板的使用
示例:编辑下述CSS样式代码,以了解CSS样式的优先顺序。
CSS样式代码:
<h1>举例<span class="Blue">该段落受自定