3.2.1　CSS简介

早期，依靠HTML元素的属性设置样式，如border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。

1．CSS基本特性

在本节的开始，已经对CSS进行了简单的定义：

①CSS（Cascading Style Sheets）：层叠样式表，又称级联样式表，简称样式表。

②它的主要作用是用于HTML文档中元素的样式定义。

③实现了将内容与表现分离。

④提高了代码的可重用性和可维护性。

2．CSS的语法构成

这里定义一个简单的CSS样式，代码如下：

上述代码的主要功能是：定义了样式h1，其文本显示为居中样式，颜色显示为蓝色，界面显示效果如图3.10所示。

从上述显示和代码中，可以看出CSS的语法有以下特点：

①样式表由多个样式规则组成，每个样式规则有两部分：选择器和声明。

②选择器：决定哪些元素使用这些规则，如h1{}。

③声明：由一个或者多个属性/值对组成，用于设置元素的外观表现，如“text-align：center；”。

3．CSS的3种使用方式

3种使用方式有内联样式、内部样式表、外部样式表，这3种样式应用的范围不一样，具体的用法如下：

（1）内联样式

内联式的特点是样式定义在单个的HTML元素中，它的具体用法如下：

①样式定义在HTML元素的标准属性style中。

②不需要定义选择器，也不需要大括号。

③只需要将分号隔开的一个或者多个属性/值对，作为元素的style属性的值。

这里将上述h1的内联式写法定义如下，代码的显示效果和图3.10的效果一样。内联式可以看成是将代码写入html代码中，这种用法不便于维护，因此不推荐使用。

（2）内部样式表

样式定义在HTML页的头元素中。

①样式表规则位于文档头元素的＜style＞元素内。

②在文档的＜head＞元素内添加＜style＞元素，在＜style＞元素中添加样式规则。

图3.10显示效果的内部式代码如下，内部式比内联式效果好，如果页面的CSS代码不是很多，也可以使用，但是缺点也一样，不便于维护，可复用性也比较差。

（3）外部样式表

将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件。

①首先需要创建一个单独的样式表文件，用来保存样式规则。

a．一个纯文本文件。

b．该文件中只能包含CSS样式规则。

c．文件后缀为.css。

②然后在需要使用该样式表文件的页面上，使用＜link＞元素链接需要的外部样式表文件。在link中，rel代表做什么用；href代表引入的文件在哪；type代表引入的文件是什么类型的；text/css代表纯文本类型的CSS代码。

（4）三种用法的区别

①内联样式。将样式定义在元素的style属性中，但没有重用性。

②内部样式表。将样式定义在＜head＞元素里的＜style＞中，但仅限于当前文档范围重用。

③外部样式表。将样式定义在单独的.css文件中，有页面引入它；但可维护性和可重用性高，同时实现了数据（内容）和表现的分离。

④推荐使用内部样式表和外部样式表。

4．CSS的表特征和优先级

CSS在使用的过程中，具有如下特性：

①继承性。大多数CSS的样式规则可以被继承（子元素继承父元素的样式）。

②层叠性。可以定义多个样式表；不冲突时，多个样式表中的样式可层叠为一个，即不冲突时采用并集方式。

③优先级。即冲突时采用优先级。

a．内联＞内部或者外部。

b．内部和外部：优先级相同的情况下，采取就近原则，以最后一次定义的为优先。

c．当修改时，不想去找，就在CSS中最后的位置重新写一遍新的样式。这也是CSS文件越来越大的原因。

注意事项：还应注意浏览器的默认设置。

级联（层叠）样式表CSS的特点是继承+并集+优先级。

5．CSS选择器

CSS的选择器有很多，具体用法如下：

（1）标签选择器

HTML文档的元素名称就是标签选择器。标签选择器也称为元素选择器。

语法：如html＜color：black；＞、h1{color：blue；}、p{color：silver；}。

缺点：不同的元素样式相同，即不能跨元素。所以做不到同一类元素下的细分。

（2）类选择器

类选择器属于自定义的某种选择器，其具体用法如下：

语法：.className{样式声明}；。

注意事项：

①html文件中，所有元素都有一个class属性，如＜p class="name"＞＜/p＞。

②类选择器还有一种用法：＜div id="d1"class="s1 s2"＞hello＜/div＞，样式s1和样式s2对div共同起作用。

下面以一个简单的类选择器作为例子，说明类选择器的用法，代码如下：

上述代码的显示效果如图3.11所示。

（3）分类选择器

将类选择器和元素选择器结合起来使用，以实现同一类元素下不同样式的细分控制。如＜input＞元素，又有按钮又有文本框的，采用分类选择器。其具体的语法为：元素选择器.className{样式声明}。

以图3.11为例，如果只让代码对p有用，对h2没用，就可以采用分类选择器，具体代码如下：

其代码显示效果如图3.12所示，虽然代码中仅仅只是增加了一个p，但是代码的显示效果仅仅对p有用。

