3.1 CSS概述
3.1.1 认识CSS
HTML标签都具有各自的属性，用于控制元素的显示效果。由于主要的浏览器（如Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。因此，随着元素显示效果控制需求的变化，标签原有属性难以满足要求，就需要扩展标签的属性以适应该变化。
但HTML作为一种标记语言，其某个版本的核心标签库应该保持相对稳定，不宜频繁变化。
为了解决这个问题，万维网联盟（W3C）这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在 HTML4.0之外创造出样式（Style）。于是，扩展标签属性机制的CSS（Cascading style sheets）层叠样式表技术应运而生。
W3C在1996年提出第一个定义HTML显示样式的层叠样式表规范CSS1，并且很快就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式与标准，还有许多增强功能。现在已经发展到CSS3规范，语义化能力更加强大。
所有的主流浏览器均支持层叠样式表。CSS用来控制网页元素的样式（即显示效果），比如字号、颜色、排版布局等。它能够配合HTML设计出丰富多彩的网页。CSS中书写样式规则必须要遵循如下的语法规则。
选择器 { 声明列表; }
其中，大括号中的每条声明由冒号分隔的属性值对组成，声明之间用分号分隔，注意最后的“;”不能省略。
假设把<h1>标签中文字的颜色设置成红色、字号设置成14像素，需要按下面语法设置。
特别要注意的是，最后一个声明后，也要加上分号“;”，以免出错。
要理解和掌握好CSS，需要准确把握以下3个概念。
（1）元素。元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。
（2）属性。在HTML文档中属性是指元素某方面的特性。
（3）规则。样式规则由选择器和声明列表（或声明块）构成，而声明块则是“属性:值”对（即声明）的集合，用来控制网页元素的显示方式。
总起来说，CSS具有以下几个作用。
（1）简化了网页格式设计，增强了网页的可维护性。它加强了网页的表现力，提供更多效果来扩展内容表现形式。
（2）增强了网站格式的一致性，降低网站开发与维护工作量。
（3）允许作者独立控制文档中所有标签的显示形式。
3.1.2 CSS使用方式
CSS样式可以按其出现在不同地方划分为不同类型。按照该标准来划分，CSS中主要有以下3种样式类型：
（1）内联样式，也称行内式或元素级样式。它用于给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则，内联样式的作用范围仅限于本元素。
（2）内部样式，亦称文档级样式或页面级样式。它是将所有样式规则都罗列在HTML网页文档的头部，即写在(<head>和</head>之间的)<style>与</style>中，其作用范围是整个文档。
（3）外部样式，也叫外联式或项目级样式。它是把所有样式规则书写在一个独立于网页外的文档(.css文件)中。可以供整个项目中所有有需要的HTML网页文档使用。
CSS样式必须引入到HTML文档才能被浏览器识别并应用到HTML元素上。CSS类型不同，引入方式也不同。因此，将CSS样式引入至HTML文档也就有三种方式，下面分别举例加以说明。
（1）内联样式引入
通过直接设置标签属性style来引入CSS样式，即直接将样式规则的声明块作为style的属性值。例如：
<h2 style="color:red;font-style:italic;">
欢迎光临
</h2>
以上方式将该标题文字设置为红色倾斜字体。
（2）内部样式引入
通过<style>标签引入CSS样式，通常需要被嵌套在<head>标签中，例如：
<style type="text/css">
/*内联样式写在此处*/
h2 {color:red;font-style:italic;}
</style>
这类样式将使该网页中所有<h2>标签定义的文字都为红色倾斜字体。
（3）外部样式引入
将CSS样式写在一个独立的.css文件中，然后通过<link>标签引入到HTML文档头部（<head>与</head>之间）。例如：
<link rel="stylesheet" type="text/css" href="mystyles.css">
另外，还可以在<head>头部使用<style>标签间的一个特殊命令@import(at规则)引入文件（但不常用），如：
<style type="text/css">
@import url(http://www.abc.com/styles.css); 或
@import "http://www.abc.com/styles.css";
</style>
3.1.3 CSS基础概念
1、单位
页面布局中，经常会设置元素的宽高、字号、位置等属性，这些属性值都是以一个数值形式存在的，这时我们就需要有相应的单位表达。CSS中的单位有很多，我们只介绍以下几种。
（1）px（像素）
大家熟悉，屏幕是由无数个网格状的点构成的，把这些点称为像素，例如1366 * 768指屏幕由水平方向1366个像素，垂直方向768个像素构成。比如：
（2）%（百分比）
百分比是指相对于某一元素尺寸（通常是父元素）的大小。
（3）em（字号大小）
em是一个相对单位，等于当前元素字号大小。
2、颜色值
通常，网页由不同颜色的HTML元素构成，CSS提供了多种方法设置元素的颜色值。
（1）关键字
关键字由表示颜色的英文单词构成，如red、green、blue等。例如：
（2）16进制值
16进制值由一个6位长度的16进制的数值和符号"#"构成，如#FFFFFF、#F2F2F2等。例如：
（3）三原色（RGB值）
三原色（RGB值）由Red（红）、Green（绿）、Blue（蓝）3色组合构成，如rgb(120, 120, 120)，3个参数分别代表红色值、绿色值、蓝色值，取值范围为0~255，也可以是3个百分比，如rgb(10%,20%,50%),组合不同的数值会得到不同的颜色。例如：
3、继承性
继承指的是当为某个父元素设置CSS属性时，其子元素也会被应用这些CSS属性，比如，为父元素<p>设置的CSS属性“color:red;font-size:24px;”，也同样会应用到其子元素。
注：并不是所有CSS属性都会被继承，继承适用于所有嵌套标签场景。
4、层叠性
当同一个HTML元素被不止一个样式定义时，就会产生样式层叠。也就是在HTML文件中对同一元素设有多个相同权重的CSS样式，则处于最后面的CSS样式会被应用。示例代码如下：
<style>
p{color:red;}
p{color:green;}
</style>
/*下面段落文字将显示为绿色*/
<p>小红是一个胆小如鼠的女孩。</p>
5、重要性
在某个样式的声明后添加“!important”，代表该样式具有最高权值，强调样式的重要性。“!important”要写在该声明后的分号“;”的前面。
示例代码如下：
<style>
p{color:red !important;}
p{color:green;}
</style>
/*由于重要性的设置，使下面段落文字显示为红色*/
<p>小白是一个胆大包天的男孩。</p>
6、元素类型
CSS元素划分成块元素、行内元素、行内块元素等多种常用类型。元素类型不同，它在文档中的表现方式也有变化。
（1）块元素是一个标准的盒子，可以对盒子的任一构成部分进行设置，默认情况下独占一行。
常见块元素：body、h1~h6、p、ul、ol、li、dl、dt、dd、table、form、div等。
（2）行内元素是一个非标准的盒子，设置宽度、高度、垂直内边距、垂直外边距无效，并且与相邻元素共享一行。
常见行内元素：a、b、s、i、span等。
（3）行内块元素是块元素和行内元素的结合体，可以对盒子的任一构成部分进行设置，并且与相邻元素共享一行。
常见行内块元素：img、input、select等。
CSS中，通过display属性可实现元素类型的转换。例如：
7、文档流
所谓文档流指文档里各元素的默认排列方式。在正常文档流中，网页中元素的排列规律如下：
（1）块元素：自上而下排列。
（2）行内元素：自左向右排列。
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
