Detailed explanation of the usage of the three application styles of id, class and style in css-HTML Tutorial-php.cn

Detailed explanation of the usage of the three application styles of id, class and style in css

伊谢尔伦

Release： 2017-07-19 13:33:18

Original

2134 people have browsed it

1: Use # to define the style and use the id to apply the style to the object.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div id="STYLE_1">用Id来给对象应用样式</div> 
</body> 
</html>

Copy after login

2: Use . to define the style, and use class to apply the style to the object.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
.STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div class="STYLE_1">用class来给对象应用样式</div> 
</body> 
</html>

Copy after login

3: Do not define a style, use style directly to apply styles to objects.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
</head> 
<body> 
<div style="font-size:20px">用style来给对象应用样式</div> 
</body> 
</html>

Copy after login

The effect of using these three methods is the same, but what we need to pay attention to is the priority issue between these three methods.
What happens if we use the above three methods to define styles for an object at the same time?
For example, we first define a #STYLE { font-size:12px; } and then define a .STYLE { font-size:14px; } and finally use 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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE { font-size: 12px; } 
.STYLE { font-size: 14px; } 
--></style> 
</head> 
<body> 
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div> 
</body> 
</html>

Copy after login

In this case, the browser will apply styles to the object according to the priority of the three methods, namely style>id>class. In the above example, the text in the div will be displayed at 16px size.

The above is the detailed content of Detailed explanation of the usage of the three application styles of id, class and style in css. For more information, please follow other related articles on the PHP Chinese website!