Scribd
Importer
37 vues59 pages

Outils de Développement Web L1: Olivier Mallet

qw

Transféré par

Ghiles ZENTAR
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
37 vues59 pages

Outils de Développement Web L1: Olivier Mallet

qw

Transféré par

Ghiles ZENTAR
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 59

CSS

Outils de développement web L1

Olivier Mallet

Université de Rouen
1 Généralités

2 Sélecteurs
Classes et identifiants
Sélecteurs utilisant le contexte

3 Propriétés
Propriétés du texte
Couleurs et image de fond
Dimensions, bordures et marges
Positionnement
Généralités

Généralités

Séparation fond-forme :
HTML → contenu et structure
CSS → présentation
Feuille de style : ensemble de règles qui définissent la présentation
d’un document HTML
Une feuille de style peut être définie par
l’auteur du site
l’utilisateur
le navigateur (feuille de style par défaut)
Conflits possibles entre différentes feuilles de style ⇒ mécanisme de la
cascade pour les résoudre (CSS = Cascading Style Sheets)
Inventées par Håkon Wium Lie et Bert Bos (1994–95)

Olivier Mallet (Université de Rouen) CSS 3 / 59


Généralités

Généralités (2)

Standard du W3C (1996)


Validation : http://jigsaw.w3.org/css-validator/
Avantages de CSS :
Facilite l’écriture et la mise à jour des pages Web
Permet de créer des sites moins lourds et plus accessibles
Une page doit rester lisible même sans styles

Olivier Mallet (Université de Rouen) CSS 4 / 59


Généralités

Où placer le code CSS ?

Dans l’attribut style des balises HTML (à éviter)


Dans une balise <style> </style> située dans l’en-tête
Dans un fichier externe avec l’extension .css auquel on fait référence
depuis la page HTML (balise <link> dans l’en-tête)

Exemple
<link rel="stylesheet" href="feuille.css" />

Olivier Mallet (Université de Rouen) CSS 5 / 59


Généralités

Exemple : code CSS dans les balises HTML

<!DOCTYPE html>

<html lang="fr">
<head><title>Ma page</title></head>

<body>
<h1 style="color: red">Partie 1</h1>
<p>Texte de la partie 1</p>

<h1 style="color: red">Partie 2</h1>


<p>Texte de la partie 2</p>
</body>
</html>

Olivier Mallet (Université de Rouen) CSS 6 / 59


Généralités

Exemple : code CSS dans l’en-tête de la page

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma page</title>
<style>
h1 {color: red;}
</style>
</head>

<body>
<h1>Partie 1</h1>
<p>Texte de la partie 1</p>

<h1>Partie 2</h1>
<p>Texte de la partie 2</p>
</body>
</html>
Olivier Mallet (Université de Rouen) CSS 7 / 59
Généralités

Exemple : code CSS dans un fichier séparé


Page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma page</title>
<link rel="stylesheet" href="feuille.css" />
</head>

<body>
<h1>Partie 1</h1>
<p>Texte de la partie 1</p>

<h1>Partie 2</h1>
<p>Texte de la partie 2</p>
</body>
</html>
Fichier CSS (feuille.css) : h1 {color: red;}
Olivier Mallet (Université de Rouen) CSS 8 / 59
Généralités

Résultat de ces exemples

Olivier Mallet (Université de Rouen) CSS 9 / 59


Sélecteurs

Syntaxe basique

Feuille de style : suite de règles de la forme


sélecteur {
propriété1: valeur1;
propriété2: valeur2;
...
}
Le sélecteur définit les éléments auxquels on applique le style
Sélecteur le plus simple : nom de balise

Exemple (Tous les titres de niveau 1 en rouge)


h1 {color: red;}

Commentaires : entre /* et */

Olivier Mallet (Université de Rouen) CSS 10 / 59


Sélecteurs

Sélecteur multiple

Exemple
h1, h2, h3 {color: red;}
est équivalent à
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

Olivier Mallet (Université de Rouen) CSS 11 / 59


Sélecteurs Classes et identifiants

Classes

