CSS layout password 03

Below is a commonCode:
CSS:

. Box {  
Border : 1px solid # ccc ;  
Font-size : 12px ;  
Background : # F1f1f1 ;  
Padding : 10px ;  
}

HTML:

<Div class = "box"> This is a gray box </div>

 

However, the demand increases at this time. On the page, there must be not only a gray box, but also a blue box and green.

We usually think of inheritance. Let's make the following changes:

CSS:

. Box-gray,
. Box-green {  
Border : 1px solid # ccc ;  
Font-size : 12px ;  
Padding : 10px ;  
}  
. Box-gray { Background : # F1f1f1 }  
. Box-green { Background : #66ff66 }

HTML:

<Div class = "Box-gray"> This is a gray box </div>
<Div class = "Box-green"> This is a green box </div>

 

But at this time, the demand has changed. The root and application are different. Some of the boxes use the 12 character, some use the 14 character, and some need to change to the 10 PX character, and some use the 20 PX character, it is estimated that you will have a big head at this time. If you want to use inheritance, the CSS code will become very complex, so let's test whether it can be solved through combination.
CSS:

Fs-12 { Font-size : 12px }  
Fs-14 { Font-size : 14px }  
Pd-10 { Padding : 10px }  
Pd-20 { Padding : 20px }  

. Box { Border : 1px solid # ccc ; }

. Box. Gray{Background:# F1f1f1} 
. Box. Green{Background:#66ff66}

Html

<Div class = "box gray fs-12 pd-20"> This a gray fontsize12px padding20px box </div>
<Div class = "box green fs-14 Co pd-10"> This a gray fontsize14px padding10px box </div>

 

Although several classes are combined on the class, the code and logic are very clear and easy to maintain. From the above, we can see that the "Combination" method is self-evident, but it is not perfect. Do not overdo it when splitting the combination. Otherwise, the effect may be counterproductive, only by applying combination + inheritance can we make our code more elegant and artistic.

The style above uses a class selector. Let's take a look at several commonly used selectors in CSS:

Class Selector
In CSS, the class selector is displayed with a dot: 

. Center { Text-align : Center }

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
</H1>

<PClass= "Center">
This paragraph will also be center-aligned.
</P>

Note:The first character of the class name cannot contain numbers! It cannot work in Mozilla or Firefox
Id Selector

The ID selector can specify a specific style for HTML elements labeled 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.

< P ID = "Red" > This paragraph is red. </ P >
< P ID = "Green" > This section is green. </ P >

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

Derived Selector

You can define a style based on the context relationship of an element in its position. You can use a derived selector to make the tag more concise.

For example, if you want the strong element in the list to become italic, rather than the regular italic, 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 or not, because I am not in the list, this rule does not work for me </strong> </P> <ol><Li> <strong>I am a italic. This is because the strong element is located in the 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.

Let's look at the following CSS rules:

 
Strong {color: red;} H2 {color: red ;}H2 Strong{Color: Blue ;}
 

The following is the HTML that it influences:

<P> the stronugly emphasized word in this paragraph is <strong> Red </strong>. </P> <H2> This subhead is also red. </H2><H2>The stronugly emphasized word in this Subhead is<Strong>Blue</Strong>.</H2>
 

 

In modern la S, Id selectors and class selectors are often used to create derived selectors.

 

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

 
Note:CSS is case insensitive. However, there is an exception: if it involves working with HTML documents, the class and ID names are case sensitive.