Qu'est-ce que réinitialiser.css

reset.css est une feuille de style qui réinitialise les balises du navigateur. Sa fonction est de redéfinir le style des balises et de remplacer les propriétés CSS par défaut du navigateur, ce qui signifie écraser le style par défaut fourni par le navigateur.

Recommandé : "tutoriel vidéo CSS"

reset.css réinitialise la feuille de style de la balise du navigateur.

La balise HTML a un style 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. Lors du changement 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 pour être plus précis, de redéfinir le style du label. "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.

Contenu

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 définit le remplissage, la marge et la bordure de tous les sélecteurs à 0. Il y a aussi 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;
}
以及国外名人Eric Meyer的CSS Reset V1.0|200802内容：
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
[1] 
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, et elles jouent toutes un rôle de réinitialisation, donc CSS Reset est basé on Il peut être personnalisé en fonction de différents besoins personnels.

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!