Introduction aux feuilles de style CSS

Formation lors des webEducation [12 décembre 2006]

Introduction aux feuilles de style CSS

[WEBEDUCATION] Table des matières A - Structurer le contenu................................................................................................................2 (1) CSS : Définition et but...............................................................................................................2 (2) Historique...................................................................................................................................2 (3) XHTML, règle de marquage......................................................................................................4 (4) Avantages du code fondés sur les standards (xhtml, css, ..)....................................................5 (5) Doctype......................................................................................................................................5 (6) Kit de démarrage.......................................................................................................................7 B - Fonctionnement des CSS.........................................................................................................7 (1) Appliquer un style à un document.............................................................................................7 a) Les styles locaux (ou en ligne)...............................................................................................7 b) Les feuilles de style incorporées.............................................................................................7 c) Les feuilles de style liées........................................................................................................8 d) Les médias..............................................................................................................................9 (2) Les classes et ID........................................................................................................................9 (3) Anatomie et écriture d'une règle CSS.....................................................................................10 (4) Sélecteurs et pseudo classes..................................................................................................11 a) Les sélecteurs contextuels...................................................................................................11 b) Les sélecteurs contextuels...................................................................................................11 c) Les sélecteurs enfants..........................................................................................................12 d) Le sélecteur universel...........................................................................................................13 e) Le sélecteur de frère adjacent..............................................................................................13 f) Les sélecteurs d'attributs.......................................................................................................14 g) Les pseudo-classes..............................................................................................................14 g) Les pseudo-éléments............................................................................................................14 (5) Les valeurs numériques et de couleurs .................................................................................15 C - Polices de caractères ............................................................................................................16 (1) Les familles de polices.............................................................................................................16 (2) Dimensionnement des polices.................................................................................................17 (3) Propriétés des polices.............................................................................................................17 (4) Propriété de texte.....................................................................................................................17 D - Ressources..............................................................................................................................18 (1) Barre de développement pour navigateur web.......................................................................18 (2) Validateurs en ligne.................................................................................................................19 E - Références...............................................................................................................................19

Indique un lien vers une ressource hors-ligne (exemple, un site web, exercice, ..)

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

A ­ Structurer le contenu (1) CSS : Définition et but 

CSS pour « Feuilles de style en cascade » (Cascading Style Sheet)

Les CSS sont une façon de séparer les éléments de structure d'un site Web et sa présentation. L'utilisation d'une CSS vous permet de maintenir la partie « architecture » (code HTML) des documents à une taille minimum tout en gardant le contrôle absolu sur l'apparence du site (couleur, position, taille, ...). 

Exemples :

Par exemple vous pouvez modifier la balise <H1> et y rattacher la police Arial, de taille 18 pixels, de couleur rouge. Chaque fois que vous utiliserez la balise <H1> dans votre document, tout le texte situé dans les limites de la balise recevra la mise en forme définie dans votre feuille de style.

Vous pouvez également utiliser le CSS pour positionner des éléments précisément sur votre page, définir une bordure, des espacements ou une visibilité (afficher/cacher).

Réalisations à voir sur le site CSSzengarden : ➢ ➢ ➢

Une page html de base : http://www.csszengarden.com/zengarden-sample.html Un fichier css de base : http://www.csszengarden.com/zengarden-sample.css Liste de résultats possible : http://www.mezzoblue.com/zengarden/alldesigns/

(2) Historique 

Guerre des navigateurs

La guerre des navigateurs est le nom donné à la compétition entre les navigateurs Web pour la domination sur le marché.

Il est couramment utilisé pour faire allusion au combat entre Microsoft Internet Explorer et Netscape Navigator (en particulier sur la plate-forme Windows) à la fin des années 1990. Aujourd'hui, il est à nouveau utilisé pour parler d'un autre combat, celui qui oppose Internet Explorer à Mozilla Firefox.

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 ✔ ✔ ✔ ✔ ✔ ✔

✔ ✔ ✔ ✔ ✔ ✔ ✔

1993 : Apparition du navigateur Web NCSA Mosaic 1994 : Apparition de Netscape Navigator, réécriture complète de Mosaic.

