Scribd
Carica
5 visualizzazioni79 pagine

Cours3 CSS

Il documento fornisce un'introduzione ai Cascading Style Sheets (CSS), spiegando la loro sintassi, i selettori, l'uso di identificatori e classi, e le regole di eredità e priorità. Viene anche trattata la progettazione di siti web reattivi e come testare il design responsivo utilizzando DevTools. Infine, il documento illustra le differenze tra stili in linea, interni ed esterni.

Caricato da

yousrasenouci668
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
5 visualizzazioni79 pagine

Cours3 CSS

Il documento fornisce un'introduzione ai Cascading Style Sheets (CSS), spiegando la loro sintassi, i selettori, l'uso di identificatori e classi, e le regole di eredità e priorità. Viene anche trattata la progettazione di siti web reattivi e come testare il design responsivo utilizzando DevTools. Infine, il documento illustra le differenze tra stili in linea, interni ed esterni.

Caricato da

yousrasenouci668
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd

3ème Année Ingénieur Informatique

Programmation WEB

Introduction au Cascading Style Sheets (CSS)

Badr Benmammar
[Link]@[Link]
Plan

 Présentation de CSS
 Syntaxe générale d’une feuille CSS
 Sélecteurs courants
 Identifiants et classes
 Descendants directs ou indirects
 Héritage et Cascade
 Priorités entre les styles
 Conception de sites Web réactifs
 Tester le responsive design avec DevTools
 Mise en forme CSS : marges, bordures et texte

2
Présentation de CSS
 CSS, ou Cascading Style Sheets, est un langage de style utilisé pour
décrire l'apparence et la mise en forme des documents HTML.

3
Présentation de CSS
 CSS, ou Cascading Style Sheets, est un langage de style utilisé pour
décrire l'apparence et la mise en forme des documents HTML.

+ CSS

Améliore l'apparence et la
mise en forme des pages

4
Style CSS : dans l’attribut style

 Style en ligne:

5
Style CSS : dans l’attribut style

 Style en ligne:

6
Style CSS : dans l’attribut style

 Style en ligne:

Tlemcen Oran

7
Style CSS : dans l’attribut style

 Style en ligne:

 Attribut style="color:valeur_de_la_c ouleur ".

Tlemcen <span style= "color:blue "> Oran </span>

 span :utilisée pour appliquer un style spécifique à une portion de texte


dans une ligne, sans affecter la structure générale du texte.

8
Style CSS : dans l’attribut style

 Style en ligne:

Tlemcen <p style= "color:blue "> Oran </p>

9
<body>
<div style="background: lightgreen; color: darkgreen;">
<h1>Aperçu :</h1>
</div>

<div style="background: darkred; color: white;"> Style en ligne


<h1>Chapitre 2 :</h1>
</div>

<div style="background: #4B0082; color: white;" align="right">


<h1>:‫<الفصل الثالث‬/h1>
</div>

<div style="background: lightblue; color: navy;" align="right">


<h1>Réflexions finales :</h1>
</div> 10
</body>
Style CSS : dans l’élément HTML <style>

 Style interne

<body >
<h1>Bonjour</h1>
</body>

11
Style CSS : dans l’élément HTML <style>

 Style interne

<body >
<h1>Bonjour</h1>
</body>

12
Style CSS : dans l’élément HTML <style>

 Style interne

<head >
<style>
h1 {
color : red; Dans l’élément
} HTML <style>
</style>
</head >
<body >
<h1>Bonjour</h1>
</body>

il est recommandé de placer les styles dans le <head> pour une


meilleure organisation du code. 13
Style CSS : dans un fichier externe
h1 {
color: red; [Link]
} Style externe

