Sur cette page nous abordons plusieurs aspects et plusieurs propriétés de style CSS que vous pouvez utiliser pour rendre votre site plus attrayant.
Cette fiche s'adresse à ceux qui maitrisent CSS tout comme aux débutants qui aimeraient apprendre quelques propriétés pour faire des sites web de qualité.
Lorsque vous créez un site Web à partir de zéro , il est judicieux de commencer avec 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 les navigateurs Web sont tous différents. La taille de police par défaut est différente d'une plateforme à l'autre, la famille de polices par défaut est différente, certains navigateurs définissent les marges et le 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. Lorsqu'ils le sont, utf-8 simplifie le processus. La définition du jeu de caractères dans la feuille de style externe n'aura pas la priorité sur un en- tête HTTP , mais dans toutes les autres situations, elle le sera.
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 en tant que noms de classe et d'ID , 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 des styles pour 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à afin que les images d'arrière-plan et les divisions de mise en page soient alignées correctement.
html, body{
margin:0px;
padding:0px;
border:0px;
}
Définissez la couleur de premier plan ou de police par défaut sur noir et la couleur d'arrière-plan par défaut sur 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 la balise HTML facilite la lecture et l'utilisation de la page.
html, body{
color:#000;
background:#fff;
}
Styles de police par défaut
La taille de la police et la famille de polices changeront inévitablement une fois la conception prise en charge, mais commenceront par une taille de police par défaut de 1 em et une famille de polices par défaut Arial, Genève ou une 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, body, p, th, td, li, dd, dt{
font:1em Arial, Helvetica, sans-serif;
}
Il peut y avoir d'autres endroits où vous pouvez trouver du texte, mais p , th , td , li , dd et dt sont un bon début pour définir la police de base. Incluez le HTML et le corps au cas où, mais de nombreux navigateurs remplacent les choix de police si vous ne définissez que vos polices pour le HTML ou le corps.
Titres
Les en-têtes HTML sont importants à utiliser pour aider à la présentation de votre site et permettre aux moteurs de recherche d'approfondir votre site. Sans styles, ils sont tous assez moches, 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 chacune.
h1, h2, h3, h4, h5, h6 {
font-family:Arial, Helvetica, sans-serif;
}
h1{font-size:2em;}
h2{font-size:1,5em;}
h3{font-size:1.2em;}
h4{font-size:1.0em;}
h5{font-size:0,9 em;}
h6{font-size:0.8em;}
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 risquez d'oublier au moins l'une des pseudo-classes. Définissez-les avec quelques petites variations sur le bleu, puis modifiez-les une fois que vous avez défini la palette de couleurs pour le site.
Pour définir les liens dans des tons de bleu, définissez :
- Liens en bleu
- Liens visités en bleu foncé
- Liens de survol en bleu clair
- Liens actifs en bleu encore plus clair
Comme le montre cet exemple :
a:link{couleur:#00f;}
a:visited{color:#009;}
a:hover{color:#06f;}
a:active{color:#0cf;}
En stylisant les liens avec un jeu de couleurs assez inoffensif, cela garantit que vous n'oublierez aucune des classes et les rend également un peu moins bruyants 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, body{
margin:0px;
padding:0px;
border:0px;
color:#000;
background:#fff;
}
html, body, p, th, td, li, dd, dt {
background: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size:2em;}
h2{font-size:1,5em;}
h3{font-size:1.2em;}
h4{font-size:1.0em;}
h5{font-size:0,9em;}
h6{font-size:0.8em;}
a:link{color:#00f;}
a:visited{color:#009;}
a:hover{color:#06f;}
a:active{color:#0cf;}
