Maison > Article > interface Web > Exemple d'analyse de trois méthodes de style (id, classe, style) en CSS
Exemple d'analyse de trois méthodes de style (id, classe, style) en CSS
- 黄舟original
- 2017-07-20 09:17:452226parcourir
Nous pouvons utiliser trois méthodes pour appliquer des styles à un objet (comme div, span, table).
1 : Utilisez # pour définir le style et utilisez l'identifiant pour appliquer le style à l'objet.
Exemple :
<!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 : Utilisez . pour définir le style et utilisez la classe pour appliquer le style à l'objet.
Exemple :
<!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 : Ne définissez pas de style et utilisez directement le style pour appliquer des styles aux objets.
Exemple :
<!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>
L'effet produit en utilisant ces trois méthodes est le même, mais ce à quoi nous devons prêter attention, c'est la question prioritaire entre ces trois méthodes.
Que se passe-t-il si nous utilisons les trois méthodes ci-dessus pour définir simultanément des styles pour un objet ?
Par exemple, nous définissons d'abord un #STYLE { font-size:12px; puis définissons un .STYLE { font-size:14px } et enfin utilisons style="font-size:16px;" . Le code est le suivant :
<!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>Dans ce cas, le navigateur appliquera des styles à l'objet selon la priorité des trois méthodes, à savoir style>id>class. Dans l'exemple ci-dessus, le texte du div sera affiché à une taille de 16 px.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!