5 CSS

.
.
.
Mai 2013 / Mars 2014
Lexique Sommaire
•CSS3 resize box sizing
•keyframes, animation
Réfs
•media queries
•Positionnement
Techs
•Flex Box & Holly Grail & unités
Langages & Documents
Chap V CSS "Cascading Style Sheets"
CSS 2: Règles, Sélecteurs, Propriétes
.
CSS: Méthodologie
.
.
CSS 2: Références
LESS
CSS 3: Survol, extensions Mozila
Foundation
CSS 3: @keyframes, animations
JQuery UI
CSS 3: Media Queries
Responsive design
Paul Franchi
SI 4
2014-15
CSS 3: Boites flexibles Mozilla
15/09/2020
Transparent - 1
Lexique Sommaire
Sommaire du Cours
Réfs
.
.
.
.
.

Chap I - Documents: Historique, Modèles, Standards et Références

Chap II - HTML: voir le cours CIP1-CMD & HTML5

Chap III - XML: "eXtensible Markup Language", les Bases

Chap IV - DTD: "Document Type Definition"

Chap V - CSS: Feuilles de Styles en Cascades& CSS3

Chap VI - DOM, DHTML: "Domain Object Model "& Programmation
Dynamique en HTML & SPRY & JQuery

Chap VII - XSD: Schémas XML

Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink

Chap IX - XSLT: Transformations XML

Chap X - RDF: "Resource Description Framework"

Chap IX - AJAX: "Asynchronous JavaScript And XML"

Savoir-Faire: Know Hows
HTML

.
XHTML CSS JS+DOM
Techs
MATHML XPATH XLINK XSLT
Etat de l'art:
HTML5
CSS3
SPRY
SVG
RDF AJAX
15/09/2020
XUL
Transparent 2
Lexique Sommaire
Some Références
.

.
.
Réfs
Web
 EPU courses (in French)
 Création & Manipulltion de Document
http://www.polytech.unice.fr/~pfz/cmd.html
 Introduction to Internet http://rainbow.i3s.unice.fr/iai/
 Langages & Documents
http:www.polytech.unice;fr/~pfz/document.html
Techs
 W3C tutorial : http://www.w3schools.com/
 Mozilla Development Center
http://developer.mozilla.org/en/docs/Main_Page
.
 W3C, http://www.w3.org/
 Web Developer's Bookmarks http://antriksh.com/resources/
.

Biblio:
 many issues at EPU's lib
.
15/09/2020
Transparent 3
Lexique Sommaire
Documentation et Manuels
.

Techs
Documents du web
 liste de balises HTML

 code des couleurs RVB
.
 code HTML des caractères ISO
.
 liste des extensions de fichiers
(formats)
 Expressions Rationnelles
.

.
Manuels.
 Expressions régulières sous
Emacs
 Recherche et remplacement
sous Emacs
Réfs
Tutoriaux du Web
 W3C : http://www.w3schools.com/
 CSS Play : http://www.cssplay.co.uk/index
 Zen Garden :
http://www.csszengarden.com/tr/francais/
 CSS in10 steps :
http://www.barelyfitz.com/screencast/htmltraining/css/positioning/
 10 steps to better CSS:
http://shapeshed.com/journal/10_steps_to_bette
r_css/
 compléments Emacs
.
 grep sous Unix
15/09/2020
Transparent 4
Lexique Sommaire
.
Références Web
Réfs
Techs
.
.
.
.
.
15/09/2020
Transparent 5
Lexique
.
.
.
.
.
.








































API – Application Programming Interface
ANSI – American National Standards Institute
ASCII – American Standard Code for Information Interchange (128 car.)
AJAX – Asynchronous JavaScript & XML
CSS – Cascading Style Sheets
DHTML – Dynamic HTML
DOM – Document Object Model
DTD – Document Type Definition
HTML – HyperText Markup Language
HTTP – HyperText Transfer Protocol
ISO - International Standards Organization
Mozilla - Fondation (global community for free and open Internet software))
MVC - Model View Controler
RDF - Resource Description Framework
REST - Representational State Transfer
RIA - Rich Internet Application
RSS - Really Simple Syndication
SGML - Standard Generalized Markup Language
SOAP - Simple Access Object Protocol
SPRY - Extensions JS pour HTML - Adobe Lab.
SVG - Scalable Vector Graphics
UNICODE – World wide Code (16 bits)
UTF-8 – Unicode version 8 bits
URL / URI – Uniform Resource Locator / Identifier
XML – eXtensible Markup Language
XBL – XML Binding Language (Mozilla)
XForms – XML Forms
XHTML – HTML 4 en XML
XLink – XML Linking Language
XPath – XML Path Language
XPointer – XML Pointer Language
XSL - eXtensible Stylesheet Language
XSLT – XSL Transformations
XSL-FO – XSL Formatting Objects
XSD – XML Schémas Définition Language
XUL – XML User Language (Mozilla)
W3C – World Wide Web Consortium
Web2.0 – Web dit "sémantique"
WHATWG - Web Hypertext Application Technology Working Group
WSDL - Web Service Description Language
15/09/2020
Lexique Sommaire
Réfs
Techs
Transparent 6
Lexique Sommaire
.
Réfs
Langages & Documents
Techs
Chap V CSS "Cascading Style Sheets"
.
.
CSS 2: Règles, Sélecteurs, Propriétes
.
La balise <style> en HTML
.
Feuilles de style séparées en HTML
Paul Franchi
SI 4
2014-15
Feuilles de style en XML
LESS
.
15/09/2020
Transparent - 7
Lexique Sommaire
CSS: les feuilles de style
Cascading Style
Sheets
Réfs
Techs
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 8
Lexique Sommaire
CSS: Cascading Style Sheets
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
Un langage pour définir les styles
 de balises HTML ou XML
 des éléments d’une DTD
Réfs
Techs
class vs #id
Méthodologie 
le modèle de
boites

CSS -2 (1998)

CSS 3: ( >1999, en cours: www.css3.info )
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS -1 (1996)

 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Principes
 Règles de style associées à la structure des documents
 Feuilles multiples
 Types de média
 Attachements alternatifs aux documents
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 9
Lexique Sommaire
Cascading Style
Sheets
 Syntaxe

les Sélecteurs
class vs #id 
Méthodologie
le modèle de 
boites
Réfs
CSS: Tutoriaux, Versions et Navigateurs
Techs
CSS -1 (1996)
 supporté par Netscape et IE version 4.
CSS -2 (1998)
 supporté par FF1.5 (complet) et IE 6 (partiel)
