À quoi devez-vous faire attention dans l’ordre d’écriture du CSS ?

1. Ordre CSS

Tout d'abord, il est indiqué que la façon dont le navigateur lit les CSS se fait de haut en bas. Nous écrivons généralement du CSS et tant que les éléments ont ces attributs, nous obtiendrons l'effet souhaité. Cependant, cela aura un certain impact sur la maintenance future et l'efficacité du rendu du navigateur. Alors, comment devrions-nous écrire l'ordre du CSS ? Existe-t-il certaines normes ?

Tout d'abord, nous savons que les attributs CSS sont divisés en plusieurs catégories selon les caractéristiques

1. Spécifiez les caractéristiques des éléments, telles que ; display, position, float, Ces attributs détermineront sa méthode de mise en page

2. Spécifiez l'occupation de l'espace de l'élément, comme la hauteur de ligne, la marge, le remplissage, la largeur, la hauteur, etc. . Ces attributs détermineront la taille et la hauteur de l'élément. Position

3. Spécifiez le propre effet de l'élément, tel que la taille de la police, la couleur, l'arrière-plan, etc. l'effet de l'élément

En fait, lorsque nous aurons fini de classer les propriétés du CSS, nous obtiendrons une réponse évidente. Nous pouvons nous imaginer utiliser CSS pour dessiner les éléments dans l'ordre de. notre propre écriture. Par exemple,

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

Description : Il s'agit d'un élément avec une taille de police de 10px, une hauteur de ligne de 12px, une largeur de 30px et une hauteur de 30px. La méthode d'affichage est le style inline

Au début Lors de la lecture des attributs, il nous sera difficile de localiser l'élément car nous ne le savons pas. les caractéristiques et la méthode d'affichage de l'élément. Quand j'ai lu la dernière ligne, j'ai découvert qu'il s'agissait d'un élément en ligne et que la définition de la largeur et de la hauteur serait invalide, donc cet ordre d'écriture CSS n'est pas recommandé

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

Description : Il s'agit d'un élément, le mode d'affichage est le mode bloc en ligne, la hauteur est de 20 px, la largeur est la même que celle de l'élément parent, la hauteur est de 20 px, la couleur est blanche, la taille de la police est de 10 px

Cette façon d'écrire peut rendre le rendu d'une manière facile à comprendre pour nous

Résumé : La spécification recommandée lorsque nous écrivons du CSS est d'écrire d'abord les attributs qui affectent les caractéristiques d'affichage des éléments, puis écrire les attributs qui affectent la position des éléments, et enfin écrire les attributs internes de l'élément

2. Écriture CSS qui déclenche la mise en évidence par. en cliquant ou en survolant

Lorsque la souris survole, nous donnons souvent le contenu qui doit être modifié. Ajoutez un nom de classe active à l'élément, puis écrivez les attributs que nous devons modifier en actif

Par exemple :

.content {
  background: black;  
}
.active {
  background: white;
}

Lorsque nous cliquons sur un élément, nous avons besoin que la couleur d'arrière-plan du contenu passe du noir au blanc, puis l'ajout du nom de la classe active à .content permettra d'obtenir. notre effet attendu. Cependant, nous devons parfois modifier plus d'un attribut d'un élément lorsque nous cliquons. Nous pouvons avoir cette situation

Que devons-nous faire si la police de l'élément icon et de l'élément span devient plus grande. et l'autre devient rouge lorsque nous cliquons sur un élément avec un nom de classe de .click ? Nous pouvons le faire

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.icon-active{
　　　　font-size: 40px;
　　}
　　.text-active{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.icon-font&#39;).addClass(&#39;icon-active&#39;);
　　　　$(&#39;.text&#39;).addClass(&#39;text-active&#39;)
　　})
</script>

Cela peut obtenir l'effet attendu, mais c'est l'associé. réaction de deux éléments. S'il y a trois éléments ou plus, nous aurons besoin de plus de code,

En fait, amis prudents, vous avez peut-être découvert que j'ai une balise .parent ici, nous pouvons ajouter le nom de la classe active. codez la balise .parent comme suit :

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.active .icon-font{
　　　　font-size: 40px;
　　}
　　.active .text{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.parent&#39;).addClass(&#39;active&#39;);
　　})
</script>

　

Dans ce cas, nous devons seulement ajouter le nom de la classe active à la couche la plus externe la plus proche du css, puis définissez le style des éléments descendants sous ce nom de classe. De cette façon, il suffit d'ajouter un nom de classe actif pour obtenir l'effet souhaité

.

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!