Formatage de documents - CSS

(1)

Formatage de documents - CSS

École d’été INSAT Août 2006

(2)

Introduction

• Objectif: fournir un mécanisme pour associer différents styles à un même document

Contenu

Présentations

(3)

Introduction

! Initialement conçues pour être utilisées avec des documents HTML

! Peuvent être utilisées avec des documents XML

! CSS1 ⇒ CSS-2 (media)

! La norme s’adresse

• Aux utilisateurs

• Aux développeurs

(4)

CSS

• Langage de feuilles de style pour documents HTML

• Permet une séparation claire de la structure et du style

=> plus grande indépendance avec le media utilisé.

• Recommandation W3C depuis le 12 mai 1998

Spécification à: http://www.w3.org/TR/REC- CSS2

(5)

Principes

! Feuille de style = ensemble de règles

! Chaque règle spécifie les valeurs que peuvent prendre les propriétés

associées aux éléments du document

– EM { color : red}

– sélecteur {propriété:valeur; propriété:valeur}

(6)

Association des feuilles de style aux documents

! document HTML

• utilisation de l ’attribut style

• <H1 style = “color:blue“>Introduction</H1>

(7)

Association des feuilles de style aux documents

utilisation de l ’élément style pour inclure une feuille de style dans le document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Les feuilles de style CSS</TITLE>

