25ee
be2009 É ieS Bi Uiveiédei eShia Ai

Liene 3informatique

Sébastien Verel

vereli3s.unie.fr

www.i3s.unie.fr/

∼

ÉquipeSoBi-UniversitédeNieSophia-Antipolis

25 septembre 2009

Objetifs de la séane 3

1

Savoirplae le ode ssdansunepage web

2

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

3

Connaitretousles séleteurs

4

onnaitre les réglesde asdade etd'héritage

5

savoir déniruneouleur d'avant-lan

6

savoir déniruneouleur defond

7

savoir déniret positionnerune imagede fond

8

onnaitre les propriétés de miseen formedutexte

Plan

1

Introdution

2

Séleteurs

3

Couleurs et imagede fond

4

Textes

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

Rigueur de oneptiondespages

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

Rappel : Element

<

>

Elément

<

>

<base>,<link>,<meta>,<sript>,<style>et<title>

<

>

<

/ >

douments :

rel:nomde larelation:stylesheet,hapter,et.

type:typedu ontenuduhier:text/ss,text/javasript,

text/html,et.

href:urlabsolue ourelativedudoument

Rappel : En-tête du doument

<

/ >

navigateurs, moteurde reherhe.

2 formes possibles:

<meta name="nom" ontent="val" />

<meta http-equiv="nom" ontent="val" />

Avename :

<meta name="author" ontent="verel" />

<meta name="keywords" ontent="genial super mega top" />

<meta name="Desription" ontent="ours programmation web"/>

Avehttp-equiv :

<meta http-equiv="Content-type"

ontent="text/html;harset=iso -8859 -1" />

<meta http-equiv="refresh"

Rappel : En-tête du doument

<

>

<sript type="text/javasript">

<!--

-->

</sript>

<sript type="text/javasript" sr="ode.js">

</sript>

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"

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>

Quelques propriétés de CSS

Catégories despropriétés :

ouleuret fond:

olor, bakground

Font :

font,font-size,font-weight,et.

Texte

...

f. http://www.w3.org/TR/CSS2/propidx.html

Méane ertainsnavigateursn'interprètentpas toujoursles hoses

de lamêmefaçon

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 ; }

Séleteur de lasse

Pour séletionnertousles élémentsd'une lasse(abstraite):

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

Pour séletionnerdes élémentspartiuliersd'une lasse:

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

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

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életeur d'attributs

Séletionner unélémentpossèdantun attribut:

h2[title℄ { olor: blak ; bakground-olor: green; }

Séletionner unélémentpossédantplusieurs attributs:

h2[title℄[id℄ { olor: blak ; bakground-olor: green; }

Séleteur d'attributs

Séletionner unélémentpossédant unattributde valeur

partiulière:

h2[title="vetement"℄ { olor: blak ; bakground-olor: green; }

séletionnel'élément :

<h2 title="vetement">r&egrave;gle vestimentaire 2</h2>

Séletionner unélémentpossédant unattributontenant au

moinsunevaleur partiulière:

h2[title ~= "vetement"℄ { olor: blak ; bakground-olor: green; }

séletionnel'élément :

<h2 title="vetement 2">r&egrave;gle vestimentaire 2</h2>

Séletionner unélémentpossédant unattributommençant

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 ; }

Pseudo-lasses et pseudo-éléments

Séleteurs de partiede douments nonidentiable parla hierarhie

parex. :premièreligne, premieraratère,déplaement de urseur,

et.

Pseudo-lasses appliables aux liens

:link,séleteurde lien nonenore visité

:visited,séleteurde lien déjàvu, après retoursurlapage

d'origine

a:link { olor: green ; }

a:visited { olor: yellow ; }

Pseudo-lasses dynamiques

lasses existantsseulement aumoment de l'ationduvisiteur

:fous ,pseudo-lasselorsdufous(lorsquele navigateurle

veut bien)

:hover ,pseudo-lasselors dusurvold'élémentvisible

:ative ,pseudo-lasse lorsdulik de l'utilisateur

Pseudo-éléments

s'applique àunepartieduontenu

:rst-letter,pseudo-élément de lapremièrelettredu ontenu

:rst-line,pseudo-élémentde lapremièreligneduontenu

:before ,pseudo-élémentquipermetd'insérerunontenu de

styledonné avantle débutdu ontenu

:after ,pseudo-élémentquipermet d'insérerunontenu de

styledonné après leontenu

p:first-letter { font-size: 300% ; olor: red ; }

p:first-line { font-size: 140% ; }

Délaration!important

pourmarquerlapriorité:

* { olor: blak !important ; bakground-olor: yellow ; }

div { olor: blue ; bakground-olor: white ; }

Casade et héritage

Permet d'établirles régles d'appliationde stylesurles éléments.

Plusieurs ateurs danslaréalisationd'un style:

auteur (onepteur)

utilisateur

navigateur

Logiielle CSS seharge de résoudreles onits :

diérentes opérationspermettantd'attribuer unstyleàun

élément:régles de asades

Séletion selon le media

Seul le styledumediaspéié est utilisé

media indiqué dansles balises

<

>

<

>

sreen, print, projetion, aural,braille,handheld, tty,tv,all

Séletion selon le réateur du style

ladélaration!important.

Prioritélaplusimportanteà lamoinsimportante:

stylesutilisateurladélaratn!important

stylesonepteur délarés!important

stylesonepteur nondélarés!important

stylesvisiteurnondélarés!important

Séletion par spéiité

élaborationde laspéité:nombre de 4hires abd

a

=

=

=

:nombre de lasses,de pseudo-lasses etde séleteurs

d'attributsprésentdansle séleteur

d :nombred'élémentsXHTML présentdansleséleteur

le stylede plusgrande spéiités'applique

séletion par ordre d'apparition

dans leas où auunritèrene s'applique.

le dernierapparudans leode s'applique

si plusieurshiers sontimportés,ledernier s'appliqueen as

de onit.

Héritage

Regle d'héritage

élémentenfant possède lesmêmesstylesque l'élémentparent quile

ontient.

Il est possibled'expliiter l'héritageparladélarationde inherit

bien qu'ilest appliqueràungrand nombrede propriété.

HTML / XHTML

en HMTL:beauoupdebalise

<

>

en XHTML :disparu, entralisédansla feuillede style

quelques onseilpourles futurs designers:

attention àl'abus de ouleurs

reherher l'harmonie

réehiràla qualitédesouleurs surle mediaible

Codiation

3 possibilités:

motlé :blak,yellow, et.

ode hexadéimal:unode hexa pour haqueomposante

RGB entre0 et FFpréèder d'un dièse

♯

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

pourentage

%

Couleur d'avant plan

ouleurdutexteET ouleurdesbordures

propriété :olor

aepte :inherit

Couleur de fond

ouleurdufond

propriété :bakground-olor

aepte :inherit

aepte :transparent

Image de fond

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

Alignement et espaement

Alignement

text-align :left

|

|

|

|

Indentation

text-indent :long

|

% |

espaement entre lettres

letter-spaing :long

|

|

Conseils

les propriétés n'ont pastout àfaitle mêmeeet selonle

navigateur, ilfauttester...

Objetifs de la séane 3

1

Savoirplae le ode ssdansunepage web

2

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

3

Connaitretousles séleteurs

4

onnaitre les réglesde asdade etd'héritage

5

savoir déniruneouleur d'avant-lan

6

savoir déniruneouleur defond

7

savoir déniret positionnerune imagede fond

8

onnaitre les propriétés de miseen formedutexte