Le Langage CSS-Interface HTML

Le langage CSS/Interface HTML
1
Comme vous l'avez appris. Le CSS et le HTML sont complmentaires. Le CSS contient toutes les informations
concernants la mise en forme et le document HTML, la donne. Nous allons voir ici comment faire pour indiquer,
dans un document HTML, quel(s) code(s) CSS s'applique(nt). Pour cela, il faudra distinguer les codes s'appliquant :
sur plusieurs pages
sur une seule page
un seul lment
Intgrer une feuille de style externe
C'est la faon de faire la plus courante : dans l'lment <head> on ajoute un lment <link> :
...
<head>
...
<link rel="stylesheet" type="text/css" href="fichier.css" media="screen" />
</head>
...
le fichier CSS est un simple fichier texte qui contient le code CSS qui s'appliquera toute la page. L'utilisation de
cette balise permet trs facilement d'utiliser une feuille de style pour plusieurs documents HTML.
Intgrer du style directement dans la page
Dans le cas o on voudra que le code CSS ne s'applique qu' une page : on pourra l'inclure directement dans le code
HTML.
<html>
<head>
<style type="text/css">
/* Ici le code CSS */
</style>
</head>
...
</html>
Intgrer du style directement dans un lment HTML
Lorqu'un style s'applique un seul lment : plutt que de lui crer une classe, on peut inclure le code dans l'lment
lui-mme grce l'attribut style.
<elt style="prop1: val1; prop2: val2; prop3: val3">
par exemple : un paragraphe en rouge.
<p style="color: red">
le corps du paragraphe
</p>
2
Dfinir une feuille de style selon le mdia
CSS permet de diffrencier la prsentation d'un mme document (X)HTML en fonction du mdia vis, par exemple
pour l'adapter:
l'cran d'ordinateur de bureau
la projection en grand cran
au rendu sur l'cran rduit d'un mobile ou PDA
l'impression papier
au rendu sonore via une synthse vocale
La plupart des proprits CSS peuvent s'appliquer tous les mdias. Cependant, il existe galement des proprits
spcifiques un ou certains mdias. Par exemple:
display permet d'inclure ou d'exclure du rendu un contenu (X)HTML quel que soit le media (y compris donc
une lecture par une synthse vocale).
l'inverse, voice-family permet d'indiquer les familles de voix utilises par une synthse vocale lisant le
contenu du document, tandis que font-family indique les familles de polices de caractres utilises pour son
affichage l'cran ou son impression papier.
Chaque feuille de style devrait donc se limiter aux seules proprits et valeurs adaptes un ou plusieurs mdias, et
tre accompagne de la mention du ou des types de mdia viss. Ceci permettra notamment d'viter le
tlchargement de styles inexploitables ou produisant un rsultat inappropri selon le navigateur et le mdia
concern.
Le ou les types de mdias viss peuvent tre indiqus:
soit lors de la liaison HTML, grce l'attribut media des lments link et style:
<link rel="stylesheet" href="styles.css" media="screen" />
<style type="text/css" media="screen">
@import url(styles.css);
</style>
soit dans la feuille de style elle-mme en prcisant le type de mdia vis par une rgle @import, ou en
regroupant plusieurs styles dans une rgle @media:
@import url(styles.css) screen;
@media screen {
body {...}
p {...}
}
Lorsqu'une feuille de style s'applique une slection de plusieurs mdias, ceux-ci sont alors spars par une virgule:
<link rel="stylesheet" href="styles.css" media="screen, projection, handheld" />
En l'absence de mention du mdia, une feuille de style s'applique par dfaut tous les mdias. La mention du type de
mdia all a le mme effet:
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="global.css" media="all" />
Les principales valeurs de type de mdia sont, pour celles qui sont actuellement supportes par les navigateurs:
all : quel que soit le mdia de sortie (reconnu par tous les navigateurs Web traditionnels)
3
screen : crans d'ordinateur de bureau (reconnu par tous les navigateurs Web traditionnels)
print : pour l'impression papier (reconnu par tous les navigateurs Web traditionnels)
handheld : crans de trs petite taille (mobiles, PDA. Cependant, de nombreux navigateurs pour mobiles
reconnaissent galement le type de mdia screen)
projection : quand le document est projet (Opera en mode plein cran)
Deux autres types de mdias sont plus rarement reconnus par les logiciels de rendu, et sont encore peu exploits
actuellement:
tv : quand le document est affich sur un appareil de type tlvision, caractris par une rsolution moyenne
speech : pour le rendu via une synthse vocale (actuellement disponible dans Opera. Ce type de mdia n'est en
revanche pas pris en compte par les logiciels de lecture d'cran actuels utiliss en particulier par les personnes
handicapes visuelles)
Certains type de mdia restent thoriques, fautes de support par les agents utilisateurs:
tty : si le document est consult par une application en mode texte (utile pour consulter les documentations lors
de l'administration d'un serveur)
braille : lorsque le document sera rendu sur une tablette braille
embossed : pour l'impression braille.
Enfin, l'ancien type de media aural, destin aux synthses vocales, a t dprci et remplac depuis CSS2.1 par
speech.
Les feuilles de styles alternatives
Les feuilles de styles alternatives permettent de proposer un choix de plusieurs rendus diffrents pour un mme
document (X)HTML. Ce choix s'apparente celui d'un thme graphique.
Un lien vers une feuille de style alternative se dfinit comme le lien vers la feuille de style par dfaut. Cependant:
l'attribut rel change et devient alternative stylesheet.
L'attribut title permet de dfinir et de diffrencier chaque prsentation alternative. En prsence de styles
alternatifs, une feuille de styl dnue d'attribut title devient permanente, et s'applique quelque-soit le style
alternatif choisi.
<link rel="alternative stylesheet" href="une_feuille_alternative.css" title="titre" media="screen" />
Un exemple avec trois feuilles alternatives : une simple, par dfaut. Une autre, dominantes noire. Une dernire,
dominantes bleues. Notez galement la premire feuille de style, permanente, qui s'appliquera quelque-soit le style
alternatif choisi:
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="defaut.css" title="Simple, par dfaut" media="screen" />
<link rel="alternative stylesheet" href="noir.css" title="Thme dominantes noire" media="screen" />
<link rel="alternative stylesheet" href="ciel.css" title="Thme bleu" media="screen" />
Cependant, les styles alternatifs ne sont que trs partiellement exploits par les navigateurs graphiques actuels.
4
Un exemple complet
Cet exemple prsente une page d'un site de cours. Cette page est la seule du site qui regroupe les dfinitions.
Certaines sont importantes : elles seront mises en valeurs. Une dfinition est particulire...
Cet exemple a t conu pour exploiter toutes les notions abordes sur cette page.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Une page</title>

