slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
M. Larooussi PowerPoint Presentation
Download Presentation
M. Larooussi

Loading in 2 Seconds...

play fullscreen
1 / 31

M. Larooussi - PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on

Formatage de documents -. CSS. École d’été INSAT Août 2006. M. Larooussi. Introduction. • Objectif: fournir un mécanisme pour associer différents styles à. un même document. Présentations. Contenu. M. Larooussi. Introduction. ! Initialement conçues pour être utilisées.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

M. Larooussi


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Formatagededocuments-

CSS

Écoled’étéINSATAoût2006

M.Larooussi

slide2

Introduction

•Objectif:fournirunmécanismepourassocierdifférentsstylesà

unmêmedocument

Présentations

Contenu

M.Larooussi

slide3

Introduction

!Initialementconçuespourêtreutilisées

avecdesdocumentsHTML

!Peuventêtreutiliséesavecdes

documentsXML

!CSS1⇒CSS-2(media)

!Lanormes’adresse

•Auxutilisateurs

•Auxdéveloppeurs

M.Larooussi

slide4

CSS

•Langagedefeuillesdestylepourdocuments

HTML

•Permetuneséparationclairedelastructure

etdustyle

=>plusgrandeindépendanceaveclemedia

utilisé.

•RecommandationW3Cdepuisle12mai

1998

Spécificationà:http://www.w3.org/TR/REC-

CSS2

M.Larooussi

slide5

Principes

!Feuilledestyle=ensemblederègles

!Chaquerèglespécifielesvaleursque

peuventprendrelespropriétés

associéesauxélémentsdudocument

EM{color:red}

–sélecteur{propriété:valeur;propriété:valeur}

M.Larooussi

slide6

Associationdesfeuillesdestyle

auxdocuments

!documentHTML

•utilisationdel’attributstyle

•<H1style=“color:blue“>Introduction</H1>

M.Larooussi

slide7

Associationdesfeuillesdestyleaux

documents

utilisationdel’élémentstylepourinclureune

feuilledestyledansledocument

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0//EN">

<HTML>

<HEAD>

<TITLE>LesfeuillesdestyleCSS</TITLE>

<STYLEtype="text/css">

H1{color:blue}

</STYLE>

</HEAD>

<BODY>

<H1>Introduction</H1>

</BODY>

</HTML>

M.Larooussi

slide8

Associationdesfeuillesdestyleaux

documents

Utilisationdel’élémentLINKpourassocierune

feuilledestyleaudocument

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0//EN">

<HTML>

<HEAD>

<TITLE>LesfeuillesdestyleCSS</TITLE>

<LINKrel="stylesheet"href="cours.css"

type="text/css">

</HEAD>

<BODY>

<H1>Introduction</H1>

...

</BODY>

</HTML>

M.Larooussi

slide9

Généralités

•Chaquerègleestconstituéede2parties:

-Unquispécifielesélémentsdudocumentauxquels

larègles’applique:

-Unepartiedéclarationquispécifielesvaleursdes

propriétés

H1{color:blue}

•Lapartiedéclarationpeutcomporterplusieurs

spécificationsdevaleursdepropriétés;dans

cecas,lesspécificationssontséparéesparle

caractère“;”

M.Larooussi

slide10

Exemples

•H1{color:blue;text-align:center}

•H1{font-weight:bold;font-size:12pt;

line-height:14pt;font-family:Helvetica;

font-variant:normal;font-style:normal;

font-stretch:normal;font-size-adjust:

none}

•H1{font:bold12pt/14ptHelvetica}

M.Larooussi

slide11

Propriétés

!Pourchaquepropriété,lanormeCSS

spécifie

•lasyntaxe

•uneéventuellevaleurpardéfaut

•lesélémentsauxquelselles’applique

•sielleesthéritable

•commentinterpréterlespourcentages

•lesmediapourlesquelselleaunsens

M.Larooussi

slide12

Exemplesdevaleurs

!Nombreentierouréel

!Longueur(unitésabsoluesou

relatives)

!Pourcentage

P{font-size:12px}

H1{margin:0.5in}

P{line-height:120%}/*120%de'font-

size'*/

M.Larooussi

slide13

Spécificationdescouleurs

•Lesattributssuivantspermettentde

contrôlerlacouleur:

-colorpourlacouleurdutexte;

-background-colorpourlacouleurdufond;

-backgroundpourunfondtexturéoucoloré.

M.Larooussi

slide14

Présentationdutexte

lafontedescaractères:

-font-family,font-style,font-variant,font-style

-•D'autresattributspermettentdemodifier

l'apparencedutexte:

-text-decoration;text-transform.

•Lesattributssuivantspermettentdecontrôler

laprésentationdesparagraphes:

-text-align,text-indent,lign-height,word-spacing

etletter-spacing

M.Larooussi

slide15

Exemplesdevaleurs

!Spécificationdescouleurs

BODY{background:

url("http://www.bg.com/pinkish.gif")}

BODY{color:black;background:white}