14
Style CSS : dans un fichier externe
h1 {
color: red; [Link]
} Style externe

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> Spécifie le chemin vers le fichier CSS.
<title>Ma Page</title>
<link rel="stylesheet" href="[Link]">
</head>
rel (relation) définit le type de lien entre le fichier HTML
<body> et la ressource externe. "stylesheet" indique que le lien
<h1>Bonjour</h1> est vers une feuille de style CSS.
</body>
</html> link : lier une page HTML à une ressource externe.
15
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="[Link]">
<style>
p{
color: blue; p{
} color: green;
}
</style>
</head>
<body>
<p>Texte 1</p>
<p style="color:red;">Texte 2</p>
</body>
</html>
16
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
p{
p{
color: green;
color: blue; }
}
</style>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p>Texte 1</p>
<p style="color:red;">Texte 2</p>
</body>
</html>
17
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="[Link]">
<style>
Rendre une règle prioritaire ?
p{
color: blue; p{
} color: green ;
}
</style>
</head>
<body>
<p>Texte 1</p>
<p style="color:red;">Texte 2</p>
</body>
</html>
18
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="[Link]">
<style>
p{
color: blue; p{
} color: green !important;
}
</style>
</head>
<body>
<p>Texte 1</p>
<p style="color:red;">Texte 2</p>
</body>
</html>
19
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="[Link]">
<style>
p{
color: blue !important; p{
} color: green;
}
</style>
</head>
<body>
<p>Texte 1</p>
<p style="color:red;">Texte 2</p>
</body>
</html>
20
Style en ligne, interne et externe
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="[Link]">
<style>
p{
color: blue; p{
} color: green;
}
</style>
</head>
<body>
<p>Texte 1</p>
<p style="color:red !important;">Texte 2</p>
</body>
</html>
21
Syntaxe générale
 Les règles CSS sont constituées de sélecteurs et de déclarations.
 Les sélecteurs ciblent les éléments HTML.
 Les déclarations définissent les styles à appliquer.

22
Syntaxe générale
 Une déclaration peut s’appliquer à plusieurs sélecteurs séparés par
des virgules.

h1 , h2 , h3 {
font-weight : bold ;
font-style : italic ;
color : red ;
font-size : 24px ;
}
h4 , h5 , h6 {
font-weight : normal ;
font-style : normal ;
color : orange ;
font-size : smaller ;
}

23
Sélecteurs courants
 Sélecteur universel : s’applique à tout (syntaxe : *).
* { font-weight : bold ;}

 Sélecteur de type : tous les éléments appartenant à la même balise.


p { font-size : smaller ;}

 Sélecteur de classe : tous les éléments d’une classe,


.classe { color : green ;}
[Link] { font-size : larger ;}

 Sélecteur d’identifiant : un seul élément identifié par son id.


#ID { color : blue ;}
Element#ID { font-size : larger ;}

24
Identifiants et classes
 Identifiants :
 Syntaxe HTML : <h1 id="titre">
 Syntaxe CSS : h1#titre { ... }
 Utilisation unique (un seul id="titre" dans la page HTML).

25
Identifiants et classes
 Identifiants :
 Syntaxe HTML : <h1 id="titre">
 Syntaxe CSS : h1#titre { ... }
 Utilisation unique (un seul id="titre" dans la page HTML).

 Classes :
 Syntaxe HTML : <h1 class="titre">
 Syntaxe CSS : [Link] { ... }

26
Identifiants et classes
 Identifiants :
 Syntaxe HTML : <h1 id="titre">
 Syntaxe CSS : h1#titre { ... }
 Utilisation unique (un seul id="titre" dans la page HTML).

 Classes :
 Syntaxe HTML : <h1 class="titre">
 Syntaxe CSS : [Link] { ... }

 Utilisation multiple (plusieurs class="titre" autorisés dans la page HTML).


<h1 class="titre">Titre 1</h1>
<p class="titre">Titre 2</p> .titre {
color: red;
font-weight: bold;
}

27
Identifiants et classes
 Identifiants :
 Syntaxe HTML : <h1 id="titre">
 Syntaxe CSS : h1#titre { ... }
 Utilisation unique (un seul id="titre" dans la page HTML).

 Classes :
 Syntaxe HTML : <h1 class="titre">
 Syntaxe CSS : [Link] { ... }

 Attribuer plusieurs classes au même élément : liste séparée par un espace :


