2.4 CSS 3入门
层叠样式表（Cascading Style Sheets，CSS）是一门描述HTML文档风格样式的语言，定义了每个HTML文档内元素应当如何被浏览器显示。
2.4.1 CSS引用方法
CSS语言可以有3种引用方法，它们分别是外部样式表（External style sheet）、内部样式表（Internal style sheet）以及内联样式（Inline style）。通过这3种的其中一种或几种都可以实现CSS语言对HTML文档内元素的描述。
1.外部样式表
外部样式表将CSS和HTML分隔开来，独立形成CSS文档，其扩展名为“.css”，在HTML文档的<head>标签内添加引用即可。引用方式如下，展示效果如图2-5所示。
图2-5 CSS外部样式表
文件名：CSS外部样式表.html
文件名：mystyle.css
2.内部样式表
不同于外部样式表，内部样式表的CSS样式被添加到文档内。这种方法通过在<head>标签内添加<style>标签实现。在<style>标签内编写CSS语句即可完成对HTML文档元素样式的添加。具体使用方法如下。
文件名：CSS内部样式表.html
3.内联样式
内联样式通过将CSS语句直接写入HTML元素的style属性内来实现样式的添加，同一元素内的多个CSS属性设置以分号相分隔。具体使用方式如下。
文件名：CSS内联样式.html
2.4.2 CSS语法
CSS规则由两个主要的部分构成，分别是选择器（selector）与声明语句（declaration）。基本形式为：selector{declaration1;declaration2;...declarationN;}。一个CSS文档中，可以设置多个选择器和声明语句组合。
1.声明
CSS声明语句出现在选择器之后的大括号内，以属性和值的组合形式出现，并以分号分隔不同的键值对。
2.选择器
选择器的作用是将CSS的属性设置语句，即声明语句，与HTML文档内的元素建立联系，这个过程就是“选择”。选择器本身是对被选择的HTML文档内元素的一种表示，通常有以下几种常用的选择方式，分别是元素选择、id选择、class选择及组合选择。
（1）元素选择
元素选择器以HTML文档元素的名称为选择依据。例如，使用一个p作为选择器的话，就会选择HTML文档内全部的段落元素作为被修饰的对象。
（2）id选择
id选择器以HTML文档内元素的id作为选择依据。一般来说，一个HTML文档内元素所设定的id是唯一的。使用id选择器，可以直接地定位单个想要修饰的元素。id选择器由“#”符号与被选id命名组合而成。假设有一个<p>标签，例如，<p>这是一个段落，这真的是一个段落，真的啊</p>。为这个元素添加样式的方式如下：
（3）class选择
class选择器以HTML文档内元素的class属性值作为选择依据。一般来说，多个相同或不同的元素可以设定相同的class命名，这样就可以实现对HTML文档内多个元素的选择，并组合添加样式。class选择器由“.”符号与被选class命名组合而成，使用方式如下：
（4）组合选择
组合选择的方式将多个不同的HTML元素进行选择并添加样式。组合选择器由多个元素组成，不同元素之间以“，”相互分隔，具体的形式如下：
3.CSS注释
同样，CSS中也可以编写一些不会被浏览器识别解析的语句作为注释，来便于开发人员之间的相互沟通。CSS文档中的注释以“/*”作为开始，以“*/”作为结束，可以为单行，也可以为多行。
2.4.3 盒模型
在HTML文档中，每个的HTML元素都可以被视为一个盒子。使用盒模型（box-model）来定义一个HTML元素的显示方式，它具体包含内容（content）、内边距（padding）、边框（border）和外边距（margin）这几部分。
1.结构
盒模型的一般结构如图2-6所示，简单来说就是元素外有一个盒子，即边框。这个“盒子”与外部边界有一个距离，是外边距。“盒子”与内容本身有一个距离，是内边距。
（1）内容
内容区域，代表HTML元素本身，是文本信息或图片等显示的地方。一般HTML元素的width和height属性作用的是这部分区域。HTML元素的长宽属性并不完全决定一个元素在页面中真实的大小，最终大小还会受到内边距、外边距以及边框宽度的影响。
图2-6 盒模型
（2）内边距
内边距代表边框与元素内容之间的距离，有4个方向的距离可以设置调整。
（3）边框
边框是围绕在内容外的边界，与内容之间有内边距分隔。边框一般可以设置粗细、形式（实线、虚线）以及颜色。
（4）外边距
外边距是边框与HTML元素的实际边界的距离，如图2-6中最外面的虚线部分。外边距，同内边距一样有4个方向的距离可以进行设置调整。
2.使用
下面这个实例演示了如何对HTML元素的盒模型相关属性进行设置。为了展示需要，该实例中包含两个<div>元素，并为嵌套关系，外侧<div>被设置了确定的宽度、高度，以及边框样式。其在浏览器中的展示效果如图2-7所示。
图2-7 盒模型的使用
文件名：盒模型.html
代码中使用了缩略方式进行了相关属性的定义，包括border、padding、margin三个属性。实例中的border属性是border-width、border-style和border-color的顺序集合，依次代表边框宽度、边框形式和边框颜色。类似的，padding属性是padding-top、padding-right、padding-bottom和padding-left的顺序集合，依次代表上、右、下、左4个方向上的内边距，即从上内边距开始顺时针旋转。同理，margin属性是margin-top、margin-right、margin-bottom和margin-left的顺序集合，依次代表上、右、下、左4个方向上的外边距。
2.4.4 CSS定位
在HTML文档中，开发者通常还需要决定每个元素的具体位置，进而可以为网页的浏览者提供更好的视觉效果。在CSS中通过设定position属性，可以对HTML元素进行定位。经常被使用的有如下3种定位方式：相对（relative）定位、绝对（absolute）定位和浮动（float）。
1.相对定位
通过设置position属性为relative，就可以使用相对定位。所谓相对是相对于元素本应该显示的位置。
通过设定top或left属性，可以设置元素相对于原来位置上方或左侧的距离，如图2-8所示。
需要注意的是，在使用相对定位方式时，无论如何移动，元素仍然占据原来的空间，所以移动后的元素可能会覆盖其他元素的内容。请看如下实例，其在浏览器中的展示效果如图2-9所示。
文件名：相对定位.html
图2-8 相对定位图示
2.绝对定位
通过设置position属性为absolute，就可以使用绝对定位。绝对定位方式相对于被定位元素最近的父级元素，例如，两个嵌套的<div>元素，当使用绝对定位时，嵌套在内部的<div>元素相对于外部的<div>元素进行定位。而外部的<div>元素则会相对于<body>元素进行定位。绝对定位在浏览器中的展示效果如图2-10所示。
图2-9 相对定位
图2-10 绝对定位
文件名：绝对定位.html
3.浮动
通过设定HTML元素的float属性，就可以让元素具有类似于浮动的特性。不同于元素被一一顺序排列向下展开，HTML元素之间可以根据自身长宽大小向上浮动。请看如下实例，其在浏览器中的展示效果如图2-11所示。
文件名：浮动.html
如果将代码中的float属性去掉的话，实例中的小方块将由上而下显示，即每个元素占据一行空间，如图2-12所示。
图2-11 浮动
图2-12 没有浮动
2.4.5 CSS 3简介
CSS 3是最新的CSS标准，它是之前CSS技术的升级版本，并对之前的CSS兼容。CSS 3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效和多栏布局等。CSS 3也是十分重要的Web技术，有兴趣的读者可以自行搜索学习CSS 3相关知识。
2.4.6 CSS入门实例
在2.4.4节中提及的浮动，可以让HTML元素呈现浮动特性。但浮动属性有时也会造成一定的烦扰，尤其当一个HTML文档中还有其他非浮动元素同时存在时。因为浮动定位的方式使浮动元素脱离了文档流，浮动元素本身并不占据空间，这就导致非浮动元素照常显示，仿佛不存在这些浮动元素一样，如图2-13所示。
为了避免这种情况，需要为非浮动元素添加clear属性，来消除浮动元素带来的影响。clear属性的值可以设置为left、right或both，即左侧、右侧或两侧不允许存在浮动元素，这样HTML文档中的非浮动元素就不会受到浮动元素的影响，进而造成显示问题。具体情况参考如下实例，其在浏览器中的展示效果如图2-14所示，读者可对比不加clear属性的效果。
图2-13 没有clear属性
图2-14 clear属性
文件名：clear属性.html
