1 / 31

M. Larooussi

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.

forbes
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Formatagededocuments- CSS Écoled’étéINSATAoût2006 M.Larooussi

  2. Introduction •Objectif:fournirunmécanismepourassocierdifférentsstylesà unmêmedocument Présentations Contenu M.Larooussi

  3. Introduction !Initialementconçuespourêtreutilisées avecdesdocumentsHTML !Peuventêtreutiliséesavecdes documentsXML !CSS1⇒CSS-2(media) !Lanormes’adresse •Auxutilisateurs •Auxdéveloppeurs M.Larooussi

  4. CSS •Langagedefeuillesdestylepourdocuments HTML •Permetuneséparationclairedelastructure etdustyle =>plusgrandeindépendanceaveclemedia utilisé. •RecommandationW3Cdepuisle12mai 1998 Spécificationà:http://www.w3.org/TR/REC- CSS2 M.Larooussi

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

  6. Associationdesfeuillesdestyle auxdocuments !documentHTML •utilisationdel’attributstyle •<H1style=“color:blue“>Introduction</H1> M.Larooussi

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

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

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

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

  11. Propriétés !Pourchaquepropriété,lanormeCSS spécifie •lasyntaxe •uneéventuellevaleurpardéfaut •lesélémentsauxquelselles’applique •sielleesthéritable •commentinterpréterlespourcentages •lesmediapourlesquelselleaunsens M.Larooussi

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

  13. Spécificationdescouleurs •Lesattributssuivantspermettentde contrôlerlacouleur: -colorpourlacouleurdutexte; -background-colorpourlacouleurdufond; -backgroundpourunfondtexturéoucoloré. M.Larooussi

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

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

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

  17. Multiplicitédesspécificationsde style !Définiesparl’auteur !Définiesparl’utilisateur !Définiesparl’application !deplus,lesfeuillesdestylepeuventêtre importées -->règlesderésolutiondeconflits potentiels M.Larooussi

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

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

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

  21. Sélecteurs •Spécificitéd’unsélecteur=nombre obtenuparlaconcaténationde3 valeurs •lenombred’attributsID •lenombred’autresattributsouclasses •lenombredenomsd’éléments !Lespseudo-élémentssontignorés M.Larooussi

  22. L’attributClass •Appliquerdesdéclarationsàungroupe d’éléments •Ex:<PCLASS=citation>Mieuxvauttardquejamais</P> •Nomdelaclasse=nomisolé+chiffres+tirets M.Larooussi

  23. L’attributID •Prescriredesformatagepourdes élémentsisolés •#caractériselesID •Uneseulefoisdansledocument M.Larooussi

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

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

  26. Commentaires IdentiquesàceuxdeC: •EM{color:red}/*red,reallyred!!*/ M.Larooussi

  27. Lesunités •Longueurs: –relatives:"0.5em","1ex","10px" –absolues:"0.5in","3cm","12pt".. •Pourcentages:"120%" •Couleurs:"black","#f00", "rgb(255,0,0)"... M.Larooussi

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

  29. Etd'avantage... • • • • • • différentstypesdemedia pagination(règle@page) feuillesdestylesorales curseurs générationdecontenu(compteurs) ... M.Larooussi

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

  31. EvolutionfuturedeCSS •CSS3enpréparation: •supportpourentêtes,basdepages, multi-colonnes •internationalisation:texteverticaleten grille •... M.Larooussi

More Related