1.2 CSS基本用法
CSS是一种标识语言，可以在任何文本编辑器中编辑。下面简单介绍CSS的基本用法。
1.2.1 CSS样式
CSS的语法单元是样式，每个样式包含两部分内容：选择器和声明（或称为规则），如图1.4所示。
选择器（Selector）：指定样式作用于哪些对象，这些对象可以是某个标签、指定Class或ID值的元素等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。
声明（Declaration）：指定浏览器如何渲染选择器匹配的对象。声明包括属性和属性值两部分，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，位于选择器的后面。
属性（Property）：CSS预设的样式选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连，这样能够很直观地了解属性所要设置样式的类型。
属性值（Value）：定义显示效果的值，包括值和单位；或者仅定义一个关键字。
图1.4 CSS样式基本格式
【示例】下面示例简单演示了如何在网页中设计CSS样式。
【操作步骤】
第1步，启动Dreamweaver，新建一个网页，保存为test.html。
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第3步，在<style>标签内输入下面样式代码，定义网页字体大小为24px，字体颜色为白色。
body{font-size: 24px; color: #fff;}
第4步，输入下面样式代码，定义段落文本的背景色为蓝色。
p {background-color: #00F;}
第5步，在<body>标签内输入下面一段话，然后在浏览器中预览，效果如图1.5所示。
图1.5 使用CSS定义段落文本样式
1.2.2 引入CSS样式
在网页中，有3种方法可以正确引入CSS样式，让浏览器能够识别和解析。
1. 行内样式
把CSS样式代码置于标签的style属性中，例如：
这种用法没有真正把HTML结构与CSS样式分离，一般不建议大规模使用。除非为页面中某个元素临时设置特定样式。
2. 内部样式
把CSS样式代码放在<style>标签内，例如：
这种用法也称为网页内部样式，适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。
内部样式一般位于网页的头部区域，目的是让CSS源代码早于页面源代码下载并被解析，避免当网页下载之后还无法正常显示。
3. 外部样式
把样式放在独立的文件中，然后使用<link>标签或者@import关键字导入。一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。
1.2.3 CSS样式表
样式表是一个或多个CSS样式组成的样式代码段，分为内部样式表和外部样式表，它们没有本质区别，只是存放位置不同。
内部样式表包含在<style>标签内，一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性就不是样式表。如果一个网页文档中包含多个<style>标签，就表示该文档包含多个内部样式表。
如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表，一个CSS样式表文档就表示一个外部样式表。实际上，外部样式表也就是一个文本文件，其扩展名为.css。当把不同的样式复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。
在外部样式表文件顶部可以定义CSS源代码的字符编码。例如，下面代码定义样式表文件的字符编码为中文简体。
@charset "gb2312";
如果不设置CSS文件的字符编码，可以保留默认设置，则浏览器会根据HTML文件的字符编码来解析CSS代码。
1.2.4 导入外部样式表
外部样式表文件可以通过两种方法导入HTML文档中。
1. 使用<link>标签
使用<link>标签导入外部样式表文件的代码如下：
<link href="001.css" rel="stylesheet" type="text/css" />
该标签必须设置的属性说明如下。
href：定义样式表文件URL。
type：定义导入文件类型，同style元素一样。
rel：用于定义文档关联，这里表示关联样式表。
2. 使用@import命令
在<style>标签内使用@import关键字导入外部样式表文件的方法如下：
在@import关键字后面，利用url()函数包含具体的外部样式表文件的地址。
1.2.5 CSS格式化
在CSS中增加注释很简单，所有被放在“/*”和“*/”分隔符之间的文本信息都被称为注释。例如：
/*注释*/
或
在CSS中，各种空格是不被解析的，因此用户可以利用Tab键、空格键对样式表和样式代码进行格式化排版，以方便阅读和管理。
1.2.6 CSS属性
CSS属性众多，在W3C CSS 2.0版本中共有122个标准属性（http://www.w3.org/TR/CSS2/propidx.html），在W3C CSS 2.1版本中共有115个标准属性（http://www.w3.org/TR/CSS21/propidx.html），其中删除了CSS 2.0版本中7个属性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS 3.0版本中又新增加了20多个属性（http://www.w3.org/Style/CSS/currentwork#CSS3）。
属性的用法将在后面各章节中详细说明，用户也可以通过CSS3参考手册具体了解。
1.2.7 CSS属性值
CSS属性取值比较多，具体类型包括长度、角度、时间、频率、布局、分辨率、颜色、文本、函数、生成内容、图像和数字。下面重点介绍一下常用的长度值，其他类型值将在相应属性中具体说明。
长度值包括绝对值和相对值两类。
1. 绝对值
绝对值在网页中很少使用，一般用在特殊的场合。常见绝对单位如下。
英寸（in）：使用最广泛的长度单位。
厘米（cm）：最常用的长度单位。
毫米（mm）：在研究领域使用广泛。
磅（pt）：也称点，在印刷领域使用广泛。
pica（pc）：在印刷领域使用。
2. 相对值
相对值是根据屏幕分辨率、可视区域、浏览器设置，以及相关元素的大小等因素确定值的大小。常见相对单位如下。
em：表示字体高度，它能够根据字体的font-size值来确定大小，例如：
从上面样式代码中可以看出：一个em等于font-size的属性值，如果设置font-size:12pt，则line-height:2em就会等于24pt。如果设置font-size属性的单位为em，则em的值将根据父元素的font-size属性值来确定。例如，定义如下HTML局部结构：
再定义如下样式：
同理，如果父对象的font-size属性的单位也为em，则将依次向上级元素寻找参考的font-size属性值，如果都没有定义，则会根据浏览器默认字体进行换算，默认字体一般为16px。
ex：表示字母x的高度。
px：根据屏幕像素点来确定大小。这样不同的显示分辨率就会使相同取值的px单位所显示出来的效果截然不同。
%：百分比也是一个相对单位值。百分比值总是通过另一个值来确定当前值，一般参考父对象中相同属性的值。例如，如果父元素宽度为500px，子元素的宽度为50%，则子元素的实际宽度为250px。