1 LES FEUILLES DE STYLES Cours Web 1A, chap. 2 V. Deslandres (dernière MàJ: 6/11/2006)

2 Utilité des feuilles de styles  Permettent de définir le look général du site et de la personnaliser à volonté –Balises et –Balises et  Permet de définir la mise en forme du contenu : –police par défaut, couleur, format, ….  On insère dans chaque page une feuille de style au niveau de l'entête  OBJECTIF : séparer le look du site de son contenu

3 CSS et W3C  CSS = Cascading Style Sheets –"feuilles de style en cascade"  Le css est officiellement reconnu par le W3C et donc normalisé –W3C = Consortium du World Wide Web crée des standards pour le Web. Sa mission est de mener le Web à son potentiel maximal World Wide WebWorld Wide Web –Consortium d'organismes privés et publics –surtout américains- qui définissent et spécifient les futurs développements web  XML, XHTML, DHTML etc.  TV web, web sémantique

4 Syntaxe et vocabulaire  Les feuilles de style définissent des « règles » : p { color: red; font-size:16pt; }  Il s'agit d'un bloc de déclarations comprenant –le "sélecteur" p, –les accolades { } qui encadrent le bloc, –les propriétés (ici, color et font-size), –les valeurs (ici, red et 16pt)  On peut mettre des blancs  Insensible à la casse*  En css, on doit toujours fermer les balises sélecteurs  Commentaires : /* …. */ non imbricables dans les déclarations de style, sinon dans le BODY

5 3 façons de faire du style  Individuellement pour un mot ou groupe de mots (style à la volée) : –syntaxe <span style="… " : – Blablabla – Blablabla  Feuille de style globale : dans l'entête (embedding) La syntaxe est incorporée à chaque fichier dans un bloc placé dans l'entête –s'applique à la seule page ainsi marquée  Importée = (linking) vers un fichier séparé indépendant qui porte l'extension.css –contient tous les codes utilisés dans toutes les pages où on aura placé une simple ligne (toujours la même) qui fait référence à ce fichier.css

6 Style interne ou importé : règles d'écriture  Vous pouvez écrire : H1 { font-family: arial; sans-serif; } H1 { font-size: 12pt; } H1 { font-weight: bold; } H1 { font-style: italic; } H1 { line-height: 14pt; }  ou mieux : H1 { font-family: arial; sans-serif; font-size: 12pt; font-weight: bold; font-style: italic; line-height: 14pt; } ou encore : H1 { font-family: arial; sans-serif; font-size: 12pt; font-weight: bold; font-style: italic; line-height: 14pt; } Écriture la plus fréquente tag ou sélecteur de la règle

7 Utilisation du tag de règle et HTML  On peut définir une règle de style CSS dans l’entête : –k { font-family : arial, sans-serif ; } –h3.green { color: green ; }  Et l’utiliser ensuite dans le BODY du HTML avec la balise adéquate : – Ici le texte est mis en forme selon le sélecteur "k" – Ici le texte est mis en forme selon le sélecteur "k" – Cette ligne en vert avec "H3. – Cette ligne en vert avec "H3.

8 Feuille de style « globale » : Feuille de style « globale » : <STYLE type="text/css" BODY { font-size: 30; background-color:yellow; color:indigo; } </STYLE>  Inconvénient : il faut répéter le style décrit par dans chaque fichier HTML  Voir l'exemple 1 et exemple1b l'exemple 1 exemple1b l'exemple 1 exemple1b

9 Partager une feuille de style  Solution pour pallier à cet inconvénient –(et lorsque les pages d'un site doivent avoir le même look)  On va écrire la feuille de style dans un fichier à part –et on va l'insérer dans toutes les pages  C'est un ficher html –Mais qui a l'extension.css –C'est ce fichier qu'on appelle "feuille de style"

10 Contenu du fichier titi.css  On insére dans l'entête de la page : –On récupère ainsi la feuille de style contenu dans la page titi.css BODY{ font-size:30; background-color:yellow; color:indigo; }  Cette feuille de style peut bien entendu être insérée dans plusieurs pages HTML Cf exemple2

11 Quelques options des feuilles de style BODY{font-size: 16pt; font-family: fantasy; line-height: 2; text-indent: 100px; color: indigo; background-color: coral; margin-left: 30px; margin-top: 50px; border-style: solid; border-color: yellow; letter-spacing: 3pt; } BODY{font-size: 16pt; font-family: fantasy; line-height: 2; text-indent: 100px; color: indigo; background-color: coral; margin-left: 30px; margin-top: 50px; border-style: solid; border-color: yellow; letter-spacing: 3pt; } Exemple 3 Taille police Police Interligne Taille indentation Couleur texte Couleur fond Marge gauche Marge haut Style cadre texte Couleur cadre Espace lettres

12 font-family et font-size  Font-family –On peut mettre plusieurs polices séparées par des virgules : cela permet, si le client n'a pas la police, de passer à une autre plutôt que celle par défaut du navigateur… –Si la police contient un espace : encadrer de guillemets: "New Roman", "Courier New"  Font-size –soit valeur prédéfinie (xx-small, x-small, small, medium, large,.., xx- large), –soit taille en points (pt), pixels (px), mm ou cm, inch (in), % –soit taille relative (larger, smaller par rapport à l'élément parent) –Attention, la taille en pixels ne permet pas le redimensionnement automatique du texte …

