第3章 初识CSS3电子课件.pptx

第3章初识CSS3《HTML5+CSS3网页设计与制作（第2版）》

学习目标/Target掌握CSS样式的引入方式，能够在网页中引入CSS样式了解CSS3的优势，能够阐述CSS3的优势熟悉CSS3样式规则，能够按照CSS样式规则正确编写CSS样式代码了解结构与表现分离的含义，能够阐述结构与表现分离的作用掌握CSS基础选择器的用法，能够使用CSS基础选择器设置不同的网页样式

学习目标/Target掌握CSS复合选择器的用法，能够使用CSS复合选择器设置不同的网页样式熟悉CSS层叠性和继承性，能够运用CSS的层叠性和继承性优化代码结构掌握CSS文本样式属性的用法，能够在网页中设置字体样式属性和文本外观属性熟悉CSS优先级规则，能够区分复合选择器权重的大小

章节概述/Summary随着网页制作技术的不断发展，HTML5属性样式的简单应用已经无法满足网页设计的需求。但使用CSS能够在不改变原有HTML结构的情况下，实现更加丰富的样式效果。例如更多样的字体、更绚丽的图形和动画等，这极大地满足了网页设计的需求。本章主要讲解CSS3的基础知识。

目录/Contents010203结构与表现分离CSS3的优势CSS核心基础04设置文本样式

目录/Contents0506CSS核心进阶阶段案例——制作活动通知页面

结构与表现分离3.1

3.1结构与表现分离什么是结构与表现分离？

3.1结构与表现分离结构与表现相分离是指在网页设计中，HTML标签只负责定义网页的结构、内容和语义，并不涉及具体的样式；而所有的样式设置则交由CSS来完成。

3.1结构与表现分离如今，大多数网页开发都遵循Web标准，这意味着需要使用HTML代码编写网页的结构和内容，使用CSS来控制网页的布局以及文本或图片的显示样式。可以将HTML和CSS的关系比作人的身体和衣服。就像通过穿上不同的衣服可以改变人的外在形象一样，通过更改CSS样式，也可以轻松地控制网页的外观样式。

CSS3的优势3.2

3.2CSS3的优势CSS3是CSS的最新版本，它在旧版本CSS的基础上增加了许多强大的新功能，可帮助开发人员解决实际问题。使用CSS3可以设计出炫酷、美观的网页，并提升网页的性能。相对于旧版本CSS，CSS3最突出的优势主要体现在节约成本和提高性能两方面，本节将做具体介绍。

3.2CSS3的优势节约成本提高性能CSS3中不再需要JavaScript脚本或Flash代码来实现动画效果。网页设计者不再需要花费大量时间编写代码，这种简化的方式极大地节约了开发成本。由于CSS3的功能增强，可以更少地依赖图片和脚本来创建图形化网站。在进行网页设计时，减少标签的嵌套和图片的使用数量，可以提高网页的加载速度。

CSS核心基础3.3

3.3CSS核心基础掌握CSS基础知识是学习CSS3的基石。本节将详细介绍CSS的基础知识，包括CSS样式规则、引入CSS样式以及CSS基础选择器。

3.3.1CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}在上面的样式规则中，选择器用于指定需要改变样式的HTML标签；大括号内部是一条或多条声明，每条声明由一对属性和属性值组成，属性和属性值以“键值对”的形式出现。

3.3.1CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}

3.3.1CSS样式规则值得一提的是，在编写CSS样式代码时，除了要遵循CSS样式规则外，还必须注意CSS代码结构的特点。CSS代码结构具有以下特点。CSS样式中的选择器严格区分大小写，而声明不区分大小写。若有多个声明，则必须用英文分号“;”隔开，最后一个声明后的分号可以省略，但是为了便于增加新声明最好保留。如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文引号。在编写CSS代码时，为了增强代码的可读性，可使用注释语句进行介绍说明。CSS代码中的空格是不被解析的，大括号及分号前后的空格可有可无。

3.3.2引入CSS样式引入CSS样式表的方式有哪些？

3.3.2引入CSS样式行内式也称为内联样式，该方式通过HTML标签的style属性直接在标签中设置CSS样式，其基本语法格式如下:行内式行内式内部式外部式导入式标签名style=属性1:属性值1;属性2:属性值2;属性3:属性值3;内容/标签名

3.3.2引入CSS样式行内式内部式外部式导入式内嵌式是指将CSS代码使用style标签定义。style标签通常写在head标签中，其基本语法格式如下:内部式style选择器{属性1:属性值1;属