html5+css3课件-4
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
➢ CSS2.1。2004年2月，CSS2.1正式推出，它在CSS2的 基础上略微做了改动，删除了许多诸如text-shadow等 不被浏览器所支持的属性。现在使用的CSS基本上都是 在1998年推出的CSS2的基础上发展而来的。
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
第3章 CSS基础
返 回
本章小结
本 章 主 要 介 绍 了 CSS 的 基 本 概 念 及 发 展 史 、 CSS3的新功能，以及目前主流浏览器对CSS3的支 持，可以对CSS3有一个初步的理解。详细讲解了 CSS的各类选择符，包括基础选择符、伪类选择符、 层次选择符、选择符组合属性选择符；以及在 HTML文档中如何使用CSS。通过本章的学习，为后 继熟练使用CSS打下坚实的基础。
第3章 CSS基础
返 回
3.1 CSS概述
★ 3.1.1什么是CSS ★ 3.1.2 CSS发展史 ★ 3.1.3 CSS3简介
第3章 CSS基础
返 回
3.1.1什么是CSS
CSS（Cascading Style Sheet，层叠样式表或级联样式 表），简称样式表。
CSS样式表的功能：
（1）控制页面中文字的字体、颜色、大小、间距、风格及 位置。 （2）设置文本块的行高、缩进、及具有三维效果的边框。 （3）可以方便地定位网页中的任何元素，设置不同的背景 颜色和背景图片。 （4）精确控制网页中各元素的位置。 （5）与DIV元素结合布局网页。
5．属性选择符
属性选择符可以为拥有指定属性的HTML元素设置样式， 而不仅限于class和id属性。属性选择符在CSS2中就被引 入，其主要作用是对带有属性的HTML元素设置样式。
语法：
E[attr]
描述：E[attr]是最简单的一种，用来选择具有属性attr的E元素，
而不论这个属性值是什么。其中E可以省略，表示选择定义了attr属 性的任意类型元素
第3章 CSS基础
返 回
3.1.2 CSS发展史
CSS的发展历史分为4个阶段:
➢ CSS1。1996年12月，CSS1正式推出，在这个版本中， 已经包含了font的相关属性、颜色与背景的相关属性、 box的相关属性等。
➢ CSS2。1998年5月，CSS2正式推出，在这个版本中开 始使用样式表结构。
返 回
3.2 CSS的组成
★ 3.2.1 基本语法规则 ★ 3.2.2 选择符的分类
第3章 CSS基础
返 回
3.2.1 基本语法规则
CSS规则由3个部分构成：选择符、属性和属性的取值。
语法：
选择符{属性1：属性值；属性2：属性值；}
描述：
（1）选择符是CSS的核心，可以是需要改变样式的HTML标记，将 HTML标记作为选择符定义后，则在HTML页面中该标记下的内容都会 按照CSS定义的规则显示在浏览器中。 （2）属性和值的组合称为声明，表示选择符中要改变的规则。
（5）:active，设置a对象在被用户激活（鼠标单 击与释放之间发生的事件）时的样式。
（6）:focus，设置元素获取焦点时的样式。
（7）:lang，设置对象使用特殊语言的内容的样 式。
第3章 CSS基础
返 回
3.2.2 选择符的分类
例如：
a:link{color:#000000; text-decoration:none;}
例如 ：
p{font:12px; color:#000; line-height:18px;} 定义网页中所有p元素中的文字大小、颜色和行高，用 于声明页面中所有<p>标签的样式。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（3）类选择符
使用类选择符，把相同的元素分类定义成不同的样式。 在定义类选择符时，在自定义名称的前面需要加一个点 号“.”。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（4）ID选择符
ID选择符用来对某个单一元素定义，一个网页文件中只能 有一个标记使用某个ID选择符。
语法 ：
#idvalue{property:value;}
描述： idvalue是选择符名称，在定义名称的前面加一个“#”，
由HTML标记的id属性引用。id属性在文档中具有唯一性。 例如：
使用<link>标记引入外部样式；rel属性用于设置链 接关系；href用于设置链接的CSS文件的位置。
第3章 CSS基础
返 回
3.3.4 CSS优先级
（1）ID选择符优先级高于类选择符 （2）后面的样式覆盖前面的样式 （3）行内样式高于内部或外部样式
第3章 CSS基础
返 回
3.3.5 常用的CSS3属性前缀
例如 ：
.header{color:#ff0000; text-align:center;}
调用方法只需在标记内使用class属性进行引用。
例如： <p class=”header”>类选择符</p>
由<p>标记的class属性引用类选择符。该<p>中的文字为 红色居中对齐。另外，类选择符也可以被其它标记多次引用。
#main{background-color:#ccc;} 调用方法：
<div id=”main”>id选择符</div>
第3章 CSS基础
返 回
3.2.2 选择符的分类
2．伪类选择符
伪类选择符与类选择符的区别是：类选择符可以自由命名，而 伪类选择符是CSS中已经定义好的选择符，不能随便命名和定 义。
语法： :伪类选择符{属性1:值; 属性2:值;}
第3章 CSS基础
返 回
3.2.2 选择符的分类
伪类包括：
（1）:first-child，设置元素的第一个子对象的样 式。
（2）:link，设置a对象未被访问前的样式。
（3）:vistited，设置a对象在其链接地址已被访问 过的样式。
（4）:hover，设置a对象在鼠标悬停时的样式。
a:vistited{color:#333333; text-decoration:none}
a:hover{color:#0000ff; textdecoration:underline;}
a:active{color:#666666; text-decoration:none;} 描述：
为了确保每次鼠标经过文本时的效果相同，建议在 定义样式时要按照a:link、a:vistited、a:hover 和:active的顺序依次编写，如a: hover必须位于 a:link和a:vistited之后才能生效，而a:active必须位 于a:hover之后才能生效。
第3章 CSS基础
返 回
3.2.2 选择符的分类
3．层次选择符
（1）包含选择符：是对某种元素包含关系定义的样式 （2）子选择符 子选择符只能选择某元素的子元素，子选择符使用大于号 “>”
第3章 CSS基础
返 回
3.2.2 选择符的分类
4．选择符组：为了简化代码，避免重复定义，可以将相同属性和
值的选择符组合起来书写，用逗号将各个选择符分开。
返 回
3.1.3 CSS3简介
CSS3新增功能： ➢ 强大的CSS3选择符 ➢ 轻松实现比如圆角，图片边框、文字阴影和盒阴影，过 渡，动画等效果。 ➢ 盒模型变化 ➢ CSS3支持更多的颜色和更广泛的颜色 ➢ 轻松定制个性化字体。 ➢ 可以对HTML元素进行旋转、缩放、倾斜、移动等。
第3章 CSS基础
第3章 CSS基础
返 回
3.3 在HTML中使用CSS的方法
★ 3.3.1 行内样式 ★ 3.3.2 内部样式 ★ 3.3.3 外部样式 ★ 3.3.4 CSS优先级
第3章 CSS基础
返 回
3.3.1 行内样式
➢ 行内样式是在HTML文档中使用CSS最简单、直观的方法， 它直接在HTML标记里设置样式规则，当做标记里的属 性。
CSS基础
2022/12/15
第3章 C1SS基础
返 回
本章要点 CSS的组成 HTML文档如何调用CSS CSS3简介
第3章 CSS基础
返 回
学习目标 理解CSS的语法规则 掌握选择符的使用 学会在HTML文档中使用CSS 初步了解CSS3
第3章 CSS基础
返 回
本章内容
1 CSS概述 2 CSS的组成 3 在HTML中使用CSS的方法
➢ 适用于网页内某一小段内容的显示格式，效果仅控制 该标记，对其它标记不起作用。
语法：
<标记名称 style=”属性:属性值;…..”>
第3章 CSS基础
返 回
3.3.2 内部样式
样式表嵌入到HTML文件的<head>…</head>区域内。并 将所有样式都书写在<style>元素里。在一定程度上可 以实现CSS样式与HTML代码分离。
例如： p{font-size:18px; font-family:”宋体”;}
p为选择符，介于“{}”中的所有内容为属性声明块。上述代码 表示了<p></p>标签内的所有文本的字体大小为18px，字体为宋 体。
第3章 CSS基础
返 回
3.2.2 选择符的分类
1．基础选择符
（1）通配符选择符（*） 语法：
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
第3章 CSS基础
返 回
本章小结
本 章 主 要 介 绍 了 CSS 的 基 本 概 念 及 发 展 史 、 CSS3的新功能，以及目前主流浏览器对CSS3的支 持，可以对CSS3有一个初步的理解。详细讲解了 CSS的各类选择符，包括基础选择符、伪类选择符、 层次选择符、选择符组合属性选择符；以及在 HTML文档中如何使用CSS。通过本章的学习，为后 继熟练使用CSS打下坚实的基础。
第3章 CSS基础
返 回
3.1 CSS概述
★ 3.1.1什么是CSS ★ 3.1.2 CSS发展史 ★ 3.1.3 CSS3简介
第3章 CSS基础
返 回
3.1.1什么是CSS
CSS（Cascading Style Sheet，层叠样式表或级联样式 表），简称样式表。
CSS样式表的功能：
（1）控制页面中文字的字体、颜色、大小、间距、风格及 位置。 （2）设置文本块的行高、缩进、及具有三维效果的边框。 （3）可以方便地定位网页中的任何元素，设置不同的背景 颜色和背景图片。 （4）精确控制网页中各元素的位置。 （5）与DIV元素结合布局网页。
5．属性选择符
属性选择符可以为拥有指定属性的HTML元素设置样式， 而不仅限于class和id属性。属性选择符在CSS2中就被引 入，其主要作用是对带有属性的HTML元素设置样式。
语法：
E[attr]
描述：E[attr]是最简单的一种，用来选择具有属性attr的E元素，
而不论这个属性值是什么。其中E可以省略，表示选择定义了attr属 性的任意类型元素
第3章 CSS基础
返 回
3.1.2 CSS发展史
CSS的发展历史分为4个阶段:
➢ CSS1。1996年12月，CSS1正式推出，在这个版本中， 已经包含了font的相关属性、颜色与背景的相关属性、 box的相关属性等。
➢ CSS2。1998年5月，CSS2正式推出，在这个版本中开 始使用样式表结构。
返 回
3.2 CSS的组成
★ 3.2.1 基本语法规则 ★ 3.2.2 选择符的分类
第3章 CSS基础
返 回
3.2.1 基本语法规则
CSS规则由3个部分构成：选择符、属性和属性的取值。
语法：
选择符{属性1：属性值；属性2：属性值；}
描述：
（1）选择符是CSS的核心，可以是需要改变样式的HTML标记，将 HTML标记作为选择符定义后，则在HTML页面中该标记下的内容都会 按照CSS定义的规则显示在浏览器中。 （2）属性和值的组合称为声明，表示选择符中要改变的规则。
（5）:active，设置a对象在被用户激活（鼠标单 击与释放之间发生的事件）时的样式。
（6）:focus，设置元素获取焦点时的样式。
（7）:lang，设置对象使用特殊语言的内容的样 式。
第3章 CSS基础
返 回
3.2.2 选择符的分类
例如：
a:link{color:#000000; text-decoration:none;}
例如 ：
p{font:12px; color:#000; line-height:18px;} 定义网页中所有p元素中的文字大小、颜色和行高，用 于声明页面中所有<p>标签的样式。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（3）类选择符
使用类选择符，把相同的元素分类定义成不同的样式。 在定义类选择符时，在自定义名称的前面需要加一个点 号“.”。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（4）ID选择符
ID选择符用来对某个单一元素定义，一个网页文件中只能 有一个标记使用某个ID选择符。
语法 ：
#idvalue{property:value;}
描述： idvalue是选择符名称，在定义名称的前面加一个“#”，
由HTML标记的id属性引用。id属性在文档中具有唯一性。 例如：
使用<link>标记引入外部样式；rel属性用于设置链 接关系；href用于设置链接的CSS文件的位置。
第3章 CSS基础
返 回
3.3.4 CSS优先级
（1）ID选择符优先级高于类选择符 （2）后面的样式覆盖前面的样式 （3）行内样式高于内部或外部样式
第3章 CSS基础
返 回
3.3.5 常用的CSS3属性前缀
例如 ：
.header{color:#ff0000; text-align:center;}
调用方法只需在标记内使用class属性进行引用。
例如： <p class=”header”>类选择符</p>
由<p>标记的class属性引用类选择符。该<p>中的文字为 红色居中对齐。另外，类选择符也可以被其它标记多次引用。
#main{background-color:#ccc;} 调用方法：
<div id=”main”>id选择符</div>
第3章 CSS基础
返 回
3.2.2 选择符的分类
2．伪类选择符
伪类选择符与类选择符的区别是：类选择符可以自由命名，而 伪类选择符是CSS中已经定义好的选择符，不能随便命名和定 义。
语法： :伪类选择符{属性1:值; 属性2:值;}
第3章 CSS基础
返 回
3.2.2 选择符的分类
伪类包括：
（1）:first-child，设置元素的第一个子对象的样 式。
（2）:link，设置a对象未被访问前的样式。
（3）:vistited，设置a对象在其链接地址已被访问 过的样式。
（4）:hover，设置a对象在鼠标悬停时的样式。
a:vistited{color:#333333; text-decoration:none}
a:hover{color:#0000ff; textdecoration:underline;}
a:active{color:#666666; text-decoration:none;} 描述：
为了确保每次鼠标经过文本时的效果相同，建议在 定义样式时要按照a:link、a:vistited、a:hover 和:active的顺序依次编写，如a: hover必须位于 a:link和a:vistited之后才能生效，而a:active必须位 于a:hover之后才能生效。
第3章 CSS基础
返 回
3.2.2 选择符的分类
3．层次选择符
（1）包含选择符：是对某种元素包含关系定义的样式 （2）子选择符 子选择符只能选择某元素的子元素，子选择符使用大于号 “>”
第3章 CSS基础
返 回
3.2.2 选择符的分类
4．选择符组：为了简化代码，避免重复定义，可以将相同属性和
值的选择符组合起来书写，用逗号将各个选择符分开。
返 回
3.1.3 CSS3简介
CSS3新增功能： ➢ 强大的CSS3选择符 ➢ 轻松实现比如圆角，图片边框、文字阴影和盒阴影，过 渡，动画等效果。 ➢ 盒模型变化 ➢ CSS3支持更多的颜色和更广泛的颜色 ➢ 轻松定制个性化字体。 ➢ 可以对HTML元素进行旋转、缩放、倾斜、移动等。
第3章 CSS基础
第3章 CSS基础
返 回
3.3 在HTML中使用CSS的方法
★ 3.3.1 行内样式 ★ 3.3.2 内部样式 ★ 3.3.3 外部样式 ★ 3.3.4 CSS优先级
第3章 CSS基础
返 回
3.3.1 行内样式
➢ 行内样式是在HTML文档中使用CSS最简单、直观的方法， 它直接在HTML标记里设置样式规则，当做标记里的属 性。
CSS基础
2022/12/15
第3章 C1SS基础
返 回
本章要点 CSS的组成 HTML文档如何调用CSS CSS3简介
第3章 CSS基础
返 回
学习目标 理解CSS的语法规则 掌握选择符的使用 学会在HTML文档中使用CSS 初步了解CSS3
第3章 CSS基础
返 回
本章内容
1 CSS概述 2 CSS的组成 3 在HTML中使用CSS的方法
➢ 适用于网页内某一小段内容的显示格式，效果仅控制 该标记，对其它标记不起作用。
语法：
<标记名称 style=”属性:属性值;…..”>
第3章 CSS基础
返 回
3.3.2 内部样式
样式表嵌入到HTML文件的<head>…</head>区域内。并 将所有样式都书写在<style>元素里。在一定程度上可 以实现CSS样式与HTML代码分离。
例如： p{font-size:18px; font-family:”宋体”;}
p为选择符，介于“{}”中的所有内容为属性声明块。上述代码 表示了<p></p>标签内的所有文本的字体大小为18px，字体为宋 体。
第3章 CSS基础
返 回
3.2.2 选择符的分类
1．基础选择符
（1）通配符选择符（*） 语法：