企业网站制作与维护-PPT06-v1.0.ppt

需求描述 掌握几种CSS样式表选择器 掌握CSS样式表设置页面标签 实现思路 使用Dreamweaver软件打开“瑞丽家居设计”素材页面 新建CSS规则 使用CSS设置文本的字体、大小、颜色等 制作鼠标在链接文字上方悬停时，产生变色、变形效果等 设置文字下划线、顶划线和删除线等 实验案例一：使用样式表美化网页2-1 学员练习 使用Dreamweaver软件打开“瑞丽家居设计”素材页面 新建CSS规则，并设置CSS样式表 保存页面，在浏览器中浏览 实验案例一：使用样式表美化网页2-2 40分钟完成 需求描述 掌握几种CSS样式表选择器 掌握CSS样式表设置页面标签 实验案例二：设置页面样式3-1 实现思路 新建HTML文档，在页面中插入一个2行2列的表格 设置表格宽度为450px，合并第一列2个表格 在表格相应位置输入文本内容 新建样式表，并设置样式 所有字体为12px “《无题》、网络游戏、单机游戏”样式为字体为15px，粗体 “作者：李商隐”的样式为字体大小12px、粗体 “魔兽争霸”、“极品飞车”的样式为字体颜色为红色 “魔兽世界”、“问道”的样式为字体隶书 诗词第一句和最后一句字体颜色为蓝色 实验案例二：设置页面样式3-2 学员练习 新建HTML文档，在页面中插入的表格 新建样式表，并设置样式 保存页面，在浏览器中浏览 实验案例二：设置页面样式3-3 50分钟完成 * * * 样式表可以实现内容与样式的分离 说明有哪些好处 * * ID选择器用于修饰某个指定的页面标签，这些样式是对应ID标识的HTML标签所独占的；而类选择器是定义某类样式让多个HTML元素共享，这些样式是可以共享和代码复用的。 * * 样式表包含内嵌和外部样式表 style标签与链接外部样式表的link标签的先后顺序决定样式 链接多个外部样式表时link标签的先后顺序决定样式 * 复合内容中的超链接内容，教员选择进行讲解，如果说明则简要说明即可，后期课程会详细讲解。 a:link：超链接的普通样式，在浏览器中正常显示的样式； a:hover：当鼠标经过或放到超链接上时应用的样式； a:visited：访问过的超链接的显示样式； a:active：在超链接上点击时，超链接的样式； * * * * * * * 使用哪种选择器见书中内容 * B e n e t BENET 4.0 B e n e t BENET 4.0 */32 BENET 4.0 B e n e t BENET 4.0 */35 B e n e t BENET 4.0 */35 第六章 层叠样式表基础 —— 理论部分 表单的基本语法？ 表单元素包括哪些？语法分别是什么？ 表单中只读和禁用对应的属性是什么？ 创建一个登录界面需要哪些表单元素？ iframe框架的基本语法？ 课程回顾 了解CSS样式表分类 理解CSS选择器 掌握CSS的基本语法 技能展示 本章结构 CSS基本语法 使用Dreamweaver创建CSS样式表 外部CSS样式表的创建 基本结构 选择器的分类 CSS样式表分类 层叠样式表基础 内部CSS样式表的创建 各种方式CSS样式的优先级 为什么使用CSS样式表 层叠样式表 CSS：Cascading Style Sheet 一种标记语言，不需要编译，可以直接由浏览器执行 主要用于布局和美化网页 什么是CSS样式表 实现内容和样式的分离，便于团队开发 为什么使用CSS样式表3-1 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 实现样式复用，提高开发效率 为什么使用CSS样式表3-2 同一网站共用同一样式，确保网站统一的风格 页面的精确控制，实现精美、复杂页面 更利于有哪些信誉好的足球投注网站引擎的有哪些信誉好的足球投注网站 内容和样式分离，减少Web页面代码量 Web页面内容结构更加突出 为什么使用CSS样式表3-3 外观美化 布局、定位 CSS的用途 无CSS样式表 有CSS样式表 CSS基本语法 CSS代码规范 代码字母小写 使用“/*注释内容*/”添加必要的注释 style type=text/css li { color:red; font-size:30px; font-family:隶书; } /style head style type=text/css 选择器（即修饰对象）{ 对象的属性1: 属性值1; 对象的属性2: 属性值2; } /style /head CSS基本语法 style标签声明CSS代码部分 多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值 选择器 样式规则 内部样式表 行内样式 在HTML标签中直接使用style属性设置样式 嵌入样式 也称内嵌样