网页设计7-CSS选择器

1、授课人：何蕴婷 EMAIL： - CSS- CSS样式（样式（2 2） 内部培训资料,不作任何宣传用途 作业讲评作业讲评 #p font-family: Times New Roman, Times, serif; lint href=08.07.css“ body background-image: url(image/%E6%98%9F%E6%98%9F%E8%83% 8C%E6%99%AF_020_%E7%9C%8B%E5%9B%BE %E7%8E%8B.gif); p color: #F00; h1 color: #0F0; p font-size: 36px; font-style:

2、 oblique; line-height: normal; font-weight: 800; font-variant: normal; text-transform: uppercase; color: #00F; 内部培训资料,不作任何宣传用途 1、通过实训项目了解css的3种类别。 2、通过实训项目了解3种类别的css的语 法结构。 内部培训资料,不作任何宣传用途 页面中的3种CSS选择器 1、类别选择器 2、标记选择器 3、ID选择器 内部培训资料,不作任何宣传用途 页面中的3种CSS选择器 1、类别选择器 实例1：2-1.html 2、标记选择器 实例2：2-2.html 3、I

3、D选择器 实例3：2-5.html 内部培训资料,不作任何宣传用途 l实例1-类别选择器 class选择器 class选择器1 class选择器2 class选择器3 h3同样适用 内部培训资料,不作任何宣传用途 类别选择器类别选择器 类别选择器（ 自定义CSS样式）可以对任何文本块或文本区 域进行且需要用户手动进行应用。 v定义类样式的形式为：定义类样式的形式为： v.样式名称样式名称 属性名称属性名称 : 属性值；属性值； .c1 font-family: 华文行楷; font-size: 24px; background-color: #99CCCC; letter-spacing: 6

4、px; word-spacing: 12px; list-style-type: lower-roman; position: relative; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; v应用样式的形式为：应用样式的形式为： 应用C1类样式的 显示效果 内部培训资料,不作任何宣传用途 l实例2标记选择器 class选择器与标记选择器 class选择器与标记选择 器1 class选择器与标记选择 器2 class选择器与标记选择 器3 class 选择器与标记选择器4 cla

5、ss选择器与标记选择 器5 class选择器与标记选择 器6 内部培训资料,不作任何宣传用途 标记选择器标记选择器 标记选择器（HTML标签样式）是对现有的HTML标记进行 重新定义，当创建或改变该样式时，所有应用了该样式的 文本格式都会自动更新。 v定义定义标记选择器的形式为：的形式为： 标记名称标记名称 属性名称属性名称 : 属性值属性值 ； h2 font-family: 华文行楷; letter-spacing: 6px; v应用样式的形式为：应用样式的形式为： 应用h2标记的显示效果 内部培训资料,不作任何宣传用途 l实例3ID选择器 ID选择器 ID选择器1 ID选择器2 ID选择

6、器3 ID选择器3 内部培训资料,不作任何宣传用途 IDID选择器选择器 ID选择器（CSS选择器样式 ）是对特定ID属性的标记。 v定义定义ID选择器的形式为：的形式为： #样式名称样式名称 属性名称属性名称 : 属性值属性值 ； h2 font-family: 华文行楷; letter-spacing: 6px; v应用样式的形式为：应用样式的形式为： 应用h2标记的显示效果 内部培训资料,不作任何宣传用途 CSSCSS样式简介样式简介 4、导入样式：1-9.html 页面标题 CSS标题1 紫色、粗体、下划线、25px的效果1 CSS标题2 紫色、粗体、下划线、25px的效果2 CSS标

7、题3 紫色、粗体、下划线、25px的效果3 内部培训资料,不作任何宣传用途 自定义CSS样式 （类别选择器） HTML标签样式 （标记CSS选择器） CSS选择器样式 CSSCSS的的3 3种种选择器选择器 内部培训资料,不作任何宣传用途 自定义自定义CSSCSS样式样式 自定义CSS样式可以对任何文本块或 文本区域进行且需要用户手动进行应用。 内部培训资料,不作任何宣传用途 HTMLHTML标签样式标签样式 该样式是对现有的HTML标记进行重新定义， 当创建或改变该样式时，所有应用了该样式的文 本格式都会自动更新。 内部培训资料,不作任何宣传用途 CSSCSS选择器样式选择器样式 该样式是对

8、某些特定的标记组合进行重新定义，如所有包含了 特定ID属性的标记，设置完成此样式后Dreamweaver会自动应用该 样式。 内部培训资料,不作任何宣传用途 设置设置CSSCSS样式样式 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置 内部培训资料,不作任何宣传用途 类型设置类型设置 内部培训资料,不作任何宣传用途 背景设置背景设置 “背景”设置包括设置背景颜色、选择背景图像、设置背 景图像是否重复及重复的方式、背景图像是否滚动、背景图像 相对于应用样式元素的位置。 内部培训资料,不作任何宣传用途 区块设置区块设置 “区块”指网页中文本、图像和层等替代元素， 主

