1、在页面中使用CSS样式,通过CSS可以使用更丰富、更灵活的样式,更简单地设计出更美观的网页。同时,也让网页的设计与维护更有效率。CSS在网页设计中的作用尤为重要,是网页设计师必备的知识。,CSS样式简介,CSS(Cascading Style Sheets)样式又叫层叠样式,使用它可以对网页中的布局元素,如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用,而且可以用于其他多个页面。,CSS样式的主要功能如下:,可以更加灵活地控制网页中文字的字体、大小、颜色等属性。 可以精确地控制网页中各个元素的位置。 简化代码,提高下载速度。 可以和脚本语言
2、相结合,从而使网页中的元素实现动态效果。 代码兼容性更好。,自定义CSS样式 自定义CSS样式可以对任何文本块或文本区域进行且需要用户手动进行应用。 HTML标签样式 该样式是对现有的HTML标记进行重新定义,当创建或改变该样式时,所有应用了该样式的文本格式都会自动更新。,创建CSS样式,CSS选择器样式 该样式是对某些特定的标记组合进行重新定义,如所有包含了特定ID属性的标记,设置完成此样式后Dreamweaver会自动应用该样式。,设置CSS样式 类型设置,背景设置“背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位
3、置。,区块设置“区块”指网页中文本、图像和层等替代元素,主要用于控制块中元素的间距和对齐方式等。,方框设置“方框”设置可以定义控制元素在页面上的放置方式和属性等。,边框设置“边框”设置包括定义元素周围边框的样式、宽度及颜色等。,列表设置“列表”设置主要用于控制列表内各项元素的属性,如项目符号类型、项目符号图像和项目符号位置。,定位设置“定位”设置主要用于控制网页元素,特别是层的位置。,扩展设置“扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。,管理CSS样式,修改CSS样式创建层叠样式后,可以修改样式中的某些参数。,删除CSS样式 在“CSS样式”面板中,选择要删除的样式名称。
4、 单击面板底部的“删除”按钮即可将样式删除。,复制CSS样式 复制一个已经创建完成的CSS样式,再对其参数进行修改,即可创建一个全新的CSS样式,这样可以提高工作效率。 选择“复制”,打开复制样式对话框,可以重新定义复制后样式的存放位置、类型、名称。但样式外观的设置将被保留,这很适合对样式做小的改动或者转移样式的存放位置。,重命名层叠样式,自定义CSS样式的应用 在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的,只有自定义层叠样式需要用户手动操作。,链接外部CSS样式 通过链接外部CSS样式可将其他网页中的样式应用到当前网页中。,CSS滤镜是CSS的一个扩展,能把可视化的滤镜和转换效果添加到一个标准的HTML元素上,使应用样式的对象产生模糊、反转、发光等特殊效果。在Dreamweaver 8中,可直接在对话框中添加滤镜的参数,而不用编写复杂的代码。,应用CSS滤镜效果,