HTML advanced CSS (3)

Some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a format to be applied not only to a particular HTML tag element, but also to its descendants.

<!doctype html>            h1{color:red;}
            . Shige{color:green;}            </style>            <H1 class= "Shige" > Goose Goose,<span> Song to Heaven </span>
                        
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. But there are some CSS styles that do not have inheritance such as "border:1px solid red;" In this example, the function of the code is simply to set the P tag with a border of 1 pixels, a red, a solid border, and no effect for the child element span.
h1{color:red;}  
Sometimes we set a different CSS style code for the same element, so the element will enable that CSS.
H1 and. Shige are all matched to this H1 label, so what color does it show? Green is the right color, then why? is because the browser is based on the weights to determine the use of that CSS style, the weight of the high value of the use of that CSS style.
The label has a weight of 1, and the class chooses the Fu Quan value of 10,id to select the Fu Quan value of the highest bit 100.
p{color:red;} /* Weighted value is 1*/
P Span{color:green;} /* Weighted value is 1+1=2*/
. Warning{color:white;} /* Weighted value is 10*/
P Span.warning{color:purple;} /* Weighted value is 1+1+10=12*/
#footer  . Note P{color:yellow;} /* Weighted value is 100+10+1=111*/

 
  
 
Cascade
What if there are multiple CSS styles in the HTML file that can exist for the same element and if the multiple CSS have the same weight value?
Cascading is in the HTML for the same element can have more than one CSS style exists when the same weight of the style exists, depending on the order of the CSS style, the CSS style is at the back of the application.
<!doctype html>
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 not difficult to understand: inline style sheet > embedded style sheet > external style sheet
Importance
When we do the page code, there are some special situations that need to have the highest weights for some style settings. We can use it at this time! Important to solve
P{color:red!important;}
The text in the paragraph is then shown in red, note: (!important) to be written in a semicolon;
When the page creator does not set the CSS style, the browser will display the Web page in a nested format, and users can also set their own style in the browser, for example, some users are accustomed to set the font size to larger, so that they see the text of the page more clearly. Style priority is: Browser default Style < page author Style < user-set style, but the!important priority style is the exception, with the highest weight, higher than the style set by the user.

 
  
 
Text font
We can use CSS styles to set style attributes such as font size, font size, color, and so on for text in a Web page.
<!doctype html>
 
  
 
 element classification  
 in CSS, tag elements in HTML can be broadly divided into three different types: block-level elements, Inline elements (which can also be called inline elements), inline block-level elements. The 
 commonly used block-level elements are: 
 <div>/<p>/ commonly used inline elements are: 
 <a>/<span>/<br>/<i>/ <em>/<strong>/<label>/<q>/<var>/<cite>/<code> 
 Common inline block elements are 
 < Img>/<input> 
  block-level elements 
 
  set Display:block to display elements as block-level elements, inline element A is converted to block elements, so that the a element has a block element a{ Display:block;} The characteristics of block-level elements: 
 1) Each block-level element starts from the new row, and the subsequent element is also a row. The height, width, row height, and bottom margin of the 
 2) elements can be set. 
 3) If the element width is not set, it is 100% of its own parent container (and the width of the parent element is the same) unless a width is set. The 
  inline element 
  setting Display:inline the element as an inline element, as in the previous method. 
 Features of inline elements: 
 1) and other elements can be on one line, and 
 2) element height, and width, and top and bottom margins are not set! The width of the 
 3) element is the width of the text or Picture it contains and cannot be changed. 
  Inline block-level elements  
 as a name, inline block-level elements are both inline and block-level elements. Display:inline-block. The features of the 
 inline block-level element are converted: 
 1) and the other elements are on one line, and the 
 2) element's height, width, row height, and top and bottom margins can all be set. 
 HTML advanced CSS (3)