Maison > Article > interface Web > Comment utiliser les règles !importantes en CSS ? (exemple de code)
Comment utiliser les règles !importantes en CSS ? (exemple de code)
- 青灯夜游original
- 2019-02-20 09:56:134258parcourir
L'une des meilleures façons d'apprendre à coder un site Web est de consulter le code source d'autres sites Web pour obtenir des conseils utiles. Lors de la visualisation du code source, vous pouvez voir « !important » dans le code ; qu'est-ce que cela signifie ? A quoi ça sert ? L'article suivant vous présentera les règles !importantes, j'espère qu'il vous sera utile.
Quelles sont les règles importantes ? Comment l'utiliser ?
!important est une règle CSS utilisée pour augmenter la priorité d'application d'une règle de style CSS spécifiée ; elle est ajoutée à la fin d'une valeur CSS pour lui donner plus de poids. [Recommandation du didacticiel vidéo : Tutoriel CSS]
En CSS, les règles de style sont appliquées aux éléments en cascade. Plus le poids est élevé dans la liste suivante, plus le poids est petit :
● Style du navigateur : C'est le style par défaut déclaré par le navigateur web.
● Style déclaré par l'utilisateur : il s'agit d'un style personnalisé défini par l'utilisateur à l'aide des options du navigateur ou modifié via les outils de débogage du développeur.
● Style déclaré lors du développement : Il s'agit du style déclaré par le développeur du site dans la feuille de style CSS.
● Styles déclarés par le développeur avec des règles !importantes.
● Styles utilisateur avec règles !importantes.
!exemple d'utilisation de règle importante :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#container{
width: 450px;
height: 200px;
font-size: 25px;
}
#example{
color:red !important;
}
#container #example{
color:pink;
}
</style>
</head>
<body>
<div id="container">
<div id="example">PHP中文网！</div>
</div>
</body>
</html>Rendu :
Exemple de description :
Dans cet exemple, nous avons d'abord un include ! Le style de la règle importante définit la couleur du texte d'un élément (#exemple) comme rouge. Ensuite, nous avons un autre style qui change la couleur du texte de cet élément (#exemple) en rose. parce que! déclaration importante, donc la couleur du texte de l'élément (#exemple) est désormais rouge au lieu de rose. Si nous ne l'utilisions pas ! important, alors la couleur sera rose.
Quand utiliser les règles !importantes ?
Vous ne devez pas utiliser les règles !important sauf en cas d'absolue nécessité ; l'utilisation de règles !important brisera l'effet en cascade naturel de la feuille de style, rendant le code difficile à maintenir. Cependant, dans certains cas, vous devez l'utiliser ! important :
1. Lors du test et du débogage du site Web , la règle !important est très utile.
Si nous rencontrons des problèmes CSS dans notre code et que nous voulons nous assurer qu'un style spécifique est appliqué, nous pouvons utiliser la règle !important pour résoudre temporairement le problème sur le site jusqu'à ce que nous trouvions une meilleure solution (ce qui peut prendre du temps).
2. Feuille de style de sortie
! Des règles importantes peuvent également être utilisées pour produire des feuilles de style afin de garantir que les styles sont appliqués sans être écrasés par quoi que ce soit d'autre.
Conclusion
L'utilisation de !important n'a aucun impact négatif sur les performances ; cependant, du point de vue de la maintenabilité, vous devez éviter d'utiliser !important autant que possible, sauf en cas d'absolue nécessité. En règle générale, il ne doit être utilisé que dans des circonstances particulières.
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!