Cours CSS feuilles de style en cascade- mars 2015

Initiation au CSS
M. DIENG Abdoulaye Mars 2015
DTS 1 Réseaux & Données

Objectif général
Mettre en forme le contenu d’un site web
2

Objectifs spécifiques
• Insérer du style dans une page HTML
• Sélectionner du contenu dans une page Web
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents
composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web
3

Le sommaire
1. Présentation du CSS
2. La syntaxe
3. L’insertion
4. Les sélecteurs
5. Les éléments span et div
6. L’affichage d’un contenu
7. Les unités de longueur
8. Les valeurs de couleurs
9. Les caractères
10. Le texte
11. Les couleurs et fond
12. Les listes
13. La marge
14. La bordure
15. L’espacement
16. Le dimensionnement
17. Le positionnement
18. L’empilement
19. L’héritage
4

Présentation du CSS
 Le concept de CSS (Cascading StyleSheets ou feuilles de style en
cascade) est apparu en 1996 et consiste à lier du style (ex. les
polices de caractères, les couleurs, la mise en page, etc.) aux
documents structurés (HTML, XML, …).
 Objectif : séparer la sémantique et la présentation du contenu
 Intérêts :
– Présentation homogène sur tout un site
– Facilitation de la mise à jour et de l'évolution d’un site
– Plus grande lisibilité du HTML
– Accélération du chargement des pages
– Augmentation des potentiels de présentation;
– Avec CSS2, la prise en compte de la diversité de média
(écran, imprimante, mobiles, synthétiseur vocal, etc.)
– Avec CSS3, l’amélioration de la décoration et intégration de
l’animation et du responsive design
5

La syntaxe (1/2)
• Une feuille de style est composée de règles qui peuvent
s'appliquer au document entier, à un ensemble de contenus du
document ou à un contenu particulier.
• Une règle de style est composée d'un sélecteur et d'une
déclaration constituée d’un ou de plusieurs couples
propriété:valeur séparés par des ;.
selecteur { prop1:val1; prop2:val2_1 val2_2; }
• Un sélecteur indique à quel(s) contenu(s) d'une page HTML on
désire appliquer une règle.
• Une propriété identifie ce qu'il faut définir sur le contenu
sélectionné
• Une valeur est assignée à une propriété pour définir sa nature.
6

La syntaxe (2/2)
• Une propriété peut avoir plusieurs valeurs (séparées par des
espaces).
• On peut attribuer un même style à plusieurs sélecteurs (séparées
par des virgules).
• Les commentaires sont délimités par les symboles /* et */
• Exemples :
h1 { color : red; } /*couleur rouge pour tout titre de niveau 1*/
table {background-color : white ; border : 1px black;}
h2, h3 { color : gray; }
7

L’insertion en ligne
• Insertion dans une balise ou style inline avec l’attribut style.
• Syntaxe : <balise style="prop1:val1; prop2:val2; … ">
• À utiliser avec modération car ne respectant pas le principe de
la séparation du contenu et de la présentation.
8
x

L’insertion interne
• Insertion dans l’en-tête du fichier HTML ou style interne avec
l’élément HTML style qui délimite les règles CSS.
• Elle s'applique à tout contenu sélectionné de cette page.
• Syntaxe:
<head>
<style type="text/css">
/* Définition des règles de style */
</style>
</head>
9
x

L’insertion externe
• Liaison d’une feuille de style externe (qui contient les règles)
• Syntaxe:
<head>
<link href=“chemin/du/fichier.css" rel="stylesheet"
type="text/css“>
</head>
• La feuille de style peut être utilisée par un nombre illimité de
pages.
• La feuille de style sera gardée dans la mémoire cache du
navigateur.
10
x

Le sélecteur de type et d’attribut
• Le sélecteur de type permet d’appliquer un style à un contenu
en se servant uniquement de l’élément HTML qui le balise
• Le sélecteur d’attribut permet d’appliquer un style à un
contenu en fonction d’un attribut de l’élément HTML qui le
balise
• Exemple
h1 {color: green;}
h2 , h3 {color: yellow;}
hr[width=50%]{ color : red;}
11

