Css Derniere Partie

Les feuilles de style CSS pour documents
HTML
Noureddine EL ABID AMRANI

3ISI 2020/2021
Présentation : Qu’est ce que CSS?
CSS (Cascading Style Sheets), c'est un autre langage qui vient compléter
le HTML.
Son rôle est de gérer la mise en forme de votre site :
C'est lui qui vous permet de choisir la couleur de votre texte.
C’est lui qui vous permet de sélectionner la police utilisée sur votre site.
C’est lui encore qui permet de définir la taille du texte, les bordures, le
fond…
C'est lui qui permet de faire la mise en page de votre site. (je veux que
mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon
site soit calé en haut et qu'il soit toujours visible, etc.)
Présentation : Qu’est ce que CSS?
Exemple :
HTML
(pas de CSS)
HTML + CSS
La même page HTML, sans et avec CSS.

Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage CSS à trois
endroits différents :
dans un fichier .css (méthode la plus recommandée) ;

dans l'en-tête <head> du fichier HTML ;
directement dans les balises du fichier HTML via un attribut style
(méthode la moins recommandée).
Dans un fichier .css (recommandé) :
Le code CSS est écrit dans un fichier spécial ayant l'extension .css
(contrairement aux fichiers HTML qui ont l'extension .html ).
C'est la méthode la plus pratique et la plus souple. Cela nous évite de
tout mélanger dans un même fichier.
Exemple : à partir du fichier HTML suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>

<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>
Explications :
<link rel="stylesheet" href="style.css" /> : c'est la ligne qui indique que ce
fichier HTML est associé à un fichier appelé style.css et chargé de la
mise en forme.
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte et

copiez-y ce bout de code CSS :
p
{
color: blue;
}
Résultat :
Dans l'en-tête <head> du fichier HTML : Il existe une autre méthode pour
utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS
directement dans une balise <style> à l'intérieur de l'en-tête <head> :
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: blue;
}
</style>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>

</body>
</html>
Résultat est le même :
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un

attribut style à n'importe quelle balise. Vous insérerez votre code CSS
directement dans cet attribut :
Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

</body>
</html>
Résultat :
Cette fois, seul le texte du premier paragraphe, dont la balise contient le

code CSS, sera coloré en bleu (figure suivante).
Quelle méthode choisir ?
On vous recommande fortement de prendre l'habitude de

travailler avec la première méthode parce que c'est celle
utilisée par la majorité des webmasters.
Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire
cette instruction qu'une seule fois pour tout votre site, comme le montre la
figure suivante.
Le code CSS est donné une fois pour toutes dans un fichier CSS
Vocabulaire : les sélecteurs
Question : à quel type d’éléments HTML on souhaite appliquer un style?

Réponse : un sélecteur, tout d’abord, va servir à déterminer à quel(s)
élément(s) HTML ou à quel type d’éléments on souhaite appliquer un style
particulier. Si l’on souhaite appliquer un style particulier à tous nos
paragraphes, par exemple, on utilisera le sélecteur « p ».
Syntaxe :
Selecteur { propriété: valeur;}
Sélecteur HTML définit la propriété
attribut à définir
Exemple
Les styles d'une balise
Sélecteur HTML Propriété Valeur
p { font-size: 12px;}
Définition
Vocabulaire : les propriétés et valeurs
Explications :
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
• des balises : on écrit les noms des balises dont on veut modifier
l'apparence.
• des propriétés CSS : les « effets de style » de la page sont rangés
dans des propriétés. Il y a par exemple la propriété color qui permet
d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille
du texte, etc.
• les valeurs : pour chaque propriété CSS, on doit indiquer une valeur.
Par exemple, pour la propriété color , il faut indiquer le nom de la
couleur. Pour font-size , il faut indiquer quelle taille on veut, etc.
Appliquer un style : sélectionner une balise.
Schématiquement, une feuille de style CSS ressemble donc à cela :
balise1
{
propriete1: valeur1;
}
balise2
{
}
balise3
{
}
Appliquer un style : sélectionner une balise.
Exemple : Modifiez le fichier style.css pour que le titre s’affiche en rouge.

