SELFHTML/Aides à la navigation Feuilles de style CSS Définir des formats CSS |
Vous pouvez définir, dans un fichier HTML, un passage pour des formats CSS.
<html> <head> <title>Titre du fichier</title> <style type="text/css"> <!-- /* ... ici sont définis les formats ... */ --> </style> </head> <body> </body> </html> |
Avec <style...>
... </style>
vous notez un passage pour des définitions de formats de feuilles de style (style = style, format). Dans le repère d'ouverture <style>
vous devez mentionner le type Mime du langage de feuilles de style. Pour les CSS c'est la mention type="text/css"
. Entre le repère d'ouverture et le repère de fermeture </style>
vous pouvez définir des formats globaux. Lisez à ce sujet la partie expliquant comment définir des formats globaux.
Afin que les navigateurs Web plus anciens, qui ne connaissent pas les feuilles de style, n'interprètent pas par erreur le contenu de l'élément style
comme du texte à afficher, vous pouvez insérer le contenu dans un commentaire HTML (<!--
... -->
) comme dans l'exemple ci.-dessus.
Les formats que vous définissez de cette façon s'appliquent à ce fichier HTML.
Il est tout à fait permis de noter plusieurs passages style
dans l'entête d'un fichier HTML. C'est indiqué quand par exemple vous désirez noter dans un fichier HTML des définitions de style dans différents langages de style ayant chacun un type Mime différent.
Dans de nombreux cas, vous voudrez avoir des formats homogènes pour tous les fichiers HTML de votre projet. Dans ce cas, vous n'avez pas besoin de répéter les mentions dans chaque fichier. À la place, vous pouvez définir les formats dans un fichier texte séparé qu'il vous suffira d'incorporer dans les fichiers HTML que vous désirez. Quand vous modifiez les mentions du fichier séparé, ces modifications se répercutent uniformément sur tous les fichiers dans lesquels le fichier CSS séparé est incorporé.
<html> <head> <title>Titre du fichier</title> <link rel="stylesheet" type="text/css" href="formats.css"> <style type="text/css"> <!-- ... ici sont permis des formats spécifiques au fichier ... --> </style> </head> <body> </body> </html> |
Dans l'entête d'un fichier HTML, vous pouvez référencer un fichier CSS séparé qui contient des définitions de formats CSS grâce à <link...>
(link = lien). Dans le repère <link>
doivent figurer les mentions rel="stylesheet" type="text/css"
(rel = relation = relation, type = type Mime). Pour l'attribut href=
mentionnez le fichier désiré (href = hyper reference = référence hypertexte). Si le fichier CSS se trouve dans un autre répertoire ou sur un autre serveur, vous devez travailler avec la mention du chemin relatif ou l'adresse URIs absolue. Cela fonctionne exactement comme par exemple pour incorporer des graphiques.
Pour le fichier référencé, il doit s'agir d'un fichier purement texte avec la terminaison .css. Le fichier ne doit contenir rien d'autre que des définitions de formats globaux et des commentaires dans des passages de feuilles de style. Vous pouvez créer un tel fichier CSS avec un simple éditeur de texte. Dans SELFHTML par exemple est utilisé un fichier CSS séparé pour tous les fichiers du document. Vous pouvez regarder ce fichier CSS en tant que texte (le lien mène à un fichier du nom de selfhtmlcss.txt, pour que le fichier puisse dans tous les cas être affiché dans le navigateur - le fichier de feuilles de style s'appelle en fait selfhtml.css).
Quand vous référencez un fichier avec des mentions de feuilles de style avec <link...>
, vous n'avez pas besoin de passage <style...>
...</style>
. Dans l'exemple ci-dessus pourtant un tel passage a été défini. Cela doit
montrer que vous pouvez tout à fait combiner les deux façons de définir des mentions de feuilles de style. Si vous utilisez les deux façons, les formats directement définis dans <style...>
...</style>
, ont priorité en cas de conflit sur les formats référencés. Ainsi vous pouvez
toujours par exemple importer des formats toujours réemployés et en écraser certains d'entre eux avec des formats spécifiques au fichier.
Indépendamment du fait que vous pouvez définir des formats de style globaux ou incorporer un fichier CSS séparé, vous pouvez formater des repères HTML distincts dans le corps du texte.
<html> <head> <title>Titre du fichier</title> <link rel="stylesheet" type="text/css" href="formats.css"> <style type="text/css"> <!-- ... ici sont permis des formats spécifiques au fichier ... --> </style> </head> <body> <h1 style="[formats spécifiques à l'élément]">...</h1> </body> </html> |
Avec l' attribut universel style=
dans le repère d'ouverture d'un élément, vous pouvez noter des formats CSS pour ce seul élément. De plus amples détails à ce sujet sont développés dans la partie expliquant comment formater directement des éléments HTML.
Les éléments HTML doivent être notés conformément à HTML 4.0 avec repère d'ouverture et repère de fermeture pour que les formatages CSS soient correctement affichés. Cela s'applique avant tout aux éléments pour lesquels autrefois, seule la notation du repère d'ouverture suffisait, par exemple pour p
, li
, option
, td
et th
.
L'exemple ci-dessus que vous pouvez utiliser, parallèlement aux définitions de format dans l'élément HTML, mentionne également les méthodes pour la définition de formats globaux. En cas de contradiction, ce sont toujours les définitions "intérieures" de format qui ont priorité sur les définitions "extérieures". Si donc vous mentionnez dans le repère d'ouverture <h1>
une autre police que celle que vous avez fixée dans le passage global style
pour l'élément h1
, alors la définition du repère d'ouverture <h1>
primera sur la définition globale, exactement comme cette dernière a elle aussi priorité sur les définitions du fichier CSS externe incorporé.
L'écran et l'imprimante par exemple sont des modes de sortie très différents pour des données structurées agréablement. Ces deux modes de sortie ont leurs propres règles. Pendant qu'à l'écran des écritures claires auront belle allure sur des fonds sombres, ce n'est pas une bonne solution pour la sortie à l'imprimante. Pour la sortie à l'imprimante, des retraits de paragraphes d'au moins 2cm auront meilleur aspect, alors que par les mentions correspondantes le précieux espace d'affichage à l'écran sera peut être gaspillé. C'est pourquoi, vous pouvez incorporer différents fichiers de feuilles de style pour les différents modes de sortie, qui peuvent contenir des définitions de formats différentes. Le logiciel doit décider lors de la présentation des pages quel fichier CSS incorporé est déterminant. Si le navigateur Web par exemple affiche les pages à l'écran, il doit utiliser le fichier CSS qui fixe expressément l'"écran" comme mode de sortie, et si l'utilisateur imprime une page, le navigateur doit employer à la place le fichier CSS que vous mentionnez pour le mode "imprimante".
<html> <head> <title>Titre du fichier</title> <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="impression.css"> <link rel="stylesheet" media="aural" href="bafles.css"> </head> <body> </body> </html> |
Tout d'abord, il vous faut un fichier texte avec l'extension .css
pour chacun des modes de sortie, qui ne contient pour chacun d'entre eux que les définitions de format CSS souhaitées pour chaque mode de sortie. Dans un fichier HTML vous pouvez incorporer tous les fichiers CSS comme dans l'exemple ci-dessus. L'incorporation fonctionne exactement comme pour définir un format global dans un fichier CSS séparé . La seule nouveauté est que plusieurs repères <link>
pour incorporer sont tout de suite notés, et qu'ils comportent en plus l'attribut media=
. Avec cet attribut, vous déterminez pour quel mode de sortie le fichier doit être utilisé, fichier que vous incorporez ensuite grâce à la mention href=
. Vous pouvez mentionner un ou plusieurs types de sortie pour media=
. Plusieurs mentions sont à séparer par des virgules.
Dans les CSS 2.0 les mentions possibles suivantes sont citées:
|
L' Explorer Internet MS interprète ces mentions à partir de la version 4.0 du logiciel pour une certaine partie. Netscape dans sa version 6.0 trouve bien le bon fichier de feuilles de style pour les formats d'écran, et ignore pourtant par exemple les fichiers de feuilles de style pour l'impression.
La syntaxe avec <link...>
pour incorporer des fichiers de
feuilles de style séparés pour divers modes de sorties est la syntaxe HTML. Par ailleurs, il existe également une syntaxe CSS qui a le même
objectif:
<html> <head> <title>Titre du fichier</title> <style type="text/css"> <!-- @import url(impression.css) print, embossed; @import url(portable.css) handheld; @import url(normal.css) screen; --> </style> </head> <body> </body> </html> |
Une incorporation spécifique à CSS est notée dans un passage style
de l'entête de fichier. Avec @import url
vous démarrez la commande pour incorporer un fichier CSS. Notez entre parenthèses le nom du fichier CSS ou bien l'adresse du fichier CSS séparé. Derrière le nom de fichier, notez, séparé par un espace, le mode de sortie
désiré. plusieurs peuvent être mentionnés séparés par des virgules. Sont permis les mêmes types de modes de sortie que dans la syntaxe
HTML avec l'attribut media=
. À la fin de la commande @import
doit se trouver un point
virgule.
Outre la possibilité d'incorporer diverses feuilles de style séparées pour différents médias de sortie en HTML, existe également encore la possibilité de définir différents modes de sorties dans un passage style
.
<html> <head> <title>Titre du fichier</title> <style type="text/css"> <!-- @media print { /* ... définition de formats pour l'impression ... */ } @media screen, handheld { /* ... définition de formats pour une sortie écran ... */ } --> </style> </head> <body> </body> </html> |
Avec @media
vous définissez dans un passage style
un certain mode de sortie. Pour chaque sorte de mode que vous voulez définir, vous pouvez noter une telle commande. Derrière la commande @media
suit, séparé par un espace, le mode de sortie désiré. Vous pouvez aussi mentionner plusieurs modes de sorties à la suite séparés par des virgules. Les mentions autorisées sont les mêmes que pour l'attribut HTML media=
(voir types de médias).
À la suite de la commande @media
vous devez noter des parenthèses accolades (alt 123/125) {
et }
. Toutes les définitions de format que vous notez à l'intérieur de ces parenthèses accolades ne sont alors valables que pour le ou les modes mentionnés.
Pour commenter vos définitions de format en interne, la syntaxe spéciale appliquée aux commentaires du langage de programmation C est utilisée.
<html> <head> <title>Titre du fichier</title> <style type="text/css"> <!-- p { color:blue; } /* format pour texte bleu, créé le 15.07.2002 */ --> </style> </head> <body> </body> </html> |
À l'intérieur de <style...>
...</style>
vous pouvez avec /*
- à savoir une barre oblique suivie d'une étoile
à la suite - introduire un commentaire. La suite des deux caractères inverses - à savoir */
- termine le commentaire. Le début et la fin du commentaire doivent se trouver sur la même ligne. Les commentaires ne peuvent pas être imbriqués.
Vous pouvez communiquer explicitement au navigateur WWW dans un fichier HTML au moyen d'une des mentions Meta concernant le contenu, que ce fichier contient des définitions de feuilles de style dans un certain langage de définition. La mention n'est pas absolument indispensable dans la pratique actuelle et pour le langage CSS. La mention sert à mettre une commande à disposition du client (le navigateur WWW) et du serveur WWW, commande qui doit aider les deux parties à se mettre d'accord sur la syntaxe de feuilles de style à employer, avant d'interpréter le fichier.
<head> <meta http-equiv="Content-Style-Type" content="text/css"> </head> |
Avec <meta http-equiv="Content-Style-Type" content="text/css">
dans l'entête d'un fichier HTML, vous imposez la syntaxe CSS comme obligatoire pour les définitions de feuilles de style dans ce fichier. Si vous voulez utiliser un langage de feuilles de style différent de CSS, vous devez remplacer "text/css" par le type Mime du langage de définitions de format concerné.
Définir des formats globaux | |
Feuilles de style CSS et HTML | |
SELFHTML/Aides à la navigation Feuilles de style CSS Définir des formats CSS |
© 2001 Stefan Münz / © 2003 Traduction Serge François, 13405@free.fr
selfhtml@fr.selfhtml.org