Programmation web1partie3

Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Chapitre IV: Les feuilles de style CSS
IV.1 Introduction
Le CSS (Cascading Style Sheets) est utilisé pour la mise en forme des pages web. Il consiste à
regrouper dans un même document des caractéristiques de mise en forme associées à des
groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de
caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi
possible de créer un groupe de titres en police Arial, de couleur verte et en italique.
Le but de CSS est de séparer les données de la mise en forme. Il permet d'obtenir une
présentation homogène sur tout un site en faisant appel sur toutes les pages à une même
définition de style.
Les spécifications des feuilles de style deviennent une recommandation du consortium W3C
en décembre 1996 sous l'appellation CSS1 pour Cascading Style Sheets, level 1. Ce même
niveau 1 a été révisé en janvier 1999.
Entre-temps, ces spécifications ont été élargies sous la forme du CSS2 pour Cascading Style
Sheets, level 2 en mai 1998. Elles précisent entre autres :
•
•
•

des styles différents pour les médias différents (écran, impression, synthétiseur de
parole, braille...) ;
les polices de caractères téléchargeables ;
le positionnement des éléments HTML (appelé par ailleurs CSS-P).

La dernière version de CSS est CSS3 qui est en cours de développement depuis 2010.

IV.2 Niveaux d’insertion de CSS
Le code CSS peut être placé à 4 endroits différents dans la page.
• Interne : Dans la page HTML
• Externe : Dans un fichier indépendant
• Dans l'élément (balise) HTML lui-même
• A partir d’un style importé

IV.2.1 Dans le code HTML de la page
Mettre le code CSS dans la page HTML, entre les deux balises <head> et </head>
Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va
s'appliquer globalement à toutes les balises du document qu'elle a défini.
<HTML>
<HEAD>

37


Classe : TI13

<STYLE type="text/css">
<!—code css -->
</STYLE>
</HEAD>
<BODY>

•
•

La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading
style sheets (css).

IV.2.2 Dans un document séparé : fichier CSS
Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à
côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable
pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très
puissant pour uniformiser la mise en pages d'un grand nombre de documents.
Principe :
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit « styles.css »
qui contiendra toutes les feuilles de style.
body

{background-image: home.gif;}
LI
{font: 13px Verdana;}
p
{font: 14px Verdana; font-weight: bold;}
H1
{font: 16px Arial;font-weight: bold;color=black;}
H2
{font: 14px Arial;font-weight: bold;color=black;}

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS :
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="styles.css">
</HEAD>

Commentaires :
•
•
•
•

La balise <LINK> avertit le browser qu'il faudra réaliser un lien.
L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de
style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style
sheets (css).
L'attribut classi&que de lien href=" ... " donne le chemin d'accès et le nom du fichier à
lier.

IV.2.3 Dans la balise HTML
Il possible de mettre un style directement dans une balise HTML
<HTML>
<HEAD>
...

38


Classe : TI13

</HEAD>
<BODY>
...
<BALISE Style="style:valeur;"> ... </BALISE>
...
</BODY>
</HTML>

Exemple :
<HTML>
<BODY>
<H1
style="font-family:
</BODY>
</HTML>

Arial;

font-style:

italic">

blabla

</H1>

IV.2.4 Style importé
Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans
un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles
de style externes au niveau de la déclaration du style de document, en insérant la commande
@IMPORT immédiatement après la balise style :
<HTML>
<HEAD>
<STYLE type="text/css">
<!-@IMPORT URL(url de la feuille à importer);
Définition des styles du document;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

IV.3 Notion de feuille de style en cascade
L’abréviation CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade.
Pourquoi « cascade » ?
Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut
placer plusieurs feuilles de style dans un même document (en lien, dans le head, en ligne dans
la balise) les instructions de style successives peuvent s'opposer. Les ordres de style arrivent
donc « en cascade ». Comment résoudre les conflits ?
Comme pour le HTML, le

dernier qui parle a raison. On aura donc la hiérarchie :

feuille de style extérieure << feuille de style dans le head << style en attribut dans la balise
39


Classe : TI13

IV.4 Syntaxe
IV.4.1 Structure générale
Construction d'une règle
Une feuille de style est une suite de règles selon cette structure :