p
{
color: blue;
}
h1
{
color: red;
}
Résultat :
Les commentaires.
Comme en HTML, il est possible de mettre des commentaires. Les

commentaires ne seront pas affichés, ils servent simplement à indiquer des
informations pour vous, par exemple pour vous y retrouver dans un long
fichier CSS :
/*
Commentaire
*/
Exemple :
/*
style.css
---------
Cours 3ISI IGA 2020/2021 par M. EL ABID

*/
p
{
color: blue; /* Les paragraphes seront en bleu */
}
Quelques propriétés pour commencer ?
Après cette présentation générale, voyons quelques exemples :

Body
P
h1, h2, h3, h4, h5, h6
body
Couleur du texte & du fond
Placer une image de fond
Rajouter des marges

Un peu de couleur…
Color : la propriété color permet de fixer la couleur

du texte.
Comment manipuler les couleurs ?
liste de couleur standard : aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow
Un code hexadécimal long #00FF45
Un code hexadécimal court #0F3
Un code rgb, de 0 à 255 rgb(0,0,100)
un code rgb, en pourcentage rgb(10%,10%,30%)
Un peu de couleur (de fond)
background-color
la propriété background-color permet de fixer la couleur de
fond de la page.
body
{
background-color : rgb(0,0,0) ;
color : white
}
Une image de fond
background-image
permet de spécifier une image de fond
background-repeat
l’image de fond doit-elle être répétée ?
background-position
Où placer l’image de fond ?
background-attachment
L’image de fond bouge-t-elle en même temps que la page ?
background-image
• none
• url()
background-repeat
• repeat
• no-repeat
• repeat-x
• repeat-y
background-position
repeat-y no-repeat background-repeat
repeat repeat-x
positionnement fixe ou mobile
bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla
background-attachment: background-attachment:
fixed; scrool;
(valeur par défaut)
Mais au fait, comment avoir une image au milieu ?
background-position : x y
Détermine la position de l’image de fond

par rapport au coin supérieur gauche
Exemples de positionnement
background-position: 50% background-position: 100%

50% ; 100%;
background-position: 10px background-position: 0%

Mesures en C.S.S
% (pourcentage)
la taille / position de l’élément est calculée de façon relative
px (pixel)
Le pixel est la plus petit unité de l’écran
em
1em = 100%, 1.2em = 120%, …
Mesures en C.S.S
! Préciser l’unité de mesure est obligatoire !
sauf pour la valeur 0, identique quelque soit l’unité utilisée
background-position: 50% 50% ; // Valide
background-position: 10px 50% ; // Valide
background-position: 0 50% ; // Valide
background-position: 10 50% ; // Non Valide
En C.S.S, en cas d’erreur, la propriété erronée est ignorée

Quelques propriétés sur les fontes
font-size
permet de fixer la taille de la police
les unités de mesures vues précédemment sont utilisables
il existe aussi des tailles relatives prédéfinies :

• xx-small
• x-small
• small
• medium,
• large,
• x-large,
• xx-large,
• larger,
• smaller
font-family
permet de spécifier le type de police que l’on souhaite afficher
! Toutes les polices ne sont pas disponibles sur tous les
ordinateurs !
Il est possible de spécifier plusieurs polices, dans l’ordre ou l’on
souhaite les utiliser
font-family
familles de polices génériques :
• serif,
• sans-serif,
• monospace,
• cursive,
• fantasy.
exemple :
font-family : "times new roman", serif, sans-serif
font-weight
précise le niveau de gras de la police :
• normal,
• bold,
• 100, 200, ...
font-style
précise le style de fonte :
• normal
• italic
• oblic
exemple : afficher du texte en italique et en gras

font-weight : bold ;
font-style : italic ;
font-variant
utilise une fonte normale ou en petite capitale :
• normal,
• small-caps.
font
raccourci permettant de tout spécifier
exemple : utilisation du raccourci font

