Les sélecteurs déterminent la manière dont les styles CSS sont attribués aux éléments HTML. Lors d'une définition correspondante, on commence par indiquer le nom de l'élément sur lequel le sélecteur doit agir. La déclaration proprement dite se fait ensuite entre des accolades. À l'intérieur d'une déclaration, une ou plusieurs propriétés peuvent être spécifiées. La syntaxe générale est donc la suivante :
Sélecteur {
Propriété1: Valeur;
Propriété2: Valeur;
Propriété3: Valeur;
}Une définition correspondante vous a déjà été présentée dans le tutoriel précédent.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Assurez-vous absolument de terminer chaque déclaration par un point-virgule.
Un aperçu des sélecteurs disponibles
En réalité, le CSS propose un grand nombre de sélecteurs, dont je vais vous présenter les plus importants. Car une chose est claire : seulement en maîtrisant le travail avec les sélecteurs on peut définir des propriétés CSS de manière raisonnable.
La manière la plus simple d'attribuer des styles à l'intérieur d'un document HTML est le sélecteur d'élément.
En utilisant la syntaxe suivante, toutes les éléments p se verront assigner la couleur noire.
p {
color: #009966;
}
Si vous voulez assigner le même style à plusieurs éléments, cela est également possible.
Dans ce cas, vous écrivez simplement les éléments concernés les uns à la suite des autres, séparés par des virgules.
p, h1, li {
color: #000;
}
Vous pouvez également assigner plusieurs styles aux éléments. Les styles sont alors notés séparés par un point-virgule.
p {
color: #000;
background-color: red;
}
Une combinaison des variantes mentionnées est également possible.
p, h1, li {
color: #009966;
background-color: red;
}
Le résultat pourrait ressembler à ceci :
Zones avec plusieurs éléments
Il est souvent nécessaire de formater une zone composée de plusieurs éléments HTML. Pour de tels cas, HTML propose deux éléments spéciaux, span et div. Ces éléments vous seront présentés à plusieurs reprises dans cette série, d'ailleurs.
Un exemple :
<div class="artikel"> <h1>Explosion de couleurs</h1> <p class="thema">Un tutoriel sur la création d'une explosion de couleurs de <span class="autor">Markus Melzer</span>.</p> </div>
La seule différence entre div et span est que l'élément div force une nouvelle ligne dans le flux de texte. En revanche, span ne crée pas de nouvelle ligne. Dans l'exemple montré, une zone div est définie, dans laquelle se trouvent un titre et un paragraphe. À l'intérieur du paragraphe, il y a à nouveau une zone span.
Sélecteurs ID et classe
Jusqu'à présent, des sélecteurs d'éléments ont été utilisés. Avec l'exemple suivant, toutes les balises h1 sont formatées par un tel sélecteur.
h1 {
color: #000;
background-color: red;
}
Cependant, ce n'est pas toujours souhaité sous cette forme. Que se passe-t-il par exemple si vous souhaitez attribuer certaines propriétés uniquement à une ou plusieurs, mais pas à toutes les balises h1? Pour de tels cas, le CSS propose deux options, à savoir les sélecteurs de classe et d'ID.
Avec les sélecteurs de classe, il est possible de sélectionner très précisément les éléments HTML avec des attributs de classe. L'élément HTML concerné doit avoir l'attribut class spécifié. Les définitions de classe commencent par un point.
Un exemple :
.rouge {
color: red;
}
Ici, la classe rouge a été définie. Pour ajouter les propriétés assignées en rouge à un élément HTML, on spécifie class suivi du nom de la classe.
<p class="rouge">PSD-Tutorials.de</p>
Le sélecteur d'ID peut être utilisé de manière similaire. Le sélecteur d'ID est reconnaissable par un dièse.
#topnavi {
color: blue;
};Dans cet exemple, l'ID topnavi est défini. Mais attention : un ID ne peut vraiment être attribué qu'une seule fois à l'intérieur d'un document. L'accès à une propriété d'ID définie est alors le suivant :
<div id="topnavi">Voici la navigation</div>
L'attribut id attribue le nom d'ID. Veillez à ne pas noter le double croisillon ici.
Les informations affichées peuvent également être combinées entre elles. Ainsi, il est possible d'attribuer plusieurs classes à un élément HTML.
<p class="rouge grand">PSD-Tutorials.de</p>
Dans cet exemple, les deux classes rouge et grand sont attribuées au paragraphe. Si vous souhaitez spécifier une classe et un ID, cela ressemblerait à ceci :
<p class="rouge" id="navi">PSD-Tutorials.de</p>
Vous pouvez également combiner des éléments et des IDs. Voici un exemple :
div.navi {
color: blue;
}
Cette syntaxe s'appliquerait exclusivement aux éléments div avec la classe navi. Les éléments p possédant également la classe navi resteraient inchangés.
En CSS, il existe une autre façon de combiner les sélecteurs. Jetez un œil à la syntaxe suivante :
h1 {
color: red;
}
em {
color: blue;
}
Les titres de premier niveau se voient attribuer la couleur rouge. Les éléments em, quant à eux, se voient attribuer la couleur bleue.
En combinant les deux instructions, on peut s'assurer que seuls les éléments em soient en bleu et qui se trouvent à l'intérieur des éléments h1.
h1 em {
color: blue;
};
Les noms d'éléments sont notés séparément sans virgule.
Il s'agit d'un piège courant dans lequel les débutants en CSS peuvent tomber. Voici la même syntaxe, mais avec une virgule :
h1, em {
color: blue;
}
Que signifie cette syntaxe ? Tous les éléments h1 et tous les éléments em sont ciblés. C'est donc quelque chose de totalement différent de la syntaxe sans virgule!
Un autre sélecteur important est le sélecteur universel. Celui-ci permet de sélectionner n'importe quel élément. Ce sélecteur est défini par un astérisque.
* {
color: red;
}
Avec cette syntaxe, tous les éléments seraient colorés en rouge. Encore une fois, plusieurs particularités de syntaxe doivent être prises en compte avec ce sélecteur.
#mainnavi * {
color: red;
}
Dans cet exemple, la couleur de premier plan de tous les éléments à l'intérieur de l'élément avec l'ID mainnavi est définie en rouge. Cela ne s'applique cependant pas à l'élément lui-même.
Si le sélecteur universel était placé au début d'une déclaration, il ne serait d'ailleurs pas nécessaire de le noter. Une déclaration comme celle-ci serait donc redondante:
* p {
color: red;
}
Cette syntaxe est équivalente à ce qui suit :
p {
color: red;
}
Dans le prochain tutoriel, vous découvrirez d'autres sélecteurs.