selecteur { propriété : valeur }
Une règle a deux parties :
• Un sélecteur ; dans l'exemple suivant il s'agit de h2 ;
• Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align:
center ; color: black}.
Exemple
h2
{
text-align : center;
color : black;
}

Tous les titres de niveau 2 auront leur texte centré et de couleur noire.

Commentaires
Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de
commentaires commence par les caractères /* et se termine par les caractères */. Elle peut
s'étendre sur plusieurs lignes. Par exemple :
/* Mise en forme des éléments h2 */
h2
{
color : black;
}

IV.4.2 Sélecteurs simples
Balise
Il s'agit du sélecteur le plus simple possible, où le sélecteur reprend le nom de l'élément
auquel la propriété s'applique :

40


Classe : TI13

p
{
text-align : justify;
color : black;
}

En utilisant l'attribut style, l'exemple précédent devient :
<p style="text-align: center; color: black">(...)</p>
Il est possible de grouper les balises à l'aide de virgules :
h2, h3, ul
{
color : green;
}

Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et
de couleur verte.

Classe
L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise.
Exemple :
.truc
{
color : red;
}
.machin
{
color : blue;
}

Noter le point devant le sélecteur.
<p class="truc">Ceci est un paragraphe d'introduction.</p>
<table summary="Un tableau peu informatif" class="machin">
<tr>
<td>Et voici</td>
<td>un</td>
<td class="truc">tableau</td>
</tr>
<tr class="truc">
<td>de deux lignes</td>
<td>et</td>
<td class="truc">trois colonnes</td>
</tr>
</table>
<ol class="truc">
<li>Et ceci</li>
<li class="machin">est une</li>

41


Classe : TI13

<li class="truc">liste</li>
</ol>

Il est possible, également, de spécifier que certains éléments seulement d'une classe donnée soient
concernés. Par exemple, le code suivant permet de sélectionner tous les éléments div de classe menu.
S'il y a un élément p de classe menu, il ne sera pas concerné et conservera sa couleur de fond par
défaut :
div.menu
{
background-color : gray;
}

Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si dans la feuille de
style on écrit...
.appartient_a_dupont
{
color : red;
}
.vehicule
{
font-style : italic;
}

... le code HTML
<span class="vehicule appartient_a_dupont"> bicyclette</span>

affichera le mot bicyclette en italique et en rouge.

Identifiant
L'attribut id est un attribut qui peut aussi apparaître dans n'importe quel élément. La très
grande différence avec l'attribut class est qu'une valeur de id ne peut être prise qu'une seule
fois dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique.
Exemple :
<p id="monpar">Ceci est un paragraphe d'introduction.</p>
<ol id="maliste">
<li>Et ceci</li>

42


Classe : TI13

<li id="item2">est une</li>
<li class="truc">liste<img src="images/chapeaurond.gif" alt="Vive la
Bretagne!" height="20" width="40" id="monimage"></li>
</ol>

On peut alors associer plusieurs règles à chaque id de la manière suivante :
#monpar, #monimage
{
color : red;
border : solid 0.5em blue;
}
#liste1, #monimage
{
background-color : yellow;
}
#maliste
{
background-color : yellow;
color : orange;
}
#item2
{
font-variant : small-caps;
font-style : oblique;
}

Classes universelles : balises DIV et SPAN en CSS
Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux
de texte, c'est à cela que servent les balises <SPAN> et <DIV>
<SPAN> : La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe.
Elle
s'utilise
aussi
bien
avec
ID
qu'avec
CLASS.
Sa syntaxe est la suivante :

<SPAN class=Nom_de_la_classe> Texte </SPAN>

<DIV> : Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV
s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes.
La syntaxe de la balise DIV est la suivante :
<DIV class=important> paragraphes </DIV>

43


Classe : TI13

IV.4.3 Sélecteurs complexes
Sélecteur contextuel
Prenons un exemple :
h2 em
{
color : blue;
}

Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront eux-mêmes à
l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne s'applique aux éléments em
dans le contexte d'un élément h2.
Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement est possible
avec tous les types de sélecteurs, balise, identifiant, classe comme l'illustrent les exemples
suivants :
.copyright h4
{
color : blue;
}
#toto b
{
font-size : large;
}
ul ul
{
list-style : lower-alpha;
}

