A detailed discussion of css style initialization-CSS Tutorial-php.cn

A detailed discussion of css style initialization

php中世界最好的语言

Release： 2018-03-19 09:17:55

Original

2414 people have browsed it

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.

So we need to understand which tags will have inner and outer margins by default, and then initialize the style according to the usage:

-------------- -------------------------------------------------- ----------------------------------Commonly used tags------------- -------------------------------------------------- -------------------------------------------------- ------------

body tag: default margin: 8px;
dl tag, p tag: default margin-top:1em;margin-bottom:1em;
##dd tag: default margin-left:40px;
##fieldset tag: default margin-left:2px;margin-right:2px;padding :0.35em 0.75em 0.625em;
##legend tag: Default padding-left:2px;
padding-right
input tag: default padding: 1px 0px;
##textarea tag: default padding: 2px ;
button tag: default padding: 1px 6px;
##hr tag: default margin-top:0.5em;margin-bottom:0.5em;\

##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

2. Website font style

body,button,input,textarea,select{
    font:12px/1.5 'Microsoft YaHei','arial','tahoma';
    color:#666;
}

Copy after login

3. Remove the table label margins and merge them together

table {
    border-collapse:collapse;
    border-spacing:0;
}

Copy after login

4. Eliminate the font style

i,em{
  font-style:normal;  
}

b,strong{
  font-weight:normal;  
}

Copy after login

5. Eliminate the identifier before the list tag

ul,ol{
  list-style:none;  
}

Copy after login

6. Eliminate the underline of the a tag and unify the font style

a{
  text-decoration:none;
  color:inherit;    
}

Copy after login

7. Clear the border and vertical alignment of the Img tag

img{
  border:none;
  verticla-align:middle;    
}

Copy after login

Note: The above are the most commonly used ones. The style initialization of other tags will be added as appropriate.

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

Detailed explanation of implicit calls in javascript

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!