La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.
Cette page revient sur le but et la structure des feuilles de style CSS.
Information : les médias
Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.
Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.
Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.
| Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site.
Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :
@media print {
#nav-area {display: none;}
}
|
Voici certains des types de média courants :
screen |
Écran d'ordinateur en couleurs |
print |
Média paginé |
projection |
Projection sur un écran |
all |
Tous les médias (la valeur par défaut) |
| Il existe d'autres manières de spécifier le type de média d'une série de règles.
Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut En CSS, vous pouvez utiliser En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style. Pour tous les détails sur les types de média, consultez Media dans la spécification CSS. Plus d'exemples utilisant la propriété |
Impression
CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.
Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.
Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).
Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).
Cette règle définit les marges de la page à deux centimètres de chaque côté :
@page {margin: 2cm;}
Cette règle s'assure que chaque élément H1 commencera une nouvelle page :
h1 {page-break-before: always;}
|
| Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS.
Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat. |
Interfaces utilisateur
CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.
Il n'y a pas de type de média spécial pour ce type de périphériques.
Voici les cinq sélecteurs spéciaux :
| Selecteur | Sélectionne |
E:hover |
Tout élément E survolé par le pointeur |
E:focus |
Tout élément E ayant le focus du clavier |
E:active |
Tout élément E impliqué dans l'action courante de l'utilisateur |
E:link |
Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment |
E:visited |
Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment |
La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :
| Valeur | Indique |
pointer |
Indique un lien |
wait |
Indique que le programme n'accepte aucune interaction pour le moment |
progress |
Indique que le programme fonctionne, mais peut toujours accepter une autre commande |
default |
Le curseur par défaut (habituellement une flèche) |
Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.
Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : [disabled] ou [readonly].
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui :
.bouton-vert {
background-color:#cec;
color:#black;
border:2px outset #cec;
}
.bouton-vert[disabled] {
background-color:#cdc;
color:#777;
}
.bouton-vert:active {
border-style: inset;
}
Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :
Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole. |
| Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS.
Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel. |
Action : impression d'un document
Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Exemple à imprimer</TITLE> <LINK rel="stylesheet" type="text/css" href="style4.css"></strong> </HEAD> <BODY> <H1>Section A</H1> <P>Ceci est la première section...</P> <H1>Section B</H1> <P>Ceci est la seconde section...</P> <DIV id="en-tete-impression"> Titre pour les médias paginés </DIV> <DIV id="pied-de-page-impression"> Page : </DIV> </BODY> </HTML>
Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :
/*** Exemple d'impression ***/
/* Réglages par défaut pour l'écran */
#en-tete-impression,
#pied-de-page-impression {
display: none;
}
/* Uniquement pour l'impression */
@media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#en-tete-impression {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#pied-de-page-impression {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#pied-de-page-impression:after {
content: counter(page);
counter-increment: page;
}
} /* fin des paramètres pour l'impression */
Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.
Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.
|
|
| Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé.
Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style. Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux. |
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.