2 : Rappels CSS

Définition

Les feuilles de styles en cascade (en anglais « Cascading Style Sheets« , abrégé CSS) sont un langage qui permet de gérer la présentation d’une page Web. Le langage CSS est une recommandation du World Wide Web Consortium (W3C), au même titre que HTML ou XML.

Apparu dans les années 1990, le CSS permet de définir des règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le positionnement des éléments, l’alignement, les polices de caractères, les couleurs, les marges et espacements, les bordures, les images de fond, etc.

Le but de CSS est séparer la structure d’un document HTML et sa présentation. En effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les différentes parties d’un document) et la présentation. Mais cela pose quelques problèmes. Avec le couple HTML/CSS, on peut créer des pages web où la structure du document se trouve dans le fichier HTML tandis que la présentation se situe dans un fichier CSS.

Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d’un site internet. Cela facilite ainsi la modification de la présentation d’un site entier. CSS permet aussi de définir des règles différentes pour chaque support d’affichage (une navigateur classique, une télévision, un support mobile, un lecteur braille…). CSS permet aussi d’améliorer l’accessibilité des documents web.

De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. En effet, HTML permet une gestion assez sommaire du style des documents.

Les avantages du css

  • Contrôle précis de la disposition et de la présentation en fonction du type d’affichage : impression, écran…
  • Moins de travail : vous pouvez changer l’apparence complète d’un site en ne modifiant qu’une feuille de style.
  • Des sites plus accessibles : quand les questions de présentation sont confiées aux css, vous pouvez baliser votre document HTML en vous concentrant sur la sémantique.
  • Plus de flexibilité : le même code HTML apparaitre complètement différemment grâce aux css.

La puissance du css

Il ne s’agit pas de mettre en place des modifications visuelles mineures, comme changer les couleurs ou les indentations par exemple. Utilisé correctement, le css est un outil de design robuste et puissant.

3 css différents avec le même html

Comment fonctionnent les feuilles de style

En trois étapes !

  1. Commencer avec un document balisé en HTML,
  2. Écrire les règles pour définir la façon dont les éléments doivent être affichés,
  3. Associer la feuille de style au document HTML.

Écrire les règles

Le CSS est un langage informatique dit déclaratif.

Une feuille de style est composée d’une ou plusieurs instructions qui décrivent la façon dont les éléments ou les groupes d’éléments devraient apparaitre.

Chaque règle sélectionne un élément et déclare comment il doit apparaître.

h1 { color: green; }
p { font-size: large; font-family: sans-serif; } 

En css, on utilise la terminologie :

  • sélecteur : il identifie l’élément ou les éléments qui doivent être impactés. Dans l’exemple ci-dessus h1 et p sont des sélecteurs respectivement des titres de niveau 1 et des paragraphes.
  • déclarations : elles fournissent les instructions de rendu. Dans l’exemple ci-dessus, la couleur du texte des titres de niveau 1 sera verte, et la police des paragraphes sera « sans-serif » et affichée en grand.

Une déclaration est constituée d’une propriété et d’une valeur.

Associer les feuilles de style au document

Feuilles de style externes

Une feuille de style externe est un document texte séparé qui contient un certain nombre de règles de style.

Il doit être nommé avec l’extension .css

Et il est

  • lié au document HTML (grâce à l’élément link qu’on positionnera dans l’élément head de la page)
  • ou importé depuis une autre feuille de style avec la règle CSS @import. Cette dernière solution est beaucoup plus lente et donc non recommandée.
<head>
    <title>Titre</title>
    <link rel="stylesheet" href="/chemin/exemple.css">
</head>

ou en css :

<style>
    @import url("/chemin/exemple.css");
    p { font-face: verdana; }
</style>

Feuilles de style embarquées

Les règles sont placées dans la partie head du document.

Elles sont déclarées au sein de l’élément style.

<head>
    <title>Titre</title>
    <style>
        /* les règles de style ici */
    </style>
</head>

Styles en ligne

Il est possible d’applique des règles directement depuis les éléments HTML eux-mêmes.

On utilisera alors l’attribut HTML style.

<h1 style="color: red;">Introduction</h1>

Structure d’un document

