Partie HTML TD 3 : Les feuilles de styles (Cascading Style Sheet) 1. Introduction Question : Comment remplacer la couleur noire des 50 paragraphes d'une page Web par du bleu et cela le plus rapidement possible, sans devoir les traiter un par un? Réponse : en ayant défini la couleur de tous les paragraphes dans un seul endroit. On peut définir l'apparence des éléments d'une page Web dans des feuilles de style (par exemple : décrire l'apparence des paragraphes de la page, des titres, des couleurs de fond, des liens). Cela occasionne un gain de temps lors de la création de la page et facilite des mises à jours ultérieurs sur ces styles. Une feuille de styles commune à toutes les pages d'un site, localisant ainsi en un seul endroit tout l'aspect visuel du site, permettra d'unifier l'aspect général en assurant une cohérence de présentation. 2. Trois localisations possibles pour les définitions du style Sur un élément HTML précis dans la page : dans la balise de cet élément, avec le paramètre style suivi de l'ensemble des attributs séparés par des points virgules ex : <P style="color : blue ; font-style : italic ; text-align : center">contenu du paragraphe</p> mettra ce paragraphe précis dans ce style particulier Sur la page : dans l'en-tête de la page, entre les balises <STYLE type="text/css"> </STYLE> La définition du style d'une catégorie d'éléments suit la forme : ex : <STYLE type="text/css"> balise de l'élément { attribut : valeur ; attribut : valeur ; } P{color : blue; font-size : 10pt; text-align : justify } H2 { text-align : center; font-family : arial ; font-style : italic; font-size : 24 pt; color : green; background-color : silver } </SYTLE> mettra tous les paragraphes et tous les titres de niveaux 2 de la page dans leur style réciproque Page 1 sur 6
Sur l'ensemble du site : Il faut tout d'abord créer le fichier de définitions des styles dans un fichier "toto.css" (on remplacera "toto" par un nom clair et évocateur), attaché ensuite dans chaque page Web du site par l'instruction : <LINK rel="stylesheet" type="text/css" href="toto.css"> Cette instruction sera placée dans l'entête des pages Web 3. Imbrication des définitions de styles : la notion de cascade Quand il y a des imbrications de styles contradictoires, c'est la définition la plus locale qui l'emporte. Dans le cas d'imbrications complémentaires, les définitions sont accumulées au fur et à mesure des "cascades de définitions". <HTML><HEAD> <STYLE> </STYLE> </HEAD> <BODY> P { color : red } <P style="color : green">ce paragraphe s'affichera en vert.</p> <P style="font-size:18pt">ce paragraphe s'affichera en rouge ET sera de taille 18</P> <P><FONT Color="yellow"><P>Ce paragraphe s'affichera en rouge * </P></FONT> <P><FONT Color="yellow">Ce paragraphe s'affichera en jaune*</font></p> </BODY></HTML> 4. Définition des styles dans l'entête de la page Web ou dans un fichier.css 4.1. Définition de styles pour toute une catégorie d'éléments HTML Mettre le nom de la balise correspondant à la catégorie, suivi des attributs voulus, entre accolades. P {color:blue; font-size: 10pt; text-align: justify; } permet d'appliquer un style à tous les paragraphes 4.2. Définition de styles communs à plusieurs catégories d'éléments HTML P, H1, H2, { font-family: verdana; } H1 { text-align: center; } P { text-align: justify; } * Le mélange de STYLE et de la balise FONT est déconseillé pour des raisons de "conflits de priorité" Page 2 sur 6
Cet exemple fixe une même police pour les paragraphes et les titres de niveaux 1 et 2. Ensuite, les titres de niveaux 1 seront centrés et les paragraphes seront justifiés 5. La notion de classe de style Il est parfois souhaitable de ne pas appliquer systématiquement le même style à tous les éléments d'une même catégorie (par ex des paragraphes de styles différents selon leur sens sémantique dans la page) Pour cela, on utilise la notion de classe de style créée par l'utilisateur. 5.1. Première étape : Créer les classes de style Dans la partie <STYLE> </STYLE> la classe de style est introduite par un point suivi d'un identificateur et ses attributs sont indiqués entre accolades :.paramenu {color:silver; font-family:verdana; font-size:24pt; font-weight:bold}.parat exte {color : black ; font-family : arial; font-size : 10pt} 5.2. Deuxième étape : Appliquer les classes dans les balises HTML <h1 class="paramenu">menu</h1> <p class="paramenu">choix1</p> <p class="paratexte">contenu d'un paragraphe associé au choix1</p> <p class="paramenu">choix2</p> <p class="paratexte">contenu d'un paragraphe associé au choix2</p> 6. Les styles avec les balises <div> et <span> Lorsqu'on veut attribuer un style particulier à des parties d'une page Web qui ne sont pas des objets de base HTML, on a recours aux balises <div> (section de texte) et <span> (fragment de texte). ex 1 : pour pouvoir mettre en forme de simples mots à l'intérieur des paragraphes, on encadre ces mots des balises <span> </span> ex 2 : pour mettre en forme une partie de la page Web différemment du reste, on encadre cette partie des balises <div> </div> On crée une classe de style correspondant à la mise en forme voulue et on applique cette classe dans la balise <span> ou la balise <div> (voir ci-dessus "La notion de classe de style ") ex: <HTML><HEAD> <STYLE> P { font-size:14pt } BODY {font-family :Verdana}.detail {font-family : arial ; text-align : center}.auteur {font-weight : bold ; font-size : 10pt} Page 3 sur 6
</STYLE> </HEAD> <BODY>.. Partie en police verdana </div> <div class="detail">... <p> ce texte est écrit par <span class="auteur">mrx</span> et révisé par <span class="auteur">mme Y</span> </p>... Partie en police arial, centrée Paragraphe en taille 14 sauf "MrX" et "MmeY" qui sont en taille 10 et gras. </BODY></HTML> Partie en police verdana Pour en savoir plus sur les CSS : http://www.infini-fr.com/sciences/informatique/reseaux/internet/worldwideweb/css/index.html http://www.tizag.com/csst/ 7. Exercice de synthèse 1) Dans la page Base_html.html créée précédemment, enlever de la balise <Body> la couleur de fond et la couleur de texte et définir ces propriétés dans l en-tête de la page. 2) De la même façon, supprimer l alignement des balises de titre et le préciser en en-tête. 3) Dans la page "Bases_html.html", créer 3 divisions correspondant aux 3 parties, avec pour chacune une classe qui définit son alignement, sa couleur et sa taille. 4) Dans la page "Bases_html.html", faites en sorte que tous les mots "paragraphe" soit sur fond noir (en utilisant les styles). 5) Créer un fichier de feuilles de style à votre convenance (vous définirez des styles pour l'arrière-plan, les paragraphes, les titres de niveaux 1). Créer une nouvelle page Web sans mise en forme, et y appliquer la feuille de style précédemment créée. Page 4 sur 6
8. Quelques exemples d'attributs de styles Attributs Descriptif Exemple color Permet de fixer la couleur d'avant-plan. color: purple; color: #FF00FF background Permet de fixer la couleur d'arrière-plan. background: red; background: #FF0000 backgroundimage font-family font-weight Permet de fixer une image d'arrière plan. Une image d'arrière plan prévaut sur la couleur d'arrière-plan. Cet attribut permet de spécifier la police de caractère à utiliser. Au cas ou la police n'existerait pas, il est possible de spécifier une liste de choix. La première police trouvée à partir de la gauche est appliquer. Permet de fixer le poids (ou la graisse) de la police de caractères. background-image: url ('nom_fichier_image'); font-family : verdana, arial; font-weight: bold; font-weight: bolder; font-decoration Permet de décorer la police de caractères font-decoration: underline; font-decoration: strike; text-align text-indent width height margin margin-top margin-bottom margin-left margin-right Cet attribut spécifie l'alignement du bloc texte. Permet de définir le retrait de la premier ligne du bloc de texte. Permet de spécifier la largeur de l'élément, taille de bordure comprise. Permet de spécifier la hauteur de l'élément, taille de bordure comprise. La marge externe n'est pas prise en compte dans la taille de l'objet. Elle est de plus transparente. Vous pouvez aussi la spécifier individuellement pour chaque coté. text-align: center; text-align: left; text-align: right; text-align: justify; text-indent: 10pt; text-indent: 15px; text-indent: 5%; width: 80pt; width: 100px; width:80% height: 25%; margin: 10px; margin-left:10%; margin-right: 10%; Page 5 sur 6
border border-style border-width border-color Ces attributs permettent de spécifier les caractéristiques de la bordure (son style de bordure, sa taille et sa couleur) border: 2px solid #FF00FF; border-style: solid; border-width: 2px; border-color: #FF00FF; Cas particulier sur les balises de liens hypertexte : A {text-decoration:none} A:hover {text-decoration:underline} A:active {color : red} A:visited {color : green} lien pas souligné lien souligné au passage de la souris lien qui devient rouge au moment du clic lien qui devient vert après avoir été visité Page 6 sur 6