Upload
mahmoud-alami
View
29
Download
3
Embed Size (px)
DESCRIPTION
Css cours - M. Adil Kenzi ENSAF
Citation preview
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