Les Feuilles de Styles

Transcription

1 Chapitre 6 Les Feuilles de Styles BEN MAHMOUD Chaker Chaker707@yahoo.fr Principe des feuilles de style Même idée que les styles des traitements de texte distinction entre la structuration du texte et les propriétés typographiques que l'on applique au texte les styles permettent d'appliquer certaines propriétés à des balises HTML plusieurs documents peuvent partager les mêmes instructions typographiques homogénéité de typographie et de présentation des pages auxquelles s'appliquent les styles l'apparence des documents peut facilement être modifiés en utilisant les styles définis Année Universitaire B.MAHMOUD Chaker Les feuilles de Styles 1 B.MAHMOUD Chaker Les feuilles de Styles 2 La mise en forme classique en HTML B.MAHMOUD Chaker Les feuilles de Styles 3 Rapide historique du langage CSS 1996 : Norme CSS 1 Définition d un standard permettant de préciser les règles de présentation des données contenues dans une page HTML (couleurs, polices, emplacement, etc.), 1998 : Norme CSS 2 Extension de la norme afin de gérer l ensemble des éléments présents dans HTML. Le contrôle du style est plus précis et la liste des attributs plus complète : XSL extensible Stylesheet Language Feuille de style associée à un document XML et qui permet de modifier sa présentation (plus puissant que le CSS). Nous aborderons ce point dans le cours dédié à XML/XSLT. B.MAHMOUD Chaker Les feuilles de Styles 4 1

