SlideShare une entreprise Scribd logo
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
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
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
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
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
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
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
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
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>
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.
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
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
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.
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
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
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
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
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.
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:
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
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;
}
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).
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
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 :
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
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
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
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;
}
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.
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
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;
}
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.
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;
}
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;
}
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.
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;
}
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.
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;
}
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;
}
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;
}
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);
}
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.
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>
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.
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>
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;
}
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>
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>
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)
Pr . A. Zannou FST d’ Al-Hoceima
50
Formatage du texte
 Italic, gras, suligné
CSS
#p1
{
text-decoration: underline;
}
#p2
{
text-decoration: line-through;
}
#p3
{
text-decoration: overline;
}
#p4
{
text-decoration: none;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">Paragraphe 1:underline</p>
<p id="p2">Paragraphe 2:line-
through</p>
<p id="p3">Paragraphe 3:overline</p>
<p id="p4">Paragraphe 4:none</p>
</body >
</html>
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é).
Pr . A. Zannou FST d’ Al-Hoceima
52
Formatage du texte
 Casse du texte
CSS
#p1
{
text-transform: uppercase;
}
#p2
{
text-transform: lowercase;
}
#p3
{
text-transform: capitalize;
}
#p4
{
text-transform: none;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">Paragraphe 1: uppercase</p>
<p id="p2">Paragraphe 2: lowercase</p>
<p id="p3">Paragraphe 3: capitalize</p>
<p id="p4">Paragraphe 4: none</p>
</body >
</html>
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é ».
Pr . A. Zannou FST d’ Al-Hoceima
54
Formatage du texte
 Casse du texte
CSS
#p1
{
text-align: right;
}
#p2
{
text-align: left;
}
#p3
{
text-align: center;
}
#p4
{
text-align: justify;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">…………..</p>
<p id="p2">…………..</p>
<p id="p3">…………..</p>
<p id="p4">……………</p>
</body >
</html>
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.
Pr . A. Zannou FST d’ Al-Hoceima
56
Formatage du texte
 Alignement
CSS
#tp
{
vertical-align: top;
}
#md
{
vertical-align: middle;
}
#bt
{
vertical-align: bottom;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table border="1" height="100">
<tr>
<td id="tp"> top</td>
<td id="md"> middle</td>
<td id="bt"> bottom</td>
</tr>
</table>
</body >
</html>
Pr . A. Zannou FST d’ Al-Hoceima
57
Formatage du texte
 Aspect d'une puce
CSS
 La propriété list-style modifie l'aspect d'une puce pour les balises <ul>,
<ol> et <li>.
 Cette propriété peu prendre les valeurs suivantes :
 circle : puce ronde filaire
 disc : puce ronde et pleine
 square : puce carrée
 decimal : puce numérique
 upper-alpha : puce alphabétique en majuscules
 upper-roman : puce en caractère romain en majuscules
 none : masque la puce
Pr . A. Zannou FST d’ Al-Hoceima
58
Formatage du texte
 Aspect d'une puce
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
<li id=“#t1”> circle</li>
<li id=“#t2”> disc</li>
<li id=“#t3”> square</li>
<li id=“#t4”> decimal</li>
<li id=“#t5”> upper-roman</li>
<li id=“#t6”> upper-alpha</li>
<li id=“#t7”> none</li>
</ul>
</body >
</html>
#t1
{
list-style: circle;
}
#t2
{
list-style: disc;
}
#t3
{
list-style: square;
}
#t4
{
list-style: decimal;
}
#t5
{
list-style: upper-roman;
}
#t6
{
list-style: upper-alpha;
}
#t7
{
list-style: none;
}
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.
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;
}
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);
}
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.
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).
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;
}
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).
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;
}
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
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;
}
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
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;
}
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.
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;
}
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
Pr . A. Zannou FST d’ Al-Hoceima
74
Format d’un bloc
 La transparence
CSS
#bi
{
color:red;
}
#p1
{
opacity:0;
}
#p2
{
opacity:0.5;
}
#p3
{
opacity:1;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi“>
<p id="p1">Paragraphe 1 </p>
<p id="p2"> Paragraphe 2</p>
<p id="p3"> Paragraphe 3</p>
</body >
</html>
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 »). :
Pr . A. Zannou FST d’ Al-Hoceima
76
Format d’un bloc
 La transparence
CSS
#bi
{
opacity:0.5;
}
#p2
{
background: url(im.jpg)
no-repeat;
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body id="bi">
<p>Paragraphe 1 </p>
<p id="p2"> Paragraphe 2</p>
<p> Paragraphe 3</p>
</body >
</html>
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>
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;
}
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 .
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%;
}
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).
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;
}
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 .
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;
}
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é
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;
}
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é.
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;
}
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;
}
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;
}
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.
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é.
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.
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;
}
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;
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:
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).
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:
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;
}
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;
}
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
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;
}
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;
}
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
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

