Dreamweaver网页设计第04章--css样式表.ppt

《Dreamweaver网页设计第04章--css样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章编辑层叠样式表CSSCSS样式简介“CSS样式”面板创建CSS样式应用CSS样式管理CSS样式一、CSS样式简介CSS（CascadingStyleSheet,层叠样式表）,是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。通过CSS，可以实现网页的样式信息与网页内容分离。能大大简化网页的设计工作，网页可以轻松维护。例如，修改某个CSS样式定义后，所有应用此样式的网页元素的外观则统一更改，而采用HTML样式的网页却需要设计者逐个修改每个元素的HTML样式。二、创建CSS样式

2、CSS样式面板新建CSS样式规则新建CSS规则编辑CSS规则删除CSS规则CSS样式的属性名CSS样式的属性值CSS样式名CSS选择器选择器（seletor）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。CSS选择器包括标签选择器、类选择器、ID选择器和复合内容选择器四种。标签选择器标签也称标记。而CSS标签选择器就是声明哪些标签采用哪种CSS样式。例如，h2选择器就用于声明页面中所有

标记的样式风格。在上页图中点击“确定”按钮后，则弹出“h2”的cs

3、s规则定义对话框。类选择器类选择器可以用于任何HTML标记。类选择器的名字需要设计者自己定义。ID选择器ID选择器和“类选择器”的作用类似。二者的区别在于：ID选择器的名字以“#”开头，而“类选择器”的名字以“.”开头；应用了“ID选择器”的HTML标记增加了id属性设置，应用了“类选择器”的HTML标记增加了class属性设置。复合内容选择器若要定义同时影响两个或多个标签、类或ID的复合规则，请选择“复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。例如，如果输入divp，则div标签内的所有p元素都将受此规则影响。说明文本区域准确说明您添加或删除选择器时该规则

4、将影响哪些元素。伪类选择器伪类选择器用于设置页面上的超链接在不同状态下的显示方式，这四种状态为：超链接被激活、鼠标指针悬停于其上、未访问过、已访问过。四个伪类选择器的作用a:active用于设置超链接被选中时的CSS样式，即鼠标被按下时超链接的显示方式。a:hover用于设置鼠标指针悬停于超链接之上时的CSS样式，即鼠标经过时超链接的显示方式。a:link用于设置尚未被访问过的超链接的CSS样式。a:visited用于设置已访问过的超链接的CSS样式，即超链接被鼠标单击后的显示方式。CSS样式的定义位置不管创建哪种CSS选择器，都要指定CSS样式定义的存放位置。使用

5、Dreamweaver“新建CSS规则”对话框，可以指定两种存放位置，即内嵌式和链接式。1．内嵌式CSS样式具体内容嵌入在网页首部。2．链接式先创建外部样式表文件，用于保存CSS样式信息，其扩展名为“.css”。应用这种外部样式表文件中的样式时，将位于网页外部的CSS样式表文件链接到本网页。CSS样式的定义位置（续）1．内嵌式在“新建CSS规则”对话框的“规则定义：选择规则定义位置”选项中，选择“（仅限该文档）”，则在当前文档的首部嵌入CSS样式表。（即嵌入在和标记之间，参见例4-1）CSS样式的定义位置（续）外部样式表文件创建外部样式表文件，该文

6、件用于保存CSS样式信息，其扩展名为“.css”。CSS样式的定义位置（续）创建外部样式表文件步骤如下：点击“确定”按钮后：CSS样式中边界、填充、边框的含义网页元素的盒子模型Dreamweaver支持8个类别的CSS属性“类型”类别：用于设置文字的有关属性，如字体。“背景”类别：用于设置背景有关的属性，如表格的背景色。“区块”类别：用于设置网页中文本的“单词间距”等属性。“方框”类别：用于设置网页元素的放置位置。可以对表格、层与网页元素位置关系的“浮动”、“填充”、“边界”等属性。“边框”类别：用于设置网页表格的各种边框线的样式。“列表”类别：用于设置网页文本列表的项目符

7、号和编号。“定位”类别：用于设置层的属性。“扩展”类别：用于设置网页的一些特殊效果，利用“滤镜”给所控制的对象添加特殊的滤镜效果。类型设置背景设置区块设置“区块”指网页中文本、图像和APDiv元素等替代元素，主要用于控制块中元素的间距和对齐方式等。方框设置用于设置网页元素的放置位置。可以对表格、APDiv元素与网页元素位置关系的“浮动”、“填充”、“边界”等属性。边框设置用于设置网页表格的各种边框线的样式。列表设置用于设置网页文本列表的项目符号和编号。定位设置用于设置APDiv元素定位属性扩展设置用于设置网页的一些