1995 : Création d'Internet Explorer 1.0, qui fut inclus dans le Pack Plus Windows 95 1996 : Internet Explorer 3.0 (gestion des scripts et des premières versions du CSS) 1997 : Internet Explorer 4 fut un tournant de la guerre des navigateurs. Il était plus rapide et supportait mieux les spécifications du W3C que Netscape Navigator 4.0 1998 : les développeurs de Netscape ont libéré le code source de Navigator, en le renommant Mozilla. Alors que Netscape court à la faillite et se fait racheter par AOL, il décide de poursuivre Microsoft en justice (Netscape accuse Microsoft de lui avoir proposé un accord de non concurrence en échange d'un partage du marché des navigateurs. ) 1999 : Les parts de marché de Netscape et Microsoft sont respectivement de 29 et 69 %, selon Statmarket.

2001 : Sortie d'Internet Explorer version 6 2002 : Mozilla atteint la version 1.0 et devient populaire dans la communauté du logiciel libre 2003 : Microsoft annonçait qu'Internet Explorer 6.0 SP1 serait la dernière version indépendante de son navigateur 2004 : La guerre a été relancée suite à la sortie du navigateur Firefox qui est basé sur le moteur Gecko du navigateur de Netscape 2005 : Après plus de 50 millions de téléchargements, Firefox gagne du terrain sur Internet Explorer avec plus de 10% de parts de marché.

2006 : Sortie d'Internet Explorer version 7.0 et Firefox 2.0 Guerre des navigateurs : ➢ ➢

http://fr.wikipedia.org/wiki/Guerre_des_navigateurs http://solutions.journaldunet.com/0208/020823_netscrosoft.shtml

Voici à présent, les différentes recommandations des feuilles de style CSS émissent par le w3c.

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes, mais des recommandations à valeur de standards industriels. http://www.w3c.org 

Décembre 1996 [CSS 1] :

En 1994, le World Wide Web Consortium (W3C) se créait, et le consortium se prit d'intérêt pour CSS, et organisa un travail autour du langage. Håkon et Bert étaient les responsables du projet. D'autres membres, comme Thomas Reardon (de Microsoft) y ont participé. Fin 1996, CSS était presque prêt à être officialisé. La norme CSS1 fut publiée en décembre 1996.

Version originale en anglais : http://www.w3.org/TR/CSS1 Version française : http://www.yoyodesign.org/doc/w3c/css1/

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006



Mai 1998 [CSS 2] :

En 1997, CSS a été attribué à un groupe de travail au sein du W3C, présidé par Chris Lilley. Ce groupe commença par s'occuper des problèmes non réglés par CSS1, ce qui entraîna la parution de CSS2 comme une recommandation officielle en mai 1998. 

En cours ... [CSS 2.1]

Devant les difficultés rencontrées lors de l'implémentation de CSS2, le W3C a décidé de revoir sa copie, et de présenter une version simplifiée sur la base de ce qui a réellement pu être intégré à différents navigateurs. Cette nouvelle version, CSS2.1, est actuellement au stade de Candidate Recommendation en attendant CSS3.

Version originale en anglais : http://www.w3.org/TR/CSS21 Version en français (v2) : http://www.yoyodesign.org/doc/w3c/css2/cover.html 

A venir ... CSS 3

Les spécifications sont en cours de réalisation. http://www.w3.org/Style/CSS/current-work

En savoir plus sur le CSS 3 : Aperçu de propriétés CSS3 avec le moteur de rendu Gecko http://www.css3.info/

(3) XHTML, règle de marquage 

Un marquage standardisé :

XHTML est un langage balisé servant à l'écriture de pages du World Wide Web. XHTML est le successeur de HTML (de l'anglais HyperText Markup Language), respectant la syntaxe définie par XML. En respectant les obligations de codage du XHTML, on permet de faire en sorte que les pages s'affichent correctement sur les différents navigateurs et qu'elles soient conformes auprès des validateurs du W3C. 

Obligations à respecter pour du code xhtml conforme : ✔ ✔ ✔

Déclarer un DocType : Strict, Transitional ou Frameset.

Déclarer un espace de nom XML Déclarer votre type de contenu

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Fermer chaque balise, qu'elle soit englobante ou non Toutes les balises doivent être correctement imbriquées Les balises incorporées ne peuvent pas contenir de balises de bloc Écrire toujours les balises en minuscules Les attributs doivent avoir des valeurs et figurer entre guillemets Utiliser les équivalents codés pour les signes < et & dans le contenu.