Les regroupements (signifiés par le séparateur virgule) restent possibles :
h1 b, h2 b, b em
{
color : yellow;
}

Pseudo-classes
Nous allons prendre l'exemple des liens. Un lien peut être dans trois états différents :
•
•
•

actif (lors du clic de la souris) ;
à visiter ;
déjà visité.

Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont des classes
prédéfinies. Voici un exemple :

44


Classe : TI13

a:active
{
text-decoration : overline;
}
a:link
{
color : blue;
font-style : italic;
}
a:visited
{
color : green;
font-weight : bold;
}

La syntaxe est donc [selecteur]:[pseudo-classe] {declaration}
Une pseudo-classe intéressante est la pseudo-classe hover : elle permet d'affecter un style à
un élément, lorsque celui-ci est survolé par la souris. Un usage classique consiste à désactiver
le soulignement automatique des liens, qui est le comportement par défaut, et de ne le
réactiver qu'au passage de la souris :
a
{
text-decoration : none;
}
a:hover
{
text-decoration : underline;
}

Pseudo-éléments
CSS1
•
•
•
•
•

décrit plusieurs pseudo-éléments :
first-line modifie le style de la première ligne d'un paragraphe.
first-letter modifie le style de la première lettre d'une phrase.
first-child modifie le style du premier élément-enfant du sélecteur courant.
after modifie le style de ce qui suit l'élément.
before modifie le style de ce qui précède l'élément.

Les trois derniers ne sont pas supportés par Internet Explorer.
Exemple :
p:first-letter
{
color : red;
font-size : 200%;
font-weight : bold;
}

45


Classe : TI13

L'exemple précédent permet de colorer en rouge, doubler la taille et mettre en gras la première
lettre de tous les paragraphes.

IV.4.4 Unités
Syntaxe
Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être précédée d'un
signe + ou -.
Unités absolues de longueur
Unité

Notation

inch (pouce) in

Conversion
1in=2,54cm

centimètre

cm

millimètre

mm

point

pt

1pt=1/72in=0,352778mm

pica

pc

1pc=12pt=4,233mm

Table 1. Unités absolues.
Exemples d'utilisation :
h1
{
margin : 0.5in;
}
h2
{
line-height : 3cm;
}
h3
{
word-spacing : 4mm;
}
h4
{
font-size : 12pt;
}
h5
{
font-size : 1pt;
}

Le point et le pica sont utilisés pour la taille des caractères.

46


Classe : TI13

Unités relatives de longueur
Unité Notation
Em

Em

Conversion
est la hauteur d'un caractère (si la hauteur d'un caractère est fixée par
l'auteur à 10pt alors 1em=10pt, si elle est fixée à 12pt alors 1em=12pt).
1em

xex
height

1ex

pixel

1pixel (picture element) : le plus petit élément sur un écran d'ordinateur.
Cette unité dépend de l'écran et de son paramétrage.

px

est la taille de la lettre 'x' minuscule.

Table 2. Unités relatives.
h1
{
margin : 0.5em;
}
h2
{
line-height : 1ex;
}
h3
{
font-size : 15px;
}

Pourcentages
C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur des caractères
ou toute autre grandeur dépendant du contexte.
p
{
line-height : 120%;
}
td.gauche
{
width : 33%;
}

L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que les cellules de
classe gauche occuperont 33% de la largeur du tableau où elles se trouvent.

IV.4.5 Couleurs
47


Classe : TI13

Les couleurs se codent de la même manière qu'en HTML, mais il est également possible de
spécifier explicitement le codage RGB :
•
•
•
•
•

une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
#rrggbb (par exemple, #00cc00).
#rgb (par exemple, #0c0).
rgb(x1,x2,x3), où x1, x2 et x3 sont des entiers compris entre 0 et 255 inclus (par
exemple rgb(33,45,127)).
rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0 inclus (par
exemple rgb(56%,33%,0%)).

