- Introduction
- Déclaration ponctuelle
- Déclaration générale
- Déclaration externe
- Personnaliser l'outil de visualisation
- Diverses propriétés et valeurs
Les feuilles de styles (ou CSS, Cascading Style Sheets) permettent de créer des présentations
surprenantes, des mises en pages très précises en modifiant les balises existantes, ou en créant de nouvelles dont les propriétés
sont à votre choix.
On peut se contenter d'introduire une feuille de style en tant qu'attribut à une balise existante.
Cette déclaration ponctuelle ne s'applique qu'à la seule balise concernée. Si vous introduisez une feuille de style à une balise
<P> et qu'il y a d'autres balise <P> dans votre document, seule la balise contenant
la syntaxe de déclaration sera affectée par le nouveau style à appliquer. Cette manière ponctuelle d'introduire une feuille de
style est utile pour un effet limité et sporadique dans une page.
Syntaxes :
< BALISE style=" propriété: valeur">
< BALISE style=" propriété1: valeur1; propriété2: valeur2">
Exemples :
<H1 style=" color: #FF0000">
Le texte inclu dans ce conteneur <H1> sera de couleur rouge.
<P ALIGN=" justify" style=" color: blue">
Le texte inclu dans ce conteneur <P> sera de couleur bleu en plus d'être en alignement justifié.
<A HREF=" menu.php3" style=" text-decoration: none; font-size: 3">
Le texte inclu dans ce conteneur <A> pointant vers la page menu.php3 ne sera pas souligné et sera de taille 3.
a°) La déclaration générale d'une feuille de style s'effectue dans le conteneur <HEAD> de votre
page et s'applique à tous les exemplaires de la (ou les) balise(s) concernée(s). Avec la déclaration générale suivante, les attributs d'une
balise sont définis pour toute la page courante. Après la définition de la feuille de style dans le <HEAD> , il ne
vous reste plus qu'a utiliser la syntaxe minimale de la balise concernée (c'est-à-dire sans aucun attributs). Mais il vous reste
possible de rajouter des attributs à une balise dans le corps du document si vous le souhaitez.
Syntaxes :
<HEAD>
<STYLE type=" text/css">
<!--
BALISE { propriété: valeur }
-->
</STYLE>
</HEAD>
<HEAD>
<STYLE type=" text/css">
<!--
BALISE1 { propriété: valeur }
BALISE2 { propriété1: valeur1; propriété2: valeur2 }
-->
</STYLE>
</HEAD>
<HEAD>
<STYLE type=" text/css">
<!--
BALISE1, BALISE2, BALISE3 { propriété: valeur }
-->
</STYLE>
</HEAD>
Exemples :
<HEAD>
<STYLE type=" text/css">
<!--
A { text-decoration: none }
-->
</STYLE>
</HEAD>
<BODY>
<A HREF=" home.php3"> Home Page</A>
</BODY>
Home Page
<HEAD>
<STYLE type=" text/css">
<!--
I { font-family: Times New Roman }
P { color: #0000FF; text-align: center }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE=" Arial">
<P> Le <I> CyberZoïde<I> Qui Frétille </P>
</BODY>
Le CyberZoïde Qui Frétille
b°) On peut définir un élément CLASS pour que la balise ne soit affectée des nouveaux attributs
définis dans le <HEAD> qu'à la demande explicite dans la balise concernée.
Syntaxe :
<HEAD>
<STYLE type=" text/css">
<!--
BALISE. identifiant { propriété: valeur }
-->
</STYLE>
</HEAD>
<BODY>
< BALISE class=" identifiant">
</BODY>
Exemple :
<HEAD>
<STYLE type=" text/css">
<!--
A. toto { text-decoration: none }
-->
</STYLE>
</HEAD>
<BODY>
<A class=" toto" HREF="mailto: cyberzoide@chezmoi.com"> Ecrivez-moi vite !</A>
<A HREF=" link.php3"> Visitez mes amis !</A>
</BODY>
Ecrivez-moi vite !
Visitez mes amis !
Si vous spécifiez la syntaxe class=" identifiant" dans votre
balise dans le <BODY> , alors la feuille de style déclarée dans le <HEAD> sera
prise en compte lors de cette occurence de la balise. Au contraire, si vous n'insérez pas cette syntaxe, le navigateur ne tiendra
pas compte de la feuille de style pour l'occurence qui ne contient pas class=" identifiant" .
c°) Une troisième façon de déclarer de manière générale une feuille de style est de procéder avec l'élément
ID . Cet élément ID regroupe un ensemble de propriétés et de valeurs définis dans
le <HEAD> dont la déclaration est indépendante de quelconque balise spécifique. Mais cet élément, associé
dans le <BODY> à une balise sous la forme d'une propriété force les propriétés de la balise.
Alors que les deux méthodes précédentes de déclaration générale de feuille de style ne s'appliquait qu'aux balises dûment spécifiées
durant la déclaration, ici, l'élément ID permet d'affecter une feuille de style très librement à toutes les balises
que l'on souhaite et ce, sans hérédité.
Syntaxe :
<HEAD>
<STYLE type=" text/css">
<!--
# identifiant { propriété: valeur }
-->
</STYLE>
</HEAD>
<BODY>
< BALISE id=" identifiant">
</BODY>
Exemple :
<HEAD>
<STYLE type=" text/css">
<!--
# zizitop { color: #FF0000; font-weight: 900 }
-->
</STYLE>
</HEAD>
<BODY>
<P id=" zizitop"> L'eau mouille. </P>
<A id=" zizitop"> Le feu brûle. </P>
<FONT id=" zizitop" FACE=" Arial" SIZE= 5> Ouioui au pays des rêves. </P>
</BODY>
L'eau mouille.
Le feu brûle.
Ouioui au pays des rêves.
Utiliser une feuille de style non déclarée sur la page web en cours suppose qu'un fichier au format texte
d'extention .CSS contienne la déclaration de type générale.
Syntaxe :
<HEAD>
<STYLE type=" text/css">
@import url( adresse)
</STYLE>
</HEAD>
Exemples :
<HEAD>
<STYLE type=" text/css">
@import url( ../styles/style3.css)
</STYLE>
</HEAD>
<HEAD>
<STYLE type=" text/css">
@import url( http://cyberzoide.developpez.com/styles/style3.css)
</STYLE>
</HEAD>
Il est possible de procéder autrement :
Syntaxe :
<HEAD>
<LINK href=" adresse" rel=" stylesheet" type=" text/css">
</HEAD>
Exemples :
<HEAD>
<LINK href=" ../styles/toto.css" rel=" stylesheet" type=" text/css">
</HEAD>
<HEAD>
<LINK href=" http://cyberzoide.developpez.com/styles/toto.css" rel=" stylesheet" type=" text/css">
</HEAD>
La balise <STYLE> possède un autre attribut : MEDIA qui permet
d'affecter une feuille de style différente à chaque outil de visualisation différent.
Valeur | Description |
all | Indifféremment pour tous les matériels de visualisation des pages web. Par défaut. |
aural | Pour les synthétiseurs vocaux. |
braille | Pour le matériel pour aveugles. |
handheld | Pour les gadgets miniatures de type PC de poche. |
print | Pour le matériel d'impression. |
projection | Pour les projecteurs. |
screen | Pour tous les écrans standards. |
tty | Pour la télévision ou assimilés (en basse résolution). |
Syntaxe :
<HEAD>
<STYLE type=" text/css" media=" valeur">
<!--
BALISE { propriété: valeur }
-->
</STYLE>
</HEAD>
Exemple :
<HEAD>
<STYLE type=" text/css" media=" handheld">
<!--
P { text-align: left; color: black; font-size: 3 }
-->
</STYLE>
<STYLE type=" text/css" media=" screen">
<!--
P { text-align: justify; color: blue; font-size: 2 }
-->
</STYLE>
</HEAD>
Voici un tableau qui regroupe un certain nombre de propriétés ainsi que les valeurs associées.
Propriété | Valeur | Descrption |
background-image | adresse d'un fichier image | Image de fond. |
border-color | nom ou valeur hexadécimale | Couleur de la bordure. |
color | nom ou valeur hexadécimale | Couleur du texte |
font-family | Nom de la police souhaitée | Police de caractère. |
font-size | smaller, xx-small, x-small, small, medium, large, x-large, xx-large, larger;
ou taille spécifiée avec l'unité en pixel (px), cm (cm), mm (mm), point (pt), pourcentage (%) | Taille de la police. |
font-style | normal, italic, oblique | Style de la police. |
font-weight | lighter, light, normal (par défaut), bord, bolder;
ou épaisseur en centaine de 100 à 900 | Epaisseur des caractères. |
letter-spacing | normal; ou valeur en point (pt) | Espacement des lettres. |
line-height | valeur en pixels (px) ou pourcentage (%) | Hauteur de ligne. |
margin-? (?= left, right, top ou bottom) | valeur en pixels (px) ou en pourcentage (%) | Epaisseur des marges. |
text-align | left, center, right, justify | Alignement du texte. |
text-decoration | line-through, none, overline, underline | Lignement du texte. |
text-indent | valeur en pixels (px) ou en pourcentage (%) | Retrait de la première ligne. |
text-transform | capitalize, lowercase, none, uppercase | Casse du texte. |
|