Les Feuilles de style

CSS2

Cascading Style Sheets level 2

par Michel Balmont - Voir CSS1

 

 

CSS2 apporte de nombreuses nouvelles fonctionnalités.

 

1. Les sélecteurs

 

1.1 Le sélecteur universel (*)

Il permet de sélectionner tous les éléments d'un document.

Ex. : * {font-face:"Times"}

 

1.2 Sélection de sous-éléments et de dépendance

Permet de sélectionner des éléments qui se trouvent à un ou plusieurs niveaux de dépendance par rapport à l'élément parent

x y

Tout élément "y" contenu dans un élément "x" (sélecteur de descendance)

x > y

Tout élément "y" qui est un sous-élément direct de "x" (sélecteur filial)

 

1.3 Sélection d'une fratrie complète (x + y)

Permet de sélectionner tous les éléments au même niveau par rapport à l'élément-parent. (sélecteur adjacent)

 

1.4 Sélection par l'attribut

Permettent de sélectionner un élément en fonction de l'existence d'un attribut particulier.

x [attribut]

Il n'est pas nécessaire que l'attribut ait une valeur réelle, il suffit qu'il existe (sélecteur d'existence d'attribut).

x [attribut="bidule"]

Sélectionne les attributs de l'élément "x" ayant une valeur précise [bidule] (sélecteur de valeur d'attribut monovalué).

x [attribut~="bidule"]

L'attribut est composé de plusieurs éléments, séparés par des espaces, dont l'un correspond à bidule (sélecteur de valeur d'attribut multivalué).

x [lang="code"]

Tous les éléments "x" dont l'attribut "lang" correspond à code (sélecteur d'attribut linguistique).

x#bidule

Tout élément "x" dont l'attribut suffixe d'identification possède la valeur bidule.

 

1.5 Les fonctions @xxx

@page

Applique des styles à toute une page. Le but en est surtout l'impression. À la différence des autres boîtes (voir CSS1), les pages n'ont ni bordure (border) ni remplissage (padding), mais seulement des marges (margin). Elle n'accepte pas les mesures typographiques par em et ex.

@import

Insère une style de feuilles externe dans la feuille courante. Cet élément permet ainsi la construction très souple de feuilles de style importantes à partir d'éléments modulaires. Les styles de la feuille principale ont priorité sur ceux de la feuille de style importée s'il y a conflit.

@media

Regroupe des règles de style qui ne doivent être appliquées qu'à un type de média et permet ainsi de contrôler les styles d'un même élément d'après le média d'exploitation. On peut par exemple faire afficher un texte à l'écran avec une certaine police, mais le faire imprimer avec une autre, chacune étant plus lisible en fonction du périphérique.

all

tous les périphériques de sortie

aural

continu et audio

synthétiseurs vocaux

braille

continu et tactile

périphériques braille

embossed

paginé et tactile

périphériques et imprimantes brailles

handheld

visuel

ordinateurs de poche & PDA

print

paginé et visuel

supports papier non transparents

projection

paginé et visuel

présentation et diaporamas, en vidéoprojection ou imprimé sur transparents

screen

continu et visuel

écran graphique couleur

tty

continu et visuel

terminaux passifs et anciens écrans PC utilisant le mode texte non proportionnel

tv

audio et visuel

périphériques analogiques à faible résolution (télévision)

Exceptionnellement les valeurs ne sont pas sensibles à la casse (majuscules/minuscules).

@font-face

Décrit une police utilisée ailleurs dans la même feuille des style (nom, adresse de téléchargement, etc.).

@charset

Définit le jeu de caractères utilisé par la feuille de style.

 

1.6 De nouvelles pseudo-classes

voir les pseudo-classes de CSS1

:first-child

Sélectionne le premier sous-élément (enfant) d'un élément.

:focus

Sélectionne l'objet dans lequel se trouve le curseur clignotant (de saisie clavier).

:hover

Sélectionne l'objet sur lequel se trouve la souris, sans que ce dernier soit sélectionné (sans qu'un bouton ait été cliqué).

:lang()

Sélectionne tous les éléments dont le contenu est écrit dans une langue spécifique (par l'attribut "xml:lang"). Cet élément attend un paramètre.

:first

Sélectionne la première page d'un document destiné à être imprimé. Elle n'est applicable qu'à la fonction @page.

:left

Sélectionne uniquement les pages paires (de gauche) d'un document destiné à être imprimé. Elle n'est applicable qu'à la fonction @page.

:right

Sélectionne uniquement les pages impaires (de droite) d'un document destiné à être imprimé. Elle n'est applicable qu'à la fonction @page.

 

1.7 De nouveaux pseudo-éléments

voir les pseudo-éléments de CSS1

:after

Permet de sélectionner un objet situé après l'objet spécifié.

:before

Permet de sélectionner un objet situé avant l'objet spécifié.