La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Lexique Langages & Documents Réfs Techs Sommaire...... Paul Franchi SI 4 2013-14 13/01/2014 Transparent - 1 Chap V - CSS "Cascading Style Sheets" CSS 2:

Présentations similaires


Présentation au sujet: "Lexique Langages & Documents Réfs Techs Sommaire...... Paul Franchi SI 4 2013-14 13/01/2014 Transparent - 1 Chap V - CSS "Cascading Style Sheets" CSS 2:"— Transcription de la présentation:

1 Lexique Langages & Documents Réfs Techs Sommaire Paul Franchi SI /01/2014 Transparent - 1 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 animations CSS 3: Media Queries CSS 3: Boites flexibles Mozilla CSS 2: Règles, Sélecteurs, Propriétes CSS: Méthodologie CSS 2: Références CSS 3: Survol, extensions Mozila CSS animations CSS 3: Media Queries CSS 3: Boites flexibles Mozilla Mai CSS3 resize box sizing keyframes, animation media queries Positionnement Boites flexbles

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

3 SommaireLexique Réfs Techs Transparent 3 13/01/2014 n Web EPU courses (in French) Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks n Biblio: many issues at EPU's lib Some Références

4 SommaireLexique Réfs Techs Transparent 4 13/01/2014 Documentation et Manuels n Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) liste des extensions de fichiers (formats) Expressions Rationnelles n Manuels. Expressions régulières sous Emacs Expressions régulières sous Emacs Recherche et remplacement sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix n Tutoriaux du Web W3C : CSS Play : Zen Garden : CSS in10 steps : training/css/positioning/ training/css/positioning/ 10 steps to better CSS: r_css/ r_css/

5 SommaireLexique Réfs Techs Transparent 5 13/01/2014 Références Web

6 SommaireLexique Réfs Techs Transparent 6 13/01/2014 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 Lexique

7 Langages & Documents Réfs Techs Sommaire Paul Franchi SI /01/2014 Transparent - 7 Chap V - CSS "Cascading Style Sheets" CSS 2: Règles, Sélecteurs, Propriétes La balise en HTML Feuilles de style séparées en HTML Feuilles de style en XML

8 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 8 13/01/2014 CSS: les feuilles de style

9 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 9 13/01/2014 CSS: Cascading Style Sheets n Un langage pour définir les styles de balises HTML ou XML des éléments dune DTD n CSS -1 (1996) n CSS -2 (1998) n CSS 3: ( >1999, en cours: ) CSS 3 n Principes Règles de style associées à la structure des documents Feuilles multiples Types de média Attachements alternatifs aux documents

10 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 10 13/01/2014 CSS: Tutoriaux, Versions et Navigateurs n CSS -1 (1996) supporté par Netscape et IE version 4. n CSS -2 (1998) supporté par FF1.5 (complet) et IE 6 (partiel) n CSS -3 (>1999, )http://www.css3.info/ Opera, Safari, FF 3.0 (partiel) et IE 9 ? n CSS sur le Web n W3Schools - CSS Tutorial W3Schools - CSS Tutorial n n n 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

11 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 11 13/01/2014 CSS: les feuilles de style en cascade n Feuille CSS Collection de Règles n Une règle CSS Sélecteur (balise HTML XML,, élément de DTD) propriétés (paramètres de style) n Conception CSS Modularité Importation Héritage Masquage Cascade Résolution des "surcharge" par la règle la plus spécifique

12 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire n Les Règles ( ( ascendance >? ) * element ( [ attr ( = val )? ] ) * { ( prop : val ; ) * } ) * n Exemples HTML & XML Transparent 12 13/01/2014 CSS: Syntaxe (1) /* 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 ;}

13 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire n Groupes de Règles selecteur (, selecteur )* { ( prop : val ; ) * } Les Commentaires : /* blabla */ n Exemples HTML & XML Transparent 13 13/01/2014 CSS: Syntaxe (2) /* CSS pour Xml */ livre>titre, chapitre>titre { font-size: 24pt ; font-color: blue; } /* CSS pour Html */ h1, h2, h3 { text-align: center ; color: red; } /* CSS pour Html */ p+h3 { text-align: left ; }

14 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire n 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 n Opérateurs, Séparateurs, Commentaires, etc. Transparent 14 13/01/2014 CSS: Norme lexicale

15 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire n At Rule: ….. ; { prop: "val";... ; } { selecteur {prop: "val";} } n Rule: Sélecteur, Bloc sélecteur (, sélecteur )* { ( propriété : valeur ; ) * } n Sélecteur n universel: * n type: tagName n class (.) et id(#) n attribute matching: [ ] = ~= |= n Propriété, Valeur n identificateur n entier et réel n mesures et pourcentages Transparent 15 13/01/2014 CSS: Norme syntaxique n URL et URI n strings n couleurs n compteurs n child (>) n descendant (' ') n sibling (+) n pseudo (:) n precedence (~)

16 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire n 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" n Id idem, mais sélectionné par la valeur de l'attribut "id" (unique) Transparent 16 13/01/2014 CSS: Sélecteurs Class & Id en HTML /* 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; } en 20pt centré en rouge titre au centre et en rouge à gauche

17 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 17 13/01/2014 CSS: les Sélecteurs El Tous les Parent El les descendant dun Parent > El les fils dun El + Ef les précédés immédiatement dun El ~ Ef les précédés dun El[att] Tous les El[att = val] les El[att~=val] les El[att |= val] les El#nom les où xxx est un attribut de type ID El:link les de type link non encore visités El:visited :hover :active Idem dèja visités, etc. E1:lang (fr) les :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

18 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 18 13/01/2014 CSS en HTML:.class vs #id n Un attribut "class" permet de définir une classe de style qui peut peut être partagée par plusieurs éléments (balises) du document n L'attribut "id" définit une dénomination unique pour un élément (balise) du document.center { } #navBar { } à centrer

19 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 19 13/01/2014 n Mis en Page ("Box") n Polices de caractère font-family -style -weight -size n Textes text-align -indent -decoration word-spacing n Couleurs et Fonds color background n Listes List-style-position -image n Tableaux n Médias leftleft rightright top bottom margin content padding border CSS: les Propriétés

20 Lexique Langages & Documents Réfs Techs Sommaire Paul Franchi SI /01/2014 Transparent - 20 Chap V - CSS Méthodologie Style inline Style interne ( ) Style externe (séparé) Styles alternatifs Styles multiples Importation de styles Style inline Style interne ( ) Style externe (séparé) Styles alternatifs Styles multiples Importation de styles

21 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 21 13/01/2014 Evolution 0: les attributs de style Html texte centré en arial (par héritage) en rouge (par masquage) HTML, comme il ne faut plus l'écrire ! car pas évolutif !

22 Lexique Réfs Techs Cascading Style Sheets Cascading Style Sheets Syntaxe Syntaxe les Sélecteurs le modèle de boites le modèle de boites XML et CSS CSS2 Références des propriétés CSS2 Références des propriétés CSS 3 norme les Styles Multiples en XML les Styles Multiples en XML importation de styles W3C.org importation de styles W3C.org CSS 3 implementation CSS 3 Tutoriaux class vs #id Méthodologie CSS 3 -moz Sommaire Transparent 22 13/01/2014 Evolution 1: les attributs de style Html

Grand Titre 1
sous titre 1 HTML, peu évolutif !