Le sélecteur de descendance
• Le sélecteur de contenu imbriqué permet de créer une règle
ne s'appliquant sur un contenu balisé par un élément Y que
lorsque Y est imbriqué dans un autre élément X.
• Syntaxe:
X Y {déclaration1; déclaration2; … }
NB : X et Y sont séparés par le caractère espace)
• Exemple
Définition : p b { color: red; }
Application :
<p> <i> texte en italique </i><b> texte rouge et en gras </b>
</p> <div><b> texte uniquement en gras</b></div>
12

Le sélecteur filial
• Le sélecteur de contenus père-fils permet de créer une règle
ne s'appliquant sur un contenu balisé par un élément Y que
lorsque Y est fils direct d'un autre élément X.
• La règle ne s'applique pas si Y est encapsulé dans une ou
plusieurs autres éléments HTML intermédiaires.
• Syntaxe
X > Y {déclaration1; déclaration2; … }
• Exemple
Définition :
p > b { color: red; }
Application:
<p>
<b><i> texte en italique, gras et rouge </i></b>
<i><b> texte gras et en italique mais pas rouge</b></i>
</p>
<div><b> texte uniquement gras </b></div> 13

Le sélecteur adjacent
• Le sélecteur de contenus consécutifs permet de créer une
règle ne s'appliquant sur un contenu balisé par un élément Y
que lorsque Y suit immédiatement un autre élément X.
• Syntaxe :
X + Y {déclaration1; déclaration2; … }
• Exemple
Définition:
i + b { color: red; }
Application:
<p><i> texte en italique </i><b> texte gras et en
rouge</b> <b> texte uniquement en gras </b></p>
14

Le sélecteur d’identificateur
• Le sélecteur d’identificateur permet d'appliquer une règle de
style à un contenu unique du document.
• Le id est très utilisé pour la mise en page.
• Définition du style (nom préfixé d’un dièse)
#identificateur {déclaration1; déclaration2; … }
• Application du style (nom sans le dièse)
<balise id="identificateur"> .... </balise>
• Exemple
Définition :
#titreDebutPage {color: blue;}
Application :
<h1 id="titreDebutPage">Titre principal</h1>
15
x

Le sélecteur de classe
• Un sélecteur de classe permet de créer un style qui peut
s’appliquer à n’importe quel contenu du document
• +sieurs contenus d’une page peuvent partager une classe
• Il est possible d'appliquer simultanément deux classes à une
même balise, en les séparant par un espace.
• Définition du style (nom préfixé d’un point)
.nom_de_classe {déclaration1; déclaration2; … }
• Application du style (nom sans le point)
<balise class="nom_de_classe"> .... </balise>
• Exemple
Définition :
.rouge { color: red; }
p.gras { font-weight: bold; } /*sous classe*/
Application :
<p class=" rouge gras "> paragraphe en gras et rouge</p>
<h1 class=" rouge "> titre rouge</h1>
16
x

Le sélecteur de pseudo-classes
• Un sélecteur de pseudo-classe permet d’appliquer une règle sur
un contenu uniquement dans certains contextes
• Il y en a plusieurs, mais ceux qui sont reconnus par tous les
navigateurs sont :
 a:link qui permet d'attribuer une règle au lien (non-visité).
Exple. a:link {text-decoration:none;}
 a:visited permet d'attribuer une règle au lien visité
Exple. a:visited {color:blue;}
 a:hover qui permet d'attribuer une règle sur les liens lors du
survol par la souris.
Exple. a:hover {font-weight:bold;}
17
x

span et div
• span et div servent à délimiter un contenu associé à un style.
• span et div sont souvent utilisés avec les attributs class et id.
• span est utilisé pour donner du style à une portion de texte.
Exemple : écrire, en rouge, un groupe de mots.
• div permet de donner du style à un ensemble de contenus de
type "block".
Exemple : Mettre dans l’entête de page le logo, le slogan et la
bannière de l’entreprise
• Un élément de type « block » commence sur une nouvelle ligne
et ne partage pas cette ligne. Il peut être dimensionné et aligné
horizontalement et verticalement.
Exples: h1, ..., h6, ul, table, pre, blockquote, p, div, etc.
• Un élément qui partage sa ligne est de type « en-ligne »
Exples: a, abbr, b, strong, img, input, span, textarea, etc.
18
x