EM{color:#ff0000}/*#rrggbb*/

EM{color:rgb(255,0,0)}/*integerrange0-255*/

EM{color:rgb(100%,0%,0%)}/*floatrange

M.Larooussi

slide16

Héritage

•Engénérallespropriétéssonthéritéesdu

père

•ParexempleEMestbleudans:H1{color:

blue}<H1>Letitre<EM>est</EM>

important!</H1>

•StylesurBODY=="stylepardéfaut":BODY

{color:black;background:url(texture.gif)

white;}

•Exceptions:background,pourcentages...

•Possibledeforcerl'héritage:inherit

M.Larooussi

slide17

Multiplicitédesspécificationsde

style

!Définiesparl’auteur

!Définiesparl’utilisateur

!Définiesparl’application

!deplus,lesfeuillesdestylepeuventêtre

importées

-->règlesderésolutiondeconflits

potentiels

M.Larooussi

slide18

Cascading

!Chaquerèglepeutêtrespécifiéecommeétant

normaleouimportante

/*Fromtheuser'sstylesheet*/

P{text-indent:1em!important}

P{font-style:italic!important}

P{font-size:18pt}

/*Fromtheauthor'sstylesheet*/

P{text-indent:1.5em!important}

P{font:12ptsans-serif!important}

P{font-size:24pt}

M.Larooussi

slide19

Résumé

!Règlesimportées:régleslocales>règles

importées

!Règlesnormales:auteur>utilisateur>

application

!Règlesimportantes:utilisateur>auteur>

application

!Spécificationspécifiques>propriétéshéritées

!Encasdeconflit:ladernièrerèglespécifiées

’applique

M.Larooussi

slide20

Sélecteurs

!Spécifielesélémentsauxquelss’appliquentles

propriétés

•unélémentspécifique

•touslesélémentsdudocument

•lesélémentsd’untypedonné

•desélémentsspécifiésenfonctiondeleur

emplacementdanslastructurelogiquedudocument

•lesélémentsspécifiésenfonctiondesattributs

•lesélémentsappartenantàdesclasses

•pseudoelements

M.Larooussi

slide21

Sélecteurs

•Spécificitéd’unsélecteur=nombre

obtenuparlaconcaténationde3

valeurs

•lenombred’attributsID

•lenombred’autresattributsouclasses

•lenombredenomsd’éléments

!Lespseudo-élémentssontignorés

M.Larooussi

slide22

L’attributClass

•Appliquerdesdéclarationsàungroupe

d’éléments

•Ex:<PCLASS=citation>Mieuxvauttardquejamais</P>

•Nomdelaclasse=nomisolé+chiffres+tirets

M.Larooussi

slide23

L’attributID

•Prescriredesformatagepourdes

élémentsisolés

•#caractériselesID

•Uneseulefoisdansledocument

M.Larooussi

slide24

Sélecteurcontextuel

H1EM{color:red}:Affecteuniquementles

élémentsEMdescendantsd'unH1

H1>EM{color:red}:Affecteuniquementles

élémentsEMfilsd'unH1

ULLI{font-size:small}ULULLI{font-size:

x-small}

–Règle1:élémentsLIayantaumoinsunancêtre

UL

–Règle2:élémentsLIayantaumoinsdeux

ancêtresUL

–Conflit:lesélecteurleplusspécifiquel'emporte

M.Larooussi

slide25

Pseudo-classesetpseudo-

éléments

•Sélectionindépendantedelastructure

HTML

•Pseudo-classes:

•A:link{color:red}/*unvisited*/A:visited{

color:blue}A:active{color:lime}DIV>

P:first-child{text-indent:0}:lang(fr)>Q{

quotes:'«''»'}

•Pseudo-éléments:

•P:first-line{font-style:small-caps}P:first-

letter{font-size:200%}P.special:before

{content:"Special!"}

M.Larooussi

slide26

Commentaires

IdentiquesàceuxdeC:

•EM{color:red}/*red,reallyred!!*/

M.Larooussi

slide27

Lesunités

•Longueurs:

–relatives:"0.5em","1ex","10px"

–absolues:"0.5in","3cm","12pt"..

•Pourcentages:"120%"

•Couleurs:"black","#f00",

"rgb(255,0,0)"...

M.Larooussi

slide28

Positioning

•flottant

•relatif

•absoluoufixe

•IMG.icon{float:left;margin-left:0;}#header{position:fixed;

width:100%;height:15%;top:0;right:0;bottom:auto;left:0;}

M.Larooussi

slide29

Etd'avantage...

différentstypesdemedia

pagination(règle@page)

feuillesdestylesorales

curseurs

générationdecontenu(compteurs)

...

M.Larooussi

slide30

ValidationCSS

•Feuillesdestylevalides=garantiede

résultats;casd'erreursnonspécifiés

•Spécificationofficielle:

http://www.w3.org/TR/REC-CSS2

•Outilsetservices:

http://jigsaw.w3.org/css-validator/

M.Larooussi

slide31

EvolutionfuturedeCSS

•CSS3enpréparation:

•supportpourentêtes,basdepages,

multi-colonnes

•internationalisation:texteverticaleten

grille

•...

M.Larooussi