Les différents médias pour les feuilles de style (CSS)

Les différents médias

La méthode "link href=…" permet de mettre en place plusieurs feuilles de styles destinées aux différents médias (imprimante, navigateurs de PDA, etc.).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vous documents.

Tous médias confondus

Cette définition vous permettra de mettre en place une feuille de style commune à tous les médias.

</p>
<p>&lt;link href=&quot;general.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;</p>
<p>

Médias visuels sur écran

Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.

<br />
	<br />
	&lt;link href=&quot;ecran.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen, projection&quot;&gt;<br />
	<br />

Médias visuels sur appareils mobiles

Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphone mobiles.

</p>
<p>&lt;link href=&quot;mobile.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot;&gt;</p>
<p>

Média "papier"

Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

</p>
<p>&lt;link href=&quot;impression.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot;&gt;</p>
<p>

Autres méthodes d'appel

Pour clore, précisons enfin que la déclaration n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section de votre page.

</p>
<p>&lt;style type=&quot;text/css&quot;&gt;<br />
	@import url(styles.css) all;<br />
	&lt;/style&gt;</p>
<p>

Vous devrez remplacer styles.css par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer all par le type de média auquel se destine votre feuille de style. Le résultat sera exactement le même que si vous aviez déclaré,

</p>
<p>&lt;link href=&quot;styles.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</p>
<p>

à deux nuances près :

Internet Explorer (version 6 ou inférieures) ne reconnaît pas le type de média avec @import. La feuille de style ne sera ni importée ni appliquée si vous avec précisé un média. Utilisez la formule suivante :
```
<br />
		&lt;style type=&quot;text/css&quot;&gt;@import url(styles.css)&lt;/style&gt;<br />
		
```
si vous voulez que votre déclaration soit reconnue par IE6.

La règle @import permet d'importer une feuille de styles à l'intérieur d'une autre feuille de style. La déclaration aura alors la forme simple suivante : @import url(styles.css). Vous devrez seulement remplacer styles.css par le nom que vous souhaitez donner à votre feuille de style.

{lang: 'fr'}

Pas de post similaire

Mots-clefs :CSS

RyleBlog