Initiation au CSS
M. DIENG Abdoulaye Mars 2015
DTS 1 Réseaux & Données
Objectif général
Mettre en forme le contenu d’un site web
2
Objectifs spécifiques
• Insérer du style dans une page HTML
• Sélectionner du contenu dans une page Web
• Donner du style ...
Le sommaire
1. Présentation du CSS
2. La syntaxe
3. L’insertion
4. Les sélecteurs
5. Les éléments span et div
6. L’afficha...
Présentation du CSS
 Le concept de CSS (Cascading StyleSheets ou feuilles de style en
cascade) est apparu en 1996 et cons...
La syntaxe (1/2)
• Une feuille de style est composée de règles qui peuvent
s'appliquer au document entier, à un ensemble d...
La syntaxe (2/2)
• Une propriété peut avoir plusieurs valeurs (séparées par des
espaces).
• On peut attribuer un même styl...
L’insertion en ligne
• Insertion dans une balise ou style inline avec l’attribut style.
• Syntaxe : <balise style="prop1:v...
L’insertion interne
• Insertion dans l’en-tête du fichier HTML ou style interne avec
l’élément HTML style qui délimite les...
L’insertion externe
• Liaison d’une feuille de style externe (qui contient les règles)
• Syntaxe:
<head>
<link href=“chemi...
Le sélecteur de type et d’attribut
• Le sélecteur de type permet d’appliquer un style à un contenu
en se servant uniquemen...
Le sélecteur de descendance
• Le sélecteur de contenu imbriqué permet de créer une règle
ne s'appliquant sur un contenu ba...
Le sélecteur filial
• Le sélecteur de contenus père-fils permet de créer une règle
ne s'appliquant sur un contenu balisé p...
Le sélecteur adjacent
• Le sélecteur de contenus consécutifs permet de créer une
règle ne s'appliquant sur un contenu bali...
Le sélecteur d’identificateur
• Le sélecteur d’identificateur permet d'appliquer une règle de
style à un contenu unique du...
Le sélecteur de classe
• Un sélecteur de classe permet de créer un style qui peut
s’appliquer à n’importe quel contenu du ...
Le sélecteur de pseudo-classes
• Un sélecteur de pseudo-classe permet d’appliquer une règle sur
un contenu uniquement dans...
span et div
• span et div servent à délimiter un contenu associé à un style.
• span et div sont souvent utilisés avec les ...
Affichage d’un contenu
La propriété display permet de changer la manière dont un
contenu est affiché avec comme principale...
Les unités de longueur
Nombre entier ou décimal suivi d'une unité de mesure pour les
tailles de police, les espaces entre ...
Les valeurs de couleur
21
Mot clé rgb héxa
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008...
Les caractères
• font-style : normal | italic | oblique style des caractères
• font-weight : de 100 à 900 | normal(400) | ...
Le texte
• word-spacing et letter-spacing : normal | <longueur>
distance entre mots et distance entre caractères.
• line-h...
Les couleurs et fond
 color: <couleur>
couleur d'un texte
 background-color: <couleur> | transparent
couleur du fond de ...
Les listes
• list-style-type: disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | n...
Les boîtes
• Pour construire une boîte, on utilise un élément (comme p,
div, h1 à h6, ul, li, td, etc.) auquel on applique...
L’anatomie des boîtes
27
La marge
• Le margin évalue la distance entre un contenu et ses voisins
• Les propriétés margin-top, margin-right, margin-...
L’épaisseur de bordure
• Les propriétés border−top−width, border−right−width,
border−bottom−width, border−left−width prenn...
La couleur de bordure
• Les propriétés border−top−color, border−right−color,
border−bottom−color, border−left−color prenne...
Le style de bordure
• Les propriétés border−top−style,
border−right−style, border−bottom−style,
border−left−style prennent...
Les raccourcies de bordure
• Les propriétés border−top, border−right, border−bottom,
border−left spécifient chacune l’épai...
L’espacement
• Le padding evalue l’espace entre le contenu et sa bordure.
• padding-top : <longueur> | <pourcentage>
valeu...
Le dimensionnement
• width et height permettent de contrôler la largeur et la hauteur
des contenus de type bloc ou remplac...
L’ajustement contenant/contenu
La propriété overflow ajuste le contenu avec :
 visible (valeur par défaut) : le contenu p...