IV.4 Mise en forme du texte
IV.4.1 Quelques propriétés de mise en forme
TEXTE
font-family : la police (times, arial, helevetica …)
font-size : (small, medium, large, x-large…)
font-weight (normal, bold, 120%)
font-variant : (normal, small-caps)
color : couleur du texte (black, green, #00FF00)
text-align: left, center ou right
text-transform : none | capitalize | uppercase | lowercase ;

FOND
background-color : la couleur du fond (idem)
Background-image : image de fond url("truc.jpg")

BORDURES
Border-style : solid, dotted, dashed, solid, none
Border-width : largeur (1px par exemple)
Border-color : red, #00FF00, …

LISTES
List-style-type : type de liste (disc, circle, square, decimal,
lower-roman ...)
list-style-image :image de liste
list-style-position

IV.4.2 Les « boîtes »

48


Classe : TI13

1. le modèle de boîte
La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne figurent que
par leurs adresses : images, son, objets multimédia en général, plug-in...) puissent être
considérés comme des blocs rectangulaires. Ce bloc est constitué de plusieurs couches (en
pelures d'oignon en quelque sorte) ; on a de l'intérieur vers l'extérieur :
•
•
•
•

un contenu (content)
une zone d'ajustement (padding)
un encadrement (border)
une marge (margin)

Cette terminologie est décomposée selon le côté concerné : droite (right), gauche (left), dessus
(top), dessous (bottom).
Règles d'attribution
Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il s'agit :
margin

Padding

border-width

margin-top

padding-top

border-top-width

margin-right

padding-right

border-right-width

margin-bottom padding-bottom border-bottom-width
margin-left

padding-left

border-left-width

49


Classe : TI13

TD5 : CSS
Exercice 1:
Ecrire le code de la page web suivante en utilisant :
1. une feuille de style interne
2. une feuille de style externe

Correction
1.Feuille de style interne
<HTML>
<HEAD>
<TITLE>Exercice CSS</TITLE>
<STYLE TYPE="text/css">
BODY {
url(image.gif) ;

margin-left:

50px

;

color:

navy

;

background:

white

font-family: Arial, Helvetica, sans-serif }
A:link
{ color: red }
A:active { color: maroon }
A:visited { color: maroon }
H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS",
sans-serif ;
font-size: large }
H1
{ text-align: center ; color: white ; background:
navy }
H2,H3,H4
{ text-align: left ; color: navy ; background: white
}
TH
{ background: silver }
TH,TD { font-family: Arial, Helvetica, sans-serif }
PRE,TT { font-family: monospace ; color: blue ; font-weight:bold
}
</STYLE>

50


Classe : TI13

</HEAD>
<BODY>
<H1> Titre de niveau 1 </H1>
<H2>Titre de niveau 2</H2>
<UL>
<LI>La couleur par defaut du texte est le bleu navy
<LI>Les titres sont en police Comic sans Ms ou sans-serif
<LI>Le texte est en police Arial ou helvetica sans-serif
<LI>La page contient l'image "fond_spirale.gif"...
<LI>Pour menager de la place à gauche, on définit une marge à gauche
de 50 pixels
<LI>Les liens <a href="page.html">pas encore visites </a>sont colorés
en "red" et les liens <a href="page.html">deja visites </a>en "maroon"
<LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT>
</UL>
<P>
<TABLE ALIGN=center WIDTH=60% BORDER=1>
<TR>
<TH COLSPAN="2">Couleur de fond "silver"</TH>
</TR>
<TR>
<TD>Texte en police sans-serif</TD>
</TR>
</TABLE>
</BODY>

2.Une feuille de style externe
Feuille.css
BODY {
url(image.gif) ;

margin-left:

50px

;

color:

navy

;

background:

white

font-family: Arial, Helvetica, sans-serif }
A:link
{ color: red }
A:active { color: maroon }
A:visited { color: maroon }
H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS",
sans-serif ;
font-size: large }
H1
{ text-align: center ; color: white ; background:
navy }
H2,H3,H4
{ text-align: left ; color: navy ; background: white
}
TH
{ background: silver }
TH,TD { font-family: Arial, Helvetica, sans-serif }
PRE,TT { font-family: monospace ; color: blue ; font-weight:bold
}

51


