On perd assez souvent du temps à essayer de formater une page afin que chaque titre soit en gras, taille 5, couleur cyan, .... Les feuilles de style en cascade (CSS) sont un moyen très habile de régler le formatage d'un ou de plusieurs documents.
Un style est un ensemble d'attributs regroupés sous un même nom, un attribut est un formatage particulier - gras, par exemple. Une feuille de style est un ensemble de styles.
Si l'on désire, par exemple, que tous nos hyperliens soient en italique,
on peut écrire: a { font-style: italique }- la balise "a"
(qui correspond à hyperlien) ainsi redéfinie s'appelle sélecteur
et le / les attributs (qui sont entre accolades) définition de style.
Il est aussi possible de définir plusieurs balises en même temps
: h1, h2, h3 { color; blue }.
Cela n'empêche en rien ensuite de donner en plus de nouveaux attributs
à une balises déjà redéfinie : h3 { font-family:
Courier New }, ainsi, si par la suite on veut changer le format de nos hyperliens,
on change juste le style, et non chaque lien un à un.
Plusieurs balises permettent de définir un style
contextuel, ainsi, si l'on veut qu'un texte en gras et en italique soit
rouge : b i { color: red }
Ne fuyez pas, vous n'aurez rien à taper comme code, Dreamweaver s'en charge, relax ...
En effet, Dreamweaver nous simplifie la tâche de créer des styles avec sa palette de styles. Pour l'activer : Fenêtre / Styles , ou encore appuyez sur F7, ou bien cliquez sur le bouton style du lanceur.
Pour commencer, il faut ouvrir la boîte de dialogue Editer feuille des styles, soit, si vous avez fait ce qui est écrit ci-dessus en cliquant sur Editer, soit en allant dans Texte / Style personnalisé / Editer feuille de styles , ou encore Ctrl+Maj+E.
Dans ces 2 cas, le code est entre les balises <head>...</head>
Pour modifier un style, ouvrez la boîte de dialogue Editer feuille de style, choisissez ce que vous voulez modifier et cliquez sur Editer. Faîtes les modifications.
Vous pouvez aussi copier ou supprimer un style grâce respectivement aux boutons Dupliquer et Supprimer de la boîte de dialogue Editer feuille de style.
Une classe de style, elle, s'applique à un bloc de texte. Après avoir choisi ce bloc de texte, en y plaçant le curseur tout simplement, allez dans Texte / Style personnalisé et choisissez la classe dans le sous-menu. Pour supprimer une classe de style, allez dans Texte / Style personnalisé et choisissez aucun.
|
Style
|
Description
|
|
type
|
mise en forme du texte (police, taille, couleurs, ...) |
|
arrière plan
|
couleurs et images d'arrière plan, leur positionnement, ... |
|
bloc
|
alignement et espacement du texte dans un bloc |
|
boîte
|
élément invisible qui entoure un bloc de texte (largeur, hauteur, marges, ...) |
|
bordure
|
sous-ensemble de boîte comprenant la largeur, la couleur et le style |
|
liste
|
types et formes des puces et des listes numérotées |
|
positionnement
|
emplacement d'éléments sur une page |
|
extensions
|
effets visuels du curseur, saut de page. Ils ne sont pas souvent pris en compte par les navigateurs. |
Tout cela peut vous paraître assez abscons. Le seul conseil que je puisse vous donner est : essayer, re-essayer, tirez-vous les cheveux, crisez grave. Une fois le succés atteint, croyez-moi, vous pourrez presque dire : "I'm the king of the css". Courage.