font : italic bold 1em cursive ;
Quelques propriétés sur les textes
text-align
permet de gérer l’alignement du texte
• right,
• left,
• center,
• justify.
text-decoration
comment doit apparaître le texte
• none (aucun)
• underline (souligné)
• overline (surligné)
• line-through (barré)
• blink (clignotant)
Quelques propriétés sur les textes
text-transformation
on peut appliquer des transformations au texte
• capitalize (1ere lettre de chaque mot en majuscule)
• uppercase (transformer en majuscule)
• lowercase (transformer en minuscule)
• none (aucune)
text-indent
Indentation de début de paragraphe (taille de l’espace)
exemple :
P {
text-transformation : lowercase ;
text-indent : 1em;
}
On peut affecter les mêmes styles au groupe de balises :
h1 {text-decoration : underline }
peut s’écrire …
h1,h2,h3,h4,h5,h6 {text-decoration : underline }

Changer le style
Comme dit précédemment …
p {text-decoration : underline }
strong {text-decoration : underline }
peut s’écrire …
p,strong {text-decoration : underline }

Mais attention …
p strong {color : red }
possède un autre sens :
Le style n’est appliqué à strong que s’il est imbriqué dans
une balise p
Exemple …
<p>La couleur<strong>rouge</strong>
est appliquée ici,
mais aussi <del><strong>la</strong></del></p>
<strong>Mais pas la</strong>
<p>
<strong>
<strong>
Mais attention …
P>strong {color : red }
Le style n’est appliqué à strong que s’il est descendant
direct de p
Exemple …
<p>La couleur<strong>rouge</strong>
est appliquée ici,
mais pas <del><strong>la</strong></del></p>
<p>
<strong>
<strong>
De même …
p+strong {text-decoration : underline }
Le style n’est appliqué à strong que s’il suit

immédiatement une balise p
Exemple …
p {text-indent : 1em}
p+p {text-indent : 0}
Le premier paragraphe d’un texte sera indenté,

mais pas les suivants
Exercice :
<span> : balise multi-usage, trés pratique pour appliquer un style
CSS à une portion de texte.
<strong> : balise qui permet de mettre un texte en gras (comme la
balise <b>) mais avec un peux d'importance au niveau sémantique.
Les deux balises <span> et <strong>sont très pratiques pour
appliquer un style CSS à une portion de texte (<span> donne de
l'importance à une portion de texte de façon moins forte que
<strong>.
Exercice :
Les limites des sélecteurs simples : les attributs class et id
Jusqu’à présent, nous n’avons manipulé que des sélecteurs que l’on appelle
« simple », car ils correspondent à des éléments HTML seuls et sans
attributs (par exemple le sélecteur p).
Question : comment faire pour appliquer un style différent à deux éléments
de même type, deux paragraphes par exemple ?
Réponse : Il faut identifier chaque balise de façon unique.
Et c’est pour cela que l’on a créé les attributs class et id.
Class et Id sont deux attributs HTML qui ont été créés pour pouvoir
appliquer différents styles à des éléments de même type.
Question : quelle est la différence entre id et class?
Les attributs : class et id
Réponse :
L’attribut id permet d’identifier chaque élément de façon unique c. à. d. le
style sera appliqué à cet élément. Donc l’attribut id avec une valeur
précise ne peut être utilisé qu’une seule fois dans une page, au contraire
de class.
L’attribut class permet également de faire l’inverse et d’appliquer le
même style à différents éléments choisis (on parle des élément qui
appartiennent à la même catégorie (même classe).
Syntaxe :
Premièrement on se place dans la balise ouvrante d’un élément HTML,
on écrit le nom de notre attribut (class ou id), et on lui donne une valeur
cohérente.
L’attribut : id
#id1 {
color : red ;
Exemple : }
#id2 {
<html> color : green ;
<head> }
<title>Exemple 2 en CSS</title> #id3 {
<link rel="stylesheet" type="text/css" href="mystyle.css" /> color : blue;
</head> }
<body> #id4 {
<h1 id="id1">Guacamole rapide à faire</h1> color : green ;
<h2 id="id2">Guacamole rapide à faire</h2> }
<ul id="id3"> #id5 {
<li>2 avocats (pelés et avec les noyaux retirés)</li> color : blue ;
<li>le jus d'un citron</li> }
<li>¼ de concombre, coupé grossièrement</li>
<li>1 petite tomate, coupée</li>
</ul>
<h2 id="id4">Instructions</h2>
<ol id="id5">
<li>2 Écrasez délicatement les avocats avec une fourchette</li>
<li>Placez la purée obtenue dans un plat et arrosez avec le jus de
citron</li>
<li>Mélangez pour que le jus de citron empêche la purée d'avocat de
noircir</li>
<li>Mélangez la tomate et le concombre coupés</li>
<li>Gardez au frais et servir rapidement avec des tortillas</li>
</ol>
</body>
</html>
L’attribut : id
Résultat :
L’attribut : class
.classe1 {
color : red ;
}
Exemple : .classe2 {
color : green ;
<html> }
<head> .classe3 {
<title>Exemple 2 en CSS</title> color : blue ;
<link rel="stylesheet" type="text/css" href="mystyle.css" /> }
</head>
<body>
<h1 class="titre">Guacamole rapide à faire</h1>
<h2 class="titre">Guacamole rapide à faire</h2>
<ul class="liste">
<li>2 avocats (pelés et avec les noyaux retirés)</li>
<li>le jus d'un citron</li>
<li>¼ de concombre, coupé grossièrement</li>
<li>1 petite tomate, coupée</li>
</ul>
<h2 class="titre">Instructions</h2>
<ol class="liste">
<li>2 Écrasez délicatement les avocats avec une fourchette</li>
<li>Placez la purée obtenue dans un plat et arrosez avec le jus de
citron</li>
<li>Mélangez pour que le jus de citron empêche la purée d'avocat de
noircir</li>
<li>Mélangez la tomate et le concombre coupés</li>
<li>Gardez au frais et servir rapidement avec des tortillas</li>
</ol>
</body>
</html>
L’attribut : class
Même résultat :
Exercice :
Sachant que la propriété list-style-type définit le type de la puce :

