随着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文档。