Une discussion détaillée de l'initialisation du style CSS

Cette fois, je vais vous apporter une discussion détaillée sur l'initialisation du style CSS. Quelles sont les précautions pour l'initialisation du style CSS. Voici un cas pratique, jetons un coup d'oeil.

Lors de la rédaction d'un site Web, comme de nombreuses balises ont des styles par défaut, tels que les marges de la balise P, le soulignement de la balise a, etc., nous supprimons généralement ces styles par défaut pour éviter que cela ne se produise. provoquer de nombreux changements dans l'écriture ultérieure.

1. Étiquettes avec des marges intérieures et extérieures par défaut

Certaines personnes éviteront des ennuis et effaceront l'intérieur et l'extérieur. margins directement Utilisez *{margin:0;padding:0;} pour l'écrire comme ceci. Lorsque le projet est petit, vous ne ressentirez rien. Une fois que le projet est grand, écrire ainsi consommera les performances du site Web et réduira les performances du site Web. . Vitesse de chargement.

Il faut donc comprendre quelles balises auront des marges intérieures et extérieures par défaut, puis initialiser le style en fonction de l'usage :

--------- ----- --------------------------------------------- ----- ----------------------------------Balises couramment utilisées-------- ----- --------------------------------------------- ----- --------------------------------------------- ----- ------------

1. balise body : marge par défaut : 8px;

2. balise dl, balise p : marge par défaut:1em;marge-bottom:1em;

3. Balise dd : marge-gauche par défaut : 40px ;

4. balise ul, ol : marge-haut par défaut : 1em; :40px;

5. balise h1~balise h6 : marge-haut par défaut :0,67em;marge-bas:0,67em;

6. balise form : marge-haut par défaut :0em;

7. balise fieldset : marge-gauche par défaut :2px;margin- right:2px;padding :0.35em 0.75em 0.625em;

8. balise légende : padding-left par défaut :2px;padding-right :2px;

9. balise d'entrée : remplissage par défaut : 1px 0px;

10. balise textarea; : remplissage par défaut : 2px ;

11. balise de bouton : remplissage par défaut : 1px 6px;

12. balise hr : marge par défaut en haut : 0,5 em;

13. 2. Style de police du site Web

body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
    margin:0;
    padding:0;
}
<!--以上标签为最常用的，其余若需要则再额外添加-->

Généralement, nous écrirons le style de police global de le site Web dans la balise body , puis si le style de texte local doit être modifié, modifiez-le séparément

3. Supprimez les marges de l'étiquette du tableau et fusionnez-les ensemble

body,button,input,textarea,select{
    font:12px/1.5 'Microsoft YaHei','arial','tahoma';
    color:#666;
}
<!--
    
    一般设置字体大小12px，字体行高为1.5倍行距，字体样式为‘微软雅黑’或者‘宋体’
    字体颜色由网站风格决定
-->

4. Éliminer le style de police

table {
    border-collapse:collapse;
    border-spacing:0;
}
<!--
    默认:border-collapse:separate;//设置单元格边框是否合并
           border-spacing:2px;//相邻单元格边框间的距离
-->

5. identifiants avant les balises de liste

i,em{
  font-style:normal;  
}
<!--
    默认是斜体（italic）
-->
b,strong{
  font-weight:normal;  
}
<!--
    默认是粗体（bold）
-->

6. Supprimez le soulignement de la balise a et unifiez le style de police

ul,ol{
  list-style:none;  
}
<!--
    默认是：initial(默认值)
-->

7. Effacer la bordure et l'alignement vertical de la balise Img

Remarque : celles ci-dessus sont les plus couramment utilisées, et l'initialisation du style des autres balises sera ajoutée le cas échéant. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

a{
  text-decoration:none;
  color:inherit;    
}
<!--
    text-decoration:默认是underline(下划线)
    color:默认是-webkit-link;颜色值为#00e;
-->

Lecture recommandée :

img{
  border:none;
  verticla-align:middle;    
}
<!--
    border:ie默认有边框
    verticla-align:默认是baseline（基线）
-->

Quelles sont les étapes permettant à Jest de tester les composants natifs de réaction

Explication détaillée des appels implicites de javascript

Comment utiliser les références des composants React

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!