list-style-type: circle;
list-style-type: square;
list-style-type: upper-roman;
list-style-type: lower-alpha;
Créer les listes imbriquées suivantes :
Les pseudo-classe
La notion de pseudo-classe :
Les pseudo-classes vont nous permettre d’appliquer des styles à des
éléments HTML uniquement lorsque ceux-ci sont dans un certain état
(cliqués, activés, etc.).
La balise <a> permet de définir un lien hypertexte, donc on peut l’utiliser
comme un sélecteur.
Exemple :
a{
color: blue;
}
52
Exemple : les pseudo-classes de la balise <a>
Un lien peut avoir plusieurs états. Par exemple, il peut être visité ou non.
Vous pouvez utiliser des pseudo-classes pour assigner des styles différents
aux liens visités et non visités.
Exemple :
<html>
<head>
<title>Les pseudos classes</title> a:link {
<link rel="stylesheet" type="text/css" href="style2.css" /> color: blue;
</head>
<body> }
<h1>Exemple d'un lien non visité</h1>
<a href="#1">Je suis un lien non visité</a><br> a:visited {
<h1>Exemple d'un lien visité</h1> color: red;
<a href="#2">Je suis un lien visité</a><br>
</body> }
</html>
53
Exemple : les pseudo-classes de la balise <a>
Résultat :
54
Les liens (4)
Autres pseudo-classe de la balise <a> :

La pseudo-classe :active
• Est utilisée pour les liens qui sont activés.
La pseudo-classe :hover
• est utilisée lorsque le pointeur de la souris survole un lien.
55
Les liens (5)
Exemple :
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: green;
}
a:active {
background-color: yellow;
}
a:hover { color:red;
}
56
Exemples d’application
1. Un menu de navigation vertical :

On peut considérer le menu de navigation comme une liste de
liens, et donc on peut utiliser la balise <ul>:
Exemple :
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation de l’Ese</a></li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nos partenaires</a></li>
<li><a href="#">Contacts</a></li>
</ul>
57
Exemple d’application
Les éléments de liste ont un comportement de type bloc: ils

s'empilent les uns sur les autres et occupent toute la largeur
disponible.
li{
Background-color:yellow;
color: #fff ;
border: 1px dashed #600 ;
}
58
Donc pour créer un menu vertical, on doit appliquer un style à cette

liste :
Limiter la largeur du menu (200px par exemple).
supprimer les marges et padding par défaut.
Supprimer les puces avec la propriété « list-style ».
<ul id="navigation">
</ul>
#navigation {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
} 59
On ajoute une bordure, une couleur de fond et une couleur de texte