<h1 class="classe1 classe2">Mon titre</h1>
.classe1 {
color: blue;
}

.classe2 {
text-transform: uppercase;
} 28
Descendants directs ou indirects

/* Style pour les descendants directs */

div > p {
color: green;
font-size: 20px; Cible uniquement les éléments <p> qui
} sont des descendants directs d’un
<div> (enfant direct).

<div>
<p>Texte </p>
</div>

29
Descendants directs ou indirects

/* Style pour les descendants directs ou indirects */

div span {
Cible les éléments <span> qui sont des
font-weight: bold; descendants directs ou indirects d'un
} <div> (enfants directs ou non).

<div>
<p>
<span class="film">Texte </span>
</p>
</div>

30
Héritage

 Les propriétés CSS héritent des propriétés parentes.

 Héritage par raffinement de propriété :


 h2#id hérite de h2.
 [Link] hérite de h2.

31
Héritage

 Les propriétés CSS héritent des propriétés parentes.

 Héritage par raffinement de propriété :


 h2#id hérite de h2.
 [Link] hérite de h2.

/* Style général pour tous les h2 */


h2 {
color: blue;
font-size: 24px;
}
/* h2 avec un identifiant spécifique (raffinement) */
h2#id {
color: red;
}

32
Héritage

 Les propriétés CSS héritent des propriétés parentes.

 Héritage par raffinement de propriété :


 h2#id hérite de h2.
 [Link] hérite de h2.

/* Style général pour tous les h2 */


h2 {
color: blue;
font-size: 24px;
}
/* h2 avec un identifiant spécifique (raffinement) */
h2#id {
color: red;
}
/* h2 avec une classe spécifique (raffinement) */
[Link] {
font-size: 30px;
} 33
Héritage
 Les propriétés CSS héritent des propriétés parentes.

 Héritage par raffinement de propriété :


 h2#id hérite de h2.

 [Link] hérite de h2.

 Héritage par propriété sémantiquement parente :


 h2 hérite de body.
 Automatique pour certaines propriétés (color, font-family,
font-size).
 h2, body, html hérite de *

34
Cascade
 Si plusieurs règles s’appliquent à un élément pour la même propriété,
les mécanismes suivants sont appliqués :
 Si plusieurs règles sont identiques, la dernière est utilisée.
 Dans l’exemple suivant , tous les <h2> seront affichés en rouge.
 La dernière règle écrite pour la couleur est celle qui sera appliquée.

h2 {
color: blue;
h2 {
font-size: 24px;
color: red;
} font-size: 24px;
+ = }
h2 {
color: red; /* Cette règle sera appliquée car c'est la dernière */
}

35
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

36
Priorités entre les styles
 span (sélecteur de type) est plus spécifique que * (sélecteur
universel).

*{
color: green; <p>Ceci est un paragraphe.</p>
}
<span>Ceci est un span.</span>

span {
color: blue;
}

37
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

38
Priorités entre les styles
 .classe (sélecteur de classe) est plus spécifique que p (sélecteur de
type).

p{
color: green;
}

.classe {
color: blue;
}

<p>Ceci est un paragraphe sans classe.</p>


<p class="classe">Ceci est un paragraphe avec la classe "classe".</p>

39
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

 élé[Link] (élément + classe) → plus spécifique qu'un sélecteur de


classe seul.

40
Priorités entre les styles
 élé[Link] est plus spécifique qu'un sélecteur de classe seul.

.classe {
color: green;
}

[Link] {
color: blue;
}

<p class="classe">Ceci est un paragraphe avec la classe "classe".</p>

<span class="classe">Ceci est un span avec la classe "classe".</span>

41
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

 élé[Link] (élément + classe) → plus spécifique qu'un sélecteur de


classe seul.

 #id (sélecteur d‘identifiant) → plus spécifique qu'un élément + classe.

42
Priorités entre les styles
 #id (sélecteur d’identifiant) est plus spécifique qu'un élé[Link].

[Link] {
color: green;
}

#identifiant {
color: blue;
}

