Affichage des éléments HTML CSS flux du documentlig-membres.imag.fr/.../pdf/AI/PLAI_04_CSS_partie02.pdf · 2019. 10. 14. · CSS • chaque élément HTML considéré comme une

CSS• chaque élément HTML considéré comme une boîte rectangulaire.

• 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

38

Affichage des éléments HTMLflux du document

(c) UGA-2018 Philippe GENOUD

CSS• exemple de flux normal

39



CSS• et é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

40



div : balise de type bloc zone rectangulaire qui ne peut être répartie sur plusieurs lignes peut contenir tous les autres éléments de type bloc ou en ligne

span : balise de type en ligne (inline) s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes peut contenir tous les autres éléments en ligne

CSS

41

Notion de boîteparties constituantes

marge externe

marge interne

bordure


• boîte rectangulaire matérialisant un élément composée de 3 parties :– son contenu (contenu de l'élément : texte, image… autres éléments…)

– un cadre

• une bordure

• un marge interne (marge entre le contenu et la bordure)

– une marge externe

• marge entre le cadre et les boîtes matérialisant les éléments adjacents dans le flux

contenu

CSS

42

Notion de boîtepropriétés CSS

marginwidth

height

background


• La taille du contenu, le cadre et la marge externe d'une boîte peuvent être contrôlés par des propriétés CSS.

padding border-style

border-width

border-color

marge externebordure

largeur ethauteur

épaisseurtype, épaisseur

et couleurépaisseur

Contenu Marge interne Bordure Marge externe

Arrière plan

couleurimage

margin-right

height

background-color

marge interne

contenu

padding-top

width

border-width-bottom

CSS• dimensions d'une boîte induites par son contenu + trois périmètres

(margin, border , padding).

• margin, border, padding pas obligatoires– valeurs par défaut

• 0 pour éléments en ligne et

• border = 0, margin et padding dépendent du navigateur pour les éléments bloc fixer dans les feuilles de style CSS pour rendu indépendant du navigateur

43

Notion de boîtedimensions et attributs par défaut


marge externebordure

margin-right

height

background-color

marge interne

contenu

padding-top

width

border-width-bottom

CSS

• Bordures et arrière plan

– Possibilité d'entourer les éléments et de les doter d'un arrière-plan (couleur, image)

– Propriétés• border-style style

• border-width épaisseur

• border-color couleur

• background-color couleur arrière plan

• background-image image d'arrière plan

44

Bordures et arrière-planintroduction

applicable à tous les bordsou de chaque côté


CSS• border-style

45

Bordures et arrière-planstyle

• border-style: tous les côtés

• border-style:

• côtés horizontaux

• côtés verticaux

• border-style:

• côté horizontal haut

• côtés verticaux

• côté horizontal bas

• possibilité de spécifier chaque côté

• border-left-style

• border-right-style

• border-top-style

• border-bottom-stylevaleurs possibles


CSS

• border-width

– valeur numérique ex: border-width:5px (5 pixels)

– mots clés

• border-color

– valeur numérique • hexadécimale : #00ffff ou #0ff

• rgb : rgb(0,255,255) ou rgb(0,100%,100%)

• mot clé : cyan

• même règles que pour border-style pour individualiser chaque côté.

46

Bordures et arrière-planépaisseur, couleur


• background-color: valeur• #00ffff, #0ff , rgb(0,255,255), rgb(0,100%,100%) , cyan

• background-image: url(url de l'image)• image locale url(images/logo-ujf.png) – chemin relatif

• image distante url(http://www.monsite.org/images/logo.gif)

– par défaut l'imageest répétée en damier

CSS

47

Bordures et arrière-plancouleur – image arrière-plan

logo_ujf-fond.png


• background-repeat: valeur

• contrôle répétition de l'image d'arrière-plan

CSS

48

Bordures et arrière-planimage arrière-plan

• background-position: valeur1 valeur2

• valeur1 position horizontale par rapport au bord gaucheleft, right ou pourcentage

• valeur2 si présente, position verticale par rapport au bord supérieurtop, bottom ou pourcentage


• Par défaut image d'arrière-plan attachée à son élément– se déplace avec lui lors d'un scroll

• background-attachment: fixed

– attache l'image à la fenêtre.

CSS

49

Bordures et arrière-planimage arrière-plan


CSS

• exemple (sans positionnement)

50

Positionnement des éléments


Par défaut un élément bloc (block) débute sur une nouvelle ligne et utilise la largeur maximale disponible

Par défaut un élément en-ligne (in line) ne débute pas sur une nouvelle ligne et utilise la largeur nécessaire

Ce comportement est défini par la propriété display (valeurs: inline, block, inline-block, none….)

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_listhttp://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list

CSS

51

250px

400px

400px

250px 20px20px

30px 30px


attribution de dimensions aux éléments div1 et p1

ajout de marges internes (padding) aux éléments div1et p1


CSS

52


20px

20px


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

div1 sans marge

div1 avec marge

CSS

53

Positionnement des élémentspositionnement relatif

50px

• 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 l'élément peut prendre place au dessus de ses éléments frères.

– n'affecte pas les boites qui l'entourent


40px

CSS

54

Positionnement des élémentspositionnement absolu

100px 90px

• positionnement absolu

– sort un élément du flux

– l'élément ne participe plus à la position de ses frères

– positionnement à l'aide des propriétés top, right, left, bottom• 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

• boite conteneur de référence : le premier élément ancêtre positionné (relatif, absolu ou fixed)(élément toujours considéré comme positionné)

tout élément positionné en absolu est considéré de type bloc=> éléments en ligne peuvent ainsi recevoir des dimensions et bordures


CSS

55

Positionnement des élémentspositionnement fixe

• 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 deréférence

positionnement fixe

pas de scrolling

CSS

56

Positionnement des élémentspositionnement flottant

• positionnement flottant1. 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 leconteneur prennent place autour de lui.

positionnement normal (flux)

positionnement en flottant


positionnement flottant (right)

CSS

57



p3p2

p4

p5

p1

• possibilité de placer des blocs flottants côte à côte

CSS

58



p3p2

p4

p5

p1

• clear permet d'interdire le voisinage avec un élément flottant (à droite, à gauche ou des deux côtés).

pas d'élementflottant à droite

CSS

59



p3p2

p4

p5

p1

• clear permet d'interdire le voisinage avec un élément flottant (à droite, à gauche ou des deux côtés).

pas d'élementflottant ni à droite ni

à gauche

css• En utilisant les propriétés float et clear possibilité de définir des grilles de boites remplissant

automatiquement la largeur de l’écran

(c) UGA-2018 Philippe GENOUD 60

display: inline-block

http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old

http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old

css• Possible d’obtenir facilement le même effet avec la propriété display:inline-block.


display: inline-block

http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block

• Les éléments inline-block se comportent comme des éléments en ligne mais peuvent avoir une largeur et hauteur.

http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block

CSS

62



p3

p2

p4p5

p1

• possibilité de faire flotter des éléments en ligne.

+

?

CSS

63



p3

p2

p4p5

p1

• possibilité de faire flotter des éléments en ligne.

+

• tout élément flottant est considéré de type bloc• les éléments en ligne peuvent alors recevoir bordures et dimensions

CSS

64

Positionnement des élémentsAfficher et masquer des éléments


p3

p2

p4p5

p1

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

• autres valeurs : visible, collapse (pour tables), inherit

CSS

65

Positionnement des élémentsAfficher et masquer des éléments


p3

p2

p4

p5

p1

• possibilité de retirer un élément de l'affichage

• display:none l'élément n'est plus du tout affiché. Tout se passe comme si il n'existait pas

CSS

66


• positionnement flottant

– autre exemple.

positionnement en fluxpositionnement en flottant


CSS

67

Positionnement des élémentsFlex boxes

• positionnement flottant complexe à maîtriser

• Boites flexibles (flex boxes ou flexs) un nouveau mode de positionnement (layout) des éléments introduits avec CSS3.– amélioration par rapport au modèle de bloc

– comportement plus prévisible pour prise en compte de tailles différentes d'affichage.


une norme récente mais largement anticipée par les navigateurs modernes

https://www.w3.org/TR/css-flexbox-1/


CSS• Modèle de boîte flexible – flex box

• 4 caractéristiques principales– Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non,

– Alignements et centrages horizontaux et verticaux, justifiés, répartis,

– Réorganisation des éléments indépendamment de l’ordre du flux (DOM),

– Gestion des espaces disponibles (fluidité).


Positionnement des élémentsFlex boxes

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/


flex container : n’importe quel élément HTML doté de la déclaration display: flex; ou display: inline-flex;

flex items: enfants d'un flex container.le type "flex-item" est item est implicite, inutile de déclarer quoi que ce soit

A B C

Eléments "flex-item" ne sont plus considérés comme des éléments classiques (“bloc” “inline”) mais sont par défaut distribués horizontalement dans leur conteneur flex.

les propriétés de positionnement "classiques" (display*, float …) sans effet sur les éléments flex-items.

*mis à part diplay:none;

CSSPositionnement des éléments

Flex boxes




Flex boxes



flex-direction: (propriété de flex-container)définit la direction (axe principal ou main-axis) selon laquelle les flex-items sont distribués

row

A B C D

row-reverse

D C B A

A

B

C

D

column

D

C

B

A

column-reverse


Flex boxes


flex-wrap (propriété de flex-container)définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur plusieurs lignes

nowrap

A B C E F G

A B C

E F G

wrap

A B C

E F G

wrap-reverse

valeur par défaut :les éléments ne passent pas à la ligne.

les éléments passent à la ligne dans le sens de lecture. les éléments passent à la ligne dans le sens de lecture inverse.


Flex boxes


justify-content (propriété de flex-container)définit l'alignement selon l'axe principalpermet de distribuer l'espace restant libre supplémentaire lorsque les éléments d'une ligne sont soit rigides ou si ils sont flexibles ont atteint leur taille maximale. Permet d'exercer également un certain contrôle sur l'alignement des éléments lorsqu'ils débordent la ligne.

flex-start

A B C

flex-end

A B C

center

A B C

space-between

A B C

space-around

A B C

space-evenly

A B C


Flex boxes


align-items (propriété de flex-container)définit l'alignement selon l'axe secondaire (perpendiculaire à l'axe principal)

AB

CE

AB

CE

A B C E A B C E

flex-start flex-end

center stretch

baseline

lorem idpsum lorem ipsum lorem ipsum lorem idpsum


Flex boxes


align-self (propriété de flex-item)permet de définir un alignement spécifique pour un item particuliervaleurs de cette propriété identiques à celles de align-items

A

B

C

D

#flexContainer {display: flex;flex-direction: column;align-items: flex-start;

}

#elementC {align-self: flex-end;

}


Flex boxes


align-contents: (propriété de flex-container)permet d'aligner les lignes d'un conteneur flex quand il reste de la place disponible selon l'axe secondaire (similaire à justify-content pour l'axe principal)

flex-start

flex-end

center

stretch

space-between

space-around


Flex boxes


order: (propriété d'un flex item)• Par défaut, les éléments flex items sont affichés selon leur ordre d'apparition dans le code source de

la page. La propriété order offre la possibilité de contrôler cet ordre élément par élément. • La valeur de order (0 par défaut) indique l'ordre dans lequel les éléments sont affichés (de plus petit

au plus grand)

A

B

D

C

#flexContainer {display: flex;flex-direction: column;align-items: stretch;

}

