Cette leçon plonge dans l'amélioration des visuels HTML à l'aide de feuilles de style en cascade (CSS). Nous commencerons par des sélecteurs CSS - les outils pour cibler des éléments HTML spécifiques.

Sheets de style cascading (css)

CSS dicte l'apparence des composants HTML: couleur, espacement, taille, etc. Bien que vous puissiez styliser des éléments individuels en utilisant des attributs en ligne style (par exemple,

), ceci est inefficace pour les grands sites Web.

A more effective approach involves using a element within the section of your HTML or a separate CSS file (like style.css) lié à votre html à l'aide de :

ou

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

Cela applique le même style à tous les éléments

. Les outils de développeur de navigateur (par exemple, cliquez avec le bouton droit, "Inspecter" dans Chrome) vous permettez d'examiner et de modifier les styles appliqués pour le dépannage.

Sélection des éléments html

le p dans p {couleur: red; } sélectionne tous les éléments

. Pour des structures plus complexes, id et classe les attributs fournissent un contrôle plus fin.

classe et sélecteurs d'ID

Chaque élément peut avoir un id unique . ID SELECTORS ( # idName ) Target Elements par leur id . Cependant, id doit être unique, limitant leur flexibilité.

Les classes offrent une plus grande polyvalence. Plusieurs éléments peuvent partager la même classe. Sélectionneurs de classe (. ClassName ) Target Elements avec cette classe. Les éléments peuvent avoir plusieurs classes (par exemple,

).

. Red-text {couleur: rouge; } styles tous les éléments avec la classe rouge-texte . p.red-text Styles spécifiquement

Elements avec rouge-text .

combinator selectors

Le modèle d'objet de document (DOM) représente la structure de la page en tant qu'arbre. Les sélecteurs de combinateurs tirent parti de cette hiérarchie.

• div p : sélectionne tous les éléments
  dans
  éléments (descendants).
• div> p : sélectionne uniquement les éléments directs
  éléments de
  éléments.
• p span : sélectionne le suivant immédiatement un
  .
• p ~ span : sélectionne tous silets suivant un
  .


Les combinaisons de combinations trop complexes sont découragées. Vous pouvez les combiner avec des sélecteurs de classe (par exemple, . Intro p ).

pseudo-sélecteurs

Pseudo-Class Selectors Style Elements basés sur leur état (par exemple, a: hover , a: actif , a: visité ). Sélectionneurs pseudo-éléments Parties cibles d'un élément (par exemple, :: Première lettre ).

Autres sélecteurs

• * : le sélecteur universel, sélectionnant tous les éléments.
• Sélecteurs de groupe (par exemple, h1, h2, p ): sélectionnez plusieurs types d'éléments.
• Sélecteurs d'attributs (par exemple, p [lang] , p [lang = "en"] ): sélectionnez des éléments basés sur les attributs.

lecture plus approfondie:

• conception réactive
• images réactives
• Animations CSS

Ce message est apparu à l'origine sur TheDevSpace.