Contenu connexe

Similaire à Chapitre 2_CSS_complet_Version1.pdf

Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
Manel Ben Sassi
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
Meetup css
Meetup cssMeetup css
Meetup css
unpetitlu
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
El Habib NFAOUI
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
RihabBENLAMINE
 
CSS
CSSCSS
CSS
adil h
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
Jonathan Levaillant
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
IbrahimaBarry49
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdfCascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
Sweetman3
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
Romy Duhem-Verdière
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
Axel Chalon
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
Thamer belfkih
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
thamer belfkih
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 

Similaire à Chapitre 2_CSS_complet_Version1.pdf (20)

Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
Meetup css
Meetup cssMeetup css
Meetup css
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
 
CSS
CSSCSS
CSS
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdfCascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
 
Css
CssCss
Css
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 

Dernier

Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
M2i Formation
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
Friends of African Village Libraries
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
BenotGeorges3
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
Txaruka
 

Dernier (6)

Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
 

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)
  • 50. Pr . A. Zannou FST d’ Al-Hoceima 50 Formatage du texte  Italic, gras, suligné CSS #p1 { text-decoration: underline; } #p2 { text-decoration: line-through; } #p3 { text-decoration: overline; } #p4 { text-decoration: none; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <p id="p1">Paragraphe 1:underline</p> <p id="p2">Paragraphe 2:line- through</p> <p id="p3">Paragraphe 3:overline</p> <p id="p4">Paragraphe 4:none</p> </body > </html>
  • 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é).
  • 52. Pr . A. Zannou FST d’ Al-Hoceima 52 Formatage du texte  Casse du texte CSS #p1 { text-transform: uppercase; } #p2 { text-transform: lowercase; } #p3 { text-transform: capitalize; } #p4 { text-transform: none; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <p id="p1">Paragraphe 1: uppercase</p> <p id="p2">Paragraphe 2: lowercase</p> <p id="p3">Paragraphe 3: capitalize</p> <p id="p4">Paragraphe 4: none</p> </body > </html>
  • 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é ».
  • 54. Pr . A. Zannou FST d’ Al-Hoceima 54 Formatage du texte  Casse du texte CSS #p1 { text-align: right; } #p2 { text-align: left; } #p3 { text-align: center; } #p4 { text-align: justify; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <p id="p1">…………..</p> <p id="p2">…………..</p> <p id="p3">…………..</p> <p id="p4">……………</p> </body > </html>
  • 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.
  • 56. Pr . A. Zannou FST d’ Al-Hoceima 56 Formatage du texte  Alignement CSS #tp { vertical-align: top; } #md { vertical-align: middle; } #bt { vertical-align: bottom; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <table border="1" height="100"> <tr> <td id="tp"> top</td> <td id="md"> middle</td> <td id="bt"> bottom</td> </tr> </table> </body > </html>
  • 57. Pr . A. Zannou FST d’ Al-Hoceima 57 Formatage du texte  Aspect d'une puce CSS  La propriété list-style modifie l'aspect d'une puce pour les balises <ul>, <ol> et <li>.  Cette propriété peu prendre les valeurs suivantes :  circle : puce ronde filaire  disc : puce ronde et pleine  square : puce carrée  decimal : puce numérique  upper-alpha : puce alphabétique en majuscules  upper-roman : puce en caractère romain en majuscules  none : masque la puce
  • 58. Pr . A. Zannou FST d’ Al-Hoceima 58 Formatage du texte  Aspect d'une puce CSS <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <ul> <li id=“#t1”> circle</li> <li id=“#t2”> disc</li> <li id=“#t3”> square</li> <li id=“#t4”> decimal</li> <li id=“#t5”> upper-roman</li> <li id=“#t6”> upper-alpha</li> <li id=“#t7”> none</li> </ul> </body > </html> #t1 { list-style: circle; } #t2 { list-style: disc; } #t3 { list-style: square; } #t4 { list-style: decimal; } #t5 { list-style: upper-roman; } #t6 { list-style: upper-alpha; } #t7 { list-style: none; }
  • 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
  • 74. Pr . A. Zannou FST d’ Al-Hoceima 74 Format d’un bloc  La transparence CSS #bi { color:red; } #p1 { opacity:0; } #p2 { opacity:0.5; } #p3 { opacity:1; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="bi“> <p id="p1">Paragraphe 1 </p> <p id="p2"> Paragraphe 2</p> <p id="p3"> Paragraphe 3</p> </body > </html>
  • 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 »). :
  • 76. Pr . A. Zannou FST d’ Al-Hoceima 76 Format d’un bloc  La transparence CSS #bi { opacity:0.5; } #p2 { background: url(im.jpg) no-repeat; } <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="bi"> <p>Paragraphe 1 </p> <p id="p2"> Paragraphe 2</p> <p> Paragraphe 3</p> </body > </html>
  • 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