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

SELFHTML/Quickbar Feuilles de style CSS Définir des feuilles de style

	Incorporer des feuilles de style en HTML
	Définir des feuilles de style dans un fichier HTML Définir des feuilles de style dans un fichier séparé Fichiers de feuilles de style pour divers modes de sortie Définitions de feuilles de style pour divers modes de sortie Commentaires dans des passages de feuilles de style Fixer explicitement le langage de feuilles de style

Définir des feuilles de style dans un fichier HTML

Vous pouvez définir un passage pour mentions de feuilles de style dans un fichier HTML.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
/*  ... mentions de feuilles de style ... */
//-->
</style>
</head>
<body>
</body>
</html>

Explication:

Avec la commande <style...> ... </style> dans l'entête du fichier HTML vous définissez un passage pour des mentions de feuilles de style (style = style). Dans le repère d'ouverture <style> vous devez mentionner le type de la définition de format. Cela se fait pour toutes les possibilités de formatage décrites ici par la mention type="text/css". Entre le repère d'ouverture et le repère de fermeture </style> vous pouvez définir les mentions de feuilles de style proprement dites. Pour ce faire, lisez la partie définir les formats.

Attention:

Pour que les navigateurs WWW qui ne connaissent pas les feuilles de style, n'interprètent pas par erreur les mentions de feuilles de style comme étant du texte à afficher, vous pouvez incorporer le passage des mentions de feuilles de style proprement dites dans un commentaire HTML  de plusieurs lignes comme dans l'exemple ci-dessus.

Les mentions de feuilles de style que vous définissez de cette façon dans l'entête d'un fichier HTML ne sont valables que pour ce seul fichier HTML.

Définir des feuilles de style dans un fichier séparé

Dans de nombreux cas, vous voudrez avoir des formats uniformes 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 noter les mentions de feuilles de style dans un fichier texte séparé et incorporer simplement ce fichier dans tous les fichiers HTML que vous désirez. Si vous modifiez les mentions dans le fichier séparé, les modifications auront un effet uniforme sur tous les fichiers dans lesquels ce fichier 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">
<!--
  ... mentions de feuilles de style supplémentaires ...
//-->
</style>
</head>
<body>
</body>
</html>

Explication:

