css对网页模块进行样式定义,模块七 使用CSS样式1217.ppt

模块七 使用CSS样式1217

模块七 使用CSS样式和插入行为 任务一：CSS样式的概念 任务二：CSS样式 任务三：样式的类型与创建 任务四：CSS的属性 任务五：编辑CSS样式 任务六：过滤器 任务一：CSS样式的概念 CSS(Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”)是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，这样将缩短浏览器的加载时间。 任务二：CSS样式 子任务1：认识“CSS样式”控制面板 子任务2：CSS样式的类型 子任务1：认识“CSS样式”控制面板 1、打开“CSS样式”控制面板 启用CSS样式的几种方法：窗口—>CSS样式， 快捷键 CSS样式控制面板的组成 2、样式表的功能 1>灵活地控制网页中字体、颜色、大小、位置和间距等。 2>方便地为网页中的元素设置不同的背景颜色和背景图片。 3 >精确地控制网页个元素的位置。 4 >为文字或图片设置滤镜效果。 5 >与脚本语言结合制作动态效果。 子任务2：CSS样式的类型 1、重定义HTML标签样式7-1.html 2、CSS选择器样式7-2.html 3、自定义样式7-3.html 任务三：样式的类型与创建 子任务1：创建重定义HTML标签样式 子任务2：创建CSS选择器 子任务3：创建和应用自定义样式 子任务4：创建和引用外部样式 子任务1：创建重定义HTML标签样式 1、启用“新建CSS规则”对话框 五种方法掌握一种即可。 2、重新定义HTML标签样式 (1)选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，然后打开【新建CSS规则】对话框。 (2)在【选择器类型】选项组中选择要创建的CSS样式的类型 。 (3)在对话框中的【定义在】下拉列表中选择CSS样式的存放位置。 (4)打开【CSS规则定义】对话框，进行CSS样式设置。 子任务2：创建CSS选择器 1、重定义链接文本的状态 7-4.html 2、某个特定的网页对象定义样式7-5.html 说明：在“选择器”中写CSS样式名时候前面加#号，如#zuozhe 子任务3：创建和应用自定义样式 1、创建自定义样式 2、应用样式 文字，图片背景 7-6.html 子任务4：创建和引用外部样式 1、创建外部样式 2、引用外部样式 任务四：CSS的属性 1、类型 2、背景 3、区块 4、方框 5、边框 6、列表 7、定位 8、扩展 1、类型分类主要是定义网页中文字的字体、字号、颜色等。 2、背景分类用于在网页元素后加入背景图像或背景颜色。 3、区块分类用于控制网页中块元素的间距、对齐方式和文字缩进等属性。 4、方框分类用于控制网页中块元素的内容距区块边框的距离、区块的大小、区块间的间隔等。 5、边框分类主要针对块元素的边框 6、列表分类用于设置项目符号或编号的外观。 7、定位分类主要精确控制网页元素的位置，主要针对层的位置进行控制。 8、扩展分类主要用于控制鼠标指针形状、控制打印时的分页以及为网页元素添加滤镜效果。 任务五：编辑CSS样式 1、现在“CSS样式”控制面板中单击选中某样式，然后单击位于面板底部的“编辑样式”按钮弹出CSS规则定义对话框，根据需要设置CSS双休那个，单击“确定”按钮完成设置。 2、在“css样式”控制面板中用鼠标右键单击样式，然后从弹出菜单中选择“编辑”命令，弹出CSS规则定义对话框，最后根据需要设置CSS属性，单击“确定”按钮完成设置。 3、在“css样式”面板中选择样式，然后再“CSS属性检查器”控制面板中编辑它的属性。 任务六：过滤器 见实例css文件夹