| |
Le CSS : Cascading Style Sheets |
 |
| |
Quelles sont les applications des CSS ? |
|
D'une manière générale, lorsque la définition de paramètres de mêmes
natures et de mêmes valeurs se répètent systématiquement au sein d'un programme,
ces paramètres ont très probablement un point commun. Il s'agit en quelque sorte
d'une constante qui se répète au sein d'un programme. Si le programmeur désire
changer la valeur de cette constante, il doit en modifier la valeur dans
l'ensemble du programme. Cette tache est fastidieuse et source d'erreurs.
La centralisation des données consiste à regrouper les définitions
des constantes réutilisées au sein du programme, en un seul fichier dédié à cet
usage. Grâce à une instruction, tous les composants du programme peuvent
appeler ce fichier à distance, et l'intégrer comme s'il faisait parti
intégrante du code source. Une constante est alors définie qu'une seule fois
dans le programme et la modification de sa valeur s'applique sur l'ensemble de
l'application. C'est un gain de temps, d'efficacité, et élimine les bugs
liés aux oublis.
C'est dans cette optique que le CSS a été conçu. Le terme de
constante précédemment employé se voulait très général. En HTML, c'est la
définition de la mise en forme de chaque bloc de texte qui se répète au sein
d'un site Web. Les mises en forme des titres et des liens sont sans constemment
redéfinies par la balise HTML <font>. Or, tous ces éléments ont un point commun.
Selon la charte graphique, ils doivent être exactement de la même apparence. Il
en va de même pour les sous titres, et paragraphes de texte. Qu'adviendra t-il si vous
désirez changer l'apparence de tous vos textes et sous titres ? Vous devrez
passer inévitablement par la remise en forme de l'ensemble de votre site Web
manuellement.
Le CSS, ou les feuilles de styles en français, c'est la disparition de la balise <font>. Toutes les
définitions de mises en forme sont centralisées dans un fichier d'extension .css, et
inclues dans toutes les pages du site Web. Tous les titres de mêmes niveaux sont
affectés d'une définition de mise en forme commune, appelée
classe. Ainsi, la modification d'une valeur au
sein de la feuille de style entraîne la modification de la mise en forme des éléments concernés
sur le site.
| |
Une feuille de style externe |
|
Le fichier .CSS
Une feuille de style s'édite à l'aide du Bloc Notes de
Windows, ou à l'aide de votre éditeur de pages Web, s'il est compatible.
Créez alors un fichier d'extension .CSS.
Une feuille de Style s'édite sous Bloc Notes
L'inclusion de la feuille de style au document HTML
Ce qui fait la puissance des feuilles de styles, c'est
bien sur l'inclusion du fichier CSS au sein d'un document Web ! Le code
d'insertion se positionne dans la partie <head>.
<style type="text/css" src="css/style.css"></style>
<link rel="stylesheet" type="text/css" href="css/style.css">
La propriété SRC reçoit comme argument le chemin
absolu ou relatif d'une feuille de style. Il est préférable de créer un
répertoire prévu à cet effet, pour éviter de tout mélanger.
| |
Une feuille de style intégrée au document HTML |
|
Une feuille de style se définie dans la partie <head>
d'un document HTML, de la manière suivante :
<style type="text/css">
...
</style>
Bien que l'incorporation d'une feuille de style dans un document HTML soit
possible, l'opération doit être justifiée. En effet, le fait de définir une
feuille de style au sein d'un document Web n'a pas de sens, puisque tous les
avantages de la centralisation sont perdus.
| |
Les classes |
|
Qu'est-ce qu'une classe ?
Une feuille de style comprend une ou plusieurs classes. Il s'agit
de la
définition de mise en forme d'un texte. Par exemple, une classe portant le nom Titre,
définie l'apparence des titres, une autre classe nommée SousTitre se
chargera de définir l'apparence des sous titres. Il est théoriquement possible
de créer un nombre illimité de classes par feuille de style.
Les classes implicites
Une classe implicite s'applique automatiquement sur un texte, et ne nécessite
donc pas d'affectation dans le code HTML. Au sein d'une feuille de style, la
classe implicite se définie de la manière suivante.
Une classe implicite
Le nom d'une classe implicite correspond au
libellé d'une balise HTML. La mise en forme d'une classe implicite s'applique
automatiquement sur le texte encadré par la balise du même nom.
p
{
...
} |
p, ul, li
{
...
} |
| Classe s'appliquant
sur le texte compris dans les balises <p> |
Classe s'appliquant
sur le texte compris dans les balises <p>, ou <ul>, ou <li> |
Les classes explicites
Une bibliothèque de classes implicites n'est pas suffisant pour mettre en
forme la totalité d'un site Web. En effet, tous les paragraphes utilisant la
même balise HTML <p> n'ont pas toujours la même mise en forme. Un paragraphe de
citation apparaîtra en italique, tandis qu'un autre paragraphe signalant une
information importante sera en gras et de couleur rouge. C'est pourquoi, il
existe des sous classes, c'est à dire une différenciation de mise en forme au
sein d'une même classe. Pour effectivement
afficher un texte avec l'apparence définie au sein d'une sous classe, il faut
affecter de manière explicite dans le code HTML, le nom de la sous classe correspondante. Si l'affectation n'est pas
explicitement écrite au sein du code HTML, la mise en forme de la classe
implicite va alors se mettre en situation.
Quelques classes explicites
Il est possible de créer des sous sous classes. Il faut comprendre ce
système comme une arborescence, qui est théoriquement infinie en profondeur. Voici un exemple
concret mettant cela en évidence.
p {}
p.citation {}
p.citation.moliere {}
p.citation.voltaire {}
p.citation.racine {}
p.important {}
p.important.basse {}
p.important.moyenne {}
p.important.haute {}
La classe p est générale. Les paragraphes de citation utiliseront la
classe p.citation. Lorsqu'il s'agit d'une citation de Molière,
nous utiliserons la classe p.citation.moliere. De manière analogue,
lorsqu'il faudra mettre en avant un paragraphe important, nous utiliserons la
classe p.important. S'il s'agit d'un paragraphe à importance moyenne,
nous utiliserons p.important.moyenne.
Ce qui se trouve entre les accolades {} est bien sur réservé aux définitions
de mise en forme, que nous aborderons ci après.
| |
Les propriétés des feuilles de styles |
|
Apparences et effets sur les caractères
|
Propriétés d'apparences des textes |
| Propriété |
Type de valeur |
Description |
| font-size: |
Trois types possibles :
-
Valeur absolue en pixels
-
Pourcentages (%)
-
xx-small, x-small, small, medium, large,
x-large, xx-large, larger, smaller
|
Taille
des caractères. |
| font-family: |
Nom de la police de
caractère |
Exemples : Verdana, Arial, Courier |
| font-weight: |
-
normal, bold, bolder, lighter
-
100, 200, 300, 400,
500, 600, 700, 800, 900
|
Graisse
de la police.
Exemple : bold = gras |
| font-style: |
Normal, Italic,
Oblique |
Style
de la police |
| color: |
Couleur hexadécimale
ou Nom anglais : blue, red, green, etc. |
Couleur
du texte |
| font-variant: |
Normal, Small-Caps |
Small-Caps désigne un texte en majuscules miniatures. Petites Capitales
d'imprimerie. |
| direction: |
ltr, rtl |
Orientation du texte (Left To Right, ou Right to Left). |
| letter-spacing: |
normal, valeurs
absolue en pixels |
Espacement entres les lettres |
| text-decoration: |
none, underline,
overline, line-through |
Ajoute
une décoration sur le texte.
underline : soulignement
overline : Soulignement de dessus
line-through : barré |
| text-indent: |
Valeur absolue en
pixels, ou % |
Insère
un retrait sur la première ligne de chaque paragraphe. |
| text-transform: |
none, capitalize,
uppercase, lowercase |
Contrôle le type de lettre dans un texte.
uppercase : En majuscules
lowercase : En minuscules
capitalize : Première lettre de chaque mot en majuscule |
| white-space: |
normal, pre, nowrap |
Règle
le comportement d'un texte face aux espaces blancs.
pre : équivalent à la balise <pre>, affichage formaté, exactement comme il
apparaît dans le code source HTML.
nowrap : Force le texte à s'afficher sur une seule ligne, jusqu'au
prochain <br>. |
Positionnements et alignements
|
Propriétés des alignements |
| Propriété |
Type de valeur |
Description |
| text-align: |
left, right, center, justify |
Alignement horizontal |
| vertical-align: |
top, middle, bottom |
Alignement vertical (haut, milieu, bas) |
| clear: |
left, right, both,
none |
Interdit l'affichage d'éléments autour de l'élément concerné. |
| float: |
left, right, none |
Règle
le comportement d'un texte ou image au sein d'un autre objet. |
| position: |
static, relative,
absolute, fixed |
Règle
la position d'un élément. |
| visibility: |
visible, hidden,
collapse |
Règle
la visibilité d'un élément |
| display: |
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption |
Règle
le comportement d'affichage d'un élément. |
Les marges
|
Propriétés des marges |
| Propriété |
Type de valeur |
Description |
| margin-left: |
Auto, valeur en pixels ou % |
Marge gauche |
| margin-top: |
Marge supérieure |
| margin-right: |
Marge
droite |
| margin-bottom: |
Marge
inférieure |
La personnalisation des ascenseurs de défilement
|
Propriétés des ascenseurs de défilement |
|
propriété |
Type de valeur |
Description |
|
scrollbar-face-color: |
Couleur
hexadécimale ou
Nom anglais : blue, red, etc.. |
Arrière plan des boutons haut/bas et de l’ascenseur. |
|
scrollbar-darkshadow-color: |
Bordures (externes) haut et gauche des boutons haut/bas et de
l’ascenseur. |
|
scrollbar-shadow-color: |
Couleur des flèches haut/bas (inactives). |
|
scrollbar-highlight-color: |
Bordures droite et bas des boutons haut/bas et de l’ascenseur. |
|
scrollbar-3dlight-color: |
Couleur des flèches haut/bas (actives). |
|
scrollbar-track-color: |
Bordures (internes) haut et gauche des boutons haut/bas et de
l’ascenseur. |
|
scrollbar-arrow-color: |
Arrière plan de la zone de défilement de l’ascenseur. |
La personnalisation de la souris
|
Propriétés de la souris |
|
propriété |
Type de valeur |
Description |
| cursor: |
n-resize
ne-resize
e-resize
s-resize
se-resize
w-resize
sw-resize
nw-resize
crosshair
pointer
move
text
wait
help
hand
all-scroll
col-resize
row-resize
no-drop
not-allowed
progress
vertical-text
|
Apparence du curseur
au survol du lien. Survolez les valeurs pour voir un aperçu. |
Les arrières plan
|
Propriétés des arrières plan |
|
propriété |
Type de valeur |
Description |
| background-color: |
Couleur
hexadécimale ou
Nom anglais : blue, red, etc.. |
Couleur
d'arrière plan |
| background-image: |
url("img/bg.jpg"); |
Image
d'arrière plan |
| background-position: |
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-[valeur en %] y-[valeur en %]
x-[valeur en px] y-[valeur en px] |
Règle le
point de positionnement d'une image d'arrière plan |
| background-repeat: |
repeat
repeat-x
repeat-y
no-repeat |
Comportement
de l'image d'arrière plan. |
| background-attachment: |
scroll
fixed |
Comportement
de l'arrière plan lors de l'utilisation des ascenseurs de défilement |
| |
Application d'une classe au document HTML |
|
Le cas d'une classe implicite
La classe implicite s'applique sur une balise HTML du même nom.
La classe p s'applique sur le texte suivant :
<p> Texte </p>
Le cas d'une classe explicite
Comme présenté dans l'exemple des citations, l'application d'une sous classe
mentionne le nom de la dernière sous classe utilisée.
La classe
p.important.moyenne
s'applique sur le texte suivant :
<p class="moyenne">
texte </p>
De même, la classe
p.important s'applique sur le texte
suivant :
<p class="important"> texte </p>
Le cas hybride : l'interligne
L'utilisation de ce cas est à éviter, car ne permettant pas d'utiliser toute
la puissance des feuilles de styles. Son usage doit être justifié.
<font style="cursor: hand; text-decoration: underline;"> Texte </font>
Résultat : Texte
| |
Un bon usage des feuilles de styles |
|
La hiérarchisation des titres
Exemple de hiérarchisation des titres
Selon l'importance d'un site Web, on distingue plus ou moins les
différents niveaux de titres. Dans tous les cas, le dernier niveau s'applique
sur le paragraphe, c'est à dire le contenu réel du site, dépouillé des structures de
navigation.
Utiliser une feuille de style externe
Les feuilles de styles expriment toute leur puissance lorsqu'elles sont
externes, car permettant de centraliser toutes les définitions de mise en forme.
Une feuille de style externe n'interdit pas une feuille de style interne. La
feuille de style interne est prioritaire sur la feuille externe. Ainsi, il est
possible d'appliquer des classes particulières sur une page particulière.
Lorsqu'il s'agit d'un effet recherché, l'usage d'une feuille interne est
pleinement justifié.
Un exemple concret
Voir un exemple concret
Télécharger l'exemple
|
Côté Client : 