Classe : TI13

page.html
<HTML>
<HEAD>
<TITLE>Exercice CSS</TITLE>
<LINK REL="stylesheet" HREF="feuille_style.css" TYPE="text/css">
</HEAD>
<BODY>
<H1> Titre de niveau 1 </H1>
<H2>Titre de niveau 2</H2>
<UL>
<LI>La couleur par defaut du texte est le bleu navy
<LI>Les titres sont en police Comic sans Ms ou sans-serif
<LI>Le texte est en police Arial ou helvetica sans-serif
<LI>La page contient l'image "fond_spirale.gif"...
<LI>Pour menager de la place à gauche, on définit une marge à gauche
de 50 pixels
<LI>Les liens <a href="css.html">pas encore visites </a>sont colorés
en "red" et les liens <a href="css.html">deja visites </a>en "maroon"
<LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT>
</UL>
<P>
<TABLE ALIGN=center WIDTH=60% BORDER=1>
<TR>
<TH COLSPAN="2">Couleur de fond "silver"</TH>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

52


Classe : TI13

Exercice 2: Mise en page avec CSS
Ecrire le code de la page web suivante en utilisant une feuille de style externe.

Correction :
Ex2.css
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
clear:both;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#menuhaut {
width:100px;
height:200px;
background-color:#66CC33;
}
div#menubas {
width:100px;
height:200px;
background-color:#CC99CC;
}

Ex2.HTML
<html>
<head>
<title>Exercie 2 CSS</title>

53


Classe : TI13

<LINK REL="stylesheet" HREF="ex2.css" TYPE="text/css">
</head>
<body>

<div id="bandeau">Ceci est le bandeau</div>
<div id="menu">
<div id="menuhaut">Menu haut</div>
<div id="menubas">Menu bas</div>
</div>
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div>
</body>
</html>

Exercice 3: Tableau avec CSS
Ecrire le code du tableau suivant en utilisant le CSS

Correction
Ex3.css
.Tableau span {
display:inline;
float:left;
border:1px solid #FF6600;
margin:0px;
padding:3px;
}
.Tableau p {
clear:left;
margin:0px;
padding:0px;
height:100% !important; height:1em;
}
.Tableau p.legende {font-weight:bold}
.Tableau span.col1 {width:70px}

Ex2.html
<html>
<head>
<title>Exercie 3 CSS</title>

54


Classe : TI13

<LINK REL="stylesheet" HREF="ex3.css" TYPE="text/css">
</head>
<body>

<div class="Tableau">
<p class="legende">
<span class="col1">Légende 1</span>
</p>
<p>
<span class="col1">Case 1.1</span>
</p>
<p>
</p>
</div>
</body>
</html>

55


Classe : TI13

Chapitre 5 : CSS3
Tags de structuration:
Eléments :
• Les éléments section, article, nav, aside, header, footer sont des éléments de structure,
plus précis que <span> ou <div>
•

Etablis à partir de statistiques d’utilisation des ids et classes les plus populaires du
web,
–

<div class="aside"> devient <aside> pour les menus sur le côté

•

En devenant standards, on peut plus facilement leur appliquer une CSS standard,
partageable,

•

Les navigateurs peuvent les reconnaître et proposer un rendu spécifique,

•

Il devient plus simple de générer une table des matières, par exemple

56


Classe : TI13

57

Classe : TI13

Exemple de structure globale
<header>
<h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1>
</header>

<nav>nav
<ul>
<li><a href="#">Rubrique 1</a></li>
</ul>
</nav>

<section id="main">
<article> .. </article>
</section>
Chaque article peut avoir sa propre
structures
<article>
<header>
<h1>Titre de l'article</h1>
<p>Auteur : bidule</p>
</header>
<nav>
<ul>
<li><a href="index.html">Page d'accueil</a></li>
<li><a href="contact.html">Contact</a></li> </ul>
</nav>
<p>Contenu de l'article</p>
…
<footer>
<p>Posté par Simon, le <time datetime="2012-02-02">2 février 2012</time>
</p>
</footer>
</article>

58

Programmation web1partie3

Contenu connexe

Similaire à Programmation web1partie3 (20)

Programmation web1partie3