1 / 76

Chap V - CSS "Cascading Style Sheets"

Mai 2013 / Mars 2014 CSS3 resize box sizing keyframes, animation media queries Positionnement Flex Box & Holly Grail & unités. Chap V - CSS "Cascading Style Sheets". CSS 2: Règles, Sélecteurs, Propriétes CSS: Méthodologie CSS 2: Références CSS 3: Survol, extensions Mozila

keona
Download Presentation

Chap V - CSS "Cascading Style Sheets"

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. Mai 2013 / Mars 2014 • CSS3 resize box sizing • keyframes, animation • media queries • Positionnement • Flex Box & Holly Grail & unités Chap V - CSS "Cascading Style Sheets" CSS 2: Règles, Sélecteurs, Propriétes CSS: Méthodologie CSS 2: Références CSS 3:Survol, extensions Mozila CSS 3:@keyframes, animations CSS 3:Media Queries CSS 3:Boites flexibles Mozilla LESS Foundation JQuery UI Responsive design 20/08/2014 Transparent - 1

  2. Sommaire du Cours Chap I - Documents: Historique, Modèles, Standards et Références Chap II - HTML: voir le cours CIP1-CMD & HTML5 Chap III - XML: "eXtensible Markup Language", les Bases Chap IV- DTD: "Document Type Definition" Chap V- CSS: Feuilles de Styles en Cascades& CSS3 Chap VI - DOM, DHTML: "Domain Object Model "& Programmation Dynamique en HTML & SPRY & JQuery Chap VII - XSD: Schémas XML Chap VIII -XML "Advanced" Processeurs et Dialectes: XPath, Xlink Chap IX -XSLT: Transformations XML Chap X -RDF: "Resource Description Framework" Chap IX -AJAX: "Asynchronous JavaScript And XML" Savoir-Faire: Know Hows HTMLXHTML CSS JS+DOM MATHML XPATH XLINK XSLT Etat de l'art: HTML5 CSS3 SPRY SVG RDF AJAX XUL 20/08/2014 Transparent 2

  3. Web EPU courses (in French) Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents http:www.polytech.unice;fr/~pfz/document.html W3C tutorial : http://www.w3schools.com/ Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/ Biblio: many issues at EPU's lib Some Références 20/08/2014 Transparent 3

  4. Documentation et Manuels Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) Expressions Rationnelles Manuels. Expressions régulières sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix • Tutoriaux du Web • W3C : http://www.w3schools.com/ • CSS Play : http://www.cssplay.co.uk/index • Zen Garden : http://www.csszengarden.com/tr/francais/ • CSS in10 steps : http://www.barelyfitz.com/screencast/html-training/css/positioning/ • 10 steps to better CSS: http://shapeshed.com/journal/10_steps_to_better_css/ 20/08/2014 Transparent 4

  5. Références Web 20/08/2014 Transparent 5

  6. API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – DynamicHTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language Lexique 20/08/2014 Transparent 6

  7. Chap V - CSS "Cascading Style Sheets" CSS 2: Règles, Sélecteurs, PropriétesLa balise <style> en HTMLFeuilles de style séparées en HTMLFeuilles de style en XML LESS 20/08/2014 Transparent - 7

  8. CSS: les feuilles de style 20/08/2014 Transparent 8

  9. CSS: Cascading Style Sheets • Un langage pour définir les styles • de balises HTML ou XML • des éléments d’une DTD • CSS -1 (1996) • CSS -2 (1998) • CSS 3: ( >1999, en cours: www.css3.info) • Principes • Règles de style associées à la structure des documents • Feuilles multiples • Types de média • Attachements alternatifs aux documents 20/08/2014 Transparent 9

  10. CSS: Tutoriaux, Versions et Navigateurs DOCTYPE obligatoire ss IE sinon Mode QUIRK ! • CSS -1 (1996) • supporté par Netscape et IE version 4. • CSS -2 (1998) • supporté par FF1.5 (complet) et IE 6 (partiel) • CSS -3 (>1999, http://www.css3.info/ ) • Opera, Safari, FF 3.0 (partiel) et IE 9 ? • CSS sur le Web • W3Schools - CSS Tutorial • http://www.cssplay.co.uk/ • http://www.csszengarden.com/ • compatibilité avec les Navigateurs • Learn CSS on HTML.net • Learn CSS Tutorial • CSS Positionning in 10 steps • CSS in 10 sites • 10 top Tips in CSS 20/08/2014 Transparent 10

  11. CSS: les feuilles de style en cascade • Feuille CSS • Collection de Règles • Une règle CSS • Sélecteur (balise HTML XML,, élément de DTD) • propriétés (paramètres de style) • Conception CSS • Modularité • Importation • Héritage • Masquage • Cascade • Résolution des "surcharge" par la règle la plus spécifique 20/08/2014 Transparent 11

  12. CSS: Syntaxe (1) un !ELEMENT de la DTD • Les Règles ( (ascendance>? )*element( [attr( =val)?]) *{ ( prop: val;) * } ) * • Exemples HTML & XML Attributs /* CSS pour Xml */ envaleur { font-style: italic ; font-weight: bold ; } livre > titre {font-size: 24pt ;} chapitre > titre {font-size: 20pt ;} section theoreme {font-color: blue ;} message [priorite = "haute"] { font-size: 18pt ; font-color: red ; } /* CSS pour Html */ body { font-style: italic ; color: black ;} p{ text-align: center ; font-family: arial ;} 20/08/2014 Transparent 12

  13. CSS: Syntaxe (2) sélecteurs multiples • Groupes de Règles selecteur (, selecteur )*{ ( prop : val ; ) * } • Les Commentaires : /* blabla */ • Exemples HTML & XML /* CSS pour Xml */ livre>titre, chapitre>titre { font-size: 24pt ; font-color: blue; } /* CSS pour Html */ p+h3 { text-align: left ; } /* CSS pour Html */ h1, h2, h3 { text-align: center ; color: red; } 20/08/2014 Transparent 13

  14. CSS: Norme lexicale • Tokenization (unités lexicales) ident [-]?{nmstart}{nmchar}* name {nmchar}+ nmstart [_a-z]|{nonascii}|{escape} nonascii [^\0-\237] unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? escape {unicode}|\\[^\n\r\f0-9a-f] nmchar [_a-z0-9-]|{nonascii}|{escape} num [0-9]+|[0-9]*\.[0-9]+ string {string1}|{string2} string1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\" string2 \'([^\n\r\f\\']|\\{nl}|{escape})*\' nl \n|\r\n|\r|\f • Opérateurs, Séparateurs, Commentaires, etc. 20/08/2014 Transparent 14

  15. CSS: Norme syntaxique • At Rule: • @import ….. ; • @font-face { prop: "val"; ... ; } • @media { selecteur {prop: "val";} } • Rule: Sélecteur, Bloc sélecteur (, sélecteur )*{ ( propriété : valeur ; ) * } • Sélecteur • universel: * • type: tagName • class (.) et id(#) • attribute matching: [ ] = ~= |= • child (>) • descendant (' ') • sibling (+) • pseudo (:) • precedence (~) 20/08/2014 Transparent 15

  16. CSS: Norme syntaxique • Propriété, Valeur • identificateur • entier et réel • mesures et pourcentages • relative units: • em: the 'font-size' of the parent font • ex: the 'x-height' of the relevant font • rem: the 'font-size' of the html font • absolute units: • in: inches — 1in is equal to 2.54cm. • cm: centimeters • mm: millimeters • pt: points — 1pt is equal to 1/72nd of 1in. • pc: picas — 1pc is equal to 12pt. • px: pixel units — 1px is equal to 0.75pt. • URL et URI • strings • couleurs • compteurs body { font-size: 12px; text-indent: 3em; /* i.e., 36px */ } 20/08/2014 Transparent 16

  17. CSS: Sélecteurs Class & Id en HTML • Classe (s) permet d'associer un (ou plusieurs) style(s) à un élément HTML sélectionné(s) par la valeur de (ou des) l'attribut(s) "class" • Id idem, mais sélectionné par la valeur de l'attribut "id" (unique) /* CSS pour HTML*/ #grand {font-size : 20pt; } p#central { text-align : center; color: red;} p.red {color: red; } p.left {text-align: left; } .center {text-align: center; } <!-- HTML --> <p id= "grand"> en 20pt</p> <p id= "central"> centré en rouge </p> <h1 class="center red"> titre au centre et en rouge </h1> <p class="left"> à gauche </p> 20/08/2014 Transparent 17

  18. CSS:les Sélecteurs 20/08/2014 Transparent 18

  19. CSS en HTML: .class vs #id Un attribut "class" permet de définir une classe de style qui peut peut être partagée par plusieurs éléments (balises) du document L'attribut "id" définit une dénomination unique pour un élément (balise) du document <html> <head> <style> .center { } #navBar { } </style> </head> <body> <div class="center"> </div> <div id="navBar"> </div> <p class="center"> à centrer </p> <div id="navBar" class="center" > </div> </body> </html> disparait EN XML 20/08/2014 Transparent 19

  20. Mis en Page ("Box") Polices de caractère font-family -style -weight -size Textes text-align -indent -decoration word-spacing Couleurs et Fonds color background Listes List-style-position -image Tableaux Médias CSS: les Propriétés top margin right border left padding content bottom 20/08/2014 Transparent 20

  21. Chap V - CSS Méthodologie Style inline Style interne (<style>) Style externe (séparé) Styles alternatifs Styles multiples Importation de styles 20/08/2014 Transparent - 21

  22. Evolution 0: les attributs de style Html <html> <body color: black ; font-family: arial > <p text-align: center; color: red; > texte centré en arial (par héritage) en rouge (par masquage) </p> </body> </html> "Deprecated. use Styles instead" HTML, comme il ne faut plus l'écrire ! car pas évolutif ! 20/08/2014 Transparent 22

  23. Evolution 1: les attributs de style Html Inline Style <body> <div style=" position: absolute; width: 500px; height: 52px; z-index:1; left: 100px; top: 24px; layer-background-color: #00FFFF; border: 5px solid #00FF00; text-align: center; color:red; text-transform: uppercase; font-size: xx-large; font-weight: bold; "> Grand Titre 1 <div style=" text-transform: capitalize; font-size: x-large; font-weight: normal "> sous titre 1 </div> </div> </body> Héritage Masquage HTML, peu évolutif ! 20/08/2014 Transparent 23

  24. Evolution 2 : la balise <style> en Html Internal Style sheet <head> <style> div#Titre { position: absolute; width: 60%; left: 100px; top: 124px; background-color: #CCFFFF; border: 5px; solid #00FF00; text-align: center; color: red; text-transform: uppercase; font-size: xx-large;font-weight: bold; } div#sousTitre { text-transform: capitalize; font-size: x-large; font-weight: normal; } </style></head> <body> <div id="Titre"> Grand Titre <div id="sousTitre">sous titre avec l'attribut "id" </div> </div> </body> 20/08/2014 Transparent 24

  25. Evolution 2: les attributs de style Html Internal Style sheet <html><head> <style> p {text-align: center; color: red;} p.right {text-align: right} p.center {text-align: center} .center{text-align: center} #green {color: green} p#para1{ text-align: left; color: pink} </style> </head> <body > <p> This paragraph will be center-aligned and red-colored. </p> <p class="right"> This paragraph will be right-aligned and also red. </p> <p class="center"> This paragraph will be center-aligned and also red. </p> <h1 class="center"> This heading will be center-aligned but black. </h1> <p class="center"> This paragraph will also be center-aligned and red.</p> <h2 id="green" class="center" >Subtitle centered in green.</h2> <p id="para1"> This paragraph will be left-aligned and pink-colored.</p> </body> </html> 20/08/2014 Transparent 25

  26. Les attributs de style Liens en Html <!-- http://www.w3schools.com/css/css_pseudo_classes.asp --> <html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style></head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p> </body></html> Internal Style sheet 20/08/2014 Transparent 26

  27. Evolution 3: les feuilles de style séparées Le(s) lien(s) vers le style CSS dans HTML ..\XML_CSS\leftnav.html..\XML_CSS\rightnav.htm ici 2 styles alternatifs ExTernal Style sheet <html> <head> <link rel="stylesheet" href="leftNav.css" type="text/css" media="screen" /> <link rel="stylesheet" href="printNav.css" type="text/css" media="print" /> </head> <body> <div id="masthead"> <!-- texte de l'entête --> </div> <div id="navBar"> <!-- texte de la barre de navigation--> </div> </body> </html> 20/08/2014 Transparent 27

  28. 2 feuilles de style CCS (alternatives) ..\XML_CSS\rightNav.css..\XML_CSS\leftNav.css Evolution 3: les feuilles de style séparées #masthead { padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc; width: 100%; } #navBar { float: right; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } 2 ExTernal Style sheetS #masthead { padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc; width: 100%; } #navBar { float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } • css • css 20/08/2014 Transparent 28

  29. Le style CSS dans XML cd_catalog.xml la feuille de style CCS cd_catalog.css XML et CSS <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> • css CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} ARTIST {color: #0000FF; font-size: 20pt;} 20/08/2014 Transparent 29

  30. Le style "Table" CSS dans XML XML et CSS <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="tableCatalog.css"?> <CATALOG> <Titre> Mon Tableau de CDs </Titre> <CD> … </CD> </CATALOG> CATALOG { display: table; width: 80%; margin-left: 30px; border: 2px solid; padding: 20px 30px 30px 20px; } CD { display: table-cell; background-color: #00FFFF; border: 2px solid; padding: 20px 30px 30px 20px; } Titre { display: table-caption; font-size:36px; text-align:center; } 20/08/2014 Transparent 30

  31. CSS: les Styles Multiples en HTML Résolution des styles multiples Ordre compte ! <html> <head> <link rel="stylesheet" href="Style1.css" /> <link rel="stylesheet" href="Style2.css" /> <style> @import "Fontes.css" ; @import "Tables.css" ; .centre{} .urgent {color:red !important } #navBar {color:blue } </style> </head> <body style='color:black'> <div class="urgent centre" id="navBar"> ... </div> </body> </html> • style prédéfini des balises dans Navigateur • CSS par @import • CSS par "stylesheet" • ordre dans "stylesheet" • balise <style> • ordre des propriétés • class et #id • style par attributs • sauf !important Héritage Masquage 20/08/2014 Transparent 31

  32. CSS: les Styles Multiples en XML Styles multiples (cascading) Ordre compte ! <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="monStyle1.css"?> <?xml-stylesheet type="text/css" href="monStyle2.css"?> <racine> <titre> Styles en XHTML et XML</titre> <html xmlns = " http://www.w3.org/1999/xhtml " > <body> <h1> Liens sous XHTML</h1> <a href=" http://www.essi.fr/~pfz "> Chez Moi </a> </body> </html> </racine> Héritage Masquage • styles prédéfinis par xmlns: html, xhtml, etc. • CSS par xml-stylesheet (ordonnées) 20/08/2014 Transparent 32

  33. Les feuilles de style alternatives ici 2 styles au choix dans le Navigateur (FF>Affichage>Style de la page>) <html> <head> <link title="àGauche" rel="stylesheet" href="leftNav.css" type="text/css" /> <link title="àDroite" rel="alternate stylesheet" href="rightNav.css" type="text/css" /> </head> <body> <div id="masthead"> <!-- texte de l'entête --> </div> <div id="navBar"> <!-- texte de la barre de navigation--> </div> </body> </html> 20/08/2014 Transparent 33

  34. XML et CSS Le style CSS dans XML cd_catalog.xml la feuille de style CCS cd_catalog.css • xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} ARTIST {color: #0000FF; font-size: 20pt;} CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} ARTIST {color: #0000FF; font-size: 20pt;} 20/08/2014 Transparent 34 Transparent 34

  35. XML & CSS multiples title Obligatoire <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet title="Style de base" href="cd_catalog.css" type="text/css"?> <?xml-stylesheet title="Planche" rel="alternate" href="cd_catalog_2.css" type="text/css"?> <?xml-stylesheet title="Spirale" rel="alternate" href="cd_catalog_3.css" type="text/css"?> <CATALOG> ... / ... </CATALOG> 20/08/2014 Transparent 35

  36. Chap V - CSS2 Références des propriétés Boites (Box) Textes Positionnement Tables Pseudo éléments Compléments 20/08/2014 Transparent - 36

  37. CSS: Propriétés des Boîtes 20/08/2014 Transparent 37

  38. CSS: Propriétés des Textes Utile pour les sources des L.P. 20/08/2014 Transparent 38

  39. CSS: Propriétés ("positionning") 20/08/2014 Transparent 39

  40. CSS : positionnement/dimensionnement Box Model: margin, border, padding, content width, height, box-sizing: content vs border vertical-align: & text-align: display: block vs inline vs box vs none "Container" position: static // normal flow position: relative top, right, bottom, left// position en flow normal float: & clear: position: absolute top, right, bottom, left// container position: fixed top, right, bottom, left// window "stack order" z-index: :hover Le "container " d’un élément en position absolue est l’ancêtre le plus proche qui est en position absolue, relative ou fixe. 20/08/2014 Transparent 40

  41. CSS: Positionnement (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> h2.static { position: static; left: 113;} h2.decGauche { position: relative; left: -20px;} h2.courante { position: relative; left: 113;} h2.centre { position: absolute; top: 50%; left:50%;} h2.fixe { position: fixed ; top: 100; left: 200;} </style></head> <body style="color:#FF0000"> <h2 class="static"> Titre en position STATIC dans le "layout"</h2> <h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2> <h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2> <h2 class="centre"> Titre CENTRé par rapport au père </h2> <h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2> </body></html> DOCTYPE obligatoire ss IE sinon Mode QUIRK ! 20/08/2014 Transparent 41

  42. CSS: Z-Index <html> <head> <style type="text/css"> img{position:absolute;} img.x1{left:100px; top:100px; z-index:-1} img.x2{left:50px; top:50px; z-index:-2} img.x3{left:0px; top:0px; z-index:-3} </style></head> <body> <h1>This is a Heading</h1> <img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380"> <img class="x2" src="BandeauVerticalPPT.gif" width="112" height="380"> <img class="x3" src="BandeauVerticalPPT.gif" width="112" height="380"> <p>Default z-index is 0. z-index -1 has lower priority.</p> </body> </html> 20/08/2014 Transparent 42

  43. CSS: Z-Index avec "iframe" OK ss I.E. et FF ! <html> <body> <iframe style="width:75%; height:300px; background-color: #FFFF99" name="view" src="CSSzIndex.html"> </iframe> </body> </html> 20/08/2014 Transparent 43

  44. CSS:float & clear <html><head> <style type="text/css"> img.droite{float: right ; padding-left:20px;} img.gauche{float: left ; padding-right:20px;} .break { clear: both ;} </style></head><body> <p> PARAGRAPHE 1 <br/> <img class="droite" src="xpath.gif" width="112" height="84" /> This is some text. This is some text. This is some text. …. </p><p> PARAGRAPHE 2 <br/> <img class="gauche" src="xpath.gif" width="112" height="84" /> This is some text. …… </p><p class="break"> PARAGRAPHE 3 <br/> This is some text. This is some text. This is some text. ….. </body> </html> Pour arrêter le "flottement" 20/08/2014 Transparent 44

  45. CSS: modèle de page Web zones fixes, relatives & absolues <body> <div id="HH"> <div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div> <div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div> <div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div> </div> <!-- fin HH --> <div id="VG"> <p> "fixed" V G </p> <div id="RUBRIQUE"> ..... </div> <div id="RUBRIQUE"> ..... </div> </div> <!-- fin VG --> <div id="GRDTITRE"><p> Grand Titre </p></div> <div id="PRINCIPAL"> <p> CADRE PRINCIPAL "absolute" </p> <div id="SECTION"> <p> SECTION 1 "relative" </p> </div> <!-- fin SECTION --> </div> <!-- fin PRINCIPAL --> </body> 20/08/2014 Transparent 45

  46. CSS: unités, pseudo-éléments opacité CATALOG {display: block; background-color: #cccccc; width: 100%; } CATALOG:before { content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; } CD { display: inline-block; background-image: url(../IMAGES/cd.gif); margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt; border: cyan 5px ridge; -moz-border-radius: 50%; } CD:hover { background-image: url(../IMAGES/cd.png); background-position: 0px 4px; height: 248px; width: 246px; font-size: 11pt; } CD>ARTIST, CD>TITLE { display:block ; margin-top: 1em; margin-left: auto; margin-right: auto; padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; } CD>TITLE { width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px; color: #00FFFF;font-style:italic; text-align:center ; filter:alpha(opacity=80); opacity:0.8; } 20/08/2014 Transparent 46

  47. CSS:Propriétés des Tables 20/08/2014 Transparent 47

  48. CSS: des Tables sans la balise <table> (v1) idem en XML mais pas ss I.E. ! <html> <head> <style type="text/css"> .grdMere{display: table;} .mere{display: table-row;} .fille{display: table-cell;} </style></head> <body> <div class="grdMere"> <div class="mere"> <p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p> </div> <div class="mere"> <p class="fille"> F21</p> <p class="fille"> F22</p> </div> </div> </body></html> 20/08/2014 Transparent 48

  49. CSS: des Tables sans la balise <table> (v2) <html> <head> <style type="text/css"> .grdMere{display: table;} .grdMere>div{display: table-row;} .grdMere>div>p{display: table-cell;} </style></head> <body> <div class="grdMere"> <div> <p> F11</p> <p > F12</p><p> F13</p> </div> <div> <p > F21</p> <p > F22</p> </div> </div> </body></html> idem en XML mais pas ss I.E. ! 20/08/2014 Transparent 49

  50. Exemple: Bibliographie placement sans <table> avec display: ou float: <html> <head> <link rel="stylesheet" href="bib.css" type="text/css" /> </head> <body> <h1> Bibliographie &quot;Documents&quot; </h1> <div class="Livre" > Comprendre XSLT <img src="../../BIBLIO/HTML2841771571.jpg" width="54" height="90"> <ul> <em> Auteurs:</em> <li> <a href="">Bernard Amann</a></li> <li> <a href="">Philippe Rigaux</a></li> </ul> <span>2002</span> <span>Ed: O'REILLY</span> </div> </body> </html> body > h1 { text-align: center; } Livre { display: inline-block; width: 22%; background-color: #99FFFF; border: #0000FF medium ridge; margin: 10px ; } Livre ul { padding-left: 0px; text-align: center; } Livre li { list-style: none; } img { float: right ; } 20/08/2014 Transparent 50

More Related