Html+css Notes CSS Primer sequel

Inheritedof CSS Some stylesis inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants (labels).
Syntax:

 
   
  

  
    
   
p{color:red;}
  
    
   
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
 
   
  

The code above shows:a color applied to the P tag, which applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.
Syntax:

 
   
  

  
    
   
p{border:1px solid red;}
  
    
   
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
 
   
  

in the example above, the function of the code is simply to set the P tag with a border of 1 pixels, a red, a solid border line, and for the child element span is useless.
ParticularitySometimes we set a different CSS style code for the same element, so which CSS style does the element enable?
Syntax:

 
   
  
 
    
   
< Span class= "PLN" >p{color:red;}  
  
    
   
.first{color:green;}   
 
    
   
<p    class  =   "first"  >   I was a  when I was in third grade. <SPAN>   timid  </SPAN>   the little girl.  </P>   
 
   
  
 

p and. First are matched to P on this tab, so what color does it show? Green is the right color, then why? This is because the browser uses the weights to determine which CSS style to use, and which CSS style to use when the weights are high.
here are the rules for weights: The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100.
Syntax:

 
   
  
 
    
   
< Span class= "PLN" >p{color:red;}/* Weighted value 1*/  
 
    
   
p span{color:green;}/* Weighted value 1+1=2*/  
 
    
   
.warning{color:white;}/* Weights 10*/  
 
    
   
 p span.warning{color:purple;}/* Weighted value 1+1+10=12*/  
 
    
   
 #footer. Note P{color:yellow;}/* Weight value is 100+10+1=111*/ 
 
   
  

Note : There is also a special weighted value- inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.
CascadeLet's consider a question: if you can have more than one CSS style in the HTML file for the same element and the multiple CSS styles have Same Weight valueWhat to do?
Cascadeis that there can be multiple CSS styles for the same element in the HTML file, and when a style with the same weight exists, it is determined by the order of the CSS styles, and the CSS style at the very back is applied.
Syntax:

 
   
  
 
    
   
< Span class= "PLN" >p{color:red;}  
  
    
   
p{color:green;}   
 
    
   
<p    class  =   "first"  >   I was a  when I was in third grade. <SPAN>   timid  </SPAN>   the little girl.  </P>   
 
   
  
 

The text in the last P is set to green, which is well understood and is understood as a style that overrides the previous style.

So the previous CSS style precedence is easy to understand:

inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file).

Importancewhen we do the code of the Web page, some special situations need to have the highest weights for some style settings. At this time we can use !importantto solve.
Grammar:

 
   
  
 
    
   
< Span class= "PLN" >p{color:red!important;}  
  
    
   
p{color:green;}   
 
    
   
<p    class  =   "first"  >   I was a  when I was in third grade. <SPAN>   timid  </SPAN>   the little girl.  </P>   
 
   
  
 

The text in the p paragraph is then displayed in red.
Note:!important to be written in front of the semicolon
Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly. Notice the style priority at this point: Browser Default Style < Page Creator Style < user-set style,but remember that the!important priority style is an exception, with weights higher than the user's own set style .














From for notes (Wiz)

Html+css Notes CSS Primer sequel