2 Concepts de feuilles de style A chaque bloc d informations à mettre en forme, on va associer une étiquette pour la définir. Les étiquettes (format de mise en forme) seront quant à elles spécifiées ailleurs. Cela remplace la traditionnelle mise en forme durant laquelle on définit la police de caractères, la couleur, la taille, etc... L ensemble des étiquettes associé au texte devra être défini par la suite afin de permettre une mise en forme de la page dans le navigateur. B.MAHMOUD Chaker Les feuilles de Styles 5 Possibilités s offertes par CSS Caractéristiques ristiques du Texte Couleur (texte, fond d'écran), Police de caractères (famille, taille, style...), Espacement (lettres, mots...), Positionnement, Catégorie d'affichage Dans un bloc comme un titre H1 ou un paragraphe, Dans une liste(position, images, types...), Dans un tableau, Caractéristiques ristiques liées aux différents médiasm Styles adaptés à une restitution audio, Définition de mise en page pour impression. B.MAHMOUD Chaker Les feuilles de Styles 6 Exemple de présentation liée e aux données Exemple de présentation liée e aux données B.MAHMOUD Chaker Les feuilles de Styles 7 B.MAHMOUD Chaker Les feuilles de Styles 8 2

3 Avantages de cette nouvelle approche Séparation franche du contenu et de la mise en forme, Cohérence possible dans l ensemble du site grâce à une feuille de style unique pour toutes les pages, Le code HTML devient lisible et compréhensible par tout le monde, le code est plus concis, Réduire le temps de chargement des pages (quand le nombre de balises de mise en forme est important), Possibilité de changer le style du site à la demande de l utilisateur (changement du fichier CSS). Exploitation des feuilles de style B.MAHMOUD Chaker Les feuilles de Styles 9 B.MAHMOUD Chaker Les feuilles de Styles 10 Sémantique de définition d des styles La définition d un style se présente comme cela est spécifié ci-dessous : Balise { propriété du style : valeur; propriété du style : valeur;...} Exemple de mise en forme des titres H1 { font-family family: Arial; font-style style: bold; font-color color:green } Cette définition permet de spécifier que tous les titre <H1> seront en gras et de couleur verte. B.MAHMOUD Chaker Les feuilles de Styles 11 Définition d une d balise (résum sumé) B.MAHMOUD Chaker Les feuilles de Styles 12 3

4 Propriétés s des balises CSS On peut affecter plusieurs valeurs à une même propriété en CSS : H3 { font-family family: Arial, Helvetica, sans-serif } On peut associer un même style à plusieurs balises en même temps : H1, H2, H3 { font-family family: Arial ; font-style style: italic } On peut déclarer une balise en plusieurs fois : H1, H2, H3 {font-family: Arial ; font-style style: italic } H1 { font-color color: blue } H2 { font-color color: green } B.MAHMOUD Chaker Les feuilles de Styles 13 Syntaxe des propriétés s / valeurs Certaines propriétés regroupent un ensemble de propriétés individuelles Par exemple la propriété font regroupe { font-style, fontweight, line-height... }, Ainsi, H1 { font: bold 12pt/14pt helvetica } Est équivalent à : H1 { font-weight: bold; font-size; 12pt; line-height:14pt; font-family: helvetica } B.MAHMOUD Chaker Les feuilles de Styles 14 Liste des propriétés s : liées au texte Couleurs : color et background Color pour le premier plan (le texte en général) défini par valeur ou par code RGB Background pour le fond (couleur ou image). Pour une image, on peut préciser la position, la répétition... Exemples BODY { background : url(/images/ /images/fondhiver.jpg) blue } P.attention { color: red ; background:yellow } B.MAHMOUD Chaker Les feuilles de Styles 15 B.MAHMOUD Chaker Les feuilles de Styles 16 4

5 Liste des propriétés s : liées au texte Polices : font font-family family définit la famille. Il existe 5 classes de polices génériques : serif, sans-serif serif, monospace, cursive et fantasy, font-style définit le style : normal, italique (italic) ou oblique, font-variant définit aussi le style : normal ou petites capitales (small-caps), font-size définit la taille en absolu ou en relatif par rapport à la taille courante, font-weight définit l'épaisseur (bold, bloder ou 100, ). B.MAHMOUD Chaker Les feuilles de Styles 17 Liste des propriétés s : liées au texte B.MAHMOUD Chaker Les feuilles de Styles 18 Liste des propriétés s : liées au positionnement Le modèle propose la définition de rectangles ("boxes") ayant une marge avec à l'intérieur une bordure optionnelle, Définition des marges : margin, margin-bottom bottom, margin-left left, marginright, Définition du "bourrage" interne : padding, padding-bottom bottom, padding-left left, padding-right right, Définition des bordures : border, border-bottom bottom, border-left left, borderright, Définition de la hauteur : height et de la largeur : width du rectangle Définition du "flottement" d'un élément par rapport au texte : float B.MAHMOUD Chaker Les feuilles de Styles 19 Texte : letter-spacing :Définition de l'espacement interlettres word-spacing : Définition de l espacement inter-mots text-align : de l'alignement text-indent : de l'indentation line-height : de la hauteur des lignes, etc. Liste des propriétés s : Les autres Catégorie d'affichage d'un élément : table : dans une table et on peut préciser le titre (table- caption), une ligne (table-row)... none : pas d'affichage Caractéristiques des listes : list-style style-typetype définit le types des items (disc, circle, upper-latin latin, decimal...), list-style style-image définit des images pour les items, list-style style-position définit la position (inside, outside). Caractéristiques liées aux différents médias Définition de styles adaptés à une restitution audio, Définition de mise en page pour impression. B.MAHMOUD Chaker Les feuilles de Styles 20 5

6 Que faire une fois les styles définisd Il faut maintenant incorporer la définition des styles dans la page HTML afin de pouvoir les utiliser, Il existe plusieurs manières de procéder afin d utiliser un style dans une page HTML : Définition locale : les styles CSS sont définis directement dans la page HTML avant d être utilisés, Définition externe : les styles CSS sont définis dans un fichier externe qui est chargé par le fichier HTML lors de sa visualisation par un navigateur, La seconde méthode est à privilégier, mais nous allons aborder tout de même les 2 approches. B.MAHMOUD Chaker Les feuilles de Styles 21 Les définitions d locales La méthode la plus simple est d inclure les balises CSS directement dans le corps de la page HTML, Les informations liées au style des données sont alors incluses dans les balises d en-tête de la page HTML, Cela permet de bien différencier les informations de leur mise en forme, Chaque page peut alors posséder sa propre mise en page, Pour ajouter des styles dans une page HTML, il faut utiliser la balise <STYLE>. B.MAHMOUD Chaker Les feuilles de Styles 22 La balise <STYLE> Entre <head> </head> L'attribut TYPE Text/css pour la norme CSS text/javascript pour JASS (description JavaScript) Exemple (attention à la casse des mots-clés) <html> <head> <style type="text/css"> P { font-size:16pt; color: blue; } </style> </head> <Body> <p> Je suis étudiant à ESCEM</p> </body> </html> B.MAHMOUD Chaker Les feuilles de Styles 23 Les définitions d globales Afin de profiter pleinement des styles CSS définis pour mettre en forme l ensemble du site internet, il est possible de réaliser une ou des inclusions. B.MAHMOUD Chaker Les feuilles de Styles 24 6

7 La balise <LINK> Permettra de référencer d'autres fichiers externes dans le futur Entre <head> </head> Trois attributs REL="stylesheet" indique que le fichier inclus est une feuille de style (d'autres valeurs dans le futur ) TYPE="text/css" ou "text/javascript" - norme de styles utilisée dans le fichier HREF="mystyles.css" permet d'indiquer l'url de la feuille de style Il est possible de lier plusieurs feuilles de style tout en continuant d'utiliser des définitions internes Définition ponctuelle de style <P STYLE="font-size=35; color=blue;">p en bleu 35</P> B.MAHMOUD Chaker Les feuilles de Styles 25 Qu est ce qu une une classe? Les styles sont des éléments pratiques qui permettent s assurer de la cohérence du style graphique du site, Mais la définition des styles pose un problème de taille, comment faire pour changer les attributs d une partie des éléments? La première solution est de créer un type de balise par type de donnée, La seconde solution est proposée par la norme CSS avec l introduction des classes, Ces dernières permettent d associer à un type de balise, plusieurs styles en fonction des besoins. B.MAHMOUD Chaker Les feuilles de Styles 26 Sémantique de définition d des styles La définition d un style se présentait ainsi : Balise { propriété du style : valeur; propriété du style : valeur;...} Elle a maintenant évoluée comme décrit ci-dessous : Balise.nom_de_classe { propriété du style : valeur; propriété du style : valeur;...} La balise est facultative et la déclaration peut devenir :.nom_de_classe { propriété du style : valeur; propriété du style : valeur;...} Définition d une d balise (résum sumé) B.MAHMOUD Chaker Les feuilles de Styles 27 B.MAHMOUD Chaker Les feuilles de Styles 28 7

