Chapitre 2_CSS_complet_Version1.pdf

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
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
• 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
• 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
• 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
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
 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
 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
 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
 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
 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
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
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
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
Syntaxe de CSS
CSS
 background‐color représente la couleur de fond .
 Exemple 1:
<html>
<head>
</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
Syntaxe de CSS
CSS
 Exemple 2:
<html>
<head>
</head>
<body>
une <i> phrase</i>
</body >
</html>
p
{
background‐color:red;
}
i
{
background‐color:green;
}
style.css

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>
</head>
<body>
une <i> phrase</i>
</body >
</html>
P,i
{
}
style.css

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
Sélecteurs CSS
CSS
<html>
<head>
</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
{
}
Style.css
 Exemple:

20
Sélecteurs CSS
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
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
Sélecteurs CSS
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
Sélecteurs CSS
CSS
<html>
<head>
</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
Sélecteurs CSS
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
Sélecteurs CSS
CSS
 A + B : sélecteur adjacent
<html>
<head>
</head>
<body>
<p> ceci est mon premier paragraphe . </p>
<i> une premier phrase</i>
<i> une deuxième phrase</i> <br>
<i> une troisième phrase</i>
</body >
</html>
p + i
{
color: red;
}
Style.css

26
Sélecteurs CSS
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>
</head>
<body>
<a href="autre.html" title="une autre page"> cliquez
ici</a>
</body >
</html>
a [title]
{
color: red;
}
style.css

27
Sélecteurs CSS
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>
</head>
<body>
ici</a>
</body >
</html>
a [title=“une autre
page”]
{
color: green;
}
style.css

28
Sélecteurs CSS
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>
</head>
<body>
ici</a>
</body >
</html>
a [title*=“page”]
{
color: bleu;
}

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
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>
</head>
<body>
<p> Le langage <span id="ht"> HTML est un
langage de description ! </span> </p>
</body >
</html>
#ht
{
color: red;
}
Style.css

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>
</head>
<body>
<div id="ht"> <p> HTML est un
langage de description ! </p>
</div>
</body >
</html>
#ht
{
color: green;
}

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
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>
</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
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>
</head>
<body>
<p>
HTML, désigne un type de <i> langage
informatique descriptif.</i>
</p>
</body >
</html>
body
{
color: blue;
}
i
{
color:green;
}

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
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>
</head>
<body>
<h3> Priorité et ordre en CSS </h3>
<p>
</p>
</body >
</html>
body
{
color: blue;
}
p
{
color:green;
}
i
{
color:red;
}

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
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>
<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
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
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
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
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
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>
</head>
<body>
<h3> Formatage du texte</h3>
<p>
</p>
</body >
</html>

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
Formatage du texte
 La taille relative
CSS
body
{
font-size: 50%;
}
p
{
font-size: 5em;
}
i
{
font-size: 1ex;
}
<html>
<head>
</head>
<body>
<h3> Formatage du texte</h3>
<p>
</p>
</body >
</html>

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
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>
</body >
</html>

48
Formatage du texte
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>
</head>
<body>
</body >
</html>

49
Formatage du texte
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
Formatage du texte
CSS
#p1
{
text-decoration: underline;
}
#p2
{
text-decoration: line-through;
}
#p3
{
text-decoration: overline;
}
#p4
{
text-decoration: none;
}
<html>
<head>
</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
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
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>
</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
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
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>
</head>
<body>
<p id="p1">…………..</p>
<p id="p2">…………..</p>
<p id="p3">…………..</p>
<p id="p4">……………</p>
</body >
</html>

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
Formatage du texte
 Alignement
CSS
#tp
{
vertical-align: top;
}
#md
{
vertical-align: middle;
}
#bt
{
vertical-align: bottom;
}
<html>
<head>
</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
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
Formatage du texte
 Aspect d'une puce
CSS
<html>
<head>
</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
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
Format d’un bloc
 Couleur de fond
CSS
<html>
<head>
</head>
<body>
<body id="bg">
Bonjour à tous !
</body >
</html>
#bg
{
background-color: green;
}

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
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
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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-repeat:no-repeat;
color:white;
}

65
Format d’un bloc
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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-position:50px 20px;
color:red;
}

67
Format d’un bloc
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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background-position:bottom center;
color:red;
}

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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
Bonjour à tous !
</body >
</html>
#bi
{
background: url(im.jpg) no-repeat fixed bottom center;
}

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
Format d’un bloc
CSS
<html>
<head>
</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
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
Format d’un bloc
 La transparence
CSS
#bi
{
color:red;
}
#p1
{
opacity:0;
}
#p2
{
opacity:0.5;
}
#p3
{
opacity:1;
}
<html>
<head>
</head>
<body id="bi“>
<p id="p1">Paragraphe 1 </p>
<p id="p2"> Paragraphe 2</p>
</body >
</html>

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
Format d’un bloc
 La transparence
CSS
#bi
{
opacity:0.5;
}
#p2
{
background: url(im.jpg)
no-repeat;
}
<html>
<head>
</head>
<body id="bi">
<p>Paragraphe 1 </p>
<p> Paragraphe 3</p>
</body >
</html>

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>
</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
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>
</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
Format d’un bloc
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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
margin-top:10%;
}

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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
padding:40px;
}

83
Format d’un bloc
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
Format d’un bloc
CSS
<html>
<head>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
padding-top:40px;
}

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
Bordures et ombres
CSS
<html>
<head>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
border:2px red dashed;
}

87
Bordures et ombres
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
Bordures et ombres
CSS
<html>
<head>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
Border-right:2px red dashed;
}

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>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
border-radius:20px;
}

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>
</head>
<body id="bi">
</p>
</body >
</html>
#p1
{
border-radius:20px 3px 20px 3px;
}

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
Bordures et ombres
CSS
<html>
<head>
</head>
<body id="bi">
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
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
Bordures et ombres
CSS
<html>
<head>
</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
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
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
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
Flottants
 clear
CSS
<html>
<head>
</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
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
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>
</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
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
Les pseudo-éléments CSS
CSS
<html>
<head>
</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
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
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>
<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
CSS
<html>
<head> <link rel="stylesheet" href="style.css" /> </head>
<body>
<section>
<h1> Les technologies du Web </h1>
<h1> Le Langage HTML </h1>
</article>
<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

Chapitre 2_CSS_complet_Version1.pdf

Contenu connexe

Similaire à Chapitre 2_CSS_complet_Version1.pdf

Chapitre 2_CSS_complet_Version1.pdf