order: 0

order: 0

order: 0

order: 0

A

C

B

D

order: 0

order: 0

order: 0

order: 1

#elementB {order: 1;

}

D

A

B

C

order: 0

order: 0

order: 0

order: 1

#elementB {order: 1;

}

#elementD {order: 1;

}


Flex boxes


flex-grow: (propriété d'un flex item)• définit la possibilité pour un flex-item de s'étirer ou non dans l'espace restant du conteneur flex.• par défaut 0, pas d'étirement• si valeur > 0, étirement (la proportion de l'espace restant attribué à aux éléments étirables sera

proportionnelle à la valeur de leur attribut flex-grow)

A B Cflex-grow: 0 flex-grow: 0 flex-grow: 0

#flexContainer {display: flex;

}

Cflex-grow: 1


}#A, #B, #C {

flex-grow: 1;}

BAflex-grow: 1flex-grow: 1

tous les éléments flex-item ont un flex-grow égal à 1, l'espace restant est réparti de manière égale entre tous les items


}#A, #B {

flex-grow: 1;}#B {

flex-grow: 2;}

Cflex-grow: 1

BAflex-grow: 2flex-grow: 1

l'élément B a un flex-grow de 2, l'espace restant est qui lui sera attribué sera (si possible) 2 fois plus grand que celui attribué aux flex-items ayant un valeur de flex-grow égale à 1.


