|
http://mammouthland.free.fr/cours/css/index.php
 1. Introduction
Cette technologie a été introduite par Microsoft avec la
version 3.0 (1996) avec pour but de modifier le contenu d'une
page par une grande variété d'effets surprenants (Dynamic
html) et cela en un clin d'œil. En fait, avec les feuilles de
styles (CSS ou Cascading style Sheets), vous contrôlez
parfaitement la mise en page des différents éléments qui
composent votre document. Par exemple, vous pouvez définir la
couleur d'une police, sa taille, le positionnement d'un objet
(image, texte,...), l'espacement entre les paragraphes, et
même gérer des effets de transition.
Note : Internet Explorer à partir de la version 3.0
(attention la version d'Internet Explorer 3.0 ne gère pas
toutes les propriétés des feuilles de styles) et, Netscape à
partir de la version 4 supportent les feuilles de styles.
2. La
syntaxe
Normalement, la syntaxe des déclarations CSS est toujours
identique. La méthode est simple : il s'agit de redéfinir le
rôle d'une balise html en lui imposant de nouvelles propriétés
:
- Comme les feuilles de styles ne sont pas une composante
directe du html, vous pouvez définir à l'aide de la balise
meta (dans l'en-tête de la page) la déclaration suivante :
<meta http-equiv="content-style-type"
content="text/css">
- Comme pour les navigateurs ignorant le JavaScript, vous
devez cacher le code des feuilles de styles à l'aide des
commentaires :
<!-- //-->
- Quatre méthodes différentes sont possibles pour intégrer les
feuilles de styles en html :
+ L'instruction style en tant qu'élément :
<style type="text/css">
+ L'élément link pour établir un lien vers une feuille de
style externe (fichier texte avec l'extension .css) :
<link title="test" type="text/css"
rel="stylesheet" href="mafeuille.css">
+ L'instruction style en tant qu'attribut :
<p style="font-size: 12pt; color:
green">
+ Importer une feuille de style (fichier texte avec
l'extension .css) :
<style type="text/css">
@import url(http://www.allhtml.com/feuille.css);
</style>
Note : Le fichier .css ne doit pas contenir de code
html.
- Pour définir une propriété, on indique d'abord la balise
concernée, puis entre deux accolades les caractéristiques de
cette propriété (s'il y a plusieurs propriétés, on les sépare
par un point virgule):
<html>
<head>
<style type="text/css">
<!--
h1
{
font-size: 12pt;
color: green
}
//-->
</style>
</head>
Si on opte pour la balise <div> la syntaxe sera :
<div style="margin-left: 50px; color:
blue">
Ce paragraphe sera placé à 50 pixels de la marge de gauche et
sera de couleur bleu.
</div>
3. Les
éléments class et ID
Comme nous l'avons vu plus haut, on peut redéfinir l'utilité
d'une balise, mais si vous voulez que cette balise ne soit pas
limitée aux seules feuilles de styles, alors l'élément class
doit être utilisé. L'élément ID (identifiant) peut l'être
aussi, sa différence avec class se situe au niveau de
l'utilisation. En effet, on opte pour une ID de préférence
lors d'un script Javascript.
Exemple avec une class :
<html>
<head>
<style type="text/css">
<!--
H2.test
{
font-size: 12pt;
color: red
}
//-->
</style>
</head>
</body>
<h2 class="test">Titre défini avec une class</h2>
<h2>Titre normal de niveau 2</H2>
<body>
<html>
Exemple avec une ID (à noter le #) :
<html>
<head>
<style type="text/css">
<!--
#test
{
font-size: 10pt;
color: black
}
//-->
</style>
</head>
</body>
<H2 id="test">Titre défini avec une ID</H2>
<H2>Titre normal de niveau 2</H2>
<body>
<html>
4. Le
paramètre media
On utilise le paramètre media (à l'intérieur de la balise
style) pour obtenir des présentations différentes, selon le
type de média utilisé (ordinateur, synthétiseurs vocaux, ...).
Tableau résumant les valeurs disponibles pour le paramètre
media.
|
Valeur |
Information(s) |
| all |
Pour tous les types de
périphériques |
| screen |
type classique, pour tous les
moniteurs courants |
| tty |
type télévision (basse résolution) |
| projection |
type projecteur |
| handheld |
type PC de poche (Psion, Windows
CE, Pilot ...) |
| print |
type impression (pour les
imprimantes) |
| braille |
Pour les dispositifs de
représentation en braille |
| aural |
Pour les synthétiseurs vocaux |
Exemple d'utilisation du paramètre media (ici pour les PC
de poche et les PC standards) :
<head>
<style type="text/css" media="screen">
<!--
H2
{
font-size: 12pt;
color: black
}
//-->
</style>
<style type="text/css" media="handheld">
<!--
H2
{
font-size: 10pt;
color: black
}
//-->
</style>
</head>
5. div
et span
Les balises div et span permettent de désactiver certaines
instructions de la feuille de styles. Vous pouvez de cette
façon modifier le style appliqué à certaines balises, tout en
conservant les autres effets définis dans le fichier CSS.
A noter que :
- div est normalement utilisé pour des blocs de texte entier
- span est lui, utilisé que pour des petites portions de texte
(mots ou lettres)
Note : span et div, prennent en charge les attributs ID
et class.
Exemple avec div :
<html>
<head>
<style type="text/css">
<!--
h1
{
font-size:10pt;
color:green
}
//-->
</style>
</head>
</body>
<h1>Titre défini avec une CSS</h1>
<div style="margin-left: 50px; color: blue">
Ce paragraphe sera placé à 40 pixels de la marge de gauche et
sera de couleur bleu.
</div>
<body>
<html>
6. Le
positionnement d'élément
Un des avantages des feuilles de styles, c'est le
positionnement des éléments (bloc de textes, images ...) au
pixels prés !! Finies les multitudes de balises (surtout les
tableaux) pour essayer de faire une mise en page correcte.
Pour placer un élément, il existe deux types de positionnement
a ) Le positionnement absolu
C'est le plus rencontré. Ce type de positionnement est
identique aux logiciels de PAO tels que Publisher ou XPress,
le placement d'un objet s'effectue à l'aide d'une boîte
indépendante du reste du contenu de la page où l'on insère du
texte ou des images.
b ) Le positionnement relatif
(le moins précis) Il est identique au html, le navigateur
affichera l'élément par rapport à l'emplacement de la balise
concernée (dans le code source de la page).
Exemple de positionnement relatif :
<div style="position: relative; left:
50; top:100">
Ce texte est placé à 50 pixels (de la bordure gauche)
de la commande div (code source html de la page)
et à 100 pixels du haut de la commande div
</div>
Exemple de positionnement absolu :
<div style="position: absolute; left:
50; top:100">
Ce texte est placé à 50 pixels de la bordure gauche de la
fenêtre du navigateur et à 100 pixels du haut de cette même
fenêtre
</div>
Note : La valeur z-index précise le chevauchement des
éléments les uns par rapport aux autres (image en dessous du
texte par exemple). Un élément sera affiché au-dessus d'un
autre s'il possède un ordre d'affichage supérieur, par exemple
si un élément à la valeur : {z-index: 2} il va alors recouvrir
l'élément qui a comme valeur {z-index: 1}.
 Propriétés
et valeurs
Tableau résumant toutes les
propriétés et valeurs possibles (les plus courantes)
pour définir une feuille de style :
|
Propriété |
Valeur(s) |
Description |
Exemple |
| font-size |
xx-small,
x-small, small,
medium, large, x-large,
xx-large, larger, smaller,
ou taille défini en pixels (px)
cm (cm), mm (mm), point (pt),
pourcentage (%) |
Taille de la
police |
{font-size:
12pt} |
| font-family |
serif,
sans-serif, cursive,
fantasy, monospace,
ou nom de la police
(Arial, Verdana, etc...) |
type de police |
{font-family:
Arial} |
| font-weight |
normal, bold,
bolder, lighter,
ou valeur numérique de 100
à 900 (par tranche de 100) |
Poids de la
police |
{font-weight:
bold} |
| font-style |
normal, italic,
oblique
|
style de la
police |
{font-style:
italic} |
|
font-variant |
normal,
small-caps
|
Variante de la
police |
{font-variant:
small-caps} |
| line-height |
point (pt),
pourcentage (%)
|
Hauteur de la
ligne |
{line-height:
5pt} |
| color |
nom ou valeur
hexadécimale
de la couleur |
Couleur de la
police |
{color: green} |
|
background-image |
URL du fichier |
Image
d'arrière-plan |
{background-image:
url(image/fichier.gif)} |
|
background-repeat |
repeat ,
no-repeat, repeat-x,
repeat-y |
Répétition de
l'arrière-plan |
{background-repeat:
no-repeat} |
|
background-attachment |
scroll, fixed |
Effet de
filigrane |
{background-attachment:
fixed} |
|
background-position |
top, center,
bottom, left, right |
Position de
l'arrière-plan
(verticale et horizontale) |
{background-position:
center center} |
|
vertical-align |
baseline, sub,
super, top,
text-top, middle, bottom,
text-bottom, ou valeurs en
pourcentage |
Alignement
vertical |
{vertical-align:
top} |
| text-align |
left, right,
center, justify |
Alignement du
texte |
{text-align:
justify} |
| text-indent |
valeur en
pixel ou
pourcentage |
Retrait de la
première ligne |
{text-indent:
10px} |
|
text-decoration |
none,
underline, overline,
line-through |
Décoration du
texte |
{text-decoration:
overline} |
|
text-transform |
capitalize,
uppercase,
lowercase, none |
Casse du texte |
{text-transform:
none} |
margin-left
(ou -right,
-top, -bottom) |
valeur en
pixel ou
pourcentage |
Valeurs des
marges |
{margin-right:
10px} |
padding-left (ou -right,
-top, -bottom) |
valeur en
pixel ou
pourcentage |
Remplissage du
bloc |
{padding-left:
15pt} |
border-left
(ou -right,
-top, -bottom) |
medium, thick,
ou un style |
type de
bordure |
{border-top:
medium} |
border-x-width (x à
remplacer par right, left,
top, bottom) |
medium, thick
ou
taille. |
Taille de la
bordure |
{border-top-width:
15} |
|
border-style |
none, dotted,
dashed, solid,
double, groove, ridge, inset,outset |
style de la
bordure |
{border-stylet:
ridge} |
|
border-color |
nom ou valeur
hexadécimale
de la couleur |
Couleur de la
bordure |
{border-color:
red} |
| float |
none, left,
right, both |
Alignement
d'un bloc
par rapport à un autre |
{float: right} |
| clear |
none, left,
right,both |
Autorise
l'alignement
d'un bloc par rapport
à un autre |
{clear: right} |
|
letter-spacing |
normal ou
valeur en point |
Esapcement des
lettres |
{letter-spacing:
2pt} |
|
|
|
Formulaires
et CSS
Nous allons voir dans ces
différents exemples, qu'à l'aide des feuilles de
styles, on peut aisément redéfinir tous les éléments
d'un formulaire... Il suffit dans la plupart des cas
de redéfinir les balises propres à un formulaire ou de
spécifier l'attribut style.
Exemple avec une feuille de style
Insérer entre les balises <head> et </head> cette
feuille de style qui redéfinira la balise input sur la
totalité de votre document.
<style type="text/css">
<!--
input
{
color:#cc0000;
background-color:#ccccff;
font-size:11px;
font-family:Arial;
font-weight: bold;
}
//-->
</style>
ou avec l'attribut style
<input type="text" style="font-family:
Arial;font-size:11px;color:#330099;background-color:#ccccff;font-weight:bold"
name="texte" value="Texte ici" size=20 maxlength=30>
Ce qui donne ceci :
Exemple avec un bouton
<input style="font-family:
Verdana;font-size:10px;color:#ff0000;background-color:#ff9900;font-weight:bold"
type="submit" value="Envoyer">
Ce qui donne ceci :
Exemple avec une liste
<select name="exemple"
style="font-family: Verdana;font-size:10px">
<option value="choix1" style="color:#000066;background-color:#99ffff">Choix
1
<option value="choix2" style="color:#ffffff;background-color:#339900">Choix2
<option value="choix3" style="color:#000000;background-color:#ffff33">Choix
3
</select>
Ce qui donne ceci :
|
Liens
et CSS
A l'aide des feuilles de
style et de l'attribut class, Les liens
peuvent être soulignés (simple ou double) ou
non. Voici ci-dessous la liste des propriétés
et leur description.
|
Propriété |
Description |
| color:#FF0000
|
Couleur du lien,
ici rouge |
| text-decoration:none
|
Le lien ne sera
pas souligné |
| text-decoration:underline
|
Le lien sera
souligné (bas) |
| text-decoration:overline
|
Le lien sera
souligné (haut) |
| text-decoration:overline
underline |
Le lien sera
souligné (haut et bas) |
| text-decoration:line-through
|
Le lien sera
souligné (au milieu) |
Note : Il est à noter que c'est
propriétés et valeurs sont valables lorsque la
souris n'est pas sur le lien, et lorsque
qu'elle se trouve au-dessus d'un lien
(attribut hover). De plus la "pseudo-class"
hover fonctionne uniquement avec I.Explorer et
Netscape version 6.
Exemple
Par l'intermédiaire d'une feuille de style
nous pouvons redéfinir la balise A. Code
ci-dessous à insérer entre vos balises <head>
et </head>. La
première section consiste à définir
le lien sans passage de la souris, la
deuxième section
lors du passage de la souris au-dessus du
lien.
<style>
<!--
a
{
color:#9999ff;
text-decoration:none;
}
a:hover
{
color:#FF9900;
text-decoration:underline;
}
-->
</style>
Autres exemples
a) Avec les valeurs overline et
underline soit text-decoration:overline
underline
b) En changeant la taille du texte (de
11px à 12 px)
Note : Vous pouvez redéfinir votre
feuille de style (passer par des CLASS) et
avoir accès à plusieurs type de liens pour un
même documents
Exemple de code (ici
a) ou b))
<style type="text/css">
<!--
a.lien1
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien1:hover
{
color:#FF9900;
text-decoration:underline;
font-weight:bold;
}
a.lien2
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien2:hover
{
color:#FF9900;
text-decoration:underline overline;
font-weight:bold; }
//-->
</style>
Ici l'appel à ces liens se fera de cette façon
a) <a href="http://www.allhtml.com/"
class="lien1">ALL HTML</a>
ou
b) <a href="http://www.allhtml.com"
class="lien2">ALL HTML</a>
Note : La feuille de style peut se
trouver également dans un fichier externe
(avec la balise <link>).
|
|
|
Référence |
|
Guide CSS de référence des
feuilles de styles, de leurs attributs, et
propriétés selon les spécifications
officielles du W3C (World Wide Web
Consortium).
|
|
|
|
|