HTML : on peut attribuer une classe à certains éléments (attribut


class)
Une classe peut contenir plusieurs valeurs séparées par des espaces
Choisir des noms de classes liés au fond et pas à la forme
Sélecteur CSS correspondant :
.truc : tous les éléments ayant la classe truc (truc est l’une des
valeurs contenues dans l’attribut class)
machin.truc : tous les éléments de type machin (nom de balise) ayant
la classe truc
.truc.bidule : tous les éléments ayant la classe truc et la classe
bidule. . .

Olivier Mallet (Université de Rouen) CSS 12 / 59


Sélecteurs Classes et identifiants

Classes : exemple

Exemple (Dialogue avec une couleur pour chaque personnage)


Code HTML :
<p class="personnage1">Oui !</p> Résultat :
<p class="personnage2">Non !</p>
<p class="personnage1">Si !</p> Oui !
Code CSS : Non !
p.personnage1 {color: red;} Si !
p.personnage2 {color: blue;}

Olivier Mallet (Université de Rouen) CSS 13 / 59


Sélecteurs Classes et identifiants

Plusieurs classes pour le même élément

Exemple
Code CSS :
.difficile {color: red;}
.amusant {font-weight: bold;}

Code HTML :
<p class="difficile">Ceci est difficile</p>
<p class="amusant">Ceci est amusant</p>
<p class="difficile amusant">Ceci est difficile mais aussi
amusant</p>

Résultat :
Ceci est difficile
Ceci est amusant
Ceci est difficile mais aussi amusant
Olivier Mallet (Université de Rouen) CSS 14 / 59
Sélecteurs Classes et identifiants

Remarque sur les conflits de règles

Et si on avait écrit .amusant {color: blue;} ?


À chaque sélecteur, on associe une priorité
En cas de conflit, le sélecteur de plus grande priorité l’emporte
Si plusieurs sélecteurs ont la même priorité, celui qui est déclaré en
dernier l’emporte
Dans cet exemple, .difficile et .amusant ont la même priorité : le
dernier paragraphe serait donc bleu

Olivier Mallet (Université de Rouen) CSS 15 / 59


Sélecteurs Classes et identifiants

Pseudo-classes

Pour les liens


a:link lien non visité
a:visited lien visité
Pour les interactions
:hover élément survolé
Exemple (Couleur de fond pour certains paragraphes survolés)
p.difficile:hover {background-color:yellow;}

:focus élément qui accepte les évènements clavier ou souris

Exemple (Fond jaune pour certains champs de formulaire sélectionnés)


input:focus, textarea:focus {background-color: yellow;}

Olivier Mallet (Université de Rouen) CSS 16 / 59


Sélecteurs Classes et identifiants

Identifiants

HTML : on peut attribuer un identifiant à certains éléments (attribut


id)
Deux éléments distincts ne peuvent avoir le même identifiant
CSS : sélecteur de la forme #identifiant

Exemple (Couleur de fond spéciale pour un menu)


Code HTML : <div id="menu"> </div>
Code CSS : #menu {background-color: aqua;}

Olivier Mallet (Université de Rouen) CSS 17 / 59


Sélecteurs Sélecteurs utilisant le contexte

Sélecteur de descendant
sel1
Sélecteur de la forme sel1 sel2
Représente tous les éléments correspondant au ···
sélecteur sel2 contenus dans un élément
correspondant au sélecteur sel1
sel2

Exemple
Code HTML :
Résultat :
<ul id="maliste">
<li>Item 1</li> Item 1
<li>Item 2 avec <a href="x.html">un lien</a> Item 2
</li> avec
</ul> un lien
<p><a href="y.html">Un autre lien</a></p>
Un autre lien
Code CSS : #maliste a {color: gray;}

Olivier Mallet (Université de Rouen) CSS 18 / 59


Sélecteurs Sélecteurs utilisant le contexte

Sélecteur de descendant : généralisation

sel1
Sélecteur de la forme sel1
sel2 ...seln-1 seln ···
Représente tous les éléments sel2
correspondant à seln
contenus dans un élément ···
correspondant à seln-1
seln-1
contenu dans . . . contenu
dans un sel2 contenu dans ···
un sel1
seln

