Detaillierte Erläuterung der Verwendung der drei Anwendungsstile ID, Klasse und Stil in CSS-HTML-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung der drei Anwendungsstile ID, Klasse und Stil in CSS

伊谢尔伦

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

Original

2221 Leute haben es durchsucht

1: Verwenden Sie #, um Stile zu definieren, und verwenden Sie IDs, um Stile auf Objekte anzuwenden.
Beispiel:

<!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>

Nach dem Login kopieren

2: Verwenden Sie , um den Stil zu definieren, und verwenden Sie class, um den Stil auf das Objekt anzuwenden.
Beispiel:

<!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>

Nach dem Login kopieren

3: Definieren Sie keinen Stil und verwenden Sie den Stil nicht direkt, um Stile auf Objekte anzuwenden.
Beispiel:

<!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>

Nach dem Login kopieren

Die durch die Verwendung dieser drei Methoden erzeugte Wirkung ist die gleiche, wir müssen jedoch auf die Prioritätsfrage zwischen diesen drei Methoden achten.
Was passiert, wenn wir die oben genannten drei Methoden verwenden, um gleichzeitig Stile für ein Objekt zu definieren?
Zum Beispiel definieren wir zuerst einen #STYLE {font-size:12px} und dann einen .STYLE {font-size:14px;) und verwenden schließlich style="font-size:16px;" . Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

In diesem Fall wendet der Browser Stile entsprechend der Priorität der drei Methoden an, nämlich style>id>class. Im obigen Beispiel wird der Text im Div in einer Größe von 16 Pixel angezeigt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der drei Anwendungsstile ID, Klasse und Stil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!