Arrangement de la méthode Css Reset (reset)_Échange d'expérience

Qu'est-ce que Css Reset ? Certains collègues l'appellent "css reset", et certains peuvent l'appeler "css par défaut"...

Je pense que vous aurez une nouvelle compréhension de Css Reset après avoir lu l'intégralité du texte. text
PS :

* { 
padding: 0; 
margin: 0; 
}

Il s'agit de la réinitialisation CSS la plus couramment utilisée, mais il y a de nombreux problèmes ici.

La première partie de l'article original parle beaucoup du CSS et des différences dans les règles CSS de chaque navigateur. Le "Css Reset" est également formulé pour la compatibilité et l'unification de "Css Reset". peut améliorer les performances dans une certaine mesure. Économisez du temps et de l'argent

Merci beaucoup à Perishable pour l'organisation et le résumé

Ce qui suit est une brève introduction à plusieurs types de réinitialisation CSS. est limité. Je ne peux comprendre que le sens général. Veuillez le lire

Réinitialisation minimaliste [Version 1]
Je crois que vous avez souvent vu ce paragraphe.

* { 
padding: 0; 
margin: 0; 
}

Réinitialisation minimaliste [Version 2]
La conception de border:0 est un peu peu fiable

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

Réinitialisation minimaliste [Version 3]
Bien sûr, c'est non recommandé. Cela entrera en conflit avec certains styles par défaut

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

Réinitialisation universelle condensée
Il s'agit d'une méthode d'écriture que l'auteur préfère actuellement. Elle garantit l'unité des styles de navigateur relativement courants. 🎜>

Réinitialisation du pauvre

* { 
vertical-align: baselinebaseline; 
font-weight: inherit; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: 0 none; 
outline: 0; 
padding: 0; 
margin: 0; 
}

En fait, c'est aussi un type de réinitialisation CSS que nous utilisons couramment. Il réinitialise la taille de la police et gère la bordure des liens d'image

On le voit également souvent sur certains sites.

Réinitialisation globale de Shaun Inman

html, body { 
padding: 0; 
margin: 0; 
} 
html { 
font-size: 1em; 
} 
body { 
font-size: 100%; 
} 
a img, :link img, :visited img { 
border: 0; 
}

L'auteur pense que Shaun a un certain objectif en écrivant ce type de réinitialisation CSS

Et ce type de règles vise des objectifs communs importants. navigateurs utilisés.
Par exemple, IE, Firefox, etc.

Yahoo CSS Reset

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset, img, abbr { 
border: 0; 
} 
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var { 
font-weight: normal; 
font-style: normal; 
} 
ul { 
list-style: none; 
} 
caption, th { 
text-align: left; 
} 
h1, h2, h3, h4, h5, h6 { 
font-size: 1.0em; 
} 
q:before, q:after { 
content: ''; 
} 
a, ins { 
text-decoration: none; 
}

La réinitialisation écrite par les gars de Yahoo est personnellement recommandée

.

Réinitialisation CSS d'Erik Meyer

body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset,img { 
border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-weight: normal; 
font-style: normal; 
} 
ol,ul { 
list-style: none; 
} 
caption,th { 
text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border: 0; 
}

L'auteur a réorganisé le code d'Erik Meyer Mais la fonction est toujours la même

Cet ensemble de réinitialisation CSS est le plus utilisé dans l'industrie

Meyer condensé. Réinitialiser

html, body, p, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend { 
vertical-align: baselinebaseline; 
font-family: inherit; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
} 
/* remember to define focus styles! */ 
:focus { 
outline: 0; 
} 
body { 
background: white; 
line-height: 1; 
color: black; 
} 
ol, ul { 
list-style: none; 
} 
/* tables still need cellspacing="0" in the markup */ 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
font-weight: normal; 
text-align: left; 
} 
/* remove possible quote marks (") from <q> & <blockquote> */ 
blockquote:before, blockquote:after, q:before, q:after { 
content: ""; 
} 
blockquote, q { 
quotes: "" ""; 
}

En général, il s'agit d'une modification et d'une amélioration du Css Reset d'Erik Meyer

.