8.5. Introduction à CSS : sélecteurs, propriétés et valeurs : Introduction aux propriétés CSS

Introduction à CSS : sélecteurs, propriétés et valeurs

CSS, qui signifie Cascading Style Sheets, est un langage de style utilisé pour décrire l'apparence d'un document écrit en HTML. CSS décrit comment les éléments HTML doivent être affichés. Cela peut contrôler la mise en page de plusieurs pages Web à la fois. CSS vous permet d'appliquer des styles aux pages Web. Plus important encore, CSS vous permet de faire cela indépendamment du code HTML utilisé pour structurer le document.

Sélecteurs CSS

Les sélecteurs CSS sont la partie du CSS qui sélectionne l'élément HTML que vous souhaitez styliser. Il existe plusieurs types de sélecteurs en CSS, notamment les sélecteurs de type, de classe, d'ID et d'attribut, entre autres.

• Sélecteurs de type : sélectionnez des éléments en fonction du nom de l'élément HTML. Par exemple, le sélecteur de type p sélectionnera tous les paragraphes.
• Sélecteurs de classe : sélectionnez les éléments en fonction de l'attribut de classe. Par exemple, le sélecteur de classe .intro sélectionnera tous les éléments avec class="intro".
• Sélecteurs d'ID : sélectionnez un élément en fonction de l'attribut ID. Par exemple, le sélecteur d'ID #firstname sélectionnera l'élément avec id="firstname".
• Sélecteurs d'attributs : sélectionnez des éléments en fonction d'un attribut ou d'une valeur d'attribut. Par exemple, le sélecteur d'attribut [target="_blank"] sélectionnera tous les éléments avec target="_blank".

Propriétés CSS

Les propriétés CSS correspondent à ce que vous souhaitez styliser dans l'élément sélectionné. Par exemple, vous souhaiterez peut-être modifier la couleur, la police, la taille, la marge, le remplissage, l'arrière-plan, la bordure et de nombreuses autres propriétés des éléments HTML. Chaque propriété a une valeur spécifique.

Par exemple, la propriété color contrôle la couleur du texte. Ainsi, si vous souhaitez que le texte de tous les paragraphes soit rouge, vous utiliserez le code CSS suivant :

P{
  La couleur rouge;
}

Valeurs CSS

Les valeurs CSS sont les ajustements que vous apportez aux propriétés. Dans l'exemple ci-dessus, red est la valeur de la propriété color. Les valeurs peuvent être des mots-clés tels que red, des nombres tels que 12px, des pourcentages tels que 50 % ou diverses autres unités de mesure. .

Les valeurs peuvent également être plus complexes, comme url("image.jpg") pour la propriété background-image, ou rgba(255 , 0 , 0, 0.3) pour une couleur semi-transparente.

En bref, CSS est un langage puissant qui permet aux développeurs de contrôler précisément la manière dont les éléments HTML sont affichés à l'écran. Comprendre les sélecteurs, les propriétés et les valeurs CSS est essentiel pour devenir un développeur front-end efficace.

Page suivante de lebook gratuit :

49Introduction au CSS : sélecteurs, propriétés et valeurs : Comment utiliser et comprendre les propriétés CSS

0 minutes