Cours CSS avancé pour tout comprendre sur les feuilles de style
Qu'est-ce qu'une feuille de style ?
Une feuille de style est un document numérique qui va pouvoir spécifier toutes les caractéristiques de mises en formes du document lié à la balise à laquelle elle s'applique.
Concrètement, vous allez pouvoir définir pour chaque balise HTML, une mise en forme spécifique qui lui sera attachée.
Exemple 1 :
A la balise <H1> je vais pouvoir rattacher la police Arial, de taille 18 pixels, de couleur blanche. Chaque fois que j'utiliserai la balise <H1> dans mon document, tout le texte situé dans les limites de la balise recevra cette mise en forme.
Ainsi j'utiliserai les balises HTML uniquement pour spécifier le contenu du document. A une balise H1, je rattacherai un Titre, mais dont je serai libre de choisir la police, la taille, la couleur ... sans faire appel à d'autres balises qui alourdiraient mon document. La balise H2 indiquera un sous Titre, etc...
Toutes les balises HTML retrouveront leur sens premier.
Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un ordre de priorité sera déterminé par le browser.
Exemple 2 :
Je veux mettre une partie de mon texte dans une balise <H1> d'une autre couleur que celle définie par <H1>. J'utilise alors un autre marqueur de style (en l'occurrence peut être une classe dont on parlera plus loin), et le tour est joué. De même je peux vouloir étendre les propriétés d'H1, par exemple sur le style du caractère, il me suffira là encore de rajouter une mention de style par une balise ou un autre marqueur.
Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.
Utilité et avantages
Définition
La syntaxe d'un style est toujours la même, elle précise la balise à laquelle le style va s'appliquer, et les différents attributs du style. Les attributs sont enfermés entre deux accolades ou 2 guillemets (précédés de Style=) selon les cas, et chacun des attributs est séparé par un point virgule. On donne la valeur de l'attribut par la syntaxe suivante "nom de l'attribut:valeur de l'attribut".
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.
Commentaires :
H3 {font-family: Arial;
font-style: italic;
font-color: green}
H3 {font-family: Arial, Helvetica, sans-serif}
H1, H2, H3 {font-family: Arial; font-style: italic}
Il existe 3 manières d'utiliser et d'intégrer les feuilles de style dans un document HTML, intra-lignes, globales, ou importées. Chacune de ces manières a ses avantages et ses particularités.
A l'intérieur des balises <HEAD></HEAD> : CSS Globale
Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
La ou les feuille(s) de style
-->
</STYLE>
</HEAD>
<BODY>
A coté des balises : CSS Intra-lignes
Une feuille intra-ligne s'insère directement à côté de la balise qu'elle définit, elle ne constitue donc pas véritablement une feuille, simplement elle permet très localement de fixer des attributs à une partie d'un document. Sa déclaration est un peu particulière, en voici une (notez la forme Style=" "):
<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>
Signalons :
Dans un document séparé : CSS importée
Principe :
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css qui contiendra toutes les feuilles de style.
TD {font-family:Arial,Helvetica; font-size:10pt}
Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS :
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="/styles.css">
<HEAD>
Commentaires :
On appel sélecteur simple les balises HTML classiques auxquelles on a attribué des caractéristiques de style.
Mais ces sélecteurs simples présentent une contrainte importante, définie de manière générale, il est difficile de changer momentanément certains de leurs attributs ou bien d'en rajouter.
Pour résoudre ce problème, les concepteurs du CSS ont inventé les classes.
Une classe est ce qu'on appelle un sélecteur contextuel. Il va pouvoir venir modifier contextuellement une caractéristique du document.
<TABLE><TR><TD class="Toto ">cellule</TD></TD>...
Cette définition ne s'applique concrètement qu'à un cas particulier, celui de la balise A, la balise des liens.
Celle ci peut en effet connaître plusieurs contextes de formes selon que le lien est inactif, visité, ou en train d'être visiter.
Concrètement on peut définir alors pour chacun des états de la balise une mise en forme particulière, voici comment:
A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;}
A:active {color:red;}
A:hover {color:red; text-decoration:none;}
Les ID fonctionnent exactement comme les classes.
La syntaxe est :
Le principe de l'héritage
Certains éléments de la page HTML héritent des propriétés des styles définis. Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise H1:
Lorsque nous appliquons la balise H1 dans le corps de la page, il arrive fréquemment que nous y combinions d'autres balises comme ceci :
<H1> Le principe de <I> l'héritage </I> </H1>
...
SPAN
SPAN est une balise de marquage, qui va considérer une petite portion particulière de texte. Elle va servir à mettre en valeur des citations, des exemples, des extraits ...
On peut l'utiliser de la même manière que DIV avec des feuilles de style. Elle s'utilise également couramment avec des feuilles de style intra-lignes.
Ainsi, si je voulais écrire :
Toto est beau.
Le code serait :
<STYLE type="text/css">
.element {font-size: x-large; color: navy}
</STYLE>
Toto est <SPAN class=element>beau</SPAN>.
Généralités
Grâce au CSS, il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.
Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P représentant le positionnement dynamique.
Le positionnement dynamique n'est rien d'autre en fait qu'une série de nouveaux attributs de styles, spécialisés dans la gestion de la position et de la superposition du texte. Ce n'est pas grand chose mais cela fait tout.
Notons que ce positionnement n'est possible que sous les versions 4 de Netscape et d'Explorer. Et que cette technique est encore un peu hasardeuse à ce jour, surtout sur le plan de la compatibilité avec les deux browsers susnommés. De plus, si Explorer accepte des attributs CSS-P sur à peu près toutes les balises, Netscape est plus capricieux et pourra générer des erreurs.
Les attributs CSS-P se rajoutent dans les attributs des feuilles de styles classiques. Mais toutes les balises HTML ne peuvent recevoir les attributs CSS-P. De manière générale, seules les balises de bloc (DIV) peuvent utiliser CSS-P.
Position absolue ou relative ?
Position spécifie le type de positionnement du document. Il en existe 3 types, static (le type par défaut), absolue, ou relative.
Position absolue
La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser.
Il y a 3 options pour top et left :
Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour left.
Pour appliquer une position absolue à un texte vous pouvez utiliser les balises SPAN ou DIV. La balise DIV est préférable pour les grands textes qu'elle fera précéder et suivre d'un saut de ligne; la balise SPAN, conçue comme simple marqueur, sera utilisée pour encadrer un paragraphe.
Position relative
La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.
Un positionnement relatif sera donc traité dans le flux du document (qui est traité de bas en haut), et fera référence pour son positionnement à l'élément qui lui est immédiatement supérieur. Cette propriété est valable pour tous les types de balises.
Exemple d'application :
Soit l'image 1.jpg :
.toto {
position:absolute; top:10px; left:10px;
}
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50>
<B><DIV CLASS="toto">Toto et titi</DIV></B>
Donne en position absolue :
et en position relative avec "Toto et Tata":
Attributs
Clip
Il s'applique uniquement aux éléments de position absolue. Il va spécifier la zone de visibilité du document, c'est à dire l'endroit où le document contenu dans les balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de hauteurs fixés par clip.
La syntaxe de clip varie selon les navigateurs, mais les recommandations du W3C sont du type:
clip:rect(haut,droite,bas,gauche)
Exemple : prenons l'image 1.jpg avec CLIP
Remarquez que les ¾ de l'image ont disparu !
Visibility :
Visibility, précise la visibilité ou non du document. Elle possède deux options qui n'ont pas la même syntaxe sous Explorer et sous Netscape.
Z-index
Z-index, c'est l'attribut qui va définir l'empilement des feuilles de styles. Il indique l'axe vertical d'empilement, ou la priorité d'affichage entre éléments superposés. Il s'applique à tous les éléments de position relative ou absolue. Plus l'index est grand, plus l'élément est situé dessus. Plus il est bas, plus il est situé dessous.
Deux éléments de même index vont se superposer. C'est très pratique pour afficher du texte sur une image, ou vice-versa.
Exemple avec les deux images 1.jpg et 2.jpg :
<STYLE TYPE="text/css">
<!--
.toto {
position:absolute; top:10px; left:10px;
}
.titi {
position:absolute; top:30; left:30; z-index:2;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV>
<DIV CLASS="titi"><IMG SRC="2.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV>
donne :
Si l'on place le z-index:2 sur la classe Toto :
Les styles de police
font-family
définit un nom de police ou une famille de police
<nom> ou <famille>
police précise (Arial, Times, Helvetica...) ou
famille (serif, sans-serif, cursive, fantasy, monospace)
H3 {font-family: Arial}
font-style
définit le style de l'écriture
normal ou italique ou oblique
H3 {font-style: italic}
font-weight
définit l'épaisseur de la police
normal ou bold ou bolder ou lighter ou valeur numérique soit
(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: bold}
font-size
définit la taille de la police
xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large
ou larger ou smaller
ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {font-size: 12pt}
définit une variante par rapport à la normale
normal ou small-caps
P {font-variant: small-caps}
font
raccourci pour les différentes propriétés de police
P {font: bold italic}
Les styles du texte
text-align
définit l'alignement du texte
left ou center ou right
H1 {text-align: center}
text-indent
définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>.
spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
P {text-indent: 1cm}
text-decoration
définit une décoration (?) du texte, soit barré, clignotant, etc.
blink ou underline ou line-through ou overline ou none
A:visited {text-decoration: blink}
text-transform
définit la casse du texte (majuscule, minuscule)
uppercase (met les caractères en majuscules) ou
lowercase (met les caractères en minuscules) ou
capitalize (met le premier caractère en majuscule)
P {text-transform: uppercase}
color
définit la couleur du texte
par exemple en hexadécimal
H3 {color: #000080}
word-spacing
définit l'espace entre les mots
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {word-spacing: 5pt}
letter-spacing
définit l'espace entre les lettres
spécifié en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {letter-spacing: 2pt}
line-height
définit l'interligne soit l'espace entre les lignes du texte
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {line-height: 10pt}
width
détermine la longueur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {width: 200px}
height
détermine la hauteur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {heigh: 100px}
white-space
espace ou blanc
normal ou pre ou nowrap
PRE {white-space: pre}
Les arrière-plans
définit la couleur de l'arrière-plan
couleur (par exemple en hexadécimal) ou transparent
H1 {background-color: #000000}
background-image
définit l'image de l'arrière-plan
URL de l'image
BODY {background-image: image.gif}
background-repeat
définit la façon de répéter l'image d'arrière-plan
repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales
P {background-image: image.gif; background-repeat: repeat-4}
background-attachment
spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran
scroll ou fixed
BODY {background-image: image.gif; background-attachement: fixed}
background-position
spécifie la position de l'image d'arrière-plan par rapport au coin
supérieur gauche de la fenêtre
{1, 2}
{top ou center ou bottom , left ou center ou right}
ou en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
BODY {background-image: img.gif; background-position: right top}
background
raccourci pour les différentes propriétés d'arrière-plan
P {background: image.gif fixed repeat}
Les marges
margin-top
détermine la valeur de la marge supérieure
en unité de longueur ou auto
{ margin-top: 5px }
margin-right
détermine la valeur de la marge droite
en unité de longueur ou auto
{ margin-right: 5px }
margin-bottom
détermine la valeur de la marge inférieure
en unité de longueur ou auto
{ margin-bottom: 5px }
margin-left
détermine la valeur de la marge gauche
en unité de longueur ou auto
{ margin-left: 5px }
margin
regroupe les différentes propriétés de la marge
Les bords et les "enrobages"
border-top-width
donne l'épaisseur du bord supérieur
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-top-width: thin}
border-right-width
donne l'épaisseur du bord droit
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-right-width: medium}
border-bottom-width
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-bottom-width: thick}
border-left-width
donne l'épaisseur du bord gauche
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-left-width: 0.5cm}
border-width
regroupe les différentes propriétés de border-width
border-color
détermine la couleur de la bordure
H3 {border-color: yellow}
border-style