Olivier Mallet (Université de Rouen) CSS 19 / 59


Sélecteurs Sélecteurs utilisant le contexte

Exemple de la syntaxe précédente

Exemple
Code HTML :
<ol> Résultat :
<li>Sortir le plat de son emballage</li>
<li>Le faire cuire au micro-ondes 1. Sortir le plat de son em-
<ul> ballage
<li>Temps de cuisson : 4 min</li>
2. Le faire cuire au micro-
<li>Puissance maximale</li>
</ul> ondes
</li> ◦ Temps de cuisson : 4
<li>Servir</li> min
</ol>
◦ Puissance maximale
Code CSS : 3. Servir
ol li ul li {color: red;}

Olivier Mallet (Université de Rouen) CSS 20 / 59


Sélecteurs Sélecteurs utilisant le contexte

Sélecteur d’enfant
Sélecteur de la forme sel1 > sel2
sel1
Représente tous les sel2 directement contenus dans
un sel1 (pas d’élément contenant sel2 et contenu
sel2
dans sel1)

Exemple
Code HTML :
<body>
<div> Résultat :
<p>Un paragraphe</p>
</div> Un paragraphe
<p>Un autre paragraphe</p>
Un autre paragraphe
</body>
Code CSS : body > p {color: red;}

Olivier Mallet (Université de Rouen) CSS 21 / 59


Sélecteurs Sélecteurs utilisant le contexte

Sélecteur d’enfant : généralisation


On peut généraliser comme le sélecteur de descendant :
Exemple
<ul>
<li>
<ol>
<li><a href="p1.html">Truc</a></li>
<li><a href="p2.html">Machin</a></li>
</ol>
</li>
<li>
<a href="p3.html">Bidule</a>
<em><a href="p4.html">chouette</a></em></li>
</li>
</ul>
Le sélecteur ul > li > a permet d’appliquer un style au lien « Bidule »

Olivier Mallet (Université de Rouen) CSS 22 / 59


Sélecteurs Sélecteurs utilisant le contexte

Sélecteur de successeur immédiat

Sélecteur de la forme sel1 + sel2 ···


Représente tous les sel2 qui suivent
immédiatement un sel1 sel1 sel2

Exemple
Code HTML :
<div class="bidon">
Résultat :
Un bloc bidon
</div> Un bloc bidon
<p>Un paragraphe</p>
Un paragraphe
<p>Un autre paragraphe</p>
Code CSS : Un autre paragraphe
.bidon + p {background-color: yellow;}

Olivier Mallet (Université de Rouen) CSS 23 / 59


Sélecteurs Sélecteurs utilisant le contexte

Le sélecteur universel
Notation : *
C’est un joker qui représente n’importe quel élément
Exemple (On affiche tout le texte en rouge)
* {color: red;}

Souvent utilisé en combinaison avec d’autres sélecteurs


Exemple (On affiche sur fond rouge les descendants des paragraphes)
Code HTML :
<p>
Il y a <a href="a.html">un lien</a> et <em>un point crucial</em>.
</p>

Code CSS : p * {background-color: red;}


Résultat : Il y a un lien et un point crucial .
Olivier Mallet (Université de Rouen) CSS 24 / 59
Propriétés

Unités de longueur

Unités absolues
cm centimètre
mm millimètre
in pouce (1 in = 2,54 cm)
1
pt point (1 pt = 72 in ≃ 0,35 mm)
pc pica (1 pc = 12 pt = 16 in ≃ 4,2 mm)
1
px pixel (1 px = 96 in ≃ 0,26 mm)
Unités relatives
em taille de la police
ex hauteur des minuscules
% pourcentage
Pas d’espace avant l’unité ou le signe % (exemples : 50px, 75%)
Séparateur décimal : le point (exemple : 1.5em)

Olivier Mallet (Université de Rouen) CSS 25 / 59


Propriétés Propriétés du texte

Propriétés du texte