On a déjà rapidement parlé du DOM, pour « Document Object Model« . Ce modèle construit par les navigateurs impliquent que les documents ont une structure implicite. On donne des noms à certaines relations familières :

  • tous les éléments contenus dans un élément donné sont ses descendants,
  • un élément qu iest directement contenu dans un autre élément est l’enfant de cet élément,
  • l’élément conteneur est le parent de l’élément contenu,
  • deux éléments qui ont le même parent sont frères et soeurs.

L’héritage

Beaucoup de propriétés appliquées à un élément sont appliquées aussi aux éléments qu’il contient. C’est ce que l’on appelle l’héritage. Ce n’est pas le cas de toutes les propriétés, c’est généralement le cas pour les propriétés relatives aux textes, et pas aux autres.

Les cascades

Elles se réfèrent au système de résolution de conflits lorsque plusieurs styles sont appliqués au même élément.

Les informations de style sont transmises jusqu’à ce qu’elles soient écrasées par une règle ayant plus de poids.

Le poids est estimé sur la base de :

  • la priorité des sources de règles de style,
  • la spécificité du sélecteur
  • l’ordre (la position) de la règle

La priorité est donc donnée :

  1. à tout style marqué comme !important dans la feuille de style définie par l’utilisateur dans son navigateur,
  2. à tout style marqué comme !important par l’auteur du site,
  3. aux styles de l’auteur (les feuilles de style du site),
  4. aux styles de l’utilisateur,
  5. aux styles par défaut des navigateurs.

Spécificité : lorsque deux règles sont en conflit dans une même feuille de style, le type de sélecteur est utilisé pour déterminer quelle règle a le plus de poids. Par exemple, un sélecteur d’ID est plus spécifique qu’un sélecteur d’élément.

La règle de l’ordre

Quand deux règles ont le même poids, l’ordre des règles est utilisé. La règle apparaissant en dernier “gagne”.

p { color: red; }
p { color: blue; }
p { color: green; }

Dans ce premier exemple le vert l’emporte.

p { 
    color: red;
    color: blue;
    color: green; 
}

Dans cet exemple aussi.

<!doctype html>
<html>
  <head>
    <title>Titre</title>
    <style>
      @import url('external.css'); /* met le texte en rouge */
      h1 { color: purple; } /* écrase pour du violet */
    </style>
  </head>
  <body>
    <h1 style="color: blue;">Titre</h1> <!-- le bleu arrive en dernier et gagne -->
  </body>
</html>

Les sélecteurs

  • d’éléments : p, li, h1, footer
  • de classes : .rouge, .col-md-6, .slideshow
  • d’identifiant : #recherche, #navigation_principale
  • les pseudo sélecteurs : a:hover, input:focus, p:first-child
  • les sélecteurs d’attributs : a[target="_blank"], p[id="annexe"]
  • Grouper les sélecteurs : p, li, td { color: red; }
  • Sélecteurs descendants : p em { color: navy; }
  • Sélecteurs contextuels p > em { font-weight: bold; }h1 + p { font-style: italic; }, * { border: 1px solid grey; }

Les sélecteurs de base

Les sélecteurs d’élément, ou sélecteur de type

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.

Exemple :input permettra de cibler n’importe quel élément <input>.

Les sélecteurs de classe

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.

.index permettra de cibler n’importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").

Les sélecteurs d’identifiant

Ce sélecteur simple permet de cibler un élément d’un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu’un seul élément pour un identifiant donné.

Exemple :#toc permettra de cibler l’élément qui possède l’identifiant toc (vraisemblablement défini avec un attribut id="toc").

Le sélecteur universel

Ce sélecteur : * permet de cibler tous les nœuds, ou éléments, d’un document.

les sélecteurs d’attributs

element[attribute]

Cible les éléments qui disposent de cet attribut, peu importe sa valeur.

element[attribute="valeur exacte"]

Cible les éléments pour lesquels la valeur de cet attribut a exactement la valeur demandée.

