Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

Feuilles de Style en Cascade

ISIM 1 – Pages Web Statiques 3T. Bourdeaudhuy – IG 2 I Saison TEST QCM en début de séance 15 minutes

Introduction

ISIM 1 – Pages Web Statiques 5T. Bourdeaudhuy – IG 2 I Saison Kezako ? HTML = outil de structuration de documents –On indique le sens des éléments (titre, chapitre, citation, …) –Le HTML permet aussi de spécifier une mise en forme, mais : –ce nest pas son objectif initial –Le rendu sera différent suivant les navigateurs CSS1 (W3C/1996) = outil de mise en forme de documents –Fichier texte séparé (1 seul téléchargement requis) –Spécification de la forme des éléments (un titre est centré en haut de la page, une citation est en italique, …) CSS2 (W3C/1998) = –CSS1 + formatage en fonction du périphérique daffichage (pda, imprimante,…)

ISIM 1 – Pages Web Statiques 6T. Bourdeaudhuy – IG 2 I Saison Ressources Recommandations W3C – –Traduction FR : Tutoriels – – Editeurs – Validation des feuilles de style – Implementation CSS dans IE et Mozilla – Exemple pratique –Site CSS ZEN GARDEN

ISIM 1 – Pages Web Statiques 7T. Bourdeaudhuy – IG 2 I Saison Différents types de style Style en ligne –Utilisation dun style pour une étiquette donnée à lintérieur même du –document –Ecriture dans létiquette même Style de document –Utilisation de styles pour toutes les étiquettes dun document donné –Définition au début dun document Style externe (Feuille de style) –Définition dans un fichier à part : utilisable par plusieurs documents –Extension.css

ISIM 1 – Pages Web Statiques 8T. Bourdeaudhuy – IG 2 I Saison Principe de base Une feuille de style est composée dun ensemble de règles qui sappliquent à un ou plusieurs éléments Chaque ligne est composée de –un sélecteur : sur quel(s) élément(s) sapplique la règle –des propriétés : conditions du rendu physique (style, police, … ) –des valeurs : correspondent aux valeurs prises par les propriétés Le nombre de couples propriété – valeur est illimité Exemple : b { color : red; font-size : 14p } /* Commentaires */

ISIM 1 – Pages Web Statiques 9T. Bourdeaudhuy – IG 2 I Saison Style en ligne titre 1 A éviter : ne respecte pas la séparation contenu/contenant

ISIM 1 – Pages Web Statiques 10T. Bourdeaudhuy – IG 2 I Saison Style interne h1 {font-family:helvetica; font-size:14px; font-style:italic; } Titre 1 Titre 2 Déclaration dans

ISIM 1 – Pages Web Statiques 11T. Bourdeaudhuy – IG 2 I Saison Style externe Titre 1 Titre 2 Dans ce fichier : uniquement des déclations CSS

ISIM 1 – Pages Web Statiques 12T. Bourdeaudhuy – IG 2 I Saison Priorités Cf. « Cascading » style sheets Plusieurs spécifications peuvent sappliquer à un même élément Dans ce cas, les priorités sont dans lordre croissant : –Style externe < style interne < style en ligne Ne pas écrire de texte directement au niveau body –Ecrire tout texte au moins dans un paragraphe Il existe des balises spécifiques pour utiliser les feuilles de style –div : peut contenir les autres balises –span : changer une séquence de caractères à lintérieur dune balise

ISIM 1 – Pages Web Statiques 13T. Bourdeaudhuy – IG 2 I Saison Classes Dans le cas ou les balises dun même type ne sont pas toutes concernées par le style –Faire des styles en ligne : difficulté de maintenance –Déclarer des sous classes de la balise Classes dune balise –Déclaration nom.classe {…} –Utilisation Exemple h1.section {color:red;} …

ISIM 1 – Pages Web Statiques 14T. Bourdeaudhuy – IG 2 I Saison Identificateur Unique Dans le cas ou les classes ne sont pas suffisantes Identificateur unique : –Déclaration #id {…} –Utilisation Exemple #style1 {color:green;} Titre 1 Titre 2