<link rel="stylesheet" href="site.css" title="Simple, par dfaut" media="screen" />


<link rel="stylesheet" href="impression.css" media="print" />


<link rel="alternative stylesheet" href="negatif.css" title="Noir sur blanc" media="screen" />

<style type="text/css">
/* Cette page est la seule de site inclure
des dfinitions de la classe importante */
dt.importante
{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Glossaire</h1>
<p>Cette page est une liste de dfinitions, dont certaines sont importantes :</p>
<dl>
<dt>un terme</dt>
<dd>une dfinition</dd>
<dt>un terme</dt>
<dt class="important">un terme important</dt>
<dt>un terme</dt>
<dt>un terme</dt>
<dt class="important">un terme important</dt>
<dt>un terme</dt>
5
<dt>un terme</dt>
<dt>un terme</dt>


<dt style="color: blue">un terme particulier</dt>

<dt>un terme</dt>
</dl>
</body>
</html>
Sources et contributeurs de larticle
6
Sources et contributeurs de larticle
Le langage CSS/Interface HTML Source: http://fr.wikibooks.org/w/index.php?oldid=440752 Contributeurs: Cdang, JM. Philippe, JackPotte, LgD, Sub, Zetud, 2 modifications anonymes
Licence
Creative Commons Attribution-Share Alike 3.0
//creativecommons.org/licenses/by-sa/3.0/

Le Langage CSS-Interface HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Le Langage CSS-Interface HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Le langage CSS/Interface HTML

S-ar putea să vă placă și