TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML feuilles de style en cascade (CSS) Lévis Thériault, hiver 2009
CSS (feuilles de style en cascade) CSS: Cascading Style Sheets Ajoutées à HTML 4.0 HTML contrôle la structure du contenu du document CSS contrôle la mise en page d un document HTML (polices de caractère, couleurs, etc.) 2
Fonctions et avantages des feuilles de style Contrôle précis des marges, de l'espacement des lignes, du placement des éléments, des couleurs, des polices de caractère Éliminer la nécessité de retaper les attributs de style HTML chaque fois qu'un nouveau style est nécessaire Capacité de modifier l'apparence générale d'une page Web ou même d'un site entier, en modifiant une seule feuille de style 3
Différents styles Externes: Le code CSS est dans son propre fichier texte Centralisation des propriétés de mise en page dans un fichier qui peut être chargé par plusieurs fichiers HTML (tout le site Web) Appelé style lié Internes: Le code CSS est ajouté au code HTML déjà présent Utile pour modifier la présentation d un seul élément ou d un document complet 2 formes: Au début de document pour modifier la présentation du document complet (style incorporé) Directement dans les balises HTML pour modifier l élément (style intégré) 4
Différents styles Feuilles de style EXTERNE vs INTERNE (globale, locale) CSS <head> <style > </style> </head> <body> </body> <body> <p style= " " > </body> Style lié (externe) Style incorporé (interne) Style intégré (interne) 5
Style lié Fichier HTML et fichier CSS sont deux fichiers séparés On ajoute alors à l en-tête du fichier HTML <LINK REL=STYLESHEET TYPE="text/css" HREF="fichier.css"> La balise LINK permet de relier un fichier à un autre L'attribut REL=STYLESHEET permet d'indiquer qu'on fait référence à une feuille de style L'attribut TYPE associe le type de média et ses paramètres L'attribut HREF fait le lien avec le fichier de styles 6
Style lié Exemple de fichier CSS: feuillestylelie.css BODY { background-color: black } H1 { color: yellow; font-weight: bold; font-size: 12 pt; font-family: Arial, Helvetica, sans-serif; } P { color: white; font-size: 10 pt; font-family: Courier New, Courier, monospace; } 7
Style lié Exemple de fichier HTML: exemplestylelie.html <HTML> <HEAD> </HEAD> <TITLE> Style li&aecute; </TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="feuilleStyleLie.css"> <BODY> <H1> Feuilles de style en cascade </H1> <P> Il est facile de concevoir des feuilles de style. Il suffit de connaître le langage HTML et les concepts de mise en page de traitement de textes. </P> </BODY> </HTML> 8
Style incorporé Placer dans l'entête (section HEAD) de la page Web (dans le fichier HTML) les éléments de style à l'intérieur de la balise <STYLE>..</STYLE> 9
Style incorporé <HTML> <HEAD> <TITLE> Style incorporé </TITLE> <STYLE TYPE="text/css"> BODY { background-color: black } H1 { color: yellow; font-weight: bold; font-size: 12 pt; font-family: Arial, Helvetica, sans-serif; } P { color: white; font-size: 10 pt; font-family: Courier New, Courier, monospace; } </STYLE> </HEAD> <BODY> </P> </BODY> </HTML> <H1> Feuilles de style en cascade </H1> <P> Il est facile de concevoir des feuilles de style. Il suffit de connaître le langage HTML et les concepts de mise en page de traitement de textes. Exemple de fichier HTML: exemplestyleincorpore.html 10
Style intégré Utilisation de l attribut < STYLE="valeur"> pour redéfinir la mise en page pour la balise courante seulement <HTML> <HEAD> <TITLE>Style intégré</title> </HEAD> <BODY> </BODY> </HTML> <P STYLE="color:red; margin-left:50pt; font-size:40pt; font-family: arial"> Texte qui sera rouge, gros et à 50 point du bord gauche avec police Arial. </P> <P STYLE="color:red; margin-left:50pt; font-size:40pt; font-family:arial black"> Texte qui sera rouge, gros et à 50 point du bord gauche avec police arial black. </P> Exemple de fichier HTML: exemplestyleintegre.html 11
Classes de style Pour ne pas changer tous les éléments d une page Par exemple, pour changer quelques paragraphes seulement, on utilise une classe pour ceux-ci Dans le fichier CSS: P { color : blue } /* tous les paragraphes */ P.attention { color : red } /* classe attention */ Dans le fichier HTML: <P>Paragraphe normal affiché en bleu</p> <P CLASS="attention">Paragraphe affiché en rouge</p> 12
Classes de style Possibilité de définir une classe utilisable pour tous les objets HTML Dans le fichier CSS: /* tous les paragraphes */ P { color : blue } /* classe pour les <p> */ P.attention { color : red } /* classe pour tous les objets */.important { color : red; background-color : silver } Dans le fichier HTML: <P>Paragraphe normal affiché en bleu</p> <P CLASS="attention">Paragraphe affiché en rouge</p> <P CLASS="important">Paragraphe spécial</p> <H1 CLASS="important>Titre spécial</h1> 13
Conteneur <SPAN> <SPAN> Pour associer un style ou une classe à quelques mots d un paragraphe Dans le fichier HTML: <P>Voici un paragraphe <SPAN STYLE="color: red">très</span> important</p> Exemple de fichier HTML: exemplebalisespandiv.html 14
Conteneur <DIV> <DIV> Pour associer un style ou une classe à plusieurs lignes de texte Dans le fichier HTML: <P> Voici un paragraphe <DIV STYLE="color:#FF0000"> très important</p> <H4>Ceci est un titre de section</h4> <P>Ceci est un paragraphe dans cette section</p> </DIV> Exemple de fichier HTML: exemplebalisespandiv.html 15
Pseudo-classes Il existe des classes prédéfinies pour les ancres: a:active (lien sélectionné) a:visited (lien déjà visité) a:link (lien pas encore visité) a:hover (souris au dessus du lien) Permet de modifier l apparence d un ancre selon le cas: si le lien a déjà été visité, s il est présentement sélectionné ou pas, etc. On peut combiner des pseudo-classes avec des classes: a.special:hover { color: red } <a class="special" href="index.html">retour</a> 16
Couleurs Nom des couleurs: 16 noms (red, blue, yellow, ) supportés par les CSS Triplet RGB: Hexadécimal: #000000 (i.e. #RRGGBB) Décimal: rgb(0, 0, 0) (i.e. rgb(red, green, blue)) Voir les liens suivants: http://www.visibone.com http://www.w3schools.com/css/css_colors.asp 17
Largeur et hauteur Width et Height permettent de spécifier respectivement la largeur et la hauteur d un objet <STYLE TYPE="text/css"> H1 { width : 100%; background-color : yellow; color : blue; } </STYLE> 18
Propriétés de l arrière-plan Couleur: background-color Image en arrière-plan: background-image ex: body { background-image: url(paper01.jpg) } Répétition de l image: background-repeat peut prendre comme valeurs: repeat, repeat-x, repeat-y et no-repeat Position de l image: background-position peut prendre comme valeur: top, center, bottom, left, right 19
Propriétés du texte Color permet d indiquer la couleur du texte Text-align spécifie l alignement du texte et peut prendre comme valeur: left, right, center, justify Text-decoration ajoute une décoration. Valeurs possibles: none, underline, overline, linethrough et blink. Text-indent pour spécifier l indentation de la 1e ligne d un paragraphe. Valeurs possibles: longueur, %, + ou -long (pour additionner ou soustraire à la valeur courante). 20
Propriétés du texte Word-spacing et letter-spacing ajustent l espacement entre, respectivement, des lettres et des mots. Ils prennent une longueur (ou normal) comme valeur. La longueur peut être précédée d un signe + ou (pour addition ou soustraction de la valeur courante) Direction pour spécifier le sens d écriture du texte qui prend comme valeur ltr (left to right) ou rtl (right to left) 21
Polices de caractère Il existe 5 grandes familles de polices pour CSS serif: police proportionnelle telle que Times sans-serif: police proportionnelle telle que Arial monospace: police non proportionnelle telle que Courier cursive: proche d une écriture à la main Fantasy Font-family : liste de polices de caractère à utiliser (séparées par des virgules) peut prendre comme valeur des polices explicites et/ou des familles 22
Polices de caractère Il est de bon style de spécifier aussi la famille si on spécifie une police explicite puisqu il est impossible de savoir quelles polices sont disponibles dans le fureteur du client h1 { } font-family : New Century Schoolbook, Times, serif; 23
Polices de caractère Font-size : peut prendre comme valeur: une longeur ou xx-small, x-small, small, medium, large, x-large, xx-large ou smaller, larger ou % (de l élément parent) Font-style: normal, italic ou oblique Font-weight : les valeurs les plus usuelles sont normal, ligther, bold et bolder Font-variant: normal ou small-caps Font-stretch: normal, wider ou narrower (pour élargir ou réduire le texte horizontalement Forme abrégée: font: valeurs séparées par espace ex: font: x-large italic bold arial 24
Bordures Toutes les bordures ne sont pas supportées par tous les fureteurs: vérifier avant d utiliser! S applique à tous les éléments ex: http://www.w3schools.com/css/tryit.asp?filename=trycss_borderstyle Border-style: dottet dashed solid double groove ridge inset outset Border-width: thin medium thick longueur Border-color: couleur de la bordure Chacune des propriétés précédentes existe aussi en version border-top-, border-right-, border-bottom- et border-leftex: border-top-style ou border-left-color 25
Marges Les marges indiquent l espacement entre un objet et les autres Margin permet de spécifier les marges de haut, de droite, de bas et de gauche (dans l ordre) en une seule déclaration ex: p { margin : 5px } On peut utiliser margin-top, margin-right, marginbottom et margin-left Espace entre le contenu et la bordure d une table: padding ex: table { padding: 5px } On peut utiliser padding-top,... 26
Listes On peut modifier l apparence des listes (<li>) grâce aux feuilles de style List-style-type indique le type de représentation: none, disc, circle, square, decimal, lower-alpha, upper-roman, lower-greek,... On peut utiliser une image avec list-style-image: url(image.gif) List-style-position: inside ou outside (position de la puce par rapport au texte) ex: ol { list-style-type : upper-alpha } 27
Commandes CSS avancées Voir la section «CSS Advanced» sur w3schools Image flottante à droite d un paragraphe: http://www.w3schools.com/css/tryit.asp?filename=trycss_float Menu horizontal: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5 Changement de curseur: http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor Paragraphe de dimension fixe: http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow Superposition des objets: http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2 28
Références Bodain, Y., Fiset, J-Y., Pilon, A. (2000). Notes de cours 4-720-00, HEC Montréal. http://www.w3schools.com/css/default.asp http://www.w3schools.com/html/html_styles.asp http://www.htmlhelp.com/reference/css http://www.blooberry.com/indexdot/css/index.html 29