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
{
text-align: center;
color: black;
font-family: arial
}

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 
{
color: green
}

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}
p.center {text-align: center}

You have to use the class attribute in your HTML document:
你必须在你的HTML文档中使用类属性（才能显示出效果）：

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:
注意：每个HTML元素只能有一个类属性，下面的例子是错误的：

<p class="right" class="center">
This is a paragraph.
</p>

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元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字：

.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元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则：

<h1 class="center">

This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p> 

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":
下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的

#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":
下面的样式规则将匹配带有id属性值为"para1"的p元素

p#para1
{
text-align: center;
color: red
}

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注释的开头为"/*"，结束符号为"*/"，就像这样：

/* 这就是一句注释 */
p
{
text-align: center;
/* 这是另一条注释 */
color: black;
font-family: arial
}

CSS 介绍 使用 CSS

评论 (3) 1 All