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.
Comment fonctionnent les feuilles de style
En trois étapes !
- Commencer avec un document balisé en HTML,
- Écrire les règles pour définir la façon dont les éléments doivent être affichés,
- Associer la feuille de style au document HTML.
Écrire les règles
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 apparaitre.
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,
- déclarations : elles fournissent les instructions de rendu.
Une déclaration est constituée d’une propriété et d’une valeur.
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; }
Nous avons vus les sélecteurs h1 et p, ce sont des sélecteurs de type d’éléments. Ils définissent les règles qui s’appliqueront à tous les h1 ou à tous les p, respectivement, du document.
Un autre type de sélecteur est le sélecteur par ID, qui sélectionne un élément en se basant sur la valeur de l’attribut id de l’élément. Ils sont indiqués avec le symbole dièse (#). Par exemple le sélecteur #recette va cibler l’élément avec id=”recette”.
Les sélecteurs de classe se base sur la valeur de l’attribut class des éléments. Ils sont spécifiés avec un point (.). Par exemple .special va cibler tous les éléments qui sont marqués avec class=”special”.
Grouper des sélecteurs
p, ul, td, th { color: navy; }
Les sélecteurs descendants
Les sélecteurs descendants ciblent des éléments qui sont à l’intérieur, et du coup son descendant d’un autre élément.
li em { color: olive; }
h1 em, h2 a em, h3 em { color: red; }
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 ceratin nombre de règles de style. Il doit être nommé avec l’exention .css. et lié au document (grâce à l’élément link) 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.
<head>
<title>Titre</title>
<style>
/* les règles de style ici */<br />
</style>
</head>
Styles en ligne
Il est possible d’applique des règles directement depuis les éléments HTML eux-même.
<h1 style="color: red;">Introduction</h1>
Structure d’un document
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 :
- à tout style marqué comme !important par l’utilisateur,
- à tout style marqué comme !important par l’auteur,
- aux styles de l’auteur (les feuilles de style du site),
- aux styles de l’utilisateur,
- 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 apparraissant en dernier “gagne”.
p { color: red; }
p { color: blue; }
p { color: green; }
Dans cet 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; }
Références du W3C sur les sélecteurs
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 d’un document. Il existe également une variante pour ne cibler qu’un seul espace de noms et une variante pour cibler tous les espaces de noms
Exemple :* permettra de cibler tous les éléments du 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; }
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.
Références du W3C sur les sélecteurs
Les propriétés
Liste exhaustive des propriétés css : liste des propriétés CSS du W3C, ou sur le site w3schools.
Mise en forme du texte
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
font-family | police1, police2, police3, serif, sans-serif, monospace | Nom de police |
@font-face | Nom et source de la police | Police personnalisée |
font-size | 1.3em, 16px, 120%… | Taille du texte |
font-weight | bold, normal | Gras |
font-style | italic, oblique, normal | Italique |
text-decoration | underline, overline, line-through, blink, none | Soulignement, ligne au-dessus, barré ou clignotant |
font-variant | small-caps, normal | Petites capitales |
text-transform | capitalize, lowercase, uppercase | Capitales |
font | – | Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family. |
text-align | left, center, right, justify | Alignement horizontal |
vertical-align | baseline, middle, sub, super, top, bottom | Alignement vertical (cellules de tableau ou éléments inline-block uniquement) |
line-height | 18px, 120%, normal… | Hauteur de ligne |
text-indent | 25px | Alinéa |
white-space | pre, nowrap, normal | Césure |
word-wrap | break-word, normal | Césure forcée |
text-shadow | 5px 5px 2px blue (horizontale, verticale, fondu, couleur) | Ombre de texte |
Exercices w3schoos : effets de texte
Exercices w3schools : polices web
Couleurs et fonds
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… | Couleur du texte |
background-color | Identique à color | Couleur de fond |
background-image | url(‘image.png’) ; linear-gradient(white, grey) ; | Image de fond |
background-attachment | fixed, scroll | Fond fixe |
background-repeat | repeat-x, repeat-y, no-repeat, repeat | Répétition du fond |
background-position | (x y), top, center, bottom, left, right | Position du fond |
background | – | Super propriété du fond. Combine : background-image, background-repeat, background-attachment, background-position |
opacity | 0.5 | Transparence |
Exercices w3schools : couleurs
Exercices w3schools : gradients
Les boîtes
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
width | 150px, 80%… | Largeur |
height | 150px, 80%… | Hauteur |
min-width | 150px, 80%… | Largeur minimale |
max-width | 150px, 80%… | Largeur maximale |
min-height | 150px, 80%… | Hauteur minimale |
max-height | 150px, 80%… | Hauteur maximale |
margin-top | 23px | Marge en haut |
margin-left | 23px | Marge à gauche |
margin-right | 23px | Marge à droite |
margin-bottom | 23px | Marge en bas |
margin | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge. Combine : margin-top, margin-right, margin-bottom, margin-left. |
padding-left | 23px | Marge intérieure à gauche |
padding-right | 23px | Marge intérieure à droite |
padding-bottom | 23px | Marge intérieure en bas |
padding-top | 23px | Marge intérieure en haut |
padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. Combine : padding-top, padding-right, padding-bottom, padding-left. |
border-width | 3px | Épaisseur de bordure |
border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… | Couleur de bordure |
border-style | solid, dotted, dashed, double, groove, ridge, inset, outset | Type de bordure |
border | 3px solid black | Super-propriété de bordure. Combine border-width, border-color, border-style.Existe aussi en version border-top, border-right, border-bottom, border-left. |
border-radius | 5px | Bordure arrondie |
box-shadow | 6px 6px 0px black (horizontale, verticale, fondu, couleur) | Ombre de boîte |
Exercices w3schools : bordures
Exercices w3schools : rembourage
Exercices w3schools : dimensions
Exercices w3schools : modèles de boîtes
Positionnements et affichages
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
display | block, inline, inline-block, table, table-cell, none… | Type d’élément (block, inline, inline-block, none…) |
visibility | visible, hidden | Visibilité |
clip | rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche) | Affichage d’une partie de l’élément |
overflow | auto, scroll, visible, hidden | Comportement en cas de dépassement |
float | left, right, none | Flottant |
clear | left, right, both, none | Arrêt d’un flottant |
position | relative, absolute, static | Positionnement |
top | 20px | Position par rapport au haut |
bottom | 20px | Position par rapport au bas |
left | 20px | Position par rapport à la gauche |
right | 20px | Position par rapport à la droite |
z-index | 10 | Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres. |
Exercices : affichage et visibilité
Les listes
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none | Type de liste |
list-style-position | inside, outside | Position en retrait |
list-style-image | url(‘puce.png’) | Puce personnalisée |
list-style | – | Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image. |
Les tableaux
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
border-collapse | collapse, separate | Fusion des bordures |
empty-cells | hide, show | Affichage des cellules vides |
caption-side | bottom, top | Position du titre du tableau |
Les boîtes flexibles
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
flex | cxxx | xxx |
flex-basis | cxxx | xxx |
flex-direction | cxxx | xxx |
flex-flow | cxxx | xxx |
flex-grow | cxxx | xxx |
flex-shrink | cxxx | xxx |
flex-wrap | cxxx | xxx |
order | cxxx | xxx |
Les grilles
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
grid-template-columns | mot 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-rows | mot 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-columns | 200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr) | taille des colonnes d’une grille créée implicitement |
grid-auto-rows | 200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr) | taille des lignes d’une grille créée implicitement |
grid-auto-flow | row ; column ; row dense ; | contrôle du placement automatique dans la grille |
grid | auto-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-start | auto ; 3 ; -1 ; span 2 ; | définit le début de la position sur une ligne d’un élément |
grid-column-start | auto ; 3 ; -1 ; span 2 ; | définit le début de la position sur une ligne d’un élément |
grid-row-end | auto ; 3 ; -1 ; span 2 ; | définit la position de fin d’un élément |
grid-column-end | auto ; 3 ; -1 ; span 2 ; | définit la position de fin d’un élément |
grid-row | 1 ; 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-area | a ; b ; 2 / 1 / 2 / 4 | raccourci pour déclarer grid-row-start, grid-row-end, grid-column-start et grid- column-end |
row-gap | 0 ; 1em ; 30px ; | définit la taille des gouttières entre les lignes |
column-gap | 0 ; 1em ; 30px ; | définit la taille des gouttières entre les colonnes |
gap | 0 ; 1em ; 10px 20px ; | définit la taille des gouttières : raccourci pour row-gap et column-gap |
Les transitions
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
transition | margin-right 2s ; margin-right 2s ease-in-out, color 2s; | raccourci pour transition-property, transition-duration, transition-timing-function et transition-delay. |
transition-delay | 1s ; 250ms ; | durée à attendre avant de débuter la transition |
transition-duration | 500ms; 3s ; | durée de l’animation |
transition-property | margin-right ; all ; | propriétés css sur lesquelles un effet de transition va être appliqué |
transition-timing-function | linear ; 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-visibility | cxxx | xxx |
perspective | cxxx | xxx |
perspective-origin | cxxx | xxx |
rotate | cxxx | xxx |
scale | cxxx | xxx |
transform | cxxx | xxx |
transform-box | cxxx | xxx |
transform-origin | cxxx | xxx |
transform-style | cxxx | xxx |
translate | cxxx | xxx |
Les animations
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
animation | cxxx | xxx |
animation-delay | cxxx | xxx |
animation-direction | cxxx | xxx |
animation-duration | cxxx | xxx |
animation-fill-mode | cxxx | xxx |
animation-iteration-count | cxxx | xxx |
animation-name | cxxx | xxx |
animation-play-state | cxxx | xxx |
animation-timing-function | cxxx | xxx |
Exercices
1. Les sélecteurs
Écrivez un sélecteur pour chacun des énoncés suivants.
- Tous les éléments
<a>emboités dans un élément<p>. - Tous les éléments
<img>appartenant à la classe encadre et placés dans un élément<div>appartenant à la classeenonce. - Tous les éléments
<abbr>qui possèdent un attributtitle. - Tous les éléments
<img>dont l’attributwidthvaut 300. - Tous les éléments
<time>dont l’attributdatetimea été défini et qui sont situés dans un élément<article>appartenant à la classeremarque. - Tous les éléments
<p>qui sont fils d’un élément<div>de la classeexemple. - Tous les éléments
<img>de classe encadre placés dans un élément<p>dont l’idest important. - Chaque premier élément
<img>, mais qui n’est pas forcément le premier enfant, dont le père est un élément<div>. - Tous les éléments
<img>fils de rang impair d’un élément quelconque du document html. - 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 classeexercice. - Les éléments
<div>de la classeremarquequi sont le premier frère suivant d’un élément<div>de classereponse. - Toutes les lignes de rang pair situées dans le corps d’une table. +
- Le second élément de type
<p>fils d’un élément<article>placé dans un élément<section>.
2. Autres exercices
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 (baliseli). Par ailleurs, un élément “bloc” occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur. On peut citer :h1,p,ul,ol,dl,table,blockquote, etc. [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 encorea,img,strong,abbr,span, 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: block, inline, list-item, inline-block, table, table-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-style, list-style-type, list-style-image, list-style-position , …), par exemple la balise <li>.
table, table-row, table-cell
Les éléments de rendu table, table-row, table-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
top,left, … 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-indexpour 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 top, right, bottom 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 top, bottom, left 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 */
}