1.3 CSS技术

随着网页制作技术的不断发展，单调的HTML属性样式已经无法满足网页设计的需求。开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS可以在不改变原有HTML结构的情况下，增加丰富的样式效果，极大地满足了开发者需求。本节将详细讲解CSS技术的相关知识。

1.3.1 初识CSS

使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为将所有的样式都写在标签中，这样既不利于代码阅读，又使将来的代码维护非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。

CSS（Cascading Style Sheets，层叠样式表）是一种用于增强控制网页样式并允许将样式信息与网页内容分离的标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本格式（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）和版面的布局等外观显示样式。

CSS定义的规则具体如下：

选择器 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
  ...
}

在上述样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性: 属性值”形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”连接，多个键值对之间用“;”进行分隔。

示例

下面通过CSS样式对<div>标签进行设置，具体示例如下：

div {
  border: 1px solid red;
  width: 600px;
  height: 400px;
}

在上述代码中，div为选择器，表示CSS样式作用的HTML对象；border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值，分别表示该边框为1像素、实心边框线、红色。

在CSS中，通常使用像素（px）作为计量文本、边框等元素的标准量，px是相对于显示器屏幕分辨率而言的，而百分比（%）是相对于父对象而言的。例如，一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。

在CSS中颜色的取值方式有以下3种：

预定义的颜色值，例如red、green、blue等。
十六进制形式的值，例如#FF0000、#FF6600、#29D794等。实际工作中，十六进制形式的值是常用的定义颜色的方式。
RGB代码，例如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。如果使用RGB代码百分比方式取颜色值，即使值为0，也不能省略百分号，必须写为0%。

1.3.2 CSS样式的引用方式

要想使用CSS修饰网页，就需要在HTML文档中引入CSS。CSS提供了4种引用方式，分别为行内式、内嵌式、外链式和导入式。下面分别对这4种引用方式进行介绍。

1. 行内式

行内式也被称为内联式，可通过标签的style属性设置标签的样式。行内式基本语法格式如下：

<标签名 style="属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;">内容</标签名>

例如：

<h1 style="font-size:20px;color:blue;">使用行内式CSS修饰一级标题的字体大小和颜色</h1>

行内式CSS展示效果如图1-16所示。

行内式CSS是通过标签的属性来控制样式的，这样并没有做到结构与样式分离，所以不推荐使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义，其基本语法格式如下：

<head>
  <style type="text/css">
    选择器 {
      属性1: 属性值1;
      属性2: 属性值2;
      属性3: 属性值3;
    }
  </style>
</head>

例如：

