武林網(www.49028c.com)文章簡介：CSS英文教程:CSS語法:Syntax.

The CSS syntax is made up of three parts: a selector, a property and a value:

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:

body {color:black}

Note: If  the value is multiple words, put quotes around the value:

p {font-family:"sans serif"}

Note: If you want 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
}

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
}

With the class selector you can define different styles for the same type of HTML element.

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:

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

Note: To apply more than one class per given element, the syntax is:

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

The paragraph above will be styled by the class "center" AND the class "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:

.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 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

Do NOT start a class name with a number! This is only supported in Internet Explorer.

You can also apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that have a type attribute with a value of "text":

input[type="text"] {background-color:blue}

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of "green":

#green {color:green}

The style rule below will match the p element that has an id with a value of "para1":

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

 Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

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:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}