Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P....

Introduction Aux Systèmes d’Information et

Multimédia

Introduction Aux Systèmes d’Information et

Multimédia

T. Bourdeaud’huy S. Collart-Dutilleul

P. KubiakIG2I - Saison 2006/2007

(X)HTML / Pages Web Statiques

(X)HTML / Pages Web Statiques

Timothy Berners-Lee

Feuilles de Style en CascadeFeuilles de Style en Cascade

ISIM1 – Pages Web Statiques 3 T. Bourdeaud’huy – IG2I Saison 2006-2007

TESTTEST

QCM en début de séance 15 minutes

IntroductionIntroduction


Kezako ?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 n’est 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 d’affichage (pda,

imprimante,…)


RessourcesRessources Recommandations W3C

– http://www.w3.org/TR/ – Traduction FR : http://www.w3.org/2003/03/Translations/byLanguage?language=fr

Tutoriels– http://tecfa.unige.ch/guides/css/pointers.html– http://fr.selfhtml.org/css/proprietes/index.htm

Editeurs– http://www.w3.org/Style/CSS/#editors

Validation des feuilles de style– http://jigsaw.w3.org/css-validator/

Implementation CSS dans IE et Mozilla– http://www.quirksmode.org/css/contents.html

Exemple pratique– Site CSS ZEN GARDEN http://www.csszengarden.com/tr/francais/


Différents types de styleDifférents types de style

Style en ligne– Utilisation d’un style pour une étiquette donnée à l’intérieur même du– document– Ecriture dans l’étiquette même

Style de document– Utilisation de styles pour toutes les étiquettes d’un document donné– Définition au début d’un document

Style externe (Feuille de style)– Définition dans un fichier à part : utilisable par plusieurs documents– Extension .css


Principe de basePrincipe de base

Une feuille de style est composée d’un ensemble de règles qui s’appliquent à un ou plusieurs éléments

Chaque ligne est composée de– un sélecteur : sur quel(s) élément(s) s’applique 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 */


Style en ligneStyle en ligne

<h1 style="font-style:italic; font-family:helvetica; font-size:14px;">titre 1

</h1>

A éviter : ne respecte pas la séparation contenu/contenant


Style interneStyle interne

<html><head>

<style type="text/css">h1 { font-family:helvetica;

font-size:14px; font-style:italic;

}</style>

</head>

<body><h1>Titre 1 </h1><h2>Titre 2 </h2>

</body></html>

Déclaration dans <head>


Style externeStyle externe

<html><head>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body><h1>Titre 1 </h1><h2>Titre 2 </h2>

</body></html>

Dans ce fichier : uniquement des déclations CSS


PrioritésPriorités

Cf. « Cascading » style sheets Plusieurs spécifications peuvent s’appliquer à un même

élément Dans ce cas, les priorités sont dans l’ordre 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 à l’intérieur d’une

balise


ClassesClasses

Dans le cas ou les balises d’un 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 d’une balise– Déclaration nom.classe {…}– Utilisation <nom CLASS="classe"…>

Exemple<style>

h1.section {color:red;}</style>

<h1 class="section"> …</h1><h1 class="subsection"> …</h1>


Identificateur UniqueIdentificateur Unique

Dans le cas ou les classes ne sont pas suffisantes Identificateur unique :

– Déclaration #id {…}– Utilisation <nom id="identifiant"…>

Exemple<style>

#style1 {color:green;}

</style>

<h1 ID=“style1”>Titre 1</h1>

<h2 ID=“style2”>Titre 2</h2>


Héritage de propriétésHéritage de propriétés

Si elles ne sont pas redéfinies, les propriétés qui s’appliquent à une balise <X> s’appliquent également aux sous-classes <X>.class et sous-éléments <X>.id de cette balise

Ex : – h1 { color:red}

– h1.test {text-decoration:underline}

Une balise <X> utilisée dans une balise <Y> hérite de certaines de ses propriétés

Ex :– body {color:red}

Parfois : prise en compte de l’ordre des spécifications


