Scribd
Importer
30 vues47 pages

Cssdebase

Transféré par

Cedric Decraim
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
30 vues47 pages

Cssdebase

Transféré par

Cedric Decraim
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

CSS

Cascading
Style Sheets
(Feuilles de style)
Introduction
Principes de base
Le langage HTML (Hypertext Markup Language) est avant tout une norme de description de
page qui tire son origine du SGML (Standard Generalized Markup Language), un langage
structuré décrivant le contenu d'un texte dans une optique essentiellement documentaire. Ainsi,
le langage HTML ne possédait au départ qu'un nombre assez réduit d'instructions (ou balises)
destinées à organiser les documents – l’aspect « présentation » n’étant pris en compte qu’au
second plan.

Exemples :
- la balise <strong> met le texte ciblé en évidence ;
- la balise <p> force un saut de ligne afin de marquer un paragraphe ;
- la balise <ul> définit une liste ordonnée

<html>
<head>
<title>Style Sheets - Feuilles de style</title>
</head>

<body>

<h1>Style Sheets - Feuilles de style</h1>

<h2>Introduction</h2>

<p>
Le langage <strong>HTML</strong> (Hypertext Markup Language) est avant
tout une norme de description de page qui tire son origine du
<strong>SGML</strong> (Standard Generalized Markup Language), un
langage structuré décrivant le contenu d'un texte dans une optique
essentiellement documentaire. Ainsi, le langage HTML ne possédait au
départ qu'un nombre assez réduit d'instructions (ou balises) destinées
à organiser les documents – l’aspect « présentation » n’étant pris en
compte qu’au second plan
</p>

<p>
Cependant, l’engouement toujours croissant, depuis maintenant plusieurs
années, pour le World Wide Web a rapidement révélé la nécessité de
développer des techniques de présentation plus sophistiquées,
débouchant sur la production de documents de meilleure qualité
esthétique. Le langage HTML s'est alors progressivement enrichi de
nouvelles balises, assurant -entre autres- des mises en couleur, des
changements de police de caractères, etc.
</p>

<h2>Le contenu du cours</h2>

<ol>
<li>Feuilles de style et héritage</li>
<li>Feuilles de style et navigateur Web</li>
<li>Avantages des feuilles de style</li>
2
</ol>

</body>
</html>

Cependant, l’engouement toujours croissant, depuis maintenant plusieurs années, pour le World
Wide Web a rapidement révélé la nécessité de développer des techniques de présentation plus
sophistiquées, débouchant sur la production de documents de meilleure qualité esthétique. Le
langage HTML s'est alors progressivement enrichi de nouvelles balises, assurant -entre autres-
des mises en couleur, des changements de police de caractères, etc.

Exemples :
- la balise <font> peut être utilisée pour associer au texte ciblé une police de
caractères, une taille, une couleur ;
- les options background et bgcolor servent respectivement à afficher une
image de fond et à définir une couleur de fond.

<html>
<head>
<title>Style Sheets - Feuilles de style</title>
</head>

<body bgcolor="#ffffff" text="#990033" link="#336699" vlink="#336699"


alink="#336699">

<font face="arial,helvetica" size="5"><b>Style Sheets - Feuilles de


style</b></font>
<br><br>
<font face="arial,helvetica" size="4"><b>Introduction</b></font>

<blockquote>
<p align="justify">
<font face="arial,helvetica" size="3">Le langage <b><i>HTML</i></b>
(Hypertext Markup Language) est avant tout une norme de description de
page qui tire son origine du <b><i>SGML</i></b> (Standard Generalized
Markup Language), un langage structuré décrivant le contenu d'un texte
dans une optique essentiellement documentaire. Ainsi, le langage HTML
ne possédait au départ qu'un nombre assez réduit d'instructions (ou
balises) destinées à organiser les documents – l’aspect « présentation
» n’étant pris en compte qu’au second plan
</font>
</p>
</blockquote>

<br><br>
<font face="arial,helvetica" size="4"><b>Le contenu du cours</b></font>

<blockquote><font face="arial,helvetica" size="3">


<ol>
<li>Feuilles de style et héritage</li>
<li>Feuilles de style et navigateur Web</li>
<li>Avantages des feuilles de style</li>
</ol>
3
</font></blockquote>

</body>
</html>

4
Cette façon de procéder - si elle a pu dans un premier temps faciliter le travail des concepteurs
de pages Web - présente toutefois différents inconvénients :

- elle malmène le principe de la normalisation du langage HTML; en effet, dans la


