Eine ausführliche Diskussion der Initialisierung im CSS-Stil

Dieses Mal werde ich ausführlich über die CSS-Stilinitialisierung sprechen. Hier ist ein praktischer Fall, schauen wir uns das an.

Da viele Tags beim Schreiben einer Website Standardstile haben, wie z. B. die Ränder des P-Tags, die Unterstreichung des a-Tags usw., entfernen wir normalerweise diese Standardstile, um dies zu vermeiden viele Änderungen im späteren Schreiben verursachen.

1. Etiketten mit standardmäßigen Innen- und Außenrändern

Manche Leute sparen sich die Mühe und löschen die Innen- und Außenränder Ränder direkt Verwenden Sie *{margin:0;padding:0;}, um es so zu schreiben. Wenn das Projekt klein ist, werden Sie nichts spüren. Sobald das Projekt groß ist, wird das Schreiben auf diese Weise die Leistung der Website beeinträchtigen . Ladegeschwindigkeit.

Wir müssen also verstehen, welche Tags standardmäßig innere und äußere Ränder haben, und dann den Stil entsprechend der Verwendung initialisieren:

--------- ----- --------------------------------------------- ----- ----------------------------------Häufig verwendete Tags-------- ----- --------------------------------------------- ----- --------------------------------------------- ----- ------------

1. body tag: default margin:8px;

2. dl-Tag, p-Tag: Standardmargin-top:1em;margin-bottom:1em;

3. dd tag: default margin-left:40px;

4. ul, ol tag: default margin-top:1em;margin-bottom:1em;padding-left :40px;

5. h1 tag~h6 tag: default margin-top:0.67em;margin-bottom:0.67em;

6. form tag: default margin-top:0em;

7. fieldset tag: default margin-left:2px;margin- right:2px;padding :0.35em 0.75em 0.625em;

8. legend tag: Default padding-left:2px;padding-right :2px;

9. Eingabe-Tag: Standardauffüllung: 1px 0px;

10. textarea-Tag : Standardabstand: 2px ;

11. Button-Tag: Standardabstand: 1px 6px;

12. hr tag: default margin-top:0.5em;margin-bottom:0.5em;

13. pre tag: default margin:1em 0px 1em;

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

2. Schriftstil der Website

Im Allgemeinen schreiben wir den gesamten Schriftstil von Wenn der lokale Textstil geändert werden muss, ändern Sie ihn separat

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

3. Entfernen Sie die Ränder der Tabellenbeschriftung und fügen Sie sie zusammen

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

4. Eliminieren Bezeichner vor Listen-Tags

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

6. Entfernen Sie die Unterstreichung des a-Tags und vereinheitlichen Sie den Schriftstil

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

7. Löschen Sie den Rahmen und die vertikale Ausrichtung des IMG-Tags

Hinweis: Die oben genannten sind die am häufigsten verwendeten und die Stilinitialisierung anderer Tags wird entsprechend hinzugefügt. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

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

Empfohlene Lektüre:

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

Was sind die Schritte für Jest, um native Komponenten zu testen?

Detaillierte Erläuterung impliziter Aufrufe von Javascript

So verwenden Sie React-Komponentenreferenzen

Das obige ist der detaillierte Inhalt vonEine ausführliche Diskussion der Initialisierung im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!