08 be2009 É ieS Bi Uiveiédei eShia Ai

Liene2 MASS

Sébastien Verel

vereli3s.unie.fr

www.i3s.unie.fr/

∼

ÉquipeSoBi-UniversitédeNieSophia-Antipolis

08 otobre 2009

Objetifs de la séane 4

1

Savoirplae le ode ssdansunepage web

2

Connaitreles réglesgénérales d'ériture

3

Connaitreles séleteursd'élément, de lasse,d'identiant et

ontextuel.

4

savoir déniruneouleur defond

5

savoir déniret positionnerune imagede fond

6

onnaitre les propriétés de miseen formedutexte

Plan

1

Introduire duode de style

2

Séleteurs

3

Couleurs et imagede fond

4

Propriétés destextes

Création de feuille de style

langageCSS (Casading StyleSheets)

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

Avantages:

Séparer leontenu (le fond) etlaprésentation(laforme)

Allégerles pagesen entralisant lesinformationsde

présentation

Failiterde maintientet d'évolution

Rihesse réative

Régles générales de délaration de style

séleteur:déterminel'élément (etondition) sur lequel

s'applique lestyle

délarationde propriétés :entre aolades

propriété h1

Sélecteur

{ color : red ; background−color : blue ; }

propriété

synthaxe onrète en rouge

élémentsgrammatiauxen grasitalique

Assoier un style : dans l'élément

<

>

Dénir les styles de lapage web orrespondante

Cen'est pas laméthode quisépareleplus lefondet laforme

Impossibled'ériredesommentaires

<style type="text/ss">

h1 { olor : red ; bakground-olor : yellow ; }

</style>

f. ex03/baliseStyle.html

Assoier un style : hier séparé

Utiliserl'élément

<

>

Permetde hanger de toutesles pagesweb quiutiliserontle

même hierde style

attributmedia :sreen

|

|

|

|

|

|

all

|

<link rel="stylesheet"

type="text/ss"

href="monStyle.ss"

media="sreen"

title="mon style unique" />

f. ex03/baliseLink.html

Assoier un style : un peu les deux

Utiliserl'élément

<

>

Fatoriserle styledesmédiaéquivalents

<style type="text/ss">

import url(monStyle.ss) all;

import url(monStylePrint.ss) print;

</style>

f. ex03/baliseStyleImport.html

Assoier un style : attribut style

diretementdanslabasile de l'élément

<p style="bakground-olor:white">

vraiment beurk, vraiment beurk.

</p>

2 nouveaux éléments

Element div

L'élément divpermetde déouperune partiede lapage.

Balise de type blok.

<div>

Permet de diviser la page

</div>

Element span

L'élément spanpermetde déoperunepartied'uneligne.Balisede

type line.

La vie est <span>belle</span>. N'est-e pas ?

Séleteurs

Manière multiplede séletion d'un élément

Cettemultipliitépermet de répondre àtousles besoins

Mais existenede régles(à apprendre) de séletion

Séletion d'élément

nom de labalise orrespondante

p { olor: blue ; bakground-olor: red ; }

plusieurs éléments:

p { olor: red ; bakground-olor: yellow ; }

h1 { olor: red ; bakground-olor: yellow ; }

équivalent à

p, h1 { olor: red ; bakground-olor: yellow ; }

f. ex03/monStyleAnglais.ss

f. ex03/monStyleAnglais2.ss

Séletion d'éléments

plusieurs éléments:

p, h1 { olor: red ; bakground-olor: yellow ; }

h1 { margin: 40px; }

équivalent à:

p { olor: red ; bakground-olor: yellow ; }

h1 { olor: red ; bakground-olor: yellow ; margin: 40px; }

f. ex03/monStyleAnglais3.ss

Séleteur universel

* { olor: red ; bakground-olor: yellow ; }

2 nouveaux attributs

Attributde lasse

permetde dénir unelasse(ensemble) d'éléments.

Plusieurs élémentspeuvantapparteniràlamême lasse.

<div lass="information">

La vie est belle. N'est-e pas ?

</div>

Attributd'identiation (unique)

permetd'identier de manièreunique unélément.

<div lass="information" id="vie">

La vie est belle. N'est-e pas ?

</div>

Séleteur de lasse

Pour séletionnertousles élémentsd'une lasse:

.regle { olor: red ; bakground-olor: yellow ; }

Pour séletionneruntype d'élémentsd'unelasse:

.regle { olor: red ; bakground-olor: yellow ; }

p.regle { olor: blue ; bakground-olor: red ; }

f. ex03/monStyleAnglais4.ss

f. ex03/monStyleAnglais5.ss

Appliquer le style de plusieurs lasses

possibilitéde dénirdespartiesde styledanshaque lasse

élément:appartientàplusieurs lasses,ombinaison desstyles

.regle { olor: red ; bakground-olor: yellow ; }

.rule { font-style: itali ; }

<span lass="rule regle">Couleurs &agrave; tous les &eaute;tages.</span>

f. ex03/doubleStyle.html

Séleteur d'identiant

Pour séletionnerunélémentpartiulieridentié :

#regleOr { olor: yellow ; bakground-olor: blue ; }

f. ex03/monStyleAnglais7.ss

Séletion ontextuel

Séleteurparent-enfantdiret :

div > ol { olor: white ; bakground-olor: red ; }

Séleteurparent-desendant :

div ol { olor: white ; bakground-olor: red ; }

ou enore :

div ol li ul li { olor: white ; bakground-olor: red ; }

ex03/seletionHierarhique.html

Séletion ontextuel

Séleteurd'élémentsadjaents ("frères"):

li + li + li { olor: white ; bakground-olor: red ; }

Codiation

3 possibilités:

motlé :blak,yellow, pink,et.

ode hexadéimal:unode hexa pour haqueomposante

RGBentre00etFF(nombresde0à256)préèderd'un dièse

♯

fontion rgb(Red,Green,Blue):valeur entre0 et255 ou

pourentage

%

Couleur d'avant plan

ouleurdutexteET ouleurdesbordures

propriété :olor

Couleur de fond

ouleurdufond

propriété :bakground-olor

aepte :transparent

Image de fond

expo03/Untitled-2.htmlde StrangiThomas

Compléments

Lorsquelavaleur est no-repeat :pardéfaut en haut àgauhe.

la propriété'bakground-position'permetde modierela:

positionnementhorizontal:pourent

|

|

|

|

enter

pos vertial(faultatif) :pourent

|

|

|

|

enter

ilest possibled'utiliserunseulmot lépour les2

positionnements:left,enter,right, bottom,top

propriété nonhéritée :ilfaututiliserinherit

Style de texte

polies

tailledespolies

graisse

style

interlignes

alignementet espaement

Polies

Polie

font-family :plusieurs nomspossibleséparépardesvirgules.

nom générique :serif,sans-serif,ursive, monospae,fantasy

Taille

font-size :long

|

%

Type de polie

font-style:normal

|

|

|

Graisse

font-weight :bold

|

|

|

|

Alignement et espaement

Alignement

text-align :left

|

|

|

|

Indentation

text-indent :long

|

% |

Interligne

line-height:long

|

% |

|

Alignement et espaement

Interligne

line-height:long

|

% |

|

espaement entre lettres

letter-spaing :long

|

|

espaement entre mots

word-spaing :long

|

|

Couleur et.

mise en formedeslettres

text-transform:none

|

|

|

|

deoration

text-deoration:none

|

|

|

ouleur dutexte

olor:une ouleur