所有html标记名都可以作为标记选择器吗,HTML5+CSS3网页设计基础 第三章 CSS入门（10页）-原创力文档...

第1页

第3章 CSS入门

本章概述

本章的学习目标

主要内容

第2页

本章概述

CSS在Web设计领域是一个突破，它为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，包括版式、颜色和大小等。CSS样式表可以将所有的样式声明统一存放，进行统一管理，也就是说，页面中显示的内容放在结构里，而修饰、美化放在样式里，做到结构(内容)与样式分开，这样，当页面使用不同的样式时，呈现出的效果是不一样的。W3C(万维网联盟)推荐使用CSS来完成表现。

第3页

本章的学习目标

理解CSS的定义、优点。

掌握CSS的定义与使用方法。

掌握CSS样式规则。

掌握CSS基础选择器，能够运用CSS选择器选择页面元素。

掌握CSS长度单位、百分比单位和色彩单位的使用

掌握CSS的层叠性和继承性。

理解CSS优先级，能够区分复合选择器权重的大小

第4页

主要内容

3. 1 CSS定义与使用

3. 2 CSS 选择器

3. 3 CSS属性单位

3. 4 CSS高级特性

3. 5 实训

3. 6 本章小结

第5页

3.1 CSS定义与使用

本节主要内容：

CSS概述

CSS定义和引用

3.1.1 CSS概述

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

同时CSS非常常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。

如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。HTML与CSS的关系就像人的骨骼与衣服，通过更改CSS样式，可以轻松控制网页的表现样式。

第6页

第7页

3.1.2 CSS定义和引用

1.内联样式

内联样式就是在元素标签内使用style属性，style属性值可以包含任何CSS样式声明。内联样式的格式为:

需要说明的是，内联样式由于将表现和内容混在一起，不符合Web标准，所以要慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。

参考示例：3-1-1.html

第8页

3.1.2 CSS定义和引用

2. 内部样式表

内部样式表是写在HTML的

里面的，只对所在的网页有效。

(1)内部样式表的格式为：

选择符1{属性：属性值；属性：属性值…} /*注释内容*/

选择符2{属性：属性值；属性：属性值…}

选择符n{属性：属性值；属性：属性值…}

第9页

3.1.2 CSS定义和引用

(2)组合选择符的格式

除了在…内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦，其格式为：

选择符1，选择符2，…，选择符n

{属性：属性值；属性：属性值…}

参考示例：3-1-2.html

第10页

3.1.2 CSS定义和引用

3.外部样式表

多个页面需要应用相同样式时，应该使用外部样式表。外部样式表管理整个Web页的外观。Web开发时，首先对整个外观定义一个CSS文件(扩展名为·css)，当页面需要使用样式时，通过标签链接外部样式表文件。使用外部样式表可以实现改变一个文件就能改变整个站点外观的目的。

第11页

3.1.2 CSS定义和引用

(1)用标签链接样式表文件

标签必须放到页面的

…标签对内。其格式为:

…

…

第12页

3.1.2 CSS定义和引用

(2)样式表文件的格式

样式表文件可以用任何文本编辑器(如记事本)打开并编辑，一般样式表文件的扩展名为.css。样式表文件的内容是定义的样式表，不包含HTML标签。样式表文件的格式为：

选择符1{属性：属性值；属性：属性值…} /*注释内容*/

选择符2{属性：属性值；属性：属性值…}

…

选择符n{属性：属性值；属性：属性值…}

参考示例：3-1-3.html

第13页

3.2 CSS 选择器

本节主要内容：

案例分析

CSS样式规则

CSS基础选择器

案例制作

第14页

3.2.1 案例分析

【案例展示】使用链入外部样式表的方法制作企业简介页面。

【知识要点】常用的CSS选择符、网页中引用CSS。

【学习目标】掌握CSS