Technologies du WEB
CSS
Salah EL HAJLA
[email protected]
Plan du cours
● Introduction
● Régles, éléments et propriétés
● Mise en forme
● Mise en page
2
Plan du cours
● Introduction
● Règles, éléments et propriétés
● Mise en forme
● Mise en page
3
Introduction
L’acronyme CSS
Cascading StyleSheets
HTML décrit la structure et le contenu.
CSS décrit :
- La mise en forme du texte.
- La mise en page des boîtes les unes par rapport aux
autres.
4
Plan du cours
● Introduction
● Règles, éléments et propriétés
● Mise en forme
● Mise en page
5
Règles, éléments et propriétés - Inclusion d’une CSS
- Trois possibilités d’inclusion :
● Directement dans les balises ( à éviter )
<h2 style="color : red"> Titre en rouge </h2>
● Définition de la CSS dans le fichier via la balise <style>
<head>
<style type="text/css">déclaration des styles</style>
</head>
● Déclaration d’un lien vers la CSS via la balise <link>
<head>
<link href="fichier.css" rel="stylesheet" type="text/css"/>
</head>
6
Règles, éléments et propriétés - Inclusion d’une CSS
Styles en ligne :
- Manière la plus simple d’utiliser les CSS.
- Rajoutez un attribut style sur les balises HTML.
- On peut également utiliser <span> si on a besoin d’une balise supplémentaire.
- Encombrer notre code HTML avec des indications de mise en forme : Ce n’est pas ce qu’on
veut !!
Exemple :
- Ce mot en <em style="color : red"> emphase </em> est aussi en rouge.
<span style="text-decoration : underline"> Cette expression de
plusieurs mots </span> est soulignée.
7
Règles, éléments et propriétés - Inclusion d’une CSS
Styles en en-tête :
- Intégration des propriétés de style à l’en-tête de la page avec la balise <style>.
- Utilisation des sélecteurs pour définir à quels élément les propriétés s’appliquent.
- Inconvénients :
○ Mélange HTML et CSS dans un même document.
○ Impossibilité de re-utilisation des propriétés CSS dans plusieurs documents.
Exemple : <!DOCTYPE html>
<html>
<head>
<style type="text/css">déclaration des styles</style>
</head>
<body>
<!-- Contenu de la page -->
</body>
</html> 8
Règles, éléments et propriétés - Inclusion d’une CSS
Feuille de style liée :
- Mettre la feuille de style CSS dans un fichier à part.
- Utilisation de la même feuille de style pour plusieurs pages Web.
- Rajoutez une balise <link> dont l’attribut rel est positionné à “stylesheet” dans
l’en-tête du document.
Exemple :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="feuille.css" type="text/css">
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
9
Règles, éléments et propriétés - Déclaration d’une règle
sélecteur1 , sélecteur2 ... {
propriété1: valeur1;
…
propriétéN: valeurN;
}
- sélecteur :indique à quelles parties du documents la règle s’applique.
- propriété :L’effet que l’on va vouloir donner (ex couleur de texte, positionnement,
couleur de fond, etc.)
- valeur :La valeur de la propriété CSS (red, 10px, …)
- On peut faire autant de couples propriété/valeur que voulu, séparés par des “ ; ”.
- Commentaire : /* Ceci est un commentaire */
Exemple: h1 , h2 { color: red; } 10
Règles, éléments et propriétés - Déclaration d’une règle (suite)
Cascade :
Plusieurs feuilles de styles peuvent s’appliquer simultanément :
- Plusieurs balises <link rel=“stylesheet”>
- Directive @import d’une feuille de style. @import url(feuille_css.css);
Au sein même d’une feuille de style, plusieurs règles peuvent être en conflit.
Pour gérer ces conflits, les mécanismes Cascade sont utilisés.
- Si !important est précisé après la valeur, la règle sera prioritaire.
- Sinon, plus une règle est spécifique, plus elle est prioritaire.
- Sinon, la dernière règle s’applique.
11
Règles, éléments et propriétés - Sélecteurs
- Sélecteur de type : nom de balise, On peut ajouter plusieurs sélecteurs séparés par des “ , ”.
h1 , h2 { color: red; } : Met l’ensemble des titres de rubrique h1 et h2 en rouge
- Sélecteur universel : ‘ * ‘ , sélectionne tout.
• *{ color: black; } : Met tout en noir.
12
Règles, éléments et propriétés - Sélecteurs (suite)
Sélecteur de classe :
<p id=‘introduction’> <h1 class=‘comment’> <p class=‘personne’>
Nom d’une classe, préfixée d’un ‘ . ’ , tel qu’il apparaît dans un attribut class d’une balise HTML.
Example:
.personne { font-style: bold; } : Met l’ensemble des balises de classe
personne en gras.
p.comment { font-style: italic; } : Met l’ensemble des balises <p> de classe
comment en italique.
13
Règles, éléments et propriétés - Sélecteurs (suite)
Sélecteurs d’identifiants :
- Identifiant : défini par l’attribut id d’une balise HTML. Similaire aux classes, mais il ne peut y
avoir qu’une seule balise ayant un id donné dans tout le document HTML.
- Sélecteur d’identifiant : nom d’un identifiant, préfixée d’un ‘#’, tel qu’il apparaît dans un
attribut id d’une balise HTML.
Exemple:
#introduction { font-size: 120%; } : Met la balise d’identifiant
introduction en plus gros.
p#introduction { font-size: 120%; } : Met la balise <p> d’identifiant
introduction en plus gros.
14
Règles, éléments et propriétés - Sélecteurs (suite)
Sélecteurs contextuels :
- Sélecteur contextuel : Deux sélecteurs ou plus séparés par des espaces.
A B : sélectionne les B seulement s’ils sont contenus dans les A.
Exemple:
h1 em { color: blue; } : Met les mots en emphase à l’intérieur d’un h1 en bleu.
ul ol, ol ul, ul ul, ol ol { font-size: 80%; } : diminue la taille du texte
des listes imbriquées.
15
Quiz
En CSS, comment sélectionnez-vous toutes les balises <p> d'une page ?
Réponse:
- p { … } 🌟
- .p { … }
- #p { … }
- <p> { … }
16
Quiz
En CSS, comment sélectionnez-vous une image par son identifiant ?
<img id="imgprincipale" src="chat.png">
Réponse:
- .imgprincipale { … }
- #imgprincipale { … } 🌟
- img { … }
- imgprincipale { … }
17
Quiz
En CSS, comment sélectionnez-vous uniquement les paragraphes avec le nom de classe
"attention" ?
<p class="attention">Ne le faites pas !</p>
<p>Allez-y.</p>
<p class="attention">Nooon, surtout pas.</p>
Réponse:
- attention { … }
- #attention { … }
- p { … }
- .attention { … } 🌟
18
Règles, éléments et propriétés - Sélecteurs (suite)
19
Règles, éléments et propriétés - Sélecteurs (suite)
Qui est ciblé ?
div {
...
}
.first {
...
}
p.sugar {
...
}
h1#hautpage {
...
} 20
Règles, éléments et propriétés - Sélecteurs (suite)
Qui est ciblé ?
.first a{
...
}
.first .sugar {
...
}
#important, #toffee {
...
}
21
Règles, éléments et propriétés - Sélecteurs (suite)
Pseudo-éléments :
- Pseudo-élément: Permet de mettre une règle sur quelque chose qui n’est pas réellement une
balise HTML.
Exemple:
p:first-line { font-weight: bold; } : Met la première ligne de chaque
paragraphe en gras.
p:first-letter { font-weight:blod; } : Met la première lettre de chaque
paragraphe en gras.
22
Règles, éléments et propriétés - Sélecteurs (suite)
Pseudo-classes :
- Pseudo-classe: Permet de faire une sélection d’un élément uniquement dans certains
contextes.
Exemple:
a:link : les <a> qui sont des liens.
a:visited : les <a> qui sont des liens vers des pages qui sont déjà visitées.
a:hover : les <a> qui sont des liens qu’on est en train de désigner.
a:active : les <a> qui sont des liens qu’on est en train d’activer.
23
Plan du cours
● Introduction
● Règles, éléments et propriétés
● Mise en forme
● Mise en page
24
Mise en forme - Propriété de longueur
Les propriétés admettent différentes unités de mesure se répartissant suivant trois types de valeurs :
✓ Sous forme de pourcentage % ( par rapport à la valeur courante )
✓ Les valeurs absolues N’ont aucun sens pour une page Web destinée à s’afficher sur un écran
d’ordinateur ! ) : mm, cm, in, pt, pc
✓ Les valeurs relatives :
- em : La valeur de la propriété font-size de la police utilisée (Hauteur du bloc dans
lequel s’inscrit naturellement un caractère).
- ex : La hauteur du caractère x dans la police utilisée.
Les valeurs relatives à l’écran ( à éviter pour avoir une conception de la page indépendante
de la résolution ! )
- px : Le nombre de pixels
25
Mise en forme - Polices
- Il existe différents moyens pour contrôler les polices de caractères.
- Les principales propriétés (font-family, font-size, font-weight et line-height)
sont responsables de l’aspect du texte.
Exemple:
p {
font-family: “Times New Roman”;
font-size: 130%;
font-weight: bold;
line-height: 150%;
}
26
Mise en forme - Polices
- font-family : Spécifie la police ou la famille de police (serif, sans-serif, cursive,
fantasy, monospace) à utiliser par le navigateur. Il est recommandé de déclarer une famille
générique après les polices (séparer par une virgule) pour obliger le navigateur si la police n’est pas
trouvée à lui substituer une police similaire.
- font-size : Définit la taille de la police ( La plupart du temps exprimée en pourcentage de la taille
courante ).
- font-style : Définit le style de la police à utiliser à savoir italic, oblique ou normal.
- font-variant : Définit la casse des caractères normal ou small-caps (petites majuscules).
- font-weight : Définit la graisse des caractères normal, bold (gras).
27
Mise en forme - Polices
- line-height : Définit l’espace interligne ou la hauteur intrinsèque de tout élément non
remplacé. Une bonne règle pour le texte dans le corps est de régler l’espace interligne à 1.2 fois la
taille de la police (1.2em ou 120%)
- text-decoration : Définit l’ornement du texte : none, underline (souligné), overline
(surligné), blink (clignotant) et line-through (barré)
28
Mise en forme - Polices
- text-transform : Permet de transformer le texte en majuscule, minuscule
- Valeurs possibles :
h2 { text-transform: none; }
- none
du texte de titre h2
- capitalize
- uppercase h2 { text-transform: capitalize; }
- lowercase Du Texte De Titre H2
h2 { text-transform: uppercase; }
DU TEXTE DE TITRE H2
h2 { text-transform: lowercase; }
du texte à partir d’ici
29
Mise en forme - Espacement
- Les propriétés letter-spacing et word-spacing permettent de définir l’espacement entre les
lettres d’un mot et les mots dans une phrase.
- Cet espacement peut être positif ou négatif selon si on cherche à éloigner ou rapprocher ces
éléments.
30
Mise en forme - Alignement & Indentation
- text-align : Définit la justification et l’alignement d’un texte: left, right, center, justify
(aligne le texte sur les marges gauche et droite).
- vertical-align : Définit l’alignement vertical de la ligne de base d’un élément en fonction de
la propriété line-height : super (text en exposant), sub (text en indice), baseline (normal),
etc.
- text-indent : Permet de spécifier un décalage de la première ligne d’un texte.
p { text-indent: 10px; }
31
Mise en forme - Propriétés des listes
- list-style-image : définit l’image qui sera employée comme marqueur d’item de liste. Quand
l’image est indisponible, elle sera remplacer par le marqueur produit par la propriété list-style-
type.
- list-style-type : Définit l’apparence d’une liste numérotée ou non :
- disc (cercle plein)
- circle (cercle vide)
- square (carré)
- decimal (1.) decimal-leading-zero (01.)
- upper-alpha ou lower-alpha (lettres de l‘alphabet)
- upper-roman ou lower-roman (chiffres romains)
- none
32
Mise en forme - Propriétés des listes
ul { list-style-image: url("img/liste.png"); }
ul { list-style-type: none; }
33
Mise en forme - Couleurs
- Le rôle de la couleur est de différencier les éléments d’un texte en jouant sur la notion de contraste.
- Il existe différentes manières de spécifier les valeurs d’une couleur :
✓ En indiquant le nom d’une couleur prédéfinie parmi aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow.
✓ En utilisant le code RGB pour (Red,Green,Blue) avec des valeurs de 0 à 255.
Exemple : rgb(0, 191, 255)
✓ En utilisant la valeur hexadécimale.
Exemple : #ff0000
34
Mise en forme - Couleurs
- La propriété couleur s’applique généralement au texte ( color ) ou à l’arrière-plan ( background-
color ).
- La propriété background-image définit l’image de l’arrière-plan d’un ou plusieurs éléments ou
encore de tous les éléments. Il est fortement recommandé de spécifier aussi une couleur
normale d’arrière-plan, qui sera utilisé en remplacement.
Exemple:
p { color: #ff0000;}
.Bloc1 {
background-image : url("images/monImage.jpg");
background-color : rgb(255,255,255);
35
}
Plan du cours
● Introduction
● Règles, éléments et propriétés
● Mise en forme
● Mise en page
36
Mise en page - Éléments block & inline
Il existe deux sortes d'éléments HTML :
● Eléments block : Prennent toute la largeur de leur parent, et sont suivis d’un retour à la ligne
<p>, <h1>, <ul>, …
<div> est un bloc générique.
● Éléments inline : Prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la
ligne <a>, <img>, <em>, …
<span> est un élément inline générique.
On s’intéresse ici principalement aux blocs et à la manière dont les placer les uns par rapport
aux autres.
37
Mise en page - Bordure des blocs
Les propriétés qui s’appliquent aux bordures ont entre 1 et 4 valeurs :
● Si une seule valeur est spécifiée : elle s’applique à tous les côtés.
● Si 2 valeurs sont spécifiées :
✓ La première s’applique aux bordures horizontales.
✓ La seconde aux bordures verticales.
● Si 3 valeurs sont spécifiées :
✓ La première s’applique à la bordure du haut.
✓ La deuxième aux bordures verticales.
✓ La troisième à la bordure du bas.
● Si 4 valeurs sont spécifiées : celles-ci s’appliquent respectivement aux bordures du haut, de
droite, du bas et de gauche.
38
Mise en page - Bordure des blocs
La propriété border permet d'ajouter une bordure à un élément.
Elle a 3 «sous propriétés» possibles : style, color et width.
● border-style : Définit le style des bordures: none, dotted, dashed, solid, double,
groove, ridge, inset ou outset.
● border-color : Définit la couleur des côtés de la bordure.
● border-width : Spécifie l’épaisseur des bordures.
39
Mise en page - Bordure des blocs
h2 { border: 2px solid #009860; }
40
Mise en page - Bordure des blocs
- On peut décomposer les 4 bordures de la manière suivante :
border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...;
- Si on ne précise pas à quelle bordure on applique la propriété, elle s’applique aux 4.
41
Mise en page - Bordure des blocs
h2 { border-top: 1px solid gray; }
42
Mise en page - Bordure des blocs
43
Mise en page - Exercice
Ecrire les règles CSS pour afficher cette page:
44
