【CSS3】第3章 CSS3入门
学习目标
-
了解CSS的功能和作用，能够列举CSS的应用示例。
-
熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系
-
掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。
-
掌握CSS样式表的引入方式，能够在网页中引入CSS样式。
-
掌握CSS基础选择器的用法，能够使用CSS基础选择器设置差异化的网页样式。
-
掌握字体样式属性的用法，能够在网页中设置不同的字体样式。
-
掌握文本外观属性的用法，能够在网页中设置不同的文本样式。
-
熟悉列表样式属性的用法，能够清除网页中默认的列表项目符号。
-
了解CSS层叠性和继承性的特点，能够运用CSS层叠性和继承性优化网页代码结构。
-
掌握CSS优先级的特点，能够对CSS基础选择器进行优先级排序。
随着网页制作技术的不断发展，仅仅依靠HTML属性设置的样式已经无法满足网页设计的需求。CSS能够在不改变原有HTML结构的情况下实现更加丰富的样式效果，例如更多样的字体、更绚丽的图形动画等，这极大地满足了网页设计的需求。本章将主要讲解CSS3的基础知识。
3.1 CSS概述
3.1.1 认识CSS
CSS以HTML为基础，提供了丰富的样式效果，例如，字体、颜色、背景的控制以及网页整体的布局和排版等。
CSS非常灵活，既可以嵌入在HTML文件中，也可以是一个独立的外部文件。如果是独立的文件，则必须以.css为后缀名。
3.1.2 CSS的发展历史
20世纪90年代初，HTML语言的诞生，各种形式的修饰样式也随之出现。CSS发展至今主要出现了4个版本。
3.2 CSS基础
3.2.1 CSS样式规则
要想熟练地使用CSS对网页进行修饰，需要遵循CSS样式规则。
CSS样式规则具体格式:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。
h1：表示CSS样式作用的HTML对象为
标签。
CSS代码结构的特点:
CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般采用小写书写选择器、声明。
多个声明之间必须用英文分号隔开，最后一个声明后的英文分号可以省略，但是为了便于增加新样式最好保留最后一个声明后的英文分号。
如果属性值由多个单词组成且中间包含空格，则必须为这个属性值添加英文引号。
p{font-family:"Times New Roman";}
可使用注释语句对CSS代码进行注释。CSS代码注释也不会显示在浏览器窗口中。
p{font-family:"Times New Roman";}
/* 这是CSS注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中 */
在CSS代码中空格是不被解析的，大括号以及分号前后的空格可有可无。因此可以使用Tab键、回车键对CSS代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。
h1{
color:green; /* 定义颜色属性 */
font-size:14px; /* 定义字号属性 */
}
CSS代码的属性值和单位之间是不允许出现空格的，否则浏览器解析网页代码时会出错。
3.2.2 引入CSS样式表
要想使用CSS修饰网页，就需要在HTML文件中引入CSS样式表。引入CSS样式表的方式有4种，分别为行内式、内嵌式、链入式和导入式。
1.行内式
行内式也被称为内联样式，是通过标签的style属性来设置标签的样式。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容
行内式
古之学者必有师。师者，所以传道受业解惑也 。
2.内嵌式
内嵌式是将CSS代码集中写在HTML文件的
头部标签中，并且用《劝学》片段
青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，以为轮，其曲中规。虽有槁暴，不复挺者，使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。