模块七 使用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文件夹
如果觉得《css对网页模块进行样式定义 模块七 使用CSS样式1217.ppt》对你有帮助,请点赞、收藏,并留下你的观点哦!