CSS

CSS (Cascading Style Sheet) 11Prsentation des feuilles de style (01)Prsentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitule Cascading StyleSheets (feuilles de style en cascade).

Les feuilles de style ont t mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la prsentation. Le HTML offre un certain nombre de balises permettant de mettre en page et de dfinir le style d'un texte, toutefois chaque lment possde son propre style, indpendamment des lments qui l'entourent.

En utilisant les feuilles de style, lorsque la charte graphique d'un site compos de plusieurs centaines de pages web doit tre change, il suffit de modifier la dfinition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier ! 2Prsentation des feuilles de style (02)Prsentation des feuilles de styleExemple dutilisation

On souhaite, par exemple, que toutes les pages d'un site aient les mmes attributs :police de caractres : Helvetica ; couleur de fonds : bleu ple ;titres : centrs et souligns.; paragraphes : commenant par un retrait de 12 pixels; marge gnrale de 10 pixels ;espacement autour des tableaux et images de 8 pixels ;certains paragraphes qu'on considre comme des annotations ou notes : en italique, taille des caractres diminue 70%.

En HTML, ces caractristiques peuvent tre codes chaque endroit o elles apparaissent. Mais cela prsente plusieurs inconvnients :travail fastidieux et long ;risque d'erreurs et d'omissions ;si on veut modifier un lment de prsentation, il faut reprendre tous les fichiers dj existant, puis les remettre en ligne. 3Prsentation des feuilles de style (03)Prsentation des feuilles de styleExemple dutilisationLes CSS simplifient le travail :

Tous les attributs communs plusieurs fichiers HTML peuvent tre dclars une seule fois dans un fichier particulier il suffira de faire rfrence en tte de chaque page HTML.

Toute modification de la "feuille de style" sera immdiatement applique partout o cette dernire est utilise.4Prsentation des feuilles de style (04)Prsentation des feuilles de styleLe principe des feuilles de style consiste :

Attribuer des caractristiques de mise en forme des groupes d'lments. Il est par exemple possible de dcider de crer un groupe de titres en police Arial, de couleur verte et en italique.

Autoriser le contrle des attributs de prsentation de la totalit des balises d'un projet HTML partir d'une seule et unique feuille CSS.

On les appelle "feuilles de style en cascade" car on peut en dfinir plusieurs, et, en cas de redondance de style, un ordre de priorit est donn par le navigateur.

Les feuilles de style permettent: D'avoir une prsentation homogne sur tout un site sans rpter dans chacune des pages les commandes de mise en forme. De pouvoir changer l'aspect du site entier en modifiant quelques lignes. Une plus grande lisibilit du HTML. Le positionnement rigoureux des lments. Des chargements de page plus rapides. 5Prsentation des feuilles de style (05)La compatibilit des navigateurs Malgr l'existence de recommandations du W3C, les feuilles de style ne sont pas reconnus de la mme faon selon les navigateurs. Le premier navigateur a avoir intgr les feuilles de style est Microsoft Internet Explorer 3.0, puis l'utilisation des feuilles de style s'est gnralis avec les versions 4.0 et suprieures d'Internet Explorer et de Netscape Navigator.

Navigateurs supportant les feuilles de style : Microsoft Internet Explorer 3.0 (partiellement) Microsoft Internet Explorer 4.x Microsoft Internet Explorer 5.x Microsoft Internet Explorer 6.x Netscape Navigator 4.x Netscape Navigator 6.x Netscape Navigator 7.x Opera 5.x Opera 6.x Opera 7.x 6tat des lieuxLes feuilles de styles ou CSS (Cascading Style Sheets), permettent au dveloppeur de sites internet un contrle prcis de la mise en forme de leurs pages Web. La premire version (CSS1), apparue en 1996, autorisait une matrise relativement restreinte de la mise en page (choix des polices, couleurs, espacement, etc.). Cette version est trs bien supporte par les navigateurs courants du march.La version courante (octobre 2002) est la version 2 (CSS2) dfinie en 1999, elle permet un contrle plus sophistiqu du document, elle offre en particulier le positionnement absolu ou relatif, le choix du curseur, la possibilit d'adapter la mise en page au mdia de sortie (cran, imprimante), etc. Certaines fonctionnalits ne sont malheureusement pas toujours bien interprtes par les navigateurs actuels.La version 3 (CSS3) est encore en travaux et la spcification ne devrait pas tarde sortir. Si cela vous intresse, vous pouvez consulter le plan d'avancement.Actuellement, les navigateurs bass sur Mozilla 1.X offrent le meilleur support des feuilles de styles et je vous conseille vivement d'un installer un si vous dsirez exprimenter certaines techniques avances de mise en page.P.S: Dans les pages qui suivent,le terme Mozilla dsigne les navigateurs bass sur le moteur de rendu Gecko (Mozilla, Netscape 6.2 et 7, Phoenix, Chimera, etc.)

