Feuilles de style : Introduction ■

Historique – issu de Microsoft Word en 1996, – normalisé avec HTML 4.0 sous CSS 1.0 (98) – CSS 2.0 normalisé en Octobre 1998

■

Compatibilité – Internet Explorer 4.0, Netscape 4.0

■

Syntaxe : <style type="text/css">

Feuilles de style : Avantages •

Séparation du contenu et de la mise en forme.

•

Cohésion de la présentation tout au long du site avec les feuilles de style externes.

•

Modifier l'aspect d'une page ou d'un site sans en modifier le contenu.

•

Réduire le temps de chargement des pages.

•

Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à Netscape 4.0.

Feuilles de style : Définitions ■

Feuille de Styles – fixer pour une page Web donnée son style ( titres, texte, image d’arrière-plan, liens, corps, etc…)

■

Feuilles de Styles en Cascade – définir plusieurs styles appliqués selon une priorité choisie par le concepteur

■

Feuilles de Styles Externes (fichiers *css) – étendre ce style à plusieurs pages, voire le site complet

CSS : Style de la page (1) ■

Syntaxe interne à la balise <style> située dans l ’en-tête : balise { propriété de style 1: valeur; propriété de style 2: valeur } H3 { font-family: Arial; font-style: italic }

■

On peut attribuer plusieurs valeurs à une même propriété. H3 {font-family: Arial, Helvetica, sans-serif}

CSS : Style de la page (2) ■

On peut attribuer un même style à plusieurs balises H1, H2, H3 {font-family: Arial; font-style: italic}

■

Les propriétés peuvent elles même être regroupées. P { font: x-large italic bold small-caps serif } font-size font-family font-style font-variant font-weight

CSS : Style de la page (3) ■

Lisibilité

H3 { font-family : Arial; font-size : italic; color : green }

■

Les valeurs peuvent être précédées d'appels à des fonctions comme la fonction url( ) BODY {background: url(image.gif) fixed }

CSS : Style de la page (4) ■

Elles peuvent déclencher des styles sur des événements comme par exemple "A:hover" A:hover { color: #405E81; text-decoration: underline; font-family: Arial, Verdana; }

■

Elles peuvent comporter des directives d'inclusion comme @import.

CSS : Longueurs ■

Valeurs absolues : pt, in, cm, mm, pc.

■

Valeurs relatives : – em (par rapport à la taille de la police), – ex (par rapport à la taille de la lettre x), – px (par rapport à la résolution d'une image en pixel), – % (par rapport à la totalité de l'espace) BODY { font-size: 12pt; text-indent: 3em; }  indentation de 3 x 12 = 36 points

CSS : Couleurs et URL ■ ■ ■

Mots prédéfinies : 16 couleurs. Code RVB précédé de # Fonction rgb( ) : – avec valeurs absolues • rgb(10,20,255)

– avec valeurs relatives • rgb(10%,20%,70%) ■

Fonction url( ) : • BODY { background: url(http://www.ungi.com/caution.gif) }

CSS : Opérations sur les valeurs ■

valeur1 | valeur2 | valeur3 : propriété peut prendre l'une des trois valeurs

■

valeur1 | valeur2 | valeur3 {1,4} : propriété peut prendre l'une des trois valeurs de un à quatre fois.

■

valeur1 || valeur2 || valeur3 : les valeurs valeur1, valeur2 et valeur3 peuvent être présentes simultanément

CSS : Média Valeur all screen tty projection handheld print

Information(s) Pour tous les types Pour tous les moniteurs Type télévision (basse résolution) Type projecteur Type PC de poche (Psion, WinCE, Pilot ...) Pour les imprimantes

braille

Pour les dispositifs de représentation en braille

aural

Pour les synthétiseurs vocaux

CSS : Styles internes à la page ■

Balise interne à l’entête : <style type="text/css">

■

Balise interne au corps de page :

mon titre de page

Ou <STYLE type="text/css">H1 { "font-family: Arial; font-style: italic" }

CSS : Styles externes ■

Style externe déclaré dans l ’entête de la page :

■

Fichier *.css sans balise H2 {font-family: Times New Roman; font-weight: bold; font-size: 18pt;} BODY {background: url(../images/savon.jpg)} …

CSS : notions de classes ■

But : affecter des styles différents à une même balise.

■

Déclarations internes () ou externes (*.css) : – appliquée à une balise : • balise.nom_de_classe { propriété de style: valeur }

– ou non : • .nom_de_classe { propriété de style: valeur } ■

Appel au style ..

CSS : notions d ’identifieurs ■

Les attributs ID fonctionnent exactement comme les attributs classes

■

En vu du DHTML ou XML, la notion d’ID est préférée à la notion de classe.

■

La syntaxe de déclaration est : #nom_de_ID { propriété de style: valeur }

■

La syntaxe d'appel dans la page est : ....

CSS : balises SPAN et DIV ■

■

But : appliquer un effet de style à certains morceaux de paragraphe Syntaxe : <SPAN class=“nom_classe”>texte à styler

❑ But : appliquer un effet de style à plusieurs paragraphes ❑ Syntaxe :

CSS : Positionner avec CSS ■

But : positionner, au pixel près, du texte ou une image avec les feuilles de style (balise de Netscape).

■

La position absolue {position: absolute} à partir de top=0, left=0

■

La position relative {position: relative} se détermine par rapport à d'autres balises de la page.

CSS : Exemple de position absolue

<STYLE type="text/css"> .pub {position: absolute; top: 20px; left: 100px; color: violet; font-size: x-large; font-weight: bold;}

Comment ça marche

CSS : Exemple de position relative

Ce texte est placé à 50 pixels (de la bordure gauche) de la commande DIV (code source HTML de la page) et à 100 pixels du haut de la commande DIV

CSS : Superposer texte sur image

<span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;"> <span style="position: absolute; top: 96px; left: 145px; color: yellow; font-size: x-small; font-weight: bold;"> Van Lancker Luc