aux éléments <li>:
#navigation li {
background: #c00 ;
color: #fff ;
border: 1px solid #600 ;
margin-bottom: 1px ;
}
60
Pour que les éléments du menu réagissent comme des boutons au

passage de la souris, il faut faire en sorte que les liens occupent tout
l'espace à l'intérieur des <li>:
La propriété « display:block » permet à un élément de prendre
toute la largeur disponible (l’élément ici est la balise <a>
a{
Display: block;
}
Si on utilise le sélecteur « a » sans préciser la classe, ce style

sera appliquer sur tous les éléments de type <a>.
Pour notre cas
#navigation li a{
Display: block;
}
61
On modifie aussi l'alignement et la couleur du texte et on supprime le

soulignement des liens.
#navigation li a {
display: block ;
background: #c00 ;
color: #fff ;
text-align: center ;
text-decoration: none ;
}
62
Pour le comportement au survol, on utilise les pseudo-classes :

Visited : quand le lien a été visité.
Active : quand le lien est cliqué
Hover : quand le curseur survole le lien
link : lien normal et non visité
#navigation li a:hover, #navigation li a:focus, #navigation li a:active

{
background: #900 ;
text-decoration: underline ;
}
63
2. Un menu de navigation horizontal avec la balise <nav>:

Comme l’exemple précédent, commençons donc par créer le
squelette de notre menu :
<ul>
</ul>
64
Tout d’abord, nous allons entourer notre menu avec des balises
HTML <nav> qui ont été créées spécifiquement pour les menus et
qui va vous permettre de ne cibler que la liste correspondant à votre
menu en CSS.
<nav>
<ul>
</ul>
</nav>
65
La première chose à faire en CSS, comme l’exemple 1 :

Supprimer les puces.
Annulel les marges par défaut (padding et margin) de la balise
<ul>.
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
66
Ensuite, on veut que les éléments de notre menu se placent les uns
à côté des autres et non pas les uns sous les autres.
Pour faire cela, nous allons devoir modifier le comportement par
défaut des éléments li. Par défaut, ces éléments sont de type block.
On va modifier leur type en inline-block grâce à la propriété display.
nav ul li{
display: inline-block;
}
67
Ensuite, on peut harmoniser la taille des éléments de notre menu

avec les propriétés width et height. On peut également leur appliquer
des bordures légères sur nos éléments de liste.
nav ul li{
width: 150px;
height:25px;
border:solid 1px #CCCCCC;
}
68
Ensuite, on peut supprimer les marges
nav ul li{
width: 150px;
height:25px;
padding:0px;
margin:0px;
border:solid 1px #CCCCCC;
}
69
Pour que les éléments du menu réagissent comme des boutons au

passage de la souris, il faut faire en sorte que les liens occupent tout
l'espace à l'intérieur des <li>:
#navigation li a{
Display: block;
background:#000000;
color:#FFFFFF;
}
70
Finalement, on peut appliquer un style différent aux éléments de

notre menu lorsque vos visiteurs passent leur souris dessus en
utilisant le pseudo-format :hover.
#navigation li a:hover{
Display: block;
background:#CCFFEE;
text-align: center;
line-height:25px;
text-decoration: none;
}
}
71
Mise en page par
CSS
72
La balise <div> : les bordures
La balise DIV définit un bloc ou conteneur, c’est un outil qui permet :