Insertion des styles (03)Insertion des styles On peut appliquer des rgles de style un document de diffrentes faons Grce une feuille de style intgre au document, celle-ci sera situe dans l'entte, entre les balises ... . On utilisera alors la balise

Une rgle peut tre applique directement l'lment concern, on parle alors de style en ligne. La balise aura alors l'attribut style

Faire appel une feuille de style externe au document. Elle est la plus conforme l'esprit des CSS et aussi la plus pratique

On l'appellera grce la balise dans l'entte du documentImporter une feuille de style, en utilisant @import dans la balise 7Insertion des styles (04)Insertion des styles Insertion dans un document HTMLUne dfinition de mise en page par les feuilles de style sera encadr par une balise HTML spcifique.La commande insre une dfinition des feuilles de style.La commande ferme la dfinition des feuilles de style.

Les rgles de prsentation doivent tre places dans l'en-tte () du document HTML.

Des balises de commentaires devront encadrer l'numration des dfinitions de style afin d'en viter l'affichage dans un navigateur ne supportant pas cette technologie. ... ... Diverses commandes HTML ... 8Enfin, comme dans le cas de la commande d'insertion de script (), des balises de commentaires devront encadrer l'numration des dfinitions de style afin d'en viter l'affichage dans un navigateur ne supportant pas cette technologie.

Insertion des styles (05)Insertion des styles Insertion dans un document

style interne au document

16Les priorits des styles Actuellement, toutes les spcifications du W3C en matire de feuilles de styles sont loins d'tre respectes par les diteurs de navigateurs.Pour le moment Netscape ne reconnat pas la commande d'importation des feuilles de styles. De plus, aucun des navigateurs ne prend en charge l'imbrication des feuilles de style externes en prfrant plutt craser les dernires charges l'instar des styles imports.Seul Internet Explorer permet d'emboiter les feuilles de styles importes avec des styles externes.

La structure des styles (01) Dfinition d'un styleLa syntaxe d'un style est compose de deux lments :

un slecteur de balise : la dnomination de la balise sans ses signes infrieur ("") comme H2 ou TABLE,permettant de prciser quelles balises du document le style s'applique

Une liste de proprits spares de leur valeur par deux points (":") et d'elles-mmes par un point virgule (";").permettant de dfinir prcisment le style appliquer aux balises slectionnes

Exemple : le style appliquer aux liens hypertextes (balise ) : une police Verdana de taille 18 pixels, en gras et de couleur jaune :

... ... ... A { font-family: Verdana; font-size: 18px; font-style: bold; color: yellow} 17La structure des styles (02)Dfinition d'un styleLes diffrents types de slecteur

Les slecteurs d'lmentss'appliquent la balise HTML laquelle ils font rfrence

Les slecteurs de classepermettent de regrouper des lments HTML spcifiques, relatifs un mme sujet.

Les slecteurs didentificateurspermettent d'appliquer une rgle de style un lment unique du document HTML18La structure des styles (03)Dfinition d'un styleLes slecteurs de balise On appelle "slecteur de balise" le ou les mots-cls prcdant l'accolade, servant indiquer le ou les balises du document auxquelles le style entre accolades s'applique.

Pour dfinir le style d'une balise HTML spcifique, il suffit de mettre le nom de la balise (sans les caractres < et >).

... body {font-family: arial, helvetica, sans-serif; color: blue; background-color:green;} p {text-align: justify }

