Table des matières:
- Attribution d'un nom à votre code à l'aide de l'attribut id
- Attribution d'un nom à votre code à l'aide de l'attribut class
Vidéo: Réunion de contribution #9 2025
Une façon de styliser des éléments spécifiques dans CSS consiste à nommer vos éléments HTML. Vous nommez votre code à l'aide de l'attribut
id
ou
class
, puis définissez votre code en vous référant au sélecteur
id
ou
class
.
Attribution d'un nom à votre code à l'aide de l'attribut id
Utilisez l'attribut
id
pour styler un élément spécifique de votre page Web. L'attribut
id
peut nommer n'importe quel élément HTML et est toujours placé dans la balise HTML d'ouverture. De plus, chaque élément ne peut avoir qu'une seule valeur d'attribut
id
, et la valeur de l'attribut ne doit apparaître qu'une seule fois dans le fichier HTML. Après avoir défini l'attribut dans le fichier HTML, vous faites référence à l'élément HTML dans votre CSS en écrivant un hashtag (
#
) suivi de la valeur de l'attribut.
En utilisant l'attribut
id
, le code suivant code le lien Twitter de Seinfeld Modern en rouge sur fond jaune:
HTML:
Moderne Seinfeld
CSS:
#jerry {
couleur: rouge;
couleur de fond: jaune;
}
Attribution d'un nom à votre code à l'aide de l'attribut class
Utilisez l'attribut
class
pour styler plusieurs éléments sur votre page Web. L'attribut
class
peut nommer n'importe quel élément HTML et est toujours placé dans la balise HTML d'ouverture. La valeur de l'attribut n'a pas besoin d'être unique dans le fichier HTML. Après avoir défini l'attribut dans le fichier HTML, vous faites référence à l'élément HTML en écrivant un point (.) Suivi de la valeur de l'attribut.
Avec l'attribut
class
, le code suivant stylise tous les comptes Twitter de Parody Tech en rouge sans soulignement:
HTML:
Bored Elon Musk < Salade de chou Vinod
. tech {
couleur: rouge;
text-decoration: aucun;
}
Utilisez de manière proactive un moteur de recherche, tel que Google, pour rechercher des effets CSS supplémentaires. Par exemple, si vous souhaitez augmenter l'espacement entre chaque élément de liste, ouvrez votre navigateur et recherchez l'espacement des lignes de l'élément de liste css. Les liens apparaissant dans les dix premiers résultats devraient inclure:
W3Schools
- : Un site tutoriel débutant Stack Overflow
- : Un forum de discussion pour les développeurs expérimentés Mozilla: Une référence guide initialement créé par la fondation qui gère le navigateur Firefox et maintenant maintenu par une communauté de développeurs
- Chacun de ces sites est un bon point de départ; assurez-vous de chercher des réponses qui incluent un exemple de code.