CSS -3 (>1999, http://www.css3.info/ )
 Opera, Safari, FF 3.0 (partiel) et IE 9 ?
XML et CSS
les Styles Multiples

en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS sur le Web
 W3Schools - CSS Tutorial
 http://www.cssplay.co.uk/
 http://www.csszengarden.com/
 compatibilité avec les Navigateurs
CSS 3 implementation
 Learn CSS on HTML.net
 Learn CSS Tutorial
 CSS Positionning in 10 steps
 CSS in 10 sites
 10 top Tips in CSS
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 10
Lexique Sommaire
CSS: les feuilles de style en cascade
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
class vs #id
Techs
Feuille CSS
 Collection de Règles

Une règle CSS
 Sélecteur (balise HTML XML,, élément de
DTD)
 propriétés (paramètres de style)
Méthodologie
le modèle de
boites
XML et CSS
Réfs

 Modularité
 Importation
 Héritage
 Masquage
 Cascade
 Résolution des "surcharge"
par la règle la plus spécifique
Conception CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 11
Lexique Sommaire
CSS: Syntaxe (1)
Cascading Style
Sheets

 Syntaxe
Techs
( ascendance >? ) * element ( [ attr ( = val )? ] ) * {
( prop : val ; ) *
class vs #id
})
Méthodologie
le modèle de
boites
Les Règles
(
les Sélecteurs
Réfs

*
Exemples HTML & XML
envaleur {
font-style: italic ; font-weight: bold ;
}
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
/* CSS pour Xml */
/* CSS pour Html */
body {
font-style: italic ;
color: black ;}
p{
text-align: center ;
font-family: arial ;}
livre > titre {font-size: 24pt ;}
chapitre > titre {font-size: 20pt ;}
section theoreme {font-color: blue ;}
message [priorite = "haute"] {
font-size: 18pt ; font-color: red ; }
15/09/2020
Transparent 12
Lexique Sommaire
CSS: Syntaxe (2)
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites

Réfs
Groupes de Règles
selecteur (, selecteur )* {
( prop : val ; ) *
}
Les Commentaires : /* blabla */
XML et CSS
les Styles Multiples
en XML

Techs
/* CSS pour Xml */
livre>titre, chapitre>titre
{
font-size: 24pt ;
font-color: blue;
}
Exemples HTML & XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
/* CSS pour Html */
p+h3 {
text-align: left ;
}
/* CSS pour Html */
h1, h2, h3 {
text-align: center ;
color: red;
}
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 13
Lexique Sommaire
CSS: Norme lexicale
Cascading Style
Sheets

 Syntaxe
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Tokenization (unités lexicales)
ident
name
nmstart
nonascii
unicode
escape
nmchar
num
string
string1
string2
nl
les Sélecteurs

Réfs
Techs
[-]?{nmstart}{nmchar}*
{nmchar}+
[_a-z]|{nonascii}|{escape}
[^\0-\237]
\\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
{unicode}|\\[^\n\r\f0-9a-f]
[_a-z0-9-]|{nonascii}|{escape}
[0-9]+|[0-9]*\.[0-9]+
{string1}|{string2}
\"([^\n\r\f\\"]|\\{nl}|{escape})*\"
\'([^\n\r\f\\']|\\{nl}|{escape})*\'
\n|\r\n|\r|\f
Opérateurs, Séparateurs, Commentaires, etc.
15/09/2020
Transparent 14
Lexique Sommaire
CSS: Norme syntaxique
Cascading Style
Sheets

 Syntaxe

class vs #id
Techs
At Rule:

les Sélecteurs
Réfs

@import ….. ;
@font-face { prop: "val"; ... ; }
@media { selecteur {prop: "val";} }
Méthodologie
le modèle de
boites

XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
Rule: Sélecteur, Bloc
sélecteur (, sélecteur )* { ( propriété : valeur ; ) * }


Sélecteur
 CSS2 Références
des propriétés

CSS 3 norme

CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux



universel: *
type: tagName
class (.) et id(#)
attribute: [ ] = ~= |= *= $= ^=
15/09/2020




child (>)
descendant (' ')
sibling (+)
pseudo éléments (::)
pseudo classe ou
fonction (:)
precedence (~)
Transparent 15
Lexique Sommaire
CSS: Norme syntaxique
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie





XML et CSS

importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux



identificateur
entier et réel
mesures et pourcentages
relative units:
le modèle de
boites
les Styles Multiples
en XML
Techs
Propriété, Valeur









em: the 'font-size' of the parent font
ex: the 'x-height' of the relevant font
rem: the 'font-size' of the html font
absolute units:

Réfs
URL et URI
strings
couleurs
compteurs
body {
font-size: 12px;
text-indent: 3em;
/* i.e., 36px */
}
in: inches — 1in is equal to 2.54cm.
cm: centimeters
mm: millimeters
pt: points — 1pt is equal to 1/72nd of 1in.
pc: picas — 1pc is equal to 12pt.
px: pixel units — 1px is equal to 0.75pt.
15/09/2020
Transparent 16
Lexique Sommaire
CSS: Sélecteurs Class & Id en HTML
Cascading Style

Sheets
 Syntaxe
les Sélecteurs
class vs #id

Méthodologie
le modèle de
boites
XML et CSS
Classe (s)
Techs
permet d'associer un (ou plusieurs) style(s) à un élément HTML
sélectionné(s) par la valeur de (ou des) l'attribut(s) "class"
Id
idem, mais sélectionné par la valeur
de l'attribut "id" (unique)
<!-- HTML -->
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
Réfs
<p id= "grand"> en 20pt</p>
<p id= "central"> centré en rouge </p>
<h1 class="center red">
titre au centre et en rouge </h1>
<p class="left"> à gauche </p>
/* CSS pour
HTML*/
#grand {font-size : 20pt; }
p#central {
text-align : center;
color: red;}
p.red {color: red; }
CSS 3 implementation
p.left {text-align: left; }
CSS 3 -moz
.center {text-align: center; }
CSS 3 Tutoriaux
15/09/2020
Transparent 17
Lexique Sommaire
CSS: les Sélecteurs
Réfs
El
Tous les <E1
Parent El
les <E1> descendant d’un <Parent>
Parent > El
les <E1> fils d’un <Parent>
El + Ef
les <Ef> précédés immédiatement d’un <El>
El ~ Ef
les <Ef> précédés d’un <El>
El[att]
Tous les <E1 att = “xxx“ >
le modèle de
boites
El[att = “val“]
les <E1 att = “val“ >
XML et CSS
El[att~=“val“]
les <E1 att = “val1 val val2“ >
El[att |= “val“]
les <E1 att = “val-xxx“ >
El#nom
les <E1 xxx = “nom“ > où xxx est un attribut de type ID
El:link
les <E1> de type link non encore visités
 CSS2 Références
des propriétés
El:visited :hover :active
Idem dèja visités, etc.
CSS 3 norme
E1:lang (fr)
les <E1 xml:lang= “ fr “ >
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
les Styles Multiples
en XML
importation de
styles W3C.org
>
et
Techs
*= ^= $=
:focus :disabled :enabled :first-letter :first-line :root :hover :empty
:first-child :last-child :nth-child(n) :nth-of-type(n) :before :after :not()
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
*
Tous les élements
15/09/2020
Transparent 18
Lexique Sommaire
CSS en HTML: .class vs #id
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
class vs #id

Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Réfs
Un attribut "class" permet de définir une classe de style
qui peut peut être partagée par plusieurs éléments
(balises) du document
L'attribut "id" définit une dénomination unique pour un
élément (balise) du document
<html>
<head> <style>
.center { }
#navBar { }
</style> </head>
<body>
<div class="center">
<div id="navBar">
<p class="center"> à centrer </p>
<div id="navBar" class="center" >
</body>
</html>
15/09/2020
Techs
</div>
</div>
</div>
Transparent 19
Lexique Sommaire
CSS: les Propriétés
Cascading Style
Sheets

margin
l
padding
e
f
t
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites

XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
top
border
content
Polices de caractère
bottom
Techs
r
i
g
h
t
 font-family -style -weight -size

Textes
 text-align -indent -decoration word-spacing

Couleurs et Fonds
 color background
 CSS2 Références
des propriétés
CSS 3 norme
Mis en Page ("Box")
Réfs

Listes
 List-style-position


-image
Tableaux
Médias
15/09/2020
Transparent 20
Lexique Sommaire
.
Réfs
Langages & Documents
Techs
Chap V CSS Méthodologie
.
.
.
Style inline
.
Style interne (<style>)
Style externe (séparé)
Paul Franchi
SI 4
2014-15
Styles alternatifs
Styles multiples
.
Importation de styles
15/09/2020
Transparent - 21
Lexique Sommaire
Cascading Style
Sheets
 Syntaxe