✔ ✔ ✔ ✔ ✔ ✔

Pour en savoir plus : ➢

http://pompage.net/pompe/declarations/

(4) Avantages du code fondés sur les standards (xhtml, css, ..) ✔

✔ ✔ ✔ ✔

✔ ✔ ✔ ✔

Amélioration des performances : Les pages sont plus légères et se téléchargent plus rapidement. Nous n'avons besoin que d'un marquage structurel minimal, ainsi que l'utilisation d'une seule feuille de style pour l'ensemble du site.

La séparation du contenu et de la présentation : Vous pouvez modifier voire changer totalement le contenu ou la présentation de votre site sans affecter l'autre partie.

La confirmation que votre code est correcte : Utilisation des outils de validation XHTML et CSS pour signaler les erreurs de codage.

L'accessibilité : Votre site est plus facilement accessible, notamment par la disparition des tableaux qui ne sont plus nécessaires pour le positionnement des éléments sur la page.

Baisse des coûts de développement et de maintenance : il n'est plus nécessaire de mettre en place un système (hasardeux) de discrimination des navigateurs pour servir aux différents navigateurs un document adapté aux technologies propriétaires Gestion des médias : Possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d'écran…).

Présentation alternatives : possibilité de doter une page de présentations alternatives au choix de l'utilisateur.

Résolutions d'écrans : Création de sites flexibles, qui s'adaptent aux différentes résolutions d'écran.

Palier certaines insuffisances du langage html : contrôle de la distance entre les lignes, contrôle des marges et des indentations , ...

Pour en savoir plus : ➢

http://developpeur.journaldunet.com/tutoriel/theo/041020-raisons-xhtml-css-dom.shtml

(5) Doctype 

Mode standard / Quirks :

En respectant une déclaration de DOCTYPE standard, on s'assure que le navigateur interprétera au mieux le code de la page. Si aucune déclaration n'est présente, le navigateur adopte le mode "Quirks", www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 c'est à dire que l'affichage ne suivra pas les standards du W3C. Note : Le Doctype sert également lors de la validation de votre page web.

EXEMPLES DE DOCTYPE :



Afin que le doctype soit lisible par tous les navigateurs (surtout IE), vous devez mettre votre ligne en premier dans votre page (x)HTML. * HTML 4.01 – Transitional : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> * HTML 4.01 – Strict : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> * XHTML 1.0 Strict : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> * XHTML 1.0 Transitional : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pour en savoir plus : ➢ ➢ ➢ ➢ ➢

http://pompage.net/pompe/doctype/ http://www.w3.org/International/articles/serving-xhtml/Overview.fr.html#quirks http://perso.orange.fr/coin.des.experts/reponses/faq9_64.html http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pournous http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pournous#c3113 (concernant le prologue xml)

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 (6) Kit de démarrage 

Pour bien demarrer : kit xhtml transitionnel : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <title>Modèle de DOCTYPE transitionel</title> </head> <body> <!— CODE XHTML ICI --> </body> </html>

B ­ Fonctionnement des CSS (1) Appliquer un style à un document Il existe trois manières d'ajouter des CSS à une page web : a) Les styles locaux (ou en ligne) Les styles locaux (aussi appelés styles en ligne) sont ajoutés à une balise à l'aide de l'attribut XHTML "style" : Voici un exemple de paragraphe avec un style incorporé <p style="font-size:16px;color:red;">Voici un exemple de paragraphe avec un style incorporé<p> b) Les feuilles de style incorporées Les styles intégrés (aussi appelés styles de pages) sont disponibles à l'intérieur de la page, dans la plupart des cas en-tête de votre document entre la balise <HEAD>.

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Voici un exemple de modèle à utiliser : <style type="text/css"> /* <![CDATA[ */ h1 { font-size:16pt; font-weight:bold;} p {color:blue;} /* ]]> */ </style>

Pour en savoir plus concernant le CDATA : ➢

http://www.ljouanneau.com/blog/2004/04/06/262-la-section-cdata-en-xml