（4）id选择器

以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器，这种选择器应用也较多，其具体用法如下：

语法：定义id选择器时，选择器前面需要有一个“#”号，选择器本身则为文档中某个元素的id属性的值。

特点：html文件中，所有元素都有一个id属性。且某个id选择器仅使用一次。

以图3.11为例，其代码如果以id选择器显示同样的效果，其代码如下：

（5）派生选择器

依靠元素的层次关系来定义。某一包含元素下的一些相同子元素使用派生选择器，其具体语法：通过依据元素在其位置的上下文关系来定义样式，选择器一端包括两个或多个用空格分隔的选择器。

以图3.12为例，如果需要显示同样的效果，则代码如下：

（6）选择器分组

对某些选择器定义一些统一的设置（相同的部分），其语法为：选择器声明为以逗号隔开的元素列表。

选择器分组可以简单地说：为了让不同的元素有相同的显示效果，可以将其定义一起，用逗号隔开。以图3.11为例，让h1和p显示同样的效果，则代码如下：

（7）伪类选择器

伪类用于向某些选择器添加特殊的效果，常见的为超链接，具体用法如下：

语法：使用冒号“：”作为结合符，结合符左边是其他选择器，右边是伪类。

常用伪类：有些元素有不同的状态，典型的是＜a＞元素。

link：未访问过的链接。

active：激活。

visited：访问过的链接。

hover：悬停，鼠标移入，所有元素都能用。

focus：获得焦点。

这里可以用一个简单的超链接为例，定义后，所有超链接的格式发生变化。如果让某个具体的超链接发生变化，可以用派生选择器。由于以下代码图片显示效果不是很理想，读者可以在浏览器中观看效果。

（8）选择器优先级

基本规则：内联样式＞id选择器＞类选择器＞元素选择器。

优先级从低到高排序：div＜.class＜div.class＜#id＜div#id＜#id.class＜div#id.class。

6．CSS定位

（1）CSS定位简介

CSS定位是指将页面中的元素在页面中以固定的方式显示，CSS的定位分为以下几种：

①普通定位：页面中的块级元素框从上到下一个接一个地排列，每一个块级元素都会出现在一个新行中，内联元素将在一行中从左到右排列水平布置。

②浮动定位：页面元素的定位随着前面或后面的位置而变化。

③相对/绝对定位。

（2）position（定位）属性

更改定位模式为相对定位、绝对定位、固定定位，其具体用法如下：

语法：position：static/absolute/fixed/relative；。

取值说明：

static：默认值。无特殊定位，元素遵循HTML定位规则（即默认的流布局模式）。

absolute：将元素从文档流中拖出，使用left、right、top、bottom等属性相对于最近的有position属性的祖先元素，如果没有，那么它的位置相对最初的包含块，如按＜body＞进行绝对定位。而其层叠通过z-index属性定义。

relative：元素不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

fixed：元素定位遵从绝对定位，但是要遵守一些规范。低版本的IE中，这个属性无效。

（3）偏移属性

实现元素框位置的偏移，其具体用法如下：

语法：top/bottom/right/left：auto/length；。

取值说明：

auto：默认值，无特殊定位，根据HTML定位规则在文档流中分配。

length：由浮点数字和单位标识符组成的长度值/百分数。必须定义position属性值为absolute或者relative此取值方可生效。

（4）堆叠属性

堆叠属性，顾名思义，就是将元素堆叠在另外一个元素上，其具体用法如下：

语法：z-index：auto/number；。

取值说明：

auto：默认值，为0，遵从其父元素的定位。

number：无单位的整数值，可为负数。

特别说明：

①较大number值的元素会覆盖在较小number值的元素之上。如两个绝对定位元素的此属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。

②此属性仅仅作用于position属性值为relative或absolute的元素。

③默认布局使用堆叠无效。

（5）相对定位：relative

相对定位具有以下特点：

①元素仍保持其未定位前的形状。

②原本所占的空间仍保留。

③元素框会相对它原来的位置偏移某个距离。

④在相对定位元素之后的文本或元素占有他们自己的空间而不会覆盖被定位元素的自然空间。

⑤相对定位会保持元素在正常的HTML流中，但是它的位置可以根据它的前一个元素进行偏移。

⑥相对定位元素在可视区域之外，滚动条不会出现。

（6）绝对定位：absolute

绝对定位具有以下特点：

①绝对定位会将元素拖离出正常的HTML流，而不考虑它周围内容的布局。

②要激活元素的绝对定位，必须指定left、right、top、bottom属性中的至少一个。

③绝对定位元素之后的文本或元素在被定位元素被拖离正常HTML流之前会占有它的自然空间。

④绝对定位元素在可视区域之外会导致滚动条出现。

定位的主要作用是方便页面中元素显示，读者可以根据页面的需求，定义一个符合页面元素需求的定位。