|
Rappelons-nous que le modèle d'une règle
CSS est le suivant:
Sélecteur {Définition de style}
Le sélecteur peut être une balise HTML, comme <H1>, <H2>,
mais aussi <BODY>, <LINK>, <A>, etc. La définition de
style correspond elle-même au modèle suivant:
{Propriété: valeur; Propriété:
valeur; ...; Propriété: valeur}
La liste complète de ces propriétés et de ces valeurs
est disponible sur le site du W3C.
Les propriétés sont regroupées en 5 grandes catégories
(CSS1) auxquelles s'ajoute une catégorie supplémentaire (CSS2 -
propriétés de positionnement): propriétés
de police; propriétés de couleur et de fond
(background); propriétés de texte; propriétés
de "boite" (tableaux, cellules, etc.), et propriétés
de classification (listes).
Tout ceci permet déjà de très nombreuses possibilités
de présentation des pages HTML, mais on se rend compte que l'utilisation
exclusive de balises HTML en tant que sélecteurs pourra, dans certains
cas, manquer de précision. Par exemple, si l'on veut formater le contenu
d'un tableau à 3 lignes de 3 façons différentes (une par
ligne), alors on se trouvera limité par la seule balise <TR>. La
solution réside dans la définition de classe.
Comment faire?
Le modèle suivant décrit l'opération de définition
d'une classe CSS:
.nom de la classe
{propriété: valeur; ...}
(notez le point qui précède la définition)
Ainsi, par exemple, on définira la classe "ligne" de la manière
suivante:
.ligne {font-family: Arial;
font-weight: bold;
color: #000066}
et on appliquera ce style ainsi dans notre document HTML (après avoir
incorporé la règle soit par l'intermédiaire d'un lien, soit
dans le corps du document HTML):
<TR class="ligne" height="25">...</TR>
A noter qu'une classe, par définition, définit un ensemble
d'éléments. On peut l'utiliser pour n'importe quelle balise du
document. Pour identifier un sélecteur de manière unique (si par
exemple le document doit être manipulé par un script), on peut utiliser
les identificateurs (IDs). Ils s'utilisent d'une manière
analogue aux classes:
#ligne {font-family: Arial;
font-weight: bold;
color: #000066}
(notez le # au lieu du point)
pour la définition du style, et:
<TR id="ligne" height="25">...</TR>
pour son application à une balise.
Pseudo-classes
Quelque peu différentes, les pseudo-classes sont une extension du
concept de classes: elles définissent les styles associés à
des événements, qui, en tant que tels, ne sont pas des éléments
de la structure du document HTML. Ainsi, il existe plusieurs pseudo-classes associées
à la balise <A>. Ces pseudo-classes définissent, entre autres,
les styles correspondant à un lien inactif (:link),
visité (:visited) ou actif
(c'est-à-dire survolé par la souris:active).
Elles s'utilisent ainsi:
A:link {text-decoration: none; color: blue}
A:active {text-decoration: none; color: red}
A:visited {text-decoration: none: color: #000066}
Les styles des balises (éléments) et des événements-utilisateurs
sont donc couverts de manière souple par le premier niveau de spécifications
du langage CSS. Le positionnement précis des images, blocs de texte, tableaux
et calques sur la page est alors l'étape supplémentaire vers un
contrôle total de la présentation de la page web. C'est le rôle
du second niveau de spécifications
du langage CSS.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
[