css3 Pour 4 SI

Le CSS 3 (Introduction)
Cascading Style Sheets

Feuilles de styles en cascade
1
Le CSS
C’est un langage permettant la mise en forme de documents
structurés écrits en langage HTML, XHTML, XML.
Les feuilles de styles ont pour objectif principal de
dissocier le contenu de la mise en forme.
HTML CSS
Contenu Mise en forme
2
3
Avantages de l’utilisation du CSS
 ne pas répéter dans chaque page le même code de

mise en forme réduction de la taille de page, gain
du temps
 pouvoir changer l'apparence d'un site web complet
en ne modifiant qu'un seul fichier
 faciliter la lecture du code de la page
 réduire le temps de chargement des pages (les
feuilles css sont gardées en cache, seuls les
contenus sont chargés au cours de navigation)
 permettre la cohésion de la présentation tout au
long du site avec les feuilles de style externes.
4
Les différentes versions du css
Succession de différentes versions :
CSS-1 ou CSS level 1 (1996)

CSS-2 ou CSS level 2 (1998)
CSS-2.1 (révision 2006)
CSS-3 : a commencé dès 1999 et a été exploité
dès 2007
CSS 4: 2010, parallèlement aux modules CSS 3
5
Sélecteur HTML
⚫ La partie textuelle d'une balise HTML est appelé

sélecteur
◦ H2 est le sélecteur de la balise <H2>
⚫ Le sélecteur est exploité pour redéfinir le style de
l'affichage de la balise.
Sélecteur html { propriété : valeur; }
6
Exemple
accolades
sélecteur de déclarations
règle h2 { color: red ; text-align: center ;}

CSS
identificateur valeur
déclaration de propriété
; ;
séparateur facultatif
entre déclarations à la fin
7
Règle CSS : présentation du code
⚫ Présentation possible :
h2 {color: red; text-align: center ; }
⚫ Présentation conseillée (avec indentation et

passage à la ligne) :
h2 {
color: red;
text-align: center ;
}
8
Les commentaires
⚫ Comme en HTML, il est possible de mettre des

commentaires.
⚫ Pour faire un commentaire, on tape :
/*suivi du commentaire */
⚫ Vos commentaires peuvent être sur une ou plusieurs
lignes. Par exemple :
/* essai.css
*/
p
{
}
9
Inclusion des styles CSS dans des pages HTML
Il existe trois façons de définir une feuille de style :
 Définition CSS spécifique en ligne

 Méthode CSS interne
 Méthode CSS externe
10
Définition CSS spécifique en ligne
Consiste à intégrer les styles dans le corps du

document HTML.(la méthode la moins recommandée!!)
Code CSS :
Elle ne semble intéressante que lorsque le style que

vous allez définir est vraiment spécifique à cet
endroit.
11
Exemple
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="lamia mansouri">
<title>Premiers tests du CSS</title> </head>
<body>
<h1>Mon site</h1>
<p style="color: blue; font-family: Arial; font-style: italic">
Bonjour et bienvenue sur mon site ! </p>
<p>Pour le moment, mon site est un peu
<em>vide</em>.
Patientez encore un peu !</p> </body>
12
Méthode CSS interne
Consiste à mettre le style dans l'entête de la page.

La syntaxe est incorporée à l'entête du
fichier HTML entre les balises <head> et </head>.
<head>
Sélecteur
{
</style>
</head> 13
Exemple
<head>
<meta charset="utf-8" />
<style> Consiste à insérer le
p{ code CSS directement
dans une balise <style>
color: blue;
font-family: Arial;
font-style: italic
}
</style>
</head>
<body> <h1>Mon site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu Patientez un peu </p>
</body> 14
Méthode CSS externe
15
<!DOCTYPE html>
<html>
<head> indique que ce
<meta name="author" content="lamia"> fichier HTML est
<meta charset="utf-8" /> associé à un fichier
appelé style.css
<link rel="stylesheet" href="style.css" />
avertit le browser
qu'il faudra
</head>
réaliser un lien
<body>
<h1>Mon site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
16
Regroupement de sélecteurs du HTML
h1 {color:red;
}
}
h2 {color:red;
h1 {
}
p {color:red;
} }
17
Sélecteur universel *
⚫ Se met dans la partie style CSS, par exemple :
* {color: red}
Tous les éléments du document (h1, h2, p, div,

ul…) auront une couleur de police rouge.
18
Notions à connaitre
Unité de mesure:
La spécification de certaines valeurs en CSS nécessite

