CoursDevpWeb1 PartieCSS 2023 2024

Partie 3
Les feuilles de styles

CSS3
1
Plan – Partie 3
 Présentation du CSS
 La syntaxe CSS
 Intégration du style dans une page web
 Adapter les styles aux médias
 Priorité des styles en cascade
Plan
 Les sélecteurs de style

 Valeurs et unités utilisées
 Mise en forme du texte
 Mise en forme des listes
 Mise en forme des tableaux
 Arrière-plans et Bordures
 Ombrage et Opacité
 Mise en page du site
2
Présentation du CSS
CSS : Cascading Style Sheets (feuilles de style en cascade).
 Un standard publié par W3C.
 Il appartient à la famille de HTML5.
 Rôle : mettre en forme un document web par
Généralités
l’intermédiaire des propriétés d’apparence (couleur, taille,

bordure, …).
 Objectif : séparation du contenu (HTML) de la mise en
forme (CSS) qui permet de :
 Eviter la redondance du même code de mise en forme dans
les pages web.
 Réduire le temps de connexion
 Utiliser des styles génériques avec des noms explicites
 Mise à jour plus facile
 Code HTML est réduit en taille et en complexité (faciliter la
lecture du code). 3
Origine de CSS
 CSS1
- la spécification finale est publié en 17 décembre 1996
Origine du CSS
- Il définit les propriétés de rendu typographique du texte (polices,

couleur, taille des caractères, espacements, …).
- Il dispose de 50 propriétés
 CSS2
- Il débute en 1997 avec un groupe de travail au sein du W3C présidé
par Chris Lilley.
- 1998 : publication sous forme d’une recommandation.
- 2007 : le groupe comporte des représentants
- Il dispose de 70 propriétés supplémentaires (mise en page, styles
propres aux médias, polices spécifiques,…).
4
 CSS2.1
- Le travail débute en 1999;
- 2001 : publication de la version révisé (Cascade level 2,Revision 1);
- 2007 : publication d’une recommandation après 8 versions.
Origine du CSS
 CSS3
- le 3ème niveau des feuilles de styles en cascade;
- Le travail débute en parallèle que CSS2.1 (1999);
- Il devient modulaire;
- 2007 : publication d’une recommandation avec des nouveaux
modules : transformation 2D/3D, bordures arrondis ombre aux
boites et aux textes, Media Queries, ….
 CSS4
- 2010 : début de travail par le groupe en parallèle avec les modules
de CSS3
5
- Il est en cours de recherche
La syntaxe CSS
 Une feuille de style CSS fonctionne sous forme des règles.

 Chaque règle est composé d’un sélecteur et d’un
ensemble de déclarations de style.
Le code CSS
 Une déclaration est un couple de propriété-valeur.

sélecteur
{
propriété : valeur;
/*autres propriétés*/
}
 Chaque déclaration se termine par « ; »

 Une règle peut s’écrire sur plusieurs lignes. 6
Exemple CSS La syntaxe CSS
7
Exemple CSS La syntaxe CSS
8
La syntaxe CSS
Règles syntaxiques
- Les feuilles de style ne sont pas sensibles à la casse.
Les règles syntaxiques
- Ils ne tiennent pas compte des espaces et des retours en ligne.

