第五章-如何使用CSS美化网页.pptxVIP

如何使用CSS美化网页教学准备任务一 HTML基础├HTML文档的基本结构├设置页面属性├设置文本段落属性任务二 用CSS美化网页├页面样式├文本样式├段落样式├超链接样式├图像样式任务三 管理CSS样式├修改CSS样式├应用外部样式表├删除CSS样式任务四 CSS简单特效├图像特效├鼠标特效素材：素材\项目5\eg\效果：素材\项目5\fina\ CSS是层叠样式表 （Cascading Style Sheets）的简称，是一系列格式设置规则。 它的主要作用有：（1）更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置；（2）更加灵活的设置一段文本的行高、缩进，并可以加入各种边框效果；（3）方便的为网页中的任何元素设置不同的背景颜色和背景图像；（4）精确的控制网页中各元素的位置；（5）可为网页中的元素设置各种过滤器，设置各种特效；（6）可与脚本语言结合，从而产生各种动态效果；（7）可将页面的内容与表示形式分离开，进行统一控制和管理。任务一： HTML基础活动1 HTML文档的基本结构活动2设置页面属性活动3设置文本段落属性知识延伸1. HTML基础知识：HTML文档的基本结构为：HTML HEAD TITLE网页标题/TITLE !-- 注释-- /HEAD BODY 网页正文内容 /BODY /HTML文档标签 首部标签 网页标题注释标签 首部标签 正文标签正文标签文档标签 知识延伸2. 本任务中的HTML标签：小试身手1. 用编辑HTML源代码的方式，设置“prff.html”的页面上、下、左、右边距均为0，背景颜色为#FFF9F4，并保存文件名为“prffh.html”；2. 用编辑HTML源代码的方式，仿照“活动3”完成 “lxjjh.html”和“prffh.html”页面其他文本段落的设置。项目5 用CSS美化网页任务二：用CSS美化网页活动1 页面样式活动2 文本样式活动3 段落样式活动4 超链接样式活动5 图像样式知识延伸1. CSS样式表：知识延伸2. CSS样式类型： （1）自定义 CSS 样式（类样式）：由用户命名，一般都是由符号“.”表示，可以应用于任何标签；（2）重定义HTML标签（标签样式）：将原有的HTML标签重新定义，给原有的标签赋予新的样式； （3）ID、伪类选择器（高级样式）：允许用户创建用于指定标签组合的样式，常用于设置超链接，也可创建ID，但ID在网页中只能使用一次，由于具有唯一的特性，常用于脚本，由符号“#”表示。知识延伸3. 超链接的CSS样式： a:link：初始状态的超链接；a:hover：鼠标移到超链接上的状态；a:active：超链接被激活时的状态，即在超链接上按下鼠标时的状态；a:visited：超链接被访问后的状态。 将四种状态排列顺序为 a:link- a:visited - a:hover - a:active。就能够保证浏览时互不影响，正常显示。知识延伸4. CSS规则定义的8种类型： （1）“类型”：定义 CSS 样式的基本字体和类型设置。知识延伸4. CSS规则定义的8种类型： （2）“背景”：可以对 Web 页面中的任何元素应用背景属性。知识延伸4. CSS规则定义的8种类型： （3）“区块”：可以定义标签和属性的间距和对齐设置。知识延伸4. CSS规则定义的8种类型： （4）“方框”：可以为控制元素在页面上的放置方式的标签和属性定义设置。知识延伸4. CSS规则定义的8种类型： （5）“边框”：可以定义元素周围的边框的设置（如宽度、颜色和样式）知识延伸4. CSS规则定义的8种类型： （6）“列表”：为列表标签定义列表设置（如项目符号大小和类型）知识延伸4. CSS规则定义的8种类型： （7）“定位”：使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。知识延伸4. CSS规则定义的8种类型： （8）“扩展”：可以为控制元素在页面上的放置方式的标签和属性定义设置。小试身手1. 打开“prff.html”页面，创建一个外部样式表5a.css，创建body标签样式，设置页面的上、下、左、右边距均为0，背景颜色为#FFF9F4；2. 创建td和h1标签样式分别设置页面文本为宋体12像素；标题为宋体14像素，颜色#660000；3. 创建a:link、a:hove、a:active、a:visited高级样式，设置页面上有超链接的文本是绿色无下划线，鼠标移上去后文本变为大红色出现下划线，鼠标点击的时候文本是黑色，点击之后的文本恢复到绿色无下划线的状态，调整超链接样式先后顺序到不影响浏览效果状态；4. 创建一个仅对该文档的自定义样式.img2，将“prff.html”页面上的图像“lx3.jpg”和“lx5.jpg”设置