font-family police spécifique (Arial, Times. . .) ou famille (serif /


sans-serif / monospace. . .)
une police serif (ex : Times) s’affiche comme ceci
une police sans-serif (ex : Arial) comme ceci
et une police monospace (ex : Courier) comme ceci

Exemple
h1 {font-family: Arial;}
h2 {font-family: sans-serif;}

On peut indiquer plusieurs valeurs séparées par ,

Exemple (On utilisera Arial si elle est disponible, sinon Helvetica et en


dernier recours sans-serif)
h1 {font-family: Arial, Helvetica, sans-serif;}

Olivier Mallet (Université de Rouen) CSS 26 / 59


Propriétés Propriétés du texte

Propriétés du texte (2)

font-size (taille des caractères) longueur / pourcentage


référence pour les unités relatives : taille du texte de
l’élément parent

Exemple (Titres de niveau 1 trois fois plus gros que le texte de leur
parent)
h1 {font-size: 300%;}

Olivier Mallet (Université de Rouen) CSS 27 / 59


Propriétés Propriétés du texte

Propriétés du texte (3)

font-style normal / italic / oblique


la valeur italic donne ceci (avec une police serif)
la valeur oblique donne ceci (idem)

Exemple
Code HTML : <h2>Tout est en italique <em>sauf ceci</em></h2>
Code CSS :
h2 {font-style: italic;}
h2 em {font-style: normal;}

Résultat : Tout est en italique sauf ceci

Olivier Mallet (Université de Rouen) CSS 28 / 59


Propriétés Propriétés du texte

Propriétés du texte (4)

font-variant normal / small-caps (Petites Majuscules)

Exemple
ul li {font-variant: small-caps;}

font-weight (graisse) normal / bold (gras)

Exemple
#menu a {font-weight: bold;}

Olivier Mallet (Université de Rouen) CSS 29 / 59


Propriétés Propriétés du texte

Propriétés du texte (5)

line-height (interligne) normal / longueur / pourcentage / nombre

Exemple (Interligne double pour les portions de texte préformaté)


pre {line-height: 200%;} ou pre {line-height: 2em;} ou
pre {line-height: 2;}

text-decoration none / underline (souligné) / overline (surligné) /


line-through (barré) / plusieurs valeurs

Exemple (Liens surlignés et soulignés quand on les survole)


a:hover {text-decoration: underline overline;}

Olivier Mallet (Université de Rouen) CSS 30 / 59


Propriétés Propriétés du texte

Propriétés du texte (6)


text-transform none / capitalize (1re lettre de chaque mot en
majuscule) / lowercase (tout en minuscules) / uppercase
(tout en majuscules)

Exemple
strong {text-transform: uppercase;}

text-align (alignement) left / right / center / justify

Exemple
h1 {text-align: center;}

text-indent (décalage de la 1re ligne) longueur / pourcentage

Exemple (Retrait de première ligne d’1 cm pour tous les paragraphes)


p {text-indent: 1cm;}

Olivier Mallet (Université de Rouen) CSS 31 / 59


Propriétés Couleurs et image de fond

Couleurs

16 mots-clés en anglais pour les couleurs de base (voir page suivante


avec les équivalents RGB)
Pour utiliser d’autres couleurs, il faut se servir de la notation RGB :
Notation RGB « classique » : rgb(R,G,B) (0 ≤ R, G, B ≤ 255)
Notation RGB en hexadécimal : #RrGgBb (00 ≤ Rr , Gg, Bb ≤ FF )
Notation RGB en pourcentage : rgb(R%,G%,B%) (0 ≤ R, G, B ≤ 100)

Olivier Mallet (Université de Rouen) CSS 32 / 59


Propriétés Couleurs et image de fond

Couleurs de base (1/2)

aqua rgb(0,255,255) #00FFFF rgb(0%,100%,100%)


black rgb(0,0,0) #000000 rgb(0%,0%,0%)
blue rgb(0,0,255) #0000FF rgb(0%,0%,100%)
fuchsia rgb(255,0,255) #FF00FF rgb(100%,0%,100%)
gray rgb(128,128,128) #808080 rgb(50%,50%,50%)
green rgb(0,128,0) #008000 rgb(0%,50%,0 %)
lime rgb(0,255,0) #00FF00 rgb(0%,100%,0%)
maroon rgb(128,0,0) #800000 rgb(50%,0%,0%)

