HTML-T5概览.ppt

第五章 使用CSS渲染网页 回顾 表单页面的基本结构？ 表单控件有哪些？ 本章案例 使用样式表渲染网页。 本章目标 认识CSS的基本结构 掌握CSS的文本属性和背景属性 CSS的选择器的灵活使用 预习检查 样式规则由哪几部分组成？ 样式表的选择器有哪几种？ 为什么要学习CSS 为什么学习CSS 认识CSS 举个最简单的例子，认识一下CSS。 认识CSS 小结 CSS到底能做什么？ CSS的特点是什么？ 如何学习CSS 学习CSS之前，要求有HTML的基本经验。 编写CSS的工具软件还是记事本。 CSS的基本结构 样式规则 样式规则中如何声明多个属性 各个属性之间要用分号隔开 建议每行只描述一个属性 CSS一般不区分大小写，建议小写 CSS的常用文本属性 文本属性主要包括：字体名称、字号大小、文本颜色、文本对齐方式、首行缩进等。 文本属性 背景属性 背景属性包括：背景颜色和背景图像，主要应用在 、 等元素上。 背景属性 课堂练习 使用样式表修饰网页，要求写出样式表。 选择器的不同用法 选择器的作用是什么？ 经常使用的选择器有以下几种： 标签选择器 类别选择器 ID选择器 群组选择器 派生选择器 标签选择器 标签选择器是直接将HTML标签作为选择器。 标签选择器一旦声明，那么网页上所有使用该标签的元素样式都是一样的。 为什么使用类别选择器 如果仅使用标签选择器，下面的页面能实现吗？ 类别选择器 类别选择器 文章的标题受到几个选择器的控制？ 文章的第一段受到几个选择器的控制？ 文章的第二段受到几个选择器的控制？ 类别选择器的特点 类别选择器的名称有什么特点？ 如何应用类别选择器？ ID选择器 ID选择器的使用方法与类别选择器基本相同。 不同之处在于ID选择器只能在HTML页面中使用一次。 在HTML文档中需要利用id属性，使用CSS中的ID选择器。 ID选择器 群组选择器 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。 派生选择器 派生选择器可以实现给一个元素里的子元素定义样式。 伪类 网页中的链接文字的默认效果是由IE浏览器定义的。 使用伪类可以对链接在不同状态下定义不同的样式效果。 伪类 总结 样式表是由什么组成的？ 样式规则的结构是什么？ 常用的选择器有哪几种？ 类别选择器的特点是什么？ 作业 P83 课后作业 style type text/css p b color:#ff0000; …… 我是粗体字 我也是粗体字 派生选择器 演示：链接的默认效果、使用伪类后的效果 style type text/css a:link text-decoration : underline; color : #900b09; a:visited text-decoration : none; color : #900b09; a:hover text-decoration : underline; color: #ff0000; a:active text-decoration : underline; color : #ff0000; 未访问的链接样式 被访问过的链接样式 鼠标悬浮时的链接样式 鼠标点击时的链接样式 样式规则顺序：LoVe HAte 提问 * 新龙教育 * * * 使用HTML和CSS设计商业网站 提问 案例演示 提问 演示：CSS简单示例 body bgcolor #FFCCFF font face 宋体 color #FF0000 size 2 淘宝网的使命是“没有淘不到的宝贝，没有卖不出的宝贝”。 内容和格式混在一起 认识CSS style type text/css body background-color: #FFCCFF; p font-family: 宋体; font-size: 14px; color: #FF0000; 淘宝网的使命是“没有淘不到的宝贝，没有卖不出的宝贝”。 CSS样式表,专注显示格式 专注内容 提问 style type text/css body background-color: #FFCCFF; p font-family: 宋体; font-size: 14px; color: #FF0000; 样式规则 样式规则 body background-color:#FF0000; 选择器 属性 值 用冒号隔开 选择器 selector 的功能：就是从网页的所有元素中选择目标元素，将声明的样式作用于目标元素。 CSS为了实现更精确地控制网页格式，定义了比HTML更多的属性 。 p font-family: 宋体; font-size: 14px; co