HTML 4.0

Publié le par e-commerce

 

Les feuilles de style

Les feuilles de style font partie des nouveautés importantes du langage HTML, elle vont permettre de changer l'aspect d'une page HTML sans modifier son contenu, elle permettront de disposer de quatre ou cinq présentations différentes pour un même Web, elles permettront des modifications étendue de tout un site Web puisque leur principal intérêt réside dans le fait qu'elles peuvent être déclarées à l'extérieur d'un document HTML.

Il existe plusieurs façons de décrire des feuilles de style :

CSS (Cascading Style Sheets)

JavaScript

 

Les feuilles de style en cascade

La définition officielle de CSS est disponible à l'adresse : http://www.w3.org/pub/WWW/TR/REC-CSS1
CSS (Cascading Style Sheet) permet d'utiliser plusieurs feuilles de style en les combinant.

CSS permet de déclarer des feuilles de style en utilisant la syntaxe suivante :

BALISE { Propriété : valeur}

Ainsi la déclaration suivante sera valide :

H2 { color : green }

elle indique que tous les titres de niveau 2 sont en vert. Ici la propriété est color mais il en existe une cinquantaine.

Une feuille de style CSS peut être définie de quatre façons :

La syntaxe suivante permet de définir la feuille de style à l'extérieur du document par l'utilisation de la balise LINK dans la zone du document marquée par <HEAD> </HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="..." TITLE="...">

par utilisation d'un couple de balises :
<STYLE TYPE="text/css"> H1 { color: green }</STYLE>

par utilisation d'un couple de balises STYLE et import de la feuille de style :
<STYLE TYPE="text/css"> @import url(http://....); H1 { color: blue }</STYLE>

par définition dans une balise qui supporte un ajout de style
<P STYLE="Propriétés:valeur">

Quelques remarques:

Les balises peuvent être groupées pour recevoir les mêmes propriétés :
H1,H2,H3 { color : blue }

Les déclarations de propriétés peuvent être groupées pour une ou plusieurs balises :
H1 { font-weight: bold; font-size: 10pt; line-height: 12pt; font-family: time }

Les propriétés peuvent elles même être regroupées :
H1 { font: bold 10pt/12pt time }

A l'intérieur d'une balise qui est régie par un style, les balises qui ne sont pas régies par ce style héritent des propriétés de la première.

des commentaires /* */ peuvent être ajoutés dans les déclarations de style CSS mais ils ne doivent pas être emboîtés.

Les classes et les identifiants

Un style peut être identifié par le nom CLASS comme le montre l'exemple suivant :

<HEAD>
<TITLE>Titre</TITLE>
<STYLE TYPE="text/css">H1.exemple { color: red } </STYLE>
</HEAD>
<BODY>
<H1 CLASS=exemple>texte</H1>
</BODY>

Si la balise est omise, toutes les balises seront affectées :
<STYLE TYPE="text/css">.exemple { color: red } </STYLE>

Un style peut être également identifié par le nom ID qui doit être unique dans tout le document, le style est alors défini par son nom précédé par le caractère #.

#etiq1001 { color : red }
H1#etiq1002 { color : green }
<P ID=etiq1002>Texte</P>

Unités

Les longueurs généralement positives représentent des valeurs relatives (en pourcentage) ou absolues.

Les valeurs relatives peuvent être :

em : exemple 0.5em : pourcentage par rapport à la taille de la police

ex : exemple 1ex : pourcentage par rapport à la taille de la lettre x

px : exemple 12px : pourcentage par rapport à la résolution d'une image en pixel

%: exemple 50% : pourcentage par rapport à la totalité de l'espace

Dans l'exemple suivant :

BODY {
font-size: 12pt;
text-indent: 3em;
}
text-indent désigne 3 x 12 = 36 points

Les valeurs absolues peuvent être :

pt : les points

in: inches (2,54cm)

cm: les centimètres

mm: les millimètres

pc: les picas

Les couleurs:

Les couleurs peuvent être désignées par leur nom en langue anglaise : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Elles peuvent aussi être désignées en valeur hexadécimale représentant la quantité de couleur en RGB : #FFFF00. Les valeurs à trois digits sont permises mais elles sont étendues en 6 digits.

Elles peuvent enfin être représentées par la fonction rgb qui renseigne sur les valeurs des couleurs élémentaire rouge vert bleu : rgb (10, 20 , 255) ou même sur les pourcentages (10%,20%,70%)

Les URL:

Les URL doivent être précédées de l'appel de fonction url

Exemple :
BODY { background: url(http://www.serveur.com/exemples) }

Les URL relatives sont interprétées par rapport à la source de la feuille de style et non pas par rapport à la source du document.

Propriétés:

Le tableau donné ci-dessous utilise les conventions suivantes :

propriété : valeur1 | valeur2 | valeur3 : propriété peut prendre l'une des trois valeurs

propriété : [valeur1 | valeur2 | valeur3}{1,4} : propriété peut prendre l'une des trois valeurs de un à quatre fois.

propriété : <valeur> : propriété peut prendre une valeur représentée par valeur

propriété : valeur1 || valeur2 || valeur3 : les valeurs valeur1 valeur1 et valeur3 peuvent être présentes simultanément

 

Publié dans l'informatique

Commenter cet article