1. Basic syntax
The definition of CSS consists of three parts: selector, properties, and value ).
The basic format is as follows:
Selector {property: Value} (selector {property: Value })
The selector can be in multiple forms. Generally, You need to define the HTML tag of the style, such as body, P, table ......, You can use this method to define its attributes and values. The attributes and values must be separated by a colon: body {color: Black}
The selector body refers to the page body. color is the attribute that controls the text color, and black is the color value. In this example, the text in the page is black.
If the attribute value is composed of multiple words, quotation marks must be placed on the value. For example, the font name is often a combination of several words:
P {font-family: "sans serif"} (defines the paragraph font as sans serif)
To specify multiple attributes for one selector, use semicolons to separate all attributes and values:
P {text-align: center; color: Red} (the section is arranged in the center and the text in the section is red)
To make the style sheet you define easy to read, you can use the branch writing format:
P
{
Text-align: center;
Color: black;
Font-family: Arial
}
(The section is arranged in the center, the text in the section is black, and the font is Arial)
2. Select a Contact Group
You can combine the delimiters of the same attributes and values to separate the delimiters with commas (,) to reduce repeated style definitions:
H1, H2, H3, H4, H5, H6 {color: Green} (This group contains all the title elements, and the text of each title element is green)
P, table {font-size: 9pt}
(The text size in paragraphs and tables is 9 characters.) The effect is equivalent:
P {font-size: 9pt}
Table {font-size: 9pt}
3. class selector
You can use class delimiters to define different styles for the same element classification. When defining class delimiters, add a dot before the name of the custom class. If you want two different paragraphs, one of which is aligned to the right and the other is centered, you can first define two classes:
P. Right {text-align: right}
P. Center {text-align: Center}
Then you can add the class parameter that you defined in HTML tags to different paragraphs:
<P class = "right"> This section is right aligned </P>
<P class = "center"> This section is centered </P>
Note: The class name can be any English word or a combination of numbers and numbers starting with English. Generally, it is briefly named based on its functions and effects. Another usage of class selector is to omit the HTML Tag name in the selector, so that several different elements can be defined as the same style:
. Center {text-align: Center} (class Separators of the definition. Center are arranged in the center of the text)
Such a class can be applied to any element. In the following example, both the H1 element (Title 1) and the P element (paragraph) are classified as the "center" class, so that the style of the two elements follows the class selector ". Center:
<H1 class = "center"> this title is centered <P class = "center"> This section is also centered </P>
Note: This class selector for omitting HTML tags is the most commonly used CSS method. Using this method, we can easily apply pre-defined class styles to any element.
4. ID Selector
On the HTML page, the ID parameter specifies a single element. The ID selector defines a separate style for this single element. The application of the ID selector is similar to the class selector. You only need to replace the class with the ID. Replace the class in the above example with ID:
<P id = "Intro"> This section is aligned to the right </P>
The definition ID selector must add a "#" sign before the ID name. Similar to the class selector, there are two methods to define the attributes of the ID selector. In the following example, the ID attribute matches all the elements of ID = "Intro:
# Intro
{
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
} (The font size is 110% of the default size; bold; blue; the background color is transparent)
In the following example, the ID attribute only matches the paragraph elements of ID = "Intro:
P # intro
{
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
}
Note: The ID selector has many limitations. You can only define the style of an element separately. It is generally used only in special cases.
5. Contains the selector.
You can define a style table with a link definition for an element. element 1 contains element 2. In this way, only element 2 in element 1 is defined, there is no definition for element 1 or element 2, for example:
Table
{
Font-size: 12px
}
The link in the table changes the style, the text size is 12 pixels, and the text of the link outside the table is still the default size.
6. cascading of Style Sheets
Cascade is inheritance. The style table inheritance rule is that external element styles are retained and inherited to other elements contained in this element. In fact, all nested elements in an Element Inherit the attribute value specified by the outer element. Sometimes, a lot of nested styles are superimposed together unless they are changed separately. For example, nested P tags in Div tags:
Div {color: red; font-size: 9pt}
......
<Div>
<P>
The text of this paragraph is red 9
</P>
</Div>
(The content in the P element inherits the attributes defined by Div)
Note: In some cases, the internal selector does not inherit the values of the surrounding selector, but theoretically these are all special. For example, the value of the upper boundary attribute cannot be inherited. intuitively, a paragraph does not have the same upper boundary value as the document body.
In addition, when the style sheet inheritance encounters a conflict, the last defined style always prevails. If the color of P is defined in the above example:
Div {color: red; font-size: 9pt}
P {color: Blue}
......
<Div>
<P>
The text in this paragraph is blue 9.
</P>
</Div>
We can see that the text size in the section is 9, which inherits the DIV attribute, while the color attribute is defined according to the final. When different delimiters define the same element, the priority of different delimiters must be considered. Id selector, class selector, and HTML Tag selector. Because the ID selector is added to the last element, the highest priority is followed by the class selector. If you want to surpass the relationship between the three, you can use it! Important improves the priority of a style sheet, for example:
P {color: # ff0000! Important}
. Blue {color: # 0000ff}
# Id1 {color: # FFFF00}
At the same time, we add these three styles to a paragraph on the page, which will be followed! The HTML Tag style of important declaration is red. If not! Important, the highest priority ID is selected as yellow text.
7. Notes
You can insert comments in CSS to illustrate the meaning of your code. Comments help you or others understand the meaning of the code when editing and changing the code. Annotations are not displayed in the browser. CSS comments "/*"
It starts with "*/" and ends with the following:
/* Define the paragraph style table */
P
{
Text-align: center;/* Text center arrangement */
Color: black;/* The text is black */
Font-family: Arial/* The font is Arial */
}
