Qu’est-ce que la réinitialisation CSS ? Certains collègues l'appellent "css reset", et d'autres peuvent l'appeler "css par défaut"...
Je pense que vous aurez une nouvelle compréhension de Css Reset après avoir lu le texte intégral
Adresse originale...
PS :
Code du programme
.
* {
remplissage : 0 ;
marge : 0 ;
}
Il s'agit de la réinitialisation CSS la plus couramment utilisée, mais elle présente de nombreux problèmes.
La première partie de l'article original parle beaucoup de 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. Une utilisation correcte et efficace de "Css Reset" peut permettre d'économiser du temps et de l'argent. dans une certaine mesure.
Merci beaucoup à Perishable pour l'organisation et le résumé.
Ce qui suit est une brève introduction à plusieurs types de réinitialisation CSS. L'auteur a des capacités limitées et ne peut comprendre que le sens général.
Réinitialisation minimaliste [Version 1]
le code du programme
que nous utilisons souvent.
* {
remplissage : 0 ;
marge : 0 ;
}
Réinitialisation minimaliste [Version 2]
La conception de border:0 est un peu peu fiable et
le code du programme
* {
remplissage : 0 ;
marge : 0 ;
bordure : 0 ;
}
Réinitialisation minimaliste [Version 3]
Bien entendu, cela n’est pas recommandé car cela entrerait en conflit avec certains styles de
code de programme par défaut.
* {
contour : 0 ;
remplissage : 0 ;
marge : 0 ;
bordure : 0 ;
}
Réinitialisation universelle condensée
Il s’agit d’une méthode d’écriture que l’auteur préfère actuellement, assurant l’unité de styles de navigateurs relativement courants.
code de programme
* {
alignement vertical : ligne de baseligne de base ;
font-weight : hériter ;
font-family : hériter ;
font-style : hériter ;
taille de police : 100 % ;
frontière : 0 aucun ;
contour : 0 ;
remplissage : 0 ;
marge : 0 ;
}
La réinitialisation du pauvre
Les codes de programme
pour réinitialiser la taille de la police et le traitement des bordures des liens d'images sont souvent observés sur certains sites.
html, corps {
remplissage : 0 ;
marge : 0 ;
}
html{
taille de police : 1em ;
}
corps {
taille de police : 100 % ;
}
a img, :link img, :visited img {
bordure : 0 ;
}
La réinitialisation globale de Shaun Inman
L'auteur estime que Shaun a un certain objectif en écrivant ce type de réinitialisation CSS et que de telles règles s'adressent à certains navigateurs importants et couramment utilisés tels que IE, Firefox et d'autres
codes de programme.
corps, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pré,
formulaire, fieldset, input, p, blockquote, table, th, td, embed, object {
remplissage : 0 ;
marge : 0 ;
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0 ;
}
ensemble de champs, img, abbr {
bordure : 0 ;
}
adresse, légende, citer, code, dfn, em,
h1, h2, h3, h4, h5, h6, fort, th, var {
poids de la police : normal ;
style de police : normal ;
}
ul {
style de liste : aucun ;
}
légende, le {
aligner le texte : gauche ;
}
h1, h2, h3, h4, h5, h6 {
taille de police : 1,0em ;
}
q:avant, q:après {
contenu: '';
}
une, ins {
décoration de texte : aucune ;
}
Réinitialisation CSS Yahoo
le code du programme
pour Reset écrit par les gars de Yahoo peut être recommandé.
corps,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pré,formulaire,
champset, 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 ;
}
Réinitialisation CSS d'Erik Meyer
L'auteur a réorganisé le code d'Erik Meyer, mais la fonction est toujours la même. Cet ensemble de Css Reset est le
code de programme
le plus couramment utilisé dans l'industrie.
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, gros, citer, code,
dl, dt, dd, ol, ul, li, champs, formulaire, étiquette, légende {
alignement vertical : ligne de baseligne 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 ;
}
/* n'oubliez pas de définir les styles de focus !
:se concentrer {
contour : 0 ;
}
corps {
fond : blanc ;
hauteur de ligne : 1 ;
couleur : noir ;
}
oh, ul {
style de liste : aucun ;
}
/* les tables ont toujours besoin de cellpacing="0" dans le balisage */
tableau {
border-collapse : séparé ;
espacement des bordures : 0 ;
}
légende, th, td {
poids de la police : normal ;
aligner le texte : gauche ;
}
/* supprime les guillemets possibles (") de &
*/
blockquote:avant, blockquote:après, q:avant, q:après {
contenu: "";
}
citation de bloc, q {
citations: "" "";
}
Réinitialisation Meyer condensée
En général, il s'agit d'une modification et d'une amélioration du code du programme Css Reset d'Erik Meyer
.
corps, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pré, formulaire, champs, entrée, zone de texte, p, blockquote, th, td {
remplissage : 0 ;
marge : 0 ;
}
ensemble de champs, img {
bordure : 0 ;
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0 ;
}
oh, ul {
style de liste : aucun ;
}
adresse, légende, citer, code, dfn, em, strong, th, var {
poids de la police : normal ;
style de police : normal ;
}
légende, le {
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: '';
}
abréviation, acronyme {
bordure : 0 ;
}