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:452201parcourir

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS pour centrer l'image verticalement et horizontalement ?Article suivant：Comment utiliser CSS pour centrer l'image verticalement et horizontalement ?

Articles Liés

Voir plus