Chap V - CSS "Cascading Style Sheets" 26/03/2017 Mai 2013. CSS3 resize box sizing keyframes, animation media queries Positionnement Boites flexbles 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 Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 1 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

26/03/2017 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 HTML XHTML CSS JS+DOM MATHML XPATH XLINK XSLT Etat de l'art: HTML5 CSS3 SPRY SVG RDF AJAX XUL 26/03/2017 Transparent 2 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi 2

Some Références Web EPU courses (in French) 26/03/2017 Some Références 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 26/03/2017 Transparent 3 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

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/ 26/03/2017 Transparent 4 ESSI - 2 – 2004-05 - Paul Franchi

Références Web 26/03/2017 Transparent 5 5 ESSI - 2 – 2004-05 - Paul Franchi 5

Lexique API – Application Programming Interface 26/03/2017 Lexique 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 – Dynamic HTML 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 26/03/2017 Transparent 6 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap V - CSS "Cascading Style Sheets" 26/03/2017 Chap V - CSS "Cascading Style Sheets" CSS 2: Règles, Sélecteurs, Propriétes La balise <style> en HTML Feuilles de style séparées en HTML Feuilles de style en XML Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 7 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les feuilles de style 26/03/2017 CSS: les feuilles de style 26/03/2017 Transparent 8 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Cascading Style Sheets 26/03/2017 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 26/03/2017 Transparent 9 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Tutoriaux, Versions et Navigateurs 26/03/2017 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 26/03/2017 Transparent 10 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les feuilles de style en cascade 26/03/2017 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 26/03/2017 Transparent 11 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

( ( ascendance >? ) * element ( [ attr ( = val )? ] ) * { 26/03/2017 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 ;} 26/03/2017 Transparent 12 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Les Commentaires : /* blabla */ Exemples HTML & XML 26/03/2017 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; } 26/03/2017 Transparent 13 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Tokenization (unités lexicales) 26/03/2017 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. 26/03/2017 Transparent 14 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Norme syntaxique At Rule: Rule: Sélecteur, Bloc Sélecteur 26/03/2017 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: [ ] = ~= |= Propriété, Valeur identificateur entier et réel mesures et pourcentages child (>) descendant (' ') sibling (+) pseudo (:) precedence (~) URL et URI strings couleurs compteurs 26/03/2017 Transparent 15 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Sélecteurs Class & Id en HTML 26/03/2017 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> 26/03/2017 Transparent 16 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les Sélecteurs El Parent El Parent > El El + Ef El ~ Ef 26/03/2017 CSS: les Sélecteurs El Tous les <E1 > Parent El les <E1> descendant d’un <Parent> Parent > El les <E1> fils d’un <Parent> El + Ef les <Ef> précédés immédiatement d’un <El> El ~ Ef les <Ef> précédés d’un <El> El[att] Tous les <E1 att = “xxx“ > El[att = “val“] les <E1 att = “val“ > El[att~=“val“] les <E1 att = “val1 val val2“ > El[att |= “val“] les <E1 att = “val-xxx“ > El#nom les <E1 xxx = “nom“ > où xxx est un attribut de type ID El:link les <E1> de type link non encore visités El:visited :hover :active Idem dèja visités, etc. E1:lang (fr) les <E1 xml:lang= “ fr “ > :focus :disabled :enabled :first-letter :first-line :root :hover :empty :first-child :last-child :nth-child(n) :nth-of-type(n) :before :after :not() * Tous les élements 26/03/2017 Transparent 17 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS en HTML: .class vs #id 26/03/2017 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 26/03/2017 Transparent 18 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les Propriétés top margin right border left padding content 26/03/2017 CSS: les Propriétés 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 left right top bottom margin content padding border 26/03/2017 Transparent 19 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap V - CSS Méthodologie 26/03/2017 Chap V - CSS Méthodologie Style inline Style interne (<style>) Style externe (séparé) Styles alternatifs Styles multiples Importation de styles Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 20 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Evolution 0: les attributs de style 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 ! 26/03/2017 Transparent 21 ESSI - 2 – 2004-05 - Paul Franchi

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 ! 26/03/2017 Transparent 22 ESSI - 2 – 2004-05 - Paul Franchi