9、要用于控制块中元素的间距和对齐方式等。 内部培训资料,不作任何宣传用途 方框设置方框设置 “方框”设置可以定义控制元素在页面上的放置方 式和属性等。 内部培训资料,不作任何宣传用途 边框设置边框设置 “边框”设置包括定义元素周围边框的样式、 宽度及颜色等。 内部培训资料,不作任何宣传用途 列表设置列表设置 “列表”设置主要用于控制列表内各项元素的属性，如项 目符号类型、项目符号图像和项目符号位置。 内部培训资料,不作任何宣传用途 定位设置定位设置 “定位”设置主要用于控制网页元素，特别是层 的位置。 内部培训资料,不作任何宣传用途 扩展设置扩展设置 “扩展”设置主要用于为打印的页面设置分页和为

10、网页元素 设置视觉效果。 内部培训资料,不作任何宣传用途 管理管理CSSCSS样式样式 修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 自定义CSS样式的应用 链接外部CSS样式 内部培训资料,不作任何宣传用途 修改修改CSSCSS样式样式 创建层叠样式后，可以修改样式中的某些参数。 内部培训资料,不作任何宣传用途 删除删除CSSCSS样式样式 在“CSS样式”面板中，选择要删除的样式名称。 单击面板底部的“删除”按钮即可将样式删除。 内部培训资料,不作任何宣传用途 复制复制CSSCSS样式样式 复制一个已经创建完成的CSS样式，再对其参数进行修改， 即可创建

11、一个全新的CSS样式，这样可以提高工作效率。 内部培训资料,不作任何宣传用途 重命名层叠样式重命名层叠样式 内部培训资料,不作任何宣传用途 自定义自定义CSSCSS样式的应用样式的应用 在CSS样式中的HTML标签样式和CSS选择器样式是自动应 用的，只有自定义层叠样式需要用户手动操作。 内部培训资料,不作任何宣传用途 链接外部链接外部CSSCSS样式样式 通过链接外部CSS样式可将其他网页中的样式 应用到当前网页中。 内部培训资料,不作任何宣传用途 应用应用CSSCSS滤镜效果滤镜效果 CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加到一个标 准的HTML元素上，使应用样式的对象

12、产生模糊、反转、发光等特殊效果。在 Dreamweaver中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代 码。 内部培训资料,不作任何宣传用途 扩展的扩展的CSSCSS支持支持 在Dreamweaver中，CSS面板设计成了统一的面板，我们在 此面板中可以快速确认样式、编辑样式、查看应用于页面元素的 样式。 内部培训资料,不作任何宣传用途 HTMLHTML标签样式标签样式 该样式是对现有的HTML标记进行重新定义，当创建 或改变该样式时，所有应用了该样式的文本格式都会自 动更新。 这一种方式主要是针对于某一个标记，所定义的样式 也只应用于选择的标记。 定义形式为：标记名称属性名称：属性

13、值，例 如:body margin-left : 15px ; margin-right : 15px; 。 内部培训资料,不作任何宣传用途 CSSCSS选择器样式选择器样式 CSS选择符是一种特殊类型的样式，该样式是对某些特 定的标记组合进行重新定义，如所有包含了特定ID属性 的标记，设置完成此样式后Dreamweaver会自动应用该 样式。 常用的有4种：a:link、a:active、a:visited和a:hoer。其 中“a:link”设置正常状态下链接文字的外观，“a:active” 设置鼠标单击时链接的外观，“a:visited”设置访问过的 链接外观，“a:hoer”设置鼠标放

14、置在链接文字之上时文 字的外观。 内部培训资料,不作任何宣传用途 设置设置CSSCSS样式样式 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置 内部培训资料,不作任何宣传用途 类型设置类型设置 内部培训资料,不作任何宣传用途 背景设置背景设置 “背景”设置包括设置背景颜色、选择背景图像、设置背 景图像是否重复及重复的方式、背景图像是否滚动、背景图像 相对于应用样式元素的位置。 内部培训资料,不作任何宣传用途 区块设置区块设置 “区块”指网页中文本、图像和层等替代元素， 主要用于控制块中元素的间距和对齐方式等。 内部培训资料,不作任何宣传用途 方框设置方框设置 “方框”设置可以定义控制元素在页面上的放置方 式和属性等。 内部培训资料,不作任何宣传用途 边框设置边框设置 “边框”设置包括定义元素周围边框的样式、 宽度及颜色等。 内部培训资料,不作任