Cours5 Css

8/8/2019 Cours5 Css

1/52

Programmation client webProgrammation client webcours 5 : CSScours 5 : CSS

8/8/2019 Cours5 Css

2/52

IPW : programmation ct client 2

Plan

3 Modles de programmation via le service Web

3 Protocole HTTP

3 HTML

q BALISES

3

Cascading Style Sheet3 Javascript

3 Applet java

8/8/2019 Cours5 Css

3/52


Langage HTML3 Langage balises :

q Une balise : une instruction de mise en formeq Une balise : contient des textes et/ou des autres balises autorisesq Une balise : structure le texteq Avant : une balise : mise en forme

3 Navigateur : recherche des balises et interprtationq

.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. / ).

3 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)3 Outil de validation : http://validator.w3.org

8/8/2019 Cours5 Css

4/52


3

Version html 4.01

Fichier HTML minimum

8/8/2019 Cours5 Css

5/52


Proprits des Balises html

3 Proprits gnrales (mais pas systmatiques)

3 id, class (document-wide identifiers)

3 lang (language information), dir (text direction)3 title (element title)3 style (inline style information )

3 onclick, ondblclick, onmousedown, onmouseup, onmouseover,

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsicevents )

8/8/2019 Cours5 Css

6/52


Balises Meta (enttes)

-

Logiciels utiliss pour la cration

de votre sitegenerator

-Copyright(s) de votre sitecopyright

-Celui qui publie votre sitepublisher

-Votre e-mailreply-to

-Date de la dernire modificationdate-revision-yyyymmdd

">-Date de la cration de votre sitedate-creation-yyyymmdd

-URL de votre siteidentifier-url

-Auteur du siteauthor

500Liste de mots clskeywords

200

Description du site en une

phrase de prfrence.description

ExempleNb. Car.Description

8/8/2019 Cours5 Css

7/52IPW : programmation ct client 7

Balises Meta (enttes)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 lapropritAll:

q En interdire l'accs aux robots grce l'attributNone.q AvecIndex, votre page sera indexe aussitt. Tandis que si vous mettezNoindex, elle ne sera pas

indexe.q Si le robot rencontreFollow, les destinations des liens sont indexes. Mais si vous crivezNofollow,

le robot ne gardera pas mmoire de vos liens.q AvecNoimageindex, les images d'une page dj indexe ne le seront pas. Etfreesurvey empche de

suivre les liens pointant vers les images.

-Diriger le robotrobots

-Catgorie de votre site (annuaire)category

-

Indique la revisite du robot aprs

n joursrevisit-after

ExempleNb. Car.Description

8/8/2019 Cours5 Css


Balises Meta (enttes)

3 META : Le rafrachissement et la redirection

q Pouvoir faire recharger une page priodiquement (toutes les n secondes )

q Rediriger le navigateur vers un autre site :

q HTTP-EQUIV : tout dune requte http

x expires : date limite d'expiration de vos pages (cache)

3 donne la base de l'adresse URL qui sera place devantles rfrences relatives dans le document, de faon ce que hors contexteles fichiers soient cherchs l'adresse : BASE adresse relative

8/8/2019 Cours5 Css


Type de Media3 all

q convient pour tous les appareils ;

3 auralq destin aux synthtiseurs de parole. Voir les dtails fournis dans le chapitre sur les feuilles de style auditives

3 brailleq destin aux appareils braille retour tactile ;

3 embossedq destin aux appareils impression braille ;

3 handheldq destin aux appareils portatifs (typiquement ceux avec petits crans, monochromes et bande passante limite) ;

3 printq 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 projectionq 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 screenq destin principalement aux moniteurs couleurs ;

3 ttyq 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 typede mdia ;

3 tvq destin aux appareils du type tlvision (avec ces caractristiques : basse rsolution, couleur, dfilement des pages

limit, sonoris).

8/8/2019 Cours5 Css


Plan

3 Modles de programmation via le service Web

3 Protocole HTTP

3 HTMLq BALISES

3

Cascading Style Sheet3 Javascript

3 Applet java