Olivier Mallet (Université de Rouen) CSS 33 / 59


Propriétés Couleurs et image de fond

Couleurs de base (2/2)

navy rgb(0,0,128) #000080 rgb(0%,0%,50%)


olive rgb(128,128,0) #808000 rgb(50%,50%,0%)
purple rgb(128,0,128) #800080 rgb(50%,0%,50%)
red rgb(255,0,0) #FF0000 rgb(100%,0%,0%)
silver rgb(192,192,192) #C0C0C0 rgb(75%,75%,75%)
teal rgb(0,128,128) #008080 rgb(0%,50%,50%)
white rgb(255,255,255) #FFFFFF rgb(100%,100%,100%)
yellow rgb(255,255,0) #FFFF00 rgb(100%,100%,0%)

Olivier Mallet (Université de Rouen) CSS 34 / 59


Propriétés Couleurs et image de fond

Couleurs de premier plan et d’arrière-plan

color couleur du texte


Exemple
a:visited {color: gray;}

background-color couleur de fond


Exemple
#menu {background-color: #CCFFFF;}

Olivier Mallet (Université de Rouen) CSS 35 / 59


Propriétés Couleurs et image de fond

Autres propriétés de l’arrière-plan

background-image url("chemin/image") (chemin absolu ou relatif par


rapport au fichier CSS)
background-attachment fixed (l’image de fond reste fixe par rapport à
la page) / scroll (par défaut : elle défile)
background-repeat no-repeat (image de fond non répétée) /
repeat-x (répétée horizontalement) / repeat-y (répétée
verticalement) / repeat (par défaut : répétée dans les 2
directions)
background-position position horizontale (left / center / right /
longueur / pourcentage) et position verticale (top / center
/ bottom / longueur / pourcentage) séparées par un espace
background raccourci pour toutes ces propriétés (y compris
background-color)

Olivier Mallet (Université de Rouen) CSS 36 / 59


Propriétés Couleurs et image de fond

Propriétés de l’arrière-plan : exemple

Exemple
body {
background: url("mer.jpg") no-repeat left bottom;
}
est équivalent à
body {
background-image: url("mer.jpg");
background-repeat: no-repeat;
background-position: left bottom;
}

Olivier Mallet (Université de Rouen) CSS 37 / 59


Propriétés Dimensions, bordures et marges

Modèle de boîte

marge externe (margin)


bordure
marge interne (padding)

contenu height

width

Olivier Mallet (Université de Rouen) CSS 38 / 59


Propriétés Dimensions, bordures et marges

Les dimensions du contenu d’une boîte

width largeur du contenu


height hauteur du contenu
Pas pour les éléments en ligne
Valeurs possibles de ces 2 propriétés : longueur / pourcentage / auto
(valeur par défaut)

Exemple (Tous les paragraphes occuperont 50 % de la largeur


disponible)
p{
width: 50%;
}

Olivier Mallet (Université de Rouen) CSS 39 / 59


Propriétés Dimensions, bordures et marges

Bordures

border-style none / hidden / solid / dashed / dotted / double /


groove / ridge / inset / outset
border-width longueur / thin / medium / thick
border-color couleur
border raccourci pour spécifier ces 3 propriétés
Exemple
div {border: 2px dashed red;} est équivalent à

div {
border-width: 2px;
border-style: dashed;
border-color: red;
}

Olivier Mallet (Université de Rouen) CSS 40 / 59


Propriétés Dimensions, bordures et marges

Valeurs par défaut des propriétés de bordure

La valeur par défaut de border-style est none ⇒ toujours donner


une valeur à border-style si on veut que la bordure soit visible !
La valeur par défaut de border-width est medium
La valeur par défaut de border-color est la couleur du texte

Exemple
/* pas de bordure (border-style=none) */
p {border: 1px black}