l'utilisation d'un certain nombre d'unités de mesure.
Les valeurs de longueur sont données en valeur
numérique.
Pour cela, il y a deux sortes d'unités :
◦ Unité absolue
◦ Unité relative
19
Unité absolue
Les unités absolues ont un certain rapport entre

elles. Par contre, elles n'ont pas de rapport avec
le contexte, avec le reste du document.
Unité Description
cm Le centimètre, 1cm = 10 mm
Le pouce (en anglais « inch »)
in
inche = 1in = 2.54 cm
mm Le millimètre
pt Le point, 1pt = 1/72 in
pc Le pica , 1pc = 12pt
20
Unité relative :
Le résultat physique dépend du contexte
Valeurs possibles : en px, « em » ou « ex » ou en %
 l’unité px: la taille du pixel (px) est dépendante de

la résolution et de la taille de l'écran. C'est donc
une unité relative dépendante du périphérique
affichant la page.
Exemple : font-size: 16px;
Une lettre de 16 pixels de hauteur

21
 l’unité em:
- L'unité em se rapporte à la taille de la police.
- 1em équivaut à 100% de cette taille, Si on écrit 1em
le texte aura une taille normale.
Valeur supérieure à 1 pour agrandir et inférieur à
1 pour réduire.
- Elle permet d'avoir des feuilles de style plus
facilement adaptables d'un média à un autre.
Exemple : p { font-size: 0.8em; }

22
 l’unité ex:
Elle est relative à la hauteur de la minuscule de «x».
Fonctionne sur le même principe que le em mais qui
est plus petit de base.
 Le pourcentage : une longueur par rapport à la

