Cours5 Css

Programmation client web cours 5 : CSS
Plan
3 3 3
3 3 3
Modles de programmation via le service Web Protocole HTTP HTML q BALISES Cascading Style Sheet Javascript Applet java
IPW : programmation ct client
Langage HTML
3
Langage balises : q Une balise : une instruction de mise en forme q Une balise : contient des textes et/ou des autres balises autorises q Une balise : structure le texte q Avant : une balise : mise en forme Navigateur : recherche des balises et interprtation q <NOM_DE_BALISE>.</NOM_DE_BALISE> q & (caractres spciaux) : "&#code ascii;". Ex : x il y a : & /& ; < / < ; > / > x é / (note les caractres s'obtiennent par la &+lettre+accent; les accents tant acute, grave, circ, cedil, tilde et aussi les ligatures avec lig, e.g. æ / ). Liens hypertexte : q Chaque document HTML peut tre reprsent par un URL comme une ressource sur Internet. q Un document HTML peut contenir des liens vers les autres documents HTML ou les autres sources de donnes (multimdia, programme) Outil de validation : http://validator.w3.org
3
Fichier HTML minimum

3
Version html 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
Proprits des Balises html

3
Proprits gnrales (mais pas systmatiques) id, class (document-wide identifiers) lang (language information), dir (text direction) title (element title) style (inline style information ) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
3 3 3 3
Balises Meta (enttes)

<meta name="xxx" ... > description keywords author identifier-url date-creation-yyyymmdd date-revision-yyyymmdd reply-to publisher copyright generator Description Description du site en une phrase de prfrence. Liste de mots cls Auteur du site URL de votre site Date de la cration de votre site Date de la dernire modification Votre e-mail Celui qui publie votre site Copyright(s) de votre site Logiciels utiliss pour la cration de votre site Nb. Car. 200 500 Exemple <meta name="desciption" content="HTML Le Portail ddi loption IPW"> <meta name="keywords" content="html, xml, sgml, tags"> <meta name="author" content="imaginance"> <meta name="identifier-url" content="http://deptinfo.unice.fr/"> <meta name="date-creation-yyyymmdd" content="20060525">"> <meta name="date-revision-yyyymmdd" content="20070717"> <meta name="reply-to" content="webmaster@allhtml.net"> <meta name="publisher" content="unice"> <meta name="copyright" content="unice"> <meta name="generator" content="vi, gedit, openoffice">

3
Robots : outils des moteurs de recherche (rfrencement) q Pour indexer toutes les pages de votre site ( vers lesquels vous avez plac des liens), utilisez la proprit All : <META NAME="Robots" CONTENT="All"> q En interdire l'accs aux robots grce l'attribut None. q Avec Index, votre page sera indexe aussitt. Tandis que si vous mettez Noindex, elle ne sera pas indexe. q Si le robot rencontre Follow, les destinations des liens sont indexes. Mais si vous crivez Nofollow, le robot ne gardera pas mmoire de vos liens. q Avec Noimageindex, les images d'une page dj indexe ne le seront pas. Et freesurvey empche de suivre les liens pointant vers les images.
Description Indique la revisite du robot aprs n jours Nb. Car. Exemple <meta name="revisit-after" content="15 days"> <meta name="category" content="internet"> <meta name="robots" content="index, follow">
<meta name="xxx" ... >
revisit-after
category
Catgorie de votre site (annuaire)
robots
Diriger le robot

3
META : Le rafrachissement et la redirection q Pouvoir faire recharger une page priodiquement (toutes les n secondes ) <META HTTP-EQUIV="refresh" CONTENT="n"> q Rediriger le navigateur vers un autre site : <META HTTP-EQUIV="refresh" CONTENT="n; URL=Mettrez ici l'URL souhaite"> q HTTP-EQUIV : tout dune requte http x expires : date limite d'expiration de vos pages (cache) <meta http-equiv="expires" content="wed, 06 sept 2006 12:00:00 gmt"> <BASE HREF= ...> donne la base de l'adresse URL qui sera place devant les rfrences relatives dans le document, de faon ce que hors contexte les fichiers soient cherchs l'adresse : BASE adresse relative
Balises Meta (LINK)

3
LINK : lien (uniquement dans lentte) q HREF=adresse q rel et rev = alternate | appendix | bookmark | chapter | contents | copyright | glossary| help | home | index | next | prev | section | start | stylesheet | subsection x rel : relation entre ce document et le document cible x rev : relation entre le document cible et ce document q type = MIME_TYPE (text/css ou image/gif ou ) q target = _blank | _self | _top | _parent (frameset) q media = cf transparent suivant q charset : encodage de la cible (par dfaut "ISO-8859-1") q hreflang : dfinit la langue du document cible non standard ? <link rel="icon" href="ipw.png" type="image/png">
Type de Media
3
all
q
convient pour tous les appareils ; 3 aural q destin aux synthtiseurs de parole. Voir les dtails fournis dans le chapitre sur les feuilles de style auditives 3 braille q destin aux appareils braille retour tactile ; 3 embossed q destin aux appareils impression braille ; 3 handheld q destin aux appareils portatifs (typiquement ceux avec petits crans, monochromes et bande passante limite) ; 3 print q destin un support pagin opaque et aux documents vus sur cran en mode de prvue avant impression. Consulter le chapitre sur les mdias pagins pour des informations sur les questions de mise en forme spcifiques ceuxci ; 3 projection q destin aux prsentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents. Consulter le chapitre sur les mdias pagins pour des informations sur les questions spcifiques ceuxci ; 3 screen q destin principalement aux moniteurs couleurs ; 3 tty q destin aux mdias utilisant une grille de caractres fixe, tels les tltypes, les terminaux ou les appareils portatifs aux capacits d'affichage rduites. Les auteurs ne devraient pas utiliser de valeurs exprimes en pixel avec ce type de mdia ; 3 tv q destin aux appareils du type tlvision (avec ces caractristiques : basse rsolution, couleur, dfilement des pages limit, sonoris). 10 IPW : programmation ct client
Plan
3 3 3
3 3 3
Modles de programmation via le service Web Protocole HTTP HTML q BALISES Cascading Style Sheet Javascript Applet java
11
CSS : introduction
3
D'un point de vue "conception" (ergonomique et programmation), HTML non satisfaisant. q la maintenabilit non aise, les modifier pour en changer l'aspect complique encore plus q d'autant plus cause des rpercutions Les feuilles de style (CSS = Cascading Style Sheet) permettent : q Principe en IHM : sparation du contenu de la prsentation : x Sparation du contenu et de la mise en forme. x Modifier l'aspect d'un page ou d'un site sans en modifier le contenu. x Modifier facilement l'aspect d'une page. q Cohsion de la prsentation tout au long du site (feuilles de style externes). q Rduire le temps de chargement des pages. q Correction de certains cueils d'HTML : x comprhensible, simple et logique par rapport au HTML. x contrle des polices, de la distance entre les lignes, des marges et des indentations (sans devoir utiliser de tableaux...) x moins de code, mieux structur, et donc des sites plus faciles maintenir et faire.
12
CSS : introduction
3 3
Utilisation de plusieurs feuilles de style (hritage) Syntaxe : q BALISE { Proprit : valeur} q Exemple : H2 { color : green ; } indique que tous les titres de niveau 2 sont en vert. Ici la proprit est color mais il en existe une bien plus ! Une feuille de style CSS peut tre dfinie de diffrentes faons : q Dans un document, il est possible de donner l'URI (url) d'un fichier externe. La syntaxe est la suivante : <link rel="stylesheet" type="text/css" media="screen" href="fichier.css" />. La balise LINK doit tre utilise entre les balises <head> et </head> q @import "fichier.css", entre les balises <style></style> et avant la rgle suivante q A l'intrieur du document lui-mme (toujours dans la partie entte) par l'utilisation de balises STYLE : <style type="text/css"> h1 { color: green ; }</style>. q Par dfinition du style dans une balise qui supporte un ajout de style, comme par exemple <li style="color:red;"> </li>
13
CSS : autres lments de syntaxes

3
Les commentaires q Entre /* */ q  accepts (commentaire HTML) mais par de commentaire permet de cacher le CSS pour un navigateur qui ne les comprend pas Blocs : dfinis par { } q Slecteur { } Dclaration de proprits : q Plusieurs lignes par bloc possible : sparation par ; q Dernire apparition dune proprit valide qui compte q exemple-cours5/declaration1.html et exemple-cours5/declaration2.html Non prise en compte de ce qui est non valide q Proprits inconnues q Valeurs invalides (unit !) q exemple-cours5/declaration3.html
14
CSS : valeurs
Les entiers et les nombres 3 units ABBR. UNIT EXAMPLE cm Centimeters 2.5cm em Ems 3em in Inches 1in mm Millimeters 25mm pc Picas 6pc px Pixels 96px pt Points 72pt ex X-heights 2ex
3
NOTES 1 em equals the font point size.
1 inch = 6 picas 1 inch = 72 points 1 x-height usually equals the height of the letter x.
15
CSS : valeurs
3 3 3 3
3 3 3
Les pourcentages (par rapport quelque chose) URI (url) : url("http://deptinfo.unice.fr/~renevier/L2/ipw.png") Les compteurs : exemple-cours5/unite.html Les chanes q entre " " q Caractres spciaux : \codeascii q \22 ou \" ; \27 ou \ q "bla bla bl a bla bla bla" : valide Angles : deg, rad ou grad (feuilles de style auditives) Temps : s ou ms (feuilles de style auditives) Frquence : Hz ou kHz (feuilles de style auditives)
16
CSS : valeurs (couleurs)

KEYWORD aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGBHEX #00ffff #000000 #0000ff #ff00ff #808080 #008000 #00ff00 #800000 #000080 #808000 #800080 #ff0000 #c0c0c0 #008080 #ffffff #ffff00 RGB INTEGER rgb(0,255,255) rgb(0,0,0) rgb(0,0,255) rgb(255,0,255) rgb(128,128,128) rgb(0,128,0) rgb(0,255,0) rgb(128,0,0) rgb(0,0,128) rgb(128,128,0) rgb(128,0,128) rgb(255,0,0) rgb(192,192,192) rgb(0,128,128) rgb(255,255,255) rgb(255,255,0) RGB PERCENTAGE rgb(0%,100%,100%) rgb(0%,0%,0%) rgb(0%,0%,100%) rgb(100%,0%,100%) rgb(50%,50%,50%) rgb(0%,50%,0%) rgb(0%,100%,0%) rgb(50%,0%,0%) rgb(0%,0%,50%) rgb(50%,50%,0%) rgb(50%,0%,50%) rgb(100%,0%,0%) rgb(75%,75%,75%) rgb(0%,50%,50%) rgb(100%,100%,100%) rgb(100%,100%,0%)
Et plus encore : http://www.w3schools.com/css/css_colornames.asp

IPW : programmation ct client 17
CSS : Slecteurs
3
Pattern : lment (slecteur de type) q tous les lments dsigns apparaissent avec le style dfini entre { } q Ex : x p {color: white ; background-color: black;} x crit le paragraphe en blanc sur fond noir Pattern : , (regroupement) q Regroupe les dclarations q Ex : x H1, H2, H3 { color: blue;} x Les titres de niveaux 1, 2 et 3 sont crits en bleu Pattern : * (slecteur universel) q tous les lments (* veut dire n'importe quel lment) apparaissent avec le style dfini entre { } q Ex : x * {background-color: rgb(230,255,230);} x Effet : mets le fond en vert exemple-cours5/selecteurs1.html
18
CSS : Slecteurs
3
Pattern : lment lment (slecteur descendant) q tous les lments (en 2ime) contenus dans des lments (en 1er) apparaissent avec le style dfini entre { } q Ex: x p span {color: red ; background-color: orange;} x Tous les span dans des p sont crit en rouge sur fond orange Pattern : lment.classname (slecteur de classe) q tous les lments lments dont la class (attribut) est spcifie classname" apparaissent avec le style dfini entre { } q Ex : x p.special {color: white ; background-color: black;} x Les paragraphes de class special sont crits en blanc sur fond noir Pattern .classname (slecteur de classe) q tous les lments dont la class est spcifie classname apparaissent avec le style dfini entre { } q Ex : x .special2 {color: white ; background-color: black;} x Les lments de class special2 sont crits en blanc sur fond noir exemple-cours5/selecteurs2.html
19
CSS : Slecteurs
3
Pattern : #id (slecteur did) q L'lment dont l'id (attribut, unique) est spcifie "id" apparait avec le style dfini entre { } q Ex : x #special {background-color:#ffffef; border:blue 2px solid;} x Llment dfinit avec id="id" apparat sur un fond lgrement jaune et encadr en bleu Pattern lment > lment (slecteur denfant) q tous les lments (en 2ime) contenus dans des lments (en 1er) apparaissent avec le style dfini entre { } q Ex : x p > span {background-color:#ffefff; border: green 2px solid;} x Tout span dfinit dans un p apparat sur un fond lgrement violet et encadr en vert Pattern lment + lment (slecteur d'enfant adjacent) q Chaque lment (en 2ime) immdiatement aprs llment (en 1er) apparat avec le style dfini entre {} : les deux lments ont le mme parent q Ex : x p + ul {background-color:#efffff; border-color:red; border-width:2; border-style: solid;} x Tout ul dfini juste aprs un p apparat sur un fond lgrement cyan et encadr en rouge exemple-cours5/selecteurs3.html
20
CSS : Slecteurs
3
3 3 3 3
Pattern : lment[attribut] (slecteurs d'attribut) q Chaque lment p qui a un attribut id (quelque soit la valeur de l'attribut apparait avec le style dfini entre {} q Ex : x p[id]{color: white ; background-color: black;} x Chaque p qui a un id est crit en blanc sur fond noir Notez qu'il est possible de restreindre le style : Pattern : lment [att="value"] q le style ne vaut que quand l'attribut att a la valeur prcise "value" Pattern : lment [att~="value"] : q le style ne vaut que quand la valeur de l'attribut att contient "value" exemple-cours5/selecteurs4.html
21
CSS : pseudo-classes
lment:first-child q correspond au premier lment (celui-ci) enfant d'un autre lment. q Si llment est le premier fils dun autre 3 Pour une ancre (a) :link et :visited q gnralement reprsentation diffrente des liens visits de ceux qui l'ont dj t. q Equivalent CSS (dconseill) x :link s'applique aux liens qui n'ont pas t visits ; x :visited s'applique aux liens dj visits 3 pseudoclasses dynamiques :active , :hover et :focus q :hover pour llment dsign par un pointeur (souris) q :active pour llment actif (entre le pressed et le realeased) q :focus pour llment qui reoit l'attention (celuici acceptant les vnements du clavier ou d'autres formes d'entres de texte) 3 :lang q Pour prciser des lments (en association avec lattribut lang) 3 exemple-cours5/pseudo.html 22 IPW : programmation ct client
3
CSS : pseudo-lments
3 3 3
:first-line : premire ligne :first-letter : premire lettre :before et :after q ':before' et ':after' pour insrer un contenu gnr avant ou aprs celui d'un lment. x H1:before {content: counter(chapno, upperroman) ". "} q En combinaison avec les pseudolments :firstline et :firstletter, les pseudolments :before et :after s'appliquent la premire lettre ou la premire ligne, y compris le texte insr. x Exemple(s) : P.special:before {content: "Spcial ! "} P.special:firstletter {color: gold} Ceci donnera une couleur or au "S" de "Spcial ! ". exemple-cours5/pseudoElt.html
23
Assignation, cascade et hritage

3
Une fois qu'un agent utilisateur (navigateur web) a parcouru un document et en a construit une arborescence, celuici, pour chacun des lment de l'arborescence, doit distribuer une valeur pour chacune des proprits concernes du type de mdia vis. La valeur finale d'une proprit est le rsultat d'un calcul en trois tapes : celleci est dtermine par la spcification (la valeur "spcifie"), puis rsolue dans une valeur absolue si ncessaire (la valeur "calcule") et finalement transforme en accord avec les contraintes de son contexte (la valeur "relle").
24
Valeurs spcifies
3
Les agents utilisateurs (navigateur web) doivent d'abord appliquer une valeur spcifie une proprit selon le mcanisme suivant (dans l'ordre de priorit) : q 1. Si la cascade donne une valeur, utiliser celleci ; q 2. Autrement, si la proprit est hrite, utiliser la valeur de l'lment parent, qui est en gnral une valeur calcule ; q 3. Autrement, utiliser la valeur initiale de la proprit. Cette valeur initiale est dfinie pour chaque proprit. La racine de l'arborescence du document n'ayant pas de parent, et ne pouvant donc pas hriter de valeurs, c'est la valeur initiale qui est utilise si ncessaire.
25
Valeurs calcules
3
Les valeurs spcifies peuvent tre absolues (ex. les valeurs 'red' et '2mm' ne sont pas relatives une autre valeur) ou relatives (ex. les valeurs 'auto', '2em' et '12%' se rapportent une autre valeur). Une valeur absolue ne requiert aucune opration supplmentaire pour tablir sa valeur calcule. Par contre, une valeur relative doit subir une transformation qui aboutit sa valeur calcule : une valeur en pourcentage doit tre multiplie par une valeur de rfrence (celleci est prcise pour chaque proprit), une valeur avec une unit relative (em, ex, px) doit tre doit devenir absolue par multiplication avec les tailles de police ou de pixel appropries, les valeurs 'auto' doivent tre calcule selon les formules donnes pour chaque proprit, certains motscls ('smaller', 'bolder', 'inherit') doivent tre remplacs en accord avec leurs dfinitions. Dans la plupart des cas, les lments hritent de valeurs calcules. Cependant, certaines proprits ont des valeurs spcifies qui sont hrites (ex. la valeur numrique de la proprit 'lineheight'). Dans les cas o les lments enfants n'hritent pas de valeurs calcules, ceci est dcrit dans les dfinitions des proprits.
26
Hritage
3
Les lments enfants hritent de certaines valeurs de leurs lments parents dans l'arborescence du document. Chacune des proprit dfinit si elle est hrite, ou non. Supposons un lment accentu (ici EM) dans un lment H1 : q <H1 style="color:blue">Le titre <EM>est</EM> important !</H1> q Si aucune couleur n'est prcise pour l'lment EM, le mot accentu "est" hritera de la couleur de l'lment parent, ainsi l'lment H1 ayant une couleur bleu, EM le sera galement. Pour appliquer une proprit de style "par dfaut" un document, un auteur peut l'appliquer la racine de l'arborescence du document. On peut utiliser les lments HTML ou BODY pour cet usage. exemple-cours5/heritage.html
27
inherit et !important
3
La valeur 'inherit' provoque l'hritage des valeurs par les proprits. Ceci s'applique galement aux proprits dont la valeur n'est normalement pas hrite. !important q CSS essaye de prserver un quilibre entre les prrogatives de l'auteur et celles de l'utilisateur. Par dfaut, les rgles d'une feuille de style de l'auteur surclassent celles de l'utilisateur (voir la rgle de cascade numro 3). q Par souci d'quilibre, les dclarations avec "!important" (les motscls "!" et "important" suivent la dclaration) tablissent ainsi leur prsance sur les dclarations normales. Aussi bien les feuilles de style de l'auteur que celles de l'utilisateur peuvent contenir des dclarations avec "!important", celles de l'utilisateur ayant priorit. Cette fonction de CSS amliore l'accessibilit des documents, offrant ceux des utilisateurs qui ont des besoins particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine matrise de la prsentation.
28
Cascade
3
Les feuilles de style ont trois origines diffrentes : l'auteur, l'utilisateur et l'agent utilisateur. q L'auteur : produit des feuilles de style pour un document source selon les conventions du langage de ce document. Cellesci peuvent tre incorpores dans le document ou relies celuici. q L'utilisateur : peut tre capable d'indiquer une information de style pour un document particulier. Par exemple, celuici peut dsigner une feuille de style contenue dans un fichier ou un agent utilisateur peut fournir l'interface pour produire une feuille de style personnelle. q L'agent utilisateur: l'agent utilisateur conforme doit appliquer sa feuille de style par dfaut avant toutes les autres feuilles de style d'un document. Cette feuille de style devrait prsenter les lments du document de faon satisfaire au rendu gnralement admis pour ceuxci. Par exemple, pour des navigateurs visuels, l'lment EM en HTML est rendu avec une police en italique. Noter que cette feuille de style par dfaut peut varier si l'utilisateur change les rglages de son systme (ex. les couleurs du systme). Cependant, il peut tre impossible de modifier les valeurs de celleci, en raison d'une implmentation rduite de l'agent utilisateur.
29
Cascade
3
1. Trouver toutes les dclarations qui concernent l'lment et la proprit en question, pour le type de mdia vis. Cellesci s'appliquent si le slecteur correspond cet lment ; 2. Un tri primaire est effectu sur les dclarations selon leur poids et leur origine : pour une dclaration normale, les feuilles de style de l'auteur surclassent celles de l'utilisateur, ces dernires surclassant la feuille de style par dfaut. Pour une dclaration avec "!important", cellesci surclassent les dclarations normales. Une feuille de style importe a la mme origine que celle qui l'a importe ; 3. Un tri secondaire est effectu selon la spcificit des slecteurs : les plus spcifiques surclasseront ceux plus gnraux. Les pseudolments et les pseudoclasses sont considrs respectivement comme des lments et des classes normaux ; 4. Un tri final selon l'ordre de spcification : si deux rgles ont les mmes poids, origines et spcificits, c'est la dernire survenue qui l'emporte. Les rgles issues de feuilles de style importes sont considres comme tant survenues avant chacune de celles de la feuille de style ellemme.
30
Spcificit d'un slecteur

3
La spcifit d'un slecteur est dtermine comme suit : q dans le slecteur, compter le nombre d'attributs Id (= a) ; q puis celui des autres attributs et des pseudoclasses (= b) ; q et ensuite le nombre de noms des lments (= c) ; q ignorer les pseudoelements. Assembler les trois nombres abc (dans un systme de nombre avec une base tendue) pour obtenir la spcificit. q * {} /* a=0 b=0 c=0 > specificit = 0 */ q LI {} /* a=0 b=0 c=1 > specificit = 1 */ q UL LI {} /* a=0 b=0 c=2 > specificit = 2 */ q UL OL+LI {} /* a=0 b=0 c=3 > specificit = 3 */ q H1 + *[REL=up]{} /* a=0 b=1 c=1 > specificit = 11 */ q UL OL LI.red {} /* a=0 b=1 c=3 > specificit = 13 */ q LI.red[title] {} /* a=0 b=2 c=1 > specificit = 21 */ q #x34y {} /* a=1 b=0 c=0 > specificit = 100 */ Pour HTML, les valeurs de l'attribut "style" sont des rgles de feuille de style. Ces rgles n'ont pas de slecteurs, mais dans l'optique du point 3 de l'algorithme de cascade, on considre qu'elles ont un slecteur d'ID (spcificit : a=1, b=0, c=0). Et dans l'optique du point 4, on considre qu'elles surviennent aprs toutes les autres rgles.
31
Style hors CSS

3
L'agent utilisateur peut tenir compte des indications de prsentation provenant d'autres sources que les feuilles de style, par exemple l'lment FONT ou l'attribut "align". Dans ce cas, ces indications doivent tre traduites dans leurs rgles quivalentes de CSS avec une spcificit gale zro. Ces rgles sont senses se trouver au dbut de la feuille de style de l'auteur, permettant leur surclassement par les rgles suivantes de cette feuille de style.
32
Media
3
3 3
Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir adapter la reprsentation d'un document pour diffrents mdias : un cran, une feuille de papier, un synthtiseur de parole, un appareil braille, etc. Certaines proprits spcifiques au mdia Spcification du mdia : q @import url("loudvoice.css") aural; q @media print { /* la feuille de style pour l'impression vient ici */ } q @media screen, print { BODY { lineheight: 1.2 } } q <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
33
Catgorie de mdia
3 3 3 3
continu ou pagin (continuous/paged) ; visuel, auditif ou tactile (visual/aural/tactile ) ; grille (pour les appareils avec grille de caractres) ou bitmap (grid/bitmap); interactif (pour les appareils qui interagissent avec l'utilisateur) ou statique ( l'inverse, pour ceux qui n'interagissent pas avec celuici) (interactive/static) ; all (comprend tous les types de mdias).
Media Groups continuous/paged continuous continuous paged both paged paged continuous continuous visual/aural/tactile aural tactile tactile visual visual visual visual visual visual, aural grid/bitmap N/A grid grid both bitmap bitmap bitmap grid bitmap interactive/static both both both both static static both both both 34
Media Types aural braille emboss handheld print projection screen tty
tv both IPW : programmation ct client
Color
3
color q Valeur : <couleur> | inherit q Initiale : selon l'agent utilisateur q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel Cette proprit dcrit la couleur d'avantplan du contenu de texte d'un lment. Voici plusieurs faons d'indiquer la couleur rouge q EM { color: red } /* nom de couleur prdfini */ q EM { color: rgb(255,0,0) } /* couleurs en RGB allant de 0 255 */
35
background
3
Les proprits d'arrireplan : 'backgroundcolor', 'backgroundimage', 'backgroundrepeat', 'backgroundattachment', 'backgroundposition' et 'background backgroundcolor q Valeur : <couleur> | transparent | inherit q Initiale: transparent q S'applique : tous les lments q Hrite : non q Pourcentage : sans objet q Mdias : visuel Cette proprit donne la couleur d'arrireplan d'un lment, avec une valeur de <couleur>, ou bien avec le motcl 'transparent', celuici laissant ventuellement voir les couleurs situes plus endessous.
36
background
3
backgroundimage q Valeur : <uri> | none | inherit q Initiale : none q S'applique : tous les lments q Hrite : non q Pourcentage : sans objet q Mdias : visuel Cette proprit spcifie l'image d'arrireplan d'un lment. En mme temps qu'une image, les auteurs devraient aussi spcifier une couleur d'arrireplan, cette couleur tant employe en remplacement d'une image indisponible. Celleci, une fois disponible, vient se superposer sur le fond color. La couleur du fond tant ainsi visible au travers des zones transparentes de l'image. La proprit admet les valeurs d'<uri>, pointant vers une image, ou 'none', prohibant l'emploi d'image.
37
background
3
backgroundrepeat q Valeur : repeat | repeatx | repeaty | norepeat | inherit q Initiale : repeat q S'applique : tous les lments q Hrite : non q Pourcentage : sans objet q Mdias : visuel Quand on spcifie une image d'arrireplan, cette proprit indique si l'image est rpte et la manire de la rptition. La mosaque de fond rsultante correspond aux aires de contenu, d'espacement et de bordure de la bote de l'lment en question. Les significations des valeurs sont : q repeat L'image se rpte la fois horizontalement et verticalement ; q repeatx L'image ne se rpte qu'horizontalement ; q repeaty L'image ne se rpte que verticalement ; q norepeat L'image ne se rpte pas : un seul exemplaire de celleci est dessin.
38
background
3
backgroundattachment q Valeur : scroll | fixed | inherit q Initiale : scroll q S'applique : tous les lments q Hrite : non q Pourcentage : sans objet q Mdias : visuel Quand on spcifie une image d'arrireplan, cette proprit indique si l'image est fixe par rapport l'espace de visualisation (pour la valeur 'fixed'), ou si celleci dfile en mme temps que le document (pour la valeur 'scroll'). Noter qu'il n'existe qu'un seul espace de visualisation par document ; c..d., mme si l'lment est dot d'un mcanisme de dfilement (voir la proprit 'overflow'), un arrireplan avec la valeur 'fixed' ne se dplace pas avec cet lment. Si l'image est fixe, celleci n'est seulement visible que quand elle se trouve dans les aires d'arrireplan, d'espacement et de bordure de l'lment. moins que l'image ne se rpte en mosaque ('backgroundrepeat: repeat'), celleci peut ainsi ne pas apparatre.
39
backgroundposition
Valeur : [ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |inherit q Initiale : 0% 0% q S'applique : ceux des lments de type bloc et ceux remplacs q Hrite : non q Pourcentage : se rapporte la taille de la bote ellemme q Mdias : visuel Pour une image d'arrireplan, cette proprit indique la position initiale de celleci. q <pourcentage> <pourcentage> : pour la paire de valeurs x% y%, le point de limage correspondant est align avec le point de la surface daffichage (mme proportion) q <longueur> <longueur> : pour la paire de valeur 3cm 2cm', le coin en haut et gauche de l'image se place sur le point, situ 3cm vers la droite et 2cm vers le bas en partant du coin en haut et gauche de l'aire daffichage ; q top left et left top : Identique '0% 0%' ; q top, top center et center top : Identique '50% 0%'; q right top et top right : Identique '100% 0%' ; q left, left center et center left : Identique '0% 50%' ; q center et center center : Identique '50% 50%' ; q right, right center et center right : Identique '100% 50%' ; q bottom left et left bottom : Identique '0% 100%' ; q bottom, bottom center et center bottom : Identique '50% 100%' ; q bottom right et right bottom : Identique '100% 100%'. Une seule valeur (% ou longueur) ne concerne que la position horizontale, la position verticale sera 50%. Deux valeurs (% ou longueur) la premire concerne la position horizontale. Les positions ngatives le sont galement.
q
40
Background
3
La proprit 'background' est une proprit raccourcie qui sert regrouper les proprits individuelles 'backgroundcolor', 'backgroundimage', 'backgroundrepeat', 'backgroundattachment' et 'backgroundposition dans la feuille de style. La proprit 'background' distribue d'abord toutes les proprits individuelles d'arrireplan leur valeur initiale, puis leur applique les valeurs explicites de la dclaration. Ex : q BODY { background: red } q P { background: gray url("ele.jpg") 50% repeat fixed } q exemple-cours5/background.html
41
Font
3
font q Valeur : [ [ <'fontstyle'> || <'fontvariant'> || <'fontweight'> ]? <'fontsize'> [ / <'lineheight'> ]? <'fontfamily'> ] | caption | icon | menu | messagebox | smallcaption | statusbar | inherit q Initiale : voir les proprits individuelles q S'applique : tous les lments q Hrite : oui q Pourcentages: permis sur 'fontsize' et 'lineheight' q Mdias : visuel Les valeurs suivantes concernent les polices de systme : q caption : La police employe pour lgender les contrles (ex. boutons, menus droulants, etc.) ; q icon : La police employe pour lgender les icones ; q menu : La police employe dans les menus (ex. les menus droulants et les listes de menus) ; q messagebox : La police employe dans les botes de dialogue ; q smallcaption : La police employe pour tiqueter les contrles de petite taille; q statusbar : La police employe dans les barres de statut de la fentre.
42
font-style
3
Le style de police prcise l'aspect dans lequel doit tre rendu le texte, normal, italique ou oblique. fontstyle q Valeur : normal | italic | oblique | inherit q Initiale : normal q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel
43
font-variant
3
La variante de police indique si le texte doit tre rendu avec des glyphes normaux ou avec des glyphes en petites capitales, pour les caractres en minuscule. fontvariant q Valeur : normal | smallcaps | inherit q Initiale : normal q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel
44
font-weight
3 3
Le poids de police se rfre la graisse, plus ou moins grasse, des glyphes utiliss pour rendre le texte, en fonction des autres membres de la mme famille de polices. fontweight q Valeur : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit q Initiale : normal q S'applique : tous les lments q Hrite : oui q Pourcentage q : sans objet q Mdias : visuel Les significations des valeurs sont : q 100 900 : Ces valeurs forment une squence ordonne, o chacun des nombres indique, pour la police, une graisse au moins aussi grasse que celle du nombre prcdent ; q normal quivaut '400' ; q bold quivaut '700' ; q bolder : Spcifie la graisse suprieure celle assigne une police, cette graisse tant plus grasse que celle hrite par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplement la valeur numrique suprieure (l'aspect de la police ne changeant pas), moins que la valeur hrite ne soit dj gale '900', auquel cas la valeur rsultante devient galement '900' ; q lighter : Spcifie la graisse infrieure celle assigne une police, cette graisse tant moins grasse que celle hrite par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplement la valeur numrique infrieure (l'aspect de la police ne changeant pas), moins que la valeur hrite ne soit dj gale '100', auquel cas la valeur rsultante devient galement '100'.
45
font-size
3
fontsize q Valeur : <tailleabsolue> | <taillerelative> | <longueur> | <pourcentage> | inherit q Initiale : medium q S'applique : tous les lments q Hrite : oui, la valeur calcule galement q Percentages: se rapporte la taille de la police du parent de l'lment q Media: visuel Cette proprit dcrit la taille d'une police spcifie explicitement. Celleci correspond au carr em, un concept issu de la typographie. Noter que certains glyphes peuvent dborder de leur carr em. Les significations des valeurs sont : q <tailleabsolue> Un motcl <tailleabsolue> se rfre une entre de la table des tailles de police, celleci tant dresse et mise en oeuvre par l'agent utilisateur. Les valeurs possibles : x [ xxsmall | xsmall | small | medium | large | xlarge | xxlarge ] x facteur d'chelle de 1.2 entre les valeurs conscutives de la table ; si la valeur 'medium' correspond 12pt, la valeur 'large' devrait correspondre 14.4pt. x Les facteurs d'chelle peuvent diffrer selon les mdias considrs. q <taillerelative> Un motcl <taillerelative> s'entend par rapport la table des tailles de police et par rapport la taille de la police de l'lment parent. Les valeurs possibles : x [ larger | smaller ] q <longueur> Une valeur de longueur spcifie une taille de police absolue (indpendante de la table des tailles de police de l'agent utilisateur). Les valeurs ngatives ne sont pas admises ; q <pourcentage> Une valeur en pourcentage spcifie une taille de police absolue par rapport celle de l'lment parent. Leur emploi, de mme pour les valeurs exprimes en 'em', conduit des feuilles de style plus fiables, en plein accord avec le principe de la cascade.
46
line-height
3
3 3
lineheight q Valeur : normal | <nombre> | <longueur> | <pourcentage> | inherit q Initiale : normal q S'applique : tous les lments q Hrite : oui q Percentages: se rapporte la taille de la police de l'lment luimme q Mdias : visuel Hauteur minimale pour les in-line inclus ou hauteur exacte pour un in-line Les valeurs signifient : q normal : Indique aux agents utilisateurs une valeur calcule "raisonnable", base sur la taille de la police de l'lment. Cette valeur revt la mme signification que <number>. On recommande pour 'normal' une valeur calcule entre 1.0 et 1.2 ; q <longueur> : Cette longueur est applique la hauteur de la bote. Les valeurs ngatives ne sont pas admises ; q <nombre> : La valeur calcule de la proprit est obtenue en multipliant ce nombre par la taille de la police hrite de l'lment. Les valeurs ngatives ne sont pas admises. q <pourcentage> : La valeur calcule de la proprit correspond ce pourcentage multiplie par la valeur calcule pour la taille de la police. Les valeurs ngatives ne sont pas admises.
47
font-family
3
3 3
fontfamily q Valeur : [[ <famillenom> | <famillegnrique> ],]* [<famillenom> | <famillegnrique>] | inherit q Initiale : selon l'agent utilisateur q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel Cette proprit donne une liste, par ordre de priorit, de noms de familles de polices et/ou de noms de familles gnriques. Ex : q BODY { fontfamily: Baskerville, "Heisi Mincho W3", Symbol, serif } q La police "Baskerville" va fournir les glyphes pour les caractres latins, la police "Heisi Mincho W3", ceux pour les caractres japonais, la police "Symbol", ceux pour les symboles mathmatiques, et la famille de polices gnrique 'serif', ceux ventuels d'autres caractres. q La famille de polices gnrique sera utilise si une, ou plusieurs, des polices d'un jeu de polices n'taient pas disponibles. Bien que certaines polices fournissent un glyphe de substitution pour indiquer un "caractre manquant", celuici prenant typiquement l'aspect d'un carr, on ne devrait pas considrer ce glyphe comme une correspondance valide.
48
Exemple de police
3
3 3
serif q des terminaisons au bout de leurs traits, des bouts vases ou en pointes, ou plus simplement des terminaisons avec des empattements q Polices latines : Times New Roman, Polices greques : Bitstream Cyberbit, Polices cyrilliques : Adobe Minion Cyrillic, Polices hbraques : New Peninim, Polices japonaises : Ryumin LightKL, Polices arabes : Bitstream Cyberbit sansserif q des traits pleins, sans vasement, ni recoupements ou autres ornements q Polices latines MS Arial, MS Verdana, Helvetica, Polices greques : Helvetica Greek, Polices cyrilliques Helvetica Cyrillic, Polices hbraques : Arial Hebrew, Polices japonaises Shin Go cursive q des traits qui se recoupent ou bien un aspect manuscrit plus affirm q Polices latines : Caflisch Script, Polices cyrilliques : ER Architekt, Polices hbraques : Corsiva, Polices arabes : DecoType Naskh, Monotype Urdu 507 fantasy q Critter monospace q Courier
49
fontsizeadjust
Valeur : <nombre> | none | inherit q Initiale : none q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel Cette proprit permet de spcifier une valeur d'aspect pour un lment, ce qui prserve la valeur hauteurx de la premire police choisir dans la liste des polices de substitution. Les significations des valeurs sont : q none : ne prserve pas la valeur hauteurx de la police ; q <nombre> : Spcifie la valeur d'aspect. Ce nombre concerne la valeur d'aspect de la premire police choisir. Le facteur dchelle pour les polices disponibles se dtermine selon cette formule : x y(a/a') = c q ce qui correspond : x y = la valeur de 'fontsize' de la premire police du choix ; x a = la valeur d'aspect de la premire police du choix ; x a' = la valeur d'aspect de la police disponible ; x c = la valeur de 'fontsize' applique la police disponible. q Exemple : q Par exemple, la police Verdana (valeur d'aspect de 0.58) avec une taille de police 14px spcifie n'tant pas disponible, une police de substitution avec une valeur d'aspect de 0.46 tant disponible, la taille de police de celleci serait : 14 * (0.58/0.46) = 17.65px.
q
50
fontstretch
3
fontstretch q Valeur : normal | wider | narrower | ultracondensed | extracondensed | condensed | semicondensed | semiexpanded | expanded | extraexpanded | ultraexpanded | inherit q Initiale : normal q S'applique : tous les lments q Hrite : oui q Pourcentage : sans objet q Mdias : visuel La proprit 'fontstretch' slectionne les dessins normal, compact ou largi dans une famille de polices. exemple-cours5/font.html
51
Text
Property color direction letter-spacing text-align Description Sets the color of a text Sets the text direction Values color ltr rtl Increase or decrease the normal space between characters length Aligns the text in an left element right center justify Adds decoration to text none underline overline line-through blink Indents the first line of length text in an element % Controls the letters in an none element capitalize uppercase lowercase
text-decoration
text-indent text-transform
Nb : en suspend text-shadow
52

Cours5 Css

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours5 Css

Transféré par

Droits d'auteur :

Formats disponibles

Programmation client web cours 5 : CSS

IPW : programmation ct client

IPW : programmation ct client

Fichier HTML minimum

IPW : programmation ct client

Proprits des Balises html

IPW : programmation ct client

Balises Meta (enttes)

IPW : programmation ct client

Balises Meta (enttes)

<meta name="xxx" ... >

Catgorie de votre site (annuaire)

IPW : programmation ct client

Balises Meta (enttes)

IPW : programmation ct client

Balises Meta (LINK)

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

CSS : autres lments de syntaxes

IPW : programmation ct client

NOTES 1 em equals the font point size.

IPW : programmation ct client

IPW : programmation ct client

CSS : valeurs (couleurs)

Et plus encore : http://www.w3schools.com/css/css_colornames.asp

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

Assignation, cascade et hritage

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

Spcificit d'un slecteur

IPW : programmation ct client

Style hors CSS

IPW : programmation ct client

IPW : programmation ct client

tv both IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client

IPW : programmation ct client