. . . Mai 2013 / Mars 2014 Lexique Sommaire •CSS3 resize box sizing •keyframes, animation Réfs •media queries •Positionnement Techs •Flex Box & Holly Grail & unités Langages & Documents Chap V CSS "Cascading Style Sheets" CSS 2: Règles, Sélecteurs, Propriétes . CSS: Méthodologie . . CSS 2: Références LESS CSS 3: Survol, extensions Mozila Foundation CSS 3: @keyframes, animations JQuery UI CSS 3: Media Queries Responsive design Paul Franchi SI 4 2014-15 CSS 3: Boites flexibles Mozilla 15/09/2020 Transparent - 1 Lexique Sommaire Sommaire du Cours Réfs . . . . . 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 Techs MATHML XPATH XLINK XSLT Etat de l'art: HTML5 CSS3 SPRY SVG RDF AJAX 15/09/2020 XUL Transparent 2 Lexique Sommaire Some Références . . . Réfs 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 Techs 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 . 15/09/2020 Transparent 3 Lexique Sommaire Documentation et Manuels . Techs 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 Réfs 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/htmltraining/css/positioning/ 10 steps to better CSS: http://shapeshed.com/journal/10_steps_to_bette r_css/ compléments Emacs . grep sous Unix 15/09/2020 Transparent 4 Lexique Sommaire . Références Web Réfs Techs . . . . . 15/09/2020 Transparent 5 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 15/09/2020 Lexique Sommaire Réfs Techs Transparent 6 Lexique Sommaire . Réfs Langages & Documents Techs 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 Paul Franchi SI 4 2014-15 Feuilles de style en XML LESS . 15/09/2020 Transparent - 7 Lexique Sommaire CSS: les feuilles de style Cascading Style Sheets Réfs Techs Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 8 Lexique Sommaire CSS: Cascading Style Sheets Cascading Style Sheets Syntaxe les Sélecteurs Un langage pour définir les styles de balises HTML ou XML des éléments d’une DTD Réfs Techs class vs #id Méthodologie le modèle de boites CSS -2 (1998) CSS 3: ( >1999, en cours: www.css3.info ) XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS -1 (1996) CSS2 Références des propriétés CSS 3 norme CSS 3 implementation Principes Règles de style associées à la structure des documents Feuilles multiples Types de média Attachements alternatifs aux documents CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 9 Lexique Sommaire Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites Réfs CSS: Tutoriaux, Versions et Navigateurs Techs 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 ? XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS sur le Web W3Schools - CSS Tutorial http://www.cssplay.co.uk/ http://www.csszengarden.com/ compatibilité avec les Navigateurs CSS 3 implementation Learn CSS on HTML.net Learn CSS Tutorial CSS Positionning in 10 steps CSS in 10 sites 10 top Tips in CSS CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 10 Lexique Sommaire CSS: les feuilles de style en cascade Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Techs 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) Méthodologie le modèle de boites XML et CSS Réfs Modularité Importation Héritage Masquage Cascade Résolution des "surcharge" par la règle la plus spécifique Conception CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 11 Lexique Sommaire CSS: Syntaxe (1) Cascading Style Sheets Syntaxe Techs ( ascendance >? ) * element ( [ attr ( = val )? ] ) * { ( prop : val ; ) * class vs #id }) Méthodologie le modèle de boites Les Règles ( les Sélecteurs Réfs * Exemples HTML & XML envaleur { font-style: italic ; font-weight: bold ; } XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux /* CSS pour Xml */ /* CSS pour Html */ body { font-style: italic ; color: black ;} p{ text-align: center ; font-family: arial ;} livre > titre {font-size: 24pt ;} chapitre > titre {font-size: 20pt ;} section theoreme {font-color: blue ;} message [priorite = "haute"] { font-size: 18pt ; font-color: red ; } 15/09/2020 Transparent 12 Lexique Sommaire CSS: Syntaxe (2) Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites Réfs Groupes de Règles selecteur (, selecteur )* { ( prop : val ; ) * } Les Commentaires : /* blabla */ XML et CSS les Styles Multiples en XML Techs /* CSS pour Xml */ livre>titre, chapitre>titre { font-size: 24pt ; font-color: blue; } Exemples HTML & XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation /* CSS pour Html */ p+h3 { text-align: left ; } /* CSS pour Html */ h1, h2, h3 { text-align: center ; color: red; } CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 13 Lexique Sommaire CSS: Norme lexicale Cascading Style Sheets Syntaxe class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Tokenization (unités lexicales) ident name nmstart nonascii unicode escape nmchar num string string1 string2 nl les Sélecteurs Réfs Techs [-]?{nmstart}{nmchar}* {nmchar}+ [_a-z]|{nonascii}|{escape} [^\0-\237] \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? {unicode}|\\[^\n\r\f0-9a-f] [_a-z0-9-]|{nonascii}|{escape} [0-9]+|[0-9]*\.[0-9]+ {string1}|{string2} \"([^\n\r\f\\"]|\\{nl}|{escape})*\" \'([^\n\r\f\\']|\\{nl}|{escape})*\' \n|\r\n|\r|\f Opérateurs, Séparateurs, Commentaires, etc. 15/09/2020 Transparent 14 Lexique Sommaire CSS: Norme syntaxique Cascading Style Sheets Syntaxe class vs #id Techs At Rule: les Sélecteurs Réfs @import ….. ; @font-face { prop: "val"; ... ; } @media { selecteur {prop: "val";} } Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org Rule: Sélecteur, Bloc sélecteur (, sélecteur )* { ( propriété : valeur ; ) * } Sélecteur CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux universel: * type: tagName class (.) et id(#) attribute: [ ] = ~= |= *= $= ^= 15/09/2020 child (>) descendant (' ') sibling (+) pseudo éléments (::) pseudo classe ou fonction (:) precedence (~) Transparent 15 Lexique Sommaire CSS: Norme syntaxique Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie XML et CSS importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux identificateur entier et réel mesures et pourcentages relative units: le modèle de boites les Styles Multiples en XML Techs Propriété, Valeur 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: Réfs URL et URI strings couleurs compteurs body { font-size: 12px; text-indent: 3em; /* i.e., 36px */ } 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. 15/09/2020 Transparent 16 Lexique Sommaire CSS: Sélecteurs Class & Id en HTML Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS Classe (s) Techs 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) <!-- HTML --> les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme Réfs <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> /* CSS pour HTML*/ #grand {font-size : 20pt; } p#central { text-align : center; color: red;} p.red {color: red; } CSS 3 implementation p.left {text-align: left; } CSS 3 -moz .center {text-align: center; } CSS 3 Tutoriaux 15/09/2020 Transparent 17 Lexique Sommaire CSS: les Sélecteurs Réfs 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“ > le modèle de boites El[att = “val“] les <E1 att = “val“ > XML et CSS 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 CSS2 Références des propriétés El:visited :hover :active Idem dèja visités, etc. CSS 3 norme E1:lang (fr) les <E1 xml:lang= “ fr “ > Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie les Styles Multiples en XML importation de styles W3C.org > et Techs *= ^= $= :focus :disabled :enabled :first-letter :first-line :root :hover :empty :first-child :last-child :nth-child(n) :nth-of-type(n) :before :after :not() CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux * Tous les élements 15/09/2020 Transparent 18 Lexique Sommaire CSS en HTML: .class vs #id Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Réfs 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 id="navBar"> <p class="center"> à centrer </p> <div id="navBar" class="center" > </body> </html> 15/09/2020 Techs </div> </div> </div> Transparent 19 Lexique Sommaire CSS: les Propriétés Cascading Style Sheets margin l padding e f t Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux top border content Polices de caractère bottom Techs r i g h t font-family -style -weight -size Textes text-align -indent -decoration word-spacing Couleurs et Fonds color background CSS2 Références des propriétés CSS 3 norme Mis en Page ("Box") Réfs Listes List-style-position -image Tableaux Médias 15/09/2020 Transparent 20 Lexique Sommaire . Réfs Langages & Documents Techs Chap V CSS Méthodologie . . . Style inline . Style interne (<style>) Style externe (séparé) Paul Franchi SI 4 2014-15 Styles alternatifs Styles multiples . Importation de styles 15/09/2020 Transparent - 21 Lexique Sommaire Cascading Style Sheets Syntaxe Réfs Evolution 0: les attributs de style Html Techs <html> les Sélecteurs class vs #id <body color: black ; font-family: arial > Méthodologie le modèle de boites XML et CSS <p text-align: center; color: red; > texte centré en arial (par héritage) en rouge (par masquage) les Styles Multiples en XML </p> importation de styles W3C.org </body> CSS2 Références des propriétés CSS 3 norme HTML, comme il ne faut plus l'écrire ! car pas évolutif ! </html> CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 22 Lexique Sommaire Evolution 1: les attributs de style Html Cascading Style Sheets Syntaxe les Sélecteurs Techs <body> <div style=" class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme </div> </body> CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Réfs 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> HTML, peu évolutif ! 15/09/2020 Transparent 23 Lexique Sommaire Evolution 2 : la balise <style> en Html Cascading Style Sheets Réfs Techs <head> <style> Syntaxe div#Titre { les Sélecteurs position: absolute; width: 60%; left: 100px; top: 124px; background-color: #CCFFFF; border: 5px; solid #00FF00; class vs #id text-align: center; color: red; Méthodologie text-transform: uppercase; font-size: xx-large;font-weight: bold; le modèle de } boites div#sousTitre { XML et CSS text-transform: capitalize; font-size: x-large; font-weight: normal; les Styles Multiples en XML } </style> </head> importation de styles W3C.org <body> CSS2 Références des propriétés <div id="Titre"> Grand Titre <div id="sousTitre">sous titre avec l'attribut "id" </div> CSS 3 norme </div> CSS 3 implementation </body> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 24 Lexique Sommaire Evolution 2: les attributs de style Html Réfs Cascading Style Sheets Techs <html><head> <style> p {text-align: center; color: red;} Syntaxe p.right {text-align: right} les Sélecteurs p.center {text-align: center} class vs #id .center {text-align: center} Méthodologie #green {color: green} le modèle de p#para1{ text-align: left; color: pink} boites </style> </head> XML et CSS <body > les Styles Multiples <p> This paragraph will be center-aligned and red-colored. </p> en XML <p class="right"> This paragraph will be right-aligned and also red. </p> importation de styles W3C.org <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> CSS2 Références des propriétés <p class="center"> This paragraph will also be center-aligned and red.</p> CSS 3 norme <h2 id="green" class="center" >Subtitle centered in green.</h2> CSS 3 implementation <p id="para1"> This paragraph will be left-aligned and pink-colored.</p> </body> </html> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 25 Lexique Sommaire Les attributs de style Liens en Html Cascading Style Sheets <!-- http://www.w3schools.com/css/css_pseudo_classes.asp --> Réfs Techs Syntaxe <html> <head> les Sélecteurs <style type="text/css"> class vs #id a:link {color: #FF0000} Méthodologie a:visited {color: #00FF00} le modèle de a:hover {color: #FF00FF} boites a:active {color: #0000FF} XML et CSS </style></head> <body> les Styles Multiples en XML <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> importation de styles W3C.org <p><b>Note:</b> a:hover MUST come after a:link and a:visited CSS2 Références in the CSS definition in order to be effective!!</p> des propriétés <p><b>Note:</b> a:active MUST come after a:hover CSS 3 norme in the CSS definition in order to be effective!!</p> CSS 3 implementation </body></html> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 26 Lexique Sommaire Evolution 3: les feuilles de style séparées Cascading Style Sheets Réfs Techs Le(s) lien(s) vers le style CSS dans HTML ..\XML_CSS\leftnav.html ..\XML_CSS\rightnav.htm Syntaxe les Sélecteurs class vs #id Méthodologie ici 2 styles alternatifs <html> le modèle de <head> boites <link rel="stylesheet" href="leftNav.css" type="text/css" media="screen" /> XML et CSS <link rel="stylesheet" href="printNav.css" type="text/css" les Styles Multiples media="print" /> en XML </head> importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme <body> <div id="masthead"> <!-- texte de l'entête --> </div> <div id="navBar"> <!-- texte de la barre de navigation--> </div> CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux </body> </html> 15/09/2020 Transparent 27 Lexique Sommaire Evolution 3: les feuilles de style séparées Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Réfs Techs 2 feuilles de style CCS (alternatives) ..\XML_CSS\rightNav.css ..\XML_CSS\leftNav.css #masthead { padding: 10px 0px 0px 0px; Méthodologie border-bottom: 1px solid #cccccc; le modèle de width: 100%; boites } #masthead { padding: 10px 0px 0px 0px; XML et CSS #navBar { border-bottom: 1px solid #cccccc; les Styles Multiples float: right; width: 20%; width: 100%; en XML margin: 0px; padding: 0px; } importation de background-color: #eeeeee; styles W3C.org border-right: 1px solid #cccccc; #navBar { border-bottom: 1px solid #cccccc; float: left; width: 20%; CSS2 Références des propriétés } margin: 0px; padding: 0px; background-color: #eeeeee; CSS 3 norme border-right: 1px solid #cccccc; CSS 3 implementation border-bottom: 1px solid #cccccc; } •css •css CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 28 Lexique Sommaire XML et CSS Réfs Le style CSS dans XML cd_catalog.xml <?xml version="1.0" encoding="ISO-8859-1"?> Cascading Style Sheets Syntaxe Techs <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <COUNTRY>USA</COUNTRY> <PRICE>10.90</PRICE> </CD> les Sélecteurs class vs #id Méthodologie le modèle de boites <ARTIST>Bob Dylan</ARTIST> <COMPANY>Columbia</COMPANY> <YEAR>1985</YEAR> XML et CSS les Styles Multiples en XML importation de styles W3C.org la feuille de style CCS cd_catalog.css CATALOG {background-color: #ffffff; width: 100%;} CSS2 Références CD des propriétés CSS 3 norme •css {display: block; margin-bottom: 30pt; margin-left: 0;} TITLE {color: #FF0000; font-size: 20pt;} CSS 3 implementation ARTIST {color: #0000FF; font-size: 20pt;} CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 29 Lexique Sommaire XML et CSS Réfs Le style "Table" CSS dans XML Cascading Style Sheets Syntaxe <?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> les Sélecteurs class vs #id Méthodologie Techs le modèle de boites CATALOG { display: table; width: 80%; les Styles Multiples margin-left: 30px; border: 2px solid; en XML padding: 20px 30px 30px 20px; importation de } styles W3C.org CD { CSS2 Références display: table-cell; background-color: #00FFFF; des propriétés border: 2px solid; padding: 20px 30px 30px 20px; } CSS 3 norme Titre { CSS 3 implementation display: table-caption; font-size:36px; text-align:center; } XML et CSS CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 30 Lexique Sommaire CSS: les Styles Multiples en HTML Cascading Style Sheets Résolution des styles multiples Réfs Techs <html> <head> les Sélecteurs <link rel="stylesheet" href="Style1.css" /> <link rel="stylesheet" href="Style2.css" /> class vs #id <style> Méthodologie @import "Fontes.css" ; @import "Tables.css" ; le modèle de .centre{} boites style des balises html .urgent {color:red !important } XML et CSS attributs html #navBar {color:blue } ordre des styles les Styles Multiples </style> en XML </head> CSS par @import importation de <body style='color:black'> CSS par "stylesheet", styles W3C.org <div class="urgent centre" balise <style> CSS2 Références id="navBar"> des propriétés ordre des propriétés ... CSS 3 norme sélecteur plus défini </div> (qualifications) CSS 3 implementation </body> style par attribut style </html> CSS 3 -moz sauf !important Syntaxe CSS 3 Tutoriaux 15/09/2020 Transparent 31 Lexique Sommaire CSS: les Styles Multiples en XML Cascading Style Sheets Styles multiples (cascading) Réfs Techs Syntaxe <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="monStyle1.css"?> class vs #id <?xml-stylesheet type="text/css" href="monStyle2.css"?> Méthodologie <racine> le modèle de <titre> Styles en XHTML et XML</titre> boites <html xmlns = " http://www.w3.org/1999/xhtml " > XML et CSS <body> les Styles Multiples en XML <h1> Liens sous XHTML</h1> importation de <a href=" http://www.essi.fr/~pfz "> styles W3C.org Chez Moi CSS2 Références styles prédéfinis et attributs des propriétés </a> par xmlns: html, xhtml, etc. CSS 3 norme </body> CSS par xml-stylesheet </html> CSS 3 implementation (ordre) et qualifications des </racine> élements les Sélecteurs CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 32 Lexique Sommaire Les feuilles de style alternatives Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux ici 2 styles au choix dans le Navigateur (FF>Affichage>Style de la page>) Réfs Techs <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> 15/09/2020 Transparent 33 Lexique Sommaire XML et CSS Réfs Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites Le style CSS dans XML cd_catalog.xml Techs •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> XML et CSS les Styles Multiples en XML importation de styles W3C.org la feuille de style CCS cd_catalog.css CATALOG {background-color: #ffffff; width: 100%;} CD {display: block; margin-bottom: 30pt; margin-left: 0;} CATALOG {background-color: #ffffff; width: 100%;} TITLE {color: #FF0000; font-size: 20pt;} CSS 3 norme CD {display: block; margin-bottom: 30pt; margin-left: 0;} ARTIST {color: #0000FF; font-size: 20pt;} CSS 3 implementation TITLE {color: #FF0000; font-size: 20pt;} CSS2 Références des propriétés CSS 3 -moz CSS 3 Tutoriaux ARTIST {color: #0000FF; font-size: 20pt;} 15/09/2020 Transparent 34 Lexique Sommaire XML & CSS multiples Cascading Style Sheets Syntaxe Réfs Techs <?xml version="1.0" encoding="ISO-8859-1"?> les Sélecteurs class vs #id <?xml-stylesheet title="Style de base" href="cd_catalog.css" type="text/css"?> Méthodologie le modèle de boites <?xml-stylesheet title="Planche" rel="alternate" href="cd_catalog_2.css" type="text/css"?> XML et CSS les Styles Multiples en XML <?xml-stylesheet title="Spirale" rel="alternate" href="cd_catalog_3.css" type="text/css"?> importation de styles W3C.org <CATALOG> ... / ... </CATALOG> CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 35 Lexique Sommaire . Réfs Langages & Documents Techs Chap V . CSS2 Références des propriétés . . Boites (Box) Textes Positionnement Tables Pseudo éléments Compléments . Paul Franchi SI 4 2014-15 . 15/09/2020 Transparent - 36 Lexique Sommaire CSS: Propriétés des Boîtes Cascading Style Sheets Syntaxe Boîtes: Dimensions & graphiques width max-width height max- height les Sélecteurs class vs #id le modèle depadding boites valeurs Techs min-width "largeur" % auto inherit min- height "hauteur" % auto "largeur" % margin margin-top margin-bottom margin-left Méthodologie Réfs margin-right padding-top padding-bottom "largeur" % padding-left padding-right XML et CSS "largeur" thin medium thick border-width les Styles Multiples en XML -top-width -bottom-width -left-width -right-width importation de styles W3C.org "couleur" transparent border-color -top-color -bottom-color -left-color -rightcolor CSS2 Références des propriétés CSS 3 norme none hidden CSS 3 implementation -top-style -bottom-style -left-style -right-style dotted dashed solid CSS 3 -moz border-style border CSS 3 Tutoriaux -top -bottom -left -right 15/09/2020 none hidden dotted dashed solid Transparent 37 Lexique Sommaire CSS: Propriétés des Textes Cascading Style Sheets Réfs valeurs Textes Syntaxe text-indent indentation % les Sélecteurs text-align left right center justify inherit chaine class vs #id text-decoration underline overline line-through blink none inherit le modèle de boites text-shadow couleur distance1 distance2 distance3 none inherit XML et CSS letter-spacing normal distance inherit Méthodologie les Styles Multiples en XML importation de styles W3C.org word-spacing normal distance inherit text-transform capitalize uppercase lowercase none inherit CSS2 Références des propriétés CSS 3 norme direction ltr rtl white-space normal pre nowrap inherit Techs CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 38 Lexique Sommaire CSS: Propriétés ("positionning") Cascading Style Sheets Techs Boîtes: Positions Syntaxe les Sélecteurs valeurs display block none inline list-item compact table table-row table-col table-cell … position static relative absolute fixed class vs #id Méthodologie le modèle de boites Réfs XML et CSS top les Styles Multiples en XML importation de styles W3C.org bottom 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 CSS2 Références des propriétés CSS 3 norme left CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 39 Lexique Sommaire CSS : positionnement/dimensionnement Réfs Cascading Style Sheets Syntaxe les Sélecteurs Box Model: margin, border, padding, content class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Techs 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 Le "container " d’un top, right, bottom, left // container élément en position position: fixed absolue est l’ancêtre top, right, bottom, left // window le plus proche qui est en position absolue, "stack order" relative ou fixe. z-index: :hover 15/09/2020 Transparent 40 CSS: Positionnement (1) Lexique Sommaire <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Réfs Cascading Style "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Techs Sheets <html xmlns="http://www.w3.org/1999/xhtml"> Syntaxe <head> <style type="text/css"> les Sélecteurs h2.static { position: static; left: 113;} class vs #id h2.decGauche { position: relative; left: -20px;} Méthodologie h2.courante { position: relative; left: 113;} le modèle de h2.centre { position: absolute; top: 50%; left:50%;} boites h2.fixe { position: fixed ; top: 100; left: 200;} XML et CSS </style></head> les Styles Multiples <body style="color:#FF0000"> en XML <h2 class="static"> Titre en position STATIC dans le "layout"</h2> importation de styles W3C.org <h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2> CSS2 Références <h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2> des propriétés <h2 class="centre"> Titre CENTRé par rapport au père </h2> CSS 3 norme <h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2> CSS 3 implementation </body></html> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 41 Lexique Sommaire CSS: Z-Index Réfs Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation Techs <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> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 42 Lexique Sommaire CSS: Z-Index avec "iframe" Cascading Style Sheets Réfs Techs Syntaxe les Sélecteurs <html> <body> Méthodologie <iframe style="width:75%; le modèle de boites height:300px; background-color: #FFFF99" XML et CSS les Styles Multiples name="view" en XML src="CSSzIndex.html"> importation de </iframe> styles W3C.org CSS2 Références </body> des propriétés </html> class vs #id CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 43 Lexique Sommaire CSS:float & clear Réfs Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux <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> 15/09/2020 Techs Transparent 44 CSS: modèle de page Web zones fixes, relatives & absolues Lexique Sommaire <body> Cascading Style <div id="HH"> Sheets <div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div> Syntaxe <div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div> les Sélecteurs <div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div> class vs #id </div> <!-- fin HH --> Méthodologie <div id="VG"> <p> "fixed" V G </p> <div id="RUBRIQUE"> ..... </div> le modèle de boites <div id="RUBRIQUE"> ..... </div> XML et CSS </div> <!-- fin VG --> les Styles Multiples <div id="GRDTITRE"><p> Grand Titre </p></div> en XML <div id="PRINCIPAL"> importation de styles W3C.org <p> CADRE PRINCIPAL "absolute" </p> CSS2 Références <div id="SECTION"> des propriétés <p> SECTION 1 "relative" </p> CSS 3 norme </div> <!-- fin SECTION --> CSS 3 implementation </div> <!-- fin PRINCIPAL --> CSS 3 -moz </body> CSS 3 Tutoriaux 15/09/2020 Réfs Techs Transparent 45 CSS: unités, pseudo-éléments opacité Lexique Sommaire Réfs CATALOG {display: block; background-color: #cccccc; width: 100%; } Cascading Style Techs CATALOG:before { Sheets content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; } Syntaxe CD { les Sélecteurs display: inline-block; background-image: url(../IMAGES/cd.gif); class vs #id margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt; Méthodologie border: cyan 5px ridge; -moz-border-radius: 50%; } le modèle de CD:hover { boites background-image: url(../IMAGES/cd.png); background-position: 0px 4px; XML et CSS height: 248px; width: 246px; font-size: 11pt; } les Styles Multiples en XML CD>ARTIST, CD>TITLE { importation de display:block ; margin-top: 1em; margin-left: auto; margin-right: auto; styles W3C.org padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; } CSS2 Références des propriétés CD>TITLE { CSS 3 norme width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px; color: #00FFFF;font-style:italic; text-align:center ; CSS 3 implementation filter:alpha(opacity=80); opacity:0.8; } CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 46 Lexique Sommaire CSS: Propriétés des Tables Cascading Style Sheets Syntaxe les Sélecteurs Techs 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 bordercollapse collapse separate inherit borderspacing dist-horiz dist-vertic inherit empty-cells show hide inherit Méthodologie le modèle de boites les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation valeurs Tables class vs #id XML et CSS Réfs CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 47 Lexique Sommaire CSS: des Tables sans la balise <table> (v1) Réfs Cascading Style Sheets Techs <html> <head> <style type="text/css"> .grdMere{display: table;} les Sélecteurs .mere{display: table-row;} class vs #id .fille{display: table-cell;} Méthodologie </style></head> le modèle de <body> boites <div class="grdMere"> XML et CSS <div class="mere"> les Styles Multiples en XML <p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p> importation de </div> styles W3C.org <div class="mere"> CSS2 Références des propriétés <p class="fille"> F21</p> <p class="fille"> F22</p> </div> CSS 3 norme </div> CSS 3 implementation </body></html> Syntaxe CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 48 Lexique Sommaire CSS: des Tables sans la balise <table> (v2) Cascading Style Sheets Réfs Techs <html> <head> <style type="text/css"> .grdMere{display: table;} les Sélecteurs .grdMere>div{display: table-row;} class vs #id .grdMere>div>p{display: table-cell;} Méthodologie </style></head> le modèle de <body> boites <div class="grdMere"> XML et CSS <div> les Styles Multiples <p> F11</p> <p > F12</p><p> F13</p> en XML </div> importation de styles W3C.org <div> CSS2 Références <p > F21</p> <p > F22</p> des propriétés </div> CSS 3 norme </div> CSS 3 implementation </body></html> Syntaxe CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 49 Exemple: Bibliographie Lexique Sommaire Réfs Cascading Style Sheets Syntaxe placement sans <table> avec display: ou float: <html> Techs <head> body > h1 { text-align: center; } les Sélecteurs <link rel="stylesheet" href="bib.css" type="text/css" /> class vs #id Livre { </head> display: inline-block; Méthodologie <body> width: 22%; <h1> le modèle de Bibliographie &quot;Documents&quot; background-color: #99FFFF; boites </h1> border: #0000FF medium ridge; XML et CSS <div class="Livre" > Comprendre XSLT margin: 10px ; } <img src="../../BIBLIO/HTML2841771571.jpg" les Styles Multiples width="54" height="90"> en XML Livre ul { <ul> <em> Auteurs:</em> importation de <li> <a href="">Bernard Amann</a></li> padding-left: 0px; styles W3C.org <li> <a href="">Philippe Rigaux</a></li> text-align: center; } CSS2 Références</ul> des propriétés <span>2002</span> Livre li { list-style: none; } <span>Ed: O'REILLY</span> CSS 3 norme </div> CSS 3 implementation </body> img { float: right ; } </html> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 50 CSS: divers compléments Lexique Sommaire Réfs Cascading Style Sheets contenu Techs {content:"string" attr(A) url(" ") counter(C);} Syntaxe les Sélecteurs class vs #id Méthodologie Exercice[ref]:before {content: "Exercice - " attr(ref);} le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux pseudo-élements :before :after textes :first-line :first-letter white-space Paragraph:first-line {font-style:"italic";} Paragraph:first-letter {font-size:+200%;} SourceLP {white-space:pre;} compteurs Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;} 15/09/2020 Transparent 51 CSS: divers compléments Lexique Sommaire Réfs Cascading Style Sheets opacité (chacun sa version !) zone Syntaxe class vs #id Méthodologie } le modèle de boites les Styles Multiples en XML CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 Tutoriaux media @media print { #footer , #menu {display: none;} #container { width: 92%; opacity:1.0; /* obligatoire pour imprimer */ } } importation de styles W3C.org CSS 3 -moz { filter: alpha(opacity=100); filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1; les Sélecteurs XML et CSS Techs pagination Chapitre { page-break-after: always; } Exemple { page-break-inside: avoid ;} 15/09/2020 Transparent 52 Lexique Sommaire CSS : importation de styles W3C.org Cascading Style Sheets Réfs Techs <link rel="alternate stylesheet" title="Ultramarine" href="http://www.w3.org/StyleSheets/Core/Ultramarine"> Syntaxe <link rel="alternate stylesheet" title="Chocolate" les Sélecteurs href="http://www.w3.org/StyleSheets/Core/Chocolate"> <link rel="alternate stylesheet" title="Midnight" class vs #id href="http://www.w3.org/StyleSheets/Core/Midnight"> Méthodologie <link rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle"> le modèle de boites <link rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist"> XML et CSS <link rel="alternate stylesheet" title="Swiss" les Styles Multiples href="http://www.w3.org/StyleSheets/Core/Swiss"> en XML <link rel="alternate stylesheet" title="Traditional" importation de href="http://www.w3.org/StyleSheets/Core/Traditional"> styles W3C.org <link rel="alternate stylesheet" title="Steely" CSS2 Références href="http://www.w3.org/StyleSheets/Core/Steely"> des propriétés <link rel="alternate stylesheet" title="Forest (by David Baron)" CSS 3 norme href="http://dbaron.org/style/forest"> <link rel="stylesheet" title="Plain (by David Baron)" CSS 3 implementation href="http://dbaron.org/style/plain"> CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 53 Lexique Sommaire Réfs CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7 Cascading Style Sheets transitional < !DOCTYPE html PUBLIC strict Syntaxe les Sélecteurs class vs #id "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > Méthodologie XML et CSS les Styles Multiples en XML margin: 9px !important; non supportés /margin: 7px; :hover display: table CSS2 Références des propriétés CSS 3 norme bugs récurrents margin, padding div float border background etc… le modèle de boites importation de styles W3C.org Techs doctype en 1ère ligne -margin: 5px; /* FF only */ /* IE7 only */ /* IE6 only */ hacks CSS CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 54 Lexique Sommaire HTML - Commentaires Conditionnels IE Réfs Cascading Style Sheets Syntaxe Techs 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 les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 55 Lexique Sommaire Ilot XML dans HTML Cascading Style Sheets Réfs Techs Syntaxe les Sélecteurs class vs #id <html> <body> <xml id="MonIlotXML" src="data.xml"></xml> Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés <table border="1" datasrc="#MonIlotXML"> <tr> <td><span datafld="NOM"></span></td> <td><span datafld="PRENOM"></span></td> </tr> </table> </body> </html> CSS 3 implementation CSS 3 norme CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 56 Lexique Sommaire . Réfs Langages & Documents Techs Chap V . CSS 3 . . Support des Navigateurs . Survol, extensions Mozila @keyframes, animations Paul Franchi SI 4 2014-15 Media Queries Boites flexibles Mozilla . 15/09/2020 Transparent - 57 Lexique Sommaire CSS : Overview & Web support (2011) Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés Réfs Techs 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 CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 58 Lexique Sommaire CSS 3: normalisation en cours (modules) Cascading Style Sheets Syntaxe CSS Level 2 CSS Level 1 Selectors CSS Color les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Completed work High Priority CSS Level 2 Revision 1 CSS Namespaces CSS Backgrounds CSS Borders CSS Multicolumn Layout Media Queries Réfs Techs Medium Priority Medium Priority CSS Fonts CSS Snapshot 2007 CSS Basic Box Model CSS Template Layout CSS Snapshot 2010 CSS Speech CSS Mobile CSS Basic User Profile 2.0 Interface CSS Marquee CSS Scoping CSS Paged Media CSS Grid Positioning CSS Print Profile CSS Grid Layout CSS Values and CSS Regions Units CSS Flexible Box CSS Cascading Layout and Inheritance CSS Image Values CSS Text CSS 2D CSS Writing Modes Transformations CSS Line Grid CSS 3D CSS Ruby Transformations CSS Generated CSS Transitions Content for Paged CSS Animations Media 15/09/2020 Transparent 59 Lexique Sommaire CSS 3: propriétés en fonction Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie Réfs Techs .border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; } bordures: arrondies, dégradées, ombrées .border_shadow { -webkit-box-shadow: 10px 10px 5px #888; } le modèle de boites XML et CSS les Styles Multiples en XML effets de texte: ombre, fontes, etc. importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation .text_shadow { color: #897048; background-color: #fff; text-shadow: 2px 2px 2px #ddccb5; } (re) dimensionnement: CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 .ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto; } Transparent 60 Lexique Sommaire CSS 3: propriétés en fonction Cascading Style Sheets Syntaxe les Sélecteurs backgrounds: size, position, multiples multi-colonnes: span, gap, rule class vs #id Méthodologie .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; } Réfs Techs le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation .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; } CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 61 Lexique Sommaire CSS 3: normalisation en cours Cascading Style Sheets Syntaxe transform: rotate, translate, skew, scale transition: les Sélecteurs class vs #id Méthodologie le modèle de boites Réfs .top { Techs -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); } XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation 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; } CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 62 Lexique Sommaire CSS 3: normalisation en cours Cascading Style Sheets Syntaxe les Sélecteurs @keyframes animation class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML delay direction duration iteration-count name play-state timing-function fill-mode h1 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%;} } @-webkit-keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%;} } Réfs Techs importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux resize box-sizing border content padding- /* support Firefox, WebKit, Opera and IE8+ */ .example { resize: both; -moz-box-sizing: border-box; box-sizing: border-box; } 15/09/2020 Transparent 63 Lexique Sommaire CSS 3: Media Queries Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Réfs «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.» Techs Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux @media @media print { #menu, #footer, aside { display:none; } body { font-size:120%; color:black; } } print screen projection tv braille aural all logical and not only @media screen and (max-width: 640px) { .bloc { display:block; clear:both; } } media features min- maxwidth height color aspect-ratio resolution 15/09/2020 Transparent 64 Lexique Sommaire CSS 3: Boites flexibles (Mozilla/XUL) Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Réfs « 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 . » display: flex | inline-flex flex-flow: <‘flex-direction’> || <‘flex-wrap’> flex-directionflex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap | wrap | wrap-reverse order: integer justify-content: flex-start | flex-end | center | spacebetween | space-around align-items: flex-start | flex-end | center | baseline | stretch align-content: flex-start | flex-end | center | spacebetween 15/09/2020 Techs #main { min-height: 800px; display: -webkit-flex; display: flex; -webkit-flex-flow: row; flex-flow: row; } #main > article {; -webkit-flex: 3 1 60%; flex: 3 1 60%; -webkit-order: 2; order: 2; } Transparent 65 Lexique Sommaire CSS 3: Boites flexibles ("Holly Grail") Cascading Style Sheets Réfs Techs Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org @media all and (max-width: 640px) { #main, #page { -webkit-flex-flow: column; flex-flow: column; flex-direction: column; } CSS 3 norme #main > article, #main > nav, #main > aside { /* Return document order */ CSS 3 implementation -webkit-order: 0; order: 0; } } CSS 3 -moz CSS2 Références des propriétés CSS 3 Tutoriaux 15/09/2020 Transparent 66 Lexique Sommaire CSS 3: Mozilla Extensions Cascading Style -moz-background-clip Sheets -moz-background-inlinepolicy Syntaxe -moz-binding -moz-border-bottom-colors les Sélecteurs -moz-border-left-colors class vs #id-moz-border-start-width -moz-box-align Méthodologie -moz-box-direction -moz-box-flex le modèle de -moz-box-flexgroup boites -moz-box-ordinal-group XML et CSS-moz-box-orient -moz-box-pack les Styles Multiples -moz-box-sizing en XML -moz-column-count importation de -moz-column-gap styles W3C.org -moz-column-width -moz-column-rule Gecko CSS2 Références des propriétés 1.9.1 -moz-column-rule-width CSS 3 norme Gecko 1.9.1 -moz-column-rule-style CSS 3 implementation Gecko 1.9.1 -moz-column-rule-color Gecko 1.9.1 CSS 3 -moz -moz-float-edge CSS 3 Tutoriaux -moz-force-broken-image-icon -moz-font-feature-settings Gecko 2.0 -moz-font-language-override Gecko 2.0 -moz-force-broken-image-icon -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 15/09/2020 Réfs Techs -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-timingfunction 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-browsertabbartoolbox New in Firefox 3 -moz-win-communicationstoolbox New in Firefox 3 -moz-win-media-toolbox New in Firefox 3 -moz-mac-unified-toolbar New in Firefox 3.5 67 etcTransparent … CSS 3: spécial Mozilla Lexique Sommaire Réfs Cascading Style Sheets Syntaxe opacité & coins arrondis les Sélecteurs class vs #id Méthodologie Techs .joliBouton { background-image: url(sourire.png); border:#0000FF thick ridge ; -moz-border-radius: 25px ; -moz-opacity : 0.85 ; } le modèle de boites XML et CSS .col_3 multi-colonnes les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux { -moz-column-count: 3; -moz-column-gap: 10%; -moz-column-width: 25%; } bordures multiples Bouton:hover { -moz-border-bottom-colors: #FF0000 #00FF00 #0000FF ; -moz-border-right-colors: #FF0000 #00FF00 #0000FF ; } 15/09/2020 Transparent 68 Lexique Sommaire CSS 3: spécial Mozilla Cascading Style Sheets Réfs Techs :not() :root :target Syntaxe #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; } les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme backgrounds .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); } CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 69 Lexique Sommaire CSS 3: Tutoriaux du Web Cascading Style Sheets Techs CSS3 please! class vs #id Méthodologie Animations avec CSS transform Transition Timing Function Syntaxe Réfs les Sélecteurs le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org Sliding content 3D Flipping Accordions (widgets) CSS2 Références des propriétés CSS 3 norme CSS 3 implementation 50 animations with CSS3 ( and Jquery ) CSS3 Animation Browser supports CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 70 Lexique Sommaire Sur CSS Cascading Style Sheets Réfs Techs LESS permet la réutilisation de régles CSS avec Syntaxe les Sélecteurs des variables des mixins des psudo_classes par héritage class vs #id Méthodologie le modèle de boites XML et CSS comme pre processeur avec les Styles Multiples en XML lessc styles.less > styles.css importation de styles W3C.org dans le navigateur avec <script src="less.js" type="text/javascript"> </script> CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux SASS 15/09/2020 Transparent 71 CSS : Méthodologie Lexique Sommaire Réfs Cascading Style Sheets Syntaxe les Sélecteurs class vs #id "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 Méthodologie /* nettoyer le terrain*/ le modèle de * { boites margin: 0; padding: 0; XML et CSS border: 0; les Styles Multiples } en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Techs <!--[if lte IE 6]> <link rel="stylesheet" href="/css/ie6_and_below.css" type="text/css" media="screen" /> <![endif]--> #left-content { float: left; margin-left: 10px; } 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" 15/09/2020 #left-content { float: left; } #left-content * { margin-left: 10px; } Transparent 72 Lexique Sommaire CSS : savoir-faire (sans script) Cascading Style Sheets Syntaxe les Sélecteurs Méthodologie importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation Zones dédiées Barres de Navigation "Sticker" ou "PostIt" XML et CSS les Styles Multiples en XML Techs 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. class vs #id le modèle de boites Réfs 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 CSS 3 -moz CSS 3 Tutoriaux 15/09/2020 Transparent 73 Lexique Sommaire « Responsible » Web development Cascading Style Sheets Syntaxe XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 -moz CSS 3 Tutoriaux LESS extends CSS with dynamic behavior. selectivizr.js CSS adaptation for IE CSS 3 norme CSS 3 implementation normalize.css CSS resets for modern standards (HTML5) Méthodologie le modèle de boites Techs jquery.js modernizr.js detects browser features les Sélecteurs class vs #id Réfs Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js Joomla, Wordpress Jquery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Foundation "The most advanced responsive front-end framework in the world." 15/09/2020 Transparent 74 Lexique Sommaire « Responsible » Fluid Design Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to mobile phones). Réfs Techs Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones. Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile. Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device. . 15/09/2020 Transparent 75 Lexique Sommaire CSS : Une galerie Photo sous DW Cascading Style Sheets Syntaxe les Sélecteurs class vs #id Méthodologie le modèle de boites XML et CSS les Styles Multiples en XML importation de styles W3C.org CSS2 Références des propriétés CSS 3 norme 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 XSL Effets CSS version XML+XSL Réfs Techs CSS CSS CSS CSS 3 implementation CSS 3 -moz CSS 3 Tutoriaux version "Doc Exemples" 15/09/2020 Transparent 76