Details CSS style initialization

This time brings us to the details of CSS style initialization, CSS style initialization considerations are what, here is the actual case, together to see.

When the site is written, because many of the tags will have a default style, such as the margin of P tags, a label, and so on, usually we will remove these default styles, so as not to create a lot of changes in the subsequent writing.

1. Labels with default internal and external margins

Some people will take the trouble, clear the inner margin directly with *{margin:0;padding:0,}, this kind of writing, in the project is very small, you will feel nothing, once the project is big, then this will consume the website performance, reduce the site loading speed.

So we want to know which tags have internal and external margins by default, and then style-initialize them according to usage:

--------------------------------------------------------------------------------------------------commonly used labels------------------ -----------------------------------------------------------------------------------------------------------

2. Body tag: Default margin:8px;

4. DL label, p tag: default margin-top:1em;margin-bottom:1em;

6. DD tag: Default margin-left:40px;

8. UL, OL label: Default margin-top:1em;margin-bottom:1em;padding-left:40px;

10. H1 label ~h6 tag: Default margin-top:0.67em;margin-bottom:0.67em;

12. Form label: Default margin-top:0em;

14. FieldSet tag: Default margin-left:2px;margin-right:2px;padding:0.35em 0.75em 0.625em;

16. Legend tag: Default padding-left:2px;padding-right:2px;

18. Input tag: default padding:1px 0px;

20. TextArea tag: Default padding:2px;

22. Button tag: default padding:1px 6px;

24. HR tag: Default margin-top:0.5em;margin-bottom:0.5em;\

26. 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;} <!--The above tags are the most commonly used, and the rest if necessary add-

2, the font style of the website

In general, we will write the overall font style of the website within the body tag, and then the local text style needs to be modified individually.

body,button,input,textarea,select{    font:12px/1.5 ' Microsoft yahei ', ' Arial ', ' Tahoma ';    Color: #666;} <!--        generally set the font size 12px, the font line height is 1.5 times, the font style is ' Microsoft ya Black ' or ' Arial '    font color determined by the website style--

3. Remove the table label margin and let it merge together

Table {    border-collapse:collapse;    border-spacing:0;} <!--    Default: border-collapse:separate;//Sets whether cell borders are merged           border-spacing:2px;//the distance between adjacent cell borders--

4. Eliminate font style

i,em{  font-style:normal;  } <!--    By default is italic (italic)-->b,strong{  font-weight:normal;  } <!--    default is bold---

5, eliminate the label before the list of labels

ul,ol{  list-style:none;  } <!--    default is: initial (default)--

6. Eliminate the underline and unified font style of a label

a{  Text-decoration:none;  Color:inherit;    } <!--    Text-decoration: The default is underline (underline)    color: default is-webkit-link; the color value is #00e;-->

7. Clear the border and vertical alignment of the IMG label

img{  Border:none;  Verticla-align:middle;    } <!--    border:ie default border    verticla-align: Default is Baseline (baseline)--

Note: These are the most commonly used, and the other tag's style initialization will continue to be added as appropriate.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Jest test react native component what is the step

A detailed description of the implicit invocation of JavaScript

How to use the React component refs