de regrouper plusieurs éléments HTML .
De créer de calques dynamiques (menu déroulant par exemple)
de créer des maquettes de pages Web.
73
La balise <div> : les tailles et les couleurs de fond
Lorsque l'on crée un bloc à l'aide d'une div et que l'on veut l'afficher, il faut
attribuer une taille à ce bloc :
width pour la largeur
height pour la hauteur (la valeur insérée à la suite est en pixel ou en %).
Div : les propriétés de fond:
background-color: couleur de fond
background-image: url(chemin de l’image) : Image de fond.
Background-repeat : (no-repeat, repeat-x,
repeat-y, repeat) :Répétition de l'image de fond.
74
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<title>Les div</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<body>
<div id="banniere">Je suis une banniere</div>
<div id="corps">Je suis le corps de la page</div>
<div id="pied">Je suis le pied de la page</div>
</body>
</html>
div#banniere {
width:600px;
height:50px;
background-color:#00CCFF;}
div#corps {
width:600px;
height:400px;
background-color:#FFCC00;}
div#pied {
width:600px;
height:50px;
background-color:#33FF99;} 75
Résultat :
76
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
div#banniere {
width:600px;
height:50px;
background-color:#00CCFF;}
div#corps {
width:600px;
height:400px;
background-image:url(“fond.jpg”)}
div#pied {
width:600px;
height:50px;
background-color:#33FF99;} 77
Résultat :
78
La balise <div> : les bordures
Div : les propriétés de bordure :

Border-style : style des bords (solid, dashed, dotted, ...)
Border-size : taille des bords (1px, medium, ...)
Border-color : couleur des bords (black, #882233)
Border : les trois d'un coup (style, taille, couleur)
Exemple :
.titre { border: solid 1px black; }
79
Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
div#banniere {
width:600px;
height:50px;
background-color:#00CCFF;
border: solid 1px black;}
div#corps {
width:600px;
height:400px;
background-color:#FFCC00;
div#pied {
width:600px;
height:50px;
background-color:#33FF99; 80
Résultat :
81
La balise <div> : les marges
Div : propriétés des marges :

margin : définit les marges extérieures
padding : définit les marges intérieures (espace entre le bord et le texte
)
82
La balise <div> : les marges
Div : les quatres marges (haut, bas, gauche et droite) à définir par les
propriétés :
margin-top,
margin-right,
margin-bottom,
margin-left (idem pour padding)
83
Exemple :
div#banniere {
width:600px;
height:50px;
background-color:#00CCFF;
border: solid 1px black;
margin-top:25px;
margin-left:25%;}
div#corps {
width:600px;
height:400px;
background-color:#FFCC00;
margin-left:25%;}
div#pied {
width:600px;
height:50px;
background-color:#33FF99;
margin-left:25%;}
84
Résultat :
25px
25%
85
La balise <div> : les positions
Par défaut : les div sont placées les unes en dessous de l'autre(en flux).
Exemple :
#bloc1 {
width : 300px;
height : 100px;
Background-color:red;
Border:1px solid;}
#bloc2 {
width : 300px;
height : 100px;
Background-color:blue;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
Background-color:green;
Border:1px solid;}
86
Les positions vont nous permettre de placer des blocs (div) où l'on veut sur
la page.
Il existe 4 types de positions :
static
relative
absolute
fixed
87
Static : c’est la position par défaut.

Les éléments sont placés les uns en dessous de l'autre(en flux).
Les propriétés top, right, bottom, ne s'appliquent pas.
88
relative : Les éléments sont placés par rapport à l'élément précédent et se

positionnent à la suite les uns des autres (dans le flux) comme la position
static mais avec la possibilité d’utiliser les propriétés de décalages (marges)
(dans le flux)
89
Exemple :
#bloc1 {
width : 300px;
height : 100px;
Border:1px solid;}
#bloc2 {
Position:relative;
width : 300px;
height : 100px;
Margin-top:50px;
Margin-left:50px;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
90
Border:1px solid;}
absolute: L'élément se positionne par rapport à son plus proche ancêtre et

se gère grâce aux marges.
Exemple sans les marges :
#bloc1 {
width : 300px;
height : 100px;
Border:1px solid;}
#bloc2 {
Position:absolute;
width : 300px;
height : 100px;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
Border:1px solid;}
91
Exemple avec les marges :
#bloc1 {
width : 300px;
height : 100px;
Border:1px solid;}
#bloc2 {
Position:absolute;
Margin-top:50px;
Margin-left:50px;
width : 300px;
height : 100px;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
Border:1px solid;}
fixed : comme absolute mais lors du défilement, l'élément reste au même
endroit. 92
La balise <div> : float
float: c’est une propriété qui permet de retirer une boîte du flux normal pour
la placer à droite le plus possible ou à gauche le plus possible dans son
conteneur.
float: right pour placer la boîte à droite.
float: left pour placer la boîte à gauche.
Avec la possibilité d’utiliser les propriétés de décalages (marges) (dans
le flux).
93
Exemple sans les marges :
#bloc1 {
width : 300px;
height : 100px;
Border:1px solid;}
#bloc2 {
Float:left;
width : 300px;
height : 100px;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
Border:1px solid;}
94
Exemple avec les marges :
#bloc1 {
width : 300px;
height : 100px;
Border:1px solid;}
#bloc2 {
Float:left;
width : 300px;
height : 100px;
Margin-top:50;
Margin-left:50px;
Border:1px solid;}
#bloc3 {
width : 300px;
height : 100px;
95
Border:1px solid;}
Exercice : Menu déroulant
96
Exercice : Menu déroulant
97

