8.4. Introduction à CSS : sélecteurs, propriétés et valeurs : combinaison de sélecteurs CSS

8.4. Introduction à CSS : Sélecteurs, propriétés et valeurs : Combinaison de sélecteurs CSS

Les feuilles de style en cascade (CSS) sont un langage de style utilisé pour décrire l'apparence d'un document écrit en HTML. Ils sont utilisés pour contrôler la mise en page de plusieurs pages Web à la fois. Dans cette section, nous aborderons les sélecteurs, les propriétés et les valeurs en CSS et comment les combiner pour créer des styles efficaces et attrayants pour vos pages Web.

Sélecteurs CSS

Les sélecteurs CSS permettent aux concepteurs d'identifier les éléments de page HTML qui doivent recevoir des styles CSS. Ils peuvent être divisés en cinq catégories : simple, combinateur, pseudo-classe, pseudo-élément et attribut.

Les sélecteurs simples incluent le sélecteur de type (par exemple h1, p), le sélecteur de classe (par exemple .intro, .footer) et le sélecteur d'ID (par exemple #navbar, #logo). Ils sélectionnent les éléments en fonction respectivement du nom de l'élément, de la classe de l'élément ou de l'ID de l'élément.

Les sélecteurs de combinateur incluent le combinateur descendant (par exemple div p), le combinateur enfant (par exemple ul > li) et le combinateur adjacent (par exemple h1 + p). Ils sélectionnent des éléments en fonction de leurs relations spécifiques avec d'autres éléments.

Les sélecteurs de pseudo-classes incluent :hover, :focus, :active, :visited et :link. Ils sélectionnent les éléments en fonction de leur état spécifique.

Les sélecteurs de pseudo-éléments incluent ::before, ::after, ::first-letter et ::first-line. Ils sélectionnent une partie spécifique d'un élément.

Les sélecteurs d'attribut incluent [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value] et [attr* =value ]. Ils sélectionnent des éléments en fonction d'un attribut ou d'une valeur d'attribut spécifique.

Propriétés et valeurs CSS

Les propriétés CSS sont les aspects des éléments HTML que vous souhaitez styliser. Par exemple, vous souhaiterez peut-être modifier la couleur du texte, le type de police, la taille de la police, l'espacement des lignes, la marge, le remplissage, la bordure, l'arrière-plan, etc.

Les valeurs CSS sont les styles spécifiques que vous appliquez aux propriétés. Par exemple, vous souhaiterez peut-être que le texte soit rouge, la police soit Arial, la taille de la police soit 14 px, l'interligne soit 1,5, la marge soit 10 px, le remplissage soit 5 px, la bordure soit solide 1 px. noir, le fond plat est bleu, etc.

Combiner des sélecteurs CSS

La combinaison de sélecteurs CSS constitue un moyen puissant d'appliquer des styles à des éléments spécifiques de votre page Web. Par exemple, vous souhaiterez peut-être appliquer un style à tous les paragraphes d’un div spécifique. Pour ce faire, vous pouvez combiner le sélecteur de type div avec le sélecteur de type p à l'aide du combinateur descendant. Le sélecteur combiné serait div p.

Un autre exemple serait d'appliquer un style à tous les éléments de liste qui sont des enfants directs d'une liste non ordonnée spécifique. Pour ce faire, vous pouvez combiner le sélecteur de type ul avec le sélecteur de type li à l'aide du combinateur enfant. Le sélecteur combiné serait ul > li.

De plus, vous souhaiterez peut-être appliquer un style à un élément spécifique lorsqu'il se trouve dans un état spécifique. Par exemple, vous souhaiterez peut-être changer la couleur du texte d'un lien lorsque la souris passe dessus. Pour ce faire, vous pouvez combiner le sélecteur de type a avec le sélecteur de pseudo-classe :hover. Le sélecteur combiné serait un:hover.

En conclusion, la combinaison de sélecteurs CSS vous permet d'appliquer des styles à des éléments spécifiques de votre page Web avec précision et efficacité. En maîtrisant cette compétence, vous pouvez créer des pages Web de haute qualité et visuellement attrayantes.

Page suivante de lebook gratuit :

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

0 minutes