/* le texte et la bordure sont en rouge


border-width a la valeur medium */
div {
color:red;
border-style: solid;
}

Olivier Mallet (Université de Rouen) CSS 41 / 59


Propriétés Dimensions, bordures et marges

Exemples pour la propriété border-style

Olivier Mallet (Université de Rouen) CSS 42 / 59


Propriétés Dimensions, bordures et marges

Différents styles pour les 4 bordures

Propriétés spécifiques : border-left-width, border-top-color. . .

Exemple (Bordure rouge double de 10 pixels pour tous les


paragraphes, uniquement à gauche)
p{
border-left-width: 10px;
border-left-style: double;
border-left-color: red;
}

Propriétés border-top, border-right, border-bottom,


border-left (s’utilisent comme border)

Exemple (Même définition de style en plus concis)


p {border-left : 10px double red;}

Olivier Mallet (Université de Rouen) CSS 43 / 59


Propriétés Dimensions, bordures et marges

Différents styles pour les 4 bordures (2)


On peut donner plusieurs valeurs aux propriétés border-style,
border-width ou border-color :
2 valeurs : haut_et_bas droite_et_gauche
Exemple
border-style: dashed dotted;

3 valeurs : haut droite_et_gauche bas


Exemple
border-color: blue green red;

4 valeurs : haut droite bas gauche


Exemple

border-width: 0px 1px 2px 3px;


Olivier Mallet (Université de Rouen) CSS 44 / 59
Propriétés Dimensions, bordures et marges

Marges
Marges extérieures :
margin-left longueur / pourcentage / auto
de même :
margin-right
margin-top
margin-bottom
margin 1, 2, 3 ou 4 valeurs (comme pour les bordures)

Remarque
margin: auto; permet de centrer un bloc horizontalement.

Marges intérieures :
padding-left
padding-right
padding-top
padding-bottom
padding
Olivier Mallet (Université de Rouen) CSS 45 / 59
Propriétés Positionnement

Positionnement dans le flux courant (ou flux normal)

Un bloc est placé sous son frère précédent et occupe toute la largeur
disponible dans son conteneur
Un élément en ligne se place à la suite du précédent sur la même ligne
(on passe à la ligne s’il n’y a plus de place)
Positionnement par défaut qu’on peut changer avec la propriété
position
Un élément est dit positionné si on a défini une valeur pour sa
propriété position

Olivier Mallet (Université de Rouen) CSS 46 / 59


Propriétés Positionnement

Positionnement dans le flux courant : exemple

Exemple
Résultat :
Code HTML :
<p>Un paragraphe</p>
<p id="truc"> Un autre</p>
<p>Encore un autre</p>
Code CSS :
p {border: solid;}

Olivier Mallet (Université de Rouen) CSS 47 / 59


Propriétés Positionnement

Positionnement relatif

position: relative;
Variante du positionnement dans le flux courant
On peut décaler l’élément par rapport à sa position normale avec les
propriétés top, right, bottom et left
Attention !
left: 20px; décale de 20 pixels à droite (par rapport au bord gauche) !
Les autres éléments ne sont pas affectés par ce décalage
Permet de superposer des éléments

Olivier Mallet (Université de Rouen) CSS 48 / 59


Propriétés Positionnement

Positionnement relatif : exemple

Exemple (Positionnement relatif sans décalage)


Code HTML : Résultat :
<p>Un paragraphe</p>
<p id="truc"> Un autre</p>
<p>Encore un autre</p>
Code CSS :
p {border: solid;}
#truc {
position: relative;
}

Rien ne change par rapport au positionnement dans le flux courant !

Olivier Mallet (Université de Rouen) CSS 49 / 59


Propriétés Positionnement

Positionnement relatif : exemple (2)

Exemple (Positionnement relatif avec des décalages)


Code HTML :
<p>Un paragraphe</p> Résultat :
<p id="truc"> Un autre</p>
<p>Encore un autre</p>
Code CSS :
p {border: solid;}
#truc {
position: relative;
bottom : 1.5em;
left : 20px;
}

Olivier Mallet (Université de Rouen) CSS 50 / 59


Propriétés Positionnement

