daw - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...la notionde boite :...

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/

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/

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......


• <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


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

Notions de réseaux


exemple


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


20px

• ajout d'une marge externe (margin) a l'élément div1

div1 sans marge

20px

div1 avec marge

55


• 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


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


• 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.


Exemple

<body>

<p> <img src="dessin.gif" style="position: absolute;

left: 100px; top: 70px;"> </p>

</body>


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


• 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.


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)


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)


p4p5

• possibilité de rendre invisible des éléments


•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


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


background-color:#EEEEEE;

}

div.contenu {

float:center;


background-color:#FFFFFF;

}

div.pied_page {

clear:both;


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


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


exemple

Au survol

de l’image

de pomme

Le texte

apparait


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

.


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*/


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 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 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.


Nom de

l’animation

Répétition


daw - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...la notionde boite :...

Documents