c) Les feuilles de style liées Les styles liés sont disponibles dans un document externe afin d'avoir une amplitude globale (sur tout le site). <link href="feuille_de_style.css" media="screen" rel="stylesheet" type="text/css" /> Importer une feuille de style externe (@import) : La règle @import permet d'inclure un fichier CSS dans un autre fichier CSS ou à partir d'un style incorporé. Cette règle doit être placée en tête, avant toute autre règle. Elle peut également spécifier un type de media. <style type="text/css" > @import monstyle.css; @import url(monstyle.css); @import url(fineprint.css) print; @import url("bluish.css") projection, tv; </style> Link ou @import ? ➢ ➢

http://blog.alsacreations.com/2004/09/25/64-link-ou-import http://web.covertprestige.info/test/17-regles-at-import-et-navigateurs.html

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Priorité des styles (du plus prioritaire au moins prioritaire) :

Style local

Style intégré

Style lié

d) Les médias L'une des ambitions des feuilles de styles est la possibilité d'offrir des styles spécifiques selon le media visé, et de faciliter ainsi la réutilisation du même contenu indépendamment du media. Il peut s'agir en théorie : ✔ ✔ ✔ ✔ ✔

[screen] : D'un media visuel non paginé tel un écran d'ordinateur [projection] : D'un media visuel paginé tel un projecteur [print] : D'un média destiné à l'impression. [handheld] : D'un media tactile tel les tablettes brailles [speech] : D'un media auditif tel les navigateurs vocaux...

Exemples : <link rel="stylesheet" type="text/css" href="general.css" media="all" > <link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection" > <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" > <link rel="stylesheet" type="text/css" href="impression.css" media="print" >

Pour en savoir plus concernant les médias ➢

http://www.blog-and-blues.org/weblog/2005/08/04/438-les-types-de-media-css

(2) Les classes et ID 

Classe ou ID ? :

Une classe ou un ID permet de cibler une zone spécifique du document. Il est généralement préférable d'utiliser un ID à la place d'une classe pour une zone qui n'est pas récurrente, qui n'est affichée qu'une fois sur la page (pied de page, en tête, ...) 

Exemples :

Code XHTML :

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

<h1 class="entete">Voici un en-tête de texte</h1> et la classe permettant de modifier son rendu : .entete { font-weight:bold; font-size:16px; } Même exemple avec l'utilisation d'un ID : Code XHTML : <h1 id="entete">Voici un en-tête de texte</h1> Code CSS : #entete { font-weight:bold; font-size:16px; }

(3) Anatomie et écriture d'une règle CSS 

Anatomie d'une regle :

Une règle CSS est constituée de deux parties. Le sélecteur, qui indique la balise choisie par la règle, et la déclaration, qui indique ce qui se passe lorsque la règle est appliquée. La déclaration est constituée de deux éléments : une propriété, qui indique ce qui doit être concerné, et une valeur, qui indique ce sur quoi la propriété est définie. 

Ecrire une règle CSS :

Une règle peux contenir plusieurs déclarations : p {color:red; font-size:12px; line-height: 15px;} Il est possible de grouper plusieurs sélecteurs : www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

h1, h2, h3, h4 {color:blue;font-weight:bold;} Plusieurs règles peuvent être appliquées au même sélecteur : h1, h2, h3, h4 {color:blue;font-weight:bold;} h3 {font-style:italic;} 

Hierarchie des documents :

On pourrait ainsi représenter ceci :

Ainsi :

<body> <h3>....</h3> <div id="logo"> <img src="..." /> </div> <div id="footer">...</div> </body>

(4) Sélecteurs et pseudo classes a) Les sélecteurs simples Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par zéro ou plusieurs sélecteurs d'attribut, d'ID, ou pseudo-classes.

Exemples : Afficher en rouge tous les paragraphes sur la page : p {color:red;} Ou avec l'utilisation d'une classe : H1.entete { color: green }

Selon la règle ci-dessus, le premier élément H1 n'aurait pas son texte en vert, contrairement au second : www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

<H1>Pas vert</H1> <H1 class="entete">Vraiment vert</H1>

b) Les sélecteurs contextuels (ou sélecteur descendant) Un sélecteur descendant est construit de deux sélecteurs simples ou plus séparés par un blanc. Il cible les éléments qui sont des descendants d'un élément correspondant au premier sélecteur simple.

