Cours CSS

Université Blida 1
Deuxième année Licence informatique (L2)
Module: Développement
d’applications Web
Chapitre 3: Introduction aux Feuilles de style CSS

(Cascading Style Sheets)
FZ. Zahra
f_zahra@esi.dz
Année universitaire 2019-2020
Plan du cours
1. CSS: Définition et historique
2. Application d’un style CSS sur un code HTML
3. Format d’une règle CSS
4. Sélecteurs simple: Class, ID …
5. Sélecteurs avancées (Combinaison des sélecteurs
simples)
6. Pseudo-classe
7. Mise enforme du texte
1. Définition et historique (1)
Définition: Les feuilles de style en cascade CSS (Cascading Style

Sheets) est un langage informatique qui sert à décrire la
présentation des documents HTML, XHTML et XML. Les
standards définissant CSS sont publiés par le W3C (World Wide Web
Consortium).
L’un des objectifs majeurs des feuilles de style CSS est de séparer
la structure d’un document de ses styles de présentation.
http://www.csszengarden.com/
MID CENTURY MODERNby Andrew Lohman

http://www.csszengarden.com/
UNDER THE SEA!by Eric Stoltz ORCHID BEAUTYby Kevin Addison

Différentes version de CSS

CSS 1 ;
CSS 2.0 ;
CSS 2.1 ;
CSS 3. ;
CSS 4. ;
CSS 5.
2. Intégration du code CSS dans un document HTML (1)
Deux façon pour intégrer un code CSS dans un document

HTML:
CSS externe
dans un fichier.css (méthode la plus recommandée) ;
CSS interne
1. dans l'en-tête<head>du fichier HTML ;
2. directement dans les balises du fichier HTML via l’
attribut style (méthode la moins recommandée).
CSS externe insertion du code CSS

externe via la balise
<link>
CSS interne
•Insertion dans l’entête du document html (la balise <head>)
insertion du code CSS

au niveau de la balise
<head> via la balise
<style> </style>
CSS interne
•Insertion directe dans les balises du document html
insertion du code CSS

directement dans les balise
html via l’attribut « style »
Commentaire en CSS
Comme en HTML, on peut écrire des commentaires en CSS
Un
commentaire
dans un code
CSS
3. Format d’une règle CSS (1)
Sélecteur Propriété Valeur
Déclaration
Une règles CSS peut contenir 0 ou plusieurs déclarations
Peut avoir
zéro ou
plusieurs
déclarations
Un stylesheet est composé de 0 ou plusieurs règles CSS

4. Sélecteurs (1)
1- Elément
Le premier type de sélecteur est le nom des différents éléments
(balises) d’un document html (ex : la balise p)
Nom de
l’élément
Tous le texte des

paragraphes du
document html vont
être en bleu
4. Sélecteurs (2)
1- Elément
Le premier type de sélecteur est le nom des différents éléments
(balises) d’un document html (ex : la balise p)
4. Sélecteurs (3)
2- Classe
Tous le texte des
. Nom de la éléments avec l’attribut
classe (ex: .blue) « class » égale a « blue »
sera en bleu
3. Sélecteurs (4)
3- ID
# Nom de ID
(ex: #matricule)
3. Sélecteurs (5)
4- Regroupement des sélecteurs
Séparer les sélecteurs par une Texte en
virgule pour regrouper les bleue
sélecteurs
Texte en bleue
5. Combinaison des sélecteurs (1)
1- Sélecteur élément avec classe
La combinaison de sélecteurs élément et classe se fait :
Nom élément. Nom de la classe, X.Y (pas d’espace)
Ca se traduit par : le style CSS spécifié s’applique sur tous les
éléments X de classe Y
Dans l’exemple suivant : la taille de la police d’écriture de tous les
éléments P de classe zonea va être 12px
Le style ne touche pas

L’élément div de classe
zonea
2- Sélecteur «éléments fils »
En HTML, si un élément B est inclus dans un élément A ; l’élément B
s’appellera l’enfant et l’élément A sera le parent de l’élément B.
Dans l’exemple suivant :
L’élément p est le fils de l’élément article ici
L’élément p ici est indépendant de l’élément article ici
L’élément p fils de
l’élément article va s avoir
la couleur bleue
3- Sélecteur « descendants » L’élément B est le fils directe de
l’élément A si le B est inclus
dans le A au premier niveau. Par
contre, tous les éléments inclus
dans A (y compris B) à différents
niveaux de profondeur sont
appelés les descendants de A.
P descendant de
article
Texte en bleue
On peut combiner classe et élément
Résumé des sélecteurs avancés
Rôle Sélecteur
5. héritage en CSS
 L’héritage est une notion centrale et fondamentale du CSS.

 L’héritage signifie que tout élément HTML va hériter des styles de
ses parents (c’est le fameux « cascading »).
NB: Si on applique un style à un élément enfant, c’est bien ce style qui

lui sera appliqué.
6. Pseudo classe sélecteurs (1)
Pseudo classes
Les pseudo-classes vont nous permettre de cibler des éléments HTML

en fonction de leur état, ou plus exactement d’appliquer des règles CSS
à des éléments HTML uniquement dans un certain contexte (lorsqu’ils
sont dans un certain état).
Ainsi, nous allons pouvoir modifier les styles d’un lien HTML selon que
le curseur de la souris d’un visiteur soit dessus (état hover) ou qu’il ait
été déjà cliqué (état visited).
Syntaxe:
Liste complète des pseudo-classes et définition
Sources: https://www.pierre-giraud.com/html-css-apprendre-coder-cours/pseudo-classe/
7. Mise en forme du texte en CSS (1)
4- Propriété FONT et
Sources
•Jean Engels, HTML5 et CSS Cours et exercices corrigés, Groupe

Eyrolles, 2012, ISBN : 978-2-212-13400-1.
•https://www.pierre-giraud.com/html-css-apprendre-coder-cours
•http://www.yoyodesign.org/doc/w3c/css2/selector.html

Cours CSS

Transféré par

Informations du document

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

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

Université Blida 1

Deuxième année Licence informatique (L2)

Chapitre 3: Introduction aux Feuilles de style CSS

Définition: Les feuilles de style en cascade CSS (Cascading Style

MID CENTURY MODERNby Andrew Lohman

UNDER THE SEA!by Eric Stoltz ORCHID BEAUTYby Kevin Addison

Différentes version de CSS

Deux façon pour intégrer un code CSS dans un document

CSS externe insertion du code CSS

insertion du code CSS

insertion du code CSS

Comme en HTML, on peut écrire des commentaires en CSS

Sélecteur Propriété Valeur

Une règles CSS peut contenir 0 ou plusieurs déclarations

Un stylesheet est composé de 0 ou plusieurs règles CSS

Tous le texte des

Le style ne touche pas

 L’héritage est une notion centrale et fondamentale du CSS.

NB: Si on applique un style à un élément enfant, c’est bien ce style qui

Les pseudo-classes vont nous permettre de cibler des éléments HTML

•Jean Engels, HTML5 et CSS Cours et exercices corrigés, Groupe

Vous aimerez peut-être aussi