8/8/2019 Cours5 Css


CSS : introduction3 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 plusq d'autant plus cause des rpercutions

3 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.

8/8/2019 Cours5 Css


CSS : introduction

3 Utilisation de plusieurs feuilles de style (hritage)3 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 !

3 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 :.La balise LINK doit tre utilise entre les balises et

q @import "fichier.css", entre les balises et avant la rgle suivanteq A l'intrieur du document lui-mme (toujours dans la partie entte) par l'utilisation de

balises STYLE : h1 { color: green ; }.q Par dfinition du style dans une balise qui supporte un ajout de style, comme par

exemple

8/8/2019 Cours5 Css

14/52


CSS : autres lments de syntaxes

3 Les commentairesq Entre /* */q accepts (commentaire HTML) mais par de commentaire

permet de cacher le CSS pour un navigateur qui ne les comprend pas3 Blocs : dfinis par { }

q Slecteur { }3 Dclaration de proprits :

q Plusieurs lignes par bloc possible : sparation par ;q Dernire apparition dune proprit valide qui compteq exemple-cours5/declaration1.html et exemple-cours5/declaration2.html

3

Non prise en compte de ce qui est non valideq Proprits inconnuesq Valeurs invalides (unit !)q exemple-cours5/declaration3.html

8/8/2019 Cours5 Css

15/52


CSS : valeurs

3 Les entiers et les nombres

3 units

ABBR. UNIT EXAMPLE NOTES

cm Centimeters 2.5cm

em Ems 3em 1 em equals the font point size.in Inches 1in

mm Millimeters 25mm

pc Picas 6pc 1 inch = 6 picas

px Pixels 96pxpt Points 72pt 1 inch = 72 points

ex X-heights 2ex 1 x-height usually equals the height ofthe letter x.

8/8/2019 Cours5 Css

16/52


CSS : valeurs

3 Les pourcentages (par rapport quelque chose)3 URI (url) : url("http://deptinfo.unice.fr/~renevier/L2/ipw.png")3 Les compteurs : exemple-cours5/unite.html

3 Les chanesq entre " "q Caractres spciaux : \codeasciiq \22 ou \" ; \27 ou \q "bla bla bla bla bla bla" : valide

3

Angles : deg, rad ou grad (feuilles de style auditives)3 Temps : s ou ms (feuilles de style auditives)3 Frquence : Hz ou kHz (feuilles de style auditives)

8/8/2019 Cours5 Css

17/52


CSS : valeurs (couleurs)

KEYWORD RGBHEX RGB INTEGER RGB PERCENTAGEaqua #00ffff rgb(0,255,255) rgb(0%,100%,100%)black #000000 rgb(0,0,0) rgb(0%,0%,0%)blue #0000ff rgb(0,0,255) rgb(0%,0%,100%)fuchsia #ff00ff rgb(255,0,255) rgb(100%,0%,100%)gray #808080 rgb(128,128,128) rgb(50%,50%,50%)green #008000 rgb(0,128,0) rgb(0%,50%,0%)

lime #00ff00 rgb(0,255,0) rgb(0%,100%,0%)maroon #800000 rgb(128,0,0) rgb(50%,0%,0%)navy #000080 rgb(0,0,128) rgb(0%,0%,50%)olive #808000 rgb(128,128,0) rgb(50%,50%,0%)purple #800080 rgb(128,0,128) rgb(50%,0%,50%)red #ff0000 rgb(255,0,0) rgb(100%,0%,0%)silver #c0c0c0 rgb(192,192,192) rgb(75%,75%,75%)teal #008080 rgb(0,128,128) rgb(0%,50%,50%)white #ffffff rgb(255,255,255) rgb(100%,100%,100%)yellow #ffff00 rgb(255,255,0) rgb(100%,100%,0%)

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

8/8/2019 Cours5 Css

18/52


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

3

Pattern : , (regroupement)q Regroupe les dclarationsq Ex :

x H1, H2, H3 { color: blue;}x Les titres de niveaux 1, 2 et 3 sont crits en bleu

