2.2 CSS3基本用法_HTML5 移动Web开发从入门到精通（微课精编版）-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

2.2　CSS3基本用法

CSS3也是一种标记语言，可以在任何文本编辑器中编辑。下面简单介绍CSS3的基本用法。

2.2.1　CSS样式

CSS的语法单元是样式，每个样式包含两部分内容：选择器和声明（或称为规则），如图2.1所示。

图2.1　CSS样式基本格式

　选择器（Selector）：指定样式作用于哪些对象，这些对象可以是某个标签、指定Class或ID值的元素等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。
　声明（Declaration）：指定浏览器如何渲染选择器匹配的对象。声明包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中的最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后位于选择器的后面。
　属性（Property）：CSS预设的样式选项。属性名是由一个或多个单词组成，多个单词之间通过连字符相连。这样能够很直观地了解属性所要设置样式的类型。
　属性值（Value）：定义显示效果的值，包括值和单位，或者仅定义一个关键字。

【示例】下面的示例简单演示了如何在网页中设计CSS样式。

第1步，启动Dreamweaver，新建一个网页，保存为test.html。

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第3步，在<style>标签内输入下面的样式代码，定义网页字体大小为24像素，字体颜色为白色。

    body{font-size: 24px; color: #fff;}

第4步，输入下面的样式代码，定义段落文本的背景色为蓝色。

    p { background-color: #00F; }

第5步，在<body>标签内输入下面一行代码，然后在浏览器中预览，效果如图2.2所示。

    <p>莫等闲、白了少年头，空悲切。 </p>

图2.2　使用CSS定义段落文本样式

2.2.2　引入CSS样式

在网页中，有3种方法可以正确引入CSS样式，让浏览器能够识别和解析。

　行内样式

把CSS样式代码置于标签的style属性中，例如：

    <span style="color:red;">红色字体</span>
    <div style="border:solid 1px blue; width:200px; height:200px;"></div>

这种用法没有真正把HTML结构与CSS样式分离，一般不建议大规模使用。除非为页面中某个元素临时设置特定样式。

　内部样式

把CSS样式代码放在<style>标签内。这种用法也称为网页内部样式。该方法适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。

内部样式一般位于网页的头部区域，目的是让CSS源代码早于页面源代码下载并被解析，避免当网页下载之后，还无法正常显示。

　外部样式

把样式放在独立的文件中，然后使用<link>标签或者@import关键字导入。一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。

2.2.3　CSS样式表

样式表是一个或多个CSS样式组成的样式代码段。样式表包括内部样式表和外部样式表，它们没有本质不同，只是存放位置不同。

内部样式表包含在<style>标签内，一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性不是样式表。如果一个网页文档中包含多个<style>标签，就表示该文档包含了多个内部样式表。

如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表，一个CSS样式表文档就表示一个外部样式表。实际上，外部样式表也就是一个文本文件，其扩展名为.css。当把不同的样式复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。

在外部样式表文件顶部可以定义CSS源代码的字符编码。例如，下面的代码定义样式表文件的字符编码为中文简体。

    @charset "gb2312";

如果不设置CSS文件的字符编码，可以保留默认设置，则浏览器会根据HTML文件的字符编码来解析CSS代码。

2.2.4　导入外部样式表

外部样式表文件可以通过两种方法导入HTML文档中。

1. 使用<link>标签

使用<link>标签导入外部样式表文件的代码如下。

    <link href="001.css" rel="stylesheet" type="text/css" />

该标签必须设置的属性说明如下。

　href：定义样式表文件URL。
　rel：用于定义文档关联，这里表示关联样式表。
　type：定义导入文件类型，同style元素一样。

2. 使用@import命令

在<style>标签内使用@import关键字导入外部样式表文件的方法如下。

    <style type="text/css">
    @import url(“001.css");
    </style>

在@import关键字后面，利用url()函数包含具体的外部样式表文件的地址。

2.2.5　CSS格式化

在CSS中增加注释很简单，所有被放在“/*”和“*/”分隔符之间的文本信息都被称为注释。例如：

    /*注释*/

或

    /*
    注释
    */

在CSS中，各种空格是不被解析的，因此用户可以利用Tab键、空格键对样式表和样式代码进行格式化排版，以方便阅读和管理。

2.2.6　CSS属性

CSS属性众多，在W3C CSS2版本中共有122个标准属性（http://www.w3.org/TR/CSS2/propidx.html），在W3C CSS2.1版本中共有115个标准属性（http://www.w3.org/TR/CSS21/propidx.html），其中删除了CSS2版本中7个属性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS3版本中又新增加了20多个属性（http://www.w3.org/Style/CSS/current-work#CSS3）。

本节不准备逐个介绍每个属性的用法，我们将在后面各章节中详细说明，读者也可以参考CSS3参考手册具体了解。

2.2.7　CSS属性值

CSS属性取值比较多，具体类型包括长度、角度、时间、频率、布局、分辨率、颜色、文本、函数、生成内容、图像和数字。常用的是长度值，其他类型值将在相应属性中具体说明。

下面重点介绍一下长度值，它包括以下两类。

1. 绝对值

绝对值在网页中很少使用，一般用在特殊的场合。常见绝对单位如下。

　英寸（in）：使用最广泛的长度单位。
　厘米（cm）：最常用的长度单位。
　毫米（mm）：在研究领域使用广泛。
　磅（pt）：也称点，在印刷领域使用广泛。
　pica（pc）：在印刷领域使用。

2. 相对值

根据屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等因素确定值的大小。常见相对单位包括如下4个。

em表示字体高度，它能够根据字体的font-size值来确定大小，例如：

从上面样式代码中可以看出：1em等于font-size的属性值，如果设置font-size:12pt，则line-height:2em就会等于24pt。如果设置font-size属性的单位为em，则em的值将根据父元素的font-size属性值来确定。例如，定义如下HTML局部结构。

    <div id="main">
      <p>em相对长度单位使用</p>
    </div>

再定义如下样式。

    #main {    font-size:12px;}
    p {font-size:2em;} /*字体大小将显示为24px*/

同理，如果父元素的font-size属性的单位也为em，则将依次向上级元素寻找参考的font-size属性值，如果都没有定义，则会根据浏览器默认字体大小进行换算，默认字体大小一般为16px。

ex表示字母x的高度。

px根据屏幕像素点来确定大小。这样不同的显示分辨率就会使相同取值的px单位所显示出来的效果截然不同。

百分比也是一个相对单位值。百分比值总是通过另一个值来确定当前值，一般参考父元素中相同属性的值。例如，如果父元素宽度为500px，子元素的宽度为50%，则子元素的实际宽度为250px。