IFT Cours 6

1
INITIATION A LA
FONCTION DE TRAVAIL
CSS
Les feuilles de style CSS
2
 Feuilles de style CSS : Cascading Style Sheets

 Permettent de regrouper dans un même document les
éléments de mise en forme de plusieurs documents
HTML.
 Définir des mises en forme de manière générique.
 Appeler ces mises en forme depuis n'importe quel
document HTML.
Facilite la maintenance de documents HTML
Les feuilles de style CSS
3
 Feuilles de style CSS :

 Apparition en 1996.
 Publié par le W3C.
 Pour combler la principale lacune du langage HTML.

Déclaration de style CSS
4
 Les feuilles de style CSS sont dites en cascade.

 3 niveaux de déclaration de style sont offerts :
 Déclaration de style dans un fichier CSS externe.
 Déclaration de style en interne dans la section <head>.
 Déclaration de style en attributs des éléments, donc à l'intérieur

des balises.
5
 Déclaration de style dans une feuille de style externe :

 La pratique la plus conseillée.
 Elle offre plus de facilités à maintenir le style des pages HTML
rattachées.
 La déclaration se fait dans un document texte à part avec
l'extension .css
 Chaque document rattaché à la feuille de style doit comporter un
lien vers celle-ci.
 Le lien est placé dans la balise <head> </head>
6
 Déclaration de style dans une feuille de style externe :

 Le code CSS est stocké dans un fichier texte avec l'extension .css
 Le lien entre le fichier CSS et le fichier HTML prend la forme
suivante :
7
 Déclaration de style en interne :

 Ce type de déclaration est effectué dans l'entête de la page
HTML.
 Utilisé généralement pour des mises en forme spécifiques à une
page et que nous ne souhaitons pas généraliser aux autres
pages.
 Emplacement utilisée : doit être placé dans la balise <head>
8
 Déclaration de style en interne : Exemple

9
 Déclaration de style en attributs des éléments :

 Ce type de déclaration est effectué dans une ou plusieurs balises
du corps de la page HTML.
 Utilisé généralement pour des mises en forme spécifiques à une
zone d'une page ou à une balise en particulier.
 Syntaxe :
10
 Déclaration de style en attributs des éléments :

 Exemple :
Déclaration de style et ordre de priorité
11
 Ordre de priorité entre les 3 niveaux de déclaration :

 Priorité 1 : Déclaration en attributs
 Priorité 2 : Déclaration dans l'entête
 Priorité 3 : Déclaration dans une feuille externe
 En cas de conflit : Pour la même balise, un style différent

est défini dans les 3 déclarations :
C'est la déclaration en attributs qui l'emporte.
Avantages de CSS
12
 Récapitulatif des avantages :

 Centraliser la définition des styles sur un seul document.
 Pouvoir modifier l'apparence d'un ensemble de pages HTML
(voir même un site complet) en ne modifiant qu'un seul
document.
Sans les feuilles de style, tous les documents HTML doivent subir
des modifications.
 Rendre les pages HTML plus simples à lire (donc à maintenir)
puisque nous avons isolé les styles.
Structure de la syntaxe CSS
13
 Syntaxe des règles CSS :
Sélecteur { Propriété : Valeur; }
Valeur de la propriété
Sélecteur de balise HTML
Propriété de balise HTML à définir

Exemple de règle CSS
14
 Exemple 1:
 Exemple 2 :
Les sélecteurs multiples
15
 Sélecteur multiple :
sélecteur1, sélecteur2 {style CSS}
 Exemple : Les balises h1 et h2 partagent 2 propriétés.
Les sélecteurs imbriqués
16
 Sélecteur d'éléments imbriqués :

 Permet d'appliquer un style lorsqu'une règle d'imbrication
s'applique.
 On peut écrire : lorsqu'un élément B est imbriqué dans un
élément A le style est appliqué.
A B { style }
 Exemple :
17
18
 La règle d'imbrication continue à être appliquée même

s'il y a plusieurs imbrications.
19
 Un autre exemple d'utilisation des sélecteurs imbriqués

est celui de <ol> avec <li> et de <ul> avec <li> :
20
 Un autre exemple d'utilisation des sélecteurs imbriqués

est celui de <ol> avec <li> et de <ul> avec <li> :
Les sélecteurs consécutifs
21
 Sélecteur d'éléments consécutifs :

 Permet d'appliquer un style lorsqu'une règle de succession
s'applique.
 La règle est de type succession immédiate de balises.
 On peut écrire : lorsqu'un élément B suit immédiatement un

élément A le style est appliqué.
A + B { style }
 Exemple :
22
23
 La règle de succession ne peut pas continuer à être

appliquée si la succession n'est pas directe.
Règles CSS liées à un attribut
24
 Sélecteur d'attributs :
 Permet d'appliquer un style sur des balises qui possèdent un
