Share
Beaucoup trop de concepteurs novices en CSS ne réalisent pas l’importance de créer un fichier "reset.css". Lorsque vous avez un environnement dans lequel chaque navigateur a son propre style "par défaut", vous vous retrouvez souvent à cogner votre crâne lorsque vous vous demandez: "Pourquoi y-a-t-il un espacement ici?" Pour vous épargner certains des maux de tête que vous allez certainement vivre, vous devrez créer votre propre fichier de réinitialisation simple. Le problème lié à l’utilisation de l’un des nombreux frameworks existants est qu’ils ne sont pas conçus spécialement pour vous. Par exemple, je n'utilise jamais l'élément "center" déconseillé dans mes projets. Par conséquent, je n'ai pas besoin de le mettre dans mon style par défaut. Cependant, d'autres peuvent avoir besoin de le faire - bien qu'ils méritent une tape sur le poignet… ou les fesses si vous êtes si enclin.
Par défaut, les navigateurs ajouteront des marges à de nombreux éléments. Par exemple, il existe généralement environ six pixels de marges sur l’élément body. En tant que designer, vous devriez être celui qui spécifie ces chiffres! (Sauf peut-être en ce qui concerne la taille de la police - qui est un tout autre sujet à débattre longuement.) Alors mettons à zéro un tas de ces éléments!
corps, html, div, blockquote, img, étiquette, p, h1, h2, h4, h4, h5, h6, pré, ul, ol, li, dl, dt, dd, forme, un, fieldset, entrée, th, td marge: 0; rembourrage: 0; bordure: 0; contour: aucun;
Vous avez peut-être remarqué que la taille de vos éléments varie d'un navigateur à l'autre. Vous pouvez changer cela en définissant la taille de police par défaut à 100%..
h1, h2, h3, h4, h5, h6 taille de police: 100%;
Ensuite, nous devrons définir les marges et le remplissage de nos éléments de titre. Je vais aussi supprimer le type de style de liste de mes éléments de liste. Enfin, je vais définir une taille de police de base pour l'élément body.
corps hauteur de trait: 1; taille de police: 88%; h1, h2, h3, h4, h5, h6 taille de la police: 100%; remplissage: .6em 0; marge: 0 15 px; ul, ol list-style: none; img border: 0;
J'aime généralement inclure quelques classes communes que j'utilise dans tous mes projets. Vous pouvez ou non choisir de les utiliser vous-même.
.floatLeft float: left; remplissage: .5em .5em .5em 0; .floatRight float: right; rembourrage: .5em 0 .5em .5em;
corps, html, div, blockquote, img, étiquette, p, h1, h2, h4, h4, h5, h6, pre, ul, ol, li, dl, dt, forme, a, champs td marge: 0; rembourrage: 0; bordure: 0; contour: aucun; body line-height: 1; taille de police: 88% / * Décidez vous-même si vous souhaitez inclure ceci. * /; h1, h2, h3, h4, h5, h6 taille de la police: 100%; remplissage: .6em 0; marge: 0 15 px; ul, ol list-style: none; a couleur: noir; texte-décoration: aucun; a: hover text-decoration: underline; .floatLeft float: left; remplissage: .5em .5em .5em 0; .floatRight float: right; rembourrage: .5em 0 .5em .5em;
Au moins pour moi, c'est tout ce dont j'ai besoin pour démarrer avec un nouveau site web. Pour vos propres projets, vous devriez développer ce que j'ai ici pour que cela vous convienne le mieux. Vous devriez probablement spécifier les marges sur plusieurs de vos éléments couramment utilisés, comme la balise de paragraphe.
Si vous souhaitez avoir un fichier de réinitialisation de 100%, je vous recommande de vous reporter au populaire fichier "Reset CSS" d'Eric Meyer. Alternativement, vous pouvez consulter le YUI Reset CSS. À lundi!
Accentsconagua