Pseudo-classesPseudo-classes

a:link Lien non visité a:visited Lien visité a:active Lien actif a:hover Passage de la souris sur le lien a:focus Lien ‘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); }


SélecteursSélecteurs

Sélecteur universel : * * {border: 1px red solid}

Sélecteur d'élément : Eh1 {color: yellow; font-weight: bold}

Plusieurs sélecteurs E1, E2, E3h1,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}


Sélecteurs CSS2Sé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}


UnitésUnité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


CouleursCouleurs

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 0 - 255 */

em {background-color: rgb(100%, 0%, 0%)}

/* intervalles réels 0.0% - 100.0% */


Alignement et contrôle de paragraphe

Alignement et contrôle de paragraphe

text-indent : longueur – retrait à la première ligne d’un 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


BackgroundBackground

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 l’arrière-plan

– verticalement : top, center, bottom– horizontalement : left, center, right– verticalement ou horizontalement : longueur


TexteTexte

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'


TexteTexte

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)


BoîtesBoî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 : – ‘margin−top', 'margin−right', 'margin−bottom','margin−left' et

'margin'– ‘padding−top', 'padding−right', 'padding−bottom', 'padding−left'

et 'padding‘


Anatomie d’une boîteAnatomie d’une boîte


Assemblage des boîtesAssemblage des boîtes

Les boîtes des élémentssuccessifs de la structure se juxtaposent avec fusion des marges verticales

contiguës


BorduresBordures

É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


Listes & TableauxListes & 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


CurseursCurseurs

Seule propriété pouvant être changée au niveau de la fenêtre d’affichage– 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.


ScrollbarsScrollbars

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


PositionnementPositionnement

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 : – http://tecfa.unige.ch/guides/css/ex/boxing1.html– http://www.brainjar.com/css/positioning/


PositionnementPositionnement

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 d’affichage– D’autres sont disponibles : list-item, table-xxx …


CSS2 : Media TypesCSS2 : 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 : <link href="standard1.css" rel="stylesheet"

type="text/css" />

Par défaut : <link href="standard2.css" rel="alternate stylesheet" type="text/css" title="mainstyle" />

Alternative : <link href="standard3.css" rel="alternate stylesheet" type="text/css" media="screen" title="screen" />

Alternative : <link href="standard3.css" rel="alternate stylesheet" type="text/css" title="print" media="print"/>

Il est également possible d’utiliser @media print

ExercicesExercices


Textes encadrésTextes 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 à l’ordre des spécifications Utiliser cela pour tester les propriétés « margin » Comparer le résultat dans des navigateurs différents


Arrière-planArrière-plan

Mettre le logo de l’IG2I 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 l’image comme fond de la balise body ou comme fond d’une balise div bien placée– Comparer Firefox/IE6 : différences ?– Cf. http://www.quirksmode.org/css/contents.html


Liens hypertextes « extraordinaires »Liens hypertextes « extraordinaires »

Encadrés et allumés lorsque l’on 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


Images cliquablesImages cliquables

Reproduire le comportement des zones cliquable d’images à l’aide de css– Amélioration : Quand on passera sur une zone, elle s’agrandira !

Comment faire ?– Un div a pour arrière plan l’image complète– Plusieurs liens sont créés dans le <div>

– Leurs propriétés de taille les font se superposer à l’image – Les pseudo-classes « hover » modifient les les arrières-plans

des liens


Structure de NavigationStructure 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)


Exercice pratiqueExercice pratique

On fournit un texte brut Définir la sémantique des données Définir une feuille de style respectant la sémantique

http://www.w3.org/Style/Examples/011/firstcss.fr.html http://bluerobot.com/web/layouts/index.html http://www.glish.com/css/


CréditsCrédits

http://wam.inrialpes.fr/courses/CSSAmaya-Avr04


A ajouterA ajouter

CSS modulaires– @import

Remplacer la structure tableau par autre chose Menu qui ne bouge pas avec la page

Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P....

Documents

Transcript of Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P....