attribut particulier.
A [attribut] { style }
 Exemple :
Quelques attributs utilisés avec CSS
25
 Propriétés les plus utilisées :

 font-family : Nom de la police de caractères
 font-style : Style de la police (normal, italic)
 font-weight : Epaisseur de la police (normal, bold, bolder, lighter,

100, 200, 300, .. 900)
 font-size : Taille de la police de caractères
◼ xx-small, x-small, small, medium, large, x-large, xx-large, larger,
smaller
◼ valeurs absolues
◼ Pourcentage par rapport à la taille par défaut
26

 text-align : Alignement du texte (left, right, center, justify)
 text-decoration : Mises en forme spéciales pour le texte (none,
underline, overline, line-through, blink)
 text-transform : Casse du texte (capitalize, uppercase, lowercase,
none)
 color : indique la couleur du texte.
 Background-color : Indique la couleur de fond.

27

 border-width : indique l'épaisseur de la bordure (thin, medium,
thick ou bien une largeur en pixel)
 border-style : Indique le style de la bordure (none, hidden,
dotted, dashed, solid, double, groove, ridge, inset, outset)
 border-color : couleur de la bordure.
 Il est également possible de regrouper ces 3 attributs en

un seul :
 Border: 3px double blue;
Style de page
28
 margin-top, margin-bottom, margin-left, margin-right :

Les marges autour d'un objet.
 margin-top:2px;
 margin-right:5px;
 margin-bottom:2px;
 margin-left:0;
 Il est également possible de regrouper ces 4 attributs en

un seul :
S'écrit aussi :
margin:2px 5px 2px 0;
Source : http://slaout.linux62.org
Utilisation de quelques attributs
29
 Exemple de mise en forme CSS avec les balises dl, dd et

dt :
Modification des attributs sur DevTools
30
 DevTools permet de modifier les attributs dans le CSS et

de voir l’effet instantanément sur la page web : Balise dl
31
 DevTools permet de modifier les attributs dans le CSS et

de voir l’effet instantanément sur la page web : Balise dt
32
 Dans la zone Style, le lien en haut à droite de la règle CSS

permet d’aller sur le code source CSS.
Les classes avec CSS
33
 Les classes d'éléments :

 Sont appliquées à tous les éléments HTML.
 Sont utilisées pour définir plusieurs types de présentations pour
un même élément.
 Un élément paragraphe peut avoir plusieurs mises en forme
possibles en fonction de l'endroit ou il est placé.
 Exemple :
◼ Un paragraphe normal : police normale, taille standard
◼ Un paragraphe de citation : police italique, taille plus petite
◼ Un paragraphe important : police gras, grande taille de police
34
 Définition des 3 classes dans le fichier CSS :

35
 Appel des classes depuis le fichier HTML :

36
 Une autre catégorie de classes permet de préciser le

type d'éléments auxquelles elle peut s'appliquer.
 Dans cet exemple, seules les balises
de type p sont concernés par les
classes normal, citation et important.
Ces 3 classes ne peuvent pas être
Appelées depuis d'autres balises.
Le style basé sur l'état
37
 Une feuille de style permet également d'agir sur une

balise en fonction de l'état dans lequel elle se trouve.
 Exemple : la balise <a> peut être dans 4 états différents :
 a : link → un lien normal, non visité
 a : visited → un lien visité par l'utilisateur
 a : hover → un lien au dessus duquel l'utilisateur passe la souris
 a : active → un lien actif sur lequel l'utilisateur a cliqué

Le style basé sur l'état
38
 On peut ainsi définir une mise en forme différente du

lien pour chacun des 4 états :
Utilisation d'attributs CSS pour les listes
39
 Personnaliser l'apparence d'une liste avec CSS :

Balise div combinée à CSS
40
 Un bloc <div> </div> vide n'aura aucun effet sur

l'affichage.
 Dans ce cas, la hauteur de la section est nulle.
 Seul un saut de ligne est généré après ce bloc.
 Pour mettre en forme un bloc div on peut :
 créer une classe dans un fichier CSS.
 créer une classe dans le fichier html.
41
 Créer une image dans un div avec les coins arrondis :

42
 Créer une image dans un div sous forme de rond :

43
 Avec DevTools, il est possible d’ajuster les paramètres à

volonté.
44
 Créer un tableau à une seule colonne avec div :
Voir code fourni sur Léa

45
 Créer un tableau à deux colonnes avec div :

46
 Créer deux cadres côte à côte avec du texte :

47
 Créer un cadre centré sur la page avec une image

centrée :

48
 Créer deux cadres droite et gauche avec une image dans

chaque cadre :

49
 Créer trois colonnes de texte avec div :

50
 Créer un entête de page avec deux images :
 Créer un cadre de texte avec pied de page :