Affichage d’un contenu
La propriété display permet de changer la manière dont un
contenu est affiché avec comme principales valeurs :
• none : le contenu n’est pas affiché ;
• inline : le contenu devient « en-ligne »
Exemple : insérer un titre et un paragraphe au mm niveau
• block : le contenu devient « bloc »
Exemple : créer un retour à la ligne avant et après une image
qu’on pourra aligner au centre.
• inline-block : contenu de type en ligne (partage sa ligne) vu
de l’extérieur et de type block (dimensions et alignement) vu
de l’intérieur
Exemple : créer un menu de navigation horizontal
19
x

Les unités de longueur
Nombre entier ou décimal suivi d'une unité de mesure pour les
tailles de police, les espaces entre paragraphes, les marges, les
dimensions, etc.
 em : taille de la police utilisée (1em=100%, 0.8em=80%)
 ex : hauteur du "x" minuscule de la police utilisée
 px : pixel (variable en fonction de l’écran)
 % : pourcentage de la taille de l’élément parent
20

Les valeurs de couleur
21
Mot clé rgb héxa
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
Maroon #800000
navy #000080
olive #808000
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
#ffffff
yellow #ffff00
• Les couleurs en CSS sont obtenues en
mélangeant 256 nuances de rouge (red), de
vert (lime) et de bleu (blue) en proportions
variables.
• Il y a 16 couleurs nommées et normalisées
• Conseil : utiliser le code hexadécimal
surtout pour une couleur non normalisée
Couleurs nommées
et normalisées

Les caractères
• font-style : normal | italic | oblique style des caractères
• font-weight : de 100 à 900 | normal(400) | bold(700) | bolder |
lighter épaisseur ou graisse des caractères
• font-size : xx-small | x-small | medium | x-large |
xx-large | <longueur> | % | smaler | larger.
taille des caractères
• font-family : nom(s) de police ou famille générique ( serif,
sans-serif, cursive, monospace, fantasy)
Déclarer une famille générique après les polices (séparées par
une virgule) pour obliger le navigateur, si la police n’est pas
trouvée, à lui substituer une police similaire.
• font : permet de regrouper les différentes propriétés de polices
(dans l’ordre précité) en une ligne.
Ex : p { font: italic bold 12pt "Times New Roman" , serif; }
22

Le texte
• word-spacing et letter-spacing : normal | <longueur>
distance entre mots et distance entre caractères.
• line-height : normal | <longueur> | %
interligne
• text-decoration: none | [ underline || overline || line-through ||
blink ]
texte souligné, surligné, barré ou clignotant.
• text-align: left | right | center | justify
alignement horizontale du texte.
• text-transform: capitalize | uppercase |lowercase | none
casse des caractères.
• text-indent: <longueur> | <pourcentage>
alinéa pour la première ligne de texte.
23
x

Les couleurs et fond
 color: <couleur>
couleur d'un texte
 background-color: <couleur> | transparent
couleur du fond de la page ou d’un bloc
 background-image: url(<url>) | none;
image du fond de la page ou d’un bloc
 background
permet de regrouper les différentes propriétés de fond (dans
l’ordre précité) en une ligne
Ex : p { background: green url(image.gif) }
24

