今天发现了已经被翻译完的一个版本。嗯，有点失望。不过反正我还是要继续学习，所以不会就此结束我的翻译！后来仔细对照了一下，还是有些地方不一致的。我只忠于我的原文就好了。
不过也要记住，在做事之前先观察好整个大背景环境。不要做重复劳动。
今天的内容还是很简单的一些东西。我记得第一次设计页面的时候被人问到id和class的区别。找了一篇文章，来解释这个问题>>>
喜欢的站点：http://www.w3school.com.cn/index.html
原文出处：http://www.w3schools.com/css/css_syntax.asp
Syntax
语法
The CSS syntax is made up of three parts: a selector, a property and a value:
CSS语法由三部分组成：一个选择器，一个属性和一个值：
selector {property: value} |
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
选择器一般就是你希望定义的HTML元素/标签，更改你希望更改的属性，给每个属性赋一个值。属性和值之间用冒号分割，二者由大括号包围：
body {color: black}
|
Note: If the value is multiple words, put quotes around the value:
注：如果值有多个单词构成，用引号引起来：
p {font-family: "sans serif"}
|
Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
注：同一选择器下的多个属性由分号分割。下面的例子演示了怎样将一个段落居中并将文字设为红色：
p {text-align:center;color:red}
|
To make the style definitions more readable, you can describe one property on each line, like this:
为了方便阅读，可以将各个属性分行展示：
p |
Grouping
组合
You can group selectors. Separate each selector with a comma. In the
example below we have grouped all the header elements. All header elements will
be displayed in green text color:你可以将多个选择器组合在一起，用逗号链接。下例将所有标题元素文本定义为红色：
h1,h2,h3,h4,h5,h6 |
The class Selector
选择器“类”
With the class selector you can define different styles for the same type of HTML element.
使用类选择器可以为同一类型的HTML元素定义不同的样式。
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
比如，你希望同一个文件中的段落有两种样式：一种居右，一种居中。你可以按照下面的方式定义：
p.right {text-align: right}
|
You have to use the class attribute in your HTML document:
这样，你就需要用类来定义HTML元素：
<p class="right"> <p class="center"> |
Note: To apply more than one class per given element, the syntax is:
注：如需给一个元素定义多个类，可以这样写：
<p class="center bold"> |
The paragraph above will be styled by the class "center" AND the class "bold".
这个段落就被同时赋予两个类，名字分别为“center”和“bold”。
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
如果你需要定义所有HTML元素中的某个类，需要将标签名去掉，如下例所示。此例中，所有具有“center”类厄HTML元素都会被居中显示：
.center {text-align: center}
|
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
在下面的例子中，h1和p都有叫做“center”的类，这就说明，h1和p都要遵守“.center”这一选择器的规则：
<h1 class="center"> <p class="center"> |
Do NOT start a class name with a number! It will not work in Mozilla/Firefox. |
不要以数字为首命名一个类哦，这样将在火狐中失效。Add Styles to Elements with Particular Attributes
为具有某种特定属性的元素添加样式
You can also apply styles to HTML elements with particular attributes.
一个已经具有某种属性的HTML元素仍然可以被定义样式。
The style rule below will match all input elements that have a type attribute with a value of "text":
下面的例子中，蓝色背景色的样式将对所有据有text属性值的input元素生效：
input[type="text"] {background-color: blue}
|
The id Selector
id选择器
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
你也可以用id选择器来定义HTML元素的样式。id选择器以“#”号开头。
The style rule below will match the element that has an id attribute with a value of "green":
下列的样式举例中，所有据有“green”id属性的元素的文本内容都将被定义为绿色。
#green {color: green}
|
The style rule below will match the p element that has an id with a value of "para1":
下面的样式作用于所有据有“para1”id的所有段落（p）元素：
p#para1 |
|
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. |
不要以数字开头命名ID！这样样式将在火狐中失效。
CSS Comments
CSS注释
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
注释用来解释你的代码，可以帮助日后对源代码进行编辑。注释是不会被浏览器识别的。CSS注释以“/*”开始，以“*/”结束：
/* This is a comment */ |
Posted by yuvia
