Heim > Artikel > Web-Frontend > Beispielanalyse von drei Stilmethoden (id, class, style) in CSS

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

黄舟Original: 2017-07-20 09:17:452205Durchsuche

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>

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>

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwende ich CSS, um das Bild vertikal und horizontal zu zentrieren?Nächster Artikel：Wie verwende ich CSS, um das Bild vertikal und horizontal zu zentrieren?

In Verbindung stehende Artikel

Mehr sehen