Chapitre3 CoursProgrammationWeb MalekBenSalem

15/10/2021
Chapitre 3
Feuilles de style CSS
98
Développement Web - L3 – TIC & SE - BEN SALEM M.
1
15/10/2021
Mettre en place le Cascading Style

Sheets : Versions
• CSS1 : première version publié en 1996 .
• CSS-P: (CSS positioning) qui permet le positionnement d'éléments.
• CSS2 : depuis mai 1998. L'accent a été mis sur l'accessibilité et

la capacité à avoir un style différent selon les media.
• CSS3 : elle a apporté des nouveautés : multicolonnage, SVG, styles

sur les polices , arrondir les coins des boîtes, utiliser des images de
fond dans les bordures, des ombres portées...
99
2
15/10/2021
Cascading Style Sheets 3

• CSS : Cascading Style Sheets. C'est cet autre langage qui vient
compléter le HTML.
• On peut écrire du code en langage CSS à trois endroits différents :
 dans un fichier .css (méthode la plus recommandée) ;
 dans l'en-tête <head> du fichier HTML ;
 dans les balises du fichier HTML par l’attribut style (c’est la

méthode la moins recommandée).
100
3
15/10/2021
Dans un fichier .css

• Le plus souvent utilisé: le code CSS dans un fichier spécial ayant
l'extension .css (les fichiers HTML ont l'extension .html).
• C'est la méthode la plus souple et la plus pratique. Cela évite de

tout mélanger dans un même fichier.
• Exemple
<link rel="stylesheet" href="style.css" /> :
cette ligne indique que ce fichier HTML est associé à un fichier
appelé style.css. Ce dernier est chargé de la mise en forme.
101
4
15/10/2021
Dans un fichier .css (Exemple 1)
102
5
15/10/2021
Dans un fichier .css (Exemple 1)
103
6
15/10/2021
Dans l'en-tête <head> du fichier HTML

• On trouve une autre méthode pour utiliser le CSS dans ses
fichiers HTML :
• Elle consiste à insérer le code CSS dans une

balise <style> à l'intérieur de l'en-tête <head>.
• L’exemple (2) montre comment obtenir exactement le

même résultat en utilisant un seul fichier .html. Celui qui
contient le code CSS (lignes 6 à 9) :
104
7
15/10/2021
Dans l'en-tête <head> du fichier HTML:

Exemple 2
105
8
15/10/2021
Directement dans les balises

(Exemple 3)
• C’est la dernière méthode, à manipuler avec précaution : on
ajoute un attribut style à n'importe quelle balise. on insère le
code CSS dans cet attribut :
106
Développement Web - L3 – TIC & SE - BEN SALEM M. 106
9
15/10/2021
Quelle méthode choisir ?
Le code CSS est donné

une fois pour toutes
dans un fichier CSS
107
10
15/10/2021
Appliquer un style : sélectionner

une balise
• Dans un code CSS, il existe trois éléments différents :
• Noms de balise : on écrit le nom de la balise dont on veut
modifier l'apparence. Par exemple, pour modifier tous les
paragraphes <p>, on écrit p.
• La propriété CSS : les « effets de style » sont rangés dans des

propriétés. On trouve par exemple la propriété color permettant
d'indiquer la couleur du texte, font-size pour la taille du texte,
etc..
• La valeur : on doit indiquer une valeur pour chaque propriété

CSS. Par exemple, pour la couleur (color), il faut indiquer le
nom. Pour font-size, il faut indiquer quelle taille , etc.
108
11
15/10/2021
Exemple
• Schématiquement, une feuille de style CSS ressemble donc à
cela :
109
12
15/10/2021
Exemple
p
{
color: blue;
}
… signifie donc : « on veut que tous les paragraphes soient écrits en
bleu. ». Le résultat est visible à la figure suivante.
H
{
color: blue;
}
… signifie donc : « on veut que tous les titres soient écrits en bleu. ». Le
résultat est visible à la figure suivante.
110
13
15/10/2021
Appliquer un style à plusieurs

balises
• Exemple : le code CSS suivant :
h1
{
color: blue; H1,p
} {
p color: blue;
{ }
color: blue;
}
111
14
15/10/2021
Des commentaires dans du CSS

• Comme en HTML, il est possible de mettre des commentaires. ces
derniers ne seront pas affichés, ils servent à indiquer des
informations pour l’auteur.
• Pour faire un commentaire, ecrire /*, suivi du commentaire,
puis */ pour terminer le commentaire.
Les commentaires peuvent être écrits sur plusieurs lignes.
/*
style.css
---------
Introduction au commentaires
*/
p
{
color: blue; /* Les paragraphes seront en
bleu */
} 112
15
15/10/2021
Appliquer un style : class et id

TOUS les
paragraphes
possèdent la
même
présentation.
• Pour résoudre le problème, on

utilise les attributs spéciaux qui
fonctionnent sur toutes les
balises :
 l'attribut class ;
 l'attribut id.
113
16
15/10/2021
L'attribut class
• C'est un attribut que l'on peut utiliser sur n'importe quelle balise,
aussi bien titre que paragraphe, image, etc.
 <h1 class=""> </h1>

 <p class=""> </p>
 <img class="" />
• Exemple, on définit la classe introduction
.introduction
{
color: blue;
}
114
17
15/10/2021
L’attribut class : Exemple 4

