Dreamweaver网页设计 第8章CSS样式表
Dreamweaver 网页设计 第8章 CSS 样式表
【学习概述】 现在,对于一个高质量的网站来说,应用 CSS样式表是必不可少的。CSS样式表的主要优 点是便于对网页整体风格进行控制,当更新一处 的CSS规则时,使用该已定义样式的所有文档的 格式都会自动更新为新样式,并且CSS还可以制 作网页特性。本章内容包括:CSS的基本概念、 CSS的类型、创建CSS样式表、编辑样式表、 CSS滤镜效果、CSS的冲突等内容。本章重点内 容是3种常用CSS样式类型的应用,难点是CSS 的冲突
【学习概述】 现在，对于一个高质量的网站来说，应用 CSS样式表是必不可少的。CSS样式表的主要优 点是便于对网页整体风格进行控制，当更新一处 的 CSS 规则时，使用该已定义样式的所有文档的 格式都会自动更新为新样式，并且CSS还可以制 作网页特性。本章内容包括：CSS的基本概念、 CSS的类型、创建CSS样式表、编辑样式表、 CSS滤镜效果、CSS的冲突等内容。本章重点内 容是3种常用CSS 样式类型的应用，难点是CSS 的冲突
8.1【课堂讲解】CSS样式表概述 81.1什么是CSS? CSS也被称为层叠样式表。是一系列格式设置规则,它们控制Web页面 内容的外观。使用CSS设置页面格式时,可以将内容与表现形式分 开。使用CsS可以非常灵活并更好地控制具体的页面外观,从精确 的布局定位到特定的字体和样式。直接在 dreamweaver中输入文字并 设置属性面板如图8-1 格式标题3 3M样式SE/CB量国 字体宋体 大小无 #F000日扫当 □页面属性 图8-1自动产生CSS样式“ STYLE1
8.1【课堂讲解】CSS 样式表概述 8.1.1什么是CSS？ CSS也被称为层叠样式表。是一系列格式设置规则，它们控制 Web 页面 内容的外观。使用 CSS 设置页面格式时，可以将内容与表现形式分 开。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确 的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并 设置属性面板如图8-1。 图 8-1自动产生CSS样式“STYLE1
文档中文字效果如图8-2 胛eb页面内容的外 更奸遒控制具体的页面外视,从确的布局定位到特定的字体和月 图8-2文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式, 包括字体颜色、粗细、斜体、字体等 1)无标题文档/tit]e STILEI I 才定义的文字属性自动转换为cs <body> 一系列格式设置规則,它们控制vb页面内容的外观。使用Css 设置页面格式时,请将 文件自身中,而用于定义代码表现形 样式表)或HTML 以非常灵活并更好地控制具体的页面外狠,从精确的布局定位到特定的字体和样式。/h3 21(/htn1 e1ass="srLE1"-引用上面定义的ss 图8-3自动产生的CSS源代码
文档中文字效果如图8-2。 图 8-2 文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式， 包括字体颜色、粗细、斜体、字体等。 图 8-3 自动产生的CSS源代码
812CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构,如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 (按钮)、创建(按钮)、编辑(按钮)和删除(按钮)CSS样式。 全部正在 日样式 STILEI"的屈性 图8-4CSS样式面板
8.1.2 CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 （按钮 ）、创建（按钮 ）、编辑（按钮 ）和删除（按钮 ）CSS样式。 图 8-4 CSS样式面板