Construire des sites Web bien stylisés sur le Web d'aujourd'hui nécessite une compréhension approfondie de Feuilles de style en cascade. Appliquez une série de styles CSS à votre document HTML pour informer l'apparence de votre page Web.
Attributs de classe et d'ID
Les concepteurs doivent parfois appliquer un style uniquement sur quelque des éléments d'un document, mais pas toutes les instances de cet élément. Pour obtenir ces styles souhaités, utilisez le classer et identifiant Attributs HTML. Ces attributs sont des attributs globaux applicables à presque tous les balise HTML— donc, que vous styliez des divisions, des paragraphes, des liens, des listes ou tout autre élément HTML de votre document, vous pouvez vous tourner vers les attributs de classe et d'ID pour vous aider à accomplir cette tâche!
Sélecteurs de classe
Le sélecteur de classe définit plusieurs styles sur le même élément ou la même balise dans un document. Par exemple, pour appeler certaines sections de votre texte dans une couleur différente en guise d'alerte, attribuez à vos paragraphes des classes comme celle-ci:
p { couleur: #0000ff; }
p.alert { couleur: #ff0000; }
Ces styles définiraient la couleur detout paragraphes en bleu (#0000ff), mais tout paragraphe avec un attribut de classe de alerte serait plutôt stylisé en rouge (#ff0000). En effet, l'attribut class a une spécificité plus élevée que la première règle CSS, qui n'utilise qu'un sélecteur de balise. Lorsque vous travaillez avec CSS, une règle plus spécifique remplacera une règle moins spécifique. Ainsi, dans cet exemple, la règle la plus générale définit la couleur de tous les paragraphes, mais la seconde règle, plus spécifique, remplace ce paramètre uniquement dans certains paragraphes.
Voici comment cela pourrait être utilisé dans certains balisages HTML:
Ce paragraphe serait affiché en bleu, ce qui est la valeur par défaut pour la page.
Ce paragraphe serait également en bleu.
Et ce paragraphe serait affiché en rouge puisque l'attribut class écraserait la couleur bleue standard du style du sélecteur d'élément.
Dans cet exemple, le style de p.alerte ne s'appliquerait qu'aux éléments de paragraphe qui utilisent alerte classer. Pour utiliser cette classe sur plusieurs éléments HTML, supprimez l'élément HTML du début de l'appel de style, comme ceci:
.alert {couleur de fond: #ff0000;}
Cette classe est désormais disponible pour tout élément qui en a besoin. Tout élément de votre code HTML qui a une valeur d'attribut de classe de alerte va maintenant obtenir ce style. Dans le code HTML ci-dessous, nous avons à la fois un paragraphe et un titre de niveau deux qui utilisent le alerte classer. Les deux affichent une couleur de fond rouge:
Ce paragraphe serait écrit en rouge.
Sur les sites Web d'aujourd'hui, les attributs de classe sont souvent utilisés sur la plupart des éléments, car ils sont plus faciles à utiliser du point de vue de la spécificité que les ID. Vous trouverez la plupart des pages HTML actuelles à remplir avec des attributs de classe, dont certains sont répétés fréquemment dans un document et d'autres qui n'apparaissent qu'une seule fois.
Sélecteurs d'ID
L identité sélecteur nomme un style spécifique sans l'associer à une balise ou autre élément HTML.
Supposons une division dans votre balisage HTML qui contient des informations sur un événement. Vous pourriez donner à cette division un Attribut d'identifiant de un événement, puis décrivez cette division avec une bordure noire de 1 pixel de large:
#event { border: 1px solide #000; }
Le défi avec Sélecteurs d'ID est qu'ils ne peuvent pas être répétés dans un document HTML. Ils doivent être uniques (vous pouvez utiliser le même identifiant sur plusieurs pages de votre site, mais une seule fois dans chaque document HTML individuel). Donc, pour trois événements qui ont tous besoin de cette bordure, vous devez identifier les attributs d'ID de événement1, événement2, et événement3 et stylisez chacun d'eux. Il serait donc beaucoup plus facile d'utiliser l'attribut de classe susmentionné de un événement et les coiffer tous à la fois.
Complications des attributs d'identification
Un autre défi avec les attributs d'ID est qu'ils ont une spécificité plus élevée que les attributs de classe. Pour remplacer un style précédemment établi, il peut être difficile de le faire si vous vous êtes trop appuyé sur les ID. De nombreux développeurs Web se sont éloignés de en utilisant des identifiants dans leur balisage, même s'ils n'ont l'intention d'utiliser cette valeur qu'une seule fois, et se sont plutôt tournés vers les attributs de classe moins spécifiques pour presque tous modes.
Le seul domaine où les attributs d'ID entrent en jeu est lorsque vous souhaitez créer une page contenant des liens d'ancrage sur la page. Par exemple, considérons un site Web de style parallaxe qui contient tout le contenu sur une seule page avec des liens qui "sautent" vers différentes parties de cette page. Les attributs d'ID et les liens de texte utilisent ces liens d'ancrage. Ajoutez la valeur de cet attribut, précédée du # symbole, à la href attribut du lien, comme ceci:
Voici le lien
Lorsqu'il est cliqué ou touché, ce lien passe à la partie de la page qui a cet attribut d'ID. Si aucun élément de la page n'utilise cette valeur d'ID, le lien ne fera rien.
Pour créer des liens in-page sur un site, l'utilisation d'attributs d'identification sera requise, mais vous pouvez toujours vous tourner vers des classes à des fins de style CSS général. C'est ainsi que les concepteurs balisent les pages aujourd'hui: ils utilisent des sélecteurs de classe autant que possible et ne se tournent vers les identifiants que lorsqu'ils ont besoin que l'attribut agisse non seulement comme un crochet pour CSS, mais également comme un lien dans la page.