Evolution 2 : la balise <style> en Html 26/03/2017 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> 26/03/2017 Transparent 23 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Evolution 2: les attributs de style Html 26/03/2017 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> 26/03/2017 Transparent 24 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Les attributs de style Liens en Html 26/03/2017 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 </body></html> Internal Style sheet 26/03/2017 Transparent 25 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Evolution 3: les feuilles de style séparées 26/03/2017 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> 26/03/2017 Transparent 26 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Evolution 3: les feuilles de style séparées 26/03/2017 Evolution 3: les feuilles de style séparées 2 feuilles de style CCS (alternatives) ..\XML_CSS\rightNav.css ..\XML_CSS\leftNav.css #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; 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; css css 26/03/2017 Transparent 27 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

css XML et CSS Le style CSS dans XML cd_catalog.xml 26/03/2017 XML et CSS Le style CSS dans XML cd_catalog.xml la feuille de style CCS cd_catalog.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;} 26/03/2017 Transparent 28 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Le style "Table" CSS dans XML 26/03/2017 XML et CSS Le style "Table" CSS dans XML <?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; 26/03/2017 Transparent 29 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les Styles Multiples en HTML 26/03/2017 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 26/03/2017 Transparent 30 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: les Styles Multiples en XML 26/03/2017 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) 26/03/2017 Transparent 31 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

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> 26/03/2017 Transparent 32 ESSI - 2 – 2004-05 - Paul Franchi

xml 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;} 26/03/2017 Transparent 33 Transparent 33 ESSI - 2 – 2004-05 - Paul Franchi

XML & CSS multiples title Obligatoire 26/03/2017 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> 26/03/2017 Transparent 34 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi 34

Chap V - CSS2 Références des propriétés 26/03/2017 Chap V - CSS2 Références des propriétés Boites (Box) Textes Positionnement Tables Pseudo éléments Compléments Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 35 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Propriétés des Boîtes 26/03/2017 CSS: Propriétés des Boîtes Boîtes: Dimensions & graphiques valeurs width max-width min-width "largeur" % auto inherit height max- height min- height "hauteur" % auto margin margin-top margin-bottom margin-left margin-right "largeur" % padding padding-top padding-bottom padding-left padding-right border-width -top-width -bottom-width -left-width -right-width "largeur" thin medium thick border-color -top-color -bottom-color -left-color -right-color "couleur" transparent border-style -top-style -bottom-style -left-style -right-style none hidden dotted dashed solid border -top -bottom -left -right 26/03/2017 Transparent 36 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Propriétés des Textes 26/03/2017 CSS: Propriétés des Textes Textes valeurs text-indent indentation % text-align left right center justify inherit chaine text-decoration underline overline line-through blink none inherit text-shadow couleur distance1 distance2 distance3 none inherit letter-spacing normal distance inherit word-spacing text-transform capitalize uppercase lowercase none inherit direction ltr rtl white-space normal pre nowrap inherit Utile pour les sources des L.P. 26/03/2017 Transparent 37 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Propriétés ("positionning") 26/03/2017 CSS: Propriétés ("positionning") Boîtes: Positions valeurs display block none inline list-item compact table table-row table-col table-cell … position static relative absolute fixed top bottom left right "longueur" % auto inherit float left right none inherit clear left right none both inherit overflow visible hidden scroll auto clip rect(,,,,) auto visibility visible hidden collapse inherit 26/03/2017 Transparent 38 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS : positionnement/dimensionnement 26/03/2017 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. 26/03/2017 Transparent 39 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Positionnement (1) 26/03/2017 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 ! 26/03/2017 Transparent 40 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Z-Index <html> <head> <style type="text/css"> 26/03/2017 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> 26/03/2017 Transparent 41 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Z-Index avec "iframe" 26/03/2017 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> 26/03/2017 Transparent 42 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Pour arrêter le "flottement" 26/03/2017 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" 26/03/2017 Transparent 43 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

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> <!-- 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> 26/03/2017 Transparent 44 ESSI - 2 – 2004-05 - Paul Franchi

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; } 26/03/2017 Transparent 45 ESSI - 2 – 2004-05 - Paul Franchi

