Introduction
Avant de débuter les sélecteurs CSS, il est bon de rappeler ce qu’est le CSS.
CSS signifie : Cascading style sheets.
C’est un langage script qui définit la présentation d’un document. Initialement utilisé pour le HTML, il est maintenant aussi utilisé par Flash, Flex et prochainement par Silverlight de Microsoft.
Ainsi sur une page web, le HTML structure le contenu, alors que le CSS formate un contenu structuré.
Le CSS2 est l'évolution du CSS 1.0, et la plus part du temps nous utiliserons le terme CSS sans préciser qu'il s'agit du css2
Durant ce cours, nous verrons des petites astuces, comme la manière de faire pour faire des Enluminure à chaque début de paragraphe, ou un retrais à la ligne.
Nous verrons aussi comment modifier un lien durant son survole, ou aussi comment tricher dans google adsens !
Les sélecteurs css2
Qu'est ce qu'un sélecteur css ?
Le langage css, permet de définir l'aspect d'une page HTML grace à des règles de style
La Structure d'une règle de style est de ce type :
span.info { color :#000000; }
- "span.info" est ce que l'on appel le sélecteur CSS.
- La partie entre les accolades ( ici "color:#000000;" ) est ce que l'on appel le bloc de déclaration
Comment ca marche ?
Lors de l'exécution de la page HTML, l'arbre du document est comparé aux sélecteurs css.
la règle de style est appliqué si un sélecteur correspond aux balises, identifiants ou classes du document.
Quel est l'intérêt des différents types de sélecteurs ?
Il existe différent type de sélecteurs, qui lorsqu'on les maitrise correctement peuvent aider à :- Réduire le volume de code HTML.
- Rendre le code HTML plus lisible.
- Améliorer l'interprétation de la page par les moteurs de recherche
- Faciliter la maintenance et les mises à jour de vos sites
Les sélecteurs simples.
Prenons le code suivant comme exemple :
<div id="mon_id" class="ma_classe">salut tous le monde</div>
Dans cet extrais de code, il existe 3 façons simples pour appliquer un style au texte " salut tous le monde ".
- via la balise "div"
- via la classe "ma_classe"
- via l'identifiant "mon_id"
Les sélecteurs type
Voici la règle de style pour formater le contenu texte de l'exemple :
div { text-decoration:underline; }
Cette règle de style aura pour effet de formater avec le même style toutes les balises "div" de votre page HTML.
Les sélecteurs de classe
Voici la règle de style pour formater le contenu texte de l'exemple :
.ma_classe { text-decoration:underline; }
Cette règle aura pour effet de formater avec le même style tous les éléments de votre page HTML ayant pour attribut la classe "ma_classe".
Notez bien que vous devez mettre un point devant le nom de la classe.
Ou voici une autre solution :
div.ma_classe { text-decoration:underline; }
Cette règle aura pour effet de formater avec le même style toutes les balises div de votre page HTML ayant pour attribut la classe "ma_classe".
Il n'est pas possible de mettre un espace entre div et .ma_classe, nous y reviendrons plus tard
Les sélecteurs d'identifiants (ID)
Voici la règle de style pour formater le contenu texte de l'exemple :
#mon_id { text-decoration:underline; }
Cette règle aura pour effet de de formater l'élément de la page correspondant à l'id "mon_id".
Notez bien que vous devez mettre un dièse (#) devant le nom de l'ID
Ou voici une autre solution :
div#mon_id { text-decoration:underline; }
Cette règle aura pour effet de formater la balise div de votre page HTML correspondant à l'id "mon_id".
Les ID doivent être en principe uniques dans une page. Il est normalement interdit de mettre dans une page, plus d'une fois la même occurrence d'un identifiant.
Cependant certains navigateur internet savent gérer plusieurs occurrences d'un même ID.
Le sélecteur universel.
Le sélecteur universel permet à la façon d'un joker de sélectionner tous les éléments d'un document :
* { text-decoration:underline; }
Il est rarement utilisé tel quel. Cependant, il faut savoir que celui-ci est souvent omis et utilisé implicitement devant chaque règle.
#mon_id revient à faire *#mon_id
.ma_classe revient à faire *.ma_classe
Combiner les Sélecteurs.
Les sélecteurs que l'on vient de voir, peuvent s'utiliser seul ou accompagné.
Prenons le code suivant comme exemple :
<div id="mon_id">
Dans la <strong class="ma_classe">pièce</strong> il y a :
<ul lang="fr">
<li><strong>Thomas</strong></li>
<li>Martin</li>
<li>Justine</li>
</ul>
<p>et aussi Monique</p>
<p>Mais que se passe-t-il <strong><a href="index.html">ici</a></strong>?</p>
<span>Thomas dort</span>, <em>Justine dessine</em>.
</div>
<em>Martin peint</em> et Moni<span title="que pani" id="span2">que</span>
Préciser le ciblage
Ainsi comme nous l'avons vu sans réellement l'aborder, il est possible de rendre plus précis la cible d'une règle de style en combinant les sélecteurs simples.
div#mon_id { text-decoration:underline; }
strong.ma_classe { text-decoration:underline; }
Sélection multiple
strong, em { text-decoration:underline; }
Dans ce cas, la sélection multiple aura pour effet de cibler tous les textes des balises "strong" et "em" du code de la page
Sélectionner les descendants
div em { text-decoration:underline; }
Dans ce cas, seul la balise "em" à l'intérieur de la balise "div" sera mis en couleur.
Lorsqu'on combine une sélection multiple et une sélection descendante, il est important de bien préciser le ciblage pour chaque occurrence.
Ainsi, si je désire cibler "Thomas dort" et "Justine dessine" que dois je faire ?
div#mon_id span, em { text-decoration:underline; }
Cette règle de style est fausse car em sera considéré comme un sélecteur simple, et donc "et Martin peint" sera inclus dans la sélection.
div#mon_id span, div#mon_id em { text-decoration:underline; }
Cette règle de style est correcte,car en précisant le parent de "em", seul le texte dans la balise "div" est ciblé.
Sélectionner les enfants
Pour sélectionner les descendants directs, c'est à dire les enfants d'un sélecteur, il faut utiliser le signe "supérieur à" (>)
Cette règle de style aura pour effet de souligner les mots "pièce", "ici" mais aussi "Thomas".
div strong{ text-decoration:underline; }
Hors nous voulons simplement les mots " pièce" et "ici". Il faut alors utiliser la règle suivante :
div > strong{ text-decoration:underline; }
Cette règle de style ciblera uniquement les enfants directs de la balise "div".
Sélectionner par attribut
Pour sélectionner le texte par attribut, il suffit de préciser sa présence et/ou sa valeur.
ul[lang] { text-decoration:underline; }
ul[lang="fr"] { text-decoration:underline; }
ul[lang|="fr"] { text-decoration:underline; }Voici les correspondances possibles :
- [att] Tous les éléments ayant un attribut att peu importe la valeur.
- [att=val] Tous les éléments dont la valeur de l'attribut att correspond à val.
- [att~=val1 val2 val3] Tous les éléments dont l'attribut att correspond à une des valeurs séparées par un espace.
- [att|=val] Toutes les valeurs de l'attribut att contenant le terme val.
Exemple : [lang|="en"] correspondra à :- lang="en"
- lang="en-us"
- lang="en-uk"
- lang="en-au"
Sélectionner les éléments adjacents
Le sélecteur adjacent, s'écrit avec deux sélecteurs simples, unis d'un "+"
Cette règle de style aura pour effet de souligner les mots Martin et Justine dans la liste
li + li { text-decoration:underline; }
Au premier coup d'oeil, on pourrait croire que le sélecteur " li + li " ciblerait juste "Martin".
Regardons ce qu'il se passe :
<li><strong>Thomas</strong></li>
<li>Martin</li>
La règle ci-dessus remplis la condition donnée par le sélecteur " li + li ", le mot Martin sera alors souligné !
Ensuite :
<li>Martin</li>
<li>Justine</li>
Mais la règle ci-dessus remplis aussi la condition du sélecteur.
C'est pourquoi les noms Martin, Justine sont tous deux affecté par le sélecteur " li + li ".
Voici par l'exemple, la méthode de fonctionnement des sélecteurs adjacents.
Pour appliquer la règle via le sélecteur suivant :
a + b + c { déclaration }
Voici les différentes possibilités de code HTML (code factice) :
- <a> blabla <b> blabla </b> </a> <c> blabla </c>
- <a> blabla <b> blabla </b> <c> blabla </c> </a>
- <a> blabla </a> <b>blabla </b> <c> blabla </c>
- <a> blabla </a> blabla <b>blabla </b> blabla <c> blabla </c>
Le quel de ces 3 exemples est correcte ?
- Exemple faux, la bonne solution pour cet exemple est :
a + c { déclaration }
- Exemple faux, la bonne solution pour cet exemple est :
b + c { déclaration }
- Exemple correcte
a + b + c { déclaration }
- Exemple aussi correcte, les balises peuvent être séparé par du texte, mais pas par une autre balise.
a + b + c { déclaration }
Exercice sur les Sélecteurs.
Prenons le code HTML suivant comme exemple :
1. <h1 class="ma_classe">Présentation</h1>
2. <div id="mon_id_1" class="ma_classe">Salut tous le monde</div>
3. <span id="mon_id_2" class="ma_classe">Ca va bien ?<span>
4. <p>
5. <span>Oui super !</span>
6. <div>Et que fais-on ?</div>
7. </p>
Comment cibler la première ligne ?
h1 { text-decoration:underline; }
Comment cibler la troisième ligne?
span#mon_id_2 { text-decoration:underline; }
span.ma_classe { text-decoration:underline; }
Comment cibler les trois premières lignes ?
.ma_classe { text-decoration:underline; }
Comment cibler les deux premières lignes ainsi que l'avant dernière ?
h1,div { text-decoration:underline; }
Comment cibler la cinquième ligne ?
p > span { text-decoration:underline; }
p + span { text-decoration:underline; }
p span { text-decoration:underline; }
Comment cibler la sixième ligne ?
p div { text-decoration:underline; }
p > div { text-decoration:underline; }
span + div { text-decoration:underline; }
Les pseudo-classes et les pseudo-éléments
Les différentes pseudo-classes et pseudo-éléments, c'est quoi ?
Les pseudos-classes et les pseudo-éléments sont les sélecteurs les plus avancés, et d'ailleurs ne sont pas parfaitement supportés par les navigateurs tels qu'internet-explorer 6.
Ces sélecteurs peuvent être utilisés pour formater la page suivant des actions faites par le visiteurs, ou suivant des informations non présentes sur la page.
Pseudos-classes pour toutes les balises
:hover et :active
Les pseudos-classes :hover et :active s'appliquent sur n'importe quelle balise et servent à signaler une action liée à la souris.
Ainsi la pseudo-classe :hover applique la règle de style lorsque la souris survole l'élément ciblé par le sélecteur.
De la même façon, la pseudo-classe :active applique la règle de style lorsque le visiteur clique sur le lien (et ce, tant qu'il reste avec le bouton de la souris enfoncé).
<style type="text/css">
a:hover { color:#FF0000; }
a:active { text-decoration:underline; }
</style>
<a href="index.html" lang="en-us">What is a CSS ?</a>
<a href="index.html" lang="fr">C'est quoi une CSS ?</a>
Pseudos-classes pour les balises "a"
:link et :visited
La pseudo-classe :link permet de spécifier une règle différente sur un hyperlien non visité. A l'inverse, la pseudo-classe :visited sert à appliquer une règle sur les hyperliens visités.
<style type="text/css">
a:link { color:#FF0000; }
a:visited { text-decoration:underline; }
</style>
<a href="index.html" lang="en-us">What is a CSS ?</a>
<a href="index.html" lang="fr">C'est quoi une CSS ?</a>
Pour que les pseudo-classes :link et :visited soient prises en compte, le code de la balise "a" doit comporter l'attribut href
Pseudo-classe pour les balises de saisies
:focus
La pseudo-classe :focus, permet d'appliquer une règle de style sur une cible, tant que le curseur de saisie est actif.
<style type="text/css">
input:focus { background-color:#FFFFFF; color:#000000; }
</style>
<input name="champtext" type="text" value="">
Dans cet exemple, lorsque l'utilisateur cliquera sur le champ de texte, le fond du champ deviendra noir et le texte sera blanc.
Copiez l'exemple précédent et taper du texte dans le champ de texte.
Pseudo-classe pour les langues
:lang
La pseudo-classe :lang permet de formater différemment des zones de texte suivant leurs langues.
Il est possible, par exemple sur un article traduit de l'anglais, de mettre en italique tous les liens vers des sources anglaises
<style type="text/css">
a:lang(en) { font-style:italic; }
</style>
<a href="index.html" lang="en-us">What is a CSS ?</a>
<a href="index.html" lang="en-uk">CSS, what for ?</a>
<a href="index.html" lang="fr">C'est quoi une CSS ?</a>
Copiez l'exemple précédent pour montrer les colorations différentes
Les Pseudo-Éléments
Les pseudo-éléments permettent de formater des éléments qui ne sont pas disponibles en tant que noeud dans l'arbre du document
:first-line
Le pseudo-élément :first-line affecte la première ligne du contenu texte d'un élément.
Ce pseudo-élément ne s'applique que aux éléments de type block, inline-block, table-caption et table-cell
<style type="text/css">
p:first-line { font-style:italic;background-color:#FF0000; }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit, ipsum a dignissim vehicula, lacus sapien adipiscing odio, et tempus neque turpis nec elit. Duis libero. Curabitur diam. Donec vitae odio. Vivamus faucibus, enim non suscipit congue, ligula tellus consequat ligula, at dignissim sapien felis id urna. Nam luctus scelerisque nunc. Fusce sit amet dui ac neque molestie blandit.</p>
Copiez l'exemple précédent et réduire la fenêtre du browser dans le quel il est affiché.
Cela aura pour effet de faire un retour à la ligne automatique, et d'appliquer dynamiquement la règle de style à la première ligne.
:first-letter
Le pseudo-élément :first-letter affecte la première lettre ou chiffre du contenu texte d'un élément.
Ce pseudo-élément ne s'applique que aux éléments de type block, inline-block, table-caption et table-cell et list-item.
<style type="text/css">
p:first-letter { font-size:xx-large; }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit, ipsum a dignissim vehicula, lacus sapien adipiscing odio, et tempus neque turpis nec elit. Duis libero.</p>
<p>Curabitur diam. Donec vitae odio. Vivamus faucibus, enim non suscipit congue, ligula tellus consequat ligula, at dignissim sapien felis id urna. Nam luctus scelerisque nunc. Fusce sit amet dui ac neque molestie blandit.</p>
Cet exemple permet de mettre en relief à la manière d'une enluminure la première lettre des 2 paragraphes.
Copiez l'exemple pour monrer les enluminures.
<style type="text/css">
p:first-letter { padding-left:30px; }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit, ipsum a dignissim vehicula, lacus sapien adipiscing odio, et tempus neque turpis nec elit. Duis libero.Curabitur diam. Donec vitae odio. Vivamus faucibus, enim non suscipit congue, ligula tellus consequat ligula, at dignissim sapien felis id urna. Nam luctus scelerisque nunc. Fusce sit amet dui ac neque molestie blandit.</p>
Cet exemple, permet de faire un retrait de ligne sur chaque début de paragraphe.
Les pseudo-éléments pour injecter du contenu
:before et :after
Ces deux pseudo-éléments font figure d'exception dans le css, car ils permettent d'injecter du contenu avant et après le contenu d'un élément.
<style type="text/css">
p:before { content: "salut tu"; }
p:after { content: " bien ? "; }
</style>
<p>vas</p>
Copiez l'exemple pour monrer l'injection de contenu.
Elles sont plus ou moins polémiques.
En effet avec les pseudo-éléments :before et :after,
il est possible de faire de façon tout à fait transparente dans le code sources une annonce à afficher juste au dessus de la publicité avec marqué "CLIQUEZ SUR MES PUBS". Les spiders et crawlers ne détectent pas la présence de cette triche.
Du coup, les régies pubs comme google adsens n'apprécient pas trop
En outre, cette astuce est à éviter sur le long terme, car soumise à la méthode de lecture des pages web par google
Cette technique d'injection de code, n'exécute pas de HTML ou de Javascript
Il est donc par exemple impossible d'afficher un lien ou une image avec les balises <a> et <img>
Exercice sur les pseudo-classes.
Prenons le code suivant comme exemple :
1- <div id="mon_id">
2- Dans la <strong class="ma_classe">pièce</strong> il y a :
3- <ul lang="fr">
4- <li><strong>Thomas</strong></li>
5- <li>Martin</li>
6- <li>Justine</li>
7- </ul>
8- <p>et aussi Monique</p>
9- <p>Mais que se passe-t-il <strong><a href="index.html">ici</a></strong>?</p>
10- <span>Thomas dort</span>, <em>Justine dessine</em>.
11- </div>
12- <em>Martin peint</em> et Moni<span title="que pani" id="span2">que</span>
Comment rétablir la dernière phrase "Monique panique" ?
#span2:before { content: attr(title); }
Comment signaler que le lien de la ligne 9 n'a pas été visité ?
a:link { text-decoration:underline; }
a:link:after { content:"*"; } /* signalé par une étoile */
Comment signaler que le lien de la ligne 9 a déjà été visité?
a:visited:after { content:" Déjà vu"; }
a:visited { color:#00FF00; }
