Titre de page = Test et essais CSS classe css .titre10

Paragraphe P classe css .cadreD
Eléments de style à configurer:
élément 1
élément 2
élément 3
élément 4
élément 5
élément 6
élément 7
élément 8
élément 9

Le jeu de couleur de la page doit comprendre 5 teintes, combinés en 2 ensembles:

• Ensemble 1: couleur_Titres = ensemble de couleurs pour les titres (appliqué à la classe .titre10 , et aux balises H1 , H2 et H3 ):
  • couleur de texte : pour la suite cette couleur sera appelée couleur_TexteTitres.
  • couleur de fond : pour la suite cette couleur sera appelée couleur_FondTitres.
  • couleur de la bordure: pour la suite cette couleur sera appelée couleur_BordTitres , elle doit être dans la teinte de celle de couleur_FondTitres mais plus sombre.
• Ensemble 2: couleur_CadreD = ensemble de couleurs pour les cadres des remarques et le sommaire (appliqué à la classe .cadreD)
  • couleur de fond : pour la suite cette couleur sera appelée couleur_FondCadreD.
  • couleur de bordure : pour la suite cette couleur sera appelée couleur_BordCadreD , elle doit être dans la teinte de celle de couleur_FondCadreD mais plus sombre.

Element 1:
Dans la balise DIV logo en sommet de page doivent êtres placés 2 logos de retour aux niveaux supérieurs:
logo_intranet.png => retour intranet et logo_zone.png => retour index de la zone.
Ce calque aura comme style css la classe .enTete qui aura les caractéristiques suivantes:

• positionnement type absolu
• emplacement gauche et sommet = 0 pixel => les logos sont calés dans le coin en haut à gauche

Element 2:
Le titre de page ci-dessus est prédéfini: balise P classe css .titre10 avec le formatage suivant:

• police Arial, gras
• variante de caractères : petites capitales
• taille 18pt
• marge à gauche 100 pixels (pour ne pas être recouvert par les logos intranet et zone)
• alignement du texte : position centrée
• remplissage(= espace entre le bord du cadre et le texte): 10 pixels
• jeu de couleur = couleur_Titres

Element 3:
Le paragraphe de sommaire (balise P ci-dessus) doit avoir la classe css .cadreD qui aura les caractéristiques suivantes:

• flottant à droite
• 200 pixels de large
• marge autour : 10 pixels.
• remplissage : 10 pixels
• police de texte Verdana
• jeu de couleurs = couleur_CadreD

FIN DU CONTENU DU CADRE SOMMAIRE

Element 4: les titres

Titre 1: balise H1

La balise H1 doit être redéfinie pour avoir les caractéristiques suivantes:

• police Verdana
• taille des caractères 16pt
• jeu de couleurs = couleur_Titres

Titre 2: balise H2 

La balise H2 doit être redéfinie pour avoir les caractéristiques suivantes:

• police Verdana
• taille des caractères 14pt
• couleur du texte : couleur_TexteTitres
• bordure uniquement en bas, trait plein 2 pixels d'épaisseur, couleur couleur_BordTitres

Titre 3: balise H3

La balise H3 doit être redéfinie pour avoir les caractéristiques suivantes:

• police Verdana
• taille des caractères 12pt
• couleur du texte : couleur_TexteTitres

Element 5:
La page doit avoir les caractéristiques suivantes de formatage par défaut:

• marge 40 pixels à gauche, 20 pixels à droite
• police Arial
• taille des caractères 10pt
• couleur de fond blanche
• texte justifié

bla, bla, bla, bla, bla, bla, bla, bla, bla, blablablabla, bla, blablablablabla, bla, bla, bla, blablablablablablabla, bla
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, blablablablablabla, bla, bla, bla, bla, bla, bla, blablablablablabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, blablablablablablablabla, bla, bla, blablablablabla, bla, bla, bla, bla
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla

bla, bla, bla, bla, bla, bla, ici un lien visité, bla, bla, bla

bla, bla, bla, bla, bla, bla ici un lien non-visité (balise A href) bla, bla, bla

Element 6:
La balise A (les liens) devra être redéfinie pour présenter les caractéristiques suivantes:

• liens non-survolés: texte bleu, gras, non souligné
• liens survolés (lorsque la souris passe dessus = a:hover ): texte bleu, gras, souligné

Element 7:
ici insertion d'une image flottante : balise IMG ( fichier train.jpg ) classe .imageG avec les caractéristiques suivantes:

• image flottante à gauche de la page (le texte doit enrober cette image)
• marge de 10 pixels autour de l'image

bla, bla, bla, bla, bla, , bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,, bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla

Element 8:
ici insertion d'une image flottante : balise IMG ( fichier train.jpg ) classe .imageD avec les caractéristiques suivantes:

• image flottante à droite de la page (le texte doit enrober cette image)
• marge de 10 pixels autour de l'image

bla, bla, bla, bla, bla, , bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, , bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,, bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,

Element 9:
ici insertion d'une colonne alignée à droite: balise DIV (idem P ou SPAN) classe .colonneD avec les caractéristiques suivantes:

• largeur 1/3 de la page
• marge gauche 10 pixels
• espacement du texte 5 pixels
• bordure 1 pixel en pointillés, couleur = couleur_BordCadreD.

FIN DU CONTENU DE LA COLONNE

bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,, bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,, bla, bla, bla, bla, bla, bla, bla, blabla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,