CSS: Propriétés des Tables 26/03/2017 CSS: Propriétés des Tables Tables valeurs display table inline-table table-row-group table-column-group table-header-group table-footer-group table-caption table-row table-cell caption-side top bottm left right inherit table-layout auto fixed inherit border-collapse collapse separate inherit border-spacing dist-horiz dist-vertic inherit empty-cells show hide inherit 26/03/2017 Transparent 46 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: des Tables sans la balise <table> (v1) 26/03/2017 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> <p class="fille"> F21</p> <p class="fille"> F22</p> </body></html> 26/03/2017 Transparent 47 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: des Tables sans la balise <table> (v2) 26/03/2017 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> <p > F21</p> <p > F22</p> </body></html> idem en XML mais pas ss I.E. ! 26/03/2017 Transparent 48 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Exemple: Bibliographie placement sans <table> avec display: ou float: <html> <head> <link rel="stylesheet" href="bib.css" type="text/css" /> </head> <body> <h1> Bibliographie "Documents" </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 ; } 26/03/2017 Transparent 49 ESSI - 2 – 2004-05 - Paul Franchi

CSS: divers compléments 26/03/2017 CSS: divers compléments rien d'autre ! contenu pseudo-élements :before :after textes :first-line :first-letter white-space compteurs {content:"string" attr(A) url(" ") counter(C);} Exercice[ref]:before {content: "Exercice - " attr(ref);} Paragraph:first-line {font-style:"italic";} Paragraph:first-letter {font-size:+200%;} SourceLP {white-space:pre;} Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;} 26/03/2017 Transparent 50 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: divers compléments 26/03/2017 CSS: divers compléments opacité (chacun sa version !) media pagination zone { filter: alpha(opacity=100); filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1; } @media print { #footer , #menu {display: none;} #container { width: 92%; opacity:1.0; /* obligatoire pour imprimer */ } Chapitre { page-break-after: always; } Exemple { page-break-inside: avoid ;} 26/03/2017 Transparent 51 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS : importation de styles W3C.org 26/03/2017 CSS : importation de styles W3C.org <link rel="alternate stylesheet" title="Ultramarine" href="http://www.w3.org/StyleSheets/Core/Ultramarine"> <link rel="alternate stylesheet" title="Chocolate" href="http://www.w3.org/StyleSheets/Core/Chocolate"> <link rel="alternate stylesheet" title="Midnight" href="http://www.w3.org/StyleSheets/Core/Midnight"> <link rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle"> <link rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist"> <link rel="alternate stylesheet" title="Swiss" href="http://www.w3.org/StyleSheets/Core/Swiss"> <link rel="alternate stylesheet" title="Traditional" href="http://www.w3.org/StyleSheets/Core/Traditional"> <link rel="alternate stylesheet" title="Steely" href="http://www.w3.org/StyleSheets/Core/Steely"> <link rel="alternate stylesheet" title="Forest (by David Baron)" href="http://dbaron.org/style/forest"> <link rel="stylesheet" title="Plain (by David Baron)" href="http://dbaron.org/style/plain"> 26/03/2017 Transparent 52 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7 26/03/2017 CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7 doctype en 1ère ligne transitional strict bugs récurrents margin, padding div float border background etc… non supportés :hover display: table hacks CSS < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > margin: 9px !important; /* FF only */ /margin: 7px; /* IE7 only */ -margin: 5px; /* IE6 only */ 26/03/2017 Transparent 53 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