Le positionnement
• Le positionnement CSS permet de placer un contenu
exactement où l'on veut dans la page
• Il existe plu...
Le positionnement dans le flux
• Par défaut, les navigateurs affichent les contenus suivant l'ordre
dans lequel ils appara...
Le positionnement relatif
• Le positionnement relatif (position : relative) laisse le contenu
dans le flux normal, tout en...
Le positionnement flottant
• Un contenu flottant est ôté partiellement du flux et placé à
l'extrême gauche (float:left) ou...
Empêcher l’enveloppement
Pour contrôler le comportement d’un bloc qui suit des éléments
flottants dans le document, utilis...
Le positionnement absolu
• Le positionnement absolu (position : absolute) retire
totalement du flux le contenu concerné ma...
Le positionnement fixe
• Le positionnement fixe (position : fixed) retire totalement du
flux le contenu concerné et le pos...
Empilement
• En plus de leurs positions horizontales et verticales, les
contenus s’échelonnent le long d'un "axe−z" et s'e...
L’héritage
• Les feuilles de style respectent la structure hiérarchique des
éléments HTML.
• Un élément de niveau supérieu...
Prochain SlideShare
Chargement dans…5
×

Cours CSS feuilles de style en cascade- mars 2015

1 028 vues

Publié le

Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 028
Sur SlideShare
0
Issues des intégrations
0
Intégrations
14
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours CSS feuilles de style en cascade- mars 2015

  1. 1. Initiation au CSS M. DIENG Abdoulaye Mars 2015 DTS 1 Réseaux & Données
  2. 2. Objectif général Mettre en forme le contenu d’un site web 2
  3. 3. Objectifs spécifiques • Insérer du style dans une page HTML • Sélectionner du contenu dans une page Web • Donner du style aux caractères et au texte • Choisir une image ou une couleur de fond • Gérer l’espacement externe et interne des différents composants d’une page Web • Dimensionner les éléments d’une page HTML • Positionner les éléments d’une page Web 3
  4. 4. Le sommaire 1. Présentation du CSS 2. La syntaxe 3. L’insertion 4. Les sélecteurs 5. Les éléments span et div 6. L’affichage d’un contenu 7. Les unités de longueur 8. Les valeurs de couleurs 9. Les caractères 10. Le texte 11. Les couleurs et fond 12. Les listes 13. La marge 14. La bordure 15. L’espacement 16. Le dimensionnement 17. Le positionnement 18. L’empilement 19. L’héritage 4
  5. 5. Présentation du CSS  Le concept de CSS (Cascading StyleSheets ou feuilles de style en cascade) est apparu en 1996 et consiste à lier du style (ex. les polices de caractères, les couleurs, la mise en page, etc.) aux documents structurés (HTML, XML, …).  Objectif : séparer la sémantique et la présentation du contenu  Intérêts : – Présentation homogène sur tout un site – Facilitation de la mise à jour et de l'évolution d’un site – Plus grande lisibilité du HTML – Accélération du chargement des pages – Augmentation des potentiels de présentation; – Avec CSS2, la prise en compte de la diversité de média (écran, imprimante, mobiles, synthétiseur vocal, etc.) – Avec CSS3, l’amélioration de la décoration et intégration de l’animation et du responsive design 5
  6. 6. La syntaxe (1/2) • Une feuille de style est composée de règles qui peuvent s'appliquer au document entier, à un ensemble de contenus du document ou à un contenu particulier. • Une règle de style est composée d'un sélecteur et d'une déclaration constituée d’un ou de plusieurs couples propriété:valeur séparés par des ;. selecteur { prop1:val1; prop2:val2_1 val2_2; } • Un sélecteur indique à quel(s) contenu(s) d'une page HTML on désire appliquer une règle. • Une propriété identifie ce qu'il faut définir sur le contenu sélectionné • Une valeur est assignée à une propriété pour définir sa nature. 6
  7. 7. La syntaxe (2/2) • Une propriété peut avoir plusieurs valeurs (séparées par des espaces). • On peut attribuer un même style à plusieurs sélecteurs (séparées par des virgules). • Les commentaires sont délimités par les symboles /* et */ • Exemples : h1 { color : red; } /*couleur rouge pour tout titre de niveau 1*/ table {background-color : white ; border : 1px black;} h2, h3 { color : gray; } 7
  8. 8. L’insertion en ligne • Insertion dans une balise ou style inline avec l’attribut style. • Syntaxe : <balise style="prop1:val1; prop2:val2; … "> • À utiliser avec modération car ne respectant pas le principe de la séparation du contenu et de la présentation. 8 x
  9. 9. L’insertion interne • Insertion dans l’en-tête du fichier HTML ou style interne avec l’élément HTML style qui délimite les règles CSS. • Elle s'applique à tout contenu sélectionné de cette page. • Syntaxe: <head> <style type="text/css"> /* Définition des règles de style */ </style> </head> 9 x
  10. 10. L’insertion externe • Liaison d’une feuille de style externe (qui contient les règles) • Syntaxe: <head> <link href=“chemin/du/fichier.css" rel="stylesheet" type="text/css“> </head> • La feuille de style peut être utilisée par un nombre illimité de pages. • La feuille de style sera gardée dans la mémoire cache du navigateur. 10 x
  11. 11. Le sélecteur de type et d’attribut • Le sélecteur de type permet d’appliquer un style à un contenu en se servant uniquement de l’élément HTML qui le balise • Le sélecteur d’attribut permet d’appliquer un style à un contenu en fonction d’un attribut de l’élément HTML qui le balise • Exemple h1 {color: green;} h2 , h3 {color: yellow;} hr[width=50%]{ color : red;} 11
  12. 12. Le sélecteur de descendance • Le sélecteur de contenu imbriqué permet de créer une règle ne s'appliquant sur un contenu balisé par un élément Y que lorsque Y est imbriqué dans un autre élément X. • Syntaxe: X Y {déclaration1; déclaration2; … } NB : X et Y sont séparés par le caractère espace) • Exemple Définition : p b { color: red; } Application : <p> <i> texte en italique </i><b> texte rouge et en gras </b> </p> <div><b> texte uniquement en gras</b></div> 12
  13. 13. Le sélecteur filial • Le sélecteur de contenus père-fils permet de créer une règle ne s'appliquant sur un contenu balisé par un élément Y que lorsque Y est fils direct d'un autre élément X. • La règle ne s'applique pas si Y est encapsulé dans une ou plusieurs autres éléments HTML intermédiaires. • Syntaxe X > Y {déclaration1; déclaration2; … } • Exemple Définition : p > b { color: red; } Application: <p> <b><i> texte en italique, gras et rouge </i></b> <i><b> texte gras et en italique mais pas rouge</b></i> </p> <div><b> texte uniquement gras </b></div> 13
  14. 14. Le sélecteur adjacent • Le sélecteur de contenus consécutifs permet de créer une règle ne s'appliquant sur un contenu balisé par un élément Y que lorsque Y suit immédiatement un autre élément X. • Syntaxe : X + Y {déclaration1; déclaration2; … } • Exemple Définition: i + b { color: red; } Application: <p><i> texte en italique </i><b> texte gras et en rouge</b> <b> texte uniquement en gras </b></p> 14
  15. 15. Le sélecteur d’identificateur • Le sélecteur d’identificateur permet d'appliquer une règle de style à un contenu unique du document. • Le id est très utilisé pour la mise en page. • Définition du style (nom préfixé d’un dièse) #identificateur {déclaration1; déclaration2; … } • Application du style (nom sans le dièse) <balise id="identificateur"> .... </balise> • Exemple Définition : #titreDebutPage {color: blue;} Application : <h1 id="titreDebutPage">Titre principal</h1> 15 x
  16. 16. Le sélecteur de classe • Un sélecteur de classe permet de créer un style qui peut s’appliquer à n’importe quel contenu du document • +sieurs contenus d’une page peuvent partager une classe • Il est possible d'appliquer simultanément deux classes à une même balise, en les séparant par un espace. • Définition du style (nom préfixé d’un point) .nom_de_classe {déclaration1; déclaration2; … } • Application du style (nom sans le point) <balise class="nom_de_classe"> .... </balise> • Exemple Définition : .rouge { color: red; } p.gras { font-weight: bold; } /*sous classe*/ Application : <p class=" rouge gras "> paragraphe en gras et rouge</p> <h1 class=" rouge "> titre rouge</h1> 16 x
  17. 17. Le sélecteur de pseudo-classes • Un sélecteur de pseudo-classe permet d’appliquer une règle sur un contenu uniquement dans certains contextes • Il y en a plusieurs, mais ceux qui sont reconnus par tous les navigateurs sont :  a:link qui permet d'attribuer une règle au lien (non-visité). Exple. a:link {text-decoration:none;}  a:visited permet d'attribuer une règle au lien visité Exple. a:visited {color:blue;}  a:hover qui permet d'attribuer une règle sur les liens lors du survol par la souris. Exple. a:hover {font-weight:bold;} 17 x
  18. 18. span et div • span et div servent à délimiter un contenu associé à un style. • span et div sont souvent utilisés avec les attributs class et id. • span est utilisé pour donner du style à une portion de texte. Exemple : écrire, en rouge, un groupe de mots. • div permet de donner du style à un ensemble de contenus de type "block". Exemple : Mettre dans l’entête de page le logo, le slogan et la bannière de l’entreprise • Un élément de type « block » commence sur une nouvelle ligne et ne partage pas cette ligne. Il peut être dimensionné et aligné horizontalement et verticalement. Exples: h1, ..., h6, ul, table, pre, blockquote, p, div, etc. • Un élément qui partage sa ligne est de type « en-ligne » Exples: a, abbr, b, strong, img, input, span, textarea, etc. 18 x
  19. 19. Affichage d’un contenu La propriété display permet de changer la manière dont un contenu est affiché avec comme principales valeurs : • none : le contenu n’est pas affiché ; • inline : le contenu devient « en-ligne » Exemple : insérer un titre et un paragraphe au mm niveau • block : le contenu devient « bloc » Exemple : créer un retour à la ligne avant et après une image qu’on pourra aligner au centre. • inline-block : contenu de type en ligne (partage sa ligne) vu de l’extérieur et de type block (dimensions et alignement) vu de l’intérieur Exemple : créer un menu de navigation horizontal 19 x
  20. 20. Les unités de longueur Nombre entier ou décimal suivi d'une unité de mesure pour les tailles de police, les espaces entre paragraphes, les marges, les dimensions, etc.  em : taille de la police utilisée (1em=100%, 0.8em=80%)  ex : hauteur du "x" minuscule de la police utilisée  px : pixel (variable en fonction de l’écran)  % : pourcentage de la taille de l’élément parent 20
  21. 21. Les valeurs de couleur 21 Mot clé rgb héxa aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff gray #808080 green #008000 lime #00ff00 Maroon #800000 navy #000080 olive #808000 purple #800080 red #ff0000 silver #c0c0c0 teal #008080 #ffffff yellow #ffff00 • Les couleurs en CSS sont obtenues en mélangeant 256 nuances de rouge (red), de vert (lime) et de bleu (blue) en proportions variables. • Il y a 16 couleurs nommées et normalisées • Conseil : utiliser le code hexadécimal surtout pour une couleur non normalisée Couleurs nommées et normalisées
  22. 22. Les caractères • font-style : normal | italic | oblique style des caractères • font-weight : de 100 à 900 | normal(400) | bold(700) | bolder | lighter épaisseur ou graisse des caractères • font-size : xx-small | x-small | medium | x-large | xx-large | <longueur> | % | smaler | larger. taille des caractères • font-family : nom(s) de police ou famille générique ( serif, sans-serif, cursive, monospace, fantasy) Déclarer une famille générique après les polices (séparées par une virgule) pour obliger le navigateur, si la police n’est pas trouvée, à lui substituer une police similaire. • font : permet de regrouper les différentes propriétés de polices (dans l’ordre précité) en une ligne. Ex : p { font: italic bold 12pt "Times New Roman" , serif; } 22
  23. 23. Le texte • word-spacing et letter-spacing : normal | <longueur> distance entre mots et distance entre caractères. • line-height : normal | <longueur> | % interligne • text-decoration: none | [ underline || overline || line-through || blink ] texte souligné, surligné, barré ou clignotant. • text-align: left | right | center | justify alignement horizontale du texte. • text-transform: capitalize | uppercase |lowercase | none casse des caractères. • text-indent: <longueur> | <pourcentage> alinéa pour la première ligne de texte. 23 x
  24. 24. Les couleurs et fond  color: <couleur> couleur d'un texte  background-color: <couleur> | transparent couleur du fond de la page ou d’un bloc  background-image: url(<url>) | none; image du fond de la page ou d’un bloc  background permet de regrouper les différentes propriétés de fond (dans l’ordre précité) en une ligne Ex : p { background: green url(image.gif) } 24
  25. 25. Les listes • list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none définit le type de puce (numérotée ou non) Ex : ol { list-style-type: lower-roman } /* i ii iii iv … • list-style-image:url(…) permet de remplacer les valeurs de list-style-type par une image Ex : ul { list-style-image: url(image.gif) } • list-style-position: inside | outside spécifie le retrait des puces par rapport au texte. Ex: ul { list-style-position: outside } • list-style permet de regrouper les différentes catégories de list-style Ex: ol { list-style: upper-roman inside } 25 x
  26. 26. Les boîtes • Pour construire une boîte, on utilise un élément (comme p, div, h1 à h6, ul, li, td, etc.) auquel on applique un style. • Une boîte est, pour l'essentiel, une zone rectangulaire. • Au cœur de ce rectangle se trouve le contenu (remplacé ou non) de l'élément. • Autour de ce contenu vient se coller d'abord une couche de padding (traduit par espacement ou remplissage, un peu comme les chips de polystyrène dans un colis postal). • Ensuite vient une épaisseur de border ou bordure (invisible par défaut) • Enfin une distance de margin ou marge. 26
  27. 27. L’anatomie des boîtes 27
  28. 28. La marge • Le margin évalue la distance entre un contenu et ses voisins • Les propriétés margin-top, margin-right, margin-bottom, margin-left prennent chacune l’une des valeurs: <longueur> | <pourcentage> | auto • margin : [<longueur>|<pourcentage> | auto]{1,4} regroupe les différentes propriétés de marge (en partant d'en haut, dans le sens horaire) • Exemples : body{ margin: 2em } signifie : toutes les marges à 2em. body { margin: 1em 2em } signifie : top = bottom = 1em et right = left = 2em. body { margin: 1em 2em 3em } signifie : top = 1em, right = left = 2em et bottom = 3em 28
  29. 29. L’épaisseur de bordure • Les propriétés border−top−width, border−right−width, border−bottom−width, border−left−width prennent chacune l’une des valeurs : thin (fin) | medium | thick | <longueur> • border-width : [thin | medium | thick | <longueur>]{1,4} regroupe les différentes propriétés de l’épaisseur (en partant d'en haut, dans le sens horaire) 29
  30. 30. La couleur de bordure • Les propriétés border−top−color, border−right−color, border−bottom−color, border−left−color prennent chacune l’une des valeurs :<couleur> | transparent • border-color : [<couleur> | transparent]{1,4} spécifie la couleur des quatre côtés (en partant d'en haut, dans le sens horaire) 30
  31. 31. Le style de bordure • Les propriétés border−top−style, border−right−style, border−bottom−style, border−left−style prennent chacune l’une des valeurs : none | dotted (pointillée) | dashed (tirets) | solid (pleine)| double (2 traits)| groove (gravée avec effet 3D) | ridge (relief avec effet 3D ) | inset (incrustée)| outset (extrudée). • border-style regroupe les différentes propriétés de l’épaisseur (en partant d'en haut, dans le sens horaire) 31
  32. 32. Les raccourcies de bordure • Les propriétés border−top, border−right, border−bottom, border−left spécifient chacune l’épaisseur, le style et la couleur d’un coté (dans l’ordre précité) . • La propriété border spécifie la même épaisseur, la même couleur et le même style pour les quatre côtés. 32 x
  33. 33. L’espacement • Le padding evalue l’espace entre le contenu et sa bordure. • padding-top : <longueur> | <pourcentage> valeur de l’espacement haut • padding-right : <longueur> | <pourcentage> valeur de l’espacement droit • padding-bottom : <longueur> | <pourcentage> valeur de l’espacement bas • padding-left : <longueur> | <pourcentage> valeur de l’espacement gauche • padding : [<longueur> | <pourcentage>]{1,4} regrouper les différentes propriétés de padding en une ligne Ex. h1 { padding: 1em 2em } 33
  34. 34. Le dimensionnement • width et height permettent de contrôler la largeur et la hauteur des contenus de type bloc ou remplacés (image, vidéo, …) • Elle prennent des unités absolues ou relatives • Par défaut (valeur auto) : – un bloc prend la largeur max dispo sauf s’il est positionné en mode absolu, fixe ou flottant où il s’adapte à son contenu ; – un bloc s’adapte à la hauteur de son contenu. – un contenu en-ligne remplacé prend sa taille intrinsèque • Pour redimensionner une image, jouer uniquement sur l'une des deux valeurs width ou height, pour laisser au navigateur le soin de déterminer l'autre valeur d'une manière à conserver le les proportions de l'image • Si la hauteur d’un contenant n’est pas à auto, son contenu peut déborder. 34
  35. 35. L’ajustement contenant/contenu La propriété overflow ajuste le contenu avec :  visible (valeur par défaut) : le contenu peut débordé.  hidden : contenu éventuellement tronqué.  scroll : barres de défilement systématiquement ajoutées  auto : barres de défilement ajoutées quand c’est nécessaire 35
  36. 36. Le positionnement • Le positionnement CSS permet de placer un contenu exactement où l'on veut dans la page • Il existe plusieurs schémas de positionnement en CSS : – un schéma de positionnement dans le flux normal ou positionnement courant (positionnement par défaut); – un positionnement relatif, une variante du positionnement courant qui provoque un décalage; – trois schémas de positionnement qui sortent le contenu du flux (positionnement absolu, positionnement fixé et positionnement flottant). 36
  37. 37. Le positionnement dans le flux • Par défaut, les navigateurs affichent les contenus suivant l'ordre dans lequel ils apparaissent dans le code HTML: c’est le positionnement dans le flux normal. • Par défaut, les éléments de type bloc seront affichées dans une succession verticale (du haut vers le bas) et les éléments de type en-ligne, dans une succession horizontale (de la gauche vers la droite). • Pour positionner un contenu dans le flux normal, utiliser les propriétés padding et margin. • Pour centrer horizontalement un bloc, fixer sa largeur et mettre à auto ses marges latérales 37 x
  38. 38. Le positionnement relatif • Le positionnement relatif (position : relative) laisse le contenu dans le flux normal, tout en le décalant p/r à la position normale de son coin supérieur gauche, à l'aide de deux des propriétés top:<length>, right:< length>, bottom:< length> et left:< length>. • L’emplacement d’une boîte B qui suit une boîte A en position relative est calculé comme si A n'avait pas été déplacée • Aussi, en attribuant à un contenu une position relative, il peut : o servir de référent à un contenu enfant positionné en absolu (à voir plus loin). o bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions de contenus (à voir plus loin) 38
  39. 39. Le positionnement flottant • Un contenu flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. • float : none empêche un contenu de flotter 39
  40. 40. Empêcher l’enveloppement Pour contrôler le comportement d’un bloc qui suit des éléments flottants dans le document, utiliser la propriété clear avec l’une des valeurs none, left, right ou both 40 x
  41. 41. Le positionnement absolu • Le positionnement absolu (position : absolute) retire totalement du flux le contenu concerné mais le positionne par rapport aux limites du premier ancêtre positionné. • En l'absence d'un ancêtre positionné, c'est l’espace de visualisation qui sert de référence. • Positionner avec deux des propriétés top, right, bottom et left distances des côtés du bloc p/r aux côtés de son référent • Attention: superposition possible (voir empilement) 41 x
  42. 42. Le positionnement fixe • Le positionnement fixe (position : fixed) retire totalement du flux le contenu concerné et le positionne par référence aux limites de l'espace de visualisation. • Un contenu en position fixe reste visible lors du défilement de la page. • Positionner avec les propriétés top, right, bottom et left • Attention: superposition possible (voir empilement) 42 Barre de partage en position fixe
  43. 43. Empilement • En plus de leurs positions horizontales et verticales, les contenus s’échelonnent le long d'un "axe−z" et s'empilent les unes au−dessus des autres dans la mise en forme. • Des contenus positionnés (relative, absolute ou fixed) dont les domaines d'affichage se superposent sont en principe affichés l'un sur l'autre dans l'ordre dans lequel ils ont été définis. • Cet ordre d’empilement peut être modifié grâce à la propriété z-index appliquée à chacun de ces contenus. • Les valeurs possibles de z-index sont des entiers (plus l'entier est grand, plus le contenu considéré sera au dessus). 43 x
  44. 44. L’héritage • Les feuilles de style respectent la structure hiérarchique des éléments HTML. • Un élément de niveau supérieur (l'élément parent) est suivi par des éléments enfants qui peuvent hériter des styles, provenant de leurs éléments parents. • Exemple: Avec : div { color : white; background-color : black; } on aura :<div>Ceci est une division (texte blanc sur fond noir) contenant un <p>paragraphe de même style </p></div> • Certaines propriétés comme les marges, les espacements, les bordures et les dimensions ne sont pas héritées pour des raisons évidentes de lisibilités des documents. • Depuis CSS 2, la quasi-totalité des propriétés peut prendre la valeur inherit permettant de définir explicitement l’héritage de la valeur que possède la même propriété dans l’élément parent. 44

×