Exemples : div p {color:#F00;} c) Les sélecteurs enfants Les sélecteurs enfants sont ignorés par Internet Explorer 6 sous Windows ! Ils sont généralement utilisés pour créer des variations dans votre feuille de style et contourner les divers inconvénients de non-compatibilié d'Internet Explorer.

Solution possible pour les curieux/ses : ➢

http://developpeur.journaldunet.com/tutoriel/css/050704-css-selecteur-enfant-equivalentie.shtml

Un sélecteur enfant fonctionne à première vue comme un sélecteur contextuel vue précédemment, mais il faut prendre en considération la hiérarchie du document !

Exemple : p>em {color:green;} Tous les textes compris entre la balise <em> et </em> seront coloriés en vert, uniquement s'ils sont enfants d'une balise P. Si par exemple la balise EM est comprise dans une balise P et une balise SPAN, elle ne sera pas affecté.



Hack :

Tester le code suivant sous Firefox 1.5 et sous Internet Explorer 6 (en mode QUIRKS) : CODE HTML :

<div class="vert">Boite 1</div>

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 CODE CSS :

.vert { background-color: #00ff00; padding: 0 20px; border-left: 5px solid #00ff00; border-right: 5px solid #00ff00; width: 250px; }

Puis ajouter cette ligne dans votre feuille de style : html>body .vert { width: 200px; } d) Le sélecteur universel Le sélecteur universel s'utilise avec l'astérisque (*) signifie "n'importe quel élément". Ainsi, si vous utilisez : {color:green;}

•

dans votre feuille de style, tout le texte s'affichera en vert, à l'exception des endroits où vous spécifiez autre chose dans d'autres règles. p * em {font-weight:bold;} Ici, toute balise EM qui est au moins un petit-fils de la balise P (mais pas en enfant) est sélectionnée.

Peu importe l'identité de la balise parent de EM. Nettoyer les styles : ➢ ➢

http://gou.blogspot.com/2005/10/nettoyer-les-styles.html http://forum.alsacreations.com/topic.php?fid=4&tid=631

e) Le sélecteur de frère adjacent Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !

Cette règle sélectionne une balise qui suit une balise soeur spécifique (ces balises se trouvent au même niveau dans hiérarchie de marquage, elles partagent la même balise parent).

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Exemple : Cette règle permet de cibler le premier paragraphe (balise P) qui se trouve juste à coté (hiérarchiquement) de la balise H1. h1 + p {font-variant:small-caps} <div> <h1>Mon titre de page</h1> <p>Mon premier paragraphe</p> <p>Mon deuxième paragraphe</p> </div> Le résultat affichera uniquement le texte « Mon premier paragraphe » en petite majuscule. f) Les sélecteurs d'attributs Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !

Les sélecteurs d'attributs utilisent les attributs de la balise. Ils servent principalement en XML, mais peuvent être aussi être utilisé en (x)HTML. Exemple : img[title] {border: 2px solid blue;} Avec ce code, vous aurez un contour bleu de 2 pixels sur toute image ayant un attribut TITLE, peut importe la valeur de l'attribut. g) Les pseudo-classes On parlera ici de pseudo-classes rattachées à la balise <a>, ce sont les seules qui fonctionnent sur tous les navigateurs. Mais il est également possible de les appliquer à d'autres balises : ul, li, span, ..

Exemple : <a href="http://www.google.ca">Accès au moteur de recherche Google</a>

Il existe quatre états possibles : • • • •

Lien : Le lien existe et l'utilisateur peut cliquer dessus.

Visité : L'utilisateur a déjà cliqué sur le lien.

Survol : La souris pointe sur le lien.

Actif : Le lien est en cours d'activation

•

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Les sélecteurs de pseudo-classes correspondants : • • • •

a:link { color:black;} a:visited {color:gray;} a:hover {text-decoration:none;} a:active {color:navy;} Un navigateur peut ignorer certaines de ces règles si vous ne les indiquez pas dans l'ordre cité ci-dessus : lien, visité, survol et actif. (pour se souvenir : LoVe|HAte)

g) Les pseudo-éléments Généralement incompatible avec la plupart des navigateurs, ils sont très peu utilisés. Voici toutefois un code à tester qui fonctionne sur Internet Explorer 6 et Firefox, il permet de créer une lettrine pour toutes les balises de type <p>: p:first-letter { font-size:300%; float:left; } Ce qui ne fonctionne pas avec Internet Explorer 6 : ➢

http://www.floatthatbox.com/articles/selecteurs-css-21-partie-3.htm#footer

(5) Les valeurs numériques et de couleurs 