HTML - Commentaires Conditionnels IE 26/03/2017 HTML - Commentaires Conditionnels IE Syntaxe d'un commentaire conditionnel positif: <!--[if condition]> HTML, XHTML, CSS ou Script <![endif]--> Syntaxe d'un commentaire conditionnel négatif: <!--[if condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]--> version non valide pour XHTML et XML Conditions: IE : Toutes versions d'IE lt IE version: Versions d'IE inférieures à version lte IE version: Versions d'IE inférieures ou égales à version IE version: La version version d'IE gte IE version: Versions d'IE supérieures ou égales à version gt IE version: Versions d'IE supérieures à version version: IE 5, 5.5, 6 ou 7. Utile pour adapter les styles CSS aux versions IE 26/03/2017 Transparent 54 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Ilot XML dans HTML OK ss I.E. ! pas ss FF <html> <body> 26/03/2017 Ilot XML dans HTML <html> <body> <xml id="MonIlotXML" src="data.xml"></xml> <table border="1" datasrc="#MonIlotXML"> <tr> <td><span datafld="NOM"></span></td> <td><span datafld="PRENOM"></span></td> </tr> </table> </body> </html> OK ss I.E. ! pas ss FF 26/03/2017 Transparent 55 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap V - CSS 3 Support des Navigateurs Survol, extensions Mozila 26/03/2017 Chap V - CSS 3 Support des Navigateurs Survol, extensions Mozila @keyframes, animations Media Queries Boites flexibles Mozilla Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 56 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS : Overview & Web support (2011) 26/03/2017 CSS : Overview & Web support (2011) CSS 2.1 features Units Importance At-rules Basic selectors Pseudo-classes Pseudo-elements Basic properties Print properties Conformance CSS 3 features Units At-rules Basic selectors Pseudo-classes Pseudo-elements Basic properties Print properties 26/03/2017 Transparent 57 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: normalisation en cours (modules) 26/03/2017 CSS 3: normalisation en cours (modules) Completed work CSS Level 2 CSS Level 1 Selectors CSS Color High Priority CSS Level 2 Revision 1 CSS Namespaces CSS Backgrounds CSS Borders CSS Multi-column Layout Media Queries Medium Priority CSS Fonts CSS Basic Box Model CSS Template Layout CSS Speech CSS Basic User Interface CSS Scoping CSS Grid Positioning CSS Grid Layout CSS Regions CSS Flexible Box Layout CSS Image Values CSS 2D Transformations CSS 3D Transformations CSS Transitions CSS Animations Medium Priority CSS Snapshot 2007 CSS Snapshot 2010 CSS Mobile Profile 2.0 CSS Marquee CSS Paged Media CSS Print Profile CSS Values and Units CSS Cascading and Inheritance CSS Text CSS Writing Modes CSS Line Grid CSS Ruby CSS Generated Content for Paged Media 26/03/2017 Transparent 58 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: propriétés en fonction 26/03/2017 CSS 3: propriétés en fonction bordures: arrondies, dégradées, ombrées effets de texte: ombre, fontes, etc. (re) dimensionnement: .border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; } .border_shadow { -webkit-box-shadow: 10px 10px 5px #888; } .text_shadow { color: #897048; background-color: #fff; text-shadow: 2px 2px 2px #ddccb5; } .ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto; } 26/03/2017 Transparent 59 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: propriétés en fonction 26/03/2017 CSS 3: propriétés en fonction .backgroundsize { background: url(logo.gif); -webkit-background-size: 137px 50px; -khtml-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px; background-repeat: no-repeat; } backgrounds: size, position, multiples multi-colonnes: span, gap, rule .multiplecolumns { -moz-column-width: 130px; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; } 26/03/2017 Transparent 60 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: normalisation en cours 26/03/2017 CSS 3: normalisation en cours .top { -moz-transform: rotate(-45deg) skew(15deg, 15deg); } div.polaroid:hover { /* FF SAFARI OPERA CHROME */ -webkit-transform: rotate(0deg) scale(1.25) ; -moz-transform: rotate(0deg) scale(1.25); transform: rotate(0deg) scale(1.05); transform: rotate, translate, skew, scale transition: div.pub { /* OK ss SAFARI, mais en attente de FF 3.7 */ -webkit-transition: -webkit-transform 3s ease-in; -moz-transition: -moz-transform 3s ease-in; -webkit-border-radius: 3em; } 26/03/2017 Transparent 61 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: normalisation en cours 26/03/2017 CSS 3: normalisation en cours @keyframes animation- delay direction duration iteration-count name   play-state timing-function fill-mode resize box-sizing border- content- padding- h1 {   animation-duration: 3s; animation-name: slidein; } @keyframes slidein {   from { margin-left: 100%; width: 300% }   to { margin-left: 0%; width: 100%;} @-webkit-keyframes slidein { /* support Firefox, WebKit, Opera and IE8+ */ .example { resize: both;    -moz-box-sizing: border-box;         box-sizing: border-box; } 26/03/2017 Transparent 62 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: Media Queries @media logical @media print { 26/03/2017 CSS 3: Media Queries «A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.» @media print screen projection tv braille aural all @media print { #menu, #footer, aside { display:none; } body { font-size:120%; color:black; } } @media screen and (max-width: 640px) { .bloc { display:block; clear:both; } } logical and not only media features min- max- width height color aspect-ratio resolution 26/03/2017 Transparent 63 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: Boites flexibles (Mozilla/XUL) 26/03/2017 « Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles. Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML . » body{    display : box;     box-orient : horizontal; box-direction : reverse; box-pack : center; /* horizontalement */ box-align : center; /* verticalement */ } #boite1 { box-ordinal-group : 2; box-flex : 2; } #boite2 { box-ordinal-group : 2; box-flex : 1; } #boite3 { box-ordinal-group : 1; box-flex : 1; } display:box box-orient box-direction box-ordinal-group box-flex box-pack box-align 26/03/2017 Transparent 64 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: Mozilla Extensions 26/03/2017 CSS 3: Mozilla Extensions -moz-background-clip -moz-background-inline-policy -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-start-width -moz-box-align -moz-box-direction -moz-box-flex -moz-box-flexgroup -moz-box-ordinal-group -moz-box-orient -moz-box-pack -moz-box-sizing -moz-column-count -moz-column-gap -moz-column-width -moz-column-rule Gecko 1.9.1 -moz-column-rule-width Gecko 1.9.1 -moz-column-rule-style Gecko 1.9.1 -moz-column-rule-color Gecko 1.9.1 -moz-float-edge -moz-force-broken-image-icon -moz-font-feature-settings Gecko 2.0 -moz-font-language-override Gecko 2.0 -moz-image-region -moz-margin-end -moz-margin-start -moz-opacity Obsolete -moz-outline Obsolete -moz-outline-color Obsolete -moz-outline-offset Obsolete -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -moz-outline-style Obsolete -moz-outline-width Obsolete -moz-padding-end -moz-padding-start -moz-stack-sizing Gecko 1.9.1 -moz-tab-size Gecko 2 -moz-transform Gecko 1.9.1 -moz-transform-origin Gecko 1.9.1 -moz-transition Gecko 2 -moz-transition-delay Gecko 2 -moz-transition-duration Gecko 2 -moz-transition-property Gecko 2 -moz-transition-timing-function Gecko 2 -moz-user-focus -moz-user-input -moz-user-modify -moz-user-select -moz-window-shadow Gecko 1.9.1 -moz-initial -moz-appearance -moz-win-browsertabbar-toolbox New in Firefox 3 -moz-win-communications-toolbox New in Firefox 3 -moz-win-media-toolbox New in Firefox 3 -moz-mac-unified-toolbar New in Firefox 3.5 etc … 26/03/2017 Transparent 65 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

opacité & coins arrondis 26/03/2017 CSS 3: spécial Mozilla opacité & coins arrondis multi-colonnes bordures multiples .joliBouton { background-image: url(sourire.png); border:#0000FF thick ridge ; -moz-border-radius: 25px ; -moz-opacity : 0.85 ; } .col_3 { -moz-column-count: 3; -moz-column-gap: 10%; -moz-column-width: 25%; } Bouton:hover { -moz-border-bottom-colors: #FF0000 #00FF00 #0000FF ; -moz-border-right-colors: #FF0000 #00FF00 #0000FF ; } 26/03/2017 Transparent 66 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS 3: spécial Mozilla :not() :root :target backgrounds 26/03/2017 CSS 3: spécial Mozilla :not() :root :target backgrounds #onglets li div { display: none; } #onglets > li:target { color: #FF0000; font-size: 24px ; } #onglets > li:target > div { display: block; } #onglets > li:not(:target) > div { display: none; } .linearDiagonal {background: -moz-linear-gradient(left top, blue, white); } .linearMultiple {background: -moz-linear-gradient(left, red, orange, yellow, green, blue); } .radialEllipse {background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white); } .radial {background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));} .radialRepetition {background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); } 26/03/2017 Transparent 67 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Animations avec CSS transform Transition Timing Function 26/03/2017 CSS 3: Tutoriaux du Web CSS3 please! Animations avec CSS transform Transition Timing Function Sliding content 3D Flipping Accordions (widgets) 50 animations with CSS3 ( and Jquery ) CSS3 Animation Browser supports 26/03/2017 Transparent 68 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

26/03/2017 CSS : Méthodologie "Diviser pour ..." : plusieurs feuilles CSS pour séparer des niveaux ou domaines de style: appli1 ,...,applin, fontes, layout, media, etc. Réutiliser "autant que possible" vos CSS ou celles des autres (après "validation") Partir avec de bonnes fondations ("nettoyer le terrain") Utiliser des CSS Conditionnelles Coder "défensif" Eviter les "hacks" Les bonnes habitudes: Formater et colorer votre source Commenter souvent, commenter "intelligent" Tester, tester, et reTester Lire le Web, mais "défensivement" <!--[if lte IE 6]> <link rel="stylesheet" href="/css/ie6_and_below.css"  type="text/css" media="screen" /> <![endif]--> /* nettoyer le terrain*/ *  {     margin: 0;      padding: 0;     border: 0;   } #left-content {     float: left;      margin-left: 10px;    } #left-content {     float: left;    } #left-content  * {      margin-left: 10px;    } 26/03/2017 Transparent 69 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS : savoir-faire (sans script) 26/03/2017 CSS : savoir-faire (sans script) Panneaux (fixes, relatifs, absolus) sans "table" Cadres sans "frame", ni "iframe" Widgets avec ":hover" Menus (surgissants, déroulants, scrollants, arborescents, etc) Boutons (pseudo-"radio") Effets : "popup", loupe, zoom, etc. Zones dédiées Barres de Navigation "Sticker" ou "PostIt" Texte en multicolonnes Génération de contenu et puces (numérotation) Opacité Onglets (avec CSS3:target) Mode "Impression" Page Web dédiées (multi-panneaux): Explorateur: accès par index, listes, aperçus, et visualisation Atelier de Développement: code source, visualisation, documentation 26/03/2017 Transparent 70 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

CSS : Une galerie Photo sous DW 26/03/2017 CSS : Une galerie Photo sous DW Développement par étapes sous DW <div > <span> <table> #id et .classe en position absolue Areas MAIN HEAD NAVIGATION Liens internes (ancres) externes (hyperliens) Menus & Boutons Images Effets CSS version XML+XSL version "Doc Exemples" CSS CSS CSS XSL 26/03/2017 Transparent 71 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi