A detailed discussion of css style initialization

This time I will bring you a detailed discussion of css style initialization, css style initializationWhat are the precautions, the following is a practical case, let's take a look.

When writing a website, because many tags have default styles, such as the margins of the P tag, the underline of the a tag, etc., we usually remove these default styles to avoid It will cause many changes in subsequent writing.

1. Tags with default inner and outer margins

## Some people will save trouble and clear the inner and outer margins directly Use *{margin:0;padding:0;} to write it like this. When the project is small, you will feel nothing. Once the project is large, writing like this will consume the performance of the website and reduce the website's performance. Loading speed.

1. body tag: default margin: 8px;

2. dl tag, p tag: default margin-top:1em;margin-bottom:1em;

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

##ul, ol tags: default margin-top:1em;margin-bottom:1em;padding-left:40px;
h1 tag~h6 tag: default margin-top:0.67em;margin-bottom:0.67em;
form tag: default margin-top:0em;

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

7. ##legend tag: Default padding-left:2px;

   padding-right
:2px;

8. input tag: default padding: 1px 0px;

9. ##textarea tag: default padding: 2px ;

10. button tag: default padding: 1px 6px;

11. ##hr tag: default margin-top:0.5em;margin-bottom:0.5em;\

12. ##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;
    }
    <!--以上标签为最常用的，其余若需要则再额外添加-->

    Copy after login

13. 2. Website font style

## Generally we will write the overall font style of the website in the body tag. Then if the local text style needs to be modified, modify it separately

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

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

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

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

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:

What are the steps for jest to test react native components

How to use React component refs

The above is the detailed content of A detailed discussion of css style initialization. For more information, please follow other related articles on the PHP Chinese website!