Arrangement de la méthode Css Reset (reset)_Échange d'expérience-tutoriel CSS-php.cn

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

PHP中文网

Libérer： 2016-05-16 12:04:32

original

1852 Les gens l'ont consulté

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; 
}

Copier après la connexion

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; 
}

Copier après la connexion

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

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

Copier après la connexion

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; 
}

Copier après la connexion

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; 
}

Copier après la connexion

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; 
}

Copier après la connexion

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: &#39;&#39;; 
} 
a, ins { 
text-decoration: none; 
}

Copier après la connexion

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:&#39;&#39;; 
} 
abbr,acronym { border: 0; 
}

Copier après la connexion

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: "" ""; 
}

Copier après la connexion

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