Css Derniere Partie

Transféré par

Informations du document

Titre original

Copyright

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 :

Css Derniere Partie

Titre original :

Transféré par

Droits d'auteur :

Les feuilles de style CSS pour documents

Noureddine EL ABID AMRANI

La même page HTML, sans et avec CSS.

dans un fichier .css (méthode la plus recommandée) ;

Exemple : à partir du fichier HTML suivant :

<p>Bonjour et bienvenue sur mon site !</p>

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte et

<p>Bonjour et bienvenue sur mon site !</p>

Résultat est le même :

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un

<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

Cette fois, seul le texte du premier paragraphe, dont la balise contient le

On vous recommande fortement de prendre l'habitude de

Question : à quel type d’éléments HTML on souhaite appliquer un style?

Selecteur { propriété: valeur;}

Sélecteur HTML définit la propriété

Sélecteur HTML Propriété Valeur

Schématiquement, une feuille de style CSS ressemble donc à cela :

Exemple : Modifiez le fichier style.css pour que le titre s’affiche en rouge.

Comme en HTML, il est possible de mettre des commentaires. Les

Cours 3ISI IGA 2020/2021 par M. EL ABID

Après cette présentation générale, voyons quelques exemples :

Couleur du texte & du fond

Placer une image de fond

Rajouter des marges

Color : la propriété color permet de fixer la couleur

Détermine la position de l’image de fond

background-position: 50% background-position: 100%

background-position: 10px background-position: 0%

! Préciser l’unité de mesure est obligatoire !

sauf pour la valeur 0, identique quelque soit l’unité utilisée

background-position: 50% 50% ; // Valide

background-position: 10px 50% ; // Valide

background-position: 0 50% ; // Valide

background-position: 10 50% ; // Non Valide

En C.S.S, en cas d’erreur, la propriété erronée est ignorée

il existe aussi des tailles relatives prédéfinies :

exemple : afficher du texte en italique et en gras

exemple : utilisation du raccourci font

h1,h2,h3,h4,h5,h6 {text-decoration : underline }

p,strong {text-decoration : underline }

p+strong {text-decoration : underline }

Le style n’est appliqué à strong que s’il suit

Le premier paragraphe d’un texte sera indenté,

Sachant que la propriété list-style-type définit le type de la puce :

Autres pseudo-classe de la balise <a> :

1. Un menu de navigation vertical :

Les éléments de liste ont un comportement de type bloc: ils

Donc pour créer un menu vertical, on doit appliquer un style à cette

On ajoute une bordure, une couleur de fond et une couleur de texte

Pour que les éléments du menu réagissent comme des boutons au

Si on utilise le sélecteur « a » sans préciser la classe, ce style

On modifie aussi l'alignement et la couleur du texte et on supprime le

Pour le comportement au survol, on utilise les pseudo-classes :

#navigation li a:hover, #navigation li a:focus, #navigation li a:active

2. Un menu de navigation horizontal avec la balise <nav>:

La première chose à faire en CSS, comme l’exemple 1 :

Ensuite, on peut harmoniser la taille des éléments de notre menu

Ensuite, on peut supprimer les marges

Pour que les éléments du menu réagissent comme des boutons au

Finalement, on peut appliquer un style différent aux éléments de

La balise DIV définit un bloc ou conteneur, c’est un outil qui permet :

Div : les propriétés de bordure :

.titre { border: solid 1px black; }

Div : propriétés des marges :