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
psé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
.introsélectionnera tous les éléments avecclass="intro". - Sélecteurs d'ID : sélectionnez un élément en fonction de l'attribut ID. Par exemple, le sélecteur d'ID
#firstnamesélectionnera l'élément avecid="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 avectarget="_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.
