Il existe 3 manières de styler une page.
|
En appliquant un style à une balise HTML |
|
En créant des classes |
|
Par la création d'un élément unique (id) qui comporte son propre style. |
Nous ne retiendrons ici que la méthode utilisant HTML
Appliquer un style à une balise HTML c'est lui affecter des propriétés
 |
de police |
 |
d'alignement du texte |
 |
de bloc |
 |
de bord |
 |
de marge et de remplissage |
 |
de liste |
 |
de fond |
Lors de la création d'une feuille de style, toutes les propriétés affectées font partie de la page. La feuille de style est Interne. Lorsque le résultat est satisfaisant pour être appliquer à un ensemble de pages, il suffit d'exporter cette feuielle de style interne pour en créer une externe qui sera alors appliquée aux page concernés.
Il est nécessaire de connaître la structure du langage HTML.
Il est évident qu'il faut travailler en texte brut, c'est-à-dire non formaté en style HTML (donc ne pas utiliser la barre d'outils contextuelle en mode texte, ne surtout pas employer les méthodes d'alignement ni n'affecter une couleur et un type de police à du texte ou une couleur à une table et/ou à ses cellules).
Les seuls styles HTML à utiliser sont :
Affecter des propriétés de style à une balise, c'est lui donner un aspect définitif (si, comme dans cette page, une propriété de bord et de remplissage, a été affecté à l'élément <TABLE>, chaque nouveau tableau créé dans cette page présentera le même aspect). Une feuille de style fondée sur les balises HTML crée donc un modèle de page. Il est donc important de ne pas lui affecter trop de fioritures, mais plutôt se contenter d'un aspect minimum.
Une classe est un ensemble de propriété de style que l'on peut affecter à tout ou partie d'une page, c'est-à-dire à :
Un élément unique est caractérisé par un identifiant (id) dont le nom est unique dans la page. Cela permet (entre autre *) de lui affecter des propriétés de style particulières qui ne s'appliqueront qu'à lui. Ainsi, je peux créer un tableau auquel j'affecte un nom unique :
<TABLE id="tableauB">
Dans ma feuille de style, je crée alors un identifiant nommé tableauB (
) auquel j'affecte toutes les propriétés de style voulues. Cependant, GoLive ne permet pas toujours la possibilioté d'affecter un nom à un élément; dans ce cas, il faut passer par le code source.
* A partir du moment où un élément est nommé par un nom (Name) ou un identifiant (ID) on peut changer son comportement via JavaScript.
Attention : toute propriété omise prend les paramètres par défaut.
Exemple : si je style Body en arial 12 px puis H1 en 15 px sans préciser la police, celle-ci sera de l'Arial
Exception : Si vous stylez Body et Table et/ou TD, le style de Body dans les paragraphes placés après les tableaux ne reflèteront pas le style de Body dans certains navigateurs. Il est donc préférable de styler en police et en corps la balise <P> de la même manière que Body.
Le navigateur lit de gauche à droite et de haut en bas. Donc, en cas d'instructions similaires, c'est la dernière qui est prise en compte.
Exemple : Une page se référencée par une feuille de style externe qui utilise aussi des styles internes. Si <TD> de la feuille externe prcise des bords rouge de 2 pixels et qu'un <TD> de la feuille de style interne précise des bords jaune de 3 pixels, c'est cette dernière instruction qui sera valable.
Une feuille de style interne est placée, dans l'en-tête de la page, en dernière position.
Si une page fait appelle à plusieurs feuilles de styles externes, les styles seront appliqués dans l'ordre où les instructions seront lues. Donc tout dépend de l'ordre dans lequel vous disposez vos feuilles de styles externes.