13 Redéfinir les balises  Certaines balises imposent au texte des options prédéfinies, contenues dans les feuilles de style : –on a la possibilité de redéfinir ces options  Exemple : H1 { font-size: 22pt; text-align:center; } Dorénavant, les éléments mis entre les balises H1 seront en 22 points et centrés  Voir l'exemple 4 l'exemple 4l'exemple 4

14 La balise La balise  La balise DIV permet de définir différentes parties dans une page –On peut ensuite affecter un style par partie  texte de la partie 1 texte de la partie 2 texte de la partie 3  texte de la partie 1 texte de la partie 2 texte de la partie 3  Le id est l'identifiant de la partie –Ne pas donner le même id à 2 parties différentes !

15 Une page avec n parties  Par exemple, on définit 3 parties : –la première ne porte pas de nom, –la deuxième s'appelle toto –la troisième titi  On peut définir les styles associés aux DIV par le symbole #id: –la première partie : aura le style par défaut, –la deuxième : #toto –la troisième le style : #titi  Voir l'exemple 5 l'exemple 5l'exemple 5

16 Positionnement absolu  On peut définir de différentes manières la position du texte sur la page : –Position relative ou fixée de manière absolue  Position: absolute; –spécifier sa position précisément (top, bottom, left, right), –sa largeur et sa hauteur (width et height) –définir l'ordre d'apparition des textes  z-index : le niveau 1 est celui par défaut, 2 devant, etc…  Exemple : #essai { position:absolute; top:200;left:400; width:200; height:300; z-index:2; } voir l'exemple 6

17 Encadrements  Différents attributs caractérisent l'encadrement : –L'attribut border-style définit le type de bordure (none, solid, inset, outset) –border-color : sa couleur, –border-width : son épaisseur  Exemple : border-style: solid; border-color: red; border-width: 1;  Voir l'exemple 7 l'exemple 7l'exemple 7

18 border-style: outset; border-color: drackgreen; border-width: 9; Style de bordure outset = ombre en bas à droite

19 Style de bordure border-style: inset; border-color: red; border-width: 9; Inset = ombre en haut à gauche

20 Identifiant et classe  On peut aussi définir des classes et sous-classes de style:.style –la classe est un style pouvant être partagé par plusieurs éléments dans la page –Exemple : le paragraphe tutu possède le style #tutu et en plus, les attributs du style style1 – la classe de style.style1 est défini dans l’entête entre les balises STYLE  CLASS est utilisable dans presque toutes les balises HTML sauf : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.

