CSS Reset fait référence à la réinitialisation du style du navigateur. Dans des articles précédents sur 52CSS.com, des connaissances similaires ont été introduites, mais elles n'étaient pas suffisamment approfondies. Aujourd'hui, nous allons examiner dix exemples de la méthode CSS Reset et apprendre l'application de cette méthode.
Dans divers navigateurs, certaines valeurs par défaut sont utilisées pour les sélecteurs CSS. Par exemple, lorsque h1 n'est pas défini sur une valeur, une certaine taille est affichée. Mais tous les navigateurs n'utilisent pas les mêmes valeurs, c'est pourquoi CSS Reset est utilisé pour que le style de la page Web se comporte de manière cohérente dans chaque navigateur.
1. CSS de réinitialisation générique
* {
remplissage : 0 ;
marge : 0 ;
bordure : 0 ;
}
Il s'agit également d'une méthode CSS Reset, qui définit le remplissage, la marge et la bordure de tous les sélecteurs à 0. Il s’agit d’une méthode puissante, la plus simple et la plus sûre, mais aussi la plus gourmande en ressources. Pour les petits sites Web, son utilisation n'entraînera pas un gros gaspillage de ressources, mais s'il s'agit d'un site Web avec une très grande structure comme Yahoo, il vous suffit de réinitialiser sélectivement CSS pour réduire le gaspillage de ressources.
2. Ateneu Popular CSS Réinitialiser
html, corps, div, span, applet, objet, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pré, a, abbr, acronyme,
adresse, citer, code, del, dfn, em, gros, img, ins,
kbd, q, s, samp, petit, grève, fort, sous, sup, tt,
var, dl, dt, dd, ol, ul, li, champs, formulaire, étiquette, légende,
tableau, légende, tbody, tfoot, thead, tr, th, td {
marge : 0 ;
remplissage : 0 ;
bordure : 0 ;
contour : 0 ;
font-weight : hériter ;
style de police : hériter ;
taille de police : 100 % ;
font-family : hériter ;
alignement vertical : ligne de base ;
}
:focus {contour : 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse : séparé ; border-spacing : 0 ;}
th, td {text-align : gauche ; font-weight : normal ;}
img, iframe {bordure : aucune ; texte-décoration : aucune ;}
ol, ul {list-style : aucun ;}
entrée, zone de texte, sélection, bouton {font-size : 100 % ; font-family : hériter ;}
sélectionnez {margin : hériter ;}
hr {marge : 0 ; remplissage : 0 ; bordure : 0 ; couleur : #000 ; couleur d'arrière-plan : #000 ; hauteur : 1 px}
3. Réinitialiser le CSS de Chris Poteet
* {
alignement vertical : ligne de base ;
font-family : hériter ;
style de police : hériter ;
taille de police : 100 % ;
bordure : aucune ;
remplissage : 0 ;
marge : 0 ;
}
corps {
remplissage : 5 px ;
}
h1, h2, h3, h4, h5, h6, p, pré, blockquote, form, ul, ol, dl {
marge : 20px 0 ;
}
li, jj, blockquote {
marge gauche : 40 px ;
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0 ;
}
4. Corps de réinitialisation CSS de Yahoo
, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
formulaire, champs, entrée, zone de texte, p, blockquote, th, td {
remplissage : 0 ;
marge : 0 ;
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0 ;
}
ensemble de champs, img {
bordure : 0 ;
}
adresse, légende, citer, code, dfn, em, strong, th, var {
poids de la police : normal ;
style de police : normal ;
}
ol,ul {
style de liste : aucun ;
}
légende,th {
aligner le texte : gauche ;
}
h1,h2,h3,h4,h5,h6 {
poids de la police : normal ;
taille de police : 100 % ;
}
q:avant,q:après {
contenu:";
}
abbr,acronyme { bordure : 0 ;
}
5. Eric Meyer Réinitialiser CSS
html, corps, div, span, applet, objet, iframe, tableau, légende,
tbody, tfoot, thead, tr, th, td, del, dfn, em, police, img, ins,
kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr,
acronyme, adresse, citer, code, dl, dt, dd, ol, ul, li,
ensemble de champs, formulaire, étiquette, légende {
alignement vertical : ligne de base ;
font-family : hériter ;
font-weight : hériter ;
style de police : hériter ;
taille de police : 100 % ;
contour : 0 ;
remplissage : 0 ;
marge : 0 ;
bordure : 0 ;
}
:se concentrer {
contour : 0 ;
}
corps {
fond : blanc ;
hauteur de ligne : 1 ;
couleur : noir ;
}
oh, ul {
style de liste : aucun ;
}
tableau {
border-collapse : séparé ;
espacement des bordures : 0 ;
}
légende, th, td {
poids de la police : normal ;
aligner le texte : gauche ;
}
blockquote:avant, blockquote:après, q:avant, q:après {
contenu: "";
}
citation de bloc, q {
citations: "" "";
}
6. Tantek Celik Réinitialiser CSS
:link,:visited { text-decoration:none }
ul,ol { style de liste : aucun }
h1, h2, h3, h4, h5, h6, pré, code { taille de police : 1em ;
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ marge :0 ; remplissage :0 }
a img,:link img,:visited img { border:none }
adresse { font-style:normal }
7. Christian Montoya Réinitialiser CSS
html, corps, formulaire, champset {
marge : 0 ;
remplissage : 0 ;
police : 100 %/120 % Verdana, Arial, Helvetica, sans empattement ;
}
h1, h2, h3, h4, h5, h6, p, pré,
blockquote, ul, ol, dl, adresse {
marge : 1em 0 ;
remplissage : 0 ;
}
li, jj, blockquote {
marge gauche : 1em ;
}
étiquette du formulaire {
curseur : pointeur ;
}
ensemble de champs {
bordure : aucune ;
}
saisie, sélection, zone de texte {
taille de police : 100 % ;
font-family : hériter ;
}
8. Rudeworks Réinitialise le CSS
* {
marge : 0 ;
remplissage : 0 ;
bordure : aucune ;
}
html{
police : 62,5 % « Lucida Grande », Lucida, Verdana, sans empattement ;
texte-ombre : #000 0px 0px 0px ;
}
ul {
style de liste : aucun ;
type de style de liste : aucun ;
}
h1, h2, h3, h4, h5, h6, p, pré,
blockquote, ul, ol, dl, adresse {
poids de la police : normal ;
marge : 0 0 1em 0 ;
}
citer, em, dfn {
style de police : italique ;
}
souper {
position : relative ;
bas : 0,3em ;
alignement vertical : ligne de base ;
}
sous {
position : relative ;
bas : -0,2em ;
alignement vertical : ligne de base ;
}
li, jj, blockquote {
marge gauche : 1em ;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
taille de police : 100 % ;
famille de polices : monaco, « Lucida Console », coursier, mono-space ;
}
du {
décoration de texte : passage en ligne ;
}
ins, dfn {
bordure inférieure : 1px solide #ccc ;
}
petit, sup, sous {
taille de police : 85 % ;
}
abréviation, acronyme {
transformation de texte : majuscule ;
taille de police : 85 % ;
espacement des lettres : 0,1 em ;
border-bottom-style : pointillé ;
bordure-bas-largeur : 1px ;
}
un abbr, un acronyme {
bordure : aucune ;
}
souper {
alignement vertical : super ;
}
sous {
alignement vertical : sous ;
}
h1 {
taille de police : 2em ;
}
h2 {
taille de police : 1,8 em ;
}
h3 {
taille de police : 1,6 em ;
}
h4 {
taille de police : 1,4em ;
}
h5 {
taille de police : 1,2 em ;
}
h6 {
taille de police : 1em ;
}
a, a:lien, a:visité, a:hover, a:active {
contour : 0 ;
décoration de texte : aucune ;
}
une image {
bordure : aucune ;
décoration de texte : aucune ;
}
img {
bordure : aucune ;
décoration de texte : aucune ;
}
étiquette, bouton {
curseur : pointeur ;
}
entrée : focus, sélection : focus, zone de texte : focus {
couleur d'arrière-plan : #FFF ;
}
ensemble de champs {
bordure : aucune ;
}
.clair {
clair : les deux ;
}
.float-gauche {
flotteur : gauche ;
}
.float-droite {
flotteur : à droite ;
}
corps {
alignement du texte : centre ;
}
#emballage {
marge : 0 automatique ;
aligner le texte : gauche ;
}
9. Anieto2K Réinitialiser CSS
html, corps, div, span, applet, objet, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pré, a, abbr, acronyme, adresse, gros,
citer, code, del, dfn, em, police, img,
ins, kbd, q, s, samp, petit, grève,
fort, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, formulaire, étiquette, légende,
table, légende, tbody, tfoot, thead, tr, th, td,
centre, u, b, je {
marge : 0 ;
remplissage : 0 ;
bordure : 0 ;
contour : 0 ;
poids de la police : normal ;
style de police : normal ;
taille de police : 100 % ;
font-family : hériter ;
alignement vertical : ligne de base
}
corps {
hauteur de ligne : 1
}
:se concentrer {
contour: 0
}
oh, ul {
style de liste : aucun
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0
}
blockquote:avant, blockquote:après, q:avant, q:après {
contenu: ""
}
citation de bloc, q {
citations: "" ""
}
entrée, zone de texte {
marge : 0 ;
remplissage : 0
}
heure {
marge : 0 ;
remplissage : 0 ;
bordure : 0 ;
couleur : #000 ;
couleur d'arrière-plan : #000 ;
hauteur : 1px
}
10. CSSLab CSS Réinitialiser
html, corps, div, span, applet, objet, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pré, a, abbr, acronyme, adresse,
gros, citer, code, del, dfn, em, police, img, ins, kbd, q, s, samp,
petit, grève, fort, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, formulaire, étiquette, légende, table, légende, tbody, tfoot,
tête, tr, th, td {
marge : 0 ;
remplissage : 0 ;
bordure : 0 ;
contour : 0 ;
font-weight : hériter ;
font-style : hériter ;
taille de police : 100 % ;
font-family : hériter ;
alignement vertical : ligne de base ;
}
:se concentrer {
contour : 0 ;
}
tableau {
border-collapse : séparé ;
espacement des bordures : 0 ;
}
légende, th, td {
aligner le texte : gauche ;
poids de la police : normal ;
}
une img, iframe {
bordure : aucune ;
}
oh, ul {
style de liste : aucun ;
}
saisie, zone de texte, sélection, bouton {
taille de police : 100 % ;
font-family : hériter ;
}
sélectionner {
marge : hériter ;
}
/* Corrige le placement incorrect des nombres dans les anciens dans IE6/7 */
ol { marge-gauche:2em }
/* == clearfix == */
.clearfix : après {
contenu: ".";
affichage : bloc ;
hauteur : 0 ;
clair : les deux ;
visibilité : cachée ;
}
.clearfix {affichage : bloc en ligne ;}
* html .clearfix {hauteur : 1 % ;}
.clearfix {display: block;}
Ceux-ci sont tous similaires, avec des besoins et des méthodes différents.