Vous êtes sur la page 1sur 4

BTS Génie Informatique - Kénitra -

- Développement Web -

Feuilles de style CSS

1. Qu’est-ce qu’une feuille de style ?

Une feuille de style comprend une ou plusieurs règles qui décrivent comment les éléments d’une
page doivent être affichés.

2. Ajout de style au document HTML

Les règles de style peuvent être appliquées aux documents HTML de 3 manières :

Style en ligne
L’information sur les styles peut être spécifiée séparément pour chaque élément HTML en
utilisant l’attribut style dans le marqueur d’ouverture de cet élément.
<body style="color: #000099;">

Feuille de style intégrée


Une feuille de style peut être intégrée au début du document HTML en utilisant l’élément
STYLE, qui doit être placé dans la section d’entête du document.
<style type="text/css">
body {color: #000099;}
</style>

Feuille de style externe


Les règles de style peuvent être stockées dans un document texte séparé. Un lien est établi vers la
feuille de style externe à l’aide de l’élément LINK dans l’entête du document.
<link href="../styles/toto.css" rel="stylesheet" type="text/css" />

H. Alhaiane [1]
3. Structure d’une règle

Chaque règle comprend 2 parties : le sélecteur et la déclaration.

La partie déclaration d’une règle CSS est toujours placée entre accolades.

La déclaration comporte une ou plusieurs paires propriété/valeur. Chaque propriété est séparée
de sa valeur par le caractère « : ». Une déclaration peut contenir plusieurs paires propriété/valeur.
Chacune de ces paires doit être terminée par un caractère « ; »

Une valeur peut consister en une valeur numérique, une couleur ou plusieurs mots-clés, séparés
par des espaces.

4. Structure d’un sélecteur

Les sélecteurs, qui identifient les éléments auxquels s’applique un style, se présentent sous
diverses formes :

Sélecteurs d’éléments
h1 {color: #000099;}
h1, h2, p {color: #000099;}

Sélecteurs contextuels
p em {color: #000099;}

Sélecteurs de classe
Des éléments HTML peuvent être regroupés dans une classe à l’aide de l’attribut CLASS :
<h1 class="alerte">Danger !</h1>
<p class="alerte">Soyez prudent …</p>

h1.alerte {color :#000099 ;}


.alerte {color :#000099 ;}

[2]
Sélecteurs d’identifiant
L’attribut ID affecte un identifiant unique à un élément HTML particulier :
<p id="para1">Au commencement …</p>

#para1 {color :#000099 ;}

Sélecteurs de pseudo-classes
a {font-size :10pt ; color :#000099 ; text-decoration :none ;}
a :hover {color :#990000 ; text-decoration :underline ;}

5. Types de valeur

Il existe 5 types de valeurs :


mots-clés (border-style: solid; ) ;
nombre (font-size:12pt / px, em) ;
pourcentage (line-height: 120%;) ;
couleur (color: #RRVVBB) ;
url (référence à une image).

6. Priorités dans les styles

Les spécifications CSS intègrent le concept d’héritage, qui s’appuie sur la relation d’ancêtre-
descendant, pour appliquer des règles de style dans un document. Lorsqu’un style est appliqué à
un élément spécifié, le style s’applique également aux descendants de l’élément, sauf dans le cas
où un style plus spécifique doit être appliqué. Notez, cependant, que certaines propriétés de style
ne sont pas héritées.

En fonction du type de sélecteur, certaines règles prennent le pas sur d’autres. Par ordre croissant
de poids, les types de sélecteurs sont :
Sélecteur d’élément ;
Sélecteur de classe et de pseudo-classe ;
Sélecteur d’identifiant.

[3]
7. Eléments de bloc et en ligne

Les éléments de bloc, tels que P, H1…H6, LI, DIV, forcent l’élément suivant à s’afficher sur une
nouvelle ligne, contrairement aux éléments en ligne tels que A, EM, SPAN, IMG, INPUT.

8. Boîtes et bordures

Tous les éléments se présentent sous la forme d’une boîte :

Le fond d’un élément s’étend d’un bord à l’autre de l’élément.

9. Les principales propriétés

Typographie et graphisme Boîtes et bordures Positionnements


background border display
color height float
font margin left
line-height padding position
text-align width top
vertical-align visibility
z-index

10. Ressources

http://wiki.media-box.net/documentation/css/
http://www.w3schools.com/css/default.asp

[4]

Vous aimerez peut-être aussi