8 Classes de style On peut définir différentes "classes" une classe particulière pour un élément particulier (<h1>, <p>, <cite>, ) P.bleu {color: blue;} P.i {font-style: italic;} s'applique aux paragraphes qui se revendiquent de la classe "bleu" ou "i" une classe générale associée à un élément particulier P {font-size: 16pt; color: red;} s'applique à tous les paragraphes une classe particulière pour n'importe quelle balise.vert {color: green;} s'applique à toute balise revendiquant la classe «vert» attention! on ne peut pas cumuler des classes B.MAHMOUD Chaker Les feuilles de Styles 29 Définition d une d balise (résum sumé) B.MAHMOUD Chaker Les feuilles de Styles 30 Les IDs dans la norme CSS Afin d utiliser les classes CSS dans les programmes Javascripts qui utilisent aussi les. pour gérer les attributs, il a fallut trouver une parade. Les IDs fonctionnent de manière équivalente aux classes, la syntaxe devient alors : #nom_de_id { propriété du style : valeur; Pour l utiliser, il suffit d écrire : propriété du style : valeur;... } <balise id= nom_de_id >... </balise> B.MAHMOUD Chaker Les feuilles de Styles 31 Les IDs dans la norme CSS Notons qu il ne sera possible d effectuer qu un seul appel à #nom_de_id par page internet : Pour #ma_classe{... } <P id=ma_classe> est valide, Mais si, dans la même page, on rencontre une nouvelle utilisation de ma_classe, tel : <H3 id=ma_classe> cette déclaration est incorrecte, B.MAHMOUD Chaker Les feuilles de Styles 32 8

9 Modification du champ d applicationd Les sélecteurs permettent de spécifier plus finement les champs d application des styles définis à l aide du langage CSS, Des balises HTML Les balises H1 : H1 {...} Des balises HTML ayant certains attributs Les balises HR de largeur égale à 50%de la fenêtre : HR [WIDTH="50%"] {...} Des balises HTML d'une classe donnée Les balises H1 de classe intro (<H1 class=intro>) : H1.intro {...} B.MAHMOUD Chaker Les feuilles de Styles 33 Modification du champ d applicationd Une balise spécifique pour traiter un cas particulier d'un ensemble, La balise H1 d'identité plan (<H1 ID=plan plan>) H1#plan {..} ou #plan {..} Utilisation des Jokers (*) en CSS Toutes les balises ayant l'attribut LANG positionné, *[LANG] {... } Toutes les balises HTML de classe important, *.important {...} Des pseudo-classes qui prennent en compte certains aspects dynamiques (clicks...). B.MAHMOUD Chaker Les feuilles de Styles 34 Les pseudo-classes en CSS Caractérisées par un mot-clef séparé par deux points : des balises HTML : Balise_HTML:Mot_Clef Mot_Clef Exemple de la balise <a> pour les liens, Exemples de pseudo-classes, Survol d'une zone (active) par la souris : A:hover {...} Sélection d'une information : A:active {...} Activation d'un champ de saisie : INPUT:focus {...} B.MAHMOUD Chaker Les feuilles de Styles 35 La cas particulier de la balise <A> La balise lien est composée de plusieurs pseudo-classes par défaut reflétant l état du lien : Le lien : dans son état par défaut (non visité et non actif) A:Link Visité : Le site internet a déjà été visité dans le passé par le navigateur A:Visited Actif : Le site internet est actuellement actif (chargé dans une autre fenêtre/onglet) A:ActiveActive MouseOver : La souris se trouve à l heure actuelle audessus du lien A:Hover B.MAHMOUD Chaker Les feuilles de Styles 36 9

