Montrons des listes ordonnées et non ordonnées. Ce sont deux des quatre types de liste en HTML. Les deux autres types de listes sont des listes de description pour l’appariement nom-valeur et des listes interactives pour les groupes de boutons.
<!-- ordered list: -->
<ol>
<li></li>
</ol>
<!-- reversed ordered list: -->
<ol reversed>
<li></li>
</ol>
<ol start = "6">
<li></li>
</ol>
<ol type = "a">
<li></li>
</ol>
<!--nested list: -->
<ul>
<li></li>
</ul>
<!-- Ordered and unordered list styling with pseudoclasses -->Présentons la propriété CSS box-sizing et expliquons pourquoi la plupart des frameworks CSS réinitialisent la valeur de content-box à border-box. Lorsque box-sizing est défini sur border-box, la largeur globale d’un élément inclura le contenu, le rembourrage et la bordure de l’élément. Cela rend le dimensionnement et la disposition des éléments plus prévisibles. Les pseudo-éléments ::before et ::after sont également introduits dans ce segment.
Passons quelques minutes à expliquer certains termes CSS courants, notamment les règles, les sélecteurs et les blocs de déclaration.
Passons en revue les sélecteurs CSS courants, y compris la sélection par classe, identifiant et descendant. Lorsque des styles sont appliqués, ils seront hérités par tous les éléments imbriqués à moins qu’une règle plus spécifique ne soit appliquée.
Examinons les sélecteurs parent-enfant, les sélecteurs frères généraux et les sélecteurs frères adjacents. Le premier frère n’est pas sélectionné avec les sélecteurs de frère car il n’a pas de frère précédent. Seuls les éléments frères qui suivent un frère sont sélectionnés.
Examinons les sélecteurs d’attributs, qui fournissent des options pour sélectionner des éléments en fonction d’une valeur de texte d’attribut. Il existe des sélecteurs pour spécifier une correspondance exacte ou partielle en fonction du début, de la fin du texte ou d’une sous-chaîne qu’il peut contenir.
Instruisons maintenant de styliser n’importe quel lien vers un fichier PDF en ajoutant la chaîne "(PDF)" à la fin du texte du lien.
Expliquons comment utiliser les pseudo sélecteurs :first-child, :last-child, :nth-child et :nth-last-child. Ces sélecteurs styliseront les éléments en fonction de leur position dans un parent. Il peut s’agir d’une position fixe, comme le 6ème élément, ou d’un motif comme tous les 3èmes éléments.
Stylisons les listes non ordonnées avec à la fois la propriété list-style-type et le pseudo-élément ::marker . La propriété list-style-type peut être définie sur n’importe quelle valeur de chaîne, y compris les symboles ou les emojis. Le pseudo-élément ::marker aide à utiliser les graphiques SVG comme marqueur d’élément de liste.
Montrons comment modifier la propriété list-style-type des listes ordonnées. Les valeurs prédéfinies sont disponibles comme le haut-romain ou le bas-latin.
Introduisons les listes de description et stylisons-les à l’aide de flexbox. Les listes de descriptions peuvent avoir une relation un à un ou plusieurs à plusieurs entre le terme de description et les éléments de définition de description.
Utilisons la grille CSS pour résoudre les problèmes de mise en page avec les éléments de définition de description s’enroulant sur une deuxième ligne. Les éléments <dd> peuvent être contraints à la deuxième colonne avec la grille CSS.
Expliquons que les listes de menus contiennent un groupe d’éléments de liste interactifs. Généralement, ces éléments exécutent une tâche dans la page programmée avec JavaScript. L’élément menu est l’élément parent d’un élément de liste, tout comme un élément ul ou ol.
Ajoutons un balisage sémantique à une recette de crème glacée. Une fois le balisage ajouté, le style CSS doit être appliqué.
Introduisons les éléments sémantiques utilisés lors du découpage du contenu d’une page. Des éléments tels que l’en-tête, le pied de page et la section peuvent apparaître plusieurs fois sur une page, en fonction de son architecture. D’autres éléments comme main ne doivent apparaître qu’une seule fois car ils spécifient un domaine d’intérêt.
Voyons comment appliquer le HTML sémantique à une page. Un en-tête et un pied de page sont appliqués. Les liens en haut sont entourés d’un élément nav. La figure et figcapture sont utilisées avec l’élément img.
Introduisons les sélecteurs de pseudo-classe :is(), :where(), :has() et :not(). Contrairement aux anciennes pseudo-classes comme :hover ou :before, ces nouveaux sélecteurs de niveau 4 évaluent une condition pour appliquer le style CSS. La condition est un autre sélecteur CSS placé entre parenthèses.
Décrivons les principaux composants de CSS, qui incluent l’héritage, la spécificité et la cascade. L’héritage permet au style appliqué à un élément parent d’être transmis aux descendants à moins qu’il ne soit spécifiquement remplacé.
Démontrons l’héritage CSS et comment certaines propriétés sont héritées alors que d’autres ne le sont pas. Le sélecteur :root, la différence entre display:none; et visibilité:hidden:, et la pseudo-classe :any-link sont également abordées dans ce segment.
Démontrons que les propriétés sans héritage peuvent être forcées à hériter en utilisant la valeur "inherit". Par exemple, définir border: inherit; entraînera l’élément à hériter de la valeur de bordure de son parent. L’annulation de l’héritage avec les mots-clés revert, initial et unset est également illustrée dans ce segment.
Expliquons comment la spécificité est calculée. La formule compte le nombre d’ID, de classes et de sélecteurs de type. Une règle avec une spécificité plus élevée remplacera les règles moins spécifiques.
Utilisons une démo CodePen pour ajouter progressivement plus de spécificité à un sélecteur CSS. Cela montre comment les sélecteurs de classe remplacent les sélecteurs d’élément et les sélecteurs d’ID remplacent les sélecteurs de classe. Ce segment aborde également brièvement l’hérédité et les effets de la cascade sur la spécificité.
Démontrons comment la spécificité seule peut ne pas suffire à passer outre certaines règles. Tirer parti à la fois de la spécificité et de l’héritage est parfois nécessaire pour styliser correctement les éléments descendants.
Expliquons les règles CSS et calculons la spécificité de chaque règle.
Expliquons que la cascade se charge d’identifier tous les styles pertinents à appliquer à la sélection. Cela inclut les requêtes multimédias et les déclarations @supports.
Voyons comment la cascade détermine les styles pertinents en fonction de l’origine du style et du niveau d’importance.
Montrons comment la cascade est affectée par les feuilles de style externes. Les feuilles de style externes ont le même niveau d’importance que CSS dans un bloc de style tant que les sélecteurs ont la même spécificité. Le mot-clé !important est également démontré dans ce segment.
Utilisons les outils de développement du navigateur pour inspecter le style CSS appliqué à un élément spécifique de la page. Les outils de développement de navigateur organisent le style par ordre de spécificité et indiquent visuellement quels styles sont remplacés par des règles plus spécifiques.
Expliquons que la règle CSS @layer est utilisée pour déclarer une couche en cascade et peut également définir l’ordre de priorité lorsque plusieurs couches en cascade sont présentes. Les calques représentent un moyen de regrouper un ensemble de styles et de les traiter avec un niveau d’importance spécifique.
Montrons comment importer un fichier CSS externe en tant que couche dans une autre feuille de style. Lorsque vous travaillez avec des calques CSS, des conflits de style peuvent survenir. Quelques techniques pour contourner les problèmes de spécificité sont abordées dans ce segment.
Montrons comment gérer plusieurs couches dans un fichier CSS. Quel que soit l’endroit où les couches sont déclarées, la priorité des couches peut être établie à l’aide de la règle @layer et en classant les noms des couches du moins important au plus important.