Exemple d'analyse de trois méthodes de style (id, classe, style) en CSS-tutoriel CSS-php.cn

Exemple d'analyse de trois méthodes de style (id, classe, style) en CSS

黄舟

Libérer： 2017-07-20 09:17:45

original

2243 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!