19La structure des styles (04)Les slecteurs multiples et universel

Le slecteur de balise peut comporter une plusieurs balises auxquelles les dfinitions de proprits seront appliques.

Dans cette situation, chacune des balises cites devra tre spare l'une de l'autre par une virgule.

Il existe galement un slecteur universel, permettant d'affecter des rgles de style chaque lment d'un document HTML. * { rgles de style }

Nanmoins, le slecteur universel * n'est pour le moment pris en charge par aucun navigateur courant (Internet Explorer, Netscape et Opera). ... ... ... ... ... Diverses commandes HTML ... 20La structure des styles (05)Les slecteurs contextuels Il est possible de dfinir un style pour une balise dans un contexte spcifique.Un style pourra tre appliqu une commande HTML que dans un cas prcis de descendance directe ou indirecte.Par exemple, lorsque la balise cible se trouve dans une liste, elle devra tre la cible d'un style.le style ne pourra pas agir sur des balises identiques se localisant dans un paragraphe, dans un tableau ou ailleurs dans le document.La syntaxe utilise consiste sparer la (ou les) balises contenant de la cible par un espace blanc.Ne fonctionne par sur le navigateur Netscape 4

... ... ... ... ... ... ... ...

21La structure des styles (06)Les slecteurs contextuels ExempleLa couleur bleue applique tout texte gras (balise ) contenu dans un titre de niveau 1 (balise ).h1 b {color: blue } ... ... ... Diverses commandes HTML ... 22La structure des styles (07)Les slecteurs descendants Un slecteur descendant permet d'atteindre une balise HTML situe directement l'intrieur d'un autre lment.Ce slecteur est compos de deux ou plusieurs commandes spars par un signe "suprieur " (">").Par exemple, si l'on veut atteindre la balise place l'intrieur de l'instruction , il suffit d'crire la ligne suivante : ... ... ... ... ... P > EM {font-size: 12pt font-color: red font-style: italic} 23La structure des styles (08)Les slecteurs descendants ... ... ... ... Diverses commandes HTML ... 24La structure des styles (11)Les slecteurs d'attributs Il est possible de localiser la balise atteindre par l'intermdiaire de l'un de ses attributs ou de leurs valeurs.un style pourra tre appliqu une commande HTML seulement si l'attribut ou sa valeur correspond la situation requise.Par exemple, lorsque nous voudrions que la balise contenant l'attribut HREF ou la valeur http:// , alors il suffira d'crire l'une des lignes suivantes :A[href] {background-color: yellow; font-color: blue}A[href|="http://"] {background-color: green; font-color: yellow} Afin de parfaitement dcrire ces contextes, il existe plusieurs mthodes d'nonciations (voir transparent suivant).25sss*MthodeDescriptionExempleBalise cibleBalise[Attribut]La balise cible doit contenir l'attribut cit.TABLE[border] {border-style: double}Balise[Attribut = Valeur]La balise cible doit non seulement contenir l'attribut mais galement correspondre exactement la valeur souhaite.TABLE[BORDER="0"] {background-color: rgb(0, 120, 255)}Balise[Attribut ~= Valeur]La valeur exige doit tre contenu dans la balise, mais toutefois sans qu'elle corresponde exactement.A[title~="site"] {outline-style: outset}Balise[Attribut |= Valeur]Cela signifie que le contenu de l'attribut devra commencer imprativement par la valeur dsire.A[title="Allez"] {font-color: aqua}26La structure des styles (13)Les slecteurs d'attributs .. ... Diverses commandes HTML ... 27La structure des styles (14)Les commentaires Afin d'amliorer la lisibilit et la maintenance des documents, il est ncessaire de commenter le code de programmation l'intrieur des balises d'insertion de dfinition de style.La commande /* Commentaire */ permet l'insertion de commentaire au sein du code. ... ... ... Diverses commandes HTML ... 28Utilisation des CSS avec les Formulaire 2929Exercice Raliser un menu droulant en utilisant les CSS3030TP rendre HTML-CSSRaliser un site pour les cours dispenss lENSA en se basant sur les cadres et les CSSDans le premier cadre, vous affichez le nom de lecole et son logoDans un deuxime cadre, vous crez la liste des cours dispenss sous forme dun ensemble de liens hypertextesLorsque vous cliquez sur un lien donn, le contenu de ce lien saffiche Il est necessaire les styles dans des fichiers spars des pages HTML3131Exercice-HTML-CSS32234Le contenu de chaqueCours La liste des cours dispenssEcole Nationale des Sciences AppliquesLogo 132Les classes de style (01)Slecteurs de classesLes classes de style permettent de crer plusieurs styles diffrents pour une mme balise HTML.Dclaration Dans la dfinition des styles, il suffira d'ajouter un nom de classe au slecteur de balise et de les sparer par un point ("."). Ensuite, l'attribut CLASS est utilis dans le but de faire rfrence un nom de classe afin que lui soit appliqu le style en question.L'attribut CLASS est utilisable dans pratiquement toutes les balises HTML sauf : HTML, HEAD, BASE, META, TITLE, SCRIPT, STYLE, PARAM, BASEFONTh1.description { font-color : blue }Titre de la classe "description"33Les classes de style (02) ... ... Diverses commandes HTML ... 34Les classes de style (03)Slecteurs de classesExempleLe site web d'un magasin pourra par exemple cr une classe pour la description de ses produits, une autre pour le mode d'emploi, une autre encore pour les commentaires des utilisateurs :On fait ensuite appel au slecteur de classe dans le document HML grce l'attribut class : .descrition { text-align: justify ; font-color: black} .mde { text-align : left; font-size : 90%} .comments { font-style : italic} Titre de la classe "description"35Exemple36body{background-color: yellow;}div{background-color:#0088FF;}p{background-color:rgb(255,0,0);}i{background-color:green;}h2{ background-color:transparent;}.invert{color:white;background-color:#000;}XHTML 1.1 & CSS 2.1 XHTML 1.1Pour XHTML, le respect des recommandations du W3C simpose tous les webmestres comme une ncessit...
CSS 2.1 : feuilles de style en cascadeLes classes de style (04)Les pseudo-classes Les pseudo-classes dynamiques Ne se diffrencient pas des classes conventionnelles par leur fonctionnement. La syntaxe du slecteur de balise est lgrement diffrentele nom de classe est prdfini et il est spar de la balise par deux points (":").Il existe trois pseudo-classes dynamiques::hover {...} agt lorsque le curseur de la souris pointe l'lment.:active {...} agt lors de l'activation de l'lment par un clic de souris.:focus {...} agt lors de la rception du focus par la souris ou le clavier. ... ... ... Diverses commandes HTML ... 37Les classes de style (05)Les pseudo-classes Les pseudo-classes dynamiquesLeur fonctionnement dpend du navigateur. Si ce-dernier ne reconnat pas la pseudo-classe, elle sera ignore, c'est le cas par exemple de :focus avec le navigateur de Netscape. 38Les classes de style (06)Les pseudo-classesLes pseudo-classes de liens Les pseudo-classes de liens sont utilises essentiellement avec la balise . Elles servent dfinir un style particulier chacun des tats du liens.Par exemple, lorsqu'elle est active, la pseudo-classe :active permettra d'appliquer son style comme lorsque le lien est visit, :visited appliquera le sien.La pseudo-classe A:link {...} permet de dfinir le style des liens.La pseudo-classe A:visited {...} permet de dfinir le style des liens visits. ... ... Diverses commandes HTML ... 39Exemple affichage de tous les liens non visits en bleu a:link {color:blue;}Affichage de tous les liens visits en vert a:visited {color:green;}Affichage de tous les liens en rouge quand on les survole ou les active. ltat focus est ajout pour la prise en charge du clavier */a:hover, a:focus, a:active {color:red;} affichage en rouge des lignes de tableau survoles tr:hover {background-color: red;}Affichage de tous les lments de saisie en jaune sils sont activs input:focus {background-color:yellow;}40Les classes de style (07)Les pseudo-classesLa pseudo-classe descendante Cette pseudo-classe permet de dterminer un style spcifique une balise place en premire position au sein d'un lment parent.Cette pseudo-classe peut tre utilise avec les classes descendantes afin de localiser contextuellement la balise en question et de lui appliquer un style.Par exemple, si nous voulions atteindre la balise au sein d'un lment , il faudrait crire la ligne de commande suivante DIV SPAN:first-child {font-family: "Times New Roman"} ... ... ... 41Les classes de style (08)Les pseudo-classesLa pseudo-classe descendante ... ... ... ... Diverses commandes HTML ... 42Les classes de style (09)Les pseudo-classesLes pseudo-classes de texte Sont utilises avec toutes les balises lies au formatage du texte et plus gnralement avec la balise .La pseudo-classe :first-line {...} permet d'affecter un style la premire ligne d'un paragraphe.La pseudo-classe :first-letter {...} permet d'affecter un style la premire lettre d'un paragraphe. ... ... Texte... ... Diverses commandes HTML ... 43Les classes de style (14)Les classes base didentificateurLattribut ID affecte un identificateur unique la balise correspondante au sein d'un document.Cet identificateur unique offre la possibilit d'affecter une classe une seule balise. il faut dclarer un nom de classe prcd du signe dise ("#") la place du point et affecter la classe la balise par le biais de l'attribut ID*. ... ... ... #special { font-size: 120% } ... Paragraphe avec l'identificateur "spcial" 44ils sont trs utiliss avec javascript grce la mthode getElementById qui permet d'accder l'lment concern. Nous verrons un peu plus loin qu'une rgle de style dfinie avec un identificateur aura toujours le dessus par rapport aux autres slecteurs.La dclaration d'un style par identificateur se fait avec le caractre dise (#). Pour appliquer la rgle l'lment concern, on utilise l'attribut id :Comme pour les slecteurs de classe, la porte d'un identificateur peut tre limite un lment HTML dfini :div#spcial { font-size: 120%ExempleLe code CSS div {color: black;}#bleu {color: white; background-color: blue;} le code XHTML :Texte en blanc sur bleuTexte en noir 45Les classes de style (15)L'hritage des classes Les classes hritent des proprits de style de leur balise de base gnrique.En fait, toutes les proprits (la famille de polices, le style de caractres, leur taille, la hauteur de ligne, la couleur du texte, etc.) d'une balise s'appliquent une classe de la balise spcifique hormis dans les cas o la classe crase une proprit particulire.En rgle gnrale, il faudrait placer tout les styles courants dans la rgle de dfinition de la version de base d'une balise et ne crer des classes que pour les proprits qui seront uniques cette classe.Cette organisation facilite la maintenance et la partage des classes de style, notamment lorsqu'elles concernent des projets HTML importants. 46Cascade et hritageLe fait de pouvoir dfinir les rgles de style de plusieurs faons est en soit une source de conflit potentielle. Que se passe-t-il si, dans une feuille externe, vous dcidez que le texte contenu dans la balise aura pour police "Times" et que dans l'entte du document (entre les balises ) vous indiquez que la police sera "Arial" ? Heureusement, dans sa grande sagesse, le W3C a dfini des rgles de priorits qui vont rsoudre ces conflits :En cas de conflit entre la feuille de style de l'auteur et celle du lecteur (e.g. entre la mienne et la vtre), celle de l'auteur aura la priorit, sauf si le lecteur dclare sa rgle de style !important :p { font-family: arial !important;} Dans le cas o l'auteur et le lecteur dclare leur style !important, l'auteur prend de nouveau le dessus. Dans les style dfinis par l'auteur, le navigateur va d'abord calculer l'importance de chaque slecteur selon ce principe:slecteur d'lments (balises)0 - 0 - 1slecteur de classe0 - 1 - 0slecteur d'id1 - 0 - 0Le poids du slecteur se calcule de gauche droite et la valeur de chaque slecteur s'accumule, voici quelques exemples : p {...} /* 0-0-1 */ un poids moins important que p.classe1 {...} /* 0-1-1 */ qui lui mme moins d'importance que p#id1 {...} /* 1-0-1 */ div p {...} /* 0-0-2 */ l'emporte sur p {...} /* 0-0-1 */ p.class1#id1 {...} /* 1-1-1 */ l'emporte sur div p.class1 {...} /* 0-1-2 */ Ensuite, le navigateur va trier les styles selon leur ordre d'apparition. le principe retenir est : Plus un style est dclar tardivement, plus il aura d'importance.Les styles imports (@import) auront le poids le plus faible, viennent ensuite la feuille de style externe, la feuille de style intgre et enfin les styles en ligne :Untitledp {color: red; font-family: "Comic Sans MS"}p.petitvert {color: green; font-size: 13px; }p#times { font-size:24px; font-family: times }texte rouge avec police "comic sans"texte bleu avec police "comic sans"texte vert avec petite police texte vert avec grande policetexte rouge avec grande police "times" texte vert avec grande police "times" Voici le rsultat.Cet exemple me permet d'introduire le concept d'hritage. Comme vous le voyez, les quatre premiers paragraphes sont affichs avec la police "Comic Sans" bien qu'elle ne soit spcifie que pour le premier. Les autres paragraphes hritent en fait des proprits dfinies pour le slecteur bien qu'elles aient chacune un style spcifique tant que ces proprits n'entrent pas en conflit avec les leurs. La proprit de couleur "rouge" est ainsi crase par le style intgr du deuxime paragraphe.Le dernier paragraphe hrite ainsi des proprits du slecteur d'lment (), du slecteur de classe (.petitvert) et du slecteur d'id (#times), les proprits les plus spcifiques crasant les autres :La couleur rouge du slecteur est crase par le vert de la classe .petitvert ; la taille de 13px de la classe est crase par celle de 24px de l'id #times tout comme la police "Comic Sans" est crase par la police "times". Le concept d'hritage s'applique galement, comme dans la vie, entre lments parents et enfants, voici un exemple :Hritagebody {font-family: arial, sans-serif}div {font-size:1.2em}.rouge {color:red} Ce paragraphe hrite des proprits de l'lment body : police "arial" Celui-ci hrite des proprits des lments body et div : police "arial" et taille 1.2em Ce dernier hrite en plus des proprits de la classe .rouge Voir le rsultatPour rsum, on peut dire que les lments contenus dans d'autres lments sont leurs enfants et hritent de leurs proprits. Les valeurs des proprits (01)Les diffrentes valeurs applicablesLes valeurs dun lment. dfiniront soit une taille ou une longueur ; soit une couleur ; soit une URL ; soit un style plus explicite.Taille dun lment Pour dfinir une taille, on utilise une unit numrique qui sera absolue ou relative.Pour les valeurs absolues nous avons :le millimtre (mm) le centimtre (cm) le pouce (in) qui vaut 25,4 mm le point (pt) le pica (pc) Et pour les valeurs relatives :la hauteur em (em) le pixel (px) le pourcentage (%) 4747Les valeurs des proprits (02)Les diffrentes valeurs applicablesTaille dun lmentL'emploi de telle ou telle unit dpendra de l'lment concern (une marge, une police) et du mdia de sortie (imprimante, cran...). Quelques rglesPour un affichage cran, prfrez toujours une unit relative :Une marge d'un centimtre s'affichera bien sur le vtre mais paratra minuscule sur un autre et norme sur un troisime. De plus une personne mal-voyante aura certainement dfinie, dans les options de son navigateur, une taille de police plus grande que la moyenne ; si vous lui imposez une taille absolue, elle peinera lire votre texte. Avec des units relatives, l'esprit de feuille de style sera respect : une marge plus importante ici, une police plus petite l, etc.4848Les valeurs des proprits (03)Les diffrentes valeurs applicablesTaille dun lmentQuelques rglesLes units en pixel sont relatifs la rsolution de l'cran : sur un mme cran, un pixel sera plus gros avec une rsolution 800X600 par rapport une rsolution 1024X768.L'unit em quivaut la hauteur d'une police donne et sert donc dfinir la taille relative d'une police ; 1.1em est gal 110% (notez qu'on met un point et non une virgule).Les units em et le pourcentage sont calcules en fonction de l'lment parent.49 Bla bla bla.... l'lment est l'enfant de l'lment . Les caractres du paragraphe auront donc une taille de 12pt X 110% soit 13,2pt. J'ai employ une valeur absolue dans le body juste pour l'exemple, c'est viter, vous pouvez trs bien dfinir une unit relative dans le body, la taille sera alors calcule en fonction de celle par dfaut du navigateur. Pour vous en convaincre, voyez comment est traduit le code ci-dessous : Untitled Les caractres de cette page ont une taille de 150% dfinie dans l'lment body ce paragraphe une taille de 80%, sa taille sera calcule relativement celle dfinie dans le body Pour rsum, dans le cas d'une sortie cran, l'unit em et le pourcentage sont bien adapt pour taille de police de caractre ; pour la dimension d'une marge, d'un bloc, d'un tableau, prfrez le pourcentage ; utilisez le pixel pour la largeur d'une bordure et, dans certains cas, pour un bloc (e.g. s'il doit contenir une image). Quoi qu'il en soit, pensez toujours visualiser votre site dans diffrentes rsolutions(au moins 800X600 et 1024X768 qui sont les plus utilises) et, si possible sur plusieurs systmes d'exploitation et navigateurs. Le petit freeware sizer, qui permet de redimemsionner votre navigateur pour simuler les diffrentes rsolutions, peut vous tre trs utile. Pour une sortie papier, je vous conseille le point ou le pica pour une taille de police. Le point est une unit typographique correspondant 1/72 de pouce, soit 0.3527 mm, c'est l'unite employe par les logiciels de traitement de texte et de P.A.O ; le pica est une autre unit typographique qui correspond 12 points, soit 4,233 mm. Le centimtre et le millimtre sont naturellement appropris aux dimensions des marges et blocs.TailleCorrespondanceUnitValeuraccepteExempleInche2,54 cminNombre rel3.5inCentimtreUn centime de mtrecmNombre entier9cmMillimtreUn millime de mtremmNombre entier30mmPoint1/72me de pouceptNombre entier20ptPica12 pointspcNombre rel4.2pcPixelLe plus petit lmentde la rsolution d'cranpxNombre entier640pxHauteurde la policede caractres*Unit dfinie par rapport la taille de la policede caractresemNombre rel2.5emHauteur dela lettre "x"*Unit dfinie par rapport l'"x-height".exNombre rel-3.25ex5050Les valeurs des proprits (05)Les diffrentes valeurs applicablesLes couleursPour spcifier des couleurs, cinq possibilits sont offertes la premire est l'utilisation de mots cls. Les quatre autres utilisent le principe de la synthse additive,est le mlange des trois couleurs rouge, verte et bleue, chacune disposant de 256 teintes diffrentes ; on l'appelle additive car la somme de ces trois couleurs leur intensit maximum donne du blanc.Ces mthodes sont :La mthode hxadcimaleLa mthode hxadcimale abrgeLes deux dernires mthodes, ou mthodes rgb(), consistent dfinir l'intensit des trois couleurs soit avec un nombre (de 0 255), soit avec un pourcentage 5151Les valeurs des proprits (06)Les diffrentes valeurs applicablesLes couleursLes valeurs par mots-cls suggrs par le W3C sont celles de la palette VGA de Windows :'aqua', 'black', 'blue', 'fuchsia' , 'gray', 'green' , 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' et 'yellow'.Il existe d'autres mots-cls mais leur bon affichage n'est pas assur et sont donc viter.La mthode hexadcimale. Chacune des trois valeurs RVB est note en hexadcimal de 00 (saturation minimale) FF (saturation maximale) : #000000 donne du noir #FF0000 donne du rouge pur #00FF00 donne du vert pur #0000FF donne du bleu pur #FFFFFF donne du blanc #888888 donne du gris neutre #D2691E donne un ton "chocolat" 5252Les valeurs des proprits (07)Les diffrentes valeurs applicablesLes couleursLa mthode hexadcimale abrgela saturation des trois couleur est dfinie de 0 Felle offre donc moins de nuances, notez que le navigateur duplique chacune des trois valeurs, #F8F quivaut en fait #FF88FF :#000 donne du noir #F00 donne du rouge pur #0F0 donne du vert pur #00F donne du bleu pur #FFF donne du blanc #888 donne du gris neutre #C63 donne un ton "chocolat" proche de celui du dessus 5353Les valeurs des proprits (08)Les diffrentes valeurs applicablesLes couleursLes deux dernires mthodes, ou mthodes rgb(), consistent dfinir l'intensit des trois couleurs soit avec un nombre (de 0 255), soit avec un pourcentage :rgb(o,o,o) et rgb(0%,0%,0%)donnent du noir rgb(255,0,0) et rgb(100%,0%,0%)donnent du rouge purrgb(0,255,0) et rgb(0%,100%,0%)donnent du vert purrgb(0,0,255) et rgb(0%,00%,100%)donnent du bleu purrgb(255,255,255) et rgb(100%,100%,100%)donnent du blanc 5454Quelques proprits Intrssantes (1) 55Quelques proprits Intrssantes (1) 56Quelques proprits Intrssantes (1) 57Quelques proprits Intrssantes (1) 58Quelques proprits Intrssantes (1) 59Quelques proprits Intrssantes (1) 60Quelques proprits Intrssantes (1) 61Quelques proprits Intrssantes (1) 62Quelques proprits Intrssantes (1) 63Quelques proprits Intrssantes (1) 64Quelques proprits Intrssantes (1) 65Quelques proprits Intrssantes (1) 66Quelques proprits Intrssantes (1) 6767Quelques proprits Intrssantes (1) 68Quelques proprits Intrssantes (1) 69Quelques proprits Intrssantes (1) 70Quelques proprits Intrssantes (1) 71Quelques proprits Intrssantes (1) 72Quelques proprits Intrssantes (1) 73Quelques proprits Intrssantes (1) 74Quelques proprits Intrssantes (1) 75Quelques proprits Intrssantes (1) 76Quelques proprits Intrssantes (1) 77Quelques proprits Intrssantes (1) 78Quelques proprits Intrssantes (1) 79Quelques proprits Intrssantes (1) 80Quelques proprits Intrssantes (1) 81Quelques proprits Intrssantes (1) 82Quelques proprits Intrssantes (1) 83Quelques proprits Intrssantes (1) 84Quelques proprits Intrssantes (1) 85Quelques proprits Intrssantes (1) 86Quelques proprits Intrssantes (1) 87Quelques proprits Intrssantes (1) 88Quelques proprits Intrssantes (1) 89Quelques proprits Intrssantes (1) 90Quelques proprits Intrssantes (1) 91Quelques proprits Intrssantes (1) 92Quelques proprits Intrssantes (1) 93Quelques proprits Intrssantes (1) 94Quelques proprits Intrssantes (1) 95Quelques proprits Intrssantes (1) 96Quelques proprits Intrssantes (1) 97Quelques proprits Intrssantes (1) 98Quelques proprits Intrssantes (1) 99Quelques proprits Intrssantes (1) 100Quelques proprits Intrssantes (1) 101Quelques proprits Intrssantes (1) 102Quelques proprits Intrssantes (1) 103Quelques proprits Intrssantes (1) 104Quelques proprits Intrssantes (1) 105Quelques proprits Intrssantes (1) 106Quelques proprits Intrssantes (1) 107Quelques proprits Intrssantes (1) 108Quelques proprits Intrssantes (1) 109Quelques proprits Intrssantes (1) 110Quelques proprits Intrssantes (1) 111Quelques proprits Intrssantes (1) 112Quelques proprits Intrssantes (1) 113Exercice -Tableau114Exercice -Tableau115Exercice -Tableau116Exercice Tableau+Formulaire117Exercice- liste118TP HTML-CSSRaliser un site pour les cours dispenss lENSA en se basant sur les cadres et les CSSDans le premier cadre, vous affichez le nom de lecole et son logoDans un deuxime cadre, vous crez la liste des cours dispenss sous forme dun ensemble de liens hypertextesLorsque vous cliquez sur un lien donn, le contenu de ce lien saffiche Il est necessaire les styles dans des fichiers spars des pages HTML119119Exercice-HTML-CSS120234Le contenu de chaqueCours La liste des cours dispenssEcole Nationale des Sciences AppliquesLogo 1120Exercice Raliser un menu droulant en utilisant les CSS121121