1、如何使用CSS美化网页,任务一 HTML基础 HTML文档的基本结构 设置页面属性 设置文本段落属性 任务二 用CSS美化网页 页面样式 文本样式 段落样式 超链接样式 图像样式 任务三 管理CSS样式 修改CSS样式 应用外部样式表 删除CSS样式 任务四 CSS简单特效 图像特效 鼠标特效,素材：素材项目5eg 效果：素材项目5fina,CSS是层叠样式表 （Cascading Style Sheets）的简称，是一系列格式设置规则。它的主要作用有： （1）更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置； （2）更加灵活的设置一段文本的行高、缩进，并可以加入各种边框效果； （
2、3）方便的为网页中的任何元素设置不同的背景颜色和背景图像； （4）精确的控制网页中各元素的位置； （5）可为网页中的元素设置各种过滤器，设置各种特效； （6）可与脚本语言结合，从而产生各种动态效果； （7）可将页面的内容与表示形式分离开，进行统一控制和管理。,活动1 HTML文档的基本结构活动2 设置页面属性活动3 设置文本段落属性,任务一： HTML基础,HTML文档的基本结构为：网页标题网页正文内容,1. HTML基础知识：,知识延伸,文档标签,正文标签,首部标签,注释标签,首部标签,正文标签,文档标签,网页标题,2. 本任务中的HTML标签：,知识延伸,1. 用编辑HTML源代码的方式，
3、设置“prff.html”的页面上、下、左、右边距均为0，背景颜色为#FFF9F4，并保存文件名为“prffh.html”；2. 用编辑HTML源代码的方式，仿照“活动3”完成 “lxjjh.html”和“prffh.html”页面其他文本段落的设置。,小试身手,任务二：用CSS美化网页,活动1 页面样式活动2 文本样式活动3 段落样式活动4 超链接样式活动5 图像样式,项目5 用CSS美化网页,1. CSS样式表：,知识延伸,2. CSS样式类型：,（1）自定义 CSS 样式（类样式）：由用户命名，一般都是由符号“.”表示，可以应用于任何标签； （2）重定义HTML标签（标签样式）：将原有的
4、HTML标签重新定义，给原有的标签赋予新的样式； （3）ID、伪类选择器（高级样式）：允许用户创建用于指定标签组合的样式，常用于设置超链接，也可创建ID，但ID在网页中只能使用一次，由于具有唯一的特性，常用于脚本，由符号“#”表示。,知识延伸,3. 超链接的CSS样式：,a:link：初始状态的超链接； a:hover：鼠标移到超链接上的状态； a:active：超链接被激活时的状态，即在超链接上按下鼠标时的状态； a:visited：超链接被访问后的状态。,将四种状态排列顺序为 a:link- a:visited - a:hover - a:active。就能够保证浏览时互不影响，正常显示。
5、,知识延伸,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）“列表”：为
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
7、:active、a:visited高级样式，设置页面上有超链接的文本是绿色无下划线，鼠标移上去后文本变为大红色出现下划线，鼠标点击的时候文本是黑色，点击之后的文本恢复到绿色无下划线的状态，调整超链接样式先后顺序到不影响浏览效果状态； 4. 创建一个仅对该文档的自定义样式.img2，将“prff.html”页面上的图像“lx3.jpg”和“lx5.jpg”设置为宽180像素高150像素，边框为1像素的实线，颜色为灰色“#999999”。,小试身手,活动1 修改CSS样式活动2 应用外部样式表活动3 删除CSS样式,任务三：管理CSS样式,项目5 用CSS美化网页,1. CSS样式的3种组织形式：
8、,（1）内嵌CSS样式：只需在相应的HTML标签中根据给出的提示写入相应的CSS属性即可。（2）文档内部CSS样式：直接生成于网页的标签内，不生成文件，作用范围是本文档。如果用户需要定义只在站点内一个网页内使用的样式，则可以使用文档内部样式。（3）外部文件CSS样式：将一系列CSS样式存放在一个扩展名为“.css”的外部文件中，它实现了内容与形式的分离，便于管理，使用范围是整个站点。,知识延伸,1. 给“prff.html”页面链接外部样式表5.css；2. 修改自定义样式.img2，将“prff.html”页面上的图像“lx3.jpg”和“lx5.jpg”设置为宽180像素高150像素，边框
9、为5像素的实线，颜色为橘红色#FF9900。,小试身手,活动1 图像特效活动2 鼠标特效,任务四：CSS特效,项目5 用CSS美化网页,1. CSS样式的组合和嵌套：,（1）组合 在CSS样式中不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。例如，如下的代码：,可以写成,h1 color : red; h2 color : red; h3 color : red; h4 color : red; ,h1,h2,h3,h4 color: red; ,知识延伸,1. CSS样式的组合和嵌套：,（2）嵌套 在CSS中，没有必要使用过多的自定义类，有时可以指定在自定义类中的h
10、tml标签。进行嵌套使用。 例如，在本任务中，图像img标签在自定义的类样式td1的单元格下的超链接a标签中，所以我们可以嵌套这几个标签使用，中间用空格隔开： .td1 a img height: 90px;width: 120px; .td1 a:hover img filter: Gray; ,知识延伸,2. CSS滤镜：,知识延伸,1. 将index.html另存为indx1.html； 2. 新建自定义样式.td2设置为背景色#FBC88C，边框1像素白色实线，内边距5像素； 3. 应用样式td2到四个含有lx1.jpg、lx2.jpg、lx3.jpg、lx4.jpg的图像单元格上； 4. 新建有超链接的图像样式，原始状态为宽120像素、高80像素； 5. 鼠标移上去后图像样式为Invert “底片效果”； 6. 设置鼠标光标在图像上的样式为帮助样式。,小试身手,CSS是网页制作过程中普遍用到的技术，采用CSS的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。,归纳与小结,项目5 用CSS美化网页,项目实训,佰草网文坊,原始文件 素材项目5实训5eg 最终文件 素材项目5实训5final,下一节，布局对象使用,