largeur ou la hauteur du conteneur parent ou à
la taille de police par défaut.
Exemple : (80%, 130%…).
23
Les styles de la police
La propriété description
font-family définit un nom de police ou une famille de
police <nom> ou <famille>
police précise (Arial,Times, Helvetica...) ou
famille (serif, sans-serif, cursive, fantasy,
monospace)
Exemple: p { font-family : Impact, "Arial
Black", Arial,Verdana, sans-serif; }
font-style définit le style de l'écriture :normal ou
italique ou oblique
font-weight définit l'épaisseur de la police : normal ou
bold ou bolder ou lighter ou valeur
numérique soit (100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900)
24
Les styles de la police
font-size définit la taille de la police : taille relative (xx-small,
x-small, small, medium, large, x-large,
xx-large)ou en %, ex ou em
font-variant définit une variante par rapport à la

normale :normal ou small-caps
font raccourci pour les différentes propriétés de police

exemple : P {font: bold italic}
25
Les styles du texte
propriété description
text-align définit l'alignement du texte :left , center, right ou justify
text-indent définit un retrait dans la première ligne d'un bloc de
texte souvent utilisé avec <P>, n'oubliez pas dans ce cas
</P>.
Spécifié en in ou en cm ou en px
text- définit une décoration du texte, soit underline ou line-
decoration through ou overline ou blink (clignotant, ne fonctionne
pas sur tous les navigateurs) ou none
Text-shadow ajoute des ombres au texte. Chaque ombre est décrite

par une combinaison de décalages X et Y de l'élément,
de rayon de flou et de couleur.
Exemple: text-shadow:1px 1px 2px gray;
Décalage de de
Couleur de
l’ombre l’ombre vers Valeur du flou de
l’ombre l’ombre 26
Les styles du texte
text-transform définit la casse du texte (majuscule,
minuscule) uppercase (met les caractères en
majuscules) ou lowercase (met les caractères en
minuscules) ou capitalize (met le premier caractère en
majuscule)
color définit la couleur du texte: par son nom, par un code
hexadécimal #RRVVBB ou en RGB([R],[V],[B]) ou
RGBA avec A: opacité en valeur flottante (de 0.0 à 1.0).
Exemples : Color:Yellow;
Color: #FFFF00;
Color: RGB(255,255,0);
Color: RGBA(255,255,0,1)
word-spacing définit l'espace entre les mots en points (pt), inches (in),
en cm, pixels (px) ou en %
letter-spacing définit l'espace entre les lettres spécifié en points (pt),
inches (in), en cm, en px ou en % 27
Les styles du texte
line-height définit l'interligne soit l'espace entre les
lignes du texte en points (pt), inches (in),
centimètres (cm), pixels (px) ou
pourcentage (%)
width détermine la longueur d'un élément de

texte ou d'une image en points (pt), inches
(in), centimètres (cm), pixels (px) ou en (%)
height détermine la hauteur d'un élément de texte
ou d'une image en points (pt), inches (in),
centimètres (cm), pixels (px) ou en (%)
28
Les arrière-plans
background- Définit la couleur de l'arrière-plan
color
background- Définit l'image de l'arrière-plan URL de l'image
image Exemple:
background-image: url("image.jpg");
background- définit la façon de répéter l'image d'arrière-

repeat plan : repeat (par défaut) ou no-repeat, repeat-
x (une seule répétition horizontale), repeat-
y(une seule répétition verticale)
Exemple:
P {background-image: url("image.gif");
background-repeat: repeat;
29
Les arrière-plans
30
background-position :
Spécifie la position de l'image d'arrière-plan par rapport au
coin supérieur gauche de la fenêtre.
⚫ Valeurs possibles:
valeur explication
left top / left center/ left bottom Si on met une seule valeur, la deuxième
right top/ right center / right bottom valeur sera center par défaut
center top/ center center/center bottom
x% y% Le x est la position horizontale, le y est
la position verticale;
Sachant que la position left top a pour
valeur 0% 0% et celle right bottom est
100% 100%.
Si on spécifie une seule valeur , la
deuxième sera 50%
xpos ypos Le xpos est la position horizontale, le
ypos est la position verticale;
31
Les arrière-plans
background- spécifie si l'image d'arrière-plan reste fixe avec les
attachement déplacements de l'écran: scroll ou fixed
Exemple : BODY {background-image:
url("image.gif"); background-attachement: fixed}
background- définit la position horizontale initiale de l'arrière-
position-x plan par rapport à l'origine : left|center|right ou
une mesure
background- définit la position verticale initiale de l'arrière-

position-y plan par rapport à l'origine: top|center|bottom
ou une mesure
32
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; }
</style>
</head>
<body><h1>la propriété background-position</h1>
<p>L'image sera positionnée au centre de l'élément (dans
notre cas, dans le body.</p>
</body>
</html> 33
Les arrière-plans
La description
propriété
background raccourci pour les différentes propriétés
P {background: url("image.gif") fixed repeat}
On peut également combiner plusieurs images de fond en

séparant les listes de valeurs par une virgule si l’on
souhaite également une couleur de fond, elle sera
précisée à la fin de la liste des propriétés.
Exemple : body
{ background :url("moon.png") repeat-y top left,
url("sun.png") no-repeat fixed top right,
blue ; }
34
Les marges
Sans définition explicite du positionnement, un bloc se place par défaut
en haut à gauche de son conteneur (le body, un autre bloc,...) et occupe
toute la largeur de ce conteneur. Ses frères se placeront en-dessous.
Les propriétés de marges permettent de positionner un bloc au sein de
son parent.
335
Les marges
margin-top détermine la valeur de la marge
supérieure en unité de longueur ou auto
exemple : margin-top: 5px
margin-right détermine la valeur de la marge droite en
unité de longueur ou auto
exemple :margin-right: 5px
margin-bottom détermine la valeur de la marge

inférieure en unité de longueur ou auto
exemple: margin-bottom: 5px
36
Les marges
margin-left détermine la valeur de la marge gauche en unité de
longueur ou auto
margin regroupe les différentes propriétés de la marge
Exemples:
margin: 10px; /* tous les côtés avec une marge 10px */
margin: 1.6em 20px; /* haut et bas à 1.6em , gauche et
droite à 20px */
margin: 10px 3% 1em; /* haut à 10px, gauche et droite à
3% , bas à 1em */
margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px
,bas à 30px, gauche à 5px */
margin: 1em auto; /* marge de 1em en haut et en bas, la
boîte est centrée horizontalement(dte et gche auto) */
margin: auto; /* boîte centrée horizontalement, marge
nulle en haut et en bas */
37
Exemple
<!DOCTYPE HTML >
<html>
<head><meta charset="utf-8" />
<style type="text/css">
body {background-color:lightpink; }
h2{margin: 100px 80px 20px 40px;
background-color:silver;}
</style></head>
<body> <h1> css3 :c’est quoi ? </h1>
<hr>
<h2>CSS veut dire Cascading Style Sheets. </h2>
Ce langage permet de définir le style de formatage de votre page web.
<br/> Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés
depuis le CSS2.1. Il s’agit par exemple d’un ensemble de nouveaux effets à appliquer
sur nos éléments HTML
</body></html>
38
Les marges internes(padding)
Le terme padding désigne les marges internes d’un bloc.

Le padding du bloc (en jaune dans le schéma) détermine
l’espace intérieur utilisable pour afficher des informations.
Les proprietes description

padding-top pour la marge interne supérieure
padding-right pour la marge interne droite
padding-bottom pour la marge interne inférieure
padding-left pour la marge interne gauche
39
Les listes
numérotation disc ou circle ou
image url ou none
l'extérieur du texte inside ou outside
yle
40
Les bordures
 Les propriétés CSS permettant de modifier l'apparence des

bordures : border-width, border-color, border-style…
 La propriété border peut remplacer ces 3 propriétés :

- La largeur : indiquez la largeur de votre bordure. Mettez une
valeur en pixels (comme2px).
- La couleur : la couleur de la bordure. Utilisez, soit un

nom de couleur (black,red,…), soit une valeur hexadécimale
(#FF0000), soit une valeur RGB (rgb(198, 212, 37)).
- Le type de bordure : la bordure peut être un simple trait, ou

des pointillés, ou encore des tirets..
Les différentes valeurs du style disponibles :
• none: pas de bordure (par défaut) ; • dotted: pointillés ;
• solid: un trait simple ; • double: bordure double ;
• dashed: tirets ; • ridge: autre effet relief ;
• groove: en relief ; • outset: effet 3D global

surélevé.
• inset: effet 3D global enfoncé ;
remarques
 On peut modifier la bordure d’un côté (haut , bas,
gauche et droite):
• border-top: bordure du haut ;
• border-bottom: bordure du bas ;
• border-left: bordure de gauche ;
• border-right: bordure de droite;
 Il existe aussi des équivalents pour paramétrer chaque
détail de la bordure :
• border-top-width, border-bottom-width,
border-left-width, border-right-width, :pour
modifier l'épaisseur de la bordure du côté concerné
• border-top-color,… :pour la couleur du haut, etc.
43
Bordures arrondies
- La propriété border-radius permet d'arrondir facilement

les angles de n'importe quel élément.
Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en
pixels.
Exemple : p {
border-radius: 10px;
}
- Arrondissement d'un seul angle d'une boîte :
◦ border-top-left-radius
◦ border-top-right-radius
◦ border-bottom-right-radius
◦ border-bottom-left-radius
44
Remarques :
On peut préciser la forme de l'arrondi pour chaque coin.

Dans ce cas, indiquez quatre valeurs :
border-radius: 10px 50px 30px 5px;
}
Les valeurs correspondent aux angles suivants dans cet
ordre :
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.
45
Remarques :
3 valeurs :border-radius: 15px 50px 30px;

la 1re valeur s'applique au coin supérieur
gauche, la 2ème valeur s'applique aux coins
supérieur droit et inférieur gauche et la 3ème
valeur s'applique au coin inférieur droit).
2 valeurs - border-radius: 15px 50px;

la 1ère valeur s'applique aux coins supérieur
gauche et inférieur droit, et la 2ième valeur
s'applique aux coins supérieur droit et inférieur
gauche).
Une valeur - border-radius: 15px;

la valeur s'applique aux quatre coins, qui sont
arrondis de manière égale. 46
Les ombres
Les ombres des boîtes :
La propriété box-shadow s'applique à tout le bloc et peut
être définie par :
1. le décalage horizontal de l'ombre ;(valeur négative ,l’ombre
sera au-dessus de l’élément)
2. le décalage vertical de l'ombre ;
3. l’étalement du flou de l’ombre, plus la valeur est grande ,
plus l’ombre sera étalé;
4. la couleur de l'ombre.
5. un mot-clé optionnel : inset : Position interne de l’ombre
Exemple
P {box-shadow: 6px 6px 0px red;
}
47
On peut aussi rajouter une cinquième valeur facultative :inset.
Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour
donner un effet enfoncé :
box-shadow: 6px 6px 6px red inset;

}
48

