SELFHTML: Feuilles de style CSS / Définir des formats CSS / Incorporer des feuilles de style en HTML

	Incorporer des feuilles de style en HTML
	Définir globalement des formats pour un fichier HTML Définir un format global dans un fichier CSS séparé Définir des formats directement dans un élément HTML Diverses feuilles de style séparées pour différents médias de sortie Définitions de formats pour différents médias de sortie Commentaires dans des passages de feuilles de style Fixer expressément le langage de feuilles de style

Définir globalement des formats pour un fichier HTML

Vous pouvez définir, dans un fichier HTML, un passage pour des formats CSS.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
/*  ... ici sont d&eacute;finis les formats ... */
-->
</style>
</head>
<body>
</body>
</html>

Explication:

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.

Attention:

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.

Définir un format global dans un fichier CSS séparé

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é.

Exemple:

<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&eacute;cifiques au fichier ...
-->
</style>
</head>
<body>
</body>
</html>

Explication:

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).

Attention:

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.

Définir des formats directement dans un élément HTML

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.

Exemple:

<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&eacute;cifiques au fichier ...
-->
</style>
</head>
<body>
<h1 style="[formats sp&eacute;cifiques &agrave; l'&eacute;l&eacute;ment]">...</h1>
</body>
</html>

Explication:

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.

Attention:

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é.

Diverses feuilles de style séparées pour différents médias de sortie

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".

Exemple:

<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>

Explication:

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.

Types de médias:

Dans les CSS 2.0 les mentions possibles suivantes sont citées:

Mention	Signification
`media="all"`	Le fichier CSS s'applique à tous les types de médias.
`media="aural"`	Le fichier CSS s'applique à des systèmes de restitution vocale assistée par ordinateur. Veillez aussi dans ce contexte aux Propriétés CSS pour une sortie vocale.
`media="braille"`	Le fichier CSS s'applique à des périphériques de sortie avec ce qu'on appelle une "ligne Braille". Le texte y est porté sur la structure modifiable en surface du matériel de la ligne Braille et lue au toucher avec le doigt. Cette forme de média de sortie est conçue pour les aveugles.
`media="embossed"`	Le fichier CSS s'applique à des imprimantes en Braille. Le texte y est pressé en relief sous forme de structure de surface pouvant être reconnues au toucher sur du papier ou sur un matériau comparable. Comme `braille`, `embossed` est conçu pour les aveugles.
`media="handheld"`	Le fichier CSS s'applique à l'affichage sur des ordinateurs de poche très petits. Des agendas électroniques permettant la navigation sur la toile sont des représentants typiques de cette catégorie.
`media="print"`	Le fichier CSS s'applique à l'impression sur papier. Les navigateurs Web doivent utiliser ces définitions de format quand l'utilisateur désire imprimer la page Web. Veillez aussi dans ce contexte aux mises en page pour médias d'impression.
`media="projection"`	Le fichier CSS s'applique à la projection de données avec des rétroprojecteurs ou appareils similaires.
`media="screen"`	Le fichier CSS s'applique à l'affichage à l'écran.
`media="tty"`	Le fichier CSS s'applique à des médias de sortie non graphiques avec une largeur de signes invariable comme par exemple des télex. Mais ce type de média est également intéressant pour des navigateurs orientés texte comme Lynx.
`media="tv"`	Le fichier CSS s'applique à des médias de sortie semblables à la télévision qui se distinguent par une résolution grossière et le défaut de soutien pour le défilement de l'image mais par contre par un soutien du son.

Attention:

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:

Exemple:

<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>

Explication:

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.

Définition de formats pour différents médias de sortie

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.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
@media print
{
  /* ... d&eacute;finition de formats pour l'impression ... */
}
@media screen, handheld
{
  /* ... d&eacute;finition de formats pour une sortie &eacute;cran ... */
}
-->
</style>
</head>
<body>
</body>
</html>

Explication:

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.

Commentaires dans des passages de feuilles de style

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.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
  p { color:blue; } /* format pour texte bleu, cr&eacute;&eacute; le 15.07.2002 */
-->
</style>
</head>
<body>
</body>
</html>

Explication:

À 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.

Fixer expressément le langage de feuilles de style

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.

Exemple:

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>

Explication:

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