10 Exemple de définition d de la balise <a> B.MAHMOUD Chaker Les feuilles de Styles 37 Exemple <html><head> <style type="text/css">.standard {color: green; font-size: 10pt;} #cyan {color: cyan;} P {font-size: 16pt; color: yellow;} P.special {font-style: italic; color: red;} P#bleu {color: blue;} </style> </head><body> <p>redéfinition du standard P</p> <p class="standard">p classe standard</p> <p class="special">p classe special</p> <p class="standard" id="cyan">p classe standard mais cyan</p> <p class="standard" id="bleu">p classe standard mais bleu</p> <p class="special" id="bleu">p classe special mais bleu</p> <h1 class="standard" id="cyan">h1 classe standard mais cyan</h1> ID devient une classe... <h1 id="cyan">h1 mais cyan</h1> Impossible... <h1 class="standard" id="bleu">h1 classe standard mais bleu</h1> </body></html> B.MAHMOUD Chaker Les feuilles de Styles 38 Fichier de feuille de style : /* fiche1.css */.standard {color: green; font-size: 10pt;} #cyan {color: cyan;} P {font-size: 16pt; color: yellow;} P.special {font-style: italic; color: red;} P#bleu {color: blue;} Utilisation de feuilles de style <html><head> <Link Rel="stylesheet" Type="text/css" Href= "fiche1.css"> </head><body> <p>redéfinition du standard P</p> <p class="standard">p classe standard</p> <p class="special">p classe special</p> <p class="standard" id="cyan">p classe standard mais cyan</p> <p class="standard" id="bleu">p classe standard mais bleu</p> <p class="special" id="bleu">p classe special mais bleu</p> <h1 id="cyan">h1 mais cyan</h1> Impossible... <h1 class="standard" id="bleu">h1 classe standard mais bleu</h1> </body></html> B.MAHMOUD Chaker Les feuilles de Styles 39 Listes des propriétés des feuilles de styles Propriétés de polices Propriété font-family font-style font-weight font-size font-variant Valeur Police (Arial, Times, Verdana..) normal, italic, oblique lighter, normal, bold ou bolder. taille en points (pt), cm, %, normal, small-caps Description Police de caractère. Définit le style d'écriture Définit la graisse (épaisseur) de la police Définit la taille de la police Définit une variante (petites majuscules) B.MAHMOUD Chaker Les feuilles de Styles 40 10

11 Propriété color line-height text-align text-indent text-decoration text-transform white-space word-spacing width height "#RRGGBB" ou nom line-height: 12pt; text-indent: 5px; uppercase (majuscule), lowercase (minuscule) ou capitalize (première lettre en majuscule) normal (passage à la ligne automatique), pre (idem saisie), nowrap (pas de passage à la ligne automatique) word-spacing: 6px; Valeur left, center, right ou justify blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration) En points (pt), pouces (in), en cm, en pixels (px), ou en % En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit l'interligne Définit l'alignement du texte Définit l'indentation (retrait du texte) Définit une décoration Définit la casse du texte Césure Description Définit la couleur du texte Définit l'espacement des mots Définit la longueur d'un élément de texte ou d'une imag Définit la hauteur d'un élément de texte ou d'une image B.MAHMOUD Chaker Les feuilles de Styles 41 Listes des propriétés des feuilles de styles Couleurs et arrière plan Propriété background-color background-image background-attachment background-position Valeur "#RRGGBB" url( scroll, fixed top, middle, bottom, left, center ou right Description Définit la couleur d'arrière plan Définit l'image d'arrière-plan Spécifie si l'image reste fixe avec les déplacements de l'écran Position de l'image par rapport au coin supérieur gauche B.MAHMOUD Chaker Les feuilles de Styles 42 Listes des propriétés des feuilles de styles Marges Margin Propriété Margin-top Margin-right Margin-bottom Margin-left Exemple margin-top: 5px; margin-right: 0.5em; margin-bottom: 2pt; margin-left: 0; margin: 5px 0.5em 2pt 0; Description Valeur de la marge supérieure Valeur de la marge de droite Valeur de la marge inférieure Valeur de la marge de gauche Raccourci pour les propriétés de marge Listes des propriétés des feuilles de styles Bordures border-collapse Propriété border[-top -left -bottom -right]-width border[-top -left -bottom -right]-color border[-top -left -bottom -right]-style Valeur En points (pt), pouces (in), en cm, en pixels (px), ou en % border-left-color: #RRGGBB; solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie). Collapse, separate Description Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite] Couleur de la bordure [supérieure, de gauche, inférieure ou de droite] Style de la bordure [supérieure, de gauche, inférieure ou de droite] Effet» 3D» ou non B.MAHMOUD Chaker Les feuilles de Styles 43 B.MAHMOUD Chaker Les feuilles de Styles 44 11