Feuilles de style en cascade définir l'apparence d'un élément de page Web en s'accrochant aux attributs que vous appliquez à cet élément. Ces attributs peuvent être soit un ID soit une classe et, comme tous les attributs, ils ajoutent des informations utiles aux éléments auxquels ils sont attachés.
Selon l'attribut que vous ajoutez à un élément, vous pouvez écrire un sélecteur CSS pour appliquer le styles visuels nécessaires pour obtenir l'apparence de cet élément et du site Web dans son ensemble.
Alors que les ID ou les classes fonctionnent dans le but de s'y accrocher avec des règles CSS, la conception Web moderne Les méthodes favorisent les classes par rapport aux ID, en partie parce qu'elles sont moins spécifiques et plus faciles à utiliser dans l'ensemble.
Une ou plusieurs classes en CSS?
Dans la plupart des cas, vous affectez un seul attribut de classe à un élément, mais vous n'êtes en fait pas limité à une seule classe comme vous l'êtes avec les ID. Alors qu'un élément ne peut avoir qu'un seul attribut ID, vous pouvez donner à un élément plusieurs classes et, dans certains cas, cela rendra votre page plus facile à styliser et bien plus encore souple.
Si vous devez affecter plusieurs classes à un élément, ajoutez les classes supplémentaires et séparez-les simplement par un espace dans votre attribut.
Par exemple, ce paragraphe a trois classes:
Ce serait le texte du paragraphe
Cela définit les trois classes suivantes sur la balise de paragraphe:
- Citation
- Mis en exergue
- La gauche
Notez les espaces entre chacune de ces valeurs de classe. Ces espaces sont ce qui les définit comme des classes individuelles différentes. C'est aussi pourquoi les noms de classe ne peuvent pas contenir d'espaces, car cela les définirait comme des classes distinctes.
Une fois que vous avez vos valeurs de classe dans HTML, vous pouvez ensuite les affecter en tant que classes dans votre CSS et appliquer les styles que vous souhaitez ajouter. Par example.
.pullquote {... }
.En vedette {... }
p.gauche {... }
Dans ces exemples, les déclarations CSS et les paires de valeurs apparaissent à l'intérieur des accolades, c'est ainsi que ces styles seraient appliqués au sélecteur approprié.
Si tu définir une classe sur un élément spécifique (par example, p.gauche), vous pouvez toujours l'utiliser dans le cadre d'une liste de classes; Cependant, sachez que cela n'affectera que les éléments spécifiés dans le CSS. En d'autres termes, le p.gauche style ne s'appliquera qu'aux paragraphes avec cette classe puisque votre sélecteur dit en fait de l'appliquer aux "paragraphes avec une valeur de classe de la gauche, " En revanche, les deux autres sélecteurs de l'exemple ne spécifient pas un certain élément, ils s'appliqueraient donc à tout élément utilisant ces valeurs de classe.
Classes multiples, sémantique et JavaScript
Un autre avantage d'utiliser plusieurs classes est qu'il augmente les possibilités d'interactivité.
Appliquez de nouvelles classes aux éléments existants à l'aide de JavaScript sans supprimer aucune des classes initiales. Vous pouvez également utiliser des classes pour définir le sémantique d'un élément — ajouter des classes supplémentaires pour définir ce que cet élément signifie sémantiquement. Cette approche est comment Microformats travaux.
Avantages des classes multiples
La superposition de plusieurs classes peut faciliter l'ajout d'effets spéciaux aux éléments sans avoir à créer un tout nouveau style pour cet élément.
Par exemple, pour faire flotter des éléments à gauche ou à droite, vous pouvez écrire deux classes:
la gauche.
et.
droite.
avec juste.
flotteur: gauche;
et.
Flotter à droite;
en eux. Ensuite, chaque fois que vous avez un élément dont vous avez besoin pour flotter à gauche, vous ajoutez simplement la classe "gauche" à sa liste de classes.
Il y a une ligne fine à marcher ici, cependant. N'oubliez pas que les normes Web dictent la séparation du style et de la structure. La structure est gérée en HTML tandis que le style est en CSS. Si votre document HTML est rempli d'éléments qui ont tous des noms de classe comme « rouge » ou « gauche », qui sont des noms qui dictez à quoi les éléments doivent ressembler plutôt que ce qu'ils sont, vous franchissez cette ligne entre la structure et le style.
Inconvénients des classes multiples
Le plus gros inconvénient de l'utilisation simultanée de plusieurs classes sur vos éléments est que cela peut les rendre un peu difficiles à regarder et à gérer au fil du temps. Il peut devenir difficile de déterminer quels styles affectent un élément et si des scripts l'affectent. De nombreux frameworks disponibles aujourd'hui, comme Bootstrap, font un usage intensif d'éléments avec plusieurs classes. Ce code peut devenir incontrôlable et difficile à utiliser très rapidement si vous ne faites pas attention.
Lorsque vous utilisez plusieurs classes, vous courez également le risque que le style d'une classe remplace le style d'une autre. Cette collision peut alors rendre difficile de comprendre pourquoi vos styles ne sont pas appliqués, même s'il semble qu'ils le devraient. Restez conscient de la spécificité, même avec les attributs appliqués à cet élément.
En utilisant un outil comme les outils Webmaster de Google Chrome, vous pouvez plus facilement voir comment vos cours affectent vos styles et éviter ce problème de styles et d'attributs conflictuels.