21 Classes de style : id vs. class   Exemples :.olive { font-family: arial, sans-serif ; color: olive ; font-size: 12pt ; font- style: italic ; background-color: #FFFFFF ; } k k { font-family : arial, sans-serif ; } k. times { font-family : times ; }  Le texte est ici celui de la sous-classe.olive donc en couleur olive et en style italique avec un corps 12pt.  Le texte est ici celui de la sous-classe.olive donc en couleur olive et en style italique avec un corps 12pt.  ATTENTION : id est prioritaire sur la classe  Voir l'exemple 8, où : l'exemple 8l'exemple 8 –id définit le positionnement absolu du texte –class définit les couleurs, police et alignement

22 Style « à la volée »  Pour s’affranchir des règles de style définie pour la page, on peut pratiquer le style à la volée…  La balise SPAN peut ainsi être utilisée pour appliquer une mise en forme différente sur certains éléments du texte (un mot ou un groupe de mots). –Pour un paragraphe entier on utilisera la balise DIV  On peut imbriquer des SPAN dans d'autres SPAN.  On a le choix entre : SPAN STYLE ou SPAN CLASS

23 Exemple balise SPAN Si 2001 a été l'année "ADSL", 2002 pourrait-elle être l'année "satellite" dans le petit monde de l'accès Internet ? En effet, le géant Tiscali (qui possède Liberty Surf, Infonie, WorldOnline et Freesbee en France) a confirmé son intention de lancer en Europe une offre d'accès à Internet par satellite courant Si 2001 a été l'année "ADSL",2002 pourrait-elle être l'année "satellite" dans le petit monde de l'accès Internet ? Si 2001 a été l'année "ADSL",2002 pourrait-elle être l'année "satellite" dans le petit monde de l'accès Internet ? En effet, le géant.... /.... lancer en Europe une offre d'accès à Internet par satellite courant En effet, le géant.... /.... lancer en Europe une offre d'accès à Internet par satellite courant 2002.

24 Balises SPAN imbriquées Les balises spéciales SPAN et DIV permettent de mettre en forme des éléments (en ligne ou en bloc). Les balises spéciales SPAN et DIV permettent de mettre en forme des éléments (en ligne ou en bloc). Les balises spéciales SPAN et DIV permettent de mettre en forme des éléments (en ligne ou en bloc).

25 Style à la volée pour un paragraphe  On utilise la balise DIV avec ou sans identifiant blabla bla sur beaucoup de lignes et interlignes….. Ou et style #toto Ou … blabla

26 Nota : regroupement de propriétés  Il est possible de regrouper les propriétés de différentes classes : – – –.essai-texte { font-style: italic ; color: green ;}.essai-grand { font-size: 16pt ; }.essai-fond { background-color: #CCFF99 ;} –Les classes de style doivent être compatibles ! –(En cas de conflit, le dernier style prend le dessus) Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

27 Image de fond  L'attribut background-image permet de définir une image en fond d'écran  On peut définir s'il y a répétition de l'image pour couvrir toute la surface par l'attribut background-repeat (no, repeat, repeat-x ou repeat-y). –Exemple : background-image: url("monkey.jpg"); background-repeat: no-repeat;  Voir l'exemple 9 l'exemple 9l'exemple 9

28 Paramètres de l'image  Pour afficher une image d'une taille donnée : on définit la hauteur et la largeur en pixels Attention, si on souhaite garder les proportions d'origine: ne donner que l’une des deux (largeur ou hauteur).

29 Autres paramètres de mise en forme  Pour mettre en italique et en gras, on utilise : font-style: italic; font-weight: bold;  Pour justifier : t ext-align:justify;  Pour souligner: t ext-decoration: underline ;  Pour mettre en majuscules : text-transform : uppercase; –Ou encore : font-variant: small-caps;  Voir l'exemple 10 l'exemple 10l'exemple 10

30 Les liens hypertextes  La balise A peut être redéfinie  Les liens hypertexte utilisent aussi les styles : A:linkstyle du lien avant le clic A:hover style du lien quand la souris passe dessus A:active style du lien en train d'être cliqué A:visitedstyle d'un lien ayant déjà été visité  Si un même style est commun à plusieurs états, on les liste avant le style : A:link, A:hover { définition du style }  Voir l'exemple 11 l'exemple 11l'exemple 11

31 Menu avec un choix  On peut faire des menus avec choix avec des tableaux –on applique une classe à certaines cases du tableau  Voir les exemples 12, 13 et 14

32 Autres menus avec choix  On peut faire des menus avec choix intégrant : –des assemblages d'images –et du texte superposé  On peut définir des attributs de style directement en utilisant l'option style dans une balise TD ou une balise P  Exemple :  Exemple : <P style = "position: relative; top:-4; left:28px; color=#00289C; font-weight=bold;">  Voir les exemples 15 et 16, cf page suivante

33 Structure du tableau Ex.15 Fusion des 3 colonnes Affichage d'une image tête de menu + texte superposé Image du bord G Image du bord D choix1 choix2 choix3 choix4 Fusion des 3 cases et affichage d'une image bas de menu

34 Complément : ancrage interne  Balise d’ancrage, option name="nom" et HREF #nom> –(Cf exemple AncrageInterne.html) Lien vers Lien vers un autre endroit un autre endroit On est mieux ici... mais vous pouvez retourner là- bas On est mieux ici... mais vous pouvez retourner là- bas