pratique ces balises de « style » sont introduites et supportées par les navigateurs
Web (comme Internet Explorer,Chrome, FireFox... ) avant même que le W3C ait eu le
temps de se pencher sur les propositions d’aménagement de la norme;
- elle ne fait qu'augmenter le nombre de balises qui composent la norme HTML - la
rendant ainsi plus confuse;
- elle utilise les balises HTML dans un sens qui ne respecte pas l'objectif premier
de cette norme : la structuration des documents sur le Web;
- les compositions qui en découlent restent relativement pauvres en regard des
résultats obtenus avec les outils traditionnels de mise en page.

Actuellement la technique des feuilles de style (Style Sheets) permet d'éviter les problèmes
évoqués ci-dessus en allant beaucoup plus loin dans le sens de la séparation du contenu et de
la présentation des pages Web.

html css

structuration présentation

5
Définition des feuilles de styles

Les feuilles de styles sont en quelque sorte des modèles, des canevas, qui offrent de
nombreuses possibilités de contrôle sur l'aspect d'un document. Leur mécanisme est semblable
à celui utilisé dans les logiciels de traitement de texte : dans un document on dissocie les titres,
les sous-titres, les paragraphes de corps de texte, les notes de bas de page, les citations etc. –
à chacun de ces éléments est associé un style qui lui est particulier et qui clarifie la lecture du
texte en mettant en évidence sa structuration.

En ce qui concerne le langage HTML, le même procédé est rendu possible grâce à l’utilisation
des Cascading Style Sheets (CSS) définies par le W3C : celles-ci peuvent regrouper des règles
de présentation sophistiquées destinées à être appliquées aux différents éléments HTML d’un
document.

La norme servant de base à la formulation des feuilles de style étant indépendante de l'HTML,
on évite ainsi de court-circuiter ce langage.

Exemples :

Page HTML : Feuille de style CSS :

