Lorsque vous créer un site Web à partir de zéro, il est judicieux de commencer par les styles de base définis. C'est comme commencer avec une toile propre et des pinceaux frais. L'un des premiers problèmes auxquels sont confrontés les concepteurs de sites Web est que navigateurs Web sont tous différents. La taille de police par défaut est différente d'une plate-forme à l'autre, la famille de polices par défaut est différente, certains navigateurs définissent des marges et un remplissage sur la balise body tandis que d'autres ne le font pas, et ainsi de suite. Contournez ces incohérences en définissant les styles par défaut pour vos pages Web.
CSS et le jeu de caractères
Tout d'abord, définissez le jeu de caractères de vos documents CSS sur utf-8. Bien qu'il soit probable que la plupart des pages que vous concevez soient écrites en anglais, certaines peuvent être localisées, adaptées à différents contextes linguistiques et culturels. Quand ils le sont, utf-8 simplifie le processus. Réglage du jeu de caractères dans le
feuille de style externe ne prévaudra pas sur un HTTP en-tête, mais dans toutes les autres situations, ce sera le cas.Il est facile de définir le jeu de caractères. Pour la première ligne du document CSS, écrivez:
@charset "utf-8" ;
De cette façon, si vous utilisez des caractères internationaux dans la propriété de contenu ou comme noms de classe et d'identification, la feuille de style fonctionnera toujours correctement.
Styliser le corps de la page
La prochaine chose dont une feuille de style par défaut a besoin, ce sont les styles à mettre à zéro les marges, le remplissage et les bordures. Cela garantit que tous les navigateurs placent le contenu au même endroit et qu'il n'y a pas d'espaces cachés entre le navigateur et le contenu. Pour la plupart des pages Web, c'est trop près du bord pour le texte, mais il est important de commencer par là pour que les images d'arrière-plan et les divisions de mise en page soient correctement alignées.
html, corps {
marge: 0px ;
remplissage: 0px ;
bordure: 0px ;
}
Définissez la couleur de premier plan ou de police par défaut sur le noir et la couleur d'arrière-plan par défaut sur le blanc. Bien que cela changera très probablement pour la plupart des conceptions de pages Web, le fait d'avoir ces couleurs standard définies sur le corps et balise HTML dans un premier temps, rend la page plus facile à lire et à utiliser.
html, corps {
couleur: #000 ;
arrière-plan: #fff ;
}
Styles de police par défaut
La taille de la police et la famille de polices sont quelque chose qui changera inévitablement une fois la conception prise en main, mais commencez avec une taille de police par défaut de 1 em et un défaut famille de polices d'Arial, de Genève ou de quelque autre police sans empattement. L'utilisation d'ems maintient la page aussi accessible que possible et une police sans empattement est plus lisible à l'écran.
html, corps, p, th, td, li, dd, dt {
police: 1em Arial, Helvetica, sans empattement ;
}
Il peut y avoir d'autres endroits où vous pourriez trouver du texte, mais p, e, td, je suis, jj, et dt sont un bon début pour définir la police de base. Inclure HTML et corps juste au cas où, mais de nombreux navigateurs remplacent le choix de police si vous ne définissez vos polices que pour le HTML ou le corps.
Titres
En-têtes HTML sont importants à utiliser pour aider à définir votre site et permettre aux moteurs de recherche d'approfondir votre site. Sans styles, ils sont tous assez laids, alors définissez des styles par défaut sur chacun d'eux et définissez la famille de polices et les tailles de police pour chacun.
h1, h2, h3, h4, h5, h6 {
famille de polices: Arial, Helvetica, sans-serif ;
}
h1 { taille de police: 2em; }
h2 { taille de police: 1.5em; }
h3 { taille de police: 1.2em; }
h4 { taille de police: 1.0em; }
h5 { taille de police: 0.9em; }
h6 { taille de police: 0,8 em; }
N'oubliez pas les liens
Le style des couleurs des liens est presque toujours une partie critique de la conception, mais si vous ne les définissez pas dans les styles par défaut, vous oublierez probablement au moins une des pseudo-classes. Définissez-les avec une petite variation sur le bleu, puis modifiez-les une fois que vous avez défini la palette de couleurs pour le site.
Pour régler le liens dans les tons de bleu, définissez:
- liens comme bleu
- liens visités comme bleu foncé
- liens de survol comme bleu clair
- liens actifs comme un bleu encore plus pâle
Comme le montre cet exemple:
a: lien { couleur: #00f; }
a: visité { couleur: #009; }
a: survolez { couleur: #06f; }
a: actif { couleur: #0cf; }
En stylisant les liens avec une palette de couleurs assez inoffensive, cela garantit que vous n'oublierez aucune des classes et les rend également un peu moins bruyantes que le bleu, le rouge et le violet par défaut.
Feuille de style complète
Voici la feuille de style complète:
@charset "utf-8" ;
html, corps {
marge: 0px ;
remplissage: 0px ;
bordure: 0px ;
couleur: #000 ;
arrière-plan: #fff ;
}
html, corps, p, th, td, li, dd, dt {
police: 1em Arial, Helvetica, sans empattement ;
}
h1, h2, h3, h4, h5, h6 {
famille de polices: Arial, Helvetica, sans-serif ;
}
h1 { taille de police: 2em; }
h2 { taille de police: 1.5em; }
h3 { taille de police: 1.2em; }
h4 { taille de police: 1.0em; }
h5 { taille de police: 0.9em; }
h6 { taille de police: 0,8 em; }
a: lien { couleur: #00f; }
a: visité { couleur: #009; }
a: survolez { couleur: #06f; }
a: actif { couleur: #0cf; }