CSS Rappel - Dominic Forest

INU3051 - Information et sites Web
13 mars 2015
CSS
Dominic Forest, Ph.D.
École de bibliothéconomie et des sciences de l’information
Université de Montréal
[email protected]
www.dominicforest.me
www.twitter.com/dforest
INU3051 – Information et sites Web
13 mars 2015
Rappel
•  Cascades et gestion des priorités d'attribution
– 
– 
– 
– 
Media
Créateur (!important)
Spécificité
Ordre d'apparition
•  Héritage
•  Unité de longueur et couleurs
•  Modèle CSS des boîtes
•  Bordures, marges et espacements
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
1
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Styles : texte et liens
– 
– 
– 
– 
CSS propose 5 familles de polices génériques
Principes d'ergonomie et d'utilisabilité
Propriété : font-family
Syntaxe :
•  font-family : [[<nom> | <generic>],*] | inherit
•  nom : nom de la police suivi d'une virgule
•  generic : nom de famille générique
–  serif, sans-serif, cursive, monospace, fantasy
•  Exemple : p { font-family: Arial, Helvetica, sans-serif; }
Cascading Style Sheets
•  Taille des polices
–  Propriété : font-size
–  Syntaxe :
•  font-size :<absolue> | <relative> | <longueur> | % | inherit
•  Absolue : xx-small à xx-large
–  Par rapport à l'élément parent ou à la taille par défaut (medium, 16 pixels)
–  Coefficient : 1.2 (1.5 dans CSS 1)
•  Relative : smaller ou larger
–  Par rapport à l'élément parent ou à la taille par défaut (medium, 16 pixels)
–  Coefficient : 1.2
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
2
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Taille des polices
–  Propriété : font-size
–  Syntaxe :
•  font-size :<absolue> | <relative> | <longueur> | % | inherit
•  Longueur : mm, cm, in, px, em, ex, pt, pc
•  % : pourcentage, par rapport à l'élément parent
Cascading Style Sheets
•  Graisse du texte
–  Propriété : font-weight
–  Syntaxe :
•  font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900 | inherit
•  Style des polices
–  Propriété : font-style
–  Syntaxe :
•  font-weight : normal | italic | oblique | inherit
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
3
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Autres propriétés
–  Police
•  font-variant : small-caps | normal | inherit
•  text-transform : uppercase | lowercase | capitalized | none | inherit
•  text-decoration : none | [underline || overline || line-through || blink] | inherit
–  Interligne
•  line-height : normal | <nombre> | <longueur> | % | inherit
–  Alignement
•  text-align : left | center | right | justify | inherit
Cascading Style Sheets
•  Autres propriétés
–  Indentation
•  text-indent : <long> | % | inherit
•  Style des liens
–  Rien de spécifique aux liens dans CSS
–  Pseudo-classes :
•  a:link
•  a:visited
•  a:active
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
4
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Dimensionnement
–  Propriétés : width, height
–  Syntaxe :
•  width : <longueur> | % | auto | inherit
•  height : <longueur> | % | auto | inherit
•  Ajustement contenant/contenu
–  Propriété : overflow
–  Syntaxe :
•  overflow : visible | hidden | scroll | auto | inherit
–  Autres propriétés :
•  min-height, max-height, min-width, max-height, …
Cascading Style Sheets
•  Positionnement
–  Principe sous-jacent : le modèle des boîtes CSS
–  4 grandes catégories de techniques :
• 
• 
• 
• 
Positionnement selon le flux normal (bloc et enligne)
Positionnement flottant
Positionnement absolu
Positionnement fixe
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
5
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Positionnement flottant
– 
– 
– 
– 
XHTML : mise en page selon le flux
Flottement en CSS : positionnement à l'intérieur d'un élément (conteneur)
Propriété : float
Syntaxe :
•  float : left | right | none | inherit
•  Note : propriété applicable à condition de connaitre la hauteur et la largeur de
l'élément
Cascading Style Sheets
•  Positionnement relatif
–  Principe : lecture du flux normal puis déplacement des éléments dont le
positionnement est relatif
–  Conséquence : zone vides et possibilités de chevauchements
–  Technique sensible à l'ordre d'écriture des éléments (superposition des
éléments se chevauchant)
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
6
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Positionnement relatif
–  Propriétés : position, left, top, right, bottom
–  Syntaxe :
• 
• 
• 
• 
• 
• 
position : relative
left : <longueur> | % | auto | inherit
top : <longueur> | % | auto | inherit
right : <longueur> | % | auto | inherit
bottom : <longueur> | % | auto | inherit
Note : la valeur auto est calculée en fonction de la valeur complémentaire
Cascading Style Sheets
•  Positionnement absolu
– 
– 
– 
– 
Ne tient pas compte du flux
Positionnement en fonction de la relation parent-enfant
Propriétés : position, left, top, right, bottom
Syntaxe :
• 
• 
• 
• 
• 
position : absolute
left : <longueur> | % | auto | inherit
top : <longueur> | % | auto | inherit
right : <longueur> | % | auto | inherit
bottom : <longueur> | % | auto | inherit
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
7
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Positionnement fixe
–  Cas particulier du positionnement absolu
•  Conteneur = fenêtre du navigateur (≠ élément parent)
–  Solution à la technique des cadres
–  Propriétés : position, left, top, right, bottom
–  Syntaxe :
• 
• 
• 
• 
• 
position : fixed
left : <longueur> | % | auto | inherit
top : <longueur> | % | auto | inherit
right : <longueur> | % | auto | inherit
bottom : <longueur> | % | auto | inherit
Cascading Style Sheets
•  Empilement
– 
– 
– 
– 
– 
Positionnements relatif, absolu et fixe
Ordre d'apparition
Gestion de l'ordre d'apparition dans le CSS
Propriété : z-index
Syntaxe :
•  z-index : auto | <nombre> | inherit
–  auto : même que l'élément parent
–  nombre : nombre négatif ou positif
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
8
INU3051 - Information et sites Web
13 mars 2015
Cascading Style Sheets
•  Présentation des tableaux
–  Priorité aux lignes (pas de colonnes sans lignes)
–  Dans CSS, un tableau est un empilement de couches (mais sans contrôle sur
l'ordre des couches)
<th>, <td>
<tr>
<thead>, <tbody>, <tfoot>
<col />
<colgroup>
<table>
Source : Meyer, 2004, p. 341
Cascading Style Sheets
•  Présentation des listes
–  Variation de la numérotation
•  List-style-type : <type> | none | inherit
–  Type : decimal, decimal-leading-zero, upper-latin, lower-latin, upper-roman, lowerroman, lower-greek
–  Variation des puces
•  List-style-type : disc | circle | square | none | inherit
•  List-style-image : <uri> | none | inherit
–  Variation sur le rendu (type d'affichage)
•  Display : none | inline | block | list-item | table | inline-table | table-row-group | table
header-group | table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | inherit
© Dominic Forest, École de bibliothéconomie et des sciences de l'information, Université de Montréal
9

Download Report