3 Pattern : * (slecteur universel)q

tous les lments (* veut dire n'importe quel lment) apparaissent avec le style dfinientre { }q Ex :

x * {background-color: rgb(230,255,230);}x Effet : mets le fond en vert

3 exemple-cours5/selecteurs1.html

8/8/2019 Cours5 Css

19/52


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

3

Pattern : lment.classname (slecteur de classe)q tous les lments lments dont la class (attribut) est spcifie classname " apparaissent avecle 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

3 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


8/8/2019 Cours5 Css

20/52


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

3 Pattern lment > lment (slecteur denfant)

q tous les lments (en 2ime) contenus dans des lments (en 1er) apparaissent avec le style dfinientre { }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

3 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 parentq 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


8/8/2019 Cours5 Css

21/52


CSS : Slecteurs

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 :

xp[id]{color: white ; background-color: black;}x Chaque p qui a un id est crit en blanc sur fond noir

3 Notez qu'il est possible de restreindre le style :3 Pattern : lment [att="value"]

q le style ne vaut que quand l'attribut att a la valeur prcise "value"3 Pattern : lment [att~="value"] :

q le style ne vaut que quand la valeur de l'attribut att contient "value"3 exemple-cours5/selecteurs4.html

8/8/2019 Cours5 Css

22/52


CSS : pseudo-classes3 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 :visitedq 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 :focusq :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

8/8/2019 Cours5 Css

23/52


CSS : pseudo-lments

3 :first-line : premire ligne3 :first-letter : premire lettre3 :before et :after

q ':before' et ':after' pour insrer un contenu gnr avant ou aprs celui d'unlment.x H1:before {content: counter(chapno, upperroman) ". "}

q En combinaison avec les pseudolments :firstline et :firstletter, lespseudolments :before et :after s'appliquent la premire lettre ou la premireligne, 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 ! ".

3 exemple-cours5/pseudoElt.html

8/8/2019 Cours5 Css

24/52


Assignation, cascade et hritage

3 Une fois qu'un agent utilisateur (navigateur web) a parcouru un document eten a construit une arborescence, celuici, pour chacun des lment del'arborescence, doit distribuer une valeur pour chacune des propritsconcernes du type de mdia vis.

3 La valeur finale d'une proprit est le rsultat d'un calcul en trois tapes :celleci est dtermine par la spcification (la valeur "spcifie"), puisrsolue dans une valeur absolue si ncessaire (la valeur "calcule") etfinalement transforme en accord avec les contraintes de son contexte (lavaleur "relle").

8/8/2019 Cours5 Css

25/52


Valeurs spcifies

3 Les agents utilisateurs (navigateur web) doivent d'abord appliquer unevaleur spcifie une proprit selon le mcanisme suivant (dans l'ordre depriorit) :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, quiest en gnral une valeur calcule ;q 3. Autrement, utiliser la valeur initiale de la proprit. Cette valeur initiale est

dfinie pour chaque proprit.3 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 sincessaire.

8/8/2019 Cours5 Css

26/52


Valeurs calcules3 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 nerequiert aucune opration supplmentaire pour tablir sa valeur calcule.

3 Par contre, une valeur relative doit subir une transformation qui aboutit savaleur calcule : une valeur en pourcentage doit tre multiplie par unevaleur de rfrence (celleci est prcise pour chaque proprit), unevaleur avec une unit relative (em, ex, px) doit tre doit devenir absolue parmultiplication avec les tailles de police ou de pixel appropries, les valeurs'auto' doivent tre calcule selon les formules donnes pour chaqueproprit, certains motscls ('smaller', 'bolder', 'inherit') doivent treremplacs en accord avec leurs dfinitions.

3 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 leslments enfants n'hritent pas de valeurs calcules, ceci est dcrit dansles dfinitions des proprits.

8/8/2019 Cours5 Css

27/52


Hritage

3 Les lments enfants hritent de certaines valeurs de leurs lmentsparents dans l'arborescence du document. Chacune des proprit dfinit sielle est hrite, ou non. Supposons un lment accentu (ici EM) dans unlment H1 :q Le titre est important !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 couleurbleu, EM le sera galement.

