Tutoriel CSS
Les feuilles de style en cascade, ou « CSS » n’existaient pas quand les premiers navigateurs ont fait leur apparition. Malgré que les CSS soient apparues quelques années plus tard, les CSS ont tellement amélioré la conception Web que leur utilisation est rapidement devenue à grande échelle (ceci, lorsque le support de navigateur deviendra quasi universel). Aujourd'hui, tous les bons concepteurs Web utilisent les feuilles de styles pour créer un site Web. .
Un gros avantage offert par CSS est de permettre l’utilisation d’un style homogène dans tout le site Web. Il n'est pas nécessaire de répéter le style en copiant et collant. Il suffit d'attribuer une «classe» à un élément et de définir l'apparence de cet élément dans la feuille de style. Chaque élément réutilisera par la suite le même style.
Vous avez peut être remarqué dans le tutoriel HTML l'attribut de la balise SPAN était class = "spanExample". Le nom "spanExample" a été choisi pour ce tutoriel, mais il pourrait bien avoir été "myBoldText" ou "superAwesomeFont"; le nom du fichier n'a aucune importance en autant qu'il correspond à une classe dans le fichier CSS.
Le nom devient alors ce qu'on appelle un « sélecteur », mais un nom de classe est juste un type de sélecteur. Nous allons examiner 4 types de sélecteurs courants, mais toutes les définitions de style suivent cette structure de base:
selector {
property: value;
}
Pour une liste complète des sélecteurs, visitez le site W3C.
|
Ligne #
|
Collez le contenu de cette colonne dans le fichier style.css et sauvegardez
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
html {
background-color: #1E77AE;
}
body {
margin: 30px;
padding: 20px;
background-color: white;
}
.spanExample {
font-weight: bold;
}
#lnkAdeo {
color: red;
}
#lnkAdeo:hover {
background-color: #C3D4DF;
}
|
- Les lignes 1 et 4 sont des exemples de « sélecteurs de type » où toutes les balises de ce type ont ce style. Puisqu’il n’y a qu’une balise HTML et une balise <BODY> corps par document, ce n’est pas nécessaire de les nommer.
- Dans cet exemple, nous définissons la couleur de fond pour la page, rajoutons un peu de viande autour et à l'intérieur du corps et, ensuite, nous définissons la couleur de fond à blanc. Nous avons aussi changé le nom de la police pour l'ensemble du document.
- La ligne 10 est un exemple d'un « sélecteur de classe » (précédé par un point), où nous avons donné une classe à un élément et, par la suite, nous avons définit le style pour cette classe. Dans cet exemple, nous avons simplement mis le texte en gras.
- La ligne 13 est un exemple d'un « sélecteur ID » (préfixé par un dièse) où nous avons alloué un identifiant à un élément et avons défini le style pour les éléments avec cet ID. Un ID est habituellement attribué uniquement pour JavaScript, qui est au-delà de la portée de ce document.
- La ligne 16 est un exemple d'un «sélecteur de pseudo-classe dynamique » où le style change en fonction d'une certaine action de l'utilisateur. Dans cet exemple, le style est changé lorsque l'utilisateur passe la souris sur un lien avec l'ID « lnkAdeo ».
Non seulement il y a beaucoup plus de sélecteurs, mais il y a beaucoup plus de propriétés biens au-delà des couleurs de base et de l'espacement examinées brièvement ici. W3Schools offre une liste plus complète des propriétés CSS.