<head>
  <title>使用内嵌式CSS</title>
  <style type="text/css">
    h2 { text-align: center; }
    div { border: 1px solid #CCC; width: 300px; height: 80px; color: purple; text-align: center; }
  </style>
</head>
<body>
  <h2>内嵌式CSS样式</h2>
  <div>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。</div>
</body>

内嵌式CSS只对其所在的HTML页面有效，因此仅设计一个页面时，使用内嵌式CSS是个不错的选择。但在设计网站时，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。

3. 外链式

外链式也叫链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文件中。外链式CSS的基本语法格式如下：

<head>
  <link href="CSS文件的路径" type="text/css" rel="stylesheet">
</head>

例如：

<head>
  <title>使用外链式CSS</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <h2>外链式CSS样式</h2>
  <div>外链式也叫链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。</div>
</body>

从图1-18中可以看到，使用外链式与内嵌式引入CSS文件的显示效果是一样的。在实际开发中，外链式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构与表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link>标签链接多个CSS样式表，极大提高了网页开发的工作效率。

4. 导入式

导入式与外链式相同，都是通过引入外部样式表文件来实现的。导入式CSS通过在HTML头部文档应用<style>标签，并在<style>标签内的开头处使用@import语句。导入式CSS的基本语法格式如下：

<style type="text/css">
  @import url("CSS文件路径");
</style>

例如：

<style type="text/css">
  @import "style.css";
</style>

或者

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

虽然导入式CSS与外链式CSS功能基本相同，但是大多数网站采用外链式CSS引入外部样式表，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，<link>标签引用的CSS样式表将同时被加载，@import引用的CSS样式表会等页面全部下载完才被加载。因此，当用户的网速较慢时，会先显示没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用外链式CSS。

1.3.3 CSS选择器和常用属性

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一样式任务的部分被称为选择器。下面将对CSS选择器进行介绍。

1. 标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。标签选择器的基本语法格式如下：

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

2. 类选择器

类选择器使用“.”进行标识，后面紧跟类名，其基本语法格式如下：

.类名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

3. ID选择器

ID选择器使用“#”进行标识，后面紧跟ID名，其基本语法格式如下：

#ID名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

4. 通配符选择器

通配符选择器用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器的基本语法格式如下：

* {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

示例

下面通过一个案例学习这几种选择器的使用。在chapter01文件夹中创建一个名称为cssDemo03的HTML文件，其主要代码如文件1-13所示。

<html>
<head>
  <title>选择器</title>
  <style type="text/css">
    /* 类选择器的定义 */
    .red { color: red; }
    .green { color: green; }
    .font18 { font-size: 18px; }
    /* ID选择器的定义 */
    #bold { font-weight: bold; }
    #font24 { font-size: 24px; }
  </style>
</head>
<body>
  <!-- 类选择器的使用 -->
  <h1 class="red">标题一：class="red"，设置文字为红色。</h1>
  <p class="green font18">段落一：class="green font18"，设置文字为绿色，字号为18px。</p>
  <p class="red font18">段落二：class="red font18"，设置文字为红色，字号为18px。</p>
  <!-- ID选择器的使用 -->
  <p id="bold">段落1：id="bold"，设置粗体文字。</p>
  <p id="font24">段落2：id="font24"，设置字号为24px。</p>
  <p id="font24">段落3：id="font24"，设置字号为24px。</p>
  <p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>

在文件1-13中，第422行代码在<style>标签内分别定义了类选择器和ID选择器。第614行代码使用了3个类选择器，第68行代码用“red”选择器将页面中class属性值为red的文字颜色设置为红色，第911行代码用“green”选择器将页面中class属性值为green的文字颜色设置为绿色，第1214行代码用“font18”选择器将页面中class属性值为font18的文本字号设置为18像素。第1621行代码使用了2个ID选择器，第1618行代码使用“#bold”选择器将页面中id属性值为bold的文本字体变为粗体文字，第1921行代码使用“#font24”选择器将页面中id属性值为font24的文本字号设置为24像素。

使用浏览器打开文件1-13，显示结果如图1-19所示。在图1-19中，“标题一...”和“段落二...”的文本内容均显示为红色，这是因为第26行代码和第30行代码都调用了名为red的类选择器，由此可见同一个类选择器可以被多个标签引用。

图1-19中，“段落2...”和“段落3...”的字号均为24像素，这是由于它们引用了相同的ID选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中ID值是唯一的。

1.3.4 常用CSS属性

除了选择器，CSS还提供了很多属性来丰富HTML标签的样式。CSS常用属性如表1-1所示。

属性名称	功能描述
margin	用于指定对象的外边距，即对象与对象之间的距离。
padding	用于指定对象的内边距，即对象的内容与对象边框之间的距离。
background	用于设置背景颜色、背景图片、背景图片的排列方式等。
font-family	规定元素的字体系列。
border	用于设置边框的宽度、边框的样式和边框的颜色。
font	用于设置字体样式、小型的大写字体、字体粗细、文字的大小等。
height	用于指定对象的高度。
line-height	用于设置行间距。
color	用于指定文本的颜色。
text-align	用于指定文本的对齐方式。
text-decoration	用于指定文本的显示样式，如下划线、删除线等。
vertical-align	用于设置元素的垂直对齐方式。
display	用于指定对象的显示形式。