第4章 css样式表.pptVIP

一、 CSS样式简介 CSS（Cascading Style Sheet, 层叠样式表）,是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过CSS，可以实现网页的样式信息与网页内容分离。能大大简化网页的设计工作，网页可以轻松维护。 例如，修改某个CSS样式定义后，所有应用此样式的网页元素的外观则统一更改，而采用HTML样式的网页却需要设计者逐个修改每个元素的HTML样式。 二、创建CSS样式 CSS样式面板 新建CSS样式规则 CSS选择器 选择器（seletor）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 CSS选择器包括标签选择器、类选择器、ID和伪类选择器四种。 标签选择器 标签也称标记。而CSS标签选择器就是声明哪些标签采用哪种CSS样式。例如，h2选择器就用于声明页面中所有h2标记的样式风格。 类选择器 类选择器可以用于任何HTML标记。 类选择器的名字需要设计者自己定义。 ID选择器 ID选择器和“类选择器”的作用类似。二者的区别在于： ID选择器的名字以“#”开头，而“类选择器”的名字以“.”开头； 应用了“ID选择器”的HTML标记增加了id属性设置，应用了“类选择器”的HTML标记增加了class属性设置。 伪类选择器 伪类选择器用于设置页面上的超链接在不同状态下的显示方式，这四种状态为：超链接被激活、鼠标指针悬停于其上、未访问过、已访问过。 Dreamweaver提供了与超链接有关的四个伪类选择器：a:active，a:hover，a:link，a:visited，其中的a为HTML的超链接标记。 每个伪类选择器的作用 ? a:active 用于设置超链接被选中时的CSS样式，即鼠标被按下时超链接的显示方式。 ?a:hover 用于设置鼠标指针悬停于超链接之上时的CSS样式，即鼠标经过时超链接的显示方式。 ?a:link 用于设置尚未被访问过的超链接的CSS样式。 ?a:visited 用于设置已访问过的超链接的CSS样式，即超链接被鼠标单击后的显示方式。 CSS样式的定义位置 内嵌在当前网页首部 外部样式表文件 创建外部样式表文件，该文件用于保存CSS样式信息，其扩展名为“.css”。 CSS样式中边界、填充、边框的含义 网页元素的盒子模型 Dreamweaver 支持8个类别的CSS属性 “类型”类别：用于设置文字的有关属性，如字体。 “背景”类别：用于设置背景有关的属性，如表格的背景色。 “区块”类别：用于设置网页中文本的“单词间距”等属性。 “方框”类别：用于设置网页元素的放置位置。可以对表格、层与网页元素位置关系的“浮动”、“填充”、“边界”等属性。 “边框”类别：用于设置网页表格的各种边框线的样式。 “列表”类别：用于设置网页文本列表的项目符号和编号。 “定位”类别：用于设置层的属性。 “扩展”类别：用于设置网页的一些特殊效果，利用“滤镜”给所控制的对象添加特殊的滤镜效果。 类型设置 背景设置 区块设置 “区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。 方框设置 用于设置网页元素的放置位置。可以对表格、层与网页元素位置关系的“浮动”、“填充”、“边界”等属性。 边框设置 用于设置网页表格的各种边框线的样式。 列表设置 用于设置网页文本列表的项目符号和编号。 定位设置 用于设置层的属性 扩展设置 用于设置网页的一些特殊效果，利用“滤镜”给所控制的对象添加特殊的滤镜效果。 CSS样式表内容实例 三、应用CSS样式 首先应选择要应用样式的页面元素；然后通过属性面板或CSS样式面板，把CSS样式应用到页面元素上。 实例 应用外部样式表文件中的CSS样式 需要使用样式面板的附加样式表按钮 ， 然后选择样式表文件： 取消已应用的CSS样式 首先，在网页编辑窗口选择需要取消已应用CSS样式的对象或文本 然后，在文本属性面板中，从“样式”下拉列表中选择“无”；或在“相关CSS”选项卡中右键单击要删除的已应用规则，然后从上下文菜单中选择“类设置”|“无”。 四、管理CSS样式 修改CSS样式 单击位于面板底部的“编辑样式…”按钮 删除CSS样式 复制CSS样式 重命名CSS样式 导出样式以创建CSS 样式表文件 可以从文档中导