Qu'est-ce que réinitialiser le CSS

reset css fait référence à reset.css pour réinitialiser la feuille de style de la balise du navigateur. Sa fonction est de supprimer tous les styles par défaut du navigateur. Pour être plus précis, il s'agit de redéfinir le style de la balise. c'est-à-dire pour fournir au navigateur Le style par défaut est écrasé.

L'environnement d'exploitation de cet article : système Windows 7, version CSS3, ordinateur DELL G3

reset.cssRéinitialiser la feuille de style du balise du navigateur

Les balises HTML ont des styles par défaut dans le navigateur. Par exemple, la balise p a des marges supérieure et inférieure, la balise strong a un style de police gras et la balise em a un style de police italique. Il existe également des différences entre les styles par défaut des différents navigateurs. Par exemple, ul a un style indenté par défaut. Sous IE, son indentation est réalisée par marge, tandis que sous Firefox, son indentation est réalisée par padding.

Lorsque vous changez de page, le style par défaut du navigateur nous cause souvent des problèmes et affecte l'efficacité du développement. La solution est donc de supprimer tous les styles par défaut du navigateur depuis le début, ou plus précisément, de redéfinir le style des étiquettes. "Remplacez" les propriétés CSS par défaut du navigateur. Le plus simple est d’écraser le style par défaut fourni par le navigateur ! Il s'agit d'une réinitialisation CSS.

Fonction de réinitialisation

Comme il existe de nombreux types de navigateurs, le style par défaut de chaque navigateur est également différent, comme la balise Les styles dans les navigateurs , Firefox et Safari sont tous différents, donc en réinitialisant les propriétés CSS de la balise bouton puis en la définissant uniformément, le même effet d'affichage peut être produit.

Le contenu de réinitialisation CSS le plus simple peut être complété en quelques lignes seulement :

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

(mais en raison de faibles performances, ce n'est pas recommandé)

Cette méthode rend tous les sélecteurs Le remplissage, la marge et la bordure sont tous définis sur 0. Il existe également plus de contenu, comme le contenu CSS Reset de YUI :

body,div,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;
}

et le contenu CSS Reset V1.0|200802 de la célébrité étrangère Eric Meyer :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric Meyer V2.0|20110126

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
　　p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
　　img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
　　dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
　　tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
　　figure, figcaption, footer, header, hgroup, menu, nav, output,
　　ruby, section, summary,time, mark, audio, video {
　　margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
　　}
　　/* HTML5 display-role reset for older browsers */
　　article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
　　display: block;}body {line-height: 1;
　　}
　　ol, ul {list-style: none;
　　}blockquote, q {quotes: none;}
　　blockquote:before, blockquote:after,
　　q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

Comme vous pouvez le voir, ces méthodes de contenu sont différentes, mais les fonctions sont similaires. Elles jouent toutes le rôle de réinitialisation, donc CSS Reset peut être personnalisé en fonction de différents besoins personnels.

Étude recommandée : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!