Réinitialisation CSS, styles par défaut pour les éléments communs

Question

Après l'application d'un CSS reset, je veux revenir à la "normale" comportement pour les éléments html comme: p, h1 h6.., forte, ul et li.

Maintenant, quand je dis normal, je veux dire, par exemple, l'élément p ajoute de l'espace ou un retour chariot comme résultat une fois utilisée, ou la taille de la police et de l'audace pour une balise h1, avec l'espacement.

Je me rends compte qu'il est totalement à moi comment je veux définir le style, mais je veux revenir à un comportement normal pour certains éléments (au moins comme point de départ que je peux modifier plus tard).

Answer 1

YUI fournit un fichier CSS de base qui donnera des styles cohérents dans tous les navigateurs de niveau A. Ils fournissent également un fichier de réinitialisation CSS, vous pouvez donc l'utiliser également, mais vous dites que vous avez déjà réinitialisé le CSS. Pour plus de détails, visitez le site Web de YUI . C’est ce que j’utilise et ça marche vraiment bien.

Answer 2

Une des règles à appliquer des styles CSS est "le dernier qui gagne". Cela signifie que si votre CSS réinitialiser les styles d'éléments de margin:0; padding:0 vous pouvez alors remplacer ces règles en déclarant vos valeurs désirées pour les mêmes éléments par la suite.

Vous pouvez le faire dans le même fichier (YUI offre un one-liner reset, je pense que si j'ai parfois l'inclure en tant que la première ligne de mon fichier CSS) ou dans un fichier séparé qui s'affiche après le reset CSS <link/> balise.

Je pense que par un comportement normal, tu veux dire "les valeurs par défaut de mon navigateur préféré." Votre construction de règles CSS pour ces éléments est une partie de la réinitialisation de l'exercice.

Maintenant, vous voudrez peut-être regarder dans Blueprint CSS ou autre grille de cadres. Ces grille des cadres presque toujours d'abord réinitialiser les styles de rien, puis construire la typographie pour les éléments communs, etc. Cela pourrait vous faire économiser du temps et de l'effort.

Answer 3

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ée d'avoir mal lu votre question, vous recherchez autre chose comme la réinitialisation totale d'Eric Meyer @ http://meyerweb.com/eric/tools/css/reset/

Answer 4

Plutôt que d'utiliser une réinitialisation CSS totale, pensez à utiliser quelque chose comme Normaliser , qui "préserve les valeurs utiles par défaut".

Pour savoir ce que votre navigateur pense par défaut, ouvrez un fichier HTML simple avec des listes et affichez-les avec un débogueur CSS comme Firebug , puis recherchez-vous dans l'onglet Computed .

Answer 5

Découvrez YUI (Yahoo open source interface utilisateur de conventions).

Ils ont une base de feuille de style qui annule leur propre reset css. Ils ne actaully vous recommandons de l'utiliser en production - depuis sa contre-productif, mais certainement pourrait être utile de vérifier le fichier pour obtenir pertinents extraits de ce que vous voulez "annuler".

Je vous recommande de regarder les 40 minutes de parler pour obtenir jusqu'à la vitesse.

Voici un court extrait de leur base.fichier 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écharger l'intégralité de feuilles de style ci-dessous ou lire une documentation complète.

Yahoo reset css | Yahoo base (défaire) reset css