第6章 CSS层叠样式表1 类选择器CSS　课件

学习目标 了解什么是CSS样式表。 掌握CSS规则的基本语法、存在形式和选择器的类型。 能够创建并灵活运用类选择器CSS规则、标签选择器CSS规则、锚伪类CSS规则。 能够编辑、删除CSS规则。 能够附加外部CSS样式表文件。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” 最终制作效果如图所示 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （1）规划站点 新建文件夹“shufa_beihou”，将素材文件夹中所有文件和文件夹拷贝到“shufa_beihou”文件夹中。 （2）定义站点 在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为shufa_beihou文件夹。 （3）创建并应用类选择器CSS规则“.content” 打开shufa_rensheng.html，创建一个类选择器规则用来修饰文章内容，字体为宋体，大小为9pt，颜色代码为#009900，行高140%。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （3）创建并应用类选择器CSS规则“.content” 1）点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板，如果“CSS设计器”命令前已打对勾，表示“CSS设计器”面板已经打开，无需执行此命令。 2）添加源。在“CSS设计器”面板“源”窗格中点击图标，选择“在页面中定义”，在“源”窗格中生成<style>标签，表示创建源成功。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （3）创建并应用类选择器CSS规则“.content” 3）添加选择器。选择在“源”窗格中创建的源<style>，在“选择器”窗格中点击添加选择器图标，输入选择器名称“.content”。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （3）创建并应用类选择器CSS规则“.content” 4）应用CSS规则。在页面中选择文章内容部分，将“属性”面板切换至CSS属性状态，在“目标规则”中选择“.content”规则。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （3）创建并应用类选择器CSS规则“.content” 5）点击“属性”面板中的“编辑规则”按钮，打开“.content的CSS规则定义”对话框，在左侧“分类”中点击“类型”，将“Font-family”设置为“宋体”；将“Font-size”设置为“9pt”；“Color”设置为“#009900”；“Line-height”设置为“140%”。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （3）创建并应用类选择器CSS规则“.content” 6）设置完成后单击“确定”按钮，按F12预览，可以看到相应的CSS规则效果。 （4）创建并应用类选择器CSS规则“.title” 该规则用来修饰文章的标题，字体为宋体，大小为12pt，颜色代码为#006600，粗体。 1）添加选择器。选择“源”窗格中的源<style>，在“选择器”窗格中点击添加选择器图标，输入选择器名称“.title”。 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （4）创建并应用类选择器CSS规则“.title” 2）应用CSS规则。在页面中选择文章标题部分，将“属性”面板切换至CSS属性状态，在“目标规则”中选择“.title”规则 6.1 第6章　使用CSS层叠样式表 6.1　类选择器CSS规则的创建与应用 6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生” （4）创建并应用类选择器CSS规则“.title” 3）点击“属性”面板中的“编辑规则”按钮，打开“.title的CSS规则定义”对话框，在左侧“分类”中点击“类型”，将“