Example analysis of three style methods (Id,class,style) in CSS

There are three ways we can apply styles to an object, such as div,span,table.

1: Use # To define the style, and use the ID to apply a style to the object.
Cases:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
2: Use. Define the style and apply a style to the object using class.
Cases:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
3: Do not define style, apply style to object directly using style.
Cases:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
The effect of using these three methods is the same, but we need to be aware of the priority issues between these three methods.
What if we were to define a style for an object using all three of these methods at the same time?
For example, we first define a #style {font-size:12px;} Define another one. STYLE {font-size:14px;} Finally, use the style= "font-size:16px" on the object; The code is as follows:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
In this case, the browser applies a style to the object based on the priority of three ways, that is, Style>id>class. In the above example, the text in the Div will be displayed as 16px in size.