Dans l'entête d'un fichier HTML, vous pouvez référencer un fichier qui contient les mentions de feuilles de style avec une commande HTML du type <link...> (link = lien). Dans cette commande doivent toujours figurer les mentions rel=stylesheet type="text/css" (rel = relation = relation, type = Type). En mentionnant href= vous pouvez mentionner le fichier désiré (href = hyper reference = référence hypertexte). La mention doit figurer entre guillemets. 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 URL absolue. Cela fonctionne exactement à peu de chose prés comme 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 format, donc aucune commande HTML non plus. Un tel fichier peut être établi avec chaque éditeur de texte simple. Dans SELFHTML un tel fichier de feuilles de style séparé est utilisé pour tous les fichiers du document. Vous pouvez appeler ce fichier comme exemple (le lien conduit à un fichier du nom de wselfhtm.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 wselfhtml.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.

La syntaxe avec <link...> pour incorporer un fichier séparé de feuilles de style est la syntaxe HTML pour incorporer des feuilles de style. 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(formats.css);
//-->
</style>
</head>
<body>
</body>
</html>

Explication:

Vous devez noter l'incorporation spécifique CSS d'un fichier CSS séparé dans un passage <style> dans l'entête du fichier. Avec le signe "chez" @import url vous démarrez la commande pour incorporer un fichier CSS. Notez entre parenthèses le nom du fichier CSS. Ici aussi les mentions sont les mêmes à peu de chose prés que pour incorporer des graphiques. À la fin de la commande doit se trouver un point virgule.

Attention:

La syntaxe HTML avec <link...> est pour l'instant plus sûre que la syntaxe CSS pour les navigateurs.

Fichiers de feuilles de style pour divers modes 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. Tenez compte aussi à ce sujet des mentions de feuilles de style pour la mise en page et le saut de page pour des documents destinés à l'impression.

Exemple 1 (dans un fichier séparé d'après la syntaxe HTML):

<html>
<head>
<title>Titre du fichier</title>
<link rel=stylesheet media="screen" href="website.css">
<link rel=stylesheet media="print" href="printer.css">
<link rel=stylesheet media="aural" href="speaker.css">
</head>
<body>
</body>
</html>

Explication:

Pour préparer des feuilles de style pour divers modes de sortie, vous pouvez noter les mentions de feuilles de style dans des fichiers séparés distincts. Établissez pour chaque mode de sortie un fichier texte avec la terminaison .css qui ne contient rien d'autre que les définitions de feuilles de style désirées. Dans un fichier HTML vous pouvez incorporer tous les fichiers de feuilles de style établis comme dans l'exemple ci-dessus. L'important pour le faire est la mention media=. Par ces mentions, vous déterminez pour quel mode de sortie le fichier que vous incorporez par la mention href= doit être utilisé. À l'heure actuelle, les mentions suivantes sont connues pour media= :
media="screen" pour les feuilles de style devant avoir un effet sur une présentation à l'écran.
media="print" pour les feuilles de style devant avoir un effet sur une sortie à l'imprimante.
media="aural" pour les feuilles de style devant avoir un effet sur une sortie vocale du fichier HTML par les hauts parleurs.
media="projection" pour les feuilles de style devant avoir un effet sur une sortie par projecteur diapos ou par rétro projecteur du contenu du fichier HTML.
media="braille" pour les feuilles de style devant avoir un effet sur une sortie par des moyens Braille tactiles du contenu du fichier HTML.
media="tv" pour les feuilles de style devant avoir un effet sur une sortie télé du contenu du fichier HTML.
media="handheld" pour les feuilles de style devant avoir un effet sur une sortie sur téléphone portable, palmtops ou appareils semblables équipés d'un petit écran.
media="all" pour les feuilles de style devant avoir un effet sur tous les types de modes de sortie.

Attention:

Jusqu'à présent, l' Explorer Internet MS interprète ces mentions à partir de la version 4.0 du logiciel pour une certaine partie. Netscape 4.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 2 (dans des fichiers séparés d'après la syntaxe CSS):

<html>
<head>
<title>Titre du fichier</title>
href="formats.css">
<style type="text/css">
<!--
@import url(impression.css) print;
@import url(multimedia.css) projection, tv;
//-->
</style>
</head>
<body>
</body>
</html>

Explication:

Vous devez noter l'incorporation spécifique CSS d'un fichier CSS séparé dans un passage <style> dans l'entête du fichier. Avec le signe "chez" @import url vous démarrez la commande pour incorporer un fichier CSS. Notez entre parenthèses le nom du fichier CSS. Derrière le nom de fichier, notez, séparé par un espace, le mode de sortie désiré. Sont permis les mêmes types de modes de sortie que dans la syntaxe HTML. À la fin de la commande doit se trouver un point virgule.

Définitions de feuilles de style pour divers modes de sortie

Outre la possibilité d'incorporer des fichiers de feuilles de style pour divers modes de sortie en HTML, existe également encore la possibilité de différencier différents modes de sorties dans un passage de feuilles de style.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
href="formats.css">
<style type="text/css">
<!--
@media print
{
  ... mentions de feuilles de style pour l'impression ...
}
@media screen, projection
{
  ... mentions de feuilles de style pour la sortie à l'écran ...
}
//-->
</style>
</head>
<body>
</body>
</html>

Explication:

Avec @media vous définissez dans un passage de feuilles de style un passage pour un certain mode de sortie. Pour chaque sorte de mode que vous voulez différencier, 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 points virgules comme dans l'exemple ci-dessus avec @media screen, projection. Les mentions de feuilles de style sont alors valables pour tous les modes de sortie énumérés.

À la suite de la commande @media vous devez noter des parenthèses accolades (alt 123/125) { et }. Toutes les mentions de feuilles de style que vous définissez à l'intérieur de ces parenthèses accolades ne sont alors valables que pour le ou les modes mentionnés.

Attention:

Ces commandes ne sont pas encore interprétées ni par l' Explorer Internet MS, ni par Netscape dans leur version 4.x.

Commentaires dans des passages de feuilles de style

Pour commenter vos définitions de format en interne, il existe une syntaxe spéciale dérivé du langage de programmation C.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
  p { color:blue; } /* Format pour texte bleu, créé le 4/1/1998 */
//-->
</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. Avec la suite de caractères inverse - à savoir avec */ - vous terminez le commentaire. Le début et la fin du commentaire doivent se trouver sur la même ligne.

Fixer explicitement le langage de feuilles de style

Vous pouvez communiquer explicitement au navigateur WWW dans un fichier HTML au moyen d'une mention Meta, que ce fichier contient des définitions de feuilles de style dans un certain langage de définition. La mention n'est pas indispensable dans la pratique actuelle ni 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 autre langage de feuilles de style que CSS, vous devez remplacer "text/css" par le type Mime du langage de définitions de format concerné.


après:	Définir des formats globaux
avant:	Feuilles de style et HTML

SELFHTML/Quickbar Feuilles de style CSS Définir des feuilles de style