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 : [Link]
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="[Link]" />
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="[Link]" />
</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 ([Link]) : 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)
[Link] : tous les éléments de type machin (nom de balise) ayant
la classe truc
.[Link] : 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)
[Link]: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="[Link]">un lien</a> Item 2
</li> avec
</ul> un lien
<p><a href="[Link]">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="[Link]">Truc</a></li>
<li><a href="[Link]">Machin</a></li>
</ol>
</li>
<li>
<a href="[Link]">Bidule</a>
<em><a href="[Link]">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="[Link]">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("[Link]") no-repeat left bottom;
}
est équivalent à
body {
background-image: url("[Link]");
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