原文链接 http://docs.webplatform.org/wiki/guides/getting_started_with_css
本指导涵盖了CSS的基本原理，包括CSS解析、选择器、注释和如何将CSS规则应用到HTML内容上。
这篇文章涵盖了CSS的基础，可以帮助你入门这一门强有力的样式语言。你将学习如何应用CSS到HTML文档里，可以使用style属性来设置行内样式，或者在文档<head>部分嵌入<style>标签来书写样式内容，亦或是引入一个独立的样式文件到外面的文档中来。
你也会学习到后面的方法--使用<link>元素来链接一个独立的样式表--这对维护和缓存有很大意义。
另外，还有CSS的基本语法，包括添加注释，选择器类型和分组。
当HTML结构化文档并告知浏览器页面元素的功能后，CSS会提供规则来指导浏览器如何显示这些页面元素--包括样式、空隙、颜色等等。如果说HTML是组成一栋房子结构的砖头的话，那么CSS就是装饰房子的石膏和油漆。
CSS样式使用一套系统规则。CSS规则：
例如，一个CSS规则可以这样描述：
我想让页面上所有被<h2>标签包围的文字变成绿色。
或者
我想使用一个名为author-name的类设置所有<p>元素背景色为红色，放大文本两倍字体，并增加10px的间距。
CSS不是像HTML一样的标记语言，也不是像JavaScript一样的编程语言。它是一门声明性语言，它使用自己的逻辑去寻找和标记页面上元素需要被应用的样式。那些在现代web开发到来之前的定义了接口的旧技术总是会被混合到展示和结构之中。正如我们在其他教程中讨论的一样，在瞬息万变的web环境之中，这并不是一个明智的选择，所以这也是为什么会诞生CSS。
样式规则可以操作通过不同方式选择的不同的项集。例如：它们可以直接是HTML元素（body、article、nav、list、p、em、strong等等），或者是被应用在任何元素上的自定义类或ID。下面是基本的格式：
selector { property1: value; property2: value; property3: value; }
各相关部分详解如下：
选择器:它标记了哪些HTML元素会受到规则影响，可以使用像<body>一样的元素名，也可以使用类属性值作为标识符。当使用元素名的时候，选择器只是使用名字替代。使用类的语法是.类名;使用ID的语法是#id值。更多完整的描述后续到来。
大括号里包含了“属性：值”对，彼此使用分号隔开；属性和它们各自的值使用冒号隔开。
属性定义了你想对选择的元素进行的操作。这些属性包括文字颜色、背景颜色、元素在页面上的位置、字体、边框颜色和粗细，还有很多其他用于展现和布局特征的样式。
值设定了每一个被应用在元素上的属性的详细说明，并且值是依赖于属性的。例如，颜色属性可以使用十六进制的#336699，也可以使用RGB值rgb（12,134,22），或者是颜色名red，green，blue等。属性影响位置、间距、宽、高和一些其他的能够使用诸如像素、em、百分比、厘米一样精确单位的样式。
回顾这个例子：
p { margin: 5px; font-family: arial; color: blue; }
这个规则影响的HTML元素是<p>--页面上所有的<p>元素，这个CSS规则会被加载到文档中去并应用这些样式，除非又有其他特殊样式也被加载到文档中（并且在该样式之后）。这个规则影响了段落的间距，字体和文本颜色。间距是5像素，字体是Arial，颜色是蓝色。
一组CSS规则可以写在一个CSS文件中以组成一个样式表。这是写CSS规则时最基础的语法了。有一些规则非常复杂，但不多，幸好CSS本身是简单的。
CSS的空格和它在HTML中完全相同的工作着。多余的空格会在浏览器渲染CSS的时候被忽略，所以大多数情况下你可以增加适当的空格来使你的代码易于阅读。正如这个规则：
p { margin: 5px; font-family: arial; color: blue; }
和这个规则功能相同：
p {margin: 5px;font-family: arial;color: blue;}
也有一些关于空格的例外事项，例如，在CSS函数语法中，如果在url（background-image.png）的url和左括号之间加上一个空格，url （background-image.png）就不会正常工作。但通常，只要你包括必要的大括号、 冒号和分号来分隔不同的部分，浏览器是能够理解属性和值的。
有一件事需要早些知道，就是如何在CSS中添加注释。在任何语言中，注释可以帮助澄清代码的意图。你可以在/*和*/中写注释。注释可以写多行，浏览器会忽略注释中的文本：
/* This is basic CSS rule syntax */ selector{ property1: value; property2: value; property3: value; }
你也可以进行选择器分组。如果你想把相同的样式应用到<h1>和<p>元素上，你可以使用下面的CSS：
h1 { color: red; } p { color: red; }
但是，这并不理想，因为你在重复相同的信息。为了补救，你可以使用逗号来分组选择器，则后面括号中的规则会被应用到之前的选择器：
h1, p { color: red; }
选择器有一些不同的类型，分别匹配了标记的不同部分。你最常遇到这三种类型的选择器：
p {}
元素选择器会匹配页面上所有对应名字的元素（像上面<p>会被匹配），使用HTML元素（标记）作为选择器，你可以影响到页面上所有使用该元素标志的内容。
.example {}
类选择器匹配所有指定对应class属性值的元素，像上面的规则将会匹配<p class="example">,<li class="example">,或者是<div class="example">,亦或是其他拥有class属性值为example的元素。请注意，这类选择器并不会检测任何特定元素名。
#example {}
ID选择器匹配所有指定对应ID属性值的元素，像上面的规则将会匹配<p id="example">,<li id="example">,或者是<div id="example">,亦或是其他拥有id属性值为example的元素。请注意，ID选择器也不会检测任何特定元素名，但是ID值在HTML页面中必须是唯一的。
你可以把选择器放在一起来定义更多特定的规则：
p.warning {}——匹配所有拥有值为warning的class属性的段落
div#example {}——匹配拥有值为example的id属性的元素，但只有当它是div的时候
p.info, li.highlight {}——匹配所有拥有值为info的class属性的段落和值为highlight的class属性的列表元素
请注意，这并不代表你可以简写你对HTML元素的定义。例如：HTML段落仍要这么写：<p class="classname">, 但是你可以在CSS里使用p.classname {}来写它的样式。
另一件你在CSS里经常会遇见的事就是简写。它可以结合一些相关的CSS属性到一个属性中以此来节省时间和精力。在本节中，我们来看一下简写的可用类型。有关详细信息，参见CSS简写指南教程。
例如，border属性可以这样简写：
border: 2px solid black;
它等同于：
border-width: 2px;
border-style: solid;
border-color: black;
请看下面的边距规则：
div.foo { margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; }
它同样可以这样写：
div.foo { margin: 1em 1.5em 2em 2.5em; }
以下这些类型的属性可以少于四个值：
四个边的值都相同——margin：2px;
第一个值应用top和bottom，第二个值应用left和right——margin：2px 5px；
第一和第三个值分别应用top和bottom，第二个值应用left和right——margin：2px 5px 1px
有一些属性是这样工作的，包括padding、margin和outline。
margin和padding属性的简写虽然很方便，大部分时候都使用简写，但是有的情况下最好避免简写，或者要考虑清楚，例如下面这些情况：
当需要设置一个单独的margin时 当只有一种属性需要被设置的时候，同时设置多个属性的行为通常违反了KISS（Keep It Simple, Stupid）原则。
当选择器中的属性受限于很多特殊情况时 当这种情况出现的时候，它迟早会成为硬编码，这时你就需要修复或改变布局。
当你写的样式表由那些CSS技能有限的人维护时 如果你能让他们来读这篇文章，你也许不需要担心这种情况，但是最好是不要做任何假设。
当你需要在特殊情况改变其中一个值时 这种要求的出现往往是文档或样式表设计不好的信号，但并不罕见。
CSS中的C指的是级联，是指由样式规则向下流动的方法或级联。CSS规则定义的顺序是很重要的，使用规则的方法定义了它们级联的序列。
有三种方法可以将 CSS 应用于 HTML 文档: 内联样式、 嵌入式的样式和外部样式表。除非你有很好的理由使用前两种之一，请总是使用第三个选项。这么做的原因很明显，但这里不累述。
你可以像这样通过style属性应用样式到一个特殊的元素上：
<p style="background:blue; color:white; padding:5px;">Paragraph</p>
在这个属性中你可以列出所有的你想应用到该元素上的CSS属性和值。属性/值对之间使用分号分隔，属性和值之间使用冒号分隔。如果你在浏览器中打开这个示例，你会发现那个段落是蓝底白字的，并且和其他段落的字体大小也不一样。如图一：
图一：在Opera中，应用了内联样式的段落和其他段落明显不同。
内联样式的好处是，浏览器将强制使用这些设置而不管其他适用的样式。那就是，这些样式将覆盖任何其他样式表中的定义，即便是已嵌入到文档的 <head>中。
内联样式最大的问题是，维护比想象中的要难的多。使用 CSS 的目的是从文档结构中分离出表现层，但内联样式正好相反 — — 样式规则散落在整个文档里。除了维护方面的问题，内联样式丧失了CSS最强大的优势部分：级联。
嵌入样式置于文档<head>部分的<style>元素里，例如：
<style type="text/css" media="screen"> p { color: white; background: blue; padding: 5px; } </style>
这里，这些定义的样式应用到了文档中所有的段落上，如图二：
图二：在Opera中，所有的段落都被应用了嵌入样式。
嵌入样式的好处是，你不需要为每一个段落添加样式属性——你可以通过单一的定义来改变它们的样式。这意味着，你可以在一个地方修改从而使所有段落的样式都改变。但是，这仍然局限于一个文档——如果你想在一个地方定义从而影响整个站点的样式？正是如此，我们应该使用外部样式表。
外部样式表是指将你所有的 CSS 定义放在自己的文件，以.css为文件扩展名进行保存，然后在你的HTML文档中<head>部分使用<link>元素进行链接。让我们仔细看一下<link>元素:
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
href属性指向CSS文件，media属性定义哪些媒体应该应用它 (这里是screen)，type属性定义链接的资源类型(因为文件扩展名并不足以确定类型)。
图三：在Opera中，样式被定义在外部的样式表中并使用link元素链接在文档中
这种方式是全世界最好的，你可以把你的注意力集中在一个地方。这意味着你可以改动一个文件来变更整个站点的样式，浏览器可以只加载一次然后缓存样式文件，然后所有的文档都可以引用的到，这意味着更少的下载。
实际上有更多的方法可以导入外部样式文件到HTML文件中：@import属性。它可以像上面的嵌入样式一样嵌入外部样式表。语法如下所示：
<style type="text/css" media="screen"> @import url("styles.css"); /* ...other import statements or CSS styles could go here... */ </style>
如果你使用@import语法，那么导入的样式表会被首先加载进来。此外，你还可以指定仅针对某些类型的媒体需要导入的样式表，媒体类型写在导入语句的末尾（除了IE6及以下，其他浏览器都支持）。下面这段代码与上面功能相同：
<style type="text/css"> @import url("styles.css") screen; /* ...other import statements or CSS styles could go here... */ </style>
你可能不知道，“为什么在这世上我需要额外的方式来把外部样式表导入到HTML文档中呢？”答案是，不是必要的。我们是出于信息的完整性才引入@import的。这里有一些关于在<link>元素之前使用@import的优缺点，但都很小，所以选择何种方式是由你决定的，一般情况下，使用<link>元素是公认的方法。
几个关于@import的注意点：
IE6不支持媒体类型的设定，所以如果你想为不同的媒体设定不同的样式表，这就不是一个好的方案。
你写多个@import语句的代码虽然少于写多个<link>元素，但是这可以忽略不计。
您现在应该掌握基本的 CSS 规则、 选择器、 属性和值。级联样式表的详细信息，请参见本节中的其他教程。
原文：http://www.cnblogs.com/devlee/p/4942093.html