Upload
rodolphe-ferre
View
105
Download
1
Embed Size (px)
Citation preview
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 1
Chap V -
CSS "Cascading Style Sheets"
Chap V -
CSS "Cascading Style Sheets"
CSS 2: Règles, Sélecteurs, Propriétes
CSS: MéthodologieCSS 2: Références
CSS 3: Survol, extensions Mozila
CSS 3: @keyframes, animations
CSS 3: Media Queries
CSS 3: Boites flexibles Mozilla
CSS 2: Règles, Sélecteurs, Propriétes
CSS: MéthodologieCSS 2: Références
CSS 3: Survol, extensions Mozila
CSS 3: @keyframes, animations
CSS 3: Media Queries
CSS 3: Boites flexibles Mozilla
Mai 2013.•CSS3 resize box sizing•keyframes, animation•media queries•Positionnement•Boites flexbles
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 211/04/23
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
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 311/04/23
Web EPU courses (in French)
Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html
Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents
http:www.polytech.unice;fr/~pfz/document.html
W3C tutorial : http://www.w3schools.com/
Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page
W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/
Biblio: many issues at EPU's lib
Some Références
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 411/04/23
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 Em
acs
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/
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 511/04/23
Références Web
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 611/04/23
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
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 7
Chap V -
CSS "Cascading Style Sheets"
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
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 811/04/23
CSS: les feuilles de style
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 911/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 1011/04/23
CSS: Tutoriaux, Versions et Navigateurs
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 1111/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Les Règles
( ( ascendance >? ) * element ( [ attr ( = val )? ] ) * {
( prop : val ; ) *
} ) * Exemples HTML & XML
Transparent 1211/04/23
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 ;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Groupes de Règles
selecteur (, selecteur )* {
( prop : val ; ) * }
Les Commentaires : /* blabla */
Exemples HTML & XML
Transparent 1311/04/23
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 ;
}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
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.
Transparent 1411/04/23
CSS: Norme lexicale
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
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
Transparent 1511/04/23
CSS: Norme syntaxique
URL et URI strings couleurs compteurs
child (>) descendant (' ') sibling (+) pseudo (:) precedence (~)
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
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)
Transparent 1611/04/23
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; }
<!-- 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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 1711/04/23
CSS: les SélecteursEl 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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 1811/04/23
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
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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 1911/04/23
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
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
contentpadding
border
CSS: les Propriétés
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 20
Chap V -
CSS Méthodologie
Chap V -
CSS Méthodologie
Style inline
Style interne (<style>)
Style externe (séparé)
Styles alternatifs
Styles multiples
Importation de styles
Style inline
Style interne (<style>)
Style externe (séparé)
Styles alternatifs
Styles multiples
Importation de styles
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2111/04/23
Evolution 0: les attributs de style Html
<html>
<body color: black ; font-family: arial >
<p text-align: center; color: red; >
texte centré en arial (par héritage) en rouge (par masquage)
</p>
</body>
</html>
HTML, comme il ne faut plus l'écrire !car pas évolutif !
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2211/04/23
Evolution 1: les attributs de style Html
<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> HTML, peu évolutif !
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2311/04/23
Evolution 2 : la balise <style> en Html
<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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2411/04/23
Evolution 2: les attributs de style Html
<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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2511/04/23
Les attributs de style Liens en Html
<!-- http://www.w3schools.com/css/css_pseudo_classes.asp -->
<html> <head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style></head> <body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited
in the CSS definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover
in the CSS definition in order to be effective!!</p>
</body></html>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 2611/04/23
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
Le(s) lien(s) vers le style CSS dans HTML..\XML_CSS\leftnav.html
..\XML_CSS\rightnav.htm
ici 2 styles alternatifs
<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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
2 feuilles de style CCS (alternatives)
..\XML_CSS\rightNav.css..\XML_CSS\leftNav.css
2 feuilles de style CCS (alternatives)
..\XML_CSS\rightNav.css..\XML_CSS\leftNav.css
Transparent 2711/04/23
Evolution 3: les feuilles de style séparées
#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;
}
#navBar {float: right; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
}
#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;
}
#navBar {float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
}
•css•css
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Le style CSS dans XML cd_catalog.xml
la feuille de style CCS cd_catalog.css
Le style CSS dans XML cd_catalog.xml
la feuille de style CCS cd_catalog.css
Transparent 2811/04/23
XML et CSS
<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="cd_catalog.css"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD>
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;}
•css
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Le style "Table" CSS dans XML Le style "Table" CSS dans XML
Transparent 2911/04/23
XML et CSS
<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="tableCatalog.css"?><CATALOG>
<Titre> Mon Tableau de CDs </Titre> <CD> … </CD></CATALOG>
CATALOG {display: table; width: 80%;margin-left: 30px; border: 2px solid; padding: 20px 30px 30px 20px;}CD {display: table-cell; background-color: #00FFFF; border: 2px solid; padding: 20px 30px 30px 20px;}Titre {display: table-caption; font-size:36px; text-align:center;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3011/04/23
CSS: les Styles Multiples en HTML Résolution des styles multiples Résolution des styles multiples
<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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3111/04/23
CSS: les Styles Multiples en XML Styles multiples (cascading) Styles multiples (cascading)
<?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>
styles prédéfinis par xmlns: html, xhtml, etc.
CSS par xml-stylesheet (ordonnées)
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3211/04/23
Les feuilles de style alternatives
ici 2 styles au choix dans le Navigateur (FF>Affichage>Style de la page>)
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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3311/04/23
XML et CSS Le style CSS dans XML cd_catalog.xml
la feuille de style CCS cd_catalog.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>
Transparent 33
•xml
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;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3411/04/23
XML & CSS multiples
<?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>
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 35
Chap V -
CSS2 Références des propriétés
Chap V -
CSS2 Références des propriétés
Boites (Box)TextesPositionnementTablesPseudo élémentsCompléments
Boites (Box)TextesPositionnementTablesPseudo élémentsCompléments
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3611/04/23
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
"largeur" %
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 none hidden
dotted dashed solid
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3711/04/23
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 normal distance inherit
text-transform capitalize uppercase lowercase none inherit
direction ltr rtl
white-space normal pre nowrap inherit
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3811/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 3911/04/23
CSS : positionnement/dimensionnement
Box Model: margin, border, padding, contentwidth, height, box-sizing: content vs bordervertical-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 normalfloat: & clear:position: absolute
top, right, bottom, left // containerposition: 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.
Le "container " d’un élément en position absolue est l’ancêtre le plus proche qui est en position absolue, relative ou fixe.
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4011/04/23
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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
<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>
Transparent 4111/04/23
CSS: Z-Index
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4211/04/23
CSS: Z-Index avec "iframe"
<html>
<body>
<iframe style="width:75%;
height:300px;
background-color: #FFFF99"
name="view"
src="CSSzIndex.html">
</iframe>
</body>
</html>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4311/04/23
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>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
<body>
<div id="HH">
<div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div>
<div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div>
<div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div>
</div> <!-- fin HH -->
<div id="VG"> <p> "fixed" V G </p>
<div id="RUBRIQUE"> ..... </div>
<div id="RUBRIQUE"> ..... </div>
</div> <!-- fin VG -->
<div id="GRDTITRE"><p> Grand Titre </p></div>
<div id="PRINCIPAL">
<p> CADRE PRINCIPAL "absolute" </p>
<div id="SECTION">
<p> SECTION 1 "relative" </p>
</div> <!-- fin SECTION -->
</div> <!-- fin PRINCIPAL -->
</body>
Transparent 4411/04/23
CSS: modèle de page Web zones fixes, relatives & absolues
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4511/04/23
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; }
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4611/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4711/04/23
CSS: des Tables sans la balise <table> (v1)
<html> <head> <style type="text/css">
.grdMere{display: table;}
.mere{display: table-row;}
.fille{display: table-cell;}
</style></head>
<body>
<div class="grdMere">
<div class="mere">
<p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p>
</div>
<div class="mere">
<p class="fille"> F21</p> <p class="fille"> F22</p>
</div>
</div>
</body></html>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4811/04/23
CSS: des Tables sans la balise <table> (v2)
<html> <head> <style type="text/css">
.grdMere{display: table;}
.grdMere>div{display: table-row;}
.grdMere>div>p{display: table-cell;}
</style></head>
<body>
<div class="grdMere">
<div>
<p> F11</p> <p > F12</p><p> F13</p>
</div>
<div>
<p > F21</p> <p > F22</p>
</div>
</div>
</body></html>
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 4911/04/23
Exemple: Bibliographie
placement sans <table> avec display: ou float: 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 ; }
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5011/04/23
CSS: divers compléments
contenu
pseudo-élements :before :after
textes :first-line :first-letter white-space
compteurs
contenu
pseudo-élements :before :after
textes :first-line :first-letter white-space
compteurs
Exercice[ref]:before {content: "Exercice - " attr(ref);}
Paragraph:first-line {font-style:"italic";}Paragraph:first-letter {font-size:+200%;}SourceLP {white-space:pre;}
{content:"string" attr(A) url(" ") counter(C);}
Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5111/04/23
CSS: divers compléments
opacité (chacun sa version !)
media
pagination
opacité (chacun sa version !)
media
pagination
@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 ;}
zone {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5211/04/23
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">
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5311/04/23
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 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 */
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5411/04/23
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
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5511/04/23
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>
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 56
Chap V -
CSS 3
Chap V -
CSS 3
Support des Navigateurs
Survol, extensions Mozila
@keyframes, animations
Media Queries
Boites flexibles Mozilla
Support des Navigateurs
Survol, extensions Mozila
@keyframes, animations
Media Queries
Boites flexibles Mozilla
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5711/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5811/04/23
CSS 3: normalisation en cours (modules)
Completed work CSS Level 2 CSS Level 1 Selectors CSS Color
High Priority CSS Level 2 Re
vision 1
CSS Namespaces
CSS Backgrounds
CSS Borders CSS Multi-colu
mn Layout
Media Queries
Medium Priority CSS Snapshot 200
7 CSS Snapshot 201
0 CSS Mobile Profile
2.0
CSS Marquee CSS Paged Media CSS Print Profile CSS Values and U
nits
CSS Cascading and Inheritance
CSS Text CSS Writing Modes CSS Line Grid CSS Ruby CSS Generated Co
ntent for Paged Media
Medium Priority CSS Fonts CSS Basic Box Model CSS Template Layout CSS Speech CSS Basic User Interfac
e
CSS Scoping CSS Grid Positioning CSS Grid Layout CSS Regions CSS Flexible Box Layou
t
CSS Image Values CSS 2D Transformation
s
CSS 3D Transformations
CSS Transitions CSS Animations
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 5911/04/23
CSS 3: propriétés en fonction
bordures: arrondies, dégradées, ombrées
effets de texte: ombre, fontes, etc.
(re) dimensionnement:
.text_shadow { color: #897048; background-color: #fff; text-shadow: 2px 2px 2px #ddccb5;}
.border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048;}
.ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto;}
.border_shadow { -webkit-box-shadow: 10px 10px 5px #888;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6011/04/23
CSS 3: propriétés en fonction
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;}
.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;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6111/04/23
CSS 3: normalisation en cours
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;}
.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);}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6211/04/23
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 { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%;}}
/* support Firefox, WebKit, Opera and IE8+ */.example {
resize: both; -moz-box-sizing: border-box; box-sizing: border-box;}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6311/04/23
CSS 3: Media Queries
@media print screen projection tv braille aural all
@media print { #menu, #footer, aside { display:none; } body { font-size:120%; color:black; } }
«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.»
«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 screen and (max-width: 640px) { .bloc { display:block; clear:both; } }
logical and not only
media features
min- max-
width height color aspect-ratio resolution
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6411/04/23
CSS 3: Boites flexibles (Mozilla/XUL)
display:box box-orient box-direction box-ordinal-group box-flex box-pack box-align
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; }
« 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 . »
« 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 . »
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6511/04/23
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-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
-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 …
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6611/04/23
CSS 3: spécial Mozilla
opacité & coins arrondis
multi-colonnes
bordures multiples
.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 ;}
.joliBouton {background-image: url(sourire.png);border:#0000FF thick ridge ;-moz-border-radius: 25px ;-moz-opacity : 0.85 ;
}
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6711/04/23
CSS 3: spécial Mozilla
:not() :root :target
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); }
#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; }
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6811/04/23
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 6911/04/23
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"
"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"
/* nettoyer le terrain*/* { margin: 0; padding: 0; border: 0; }
<!--[if lte IE 6]><link rel="stylesheet" href="/css/ie6_and_below.css"
type="text/css" media="screen" /><![endif]-->
#left-content { float: left; }
#left-content * { margin-left: 10px; }
#left-content { float: left; margin-left: 10px; }
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 7011/04/23
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
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
LexiqueLexique
RéfsRéfs
TechsTechsCascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de boite
sXML et CSS
CSS2 Références des propriétés
CSS 3 norme
les Styles Multiples en XML
importation de styles W3C.org
CSS 3 implementation
CSS 3 Tutoriaux
class vs #id
Méthodologie
CSS 3 -moz
SommaireSommaire
Transparent 7111/04/23
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"
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"
CSSCSSCSS
XSL