DAW Développement Applications Web. Ouadfel Salima Site du cours:

Transcription

1 DAW Développement Applications Web Ouadfel Salima Site du cours:

2 Conception de page web statique 2. CSS3 Validation CSS W3C Validator at

3 Les préfixes vendeurs 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.

4 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; Propriétés préfixées -webkit-border-radius:5px; border-radius:5px; } Propriété sans préfixe

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

6 Flux d affichage du documenthtml 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

7 Flux d affichage du documenthtml exemple de flux normal NNNous ne ppooouuvovovovovovonnnss pas aaaaaafichfichfichfichfichficheeeeeerr cecececececeteeeeee imamamamamamagggggeeeee ppoouur l innnnnnststststststaaaaaannnnnnt.

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

9 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 La notion deboite 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

10 Tous les éléments d'une boîte peuvent être contrôlés par des propriétés CSS. Contenu largeur et hauteur width height Arrière plan La notion de boite : Propriétés CSS couleur image background Marge interne épaisseur padding height Bordure type, épaisseur et couleur border-style border-width border-color marge externe bordure marge interne padding-top Marge externe épaisseur margin margin-right Hauteur élément background-color width border-bottom-width Width + padding-left + padding-right + border-width Largeur élément

11 La notion de boite : Propriétés CSS

12 La notion de boite : Propriétés CSS exemple Notions de réseaux

13 La notion de boite : Propriétés CSS EXEMPLE Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding

14 Positionnement des éléments aveccss exemple (sans positionnement)

15 Positionnement des éléments aveccss attribution de dimensions aux éléments div1 et p1 ajout de marges internes (padding) aux éléments div1 et p1 250px 20px 250px 20px 400px 30px 400px 30px

16 Positionnement des éléments aveccss ajout d'une marge externe (margin) a l'élément div1 div1 sans marge 20px div1 avec marge 20px 55

17 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 EXEMPLE 40px 50px

18 Positionnement des éléments aveccss 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 100px 90px

19 Positionnement des éléments aveccss

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

21 Positionnement des éléments aveccss Exemple <body> <p> <img src="dessin.gif" style="position: absolute; left: 100px; top: 70px;"> </p> </body>

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

23 Positionnement des éléments aveccss

24 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 liaison avec l'élément de référence positionnement fixe pas de scrolling

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

26 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. exemple positionnement flottant (right)

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

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

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

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

31 Positionnement des éléments aveccss possibilité de rendre invisible des éléments p4 visibility:hidden masque l'élément mais réserve sa position et ses dimensions. L'élément occupe de p5 l'espace sur la page.

32 Positionnement des éléments aveccss 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 p4

33 Mise en page avec CSS div.bandeau { width:100%; border-style:solid; border-color:black; background-color:#22ff99; } div.menu { float:left; width:15%; height:20%; border-width:2px; 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; } Menu bandeau Contenu Pied_page 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>

34 exemple

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

36 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

37

38 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

39

40 Agrandir la taille avec flex.element:nth-child(1){ flex: 2;}.element:nth-child(2){ flex: 1;}

41 Les transitions aveccss 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.

42 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

43 Les transitions aveccss 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

44 Les transitions aveccss exemple Au survol de l image de pomme Le texte apparait

45 Les transitions aveccss 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; }

46 Les transitions aveccss 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*/ Transition-delay: précise le temps de début de l animation a { transition-delay: 2s; }

47 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. Les transitions aveccss p{ transition: width 2s, background-color 5s; } p:hover{ width: 400px; background-color: red;}

48 Les animations 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 qui représentent le déroulement temporel de l animation. exemple

49 p { Les animations aveccss animation: monanimation 60s; } Durée de l monanimation { Temps de chaque changement } 0% { color: blue; } 50%{color:green;} 100%{ color: yellow; } Nom de l animation

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

51 Les animations aveccss Nom de l animation Répétition