第七讲使用层叠样式表.ppt

第八章 使用层叠样式表 CSS层叠样式表作为网页内容格式的基础，为大多数的浏览器所支持，成为网页设计者必须了解的知识之一，CSS可以控制和重设HTML绝大部分标记，最大的优点是可以存储成一个独立的文件。 CSS层叠样式表主要有两大优点，一个是可以对网页元素施加更多的控制，二是可以批量更新网页。 8.1 层叠样式表基础 8.1.1 什么是CSS 8.1.2 CSS样式的规则及分类 8.1.1 什么是CSS CSS是“Cascading Styles Sheets”的缩写，中文名称是层叠样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。 8.1.2 CSS样式的规则及分类 CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。 Dreamweaver CS4中的4种样式表类型 1.类样式：类样式又称自定义样式，它可应用于文档中任何文本。与当前文档关联的所有类样式都显示在“CSS 样式”面板（样式名称前有一个句点“.”），以及文本属性面板的“样式”列表中。 2.标签样式：用来重定义HTML标签的格式。 3.ID样式：选择器样式又称高级样式，它用来重定义特定标签组合的格式。 4.复合标签：同时影响两个或多个标签、类或ID的复合规则。 CSS的规则： 1.外部样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。 2.内部（或嵌入式）样式表：内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。 3.内联样式表：常使用style属性将样式表插入到HTML标签中，但很受限制的。一般在不重新定义规则时使用 8.2 创建层叠样式表 8.2.1 使用CSS面板 8.2.2 新建CSS样式 8.2.3 创建CSS文档 8.2.1 使用CSS面板 1.“全部”模式 在“全部”模式下，“CSS”面板显示应用到当前文档的所有CSS规则。单击其中一个规则，该规则的属性出现在下方的列表框中；此模式下共有三种属性视图方式： 显示类别视图； 显示列表视图； 显示设置属性； 2.“正在”模式：CSS”面板显示当前所选内容的属性的摘要。 8.2.2 新建CSS样式 1.“窗口”菜单→“CSS”样式→单击右下角的“新建CSS规则”按钮； 2.在CSS面板上鼠标右键，在快捷菜单中新建； 3.“格式→CSS样式→新建”命令 8.2.3 创建CSS文档 “文件→新建”，在“页面类型”项中选择“CSS”文件 8.3 使用CSS样式 8.3.1 定义CSS规则 8.3.2 套用CSS样式 8.3.3 附加样式表 8.3.4 删除已使用的样式表 8.3.1 定义CSS规则属性 在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。接下来学习根据CSS样式表的用途和要求，分别设置不同类型的参数。 1 类型属性 类型属性主要用来定义文字的字体、大小、粗细、样式、行高、颜色等属性。该设置主要针对网页中的文字有效。 2．背景属性 背景属性主要用来定义页面的背景颜色或背景图像，还可以设置背景图像的位置。 3 区块属性 区块属性主要用来定义文字的排列格式，间距和对齐方式。 4．方框属性 用来控制元素在页面上的放置方式． 5 边框属性 边框属性用来定义元素周围的边框，例如边框的宽度、颜色和样式等。 6 列表属性 列表属性主要用来定义列表各种属性，如列表项目符号、位置等。 7 定位属性 定位属性主要用来定义层的大小、位置、可见性、溢出方式、剪辑等属性。（用于使用“层”首选参数中定义的层的默认标签，将标签或所选文本块更改为新层。） 8 扩展属性 扩展属性包括过滤器、分页和光标选项。但一般受浏览器版本的限制。 8.3.2 套用CSS样式 在CSS面板中，点击右上角的按钮，选“套用”选项； 从属性检查器添加CSS样式 8.3.3 附加样式表 可引用其他页面的样式风格，保持所有 网页设计风格一致 8.3.4 删除已应用的样式表 通过属性检查器 通过标签检查器 * HTML标签样式 自定义样式（类样式） CSS选择器样式 选择器 声明 声