CSS Learning (1) Selector

CSS syntax http://www.w3school.com.cn

1. CSS syntax consists of three parts: selector, attribute, and value:

 
Selector {property: Value}
 

(1) selector is usually the HTML element or tag you want to define. Property is the attribute you want to change and each attribute has a value. The attribute and value are separated by colons and surrounded by curly brackets, thus forming a complete style Declaration (Declaration ):

 
Body {color: Blue}
 

Above lineCodeIt defines the text color in the body element as blue. In the above example, the body is the selector, and the part included in the curly brackets is the declaration. The Declaration is composed of two parts: attribute and value, color is attribute, and blue is value.

(2) What if you do not want the "verdana, sans-serif" font to be inherited by all sub-elements? For example, you want the paragraph to have a font of times. No problem. Create a special rule for P so that it will get rid of the rule of the parent element:

Body{Font-family:Verdana, sans-serif;}TD,Ul,Ol,Ul,Li,DL,DT,Dd{Font-family:Verdana, sans-serif;}P{Font-family:Times, "Times New Roman", Serif;}
 

(3) For example, if you want the strong element in the list to be changed to italics, rather than the regular italics, you can define a derived selector as follows:

Li Strong{Font-style:Italic;Font-weight:Normal;}
 

Note the context of the Blue Code marked as <strong>:

< P > < Strong > I am in bold , Not Italic , Because I am not in the list , So this rule does not work for me. </ Strong > </ P > <Ol > < Li > < Strong > I am a Italic . This is because   Strong   The element is located in   Li   Element . </ Strong > </ Li > < Li > I am a normal font . </ Li > </Ol >

In the above example, only the style of the strong element in the Li element is italic, and no special class or ID needs to be defined for the strong element. The code is more concise.

2. ID Selector

(1) The ID selector can specify a specific style for HTML elements marked with a specific ID.

The ID selector is defined.

The following two ID selectors can be used to define the color of the first element as red, and the color of the second element as Green:

 
# Red{Color: red ;}# Green{Color: green ;}
 

In the following HTML code, the P element whose ID attribute is red is displayed in red, while the P element whose ID attribute is green is displayed in green.

 
<PId = "red"> This paragraph is in red. </P> <pId = "green"> This section is green. </P>
 

Note:The ID attribute can only appear once in each HTML document..

(2) ID selector and derived Selector

In modern la S, the ID selector is often used to create a derived selector.

# Sidebar P{Font-style:Italic;Text-align:Right;Margin-top:0.5em;}
 

The above style will only apply to paragraphs that appear in the element where ID is sidebar.

3.Class selector ---- display with a dot:

 
. Center{Text-align: Center}
 

In the preceding example, all HTML elements with the center class are centered.

In the following HTML code, both H1 and P elements have center classes. This means both of them will comply with the rules in the ". Center" selector.

 
<H1Class = "center"> This heading will be center-aligned Class = "center"> This paragraph will also be center-aligned. </P>
 

Note: the first character of the class name cannot contain numbers! It does not work in Mozilla or Firefox.

Like ID, class can also be used as a derivative selector:

 
. Fancy TD{Color: # f60; Background: #666 ;}
 

In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (A bigger element named fancy may be a table or Div)

Elements can also be selected based on their classes:

 
TD. Fancy{Color: # f60; Background: #666 ;}
 

In the above example, the table unit named fancy will be orange with a gray background.

 
<TDClass = "fancy">
 

YouThe number of times the fancy class can be assigned to any table element..

4. Multiple styles

If some attributes are defined by the same selector in different style sheets, the attribute values will be inherited from more specific style sheets.

For example, an external style sheet has three attributes for the H3 selector:

 
H3 {color: red; text-align:Left; Font-size:8pt;}
 

The internal style sheet has two attributes for the H3 selector:

 
H3 {text-align:Right; Font-size:20pt;}
 

If the page with an internal style sheet is linked to an external style sheet at the same time, the style obtained by H3 is:

 
Color:Red; Text-align:Right; Font-size:20pt;
 

That is, the color attribute will be inherited from the external style table, and the text arrangement (text-alignment) and font-size will be replaced by the rules in the internal style table.