3 Pour appliquer une proprit de style "par dfaut" un document, un auteur

peut l'appliquer la racine de l'arborescence du document. On peut utiliserles lments HTML ou BODY pour cet usage.3 exemple-cours5/heritage.html

8/8/2019 Cours5 Css

28/52


inherit et !important

3 La valeur 'inherit' provoque l'hritage des valeurs par les proprits. Cecis'applique galement aux proprits dont la valeur n'est normalement pashrite.

3 !importantq 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 surclassentcelles 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 lesdclarations normales. Aussi bien les feuilles de style de l'auteur que celles del'utilisateur peuvent contenir des dclarations avec "!important", celles del'utilisateur ayant priorit. Cette fonction de CSS amliore l'accessibilit desdocuments, offrant ceux des utilisateurs qui ont des besoins particuliers (unegrande taille de police, d'autres combinaisons de couleur, etc.), une certainematrise de la prsentation.

8/8/2019 Cours5 Css

29/52


Cascade

3 Les feuilles de style ont trois origines diffrentes : l'auteur, l'utilisateur et l'agentutilisateur.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 documentparticulier. Par exemple, celuici peut dsigner une feuille de style contenue dans unfichier ou un agent utilisateur peut fournir l'interface pour produire une feuille de stylepersonnelle.

q L'agent utilisateur: l'agent utilisateur conforme doit appliquer sa feuille de style pardfaut avant toutes les autres feuilles de style d'un document. Cette feuille de styledevrait prsenter les lments du document de faon satisfaire au rendu gnralement

admis pour ceuxci. Par exemple, pour des navigateurs visuels, l'lment EM en HTMLest rendu avec une police en italique. Noter que cette feuille de style par dfaut peutvarier 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'uneimplmentation rduite de l'agent utilisateur.

8/8/2019 Cours5 Css

30/52


Cascade

3 1. Trouver toutes les dclarations qui concernent l'lment et la proprit enquestion, pour le type de mdia vis. Cellesci s'appliquent si le slecteurcorrespond cet lment ;

3 2. Un tri primaire est effectu sur les dclarations selon leur poids et leurorigine : pour une dclaration normale, les feuilles de style de l'auteursurclassent celles de l'utilisateur, ces dernires surclassant la feuille de style

par dfaut. Pour une dclaration avec "!important", cellesci surclassent lesdclarations normales. Une feuille de style importe a la mme origine quecelle qui l'a importe ;

3 3. Un tri secondaire est effectu selon la spcificit des slecteurs : les plusspcifiques surclasseront ceux plus gnraux. Les pseudolments et lespseudoclasses sont considrs respectivement comme des lments et

des classes normaux ;3 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. Lesrgles issues de feuilles de style importes sont considres comme tantsurvenues avant chacune de celles de la feuille de style ellemme.

8/8/2019 Cours5 Css

31/52


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.

3 Assembler les trois nombres abc (dans un systme de nombre avec une base tendue) pourobtenir 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 */

3 Pour HTML, les valeurs de l'attribut "style" sont des rgles de feuille de style. Ces rgles n'ontpas de slecteurs, mais dans l'optique du point 3 de l'algorithme de cascade, on considrequ'elles ont un slecteur d'ID (spcificit : a=1, b=0, c=0). Et dans l'optique du point 4, onconsidre qu'elles surviennent aprs toutes les autres rgles.

8/8/2019 Cours5 Css

32/52


Style hors CSS

3 L'agent utilisateur peut tenir compte des indications de prsentationprovenant d'autres sources que les feuilles de style, par exemple l'lmentFONT ou l'attribut "align".

3 Dans ce cas, ces indications doivent tre traduites dans leurs rglesquivalentes de CSS avec une spcificit gale zro. Ces rgles sontsenses se trouver au dbut de la feuille de style de l'auteur, permettant leursurclassement par les rgles suivantes de cette feuille de style.

8/8/2019 Cours5 Css

33/52


Media

3 Une des fonctions primordiales des feuilles de style repose sur le fait depouvoir adapter la reprsentation d'un document pour diffrents mdias : uncran, une feuille de papier, un synthtiseur de parole, un appareil braille,etc.

3 Certaines proprits spcifiques au mdia

3 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

8/8/2019 Cours5 Css

34/52


Catgorie de mdia3 continu oupagin (continuous/paged) ;

3

visuel, auditifou tactile (visual/aural/tactile ) ;3 grille (pour les appareils avec grille de caractres) ou bitmap (grid/bitmap);

3 interactif(pour les appareils qui interagissent avec l'utilisateur) ou statique (l'inverse, pour ceux qui n'interagissent pas avec celuici) (interactive/static) ;

3 all(comprend tous les types de mdias).

bothbitmapvisual, auralbothtv

bothgridvisualcontinuoustty

bothbitmapvisualcontinuousscreen

staticbitmapvisualpagedprojection

staticbitmapvisualpagedprintbothbothvisualbothhandheld

bothgridtactilepagedemboss

bothgridtactilecontinuousbraille

bothN/Aauralcontinuousaural

interactive/staticgrid/bitmapvisual/aural/tactilecontinuous/pagedMedia Groups

Media Types

8/8/2019 Cours5 Css

35/52


Color

3 color

q Valeur : | inheritq Initiale : selon l'agent utilisateurq S'applique : tous les lments

q Hrite : ouiq Pourcentage : sans objetq Mdias : visuel

3 Cette proprit dcrit la couleur d'avantplan du contenu de texte d'unlment. Voici plusieurs faons d'indiquer la couleur rougeq EM { color: red } /* nom de couleur prdfini */q EM { color: rgb(255,0,0) } /* couleurs en RGB allant de 0 255 */

8/8/2019 Cours5 Css

36/52


background

3 Les proprits d'arrireplan : 'backgroundcolor','backgroundimage', 'backgroundrepeat', 'backgroundattachment','backgroundposition' et 'background

3 backgroundcolor

q Valeur : | transparent | inheritq Initiale: transparentq S'applique : tous les lmentsq Hrite : nonq Pourcentage : sans objetq Mdias : visuel

3 Cette proprit donne la couleur d'arrireplan d'un lment, avec unevaleur de , ou bien avec le motcl 'transparent', celuici laissantventuellement voir les couleurs situes plus endessous.

8/8/2019 Cours5 Css

37/52


background

3 backgroundimage

q Valeur : | none | inheritq Initiale : noneq S'applique : tous les lmentsq Hrite : nonq Pourcentage : sans objetq Mdias : visuel

3 Cette proprit spcifie l'image d'arrireplan d'un lment. En mme temps qu'uneimage, les auteurs devraient aussi spcifier une couleur d'arrireplan, cette couleurtant employe en remplacement d'une image indisponible. Celleci, une fois

disponible, vient se superposer sur le fond color. La couleur du fond tant ainsivisible au travers des zones transparentes de l'image.

3 La proprit admet les valeurs d', pointant vers une image, ou 'none', prohibantl'emploi d'image.

8/8/2019 Cours5 Css

38/52


background

3 backgroundrepeat

q Valeur : repeat | repeatx | repeaty | norepeat | inheritq Initiale : repeatq S'applique : tous les lmentsq Hrite : non

q Pourcentage : sans objetq Mdias : visuel

3 Quand on spcifie une image d'arrireplan, cette proprit indique si l'image estrpte et la manire de la rptition. La mosaque de fond rsultante correspondaux aires de contenu, d'espacement et de bordure de la bote de l'lment enquestion. Les significations des valeurs sont :q repeatL'image se rpte la fois horizontalement et verticalement ;q repeatxL'image ne se rpte qu'horizontalement ;q repeaty L'image ne se rpte que verticalement ;q norepeatL'image ne se rpte pas : un seul exemplaire de celleci est dessin.

8/8/2019 Cours5 Css

39/52


background

3 backgroundattachmentq Valeur : scroll | fixed | inheritq Initiale : scrollq S'applique : tous les lmentsq Hrite : nonq Pourcentage : sans objetq Mdias : visuel

3 Quand on spcifie une image d'arrireplan, cette proprit indique si l'image est fixepar rapport l'espace de visualisation (pour la valeur 'fixed'), ou si celleci dfile enmme temps que le document (pour la valeur 'scroll').

3 Noter qu'il n'existe qu'un seulespace de visualisation par document ; c..d., mme sil'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.3 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'imagene se rpte en mosaque ('backgroundrepeat: repeat'), celleci peut ainsi ne pasapparatre.

b k d iti

8/8/2019 Cours5 Css

40/52


backgroundpositionq Valeur : [ [ | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |inheritq Initiale : 0% 0%q S'applique : ceux des lments de type bloc et ceux remplacsq

Hrite : nonq Pourcentage : se rapporte la taille de la bote ellemmeq Mdias : visuel

3 Pour une image d'arrireplan, cette proprit indique la position initiale de celleci.q : pour la paire de valeurs x% y%, le point de limage correspondant est align avec

le point de la surface daffichage (mme proportion)q : 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%'.

3 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 sontgalement.

8/8/2019 Cours5 Css

41/52


Background

3 La proprit 'background' est une proprit raccourcie qui sert regrouperles proprits individuelles 'backgroundcolor', 'backgroundimage','backgroundrepeat', 'backgroundattachment' et 'backgroundpositiondans la feuille de style.

3 La proprit 'background' distribue d'abord toutes les propritsindividuelles d'arrireplan leur valeur initiale, puis leur applique lesvaleurs explicites de la dclaration.

3 Ex :q BODY { background: red }q

P { background: gray url("ele.jpg") 50% repeat fixed }q exemple-cours5/background.html

8/8/2019 Cours5 Css

42/52


Font3 font

q Valeur : [ [ || || ]? [ / ]? ] | caption | icon | menu | messagebox | smallcaption| statusbar | inherit

q Initiale : voir les proprits individuellesq S'applique : tous les lmentsq Hrite : ouiq

Pourcentages: permis sur 'fontsize' et 'lineheight'q Mdias : visuel

3 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 demenus) ;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.

8/8/2019 Cours5 Css

43/52


font-style

3 Le style de police prcise l'aspect dans lequel doit tre rendu le texte,normal, italique ou oblique.

3 fontstyle

q Valeur : normal | italic | oblique | inheritq

Initiale : normalq S'applique : tous les lmentsq Hrite : ouiq Pourcentage : sans objetq Mdias : visuel

8/8/2019 Cours5 Css

44/52


font-variant

3 La variante de police indique si le texte doit tre rendu avec des glyphesnormaux ou avec des glyphes en petites capitales, pour les caractres enminuscule.

3 fontvariant

q

Valeur : normal | smallcaps | inheritq Initiale : normalq S'applique : tous les lmentsq Hrite : ouiq Pourcentage : sans objetq Mdias : visuel

8/8/2019 Cours5 Css

45/52


font-weight3 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.3 fontweight

q Valeur : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inheritq Initiale : normalq S'applique : tous les lmentsq Hrite : ouiq Pourcentageq : sans objetq Mdias : visuel

3 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 normalquivaut '400' ;q boldquivaut '700' ;q

bolder : Spcifie la graisse suprieure celle assigne une police, cette graisse tant plus grasseque celle hrite par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplementla valeur numrique suprieure (l'aspect de la police ne changeant pas), moins que la valeur hritene 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 grasseque celle hrite par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplementla valeur numrique infrieure (l'aspect de la police ne changeant pas), moins que la valeur hritene soit dj gale '100', auquel cas la valeur rsultante devient galement '100'.

8/8/2019 Cours5 Css

46/52


font-size3 fontsize

q Valeur : | | | | inheritq Initiale : mediumq S'applique : tous les lmentsq Hrite : oui, la valeur calcule galementq Percentages: se rapporte la taille de la police du parent de l'lmentq Media: visuel

3 Cette proprit dcrit la taille d'une police spcifie explicitement. Celleci correspond au carrem, un concept issu de la typographie. Noter que certains glyphes peuvent dborder de leurcarr em. Les significations des valeurs sont :q Un motcl 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 Un motcl s'entend par rapport la table des tailles de police etpar rapport la taille de la police de l'lment parent. Les valeurs possibles :

x [ larger | smaller ]q 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 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 destyle plus fiables, en plein accord avec le principe de la cascade.

8/8/2019 Cours5 Css

47/52


line-height3 lineheight

q Valeur : normal | | | | inheritq Initiale : normalq S'applique : tous les lmentsq Hrite : ouiq Percentages: se rapporte la taille de la police de l'lment luimmeq Mdias : visuel

3

Hauteur minimale pour les in-line inclus ou hauteur exacte pour un in-line3 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 .On recommande pour 'normal' une valeur calcule entre 1.0 et 1.2 ;

q : Cette longueur est applique la hauteur de la bote. Les valeursngatives ne sont pas admises ;

q : La valeur calcule de la proprit est obtenue en multipliant ce nombre parla taille de la police hrite de l'lment. Les valeurs ngatives ne sont pas admises.

q : La valeur calcule de la proprit correspond ce pourcentagemultiplie par la valeur calcule pour la taille de la police. Les valeurs ngatives ne sontpas admises.

8/8/2019 Cours5 Css

48/52


font-family

3 fontfamilyq Valeur : [[ | ],]* [ | ] |

inheritq Initiale : selon l'agent utilisateurq S'applique : tous les lmentsq Hrite : ouiq Pourcentage : sans objetq Mdias : visuel

3 Cette proprit donne une liste, par ordre de priorit, de noms de familles de polices et/ou denoms de familles gnriques.

3 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 policesn'taient pas disponibles. Bien que certaines polices fournissent un glyphe de substitution pourindiquer un "caractre manquant", celuici prenant typiquement l'aspect d'un carr, on ne devrait pasconsidrer ce glyphe comme une correspondance valide.

8/8/2019 Cours5 Css

49/52


Exemple de police

3 serifq des terminaisons au bout de leurs traits, des bouts vases ou en pointes, ou plus simplement des

terminaisons avec des empattementsq 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

3 sansserif

q des traits pleins, sans vasement, ni recoupements ou autres ornementsq Polices latines MS Arial, MS Verdana, Helvetica, Polices greques : Helvetica Greek, Polices

cyrilliques Helvetica Cyrillic, Polices hbraques : Arial Hebrew, Polices japonaises Shin Go3 cursive

q des traits qui se recoupent ou bien un aspect manuscrit plus affirmq Polices latines : Caflisch Script, Polices cyrilliques : ER Architekt, Polices hbraques : Corsiva,

Polices arabes : DecoType Naskh, Monotype Urdu 507

3 fantasyq Critter

3 monospaceq Courier

8/8/2019 Cours5 Css

50/52


fontsizeadjustq Valeur : | none | inheritq Initiale : noneq S'applique : tous les lmentsq Hrite : ouiq Pourcentage : sans objetq Mdias : visuel

3 Cette proprit permet de spcifier une valeur d'aspect pour un lment, ce qui prserve lavaleur hauteurx de la premire police choisir dans la liste des polices de substitution. Lessignifications des valeurs sont :q none : ne prserve pas la valeur hauteurx de la police ;q : 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, lataille de police de celleci serait : 14 * (0.58/0.46) = 17.65px.

8/8/2019 Cours5 Css

52/52

Text

Property Description Values

color Sets the color of a text color

direction Sets the text direction ltr

rtl

letter-spacing Increase or decrease the

space between characters

normal

length

text-align Aligns the text in an

element

left

rightcenter

justify

text-decoration Adds decoration to text none

underline

overlineline-through

blink

text-indent Indents the first line of

text in an element

length

%

text-transform Controls the letters in an

element

none

capitalize

uppercase

lowercase

Nb : en suspend

text-shadow

Cours5 Css

Documents

Transcript of Cours5 Css