flex-shrink: (propriété d'un flex item)• définit la possibilité pour un flex-item de se contracter si nécessaire.• par défaut 1, pas d'étirement

flex-shrink: (propriété d'un flex item)• définit la possibilité pour un flex-item de se contracter si nécessaire.• par défaut 1, pas d'étirement


Flex boxes

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

• https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexbox

• https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html



Flex boxes

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-backgroundhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexboxhttps://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexboxhttps://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

CSS

• Nécessité d’adapter l’affichage des pages à différents modes de consultation


Responsive Web Design Media queries

• Avec CSS2 et HTML4 il était déjà possible de spécifier un média de destination pour l’application d’une feuille de style

...

Attribut précisant le contexte dans lequel les styles doivent être appliqués

Media queries CSS3 permettent de définir un panel de critères plus précis en fonction de facteurs liés au dispositif d’affichage :

Largeur, hauteur, orientation, résolution…

CSS


Responsive Web Design Media queries

• media query : expression booléenne définissant un ensemble de conditions à réunir pour l’application de styles

@media screen and (min-width: 600px) and (max-width: 1024px) {.bloc {

display:block;clear:both;

}img {

float left;}

}

styles appliqués si l’expression media est vraie

color support de la couleur (bits/pixel)color-index périphérique utilisant une table de couleurs indexéesdevice-aspect-ratio ratio du périphérique de sortie (par exemple 16/9)aspect-ratio ratio de la zone d'affichagedevice-height dimension en hauteur du périphériquedevice-width dimension en largeur du périphériquegrid périphérique bitmap ou grille (ex : lcd)height dimension en hauteur de la zone d'affichagemonochrome périphérique monochrome ou niveaux de gris (bits/pixel)orientation orientation du périphérique (portait ou landscape)resolution résolution du périphérique (en dpi, dppx, ou dpcm)scan type de balayage des téléviseurs (progressive ou interlace)width dimension en largeur de la zone d'affichage

Critères possibles:préfixés par min- ou max- lorsqu’ils acceptent des valeurs numériques

Opérateurs logiques:and, or, not, only

CSS• http://www.w3schools.com/css/

• CSS2 : Pratique du design web, Raphaël Goetter, 3ème edition, Editions Eyrolles, 2009

• Tête la première HTML avec CSS et XHTML, Eric et Elisabeth Freeman, Editions 0'Reilly, 2007

• http://www.csszengarden.com

• http://openweb.eu.org

• http://wiki.media-box.net/documentation/css

• http://www.w3.org/TR/1998/REC-CSS2-19980512/propidx.html

• http://getbootstrap.com/docs/3.3/getting-started/#download

• …


Bibliographie
http://www.w3schools.com/css/http://www.csszengarden.com/http://openweb.eu.org/http://wiki.media-box.net/documentation/csshttp://www.w3.org/TR/1998/REC-CSS2-19980512/propidx.htmlhttp://getbootstrap.com/docs/3.3/getting-started/#download

Documents

Affichage des éléments HTML CSS flux du documentlig-membres.imag.fr/.../pdf/AI/PLAI_04_CSS_partie02.pdf · 2019. 10. 14. · CSS • chaque élément HTML considéré comme une