H1 { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Introduction</H1>

</BODY>

</HTML>

(8)

Association des feuilles de style aux documents

Utilisation de l ’élément LINK pour associer une feuille de style au document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Les feuilles de style CSS</TITLE>

<LINK rel="stylesheet" href="cours.css"

type="text/css">

</HEAD>

<BODY>

<H1>Introduction</H1>

...

</BODY>

</HTML>

(9)

Généralités

• Chaque règle est constituée de 2 parties:

-Un qui spécifie les éléments du document auxquels la règle s’applique:

-Une partie déclaration qui spécifie les valeurs des propriétés

H1 { color: blue }

• La partie déclaration peut comporter plusieurs spécifications de valeurs de propriétés; dans ce cas, les spécifications sont séparées par le caractère “;”

(10)

Exemples

• H1 {color:blue; text-align: center}

• H1 { font-weight: bold; font-size: 12pt;

line-height: 14pt; font-family: Helvetica;

font-variant: normal; font-style: normal;

font-stretch: normal; font-size-adjust:

none }

• H1 { font: bold 12pt/14pt Helvetica }

(11)

Propriétés

! Pour chaque propriété, la norme CSS spécifie

• la syntaxe

• une éventuelle valeur par défaut

• les éléments auxquels elle s ’applique

• si elle est héritable

• comment interpréter les pourcentages

• les media pour lesquels elle a un sens

(12)

Exemples de valeurs

! Nombre entier ou réel

! Longueur (unités absolues ou relatives)

! Pourcentage

P {font-size: 12px}

H1 {margin: 0.5in}

P { line-height: 120% } /* 120% de 'font- size' */

(13)

Spécification des couleurs

• Les attributs suivants permettent de contrôler la couleur:

- color pour la couleur du texte;

- background-color pour la couleur du fond;

- background pour un fond texturé ou coloré.

(14)

Présentation du texte

la fonte des caractères:

- font-family ,font-style,font-variant,font-style

- • D'autres attributs permettent de modifier l'apparence du texte:

- text-decoration; text-transform.

• Les attributs suivants permettent de contrôler la présentation des paragraphes:

- text-align, text-indent, lign-height, word-spacing et letter-spacing

(15)

Exemples de valeurs

! Spécification des couleurs

BODY { background:

url("http://www.bg.com/pinkish.gif") }

BODY {color: black; background: white } EM { color: #ff0000 } /* #rrggbb */

EM { color: rgb(255,0,0) } /* integer range 0 - 255 */

EM { color: rgb(100%, 0%, 0%) } /* float range

(16)

Héritage

• En général les propriétés sont héritées du père

• Par exemple EM est bleu dans: H1 { color:

blue } <H1>Le titre <EM>est</EM>

important!</H1>

• Style sur BODY == "style par défaut": BODY { color: black; background: url(texture.gif) white; }

• Exceptions: background, pourcentages...

• Possible de forcer l'héritage: inherit

(17)

Multiplicité des spécifications de style

! Définies par l ’auteur

! Définies par l ’utilisateur

! Définies par l ’application

! de plus, les feuilles de style peuvent être importées

--> règles de résolution de conflits potentiels

(18)

Cascading

! Chaque règle peut être spécifiée comme étant normale ou importante

/* From the user's style sheet */

P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt }

/* From the author's style sheet */

P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

(19)

Résumé

! Règles importées: régles locales > règles importées

! Règles normales: auteur > utilisateur >

application

! Règles importantes: utilisateur > auteur >

application

! Spécification spécifiques > propriétés héritées

! En cas de conflit: la dernière règle spécifiée s

’applique

(20)

Sélecteurs

! Spécifie les éléments auxquels s’appliquent les propriétés

• un élément spécifique

• tous les éléments du document

• les éléments d ’un type donné

• des éléments spécifiés en fonction de leur

emplacement dans la structure logique du document

• les éléments spécifiés en fonction des attributs

• les éléments appartenant à des classes

• pseudo elements

(21)

Sélecteurs

• Spécificité d ’un sélecteur = nombre obtenu par la concaténation de 3

valeurs

• le nombre d ’attributs ID

• le nombre d ’autres attributs ou classes

• le nombre de noms d ’éléments

! Les pseudo-éléments sont ignorés

(22)

L’attribut Class

• Appliquer des déclarations à un groupe d’éléments

• Ex: <P CLASS=citation> Mieux vaut tard que jamais</P>

• Nom de la classe= nom isolé + chiffres+ tirets

(23)

L’attribut ID

• Prescrire des formatage pour des éléments isolés

• # caractérise les ID

• Une seule fois dans le document

(24)

Sélecteur contextuel

H1 EM { color: red } :Affecte uniquement les éléments EM descendants d'un H1

H1 > EM { color: red }: Affecte uniquement les éléments EM fils d'un H1

UL LI { font-size: small } UL UL LI { font-size:

x-small }

– Règle 1: éléments LI ayant au moins un ancêtre UL

– Règle 2: éléments LI ayant au moins deux ancêtres UL

– Conflit: le sélecteur le plus spécifique l'emporte

(25)

Pseudo-classes et pseudo- éléments

• Sélection indépendante de la structure HTML

• Pseudo-classes:

• A:link { color: red } /* unvisited */ A:visited { color: blue } A:active { color: lime } DIV >

P:first-child { text-indent: 0 } :lang(fr) > Q { quotes: '« ' ' »' }

• Pseudo-éléments:

• P:first-line { font-style: small-caps } P:first- letter { font-size: 200% } P.special:before {content: "Special! "}

(26)

Commentaires

Identiques à ceux de C:

• EM { color: red } /* red, really red!! */

(27)

Les unités

• Longueurs:

– relatives: "0.5em", "1ex", "10px"

– absolues: "0.5in", "3cm", "12pt"..

• Pourcentages: "120%"

• Couleurs: "black", "#f00",

"rgb(255,0,0)"...

(28)

Positioning

• flottant

• relatif

• absolu ou fixe

• IMG.icon { float: left; margin-left: 0; } #header { position: fixed;

width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; }

(29)

Et d'avantage...

•

différents types de media pagination (règle @page) feuilles de styles orales curseurs

génération de contenu (compteurs) ...

(30)

Validation CSS

• Feuilles de style valides = garantie de résultats; cas d'erreurs non spécifiés

• Spécification officielle:

http://www.w3.org/TR/REC-CSS2

• Outils et services:

http://jigsaw.w3.org/css-validator/

(31)

Evolution future de CSS

• CSS3 en préparation:

• support pour entêtes, bas de pages, multi-colonnes

• internationalisation: texte vertical et en grille

• ...