chap v - css "cascading style sheets"
DESCRIPTION
Mai 2013 / Mars 2014 CSS3 resize box sizing keyframes, animation media queries Positionnement Flex Box & Holly Grail & unités. Chap V - CSS "Cascading Style Sheets". CSS 2: Règles, Sélecteurs, Propriétes CSS: Méthodologie CSS 2: Références CSS 3: Survol, extensions Mozila - PowerPoint PPT PresentationTRANSCRIPT
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
SommaireSommaire
..
..
..
..
.
..
Paul FranchiSI 4
2014-15
22/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 / Mars 2014•CSS3 resize box sizing•keyframes, animation•media queries•Positionnement•Flex Box & Holly Grail & unités
LESS
Foundation
JQuery UI
Responsive design
LESS
Foundation
JQuery UI
Responsive design
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 222/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 322/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 422/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 522/04/23
Références Web
SommaireSommaire
LexiqueLexique
RéfsRéfs
TechsTechs
..
..
..
..
.
..
Transparent 622/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
2014-15
22/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
LESS
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
LESS
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 822/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 922/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 1022/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 1122/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 1222/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 1322/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 1422/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: [ ] = ~= |= *= $= ^=
Transparent 1522/04/23
CSS: Norme syntaxique
child (>) descendant (' ') sibling (+) pseudo éléments (::) pseudo classe ou
fonction (:) 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
Transparent 1622/04/23
CSS: Norme syntaxique
Propriété, Valeur identificateur entier et réel mesures et pourcentages relative units:
em: the 'font-size' of the parent font ex: the 'x-height' of the relevant font rem: the 'font-size' of the html font
absolute units: in: inches — 1in is equal to 2.54cm. cm: centimeters mm: millimeters pt: points — 1pt is equal to 1/72nd of 1in. pc: picas — 1pc is equal to 12pt. px: pixel units — 1px is equal to 0.75pt.
body {
font-size: 12px;
text-indent: 3em;
/* i.e., 36px */
}
URL et URI strings couleurs compteurs
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 1722/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 1822/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“ > et *= ^= $=
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 1922/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 2022/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
2014-15
22/04/23 Transparent - 21
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 2222/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 2322/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 2422/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 2522/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 2622/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 2722/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 2822/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 2922/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 3022/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 3122/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 des balises html attributs html ordre des styles CSS par @import CSS par "stylesheet",
balise <style> ordre des propriétés sélecteur plus défini
(qualifications) style par attribut style 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 3222/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 et attributs par xmlns: html, xhtml, etc.
CSS par xml-stylesheet (ordre) et qualifications des é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 3322/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 3422/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 34
•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 3522/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
2014-15
22/04/23 Transparent - 36
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 3722/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 3822/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 3922/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 4022/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 4122/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 4222/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 4322/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 4422/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 4522/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 4622/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 4722/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 4822/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 4922/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 5022/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 5122/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 5222/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 5322/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 5422/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 5522/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 5622/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
2014-15
22/04/23 Transparent - 57
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 5822/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 5922/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 6022/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 6122/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 6222/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 6322/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 6422/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 6522/04/23
CSS 3: Boites flexibles (Mozilla/XUL)
« 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 . »
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 | space-
between | space-around align-items: flex-start | flex-end | center | baseline |
stretch align-content: flex-start | flex-end | center | space-
between
#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; }
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 6622/04/23
CSS 3: Boites flexibles ("Holly Grail")
@media all and (max-width: 640px) {#main, #page {-webkit-flex-flow: column; flex-flow: column; flex-direction: column; }#main > article, #main > nav, #main > aside { /* Return document order */ -webkit-order: 0; order: 0; } }
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 6722/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 6822/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 6922/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 7022/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 7122/04/23
Sur CSS
LESS permet la réutilisation de régles CSS avec
des variablesdes mixinsdes psudo_classespar héritage
comme pre processeur avec
lessc styles.less > styles.css dans le navigateur avec
<script src="less.js" type="text/javascript"> </script>
SASS
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 7222/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 7322/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 7422/04/23
« Responsible » Web development
jquery.js modernizr.js detects browser features
normalize.css CSS resets for modern standards (HTML5)
LESS extends CSS with dynamic behavior.
selectivizr.js CSS adaptation for IE
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."
jquery.js modernizr.js detects browser features
normalize.css CSS resets for modern standards (HTML5)
LESS extends CSS with dynamic behavior.
selectivizr.js CSS adaptation for IE
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."
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 7522/04/23
« Responsible » Fluid Design
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.
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.
.
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.
.
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).
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).
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 7622/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