课堂讲解  上机实战  第 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章

  • 1.
    课堂讲解 上机实战 第 11 课 CSS 样式
  • 2.
    课堂讲解 CSS 样式简介 创建 CSS 样式 设置 CSS 样式 管理 CSS 样式 应用 CSS 滤镜效果 扩展的 CSS 支持
  • 3.
    CSS 样式简介 CSS( Cascading Style Sheets )样式又叫层叠样式,使用它可以对网页中的布局元素,如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。 CSS 样式不仅可以在一个页面中使用,而且可以用于其他多个页面。
  • 4.
    创建 CSS 样式自定义 CSS 样式 HTML 标签样式 CSS 选择器样式
  • 5.
    自定义 CSS 样式 自定义 CSS 样式可以对任何文本块或文本区域进行且需要用户手动进行应用。
  • 6.
    HTML 标签样式 该样式是对现有的 HTML 标记进行重新定义,当创建或改变该样式时,所有应用了该样式的文本格式都会自动更新。
  • 7.
    CSS 选择器样式 该样式是对某些特定的标记组合进行重新定义,如所有包含了特定 ID 属性的标记,设置完成此样式后 Dreamweaver 会自动应用该样式。
  • 8.
    设置 CSS 样式 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置
  • 9.
  • 10.
    背景设置 “ 背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。
  • 11.
    区块设置 “ 区块”指网页中文本、图像和层等替代元素,主要用于控制块中元素的间距和对齐方式等。
  • 12.
    方框设置 “ 方框”设置可以定义控制元素在页面上的放置方式和属性等 。
  • 13.
    边框设置 “ 边框”设置包括定义元素周围边框的样式、宽度及颜色等 。
  • 14.
    列表设置 “列表”设置主要用于控制列表内各项元素的属性,如项目符号类型、项目符号图像和项目符号位置 。
  • 15.
    定位设置 “定位”设置主要用于控制网页元素,特别是层的位置。
  • 16.
    扩展设置 “ 扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。
  • 17.
    管理 CSS 样式 修改 CSS 样式 删除 CSS 样式 复制 CSS 样式 重命名层叠样式 应用 CSS 样式表 自定义 CSS 样式的应用 链接外部 CSS 样式
  • 18.
    修改 CSS 样式 创建层叠样式后,可以修改样式中的某些参数。
  • 19.
    删除 CSS 样式 在“ CSS 样式”面板中,选择要删除的样式名称。 单击面板底部的“删除”按钮即可将样式删除。
  • 20.
    复制 CSS 样式 复制一个已经创建完成的 CSS 样式,再对其参数进行修改,即可创建一个全新的 CSS 样式,这样可以提高工作效率。
  • 21.
  • 22.
    自定义 CSS 样式的应用 在 CSS 样式中的 HTML 标签样式和 CSS 选择器样式是自动应用的,只有自定义层叠样式需要用户手动操作。
  • 23.
    链接外部 CSS 样式 通过链接外部 CSS 样式可将其他网页中的样式应用到当前网页中。
  • 24.
    应用 CSS 滤镜效果CSS 滤镜是 CSS 的一个扩展,能把可视化的滤镜和转换效果添加到一个标准的 HTML 元素上,使应用样式的对象产生模糊、反转、发光等特殊效果。在 Dreamweaver 8 中,可直接在对话框中添加滤镜的参数,而不用编写复杂的代码。
  • 25.
    扩展的 CSS 支持 在 Dreamweaver 8 中, CSS 面板设计成了统一的面板,我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。
  • 26.
    上机实战 本课上机实战主要练习某公司站点的 CSS 样式定义。在练习中主要用到 CSS 样式的创建和添加外部 CSS 样式的链接等知识点,通过练习读者应充分掌握自定义样式、 HTML 标签样式等 CSS 样式的创建。在制作中主要分为创建 <body> 标签样式、自定义文本样式以及创建超级链接样式这 3 个部分。