web层叠样式表(1)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6
样式规则
样式规则
样式规则
选择器 属性
值
body
{ background-color:#FF0000; }
用冒号隔开
CSS 选择器 (selector)的功能：就是从网页的所有元素 为了实现更精确地控制网页格式，定义了比 HTML 中选择目标元素，将声明的样式作用于目标元素。 更多的属性 。
7
19
通用选择器
指定一个样式说明类能够作用于多种不同类型标
签的内容； 用一个通用类完成，这种选择器的名称中不包含 标签名称，但是类的名称以句点开头； .one {font-size:24pt;}
20
id选择器
在HTML文档中需要利用id属性，id属性值是唯
一的。 将样式表的作用范围限定为某个特定的元素； 格式： #section1 {font-size:24pt;} <h2 id=“section1”>…</h2>
23
伪类——举例
<style type="text/css">
样式规则顺序： LoVe HAte
未访问的链接 样式
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; }
17
类选择器（1）
如果仅使用标签选择器，下面的页面能实现
吗？Βιβλιοθήκη Baidu
两个段落的文本颜色不一样
18
类选择器（2）
为同一个元素指定不同的样式说明； 在文档主体中，通过标签的class属性来指定相
应的样式类； 给定一个类名称，然后将其附加到某个元素名称 的后面，两者之间采用句点隔开； p.one{font-size:24pt;} p.two{font-size:30pt;}
选择器
15
3. 选择器格式
简单的选择器 类选择器 通用选择器 id选择器
通配选择器
伪类
16
简单的选择器（标签选择器）
简单的选择器是直接将HTML标签作为选择器。 标签选择器一旦声明，那么网页上所有使用该标签的元 素样式都是一样的。 单个标签元素的名称； p {font-size:24pt;} 一组元素名称的集合，各元素之间用“，”隔开； h2,h3 {font-size:28pt;} 利用空格来分隔元素名称，可限定于文档中某个位置 上的元素。 body p strong{font-size:28pt;}
10
1.简介(2)
CSS的语法简单； CSS1.0由W3C于1996年开发； CSS2.0由W3C于1998年中期发布； 层叠，指的是HTML的样式表可以在三个层次上
进行定义，按照由底层到高层的顺序分别为，内 联样式表、文档样式表、外部样式表，较底层的 样式表能够覆盖较高层的样式表，以此来定义文 档的样式；
层叠样式表
本章目标
掌握CSS的基本结构； 能够灵活运用CSS选择器； 掌握CSS的各种属性；
2
为什么要学习CSS?
3
认识CSS
举个最简单的例子。
<body bgcolor="#FFCCFF"> <p><font face=“宋体" color="#0000ff" size=“8"> 淘宝网的使命是“没有淘不到的宝贝，没有卖不出的 宝贝”。</font> </p> </body>
文档所有内容的呈现提供统一样式； 文档样式说明格式：
作为一个<style>元素的内容出现。 位于文档头部（<head>）。 <style type=“text/css”> rule_list </style> type属性向浏览器指定了样式说明的类型；
举例
14
2. 样式表的层次和样式说明格式(4)
举例
12
2. 样式表的层次和样式说明格式(2)
内联样式表的缺点：
这种应用方式比较琐碎，分布在文档中的不同
位置； 行内样式与内容混合在一起，以不同的语言进 行描述； 在XHTML1.1中W3C不建议使用行内样式表；
13
2. 样式表的层次和样式说明格式(3)
文档样式表：能够对文档的整个主体起作用，为
内容和格式混在一起
演示
4
认识CSS
<html> <head> <title>认识CSS</title>
<style type="text/css"> body { background-color: #FFCCFF; } p{ font-family: "宋体"; font-size: 14px; CSS样式表,专注显示格式 color: #FF0000; } </style> 专注内容
rule_list中的每一条样式规则分为两部分：
一是选择器：指定受影响的标签； 二是属性/值对；
rule_list中的每一条样式规则的格式：
selector{property_1:value_1;property_2:val
ue_2;…} h1{font-size:24pt;color:red;} 如果一个属性指定了多个值，那么这些值通 常是通过空格进行分隔；
11
2. 样式表的层次和样式说明格式(1)
内联样式表：只作用于单个标签的内容；
行内样式说明位于开始标签中，只对该标签中
的内容起作用； 行内样式说明格式： 作为标签的style属性值出现的； 通用格式： style=“property_1:value_1;property_2:val ue_2;…;”
样式规则中如何声明多个属性
p{ font-family: "宋体"; font-size: 14px; color: #FF0000; }
文本颜色 字体名称 字号大小
各个属性之间要用分号隔开； 建议每行只描述一个属性；
CSS一般不区分大小写，建议小写；
8
本讲内容
3.1 CSS简介 3.2 样式表的层次 3.3 样式说明格式 3.4 选择器格式
</head> <body>
<p>淘宝网的使命是“没有淘不到的宝贝，没有卖不 出的宝贝”。</p>
</body> </html>
5
CSS的基本结构
<style type="text/css"> body { background-color: #FFCCFF; }
p{ font-family: "宋体"; font-size: 14px; color: #FF0000; } </style>
3.5 属性值的格式
3.6 字体属性
9
1.简介(1)
层叠样式表，Cascading Style Sheets，简称为
CSS，是W3C为弥补HTML在显示属性制定上的 不足而制定的一套扩展样式标准； 引入CSS的目的就是把Web页面的内容和样式分 离，网页的内容结构用HTML的标签定义， 网页 的外观样式用CSS定义； CSS还允许将样式定义单独存储于样式文件中， 便于多个HTML文件共享样式定义； 一个HTML文件可以引用多个CSS样式文件中的 样式定义；
为某个标签 指定的id属 性的值
21
通配选择器
通配选择器用*表示，它的样式可应用于文档中
的所有元素； 格式： * {color：red；}
22
伪类
网页中的链接文字的默认效果是由IE浏览器定义
的。 使用伪类可以对链接在不同状态下定义不同的样 式效果。 伪类是一种当某种事件发生时才能够发挥作用的 样式，如，link、visited、hover、active和 focus；
</style>
24
课堂练习
使用样式表修饰网页，要求写出样式表。
<h2>标签 <h3>标签 <p>标签
字号14px，颜色： 蓝色，首行缩进2 个字符
查看源代码
25
样式规则
样式规则
样式规则
选择器 属性
值
body
{ background-color:#FF0000; }
用冒号隔开
CSS 选择器 (selector)的功能：就是从网页的所有元素 为了实现更精确地控制网页格式，定义了比 HTML 中选择目标元素，将声明的样式作用于目标元素。 更多的属性 。
7
19
通用选择器
指定一个样式说明类能够作用于多种不同类型标
签的内容； 用一个通用类完成，这种选择器的名称中不包含 标签名称，但是类的名称以句点开头； .one {font-size:24pt;}
20
id选择器
在HTML文档中需要利用id属性，id属性值是唯
一的。 将样式表的作用范围限定为某个特定的元素； 格式： #section1 {font-size:24pt;} <h2 id=“section1”>…</h2>
23
伪类——举例
<style type="text/css">
样式规则顺序： LoVe HAte
未访问的链接 样式
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; }
17
类选择器（1）
如果仅使用标签选择器，下面的页面能实现
吗？Βιβλιοθήκη Baidu
两个段落的文本颜色不一样
18
类选择器（2）
为同一个元素指定不同的样式说明； 在文档主体中，通过标签的class属性来指定相
应的样式类； 给定一个类名称，然后将其附加到某个元素名称 的后面，两者之间采用句点隔开； p.one{font-size:24pt;} p.two{font-size:30pt;}
选择器
15
3. 选择器格式
简单的选择器 类选择器 通用选择器 id选择器
通配选择器
伪类
16
简单的选择器（标签选择器）
简单的选择器是直接将HTML标签作为选择器。 标签选择器一旦声明，那么网页上所有使用该标签的元 素样式都是一样的。 单个标签元素的名称； p {font-size:24pt;} 一组元素名称的集合，各元素之间用“，”隔开； h2,h3 {font-size:28pt;} 利用空格来分隔元素名称，可限定于文档中某个位置 上的元素。 body p strong{font-size:28pt;}
10
1.简介(2)
CSS的语法简单； CSS1.0由W3C于1996年开发； CSS2.0由W3C于1998年中期发布； 层叠，指的是HTML的样式表可以在三个层次上
进行定义，按照由底层到高层的顺序分别为，内 联样式表、文档样式表、外部样式表，较底层的 样式表能够覆盖较高层的样式表，以此来定义文 档的样式；
层叠样式表
本章目标
掌握CSS的基本结构； 能够灵活运用CSS选择器； 掌握CSS的各种属性；
2
为什么要学习CSS?
3
认识CSS
举个最简单的例子。
<body bgcolor="#FFCCFF"> <p><font face=“宋体" color="#0000ff" size=“8"> 淘宝网的使命是“没有淘不到的宝贝，没有卖不出的 宝贝”。</font> </p> </body>
文档所有内容的呈现提供统一样式； 文档样式说明格式：
作为一个<style>元素的内容出现。 位于文档头部（<head>）。 <style type=“text/css”> rule_list </style> type属性向浏览器指定了样式说明的类型；
举例
14
2. 样式表的层次和样式说明格式(4)
举例
12
2. 样式表的层次和样式说明格式(2)
内联样式表的缺点：
这种应用方式比较琐碎，分布在文档中的不同
位置； 行内样式与内容混合在一起，以不同的语言进 行描述； 在XHTML1.1中W3C不建议使用行内样式表；
13
2. 样式表的层次和样式说明格式(3)
文档样式表：能够对文档的整个主体起作用，为
内容和格式混在一起
演示
4
认识CSS
<html> <head> <title>认识CSS</title>
<style type="text/css"> body { background-color: #FFCCFF; } p{ font-family: "宋体"; font-size: 14px; CSS样式表,专注显示格式 color: #FF0000; } </style> 专注内容
rule_list中的每一条样式规则分为两部分：
一是选择器：指定受影响的标签； 二是属性/值对；
rule_list中的每一条样式规则的格式：
selector{property_1:value_1;property_2:val
ue_2;…} h1{font-size:24pt;color:red;} 如果一个属性指定了多个值，那么这些值通 常是通过空格进行分隔；
11
2. 样式表的层次和样式说明格式(1)
内联样式表：只作用于单个标签的内容；
行内样式说明位于开始标签中，只对该标签中
的内容起作用； 行内样式说明格式： 作为标签的style属性值出现的； 通用格式： style=“property_1:value_1;property_2:val ue_2;…;”
样式规则中如何声明多个属性
p{ font-family: "宋体"; font-size: 14px; color: #FF0000; }
文本颜色 字体名称 字号大小
各个属性之间要用分号隔开； 建议每行只描述一个属性；
CSS一般不区分大小写，建议小写；
8
本讲内容
3.1 CSS简介 3.2 样式表的层次 3.3 样式说明格式 3.4 选择器格式
</head> <body>
<p>淘宝网的使命是“没有淘不到的宝贝，没有卖不 出的宝贝”。</p>
</body> </html>
5
CSS的基本结构
<style type="text/css"> body { background-color: #FFCCFF; }
p{ font-family: "宋体"; font-size: 14px; color: #FF0000; } </style>
3.5 属性值的格式
3.6 字体属性
9
1.简介(1)
层叠样式表，Cascading Style Sheets，简称为
CSS，是W3C为弥补HTML在显示属性制定上的 不足而制定的一套扩展样式标准； 引入CSS的目的就是把Web页面的内容和样式分 离，网页的内容结构用HTML的标签定义， 网页 的外观样式用CSS定义； CSS还允许将样式定义单独存储于样式文件中， 便于多个HTML文件共享样式定义； 一个HTML文件可以引用多个CSS样式文件中的 样式定义；
为某个标签 指定的id属 性的值
21
通配选择器
通配选择器用*表示，它的样式可应用于文档中
的所有元素； 格式： * {color：red；}
22
伪类
网页中的链接文字的默认效果是由IE浏览器定义
的。 使用伪类可以对链接在不同状态下定义不同的样 式效果。 伪类是一种当某种事件发生时才能够发挥作用的 样式，如，link、visited、hover、active和 focus；
</style>
24
课堂练习
使用样式表修饰网页，要求写出样式表。
<h2>标签 <h3>标签 <p>标签
字号14px，颜色： 蓝色，首行缩进2 个字符
查看源代码
25