View
2
Download
0
Category
Preview:
Citation preview
DAWDéveloppement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
Conception de page web statique
2. CSS3
Validation CSS
W3C Validator at http://jigsaw.w3.org/css-validator/
• Tous les navigateurs ne reconnaissent pas les mêmes propriétés CSS et ne les implémentent pas de la même manière. Afin d’avoir le même rendu par tous les navigateurs, ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant.
Les préfixes vendeurs
Les préfixes vendeurs-webkit- → Chrome, Safari, Android
-moz- → Mozilla & Firefox
-o- → Opera
-khtml- → Safari 1.1
-ms- → IE9
-ms-filter → IE8
filter → IE5-7
th{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; }
Propriétés préfixées
Propriété sans préfixe
http://caniuse.com/
http://shouldiprefix.com/
Le modèle de boites
• Le navigateur représente chaque élément comme une boîte.
• La boîte des éléments de type bloc commence sur une nouvelle ligne et prend toute la largeur disponible.
• La boîte des éléments de type inline se comporte comme un mot dans le texte, et sa largeur dépend de son contenu.
• flux du document : ordre dans lequel le navigateur affiche ces boîtes.• flux normal (par défaut)
• un élément père est un conteneur
• un élément fils s'affiche dans son conteneur
• élément bloc• s'affiche en dessous de son frère précédent.
• occupe toute la largeur disponible dans son conteneur.
• élément en ligne• s'affiche à côté de son frère précédent.
• retour à la ligne quand il n'y a plus de place dans le conteneur.
• flux personnalisé• certaines propriétés CSS permettent de sortir des éléments du flux normal
Flux d’affichage du documentHTML
• exemple de flux normal
NNNNNNoooooouuuuuussssss nnnnnneeeeee ppppppoooooouuuuuuvovovovovovonnnnnnssssss ppppppaaaaaassssss aaaaaafffffffichfichfichfichfichficheeeeeerrrrrr cecececececetttttttttttteeeeee iiiiiimamamamamamaggggggeeeeee ppppppoooooouuuuuurrrrrr llllll’’’’’’iiiiiinnnnnnststststststaaaaaannnnnntttttt......
Flux d’affichage du documentHTML
• <div> et <span> éléments génériques sans information
structurante prédéfinie• utilisés en association avec des feuilles de style CSS ou du Javascript via les attributs id,
class ou style
Flux d’affichage du documentHTML
Remarque
div : balise de type bloc
• peut contenir tous les autres éléments de type
bloc ou en ligne
span : balise de type en ligne (inline)• Ne peut contenir que les éléments en ligne
• Une boîte est composée de 4 parties :• Contenu (contenu de l'élément : texte, image… autres éléments…)
• Marge interne (Padding) :marge entre le contenu et la bordure
• Cadre (Border): une bordure
• Marge externe (Margin): marge entre le cadre et les boîtes matérialisant les
éléments adjacents dans le flux
marge externe
bordure
marge interne
contenu
La notion deboite
• Tous les éléments d'une boîte peuvent être contrôlés par des
propriétés CSS.
marge externebordure
Contenulargeur et
hauteur
width
height
Marge interne
épaisseur
padding
Borduretype, épaisseur
et couleur
border-style
border-width
border-color
Marge externe
épaisseur
margin
Arrière plan
couleur
image
background
margin-right
height
background-color
marge interne padding-top
width
La notion de boite : Propriétés CSS
Hauteur
élément
border-bottom-width
Width + padding-left + padding-right + border-width
Largeur élément
La notion de boite : Propriétés CSS
Notions de réseaux
La notion de boite : Propriétés CSS
exemple
La notion de boite : Propriétés CSS
Box-sizing: permet de ternir compte de la largeur, de la bordure et des
padding
EXEMPLE
• exemple (sans positionnement)
Positionnement des éléments avecCSS
250px
400px 400px
250px 20px20px
30px 30px
• attribution de dimensions aux éléments div1 et p1
ajout de marges
internes (padding)
aux élémentsdiv1 et p1
Positionnement des éléments avecCSS
20px
• ajout d'une marge externe (margin) a l'élément div1
div1 sans marge
20px
div1 avec marge
55
Positionnement des éléments avecCSS
• positionnement relatif
• l'élément est décalé à l'aide des propriétés top, right, left, bottom par
rapport à sa position normale dans le flux courant
40px
50px
Positionnement des éléments avecCSS
EXEMPLE
100px 90px
• positionnement absolu
• sort un élément du flux
• expriment des décalages non plus par rapport à position
théorique (positionnement relatif) mais par rapport à la position
d'un bloc conteneur de référence
Positionnement des éléments avecCSS
Positionnement des éléments avecCSS
• Dans le cas où tous les ancêtres de l'élément positionné en absolu ne sont pas positionnés (static), le navigateur les ignorent tous en rétablissant le positionnement par rapport aux bords de la page.
Positionnement des éléments avecCSS
Exemple
<body>
<p> <img src="dessin.gif" style="position: absolute;
left: 100px; top: 70px;"> </p>
</body>
Positionnement des éléments avecCSS
Positionnement absolu par rapport aux bords du premier ancêtre positionné
Exemple<body>
<p style="position: absolute; top: 40px; left: 100px; background-color: #FFFF99"> du texte : bla bla
<img src="rap.gif" style="position: absolute; left: 80px; top :60px;">
</p>
</body>
Positionnement des éléments avecCSS
Positionnement des éléments avecCSS
• positionnement fixe
• cas particulier du positionnement absolu
• l'élément reste fixe dans la page par rapport à la zone de visualisation (pas de
scroll)
positionnement
absolu
scrolling en
liaisonavec l'élément de référence
positionnement
fixe
pas de scrolling
Positionnement des éléments avecCSS
• En cas de chevauchement entre des éléments , la propriété z-index permet de choisir quel élément va apparaître au dessus de quel autre
• z-index va prendre un nombre en valeur : un nombre plus grand positionnera un élément devant un autre ayant un z-index plus petit.
Positionnement des éléments avecCSS
exemple
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
exemple
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
p4p5
• possibilité de rendre invisible des éléments
Positionnement des éléments avecCSS
•visibility:hidden masque
l'élément mais réserve sa
position et ses dimensions.
L'élément occupe de
l'espace sur la page.
•
p4
• possibilité de rendre invisible des éléments
Positionnement des éléments avecCSS
•display:none l'élément n'est plus du tout affiché.Tout se passe comme si il n'existait pas
div.bandeau {
width:100%; height:20%;
border-style:solid; border-width:2px;
border-color:black;
background-color:#22FF99;
}
div.menu {
float:left;
width:15%; height:80%;
background-color:#EEEEEE;
}
div.contenu {
float:center;
width:75%; height:80%;
background-color:#FFFFFF;
}
div.pied_page {
clear:both;
width:100%; height:20%;
background-color:#33FF99;
}
Mise en page avec CSS
Menu Contenu
Utilisation :
<div class="bandeau">
<h1>bandeau</h1>
</div>
<div class="menu">
<p> Menu</p>
</div>
<div class="contenu">
<p> Contenu </p>
</div>
<div class="pied_page">
<p>pied_page</p>
</div>
bandeau
Pied_page
exemple
La direction: flex-direction
row : organisés sur une ligne (par défaut)
column : organisés sur une colonne
row-reverse : organisés sur une ligne, mais en ordre
inversé
column-reverse : organisés sur une colonne,
mais en ordre inversé
Le retour à la ligne: flex-wrap
nowrap : pas de retour à la ligne (par défaut)
wrap : les éléments vont à la ligne lorsqu'il n'y a
plus la place
wrap-reverse : les éléments vont à la ligne
lorsqu'il n'y a plus la place en sens inverse
justify-content: Pour changer l’alignement,
flex-start : alignés au début (par défaut)
flex-end : alignés à la fin
center : alignés au centre
space-between : les éléments sont étirés
sur tout l'axe (il y a de l'espace entre eux)
space-around : les éléments sont étirés
sur tout l'axe, mais ils laissent aussi de
l'espace sur les extrémités
Agrandir la taille avec flex
.element:nth-child(1){ flex: 2;}
.element:nth-child(2){ flex: 1;}
Les transitions permettent de modifier la valeur
d'une propriété CSS de façon fluide, dans le
temps, créant ainsi une transition entre les
différentes valeurs de la propriété.
Exemple changer progressivement la couleur de
nos textes.
Les transitions avecCSS
Les transitions avecCSS
Pour définir une nouvelle transition animée, il est
nécessaire de préciser au minimum :
•La ou les propriété(s) à changer
•La durée de la transition
•Les conditions de déclenchement de ces
transitions
Propriété color concernée
par la transition
Durée de la transition
La transition sera
effectuée au moment
du survol du lien
Les transitions avecCSS
exemple
Au survol
de l’image
de pomme
Le texte
apparait
Les transitions avecCSS
exemple
Transition-property: précise les propriétés css à
transformer
a { transition-property: color, width; }
Transition-duration: précise le temps que dure la
transition
a { transition-duration: .2s; }
.
Les transitions avecCSS
Transition-delay: précise le temps de début de
l ’animation
a { transition-delay: 2s; }
Transition-timing-animation: indique quel type de
transition on veut voir. D'une certaine façon, cela détermine
quelle est "l'accélération" de l'effet d'animation.
a { transition-timing-duration: ease /*Rapide sur le
début et ralenti sur la fin*/
Les transitions avecCSS
Ces 4 propriètés peuvent être rassemblée en une
seule meta-proprièté avec l’obligation de préciser la
Transition-property et la Transition-duration
.
p{
transition: width 2s ,
background-color 5s;
}
p:hover{
width: 400px;
background-color: red;}
Les transitions avecCSS
Les animations CSS3 sont semblables aux
transitions. La majeure différence entre les deux est
que les animations permettront un contrôle très
précis dans le temps de la valeur que prendront les
différentes propriétés CSS.
Pour créer une animation en CSS, nous avons
besoin de la propriété animation ainsi que la règle
CSS @keyframes qui représentent le déroulement
temporel de l’animation.
Les animations avecCSS
exemple
p {
animation: monanimation 60s;
}
@keyframes monanimation {
0% { color: blue; }
50%{color:green;}
100%{ color: yellow; }
}
Nom de
l’animation
Durée de
l’animation
Temps de
chaque
changement
Les animations avecCSS
Les différentes propriétés d'animation sont :
animation-name: Où on indique le nom de
l'animation à utiliser. (obligatoire)
animation-duration: Où on indique la durée en
milliseconde (ms) ou en seconde (s) de l'animation.
(Obligatoire)
animation-iteration-count: Le nombre de fois que
l'animation doit être effectué. La valeur devra être un
nombre entier ou le mot clé infinite
animation-direction: Définira si l'animation doit
toujours jouer du début à la fin, ou si une fois rendu
à la fin, elle doit refaire l'animation en sens inverse.
Les animations avecCSS
Nom de
l’animation
Répétition
Les animations avecCSS
Recommended