Embed Size (px)
Citation preview
Lexique
Langages & Documents Réfs
Techs
Sommaire
.
.
.
.
.
.
Paul Franchi
SI 4
2014-15
28/09/2015 Transparent - 1
Chap V -
CSS "Cascading Style Sheets"
CSS 2: Règles, Sélecteurs, Propriétes CSS: Méthodologie CSS 2: Références CSS 3: Survol, extensions Mozila CSS 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
Sommaire Lexique
Réfs
Techs
.
.
.
.
.
.
Transparent 2 28/09/2015
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
Sommaire Lexique
Réfs
Techs
.
.
.
.
.
.
Transparent 3 28/09/2015
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
Sommaire Lexique
Réfs
Techs
.
.
.
.
.
.
Transparent 4 28/09/2015
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
Emacs
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_bette
r_css/
Sommaire Lexique
Réfs
Techs
.
.
.
.
.
.
Transparent 5 28/09/2015
Références Web
Sommaire Lexique
Réfs
Techs
.
.
.
.
.
.
Transparent 6 28/09/2015
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
Lexique
Langages & Documents Réfs
Techs
Sommaire
.
.
.
.
.
.
Paul Franchi
SI 4
2014-15
28/09/2015 Transparent - 7
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 8 28/09/2015
CSS: les feuilles de style
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 9 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 10 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 11 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Les Règles
( ( ascendance >? ) * element ( [ attr ( = val )? ] ) * {
( prop : val ; ) *
} ) *
Exemples HTML & XML
Transparent 12 28/09/2015
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 ;}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Groupes de Règles
selecteur (, selecteur )* {
( prop : val ; ) *
}
Les Commentaires : /* blabla */
Exemples HTML & XML
Transparent 13 28/09/2015
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 ;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
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 14 28/09/2015
CSS: Norme lexicale
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
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 15 28/09/2015
CSS: Norme syntaxique
child (>)
descendant (' ')
sibling (+)
pseudo éléments (::)
pseudo classe ou
fonction (:)
precedence (~)
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 16 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
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 17 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 18 28/09/2015
CSS: les Sélecteurs
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“ >
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 19 28/09/2015
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
<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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 20 28/09/2015
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
l
e
f
t
r
i
g
h
t
top
bottom
margin
content padding
border
CSS: les Propriétés
Lexique
Langages & Documents Réfs
Techs
Sommaire
.
.
.
.
.
.
Paul Franchi
SI 4
2014-15
28/09/2015 Transparent - 21
Chap V -
CSS Méthodologie
Style inline Style interne (<style>) Style externe (séparé) Styles alternatifs Styles multiples Importation de styles
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 22 28/09/2015
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 !
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 23 28/09/2015
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 !
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 24 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 25 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 26 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 27 28/09/2015
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
<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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
2 feuilles de style CCS (alternatives)
..\XML_CSS\rightNav.css
..\XML_CSS\leftNav.css
Transparent 28 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Le style CSS dans XML
cd_catalog.xml
la feuille de style CCS cd_catalog.css
Transparent 29 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Le style "Table" CSS dans XML
Transparent 30 28/09/2015
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 31 28/09/2015
CSS: les Styles Multiples en HTML
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 32 28/09/2015
CSS: les Styles Multiples en XML
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 33 28/09/2015
Les feuilles de style alternatives
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 34 28/09/2015
XML et 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;}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 35 28/09/2015
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>
Lexique
Langages & Documents Réfs
Techs
Sommaire
.
.
.
.
.
.
Paul Franchi
SI 4
2014-15
28/09/2015 Transparent - 36
Chap V -
CSS2 Références des propriétés
Boites (Box)
Textes
Positionnement
Tables
Pseudo éléments
Compléments
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 37 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 38 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 39 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 40 28/09/2015
CSS : positionnement/dimensionnement
Box Model: margin, border, padding, content
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
top, right, bottom, left // container
position: 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.
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 41 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
<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 42 28/09/2015
CSS: Z-Index
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 43 28/09/2015
CSS: Z-Index avec "iframe"
<html>
<body>
<iframe style="width:75%;
height:300px;
background-color: #FFFF99"
name="view"
src="CSSzIndex.html">
</iframe>
</body>
</html>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 44 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
<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 45 28/09/2015
CSS: modèle de page Web
zones fixes, relatives & absolues
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 46 28/09/2015
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; }
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 47 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 48 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 49 28/09/2015
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>
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 50 28/09/2015
Exemple: Bibliographie
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 ; }
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 51 28/09/2015
CSS: divers compléments
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;}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 52 28/09/2015
CSS: divers compléments
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 53 28/09/2015
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">
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 54 28/09/2015
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 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 */
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 55 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 56 28/09/2015
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>
Lexique
Langages & Documents Réfs
Techs
Sommaire
.
.
.
.
.
.
Paul Franchi
SI 4
2014-15
28/09/2015 Transparent - 57
Chap V -
CSS 3
Support des Navigateurs Survol, extensions Mozila @keyframes, animations Media Queries Boites flexibles Mozilla
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 58 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 59 28/09/2015
CSS 3: normalisation en cours (modules)
Completed work
CSS Level 2
CSS Level 1
Selectors
CSS Color
High Priority
CSS Level 2
Revision 1
CSS
Namespaces
CSS
Backgrounds
CSS Borders
CSS Multi-
column Layout
Media Queries
Medium Priority
CSS Snapshot 2007
CSS Snapshot 2010
CSS Mobile Profile 2.0
CSS Marquee
CSS Paged Media
CSS Print Profile
CSS Values and Units
CSS Cascading and Inheritance
CSS Text
CSS Writing Modes
CSS Line Grid
CSS Ruby
CSS Generated Content for Paged Media
Medium Priority
CSS Fonts
CSS Basic Box Model
CSS Template Layout
CSS Speech
CSS Basic User Interface
CSS Scoping
CSS Grid Positioning
CSS Grid Layout
CSS Regions
CSS Flexible Box Layout
CSS Image Values
CSS 2D Transformations
CSS 3D Transformations
CSS Transitions
CSS Animations
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 60 28/09/2015
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 61 28/09/2015
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 62 28/09/2015
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);
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 63 28/09/2015
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 64 28/09/2015
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.»
@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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 65 28/09/2015
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 . »
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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 66 28/09/2015
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; }
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 67 28/09/2015
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 …
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 68 28/09/2015
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 ;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 69 28/09/2015
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; }
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 70 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 71 28/09/2015
Sur CSS
LESS
permet la réutilisation de régles CSS avec
des variables
des mixins
des psudo_classes
par héritage
comme pre processeur avec
lessc styles.less > styles.css
dans le navigateur avec
<script src="less.js"
type="text/javascript"> </script>
SASS
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 72 28/09/2015
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"
/* 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;
}
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 73 28/09/2015
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
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 74 28/09/2015
« 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."
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 75 28/09/2015
« 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.
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).
Lexique
Réfs
Techs Cascading Style
Sheets
Syntaxe
les Sélecteurs
le modèle de
boites
XML 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
Sommaire
Transparent 76 28/09/2015
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"
CSS
CSS
CSS
XSL
![compil7 AG.ppt [Mode de compatibilité]users.polytech.unice.fr/~pfz/COMPILATION/COURS/compil7... · 2015. 6. 3. · † Petit Précis de Yacc. J. Farré; Notes de TP ESSI-2 (1998)](https://img.pdfslide.fr/doc/110x75/60e2017a4c86be150b21aecd/compil7-agppt-mode-de-compatibilitusers-pfzcompilationcourscompil7.jpg)
![LangDocCompil1-2.ppt [Mode de compatibilité]users.polytech.unice.fr/~pfz/COMPILATION/COURS/... · Pascal PDP-11 IDL. Icon Bourne Shell. 1978 Awk. Fortran 77. 1979 Rexx. 1980 Smalltalk-80](https://img.pdfslide.fr/doc/110x75/5b990a0f09d3f2210c8d4e6f/langdoccompil1-2ppt-mode-de-compatibiliteusers-pfzcompilationcours.jpg)
![LangDocCompil1-2.ppt [Mode de compatibilité]users.polytech.unice.fr/~pfz/LANGDOC/COURS/LangDocCompil1-2.pdf · † A first course using ANSI C, LEX and YACC, J. P. Bennett, 2nd edition,](https://img.pdfslide.fr/doc/110x75/5b991b2a09d3f29c338b5a64/langdoccompil1-2ppt-mode-de-compatibiliteusers-pfzlangdoccourslangdoccompil1-2pdf.jpg)
