剧烈引荐：十分不错的样式表CSS教程(1)
日期：2013-09-10 浏览次数：21064 次
本文是一篇关于CSS的使用概述，并提供了一些示例来演示CSS是如何任务的，以便于你愈加无效的学习CSS。
本文并不是参考或者兼容性指南一类的文章（虽然其中有一些非常好的参考和兼容性注解的链接)。如果你曾经习惯了使用CSS，并想学到更多款式表的知识，我们保证你会在本文中能够找到一些非常有用的信息:)。
●CSS不能做什么？
层叠款式表通常被理解为实现“内容”和“风格”分开的手段。其实这种说法并不完全正确，由于依据你对“风格”和“内容”的定义不同，层叠款式表的作用也不尽相反。
HTML定义了文档的结构，同时将注释和图像及其他材料通过标记(tags)组织到一同。而CSS并不能影响文档的结构组成。
层叠款式表(CSS)所做的是定义这些元素以什么样的版式、什么样的颜色、间距……显示到页面当中，它还可以影响页面内容的规划,却不可能改变页面的结构。CSS只能在无限的限制内使用于元素(不是万能的)，而文档元素的结构还是要通过标记言语HTML来定义。
●使用CSS有什么好处？
所有的HTML标记(Tags)都有各自默认的款式(style).也就是说,浏览器会按照一定的基本规则来解释和显示每一个标记中的内容，但是我们通过内联款式(inline style)就可以优先于浏览器的默认款式来控制内容的显示款式。浏览器默认的款式表优先权最低。内联款式示例如下：
| <p style="float:right;margin-left:1em;width:50%">Some text.</p> |
内联款式影响的仅仅是某些特定的标记，如上面示例当中的<P>...</P>。而层叠款式表却提供了使用于所有给定标记款式或者特定子集合款式的途经。
CSS允许你设置与内容文档分离的“批量”款式表文档，和款式内嵌(inline style)至HTML代码当中的方法不同，这就是款式表使“内容”和“款式”分离说法的由来。同时，层叠款式表文档可以让更多的内容文档共享使用。
●包含款式表
每一个款式表都是一系列的款式规则的集合。可以在内容文档的<HEAD>...</HEAD>之间使用STYLE标记来定义，示例如下：
<style type="text/css"> ...style rules... </style> |
或者象调用JavaScript脚本文件那样通过URL链接到外部款式表文件，外联款式表利用 LINK 标记来设置，位置在内容文件的<HEAD>...</HEAD>内，示例如下：
<link href="url" rel="stylesheet" type="text/css">
注：在WEB站点内共享一个公共款式表是非常有用的，只需修正公共款式表，就能够影响所有调用该款式表的内容文档。
在同一文档内可以设置多个内联款式(inline style)和外联款式(link),但是具体文档显示时浏览器要依据那些款式的顺序来确定使用什么款式。(顺序非常重要)
●定义款式规则
CSS规则设置由下面所示的语句组成：
selector { property : value } selector { |
"Selector"定义了什么元素将要被款式规则所影响。紧接下来是声明区，由大括号"{","}"包围。内部由若干个声明(声明个数大于等于零>=0)组成。每一声明之间由分号“；”隔开。
每个声明由“属性(property)”和具体的一个“值(value)”组成，他们之间通过冒号连接。“属性”是一个标识符，例如字体大小“font-size”，背景色“background-color”...等等。"值"的多少要控制在标识符属性值的范围内。
空白处以及分行方式来显示次要是为了阅读方便，空白处可以加入“注解”文字，示例如下：
selector { /* a comment for this rule */ |
注解包含在/ *和* /内，同JavaScript、C程序设计言语的注释写法一样。
●Selectors 选择器
最简单的方式由标记名称组成，不同的标记款式规则相反时可以通过逗号“，”连接合并到一同说明，示例：
h1 { background-color: #ffff00 }
h2 { background-color: #ffff00 }
h3
