第11章

课堂讲解
上机实战
第 11 课 CSS 样式

课堂讲解
CSS 样式简介
创建 CSS 样式
设置 CSS 样式
管理 CSS 样式
应用 CSS 滤镜效果
扩展的 CSS 支持

CSS 样式简介
CSS （ Cascading Style Sheets ）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。 CSS 样式不仅可以在一个页面中使用，而且可以用于其他多个页面。

创建 CSS 样式
自定义 CSS 样式
HTML 标签样式
CSS 选择器样式

自定义 CSS 样式
自定义 CSS 样式可以对任何文本块或文本区域进行且需要用户手动进行应用。

HTML 标签样式
该样式是对现有的 HTML 标记进行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新。

CSS 选择器样式
该样式是对某些特定的标记组合进行重新定义，如所有包含了特定 ID 属性的标记，设置完成此样式后 Dreamweaver 会自动应用该样式。

设置 CSS 样式
类型设置
背景设置
区块设置
方框设置
边框设置
列表设置
定位设置
扩展设置

类型设置

背景设置
“ 背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。

区块设置
“ 区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。

方框设置
“ 方框”设置可以定义控制元素在页面上的放置方式和属性等。

边框设置
“ 边框”设置包括定义元素周围边框的样式、宽度及颜色等。

列表设置
“ 列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。

定位设置
“ 定位”设置主要用于控制网页元素，特别是层的位置。

扩展设置
“ 扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。

管理 CSS 样式
修改 CSS 样式
删除 CSS 样式
复制 CSS 样式
重命名层叠样式
应用 CSS 样式表
自定义 CSS 样式的应用
链接外部 CSS 样式

修改 CSS 样式
创建层叠样式后，可以修改样式中的某些参数。

删除 CSS 样式
在“ CSS 样式”面板中，选择要删除的样式名称。
单击面板底部的“删除”按钮即可将样式删除。

复制 CSS 样式
复制一个已经创建完成的 CSS 样式，再对其参数进行修改，即可创建一个全新的 CSS 样式，这样可以提高工作效率。

重命名层叠样式

自定义 CSS 样式的应用
在 CSS 样式中的 HTML 标签样式和 CSS 选择器样式是自动应用的，只有自定义层叠样式需要用户手动操作。

链接外部 CSS 样式
通过链接外部 CSS 样式可将其他网页中的样式应用到当前网页中。

应用 CSS 滤镜效果
CSS 滤镜是 CSS 的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的 HTML 元素上，使应用样式的对象产生模糊、反转、发光等特殊效果。在 Dreamweaver 8 中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代码。

扩展的 CSS 支持
在 Dreamweaver 8 中， CSS 面板设计成了统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。

上机实战
本课上机实战主要练习某公司站点的 CSS 样式定义。在练习中主要用到 CSS 样式的创建和添加外部 CSS 样式的链接等知识点，通过练习读者应充分掌握自定义样式、 HTML 标签样式等 CSS 样式的创建。在制作中主要分为创建 <body> 标签样式、自定义文本样式以及创建超级链接样式这 3 个部分。

第11章

by paoapao

Accessibility

Categories

Upload Details

Usage Rights

Statistics

第11章 Presentation Transcript