<p class="classe" id="identifiant">Ceci est un paragraphe.</p>

43
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

 élé[Link] (élément + classe) → plus spécifique qu'un sélecteur de


classe seul.

 #id (sélecteur d‘identifiant) → plus spécifique qu'un élément + classe.

 élément#id (élément + ID) → plus spécifique que l'ID seul.

44
Priorités entre les styles
 élément#id est plus spécifique que l'ID seul (sélecteur d’identifiant).

#identifiant {
color: green;
}

p#identifiant {
color: blue;
}

<p id="identifiant">Ceci est un paragraphe avec l'ID "identifiant".</p>

45
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

 élé[Link] (élément + classe) → plus spécifique qu'un sélecteur de


classe seul.

 #id (sélecteur d‘identifiant) → plus spécifique qu'un élément + classe.

 élément#id (élément + ID) → plus spécifique que l'ID seul.

 Sélecteurs combinés (ex. p span#id) → le plus spécifiques.

46
Priorités entre les styles
 Sélecteurs combinés (ex. p span#id) est le plus spécifiques.

span#identifiant {
color: green;
}

p span#identifiant {
color: blue;
}

<p><span id="identifiant">Ceci est un span dans un paragraphe.</span></p>

<span id="identifiant">Ceci est un span en dehors d'un paragraphe.</span>

47
Priorités entre les styles
 Si une règle est plus spécifique qu’une autre, la plus spécifique est
utilisée.

 * (sélecteur universel) → le moins spécifique.

 Élément (ex. span, p) (sélecteur de type) → plus spécifique que le


sélecteur universel.

 .classe (sélecteur de classe) → plus spécifique que l'élément.

 élé[Link] (élément + classe) → plus spécifique qu'un sélecteur de


