Syntax for CSS

1. Basic grammar

The definition of CSS is composed of three parts: selectors (selector), attributes (properties), and values (value).

The basic format is as follows:

selector {Property:value}

(Selector {property: value})

A selector can be a variety of forms, typically the HTML tag you want to define a style for, such as body, P, TABLE ..., you can define its properties and values by this method, and the attributes and values are separated by colons:

Body {Color:black}

Selector body is the main part of the page, color is the control of the color of the text, black is the color of the value, the effect of this example is to make the text in the page is dark.

If the value of a property is composed of more than one word, you must enclose the value in quotes, such as the name of the font that is often a combination of several words:

P {font-family: "Sans serif"}

(define paragraph font as sans serif)

If you need to specify multiple properties for a selector, we use semicolons to separate all the attributes and values:

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

(The paragraph is centered, and the text in the paragraph is red)

To make your defined style sheet easy to read, you can use the writing form of a branch:

p
{
text-align: center;
color: black;
font-family: arial
}

(The paragraph is centered, the text in the paragraph is black, and the font is Arial)

2. Selector Group

You can combine selectors of the same attributes and values to write, separating the selectors with commas, which reduces the style repetition definition:

H1, H2, H3, H4, H5, h6 {Color:green}

(This group includes all the header elements, and the text for each heading element is green)

P, table{font-size:9pt}

(Text size in paragraphs and tables is 9th words)

The effect is exactly equivalent to:

p { font-size: 9pt }
table { font-size: 9pt }

3. Class Selector

With the class selector you can define different styles for the same element category, and when defining a class selector, add a point number to the name of the custom class. If you want two different paragraphs, one paragraph aligned to the right, and one paragraph centered, you can define two classes first:

p.right {text-align: right}
p.center {text-align: center}

And then use it not in a different paragraph, just add the class argument you defined in the HTML tag:

<p class="right"> 这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>

Note: The name of the class can be any English word or a combination of the beginning and the number in English, generally with its function and effect briefly named.

There is also a use of the class selector to omit the HTML tag name in the selector so that several different elements can be defined in the same style:

.center {text-align: center}

(The class selector for the definition. Center is centered in the text)

Such a class can be applied to any element. Here we make the H1 element (Heading 1) and the P element (paragraph) grouped into the "center" class, which causes the styles of the two elements to follow the ". Center" class selector:

这个标题是居中排列的
<p class="center">
这个段落也是居中排列的
</p>

Note: This class selector, which omits HTML tags, is the most commonly used CSS method, and it is convenient for us to apply a predefined class style to any element.

4. ID Selector

The ID parameter in the HTML page specifies a single element, and the ID selector is used to define a separate style for this single element.

The ID selector is similar to the class selector, as long as the class is replaced with an ID. Replace the class in the previous example with an ID:

<p id="intro">
这个段落向右对齐
</p>

Define the ID selector to precede the ID name with a "#" number. The same as the class selector, there are two ways to define the properties of the ID selector. In the following example, the id attribute matches all elements of the id= "Intro":

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

(font size is 110% of the default size; bold; blue; background color transparent)

In the following example, the id attribute only matches the paragraph element of id= "Intro":

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

NOTE: The ID selector is so restrictive that you can only define the style of an element individually, which is typically used only in special cases.