4.2 为什么要用 CSS

分离 内容(content)和样式(styling)

随着90年代以来Web技术的流行,网站个性化设计的需求也相应增长。

在使用CSS之前,Web开发人员依赖于一些特定的HTML标签和属性来增强网页的视觉体验,而依赖表格来进行布局设计。

和样式有关的一些HTML标签:

  • <basefont> 定义整个网页文档的字体
  • <font> 定义一个具体的字体类型,颜色和它所包含的文本大小
  • <center> 水平居中它所包含的元素
  • <big> 使文本变大
  • <strike> 为文本添加删除线

和样式有关的一些HTML属性:

  • bgcolor 定义元素的背景色
  • text 定义文本颜色
  • margin 定义元素的边距

在页面整体布局的设计上曾经广泛使用表格 <table> 元素。

因为表格提供了一个可视化的网格(grid),使得创建列、对齐和定位页面中的各个元素要相对直观一些:

<table>
  <thead>
    <tr>
      <th>Logo</th>
      <th colspan="2">Tagline</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="3">Copyright 2015</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Left menu</td>
      <td>Main content</td>
      <td>Right sidebar</td>
    </tr>
  </tbody>
</table>

但是上述这些样式和布局方法有很多缺点:

  • 内置的HTML元素和属性,使得表现和内容绑定在一起,如果要提供多样式的网页,必然要提供多份HTML文档内容
  • HTML表格的代码相当繁琐,需要很多公式化标签,吃力不讨好
  • HTML表格标记用法是语义错误的: 表格应该只是用来组织多维数据的,而不是用来布局的
  • 改变布局需要更改标记:如果我们想把左边的列移到右边,我们得修改HTML文档结构
  • HTML表格容易出现语法错误:行和列需要遵循严格的排序和嵌套关系
  • HTML表格标记用法可读性差:需要使用嵌套表格来支持列中有列的布局,结构将变得非常复杂

这就是为什么内置HTML样式使用表格进行布局在实践中已经逐渐被抛弃,转而使用CSS来代替的原因。

什么是CSS

CSS 表示级联样式表(或层级样式表,Cascading Style Sheets)。 创建CSS的主要目的是为标记类语言(如 HTML 或 XML)定义的内容添加样式。因此,单独的CSS是没有意义的,必须有一个关联的HTML文档。

简而言之,CSS让HTML内容变得生动

CSS的版本

和HTML一样,CSS由W3C标准组织统一管理,CSS1在1996年推出,包含非常基本的属性,比如字体,颜色、空白边。 2年后推出了CSS2,在CSS1的基础上添加了一些高级概念(比如浮动和定位)和选择器(比如子选择器、相邻同胞选择器和通用选择器),后续又推出了修订版CSS2.1。 CSS3是目前最新的版本,但和之前不同,CSS3并没有一个固定的“正式发布”的版本,和HTML5一样,CSS3的版本含义被淡化,也就是说CSS3和HTML5代表的是新一代Web技术标准,不要把CSS3理解成CSS Version 3,而是CSS Next Version。

开发组成员发现在CSS2.1的开发过程中,大一统的“版本”导致开发进度缓慢并难于维护,因此决定在新的技术标准开发中把CSS分割成若干模块来进行开发,各个模块可以单独演进到不同的级别(Level),并持续添加新的模块,使得CSS3不会出现一个最终状态(Finished)。

W3C规范中某些模块会出现Level4的字样,但这并不代表会出现CSS4,CSS3代表的不是Level3,而是代表所有CSS2.1以后新开发的特性。

所以CSS3会是一个不断动态演进的版本,这意味着在相当长的时间内不会出现CSS4(类似的,也不会出现HTML6)。

不过CSS3各个模块则有正式发布、草稿以及废弃状态。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效以及多栏布局等。各模块最新状态可以查阅:CSS Current Status - W3C

由于CSS3向下兼容CSS2.1,且很多新特性已经得到主流浏览器的支持(Chrome/FireFox/Safari/IE9+等),所以我们无需学习和比较CSS3和之前版本的区别,直接完整的学习CSS3就可以。

CSS如何工作的

CSS的工作原理是首先选择一个HTML元素(如<p>,接着选择一个想要修饰的属性(比如颜色), 最后在选择到的元素属性上应用一个具体的(比如red):

p{ color: red;}

样式(Style)一语可能会引起歧义,我们可能会认为CSS只是用来改变文本颜色、大小和字体的,实际上CSS还可以用于布局设计,比如元素定位、间距、多列、居中等。

CSS写在哪里

CSS可以作为一个属性(style)内置于HTML元素中:

<p style="color: red;">This text is red.</p>

CSS可以使用 <style> 标签写在HTML文档的头部 <head>

<html>
  <head>
    <title>Hello World</title>
    <style type="text/css">
      p{ color: red;}
    </style>
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

CSS还可以写在单独的文件中

你可以把CSS代码都放在扩展名为 .css 的文件中,然后使用 <link> 标签添加到HTML文档的头部 <head>

p{ color: red;}
<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

HTML文档将负责载入该样式表文件,上例中,将调用和HTML文档相同目录下的 style.css 文件。

第三种使用独立CSS文件的方法是推荐的方式。

为什么不直接写在HTML文档中?

前面我们提到过,是为了把 内容(content) (HTML) 和 表现(presentation) (CSS) 分离开。

内容和表现分离的好处是明显的:

  • 同一份文档可以拥有不同的呈现,提高了文档的可复用性和设计灵活性
  • 内容和样式分离使得HTML文档精简清晰,可读性高
  • 由于浏览器会缓存静态文件如CSS/JS,这将有助于提高网站性能和SEO评估
  • 代码的可维护性好

如果你想从视觉上实际感受下,可以访问:CSS禅花园:里面所有个性化设计共用同1份HTML文档。