ISIM 1 – Pages Web Statiques 15T. Bourdeaudhuy – IG 2 I Saison Héritage de propriétés Si elles ne sont pas redéfinies, les propriétés qui sappliquent à une balise sappliquent également aux sous-classes.class et sous-éléments.id de cette balise Ex : – h1 { color:red} – h1.test {text-decoration:underline} Une balise utilisée dans une balise hérite de certaines de ses propriétés Ex : –body {color:red} Parfois : prise en compte de lordre des spécifications

ISIM 1 – Pages Web Statiques 16T. Bourdeaudhuy – IG 2 I Saison Pseudo-classes a:linkLien non visité a:visitedLien visité a:activeLien actif a:hoverPassage de la souris sur le lien a:focusLien sélectionné par tabulation :first-line, :first-letter, :first-child –Pseudo-formats pour les paragraphes :before, :after –Pseudo-formats pour le texte généré automatiquement –Numérotation automatique Ex : –td.Prix:before { content:"Prix: "; } –td.Prix:after { content:",- EUR"; } –td.Produit:after { content:" "attr(title); }

ISIM 1 – Pages Web Statiques 17T. Bourdeaudhuy – IG 2 I Saison Sélecteurs Sélecteur universel : * * {border: 1px red solid} Sélecteur d'élément : E h1 {color: yellow; font-weight: bold} Plusieurs sélecteurs E1, E2, E3 h1,h2 {color: yellow; font-weight: bold} Sélecteur d'identificateur : #id #myname {color: yellow; font-weight: bold} Sélecteurs de classe :.class E.class.header {background-color: black; color: white} Pseudo-classes : E:link E:visited E:active E:hover E:focus a:link {color: red}

ISIM 1 – Pages Web Statiques 18T. Bourdeaudhuy – IG 2 I Saison Sélecteurs CSS2 Sélecteur de descendance : E F (descendant) E > F (enfant direct) E:first-child ul ul {font-size: small} Sélecteur de voisinage : E + F (éléments frères) div + p {margin-top: 2em} Sélecteur d'attribut : E[att] E[att="val"] E[att~="val"] note[severity="warning"] {color: red; font-size: 16pt}

ISIM 1 – Pages Web Statiques 19T. Bourdeaudhuy – IG 2 I Saison Unités Les unités relatives : –em: la valeur du 'font-size' (largeur du m) –ex: la hauteur du x dans la fonte –px: pixels, relatif à la définition de l'écran –%: pourcentage Les unités absolues : –in: inches -- vaut 2.54 centimètres –cm: centimètres –mm: millimètres –pt: points -- vaut 1/72ème de inch –pc: picas -- vaut 12 points

