HTML
Les feuilles de style
Les feuilles de style
Concept et utilitéPrésentationLe concept des feuilles de style n'est pas une nouveauté dans le domaine de la programmation Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena sous Unix), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par Netscape Navigator 3.0.Depuis les choses ont bien changé. D'abord les navigateurs 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1). ConceptDans un site Web de plusieurs centaine de page, il est important d'avoir une présentation homogène : de respecter la charte graphique du site. Celle-ci peut demander à ce que le titre de chaque page soit écrit en Arial, en gras avec une taille de 20 pixel et avec une couleur définie. Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web. Utilité et avantages
CompatibilitéA l'origine, chaque navigateur avait sa manière de traiter les feuilles de styles et il fallait apporter une codification propre au navigateur dans le codage des feuilles de styles. Aujourd'hui, un standard de codification existe et chaque navigateur se doit de le respecter.Définition d'un styleLa définition de base d'un style est simple :balise { propriété de style: valeur; propriété de style: valeur } Exemple : P.titrepg { font-family: Arial; font-style: italic } Dans cet exemple, la balise P.titrepg sera en Arial et en italique. Et dans votre document, toutes les balises Simple! Mais de nombreux commentaires s'imposent :
Styles internesIl faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".A l'intérieur des balisesCette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.< HTML > < HEAD > < STYLE type="text/css" > < !-- La ou les feuille(s) de style -- > < /STYLE > < /HEAD > < BODY >
A l'intérieur des balises < BODY >< /BODY >On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques...< HTML > < BODY > < H1 style="font-family: Arial; font-style: italic" > texte affiché en H1 < /H1 > < /BODY> < /HTML > Styles externesLe style internes permet de définir une présentation de style valable pour une page. Mais CSS nous propose de définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d'un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css par exemple, qui contiendra toutes les définitions de style. < HTML > < HEAD > --- Les différentes feuilles de style --- < /HEAD > < BODY > < /BODY > < /HTML > Ensuite, on crée une page normale, par exemple : page1.htm (bien entendu dans le même répertoire que le fichier styles.css). < HTML > < HEAD > < LINK rel=stylesheet type="text/css" href="styles.css" > < /HEAD > La balise avertit le browser qu'il faudra réaliser un lien.
Les classes et les IDNotion de classesOn désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].La syntaxe est ici aussi des plus simple. La définition d'un style était : balise { propriété de style: valeur } Elle devient : balise.nom_de_classe { propriété de style: valeur } remarquez le point entre balise et nom_de_classe Ou, comme la mention de la balise est facultative, .nom_de_classe { propriété de style: valeur } Attention! L'emploi du point (.) devant le nom de classe est indispensable. Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise. < balise class="nom_de-classe" > .... < /balise > Un exemple ? Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel : .essentiel { font-weight: bold; font-color: #000080 } Et dans le document Html, il suffit d'appeler la classe .essentiel quand cela se révèle nécessaire : < P class=".essentiel" > ... blabla ... < /P > < H1 class=".essentiel" >Titre 1< /H1 > < TABLE >< TR >< TD class=".essentiel" >cellule< /TD >< /TR >< /TABLE > Notion des IDComme la convention nom/point/nom est utilisée aussi en Javascript, il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose! La syntaxe est : #nom_de_ID { propriété de style: valeur } Et pour l'appeler : < balise id="nom_de_ID" > .... < /balise > Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi, Pour #essentiel{ ... } < P id=essentiel > est correct. Mais si on rencontre dans la même page < H1 id=essentiel > ce n'est plus correct ! Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes. Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable. < SPAN > et < DIV >UtilitéDernier point, il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID. SPANLa balise < SPAN > ... < /SPAN > permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe.
DIVLa balise < DIV > ... < /DIV > permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes.< HTML > < HEAD > < STYLE type="text/css" > .zone{font-size: x-small} < /STYLE > < /HEAD > < BODY > < DIV class=zone > < P >Commentaire :< /P > < P >N'oubliez pas l'attribut class! < /P > < /DIV > < /BODY > < /HTML > Positionner avec CSSQuel concepteur de pages Web n'a pas laissé échapper quelques jurons bien sentis en essayant, à grand renfort de tableaux, de placer précisément du texte ou une image là où il le désirait ?Le miracle est arrivé ! Outre le balise < LAYER > (mais qui était comprise que par Netscape 4.0), il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style. Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P. Position absolue ou relativeLa position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Htm. Précisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sûr. Positionner du textePlaçons en position absolue le texte "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left).< HTML > < HEAD > < STYLE type="text/css" > .pub{position: absolute; top: 100px; left: 25px; color: yellow; font-size: x-large; font-weight: bold;} < /STYLE > < /HEAD > < BODY > < DIV class=pub > Publication Html < /DIV > < /BODY > < /HTML > Ajoutons que plusieurs encodages sont possibles. Positionner une imagePlaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84.< HTML > < BODY > < span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" > < IMG src="htmlplus.gif" > < /span > < /BODY > < /HTML > Spécifiez toujours les propriétés width et heigth avec les feuilles de style. Ajoutons que, là aussi, plusieurs encodages sont possibles. Superposer du texte sur une imageReprenons l'image htmlplus.gif et on y superposera un texte, au pixel près dans la barre qui souligne le terme Html.< HTML > < BODY > < span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;" > < IMG src="htmlplus.gif"> < /span > < span style="position: absolute; top: 96px; left: 145px; color: yellow; font-size: x-small; font-weight: bold;" > Texte à superposer < /span > < /BODY > < /HTML > Liste des propriétésLes styles de policefont-family définit un nom de police ou une famille de police < nom > ou < famille > police précise (Arial, Times, Helvetica...)ou famille (serif, sans-serif, cursive, fantasy, monospace) H5 {font-family: Arial} font-style définit le style de l'écriture normal ou italique ou oblique H6 {font-style: normal} font-weight définit l'épaisseur de la police normal ou bold ou bolder ou lighter ou valeur numérique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900) P {font-weight: 300} font-size définit la taille de la police xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large ou larger ou smaller ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) P {font-size: 16pt} font-variant définit une variante par rapport à la normale normal ou small-caps P {font-variant: small-caps} font raccourci pour les différentes propriétés de police P {font: bold italic} Les styles du textetext-align définit l'alignement du texteleft ou center ou right H2 {text-align: center} text-indent définit un retrait dans la première ligne d'un bloc de texte souvent utilisé avec , n'oubliez pas dans ce cas . spécifié en inches (in) ou en centimètres (cm) ou en pixels (px) P {text-indent: 2cm} text-decoration définit un attribut du texte, soit barré, clignotant, etc. blink ou underline ou line-through ou overline ou none A:visited {text-decoration: underline} text-transform définit la casse du texte (majuscule, minuscule uppercase : met les caractères en majuscules lowercase : met les caractères en minuscules capitalize : met le premier caractère en majuscule P {text-transform: uppercase} color définit la couleur du texte par exemple en hexadécimal H4 {color: #000080} word-spacing définit l'espace entre les mots en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) P {word-spacing: 8pt} letter-spacing définit l'espace entre les lettres spécifié en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) P {letter-spacing: 5pt} line-height définit l'interligne soit l'espace entre les lignes du texte en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) P {line-height: 12pt} width détermine la longueur d'un élément de texte ou d'une image en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H1 {width: 240px} height détermine la hauteur d'un élément de texte ou d'une image en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H1 {heigh: 100px} white-space espace ou blanc normal ou pre ou nowrap PRE {white-space: pre} Les arrière-plansbackground-color définit la couleur de l'arrière-plancouleur (par exemple en hexadécimal) ou transparent H1 {background-color: #000080} background-image définit l'image de l'arrière-plan URL de l'image BODY {background-image: image.jpg} background-repeat définit la façon de répéter l'image d'arrière-plan repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou repeat-y (y = nombre de répétitions verticales P {background-image: image.gif; background-repeat: repeat-4} background-attachment spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran scroll ou fixed BODY {background-image: image.gif; background-attachement: fixed} background-position spécifie la position de l'image d'arrière-plan par rapport au coin supérieur gauche de la fenêtre {1, 2} {top ou center ou bottom , left ou center ou right} ou en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) BODY {background-image: img.gif; background-position: right top} background raccourci pour les différentes propriétés d'arrière-plan P {background: image.gif fixed repeat} Les margesmargin-top détermine la valeur de la marge supérieureen unité de longueur ou auto { margin-top: 12px } margin-right détermine la valeur de la marge droite en unité de longueur ou auto { margin-right: 12px } margin-bottom détermine la valeur de la marge inférieure en unité de longueur ou auto { margin-bottom: 12px } margin-left détermine la valeur de la marge gauche en unité de longueur ou auto { margin-left: 12px } margin regroupe les différentes propriétés de la marge Les bords et les "enrobages"border-top-width donne l'épaisseur du bord supérieurthin ou medium ou thick ou spécifié par l'auteur 23 {border-top-width: thin} border-right-width donne l'épaisseur du bord droit thin ou medium ou thick ou spécifié par l'auteur H1 {border-right-width: medium} border-bottom-width donne l'épaisseur du bord inférieur thin ou medium ou thick ou spécifié par l'auteur H5 {border-bottom-width: thick} border-left-width donne l'épaisseur du bord gauche thin ou medium ou thick ou spécifié par l'auteur H3 {border-left-width: 0.8cm} border-width regroupe les différentes propriétés de border-width border-color détermine la couleur de la bordure H3 {border-color: blue} border-style détermine le style du trait de la bordure none ou solid ou dotted ou dashed ou double ou groove ou ridge ou inset ou outset {border-style: solid dashed} border regroupe toutes les propriétés des bords padding-top valeur de remplissage haut entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H5 {padding-top: 5px} padding-right valeur de remplissage droite entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H4 {padding-right: 5px} padding-bottom valeur de remplissage bas entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H2 {padding-bottom: 5px} padding-left valeur de remplissage gauche entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) H5 {padding-left: 8px} padding regroupe les différentes propriétés de remplissage Les listeslist-style-type détermine le type de puces ou de numérotationdisc ou circle ou square decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha OL {list-style-type: square} list-style-image permet de remplacer les puces par une image url ou none OL {list-style-image: img.gif} list-style-position spécifie si les puces sont à l'intérieur ou à l'extérieur du texte inside ou outside UL {list-style-position: inside} list-style regroupe toutes les propriétés de liste Quelques informations complémentaires :Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent. Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive. Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9, le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret. La documentation officielle affirme que les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter. Oui. Les feuilles de style seront ignorées par les navigateurs qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs. Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés avec les navigateurs qui ne supportent pas les CSS et n'auront aucun effet avec les navigateurs qui supportent les feuilles de style. Ainsi, < H3 style="color: red" >< B >< FONT COLOR="navy">Cascading Style Sheets < ;/FONT& gt;< /B >< /H3 > apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer). et sous une autre couleur (noire ? bleue ? ...) sous un browser qui ne reconnaît pas les feuilles de style Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture. En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité. La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :
Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}. Vous l'avez compris, ce tutoriel est une ébauche qui permet de faire quelques pas avec les fuilles de style. Nous en resterons là dans le cadre de ce tutorial. Si vous souhaitez aller plus avant, il existre de site internet beaucoup plus étoffé et exhauxtif qui pourront satifaire votre sagacité ! |