Les feuilles de style en HTML

CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent la modification de cette mise en page sans avoir à corriger tous les fichiers du site

Déclarations des CSS 3 façons de faire:  Intégré au cœur même des balises HTML de la page : Ex :  Intégré au header de la page (balises HEAD) sous forme de bloc. Il affecte alors toute la page. Ex : ……  Sous forme d'un fichier de style séparé, portant l'extension ".css" : il faut créer un fichier de mise en page auquel toutes les pages du site font appel, au travers de la ligne suivante, à insérer entre et :

Déclarations des CSS On définit d’abord les styles de la page (couleur de fond, …) et du texte des paragraphes: body { background-color : FFFFFF; } p { font-size : 12pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : ; }

Déclarations des CSS Les couleurs des liens (non visité, déjà visité et pendant le clic) sont définis comme suit : a:link {color: 00FFFF; text-decoration:underline;} a:visited {color: ; text-decoration:underline;} a:hover {color:FF0000; text-decoration:none;} De la même façon, les tableaux peuvent être homogénéisés : table { border-style:solid; border-width:1px; border-color:000000; width:50%;} td { border-style:solid; border-width:1px; border-color:FF0000; width:50%; }

Déclarations des CSS On peut également définir des styles prédéfinis pour les titres: h1 { font-size : 18pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : 0099FF; text-align: center; } h2 { font-size : 14pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : FF0000; padding-left:15px; }

Les classes Si on veut définir plusieurs styles de tableaux, on passe par la création de plusieurs classes de tableaux. Une classe porte le nom que l'on veut, elle doit être déclarée dans le fichier CSS et doit être impérativement précédée d'un point "." : Exemple:.grise { border-style:solid; border-width:1px; border-color:000000; background-color:999999; }.none { border-style:none; }

Les classes Il existe plusieurs style de bordures: "solid" (trait plein), "outset" (relief) ou "inset" (pointillés), "dotted"... On peut aussi avoir les 4 côtés différents puisque chaque bord peut être détaillé : border-style-left, border- color-right, border-width-top …

Les classes Dans ce cas, il faudra modifier un peu le code html des pages, pour choisir entre tel et tel style de tableau. Cellule 1 Cellule 2 Cellule 3! Cellule 4

Les classes L'utilisation des CSS permettant de dissocier le style du contenu, cela autorise la gestion complète de la mise en page :.banniere {.menu{position:absolute; top : 10px;top : 110px;left : 10px; width : 710px;width : 150px; height : 90px;height : 400px;border-style : solid;border-width : 1px; border-color : 0000FF;border-color : 00FF00;background-color : F0F0F0;}

Les classes.conteneur { top : 110px; left : 170px; ma page de test des css width : 550px; height : 400px; position : absolute; border-style : solid; banniere border-width : 1px; menu border-color : FF0000; conteneur background-color : F0F0F0; }

Les classes

Quelques bonnes adresses :    

Les frames en HTML

Définitions Permettent de diviser l’écran en fenêtres Avantage: on peut facilement modifier son site Inconvénients: délicats à utiliser, non utilisables par tous les navigateurs Le fichier HTML principal est indépendant des autres fichiers (fenêtres). Il sert à diviser l’écran. Chaque fenêtre correspond à une page web définie indépendamment

Fichier HTML principal Définition des fenêtres Fichier de la fenêtre 1 Fichier de la fenêtre 2 Fichier de la fenêtre …

Les balise... définit une structure de frames division horizontale de la fenêtre en % division verticale de la fenêtre en % bordure ou non couleur de la bordure

Les balises fichier affiché dans une fenêtre de frames... contenu pour les navigateurs ne gérant pas les frames interdiction du redimensionnement présence/absence des barres de défilement cadre cible par défaut des liens

Exemple : Cette page utilise des cadres, mais votre navigateur ne les prend pas en charge.