Image de l'article Introduction à CSS : sélecteurs, propriétés et valeurs : Comprendre la cascade et l'héritage en CSS

8.10. Introduction à CSS : sélecteurs, propriétés et valeurs : Comprendre la cascade et l'héritage en CSS

L'introduction au CSS est un point crucial dans le développement des compétences front-end. CSS, pour Cascading Style Sheets, est le langage utilisé pour décrire la présentation d'un document écrit en HTML ou XML. C'est grâce à CSS que vous pouvez contrôler la couleur du texte, le style des polices, l'espacement entre les paragraphes, la taille et la disposition des colonnes, les images ou les couleurs d'arrière-plan utilisées, les mises en page, entre autres.

Sélecteurs, propriétés et valeurs

Pour commencer, parlons des sélecteurs, des propriétés et des valeurs en CSS. Les sélecteurs sont utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Par exemple, si vous souhaitez styliser tous les paragraphes (<p>) de votre document HTML, vous utiliserez le sélecteur de paragraphe (<p>).

Une fois que vous avez sélectionné les éléments que vous souhaitez styliser, vous pouvez déclarer les propriétés que vous souhaitez modifier pour ces éléments. Les propriétés sont simplement les caractéristiques des éléments HTML que vous souhaitez modifier. Par exemple, la couleur du texte, la taille de la police, la hauteur, la largeur, etc.

Les valeurs correspondent à celles vers lesquelles vous souhaitez modifier la propriété. Par exemple, si vous souhaitez changer la couleur du texte de tous vos paragraphes en rouge, « rouge » serait la valeur que vous donnez à la propriété « couleur ».

Donc, un exemple de déclaration CSS serait :

<p style="color: red;">Ceci est un paragraphe.</p>

Dans cet exemple, '<p>' est le sélecteur, 'color' est la propriété et 'red' est la valeur.

Comprendre la cascade et l'héritage en CSS

Une partie essentielle du CSS est la compréhension de la cascade et de l'héritage. Le terme « cascade » en CSS fait référence à l'ordre de priorité des règles de style qui déterminent quelle règle de style sera appliquée si plusieurs règles sont applicables à un élément donné.

Par exemple, si vous disposez du code CSS suivant :

<p style="color: red;">Ceci est un paragraphe.</p>
<p style="color: blue;"> Ceci est un autre paragraphe.</p>

Le premier paragraphe sera rouge et le second sera bleu, car la règle de « couleur » pour le premier paragraphe est « rouge » et la règle de « couleur » pour le deuxième paragraphe est « bleu ». C'est la cascade en action.

« Héritage » en CSS fait référence au fait que les styles sont hérités des éléments parents vers les éléments enfants. Par exemple, si vous disposez du code CSS suivant :

<div style="couleur : rouge;">
  <p>Ceci est un paragraphe.</p>
</div>

Le paragraphe sera rouge, car il hérite de la règle 'color' de l'élément parent '<div>'. C'est l'héritage en action.

Comprendre la cascade et l'héritage est crucial pour travailler efficacement avec CSS, car cela vous permet de créer des règles de style efficaces et d'éviter d'avoir à styliser chaque élément individuellement.

En résumé, l'introduction de CSS et la compréhension des sélecteurs, des propriétés et des valeurs, ainsi que de la mise en cascade et de l'héritage, sont essentielles pour devenir un développeur front-end efficace. Avec une solide compréhension de ces concepts, vous pouvez créer des sites Web visuellement attrayants et efficaces.

Répondez maintenant à l’exercice sur le contenu :

Que signifie « cascade » en CSS et comment ça marche ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Image de l'article Introduction à CSS : sélecteurs, propriétés et valeurs : comment utiliser l'inspecteur d'éléments pour déboguer CSS

Page suivante de lebook gratuit :

54Introduction à CSS : sélecteurs, propriétés et valeurs : comment utiliser l'inspecteur d'éléments pour déboguer CSS

0 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte