CSS:Association d'un style à une balise

Un article de WikiTuto.

Jump to: navigation, search

Apprendre les CSS

CSS

Généralités

Feuilles de style : appliquer un style

Feuilles de style : liste des éléments

Exemple de réalisation de feuille de style

Utilitaires CSS

Positionnement et affichage

Tableaux sans tableau

Bouton CSS sans programmation

Les bugs d'Internet Explorer

modifier Tdm CSS

[modifier]

Introduction

Nous allons voir dans cette partie la façon de préciser que telle balise doit avoir telle présentation... Sélecteurs de types

Dans ce cas, on ne précise que les noms des balises concernées par la définition du style (ne jamais mettre les crochets « < » et « > ») :

 H1 {
 font-family: Wide Latin;
 }
 H1,H2,H3 {
 font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
 color: red;
 }
 P {
  color: blue;
 }

[modifier]

Sélecteurs d'attributs (CLASS ou ID)

Il est également possible de proposer des apparences différentes pour une même balise. Nous avons précédemment décrit le style associé de manière générale aux balises P et nous allons maintenant définir un autre style pour certains paragraphes dits ecolo. Cela passe par une distinction dans le code HTML :

<p class="ecolo">
 un paragraphe...
 </p>

Puis, on utilisera la syntaxe suivante dans la feuille de style pour décrire les caractéristiques de ces paragraphes particuliers :

p.ecolo {
 color: green;
  }

Plus généralement, on peut spécifier l'apparence d'une classe sans préciser de balise :

 .ecolo {
 color: green;
 }

Cela aura pour effet de faire apparaître en vert toutes les textes contenus dans balises de classe ecolo :

<h1 class="ecolo">Titre  militant</h1>
 <p class="ecolo">un paragraphe...</p>

Enfin, plutôt que de parler d'une classe, il est possible de ne donner un style que pour une apparition unique d'une balise donnée. Pour cela, il faut repérer cette balise en lui donnant un identifiant unique :

<p id="p1">
 bla bla bla bla bla bla
 bla bla bla bla bla bla
 bla bla bla bla bla bla
 </p>

Puis de définir le style du paragraphe nommé p1 en utilisant la syntaxe suivante :

#p1 { color: blue; }

Cette pratique n'est plus tout à fait dans l'esprit que nous avons décrit jusqu'à maintenant, à savoir décrire des styles généraux qui seront repris sur l'ensemble d'un site. Elle peut cependant se révéler utile dans quelques cas particuliers.

[modifier]

Par contexte

Dans l'exemple suivant tous les LI situés dans un UL (donc pas ceux situés dans un OL) auront une taille de caractères small. (On dira dans ce cas que LI doit être un descendant d'un UL, ou que UL doit être un ascendant d'un LI.)

Mais ceux qui seront dans un LI lui-même situé dans un UL auront une taille de caractères x_small. (Les LI descendant d'un LI lui-même descendant d'un UL.)

BODY { margin: 0.5cm; }
 UL LI { font-size: small; }
 UL LI LI { font-size: x_small; }

On peut utiliser aussi cette méthode avec des classes et non plus des balises. Par exemple pour définir le style des H1 descendant d'une balise quelconque de classe prof :

.prof h1 { color: red; }

On peut même préciser que cela ne s'applique que pour les fils (descendant direct, sans intermédiauire). Ainsi la définition de style suivante ne s'appliquera qu'aux P de premier niveau, ceux qui ne seront inclus dans rien d'autre :

body > p { color: red; }

[modifier]

Par pseudo-classes

Quelques exemples :

A:link          (les liens)
A:hover         (les liens, au passage de la souris)
A:active        (les liens, au moment du click)
A:visited       (les liens déjà visités, prioritaire sur les précédents)
P:first-line
P:first-letter
p.ecolo:link
p.ecolo:visited

[modifier]