From the beginning of web front end to the actual combat: css style initialization

Posted by typo on Fri, 08 Nov 2019 15:57:12 +0100

In order to eliminate the default settings of each browser for css and keep the appearance of web pages consistent in each browser, it is necessary to initialize css! Many incompatible styles can be solved by css initialization code.

1. The most resource consuming and simple

* { padding: 0; margin: 0; border: 0; } 

2. Selective initialization example (synthesis)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,input,textarea,p,blockquote,th,td {   
  padding: 0;   
  margin: 0;   
}
/* Modify as appropriate */
body {
    background:#fff;color:#333; font size: 12px; margin top: 5px; font family: "Simsun", "Tahoma", "Arial Narrow";
}

/* The content of the short reference can be taken as' 'or' ' */
q:before,q:after {content:";}  

/* No borders for abbreviations, pictures, etc */
fieldset,img,abbr,acronym {border: 0 none;}
abbr,acronym {font-variant: normal;}
legend {color:#000;}

/* Clear fonts and sizes for special tags */
address,caption,cite,code,dfn,em,strong,th,var {   
  font-weight: normal;   
  font-style: normal;   
}

/* Upper and lower subscript */
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}

/* Set the border of the table to be merged into a single border, and specify that the distance between cell boundaries in the border dividing model is 0*/
table {   
  border-collapse: collapse;   
  border-spacing: 0;   
}   

/* Table title and content left */
caption,th {text-align: left;}
input,img,select {vertical-align:middle;}

/* Clear list style */
ol,ul {list-style: none;}  

/* Input control font */
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

/* Header element style clear */ 
h1,h2,h3,h4,h5,h6 {   
  font-weight: normal;   
  font-size: 100%;   
}   

/* Link style, color can be modified as appropriate */
del,ins,a {text-decoration:none;}
a:link {color:#009;}
a:visited {color:#800080;}
a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} 

/* Mouse style */
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}
input::-moz-focus-inner { border: 0; padding: 0;}

.clear {clear:both;}
web Front end development learning Q-q-u-n:  731771211,Share learning methods and small details that need to be paid attention to, constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)

3.sina

/* Global style */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
    margin:0;padding:0;border:0;
}
body{
    background:#fff;color:#333; font size: 12px; margin top: 5px; font family: "Simsun", "Tahoma", "Arial Narrow";
}
ul,ol{
    list-style-type:none;
}
select,input,img,select{
    vertical-align:middle;
}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

4.yahoo

html {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
li {
    list-style: none outside none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: "";
}
abbr, acronym {
    border: 0 none;
    font-variant: normal;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
input, textarea, select {
}
legend {
    color: #000000;
}
body {
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
select, input, button, textarea {
    font: 99% arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
}
pre, code, kbd, samp, tt {
    font-family: monospace;
    line-height: 100%;
}
a {
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}
strong {
    font-weight: bold;
}
input[type="submit"] {
    cursor: pointer;
}
button {
    cursor: pointer;
}

5. Blog Garden

/*version: 2.7.0*/
html,body{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
    margin:0;padding:0;
}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
    font-style:inherit;font-weight:inherit;
}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{    font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{
    font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;
}
input,button,textarea,select{*font-size:100%;}
.clear{clear:both;}
input::-moz-focus-inner{ border: 0;padding: 0;}

/*added*/
input[type=button],input[type=submit] {-webkit-appearance: button;}

normalize:

The biggest feature of normalize.css: keep the useful browser default style, instead of "erasing" them all, which is very browser friendly

vue How to use in framework

NPM
npm install --save normalize.css

mianimport 'normalize.css'  If you make a mistake
npm install css-loader style-loader
web Front end development learning Q-q-u-n:  731771211,Share learning methods and small details that need to be paid attention to, constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)

Topics: Web Development npm Vue