Introduction aux feuilles de styles.


Les feuilles de style en cascade offrent un meilleur contrôle de l'emplacement et de la présentation des éléments sur une page. Par ailleurs, elles permettent de créer des effets spéciaux et de rendre un site accessible aux visiteurs équipés de navigateurs ou de périphériques de sortie spécialisés.
Cette technologie a été introduite par Microsoft avec la version 3.0 (1996), le but : modifier le contenu d'une page par une grande variété d'effets. 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, vous pouvez définir la couleur d'une police, sa taille, le positionnement d'un objet (image, texte, ...), les propriétés d'un tableau... Les feuilles de style permettent de faciliter le travail de présentation et de personnalisation du document, séparer les données de style du contenu, partager ou mêler des css, spécifier les médias pris en charge, offrir un choix du style à appliquer, améliorer les performances

         Note : Internet Explorer à partir de la version 3.0 et, Netscape à partir de la version 4 supportent les feuilles de styles.

Contenu d'une feuille de style

Une feuille de style en cascade (CSS) définit les styles que vous pouvez appliquer aux pages ou aux éléments de page. Chaque définition de style, ou règle de style, se compose d'un sélecteur suivi des propriétés et des valeurs de ce sélecteur. Voici quelques exemples simples de règles de style définies dans une feuille de style :

H1 { font-size: x-large; color: green }
H2 { font-size: large; color: blue }
.note { font-size: small }
#footer { font-family: serif }

Dans cet exemple, H1 et H2 sont des sélecteurs qui modifient les propriétés de mise en forme des balises HTML standard. Les propriétés et les valeurs des sélecteurs sont placées entre accolades { } — font-size est une propriété qui a pour valeur x-large. Les propriétés d'un sélecteur sont séparées par un point-virgule ( ; ). Dans l'exemple ci-dessus, .note est un sélecteur de classe et #footer représente un sélecteur d'identificateur.

Les feuilles de style en cascade permettent de définir un éventail de propriétés plus étendu que celui des styles HTML standard, à savoir :


La syntaxe des déclarations CSS.

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 devez spécifier le langage par défaut à 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 les Scripts, vous devez cacher le code des feuilles de styles à l'aide des commentaires :

<!--           //-->

Trois méthodes différentes sont possibles pour intégrer les feuilles de styles en HTML entre les balises <HEAD> et </HEAD>

Cela présente plusieurs avantages :

mises à jour de site plus aisées

changer le style sans toucher le contenu du site

créer votre feuille à l'aide de notepad

Les attributs obligatoires pour faire appel à une css externe via LINK sont

href="adresse de la css"

type="text/css" : type de données à charger

Place de la css, via l'attribut REL

rel="persistent" - pas d'attribut TITLE

rel="preferred" et TITLE="nom de la css"

rel="alternate" et TITLE="nom de la css"

 

Une seule méthode est possible pour intégrer l'instruction STYLE  en tant qu'attribut dans le corps du document

Les balises <SPAN> et <DIV> permettent d'étendre considérablement les possibilités de présentation.

A noter que : SPAN et DIV, prennent en charge les attributs ID et CLASS.

Les propriétés sont déclarées ainsi :
Nom: valeur; Nom: valeur


Attention à ne pas confondre la balise STYLE qui s'insère dans HEAD et s'applique au document (ou à des éléments nommés via ID ou CLASS) et l'attribut STYLE qui lui est insérer dans le code HTML et ne s'applique qu'à l'élément auquel il est adjoint.

La balise STYLE

placé dans HEAD, permet de définir le style de :

Les Attributs


type="content-type" : spécifie le langage de la css et remplace celui par défaut
media : "media-descriptor" : stipule le média de rendu (écran, téléphone, oral, ...)
title="texte" : nom de la css

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).

 

 

 

Le positionnement d'élément.


Un des avantages des feuilles de style, c'est le positionnement des éléments (bloc de textes, images ...) au pixels prés !! fini les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Pour positionner un élément il existe deux types de positionnement :


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 absolue

<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}.

Listes Propriétés

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-weight: italic}
font-variant normal, small-caps
 Variante de la police {font-weight: 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}

 

Liens Utiles

http://www.zvon.org/xxl/css1Reference/Output/index.html

http://www.w3.org/TR/REC-CSS2/indexlist.html

http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp