CSS

Vincent Robert - Ingénieurs 2000

Cascading Style Sheets

Feuilles de styles en cascade

Qu’est-ce que c’est ?

Développé par le W3C en 1996

Langage graphique associé à XML et HTML

Simplifier la conception de page web avec un principe simple :

SÉPARER CONTENU ET PRÉSENTATION

Qu’est-ce que c’est ?

Développé par le W3C depuis 1994

Langage graphique associé à XML et HTML

Simplifier la conception de page web avec un principe simple :

SÉPARER CONTENU ET PRÉSENTATION

Principe

Dans un fichier externe, associer des propriétés graphiques aux éléments HTML

<p><i><font color="#f00"></font></i></p>

est remplacé par la règle :

p

{

font-color: #f00;

font-style: italic;

}

Les avantages

Séparation des métiers

Homogénéité graphique

Accessibilité accrue

Facilité de maintenance

Gain de bande passante

Meilleure indexation des moteurs de recherche

Les inconvénients

Support limité dans les vieux navigateurs (Internet Explorer ?)

Euh...

Utiliser une feuille de style

Il suffit d'ajouter au fichier HTML existant la ligne suivante :

<link rel="stylesheet"	type="text/css" title="Ma feuille" href="style.css"/>

Les principaux sélécteurs

E

Tous les éléments E

.class

Tous les éléments de classe « class »

#id

L'élément avec l'id « id »

E F

Tous les éléments F dans un élément E

E,F

Tous les éléments E et les élements F

Quelques propriétés

margin

Espacement autour de l'élément

padding

Espacement à l'intérieur de l'élément

border

Bordures autour de l'élément

background

Arrière-plan de l'élément

color

Couleur du texte de l'élément

width/height

Taille des éléments boites

Les textes et les boites

2 types de formatage

Les boites (block) sont dimensionnables, on peut les assimiler à des conteneurs

<p>, <div>, ...

Les textes (inline) sont des éléments qui restent dans le fil du texte.

<span>, <em>, <q>, ...

Un petit exemple

Différences avec XSLT

Selon le W3C, XSLT et CSS ont des buts différents :

CSS fonctionne avec XML et HTML, XSLT ne fonctionne qu'avec XML

CSS est seulement graphique, XSLT peut transformer l'arbre XML.

CSS et XSLT cohabitent parfaitement :)

Pour le futur...

Toutes les pages web utilisent les CSS

Les navigateurs gèrent d'autres médias

Clients riches en CSS

Le futur ?

CssZenGarden, une démonstration graphique

Lycos, Wired, ESPN, Yahoo y passent

Media audio ou presentation dans Opera

Gestion des thèmes dans Mozilla

CSS

乩歫椠䱡畳椀㸲㻸ꔿ㌋䬮ꍰ䞮誀圇짗꾬钒붤鏊꣊㥊揤鞁

2004-11-16T08:15:16