Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Chapitre 2_CSS_complet_Version1.pdf
1. Université Abdelmalek Essaâdi
Faculté des Sciences et Techniques d’Al-Hoceima
Département de Mathématiques et
Informatique
Filière : LST-MI – S6
Année universitaire : 2021- 2022
Module M31 : Technologies du Web
Chapitre 2 : Langage CSS
Pr . A. Zannou FST d’ Al-Hoceima
1
Pr. Abderrahim zannou
a.zannou@uae.ac.ma
2. Pr . A. Zannou FST d’ Al-Hoceima
2
Généralités sur CSS
• Introduction
CSS ( Cascading Style Sheets) : feuilles de style en cascade.
CSS est un langage informatique qui sert à décrire la présentation des
documents HTML, XHTML .
C'est un standard du Web reconnu par tous les navigateurs et définit
par le W3C (World Wide Web Consortium).
CSS
3. Pr . A. Zannou FST d’ Al-Hoceima
3
Généralités sur CSS
• Définition
CSS vient compléter le HTML. Il a pour rôle de gérer la :
Mise en forme du contenu des documents HTML en lui
appliquant des styles (couleur, police, taille, bordures, fond…).
Mise en page des documents HTML.
Les navigateurs Web lisent le code CSS et comprennent comment
afficher la page.
CSS
4. Pr . A. Zannou FST d’ Al-Hoceima
4
Généralités sur CSS
• Objectifs
Les principaux objectifs des CSS sont :
Séparation entre contenu (écrit en HTML) et la présentation
visuelle : HTML pour le fond, CSS pour la forme.
Faciliter la maintenance des sites Web : toute modification d'une
feuille de style est répercutée sur l'ensemble des pages où elle
s'applique.
Rendre cohérents et homogènes les sites Web.
Les principaux avantages des CSS sont :
Maintenabilité.
Indépendance des plates-formes.
Performance.
CSS
5. Pr . A. Zannou FST d’ Al-Hoceima
5
Généralités sur CSS
• Historique
Aux débuts du Web, le CSS n'existait pas.
Le HTML est né en 1991 et CSS en 1996.
Développement du Web => pages HTML plus complexes => mélange
entre le fond et la forme => mise à jour des pages plus complexe =>
création du CSS.
Tout comme le HTML, le CSS a évolué :
1996 : CSS 1
1998 : CSS 2
1999: CSS 3 (version stable)
2010 : CSS 4 (quelques modules, en cours …)
CSS
6. Pr . A. Zannou FST d’ Al-Hoceima
6
L’endroit d’écrire le code CSS
Pour mettre en forme un document HTML, on peut écrire du code CSS à
trois endroits différents :
dans un fichier séparé style.css (méthode la plus recommandée).
dans l'en-tête <head> du document HTML.
directement dans les balises du fichier HTML via un attribut style
(méthode la moins recommandée)
CSS
7. Pr . A. Zannou FST d’ Al-Hoceima
7
L’endroit d’écrire le code CSS
On écrit le code CSS dans un fichier séparé ayant l'extension.css.
Pour lier le fichier CSS au document HTML, on utilise l’élément HTML
<link> qui a besoin de deux attributs :
rel : précise le type de fichier (stylesheet pour feuille de style)
href : indique l’adresse relative du fichier CSS.
L’élément link doit être placé dans l’en-tête du document HTML
CSS
8. Pr . A. Zannou FST d’ Al-Hoceima
8
L’endroit d’écrire le code CSS
Première méthode
Exemple: Ecrire le code CSS dans un fichier séparé
CSS
<html>
<head>
<link rel="stylesheet“ href=“style.css" />
</head>
<body>
<h1> Le langage css</h1>
</body >
</html>
H1
{
color:red;
}
style.css
9. Pr . A. Zannou FST d’ Al-Hoceima
9
L’endroit d’écrire le code CSS
Deuxième méthode
Exemple: Ecrire le code CSS dans l'en-tête <head> du fichier HTML
CSS
<html>
<head>
<style>
h1
{
color:red;
}
</style>
</head>
<body>
<h1> Le langage css</h1>
</body >
</html>
On insère le code CSS directement dans une balise HTML <style> à
l'intérieur de l'en-tête <head>
10. Pr . A. Zannou FST d’ Al-Hoceima
10
L’endroit d’écrire le code CSS
Troisième méthode
Exemple: directement dans les balises HTML
CSS
<html>
<head>
</head>
<body>
<h1 style=“color:red;”> Le langage css</h1>
</body >
</html>
On ajoute un attribut style à n'importe quelle balise HTML et on insère le
code CSS directement dans cet attribut.
11. Pr . A. Zannou FST d’ Al-Hoceima
11
L’endroit d’écrire le code CSS
Méthode à choisir
Il est fortement recommandé de prendre l'habitude de travailler avec la
première méthode (écrire le code CSS dans un fichier séparé style.css).
C'est la méthode la plus pratique et la plus souple :
éviter de tout mélanger dans un même fichier.
une meilleure lisibilité et une meilleure maintenabilité du code.
pouvoir appliquer des styles à plusieurs pages HTML en même
temps.
CSS
Le code CSS est donné une fois pour toutes dans un fichier CSS
12. Pr . A. Zannou FST d’ Al-Hoceima
12
Syntaxe de CSS
Créer un style
La création d’un style en CSS (règle CSS) est faite en indiquant trois parties :
Le sélecteur : nom de la balise sur laquelle sera appliqué le style.
Des propriétés : les « effets de style » de la page, suivies de deux points
(:).
La valeur : valeur de la propriété, suivie d’un point-virgule ;
CSS
h1
{
: ;
}
color red
Sélecteur
Propriété Valeur
13. Pr . A. Zannou FST d’ Al-Hoceima
13
Syntaxe de CSS
Créer un style
La forme générale de style CSS:
CSS
Balise 1
{
Propriété 1 : valeur 1 ; /* commentaire */
Propriété 2 : valeur 2 ;
… …
}
Balise 2
{
Propriété n : valeur n ;
Propriété n+1 : valeur n+1 ;
… …
}
Un commentaire en CSS commence par /*, suivi du commentaire, puis */ pour
terminer le commentaire.
14. Pr . A. Zannou FST d’ Al-Hoceima
14
Syntaxe de CSS
Sélecteur simple
CSS
Exemple
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<h1> le langage css</h1>
<p> un paragraphe … </p>
</body >
</html>
h1
{
color:red;
}
p
{
color:green;
}
style.css
15. Pr . A. Zannou FST d’ Al-Hoceima
15
Syntaxe de CSS
Sélecteur simple
CSS
background‐color représente la couleur de fond .
Exemple 1:
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> ceci est mon premier paragraphe. </p>
<p> ceci est mon deuxième paragraphe. </p>
</html>
p
{
background‐color:green;
}
Style.css
16. Pr . A. Zannou FST d’ Al-Hoceima
16
Syntaxe de CSS
Sélecteur simple
CSS
Exemple 2:
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> ceci est mon premier paragraphe. </p>
<p> ceci est mon deuxième paragraphe. </p>
une <i> phrase</i>
</body >
</html>
p
{
background‐color:red;
}
i
{
background‐color:green;
}
style.css
17. Pr . A. Zannou FST d’ Al-Hoceima
17
Syntaxe de CSS
Sélecteur multiple
CSS
Pour appliquer un même style à plusieurs balises, il suffit de combiner la
déclaration en séparant les noms des balises par une virgule (,)
Exemple 3:
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> ceci est mon premier paragraphe. </p>
<p> ceci est mon deuxième paragraphe. </p>
une <i> phrase</i>
</body >
</html>
P,i
{
background‐color:red;
}
style.css
18. Pr . A. Zannou FST d’ Al-Hoceima
18
Sélecteurs CSS
Sélecteurs class et id
CSS
Les sélecteurs class et id sont des attributs permettant de cibler un élément
en particulier plutôt qu’un type d’élément.
Les attributs class et id sont écrits { l’intérieur de la balise ouvrante d’un
élément HTML et doivent avoir une valeur.
L’élément est ciblé en réutilisant cette même valeur.
19. Pr . A. Zannou FST d’ Al-Hoceima
19
Sélecteurs CSS
Sélecteurs class et id
CSS
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p class=“p1”> ceci est mon premier
paragraphe. </p>
<p id=“p2”> ceci est mon deuxième
paragraphe. </p>
</body >
</html>
.P1
{
background‐color: green;
}
#P2
{
background‐color:red;
}
Style.css
Exemple:
20. Pr . A. Zannou FST d’ Al-Hoceima
20
Sélecteurs CSS
Sélecteurs class et id
CSS
class est un attribut que l'on peut mettre sur n'importe quelle balise
L’attribut class prend comme valeur un nom qui sert { identifier la
balise dans le fichier CSS.
id est un attribut qui fonctionne exactement de la même manière
que class. La principale différence avec les classes est qu'un id doit
être unique dans la page.
L’intérêt de l’attribut id est d’identifier de façon unique un élément
dans le code.
En pratique, nous ne mettrons des id que sur des éléments qui sont
uniques dans la page
21. Pr . A. Zannou FST d’ Al-Hoceima
21
Sélecteurs CSS
Sélecteurs avancées
CSS
En plus des sélecteurs simple, multiple, de classes et d’identifiants,
CSS définit des sélecteurs avancées :
* : sélecteur universel :
Sélectionne toutes les balises sans exception .
Exemple
*
{
color: green;
}
22. Pr . A. Zannou FST d’ Al-Hoceima
22
Sélecteurs CSS
Sélecteurs avancées
CSS
A B : sélecteur descendant
Sélectionne les balises B contenues dans une balise A
Exemple : sélectionner toutes les balises <i> situées à l'intérieur
d'une balise <p> (pas de virgule entre les deux noms de balises).
23. Pr . A. Zannou FST d’ Al-Hoceima
23
Sélecteurs CSS
Sélecteurs avancées
CSS
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> ceci est mon <i>premier paragraphe <i>. </p>
<p> ceci est mon <i>deuxième paragraphe<i>. </p>
ceci est mon <i>troième paragraphe<i>.
</body >
</html>
p i
{
color: red;
}
style.css
Exemple
24. Pr . A. Zannou FST d’ Al-Hoceima
24
Sélecteurs CSS
Sélecteurs avancées
CSS
A + B : sélecteur adjacent
ne sélectionner que la balise B qui est immédiatement précédé par
la balise A.
Exemple : Sélectionner la première balise <i> située après un
paragraphe <p>.
Exemple de code HTML correspondant :
25. Pr . A. Zannou FST d’ Al-Hoceima
25
Sélecteurs CSS
Sélecteurs avancées
CSS
A + B : sélecteur adjacent
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> ceci est mon premier paragraphe . </p>
<i> une premier phrase</i>
<p> ceci est mon deuxième paragraphe. </p>
<i> une deuxième phrase</i> <br>
<i> une troisième phrase</i>
</body >
</html>
p + i
{
color: red;
}
Style.css
26. Pr . A. Zannou FST d’ Al-Hoceima
26
Sélecteurs CSS
Sélecteurs avancées
CSS
A[attribut] : sélectionne une balise qui possède un attribut
Exemple : sélectionner tous les liens qui possèdent un attribut title.
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<a href="autre.html" title="une autre page"> cliquez
ici</a>
</body >
</html>
a [title]
{
color: red;
}
style.css
27. Pr . A. Zannou FST d’ Al-Hoceima
27
Sélecteurs CSS
Sélecteurs avancées
CSS
A[attribut="Valeur"] : sélectionne une balise, un attribut et une
valeur exacte
Exemple : sélectionner tous les liens <a> qui possèdent un attribut title qui
a pour valeur «une autre page».
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<a href="autre.html" title="une autre page"> cliquez
ici</a>
</body >
</html>
a [title=“une autre
page”]
{
color: green;
}
style.css
28. Pr . A. Zannou FST d’ Al-Hoceima
28
Sélecteurs CSS
Sélecteurs avancées
CSS
A[attribut*="Valeur"] : sélectionne une balise, un attribut et une
valeur
Exemple : sélectionner tous les liens <a> qui possèdent un attribut title
contenant dans sa valeur le mot « page» (peu importe sa position).
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<a href="autre.html" title="une autre page"> cliquez
ici</a>
</body >
</html>
a [title*=“page”]
{
color: bleu;
}
29. Pr . A. Zannou FST d’ Al-Hoceima
29
Syntaxe de CSS
Balises universelles : <span> et <div>
CSS
<span> et <div> sont des balises HTML universelles qui ne sont utiles
qu'avec les feuilles de style CSS. Elles n'ont aucune signification
lorsqu'elles sont utilisées.
Ces balises sont des éléments de mise en forme prévus pour appliquer un
style à un contenu.
Ces balisent universelles permettent d'appliquer une class (ou un id) à
un texte qui n’est pas entourés par des balises.
30. Pr . A. Zannou FST d’ Al-Hoceima
30
Syntaxe de CSS
Balises universelles : <span>
CSS
<span> est une balise de type inline servant à associer un style à une
partie d'un texte.
<span> s'utilise au sein d'un paragraphe pour sélectionner certains mots
uniquement (comme <strong> et <em>).
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p> Le langage <span id="ht"> HTML est un
langage de description ! </span> </p>
</body >
</html>
#ht
{
color: red;
}
Style.css
31. Pr . A. Zannou FST d’ Al-Hoceima
31
Syntaxe de CSS
Balises universelles : <div>
CSS
<div> est une balise de type block, servant à entourer un bloc (créer un
bloc).
Cette balise crée un nouveau «bloc» dans la page et provoque donc
obligatoirement un retour à la ligne avant et après le bloc (comme les
balises <p>, <h1>, ...) style.css
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<div id="ht"> <p> HTML est un
langage de description ! </p>
</div>
</body >
</html>
#ht
{
color: green;
}
32. Pr . A. Zannou FST d’ Al-Hoceima
32
Héritage en CSS
Notion d’héritage
CSS
L’héritage est une notion centrale et fondamentale en CSS.
La notion d’héritage signifie que : tout élément HTML enfant va hériter, «
en cascades », les styles de ses parents.
C’est de là que vient le nom du CSS : Cascading Style Sheets, ou Feuilles de
Style en Cascades.
33. Pr . A. Zannou FST d’ Al-Hoceima
33
Héritage en CSS
Notion d’héritage
CSS
Exemple : Tous les éléments { l’intérieur de l’élément body sont des
enfants de cet élément. Si l’on applique un style { l’élément body, ses
enfants en hériteront automatiquement.
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<h3> Le langage HTML </h3>
<p>HTML, désigne un type de langage <i>informatique
</i> descriptif.</p>
</div>
</body >
</html>
body
{
color: blue;
}
34. Pr . A. Zannou FST d’ Al-Hoceima
34
Héritage en CSS
Modifier le principe d’héritage
CSS
On peut modifier le principe d’héritage en appliquant un nouveau style {
n'importe quel élément.
Exemple: On peut changer la couleur du fond de certains mots en utilisant
la balise <i> qui permet de mettre en valeur certains mots :
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<p>
HTML, désigne un type de <i> langage
informatique descriptif.</i>
</p>
</body >
</html>
body
{
color: blue;
}
i
{
color:green;
}
35. Pr . A. Zannou FST d’ Al-Hoceima
35
Héritage en CSS
Modifier le principe d’héritage
CSS
Le même principe vaut pour toutes les balises HTML et toutes les
propriétés CSS.
36. Pr . A. Zannou FST d’ Al-Hoceima
36
Héritage en CSS
Priorité et ordre en CSS
CSS
En CSS si un élément reçoit plusieurs fois une même propriété avec des
valeurs différentes, le style qui va être prioritaire va être le style le plus
proche de l’élément.
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<h3> Priorité et ordre en CSS </h3>
<p>
HTML, désigne un type de <i> langage
informatique descriptif.</i>
</p>
</body >
</html>
body
{
color: blue;
}
p
{
color:green;
}
i
{
color:red;
}
37. Pr . A. Zannou FST d’ Al-Hoceima
37
Héritage en CSS
Priorité par rapport à l’emplacement du CSS
CSS
Si on écrit le CSS à différents endroits, et si il y a un conflit, le style
appliqué à l’élément directement (grâce à l’attribut style) sera prioritaire.
Ensuite, ce sera le style écrit dans l’élément HTML style qui sera retenu.
Finalement, le style écrit dans un fichier CSS séparé sera retenu en dernier.
38. Pr . A. Zannou FST d’ Al-Hoceima
38
Héritage en CSS
Priorité par rapport à l’emplacement du CSS
CSS
Remarque : On peut modifier cette notion d'ordre en ajoutant la mention
"!important" à la fin d'une déclaration CSS qu'on veut imposer .
<html>
<head>
<link rel="stylesheet" href=“style.css" />
<style>
p{ color:blue;}
</style>
</head>
<body>
<p style="color:green">
html, désigne un type de langage informatique
descriptif.
</p>
</body >
</html>
p
{
color:red !important;
}
39. Pr . A. Zannou FST d’ Al-Hoceima
39
Formatage du texte
La couleur
CSS
Pour modifier la couleur du texte, on utilise la propriété CSS color.
En CSS, il existe plusieurs façons de choisir une couleur :
Indiquer le nom de la couleur :
C’est la méthode la plus simple et la plus pratique pour choisir une
couleur.
Le défaut de cette méthode est qu'il n'existe que 16 couleurs dites «
standard ».
Les 16 couleurs qu’on peut utiliser en tapant simplement leur nom :
p
{
color: teal;
}
40. Pr . A. Zannou FST d’ Al-Hoceima
40
Formatage du texte
La couleur
CSS
Notation hexadécimale :
Un nom de couleur en hexadécimal ressemble à : #FF5A28.
Avantage : 16 millions de couleurs.
Ces lettres ou chiffres fonctionnent deux par deux.
les deux premiers indiquent une quantité de rouge
les deux suivants une quantité de vert
les deux derniers une quantité de bleu.
En mélangeant ces quantités (Rouge-Vert-Bleu) on peut obtenir une
couleur.
#000000 correspond à la couleur noire
#FFFFFF à la couleur blanche.
p
{
color: #FF5A28;
}
41. Pr . A. Zannou FST d’ Al-Hoceima
41
Formatage du texte
La couleur
CSS
RGB :
Red-Green-Blue : (Rouge-Vert-Bleu).
Comme avec la notation hexadécimale, pour choisir une couleur, on doit
définir une quantité de rouge, de vert et de bleu.
p
{
color: rgb(15,41,49);
}
42. Pr . A. Zannou FST d’ Al-Hoceima
42
Formatage du texte
La taille
CSS
Pour modifier la taille du texte, on utilise la propriété CSS font-size.
Pour indiquer la valeur de la taille du texte, on utilise l’une des deux
techniques : taille absolue ou taille relative.
43. Pr . A. Zannou FST d’ Al-Hoceima
43
Formatage du texte
La taille absolue
CSS
Indiquer une taille absolue : en pixels, en centimètres ou millimètres.
body
{
font-size: 16px;
}
p
{
font-size: 1cm;
}
i
{
font-size: 2 mm;
}
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<h3> Formatage du texte</h3>
<p>
HTML, désigne un type de <i> langage
informatique descriptif.</i>
</p>
</body >
</html>
44. Pr . A. Zannou FST d’ Al-Hoceima
44
Formatage du texte
La taille relative
CSS
Indiquer une taille relative : en pourcentage, «em» ou «ex».
On peut également indiquer la taille avec des mots en anglais :
xx-small : minuscule ;
x-small : très petit ;
small : petit ;
medium : moyen ;
large : grand ;
x-large : très grand ;
xx-large : gigantesque.
45. Pr . A. Zannou FST d’ Al-Hoceima
45
Formatage du texte
La taille relative
CSS
body
{
font-size: 50%;
}
p
{
font-size: 5em;
}
i
{
font-size: 1ex;
}
<html>
<head>
<link rel="stylesheet" href=“style.css" />
</head>
<body>
<h3> Formatage du texte</h3>
<p>
HTML, désigne un type de <i> langage
informatique descriptif.</i>
</p>
</body >
</html>
46. Pr . A. Zannou FST d’ Al-Hoceima
46
Formatage du texte
La police
CSS
La propriété CSS font-family permet d'indiquer la police à utiliser .
body
{
font-family: cambria;
}
Pour éviter les problèmes si l'internaute n'a pas la même police, on précise
en général plusieurs noms de police, séparés par des virgules :
body
{
font-family: cambria, arial,calibri, times;
}
47. Pr . A. Zannou FST d’ Al-Hoceima
47
Formatage du texte
Italic, gras, suligné
CSS
Mettre en italique : on utilise la propriété CSS font-style qui peut
prendre 3 valeurs :
italic : le texte sera mis en italique.
oblique : le texte sera passé en oblique (les lettres sont penchées).
normal : le texte sera normal (par défaut)
# p1
{
font-style: italic;
}
# p2
{
font-style: oblique;
}
# p3
{
font-style: normal;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">Paragraphe 1</p>
<p id="p2">Paragraphe 2</p>
<p id="p3">Paragraphe 3</p>
</body >
</html>
48. Pr . A. Zannou FST d’ Al-Hoceima
48
Formatage du texte
Italic, gras, suligné
CSS
Mettre en gras : on utilise la propriété CSS font-weight qui peut prendre
les valeurs :
bold : le texte sera en gras ;
normal : le texte sera écrit normalement (par défaut)
#p1
{
font-weight: bold;
}
#p2
{
font-weight: normal;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">Paragraphe 1</p>
<p id="p2">Paragraphe 2</p>
<p id="p3">Paragraphe 3</p>
</body >
</html>
49. Pr . A. Zannou FST d’ Al-Hoceima
49
Formatage du texte
Italic, gras, suligné
CSS
Soulignement et autres décorations : on utilise la propriété CSS text-
decoration qui peut prendre les valeurs :
underline : souligné.
line-through : barré.
overline : ligne au-dessus.
none : normal (par défaut)
51. Pr . A. Zannou FST d’ Al-Hoceima
51
Formatage du texte
Casse du texte
CSS
La propriété text-transform permet de modifier la casse du texte
(MAJ/min) et peu prendre les valeurs suivantes :
uppercase : texte en lettres capitales.
lowercase : texte en lettres minuscules.
capitalize : texte avec la première lettre de chaque en majuscule.
none : texte normal (non changé).
53. Pr . A. Zannou FST d’ Al-Hoceima
53
Formatage du texte
Alignement
CSS
La propriété CSS text-align définie l’alignement horizontal et peu prendre
quatre valeurs :
left : le texte sera aligné à gauche (c'est le réglage par défaut).
center : le texte sera centré.
right : le texte sera aligné à droite.
justify : le texte sera « justifié ».
55. Pr . A. Zannou FST d’ Al-Hoceima
55
Formatage du texte
Alignement
CSS
La propriété CSS vertical-align définie l’alignement vertical en langage et
peu prendre trois valeurs :
top: le texte sera aligné en haut (c'est le réglage par défaut).
middle: le texte sera centré verticalement.
bottom: le texte sera aligné en bas.
59. Pr . A. Zannou FST d’ Al-Hoceima
59
Format d’un bloc
Couleur de fond
CSS
Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color.
background-color s'utilise de la même manière que la propriété color :
taper le nom d'une couleur
écrire le nom d'une couleur en notation hexadécimale
utiliser la méthode RGB.
60. Pr . A. Zannou FST d’ Al-Hoceima
60
Format d’un bloc
Couleur de fond
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<body id="bg">
Bonjour à tous !
</body >
</html>
#bg
{
background-color: green;
}
61. Pr . A. Zannou FST d’ Al-Hoceima
61
Format d’un bloc
Images de fond
CSS
La propriété CSS background-image permet d'indiquer une image de
fond.
background-image prend comme valeur : url("nom_image.png")
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body>
<body id="bi">
</body >
</html>
#bi
{
background-image: url(im.jpg);
}
62. Pr . A. Zannou FST d’ Al-Hoceima
62
Format d’un bloc
Images de fond
CSS
Par défaut, l'image de fond est répétée en mosaïque.
L'image de fond ne s'applique pas forcément à la page entière. On peut
aussi mettre une image de fond derrière les titres, paragraphes, etc.
63. Pr . A. Zannou FST d’ Al-Hoceima
63
Format d’un bloc
Images de fond : options disponibles
CSS
background-repeat : Par défaut, l'image de fond est répétée en mosaïque.
Cette propriété change cela selon les valeurs suivantes :
no-repeat : le fond ne sera pas répété.
repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement.
repeat-y : le fond sera répété uniquement sur la première colonne,
verticalement.
repeat : le fond sera répété en mosaïque (par défaut).
64. Pr . A. Zannou FST d’ Al-Hoceima
64
Format d’un bloc
Images de fond : options disponibles
CSS
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-image: url(im.jpg);
background-repeat:no-repeat;
color:white;
}
65. Pr . A. Zannou FST d’ Al-Hoceima
65
Format d’un bloc
Images de fond : options disponibles
CSS
background-position : indique où doit se trouver l'image de fond.
Cette propriété n'est intéressante que si elle est combinée avec la propriété
background-repeat: no-repeat; (un fond qui ne se répète pas).
Cette propriété peut prendre les valeurs suivantes :
Xpx Ypx : deux valeurs en pixels pour indiquer la position du fond.
La position est indiquée par rapport au coin supérieur gauche de la page
(ou du paragraphe, si on applique le fond à un paragraphe).
66. Pr . A. Zannou FST d’ Al-Hoceima
66
Format d’un bloc
Images de fond : options disponibles
CSS
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-image: url(im.jpg);
background-repeat:no-repeat;
background-position:50px 20px;
color:red;
}
67. Pr . A. Zannou FST d’ Al-Hoceima
67
Format d’un bloc
Images de fond : options disponibles
CSS
background-position (suite) : Il est aussi possible d'utiliser ces valeurs pour
indiquer l’alignement de l’image de fond :
top : en haut ;
bottom : en bas ;
left : à gauche ;
center : centré ;
right : à droite.
Il est possible de combiner ces mots
68. Pr . A. Zannou FST d’ Al-Hoceima
68
Format d’un bloc
Images de fond : options disponibles
CSS
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-image: url(im.jpg);
background-repeat:no-repeat;
background-position:bottom center;
color:red;
}
69. Pr . A. Zannou FST d’ Al-Hoceima
69
Format d’un bloc
Images de fond : combiner les propriétés
CSS
Si on utilise beaucoup de propriétés en relation avec l’image du fond, on peut
utiliser la propriété background dont la valeur peut combiner plusieurs
valeurs.
Remarques :
L'ordre des valeurs n'a pas d'importance.
On est pas obligé de mettre toutes les valeurs
70. Pr . A. Zannou FST d’ Al-Hoceima
70
Format d’un bloc
Images de fond : options disponibles
CSS
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background: url(im.jpg) no-repeat fixed bottom center;
}
71. Pr . A. Zannou FST d’ Al-Hoceima
71
Format d’un bloc
Images de fond : Plusieurs images de fond
CSS
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément.
Pour cela, il suffit de séparer les déclarations par une virgule.
Remarque :
L'ordre de déclaration des images a son importance : la première image de la
liste sera placée au dessus des autres.
72. Pr . A. Zannou FST d’ Al-Hoceima
72
Format d’un bloc
Images de fond : options disponibles
CSS
<html>
<head>
<link rel="stylesheet“ href="style.css" />
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background: url(im.jpg)no-repeat fixed bottom
center,url(im2.png)no-repeat fixed top right;
}
73. Pr . A. Zannou FST d’ Al-Hoceima
73
Format d’un bloc
La transparence
CSS
CSS permet de jouer très facilement avec les niveaux de transparence des
éléments.
La propriété opacity permet d'indiquer le niveau d'opacité (c'est l'inverse de
la transparence) en choisissant une valeur comprise entre 0 et 1 :
1 : l'élément sera totalement opaque : c'est le comportement par défaut.
0 : l'élément sera totalement transparent
75. Pr . A. Zannou FST d’ Al-Hoceima
75
Format d’un bloc
La transparence
CSS
Si on applique la propriété opacity à un élément de la page, tout le contenu de
cet élément sera rendu transparent (images, blocs, etc.).
Si on veut juste rendre la couleur de fond transparente, on utilise la notation
RGB.
Il s'agit en fait de la notation RGB (vue précédemment), mais avec un
quatrième paramètre : le niveau de transparence (appelé « canal alpha »). :
77. Pr . A. Zannou FST d’ Al-Hoceima
77
Format d’un bloc
Hauteur et largeur
CSS
La propriété CSS width précise la largeur d’un bloc en pixels ou en pourcentage.
La propriété CSS height précise la hauteur d’un bloc en pixels ou en pourcentage.
#p1
{
width:100;
height:300;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width
précise la largeur d’un bloc en pixels ou en
pourcentage.La propriété CSS height précise la
hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
78. Pr . A. Zannou FST d’ Al-Hoceima
78
Format d’un bloc
Marges extérieurs
CSS
La propriété margin spécifie l'espace tout autour du bloc généralement en pixels..
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px solid red;
margin:40px;
}
79. Pr . A. Zannou FST d’ Al-Hoceima
79
Format d’un bloc
Marges extérieurs
CSS
On peut définir la marge d’un côté du bloc en utilisant les propriétés CSS
suivantes :
margin-top : spécifie l’espace au dessus du bloc.
margin-bottom : spécifie l’espace en dessous du bloc.
margin-left : spécifie l’espace { gauche du bloc.
margin-right : spécifie l’espace { droite du bloc .
La propriété margin peut prendre la valeur auto, ce qui permet de centrer
horizontallement l’élément { l'intérieur de son conteneur .
80. Pr . A. Zannou FST d’ Al-Hoceima
80
Format d’un bloc
Marges extérieurs
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px solid red;
margin-top:10%;
}
81. Pr . A. Zannou FST d’ Al-Hoceima
81
Format d’un bloc
Marges intérieures (enrobage)
CSS
La propriété padding spécifie l'enrobage tout autour du bloc en pixels.
A la différence du margin, le padding spécifie l'espace entre le contenu du bloc
et son contour (par exemple, entre le texte du bloc et sa bordure).
82. Pr . A. Zannou FST d’ Al-Hoceima
82
Format d’un bloc
Marges intérieures (enrobage)
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px solid red;
padding:40px;
}
83. Pr . A. Zannou FST d’ Al-Hoceima
83
Format d’un bloc
Marges intérieures (enrobage)
CSS
On peut définir l'enrobage d’un côté du bloc en utilisant les propriétés CSS
suivantes:
padding-top : spécifie l'enrobage au dessus du bloc
padding-bottom : spécifie l'enrobage en dessous du bloc.
padding-left : spécifie l'enrobage à gauche du bloc.
padding-right : spécifie l'enrobage à droite du bloc .
84. Pr . A. Zannou FST d’ Al-Hoceima
84
Format d’un bloc
Marges intérieures (enrobage)
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px solid red;
padding-top:40px;
}
85. Pr . A. Zannou FST d’ Al-Hoceima
85
Bordures et ombres
Bordures standard
CSS
La propriété CSS border permet de modifier l'apparence des bordures
La propriété border peut combiner plusieurs valeurs :
La largeur de la bordure, indiquée en pixels.
La couleur de la bordure, indiquée en utilisant le nom de couleur, une valeur
hexadécimale ou une valeur RGB.
Le type de bordure : les valeurs disponibles sont :
o none: pas de bordure (par défaut)
o solid: un trait simple
o dotted: pointillés
o dashed: tirets
o double: bordure double
o groove: en relief
o ridge: autre effet relief
o inset: effet 3D global enfoncé
o outset: effet 3D global surélevé
86. Pr . A. Zannou FST d’ Al-Hoceima
86
Bordures et ombres
Bordures standard
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px red dashed;
}
87. Pr . A. Zannou FST d’ Al-Hoceima
87
Bordures et ombres
Bordures standard
CSS
On peut appliquer des bordures différentes en fonction du côté (haut, bas, gauche
ou droite) en utilisant les quatre propriétés suivantes :
border-top: bordure du haut.
border-bottom: bordure du bas.
border-left: bordure de gauche.
border-right: bordure de droite.
Ces propriétés fonctionnent comme border mais ne s'appliquent qu'à un seul
côté.
88. Pr . A. Zannou FST d’ Al-Hoceima
88
Bordures et ombres
Bordures standard
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
Border-right:2px red dashed;
}
89. Pr . A. Zannou FST d’ Al-Hoceima
89
Bordures et ombres
Bordures arrondies
CSS
La propriété border-radius permet d'arrondir les angles d’un bloc, en indiquant
la taille (l'importance) de l'arrondi en pixels.
L'arrondi se voit si l'élément a des bordures, ou s'il a une couleur de fond.
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px red dashed;
border-radius:20px;
}
90. Pr . A. Zannou FST d’ Al-Hoceima
90
Bordures et ombres
Bordures arrondies
CSS
On peut aussi préciser la forme de l'arrondi pour chaque coin en indiquant
quatre valeurs : border-radius: Wpx Xpx Ypx Zpx;
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété CSS
height précise la hauteur d’un bloc en pixels ou en pourcentage
</p>
</body >
</html>
#p1
{
border:2px red dashed;
border-radius:20px 3px 20px 3px;
}
91. Pr . A. Zannou FST d’ Al-Hoceima
91
Bordures et ombres
Les ombres : ombres des boîtes
CSS
La propriété box-shadow permet d’ajouter une ombre { une boîte (cadre).
Cette propriété s'applique à tout le bloc et prend quatre valeurs dans l'ordre
suivant :
le décalage horizontal de l'ombre (en px).
le décalage vertical de l'ombre (en px).
l'adoucissement du dégradé (en px).
la couleur de l'ombre.
92. Pr . A. Zannou FST d’ Al-Hoceima
92
Bordures et ombres
Les ombres : ombres des boîtes
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS width précise la
largeur d’un bloc en pixels ou en pourcentage.La propriété
CSS height précise la hauteur d’un bloc en pixels ou en
pourcentage </p>
</body >
</html>
#p1
{
border:2px green dashed;
border-shadow: 10px 15px 0px red;
}
On peut aussi rajouter une cinquième valeur facultative : inset. Dans ce cas,
l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé.
93. Pr . A. Zannou FST d’ Al-Hoceima
93
Bordures et ombres
Les ombres : ombre du texte
CSS
La propriété text-shadow permet d’ajouter une ombre directement sur les
lettres du texte.
Les valeurs fonctionnent exactement de la même façon que box-shadow :
le décalage horizontal de l'ombre (en px).
le décalage vertical de l'ombre (en px).
l'adoucissement du dégradé (en px).
la couleur de l'ombre.
94. Pr . A. Zannou FST d’ Al-Hoceima
94
Bordures et ombres
Les ombres : ombres des boîtes
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p id="p1">Paragraphe 1 :La propriété CSS
width précise la largeur d’un bloc en pixels
ou en pourcentage. La propriété CSS height
précise la hauteur d’un bloc en pixels ou en
pourcentage </p>
</body >
</html>
#p1
{
text-shadow: 10px 15px 20px red;
}
95. Pr . A. Zannou FST d’ Al-Hoceima
95
Flottants
Float
CSS
La propriété CSS float permet de spécifier qu'un élément flotte à gauche, à droite
ou pas du tout au sein de son élément conteneur: left | right | none.
Syntaxe:
float : none;
float : left;
float : right;
96. Pr . A. Zannou FST d’ Al-Hoceima
96
Flottants
Float
CSS
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<img src="im2.png"/>
<p>Paragraphe 1 :La propriété CSS width précise <br>
la largeur d’un bloc en pixels ou en pourcentage.<br>
La propriété CSS height précise la hauteur<br>
d’un bloc en pixels ou en pourcentage
</p>
<hr>
</body >
</html>
img
{
float:right;
}
Exemple:
97. Pr . A. Zannou FST d’ Al-Hoceima
97
Flottants
clear
CSS
Force un élément à se positionner sous les éléments qui flottent dans la direction
indiquée : left | right | both (les deux).
98. Pr . A. Zannou FST d’ Al-Hoceima
98
Flottants
clear
CSS
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<img src="im2.png"/>
<p>Paragraphe 1 :La propriété CSS width précise <br>
la largeur d’un bloc en pixels ou en pourcentage.<br>
La propriété CSS height précise la hauteur<br>
d’un bloc en pixels ou en pourcentage
</p>
<hr>
</body >
</html>
img
{
float:right;
}
hr
{
clear:both;
}
Exemple:
99. Pr . A. Zannou FST d’ Al-Hoceima
99
Les pseudo-classes CSS
CSS
Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un
état particulier de l’élément qui doit être sélectionné.
Syntaxe:
sélecteur:pseudo-classe
{
propriété: valeur;
}
100. Pr . A. Zannou FST d’ Al-Hoceima
100
Les pseudo-classes CSS
CSS
La pseudo-classe :hover , par exemple, permettra d'appliquer une mise en
forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur.
Exemple:
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<a href="autre.html"> Cliquez ici 1 </a> <br>
</body >
</html>
a:hover
{
color:red;
}
a:link
{
color:orange;
}
a:active
{
color:green;
}
a:visited
{
color:black;
}
101. Pr . A. Zannou FST d’ Al-Hoceima
101
Les pseudo-éléments CSS
CSS
Comme les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteurs. Au
lieu de décrire un état contextuel (survol), ils permettent de cibler certaines
parties du document, et de créer « virtuellement » un nouvel élément.
::first-letter cible la première lettre de la première ligne d’un bloc
::first-line cible la première ligne de l’élément ciblé par le sélecteur
102. Pr . A. Zannou FST d’ Al-Hoceima
102
Les pseudo-éléments CSS
CSS
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p>La propriété CSS width précise <br>
la largeur d’un bloc en pixels ou en
pourcentage .
</p>
</body >
</html>
p::first-letter
{
color:red;
}
p::first-line
{
color:green;
}
103. Pr . A. Zannou FST d’ Al-Hoceima
103
Le sélecteur d’enfant
CSS
Le sélecteur d’enfant direct s’applique à l’enfant ou aux enfants de l’élément
désigné.
Le sélecteur enfant permet de cibler les éléments qui sont à l’intérieur d’un
élément parent.
Note : Contrairement au sélecteur descendant, les éléments cibles doivent être
les enfants directs du parent (le niveau hiérarchique juste en dessous du parent).
Syntaxe:
elem1 > elem2
{
propriété: valeur;
}
104. Pr . A. Zannou FST d’ Al-Hoceima
104
Le sélecteur d’enfant
CSS
<html>
<head> <link rel="stylesheet" href="style.css" /> </head>
<body>
<section>
<h1> Les technologies du Web </h1>
<article class="t1">
<h1> Le Langage HTML </h1>
</article>
<article class="t2">
<h1> Le Langage CSS</h1>
</article>
<h1> Le Langage JavaScript </h1>
</section>
</body >
</html>
section h1
{
color: red;
}
style.css
Affichage
Exemple: sélecteur descendant
105. Pr . A. Zannou FST d’ Al-Hoceima
105
Le sélecteur d’enfant
CSS
<html>
<head> <link rel="stylesheet" href="style.css" /> </head>
<body>
<section>
<h1> Les technologies du Web </h1>
<article class="t1">
<h1> Le Langage HTML </h1>
</article>
<article class="t2">
<h1> Le Langage CSS</h1>
</article>
<h1> Le Langage JavaScript </h1>
</section>
</body >
</html>
Section > h1
{
color: red;
}
style.css
Affichage
Exemple: sélecteur d’enfant