LBBPP PROG WEB : C S S 2/22
PLAN
1 Introduction
2 Règles, éléments et propriétés
3 Propagation de règles
4 Positionnement
5 Exemple
6 XML et CSS
LBBPP PROG WEB : C S S 3/22
Les CSS (1/12)
Description
Cascading Style Sheets
Feuilles de style en cascade
Un document en mode texte
Utilisable par des documents HTML ou XML
Présentation identique de tous les documents HTML ou XML
Apporte la modularité du formatage
Séparation du contenu et de la présentation 3
normes : CSS 1, CSS 2, CSS 3
LBBPP PROG WEB : C S S 4/22
Les CSS (2/12)
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>
< h ead >
Déclaration d’un lien vers la CSS via la balise <link>
<head>
<link href=" fichier.css" rel="stylesheet" type="text/css"/>
</ head>
LBBPP PROG WEB : C S S 5/22
Les CSS (3/12)
Déclaration d’une règle
sélecteur1 , sélecteur 2 . . . {
propriété1 : valeur1 ;
...
p r o p r i é t é N: valeurN ;
}
On peut mettre autant de couples propriété/valeur que voulu,
séparés par des ;
Commentaire : /* Commentaire */
Exemple
h1 , h2 { c o l o r : red ; }
LBBPP PROG WEB : C S S 6/22
Les CSS (4/12)
Déclaration d’une règle (suite)
Sélecteur de type : nom de balise
h1 {color: red; background-color: yellow}
Sélecteur universel : *
Sélecteur d’ID : #
#important {color : red}
Sélection de : <p id="important">paragraphe</p>
Sélecteur de classe : .
. s p e c i a l {font-s i z e : 20pt} ou h1.special {font-s i z e : 60pt}
Sélection de : <h1 class="special">Titre spécial</h1>
Remarque
Les id sont uniques sur une même page.
Les class s’appliquent à plusieurs balises.
LBBPP PROG WEB : C S S 7/22
Les CSS (5/12)
Déclaration d’une règle (suite)
Sélecteur de descendant
p h2 {color: green} : "les h2 qui sont dans un p"
Sélecteur d’enfant (descendant direct)
p > h2 {font-s i z e : 30pt} : "les h2 qui sont directement dans un p"
Sélecteur d’adjacent :
p ~ h2 {font-s i z e : 10pt} : "les h2 qui sont après un p"
Sélecteur d’adjacent direct :
p + h2 {font-s i z e : 10pt} : "les h2 qui sont directement après un p"
Sélecteur de pseudo-classe
a : v i si t e d {color : brown}
p em:first-child {font-weight: bold}
form:invalid {font-weight: bold} et
input:required:valid {border-color : #008000;}
LBBPP PROG WEB : C S S 8/22
Les CSS (6/12)
Déclaration d’une règle (suite et fin)
Sélecteur de pseudo-élément "première lettre"
p : f i r s t - l e t t e r { f o n t - size: 200%; font-weight: bold;
f l o a t : l e f t ; text-transform: capitalize}
Sélecteurs de pseudo-élément "avant" et "après"
:before et :af te r génèrent du contenu avant et après un élément
Le contenu généré est déclaré par la propriété content
Les pseudo-éléments générés héritent du style de l’élément référence
dt:before { content: "-> " ; }
LBBPP PROG WEB : C S S 9/22
Les CSS (6/12)
Éléments et propriétés
Propriétés (http://www.w3schools.com/cssref/)
polices de caractères :
font-s i z e , font-s t y l e , font-family, font-weight
paragraphes :
li n e - height, t e x t - a l i g n , t e x t - indent, t e x t - transform
blocs :
height, width, margin-r i g h t , margin-l e f t , margin-top, margin-
bottom, padding-r i g h t , border-s t y l e , border-top-width, . . .
Élément parent margin-top
padding-top
padding-left Élément enfant padding-right
margin-left margin-right
padding-bottom
margin-bottom
LBBPP PROG WEB : C S S 10/22
Les CSS (7/12)
Cascade
Tous les styles, peu importe où ils sont définis, se fusionnent dans
l’ordre de chargement, en une seule feuille de style avec un système
d’héritage et peuvent s’écraser.
LBBPP PROG WEB : C S S 11/22
Les CSS (8/12)
Cascade (suite)
Tous les styles applicables sont appliqués.
LBBPP PROG WEB : C S S 12/22
Les CSS (9/12)
Positionnement
Fonctionnement par défaut :
Dans le flux, les éléments sont positionnés les uns en dessous des
autres
Positionnement flottant (par rapport au bloc contenant) :
float: left;
Positionnement absolu (par rapport au conteneur, hors flux) :
position: absolute; top: x px; l e f t : y px;
Positionnement fixe (absolu même en cas de scroll) :
position: fixed; top: x px; l e f t : y px;
Positionnement relatif (par rapport à sa position dans le flux) :
position: r e l a t iv e ; top: x px; l e f t : y px;
http://www.w3schools.com/css/css_positioning.asp
LBBPP PROG WEB : C S S 13/22
Les CSS (10/12)
Exemple d’utilisation
Exemple
< ! DOCTYPE html>
<html>
<head>
< t i t l e > E x e m p l e d ’ u t i l i s a t i o n de s C S S < / t i t l e >
< m e t a h t t p −e q u i v = " c o n t e n t − t y p e " c o n t e n t = " t e x t / h t m l ; c h a r s e t = u t f − 8 " / >
< l i nk href=" L ivres . c ss " r e l= " st yleshee t " typ e=" t ex t / c ss "/>
< / head>
<body>
< d l>
< d t > C S S pour l e s n u l s < / d t > < d d > Y v o n T e n g r e c e < / dd>
< d t > X M L pour pas m ie u x < / d t > < d d > A l a i n S t i g a t e u r < / dd>
< d t > X H T M L pour <em>r i e n < / e m > < / d t > < d d > A rn ie K a < / dd>
< / dl>
< p > V o i c i un p e t i t t e x t e j u s t e p o u r < s t r o n g > m o n t r e r < / s t r o n g > l a d i f f é r e n c e
a v e c u n e < s p a n i d = " i m p o r t a n t " > l i s t e < / s p a n > . O n re m a r q u e r a q u e l a l a r g e u r
e s t f i x é e à < e m > 5 0 0 px . < / e m > < / p>
< p > e t un s e c o n d p a r a g r a p h e d e r r i è r e . < / p >
< d i v > E t un s p a n d a n s un d i v p o u r t e s t e r b r / i : < s p a n c l a s s = " i " > < s pa n
c l a s s = " b r " > i p u i s b r ( on f a v o r i s e i ) < / s p a n > < / s p a n > e t < s p a n c l a s s = " br " > <
s p a n c l a s s = " i " > b r p u i s i ( on t i e n t c o m p t e de i e t b r ) < / s p a n > < / s p a n > . < / d i v >
< / body>
< / html>
LBBPP PROG WEB : C S S 14/22
Les CSS (11/12)
Exemple d’utilisation
LBBPP PROG WEB : C S S 15/22
Les CSS (12/12)
Exemple d’utilisation
Sans C SS :
Avec C SS :
