1
LES STANDARDS DU WEB
CSS3
ENSEIGNANTE: AMIRA SEDIKI
Master NTE - ISEFC A-U : 2018-2019
Introduction
2
CSS = Cascading Style Sheets (feuilles de style en
cascade)
CSS est une séquence de règles
CSS3 est la dernière version du projet qui correspond
à HTML5
CSS3 est compatible avec les versions précédentes de
CSS
Le Contenu est géré en HTML et style (présentation) en
CSS.
Contenu et Style
3
Où écrit-on le CSS ?
4
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).
Exemple1: dans un fichier .css
5
Code : HTML Code : [Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" > /* ceci est un
<link href = "[Link]" rel = commentaire en
"stylesheet" type = "text/css"> css*/
<title>Premiers tests du CSS
</title>
p
</head>
<body>
{
<h1>Mon super site</h1> color: blue;
<p>Bonjour et bienvenue sur mon }
site</p>
</body>
</html>
Exemple 2: dans le <head>
6
Code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site</p>
</body>
</html>
Exemple 3: style inline (non recommandé)
7
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;"> Bonjour et bienvenue sur mon
site</p>
</body>
</html>
Syntaxe: sélecteur et déclaration
8
Le sélecteur est généralement l'élément HTML
auquel vous appliquez un style.
La déclaration est le style d’un sélecteur spécifique.
Une déclaration possède une propriété, qui est un
attribut de style et une valeur.
Sélecteur Déclaration
p {color: blue; text-align: center;}
Propriété1 Valeur Propriété2 Valeur
Les sélecteurs: balise
9
On sélectionne le nom de la balise dont on veut
modifier l'apparence. Par exemple, si je veux
modifier l'apparence de tous les titres <h1> de
mon document HTML
h1 {
text-align: center;
color: red;
}
Les sélecteurs: groupe de balise
10
Si on possède plusieurs balises avec le même style
on peut regrouper les sélecteurs.
h1 {
text-align: center;
color: red;
} h1, h2, p {
h2 {
text-align: center;
text-align: center; color: red;
color: red;
}
}
p{
text-align: center;
color: red;
}
Les sélecteurs: class
11
Permet d’appliquer un style à tous les éléments ayant
une valeur spécifique pour l’attribut class.
Rq: on peut réutiliser la même valeur pour l’attribut
class plusieurs fois dans le même document HTML
Les sélecteurs: class
12
<!DOCTYPE html>
<html> /* exemple 1:
<head> toutes les balises de class
<meta charset="utf-8"> introduction*/
<link rel="stylesheet"
href="[Link]" type = "text/css" .introduction
>
<title>Premiers tests du
{
CSS</title> color: blue;
</head> }
<body>
/* exemple 2:
<h1 class="introduction">Mon super
uniquement les h1 avec
site</h1>
une class introduction */
<h1>Coucou</h1>
<p class="introduction"> Bonjour et
bienvenue sur mon site!</p> [Link]
<p>Pour le moment, mon site est un {
peu vide.<span class="introduction" > color: blue;
Patience!</span> </p>
</body> }
Les sélecteurs: id
13
Permet d’appliquer un style à un élément spécifié
par son attribut id.
Rq: un id est unique donc une valeur spécifique d’id
ne peut être utilisée qu’une seule fois dans le
document HTML
Les sélecteurs: id
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="[Link]" type = "text/css" > #logo
<title>Premiers tests du CSS {
</title> width: 300 px
</head> height: 200 px
<body> }
<img src="images/[Link]" alt="Logo
du site" id="logo" >
<h1> Mon super site</h1>
<p > Bonjour et bienvenue sur mon
site!</p>
</body>
</html>
Les sélecteurs: une balise contenue dans
15
une autre
h3 span {
color: blue;
}
Sélectionne toutes les balises <span> situées à
l'intérieur d'une balise <h3>. Notez qu'il n'y a
pas de virgule entre les deux noms de balises.
Les sélecteurs: une balise qui en suit une
16
autre
h3 + p {
color: blue;
}
Sélectionne la première balise <p> située après un
titre <h3>.
Exemple :
<h3>Titre</h3>
<p>Paragraphe</p>
Les sélecteurs: une balise, un attribut et
17
une valeur exacte
a[title="Cliquez ici"] {
color: blue;
}
Sélectionne tous les liens <a> qui possèdent un
attribut title mais l'attribut doit en plus avoir
exactement pour valeur « Cliquez ici »
Exemple:
<a href="[Link] title="Cliquez ici">un
lien</a>
Gestion des conflits
18
Une balise se voit appliquer les propriétés de tous les sélecteurs qui lui
correspondent.
Une balise hérite les propriétés de son contenant.
En cas de conflit :
Si !important précisé après la valeur :
H1{ color: blue !important; }
*{ color: black }
Sinon, dans l’ordre de spécificité des règles (poids des sélecteurs).
Sinon, la dernière règle (dans les fichiers CSS).
Les sélecteurs: Pseudo-classes de liens
19
Par défaut, les liens sont bleus et soulignés, les liens visités sont violets et soulignés
et les liens actifs, rouges et soulignés.
CSS permet de modifier l’apparence de façon dynamique :
Liens non visités a:link {…} a:link{color: green;}
a:visited{color: red;}
Liens visités a:visited {…}
a:hover{color: white;
a:hover {…} background-color: blue;}
Liens survolés a:active{color: purple;}
Liens activés a:active {…}
N.B. Il faut respecter l’ordre d’utilisation de
ces 4 sélecteurs : link – visited – hover - active
Propriétés de police
20
font-family : définit un nom ou une famille de police (faire une liste, noms
séparés par une virgule).
font-family : arial, "Comic Sans Ms", sans-serif ;
/* arial est pris en premier, sinon, Comic Sans Ms, sinon n’importe
laquelle de la famille sans-serif.*/
font-style : définit le style de la police {normal, italique, oblique}
font-weight : définit l’épaisseur de la police {normal, bold, bolder, lighter}
font-size : définit la taille de la police
valeur numérique absolue : 10pt, 10px, 1cm
valeur numérique relative : 1.5em, 150%
taille relative prédéfinie : xx-small, x-small, normal, medium, large, x-large
Police personnalisée
21
Il existe des sites comme [Link] et [Link] qui
proposent en téléchargement un certain nombre de polices
libres de droits.
Les fichier de police (ici [Link] et [Link]) doit ici
être situé dans le même dossier que le fichier CSS
Ici on définit la police MasuperPolice et on spécifie sa source.
Rq: Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les
navigateurs.
Propriétés de texte
22
color : définit la couleur du texte (valeurs hexadécimales ou nommées).
text-align : définit l’alignement du texte {left, right, center, justify}.
word-spacing : spécifie l’espace entre les des mots : normal (par défaut) ou
une valeur en px, pt, cm, em.
text-decoration : définit la décoration du texte :
underline (souligné)
overline (trait au dessus)
line-through (barré)
none (pas de soulignement, par défaut)
23
Propriétés de fond
background-color : définit la couleur de l’arrière plan.
background-image : définit l’image de l’arrière plan {url (URL}, none}
div{
background-image: url([Link]);
}
background-repeat : permet de gérer la répétition de l’image de fond:
no-repeat : l’image n’est pas répétée.
repeat-x : l’image est répétée seulement horizontalement.
repeat-y : l’image est répétée seulement verticalement.
repeat : l’image est répétée horizontalement et verticalement (par défaut).
background-attachment: spécifie si l’arrière plan est fixe ou se fait défiler
comme le reste du contenu /valeurs: fixed, scroll/
24
Propriétés des listes
list-style-type : détermine le style de marqueur à afficher pour chaque élément
d’une liste ul ou ol : disc | circle | square | decimal (nombre) | upper-alpha ou
lower-alpha (lettres de l’alphabet) | upper-roman ou lower-roman (chiffres romains)
| lower-greek | none (il n’y a rien devant les éléments de la liste), etc.
list-style-image : permet de remplacer les puces par une image (url | none).
ul {list-style-image: url([Link]);}
list-style-position : spécifie si les puces sont à l’intérieur (partie intégrante) ou à
l’extérieur (retrait négatif) du contenu {inside | outside}.
ul {list-style-position:inside;}
Propriétés de boîte englobante
25
box
Tout élément HTML peut être
considéré comme un box
exemple
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
Propriétés de boîte englobante
26
box
width : détermine la largeur d’un élément de texte ou d’une image mesurée en
pt, in, cm, px ou %
height : détermine la hauteur d’un élément de texte ou d’une image mesurée en
pt, in, cm, px ou %
margin : définit une marge tout autour de l’élément HTML : auto (le navigateur
calcule une marge automatiquement) | px, pt, cm, em, etc. | % (valeur en
pourcentage par rapport à l’élément parent) | inherit (hérite de la même
propriété de l’élément parent). p { margin-top: 100px;
margin-top : marge extérieur en haut margin-right: 150px;
margin-right : marge extérieur à droite margin-bottom: 100px;
margin-bottom : marge extérieur en bas margin-left: 50px; }
margin-left : marge extérieur à gauche p { margin: 25px; } OU
p { margin: 25px 50px; } OU /*les quatres marges sont 25px.*/
/*marge en haut et en bas sont 25px
marge à droite et à gauche sont 50px.*/
27 Propriétés de boîte englobante
border : permet de spécifier le style, l’épaisseur et la couleur de la bordure
d’un élément HTML.
Exemple
border-width : épaisseur (valeur en px ou {thin, medium, thick})
border-color : red, rgb(255,0,0), #ff0000, … h1 {
border-style : type de la bordure border-width : 5px;
None (pas de bordure, par défaut) border-style: dotted;
border-color: rgb(255,0,0);
solid (trait plein)
text-align: center;
dotted (pointillés) }
dashed (tirets)
h1 { OU
double (double trait plein)
border: 5px dotted rgb(255,0,0);
groove (bordure rainurée 3D) text-align: center;
ridge (bordure striée 3D) }
inset (bordure encadré 3D)
outset (bordure de départ 3D)
28 Propriétés de boîte englobante
border : permet de spécifier le style, l’épaisseur et la couleur de la bordure
d’un élément HTML.
border-width : épaisseur (valeur en px ou {thin, medium, thick})
border-color : red, rgb(255,0,0), #ff0000, …
border-style : type de la bordure Exemple
None (pas de bordure, par défaut)
h1 {
solid (trait plein)
border-width : medium;
dotted (pointillés) border-style: dotted solid double dashed;
dashed (tirets) border-color: red;
double (double trait plein) text-align: center;
groove (bordure rainurée 3D) }
ridge (bordure striée 3D)
inset (bordure encadré 3D)
outset (bordure de départ 3D)
29 Propriétés de boîte englobante
border-radius : permet d’arrondir les 4 coins d’un élément HTML (à gauche, à
droite, en haut et en bas).
div {
width: 300px;
height: 100px;
background-color: silver;
border-style: dotted solid;
border-radius: 30px 100px;
}
div {
width: 300px;
height: 80px;
background-color: orange;
border-style: solid;
border-radius: 30px;
}
30 Propriétés de boîte englobante
padding : permet de spécifier l’espace entre le texte et la bordure de
l’élément HTML (en %, px, pt, em, etc.)
padding-top : marge interne en haut
padding-right : marge interne à droite
padding-bottom : marge interne en bas
padding-left : marge interne à gauche
p{ OU
p{ background-color: yellow;
background-color: yellow; }
} [Link] {
[Link] { padding: 0px 50px 25px 100px;
padding-top: 0px; }
padding-right: 50px;
padding-bottom: 25px;
padding-left: 100px;
}
31
Les ombres
box-shadow : prend quatre valeurs: le décalage horizontal puis vertical de
l'ombre, l'adoucissement du dégradé, et la couleur de l'ombre.
p{width: 300px;
height: 40px;
border-radius: 10px;
border-width: 2px;
border-style: solid;
box-shadow: 15px 10px black;}
p{box-shadow: 15px 10px 20px black;}
• text-shadow : ombre du texte.
h1{text-shadow: 10px 10px 10px blue;}
32 Propriétés de tableau
Balise <table> :
border, width,
border-collapse: separate (par défaut) | collapse
Balise <caption> :
caption-side: top (par défaut) | bottom
Balise <tr> :
height
Balises <th> et <td> :
border, width,
vertical-align: top | middle |bottom
33 Propriétés de tableau
Exemples :
table{border:1px solid black;
width:50%;}
td{border:1px solid red;
width:50%;}
table{border:1px solid black;
border-collapse:collapse;
width:50%;}
td{border:1px solid red;
vertical-align: middle;
width:50%;}
.grise{ border:1px solid black;
background-color:yellow;}
.blue{border:1px solid blue;}
.none{ border-style:none;}
34
Feuilles de style CSS
Exercice d’application
Réalisez la page Web représentée par l'image ci-dessous :
35
Feuilles de style CSS
Corrigé (1)
Code CSS /* Suite du code CSS */
[Link] {
.par { list-style-type: lower-roman;
color: yellow; }
background-color:#0000FF; li {
font-weight: bold; font-style: italic;
border: 5px double red; }
} table, td, th {
h1 { border: 1px solid green;
font-size: 30px; }
text-shadow: 10px 10px 10px caption {
black; caption-side: bottom;
} }
h3 { th {
font-size: 20px; background-color: green;
text-decoration: underline; color: white;
} }
36
Feuilles de style CSS
Corrigé (2)
Code HTML
<!--Suite du code HTML -->
<!DOCTYPE html> <table><caption>Table 1.1
<html> Employés </caption>
<head><title>Les feuilles de style <tr><th>Prénom</th>
CSS</title> <th>Nom</th>
<meta charset="utf-8"/> <th>Revenu</th></tr>
<link rel="stylesheet" type="text/css" <tr><td>Sami</td>
href="[Link]"></head>
<td>Zghal</td>
<body>
<td>1000 dt</td> </tr>
<p class="par">Ceci est un
<tr><td>Hanen</td>
paragraphe</p>
<td>Hosni</td>
<hr/>
<td>600 dt</td></tr>
<h1>bonjour!</h1>
<h3>moyenjour.</h3> <tr><td>Hamza</td>
<h6>mau<span class="par"> <td>Tabboubi</td>
vais</span>jour.</h6> <td>800
<ol class="truc"><li>premier élément dt</td></tr></table>
</li><li>deuxième élément</li> </body>
<li>troisième élément</li></ol> </html>
Eléments de type block et inline
37
Tout élément HTML est soit de type block, soit de type inline :
Eléments de type block: se placent les uns en dessous des autres, commencent sur
une nouvelle ligne, occupent toute la largeur disponible, peuvent être imbriqués et
peuvent contenir d’autres éléments block, inline ou du texte.
Eléments de type inline: se mettent les uns à côté des autres, ne commencent pas sur
une nouvelle ligne, occupent seulement la largeur nécessaire, et ne peuvent contenir
que d’autres éléments inline ou du texte.
Eléments block Eléments inline
div, p, blockquote span
h1, h2, h3… em, strong, u
header, article, footer… mark
ol, ul, li a
table img
form input, textarea, …
38
Eléments de type block et inline
Il est possible de changer le mode d’affichage d’un élément grâce à la
propriété « display ».
Les différentes valeurs possibles de cette propriété sont :
none : l’élément ne s’affiche pas dans la page;
block : affichage en bloc (avec un saut de ligne avant et après);
inline : affichage en ligne (à la suite, sans saut de ligne);
Exemple :
/*code css*/
a{display: block;} HTML
<!-- Code HTML --> CSS
<a href="">HTML</a>
<a href="">CSS</a> JavaScript
<a href="">JavaScript</a>
Positionnement CSS des éléments
39
HTML
Plusieurs techniques pour positionner les éléments HTML sur une page :
Positionnement absolu / fixe
Positionnement relatif
Positionnement flottant
(0,0)
• On considère la page comme un repère
orthonormé : top
▫ Point de coordonnées d’origine (0, 0) en left right
haut à gauche. 0
▫ Placement des éléments par leurs bottom
coordonnées dans le repère.
▫ Précis, mais fastidieux.
40
Positionnement absolu
Positionnement absolu avec la propriété CSS Exemple :
position: absolute; .jaune{position : absolute;
« position » :
border: solid 1px black;
background-color: yellow;
• Se fait par rapport au coin supérieur gauche top : 0px; left : 0px; }
de la fenêtre du navigateur (top=0 et left =0)
ou par rapport au parent si ce dernier est .vert{position : absolute;
border: solid 1px black;
relatif/fixe/absolu. background-color: green;
top : 40px; left : 80px; }
• Les coordonnées d'un point s'expriment alors
.bleu{position : absolute;
de haut en bas (pour top) et de gauche à border: solid 1px black;
droite (pour left). background-color: blue;
top : 40px; left : 120px; }
41
Positionnement fixe
Positionnement fixe avec la propriété CSS « position » :
position: fixed;
• Idem que la position absolue.
• Même avec une barre de défilement, l’élément restera toujours à la même
position dans la fenêtre.
<nav> Amicus semper
hominum atque
<p><a href="">Acceuil</a> hominum exempla
Code html
<a href="">Présentation</a> Accueil exempla si fui si
Présentation Amicus semper
… </p> hominum atque
Nous contacter
</nav> hominum exempla
exempla si fui si
Amicus semper
hominum atque
nav{ position:fixed; hominum exempla
Code CSS top:120px; left:0px; exempla si fui si.
border: 1px solid black; }
42
Positionnement relatif
Positionnement relatif avec la propriété CSS
« position » : position: relative;
• Les propriétés de position sont prises en compte par
rapport à d’autres éléments de la page.
Code CSS
Code html
#gauche, #milieu{
background-color: silver;
<div id="gauche">Amicus width: 150px; height: 80px;
semper hominum.....</div> border: thin solid red;
<div id="milieu">Amicus margin: 5px;}
semper hominum....</div> #milieu{background-color: orange;
position: relative;
top: 20px;left: 40px;}
43
Positionnement flottant
Positionnement flottant avec la propriété CSS « float » :
float: left | right;
• L’élément enroule son voisin à gauche ou à droite :
▫ Effet d’habillage
▫ Largeur dictée par son contenu
• Annulation de l’effet flottant : clear: left | right | both | none;
▫ La propriété « clear » permet d’éviter qu’un élément se mette à côté de
l’élément flottant précédent :
• none: flottement autorisé
• left: flottement interdit sur la gauche
• right: flottement interdit sur la droite
• both: flottement interdit à gauche comme à droite
44
Positionnement flottant
Exemple 1 : Image flottante à gauche
Code html
<div class="picture"> Code CSS
<img src="[Link]" alt="Bill .picture {
Gates“> </div> float:left;
<p>William Henry Gates III, dit width: 100px;
Bill Gates, est un informaticien }
et un entrepreneur américain, ….
</p>
45
Positionnement flottant
Exemple 2 : Pagination en trois colonnes
Code html
<div class="colonne">… </div> Code CSS
<div class="colonne">… </div> .colonne { float: left;
<div class="colonne">… </div> width: 33%;
}
46
Exercice d’application
Donnez le code HTML et le code CSS permettant de réaliser l’affichage
suivant :
47
Corrigé (1)
Code CSS /* Suite du code CSS */
* {font-family: arial;} section {
body { float: left;
width: 1000px; width: 760px;
margin-left: auto;margin-right: auto; background-color: lime;
margin-top: 20px; margin-left: 25px;
background-color: white;} }
nav, section{margin-top : 12px;} article {
nav, header, footer{padding: 15px;} background-color: aqua;
nav, header, section, footer{border- margin: 15px;
radius: 15px; padding-left: 15px;
box-shadow : 5px 5px 5px grey;} }
header {background-color: yellow; footer {
text-align: center;} background-color: blue;
nav {float: left; color: white;
width: 180px; text-align: center;
background-color: red; margin-top : 140px ;
} }
48
Corrigé (2)
Code HTML
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>Positionnement en CSS</title></head>
<body>
<header>
<h1>Exemple de mise en page</h1>
</header>
<nav><a href="[Link]">Accueil</a></nav>
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
<footer>© xxx</footer>
</body>
</html>
49
Flexbox layout
display:flex
pour appliquer un layout en flexbox
Exemple
section { display: flex; }
Vous pouvez aussi définir une valeur inline-
flex pour display si vous voulez disposer des éléments en
ligne sous forme de boîtes modulables.
flex-direction: row/ column/ row-reverse/column-
reverse
pour indiquer la direction de l’axe principal
Par défaut, cette propriété est égale à row : ils sont donc
disposés en ligne dans le sens de lecture de la langue par
défaut du navigateur (de gauche à droite, dans le cas d'un Flex Model
navigateur français).
Flex-wrap:wrap
Si les flex items débordent du conteneur
Flex:
Taille modulable des flex items Chaque élément flex reçoit d'abord 200px de l'espace
disponible. Ensuite, le reste de l'espace disponible est réparti
article { flex: 1 200px; }
article:nth-of-type(3) { flex: 2 200px; } selon les unités de proportion: 2proportions pour le boxitem 3 et
1proportion pour chaque box item restant
références
50
cours de Kalthoum REZGUI- ISAM de Manouba
[Link]
[Link]
ayout