Leçons
Démarrer
Démarrer la formation
CodeGym /Cours Java /Frontend SELF FR /Introduction aux sélecteurs

Introduction aux sélecteurs

Frontend SELF FR
Niveau 2 , Leçon 4
Disponible

1. Balise <style>

Si un élément HTML a trop de styles, on peut les extraire dans un élément spécial — la balise style. En général, elle est placée dans la balise <head> et ressemble à ceci :

CSS+HTML+JavaScript
          
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Exemple de CSS</title>
    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Ceci est un exemple d'utilisation des styles dans la balise <style>.</p>
</body>
</html>

Maintenant, vous n'avez plus besoin d'écrire une longue ligne de styles pour la balise <body> dans son attribut style, mais vous pouvez les déplacer dans la balise style. C'est super pratique.

C'est la même chose pour la balise <p> (paragraphe). De plus, le style qui est défini dans la balise <style> dans <head> sera appliqué à tous les paragraphes du document, même si vous en avez des milliers. Et tout cela parce que les styles dans la balise <style> sont définis à l'intérieur des sélecteurs.

5.2 Sélecteurs

Les sélecteurs permettent de choisir les éléments HTML auxquels les propriétés CSS seront appliquées. Il existe différents types de sélecteurs :

Sélecteur de balise

Applique le style à tous les éléments d'un certain type. Il suffit d'indiquer le nom de la balise et des accolades après. 


tagname {
    // styles
}

tagname peut être n'importe quoi : body, image, a, p, … n'importe quoi

Sélecteur de classe

On peut aussi attacher des propriétés CSS non pas à une balise spécifique, mais simplement donner un nom à un groupe de propriétés CSS. Ce groupe est appelé classe en CSS. Un tel style est appliqué à tous les éléments avec une certaine classe. Les classes sont définies via l'attribut class en HTML.

CSS+HTML+JavaScript
      
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.important {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p class="important">Ceci est un texte important.</p>
<p>Ceci est un texte ordinaire.</p>
</body>
</html>

Dans l'exemple ci-dessus, seul le texte du premier paragraphe, auquel le style/classe «important» est appliqué, sera en gras. Le deuxième paragraphe n'a pas ce style.

Lors de la définition de styles dans la balise <style>, vous pouvez le faire de 3 manières :

  • tagname { …}
  • tagname.classname { …}
  • .classname { …}

Nous approfondirons le sujet des sélecteurs lorsque nous étudierons le CSS. Pour l'instant, je vous en parle parce que dans les exemples HTML, vous rencontrerez du CSS, et je placerai souvent ce dernier dans la balise style et utiliserai des sélecteurs pour appliquer un style à un élément HTML particulier.

Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION