Chapitre 3 CSS3

Chapitre 3 :
Cascading Style Sheets
1
Définition
• CSS : c’est l’abréviation de Cascading Style Sheets
("Feuille de style en cascade").
• C'est dans la feuille de style que l'on va déclarer
toute la mise en forme des pages : la couleur de
fond, les polices de caractère, leurs couleurs, etc.
• HTML pour écrire le contenu de nos pages web.
• CSS pour présenter ce contenu.
• Ces 2 langages sont donc complémentaires.
2
Principe des CSS
Le code CSS peut être écrit :
1. dans les balises concernées ;
2. dans l’en-tête du document (on parle de feuille de

styles interne) ;
3. dans un fichier séparé (on parle de feuille de styles

externe).
3
1. Styles CSS dans les balises
Pour définir des propriétés CSS dans une balise, vous

utiliserez l’attribut style :
<balise style="propriété1: valeur1; propriétéN:
valeurN;">
Exemple:
<h2 style="font-family:Verdana; font-size: 18px;">
Ce titre est en Verdana corps 18
</h2>
4
2. Feuille de styles interne
Il est aussi possible de taper du CSS directement à l’intérieur même du fichier
HTML, entre les balises <head> </head>.
Vous devrez y mettre une balise <style> </style>à l’intérieur, comme ceci :
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Exemple de CSS dans le header</title>
<style>
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
</body>
5
</html>
3. Feuille de styles externe
Pour relier une feuille de styles externe à un fichier
HTML, vous utiliserez la balise <Link> dans l’entête
de ce fichier (ici, la feuille de styles a pour nom
design.css) :
<link rel="stylesheet" href="design.css" />
• La balise <Link> avertit le navigateur qu’il doit

chercher un document situé à l’extérieur de la page
HTML.
• L’attribut rel="stylesheet“ précise que le document en
question est une feuille de style externe.
• L'attribut href indique l’emplacement du fichier CSS à
utiliser. 6
3. Feuille de styles externe
7
Définition d'un style
La définition de base d'un style est simple :
balise { propriété de style: valeur;}
élément pour lequel on

p défini le style
{ délimiteurs de début et
text-align : right; de fin de style
color : black;
propriété
}
valeur pour
cette propriété
Exemples CSS
Exemple 1
On veut modifier tous les paragraphes pour qu'ils soient

écrits en bleu, avec une taille de 18 pixels.
Puisque tous les textes des différents paragraphes sont
entre les balises <p> </p>, le code CSS est doncsuivant :
p {color: blue; font-size: 18px; }
Exemple 2
h3 { font-family: Arial; font-style: italic }
Ici, la balise h3 sera en Arial et en italique. Et dans le
document, toutes les balises <h3> auront comme style
Arial et italique.
9
Appliquer un style à plusieurs balises
h1 {
color:red; h1, h2 {
} color:red;
h2 { }
color:red;
}
10
Des commentaires dans du CSS
Pour faire un commentaire, vous tapez /*, suivi de
votre commentaire, puis */ pour terminer votre
commentaire.
p{
color:blue; /* Les paragraphes seront bleus*/
font-size:18px; /* La taille de 18 pixels me semble
pas mal*/
}
11
Utiliser les classes
Les class vous permettent de définir un style personnalisé.
Exemple:
Supposons que vous vouliez définir un style appelé"important" pour
écrire le texte en rouge / 18 pixels.
Vous rajouterez l'attribut class="important"à chacune des balises que
vous voulez modifier.
<h1 class=" "> </h1> titre
<p class=" "></p> paragraphe

<img class=" " /> image
12
Utiliser les classes
<!doctype html>
<meta charset="utf-8" />
<head>
<title>Page d'exemple pour tester le CSS</title>
<metahttp-equiv="Content-Type" content="text/html"; charset=iso-8859-1" />
<link rel="stylesheet"type="text/css" href="essai.css" />
</head>
<body>
<p class="important"> Bonjour tout le monde </p>
</body>
</html>
Fichier CSS :
.important
{ color:red;
font-size:18px; } 13
L'attribut id
Il fonctionne exactement de la même manière que class, à un

détail prêt :
il ne peut être utilisé qu’une fois.
En pratique, nous ne mettrons des "id"que sur des éléments qui
sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png"id="logo" /> Dans le CSS, ce n'est
pas un point que vous devez mettre avant le nom de l'id, mais
un dièse (#) :
#logo {
/* Mettez les propriétés CSS ici */
}
14
Les balises universelles
Appliquer une class (ou un id) à certains mots qui ne sont pas
entourés par des balises.
Exemple: modifier uniquement “grand père” dans le
paragraphe suivant :
<p>Comme l’a dit grand père un certain 20 juillet 1969...</p>
<span> </span> : c'est une balise de type inline, c'est une

balise qui se met à l'intérieur d'un paragraphe, comme
<strong>, <em>, <q>.
<div> </div> : c'est une balise de type block. Comme <p>,
<h1> etc... Elle crée un nouveau "bloc" dans la page, et
provoque donc obligatoirement un retour à la ligne.
block
inline
15
Exemple
Code HTML:
<p>Comme l'a dit <span class="nom">Neil

Armstrong</span>un certain
20 juillet 1969...</p>
Code CSS :
.nom {
color:blue;
}
Donc pour définir un style applicable seulement à une

partie de la page et non plus à une balise <HTML>
précise, vous pouvez placer un attribut style dans une
balise <DIV> (division) ou <SPAN> ( fusion).
Ces balises définissent une zone de texte donnée, donc
16
tout ce qui se trouve entre la balise de début et la balise
Imbrications de balises
• div, p:
Sélectionne tous les éléments <div> et tous les éléments <p>.
• div p
Sélectionne tous les éléments <p> dans les éléments <div>.
• div> p
Sélectionne tous les éléments <p> dont le parent est un
élément <div>.
• div + p
Sélectionne tous les éléments <p> placés immédiatement
après les éléments <div>.
• div ~ p
Sélectionne tous les éléments <p> précédés d'un élément
17
<div>
Taille du texte
En pixels : c'est une façon très précise d'indiquer la taille du texte.
p
{
font-size:14px; /* Paragraphes de 14 pixels */ }
h1
{
font-size:22px; /* Titres de 22 pixels */ }
En pourcentage :
Si vous indiquez "100%", le texte aura une taille

"normale".
Si vous mettez "130%", le texte aura une taille 18
Taille du texte
En donnant une valeur En em : c’est une autre façon d’indiquer
relative : de manière relative la taille du texte.
On doit indiquer la taille du texte par
xx-small :minuscule rapport à la taille normale de la police.
x-small :très petit "1em" signifie "Taille normale".
small :petit .petit_em {
medium :moyen font-size:0.7em;
large :grand }
.grand_em {
x-large :très grand
font-size:1.3em;
xx-large : plus grand que le
}
x-large
19
Polices
La propriété CSS qui permet d'indiquer la police est :
font-family
Vous devez indiquer le nom de la police comme ceci :
font-family:police;
Pour éviter qu'il n'y ait de problème si l'internaute n'a
pas la même police que vous, on met en général
plusieurs noms de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1.
S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a
pas, il essaiera la police3 et ainsi de suite.
20
Polices
Voici une liste de polices qui fonctionnent bien sur la plupart
des navigateurs :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
21
Exemple
h1 {
font-family:"Arial Black", Arial, Verdana, serif;/* On
essaie d'avoir Arial Black en priorité */
}
p{
font-family:"Comic Sans MS", "Trebuchet MS",
Georgia, serif;
}
22
Alignement simple
On utilise la propriété text-align, et on indique
l’alignement désiré :
left :le texte sera aligné à gauche (c'est le réglage par
défaut).
center: le texte sera centré.
right: le texte sera aligné à droite.
justify: le texte sera "justifié".
Exemple :
.signature
{
text-align:right;/* Pour aligner à droite ma signature */
font-family: "Comic Sans MS", Georgia, "Times New
Roman", serif; font-size: 80%; 23
}
L'indentation: la mise en retrait du texte
Cela permet par exemple de faire commencer un

paragraphe un peu plus à droite.
On utilise la propriété text-indent
On doit indiquer quelle est la taille du retrait : on peut
le faire en pixels, en centimètres, en millimètres...
p{
text-indent: 30px; /* Les paragraphes commenceront 30
pixels sur la droite */ text-align: justify; /* Ils seront
justifiés */ font-size: large;
}
24
Effets de style
Mettre en italique :
h2 {
font-style: italic;/* Les titres h2 seront en
italique ! */
}
Mettre en gras :
p{
font-weight: bold;
}
25
Les majuscules en CSS
La propriété text-transform. Elle peut prendre ces

valeurs :
uppercase :tout le texte sera écrit en majuscules.

lowercase :tout le texte sera en minuscules.
capitalize :la première lettre de chaque mot sera en
majuscules.
none :pas de transformation (par défaut).
h1
{
text-align:center; font-family:Arial, "Times New Roman",
Verdana, serif; text-transform: capitalize; /* Les premières
lettres des mots du titre seront en majuscules */ 26
La décoration
La propriété text-decoration
underline :souligné.
line-through :barré.
overline :ligne au-dessus.
none :normal (par défaut).
27
La décoration
h1 {
<h1>A ne pas
text-align: center; <p>La!</h1>
manquer propriété CSS <em>text-decoration</em>
font-family:"Arial Black", permet de décorer un peu son texte :<br /> <span
Arial,
"Times New Roman", serif; class="souligne">en le soulignant</span>...<br />
text-decoration: blink; <span class="barre">en le barrant</span>...<br
} /> ...ou encore <span class="ligne_dessus">en
.souligne mettant une ligne au-dessus</span>.</p>
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus {
text-decoration: overline;
} 28
Les couleurs
La propriété qui permet de changer la

couleur du texte est color.
16 couleurs que vous pouvez utiliser en
tapant simplement leur nom :
29
Exemple
h1 {
text-align:center; font-family:Arial, "Arial
Black", "Times New Roman", serif; text-
decoration: underline; color: green;/* Le
titre en vert */
}
p{
text-indent: 20px; color: blue;/* Les
paragraphes en bleu */
}
strong /* ... et les mots importants en
rouge clignotant ! */ {
color: red; text-decoration: blink;
}
30
La notation hexadécimale
• Un nom de couleur en hexadécimal, c’est une combinaison
de lettres et de chiffres qui indiquent une couleur.
• On doit toujours commencer par écrire un dièse (#), suivi de

6 lettres ou chiffres allant de 0 à 9 et de A à F.
• Ces lettres ou chiffres fonctionnent deux par deux. Les 2

premiers indiquent une quantité de rouge, les 2 suivants une
quantité de vert, et les 2 derniers une quantité de bleu.
• En mélangeant ces quantités (qui sont les composantes

Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur
qu’on veut.
31
La notation hexadécimale
32
La méthode RGB (Red-Green-Blue)
• On doit définir une quantité de rouge, de vert et de bleu

pour choisir une couleur.
• Utiliser la palette des couleurs.
•Dans la zone qui apparaît à droite, faites bouger les curseurs
pour sélectionner la couleur qui vous intéresse.
On relève les quantités de Rouge-Vert-
Bleu correspondantes indiquées
en bas à droite de la fenêtre (ici243-65-
243). Je recopie ces valeurs
dans cet ordre dans le fichier CSS,
comme ceci :
h1 {
text-align:center;
color:rgb(243,65,243); } 33
Le fond
• Le fond ne désigne pas forcément le fond de toute une
page web.
• On peut aussi appliquer un fond uniquement aux titres, ou
aux paragraphes, ou encore à certains mots d’un paragraphe.
• Il existe 2 types de fonds :
• Les fonds comportant une couleur.
• Les fonds comportant des dégradés de couleurs.
• Les fonds comportant une image de fond.
34
1. La couleur de fond
• Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color.Vous pouvez taper le nom d'une couleur,
l'écrire en notation hexadécimale ou encore utiliser la méthode
RGB.
• Pour indiquer la couleur de fond de la page web, il faut travailler
sur la balise <body> qui correspond à toute la page web.
body {
background-color : black;
color:white;
}
• Si on applique une couleur de fond noire et une couleur

de texte blanche à la balise <body>, tous les titres 35et
paragraphes auront eux aussi une couleur de fond noire et un
1. La couleur de fond
Exemple
body {
background-color: black; color: white; /* Toutes les
balises contenues dans body verront leur texte coloré
en blanc... */
}
h1 {
color: red; /* ... sauf si je demande expressément de
changer la couleur par la suite */
}
.surligne /* Un style qui permet par exemple de
surligner certains mots d'un texte */ {
background-color:yellow;
color: black; /* Le texte surligné sera écrit en noir*/
}
36
2. Les dégradés
La propriété linear-gradiant
crée un dégradé de haut en bas (ou vice-versa) ou en diagonale
Exemple:
GRADIENT VERTICAL GRADIENT HORIZONTAL GRADIENT DIAGONAL
background: linear- background: linear- background: linear-

gradient(top, red, yellow); gradient(left, red, yellow); gradient(top left, red, yellow);
37
2. Les dégradés
La propriété radial-gradiant
un dégradé radial commence à partir d'un point central et rayonne
la couleur vers les bords d'un conteneur
Exemple:
background: gradient(radial, 50% 0%, 20, 50% 100%, 40, from(red), to(yellow));
38
3. L'image de fond
• La propriété permettant d'indiquer une image de fond
est background-image
• Comme valeur, on doit lui mettre
url("nom_image.extension")
• L'adresse indiquant où se trouve l'image de fond peut
être en absolu (http://...) ou en relatif (fond.png).
• Si on veut appliquer une image de fond à toute la page,
on doit utiliser la balise <body>
body {
background-image:url("../images/neige.png");
}
39
3. L'image de fond - Répétition
• background-repeat
l’image de fond doit-elle être répétée ?
• repeat
• no-repeat
• repeat-x
• repeat-y
no-repeat
repeat-x
repeat-y
repeat
3. L'image de fond - Positionnement
background-attachment: background-attachment:
fixed; scroll;
(valeur par défaut)
Effets sur les liens
a{
text-decoration: none;/* Les liens ne seront plus
soulignés */ color:red;/* Les liens seront en rouge au
lieu de bleu */
font-style:italic;/* Les liens seront en italique */
}
42
Les pseudo-formats
Au passage de la souris :
a:hover {
}
"a:hover" signifie : "Quand la souris est sur le lien" (quand
on pointe dessus).
a{
text-decoration: none; /* Les liens ne seront plus soulignés
*/
color: red;/* Les liens seront en rouge au lieu de bleu */
font-style:italic;/* Les liens seront en italique */
}
a:hover /* Quand le visiteur pointe sur le lien */ {
text-decoration: underline; /* Le lien deviendra souligné
quand on pointera dessus */ color: green;/* Le lien sera
écrit en vert quand on pointera dessus */ 43
}
Les pseudo-formats
p:hover /* Quand on pointe sur un paragraphe */ {

background-color: #CFE1EB; /* Le fond du
paragraphe change de couleur */ text-indent:
20px;
}
44
Au moment du clic
• Le pseudo-format :active permet d’appliquer un style

particulier au moment du clic.
• Le lien gardera cette apparence très peu de temps : juste
pendant que vous cliquez avec le bouton de la souris.
a:active /* Quand le visiteur clique sur le lien */ {

background-color: #FFCC66; }
a:hover /* Quand le visiteur pointe sur le lien */ {
text-decoration:underline; color:green; }
a /* Lien normal */ {
text-decoration:none; color:red; font-style:italic; }
45
Première lettre et première ligne
En CSS, il est possible de modifier automatiquement

l’apparence de la première lettre et de la première
ligne du texte contenu dans une balise.
La première lettre
p:first-letter /* La première lettre de chaque
paragraphe */ {
font-weight:bold;/* En gras */ font-size:1.2em;/* Ecrit
légèrement plus gros que la normale */ color:blue;/*
En bleu */
}
p{
text-indent:20px;
46
}
Première lettre et première ligne
La première ligne
p:first-line /* La première ligne de chaque

paragraphe */ {
font-variant: small-caps; /* En petites capitales */
}
p{
text-indent: 20px;
}
47
Retrait des listes
La propriété list-style-position permet d'indiquer si on
veut que la liste soit mise en retrait ou non.
list-style-position peut prendre 2 valeurs :
inside : la liste n'est pas mise en retrait.
outside : la liste est mise en retrait (par défaut).
48
Exemple
.pas_de_retrait {
list-style-position:inside;
}
.retrait {
list-style-position:
outside;
}
49
Représentation de la puce
La propriété list-style-type vous permet de changer

l’apparence de la puce.
Pour les listes non ordonnées (<ul>):
disc : un disque noir (par défaut).
circle : un cercle.
square : un carré.
none :aucune puce ne sera utilisée.
50
Représentation de la puce
Pour les listes ordonnées (<ol>) :

decimal :des nombres 1, 2, 3, 4, 5... (par défaut)
decimal-leading-zero :des nombres commençant par zéro (01, 02, 03,
04, 05...). Ne fonctionne pas sur Internet Explorer
upper-roman :numérotation romaine, en majuscules (I, II, III, IV, V...)
lower-roman :numérotation romaine, en minuscules (i, ii, iii, iv, v...)
upper-alpha :numérotation alphabétique, en majuscules (A, B, C, D,
E...)
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
lower-greek :numérotation grecque. Ne fonctionne pas sur Internet
Explorer
51
Changer l’image de la puce
La propriété list-style-image vous permet d'utiliser

n'importe quelle image à la place d’une puce.
ul {
list-style-image: url (image.png);
}
52
Dimensionnement et positionnement
Tout élément CSS se comporte comme une imbrication successive

de 4 boîtes :
• La boîte externe est l’aire de marges. Elle occupe l’espace
transparent entre le bord de l’écran (ou d’un autre élément) et
l’élément actif.
• À l’intérieur de l’aire de marges se trouve l’aire de bordures.
Gérée par la propriété border, elle représente les bordures
affectées à l’élément actif.
• Ensuite, l’aire d’espacement : la surface entre le contenu et la
limite intérieure de la bordure. Elle est gérée par la propriété
padding.
• Enfin, la boîte la plus intérieure est la boîte de contenu. Elle
renferme le contenu de l’élément actif. 53
54
1. Les marges
propriété
margin Bordure ……
prenons l’exemple de cette

Bordure…… boite. Elle contient du texte, Bordure ……
..............................................
Bordure ……
1. Les marges
Régler la taille de la marge
• margin-top
• margin-bottom
• margin-left
• margin-right
margin : auto
permet normalement de régler les marges au mieux pour
centrer l’élément.
2. Les bordures
propriété
border

boite. Elle contient du texte,
..............................................
Elle possède une bordure rouge, mais qui
aurait aussi bien pu être de n’importe quelle
couleur, en pointillé ou invisible
2. Les bordures- Propriétés
border-width
thin, medium, thick
taille spécifiée
border-style
None, hidden,
dotted, dashed, solid, double,
groove, ridge, inset, outset
border-color
gère la couleur de la bordure
border: border-width border-style border-color

2. Les bordures- Propriétés
on peut aussi régler individuellement les différentes
bordures
border-top-width
border-bottom-width
border-left-width
border-right-width
3. L’espacement
propriété
padding Et cette bordure peut être plus
ou moins rapprochée du
contenu

boite. Elle contient du texte,
Régler la taille du padding

•padding-top
•padding-bottom
•padding-left
•padding-right
3. L’espacement
Régler la taille de l’espacement
• padding-top
• padding-bottom
• padding-left
• padding-right
Les modes de positionnement
• Flux : ordre d’affichage des éléments

• Un bloc peut être positionné de façon normale, relative,
absolue, fixe ou flottante.
• Position normale : Lorsque sa position n’est pas précisée, un

bloc se place dans le flux normal de la page web.
• Position relative, absolue ou fixe : Il est possible de placer un

élément en indiquant un décalage (en haut, en bas, à gauche, à
droite)
• par rapport à sa position dans le flux normal : c’est la
«position relative» (propriété position: relative;) ;
• par rapport au bloc conteneur : c’est la «position absolue»
(propriété position: absolute;) ;
• par rapport à l’écran : c’est la « position fixe » (propriété
position: fixed;).
62
Dans chacun de ces trois cas, il faut indiquer un ou deux

décalage(s) :
• un décalage à partir du haut (par exemple : top:
2px;) ou du bas (par exemple : bottom: 10%;) ;
• un décalage à partir de la gauche (par exemple : left:
5em;) ou de la droite (par exemple : right: 10ex;).
• Position flottante : Un élément peut être déclaré « flottant » à

gauche ou à droite, avec la propriété float qui s’écrit
respectivement : float: left; ou float: right;
Le bloc est placé le plus à gauche ou le plus à droite possible, tout

en gardant sa position verticale dans la boîte de son conteneur.
63
Positionnement relatif
1) l'élément prend sa place dans le flux courant
2) on le décale avec les propriétés top, right, bottom, left
Remarques : permet des superpositions – attention ! l'élément
reste dépendant des éléments frères.
#premier { #second {
margin-left: 3em; position: relative;
width:100px; left: 20px;
background: orange; bottom: 35px;
} margin-left: 3em;
width: 150px;
div { height: 50px;
width: 300px; background: green;
height: 200px; } 20px
background: yellow;
} 35px
64
Positionnement absolu
L'élément sort du flux, il se place par rapport au premier
ancêtre positionné (en relatif, absolu ou fixe)
div { #second {
position: relative; position: absolute;
width: 300px; top: 0;
height: 200px; right: 0;
background: yellow; width: 150px;
} height: 50px;
margin:0;
#premier { background: green;
margin:0; }
width:100px;
background: orange;
}
65
Positionnement fixe
Cas particulier du positionnement absolu : l'élément ne se
déplace pas lors du défilement (pas pris en charge par I.E. 6)
La profondeur
Par défaut, en cas de superposition, le dernier élément positionné
s'affiche par-dessus les autres avec z-index => c'est celui qui a le plus
grand z-index s'affiche par-dessus les autres
#premier{ #second{
position: absolute; position: absolute;
top: 0; top: 40px;
left: 0; left: 50px;
z-index:10; z-index:0;
width: 100px; width: 150px;
background: #ccc; background: green;
} }
66
Positionnement flottant
L'élément sort du flux normal pour prendre place à droite ou à
gauche du bloc qui le contient. L'élément suivant occupe l'espace libre en
épousant sa forme.
div { #premier {
width:300px; float: right;
height: width: 100px;
200px; background: orange;
} 1
background: 2
yellow;
} #second {
background: green;
}
67
La propriété display
• Display indique le comportement que doit

adopter l’élément
– none
– inline
– block
– list-item
– ...
• none indique qu’il ne faut pas réserver de la
place pour cet élément
La propriété visibility
• visibility peut prendre deux valeurs :

– visible
– hidden
• un élement hidden devient invisible, mais

la place qu’il occupe à l’écran est tout de
même réservée.
propriété visibility : visible
bla bla bla bla bla bla bla bla bla bla bla
bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla
bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla
propriété visibility : hidden
Mise en page
• Outre les bloc div, HTML5 propose d’autres blocs :

‣ header
‣ footer
‣ article
‣ nav
‣ section
‣ figure
• Par défaut un bloc prend toute la largeur possible
72
Mise en page
Exemple 1 :
<header>...texte de l'en-tête...</header>
<article>
<aside>
<nav> <a href="lien1.php">lien1</a>
<a href="lien2.php">lien2</a>
</nav>
</aside>
....contenu du corps de page...
</article>
<footer>...contenu du pied de page...</footer> 73
Mise en page
body header { article aside {
width:600px; width:200px;
height:50px; height:400px;
background-color:hotpink; background-
} color:lightgreen;
float: left;
body article { }
width:600px;
height:400px; article aside nav a {
background- display: block;
color:aquamarine; }
}
article aside nav a:hover {
body footer { background-color: white;
width:600px; }
height:50px;
background-color:yellow;
} 74
Mise en page
Exemple 2 :
<header id="bandeau"> <h1>Un site web</h1>
<h2>Artiste du Web (!)</h2> </header>
<div id="content">
<div id="centre">
<p>Envie d'un site qui change?…</p>
<figure id="gallery"> <img src="slide5.jpg" />
<figcaption>Un travail de jeunesse</figcaption> </figure>
<section id="agenda">
<header><h3>Agenda</h3></header>
<article>
<header>
<time datetime="2012-02-03T10:30">
3 Février 2012 à 10:30.</time>
</header>
<p>Le jour J, l'heure H. Ou le début
du modal web…</p> 75
</article>
Mise en page
(…)
</section>
</div>
<nav id="menu">
<h3>Menu</h3>
<ul>
<li><a href="#home">Home</a></li>
(…)
</ul>
</nav>
</div>
<footer>
© Le site–
<a href="mailto:site@dom.com">site@dom.com</a>
</footer>
76
Mise en page
#bandeau { #gallery {
width: 1024px; display: inline-block;
margin: 15px auto; width: 370px;
height: 200px; vertical-align: top;
} }
#content { #agenda {
width: 1024px; display: inline-block;
margin: 0 auto; width: 420px;
} vertical-align: top;
#centre { }
width: 900px; #menu {
display: inline-block; margin: 0;
margin: 0; padding: 0;
padding: 0; display: inline-block;
} width: 100px;
#gallery img { vertical-align: top;
width: 300px; text-align: right;
77
} }
Tableaux
Toute la mise en forme du tableau et de ses cellules est à

déclarer par le biais des CSS.
Le tableau dans HTML :
<table>
<caption>Tableau de données</caption>
<tr> <th>Titre colonne 1</th>
<th>Titre colonne 2</th>
</tr>
<tr> <td>cellule A1</td>
<td>cellule B1</td>
</tr>
<tr> <td>cellule A2</td> <td>cellule B2</td>
</tr>
78
</table>
Tableaux
• Les options d'un cadre de tableau en trait continu (solid), noir

(#000000) et d'épaisseur moyenne (medium) ;
• et des bordures de cellules en traits continus (solid) fins (thin) et
bleus ciel (#6495ed).
• Le code CSS, à indiquer dans une feuille de style externe ou dans
l'en-tête de la page entre des balises <style type="text/css"></style>,
sera celui-ci :
Le code CSS n°1 : Le résultat obtenu :
table {
border: medium solid #000000; width:
50%; }
td, th { 79
border: thin solid #6495ed; width: 50%; }

Tableaux
Le code CSS n°2 : td {

font-family: sans-serif;
table { border: thin solid #6495ed;
border: medium solid #6495ed; width: 50%;
border-collapse: collapse; padding: 5px;
width: 50%; } text-align: center;
th { background-color: #ffffff; }
font-family: monospace; caption {
border: thin solid #6495ed; font-family: sans-serif; }
width: 50%;
padding: 5px; Le résultat obtenu :
background-color: #D0E3FA;
background-image: url(sky.jpg); }
80
Tableaux
• On utilise pour fusionner ou non deux bordures adjacentes la
propriété border-collapse.
• Cette propriété peut prendre les valeurs suivantes :
• collapse : "Colle" les deux bordures en une
• separate : Affiche les deux bordures distinctement.
• On utilise pour modifier l'espacement entre les cellules et les
bordures la propriété border-spacing.
• Pour afficher ou non les bordures des cellules ne contenant
aucun contenu visible on utilise la propriété empty-cells. Elle
peut prendre deux valeurs :
• show : Les bordures sont affichées.
• hide : Les bordures ne sont pas affichées. (ou boder:0)
Exemple :
table{
81
empty-cells:show;}
Tableaux
• On utilise la propriété caption-side pour modifier la position

de la légende du tableau. Elle peut prendre plusieurs valeurs :
top : La légende est affichée en haut
bottom : La légende est affichée en bas
left : La légende est affichée à gauche
right : La légende est affichée à droite
Exemple :
table{
caption-side:top;
}
82
La propriété border-radius
• Crée des coins arrondis autour des éléments

de disposition, tels que les titres, les pieds de
page, les encadrés, les boîtes graphiques et les
contours autour des images
• border-radius définit une longueur qui
est généralement exprimée en pixels ou ems,
mais qui peut également être un pourcentage
border-radius (exemple)
border-radius (propriété, pour un seul angle)
• Arrondi d'un seul angle d'une boîte :
– border-top-left-radius
– border-top-right-radius
– border-bottom-right-radius
– border-bottom-left-radius
La propriété box-shadow
• Crée des ombres portées autour des éléments

de disposition
• Syntaxe CSS pour créer une ombre :
box-shadow: h-shadow v-shadow blur
spread color inset;
• Requis : Les attributs h-shadow et
v-shadow définissent la position horizontale
et verticale de l'ombre par rapport à la boîte
• Facultatif : blur, spread, color et inset
box-shadow Exemple
Opacité et transparence
• Un élément opaque ne laisse pas passer
la lumière, tandis que vous pouvez voir
à travers un élément transparent.
• Syntaxe permettant d'appliquer une transparence à
une image ou à un autre élément :
opacity: valeur
• Valeur à virgule flottante comprise entre 0,0 (100 %
transparent) et 1,0 (100 % opaque)
• Exemple :
Original Avec transparence

Photo : © AVTG/iStockphoto
Formulaires
<form>
<label>Nom complet :</label>
<input type="text" id="nom" name="nom" required>
<label>Adresse e-mail :</label>

<input type="email" id="email_addr" name="email_addr"
required>
<label>Confirmez l'adresse e-mail :</label>

<input type="email" id="email_addr2" name="email_addr2"
required>
<label>Date d'arrivée :</label>

<input type="date" id="arrival_dt" name="arrival_dt" required>
<label>Nombre de nuitées (99 Dt par nuit) :</label>

<input type="number" id="nights" name="nights" value="1"
89
min="1" max="30" required>
Formulaires
<label>Nombre d'invités (10 Dt par invité supplémentaire) :</label>
<input type="number" id="guests" name="guests" value="1"
min="1" max="4" required>
<br>
<label>Code de promotion :</label>

<input type="text" id="promo" name="promo">
<input type="submit" value="Effectuer la réservation" />

</form>
90
Formulaires
body{
font-family: 'Open Sans',sans-serif; font-weight: 400;
font-size: 13px; }
:invalid {
background-color: #F0DDDD;
border-color: #e88;
box-shadow:0 0 5px rgba(255, 0, 0, .8); }
:required {
border-color: #88a;
box-shadow: 0 0 5px rgba(0, 0, 255, .5); }
form {
width:300px;
margin: 20px auto;
border-color: #99a; }
91
Formulaires
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, .2); }
92
Formulaires
input[type=submit] {
background:none;
padding:10px;
cursor: pointer;
}
label{
cursor: pointer;
}
93
CSS3 avancées
(Média Query, responsive)
W3Schools.com
Page 94
TRANSFORMATION 2D
Méthodes ; translate(), rotate(), scale(), skewX(), skewY(), matrix()
Page 95
ANIMATIONS
Les animations CSS permettent d’animer la plupart des éléments HTML sans
utiliser JavaScript ou Flash!
Une animation permet à un élément de changer progressivement de style.
Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant
de fois que vous le souhaitez.
Pour utiliser l'animation CSS, vous devez d'abord spécifier des images clés
(@keyframes) pour l'animation.
Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l'animation
passera progressivement du style actuel au nouveau style à certains moments.
Pour qu'une animation fonctionne, vous devez la lier à un élément.
Lorsqu'une animation est terminée, elle reprend son style d'origine.
Page 96
MEDIA QUERY
Introduction
Les média queries, apparus avec CSS3,
permettent de cibler différentes
caractéristiques des terminaux et
d'adapter la restitution de la page HTML
en fonction de l’écran.
– C’est ce que l’on nomme le « Responsive
Design ». Les caractéristiques pouvant être :
• Le type de média,
• La taille de l’écran, de la fenêtre,
• L’orientation,
Page 97
MEDIA QUERY
Les média queries ne sont pas des

propriétés mais des règles que l’on
applique à certaines conditions, telle que
« Si la résolution de l'écran du visiteur est
inférieure à tant, alors appliquer les
propriétés CSS https://mediaqueri.es/
suivantes ».
Un media query est une expression dont la
valeur est toujours vraie ou fausse.
Page 98
MEDIA QUERY
Appliquer une règle

–Il y a deux manières d’utiliser les media queries :
• En chargeant une feuille de style CSS différente en

<link rel="stylesheet" type="text/css" href="css/mesStyles.css" />

<link rel="stylesheet" media="screen and (max-width: 1280px)"
href="css/petiteResolution.css" />
<!DOCTYPE html>
@media screen and (max- <html>
width:•1280px)
En écrivant la règle<head> directement dans le fichier
<title>MediaQuery</title>
{
CSS habituel <link rel="stylesheet" type="text/css“
/*Le
Rédigez
fichiervos
csspropriétés
mesStyles.css href="css/mesStyles.css" />
CSS */ </head> La page HTML
} <body>…/…</body> </html>
Page 99
MEDIA QUERY
media Type d’écran de sortie, les valeurs possibles :

Les règles •screen : écran « classique »
•handheld : périphérique mobile
disponibles •print : impression

•tv : télévision
–Les règles peuvent être

•projection : projecteur
•all : tous les types d'écran
préfixées avec min- ou

orientation Orientation du périphérique Portrait/Paysage
device-height Hauteur du périphérique
device-width Largeur du périphérique
max-. Ainsi, min-width height
width
Hauteur de la fenêtre de la zone d’affichage
Largeur de la fenêtre de la zone d’affichage
et max-height signifient color Gestion de la couleur (en bits/pixel)
respectivement largeur
@media all and (orientation: portrait) Sur tous types d'écrans orientés
portrait
@media all and (min-width: 1024px) and Sur tous types d'écran, quand la
minimale et hauteur
(max-width: 1280px) largeur de la fenêtre est comprise
entre 1024px et 1280px
maximale.
@media tv Sur les téléviseurs
@media (min-width: 700px), handheld and si l’écran a au minimum une largeur de
(orientation: landscape) 700 pixels ou si un périphérique mobile
et en mode paysage
–Les mots clés suivants :

and, not, only vont Page 100
MEDIA QUERY : Exemples
Contrôle sur la largeur de la fenêtre

width
Uniquement si la taille
de la fenêtre du
navigateur passe en
body { dessous des 800
pixels de large
background-color:white;
color:blue; En dessous de 800px
}
@media only screen and (max-
width:800px) {
body {
background-color:green;
color:black Autres
}
}
Page 101
Contrôle sur la largeur de l’écran

device-width
–Pour s’adapter aux smartphones, il est préférable
de cibler la largeur de l’écran et non de la fenêtre
Uniquement si la
taille du device passe
body { en dessous des 480
pixels de large
background-color:white;
color:blue; Avec cet exemple, un
} Android (dont la
@media only screen and (max- résolution est le
device-width:480px) { 480*800px) aura un
body { fond vert en orientation
background-color:green; portrait et blanc en
color:black orientation paysage.
}
}
Page 102
Contrôle sur la largeur de l’écran et la taille des caractères

– Souvent les caractères peuvent être trop petits pour les smartphones, sans
zoomer cela peut être illisible.
– Une solution possible est coupler la déclaration sur la taille du viewport dans les
meta de l'en-tête de la page HTML avec la redéfinition de la taille des caractères
dans le CSS.
<html>
<head><meta name="viewport" content="width=device-width" />…
– Le méta tag viewport dicte au navigateur quel comportement il doit adopter
pour afficher une page ; on spécifie la largeur qu'adoptera le viewport
body { Peut ne pas être pris en

font-size:100%; compte car certains
mobiles sont
} considérés comme
@media only screen and (max-device-width:980px) { « screen »
body {
font-size:120%;
}
}
Page 103
Les media queries se rencontrent souvent

pour l’amélioration des affichages pour les
mobiles et les règles vont permettre d’agir,
comme on vient de la voir sur la taille des
caractères mais aussi :
–agrandir la taille des contrôles et zones
cliquables (pour une utilisation au doigt),
–ajuster les dimensions et les marges,
–faire passer le contenu sur une seule colonne,
–masquer ou afficher des éléments spécifiques.
Page 104

Chapitre 3 CSS3

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

Chapitre 3 CSS3

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 3 :

Cascading Style Sheets

Le code CSS peut être écrit :

1. dans les balises concernées ;

2. dans l’en-tête du document (on parle de feuille de

3. dans un fichier séparé (on parle de feuille de styles

Pour définir des propriétés CSS dans une balise, vous

<link rel="stylesheet" href="design.css" />

• La balise <Link> avertit le navigateur qu’il doit

élément pour lequel on

On veut modifier tous les paragraphes pour qu'ils soient

<h1 class=" "> </h1> titre

<p class=" "></p> paragraphe

Il fonctionne exactement de la même manière que class, à un

<span> </span> : c'est une balise de type inline, c'est une

<p>Comme l'a dit <span class="nom">Neil

Donc pour définir un style applicable seulement à une

Si vous indiquez "100%", le texte aura une taille

Cela permet par exemple de faire commencer un

La propriété text-transform. Elle peut prendre ces

uppercase :tout le texte sera écrit en majuscules.

La propriété qui permet de changer la

• On doit toujours commencer par écrire un dièse (#), suivi de

• Ces lettres ou chiffres fonctionnent deux par deux. Les 2

• En mélangeant ces quantités (qui sont les composantes

• On doit définir une quantité de rouge, de vert et de bleu

• Si on applique une couleur de fond noire et une couleur

GRADIENT VERTICAL GRADIENT HORIZONTAL GRADIENT DIAGONAL

background: linear- background: linear- background: linear-

p:hover /* Quand on pointe sur un paragraphe */ {

• Le pseudo-format :active permet d’appliquer un style

a:active /* Quand le visiteur clique sur le lien */ {

En CSS, il est possible de modifier automatiquement

p:first-line /* La première ligne de chaque

La propriété list-style-type vous permet de changer

Pour les listes ordonnées (<ol>) :

La propriété list-style-image vous permet d'utiliser

Tout élément CSS se comporte comme une imbrication successive

prenons l’exemple de cette

prenons l’exemple de cette

border: border-width border-style border-color

prenons l’exemple de cette

Régler la taille du padding

• Flux : ordre d’affichage des éléments

• Position normale : Lorsque sa position n’est pas précisée, un

• Position relative, absolue ou fixe : Il est possible de placer un

Dans chacun de ces trois cas, il faut indiquer un ou deux

• Position flottante : Un élément peut être déclaré « flottant » à

Le bloc est placé le plus à gauche ou le plus à droite possible, tout

• Display indique le comportement que doit

• visibility peut prendre deux valeurs :

• un élement hidden devient invisible, mais

• Outre les bloc div, HTML5 propose d’autres blocs :

Toute la mise en forme du tableau et de ses cellules est à

• Les options d'un cadre de tableau en trait continu (solid), noir

border: thin solid #6495ed; width: 50%; }

Le code CSS n°2 : td {

• On utilise la propriété caption-side pour modifier la position

• Crée des coins arrondis autour des éléments

• Crée des ombres portées autour des éléments

Original Avec transparence

<label>Adresse e-mail :</label>

<label>Confirmez l'adresse e-mail :</label>