Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1 http://www.info.univ-angers.fr/%7Egh/selfhtml_fr/css/formats/global.htm#class

1 http://www.info.univ-angers.fr/%7Egh/selfhtml_fr/css/formats/global.htm#classes (Stefan Münz) SELFHTML/Aides à la navigation Feuilles de style CSS Définir des formats CSS SELFHTML Définir des formats globaux - Construction de formats globaux - Définir des formats pour les repères HTML - Définir des formats pour les repères HTML imbriqués - Définir des formats liés à l'attribut - Définir des formats pour des classes - Classes en relation avec les éléments div et span - Définir des formats indépendants - Définir des pseudo-formats Construction de formats globaux Les possibilités décrites ici s'appliquent quand vous: - définissez globalement des formats pour un fichier HTML ou bien que vous - définissez un format global dans un fichier CSS séparé Les formats globaux suivent un schéma bien déterminé: Exemple: <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="content-type"> <title>Titre du fichier</title> <style type="text/css">  </style> </head> <body> <h1>36 points et rouge!</h1> </body> </html> Explication: L'exemple contient dans un passage style une définition de format pour l'élément h1 du fichier, donc pour les titres N° 1. Ces définitions de format ont toujours la même construction et se composent des parties suivantes: - Sélecteur: Par "sélecteur" on entend ce qui se trouve devant les parenthèses accolades. Le sélecteur désigne ce à quoi les définitions qui suivent s'appliquent. Dans l'exemple ci-dessus les formats s'appliquent à tous les titres N°1 (élément h1). Des sélecteurs plus complexes sont cependant également possibles. - Définitions: Les définitions proprement dites du format se trouvent dans les parenthèses accolades { et }. Elles consistent en une ou plusieurs propriétés CSS qui y sont notées et reçoivent une valeur. Dans l'exemple ci-dessus par exemple, les propriétés CSS color (couleur de police) et font-size (taille de police) sont utilisées. À la propriété color est affectée la valeur red, et à la propriété font-size la valeur 36pt. Entre la propriété et l'affectation de valeur doit toujours se trouver le caractère deux points ":". La définition se termine par un point virgule (;). Il n'y a que pour la dernière définition avant la parenthèse accolade de fermeture que le point virgule peut être omis. Pour les différentes propriétés et leurs valeurs possibles, reportez vous aux Chapitre: vue d'ensemble propriétés CSS. 2 Attention: Les espaces sont bien permis dans les définitions de format mais les premières versions du navigateur Netscape 4.x ont montré peu de tolérance à cette possibilité - en résumé il ignore les définitions. Bien que ce ne soit pas aussi lisible il est provisoirement préférable pour cette raison de ne pas utiliser d'espaces dans une définition de format. Ainsi des mentions telles que color:red; font-size:36pt; sont acceptées en tous cas, alors que color: red; font-size: 36pt; peut avec certaines versions plus anciennes de Netscape occasionner des erreurs. Définir des formats pour les repères HTML Dans un passage style ou dans un fichier CSS externe, vous pouvez définir des formats CSS pour des types d'éléments HTML par exemple pour les Chapitre: vue d'ensemble éléments pour structurer le texte ou bien pour les Chapitre: vue d'ensemble tableaux. Quand vous utilisez alors les éléments HTML correspondants dans le fichier HTML, tous les formats que vous avez définis pour le type d'éléments seront appliqués. Ainsi par exemple vous pouvez définir pour les titres N°1, qu'ils soient affichés dans la police Helvetica, avec une taille de 20 points, en rouge, en caractères gras et en italique avec un espace de 16 points le séparant du paragraphe qui le suit. Si alors dans le texte du fichier HTML vous définissez de la façon habituelle un titre N°1, ces dernières propriétés de format seront prises en considération. Exemple: <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="content-type"> <title>Titre du fichier</title> <style type="text/css"> body { background-color:#FFFFCC; margin-left:100px; } h1 { font-size:48pt; color:#FF0000; font-style:italic; border-bottom:solid thin black; } p,li { font-size:12pt; line-height:14pt; font-family:Helvetica,Arial,sans-serif; letter-spacing:0.2mm; word-spacing:0.8mm; color:blue; } </style> </head> <body> <h1>&Titre N°1</h1> <p>Ici un paragraphe normal</p> <ul> <li>Un élément de la liste</li> <li>Un autre élément de la liste</li> </ul> </body> </html> 3 Explication Pour définir un format global pour tous les éléments HTML d'un certain type, notez le nom de l'élément HTML comme sélecteur, et cela sans parenthèses pointues. Dans l'exemple ci-dessus les repères HTML body (corps du document), h1 (titre N°1), p (paragraphe de texte) et li (élément de liste) ont été notés de cette façon. Si vous voulez formater de la même façon plusieurs repères HTML, définissez tous les repères désirés en les séparant par des virgules, comme dans l'exemple ci-dessus pour p,li. Cela signifie donc la même chose que vous notiez: h1 { font-family:Helvetica,sans-serif; } h2 { font-family:Helvetica,sans-serif; } ou bien que vous notiez: h1, h2 { font-family:Helvetica,sans-serif; } À la suite sont inscrites les définitions de format désirées. Dans l'exemple ci-dessus sont affectées à l'élément body une couleur d'arrière-plan jaune clair (background-color:#FFFFCC;) et une marge gauche de 100 pixels (margin-left:100px;). Les titres N°1 (h1) reçoivent une taille de police de 48 points (font-size:48pt;), la couleur de police rouge (color:#FF0000;) et le style d'écriture en italique (font-style:italic;). Les paragraphes de texte (p) et les éléments de la liste (li) doivent être représentés avec une taille de police de 12 points (font-size:12pt;) avec une hauteur de ligne de 14 points (line-height:14pt;) dans la police Helvetica, ou si elle n'est pas disponible dans la police Arial, et si elle non plus n'est pas disponible dans une police Sans-Serif quelconque (font- family:Helvetica,Arial,sans-serif;). D'autre part des mentions concernant l'espacement des caractères (letter- spacing), l'espacement des mots (word-spacing) et la couleur du texte ont été définies. Sur les différentes propriétés et leurs valeurs possibles, voir les Chapitre: vue d'ensemble propriétés CSS. Définir des formats pour les repères HTML imbriqués Si vous ne mentionnez rien, un repère HTML à l'intérieur d'un autre repère HTML adopte les caractéristiques de ce dernier en y ajoutant seulement les siennes propres. Si par exemple pour le titre n°1 vous définissez la police Times et la couleur rouge, le texte situé dans un tel titre et formaté avec <i>...</i>, apparaîtra de la même façon en rouge et avec la police Times mais en plus il sera en italique. Vous pouvez aussi déterminer à l'aide de feuilles de style qu'un repère HTML n'aura certaines caractéristiques de formatage que s'il se trouve imbriqué dans un autre repère HTML déterminé. Ainsi vous pouvez décider par exemple que <i>...</i> placé dans des titres ne sera pas représenté en italique mais en couleur bleue alors que cette même commande placée dans d'autres repères HTML ne provoquera comme d'habitude rien d'autre qu'un affichage en italique. Exemple: <html> <head> <title>Titre du fichier</title> <style type="text/css">  </style> </head> <body> <h1>Nous étudions les <i>feuilles de style</i></h1> <p>Nous étudions les <i>feuilles de style</i></p> </body> </html> 4 Explication: Dans l'exemple ci-dessus il est établi que des passages de texte formatés avec les repères <i> ... </i>, ne soient pas représentés comme d'habitude en italique mais normal (font-style:normal;) et en couleur bleue (color:blue;), Mais alors seulement quand ce passage de texte i se trouve dans un titre n°1 (h1). Pour cela notez d'abord le repère hiérarchiquement supérieur dans l'exemple h1, suivi séparé d'un espace du repère hiérarchiquement inférieur dans l'exemple i. Dans la première ligne du passage <body> de l'exemple ci-dessus cette définition s'appliquera; dans la deuxième ligne par contre où le repère <i>...</i> est imbriqué dans un paragraphe de texte, il aura son effet habituel. Autres possibilités pour les repères imbriqués avec les CSS 2.0 À partir de CSS 2.0 existent d'autres possibilités pour les mentions de sélecteurs d'éléments imbriqués: Exemple <html> <head> <title>Titre du fichier</title> <style type="text/css"> div i { color:red; } div > p { color:blue; } div * b { color:violet; } div + p { margin-top:100px; } </style> </head> <body> <div align="center"> Texte dans un passage div avec <b>seulement du texte en caractères gras</b> et <i>en italique et <b>en plus du texte</b> en caractères gras</i>. <p>Paragraphe de texte dans un passage div avec <b>seulement du texte en caractères gras</b> et <i>en italique et <b>en plus du texte</b> en caractères gras</i>.</p> <table border="1"><tr> <td><p>Paragraphe de texte dans une cellule de tableau.</p></td> </tr></table> </div> <p>Paragraphe de texte hors d'un passage div avec <b>seulement du texte en caractères gras</b> et <i>en italique et <b>en plus du texte</b> en caractères gras</i>.</p> <p>Encore un paragraphe de texte.</p> </body> </html> 5 Explication: Les sélecteurs de l'exemple ont la signification suivante: div i { color:red; } Il est ainsi fixé, comme avec la syntaxe CSS-1.0, que les éléments i, dans la mesure où ils sont placés dans un élément div, recevront une couleur de police rouge pour le texte (color:red;). Ainsi l'élément i est alors également formaté en rouge, quand il est placé par exemple sous la forme: <div><ul><li><i></i></li></ul></div>. C'est pour cette raison qu'existent la possibilité, à partir de CSS 2.0 de fixer plus précisément à quelles imbrications la définition de format doit s'appliquer. div > p { color:blue; } Avec le signe > est établi dans ce sélecteur que l'élément p dans la mesure où il est placé dans un élément div, recevra une couleur de texte bleue (color:blue;). Mais seulement quand uploads/s3/ stefan-munz-definir-des-formats-css.pdf