classe seul.

 #id (sélecteur d‘identifiant) → plus spécifique qu'un élément + classe.

 élément#id (élément + ID) → plus spécifique que l'ID seul.

 Sélecteurs combinés (ex. p span#id) → le plus spécifiques.

48
Conception de sites Web réactifs
 La consultation d’un site Web peut se faire depuis des appareils très
divers :
 Ordinateur de bureau.
 Ordinateur portable.
 Tablette.
 Téléphone intelligent.
 …..

 Responsive Web Design : faciliter la consultation d’un site Web de


façon optimale quel que soit l’appareil utilisé.

49
Conception de sites Web réactifs
 La consultation d’un site Web peut se faire depuis des appareils très
divers :
 Ordinateur de bureau.
 Ordinateur portable.
 Tablette.
 Téléphone intelligent.
 …..

 Mobile-first : le site doit être responsive et optimisé pour les appareils


mobiles, car cela influence le classement dans les résultats de
recherche  SEO (Search Engine Optimization).
50
Utilisation de l’attribut media

 Solution 1: Import conditionnel de feuilles de style dans un fichier HTML :

<link rel="stylesheet" media="screen and (min-width: 480px)"


href="[Link]" type="text/css">
<link rel="stylesheet" media="screen and (max-width: 479px)"
href="[Link]" type="text/css">

 media est un attribut HTML de la balise <link>.

 [Link] (largeur ≥ 480px) : donc pour les tablettes et PC.

 [Link] (largeur ≤ 479px): donc pour les smartphones.

51
body {
font-size: 18px;
background-color: white;
text-align: center;
}
<!DOCTYPE html>
[Link]
<html lang="fr">
(largeur ≥ 480px)
<head>
<title>Test Responsive</title>
<link rel="stylesheet" media="screen and (min-width: 480px)" href="[Link]">
<link rel="stylesheet" media="screen and (max-width: 479px)" href="[Link]">
</head>
<body>
(largeur ≤ 479px)
<h1>Test des styles CSS</h1>
</body> body {
</html> font-size: 14px;
background-color: lightblue;
text-align: center;
}
[Link] 52
Tester le responsive design avec DevTools

Activer le mode "Responsive" :.


 Ouvrir DevTools (F12 ou Ctrl +
Shift + I).
 Activer le mode mobile :
 Cliquez sur l'icône en haut à
gauche des DevTools ou
appuyez sur Ctrl + Shift + M.

53
Tester le responsive design avec DevTools

Les DevTools (Outils de


développement) sont un
ensemble d'outils intégrés
dans les navigateurs comme
Google Chrome, Firefox,
Edge, etc. Ils permettent
d'analyser, tester et déboguer
le code d'un site web en
temps réel.

54
Tester le responsive design avec DevTools

55
Utilisation des requêtes @media (media queries)
 Solution 2: comportement adaptatif (un seul fichier css) :
 @media est une règle CSS utilisée dans un fichier CSS.

/* Styles par défaut (PC, tablette) */


body {
font-size: 18px;
background-color: white;
text-align: center; [Link]
}

/* Styles spécifiques pour smartphone (moins de 479px) */


@media screen and (max-width: 479px) {
body {
font-size: 14px;
background-color: lightblue;
}
}

56
SEO (Search Engine Optimization)
 Le SEO (Search Engine Optimization), ou optimisation pour les moteurs de
recherche, désigne l'ensemble des techniques et pratiques utilisées pour
améliorer la visibilité d'un site web dans les résultats des moteurs de recherche
(comme Google).
 Optimisation des métadonnées : remplir les balises meta afin d’améliorer la
compréhension et le référencement de vos pages par les moteurs de
recherche  utiliser des mots-clés pertinents.
 Balises h1 à h6 : permettent de structurer le contenu d’une page web en
créant une hiérarchie logique des titres.
 Balises HTML sémantiques: structurer le contenu pour aider les moteurs de
recherche à comprendre la hiérarchie et l’importance des informations.
 Mobile-first : assurez-vous que le site soit responsive et optimisé pour les
appareils mobiles, car cela influence le classement dans les résultats de
recherche.
 Contenu de qualité : créez un contenu original et utile, car les moteurs de
recherche privilégient les sites qui répondent aux besoins des utilisateurs.
57
Accessibilité web
 L'accessibilité web vise à rendre le contenu du site utilisable par toutes
les personnes, y compris celles ayant des handicaps visuels.

 Texte alternatif pour les images : utilisez des balises alt pour décrire les
images, permettant aux lecteurs d'écran de communiquer le contenu de
l'image aux utilisateurs malvoyants.

 Contraste des couleurs : assurez-vous qu'il y ait suffisamment de


contraste entre le texte et l'arrière-plan, ce qui est essentiel pour les
personnes malvoyantes.

58
Accessibilité web
 L'accessibilité web vise à rendre le contenu du site utilisable par toutes les
personnes, y compris celles ayant des handicaps visuel.
 Contraste des couleurs : assurez-vous qu'il y ait suffisamment de contraste
entre le texte et l'arrière-plan, ce qui est essentiel pour les personnes
malvoyantes.
 Exemple de Contraste Inadéquat : si le texte est de couleur grise clair sur
un fond blanc, cela rendra difficile la lecture pour certaines personnes.
 <p style="color: #D3D3D3; background-color: #FFFFFF;">Ce texte est
difficile à lire.</p>

 Exemple de Bon Contraste : pour un bon contraste, on choisit des couleurs


avec un écart plus marqué entre le texte et l'arrière-plan. Par exemple, un
texte noir sur un fond blanc offre un contraste optimal.
 <p style="color: #000000; background-color: #FFFFFF;">Ce texte est
facile à lire.</p>

 Fait partie des bonnes pratiques de développement Web. 59


Marges et bordures

 Tout élément HTML est considéré comme contenu dans une boîte, dont
on peut définir :
 La marge extérieure (margin).
 La bordure (border).
 L’espace intérieur (padding).
 L’aire intérieure (background).

60
margin et padding
.box1 {
margin: 20px; /* 20px sur les 4 côtés */
padding: 20px; /* 20px sur les 4 côtés */
}
.box2 {
margin: 10px 30px; /* 10px top/bottom, 30px left/right */
padding: 15px 25px; /* 15px top/bottom, 25px left/right */
}
.box3 {
margin: 10px 20px 30px; /* top=10, left/right=20, bottom=30 */
padding: 5px 15px 25px; /* top=5, left/right=15, bottom=25 */
}
.box4 {
margin: 5px 10px 15px 20px; /* top=5, right=10, bottom=15, left=20 */
padding: 8px 12px 16px 24px; /* top=8, right=12, bottom=16, left=24 */
}
Ordre dans le sens des aiguilles d’une montre
61
Bordures en CSS
 Couleur des bordures : (propriété border-color).
 Permet de définir la couleur de la bordure.

 Épaisseur des bordures : (propriété border-width).


 Permet de définir la taille (l’épaisseur) de la bordure.

 Style des bordures : (propriété border-style).


 Permet de définir le type de bordure (solid, dashed, dotted, double,
etc.).

62
Style du fond : background
<style>
body {
background-color: green; /* Définit la couleur de fond de la page */
background-image: url("[Link]"); /* Définit une image de fond pour la page */
background-repeat: no-repeat; /* Empêche la répétition de l'image */
background-position: center center; /* Centre l'image à la fois horizontalement et
verticalement */
background-size: 25% 25%; /* L'image occupe 25% de la largeur et 25%
de la hauteur de l'élément */
}
</style>

63
Style du fond : background
<style>
body {
background-color: green;
background-image: url("[Link]");
background-repeat: repeat;
background-position: center center;
background-size: 25% 25%;
}
</style>

64
Style du fond : background
<style>
body {
background-color: green;
background-image: url("[Link]");
background-repeat: repeat-x;
background-position: center center;
background-size: 25% 25%;
}
</style>

65
Style du fond : background
<style>
body {
background-color: green;
background-image: url("[Link]");
background-repeat: repeat-y;
background-position: center center;
background-size: 25% 25%;
}
</style>

66
Valeurs possibles de backgroud-position

67
<body> Style des listes
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul style="list-style-type: circle;">
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul style="list-style-type: disc;">
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul style="list-style-type: none;">
<li>Item 7</li>
<li>Item 8</li> Liste non ordonnée avec
</ul> différentes puces
<ul> (propriété list-style-type )
<li>Item 9</li>
<li>Item 10</li>
</ul> 68
</body>
<body>
Masque la puce par défaut pour chaque <li>
<p>Au menu aujourd'hui:</p>
<ul style="list-style-type: none;">
<li style="background-image: url('[Link]'); background-size: 16px 16px;
background-repeat: no-repeat; padding-left: 24px;"> Des frites
</li> Espace entre l’image et le texte
<li style="background-image: url('[Link]'); background-size: 16px 16px;
background-repeat: no-repeat; padding-left: 24px;"> Une boisson
</li>
<li style="background-image: url('[Link]'); background-size: 16px 16px;
background-repeat: no-repeat; padding-left: 24px;"> Un café
</li>
</ul>
</body>

69
Style du texte : couleur et alignement
 La couleur du texte: (propriété color)
 Couleurs simples:
 color: red; /* Texte en rouge */
 color: white; /* Texte en blanc */
 color: blue; /* Texte en bleu */
 Couleurs personnalisées: # + code hexadécimal de la couleur
 color: #FF5733; /* Un orange vif */
 color: #1A1A1A; /* Un gris très foncé */
 color: #FFD700; /* Un jaune doré */

 Alignement du texte: (propriété text-align)


 Valeurs possibles: left , right, center , justify.

70
Style du texte : l’épaisseur du texte et inclinaison de la police

 Propriété font-weight (graisse de la police) : détermine l'épaisseur du


texte.

 Valeurs prédéfinies :
 lighter : plus léger que le poids normal.
 normal : poids par défaut.
 bold : texte en gras.
 bolder : plus gras que le poids normal.

71
Style du texte : l’épaisseur du texte et inclinaison de la police

 Propriété font-weight (graisse de la police) : détermine l'épaisseur du


texte.

 Valeurs prédéfinies :
 lighter : plus léger que le poids normal.
 normal : poids par défaut.
 bold : texte en gras.
 bolder : plus gras que le poids normal.

 Propriété font-style (inclinaison de la police) permet de définir


l'inclinaison du texte.

 Valeurs prédéfinies :
• normal : style normal (non incliné).
• italic : texte en italique.
• oblique : texte en oblique, qui est légèrement incliné (pas
nécessairement une vraie italique).
72
Style du texte : décoration du texte
 Propriété text-decoration (décoration du texte) est utilisée pour ajouter
des décorations au texte, comme des soulignements.
 Valeurs prédéfinies :
 none : aucune soulignement.
 underline : souligne le texte.

 line-through : barre à travers le texte (surlignage).

 overline : ajoute une ligne au-dessus du texte.

73
Style du texte : la police
 La propriété font-family indique au navigateur quelle police utiliser
pour afficher le texte.
 Si la police spécifiée n'est pas disponible sur l'appareil de l'utilisateur, le
navigateur cherchera la prochaine police dans la liste fournie.

selector {
font-family: "Nom de la police", famille-générique;
}

 Nom de la police : le nom de la police que vous souhaitez utiliser.


 Famille générique : il s'agit d'une catégorie de polices, utilisée comme
solution de repli si la police spécifique n'est pas disponible.

body {
font-family: "Arial", "Helvetica", serif;
}
74
Style du texte : modifier la casse du texte

 Propriété text-transform permet de modifier la casse du texte dans un


élément HTML.

 Elle prend plusieurs valeurs, dont voici les principales :


• capitalize : transforme la première lettre de chaque mot en majuscule.

• uppercase : transforme tous les caractères du texte en majuscules.


• lowercase : transforme tous les caractères du texte en minuscules.

• none : aucune transformation n’est appliquée. Le texte apparaîtra tel

qu'il est écrit dans le code HTML.

75
Style du texte : taille des caractères
 Propriété font-size (taille de police): détermine la taille de la police
utilisée pour le texte.

 Valeurs prédéfinies absolues :


 xx-small : très petite taille de police.
 x-small : petite taille de police.
 medium : taille de police par défaut.
 Généralement équivalente à 16px.
 large : taille de police plus grande que la taille par défaut.
 x-large : taille de police encore plus grande.

 xx-large : très grande taille de police.

76
Style du texte : taille des caractères
 Valeurs prédéfinies relatives :
 smaller : réduit la taille de la police par rapport à la taille de police
de l'élément parent.
 larger : augmente la taille de la police par rapport à la taille de police
de l'élément parent.
 La valeur exacte de smaller ou de larger dépend du navigateur.

77
Style du texte : taille des caractères
 Valeurs prédéfinies relatives :
 smaller : réduit la taille de la police par rapport à la taille de police
de l'élément parent.
 larger : augmente la taille de la police par rapport à la taille de police
de l'élément parent.
 La valeur exacte de smaller ou de larger dépend du navigateur.

 Valeur numérique : peut être spécifiée en unités telles que :


 pt : points (généralement utilisé pour l'impression).
 px : pixels (taille de police fixe, largement utilisé pour le web).
 em : unité relative à la taille de police de l'élément parent (1em
équivaut à la taille de police de l'élément parent).
 % : pourcentage de la taille de police de l'élément parent.

78
Style du texte : taille des caractères

<div style="font-size: 16px;"> <!-- Taille parent -->


<p style="font-size: 1em;">Texte avec 1em (16px)</p>
<p style="font-size: 0.75em;">Texte avec 0.75em (12px)</p>
<p style="font-size: 1.5em;">Texte avec 1.5em (24px)</p>
</div>

<div style="font-size: 16px;"> <!-- Taille parent -->


<p style="font-size: 100%;">Texte avec 100% (16px)</p>
<p style="font-size: 75%;">Texte avec 75% (12px)</p>
<p style="font-size: 150%;">Texte avec 150% (24px)</p>
</div>

79

Potrebbero piacerti anche