Les valeurs numériques :

Les valeurs numériques servent à décrire la longueur, mais aussi la hauteur, la largeur, l'épaisseur, etc.. de toutes sortes d'éléments. Ces valeurs entrent dans deux groupes principaux : absolues et relatives.

Valeur absolue

Abréviation de l'unité

Pouces

in

Centimètres

cm

Millimètres

mm

Points

pt

Picas

pc

Pixels

px Valeur relative

www.tc2l.ca

Valeur unitaire

Em

em

Ex

ex

Pourcentage

% 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006

Les deux unités de mesure utilisées généralement lors de la conception de vos feuilles de style sont : • •

Px (Pixel, valeur absolute) Em (Correspond à la hauteur de la police de caractère utilisé par votre navigateur. Environ 16 pixels , valeur relative)

Pour un meilleure accessibilité il est conseillé d'utiliser les valeurs relatives comme EM par exemple.

Ceci est primordiale dans Internet Explorer pour permettre à l'internaute de modifier la taille de la police de caractère par défaut, ce qui n'est pas le cas dans Firefox par exemple qui permet de modifier des valeurs absolues.

Comprendre et gérer du texte avec les EM : ➢ ➢

http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em

Les valeurs de couleur :



Il y a trois manières d'écrire des valeurs de couleur : Hexadécimale, pourcentage RVB (Rouge, Vert, Bleu) et les noms de couleurs.

Voici la couleur rouge dans les trois formats : ✔ ✔ ✔

Hexadécimal : #FF0000 RVB/RGB : rgb(100%, 0, 0); Nom : red .fond_entete {background-color:#FF0000;}

La plupart du temps, vous trouverez des valeurs exprimées en hexadécimale. C'est aussi celle qui offre le plus de possibilité : 16 777 216 combinaisons (256 x 256 x 256 couleurs) contre 1 million en RVB. Les valeurs à retenir s'il y en avait seraient : #000000 #FFFFFF

C ­ Polices de caractères (1) Les familles de polices Un navigateur web est limité sur l'utilisation des polices de caractères et cela peut également varier d'un navigateur à l'autre. Il existe d'ailleurs plusieurs collections de polices que vous pouvez appeler dans vos styles : •

www.tc2l.ca

Les polices sérif 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 • • • •

Les polices sans-sérif Les polices monoscape Les polices cursives Les polices fantaisie

Il est généralement conseillé d'utiliser des polices "sans-sérif" pour du texte, car elles sont plus nettes et plus professionnelles d'apparence. 

Ecriture de la déclaration CSS :

Pour écrire une déclaraction CSS, spécifiez un nombre de polices sérif et sans-sérif, en commençant par celle que vous préférez et en terminant par un nom de police générique comme sérif ou sans-sérif.

Voici un exemple de déclaration pour l'ensemble du document XHTML : body { font-family : trebuchet ms, helvetica, arial, sans-sérif; } La police utilisée dépendra des polices disponibles sur l'ordinateur de la personne qui navigue sur le site et la priorité se fera sur la première police déclarée et ainsi de suite jusqu'à "sans-serif" qui correspond à la police "sans-serif" disponible par défaut sur le navigateur.

Réflexion sur les polices de caractères : ➢

http://www.cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=676

(2) Dimensionnement des polices Le dimensionnement des polices s'effectuera en fonction de vos choix de valeurs : Absolue ou relative ?

Pixel ou Em ? 

Quels sont les avantages à utiliser l'un et l'autre ?

À noter que lorsqu'on redimensionne du texte à l'aide d'Internet Explorer, cela ne fonctionne que si l'on utilise les valeurs en EM, si vous avez fait appel à des valeurs en Pixels (px), aucun changement ne se fera à l'écran. Pour un niveau d'accessibilité supérieur (les malvoyants par exemple), il est donc préférable d'utiliser les valeurs EM.

(3) Propriétés des polices Quand on parle de "police", sur quoi agissons nous : Les propriétés de polices font référence à la taille et à l'apparence des collections de texte : la famille, la taille, le gras ou l'italique...

Voici les propriétés :

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 • • •

font-style : normal, italic font-weight : bold, bolder, lighter font-variant : small-caps, normal

