Heim >Web-Frontend >CSS-Tutorial >Beispielanalyse von drei Stilmethoden (id, class, style) in CSS
Beispielanalyse von drei Stilmethoden (id, class, style) in CSS
- 黄舟Original
- 2017-07-20 09:17:452263Durchsuche
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!