Initiation au css

Initiation au CSS
M. DIENG Abdoulaye Mai 2014

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

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 caractères
9. Le texte
10. Les valeurs de couleurs
11. Les couleurs et fond
12. La marge
13. La bordure
14. L’espacement
15. Le dimensionnement
16. Le positionnement
17. L’empilement
18. L’héritage
3

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.
 Il a pour but de séparer la structure et la présentation du
contenu
 Intérêts des feuilles de style :
– une présentation homogène sur tout un site;
– faciliter la mise à jour et l'évolution d’un site;
– une plus grande lisibilité du HTML;
– des chargements de page plus rapides;
– 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.)
4

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.
• Une valeur est assignée à une propriété pour définir sa nature.
5

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; }
6

L’insertion en ligne
• Insertion dans une balise ou style inline
• 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.
7
x

L’insertion interne
• Insertion dans l’en-tête du fichier HTML ou style interne
• Elle s'applique à toutes les balises de la page qu'elle a
définies.
• Syntaxe:
<head>
<style type="text/css">
/* Définition des règles de style */
</style>
</head>
8
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.
9
x

Le sélecteur de type et d’attribut
• Le sélecteur de type permet d’appliquer un style à une ou
plusieurs balises.
• Le sélecteur d’attribut permet d’appliquer un style en fonction
de l’attribut d’une balise.
• Exemple
h1 {color: green;}
h2 , h3 {color: yellow;}
hr[width=50%]{ color : red;}
10

Le sélecteur de descendance
• Le sélecteur de contenus imbriqués permet de créer une règle
ne s'appliquant que lorsque un contenu Y est imbriqué dans
un contenu 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>
11

Le sélecteur filial
• Le sélecteur de contenus père-fils permet de créer une règle
ne s'appliquant que lorsque un contenu Y est fils direct d'un
contenu X.
• La règle ne s'applique pas si Y est encapsulé dans une ou
plusieurs autres balises 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>
12

Le sélecteur adjacent
• Le sélecteur de contenus consécutifs permet de créer une
règle ne s'appliquant que lorsque un contenu Y suit
immédiatement un contenu 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>
13

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>
14
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>
15
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;}
16
x

span et div
• span et div servent chacun à délimiter une zone associée à un
style.
• Éviter d’utiliser span ou div comme unique sélecteur
• span et div sont souvent utilisés avec les attributs class et id.
• L’élément span est utilisé pour modifier le style d'une portion de
texte incluse dans une boîte ou un bloc.
• Un "bloc" délimite un contenu en commençant sur une nouvelle
ligne.
Exples: h1, ..., h6, ul, table, pre, blockquote, p, div, etc.
• div permet de contenir des sous-blocs et des balises en-ligne.
• Les éléments "en-ligne" sont prévus pour rester dans le texte.
Exples: a, abbr, b, img, input, span, textarea, etc.
17
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
18

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; }
19

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.
20

Les valeurs de couleur
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
Orange #ffa500
21

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) }
22

L’anatomie des boîtes
Une boîte possède une aire de contenu (texte, image, ...) entourée par
une aire d'espacement, une aire de bordure et une aire de marge
23

La marge
• Le margin évalue la distance entre l’élément 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
24

L’épaisseur de bordure
• Les propriétés border−top−width, border−right−width,
border−bottom−width, border−left−width prennent chacun
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)
25

La couleur de bordure
• Les propriétés border−top−color, border−right−color,
border−bottom−color, border−left−color prennent chacun 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)
26

Le style de bordure
• Les propriétés border−top−style,
border−right−style, border−bottom−style,
border−left−style prennent chacun 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)
27

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.
28

L’espacement
• Le padding evalue l’espace entre le contenu de l'élément 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} permet
de regrouper les différentes propriétés de padding en une
ligne
Ex. h1 { padding: 1em 2em }
29

Le dimensionnement
• width et height permettent de contrôler la largeur et la hauteur
des contenus de type bloc et ceux remplacés
• 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
• NB : Si la hauteur d’un contenant n’est pas à auto, son contenu
peut déborder. 30

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).
31

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).
32
• 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

Le positionnement relatif
• Le positionnement relatif (position : relative) laisse le contenu dans
le flux normal, tout en le décalant par rapport à la ligne de base, à
l'aide des propriétés top:<longueur>, right :<longueur>,
bottom :<longueur> et left :<longueur>.
• 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
33
• 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)

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
34

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
35
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.
• Utiliser les propriétés top:<longueur>, right :<longueur> ,
• Attention: superposition possible (voir z-index)
36
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 fixed reste visible lors du défilement de
la page.
• Pour positionner le contenu, utiliser les propriétés
top:<longueur>, right :<longueur> ,
• Attention: superposition possible (voir z-index)
• Le positionnement fixe n'est implémenté dans MSIE qu'à partir
que de la version 7.
37

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).
38
x

L’héritage
• Les feuilles de style respectent la structure hiérarchique des
éléments XHTML.
• 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.
39

Initiation au css

Contenu connexe

Tendances

En vedette

Similaire à Initiation au css

Plus de Abdoulaye Dieng

Initiation au css