• On associe la classe introduction au premier paragraphe
• Cette classe : introduction. On peut la réutiliser dans le fichier
CSS qui signifie : « que seules les balises qui ont comme nom
'introduction' seront affichées en bleu ».
115
18
15/10/2021
L'attribut id
• Il fonctionne de la même manière que class, mais il ne peut
être utilisé qu'une fois dans le code.
• C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la
mise en forme de caractères. Par exemple, on met des id que
sur des éléments uniques dans la page, comme par exemple le
logo.
<img src="images/logo.png" alt="Logo du site" id="logo" >
• Si on utilise des id, lorsqu’on définit leurs propriétés dans le
fichier CSS, il faudra précéder le nom de l'id par un dièse (#) :
#logo
{
/* Indiquez les propriétés CSS ici */
}
116
19
15/10/2021
L'attribut id : Exemple
117
20
15/10/2021
Les balises universelles

• Il arrive d’avoir besoin d'appliquer une class (ou un id) à
certains mots qui, à l'origine, ne sont pas entourés par des
balises.
• Si, par exemple, on veut modifier uniquement le mot «
paragraphe » dans le paragraphe de l’exemple précédent:
• Pour ce faire, on a créé deux balises universelles, qui n'ont

aucune signification particulière.
118
21
15/10/2021
Span & Div

Il y a une différence minime entre eux balises :
<span> </span> : c'est une balise de type inline, c'est-à-
dire une balise que l'on place au sein d'un paragraphe de
texte, pour sélectionner certains mots uniquement.
<div> </div> : c'est une balise de type block, qui entoure
un bloc de texte.
Eléments de type block Eléments de type inline
P em
h1, h2, h3, h4, h5, h6 strong
ol, ul,dl mark
li a
table img
119
22
15/10/2021
Balise div et attribut class

• Div : Une balise qui ne fait rien à part marquer une zone
• Dans le fichier HTML :

<div class="titre">C'est le titre de ma page</div>
• Dans le fichier CSS :

.titre {
color: black; }
120
23
15/10/2021
Appliquer un style : les sélecteurs

avancés (1)
Les sélecteurs standards:
P{
}
… signifie modifier tous les paragraphes
h1, h2 {
}
… signifie tous les titres 1 et 2 sélectionner deux balises d'un seul coup.
sélectionner des balises précises et leur donner un nom grâce aux

attributs class et id :
.class { }
#id
{ }
121
24
15/10/2021
Les sélecteurs avancés (2)

*: sélecteur universel: touche toutes les balises sans exception
* *
{ {
} color: blue;
}
A B : une balise contenue dans une autre. touche toutes les

balises <em> situées à l'intérieur d'une balise <h3>.
h3 em h3 em
{ {
} color: red;
}
<h3>Titre avec <em>texte important</em></h3>

il n'y a pas de virgule entre les deux noms de balises.
122
25
15/10/2021

• A + B : une balise qui en suit une autre
h3 + p <h3>Titre</h3>
{
} <p>Paragraphe</p>
• Exemple touche la première balise <p> située après un titre <h3>.
• A[attribut] : une balise qui possède un attribut
a[title] Sélectionne tous les liens <a> qui possèdent un attribut title.
{ <a href="http://site.com" title="Infobulle">
}
123
26
15/10/2021

• A[attribut="Valeur"] : une balise, un attribut et une valeur exacte
A[attribut="Valeur"]
{
}
a[title="Cliquez "]
{
}
l'attribut doit en plus avoir exactement pour valeur « Cliquez ».
A[attribut*="Valeur"]
{
}
a[title*=" ici"]
{
}
l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa
position).
124
27

Chapitre3 CoursProgrammationWeb MalekBenSalem

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre3 CoursProgrammationWeb MalekBenSalem

Transféré par

Droits d'auteur :

Formats disponibles

15/10/2021

Feuilles de style CSS

Mettre en place le Cascading Style

• CSS-P: (CSS positioning) qui permet le positionnement d'éléments.

• CSS2 : depuis mai 1998. L'accent a été mis sur l'accessibilité et

• CSS3 : elle a apporté des nouveautés : multicolonnage, SVG, styles

Cascading Style Sheets 3

 dans un fichier .css (méthode la plus recommandée) ;

 dans l'en-tête <head> du fichier HTML ;

 dans les balises du fichier HTML par l’attribut style (c’est la

Dans un fichier .css

• C'est la méthode la plus souple et la plus pratique. Cela évite de

Dans un fichier .css (Exemple 1)

Dans un fichier .css (Exemple 1)

Dans l'en-tête <head> du fichier HTML

• Elle consiste à insérer le code CSS dans une

• L’exemple (2) montre comment obtenir exactement le

Dans l'en-tête <head> du fichier HTML:

Directement dans les balises

Quelle méthode choisir ?

Le code CSS est donné

Appliquer un style : sélectionner

• La propriété CSS : les « effets de style » sont rangés dans des

• La valeur : on doit indiquer une valeur pour chaque propriété

Appliquer un style à plusieurs

Des commentaires dans du CSS

Appliquer un style : class et id

• Pour résoudre le problème, on

 <h1 class=""> </h1>

• Exemple, on définit la classe introduction

L’attribut class : Exemple 4

Les balises universelles

• Pour ce faire, on a créé deux balises universelles, qui n'ont

Span & Div

Balise div et attribut class

• Dans le fichier HTML :

• Dans le fichier CSS :

Appliquer un style : les sélecteurs

sélectionner des balises précises et leur donner un nom grâce aux

Les sélecteurs avancés (2)

A B : une balise contenue dans une autre. touche toutes les

<h3>Titre avec <em>texte important</em></h3>

Les sélecteurs avancés (3)

• Exemple touche la première balise <p> située après un titre <h3>.

• A[attribut] : une balise qui possède un attribut

Les sélecteurs avancés (4)

Vous aimerez peut-être aussi