Les listes
• list-style-type: disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none
définit le type de puce (numérotée ou non)
Ex : ol { list-style-type: lower-roman } /* i ii iii iv …
• list-style-image:url(…) permet de remplacer les
valeurs de list-style-type par une image
Ex : ul { list-style-image: url(image.gif) }
• list-style-position: inside | outside
spécifie le retrait des puces par rapport au texte.
Ex: ul { list-style-position: outside }
• list-style permet de regrouper les différentes catégories de
list-style
Ex: ol { list-style: upper-roman inside }
25
x

Les boîtes
• Pour construire une boîte, on utilise un élément (comme p,
div, h1 à h6, ul, li, td, etc.) auquel on applique un style.
• Une boîte est, pour l'essentiel, une zone rectangulaire.
• Au cœur de ce rectangle se trouve le contenu (remplacé ou
non) de l'élément.
• Autour de ce contenu vient se coller d'abord une couche
de padding (traduit par espacement ou remplissage, un peu
comme les chips de polystyrène dans un colis postal).
• Ensuite vient une épaisseur de border ou bordure (invisible
par défaut)
• Enfin une distance de margin ou marge.
26

La marge
• Le margin évalue la distance entre un contenu et ses voisins
• Les propriétés margin-top, margin-right, margin-bottom,
margin-left prennent chacune l’une des valeurs: <longueur>
| <pourcentage> | auto
• margin : [<longueur>|<pourcentage> | auto]{1,4}
regroupe les différentes propriétés de marge (en partant
d'en haut, dans le sens horaire)
• Exemples :
body{ margin: 2em }
signifie : toutes les marges à 2em.
body { margin: 1em 2em }
signifie : top = bottom = 1em et right = left = 2em.
body { margin: 1em 2em 3em }
signifie : top = 1em, right = left = 2em et bottom = 3em
28

L’épaisseur de bordure
• Les propriétés border−top−width, border−right−width,
border−bottom−width, border−left−width prennent chacune
l’une des valeurs : thin (fin) | medium | thick | <longueur>
• border-width : [thin | medium | thick | <longueur>]{1,4}
regroupe les différentes propriétés de l’épaisseur (en partant
d'en haut, dans le sens horaire)
29

La couleur de bordure
• Les propriétés border−top−color, border−right−color,
border−bottom−color, border−left−color prennent chacune l’une
des valeurs :<couleur> | transparent
• border-color : [<couleur> | transparent]{1,4}
spécifie la couleur des quatre côtés (en partant d'en haut, dans
le sens horaire)
30

Le style de bordure
• Les propriétés border−top−style,
border−right−style, border−bottom−style,
border−left−style prennent chacune l’une des
valeurs : none | dotted (pointillée) | dashed
(tirets) | solid (pleine)| double (2 traits)|
groove (gravée avec effet 3D) |
ridge (relief avec effet 3D ) |
inset (incrustée)| outset (extrudée).
• border-style regroupe les différentes
propriétés de l’épaisseur (en partant d'en haut,
dans le sens horaire)
31

Les raccourcies de bordure
• Les propriétés border−top, border−right, border−bottom,
border−left spécifient chacune l’épaisseur, le style et la couleur
d’un coté (dans l’ordre précité) .
• La propriété border spécifie la même épaisseur, la même couleur
et le même style pour les quatre côtés.
32
x

L’espacement
• Le padding evalue l’espace entre le contenu et sa bordure.
• padding-top : <longueur> | <pourcentage>
valeur de l’espacement haut
• padding-right : <longueur> | <pourcentage>
valeur de l’espacement droit
• padding-bottom : <longueur> | <pourcentage>
valeur de l’espacement bas
• padding-left : <longueur> | <pourcentage>
valeur de l’espacement gauche
• padding : [<longueur> | <pourcentage>]{1,4}
regrouper les différentes propriétés de padding en une ligne
Ex. h1 { padding: 1em 2em }
33

Le dimensionnement
• width et height permettent de contrôler la largeur et la hauteur
des contenus de type bloc ou remplacés (image, vidéo, …)
• Elle prennent des unités absolues ou relatives
• Par défaut (valeur auto) :
– un bloc prend la largeur max dispo sauf s’il est positionné en
mode absolu, fixe ou flottant où il s’adapte à son contenu ;
– un bloc s’adapte à la hauteur de son contenu.
– un contenu en-ligne remplacé prend sa taille intrinsèque
• Pour redimensionner une image, jouer uniquement sur l'une
des deux valeurs width ou height, pour laisser au navigateur le
soin de déterminer l'autre valeur d'une manière à conserver le
les proportions de l'image
• Si la hauteur d’un contenant n’est pas à auto, son contenu peut
déborder. 34

L’ajustement contenant/contenu
La propriété overflow ajuste le contenu avec :
 visible (valeur par défaut) : le contenu peut débordé.
 hidden : contenu éventuellement tronqué.
 scroll : barres de défilement systématiquement ajoutées
 auto : barres de défilement ajoutées quand c’est nécessaire
35

Le positionnement
• Le positionnement CSS permet de placer un contenu
exactement où l'on veut dans la page
• Il existe plusieurs schémas de positionnement en CSS :
– un schéma de positionnement dans le flux normal ou
positionnement courant (positionnement par défaut);
– un positionnement relatif, une variante du positionnement
courant qui provoque un décalage;
– trois schémas de positionnement qui sortent le contenu du
flux (positionnement absolu, positionnement fixé et
positionnement flottant).
36

Le positionnement dans le flux
• Par défaut, les navigateurs affichent les contenus suivant l'ordre
dans lequel ils apparaissent dans le code HTML: c’est le
positionnement dans le flux normal.
• Par défaut, les éléments de type bloc seront affichées dans une
succession verticale (du haut vers le bas) et les éléments de
type en-ligne, dans une succession horizontale (de la gauche
vers la droite).
• Pour positionner un contenu dans le flux
normal, utiliser les propriétés padding et
margin.
• Pour centrer horizontalement un bloc,
fixer sa largeur et mettre à auto ses
marges latérales
37
x

Le positionnement relatif
• Le positionnement relatif (position : relative) laisse le contenu
dans le flux normal, tout en le décalant p/r à la position normale
de son coin supérieur gauche, à l'aide de deux des propriétés
top:<length>, right:< length>, bottom:< length> et left:< length>.
• L’emplacement d’une boîte B qui suit une boîte A en position
relative est calculé comme si A n'avait pas été déplacée
• Aussi, en attribuant à un contenu une position relative, il peut :
o servir de référent à un contenu enfant positionné en absolu
(à voir plus loin).
o bénéficier de la possibilité d'utiliser la propriété z-index
pour gérer des superpositions de contenus (à voir plus loin)
38

Le positionnement flottant
• Un contenu flottant est ôté partiellement du flux et placé à
l'extrême gauche (float:left) ou droite (float:right) de son
conteneur, forçant par la même occasion tout contenu du
flux qui suit à l'envelopper.
• float : none empêche un contenu de flotter
39

Empêcher l’enveloppement
Pour contrôler le comportement d’un bloc qui suit des éléments
flottants dans le document, utiliser la propriété clear avec
l’une des valeurs none, left, right ou both
40
x

Le positionnement absolu
• Le positionnement absolu (position : absolute) retire
totalement du flux le contenu concerné mais le positionne par
rapport aux limites du premier ancêtre positionné.
• En l'absence d'un ancêtre positionné, c'est l’espace de
visualisation qui sert de référence.
• Positionner avec deux des propriétés top, right, bottom et left
distances des côtés du bloc p/r aux côtés de son référent
• Attention: superposition possible (voir empilement)
41
x

Le positionnement fixe
• Le positionnement fixe (position : fixed) retire totalement du
flux le contenu concerné et le positionne par référence aux
limites de l'espace de visualisation.
• Un contenu en position fixe reste visible lors du défilement de
la page.
• Positionner avec les propriétés top, right, bottom et left
• Attention: superposition possible (voir empilement)
42
Barre de partage
en position fixe

Empilement
• En plus de leurs positions horizontales et verticales, les
contenus s’échelonnent le long d'un "axe−z" et s'empilent les
unes au−dessus des autres dans la mise en forme.
• Des contenus positionnés (relative, absolute ou fixed) dont les
domaines d'affichage se superposent sont en principe affichés
l'un sur l'autre dans l'ordre dans lequel ils ont été définis.
• Cet ordre d’empilement peut être modifié grâce à la propriété
z-index appliquée à chacun de ces contenus.
• Les valeurs possibles de z-index sont des entiers (plus l'entier
est grand, plus le contenu considéré sera au dessus).
43
x

L’héritage
• Les feuilles de style respectent la structure hiérarchique des
éléments HTML.
• Un élément de niveau supérieur (l'élément parent) est suivi
par des éléments enfants qui peuvent hériter des styles,
provenant de leurs éléments parents.
• Exemple:
Avec : div { color : white; background-color : black; }
on aura :<div>Ceci est une division (texte blanc sur fond noir)
contenant un <p>paragraphe de même style </p></div>
• Certaines propriétés comme les marges, les espacements, les
bordures et les dimensions ne sont pas héritées pour des
raisons évidentes de lisibilités des documents.
• Depuis CSS 2, la quasi-totalité des propriétés peut prendre la
valeur inherit permettant de définir explicitement l’héritage de
la valeur que possède la même propriété dans l’élément
parent. 44

Cours CSS feuilles de style en cascade- mars 2015

Contenu connexe

Tendances

En vedette

Similaire à Cours CSS feuilles de style en cascade- mars 2015

Plus de Abdoulaye Dieng

Cours CSS feuilles de style en cascade- mars 2015