ISIM 1 – Pages Web Statiques 20T. Bourdeaudhuy – IG 2 I Saison Couleurs Il existe une liste de couleurs prédéfinies –aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow et orange Exemples : em {color: #ff0000} /* #rrvbb */ em {background-color: rgb(255,0,0)} /* intervalles entiers */ em {background-color: rgb(100%, 0%, 0%)} /* intervalles réels 0.0% % */

ISIM 1 – Pages Web Statiques 21T. Bourdeaudhuy – IG 2 I Saison Alignement et contrôle de paragraphe text-indent : longueur –retrait à la première ligne dun paragraphe line-height : longueur –interligne vertical-align : top, middle, bottom, baseline, sub, super, text-top, text-bottom –Alignement vertical text-align : left, center, right, justify –Alignement horizontal white-space : normal, pre, nowrap –Césure

ISIM 1 – Pages Web Statiques 22T. Bourdeaudhuy – IG 2 I Saison Background background-color : couleur –Transparent par défaut background-image:url([URI]) background-repeat :repeat, no-repeat, repeat-x, repeat-y background-attachement : scroll, fixed, background-position : position de larrière-plan –verticalement : top, center, bottom –horizontalement : left, center, right –verticalement ou horizontalement : longueur

ISIM 1 – Pages Web Statiques 23T. Bourdeaudhuy – IG 2 I Saison Texte font-family : 'helvetica', 'arial', ''verdana', 'times', 'courier' et/ou une famille générique 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'. font-style : valeurs 'normal', 'italic', 'oblique' font-variant : valeurs 'normal' ou 'small-caps' font-size : longueur, xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', smaller, larger font-weight : valeurs 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900 font : ['font-style' 'font-variant' 'font-weight'] 'font-size' [ /'line-height'] 'font-family'

ISIM 1 – Pages Web Statiques 24T. Bourdeaudhuy – IG 2 I Saison Texte font-stretch : wider narrower condensed semi- condensed extra-condensed ultra-condensed expanded semi-expanded extra-expanded ultra-expanded normal word-spacing : longueur letter-spacing : longueur text-align : left, right, center, justify text-decoration : underline, line-through, overline, blink, none text-transform : uppercase, lowercase, capitalize text-shadow : couleur (ombrage)

ISIM 1 – Pages Web Statiques 25T. Bourdeaudhuy – IG 2 I Saison Boîtes À chaque élément du document est associée une boîte qui possède –des marges (margin) –une bordure (border) –du remplissage (padding) –un contenu (content) Des propriétés CSS contrôlent ces paramètres dans les quatre directions : –margintop', 'marginright', 'marginbottom','marginleft' et 'margin' –paddingtop', 'paddingright', 'paddingbottom', 'paddingleft' et 'padding

ISIM 1 – Pages Web Statiques 26T. Bourdeaudhuy – IG 2 I Saison Anatomie dune boîte

ISIM 1 – Pages Web Statiques 27T. Bourdeaudhuy – IG 2 I Saison Assemblage des boîtes Les boîtes des éléments successifs de la structure se juxtaposent avec fusion des marges verticales contiguës

ISIM 1 – Pages Web Statiques 28T. Bourdeaudhuy – IG 2 I Saison Bordures Épaisseur –border-top-width, border-right-width, border-bottom-width, border-left-width, border-width Couleur –border-top-color, border-right-color, border-bottom-color, border- left-color, border-color Style –border-top-style, border-right-style, border-bottom-style, border- left-style, border-style –Valeurs : none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset Raccourcis –border-top, border-bottom, border-right, border-left, border

ISIM 1 – Pages Web Statiques 29T. Bourdeaudhuy – IG 2 I Saison Listes & Tableaux list-style-type: circle, disc, square list-style-image: URL ou chemin list-style-position : inside ou outside caption-side –Position d'un titre de tableau table-layout –largeurs fixe/variable border-collapse –modèle de bordure border-spacing –Espace entre les bordures dans un tableau avec quadrillage empty-cells –Affichage ou non-affichage de cellules vides

ISIM 1 – Pages Web Statiques 30T. Bourdeaudhuy – IG 2 I Saison Curseurs Seule propriété pouvant être changée au niveau de la fenêtre daffichage –auto = curseur automatique (réglage normal). –default = curseur standard indépendant de la plate-forme. –crosshair = curseur de la forme d'une simple croix. –pointer = curseur de la forme d'une flèche. –move = curseur de la forme d'une croix signalant la possibilité de déplacer l'élément. –n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw- resize (nord, etc) –text = curseur sous une forme qui symbolise du texte normal. –wait = curseur sous la forme d'un symbole signalant l'attente. –help = curseur sous forme d'un symbole qui signale de l'aide pour l'élément. –url([fichier]) = curseur au choix, [fichier] doit être un graphique GIF ou JPG.

ISIM 1 – Pages Web Statiques 31T. Bourdeaudhuy – IG 2 I Saison Scrollbars scrollbar-base-color –couleur de base des barres de défilement scrollbar-3dlight-color –couleur pour les effets de relief (3D) scrollbar-arrow-color –couleur pour les pointeurs de défilement scrollbar-darkshadow-color –couleur pour les ombres scrollbar-face-color –couleur pour la surface scrollbar-highlight-color –couleur pour le bord haut et le bord gauche scrollbar-shadow-color –couleur pour le bord droit et le bord du bas scrollbar-track-color –couleur pour la barre de défilement non-cachée par le pointeur de défilement

ISIM 1 – Pages Web Statiques 32T. Bourdeaudhuy – IG 2 I Saison Positionnement Le positionnement est réalisé par la combinaison des règles suivantes : position définit la boîte bloc qui sert de repère (containing block) –'static' : positionnement normal –'relative' : par rapport au conteneur (décalages de la position static) –'absolute' : par rapport au conteneur du conteneur –'fixed' : par rapport à la fenêtre (pas de scrolling) left, right, top, bottom fixent un des bords de la boîte par rapport à la boîte racine. width, height, min-width max-width min-height max-height fixent les dimensions de la boîte Exemples : – –

ISIM 1 – Pages Web Statiques 33T. Bourdeaudhuy – IG 2 I Saison Positionnement overflow –Passage d'élément au contenu trop important direction : ltr, rtl –Sens de lecture (de gauche à droite ou droite à gauche) z-index : entier –Position de la couche en cas de superposition (max = devant) visibility : visible, hidden –Affichage ou non affichage avec réservation de place clip : haut droite bas gauche – Limiter le domaine d'affichage Display –Block : une nouvelle ligne est créée (P, DIV, TABLE) –Inline : pas de nouvelle ligne –None : pas daffichage –Dautres sont disponibles : list-item, table-xxx …

ISIM 1 – Pages Web Statiques 34T. Bourdeaudhuy – IG 2 I Saison CSS2 : Media Types La présentation peut varier selon les média : –aural, braille, embossed, handheld, print, projection, screen, tty, tv Définition de feuilles alternatives selon les média : Persistante : Par défaut : Alternative : Il est également possible print

Exercices

ISIM 1 – Pages Web Statiques 36T. Bourdeaudhuy – IG 2 I Saison Textes encadrés Un texte « encadre_a_droite » est un texte encadré dont la bordure droite est plus prononcé –Le fond sera gris, –La bordure droite noire, 5px –Autres bordures pointillées 1px –Utiliser une balise p en mode inline et block Attention à lordre des spécifications Utiliser cela pour tester les propriétés « margin » Comparer le résultat dans des navigateurs différents

ISIM 1 – Pages Web Statiques 37T. Bourdeaudhuy – IG 2 I Saison Arrière-plan Mettre le logo de lIG2I en image de fond –En haut à gauche –Positionnement absolu Deuxième version –Il ne bouge pas quand on scrolle Troisième version –Il se répète sur toute la page Tester en définissant limage comme fond de la balise body ou comme fond dune balise div bien placée –Comparer Firefox/IE6 : différences ? –Cf.

ISIM 1 – Pages Web Statiques 38T. Bourdeaudhuy – IG 2 I Saison Liens hypertextes « extraordinaires » Encadrés et allumés lorsque lon passe dessus –Changement de la casse –Texte en gras –Curseur différent Spécifiques pour les mails Rouge en cas de sélection par tabulation

ISIM 1 – Pages Web Statiques 39T. Bourdeaudhuy – IG 2 I Saison Images cliquables Reproduire le comportement des zones cliquable dimages à laide de css –Amélioration : Quand on passera sur une zone, elle sagrandira ! Comment faire ? –Un div a pour arrière plan limage complète –Plusieurs liens sont créés dans le –Leurs propriétés de taille les font se superposer à limage –Les pseudo-classes « hover » modifient les les arrières-plans des liens

ISIM 1 – Pages Web Statiques 40T. Bourdeaudhuy – IG 2 I Saison Structure de Navigation Transformer un ensemble de liens en un « menu » à gauche et en une « bannière » en haut –Utiliser une structure de liste Définir un format pour les actualités et le formulaire de recherche Définir un pied de page Définir trois feuilles de style –Principale –Flashy (couleurs vives) –Print (pour impression : ne pas afficher menus)

ISIM 1 – Pages Web Statiques 41T. Bourdeaudhuy – IG 2 I Saison Exercice pratique On fournit un texte brut Définir la sémantique des données Définir une feuille de style respectant la sémantique

ISIM 1 – Pages Web Statiques 42T. Bourdeaudhuy – IG 2 I Saison Crédits

ISIM 1 – Pages Web Statiques 43T. Bourdeaudhuy – IG 2 I Saison A ajouter CSS modulaires Remplacer la structure tableau par autre chose Menu qui ne bouge pas avec la page