Combinaison des classes et états
51
 Affichage
d'info bulle
avec image:
Style de page
52
 Une feuille de style permet de définir des propriétés sur

l'ensemble d'une page HTML à travers la balise <body>
 Exemple : on peut définir les marges pour l'ensemble du
document en précisant une valeur de propriété dans
<body> ou encore dans <html>
Unités de mesure
53
 Les unités de mesure qui peuvent être utilisées pour

la marge, mais aussi pour les attributs mesurables :
 pt : point
 cm : centimètre
Unités absolues
 mm : millimètre
 in : pouce
 em : c'est une mesure relative à la taille de la police. Si la
taille de la police est de 3cm, alors 1em signifie 3cm.
 % : mesure proportionnelle à la taille par défaut
 px : pixel, dépend du média utilisé pour l'affichage
(matériel)
Balise personnalisée
54
 Il est aussi possible de créer dans une feuille de style CSS

sa propre balise. Mais il s'agit d'une pratique
déconseillée.
 Dans le fichier HTML :

Exercice
55
 Le consortium W3C offre des services de validation de code CSS sur

sa plateforme web.
 Il est possible de valider du code CSS de 3 manières différentes :
Exercice
56
 Nous allons valider notre fichier CSS en utilisant la fonction File

Upload :
Exercice
57
 Les résultats de la validation sont affichés dans une liste :

Exercice
58
 Voici la page html à construire dont le code de base est fourni. Ecrire les
règles CSS nécessaires pour obtenir la mise en forme ci-dessous :

IFT Cours 6

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

IFT Cours 6

Transféré par

Droits d'auteur :

Formats disponibles

1

 Feuilles de style CSS : Cascading Style Sheets

 Feuilles de style CSS :

 Pour combler la principale lacune du langage HTML.

 Les feuilles de style CSS sont dites en cascade.

 Déclaration de style en attributs des éléments, donc à l'intérieur

 Déclaration de style dans une feuille de style externe :

 Déclaration de style dans une feuille de style externe :

 Déclaration de style en interne :

 Déclaration de style en interne : Exemple

 Déclaration de style en attributs des éléments :

 Déclaration de style en attributs des éléments :

 Ordre de priorité entre les 3 niveaux de déclaration :

 Priorité 3 : Déclaration dans une feuille externe

 En cas de conflit : Pour la même balise, un style différent

 Récapitulatif des avantages :

 Syntaxe des règles CSS :

Sélecteur { Propriété : Valeur; }

Propriété de balise HTML à définir

 Sélecteur d'éléments imbriqués :

 La règle d'imbrication continue à être appliquée même

 Un autre exemple d'utilisation des sélecteurs imbriqués

 Un autre exemple d'utilisation des sélecteurs imbriqués

 Sélecteur d'éléments consécutifs :

 On peut écrire : lorsqu'un élément B suit immédiatement un

 La règle de succession ne peut pas continuer à être

 Propriétés les plus utilisées :

 font-weight : Epaisseur de la police (normal, bold, bolder, lighter,

 Propriétés les plus utilisées :

 Background-color : Indique la couleur de fond.

 Propriétés les plus utilisées :

 Il est également possible de regrouper ces 3 attributs en

 margin-top, margin-bottom, margin-left, margin-right :

 Il est également possible de regrouper ces 4 attributs en

 Exemple de mise en forme CSS avec les balises dl, dd et

 DevTools permet de modifier les attributs dans le CSS et

 DevTools permet de modifier les attributs dans le CSS et

 Dans la zone Style, le lien en haut à droite de la règle CSS

 Les classes d'éléments :

 Définition des 3 classes dans le fichier CSS :

 Appel des classes depuis le fichier HTML :

 Une autre catégorie de classes permet de préciser le

 Une feuille de style permet également d'agir sur une

 a : hover → un lien au dessus duquel l'utilisateur passe la souris

 a : active → un lien actif sur lequel l'utilisateur a cliqué

 On peut ainsi définir une mise en forme différente du

 Personnaliser l'apparence d'une liste avec CSS :

 Un bloc <div> </div> vide n'aura aucun effet sur

 Créer une image dans un div avec les coins arrondis :

 Créer une image dans un div sous forme de rond :

 Avec DevTools, il est possible d’ajuster les paramètres à

 Créer un tableau à une seule colonne avec div :

Voir code fourni sur Léa

 Créer un tableau à deux colonnes avec div :

Voir code fourni sur Léa

 Créer deux cadres côte à côte avec du texte :

Voir code fourni sur Léa

 Créer un cadre centré sur la page avec une image

Voir code fourni sur Léa

 Créer deux cadres droite et gauche avec une image dans

Voir code fourni sur Léa

 Créer trois colonnes de texte avec div :

Voir code fourni sur Léa