Savez-vous ce qu'est la réinitialisation CSS ? Habituellement, il est également écrit sous la forme Reset CSS, qui réinitialise le style du navigateur. 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.
Si vous utilisez CSS, avez-vous déjà utilisé CSS Reset ? Bien sûr, vous l’utilisez peut-être mais vous ne savez pas que vous l’utilisez. Par exemple, vous pouvez utiliser :
| * { 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 sur 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. Voici le code de réinitialisation CSS de Yahoo, qui est également la méthode de réinitialisation CSS la plus populaire. La méthode choisie par YUI est :
| corps,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 ; } |
OK, je pense que vous comprenez déjà le but de la réinitialisation CSS. Peut-être que vous pouvez également écrire votre propre système de réinitialisation CSS selon vos propres préférences. Après tout, les besoins et les habitudes de chacun sont différents. Et vous pouvez vous référer aux suivants :
Ateneu Réinitialisation CSS populaire
| 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 ; font-style : 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} |
Réinitialiser le CSS de Chris Poteet
| * { alignement vertical : ligne de base ; font-family : hériter ; font-style : 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 ; } |
Eric Meyer Réinitialiser le CSS
| html, corps, div, span, applet, objet, iframe, table, 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 ; font-style : 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: "" ""; } |