Réfs
Evolution 0: les attributs de style Html
Techs
<html>
les Sélecteurs
class vs #id
<body color: black ; font-family: arial >
Méthodologie
le modèle de
boites
XML et CSS
<p text-align: center; color: red; >
texte centré en arial (par héritage) en rouge (par masquage)
les Styles Multiples
en XML
</p>
importation de
styles W3C.org
</body>
 CSS2 Références
des propriétés
CSS 3 norme
HTML, comme il ne faut plus l'écrire !
car pas évolutif !
</html>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 22
Lexique Sommaire
Evolution 1: les attributs de style Html
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
Techs
<body>
<div style="
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
</div>
</body>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Réfs
position: absolute; width: 500px; height: 52px;
z-index:1; left: 100px; top: 24px;
layer-background-color: #00FFFF;
border: 5px solid #00FF00;
text-align: center; color:red;
text-transform: uppercase;
font-size: xx-large; font-weight: bold;
">
Grand Titre 1
<div style="
text-transform: capitalize;
font-size: x-large; font-weight: normal
">
sous titre 1 </div>
HTML, peu évolutif !
15/09/2020
Transparent 23
Lexique Sommaire
Evolution 2 : la balise <style> en Html
Cascading Style
Sheets
Réfs
Techs
<head> <style>
 Syntaxe
div#Titre {
les Sélecteurs
position: absolute; width: 60%; left: 100px; top: 124px;
background-color: #CCFFFF; border: 5px; solid #00FF00;
class vs #id
text-align: center; color: red;
Méthodologie
text-transform: uppercase; font-size: xx-large;font-weight: bold;
le modèle de
}
boites
div#sousTitre {
XML et CSS
text-transform: capitalize; font-size: x-large; font-weight: normal;
les Styles Multiples
en XML
}
</style> </head>
importation de
styles W3C.org
<body>
 CSS2 Références
des propriétés
<div id="Titre"> Grand Titre
<div id="sousTitre">sous titre avec l'attribut "id" </div>
CSS 3 norme
</div>
CSS 3 implementation
</body>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 24
Lexique Sommaire
Evolution 2: les attributs de style Html
Réfs
Cascading Style
Sheets
Techs
<html><head> <style>
p {text-align: center; color: red;}
 Syntaxe
p.right {text-align: right}
les Sélecteurs
p.center {text-align: center}
class vs #id
.center {text-align: center}
Méthodologie
#green {color: green}
le modèle de
p#para1{ text-align: left; color: pink}
boites
</style> </head>
XML et CSS
<body >
les Styles Multiples
<p> This paragraph will be center-aligned and red-colored. </p>
en XML
<p class="right"> This paragraph will be right-aligned and also red. </p>
importation de
styles W3C.org
<p class="center"> This paragraph will be center-aligned and also red. </p>
<h1 class="center"> This heading will be center-aligned but black. </h1>
 CSS2 Références
des propriétés
<p class="center"> This paragraph will also be center-aligned and red.</p>
CSS 3 norme
<h2 id="green" class="center" >Subtitle centered in green.</h2>
CSS 3 implementation
<p id="para1"> This paragraph will be left-aligned and pink-colored.</p>
</body> </html>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 25
Lexique Sommaire
Les attributs de style Liens en Html
Cascading Style
Sheets
<!-- http://www.w3schools.com/css/css_pseudo_classes.asp -->
Réfs
Techs
 Syntaxe
<html> <head>
les Sélecteurs
<style type="text/css">
class vs #id
a:link {color: #FF0000}
Méthodologie
a:visited {color: #00FF00}
le modèle de
a:hover {color: #FF00FF}
boites
a:active {color: #0000FF}
XML et CSS
</style></head> <body>
les Styles Multiples
en XML
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
importation de
styles W3C.org
<p><b>Note:</b> a:hover MUST come after a:link and a:visited
 CSS2 Références
in the CSS definition in order to be effective!!</p>
des propriétés
<p><b>Note:</b> a:active MUST come after a:hover
CSS 3 norme
in the CSS definition in order to be effective!!</p>
CSS 3 implementation
</body></html>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 26
Lexique Sommaire
Evolution 3: les feuilles de style séparées
Cascading Style
Sheets
Réfs
Techs
Le(s) lien(s) vers le style CSS dans HTML
..\XML_CSS\leftnav.html
..\XML_CSS\rightnav.htm

 Syntaxe
les Sélecteurs
class vs #id

Méthodologie
ici 2 styles alternatifs
<html>
le modèle de
<head>
boites
<link rel="stylesheet" href="leftNav.css" type="text/css"
media="screen" />
XML et CSS
<link rel="stylesheet" href="printNav.css" type="text/css"
les Styles Multiples
media="print" />
en XML
</head>
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
<body>
<div id="masthead"> <!-- texte de l'entête --> </div>
<div id="navBar"> <!-- texte de la barre de navigation-->
</div>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
</body>
</html>
15/09/2020
Transparent 27
Lexique Sommaire
Evolution 3: les feuilles de style séparées
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Réfs
Techs
2 feuilles de style CCS (alternatives)
..\XML_CSS\rightNav.css
..\XML_CSS\leftNav.css

#masthead {
padding: 10px 0px 0px 0px;
Méthodologie
border-bottom: 1px solid #cccccc;
le modèle de
width: 100%;
boites
}
#masthead {
padding: 10px 0px 0px 0px;
XML et CSS
#navBar {
border-bottom: 1px solid #cccccc;
les Styles Multiples
float: right; width: 20%;
width: 100%;
en XML
margin: 0px; padding: 0px;
}
importation de
background-color: #eeeeee;
styles W3C.org
border-right: 1px solid #cccccc;
#navBar {
border-bottom: 1px solid #cccccc; float: left; width: 20%;
 CSS2 Références
des propriétés
}
margin: 0px; padding: 0px;
background-color: #eeeeee;
CSS 3 norme
border-right: 1px solid #cccccc;
CSS 3 implementation
border-bottom: 1px solid #cccccc;
}
•css
•css
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 28
Lexique Sommaire
XML et CSS
Réfs
Le style CSS dans XML
cd_catalog.xml
<?xml
version="1.0" encoding="ISO-8859-1"?>
Cascading Style
Sheets
 Syntaxe
Techs
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<COUNTRY>USA</COUNTRY>
<PRICE>10.90</PRICE>
</CD>
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
<ARTIST>Bob Dylan</ARTIST>
<COMPANY>Columbia</COMPANY>
<YEAR>1985</YEAR>
XML et CSS
les Styles Multiples
en XML

