Mise en forme - Optimiser

Mise en forme

Débuter Pour commencer... Optimiser Pour aller plus loin...
Ligne horizontale - Retour à la ligne - Alignement du texte - Bordures
Mise en forme d'un paragraphe - Couleurs - Image d'arrière-plan 		Bordure Marge entre la bordure et le contenu
Marge autour d'un élément Pointeur de la souris
Couleur et style d'une page Image d'arrière-plan
Position des éléments dans la page
Mise en forme d'un ensemble de pages
Cliquez sur le bouton droit de la souris, sélectionnez "Afficher la source",
puis recherchez le code qui vous intéresse.



Cette page donne des exemples pour les 3 types de feuilles de styles:
  1. feuilles de styles inline: pour définir la mise en forme d'un paragraphe
  2. feuilles de styles intégrées: pour définir la mise en forme d'une page web
  3. feuilles de styles externes: pour définir la mise en forme d'un ensemble de pages web

Pour plus d'infos, voir la rubrique  Feuilles de styles  de la page "Introduction - Optimiser".



1 - Mise en forme d'un paragraphe

Ceci est réalisé grâce aux feuilles de styles "inline".

Bordure

type de bordure

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 1 |||||

texte sans bordure

texte avec bordure "dotted"

texte avec bordure "dashed"

texte avec bordure "solid"

texte avec bordure "double"

texte avec bordure "groove"

texte avec bordure "ridge"

texte avec bordure "inset"

texte avec bordure "outset"

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

couleur d'une bordure

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 2 |||||

texte avec type de bordure "solid" et couleur "green"

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

largeur d'une bordure

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 3 |||||

texte avec type de bordure "solid" et largeur "thin"

texte avec type de bordure "solid" et largeur "medium"

texte avec type de bordure "solid" et largeur "thick"

texte avec type de bordure "solid" et largeur "3 pixels"

texte avec type de bordure "solid" et largeur "0.25 centimètre"

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

combinaison de plusieurs propriétés de bordure

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 4 |||||

texte avec type de bordure "dotted", couleur "red" et largeur "12 pixels"

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

application d'une bordure sur d'autres éléments que du texte

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 5 |||||


titre du tableau
titre 1 titre 2 titre 3
valeur 1 valeur 2 valeur 3
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Variantes de BORDER


Marge entre la bordure et le contenu

valeur en pixels

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 6 |||||

espace de 6 pixels entre le texte et la bordure




espace de 1.1 centimètre entre le texte et la bordure



|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

valeur en % de la largeur de la fenêtre

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 7 |||||

espace entre le texte et la bordure égal à 3% de la largeur de la fenêtre


|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Variantes de PADDING


Marge autour d'un élément

exemple

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 8 |||||

Construite autour de sa baie, Santiago de Cuba est enfouie dans une vallée semi-circulaire qui s'étend des flancs de la Sierra Maestra jusqu'aux eaux des Caraïbes. Certains guides touristiques disent qu'elle est "la plus caraïbe des villes cubaines", non seulement par son architecture, son atmosphère de bazar, ses rues étroites, mais aussi et surtout par ses habitants venus des îles voisines, de l'Afrique, de France et même, un peu, d'Asie.


|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Variantes de MARGIN


Pointeur de la souris

exemples

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 9 |||||

symbole du curseur "auto"

symbole du curseur "default"

symbole du curseur "crosshair"

symbole du curseur "pointer"

symbole du curseur "move"

symbole du curseur "e-resize"

symbole du curseur "ne-resize"

symbole du curseur "nw-resize"

symbole du curseur "n-resize"

symbole du curseur "se-resize"

symbole du curseur "sw-resize"

symbole du curseur "s-resize"

symbole du curseur "w-resize"

symbole du curseur "text"

symbole du curseur "wait"

symbole du curseur "help"


|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||



2 - Mise en forme d'une page web

Ceci est réalisé grâce aux feuilles de styles "intégrées", qui permettent d'appliquer à tous les éléments d'une page, les propriétés de mise en forme ci-dessus et les propriétés de texte de la page "Texte - Optimiser" .


Couleur et style d'une page

couleur et style

afficher la page exemple


Image d'arrière-plan

image en mosaïque

afficher la page exemple


image fixe

afficher la page exemple
Variantes de BACKGROUND

Position des éléments dans la page

Rappel:
L'origine des coordonnées X,Y de position des éléments est toujours le coin supérieur gauche.

exemple

afficher la page exemple



3 - Mise en forme d'un ensemble de pages web

Mise en forme d'un ensemble de pages web

exemple

  1. A l'aide d'un éditeur de texte basique, par exemple le bloc-notes de Windows, je crée un fichier que j'appelle mon_style.txt
  2. J'écris dans ce fichier les lignes suivantes:
    <!--
    body { background-color: #cc9900; color: #ffcc99;
    font-family: Arial, Helvetica, sans-serif; text-align: center }
    h5 { letter-spacing: 5mm }
    address { color: gray }
    a:hover {font-size: 25 }
    -->
  3. J'enregistre et je ferme le fichier
  4. Je change l'extension du fichier qui était "txt" en "css", ce qui donne : mon_style.css
  5. Ensuite, dans l'en-tête de chaque page web, grâce à la balise link je crée un lien vers le fichier mon_style.css
afficher la page exemple


Pour plus d'infos sur la création des pages web, voir le paragraphe  Liste des étapes à suivre  de la page "Introduction - Débuter"



Conclusion

Pour plus d'infos sur les feuilles de styles, voir le paragraphe  Feuilles de styles du carnet d'adresses. 
Page d'accueil