Beispielanalyse von drei Stilmethoden (id, class, style) in CSS-CSS-Tutorial-php.cn

Beispielanalyse von drei Stilmethoden (id, class, style) in CSS

黄舟

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

Original

2242 Leute haben es durchsucht

Wir können drei Methoden verwenden, um Stile auf ein Objekt anzuwenden (z. B. div, span, table).

1: Verwenden Sie #, um den Stil zu definieren, und verwenden Sie die ID, 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 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 vonBeispielanalyse von drei Stilmethoden (id, class, style) in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!