importation de
styles W3C.org
la feuille de style CCS cd_catalog.css
CATALOG {background-color: #ffffff; width: 100%;}
 CSS2 Références
CD
des propriétés
CSS 3 norme
•css
{display: block; margin-bottom: 30pt; margin-left: 0;}
TITLE {color: #FF0000; font-size: 20pt;}
CSS 3 implementation
ARTIST {color: #0000FF; font-size: 20pt;}
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 29
Lexique Sommaire
XML et CSS
Réfs
Le style "Table" CSS dans XML
Cascading Style
Sheets

 Syntaxe
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="tableCatalog.css"?>
<CATALOG>
<Titre> Mon Tableau de CDs </Titre>
<CD> … </CD>
</CATALOG>
les Sélecteurs
class vs #id
Méthodologie
Techs
le modèle de
boites
CATALOG {
display: table; width: 80%;
les Styles Multiples
margin-left: 30px; border: 2px solid;
en XML
padding: 20px 30px 30px 20px;
importation de
}
styles W3C.org
CD {
 CSS2 Références display: table-cell; background-color: #00FFFF;
des propriétés
border: 2px solid; padding: 20px 30px 30px 20px;
}
CSS 3 norme
Titre {
CSS 3 implementation display: table-caption; font-size:36px; text-align:center;
}
XML et CSS
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 30
Lexique Sommaire
CSS: les Styles Multiples en HTML

Cascading Style
Sheets
Résolution des styles multiples
Réfs
Techs
<html>
<head>
les Sélecteurs
<link rel="stylesheet" href="Style1.css" />
<link rel="stylesheet" href="Style2.css" />
class vs #id
<style>
Méthodologie
@import "Fontes.css" ; @import "Tables.css" ;
le modèle de
.centre{}
boites
 style des balises html
.urgent {color:red !important }
XML et CSS
 attributs html
#navBar {color:blue }
 ordre des styles
les Styles Multiples </style>
en XML
</head>
 CSS par @import
importation de
<body style='color:black'>
 CSS par "stylesheet",
styles W3C.org
<div class="urgent centre"
balise <style>
 CSS2 Références
id="navBar">
des propriétés
 ordre des propriétés
...
CSS 3 norme
 sélecteur plus défini
</div>
(qualifications)
CSS 3 implementation </body>
 style par attribut style
</html>
CSS 3 -moz
 sauf !important
 Syntaxe
CSS 3 Tutoriaux
15/09/2020
Transparent 31
Lexique Sommaire
CSS: les Styles Multiples en XML
Cascading Style
Sheets

Styles multiples (cascading)
Réfs
Techs
 Syntaxe
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="monStyle1.css"?>
class vs #id
<?xml-stylesheet type="text/css" href="monStyle2.css"?>
Méthodologie
<racine>
le modèle de
<titre> Styles en XHTML et XML</titre>
boites
<html xmlns = " http://www.w3.org/1999/xhtml " >
XML et CSS
<body>
les Styles Multiples
en XML
<h1> Liens sous XHTML</h1>
importation de
<a href=" http://www.essi.fr/~pfz ">
styles W3C.org
Chez Moi
 CSS2 Références
 styles prédéfinis et attributs
des propriétés
</a>
par xmlns: html, xhtml, etc.
CSS 3 norme
</body>
 CSS par xml-stylesheet
</html>
CSS 3 implementation
(ordre) et qualifications des
</racine>
élements
les Sélecteurs
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 32
Lexique Sommaire
Les feuilles de style alternatives
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
ici 2 styles au choix dans le Navigateur
(FF>Affichage>Style de la page>)
Réfs
Techs
<html>
<head>
<link title="àGauche" rel="stylesheet"
href="leftNav.css" type="text/css" />
<link title="àDroite" rel="alternate stylesheet"
href="rightNav.css" type="text/css" />
</head>
<body>
<div id="masthead"> <!-- texte de l'entête --> </div>
<div id="navBar">
<!-- texte de la barre de navigation-->
</div>
</body>
</html>
15/09/2020
Transparent 33
Lexique Sommaire
XML et CSS
Réfs
Cascading Style 
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Le style CSS dans XML cd_catalog.xml
Techs
•xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
XML et CSS

les Styles Multiples
en XML
importation de
styles W3C.org
la feuille de style CCS cd_catalog.css
CATALOG {background-color: #ffffff; width: 100%;}
CD {display: block; margin-bottom: 30pt; margin-left: 0;}
CATALOG {background-color: #ffffff; width: 100%;}
TITLE {color: #FF0000; font-size: 20pt;}
CSS 3 norme
CD {display: block; margin-bottom: 30pt; margin-left: 0;}
ARTIST {color: #0000FF; font-size: 20pt;}
CSS 3 implementation
TITLE {color: #FF0000; font-size: 20pt;}
 CSS2 Références
des propriétés
CSS 3 -moz
CSS 3 Tutoriaux
ARTIST {color: #0000FF; font-size: 20pt;}
15/09/2020
Transparent 34
Lexique Sommaire
XML & CSS multiples
Cascading Style
Sheets
 Syntaxe
Réfs
Techs
<?xml version="1.0" encoding="ISO-8859-1"?>
les Sélecteurs
class vs #id
<?xml-stylesheet title="Style de base"
href="cd_catalog.css" type="text/css"?>
Méthodologie
le modèle de
boites
<?xml-stylesheet title="Planche" rel="alternate"
href="cd_catalog_2.css" type="text/css"?>
XML et CSS
les Styles Multiples
en XML
<?xml-stylesheet title="Spirale" rel="alternate"
href="cd_catalog_3.css" type="text/css"?>
importation de
styles W3C.org
<CATALOG>
... / ...
</CATALOG>
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 35
Lexique Sommaire
.
Réfs
Langages & Documents
Techs
Chap V .
CSS2 Références des propriétés
.
.
Boites (Box)
Textes
Positionnement
Tables
Pseudo éléments
Compléments
.
Paul Franchi
SI 4
2014-15
.
15/09/2020
Transparent - 36
Lexique Sommaire
CSS: Propriétés des Boîtes
Cascading Style
Sheets
 Syntaxe
Boîtes: Dimensions & graphiques
width
max-width
height max- height
les Sélecteurs
class vs #id
le modèle depadding
boites
valeurs
Techs
min-width
"largeur" % auto inherit
min- height
"hauteur" % auto
"largeur" %
margin margin-top margin-bottom
margin-left
Méthodologie
Réfs
margin-right
padding-top padding-bottom
"largeur" %
padding-left padding-right
XML et CSS
"largeur" thin medium thick
border-width
les Styles Multiples
en XML
-top-width -bottom-width -left-width -right-width
importation de
styles W3C.org
"couleur" transparent
border-color
-top-color -bottom-color -left-color -rightcolor
 CSS2 Références
des propriétés
CSS 3 norme
none hidden
CSS 3 implementation
-top-style -bottom-style -left-style -right-style dotted dashed solid
CSS 3 -moz
border-style
border
CSS 3 Tutoriaux
-top
-bottom
-left
-right
15/09/2020
none hidden
dotted dashed solid
Transparent 37
Lexique Sommaire
CSS: Propriétés des Textes
Cascading Style
Sheets
Réfs
valeurs
Textes
 Syntaxe
text-indent
indentation %
les Sélecteurs
text-align
left right center justify inherit chaine
class vs #id
text-decoration
underline overline line-through blink none
inherit
le modèle de
boites
text-shadow
couleur distance1 distance2 distance3
none inherit
XML et CSS
letter-spacing
normal distance inherit
Méthodologie
les Styles Multiples
en XML
importation de
styles W3C.org
word-spacing
normal distance inherit
text-transform
capitalize uppercase lowercase none
inherit
 CSS2 Références
des propriétés
CSS 3 norme
direction
ltr rtl
white-space
normal pre nowrap inherit
Techs
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 38
Lexique Sommaire
CSS: Propriétés ("positionning")
Cascading Style
Sheets
Techs
Boîtes: Positions
 Syntaxe
les Sélecteurs
valeurs
display
block
none
inline list-item compact
table table-row table-col table-cell …
position
static relative absolute fixed
class vs #id
Méthodologie
le modèle de
boites
Réfs
XML et CSS
top
les Styles Multiples
en XML
importation de
styles W3C.org
bottom
right "longueur" % auto inherit
float
left right none inherit
clear
left right none both inherit
overflow
visible hidden scroll auto
clip
rect(,,,,) auto
visibility
visible hidden collapse inherit
 CSS2 Références
des propriétés
CSS 3 norme
left
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 39
Lexique Sommaire
CSS : positionnement/dimensionnement
Réfs
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
Box Model: margin, border, padding, content


class vs #id

Méthodologie

le modèle de
boites


XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés



CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux

Techs
width, height, box-sizing: content vs border
vertical-align: & text-align:
display: block vs inline vs box vs none
"Container"
position: static
// normal flow
position: relative
 top, right, bottom, left // position en flow normal
float: & clear:
position: absolute
Le "container " d’un
 top, right, bottom, left // container
élément en position
position: fixed
absolue est l’ancêtre
 top, right, bottom, left // window
le plus proche qui est
en position absolue,
"stack order"
relative ou fixe.
 z-index: :hover
15/09/2020
Transparent 40
CSS: Positionnement (1)
Lexique Sommaire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Réfs
Cascading Style "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Techs
Sheets
<html xmlns="http://www.w3.org/1999/xhtml">
 Syntaxe
<head> <style type="text/css">
les Sélecteurs
h2.static { position: static; left: 113;}
class vs #id
h2.decGauche { position: relative; left: -20px;}
Méthodologie
h2.courante { position: relative; left: 113;}
le modèle de
h2.centre { position: absolute; top: 50%; left:50%;}
boites
h2.fixe { position: fixed ; top: 100; left: 200;}
XML et CSS
</style></head>
les Styles Multiples
<body style="color:#FF0000">
en XML
<h2 class="static"> Titre en position STATIC dans le "layout"</h2>
importation de
styles W3C.org
<h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2>
 CSS2 Références
<h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2>
des propriétés
<h2 class="centre"> Titre CENTRé par rapport au père </h2>
CSS 3 norme
<h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2>
CSS 3 implementation
</body></html>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 41
Lexique Sommaire
CSS: Z-Index
Réfs
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Techs
<html>
<head> <style type="text/css">
img{position:absolute;}
img.x1{left:100px; top:100px; z-index:-1}
img.x2{left:50px; top:50px; z-index:-2}
img.x3{left:0px; top:0px; z-index:-3}
</style></head>
<body>
<h1>This is a Heading</h1>
<img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380">
<img class="x2" src="BandeauVerticalPPT.gif" width="112" height="380">
<img class="x3" src="BandeauVerticalPPT.gif" width="112" height="380">
<p>Default z-index is 0. z-index -1 has lower priority.</p>
</body> </html>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 42
Lexique Sommaire
CSS: Z-Index avec "iframe"
Cascading Style
Sheets
Réfs
Techs
 Syntaxe
les Sélecteurs
<html>
<body>
Méthodologie
<iframe style="width:75%;
le modèle de
boites
height:300px;
background-color: #FFFF99"
XML et CSS
les Styles Multiples name="view"
en XML
src="CSSzIndex.html">
importation de
</iframe>
styles W3C.org
 CSS2 Références </body>
des propriétés
</html>
class vs #id
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 43
Lexique Sommaire
CSS:float & clear
Réfs
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
<html><head> <style type="text/css">
img.droite{float: right ; padding-left:20px;}
img.gauche{float: left ; padding-right:20px;}
.break { clear: both ;}
</style></head><body>
<p>
PARAGRAPHE 1 <br/>
<img class="droite" src="xpath.gif" width="112" height="84" />
This is some text. This is some text. This is some text. ….
</p><p>
PARAGRAPHE 2 <br/>
<img class="gauche" src="xpath.gif" width="112" height="84" />
This is some text. ……
</p><p class="break">
PARAGRAPHE 3 <br/>
This is some text. This is some text. This is some text. …..
</body> </html>
15/09/2020
Techs
Transparent 44
CSS: modèle de page Web
zones fixes, relatives & absolues
Lexique Sommaire
<body>
Cascading Style
<div id="HH">
Sheets
<div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div>
 Syntaxe
<div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div>
les Sélecteurs
<div id="D"><p><a href="mailto:[email protected]"> email </a> </p></div>
class vs #id </div> <!-- fin HH -->
Méthodologie <div id="VG"> <p> "fixed" V G </p>
<div id="RUBRIQUE"> ..... </div>
le modèle de
boites
<div id="RUBRIQUE"> ..... </div>
XML et CSS
</div> <!-- fin VG -->
les Styles Multiples
<div id="GRDTITRE"><p> Grand Titre </p></div>
en XML
<div id="PRINCIPAL">
importation de
styles W3C.org
<p> CADRE PRINCIPAL "absolute" </p>
 CSS2 Références <div id="SECTION">
des propriétés
<p> SECTION 1 "relative" </p>
CSS 3 norme
</div> <!-- fin SECTION -->
CSS 3 implementation
</div> <!-- fin PRINCIPAL -->
CSS 3 -moz
</body>
CSS 3 Tutoriaux
15/09/2020
Réfs
Techs
Transparent 45
CSS: unités, pseudo-éléments opacité
Lexique Sommaire
Réfs
CATALOG {display: block; background-color: #cccccc; width: 100%; }
Cascading Style
Techs
CATALOG:before {
Sheets
content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; }
 Syntaxe
CD {
les Sélecteurs
display: inline-block; background-image: url(../IMAGES/cd.gif);
class vs #id
margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt;
Méthodologie
border: cyan 5px ridge; -moz-border-radius: 50%; }
le modèle de
CD:hover {
boites
background-image: url(../IMAGES/cd.png); background-position: 0px 4px;
XML et CSS
height: 248px; width: 246px; font-size: 11pt; }
les Styles Multiples
en XML
CD>ARTIST, CD>TITLE {
importation de display:block ; margin-top: 1em; margin-left: auto; margin-right: auto;
styles W3C.org
padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; }
 CSS2 Références
des propriétés
CD>TITLE {
CSS 3 norme
width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px;
color: #00FFFF;font-style:italic; text-align:center ;
CSS 3 implementation
filter:alpha(opacity=80); opacity:0.8; }
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 46
Lexique Sommaire
CSS: Propriétés des Tables
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
Techs
display
table inline-table
table-row-group table-column-group
table-header-group table-footer-group
table-caption
table-row table-cell
caption-side
top bottm left right inherit
table-layout
auto fixed inherit
bordercollapse
collapse separate inherit
borderspacing
dist-horiz dist-vertic inherit
empty-cells
show hide inherit
Méthodologie
le modèle de
boites
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
valeurs
Tables
class vs #id
XML et CSS
Réfs
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 47
Lexique Sommaire
CSS: des Tables sans la balise <table> (v1)
Réfs
Cascading Style
Sheets
Techs
<html> <head> <style type="text/css">
.grdMere{display: table;}
les Sélecteurs
.mere{display: table-row;}
class vs #id
.fille{display: table-cell;}
Méthodologie
</style></head>
le modèle de <body>
boites
<div class="grdMere">
XML et CSS
<div class="mere">
les Styles Multiples
en XML
<p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p>
importation de </div>
styles W3C.org
<div class="mere">
 CSS2 Références
des propriétés
<p class="fille"> F21</p> <p class="fille"> F22</p>
</div>
CSS 3 norme
</div>
CSS 3 implementation
</body></html>
 Syntaxe
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 48
Lexique Sommaire
CSS: des Tables sans la balise <table> (v2)
Cascading Style
Sheets
Réfs
Techs
<html> <head> <style type="text/css">
.grdMere{display: table;}
les Sélecteurs
.grdMere>div{display: table-row;}
class vs #id
.grdMere>div>p{display: table-cell;}
Méthodologie </style></head>
le modèle de <body>
boites
<div class="grdMere">
XML et CSS
<div>
les Styles Multiples
<p> F11</p> <p > F12</p><p> F13</p>
en XML
</div>
importation de
styles W3C.org
<div>
 CSS2 Références
<p > F21</p> <p > F22</p>
des propriétés
</div>
CSS 3 norme
</div>
CSS 3 implementation
</body></html>
 Syntaxe
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 49
Exemple: Bibliographie
Lexique Sommaire
Réfs
Cascading Style

Sheets
 Syntaxe
placement sans <table> avec display: ou
float:
<html>
Techs
<head>
body > h1 { text-align: center; }
les Sélecteurs <link rel="stylesheet"
href="bib.css" type="text/css" />
class vs #id
Livre {
</head>
display: inline-block;
Méthodologie <body>
width: 22%;
<h1>
le modèle de
Bibliographie "Documents"
background-color: #99FFFF;
boites
</h1>
border: #0000FF medium ridge;
XML et CSS
<div class="Livre" > Comprendre XSLT
margin: 10px ; }
<img src="../../BIBLIO/HTML2841771571.jpg"
les Styles Multiples
width="54" height="90">
en XML
Livre ul {
<ul> <em> Auteurs:</em>
importation de
<li> <a href="">Bernard Amann</a></li>
padding-left: 0px;
styles W3C.org
<li> <a href="">Philippe Rigaux</a></li>
text-align: center; }
 CSS2 Références</ul>
des propriétés
<span>2002</span>
Livre li { list-style: none; }
<span>Ed: O'REILLY</span>
CSS 3 norme
</div>
CSS 3 implementation
</body>
img { float: right ; }
</html>
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 50
CSS: divers compléments
Lexique Sommaire
Réfs
Cascading Style

Sheets
contenu
Techs
{content:"string" attr(A) url(" ") counter(C);}
 Syntaxe
les Sélecteurs
class vs #id

Méthodologie
Exercice[ref]:before {content: "Exercice - " attr(ref);}
le modèle de
boites
XML et CSS

les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme

CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
pseudo-élements :before :after
textes :first-line :first-letter white-space
Paragraph:first-line {font-style:"italic";}
Paragraph:first-letter {font-size:+200%;}
SourceLP {white-space:pre;}
compteurs
Chapitre {counter(chapnum); counter-increment:chapnum;
counter-reset:sectnum;}
15/09/2020
Transparent 51
CSS: divers compléments
Lexique Sommaire
Réfs
Cascading Style
Sheets

opacité (chacun sa version !)
zone
 Syntaxe
class vs #id
Méthodologie
}
le modèle de
boites

les Styles Multiples
en XML
 CSS2 Références
des propriétés
CSS 3 norme

CSS 3 implementation
CSS 3 Tutoriaux
media
@media print {
#footer , #menu {display: none;}
#container {
width: 92%;
opacity:1.0; /* obligatoire pour imprimer */
}
}
importation de
styles W3C.org
CSS 3 -moz
{
filter: alpha(opacity=100);
filter: progid:
DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00;
opacity:1;
les Sélecteurs
XML et CSS
Techs
pagination
Chapitre { page-break-after: always; }
Exemple { page-break-inside: avoid ;}
15/09/2020
Transparent 52
Lexique Sommaire
CSS : importation de styles W3C.org
Cascading Style
Sheets
Réfs
Techs
<link rel="alternate stylesheet" title="Ultramarine"
href="http://www.w3.org/StyleSheets/Core/Ultramarine">
 Syntaxe
<link rel="alternate stylesheet" title="Chocolate"
les Sélecteurs
href="http://www.w3.org/StyleSheets/Core/Chocolate">
<link rel="alternate stylesheet" title="Midnight"
class vs #id
href="http://www.w3.org/StyleSheets/Core/Midnight">
Méthodologie
<link rel="alternate stylesheet" title="Oldstyle"
href="http://www.w3.org/StyleSheets/Core/Oldstyle">
le modèle de
boites
<link rel="alternate stylesheet" title="Modernist"
href="http://www.w3.org/StyleSheets/Core/Modernist">
XML et CSS
<link rel="alternate stylesheet" title="Swiss"
les Styles Multiples
href="http://www.w3.org/StyleSheets/Core/Swiss">
en XML
<link rel="alternate stylesheet" title="Traditional"
importation de
href="http://www.w3.org/StyleSheets/Core/Traditional">
styles W3C.org
<link rel="alternate stylesheet" title="Steely"
 CSS2 Références
href="http://www.w3.org/StyleSheets/Core/Steely">
des propriétés
<link rel="alternate stylesheet" title="Forest (by David Baron)"
CSS 3 norme
href="http://dbaron.org/style/forest">
<link rel="stylesheet" title="Plain (by David Baron)"
CSS 3 implementation
href="http://dbaron.org/style/plain">
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 53
Lexique Sommaire
Réfs
CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7
Cascading Style
Sheets

 transitional
< !DOCTYPE html PUBLIC
 strict
 Syntaxe
les Sélecteurs
class vs #id
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Méthodologie
XML et CSS
les Styles Multiples
en XML
margin: 9px !important;

non supportés
/margin: 7px;
 :hover
 display: table
 CSS2 Références
des propriétés
CSS 3 norme
bugs récurrents
 margin, padding
 div float
 border
 background
 etc…
le modèle de
boites
importation de
styles W3C.org
Techs
doctype en 1ère ligne
-margin: 5px;

/* FF only */
/* IE7 only */
/* IE6 only */
hacks CSS
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 54
Lexique Sommaire
HTML - Commentaires Conditionnels IE
Réfs
Cascading Style
Sheets
 Syntaxe
Techs

Syntaxe d'un commentaire conditionnel positif:
 <!--[if condition]> HTML, XHTML, CSS ou Script <![endif]-->

Syntaxe d'un commentaire conditionnel négatif:
 <!--[if condition]><![IGNORE[--><![IGNORE[]]> HTML <!-<![endif]-->
 version non valide pour XHTML et XML

Conditions:
 IE : Toutes versions d'IE
 lt IE version: Versions d'IE inférieures à version
 lte IE version: Versions d'IE inférieures ou égales à version
 IE version: La version version d'IE
 gte IE version: Versions d'IE supérieures ou égales à version
 gt IE version: Versions d'IE supérieures à version
 version: IE 5, 5.5, 6 ou 7.

Utile pour adapter les styles CSS aux versions IE
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 55
Lexique Sommaire
Ilot XML dans HTML
Cascading Style
Sheets
Réfs
Techs
 Syntaxe
les Sélecteurs
class vs #id
<html>
<body>
<xml id="MonIlotXML" src="data.xml"></xml>
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
<table border="1" datasrc="#MonIlotXML">
<tr>
<td><span datafld="NOM"></span></td>
<td><span datafld="PRENOM"></span></td>
</tr>
</table>
</body>
</html>
CSS 3 implementation
CSS 3 norme
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 56
Lexique Sommaire
.
Réfs
Langages & Documents
Techs
Chap V .
CSS 3
.
.
Support des Navigateurs
.
Survol, extensions Mozila
@keyframes, animations
Paul Franchi
SI 4
2014-15
Media Queries
Boites flexibles Mozilla
.
15/09/2020
Transparent - 57
Lexique Sommaire
CSS : Overview & Web support (2011)
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
Réfs
Techs

CSS 2.1 features
 Units
 Importance
 At-rules
 Basic selectors
 Pseudo-classes
 Pseudo-elements
 Basic properties
 Print properties
 Conformance

CSS 3 features
 Units
 At-rules
 Basic selectors
 Pseudo-classes
 Pseudo-elements
 Basic properties
 Print properties
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 58
Lexique Sommaire
CSS 3: normalisation en cours (modules)
Cascading Style
Sheets

 Syntaxe
 CSS Level 2
 CSS Level 1
 Selectors
 CSS Color
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites

XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Completed work
High Priority
 CSS Level 2
Revision 1
 CSS
Namespaces
 CSS
Backgrounds
 CSS Borders
 CSS Multicolumn Layout
 Media Queries

Réfs
Techs
Medium Priority
 Medium Priority
 CSS Fonts
 CSS Snapshot
2007
 CSS Basic Box Model
 CSS Template Layout  CSS Snapshot
2010
 CSS Speech
 CSS Mobile
 CSS Basic User
Profile 2.0
Interface
 CSS Marquee
 CSS Scoping
 CSS Paged Media
 CSS Grid Positioning
 CSS Print Profile
 CSS Grid Layout
 CSS Values and
 CSS Regions
Units
 CSS Flexible Box
 CSS Cascading
Layout
and Inheritance
 CSS Image Values
 CSS Text
 CSS 2D
 CSS Writing Modes
Transformations
 CSS Line Grid
 CSS 3D
 CSS Ruby
Transformations
 CSS Generated
 CSS Transitions
Content for Paged
 CSS Animations
Media
15/09/2020
Transparent 59
Lexique Sommaire
CSS 3: propriétés en fonction
Cascading Style
Sheets
 Syntaxe

les Sélecteurs
class vs #id
Méthodologie
Réfs
Techs
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
}
bordures:
arrondies,
dégradées,
ombrées
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
}
le modèle de
boites
XML et CSS
les Styles Multiples
en XML

effets de texte:
ombre, fontes, etc.
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme

CSS 3 implementation
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
}
(re)
dimensionnement:
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}
Transparent 60
Lexique Sommaire
CSS 3: propriétés en fonction
Cascading Style
Sheets
 Syntaxe
les Sélecteurs

backgrounds:
size, position,
multiples

multi-colonnes:
span, gap, rule
class vs #id
Méthodologie
.backgroundsize {
background: url(logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
}
Réfs
Techs
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
.multiplecolumns {
-moz-column-width: 130px;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 61
Lexique Sommaire
CSS 3: normalisation en cours
Cascading Style
Sheets
 Syntaxe

transform:
rotate,
translate,
skew, scale

transition:
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Réfs
.top {
Techs
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
div.polaroid:hover {
/* FF SAFARI OPERA CHROME */
-webkit-transform: rotate(0deg) scale(1.25) ;
-moz-transform: rotate(0deg) scale(1.25);
transform: rotate(0deg) scale(1.05);
}
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
div.pub {
/* OK ss SAFARI, mais en attente de FF 3.7 */
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-webkit-border-radius: 3em;
}
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 62
Lexique Sommaire
CSS 3: normalisation en cours
Cascading Style
Sheets
 Syntaxe


les Sélecteurs
@keyframes
animation







class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
delay
direction
duration
iteration-count
name
play-state
timing-function
fill-mode
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from { margin-left: 100%; width: 300% }
to { margin-left: 0%; width: 100%;}
}
@-webkit-keyframes slidein {
from { margin-left: 100%; width: 300% }
to { margin-left: 0%; width: 100%;}
}
Réfs
Techs
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux


resize
box-sizing
 border content padding-
/* support Firefox, WebKit, Opera and IE8+ */
.example {
resize: both;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
15/09/2020
Transparent 63
Lexique Sommaire
CSS 3: Media Queries
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Réfs
«A media query consists of a media type and at least one
expression that limits the style sheets' scope by using media
features, such as width, height, and color. Media queries, added in
CSS3, let the presentation of content be tailored to a specific range
of output devices without having to change the content itself.»
Techs
Méthodologie
le modèle de
boites








XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
@media

@media print {
#menu, #footer, aside { display:none; }
body { font-size:120%; color:black; }
}
print
screen
projection
tv
braille
aural
all
logical
 and
 not
 only
@media screen and (max-width: 640px) {
.bloc { display:block; clear:both; }
}

media features
min- maxwidth height color aspect-ratio resolution
15/09/2020
Transparent 64
Lexique Sommaire
CSS 3: Boites flexibles (Mozilla/XUL)
Cascading Style

Sheets
 Syntaxe
les Sélecteurs

class vs #id
Méthodologie
le modèle de
boites

XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Réfs
« Le modèle de boite flexible CSS3 permet de déterminer la façon
dont des boites sont distribuées au sein d'autres boites
(horizontalement ou verticalement) et comment elles se répartissent
l'espace disponible entre elles.
Ce modèle de boite est utilisé par XUL (le langage de définition
d'interface des produits Mozilla). Des mécanismes similaires sont
utilisés par de nombreux autres langages de description d'interface
comme XAML ou GladeXML . »
display: flex | inline-flex
 flex-flow: <‘flex-direction’> || <‘flex-wrap’>
 flex-directionflex-direction: row | row-reverse |
column | column-reverse
 flex-wrap: nowrap | wrap | wrap-reverse
 order: integer
 justify-content: flex-start | flex-end | center | spacebetween | space-around
 align-items: flex-start | flex-end | center | baseline |
stretch
 align-content: flex-start | flex-end | center | spacebetween
15/09/2020
Techs
#main {
min-height: 800px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
Transparent 65
Lexique Sommaire
CSS 3: Boites flexibles ("Holly Grail")
Cascading Style
Sheets
Réfs
Techs
 Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
@media all and (max-width: 640px) {
#main, #page {
-webkit-flex-flow: column; flex-flow: column; flex-direction: column; }
CSS 3 norme
#main > article, #main > nav, #main > aside { /* Return document order */
CSS 3 implementation
-webkit-order: 0; order: 0; }
}
CSS 3 -moz
 CSS2 Références
des propriétés
CSS 3 Tutoriaux
15/09/2020
Transparent 66
Lexique Sommaire
CSS 3: Mozilla Extensions
Cascading Style
-moz-background-clip
Sheets
-moz-background-inlinepolicy
 Syntaxe
-moz-binding
-moz-border-bottom-colors
les Sélecteurs
-moz-border-left-colors
class vs #id-moz-border-start-width
-moz-box-align
Méthodologie
-moz-box-direction
-moz-box-flex
le modèle de
-moz-box-flexgroup
boites
-moz-box-ordinal-group
XML et CSS-moz-box-orient
-moz-box-pack
les Styles Multiples
-moz-box-sizing
en XML
-moz-column-count
importation de
-moz-column-gap
styles W3C.org
-moz-column-width
-moz-column-rule Gecko
 CSS2 Références
des propriétés
1.9.1
-moz-column-rule-width
CSS 3 norme
Gecko 1.9.1
-moz-column-rule-style
CSS 3 implementation
Gecko 1.9.1
-moz-column-rule-color
Gecko 1.9.1
CSS 3 -moz
-moz-float-edge
CSS 3 Tutoriaux
-moz-force-broken-image-icon
-moz-font-feature-settings
Gecko 2.0
-moz-font-language-override
Gecko 2.0
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-moz-opacity Obsolete
-moz-outline Obsolete
-moz-outline-color Obsolete
-moz-outline-offset Obsolete
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-outline-style Obsolete
-moz-outline-width Obsolete
-moz-padding-end
-moz-padding-start
-moz-stack-sizing Gecko 1.9.1
-moz-tab-size Gecko 2
15/09/2020
Réfs
Techs
-moz-transform Gecko 1.9.1
-moz-transform-origin
Gecko 1.9.1
-moz-transition Gecko 2
-moz-transition-delay Gecko
2
-moz-transition-duration
Gecko 2
-moz-transition-property
Gecko 2
-moz-transition-timingfunction Gecko 2
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
-moz-window-shadow
Gecko 1.9.1
-moz-initial
-moz-appearance
-moz-win-browsertabbartoolbox New in Firefox 3
-moz-win-communicationstoolbox New in Firefox 3
-moz-win-media-toolbox
New in Firefox 3
-moz-mac-unified-toolbar
New in Firefox 3.5
67
etcTransparent
…
CSS 3: spécial Mozilla
Lexique Sommaire
Réfs
Cascading Style
Sheets

 Syntaxe
opacité & coins
arrondis
les Sélecteurs
class vs #id
Méthodologie
Techs
.joliBouton {
background-image: url(sourire.png);
border:#0000FF thick ridge ;
-moz-border-radius: 25px ;
-moz-opacity : 0.85 ;
}
le modèle de
boites
XML et CSS

.col_3
multi-colonnes
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
{
-moz-column-count: 3;
-moz-column-gap: 10%;
-moz-column-width: 25%;
}

bordures multiples
Bouton:hover {
-moz-border-bottom-colors: #FF0000 #00FF00 #0000FF ;
-moz-border-right-colors: #FF0000 #00FF00 #0000FF ;
}
15/09/2020
Transparent 68
Lexique Sommaire
CSS 3: spécial Mozilla
Cascading Style
Sheets

Réfs
Techs
:not() :root :target
 Syntaxe
#onglets li div { display: none; }
#onglets > li:target { color: #FF0000; font-size: 24px ; }
#onglets > li:target > div { display: block; }
#onglets > li:not(:target) > div { display: none; }
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS

les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
backgrounds
.linearDiagonal {background: -moz-linear-gradient(left top, blue, white); }
.linearMultiple {background: -moz-linear-gradient(left, red, orange, yellow,
green, blue);
}
.radialEllipse {background: -moz-radial-gradient(ellipse farthest-corner,
red, yellow 10%, #1E90FF 50%, white); }
.radial {background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));}
.radialRepetition {background: -moz-repeating-radial-gradient(black,
black 5px, white 5px, white 10px); }
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 69
Lexique Sommaire
CSS 3: Tutoriaux du Web
Cascading Style
Sheets
Techs

CSS3 please!
class vs #id

Méthodologie

Animations avec CSS transform
Transition Timing Function
 Syntaxe
Réfs
les Sélecteurs
le modèle de
boites
XML et CSS

les Styles Multiples
en XML

importation de
styles W3C.org

Sliding content
3D Flipping
Accordions (widgets)
 CSS2 Références
des propriétés
CSS 3 norme

CSS 3 implementation

50 animations with CSS3 ( and Jquery )
CSS3 Animation Browser supports
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 70
Lexique Sommaire
Sur CSS
Cascading Style
Sheets

Réfs
Techs
LESS
 permet la réutilisation de régles CSS avec
 Syntaxe
les Sélecteurs
 des variables
 des mixins
 des psudo_classes
 par héritage
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
 comme pre processeur avec
les Styles Multiples
en XML
 lessc styles.less > styles.css
importation de
styles W3C.org
 dans le navigateur avec
 <script src="less.js"
type="text/javascript"> </script>
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux

SASS
15/09/2020
Transparent 71
CSS : Méthodologie
Lexique Sommaire
Réfs
Cascading Style 
Sheets
 Syntaxe
les Sélecteurs
class vs #id



"Diviser pour ..." : plusieurs feuilles CSS pour séparer des niveaux ou
domaines de style: appli1 ,...,applin, fontes, layout, media, etc.
Réutiliser "autant que possible" vos CSS ou celles des autres (après
"validation")
Partir avec de bonnes fondations ("nettoyer le terrain")
Utiliser des CSS Conditionnelles
Méthodologie
/* nettoyer le terrain*/
le modèle de
*
{
boites
margin: 0;
padding: 0;
XML et CSS
border: 0;
les Styles Multiples }
en XML
importation de
styles W3C.org


 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Techs
<!--[if lte IE 6]>
<link rel="stylesheet" href="/css/ie6_and_below.css"
type="text/css" media="screen" />
<![endif]-->
#left-content {
float: left;
margin-left: 10px;
}
Coder "défensif"
Eviter les "hacks"
Les bonnes habitudes:
 Formater et colorer votre source
 Commenter souvent, commenter "intelligent"
 Tester, tester, et reTester
 Lire le Web, mais "défensivement"
15/09/2020
#left-content {
float: left;
}
#left-content * {
margin-left: 10px;
}
Transparent 72
Lexique Sommaire
CSS : savoir-faire (sans script)
Cascading Style
Sheets

 Syntaxe

les Sélecteurs

Méthodologie


importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Zones dédiées
 Barres de Navigation
 "Sticker" ou "PostIt"
XML et CSS
les Styles Multiples
en XML
Techs
Panneaux (fixes, relatifs, absolus) sans "table"
Cadres sans "frame", ni "iframe"
Widgets avec ":hover"
 Menus (surgissants, déroulants, scrollants, arborescents, etc)
 Boutons (pseudo-"radio")
 Effets : "popup", loupe, zoom, etc.
class vs #id
le modèle de
boites
Réfs





Texte en multicolonnes
Génération de contenu et puces (numérotation)
Opacité
Onglets (avec CSS3:target)
Mode "Impression"
Page Web dédiées (multi-panneaux):
 Explorateur: accès par index, listes, aperçus, et visualisation
 Atelier de Développement: code source, visualisation, documentation
CSS 3 -moz
CSS 3 Tutoriaux
15/09/2020
Transparent 73
Lexique Sommaire
« Responsible » Web development
Cascading Style
Sheets

 Syntaxe


XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés

CSS 3 -moz
CSS 3 Tutoriaux
LESS
 extends CSS with dynamic behavior.

selectivizr.js
 CSS adaptation for IE



CSS 3 norme
CSS 3 implementation
normalize.css
 CSS resets for modern standards (HTML5)
Méthodologie
le modèle de
boites
Techs
jquery.js
modernizr.js
 detects browser features
les Sélecteurs
class vs #id
Réfs

Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js
Joomla, Wordpress
Jquery UI jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes built on top of
the jQuery JavaScript Library.
Foundation "The most advanced responsive
front-end framework in the world."
15/09/2020
Transparent 74
Lexique Sommaire
« Responsible » Fluid Design
Cascading Style
Sheets
 Syntaxe
les Sélecteurs
class vs #id
Responsive web design (RWD) is a web design approach aimed at
crafting sites to provide an optimal viewing experience - easy reading
and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to
mobile phones).
Réfs
Techs
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Fixed websites have a set width, and resizing the browser or viewing it on
different devices won’t affect on the way the website looks. This can
require horizontal scrolling and a site that doesn’t look good on tablets or
smartphones.
Fluid websites are built using percentages for widths. As a result,
columns are relative to one another and the browser, allowing it to scale
up and down fluidly
Adaptive websites introduce media queries to target specific device sizes,
like smaller monitors, tablets, and mobile.
Responsive websites are built on a fluid grid and use media queries to
control the design and its content as it scales down or up with the
browser or device.
.
15/09/2020
Transparent 75
Lexique Sommaire
CSS : Une galerie Photo sous DW
Cascading Style
Sheets

 Syntaxe
les Sélecteurs
class vs #id



Méthodologie
le modèle de
boites
XML et CSS

les Styles Multiples
en XML
importation de
styles W3C.org
 CSS2 Références
des propriétés
CSS 3 norme




Développement par étapes sous DW
<div > <span> <table>
#id et .classe en position absolue
Areas
 MAIN
 HEAD
 NAVIGATION
Liens
 internes (ancres)
 externes (hyperliens)
Menus & Boutons
Images
XSL
Effets CSS
version XML+XSL
Réfs
Techs
CSS
CSS
CSS
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux

version "Doc Exemples"
15/09/2020
Transparent 76