Liene 3informatique
Sébastien Verel
vereli3s.unie.fr
www.i3s.unie.fr/
∼
verelÉquipeSoBi-UniversitédeNieSophia-Antipolis
1 otobre 2009
Objetifs de la séane 4
1
onnaitre les propriétés de miseen formedutexte
2
onnaitre lemodèlede boîte
3
savoir réglerlespropriétés desboîtes
4
Connaitretousles positionnementspossibles
5
Savoironevoir unepage lassique (menu,et.)
6
Connaitreles stylesdeslistes
Question prinipaledujour :
Comment disposerunontenu?
Plan
1
Textes
2
Modèlede Boîte
3
Dimensionnnement etposition
4
Styledeslistes
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
|
itali|
oblique|
inheritGraisse
Alignement et espaement
Alignement
text-align :left
|
enter|
right|
justify|
inheritIndentation
text-indent :long
|
%
|
inheritInterligne
line-height:long
|
%
|
nombre(oef. mult.)|
inheritAlignement et espaement
Interligne
line-height:long
|
%
|
nombre(oef. mult.)|
inheritespaement entre lettres
letter-spaing :long
|
normal|
inheritespaement entre mots
word-spaing :long
|
normal|
inheritCouleur et.
mise en formedeslettres
text-transform:none
|
apitalize|
upperase|
lowerase|
inheritdeoration
text-deoration:none
|
underline|
overline|
line-throughouleur dutexte
olor:une ouleur
Modèle de boîte
haque élémentde typeblo ou lignepossède sa boîte
onditionnelasurfae de l'élément
boîte: zoneretangulaire
Informationduw3:
http://www.w3.org/TR/CSS21/box.html
La boîte
Contenu de l’élément width
height
Padding (espacement)
Border (bordure)
Margin (marge)
Bordure
Stylede bordure
border-style:inherit
|
none|
hidden|
style (1,2,3 ou 4)le styleestopiésur labordureopposée
style :dotted, dashed,solid,inset, double,groove, ridge,outset.
Détailléen :border-top-style, border-right-style,
border-bottom-style,border-left-style
f. ex04/bordure.html
Bordure
Largeur
border-width :inherit
|
thin|
medium|
thik|
longueur(1, 2,3ou 4)
opié surlabordureopposée
f. ex04/mystere1.html
Couleur
border-olor:inherit
|
trnsparent|
ouleur (1,2,3 ou4)opié surlabordureopposée
f. ex04/mystere2.html
Dénition globale
border:largeurstyleouleur
|
inheritBordure : globalement
Dénition globale
border:largeurstyleouleur
|
inheritMarges
margin:
% |
longueur|
auto|
inherit(de 1à 4)%
:pourentagede l'élément parentauto :de manièreautomatique en fontiondesautres
informations
Naturellementpeut-êtredétaillé en :margin-top,margin-right,
margin-bottom,margin-left
Espaement
padding :
% |
longueur|
inherit(de1 à4)%
:pourentagede l'élément parentNaturellementpeut-êtredétaillé en :padding-top, padding-right,
padding-bottom,padding-left
Séparation ontenu et mise en page
Frames(que vousn'avez pas vu): mauvaisréférenement
Tableaux:struture tropomplexe,nuit àlalisibilité etàla
maintenane
useCSS!use CSS!:dimensionnement /positionnement
CSS :entralisationde lamise en page
Dimensionnement
width :long
| % |
auto|
inheritlargeur duontenu de l'élément
height:long
| % |
auto|
inheritlongueur duontenu de l'élément
Remarque :
le
%
est en fontionde lataillede l'élémentparent.auto :permetdesalulsen fontiondesautres dimensions
Problème de hauteur
body { font-family: Arial sans-serif;
font-size: 16px; }
div { width: 80% ;
height: 500px ;
bakground-olor: #DDD; }
h1 { width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
height: 150px ;
bakground-olor: #BBB ; }
f. ex04/dimension.html
Solution ave Auto
body { font-family: Arial sans-serif;
font-size: 16px; }
div { width: 80% ;
height: auto ;
bakground-olor: #DDD; }
h1 { width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
height: auto ;
bakground-olor: #BBB ; }
Solution ave auto
mise en page peu préise
ontenu issud'unebase dedonnée potentiellement grande
(imaginer unepage d'email)
Solution ave overow
overow :visible
|
hidden|
sroll|
auto|
inheritvisible :ontenu débordant est ahé
hidden :ontenu débrodant est ahé
sroll:barre de délementapparente en permanene
auto :barre de délementsi néessaire
f. ex04/dimensionOverflow.ss
Solution ave overow
div {
width: 80% ;
height: auto ;
bakground-olor: #AAD;
}
h1 {
width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ;
}
p {
width: 70% ;
height: 150px ;
overflow: auto ;
bakground-olor: #BBB ;
}
Plus de souplesse
Dimensions ajustéesentre deux bornes limites:
Hauteur
min-height :longueur
| % |
inheritmax-height :longueur
| % |
none|
inheritLargeur
min-width :longueur
| % |
inheritmax-width :longueur
| % |
none|
inheritf. ex04/dimensionMinMax.ss
Plus de souplesse
div { width: 80% ;
min-height: 500px ;
max-height: 650px ;
overflow: auto ;
bakground-olor: #AAD; }
h1 { width: 80% ;
min-height: 50px ;
max-height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
min-height: 80px ;
max-height: 150px ;
overflow: auto ;
bakground-olor: #BBB ; }
Rendu des éléments
Rendu deséléments
éléments :assoiésà uneprésentationspéiquepardéfaut
display :none
|
inline|
blok|
list-item|
table|
inline-table|
...Visibilité
visibility :visible
|
hidden|
ollapse|
inheritPositionnements
positionnementen ux
positionnementottant
positionnnementabsolu
positionnementxé
Positionnement en ux normal
Lorsqu'auun positonnementn'est spéié
ordredanslequelapparaissemnt leséléments danslexhtml
struture :
typeblose situeendessousdel'élémentpréédent
typelignesesitueàtédel'élément préédent
marges internes(padding)et externe(margin):
permettent d'espaeret de positionnerhaqueélément
Positionnement ottant
pouréviter deszones videssur ladroite
dispositiondesautres élémentsautour de lui:omparaison
aveliquide
plaementde l'élément en haut de l'élémentparent(à droite
ou àgauhe)
Propriété oat
oat :left
|
right|
none|
inheritExemple positionnement ottant
div#abstrat {
width: 70% ;
min-height: 0px ;
max-height: 500px ;
overflow: auto ;
text-align: justify ;
bakground-olor: #BBB ;
}
img {
float: left;
margin: 10px ;
width: 100px ;
}
p.pdroite {
width: 120px ;
min-height: 0px ;
float: right ;
border: 2px solid red ;
margin: 10px ;
SébastienVerel ProgrammationWeb
Empêher le ottement
dans ertainas,lever lepositionnementottant.
Propriété oat
lear:left
|
right|
both|
none|
inheritf. ex04/flottant2.ss
Positionnnement relatif
emplaement dehaque élémentomme dansle ux normal
puisdéplaement deséléments "relatif"parrapportàla
positionqu'ilsauraitentdû ouper
risquede hevauhement
ordredesélémentsimportants
Positionnnement relatif
Les propriétés
position:relative
left :déalevers ladroite sipositif,vers lagauhesinon.
right:déalevers lagauhe sipositif,vers ladroitesinon.
top :déalevers lebas si positif,vers le hautsinon.
bottom:déalevers le hautsi positif,versle bas sinon.
Les valeurs
pour left,right,top,bottom :long
| % |
auto|
inheritsi lesdeux propriétés omplémentaires"auto" :valuer0
si seulementl'une vaut "auto" :valeurà l'opposéde l'autre
si auunene vaut"auto" :lavaleur danslesens de leture
l'emporte
Positionnement absolu
élémentsorti duux normal
positionnementparrapportà l'élémentparent
oupationpossiblede la mêmezone(gestion avez-index)
ombinaison absoluetottantimpossible
Positionnnement absolu
Les propriétés
position:absolute
left,right,top,bottom:positionparrapportauxbordsparents
Les valeurs
pour left,right,top,bottom :long
| % |
auto|
inheritPositionnement xé
unpeu désué
même méthode quepourabsolusauf posionnementxe en as
de déplaement de fenêtre
Visibilité et ordre d'empilement
Lorsquesuperposition:ordrede positionnement"orthogonal"
àl'éran
le nombrele plusgrandse trouve au dessusde la"pile"
Les valeurs
z-index :nombre
|
auto|
inheritauto :le mêmequeeluidu parent,ordred'apparition dansleode
XHTML
un régal:
onlik="this.style.zIndex++"
Numérotation des listes
Numérotation
list-style-type :type
|
none|
inheritdeimal :1,2,3,...
deimal-leading-zero:01,02,03,...
upper-latinou upper-alpha :A, B, C,...
lower-latin ou lower-alpha :a, b,, ...
upper-roman:I,II, II,IV,...
lower-roman :i,ii, iii,...
lower-greek :
α
,β
,....Position de numérotation
Position
list-style-position:inside
|
outside|
inheritinside: danslamargede retraitde l'item
outside (default):intégrerau textede l'item
Création de ompteur
Création
ounter-reset :
[
identiant N]+ |
none|
inheritidentiant :untexte
N :le"zéro" duompteur
Inrément
ounter-inrement :
[
identiant N]+ |
none|
inheritidentiant :untexteexistant
N :l'inrément
Création de ompteur
Ahage
pseudo-lass :before
ol { ounter-reset: jeux 1998 ; list-style-type : none ; }
ol li:before { ounter-inrement: jeux 4 ; ontent:"Olympiade " ounter(jeux) " : " ; }
Objetifs de la séane 4
1
onnaitre les propriétés de miseen formedutexte
2
onnaitre lemodèlede boîte
3
savoir réglerlespropriétés desboîtes
4
Connaitretousles positionnementspossibles
5
Savoironevoir unepage lassique (menu,et.)
6
Connaitreles stylesdeslistes
Question prinipaledujour :
Comment disposerunontenu?