css3 Pour 4 SI

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

css3 Pour 4 SI

Transféré par

Droits d'auteur :

Formats disponibles

Le CSS 3 (Introduction)

Cascading Style Sheets

 ne pas répéter dans chaque page le même code de

Succession de différentes versions :

CSS-1 ou CSS level 1 (1996)

⚫ La partie textuelle d'une balise HTML est appelé

Sélecteur html { propriété : valeur; }

règle h2 { color: red ; text-align: center ;}

h2 {color: red; text-align: center ; }

⚫ Présentation conseillée (avec indentation et

⚫ Comme en HTML, il est possible de mettre des

Il existe trois façons de définir une feuille de style :

 Définition CSS spécifique en ligne

Consiste à intégrer les styles dans le corps du

Elle ne semble intéressante que lorsque le style que

Consiste à mettre le style dans l'entête de la page.

⚫ Se met dans la partie style CSS, par exemple :

Tous les éléments du document (h1, h2, p, div,

La spécification de certaines valeurs en CSS nécessite

Les unités absolues ont un certain rapport entre

 l’unité px: la taille du pixel (px) est dépendante de

Exemple : font-size: 16px;

Une lettre de 16 pixels de hauteur

Exemple : p { font-size: 0.8em; }

 Le pourcentage : une longueur par rapport à la

font-variant définit une variante par rapport à la

font raccourci pour les différentes propriétés de police

Text-shadow ajoute des ombres au texte. Chaque ombre est décrite

width détermine la longueur d'un élément de

background- définit la façon de répéter l'image d'arrière-

background- définit la position verticale initiale de l'arrière-

On peut également combiner plusieurs images de fond en

margin-bottom détermine la valeur de la marge

Le terme padding désigne les marges internes d’un bloc.

Les proprietes description

numérotation disc ou circle ou

image url ou none

l'extérieur du texte inside ou outside

 Les propriétés CSS permettant de modifier l'apparence des

 La propriété border peut remplacer ces 3 propriétés :

- La couleur : la couleur de la bordure. Utilisez, soit un

- Le type de bordure : la bordure peut être un simple trait, ou

• solid: un trait simple ; • double: bordure double ;

• dashed: tirets ; • ridge: autre effet relief ;

• groove: en relief ; • outset: effet 3D global

- La propriété border-radius permet d'arrondir facilement

On peut préciser la forme de l'arrondi pour chaque coin.

3 valeurs :border-radius: 15px 50px 30px;

2 valeurs - border-radius: 15px 50px;

Une valeur - border-radius: 15px;

box-shadow: 6px 6px 6px red inset;

Vous aimerez peut-être aussi