Example analysis of three style methods (id, class, style) in css-CSS Tutorial-php.cn

Example analysis of three style methods (id, class, style) in css

黄舟

Release： 2017-07-20 09:17:45

Original

2208 people have browsed it

We can use three methods to apply styles to an object (such as div, span, table).

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 Example analysis of three style methods (id, class, style) in css. For more information, please follow other related articles on the PHP Chinese website!