Aller plus loin dans le style

Bonjour, bienvenue dans Learn As You Code : HTML et CSS ! Aujourd’hui, nous plongeons plus profondément dans le monde du stylisme. Jusqu’à présent, nous stylisions directement les éléments. Mais que se passe-t-il si vous avez deux

éléments et vous souhaitez que chacun soit différent ? Entrez les sélecteurs CSS !

Sélecteurs d'éléments

Vous les connaissez déjà, mais récapitulons :

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

Cet ensemble de règles cible tous les

éléments, en définissant leur taille de police, leur famille et leur poids. Les sélecteurs d’éléments sont parfaits pour les grandes lignes, comme définir un guide de style pour l’ensemble de votre page. Mais avouons-le, tous les

les balises devraient être identiques. Pour un style plus spécifique, nous devons améliorer notre jeu !

Sélecteurs de classe

Les cours à la rescousse ! Vous en voulez deux

les balises doivent-elles être différentes ? Ajouter des cours :

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

Chaque

La balise a deux classes. Dans votre CSS, ciblez ces classes avec un .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

Boum ! Styles appliqués. Vous pourriez vous demander : « Pourquoi ne pas combiner les styles en moins de classes ? » Bonne question ! J'aime garder les cours flexibles. On ne sait jamais quand on voudra peut-être réutiliser du petit sans bleu.

Sélecteurs d'identifiant

Pour les éléments uniques, utilisez des identifiants. Regarde ça :

<p id="name">My Name is Nolan!</p>

Utilisez les identifiants avec parcimonie, une seule fois par page. Ciblez-les en CSS avec #:

#name {
  text-decoration: underline;
}

Simple, non ?

Styles contradictoires

Maintenant, que se passe-t-il si un élément a à la fois une classe et un identifiant ? Comme ça :

<p id="red" class="blue">Will I be red or blue?</p>

Ce sera rouge ! Pourquoi? Parce que les identifiants sont plus spécifiques que les classes. Voici un exemple rapide :

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

Le texte devient rouge et est souligné, avec une taille de police de 12 px. Les identifiants l'emportent sur les classes, qui à leur tour remplacent les sélecteurs d'éléments. Cette cascade de styles donne à votre page un aspect soigné sans code répété.

Défi

Il est temps d'améliorer votre page À propos de moi ! Voici votre mission :

• Définissez les styles par défaut pour

  ,

  et

  en utilisant des sélecteurs d'éléments.

• Ajoutez un slogan sous votre nom avec

  étiquetez-le et stylisez-le à l'aide d'un identifiant.

• Égayez d'autres textes à l'aide des sélecteurs de classe.

Jouez avec des styles contradictoires et voyez quelles règles gagnent. Pouvez-vous comprendre pourquoi ?

Merci d'avoir lu ! Faites-moi savoir s'il y a d'autres sujets que vous aimeriez que j'explore dans cette série dans les commentaires, ou faites-moi simplement savoir si vous appréciez la série !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!