Réinitialisation CSS, styles par défaut pour les éléments communs
Après avoir appliqué une réinitialisation CSS, je veux revenir au comportement "normal" pour les éléments html comme: p, h1..h6, strong, ul et li.
Maintenant, quand je dis normal, je veux dire par exemple l'élément p ajoute un espacement ou un résultat de type retour chariot lorsqu'il est utilisé, ou la taille de la police et de l'audace pour une balise h1, ainsi que l'espacement.
Je me rends compte que c'est à moi de décider comment définir le style, mais je veux revenir à un comportement normal pour certains des éléments les plus courants (au moins comme point de départ que je pourrai modifier plus tard).
YUI fournit un fichier CSS de base qui donnera des styles cohérents dans tous les navigateurs 'A-grade' . Ils fournissent également un fichier de réinitialisation CSS, vous pouvez donc également l'utiliser, mais vous dites que vous avez déjà réinitialisé le CSS. Pour plus de détails, visitez le site Web YUI . C'est ce que j'utilise et cela fonctionne très bien.
L'une des règles dans l'application des styles CSS est "dernier dans les victoires". Cela signifie que si vos styles de réinitialisation CSS définissent les éléments sur margin:0; padding:0 vous pouvez ensuite remplacer ces règles en déclarant ensuite les valeurs souhaitées pour les mêmes éléments.
Vous pouvez le faire dans le même fichier (YUI propose une réinitialisation à une ligne, je pense que je l'inclus parfois comme première ligne dans mon fichier CSS) ou dans un fichier séparé qui apparaît après la réinitialisation CSS <link/> tag.
Je pense que par comportement normal vous voulez dire "les valeurs par défaut de mon navigateur préféré". La création de règles CSS pour ces éléments fait partie de l'exercice de réinitialisation.
Maintenant, vous voudrez peut-être examiner Blueprint CSS ou d'autres cadres de grille. Ces cadres de grille réinitialisent presque toujours les styles à rien, puis construisent la typographie des éléments communs, etc. Cela pourrait vous faire économiser du temps et des efforts.
Tu veux dire comme:
* {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
margin-bottom: 1em;
}
?
En fait, désolé d'avoir mal lu votre question, vous recherchez quelque chose de plus comme la réinitialisation totale d'Eric Meyer @ http://meyerweb.com/eric/tools/css/reset/
Plutôt que d'utiliser une réinitialisation CSS totale, pensez à utiliser quelque chose comme Normalize , qui "conserve les valeurs par défaut utiles".
Pour savoir ce que votre navigateur considère par défaut, ouvrez un fichier HTML simple avec des listes et affichez les listes avec un débogueur CSS comme Firebug , et regardez sous l'onglet Computed.
Découvrez YUI (conventions d'interface utilisateur open source de Yahoo).
Ils ont une feuille de style de base qui annule leur propre css de réinitialisation. Ils ne recommandent pas que vous l'utilisiez en production - car il est contre-productif mais pourrait certainement valoir la peine de consulter le fichier pour obtenir des extraits pertinents de ce que vous souhaitez `` annuler ''.
Je vous recommande de regarder les 40 minutes parler pour vous mettre au courant.
Voici un court extrait de leur fichier base.css:
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
/*giving UL's LIs generated numbers*/
margin-left:1em;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #000;
padding:.5em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
Téléchargez les feuilles de style complètes ci-dessous ou lire la documentation complète.
Yahoo réinitialiser css | Yahoo base (annuler) réinitialiser css
Je suis personnellement un grand fan de BlueprintCSS . Il réinitialise les styles sur les navigateurs et fournit des paramètres par défaut très pratiques (c'est ce que vous voulez 90% du temps). Il fournit également une grille de mise en page, mais vous n'avez pas à l'utiliser si vous n'en avez pas besoin.
Comportement normal pour WebKit h1 :
h1 {
display: block;
font-size: 2em;
margin: .67__qem 0 .67em 0;
font-weight: bold
}
Comportement normal pour Gecko h1 :
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
Le reste des éléments devrait être présent si vous recherchez les fichiers.
Si vous voulez voir les valeurs par défaut de CSS pour Firefox, recherchez un fichier appelé "html.css" dans la distribution (il devrait y avoir d'autres fichiers CSS utiles dans le même répertoire). Vous pouvez sélectionner les règles que vous souhaitez et les appliquer après une réinitialisation.
En outre, la norme CSS2 a un exemple de feuille de style pour html 4 .
"Après avoir appliqué une réinitialisation CSS, je veux revenir au comportement" normal "des éléments html ..."
Si vous avez appliqué une réinitialisation, vous devrez alors ajouter les règles de ce que vous pensez être comportement normal. Puisque comportement normal varie d'un navigateur à l'autre, cette question est quelque chose de non séquentiel. J'aime la réponse de @ da5id - utilisez l'une des nombreuses réinitialisations disponibles et ajustez-la en fonction de vos besoins.
Une fois que vous avez attribué une valeur à une propriété CSS d'un élément, il n'y a aucun moyen de récupérer la valeur "normale" pour lui, en supposant que "normal" signifie "défaut du navigateur", comme cela semble vouloir dire ici. Donc, la seule façon d'avoir, disons, un h1 l'élément a le navigateur par défaut font-size est de ne pas définir la propriété du tout dans votre code CSS.
Ainsi, pour exempter certaines propriétés et certains éléments de la réinitialisation CSS, vous devez utiliser une réinitialisation CSS plus limitée. Par exemple, vous ne devez pas utiliser * { font-size: 100% } mais remplacer * par une liste de sélecteurs, comme input, textarea { font-size: 100% } (la liste peut être assez longue, mais par exemple, les paramètres par défaut du navigateur pour font-size diffère de 100% pour quelques éléments seulement).
Il est bien sûr possible de définir des propriétés sur des valeurs que vous attendez comme des valeurs par défaut du navigateur. Il n'y a aucune garantie que cela aura l'effet souhaité sur tous les navigateurs, actuels et futurs. Mais pour certaines propriétés et certains éléments, cela peut être relativement sûr, car les valeurs par défaut ont tendance à être similaires.
En particulier, vous pouvez utiliser la section Rend dans HTML5 CR. Il décrit le "rendu attendu" - pas une exigence, bien que les éditeurs de navigateurs puissent décider de revendiquer leur conformité s'ils le souhaitent, et généralement cela gardera probablement des implémentations assez similaires à cet égard. Par exemple, pour h1 les paramètres attendus sont (regroupés ici en une seule règle - dans HTML5 CR, ils sont dispersés):
h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}
(Il existe des règles contextuelles supplémentaires. Par exemple, imbrication h1 inside section devrait affecter les paramètres.)