- Les valeurs des attributs (id, class et name) ne contiennent que
des caractères, des chiffres, un tiret (-) et l’underscore (_). Ils ne
commencent pas par un nombre.
- Les fonctions CSS nécessitent des parenthèses ().
- Le commentaire commence par /* et se termine par */.
- Les chaines de caractères générées avec la
propriété content nécessitent toujours des guillemets.
- Pour mettre les guillemets simples ou double dans une chaîne
affichable (simple : « \’ », double : « \" »).
- Pour mettre un retour d’un ligne « \000a » ou « \a » .
- Le jeu de caractères est définit dans la feuille de style par la
règle @charset (Exemple : @charset "UTF-8") .
9
Intégration du style dans une page web
Le style peut s’appliquer de trois manières :
 Style local ou en ligne
Où appliquer un style ?
Le style est dans la balise elle-même.

Exemple :
<h1 style="text-decoration: underline; color : red;“ > Titre </h1>
 Style interne
Le style est dans l’entête du document entre les balises <style>
et </style>.
<head>
<style type ="text/css">
Exemple : h1
{
text-decoration : underline;
}
</style>
</head> 10
 Style externe
- Le code CSS est dans un fichier distinct ayant l’extension .css
- Le code est appelé dans l’entête du document avec la balise <link>.

- Ce code peut être utilisé par plusieurs pages HTML.
Exemple :
<html> h1
<head> {
<link href="style.css" font-size : 200%;
type="text/css" }
rel="stylesheet"/>
</head>
style.css
<body>
<h1> Ceci est un titre </h1>
</body>
</html>
11
Mapage.html
 Style externe
Le code CSS peut être inséré d’une autre façon en utilisant la règle CSS
@import qui permet d’importer une feuille de style dans une autre
feuille.
<head>
…….
<style type ="text/css">
@import "mes-styles.css";
</style>
……..
</head>
A NOTER
Avec <!Doctype HTML>, l’attribut type est inutile.

12
Styles dédiés aux périphériques de sortie Adapter les styles aux médias
L’adaptation des feuilles de style au périphérique de sortie est
possible soit dans :
 La feuille de style directement
@media screen
{
/*règle de style */
}
 L’élément <link> grâce à l’attribut media.

<link rel="stylesheet" href="style.css"
media="screen" />
Les types de médias possibles : all (quel que soit le média),

print (impression papier), handheld (écrans de petites taille), tv
(télévision), projection (présentations projetées), screen (écran
d’ordinateur en couleur), speech (synthèse vocale). 13
Priorité des styles en cascade
Principe de cascade
 La combinaison de différentes feuilles de styles
Les styles en cascade
appliqués à un même document.

 L’affectation de plusieurs propriétés pour un même
élément pour lui donner sa mise en forme finale.
 Des règles de priorités s’appliquent pour sélectionner
un élément.
 Ordre de priorité
- La mot clef !important (forcer l’application d’une règle CSS)
- CSS local
- CSS interne
- CSS externe
14
Priorité des règles
 La valeur !important
- Elle peut être ajouté à n'importe quelle valeur dans une règle
Ordre des règles CSS
CSS.  La règle devient prioritaire.

- Une règle avec la mention !important a une priorité de 10000.
#parag1 {
Affichage
color : red;
}
p{ Le premier paragraphe.
Le deuxième paragraphe.
color : blue
!important;
}
CSS
15
Exemple :
HTML
Ordre des règle CSS
CSS Affichage
<p id="parag1">
Le premier #parag1 { Le premier paragraphe.
paragraphe color : red; Le deuxième paragraphe.
</p> }
<p> p{
Le deuxième color : blue;
paragraphe }
</p>
Le sélecteur par identifiant ( # ) est prioritaire sur un sélecteur

par type d'élément ( p ).
16
 La priorité des sélecteurs
- Tous les sélecteurs n'ont pas la même priorité.
Ordre des règles CSS
- En cas de contradiction entre deux règles, celle qui s'applique

est celle qui a le sélecteur le plus prioritaire (le sélecteur est le
plus précis).
- Pour déterminer la priorité d'un sélecteur, il faut considérer la
logique suivante :
• Une règle écrite dans l'attribut style d'une balise HTML a une priorité de
1000.
• Une règle avec un sélecteur sur un identifiant ( # ) a une priorité de 100.
• Une règle avec un sélecteur sur une classe ( . ) ou des pseudo-classe ( : )
a une priorité de 10.
• Une règle avec un sélecteur sur un type d'élément ( p ) ou des pseudo-
elements ( :: ) a une priorité de 1.
• Le sélecteur étoile ( * ) a une priorité de 0. 17
- Lorsqu'un sélecteur comporte plusieurs parties

combinées, les priorités de chacune des parties
La priorité des sélecteurs
s'additionnent pour donner la priorité globale du sélecteur.
- Lorsque le sélecteur est composé de plusieurs parties

séparées par une virgule, chaque partie est considérée
comme un sélecteur à part entière. Chacune des parties
peut éventuellement recevoir une priorité différente.
- Lorsque deux règles contradictoires ont un sélecteur de

même priorité, la dernière règle rencontrée sera appliquée
et remplace les règles précédentes.
18
Exemples
La priorité des sélecteurs - Exemples
/* Sélecteur sur un identifiant -> priorité = 100 */

#parag1 { color : blue;}
/* Sélecteur sur une pseudo-classe -> priorité = 10 */
:link { color : inherit;}
/* Sélecteur sur un type d'élément -> priorité = 1. */
p { font-size : 1.1em;}
/* Règle comportant la mention !important -> priorité = 10000 */
p { color : silver !important}
/* Sélecteur sur un identifiant et un type -> priorité = 101 */
#edit img { width : 25%;}
/* Sélecteur comportant 2 désignations de type -> priorité = 2 */
td>img { width : 100%;} 19
Outil pratique - L’inspecteur
- Il est fourni par la plupart des navigateurs, activé en faisant :
Inspecteur-Outil pratique
clic droit -> inspecter

- Il présente des quantités d'informations, aussi bien sur le code HTML,
que sur les règles CSS appliquées.
- Il montre très bien la règle qui est active et celles qui ont été annulées
à cause d'une priorité inférieure (elles sont barrées).
Styles définis dans l’attribut style
Styles définis entre les balises

<style>… </style>
Styles définis dans un feuille de

style externe
Styles définis dans la feuille de

styles du navigateur
20
Les sélecteurs de style
 Un sélecteur CSS permet de désigner les balises concernées
de la mise en forme éventuellement de nature différente ou
une relation entre deux éléments.
Exemple :
- sélectionner tous les titres de niveau 2 dans le menu,
- sélectionner tous les éléments que l'on a marqués.
 Les sélecteurs CSS trient les éléments de la page selon :

leur type, leurs attributs, leur imbrication dans le code de la
page ou selon l'interaction avec l'utilisateur pour les liens.
 Il est possible de combiner les différents types de sélecteurs
(décrits ci-après).
 CSS définit plusieurs types de sélecteurs pour parcourir l'arbre
de document HTML.
21
Sélecteurs génériques
Sélecteur de type
Le sélecteur de type est le nom d’une balise dans la page web.
élément
{ /* déclaration(s) */ }
HTML
……… CSS
<h2>
Titre en niveau 2 h2
</h2> { font-size: 150%; }
………
La règle s’applique à toutes les balises <h2> et fixe la taille de la

police à 150% de la police normale.
22
Sélecteurs génériques
Sélecteur universel
Le sélecteur (*) sélectionne toutes les balises du document

web et modifie le style de tout le document.
*
HTML
<p>……</p> CSS
<h2>
Titre en niveau 2 *
</h2> { font-family : serif; }
………
23
Sélecteurs d’attributs
Sélecteur d’identifiant
#nom_id
élément#nom_id
HTML
<div id="contenu">
...
</div> CSS
#contenu
{ background-color: yellow; }
La règle s’applique à la balise <div> ayant un identifiant « contenu ».

Il doit être seul et unique dans la page.
24
Sélecteur de classe
.nom_classe
Élément.nom_classe
Exemple :
HTML CSS
<H1 class="stylep"> .stylep
... { color: yellow; }
</H1>
p.stylepp
<p class="stylepp stylep">
{ font-style: italic; }
...
</p>
Les éléments de classe stylep sont
N'importe quel élément
affichés en jaune et de plus les
HTML de la page peut utiliser
paragraphes de cette classe ont en
cette classe.
plus leur texte en italique. 25
Exemple
26
Sélecteur d’attribut
Les autres attributs sont repérés en ajoutant [nom-attribut] à
un sélecteur de type.
élément [attribut]
Exemple :
HTML
CSS
<a
a[title]
href= "http://site.com"
{
title= "cliquer ici">
border: 1px solid silver;
consulter mon site
}
</a>
Sélectionner tous les liens qui possèdent un attribut title.

27
élément [attribut="valeur"]
Exemple : CSS
HTML
a[title = "cliquer ici"]
<a {
href= "http://site.com" border: 1px solid silver;
title= "cliquer ici"> }
consulter mon site
</a>
Sélectionner tous les liens qui possèdent un attribut title égale à

la valeur « cliquer ici».
Remarque :
img[alt = "coucher-soleil"][ width = "100"]
 sélectionne l’élément img dont la valeur de l’attribut alt est égal à « coucher-
soleil » et ayant comme largeur 100px. 28
élément [attribut*="valeur"]
Exemple : CSS
a[title *= "ici"]
{
HTML border: 1px solid silver;
<a }
href= "http://site.com"
title= "cliquer ici">
consulter mon site
</a>
Sélectionner tous les éléments qui possèdent un attribut title qui contient
dans sa valeur le mot « ici ».
29
Remarques :
a [title ^ = "cliquer"]
 sélectionne l’élément a dont la valeur de l’attribut title commence par la

valeur « cliquer ».
a [title $ = "ici"]
 sélectionne l’élément a dont la valeur de l’attribut title se termine par
« ici ».
img [alt ~ = "soleil"]
 sélectionne l’élément img dont la valeur de l’attribut alt contient la sous-
chaîne « soleil » (séparée du reste par un espace).
img [alt | = "soleil"]
 sélectionne l’élément img dont la valeur de l’attribut alt est exactement
égale à « soleil » ou commence par la valeur « soleil» (suivi d’un tiret).
30
Sélecteurs hiérarchiques
<!DOCTYPE html>
<html lang="fr" xml:lang="fr">
<head>
<title>Didacticiel pour le CSS</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel= "stylesheet" type = "text/css" href="essai.css" />


</head>
<body>
<div id="menu">

<ul>
<li><a href="#1">Premier point</a></li>
<li><a href="#2">Deuxième point</a></li>
<li><a href="#3">Troisième point</a></li>
</ul>
</div>

<p> Ceci est un fichier <abbr title="Hypertext Markup Language">HTML</abbr>
utilisant une feuille de style. </p>
<h1><a name="1">Premier point</a></h1>
<p> L'objet de ce fichier est de fournir un support au didacticiel <abbr
title="Cascading Style Sheets">CSS</abbr>. </p>
<p class="navigation">
| <a href="#menu">menu</a> | </p>
<h1><a name="2">Deuxième point</a></h1>
<p> Outre mesure, ce fichier ne présente strictement <em>aucun</em>
intérêt. </p>
<p class="navigation"> | <a href="#menu">menu</a> | </p>
<h1><a name="3">Troisième point</a></h1>
<p> Nous vous souhaitons une bonne journée. </p>
<p class="navigation"> | <a href="#menu">menu</a> | </p>
</body>
</html> 31
Arbre de document
A NOTER
- Chaque élément a un élément parent , sauf l'élément racine html , et
un ou plusieurs élément(s) enfant(s), sauf les éléments terminant une
ramification.
- Un sélecteur suit ces ramifications, en partant du parent HTML, pour
désigner une ou des branches, qui sont des éléments HTML. 32
Sélecteur de descendant
 Noté par un ou plusieurs espaces.
 Désigne les éléments qui ont une relation de parenté.

 Il suffit que la 2ème balise soit descendant, direct ou éloigné,
de la 1ère balise.
div p { text-align: justify; }
Justifier seulement le texte des éléments <p> qui sont inclus dans un
bloc <div>.
#sommaire a { color: gray; }
Colorer en gris uniquement les liens contenus dans l’élément

d’identifiant «sommaire » (id = "sommaire").
33
Sélecteur d’enfant
 Le sélecteur d'enfant, noté ( > ), permet de désigner un
élément par filiation directe à un autre élément ( non les

petits-enfants).
div > p { font-style: italic; }
Mettre en italique le texte de l’élément <p> dans le 1er niveau

d’imbrication à l’intérieur d’une balise <div> (enfant direct).
Cette règle ne s’applique pas sur des balises <p> ayant d’autres
niveau d’imbrication.
#wiki > h1 { font-style: italic; }
Mettre en italique le titre de l’élément <h1> dans le 1er niveau

d’imbrication à l’intérieur d’un élément d’identifiant « wiki » .
34
Sélecteur d’adjacence direct
Le sélecteur de frère adjacent, noté ( + ), permet de définir

un style pour un élément enfant suivant immédiatement

d’un autre élément enfant du même élément parent.
h1 + h2 { color: red; }
<div class="wiki">
Le style s’applique à <h1> Titre 1 </h1>
l’élément <h2> qui suit <h2> Titre 1.1 </h2>
immédiatement <p>Paragraphe...</p>
l’élément <h1>. <h2> Titre 1.2 </h2>
<p>Paragraphe...</p>
</div>
35
Sélecteur d’adjacence indirect
Le sélecteur de frère adjacent indirect, noté ( ~ ), permet de

définir un style pour les éléments précédés immédiatement

ou pas par un élément frère enfant du même élément
parent.
h1 ~ p {font-style : italic; }
<h1> Titre 1 </h1>

Le style s’applique aux <p>Paragraphe1</p>
éléments <p> précédés <h2> Sous-Titre</h2>
de la balise <h1>. <p>Paragraphe2</p>
<blocquote>
<p>Paragraphe...</p>
</blocquote>
36
Les pseudo-classes
 Le pseudo-classe, accolée à une balise, apporte des

précisions au sélecteur (affiner le style).
 Les pseudo-classes sont prédéfinies (on ne peut pas créer

d’autres pseudo-classes).
a :hover { color: red; }
Mettre en rouge le texte d’une balise <a> au moment de survol de

curseur par la souris.
a.menu :hover { color: red; }
Mettre le texte en rouge au passage de la souris mais uniquement

sur les balises <a class= "menu" …./>.
37
Les pseudo-classes
Pseudo-classes pour les liens
:link lien hypertexte non visité L’application de ces pseudo-

:visited lien visité classes respecte l’ordre

suivant
:hover lien survolé d’abord :link puis :visited pui
:active lien cliqué s :hover et enfin :active.
Pseudo-classes d’interaction avec l’utilisateur

:hover élément survolé par la souris
:focus élément qui possède le focus
:active élément au moment ou il est cliqué
:disabled élément désactivé
:enabled élément activé
38
………………
Les pseudo-classes
Autres pseudo-classes
:first-child : premier élément enfant de son conteneur
:last-child : dernier élément enfant de son conteneur
:nth-child(n): n-ième élément enfant de son conteneur
:nth-last-of-child(n):n-ième dernier élément enfant de son

conteneur
:first-of-type : premier type d’élément
:last-of-type : dernier type d’élément
:only-child : élément enfant unique
:only-of-type: élément de type unique
:checked : état coché
:enabled : état activé
:lang(fr): élément qui possède un attribut lang="fr" 39
Les pseudo-éléments
 Le pseudo-élément, accolée à une balise, apporte d’autres

types de précisions au sélecteur.
 CSS 3 ajoute « : » aux pseudo-éléments pour les différencier

des pseudo-classes.
::first-letter: sélectionner uniquement la première lettre du
contenu d’éléments HTML.
::first-line: sélectionner uniquement la première ligne
d’un élément HTML.
::before: insérer (texte ou image)avant une balise spécifiée.
::after: insérer (texte ou image)après la balise spécifiée.
40
Valeurs et Unités utilisées
Unité de taille
 Les unités sont utilisées pour spécifier : une taille des caractères,
une marge, une bordure, des dimensions, largeur/hauteur de
blocs, des images, …. .
 Les unités sont toujours notées par deux lettres.
Unités de taille
 Pas d’espace entre la valeur et l’unité.

 Le choix de l'unité dépend du média auquel s'applique la
feuille de style.
Exemple: Les unités absolues sont destinées aux feuilles de
styles d'impression.
 Les unités de taille utilisées pour le style d’affichage sont : px

(pixels), em (taille de police : est la plus recommandée pour une
grande stabilité entre les différents systèmes d’exploitation et les
navigateurs), % (pourcentage). 41
Valeurs et Unités utilisées
pt (1 point = 0,35 mm = 1/72 in) : entier
pc (1pica = 12 pt ) : réel
in (1 inch ou 1 pouce = 2.54 cm) : réel
Unités de taille absolue
cm (1 cm = 10 mm) : entier
mm (1 mm = 24 pc) : entier
Unités de mesure
Unités de taille relative

em (la taille de police par défaut) : réel
ex (la taille de la lettre minuscule de l’élément ) : réel
% ( à la taille de l’objet parent) : entier
px (la taille de l'écran et dépend de la résolution employée) : entier
1 em = 100% = 16 px
medium (taille standard), xx-small, Taille définie par mots-clés

x-small, small, large, x-large, xx-large
42
Les couleurs
Les couleurs sont définies à l’aide :
p {color : #f00; }
p {color : #ff0000; }
 Des noms : blue, red, white, …. p {color : rgb(255,0,0); }
Codage des couleurs
p {color : rgb(100%,0%,0%);}
 Des codes
 #RRVVBB : notation hexadécimale classique où chaque paire
de lettres représente une couleur RR, VV et BB (Exp: #ffcc00)
 #RVB : notation hexadécimale abrégé (Exp: #fd3)
 rgb(R, V, B) : notation décimale où chaque composante est

définie par un nombre compris entre 0 et 255.
 rgb(R%, V%, B%) : notation en pourcentage où chaque

composante est représenté par un nombre décimal entre 0 et
100.
43
Les couleurs
La spécification CSS3 ajoute d’autres notations de couleurs :
 rgba(R, V, B,a) : chaque lettre R, V et B est un nombre décimal entre 0
et 255, avec a indique l’opacité ou la transparence entre 0 et 1 (valeur
par défaut).
Codage des couleurs
 HSL(Hue, Saturation, Luminance) : TSL (Teinte, Saturation, Luminosité).

La notation HSL correspond à 3 valeurs :
• valeur1 : exprimée en degré de 0° à 359°. Elle correspond à une
couleur dans la roue chromatique ( rouge (0°), jaune (60°), vert (120°)
cyan(180°) bleu (240°) et magenta (300°) ).
• valeur2 et valeur 3 : exprimée en pourcentage et notent
respectivement la saturation et la luminosité. (Exp: hsl(0,100%,50%)
représente la couleur rouge).
 HSLa (h, S% , L% , opacité) : ajoute une valeur comprise entre 0 et 1
pour l’opacité (Exp: hsl(0,100%,50%,0.5) représente la couleur rouge
semi-transparent).
44
Mise en forme du texte
Propriété Rôle Valeur Exemples
font-size Modifier la taille taille absolue (px, mm), p{
Appliquer un style sur les textes
de la police de taille relative(em, ex, %), font-size : 14px;

texte xx-small, }
x-small, h1{
medium, font-size : small;
large, }
x-large,
smaller (plus petit),
larger (plus grand),
font-family Indiquer la police nom de la police, h1{
à utiliser famille de police font-family : Arial;
exp : serif ( Times New }
Roman, Bodoni, Georgia, h1{
Garamond, ….) font-family : Arial,
Hevetica, Georgia;
}
45
Appliquer un style sur les textes Mise en forme du texte

font-style Mettre un texte italic, p{
en italique normal (par défaut), font-style : italic;
oblique }
font-weight Mettre un texte normal, h1{
en gras bold, font-weight : bold;
bolder (valeur = 700), }
lighter,
valeur entre 100 et 900
font-variant Mettre un texte small-caps, p{
normal en normal (valeur par font-variant :
petites défaut) small-caps;
majuscules }
46
font- Choisir entre les normal, .condensed {
stretch versions une fonte plus resserrée que font-stretch : 50%;

condensées ou la normale }
étendues d'une semi-condensed, condensed, .normal {
police extra-condensed, font-stretch
ultra-condensed; :100%;
}
une fonte plus étendue que
.expanded {
la normale
font-stretch :
semi-expanded, expanded,
200%;
extra-expanded,
}
ultra-expanded;
pourcentage (entre 50% et
200%)
Affichage
47
color Modifier la nom-couleur, h1{
couleur d’un Code hexadecimal (#rrvvbb color : grey;

texte ou #rvb), }
rgb (r,v,b), rgba (r,v,b)
hsl(), hsla()
text- Transformer un capitalise, p{
transform texte en uppercase, text-transform :
majuscule ou lowercase, uppercase;
minuscule none }
text-indent Indenter la valeur précise (exp: 20px), p{
première ligne du Pourcentage (valeur text-indent : -30px;
texte d’un relative à la largeur du }
paragraphe bloc).
Valeurs avec mots-clé p{
each-line (affecte la ligne 1 text-indent : 5em
du bloc), each-line ;
hanging (affecte toutes les }
lignes sauf la ligne1)
48

text- Permettre le underline, p{

decoration soulignement overline, text-decoration :
d’un texte line-through, underline;
none (normal par défaut) }
a{
text-decoration :
none;
} /*enlève le
soulignement de
lien*/
text-align Permettre left (texte aligné à gauche), p{
l’alignement Right (texte aligné à droite), text-align : justify;
horizontal du Justify (texte justifié), }
texte center (texte centré),
auto (par défaut)
49
Appliquer un style sur les textes Mise en forme du texte

letter- Faire varier valeur positive ou négative h2{
spacing l’espacement (exp: 8px), letter-spacing :
entre les normal (par défaut) -5px;
caractères. }
word- Faire varier valeur positive ou négative h1{
spacing l’espacement (exp: 8px), word-spacing :
entre les mots normal (par défaut) 20px;
d’un paragraphe. }
line-height Modifier les un nombre, p{
interlignes valeur de longueur, line-height : 2.5;
normal (par défaut), }
pourcentage p{
line-height : 2em;
}
50
vertical-align Permettre l’alignement baseline, .parag1{
vertical du texte par sub, vertical-align :

rapport à un autre supper, supper;
élément du code. top, }
middle,
bottom,
valeur de longueur,
Pourcentage
direction Faire modifier la direction ltr (left to right), h1{
d’un texte de gauche à rtl (right to left) direction : rtl;
droite ou au contraire. }
width Définir la largeur de la valeur de longueur, p{
zone entourant le pourcentage width: 75%;
contenu textuel. }
height Définir la longueur de la valeur de longueur, p{
zone entourant le pourcentage height : 20px;
contenu textuel. }
51
Propriété Rôle Valeur
float Faire flotter un élément left (élément
autour du texte. flottera à gauche),

right (élément
flottera à droite)
Exemple :
CSS
HTML
.imgfloat
<p> <img src= "logo.jpg" {
class= "imgfloat" />un float: left;
habillage du texte normal }
d’un paragraphe, mis à la
suite de l’image flottante Affichage
</p>
Remarque :
Lors de l’habillage à un objet, il faut placer l’élément
flottant en premier dans le code HTML.
52
Mise en forme des listes

Appliquer un style sur les listes
list-style- Déterminer /*listes non ordonnées*/ .stylist{

type l’apparence de la disc (cercle plein), list-style-type :
puce ou le style de circle (cercle vide), disc;
numérotation de la square (carré), }
liste. /*listes ordonnées*/
decimal (1,2,3,..),
decimal-leading-sero
(01,02,03,…),
slower-roman (I, ii, iii, …),
upper-alpha (A, B, C,…),
lower-alpha (a, b, c, ….)
list-style- Remplacer les url (emplacement de h1{
image puces par une l’image), list-style-image :
image none url (puce.gif);
}
53
Mise en forme des listes

Appliquer un style sur les listes
list-style- Déterminer la outside (valeur par .position{

position position de la défaut), list-style-position :
seconde ligne ( et inside (dedans) outside;
les lignes suivantes) }
d’un élément de .position2{
liste par rapport à la list-style-position :
puce ou à la inside;
numérotation. }
Exemple :
Affichage
54
Mise en forme des tableaux
Appliquer un style sur les tableaux
border- Spécifier valeur numérique en table{

spacing l’espacement entre px ou en pt, border-spacing :
chaque cellule d’un pourcentage 10px;
tableau }
Exemple : CSS table

{
width: 200px;
border: 1px solid gray;
text-align: center;
border-spacing: 10px;
}
td
{ border: 1px solid silver;
backgground-color:
rgb(213,230,235);
}
Affichage 55
border- Gérer les 2 bordures collapse (fusionne les table{

collapse aux tableaux 2 bordures), border-collapse :
(bordue fait le separate (valeur par collapse;
contour du tableau défaut) (affiche les 2 }
et une autre bordures séparées)
entoure les cellules).
Exemple :
CSS table
{
Affichage
width: 200px;
text-align: center;
border-collapse : collapse;
}
td
{
border: 1px solid silver;
}
56
empty- Déterminer le show (afficher cellule .show{

cells comportement du vide avec bordure et empty-cells : hide;
navigateur en arrière plan visibles), }
rencontrant une hide (valeur par
cellule vide dans un défaut) (affiche les 2
tableau. bordures séparées)
Exemple :
CSS table
{ width: 200px;
Affichage
text-align: center;
}
td
{ border: 1px solid silver;}
.affiche
{ empty-cells: hide;}
57
caption- définit la place de top (placer la caption{

side l'élément HTML légende au-dessus Caption-side :
<caption> du tableau), bottom;
bottom (placer la }
légende au dessous
du tableau)
Exemple :
CSS table
{
Affichage
width: 200px;
border-collapse: collapse;
}
td
{ border: 1px solid silver;}
caption
{
caption-side: bottom;}
58
Arrière-plans et Bordures
Les Arrières-plan
background- Modifier la couleur nom couleur, body{
color d’arrière plan. notation hexadécimale, background-color
Propriétés de fond
: green;
notation en RVB ou en
}
RVBa,
notation HSL ou HSLa,
transparent
background Insérer une image url (fichier de l’image), body{
-image de fond disposé de none (pas d’image de background-
façon classique ou fond) image : url
en mosaique. (soleil.png); }
background Spécifier la taille auto, valeur de longueur, body{
-size de l’image de fond. pourcentage, cover, ……….
contain background-size :
50% 50%; }
59
background- Fixer le fixed (l’image de fond reste fixe par body{
attachement fond. Elle rapport au coin gauche de la fenêtre background-
permet de du navigateur), image : url
voir le texte scroll (l’image de fond defile avec la (soleil.png);
glisser par page) (valeur par défaut) background-

rapport au attachement :
local (l’image de fond defile avec le
fond. fixed; }
contenu de l’élément)
background Répéter no-repeat (l’image ne se répéte pas, body{
-repeat l’image de sera unique), background-
fond en repeat-x (l’image de fond se répéte image : url
mosaique. uniquement sur la première ligne), (soleil.png);
background-
repeat-y (l’image de fond se répéte
repeat : no-
uniquement sur la première
repeat;
colonne),
}
repeat (le fond se répéte en
mosaique) (valeur par défaut).
60
background- Positionner valeur 1 en pixel body{
position précisement l’image valeur 2 en pixel, background-
de fond d’un élément. pourcentage 1 image : url
Par défaut, l’image se pourcentage 2, (soleil.png);
positionne en haut et background-

left ou center ou right |
à gauche. position : 50%
top ou center ou
50%;
bottom
} /*image placée
au centre*/
Exemple :
Affichage
body{
background-image : url (soleil.png);
background-attachement : fixed; /*le fond reste fixe*/
background-repeat : no-repeat; /*le fond ne se répéte pas */
background-position : top right; /*le fond se place en haut et à droite*/
} 61
Les différentes positions possibles avec la propriété background-

position.
62
Propriétés de fond Arrière-plans et Bordures
63
background- Définir les border-box .box{
clip limites de /*l’arrière plan s’étend jusqu’à background-clip:
l’arrière-plan l’extreme limite de la bordure */ content-box;
à l’intérieur background-size:
padding-box
de la boite 50%;
/*l’arrière-plan se limite au
représentée background-
padding*/
par l’élément position : top
content-box left;
/*l’arrière-plan se limite au background-
contenu*/ color : #ffdb3a; }
border-box padding-box content-box

64
background- Spécifier le border-box .box{

origin point d’origine /*la position de l’arrière- background-image : url
de l’image plan est relative à la (ire.png);
d’arrière-plan bordure : image se background-origin:
selon le positionne derrire la border-box;

modèle de bordure */ background-size: 50%;
boite padding-box background-repeat:
/*la position de l’arrière- no-repeat;
plan st relative au }
padding*/
content-box
/*la position est relative au
contenu*/
border-box padding-box content-box

65
Remarques :
 Il est possible d’utiliser la propriété raccourcie background lors

de l’utilisation de plusieurs propriétés en rapport avec le fond.
body {
background : url (bulles.jpg) fixed no-repeat top right;
}
 Il est possible de donner plusieurs images de fond à un élément,

il suffit de les séparer par une virgule.
body {
background : url (bulles.jpg) fixed no-repeat top right, url (soleil.png)
fixed;
} /*la première image se place au-dessus des autres images.*/
66
Les Bordures
Une bordure permet la décoration des frontières d’un élément
d’une page web.
Propriétés de bordure

border-color Définir une nom couleur, body{
couleur notation hexadécimale, border-color : rgb
unique des 4 (215, 230, 245);
notation en RVB ou en
côtés d’un }
RVBa,
élément.
notation HSL ou HSLa,
Remarque :
Les couleurs de chaque côté de l’élément peuvent également être
définies individuellement à l’aide des propriétés suivantes :
border-top-color, border-right-color, border-bottom-color, border-left-color
67
border- Définir valeur de longueur h1{
width l’épaisseur des (Exp: 3px), border-width : 7px;
quatre thin (bordure fine), }
bordures. /*épaisseur s’applique aux

medium (bordure
quatre côtés simultanément*/
Moyenne),
h1{
thick (bordure border-width : 7px 10px;
épaisse) } /*1ère épaisseur s’applique au
côté supérieure et inféreieure
et la 2ème s’applique aux côtés
droite et gauche*/
h1{
border-width : 7px 10px 5px;
} /*1ère épaisseur s’applique au
côté supérieur et la 2ème
s’applique aux côtés droite et
gauche et la 3ème au côté
inférieur*/
68
Remarques :
- Les largeurs de chaque côté de l’élément peuvent également être

définies individuellement à l’aide des propriétés suivantes :
border-top-width, border-right-width, border-bottom-width, border-left-width
- La propriété border-width peut avoir quatre valeurs en désignant

respectivement les valeurs des propriétés : border-top-width, border-
right-width, border-bottom-width et border-left-width.
Exemple : h1{
border-width : 7px 10px 7px 10px;
}
- Avec les 4 valeurs d’épaisseurs, celles-ci sont attribuées dans le sens des
aiguilles d’une montre.
- L’épaisseur ne sera affichée que si le type de la bordure (border-style) est
défini.
69
border- Définir le style solid, h1{
style des bordures dashed,dotted,double, border-style : dotted;
d’un élément. }
groove,ridge,inset,outset,
/*style de bordure
hidden (pas de bordure), s’applique aux quatre
none (equivalent à border- côtés simultanément*/
width : 0px)
70
Remarques :
- Le style de la bordure ne s’affiche que si l’épaisseur de la bordure est

définie.
- Les styles de la bordure de chaque côté de l’élément peuvent également

être définies individuellement à l’aide des propriétés suivantes :
border-top-style, border-right-style, border-bottom-style, border-left-style
- On peut appliquer le même principe d’écriture des quatre propriétés

précédentes, en désignant une, deux, trois ou quatre types de style à la
propriété border-style, (même principe que border-color et border-
width).
71
border- Arrondir les Valeur de rayon de courbure h1{
radius angles d’un de l’angle du coin. border-radius : 15px;
élément. /*la valeur est une valeur de }
longueur ou en pourcentage /*valeur s’applique sur

*/ l’angle des 4 coins*/
1 valeur 2 valeurs 3 valeurs 4 valeurs

border-radius: border-radius: border-radius: border-radius:
15px; 15px 50px; 15px 50px 15px 50px 30px
30px; 5px;
72
Affichage
Exemple :
#blocdiv
{
width : 200px;
height : 80px;
background-color : rgb (185, 205, 225);
border : 1px solid gray;
border-radius : 1em;
}
Remarque :
Il est possible de spécifier indépendamment un angle pour chaque

extrémité en utilisant :
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
border-top-left-radius
73
border- Dessiner une url (fichier-image) slice / #blocdiv{
image image sur la width / valeur valeur border-image :
bordure d'un url(border.png) 30 30
élément. Avec : / 30 30 / round

url (fichier-image) round;
/*adresse relative de }
l’image source servant à a
bordure*/
slice /* la façon don’t
l’image est découpée en
zones*/
width/* la largeur de la
bordure avec l’image*/
valeur /*peut être soit :
round, repeat ou stretch*/
74
Remarques :
- Le processus de décomposition de l’image grâce à la propriété border-
image est comme suit :
- On peut signaler les paramètres avec :

• 1 seule valeur : s’applique pour les quatre côtés.
• 2 valeurs : déterminent la dimension des côtés supérieur/inférieur
et gauche/droite.
• 3 valeurs : déterminent le côté supérieur, gauche/droite et inférieur.
• 4 valeurs : déterminent dans l’ordre bord supérieur, bord droit, bord
inférieur et bord gauche.
75
- Les valeurs sont présentées par des mots clé et désignent

respectivement :
• round : reproduit les images et redimensionne celles-ci afin qu’elles

s’ajustent exactement à la largeur et la hauteur de l’élément.
• repeat : effectue le même effet que round mais sans ajustement.
• stretch : valeur par défaut : étire l’image aux dimensions de
l’élément.
- Lorsqu’on définit une seule valeur alors elle détermine les quatre côtés.
- Lorsqu’on définit 2 valeurs alors elles s’appliquent respectivement au

côté supérieur/inférieur et gauche/doit.
76
Ombrage et Opacité
Les ombres
- Il est possible d’ajouter un effet d’ombre sur le texte ou d’autres
éléments d’une page web.
- Les ombres sur le texte :
Propriété Valeur Exemples
Les ombres
text-shadow x y z couleur .texteOmbre

{
Avec : text-shadow : 2px
x : est le départ de l’ombre vers la 2px 4px #999;
droite }
y : est le départ de l’ombre vers le bas
z : est l’intensité du dégradé ou du flou
(optional, par défaut 0)
couleur : est la couleur de l’ombre
77
Ombrage et Opacité
- Les ombres sur les éléments boites (différents types de blocs) :
box-shadow x y z couleur .blocOmbre
{
Avec : box-shadow : 6px
x : est le départ de l’ombre vers la 6px 0px black;
Les ombres
droite }
y : est le départ de l’ombre vers le bas
z : est l’intensité du dégradé ou du flou
(optional, par défaut 0)
couleur : est la couleur de l’ombre
Affichage
78
Ombrage et Opacité
L’opacité
- Il est possible de faire varier l’opacité ou la transparence d’un
élément.
opacity valeur entre 0 et 1 P
Les ombres
Avec : {
valeur = 1  l’opacité est background-color : black;
complète et la transparence color : red;
est nulle opacity : 0.3;
}
valeur = 0 l’opacité est nulle
et l’élément est transparent
Remarque :
Il est possible d’utiliser la notation RGBa pour varier la transparence d’un
élément.
p
{ background-color : rgba (185, 205, 225, 0.5); }
79
Mise en page du site
Modèle de boite
Modèle de boîtes (box model)
 L’élément boite est appelé aussi conteneur ou bloc.

 Le W3C définit un élément boite comme une zone rectangulaire
constituée de :
- Un contenu,
- Une marge inférieure (padding),
- Une bordure (border),
- Une marge extérieure (margin).
 Avec les feuilles de style, on peut régler distinctement:

- Les 4 marges extérieures,
- Les 4 bordures,
- Les 4 marges intérieures,
- Les dimensions du contenu (largeur et hauteur).
80
Modèle de boîtes (box model) Mise en page du site
dimension totale = dimension du contenu + marges intérieures +

bordures + marges extérieures 81
margin
Modèle de boîtes (box model)
padding
Hauteur (height)
margin padding Largeur (width)
Épaisseur de la bordure
(border-width)
Largeur totale = 2 * (margin + border-width + padding) + width
Hauteur totale = 2 * (margin + border-width + padding) + height

82
Balises bloc et balises en ligne
Eléments blocs et éléments en
En HTML, on distingue deux types de balises :

• Balises en bloc :
- placés les uns en dessous des autres et peuvent être
redimensionnées,
- Exemples : <p>, <div>, <h1>, <h2>,
ligne
- crées un retour à la ligne avant et après,

- les blocs se succèdent dans le flux normal et sont séparés
entre eux par les marges externes.
• Balises en ligne :
- placées les uns à la suite des autres,
- Exemples : <strong>, <span>, <a>, <img>,
- une balise de type inline se trouve obligatoirement à
l’intérieur d’une balise bloc,
- ne crée pas un retour à la ligne. 83
Afficher le type d’un élément
La propriété display
Tous les éléments HTML ont une valeur display par défaut.
84
display Définir le type none li
d’affichage /*élément invisible et {
utilisé pour le dimensions nulles*/ display : inline;
redu d’un inline text-align : center;

élément /*élément d’une ligne margin-right : 3px;
se placent les uns à côté padding-right : 15px;
des autres*/ padding-left : 15px;
background-color :
block
rgb (215,230,245);
/*élément en forme de
}
blocs, places les uns en
dessous des autres*/
inline-block
/*élément positionnées
les uns à côté des autres
mais qui peuvent être
redimensionnées
comme les blocs*/
………………………………………….
85
Exemple complet :
CSS
HTML
ul {
<body> list-style : none;

<ul> padding : 5px; }
<li>Item 1</li> li {
<li>Item 2</li> display : inline;
<li>Item 3</li> text-align : center;
<li>Item 4</li> margin-right : 3px;
</ul> padding-right : 15px;
</body> padding-left : 15px;
background-color : rgb (215,230,245); }
Affichage
86
Largeur d’un élément
 La propriété width fixe la largeur disponible pour le
contenu d’un bloc de texte ou pour une image.
width
 Elle ne comprend pas les marges internes et externes ni

l‘épaisseur de la bordure.
 Les valeurs de width ne peuvent pas être négatives.
La propriété
Propriété width
Valeurs possibles auto (par défaut)
taille relative (conseillée)
taille fixe
Autres propriétés max-width, min-width
Valeurs possibles none (= 0 : valeur par défaut)
taille fixe
87
Hauteur d’un élément
 La propriété height fixe la hauteur disponible pour le
contenu d’un bloc de texte ou pour une image.
height
 Elle ne comprend pas les marges internes et externes ni

l‘épaisseur de la bordure.
 Les valeurs de height ne peuvent pas être négatives.
La propriété
Propriété height
Valeurs possibles auto (par défaut)
taille fixe
Autres propriétés max-height , min-height
Valeurs possibles none (= 0 : valeur par défaut)
taille fixe
88
Les marges externes
 Elles servent à espacer les blocs entre eux.
 Les marges externes sont définies sur chacun des côtés.
La propriété margin
 Les éléments en ligne n’ont pas de marge supérieure, ni

inférieures (margin-top = margin-bottom = auto = 0).
 Il est possible de superposer des blocs en utilisant des valeurs
négatives pour les marges externes.
Propriétés margin-left , margin-right, margin-top , margin-bottom
Valeurs possibles auto : (margin-left = margin-right) centrer l’élément
taille fixe
Propriété raccourci margin
Valeurs possibles une valeur : toutes les marges
2 valeurs : margin-top = margin-bottom, margin-left = margin-right
3 valeurs : margin-top, margin-left = margin-right , margin-bottom
4 valeurs : margin-top, margin-right, margin-bottom, margin-left
89
Les marges internes
 Leur présence évitent que le contenu ne soit pas collé au
cadre du bloc qui le contient.
padding
 Les marges internes ne peuvent pas être négatives.

 Les éléments en ligne n’ont ni marge supérieure ni inférieure.
 La valeur par défaut des marges internes est 0.
 La valeur auto n’existe pas.
La propriété
Propriétés padding-left , padding-right, padding-top , padding-bottom

Valeurs possibles taille relative (conseillée)
taille fixe
Propriété padding
raccourci
Valeurs possibles une valeur : toutes les marges
2 valeurs : padding-top = padding-bottom, padding-left = padding-right
3 valeurs : padding-top, padding-left = padding-right , padding-bottom
4 valeurs : padding-top, padding-right, padding-bottom, padding-left
90
Calcul de la largeur et de la hauteur d’un élément
 Lorsqu’aucune largeur (width) n’est explicitement définie pour un
box-sizing
bloc, alors les marges (padding ou margin) et la bordure (border) sont

ajoutés à la dimension qui sera compressée pour que l’élément ne
dépasse pas son conteneur.
 Lorsqu’on définit une largeur (width) à un élément, sa taille
augmente et l’élément peut dépasser son conteneur.
La propriété

box-sizing Inclure les content-box (valeur par #p2
marges internes défaut) {
et les bordures /*toute marge ou bordure box-sizing :
dans le calcul de ajouté augmente la taille de border-box;
la taille d’un l’élément*/ }
élément border-box
/*taille de l’élément ne change
pas et inclue les paddings et
les bordures*/ 91
Exemple : .conteneur {
CSS width : 80%;
HTML background-color : #777;
box-sizing
<body> border : 1px solid black; }

<div class=‘conteneur’> p {
<p id=‘p1’> width : 100%;
un premier paragraphe</p> background-color : #0CC;
<p id=‘p2’> padding : 20px;
un deuxième paragraphe</p> border : 10px solid black; }
<p id=‘p3’> #p2 {
La propriété
un troisième paragraphe</p> box-sizing : content-box; }

</div> #p3 {
</body> box-sizing : border-box; }
Affichage
92
Positionnement des éléments
 Le positionnement permet de modifier le placement des boites
Différents positionnements
par rapport à leur position par défaut dans la mise en page.
 La propriété CSS position ne s'applique qu'aux éléments ayant la

propriété display:block.
 Il y a différents types de positionnement à appliquer à des
éléments HTML :
 position statique : position par défaut pour l’élément
 position relative : par rapport à sa position statique dans le flux normal.
 position absolue : par rapport au bloc conteneur.
 position fixe : par rapport à l’écran (ne bouge pas lors de défilement)
Propriété position
Valeurs possibles static (par défaut) | relative | absolute | fixed
93
 Le positionnement utilise les décalages haut, bas, gauche et droit

pour définir là où placer l’élément positionné.
Propriété top , bottom , left , right

Valeurs possibles none (pas de décalage, valeur par défaut)
Valeurs relatives
Valeurs fixes
Exemple :
p.Note
{
position : relative;
top : 5px;
left : 10px;
}
94
position : relative
L'élément reste dans le flux de la page, mais peut être décalé par
rapport à la position qu'il devrait normalement occuper.

CSS
HTML
Affichage
95
position : absolute
 L'élément n’est plus dans le flux normal de la page.

 Sa position n'est plus déterminée par les éléments qui le

précèdent et que lui-même n'a plus d'influence sur la position
des éléments qui le suivent.
 Le positionnement n'est absolu que par rapport au bloc
parent.
- Si un bloc parent est positionné se déplace, tous ses enfants
positionnés en "absolute" se déplaceront avec lui.
- Si un bloc parent est positionné en "static", sa position n'a plus la
moindre influence sur la position de ses enfants. Le point de repère
devient alors le coin supérieur de la page et les blocs enfants peuvent
"sortir" de leur bloc parent.
96
position : absolute
HTML Affichage
CSS
97
position : fixed
 L'élément est "fixé" sur la page par rapport à la vue par la

fenêtre du navigateur elle-même.
 Ce type de positionnement est idéal pour un menu de
navigation fixe dans une page dont le contenu défile avec
l'ascenseur.
position : sticky
 Il s'agit essentiellement d'un hybride entre position relative et

position fixe.
 L'élément à positionner est en positionnement relatif jusqu'à
un certain seuil (Exp: 10px du haut de la fenêtre), seuil au delà
duquel il sera en positionnement fixe.
98
Flottement des éléments
 Un élément boite sera retiré du flux normal pour flotter vers le côté
gauche ou droit dans son élément parent, mais est séparé de celui qui
le précède ou qui le suit.

 Le flottement ne peut pas s’appliquer en cas de positionnement
absolu.
Propriété float
Valeurs possibles none (valeur par défaut)
left (élément décalé à gauche)
right (élément décalé à droite)
 La propriété clear permet d’interrompre l’effet provoqué par « float ».
Propriété clear
Valeurs possibles none (éléments flottants à droite et à gauche)
left (pas d’éléments flottant à gauche)
right (pas d’éléments flottant à droite)
both (aucun élément flottant)
99
Exemple complet :
CSS
HTML
img{
<body> float : right; }
<div>
<img width=100 height=100 />
<p> Iouri ou Youri Alexeîevitch Gagarine, né le 9 mars 1934 et
mort le 27 mars 1968, est le premier homme à avoir
effectué un vol dans l’espace au cours de la mission Vostock
1 le 12 avril 1961, dans le cdre du programma spatial
soviétique.
</p>
</div>
</body>
Affichage
100
Superposition des blocs
 Les blocs s’empilent dans la page web suivant leur
positionnement dans le page HTML.
 La propriété z-index permet de positionner des éléments

positionnés au-dessus ou en dessous d’autres éléments suivant
l’axe Z.
 Plus la valeur de z-index est élevée, plus le bloc se trouve en haut
dans la superposition des blocs.
Propriété Z-index
Valeurs possibles auto (valeur par défaut) (nombre = 0)
nombre entier (positif ou négatif)
 La propriété ne fonctionne qu’avec un positionnement absolu des

éléments.
101
Exemple complet : .boite1{ CSS
position : absolute;
HTML left : 20px; top : 20px;
width : 80px; height : 40px;
<body> padding : 4px;

<div class=“boite1”> border : 2px solid gray;
z-index 1 background-color : rgb(125, 165, 205);
</div> z-index : 1;
<div class=“boite2”> }
z-index 2 .boite2{
</div> position : absolute;
</body> left : 40px; top : 50px;
width : 80px; height : 40px;
Affichage padding : 4px;
border : 2px solid gray;
background-color : rgb(215, 230, 245);
z-index : 2;
} 102
Débordement du contenu
Gestion de débordement de contenu
Lorsqu’un contenu déborde du bloc dans lequel il est inclus, il peut

être :
- débordement visible : recouvre le contenu qui le suit.
- débordement masqué : rend le contenu débordé invisible.
- débordement de défilement : le contenu est accessible par une barre
de défilement.
Propriété overflow
Valeurs possibles visible (valeur par défaut)
hidden (débordement masqué)
Scroll ( débordement de défilement)
auto (scroll apparaît en cas de débordement)
overflow: hidden overflow: scroll

overflow: visible 103

CoursDevpWeb1 PartieCSS 2023 2024

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CoursDevpWeb1 PartieCSS 2023 2024

Transféré par

Droits d'auteur :

Formats disponibles

Partie 3

Les feuilles de styles

 Les sélecteurs de style

l’intermédiaire des propriétés d’apparence (couleur, taille,

- Il définit les propriétés de rendu typographique du texte (polices,

 Une feuille de style CSS fonctionne sous forme des règles.

 Une déclaration est un couple de propriété-valeur.

 Chaque déclaration se termine par « ; »

- Ils ne tiennent pas compte des espaces et des retours en ligne.

Le style est dans la balise elle-même.

- Le code est appelé dans l’entête du document avec la balise <link>.

Avec <!Doctype HTML>, l’attribut type est inutile.

 L’élément <link> grâce à l’attribut media.

Les types de médias possibles : all (quel que soit le média),

appliqués à un même document.

CSS.  La règle devient prioritaire.

Le sélecteur par identifiant ( # ) est prioritaire sur un sélecteur

- En cas de contradiction entre deux règles, celle qui s'applique

- Lorsqu'un sélecteur comporte plusieurs parties

s'additionnent pour donner la priorité globale du sélecteur.

- Lorsque le sélecteur est composé de plusieurs parties

- Lorsque deux règles contradictoires ont un sélecteur de

/* Sélecteur sur un identifiant -> priorité = 100 */

clic droit -> inspecter

Styles définis dans l’attribut style

Styles définis entre les balises

Styles définis dans un feuille de

Styles définis dans la feuille de

 Les sélecteurs CSS trient les éléments de la page selon :

La règle s’applique à toutes les balises <h2> et fixe la taille de la

Le sélecteur (*) sélectionne toutes les balises du document

web et modifie le style de tout le document.

La règle s’applique à la balise <div> ayant un identifiant « contenu ».

Sélectionner tous les liens qui possèdent un attribut title.

Sélectionner tous les liens qui possèdent un attribut title égale à

 sélectionne l’élément a dont la valeur de l’attribut title commence par la

 Désigne les éléments qui ont une relation de parenté.

div p { text-align: justify; }

#sommaire a { color: gray; }

Colorer en gris uniquement les liens contenus dans l’élément

élément par filiation directe à un autre élément ( non les

Mettre en italique le texte de l’élément <p> dans le 1er niveau

#wiki > h1 { font-style: italic; }

Mettre en italique le titre de l’élément <h1> dans le 1er niveau

Le sélecteur de frère adjacent, noté ( + ), permet de définir

un style pour un élément enfant suivant immédiatement

Le sélecteur de frère adjacent indirect, noté ( ~ ), permet de

définir un style pour les éléments précédés immédiatement

<h1> Titre 1 </h1>

 Le pseudo-classe, accolée à une balise, apporte des

 Les pseudo-classes sont prédéfinies (on ne peut pas créer

a :hover { color: red; }

Mettre en rouge le texte d’une balise <a> au moment de survol de

a.menu :hover { color: red; }

Mettre le texte en rouge au passage de la souris mais uniquement

:link lien hypertexte non visité L’application de ces pseudo-

:visited lien visité classes respecte l’ordre

Pseudo-classes d’interaction avec l’utilisateur

:nth-child(n): n-ième élément enfant de son conteneur

:nth-last-of-child(n):n-ième dernier élément enfant de son

 Le pseudo-élément, accolée à une balise, apporte d’autres

 CSS 3 ajoute « : » aux pseudo-éléments pour les différencier

list-style- Déterminer /listes non ordonnées/ .stylist{