Django - 3.1 Introduction au CSS : sélecteurs et déclarations
CSS signifie feuilles de style en cascade. Ce langage met en forme une page HTML : couleur, taille, police, espacement ou animation. Cette leçon explique à quoi sert le CSS, comment s'écrit une déclaration et quels sont les grands types de sélecteurs.
Le rôle du CSS
Le HTML décrit le contenu d'une page, et le CSS décrit son apparence. Avec le CSS, on peut modifier la police, la couleur, la taille et l'espacement du texte.
On peut aussi organiser le contenu en plusieurs colonnes, ajouter des animations ou décorer la page avec une image ou une couleur de fond. Le CSS n'est pas un langage de programmation, c'est un langage de feuilles de style.
Les bases du CSS répondent à des questions concrètes : comment rendre un texte rouge ou noir, comment placer un contenu à un endroit précis de la fenêtre, ou comment décorer une page avec une image ou une couleur de fond.
Écrire une déclaration
Une règle CSS commence par un sélecteur, qui désigne les éléments à styliser. Entre accolades, une déclaration associe une propriété à une valeur.
L'exemple ci-dessous sélectionne tous les paragraphes de la page et les affiche en rouge. Le sélecteur est p, la propriété est color et la valeur est red.
p {
color: red;
}Les principaux types de sélecteurs
Il existe plusieurs façons de cibler un élément, du plus général au plus précis. Plus le sélecteur est précis, plus il vise un élément unique.
Un sélecteur de type vise tous les éléments d'un même type. Pour cibler un seul paragraphe parmi trois, il faut un identifiant ou une classe. Ces sélecteurs sont plus précis et l'emportent sur un sélecteur plus général.
- Sélecteur d'élément, ou de type : tous les éléments d'un même type, comme tous les paragraphes.
- Sélecteur d'identifiant, ou id : un élément précis, plus spécifique qu'un type.
- Sélecteur de classe : les éléments qui partagent la même classe.
- Sélecteur d'attribut : les éléments qui possèdent un attribut, comme l'attribut src d'une image.
En résumé
Le CSS met en forme les pages HTML. Une règle associe un sélecteur à des déclarations, chacune composée d'une propriété et d'une valeur. Plus le sélecteur est précis, plus il cible un élément particulier.
Points clés
- Le CSS sert à styliser et mettre en page les pages HTML.
- Une règle associe un sélecteur à une ou plusieurs déclarations.
- Une déclaration combine une propriété et une valeur.
- Le sélecteur d'élément cible tous les éléments d'un même type.
- Les identifiants, les classes et les attributs permettent des sélections plus précises.
Questions fréquentes
Le CSS est-il un langage de programmation ?
Non. Le CSS applique des styles aux éléments d'une page, il ne calcule rien.
Quelle différence entre une classe et un identifiant ?
Une classe peut être partagée par plusieurs éléments. Un identifiant doit être unique dans la page.
Qu'est-ce qu'une déclaration ?
C'est l'association d'une propriété, comme color, et d'une valeur, comme red.