element[attribute~="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut contient la valeur demandée.

element[attribute^="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut débute par la valeur demandée.

element[attribute$="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut termine par la valeur demandée.

element[attribute*="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut contient la valeur demandée.

Il est utile de préciser ici que dans un souci de performances, on privilégiera plutôt la section d’un élément par son id en utilisant les sélecteurs d’attribut :

p[id="annexes"] { font-style: italic; }

Plutôt que le classique mais plus gourmand :

p#annexes { font-style: italic; }

Références du W3C sur les sélecteurs

Les combinateurs

Les sélecteurs de voisin direct

Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.

Exemple : div + p permettra de cibler n’importe quel élément <p> qui suit immédiatement un élément <div>.

Les sélecteurs de voisins

Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.

Exemple : p ~ span permettra de cibler les éléments <span> qui suivent (immédiatement ou non) un élément <p> et qui ont le même élément parent.

Les sélecteurs d’éléments fils

Le combinateur '>' permet de sélectionner les selects nœuds qui sont des fils directs d’un élément donné.

Exemple : ul > li permettra de cibler tous les éléments <li> qui sont directement situés sous un élément <ul>.

Les sélecteurs d’éléments descendants

Le combinateur (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d’un élément donné, autrement dit des éléments qui sont à l’intérieur, et du coup son descendants d’un autre élément .

Exemple : div span permettra de cibler n’importe quel élément <span> situé à l’intérieur d’un élément <div>.

Les sélecteurs de pseudo-classes

Pour cibler des éléments en fonction de leur état, au survol, à la prise de focus, etc. on utilise les pseudo-classes.

a:hover, a:focus, a:active { color: maroon; background-color: #ffd9d9; }
a:link { color: maroon; background-color: #ffd9d9; }
a:visited { color: gray; }

pseudo-classes de structure

  • :root
  • :empty
  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()

pseudo-classes de champs de formulaires :

  • :enabled
  • :disabled
  • :checked

pseudo-classes de liens

  • :target()

pseudo-classes de langue

  • :lang()

pseudo-classes logiques

  • :not()

Toutes les pseudo-classes : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes.

Les propriétés

Liste exhaustive des propriétés css : liste des propriétés CSS du W3C, ou sur le site w3schools.

Les propriétés CSS animées.

Mise en forme du texte

PropriétéValeurs (exemples)Description
font-familypolice1, police2, police3, serif, sans-serif, monospaceNom de police
@font-faceNom et source de la policePolice personnalisée
font-size1.3em, 16px, 120%…Taille du texte
font-weightbold, normalGras
font-styleitalic, oblique, normalItalique
text-decorationunderline, overline, line-through, blink, noneSoulignement, ligne au-dessus, barré ou clignotant
font-variantsmall-caps, normalPetites capitales
text-transformcapitalize, lowercase, uppercaseCapitales
fontSuper propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.
text-alignleft, center, right, justifyAlignement horizontal
vertical-alignbaseline, middle, sub, super, top, bottomAlignement vertical (cellules de tableau ou éléments inline-block uniquement)
line-height18px, 120%, normal…Hauteur de ligne
text-indent25pxAlinéa
white-spacepre, nowrap, normalCésure
word-wrapbreak-word, normalCésure forcée
text-shadow5px 5px 2px blue
(horizontale, verticale, fondu, couleur)
Ombre de texte

Exercices w3schools : textes

Exercices w3schools : polices

Exercices w3schools : liens

Exercices w3schoos : effets de texte

Exercices w3schools : polices web

Couleurs et fonds

PropriétéValeurs (exemples)Description
colornom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…Couleur du texte
background-colorIdentique à colorCouleur de fond
background-imageurl(‘image.png’) ; linear-gradient(white, grey) ;Image de fond
background-attachmentfixed, scrollFond fixe
background-repeatrepeat-x, repeat-y, no-repeat, repeatRépétition du fond
background-position(x y), top, center, bottom, left, rightPosition du fond
backgroundSuper propriété du fond. Combine : background-image, background-repeat, background-attachment, background-position
opacity0.5Transparence

Exercices w3schools : fonds 1

Exercices w3schools : fonds 2

Exercices w3schools : couleurs

Exercices w3schools : gradients

Les boîtes

PropriétéValeurs (exemples)Description
width150px, 80%…Largeur
height150px, 80%…Hauteur
min-width150px, 80%…Largeur minimale
max-width150px, 80%…Largeur maximale
min-height150px, 80%…Hauteur minimale
max-height150px, 80%…Hauteur maximale
margin-top23pxMarge en haut
margin-left23pxMarge à gauche
margin-right23pxMarge à droite
margin-bottom23pxMarge en bas
margin23px 5px 23px 5px
(haut, droite, bas, gauche)
Super-propriété de marge.
Combine : margin-top, margin-right, margin-bottom, margin-left.
padding-left23pxMarge intérieure à gauche
padding-right23pxMarge intérieure à droite
padding-bottom23pxMarge intérieure en bas
padding-top23pxMarge intérieure en haut
padding23px 5px 23px 5px
(haut, droite, bas, gauche)
Super-propriété de marge intérieure.
Combine : padding-top, padding-right, padding-bottom, padding-left.
border-width3pxÉpaisseur de bordure
border-colornom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…Couleur de bordure
border-stylesolid, dotted, dashed, double, groove, ridge, inset, outsetType de bordure
border3px solid blackSuper-propriété de bordure. Combine border-width, border-color, border-style.
Existe aussi en version border-top, border-right, border-bottom, border-left.
border-radius5pxBordure arrondie
box-shadow6px 6px 0px black
(horizontale, verticale, fondu, couleur)
Ombre de boîte

Exercices w3schools : bordures

Exercices w3schools : marges

Exercices w3schools : rembourage

Exercices w3schools : dimensions

Exercices w3schools : modèles de boîtes

Positionnements et affichages

PropriétéValeurs (exemples)Description
displayblock, inline, inline-block, table, table-cell, none…Type d’élément (block, inline, inline-block, none…)
visibilityvisible, hiddenVisibilité
cliprect (0px, 60px, 30px, 0px)
rect (haut, droite, bas, gauche)
Affichage d’une partie de l’élément
overflowauto, scroll, visible, hiddenComportement en cas de dépassement
floatleft, right, noneFlottant
clearleft, right, both, noneArrêt d’un flottant
positionrelative, absolute, staticPositionnement
top20pxPosition par rapport au haut
bottom20pxPosition par rapport au bas
left20pxPosition par rapport à la gauche
right20pxPosition par rapport à la droite
z-index10Ordre d’affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les autres.

Exercices : affichage et visibilité

Exercices : positionnements

Exercices : débordements

Les listes

PropriétéValeurs (exemples)Description
list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, noneType de liste
list-style-positioninside, outsidePosition en retrait
list-style-imageurl(‘puce.png’)Puce personnalisée
list-styleSuper-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

Exercices : listes

Les tableaux

PropriétéValeurs (exemples)Description
border-collapsecollapse, separateFusion des bordures
empty-cellshide, showAffichage des cellules vides
caption-sidebottom, topPosition du titre du tableau

Exercices : tableaux

Les boîtes flexibles

PropriétéValeurs (exemples)Description
flexcxxxxxx
flex-basiscxxxxxx
flex-directioncxxxxxx
flex-flowcxxxxxx
flex-growcxxxxxx
flex-shrinkcxxxxxx
flex-wrapcxxxxxx
ordercxxxxxx

Les grilles

PropriétéValeurs (exemples)Description
grid-template-columnsmot clé (“none”), liste (100px 1fr ; ou [nomligne1] 100px [nomligne2 nomligne3], liste autoremplie (repeat(auto-fit, 1fr)définit les noms des lignes et les dimensions des colonnes
grid-template-rowsmot clé (“none”), liste (100px 1fr ; ou [nomligne1] 100px [nomligne2 nomligne3], liste autoremplie (repeat(auto-fit, 1fr)définit les noms des lignes et les dimensions des lignes
grid-template-areas“a b” ; ou “a b b” “a c d” ;donne des noms aux zones de la grille
grid-template“a a a” 40px
“b c c” 40px
“b c c” 40px / 1fr 1fr 1fr;
raccourci pour définir les propriétés column, rows et area
grid-auto-columns200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr)taille des colonnes d’une grille créée implicitement
grid-auto-rows200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr)taille des lignes d’une grille créée implicitement
grid-auto-flowrow ; column ; row dense ;contrôle du placement automatique dans la grille
gridauto-flow / 1fr 1fr 1fr; repeat(2, 60px) / auto-flow 80px;raccourci pour déclarer toutes les propriétés implicites et explicites d’une grille : grid-template-rows, grid-template-columns, and grid-template-areas, grid-auto-rows, grid-auto-columns, et grid-auto-flow
grid-row-startauto ; 3 ; -1 ; span 2 ;définit le début de la position sur une ligne d’un élément
grid-column-startauto ; 3 ; -1 ; span 2 ;définit le début de la position sur une ligne d’un élément
grid-row-endauto ; 3 ; -1 ; span 2 ;définit la position de fin d’un élément
grid-column-endauto ; 3 ; -1 ; span 2 ;définit la position de fin d’un élément
grid-row1 ; 1 / 3 ; 2 / -1 ; 1 / span 2 ;raccourci pour déclarer grid-row-start et grid-row-end
grid-column
1 ; 1 / 3 ; 2 / -1 ; 1 / span 2 ;
raccourci pour déclarer grid-column-start et grid-
column-end
grid-areaa ; b ; 2 / 1 / 2 / 4
raccourci pour déclarer grid-row-start, grid-row-end, grid-column-start et grid-
column-end
row-gap0 ; 1em ; 30px ;définit la taille des gouttières entre les lignes
column-gap0 ; 1em ; 30px ;définit la taille des gouttières entre les colonnes
gap0 ; 1em ; 10px 20px ;définit la taille des gouttières : raccourci pour row-gap et column-gap

Les transitions

PropriétéValeurs (exemples)Description
transitionmargin-right 2s ; 
margin-right 2s ease-in-out, color 2s; 
raccourci pour transition-property, transition-duration, transition-timing-function et transition-delay. 
transition-delay1s ; 250ms ;durée à attendre avant de débuter la transition
transition-duration500ms; 3s ;durée de l’animation
transition-propertymargin-right ; all ; propriétés css sur lesquelles un effet de transition va être appliqué
transition-timing-functionlinear ; ease-in ; steps(6, end) ; cubic-bezier(.29, 1.01, 1, -.68) ;décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d’accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

Les transformations

PropriétéValeurs (exemples)Description
backface-visibilitycxxxxxx
perspectivecxxxxxx
perspective-origincxxxxxx
rotatecxxxxxx
scalecxxxxxx
transformcxxxxxx
transform-boxcxxxxxx
transform-origincxxxxxx
transform-stylecxxxxxx
translatecxxxxxx

Les animations

PropriétéValeurs (exemples)Description
animationcxxxxxx
animation-delaycxxxxxx
animation-directioncxxxxxx
animation-durationcxxxxxx
animation-fill-modecxxxxxx
animation-iteration-countcxxxxxx
animation-namecxxxxxx
animation-play-statecxxxxxx
animation-timing-functioncxxxxxx

Exercices

1. Les sélecteurs

Écrivez un sélecteur pour chacun des énoncés suivants.

  1. Tous les éléments <a> emboités dans un élément <p>.
  2. Tous les éléments <img> appartenant à la classe encadre et placés dans un élément <div> appartenant à la classe enonce.
  3. Tous les éléments <abbr> qui possèdent un attribut title.
  4. Tous les éléments <img> dont l’attribut width vaut 300.
  5. Tous les éléments <time> dont l’attribut datetime a été défini et qui sont situés dans un élément <article> appartenant à la classe remarque.
  6. Tous les éléments <p> qui sont fils d’un élément <div> de la classe exemple.
  7. Tous les éléments <img> de classe encadre placés dans un élément <p> dont l’id est important.
  8. Chaque premier élément <img>, mais qui n’est pas forcément le premier enfant, dont le père est un élément <div>.
  9. Tous les éléments <img> fils de rang impair d’un élément quelconque du document html.
  10. Tous les éléments <a> dont la cible est un fichier d’extension .jpg situé dans le premier élément <p> qui est fils d’un élément <article> de la classe exercice.
  11. Les éléments <div> de la classe remarque qui sont le premier frère suivant d’un élément <div> de classe reponse.
  12. Toutes les lignes de rang pair situées dans le corps d’une table. +
  13. Le second élément de type <p> fils d’un élément <article> placé dans un élément <section>.

2. Autres exercices

Exercices CSS CodinGame

Exercices w3schools sur les modèles de boîtes

Et les autres exercices sur ce même site du w3schools…

Le Flux

Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web.

L’ordre dans lequel apparaissent les balises dans le code HTML sera l’ordre dans lequel les éléments seront affichés et apparaîtront dans le document, c’est le Flux. Cela signifie que par défaut, chaque élément est dépendant des éléments qui l’entourent.

Il faut garder à l’esprit qu’un élément dans le flux sera toujours plus simple à manipuler et plus flexible dans sa relation aux autres éléments. Gardez en tête que laisser à un élément son comportement naturel est toujours à privilégier. Autrement dit, on ne sortira un élément du flux que lorsqu’on ne pourra pas faire autrement.

Structure HTML et rendu CSS des balises : bloc et en-ligne

Historiquement, HTML ne proposait que deux catégories d’éléments : les éléments de niveau block et les éléments de niveau inline. Cette catégorisation autorise ou non certaines imbrications (par exemple un niveau inline de peut pas contenir de niveau block).

  • Les éléments de rendu “bloc” se placent toujours l’un en dessous de l’autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise p) ou les éléments d’une liste (balise li). Par ailleurs, un élément “bloc” occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur. On peut citer : h1puloldltableblockquoteetc. [liste complète des éléments HTML en bloc]
    • Il occupe l’entièreté de la largeur de son conteneur ;
    • Il permet l’attribution de marges verticales ;
    • Il permet la modification de sa hauteur et largeur.
  • Les éléments de rendu “en-ligne” se placent toujours l’un à côté de l’autre afin de rester dans le texte. Par exemple : le renforcement d’une partie de texte à l’aide de la balise em, ou encore aimgstrongabbrspan, etc. [liste complète des éléments HTML en ligne]
    • Sauf exception, les éléments de type en-ligne n’ont pas de dimension à proprement parler par défaut (il n’occupent que la place minimum nécessaire à leur contenu).

Rendu CSS : la propriété display

Notons que tout élément peut être “reclassé” dans le type opposé grâce à la propriété display. Des propriétés CSS d’un élément (display: blockinlinelist-iteminline-blocktabletable-cell,…) découlent ses spécificités d’affichage, son positionnement dans le flux.

inline-block

Les éléments de rendu inline-block conservent les mêmes caractéristiques que les “inline”, mais peuvent être dimensionnés, par exemple la balise <input>.

list-item

Les éléments de rendu list-item ont un rendu de type “block” mais peuvent bénéficier des propriétés CSS liées aux puces (list-stylelist-style-typelist-style-imagelist-style-position , …), par exemple la balise <li>.

table, table-row, table-cell

Les éléments de rendu tabletable-rowtable-cell possèdent le même comportement que les éléments de tableaux et cellules (<table><tr><td>). Ils permettent de centrer les contenus verticalement et d’avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.

D’autres valeurs pour le display

Voici une liste exhaustive de valeurs pour display

Rendu CSS : La propriété position

La propriété position est celle vers laquelle on se doit de se tourner en premier lieu dès que l’on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c’est là toute la raison d’être de cette puissante propriété.

La position statique

static est la valeur par défaut de tous les éléments. Un élément avec position: static; n’est positionné d’aucune manière spéciale. Un élément static est dit non positionné et un élément avec une propriété position ayant une valeur autre que static est dit positionné.

La position relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence. Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu’ils considèrent que l’élément est toujours dans le flux à sa position initiale.

Attribuer à un élément une position relative peut être pratique voire indispensable dans d’autres situations, dont les plus courantes sont sans nul doute les suivantes:

  • Servir de référent à un élément enfant positionné en absolu (rappelons qu’un élément positionné absolument grâce aux propriétés topleft, … le fera par rapport à la fenêtre du navigateur à défaut d’avoir un parent lui-même positionné)
  • Bénéficier de la possibilité d’utiliser la propriété z-index pour gérer des superpositions d’éléments (propriété inopérante pour des éléments du flux)

La position fixe

Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu’il reste toujours à la même place même si la page défile. De la même manière qu’avec un élément positionné en relative, nous pouvons utiliser les propriétés toprightbottom et left.

Les navigateurs mobiles ont, étonnement, un support très approximatif de la valeur fixed.

La position absolue

absolute est la valeur la plus délicate. absolute se comporte comme fixed sauf que son positionnement est relatif à l’élément parent positionné le plus proche au lieu d’être relatif à la fenêtre du navigateur. Si un élément positionné en absolute n’à aucun élément parent positionné, il utilise le corps du document et se déplace avec le document au défilement de la page. N’oubliez-pas qu’un élément “positionné” est un élément dont la position est tout sauf static.

Un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu’il rencontre.

L’élément, n’étant plus dans le flux naturel, perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l’élément parent.

Il est capital de noter qu’un élément bénéficiant d’une position absolue ne bougera pas de sa position initiale tant que l’une des propriétés topbottomleft ou right n’a pas été précisée; il s’agit d’ailleurs là d’un comportement applicable à toutes les positions.

La position sticky

Un élément dont la propriété de position vaut sticky se comporte comme un élément positionné de façon relative jusqu’à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu’à atteindre le bord opposé du bloc englobant.

La propriété float

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d’habillages. Un habillage est une pratique courante dans le média print consistant à “enrouler” un texte autour d’un élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média favori.

À l’instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu’occupe son contenu. Le principe de base est simple: un élément 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.

Nettoyer les flottants

La propriété clear s’utilise conjointement aux float et permet à un élément (qui peut être d’ailleurs lui-même flottant) de ne plus subir le comportement d’habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).

Exemple de mise en page

Voici le style de résultat recherché :

Voici notre structure HTML :

<div id="conteneur">
  <div id="header">
    <!-- Ceci est mon haut de page -->
  </div>
  <div class="wrap">
    <div id="sidebar">
      <!-- Ceci est ma colonne latérale -->
    </div>
    <div id="contenu">
      <!-- Ceci est mon contenu principal -->
    </div>
  </div>
  <div id="footer">
    <!-- Ceci est mon pied de page -->
  </div>
</div>

Et ajoutons les déclarations de propriétés css suivantes :

#header {background: red;}
#conteneur {width:760px; margin:0 auto;}
#sidebar {background: green;}
#contenu {background: blue;}
#footer {background: orange;}

Avec les positions absolues

Ajoutons les déclarations de propriétés css suivantes :

#sidebar {position:absolute; width:170px;}
#contenu {margin-left:170px;}

Cela fonctionne apparemment, malheureusement si ma colonne de gauche est plus longue que mon contenu principal, la propriété position ne pourra plus être employée sous peine de voir notre pied de page se superposer en-dessous du header.

Avec des flottements

La mise en forme CSS se contentera de sortir du flux l’élément utile :

#wrap {overflow:hidden;}
#sidebar {float:left; width:170px;}
#contenu {margin-left:170px;}

Cependant :

  • Nous détournons une propriété de son rôle initial
  • Nous alourdissons notre code HTML uniquement à des fins de mise en forme
  • Nous rajoutons une ligne supplémentaire dans notre feuille de style pour créer le contexte de formatage

Centrage des éléments

Vient toujours le moment où l’on veut centrer des contenus ou tout un site.

Pour centrer horizontalement un texte, on utilisera text-align. Pour centrer horizontalement un bloc, on utilisera la technique des marges automatiques.

#main {width: 600px; margin: 0 auto; }

max-width

Utiliser max-width à la place de width améliorera la gestion des petites fenêtres. C’est très important lorsque l’on créé un site accessible sur mobile.

#main {max-width: 600px;margin: 0 auto; }

Modèles de boîtes et box-sizing

Si nous parlons de la propriété width, nous devrions parler du box model. Quand vous ajustez la propriété width d’un élément, celui-ci peut paraître plus gros que ce que vous avez indiqué : la bordure et le padding de l’élément l’étirent au delà de la largeur spécifiée.
Quand vous ajoutez la propriété box-sizing: border-box; à un élément, le padding et la bordure de cet élément n’augmentent plus sa largeur.

.simple {width: 500px;margin: 20px auto;box-sizing: border-box;}

C’est tellement mieux que certains auteurs veulent que tous les éléments de toutes leurs pages fonctionnent de la même manière. Ils ajoutent donc ce bout de CSS à leurs pages :

* {box-sizing: border-box;}

Puisque box-sizing est plutôt récent, vous devriez utiliser les préfixes -webkit- et -moz- pour l’instant, comme dans les exemples.

Centrage des éléments absolute

Pour les éléments positionnés en “position: absolute” et autres éléments positionnés hors du flux, la technique des marges latérales automatiques ne fonctionne pas.

Il existe une solution grâce aux transformations et notamment aux translations :

.truc-a-centrer {
  position: absolute; /* postulat de départ */
  top: 50%; 
  left: 50%; /* à 50%/50% du parent référent relatifs à la taille du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}