<html> body
{
<head> background-color: #FFFFFF;
<title>Apache Server - Installation</title> color: #000000;
<link rel="stylesheet" type="text/css" href="demo1.css"> font-family: arial, helvetica;
</head> font-size: 10pt;
}
<body>
h1
<h1>Apache Server - Installation</h1> {
color: #FF0000;
<p> font-weight: bold;
If you have installed Apache as a pre-compiled binary, you font-size: 16pt;
can now run the server by selecting "Start Apache as text-align: center;
console app" from the Start menu. You can configure }
Apache for your system by editing the file conf/httpd.conf
in the directory where you installed Apache. p
</p> {
text-indent: 50pt;
</body> margin-right: 100pt;
</html> margin-left: 100pt;
text-align:justify;
}

Avantages des feuilles de styles

6
Le but prioritaire poursuivi par les concepteurs des CSS est de clairement séparer le contenu
des instructions de mise en forme. Il s’agit -grâce aux feuilles de styles- de débarrasser la
source HTML de balises et attributs de présentation peu efficaces (par exemple la balise <font>
et ses attributs « face », « size », « color »).

DocumentH
TML
Feuille
de styles
structuration
struct présentation

Les CSS c’est la possibilité de gérer la mise en page en


dehors du code HTML. Une feuille de style peut alors jouer le
rôle de "poste de contrôle" surveillant la mise en page de tout
un site.

Cette façon de faire vise à clarifier le code HTML, à le ramener à sa fonction première, c’est-à-
dire la structuration des documents. En conséquence, la gestion des pages et des sites web
s’en trouve nettement améliorée : des dizaines ou des centaines de pages web peuvent pointer
vers une seule feuille de style commune, les modifications dans une feuille de style sont
automatiquement répercutées sur les éléments et les pages qui y font référence, le code HTML
reste limité à l’essentiel et peut être compris par un très grand nombre.

Autre points forts des feuilles de style :

- simplicité et clarté du langage ;


- complémentarité avec le langage HTML ;
- richesse de mise en page ;
- uniformisation de l'apparence finale d’un document ;
- positionnement au pixel près d’éléments HTML ;
- réduction du temps de chargement des pages web.

7
Méthode et fonctionnement

Pour pouvoir exploiter les feuilles de style, il faut franchir deux étapes fondamentales :

▪ dans un premier temps, il faut analyser la manière dont il est possible d’attribuer un style
à un type de balises HTML ;

▪ dans un deuxième temps, il faut étudier le moyen d’intégrer dans un document HTML les
règles de style précédemment définies.

Attribution d’un style


Le point de départ est toujours le même, on dispose d’un document HTML classique :

<HTML>
<HEAD>
<TITLE>Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Le mécanisme des CSS</H1>
<P>Attribution d'un style
</BODY>
</HTML>

La question qui se pose à présent c’est « Comment mettre en forme un élément HTML via la
technique des CSS ? ». Prenons le cas d’une couleur que l’on voudrait associer à un titre de
niveau un (h1). Nous allons devoir traduire ce traitement dans une règle de style - celle-ci aura
l’allure qui suit :

h1 { color : blue}

ou

h1
{
color : blue
}

8
A partir de cet exemple, nous pouvons établir une première règle générale : une définition de
style se compose toujours de deux parties :

▪ un sélecteur qui précise l’élément HTML sur lequel va porter le style ;


▪ une déclaration de style, placée entre accolades, et composée d’un ou plusieurs couples
« nom de la propriété de style : valeur de la propriété».

sélecteur {propriété:valeur}

Les propriétés de style sont définies par la norme CSS : certaines servent à modifier les
couleurs, la police et la taille de caractères, d’autres le positionnement, etc (il en existe à peu
près une cinquantaine). Si plusieurs couples « propriété : valeur » doivent être indiqués, il faut
les séparer par un point-virgule.

sélecteur {propriété:valeur ; propriété:valeur}

h1
{
color : blue ;
font-size : large ;
text-align : center
}

A noter également, la possibilité pour plusieurs sélecteurs de partager les mêmes propriétés. En
effet, différents sélecteurs, comme h1, h2, ou b dans l’exemple ci-dessous, peuvent être placés
dans une liste, séparés par le caractère une virgule, afin d’être associer aux mêmes définitions
de styles.

h1, h2, b
{
color : blue ;
font-size : large ;
text-align : center
}

9
Association d’une feuille de style à un document HTML
Il existe trois techniques différentes pour joindre des feuilles de style à un document HTML.

▪ Les styles en ligne


Le style est défini directement dans l'élément HTML concerné.

▪ Les styles imbriqués


Le style du document est élaboré dans la zone d’entête HTML « <head></head> ».

▪ Les feuilles de style liées ou externes


Le style du ou des documents est précisé dans un fichier séparé.

La première technique est certainement la plus simple et la plus directe, mais aussi celle qui
offre le moins de possibilités. La seconde est déjà plus intéressante vu que les styles sont
définis, non pas localement dans le corps de la page, mais bien globalement dans l’entête du
document. Enfin, la dernière technique est de loin la plus puissante ; en effet, la définition des
styles se trouve cette fois dans un fichier distinct ce qui permet de gérer à travers une seule
feuille de style de nombreuses pages HTML.

10
La méthode intraligne

Selon cette méthode, les styles sont directement inclus dans la balise HTML concernée. Pour
cela on utilise l’attribut « style » à l'intérieur des balises HTML d’ouverture. Cet attribut permet de
préciser des règles de style et ainsi de modifier l'apparence de l’élément HTML sur lequel il
porte.

<sélecteur STYLE="propriété:valeur">

Remarque :
par sélecteur on entend toute balise
HTML (H1, P, B, DIV...)

Exemple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<HTML>
<HEAD>
<TITLE>Stylesheet</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color:orange; font-size:large">
Le mécanisme des CSS
</H1>
<P STYLE="color:blue; font-family:impact">
Attribution d'un style
</BODY>
</HTML>

Cette méthode est certainement la plus directe et la plus simple à mettre en œuvre dans un
premier temps. Il faut toutefois garder à l’esprit que la méthode intraligne -du fait qu'elle mélange
le contenu et la présentation- prive le développeur des principaux avantages des feuilles de
style CSS. Il faut l'utiliser avec précaution.

11
La méthode imbriquée

Dans ce cas, tous les éléments de style sont placés dans la zone d’entête du document
<head></head>, grâce à la balise <style></style>, et s'appliquent à tout le code HTML qui suit.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<HTML>
<HEAD>
<TITLE>Stylesheet</TITLE>
<STYLE TYPE="text/css">
<!--
B {color:green; font-family:impact}
-->
</STYLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>

Si elles respectent le format "sélecteur {propriete1:valeur1; propriete2:valeur2;...}", toutes les


définitions de style voulues peuvent être insérées entre les balises <STYLE TYPE="text/css"> et </
STYLE>.

L’avantage de cette méthode pour le développeur Web est déjà plus frappant que pour la
méthode précédente : cette technique permet, par le changement de quelques codes, de
modifier la présentation de toute la page.

12
La méthode liée

Cette méthode consiste à lier au document HTML une feuille de style située dans un fichier
externe (fichier .css). La même feuille de style peut alors aisément s'appliquer à plusieurs
documents HTML. La liaison entre une page HTML et une feuille de style se définit dans la zone
d’entête du document <HEAD></HEAD> de la manière suivante:

<LINK REL="stylesheet" TYPE="text/css" HREF="url du fichier .css">

Voici un exemple d’appel à une feuille de style externe à partir d’une page HTML classique :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<HTML>
<HEAD>
<TITLE>Page test</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">
</HEAD>
<BODY>
…
</BODY>
</HTML>

Le contenu d’une feuille de style externe est des plus simple : il se résume à une succession de
règles de style telles que la norme CSS les définit. Ci-dessous, on peut observer le contenu du
fichier « style 1.css » appelé dans l’exemple précédent.

Body {color:red}
P {font-size:medium; font-family:impact}
B {color:green; font-size:large}

13
La méthode importée

Cette méthode importe les styles provenant d'un fichier externe de façon à les fusionner au
document HTML. L’importation, via l’instruction @import, peut être combinée avec d’autres
méthodes d’association d’une feuille de style à un document HTML.

Exemple : <HTML>
<HEAD>
<TITLE>Stylesheet</TITLE>
<STYLE TYPE="text/css">
<!--
@import url(http://www.ulb.ac.be/style1.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>

Combinaison de plusieurs feuilles de style

Si différentes méthodes d’association sont utilisées en même temps, le navigateur Web doit
pouvoir donner la priorité à l’une ou l’autre des méthodes. Les navigateurs Web qui supportent
les feuilles de style disposent pour cela d’une règle concernant l’ordre des cascades qui leur
indique quoi faire dans quelle situation.

Ordre d’importance :
1. intraligne
2. imbriquée
3. liée
4. importée
5. style par défaut du navigateur

Ainsi, les styles intralignes prennent le pas sur les styles imbriqués, qui eux-mêmes ont la
priorité sur les styles liés …

14
Exemple :

Une feuille de style externe précise trois propriétés pour le sélecteur h3 :

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Une feuille de style interne précise deux propriétés pour le sélecteur h3 :

h3
{
text-align: right;
font-size: 20pt
}

Si une page Web contenant la feuille de style interne fait également référence à la feuille
de style externe, les propriétés de styles associées au sélecteur h3 seront les suivantes :

color: red;
text-align: right;
font-size: 20pt

La couleur est héritée de la feuille de style externe, par contre l'alignement du texte et la
taille de la police sont dictés, eux, par la feuille de style interne.

15
Feuilles de style et héritage
Les balises qui composent un document HTML sont organisées selon une structure en arbre.
Chacune d'entre elles possède un parent, et engendre un ou plusieurs fils.

Exemples :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<html>
<head>
<title>Stylesheet</title>
</head>
<body>
<h1>Les feuilles de style CSS</h1>
<p>Table des matières
<ul>
<li>Définition
<li>Mécanisme
</ul>
</body>
</html>

html

head body

title h1 p ul

Une telle structure permet d’utiliser l'héritage des feuilles de style afin de mettre en page un
document HTML : de la même façon que les enfants héritent de leurs parents certaines
caractéristiques, les balises HTML des niveaux inférieurs reçoivent les caractéristiques
stylistiques de celles des niveaux supérieurs.

Dans l’exemple ci-dessus, si une propriété de style est définie au niveau de la balise <body>,
alors les balises <h1>, <p> et <ul> les posséderont également, sauf si un changement de la
même propriété est spécifié à leur niveau.

16
Propriétés de style

Traitement des caractères


Les propriétés de "caractères" permettent de préciser une police de caractères, d'en fixer la
taille, le style, le poids.

font-family:
Objet : précise la police de caractères à appliquer aux éléments d’un document HTML.
Valeurs : [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]

Exemple :

<style type="text/css">
h3 {font-family: times}
p {font-family: arial, helvetica, sans-serif}
</style>

Définition des polices génériques

Dans une feuille de style la propriété ‘font-family’ est utilisée pour spécifier la ou les
polices de caractères qui doivent être appliquées au texte.

Exemple :
P {font-family : arial, helvetica, sans-serif}

Cette propriété permet à l’auteur de préciser plusieurs polices de caractères qui seront
appliquées d’après leur ordre d’apparition. Dans l’exemple ci-dessus, le navigateur Web
doit utiliser en priorité la police arial. Si celle-ci n’est pas présente sur l’ordinateur client,
le navigateur passe alors à la police de caractères suivante. La liste des polices dans
une feuille de style se termine généralement par une police de caractères dite
‘générique’ afin, en dernier recours, de conserver un minimum de l’intention de l’auteur.

Polices génériques : - serif (probablement du Times)


- sans-serif (probablement de l’Arial ou de l’Helvetica)
- cursive (probablement du Comic Sans MS)
- fantasy (probablement du Ransom)
- monospace (probablement du Courier)

Remarque : si le nom de la police de caractères est composé de plusieurs


mots, celui-ci doit être écrit entre guillemets.

font-style:
17
Objet : indique l’orientation de la police de caractères.
Valeurs : normal | italic | oblique

Exemple :

<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>

font-variant:
Objet : indique l’orientation de la police de caractères.
Valeurs : normal | small-caps

Exemple :

<style type="text/css">
p{font-variant: small-caps}
</style>

font-weight:
Objet : indique le poids (le « gras ») de la police de caractères.
Valeurs : normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Exemple :

<style type="text/css">
h1 {font-weight: 900}
strong {font-weight: bold}
p {font-weight: normal}
</style>

18
font-size:
Objet : définit le corps de la police de caractères.
Valeurs : <percentage> | <absolute-size> | <relative-size> | <length>

Exemple :

<style type="text/css">
h1 {font-size: 18pt}
h2 {font-size: 16pt}
p {font-size: 12pt}
</style>

Il y a quatre façons différentes pour préciser une taille de police :

▪ Pourcent

La taille est fixée à l’aide d’une valeur en pourcent. Celle-ci est relative à la valeur de la
propriété ‘font-size’ de l’élément parent.

Exemple :

p {font-size : 12pt}
b {font-size : 150%} /* 150% de 12pt = 18pt */

▪ Taille absolue

La taille est fixée à l’aide des mots-clés listés ci-dessous. Ceux-ci font référence aux
différents niveaux repris dans une table des tailles de polices de caractères maintenue
par les logiciels clients.
xx-small
x-small
small
medium
large
x-large
xx-large

Exemple :

p {font-size : medium}
b {font-size : large}

19
▪ Taille relative

La taille est fixée à l’aide des mots-clés listés ci-dessous. Ceux-ci sont interprétés en
fonction de la table des tailles de polices de caractères maintenue par les logiciels clients
et de la valeur de la propriété ‘font-size’ de l’élément parent.
Larger
smaller

Exemple :

p {font-size : medium}
b {font-size : larger}

▪ Length

‘length’ permet de préciser des mesures horizontales et verticales.

Unités de mesures :

px – mesure en pixels relative à l’outil de visualisation


mm - millimeters
cm - centimeters
in - inch (2,54 centimeters)
pt - points (1/72 inch)
pc - picas (12 points)

Exemple :

h1 {font-size : 15pt}
h2 {font-size : 1pc}
p {font-size : 0.43cm}

20
font:
Objet : raccourci permettant de fixer les propriétés de caractères en une seule commande.
Valeurs : [<font-style> || <font-variant> || <font-weight> || <font-size> ||
<font-family>]

Exemple :

<style type="text/css">
p
{
font: italic small-caps 900 12px arial
}
</style>

21
Les blocs de texte
Les propriétés de texte permettent de contrôler l'apparence des éléments de type "texte" dans
une page Web. Il est possible de changer la couleur d'un texte, d'augmenter ou de réduire
l'espace entre les caractères, d'aligner le texte, de le décorer ou d'indenter la première ligne.

color:
Objet : décrit la couleur du texte d'un élément HTML.
Valeurs : <color>

Exemple :

<style type="text/css">
h1 {color: #ff0000}
h2 {color: #aaaaaa}
p {color: rgb(0,0,255)}
</style>

Préciser une couleur dans une feuille de style CSS

La norme CSS2 prévoit différentes façons de spécifier des couleurs : soit par mot-clé (aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et
yellow), soit par triplet de composantes rouge/vert/bleu de la forme suivante :

H1 { color: #f00} /* #rgb en hexadécimal*/


H1 { color: #ff0000} /* #rrggbb en hexadécimal */
H1 { color: rgb(255,0,0)} /* entier de 0 à 255 */
H1 { color: rgb(100%, 0%, 0%)} /* flottant de 0.0% à 100.0% */

letter-spacing:
Objet : précise l’espacement entre les caractères.
Valeurs : normal | <length>

Exemple :

<style type="text/css">
h1 {letter-spacing: -3px}
h2 {letter-spacing: 0.5cm}
</style>

La longueur précisée vient s'ajouter à l'espace normal entre les caractères.

22
word-spacing:
Objet : précise l’espacement entre les mots.
Valeurs : normal | <length>

Exemple :

<style type="text/css">
p {word-spacing: 4px}
td {word-spacing: 0.5cm}
</style>

La longueur précisée vient s'ajouter à l'espace normal entre les mots.

text-decoration:
Objet : définit un type de soulignement.
Valeurs : none | [ underline || overline || line-through || blink ]

Exemple :

<style type="text/css">
h2 {text-decoration: overline}
p {text-decoration: underline}
a {text-decoration: none}
</style>

text-align:
Objet : indique l'alignement du texte d'un élément HTML.
Valeurs : left | right | center | justify

Exemple :

<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
p {text-align: justify}
</style>

23
text-indent:
Objet : précise la longueur d’un retrait de texte (alinéa).
Valeurs : <length> | <percentage>

Exemple :

<style type="text/css">
p {text-indent: 1cm}
</style>

text-transform:
Objet : indique la casse à appliquer à un bloc de texte.
Valeurs : capitalize | uppercase | lowercase | none

Exemple :

<style type="text/css">
h1 {text-transform: uppercase}
h2 {text-transform: capitalize}
</style>

24
Les arrière-plans*

Les propriétés d'arrière-plans permettent de contrôler la couleur d'arrière-plan d'un élément


HTML, de fixer une image d'arrière-plan, de répéter une image d'arrière-plan verticalement ou
horizontalement, de préciser sa position dans la page.

background-color:
Objet : donne la couleur d’arrière-plan à appliquer à un élément HTML.
Valeurs : <color> | transparent

Exemple :

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

background-image:
Objet : renseigne l’image à afficher comme arrière-plan pour un élément HTML.
Valeurs : url(<url>) | none

Exemple :

<style type="text/css">
body
{
background-image: url("../images/bgblue.jpg")
}
</style>

25
background-repeat:
Objet : gère la répétition horizontale et verticale d’une image d’arrière-plan.
Valeurs : repeat | repeat-x | repeat-y | no-repeat

Exemple :

<style type="text/css">
body
{
background-image: url("../images/bgblue.jpg");
background-repeat: repeat-y
}
</style>

background-attachment:
Objet : détermine le type de défilement d’une image d’arrière-plan.
Valeurs : scroll | fixed

Exemple :

<style type="text/css">
body
{
background-image: url("../images/flag.gif");
background-repeat: no-repeat;
background-attachment: fixed
}
</style>

background-position:
Objet : détermine la position initiale d’une image d’arrière-plan.
Valeurs : [<percentage> | <length>]{1,2} |
[top | center | bottom] || [left | center | right]

Exemple :

<style type="text/css">
body
{
background-image: url("../images/flag.gif");
background-repeat: no-repeat;
background-position: center center
}
</style>

26
Avec la paire de valeur « 0% 0% », le coin supérieur gauche de l'image est aligné sur celui de la
« box » qui entoure le contenu de l'élément (pas la boîte qui englobe l'espacement, la bordure et
la marge). La paire de valeur '100% 100%' positionne le coin inférieur droit de l'image sur celui
de l'élément.

Avec la paire de valeur '2cm 2cm', le coin supérieur gauche de l'image est placé 2cm vers la
droite et 2cm sous le coin supérieur gauche de l'élément.

background:
Objet : raccourci permettant de fixer les propriétés d’arrière-plan en une seule commande.
Valeurs : <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>

Exemple :

<style type="text/css">
body
{
background: #00ff00 url("../images/flag.gif") no-repeat
fixed center center
}
</style>

27
Les marges

Selon la technique des feuilles de style, chaque élément d’un fichier HTML est considéré
comme contenu dans ce qui est appelé une « box ». Celle-ci est composée de ce qui suit :

- l’élément lui-même
- l’écartement autour de l’élément
- la bordure autour de l’écartement
- les marges autour de la bordure

BOX

marge haute

écartement haut

contenu de l’élément
marge gauche écartement écartement droit marge droite
gauche
écartement bas

bordure
marge basse

Les propriétés "margin" définissent l'espace (extérieur) autour des éléments. Les marges
"haute", "basse", droite" et "gauche" peuvent être précisées séparément en utilisant des
propriétés distinctes.

margin-top:
margin-right:
28
margin-bottom:
margin-left:
Objet : détermine la taille des marges d’un élément HTML.
Valeurs : <length> | <percentage> | auto

Exemple :

<style type="text/css">
p{margin-right: 50px; margin-left: 50px; margin-top: 20px;}
</style>

margin:
Objet : raccourci permettant de fixer la taille des marges en une seule commande.
Valeurs : <margin-top> || <margin-right> || <margin-bottom> || <margin-left>

Exemple :

<style type="text/css">
p{margin: 2cm 4cm 3cm 4cm}
</style>

29
Les écartements

Les propriétés "padding" définissent l'espace entre le contenu d’un élément et la bordure. Les
écartements "haut", "bas", droit" et "gauche" peuvent être précisées séparément en utilisant des
propriétés distinctes.

padding-top:
padding-right:
padding-bottom:
padding-left:
Objet : détermine la taille des écartements d’un élément HTML.
Valeurs : <length> | <percentage>

Exemple :

<style type="text/css">
td
{
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-right: 15px;
}
</style>

padding:
Objet : raccourci permettant de fixer la taille des marges en une seule commande.
Valeurs : <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
Exemple :

<style type="text/css">
td {padding: 1.5cm 0.5cm 2.5cm 0.5cm}
</style>

30
Les bordures

Les propriétés "border" permettent de spécifier le style, la couleur et la largeur de la bordure


d'un élément HTML.

Style de la bordure :

border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Exemple :

<style type="text/css">
p
{
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
</style>

border-style:
hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Exemple :

<style type="text/css">
p
{
border-style: solid;
}
</style>

31
Largeur de la bordure :

border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
thin | medium | thick | <length>

Exemple :

<style type="text/css">
p
{
border-style: solid;
border-bottom-width: 15px
}
</style>

border-width:
thin | medium | thick | <length>
thin | medium | thick | <length>
thin | medium | thick | <length>
thin | medium | thick | <length>

Exemple :

<style type="text/css">
p
{
border-style: solid;
border-width: 5px 10px 5px 10px
}
</style>

Couleur de la bordure :

border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
<color>

border-color:
<color>

Exemple :

<style type="text/css">
p
{

32
border-style: solid;
border-color: black;
border-width: 5px 10px 5px 10px
}
</style>

Raccourcis :

border-top
border-bottom:
border-right:
border-left:
[ <border-width> || <border-style> || <color> ] | inherit

Exemple :

<style type="text/css">
p
{
border-top: medium solid #ff0000
}
</style>

border:
[ <border-width> || <border-style> || <color> ] | inherit

Exemple :

<style type="text/css">
p
{
border: thin double rgb(250,0,0)
}
</style>

33
Les classes

Il est encore possible de compléter les méthodes d’appel aux styles grâce aux éléments
suivants :

Le sélecteur class
Il permet d'assigner un nom à un groupe de propriétés de style et de les associer à n'importe
quelle balise HTML.

▪ Déclaration dans la feuille de style :

Body {color:black}
P {font-size:medium; font-family:impact}
B {color:green}
.italblue {color:blue; font-style:italic}

.class {propriété :valeur}

▪ Appel correspondant dans le fichier HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<HTML>
<HEAD>
<TITLE>Page test</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="url du fichier .css">
</HEAD>
<BODY>
…
<P class="italblue"> explication du selecteur class
…
</BODY>
</HTML>

34
35
Exemple :

<head>
<style type="text/css">
p.right {text-align: right}
p.center {text-align: center}
</style>
</head>

<body>
<p class="center">
Ce paragraphe sera centré.
</p>

<p class="right">
Ce paragraphe sera aligné à droite.
</p>
</body>

36
Le sélecteur ID
Il permet d'assigner un identificateur unique à un groupe de propriétés de style et de les
associer à n'importe quelle balise HTML

▪ Déclaration dans la feuille de style :

Body {color:black}
P {font-size:medium; font-family:impact}
B {color:green}
#a124 {color:blue; font-style:italic}

#id {propriété :valeur}

▪ Appel correspondant dans le fichier HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">


<HTML>
<HEAD>
<TITLE>Page test</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="url du fichier .css">
</HEAD>
<BODY>
…
<STRONG id="a124"> explication du selecteur class </STRONG>
…
</BODY>
</HTML>

37
Les pseudo-éléments et pseudo-classes

Dans la norme CSS, les propriétés de style sont normalement attachées aux différents éléments
HTML d'après la position qu'ils occupent dans la structure du document. Ceci est valable dans la
plupart des cas. Cependant certains types de présentation font référence à des éléments qui ne
sont pas repris dans la structure qui est à la base du langage HTML (par exemple, la norme
HTML 4.0 n'intègre pas d'élément représentant la première lettre d'un paragraphe).
La norme CSS a donc introduit les pseudo-éléments et les pseudo-classes pour pouvoir
assigner des propriétés de style à certains éléments qui ne sont pas présents dans la structure
HTML.

Les "pseudo-éléments" :first-line et :first-letter permettent de redéfinir des attributs particuliers


pour la première ligne et la première lettre d'un paragraphe.

Exemple :

<style type="text/css">
p:first-line {text-transform: uppercase}
</style>

Ces "pseudo-éléments" ne sont malheureusement supportés que par Internet Explorer 5.5.

Il existe des "pseudo-classes" prédéfinies portant sur la balise <a> pour faire référence à un lien
non-visité (classe :link), un lien déjà visité (classe :visited) ou un lien actif, c'est-à-dire sur
lequel l'utilisateur est en train de cliquer (classe :active).

Exemple :

<style type="text/css">
a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
</style>

38
Les balises <div> et <span>

DIV et SPAN sont deux balises HTML qui, associées aux attributs CLASS et ID, permettent
d’utiliser des mécanismes de mise en page complexes. On bénéficie grâce à ces éléments
d’une affectation des styles beaucoup plus libre et souple.

▪ La balise DIV rend possible la délimitation d’un bloc de contenu afin d’appliquer des
propriétés de style aux éléments qui le composent (texte, liste, tableau, image).

▪ La balise SPAN rend possible la délimitation d’un groupe de texte afin d’y appliquer des
propriétés de style.

Exemples :

…
<BODY>
…
<DIV CLASS="italblue">
<H1>explication du selecteur class</H1>
<P> Il permet d'assigner un nom à des styles pré-définis et de les
utiliser <B>dans n'importe quelle balise </B>
</DIV>
…
</BODY>
…

…
<BODY>
…
<SPAN ID="a124">
<P>
Sélecteur ID
<P>
Il permet d'assigner <i>un identificateur unique</i> à des styles pré-
définis et de les utiliser dans n'importe quelle balise (cette
méthode est actuellement déconseillée par le W3C).
</SPAN>
…
</BODY>
…

39
Le positionnement d'éléments HTML

Position

La syntaxe des feuilles de style peut être utilisée pour positionner des blocs de contenu HTML.

Dans ce cas, le style associé à un bloc de contenu destiné à être placé précisément dans une
page Web inclut toujours la propriété "position". La valeur qui correspond à cette propriété peut
être soit "absolute" -ce qui indique une position absolue établie indépendamment de tout autre
élément dans le document - soit "relative" -ce qui indique une position relative à l'emplacement
qu'occupe normalement le bloc de contenu dans le document.

Exemples:

H2
{
position:absolute;
...
}

P
{
position:relative
...
}

Concrètement, le positionnement absolu {position: absolute} se détermine par rapport au coin


supérieur gauche de l’élément parent. Les coordonnées d'un élément s'expriment alors via
l’écart par rapport au bord haut (c’est-à-dire la propriété top) et par rapport au bord gauche
(c’est-à-dire la propriété left).

Navigateur Web
(0,0)

60 pixels

« Introduction aux feuilles de style »


100 pixels

40
Top / Left

A la propriété "position" viennent s'ajouter les propriétés "top" et "left" qui permettent de préciser
les distances qui séparent le bloc de contenu du point de référence courant.

Exemple:

<head>
<style type="text/css">
.postitre
{
position:absolute;
top:10px;
left:200px;
}

h1
{
position:absolute;
top:10px;
left:0px;
font-family:arial;
font-size:80pt;
font-weight:900;
color:#CC0000;
}

h2
{
position:absolute;
top:70px;
left:40px;
font-family:arial;
font-size:40pt;
font-weight:900;
color:#aaaaaa;
}
</style>
</head>

<body>

<div class="postitre">

<H1>2</H1>

<H2>Les feuilles de style</H2>

<H3>Positionnement "absolu"</H3>

</div>
41
42
Width / Height

Il est également possible de contrôler la largeur et la hauteur de l'espace qu'occupe un bloc de


contenu. Ceci se fait via les propriétés "width" et "height".

Exemple:

P
{
position:absolute;
top:80px;
left:100px;
width:600px;
}

H2
{
position:absolute;
top:200px;
left:200px;
color:red;
width:140px;
}

43
Visibility

La propriété "visibility" précise si un bloc de contenu est "visible" ou "hidden". Ceci n'est
réellement utile que dans le contexte du Dynamic HTML et des manipulations sur les blocs de
contenu qu'il sous-entend.

Exemple:

p
{
position:relative;
top:80px;
left:100px;
width:300px;
visibility:hidden;
}

Remarque:
Un bloc de contenu qui est "caché" occupe toujours le même espace dans le document HTML
(la mise en page reste inchangée).

z-index

Si plusieurs blocs de contenu, du fait de leurs caractéristiques de position, viennent à se


superposer, il faut utiliser la propriété "z-index" afin de préciser pour ces différents éléments un
ordre de priorité.

Exemple:

h2
{
position:absolute;
top:120px;
left:200px;
color:red;
z-index:1;
}

h3
{
position:absolute;
top:130px;
left:220px;
color:green;
z-index:10;
}

44
Ainsi, le bloc qui possède la plus grande valeur pour la propriété z-index apparaît au premier
plan.

45
Le positionnement via les balises div et span

Comme vu précédemment, les deux balises HTML "DIV" et "SPAN", associées aux attributs
"CLASS" et "ID", permettent d'aller encore plus loin dans le contrôle de la mise en page
puisqu'elles rendent possible la délimitation de blocs de contenu complexes et leur liaison avec
des styles particuliers. Ceci est de la plus grande utilité dans le cadre du positionnement
d'éléments.

Exemple:

<head>
<style type="text/css">
.first
{
position:absolute;
top:200px;
left:80px;
width:270px;
font-family:arial, sans-serif;
text-align:justify;
visibility:visible;
}

.second
{
position:absolute;
top:200px;
left:380px;
width:270px;
font-family:arial, sans-serif;
text-align:justify;
visibility:visible;
}

</style>
</head>

<body>

<h1>Les feuilles de style</h1>

<h2>Positionnement "absolu"</h2>

<div class="first">
<p>
Contenu du premier paragraphe
</p>
<img src="image1.gif">
</div>

46
<div class="second">
<p>
Contenu du second paragraphe
</p>
<img src="image2.gif">
</div>

</body>
</html>

47

Vous aimerez peut-être aussi