CSS is the Cascading Style Sheets stacked style sheet
First, the basic syntax
1, select the selection
Selector {properties: value}
Select {Property: Value}
Such as: body {color: black}
(The body section of the Body page, the Color Control of the text color properties, the value of the Black property, the effect of this example is black.)
If the value of the attribute is composed of multiple words, it must be an quoted number, such as
P {font-family: "sans serif"}
If a selector specifies multiple properties, separated by a semicolon, such as
P {text-align: center; color: black}
For easy reading, branch writing
P {text-align: center;
Color: Black;
Font-family: arial}
(The paragraph is ranked in the middle, the paragraph Chinese is black, the font is arial)
2, select the consider group
Combine the selectors of the same properties and values, separated by commas, such as
H1, H2, H3, H4, H5, H6 {Color: Green}
(All the above titles are green)
p, table {font-size: 9pt}
(Parallel and the text size of the text is 9 characters)
Equivalent to p {font-size: 9pt}
Table {font-size: 9pt}
3, class selector
If you want two different paragraphs, one to right, one place, you can define two classes first
P.right {text-align: right}
p.Center {text-align: center}
Then use in different paragraphs, just join the Class parameters you defined in the HTML tag:
paragraph to right to right
paragraph hidden "qi
The name of the class can be any English word or combination of the beginning of the English.
Another usage of the class selector is to omit the HTML tagname in the selector, which can define several different elements into the same style:
.center {text-align: center} (defined .centr is ranked in the word)
Such classes can be applied to any element, such as:
This paragraph is ranked in
4, ID selector
Defining the ID selection To add a "#" number before the ID name, there are two ways as the black class selection.
The following example only matches the paragraph element of ID = "INTRO":
P # INTRO
{
FONT-SIZE: 100%;
Font-weight: bold;
Color: # 0000FF
Background-Color: Transparent
}
(The font size of this paragraph is 110% of the default size; bold; blue, background color transparent)
The following example, ID attribute matches all ID = "INTRO" elements:
#intro
{
FONT-SIZE: 100%;
Font-weight: bold;
Color: # 0000FF
Background-Color: Transparent
}
5, including the selector
You can include a relationship definition for an element, and element 1 contains element 2, which is defined on element 2 in element 1, and is not defined for element 1 or element 2, such as Table A.
{
FONT-SIZE: 12PX
}
The link text in the table is 12 pixels, and the table extra linked text is still the default size.
6, the layers of style sheets
Layer is inheritance, such as nested P marks in the DIV mark:
Div {Color: Red; font-size: 9pt}
...
This paragraph text is a red 9 word
(The content of the P element inherits the attribute defined by the DIV)
When the inheritance of the style sheet has conflicts, the final definition is accurate, such as:
Div {Color: Red; font-size: 9pt}
P {color: blue}
...
This paragraph text is blue 9 word
The text in the paragraph inherits the DIV attribute, and the Color property is in accordance with the final definition.
Priority! Important> ID Select> Class Select> Select, such as:
p. {color: # ff0000! important}
.bo {color: # 0000f}
# id1 {color: # fff00}
We also add this three styles to a paragraph, and it will finally follow it! Important declares that if you remove it! Important is yellow text according to the priority ID selection.
7, note
Note Easy to read, will not display in the browser, such as
/ * Define paragraph style * /
p
{
Text-align: center; / * text ranks in text * /
Color: Black / * text is black * /
Font-family: / * font is arial * /
}
Second, pseudo-dynamic link
1, grammar
Selector: pseudo-class {protety: value}
Select: Pseudo-class {attribute: value}
Class selection and other selectors can be mixed with pseudo-class
Selector.class: pseudo-class {protety: value}
Select. Category: Pseudo {Property: Value}
2, the anchor pseudo
Pseudo-class for the most commonly used 4 A (anchor) element
A: Link {color: # ff0000; text-decoration: none} / * Unprecedented link * /
A: visited {color: # 00ff00; Text-Decoration: none} / * Accessed link * /
A: Hover {color: # ff00ff; text-decoration: underline} / * mouse on the link * /
A: Active {color: # 0000FF; Text-Decoration: underline} / * Activation Link * /
In the above example, this link bit is accessed as red without scribing. When the access is green, there is no underline. When the activation is blue, the blue is underline, the mouse is purple on the link.
3, combination of pseudo-class and class selectors
We define a set of connects to red, the access is blue, and the other is green, and the access is yellow.
A.Red:LINK {color: # ff0000}
A.Red: Visited {color: # 0000ff}
A. Blue:link {color: # 00ff00}
A. Blue:Visited {color: # ff0000}
application
The second group connection 4, other pseudo classes
Frust-letter and Frist-line, IE 5.5 support.