Positionnement absolu

position: absolute;
L’élément sort du flux normal
Les autres éléments se placent comme s’il n’existait pas
Décalage avec top, right, bottom, left
Position de référence : premier ancêtre positionné (en relatif ou
absolu) ou la fenêtre du navigateur

Olivier Mallet (Université de Rouen) CSS 51 / 59


Propriétés Positionnement

Positionnement absolu : exemple

Exemple
Code HTML : Résultat :
<body>
<p>Un paragraphe</p>
<p id="truc"> Un autre</p>
<p>Encore un autre</p>
</body>
Code CSS :
body, p {border: solid;}
#truc {
position:absolute;
left : 20px;
bottom : 0px;
}

Olivier Mallet (Université de Rouen) CSS 52 / 59


Propriétés Positionnement

Ordre d’empilement

Les positionnements relatif et absolu permettent de superposer des


éléments
Cas par défaut : l’élément positionné déclaré en dernier dans le code
HTML passe devant
Pour modifier ce comportement : propriété z-index (ne marche
qu’avec les éléments positionnés)
Si 2 éléments sont superposés, celui qui a le z-index le plus grand
passe devant

Olivier Mallet (Université de Rouen) CSS 53 / 59


Propriétés Positionnement

z-index : exemple

Exemple
Code HTML :
<p id="p1">Un</p> Résultat :
<p id="p2">Deux</p>

Code CSS :
#p1 {position: absolute; z-index: 2;
width: 150px; height: 140px;
top: 100px; left: 200px;
background-color: lime;}
#p2 {position: absolute; z-index: 1;
width: 225px; height: 100px;
top: 50px; left: 25px;
background-color: yellow;}

Olivier Mallet (Université de Rouen) CSS 54 / 59


Propriétés Positionnement

Positionnement flottant

Propriété float
L’élément se place à gauche ( float: left; ) ou à droite ( float: right; ) de
son conteneur
Les éléments qui le suivent se placent dans l’espace libre, en épousant
sa forme
Permet de placer des blocs côte à côte
Applications : illustration dans un texte, lettrine
Interdire le voisinage d’un élément flottant : propriété clear (pour les
blocs)
left pas d’élément flottant à gauche
right pas d’élément flottant à droite
both aucun élément flottant au même niveau

Olivier Mallet (Université de Rouen) CSS 55 / 59


Propriétés Positionnement

Positionnement flottant : exemple

Code HTML :
<p class="rem">Attention, ceci est
important !</p>
<p>Voici la suite du texte qui s’enroule Résultat :
autour du premier paragraphe. C’est
tout !</p>
Code CSS :
.rem {
background-color: red;
float: right;
width: 50%;
}

Olivier Mallet (Université de Rouen) CSS 56 / 59


Propriétés Positionnement

La propriété clear : exemple


Code HTML :
<p class="rem">Attention, ceci est
important !</p>
<p>Para 1</p>
<p id="p2">Para 2</p>
Résultat :
Code CSS :
.rem {
background-color: red;
float: right;
width: 50%;
}
#p2 {
background-color: blue;
clear: both;
}

Olivier Mallet (Université de Rouen) CSS 57 / 59


Propriétés Positionnement

Le positionnement inline-block

display: inline-block;
Les éléments ainsi positionnés se placent côte à côte (comme les
éléments en ligne) et peuvent être redimensionnés (comme les blocs)
avec les propriétés width et height
Propriété vertical-align pour modifier l’alignement vertical des
éléments :
baseline
bottom
middle
top
longueur
pourcentage

Olivier Mallet (Université de Rouen) CSS 58 / 59


Propriétés Positionnement

Le positionnement inline-block : exemple

Exemple
Code HTML :
<div id="ib">
<p>Paragraphe</p>
<p>Un second paragraphe</p>
</div> Résultat :
Code CSS :
Paragraphe Un second
#ib p { paragraphe
border: 1px solid black;
display: inline-block;
width: 100px;
vertical-align: top;
}

Olivier Mallet (Université de Rouen) CSS 59 / 59

Vous aimerez peut-être aussi