On peut également tout écrire sur une seule ligne ainsi : font: bold italic small-caps 12pt verdana, arial, sans-serif; La séquence des valeurs est la suivante : 1. font-weight, font-style, font-variant dans n'importe quel ordre, puis 2. font-size (obligatoire) 3. font-family (obligatoire)

(4) Propriété de texte Quand on parle de "texte", sur quoi agissons nous : Les propriétés de texte sont liées au traitement de la police, c'est-à-dire la définition de sa hauteur de ligne, l'espacement de ses lettres, son souligné, etc ..

Voici les propriétés : • • • • • • • •

text-indent : valeur positive ou négative letter-spacing : valeur positive ou négative word-spacing : valeur positive ou négative text-decoration : underline, overline, strikethrought, blink text-align : left, right, center, justify line-height : toute valeur numérique (aucune unité de valeur à indiquer) text-transform : uppercase, lowercase, capitalize, none vertical-align : sub, sup, top, middle, bottom

D ­ Ressources (1) Barre de développement pour navigateur web 

But et fonctionnalités

Les barres pour développeurs améliorent grandement la création de sites web et offrent des outils intuitifs pour la création de pages au format CSS. Ainsi il est possible d'identifier visuellement les différents calques disponibles sur une page, obtenir des informations sur leur position ou éditer directement la feuille de style de n'importe quelle page disponible sur Internet. Elles offrent une centaine de fonctionnalités variées allant de l'affichage des informations contenues dans les cookies à une liste de liens pour la validation de vos pages. Elles sont gratuites et disponibles pour plusieurs navigateurs internet dont Firefox qui a été le premier initiateur et Internet Explorer avec une version beta très prometteuse. www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 Téléchargement des extensions :

➢ ➢ ➢

http://chrispederick.com/work/webdeveloper/ (barre de développement) http://users.skynet.be/mgueury/mozilla/index.html (validateur html basé sur Tidy) https://addons.mozilla.org/firefox/271/ (colorZilla pour firefox 2)

➢

http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E2D5E1DB91038

(2) Validateurs en ligne ✔ ✔ ✔

Validateur (x)html du w3c : http://validator.w3.org/ Validateur de pages multiples : http://www.validateur.ca/ Validateur css du w3c : http://jigsaw.w3.org/css-validator/

D'autres validateurs peuvent être disponible ici : http://openweb.eu.org/ressources/validation/

E ­ Références Pour aller plus loin dans la découverte des feuilles de style en cascade, voici quelques pistes : 

Utilisation des hacks pour un rendu identique dans Firefox et Internet Explorer ✔ Le contournement avec "!important" : Voir ces pages : http://www.babylondesign.com/site/index.php/2004/12/13/51-le-hack-css-important et http://www.ultrafluide.com/ressources/css/css-hacks.htm ✔ Utilisateur des sélecteurs enfants comme HACK pour Firefox : http://openweb.eu.org/articles/dimensions_boites_css/



Quelques sites web de référence : ✔ http://openweb.eu.org/ : de la théorie ✔ http://www.alsacreations.com/ : des tutoriaux, un forum de support ✔ http://www.opquast.com/ : Une liste de 153 bonnes pratiques (voir aussi : http://www.opquast.com/mon-opquast/) ✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outils de recherche ✔ http://pompage.net/ : Articles francisés sur les CSS

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]

Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006 ✔ ✔ ✔

http://www.cssplay.co.uk/ : Ressources css, exemples, etc ... (en anglais) http://www.w3schools.com/ : Références CSS http://www.gotapi.com/ : Basé sur w3schools



Divers : ✔ http://www.visibone.com/html/ : Références au format "papier" ✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outil de recherche ✔ http://www.blog-and-blues.org/weblog/2004/11/03/331-title-et-h1-titre-de-section-et-titre-dedocument-le-malentendu : Utilisation des H1 dans un document ✔ http://www.positioniseverything.net/ : Bogues des navigateurs web (anglais) ✔ http://www.shinze.com/index.php/post/2003/11/28/40-LesBonsConseilsDePappyDave : Quelques bons conseils ✔ http://chrispederick.com/work/webdeveloper/ : Barre de développement pour Firefox ✔ http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E2D5E1DB91038 : Barre de développement pour Internet Explorer



Listes de discussion : ✔ Pompage.net : http://pompage.net/liste/ ✔ W3Québec : http://w3qc.org/ressources/listedediscussion/

www.tc2l.ca

12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]