《Web前端开发技术（》课件T_第二章.pptxVIP

第2章CSS3基础;HTML设计时既关注页面的内容，又关注页面的格式，但随着页面内容越来越多，如果想通过设置HTML元素的属性来设置页面格式的话，页面将变得凌乱和复杂，这种情况下CSS被设计出来，用CSS来格式化HTML页面，使得页面的内容和格式进行了彻底分离，CSS现在已经发展到第3版本，简称CSS3。本章主要介绍CSS3的基础知识，包括CSS3概述、选择器、盒模型、样式、定位等内容。

;CSS(CascadingStyleSheet，层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（CascadingstyleSheetsLevel1）完成，成为w3c的推荐标准。1998年5月出版的CSS规范第二版。2001年5月W3C开始进行CSS3标准的制定,到目前为止该标准还没有最终定稿。;2.1.2CSS3的特点

1.丰富的样式定义

CSS3提供了丰富的文档样式外观，以及设置文本和背景属性的能力

2.易于使用和修改

CSS3可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS3文件中，以供HTML页面引用。;3.多页面应用

CSS3样式表理论上可以不属于任何页面文件，在任何页面文件中都可以将其引用。

4.层叠

简单地说，层叠就是对一个元素多次设置同一个样式，将使用最后一次设置的属性值。

5.页面压缩

样式的声明单独放到CSS3样式表中，多页面共享，则大大压缩单个页面的大小。;2.1.3CSS3的语法格式

CSS3由一条一条的规则组成，每条规则又由一个或多个选择器加一个或多条声明组成。每条声明则是由属性和属性值组成。属性和属性值之间由冒号隔开。声明部分用大括号{}包裹，每条声明之间使用；分号隔开写：

h1{color:red;font-size:14px;}

写法也可以这样：

h1{

color:red;

font-size:14px;

}

;2.1.4CSS3的类型

CSS3按照所放位置不同，分为内联样式、内部样式、外部样式表和导入样式表。

1.内联样式表

内联样式表是直接在HTML元素内插入style属性来定义要显示的样式，这是最简单的样式定义方法。不过，利用这种方法定义样式时，效果只可以控制该元素及其子元素，其语法如下：

如：bodystyle=color:#FF0000;…/body

2.内部样式表

内部样式表是在HTML的head元素中插入一个style元素，在style元素中书写CSS3样式规则。在内部样式表中定义的样式就应用到页面中：

;外部样式表

外部样式表是在HTML文档外面定义好CSS3文件，然后在HTML页面中使用link元素把CSS3文件引入，具体如下：

linkhref=样式表地址rel=stylesheettype=text/css/

导入样式表

输入样式表是指书写CSS3文件时用CSS3的@import声明将一个外部样式表文件导入进来，也可以使用@import声明将一个CSS3文件输入到网页文件的style/style标签对中，被导入的CSS3文件中的样式规则定义语句就成了style/style标签对中的语句。

style

@importurl(http://……)

/stypel

;2.1.5CSS3性质

1.级联

在编写CSS3代码的时候，可能在不同地方对HTML元素的同一属性添加了不同的样式。

2.继承

当给祖先元素设置了某些规则后，该祖先元素的所有后代子元素都将继承这个属性。;3.层叠

CSS3为什么叫层叠样式表，最大的原因就是CSS3的层叠特性。CSS3层叠性表现为：相同属性的不同值，按内联样式内部样式外联样式缺省值（浏览器内置）的优先级顺序覆盖，不相同的属性直接叠加（合并）在一起，并作用于该元素。

;4.优先

如果元素必须指定要以某些样式进行渲染，则可以用!important来指定样式。!important是CSS3的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。如例2-1.;2.2选择器

选择器是CSS3的非常重要的语法点，选择器主要是用来选中想要设置CSS3样式的元素，有元素选择器、类选择器、id选择器、伪类选择器等等。

为了演示元素选择器、类选择器、id选择器等的作用，先建立一个HTML文件例2-2作为基础文件，然后逐步在其基础上使用选选择器，演示各种选择器的具体效果。例2-2.

;2.2.1C