chap v - css "cascading style sheets"

LexiqueLexique

Langages & Documents RéfsRéfs

TechsTechs

SommaireSommaire

..

..

..

..

.

..

Paul FranchiSI 4

2014-15

22/04/23 Transparent - 1

Chap V -

CSS "Cascading Style Sheets"

Chap V -


CSS 2: Règles, Sélecteurs, Propriétes

CSS: MéthodologieCSS 2: Références

CSS 3: Survol, extensions Mozila

CSS 3: @keyframes, animations

CSS 3: Media Queries

CSS 3: Boites flexibles Mozilla


CSS: MéthodologieCSS 2: Références

CSS 3: Survol, extensions Mozila

CSS 3: @keyframes, animations


CSS 3: Boites flexibles Mozilla

Mai 2013 / Mars 2014•CSS3 resize box sizing•keyframes, animation•media queries•Positionnement•Flex Box & Holly Grail & unités

LESS

Foundation

JQuery UI

Responsive design

LESS

Foundation

JQuery UI

Responsive design

SommaireSommaire

LexiqueLexique

RéfsRéfs

TechsTechs

..

..

..

..

.

..

Transparent 222/04/23

Sommaire du Cours

Chap I - Documents: Historique, Modèles, Standards et Références

Chap II - HTML: voir le cours CIP1-CMD & HTML5

Chap III - XML: "eXtensible Markup Language", les Bases

Chap IV - DTD: "Document Type Definition"

Chap V - CSS: Feuilles de Styles en Cascades& CSS3

Chap VI - DOM, DHTML: "Domain Object Model "& Programmation

Dynamique en HTML & SPRY & JQuery

Chap VII - XSD: Schémas XML

Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink

Chap IX - XSLT: Transformations XML

Chap X - RDF: "Resource Description Framework"

Chap IX - AJAX: "Asynchronous JavaScript And XML"

Savoir-Faire: Know Hows

HTML XHTML CSS JS+DOM MATHML XPATH XLINK XSLT

Etat de l'art:

HTML5 CSS3 SPRY SVG RDF AJAX XUL

SommaireSommaire

LexiqueLexique

RéfsRéfs

TechsTechs

..

..

..

..

.

..


Web EPU courses (in French)

Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html

Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents

http:www.polytech.unice;fr/~pfz/document.html

W3C tutorial : http://www.w3schools.com/

Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page

W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/

Biblio: many issues at EPU's lib

Some Références

SommaireSommaire

LexiqueLexique

RéfsRéfs

TechsTechs

..

..

..

..

.

..


Documentation et Manuels Documents du web

liste de balises HTML

code des couleurs RVB

code HTML des caractères ISO

liste des extensions de fichiers (formats)

Expressions Rationnelles

Manuels. Expressions régulières sous Em

acs

Recherche et remplacement sous Emacs

compléments Emacs

grep sous Unix

Tutoriaux du Web W3C : http://www.w3schools.com/

CSS Play : http://www.cssplay.co.uk/index

Zen Garden :

http://www.csszengarden.com/tr/francais/

CSS in10 steps :

http://www.barelyfitz.com/screencast/html-training/css/positioning/

10 steps to better CSS:

http://shapeshed.com/journal/10_steps_to_better_css/

SommaireSommaire

LexiqueLexique

RéfsRéfs

TechsTechs

..

..

..

..

.

..


Références Web

SommaireSommaire

LexiqueLexique

RéfsRéfs

TechsTechs

..

..

..

..

.

..


API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language

Lexique

LexiqueLexique


TechsTechs

SommaireSommaire

..

..

..

..

.

..

Paul FranchiSI 4

2014-15


Chap V -


Chap V -



La balise <style> en HTML

Feuilles de style séparées en HTML

Feuilles de style en XML

LESS


La balise <style> en HTML

Feuilles de style séparées en HTML

Feuilles de style en XML

LESS

LexiqueLexique

RéfsRéfs

TechsTechsCascading Style

Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS

CSS2 Références des propriétés

CSS 3 norme

les Styles Multiples en XML

importation de styles W3C.org

CSS 3 implementation

CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: les feuilles de style

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Cascading Style Sheets

Un langage pour définir les styles de balises HTML ou XML des éléments d’une DTD

CSS -1 (1996)

CSS -2 (1998)

CSS 3: ( >1999, en cours: www.css3.info )

Principes Règles de style associées à la structure des documents Feuilles multiples Types de média Attachements alternatifs aux documents

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Tutoriaux, Versions et Navigateurs

CSS -1 (1996) supporté par Netscape et IE version 4.

CSS -2 (1998) supporté par FF1.5 (complet) et IE 6 (partiel)

CSS -3 (>1999, http://www.css3.info/ ) Opera, Safari, FF 3.0 (partiel) et IE 9 ?

CSS sur le Web W3Schools - CSS Tutorial http://www.cssplay.co.uk/ http://www.csszengarden.com/ compatibilité avec les Navigateurs

Learn CSS on HTML.net Learn CSS Tutorial CSS Positionning in 10 steps CSS in 10 sites 10 top Tips in CSS

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: les feuilles de style en cascade

Feuille CSS Collection de Règles

Une règle CSS Sélecteur (balise HTML XML,, élément de

DTD) propriétés (paramètres de style)

Conception CSS Modularité Importation Héritage Masquage Cascade Résolution des "surcharge" par la règle la plus spécifique

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Les Règles

( ( ascendance >? ) * element ( [ attr ( = val )? ] ) * {

( prop : val ; ) *

} ) * Exemples HTML & XML


CSS: Syntaxe (1)

/* CSS pour Xml */

envaleur {

font-style: italic ; font-weight: bold ; }

livre > titre {font-size: 24pt ;}

chapitre > titre {font-size: 20pt ;}

section theoreme {font-color: blue ;}

message [priorite = "haute"] {

font-size: 18pt ; font-color: red ; }

/* CSS pour Html */

body {

font-style: italic ;

color: black ;}

p{

text-align: center ;

font-family: arial ;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Groupes de Règles

selecteur (, selecteur )* {

( prop : val ; ) * }

Les Commentaires : /* blabla */

Exemples HTML & XML


CSS: Syntaxe (2)

/* CSS pour Xml */

livre>titre, chapitre>titre {

font-size: 24pt ;

font-color: blue;

}

/* CSS pour Html */

h1, h2, h3 {

text-align: center ;

color: red;

}

/* CSS pour Html */

p+h3 {

text-align: left ;

}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Tokenization (unités lexicales)ident [-]?{nmstart}{nmchar}*

name {nmchar}+

nmstart [_a-z]|{nonascii}|{escape}

nonascii [^\0-\237]

unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?

escape {unicode}|\\[^\n\r\f0-9a-f]

nmchar [_a-z0-9-]|{nonascii}|{escape}

num [0-9]+|[0-9]*\.[0-9]+

string {string1}|{string2}

string1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\"

string2 \'([^\n\r\f\\']|\\{nl}|{escape})*\'

nl \n|\r\n|\r|\f

Opérateurs, Séparateurs, Commentaires, etc.


CSS: Norme lexicale

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

At Rule: @import ….. ; @font-face { prop: "val"; ... ; } @media { selecteur {prop: "val";} }

Rule: Sélecteur, Bloc

sélecteur (, sélecteur )* { ( propriété : valeur ; ) * }

Sélecteur universel: * type: tagName class (.) et id(#) attribute: [ ] = ~= |= *= $= ^=


CSS: Norme syntaxique

child (>) descendant (' ') sibling (+) pseudo éléments (::) pseudo classe ou

fonction (:) precedence (~)

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Norme syntaxique

Propriété, Valeur identificateur entier et réel mesures et pourcentages relative units:

em: the 'font-size' of the parent font ex: the 'x-height' of the relevant font rem: the 'font-size' of the html font

absolute units: in: inches — 1in is equal to 2.54cm. cm: centimeters mm: millimeters pt: points — 1pt is equal to 1/72nd of 1in. pc: picas — 1pc is equal to 12pt. px: pixel units — 1px is equal to 0.75pt.

body {

font-size: 12px;

text-indent: 3em;

/* i.e., 36px */

}

URL et URI strings couleurs compteurs

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Classe (s) permet d'associer un (ou plusieurs) style(s) à un élément HTML

sélectionné(s) par la valeur de (ou des) l'attribut(s) "class"

Id idem, mais sélectionné par la valeur

de l'attribut "id" (unique)


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; }



<p id= "grand"> en 20pt</p>

<p id= "central"> centré en rouge </p>

<h1 class="center red">

titre au centre et en rouge </h1>

<p class="left"> à gauche </p>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: les SélecteursEl Tous les <E1 >

Parent El les <E1> descendant d’un <Parent>

Parent > El les <E1> fils d’un <Parent>

El + Ef les <Ef> précédés immédiatement d’un <El>

El ~ Ef les <Ef> précédés d’un <El>

El[att] Tous les <E1 att = “xxx“ >

El[att = “val“] les <E1 att = “val“ > et *= ^= $=

El[att~=“val“] les <E1 att = “val1 val val2“ >

El[att |= “val“] les <E1 att = “val-xxx“ >

El#nom les <E1 xxx = “nom“ > où xxx est un attribut de type ID

El:link les <E1> de type link non encore visités

El:visited :hover :active Idem dèja visités, etc.

E1:lang (fr) les <E1 xml:lang= “ fr “ >

:focus :disabled :enabled :first-letter :first-line :root :hover :empty

:first-child :last-child :nth-child(n) :nth-of-type(n) :before :after :not()

* Tous les élements

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS en HTML: .class vs #id

Un attribut "class" permet de définir une classe de style qui peut peut être partagée par plusieurs éléments (balises) du document

L'attribut "id" définit une dénomination unique pour un élément (balise) du document

Un attribut "class" permet de définir une classe de style qui peut peut être partagée par plusieurs éléments (balises) du document

L'attribut "id" définit une dénomination unique pour un élément (balise) du document

<html><head> <style>.center { }#navBar { }</style> </head><body> <div class="center"> </div><div id="navBar"> </div><p class="center"> à centrer </p>

<div id="navBar" class="center" > </div></body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Mis en Page ("Box")

Polices de caractère font-family -style -weight -size

Textes text-align -indent -decoration word-spacing

Couleurs et Fonds color background

Listes List-style-position -image

Tableaux Médias

Mis en Page ("Box")

Polices de caractère font-family -style -weight -size

Textes text-align -indent -decoration word-spacing

Couleurs et Fonds color background

Listes List-style-position -image

Tableaux Médias

left

right

top

bottom

margin

contentpadding

border

CSS: les Propriétés

LexiqueLexique


TechsTechs

SommaireSommaire

..

..

..

..

.

..

Paul FranchiSI 4

2014-15


Chap V -

CSS Méthodologie

Chap V -

CSS Méthodologie

Style inline

Style interne (<style>)

Style externe (séparé)

Styles alternatifs

Styles multiples

Importation de styles

Style inline

Style interne (<style>)

Style externe (séparé)

Styles alternatifs

Styles multiples

Importation de styles

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Evolution 0: les attributs de style Html

<html>

<body color: black ; font-family: arial >

<p text-align: center; color: red; >

texte centré en arial (par héritage) en rouge (par masquage)

</p>

</body>

</html>

HTML, comme il ne faut plus l'écrire !car pas évolutif !

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire



<body><div style=" position: absolute; width: 500px; height: 52px;

z-index:1; left: 100px; top: 24px; layer-background-color: #00FFFF;

border: 5px solid #00FF00; text-align: center; color:red; text-transform: uppercase; font-size: xx-large; font-weight: bold;

"> Grand Titre 1<div style=" text-transform: capitalize;

font-size: x-large; font-weight: normal ">

sous titre 1 </div> </div></body> HTML, peu évolutif !

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Evolution 2 : la balise <style> en Html

<head> <style> div#Titre {

position: absolute; width: 60%; left: 100px; top: 124px; background-color: #CCFFFF; border: 5px; solid #00FF00;

text-align: center; color: red; text-transform: uppercase; font-size: xx-large;font-weight: bold;

}div#sousTitre {

text-transform: capitalize; font-size: x-large; font-weight: normal;}</style> </head>

<body><div id="Titre"> Grand Titre <div id="sousTitre">sous titre avec l'attribut "id" </div></div></body>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire



<html><head> <style>p {text-align: center; color: red;} p.right {text-align: right}p.center {text-align: center}.center {text-align: center}#green {color: green}p#para1{ text-align: left; color: pink}

</style> </head><body ><p> This paragraph will be center-aligned and red-colored. </p><p class="right"> This paragraph will be right-aligned and also red. </p><p class="center"> This paragraph will be center-aligned and also red. </p><h1 class="center"> This heading will be center-aligned but black. </h1><p class="center"> This paragraph will also be center-aligned and red.</p><h2 id="green" class="center" >Subtitle centered in green.</h2><p id="para1"> This paragraph will be left-aligned and pink-colored.</p></body> </html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Les attributs de style Liens en Html



<html> <head>

<style type="text/css">

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

</style></head> <body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited

in the CSS definition in order to be effective!!</p>

<p><b>Note:</b> a:active MUST come after a:hover

in the CSS definition in order to be effective!!</p>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Evolution 3: les feuilles de style séparées

Le(s) lien(s) vers le style CSS dans HTML..\XML_CSS\leftnav.html

..\XML_CSS\rightnav.htm

ici 2 styles alternatifs

Le(s) lien(s) vers le style CSS dans HTML..\XML_CSS\leftnav.html

..\XML_CSS\rightnav.htm

ici 2 styles alternatifs

<html><head> <link rel="stylesheet" href="leftNav.css" type="text/css"

media="screen" /> <link rel="stylesheet" href="printNav.css" type="text/css"

media="print" /></head>

<body> <div id="masthead">  </div><div id="navBar">  </div>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

2 feuilles de style CCS (alternatives)

..\XML_CSS\rightNav.css..\XML_CSS\leftNav.css

2 feuilles de style CCS (alternatives)

..\XML_CSS\rightNav.css..\XML_CSS\leftNav.css


Evolution 3: les feuilles de style séparées

#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;

}

#navBar {float: right; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;

}

#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;

}

#navBar {float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;

}

•css•css

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Le style CSS dans XML cd_catalog.xml

la feuille de style CCS cd_catalog.css




XML et CSS

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="cd_catalog.css"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD>

CATALOG {background-color: #ffffff; width: 100%;}

CD {display: block; margin-bottom: 30pt; margin-left: 0;}

TITLE {color: #FF0000; font-size: 20pt;}

ARTIST {color: #0000FF; font-size: 20pt;}

•css

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

Le style "Table" CSS dans XML Le style "Table" CSS dans XML


XML et CSS

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="tableCatalog.css"?><CATALOG>

<Titre> Mon Tableau de CDs </Titre> <CD> … </CD></CATALOG>

CATALOG {display: table; width: 80%;margin-left: 30px; border: 2px solid; padding: 20px 30px 30px 20px;}CD {display: table-cell; background-color: #00FFFF; border: 2px solid; padding: 20px 30px 30px 20px;}Titre {display: table-caption; font-size:36px; text-align:center;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: les Styles Multiples en HTML Résolution des styles multiples Résolution des styles multiples

<html><head> <link rel="stylesheet" href="Style1.css" /> <link rel="stylesheet" href="Style2.css" /><style>@import "Fontes.css" ; @import "Tables.css" ;.centre{}.urgent {color:red !important }#navBar {color:blue }</style></head><body style='color:black'> <div class="urgent centre" id="navBar"> ...</div></body></html>

style des balises html attributs html ordre des styles CSS par @import CSS par "stylesheet",

balise <style> ordre des propriétés sélecteur plus défini

(qualifications) style par attribut style sauf !important

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: les Styles Multiples en XML Styles multiples (cascading) Styles multiples (cascading)

<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/css" href="monStyle1.css"?>

<?xml-stylesheet type="text/css" href="monStyle2.css"?>

<racine>

<titre> Styles en XHTML et XML</titre>

<html xmlns = " http://www.w3.org/1999/xhtml " >

<body>

<h1> Liens sous XHTML</h1>

<a href=" http://www.essi.fr/~pfz ">

Chez Moi

</a>

</body>

</html>

</racine>

styles prédéfinis et attributs par xmlns: html, xhtml, etc.

CSS par xml-stylesheet (ordre) et qualifications des élements

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Les feuilles de style alternatives

ici 2 styles au choix dans le Navigateur (FF>Affichage>Style de la page>)

ici 2 styles au choix dans le Navigateur (FF>Affichage>Style de la page>)

<html><head> <link title="àGauche" rel="stylesheet"

href="leftNav.css" type="text/css" /> <link title="àDroite" rel="alternate stylesheet"

href="rightNav.css" type="text/css" /></head>

<body> <div id="masthead">  </div><div id="navBar">

 </div>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


XML et CSS Le style CSS dans XML cd_catalog.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>

Transparent 34

•xml









LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


XML & CSS multiples

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet title="Style de base"

href="cd_catalog.css" type="text/css"?>

<?xml-stylesheet title="Planche" rel="alternate"

href="cd_catalog_2.css" type="text/css"?>

<?xml-stylesheet title="Spirale" rel="alternate"

href="cd_catalog_3.css" type="text/css"?>

<CATALOG>

... / ...

</CATALOG>

LexiqueLexique


TechsTechs

SommaireSommaire

..

..

..

..

.

..

Paul FranchiSI 4

2014-15


Chap V -


Chap V -


Boites (Box)TextesPositionnementTablesPseudo élémentsCompléments

Boites (Box)TextesPositionnementTablesPseudo élémentsCompléments

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Propriétés des Boîtes

Boîtes: Dimensions & graphiques valeurs

width max-width min-width "largeur" % auto inherit

height max- height min- height "hauteur" % auto

margin margin-top margin-bottom

margin-left margin-right

"largeur" %

padding padding-top padding-bottom

padding-left padding-right

"largeur" %

border-width

-top-width -bottom-width -left-width -right-width

"largeur" thin medium thick

border-color

-top-color -bottom-color -left-color -right-color

"couleur" transparent

border-style

-top-style -bottom-style -left-style -right-style

none hidden

dotted dashed solid

border -top -bottom -left -right none hidden

dotted dashed solid

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Propriétés des Textes

Textes valeurs

text-indent indentation %

text-align left right center justify inherit chaine

text-decoration underline overline line-through blink none inherit

text-shadow couleur distance1 distance2 distance3 none inherit

letter-spacing normal distance inherit

word-spacing normal distance inherit

text-transform capitalize uppercase lowercase none inherit

direction ltr rtl

white-space normal pre nowrap inherit

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Propriétés ("positionning")

Boîtes: Positions valeurs

display block

none

inline list-item compact

table table-row table-col table-cell …

position static relative absolute fixed

top bottom left right "longueur" % auto inherit

float left right none inherit

clear left right none both inherit

overflow visible hidden scroll auto

clip rect(,,,,) auto

visibility visible hidden collapse inherit

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : positionnement/dimensionnement

Box Model: margin, border, padding, contentwidth, height, box-sizing: content vs bordervertical-align: & text-align:display: block vs inline vs box vs none"Container"position: static // normal flow position: relative

top, right, bottom, left // position en flow normalfloat: & clear:position: absolute

top, right, bottom, left // containerposition: fixed

top, right, bottom, left // window"stack order"

z-index: :hover

Le "container " d’un élément en position absolue est l’ancêtre le plus proche qui est en position absolue, relative ou fixe.

Le "container " d’un élément en position absolue est l’ancêtre le plus proche qui est en position absolue, relative ou fixe.

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Positionnement (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <style type="text/css">

h2.static { position: static; left: 113;}

h2.decGauche { position: relative; left: -20px;}

h2.courante { position: relative; left: 113;}

h2.centre { position: absolute; top: 50%; left:50%;}

h2.fixe { position: fixed ; top: 100; left: 200;}

</style></head>

<body style="color:#FF0000">

<h2 class="static"> Titre en position STATIC dans le "layout"</h2>

<h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2>

<h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2>

<h2 class="centre"> Titre CENTRé par rapport au père </h2>

<h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

<html>

<head> <style type="text/css">

img{position:absolute;}

img.x1{left:100px; top:100px; z-index:-1}



</style></head>

<body>

<h1>This is a Heading</h1>

<img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380">



<p>Default z-index is 0. z-index -1 has lower priority.</p>

</body> </html>


CSS: Z-Index

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Z-Index avec "iframe"

<html>

<body>

<iframe style="width:75%;

height:300px;

background-color: #FFFF99"

name="view"

src="CSSzIndex.html">

</iframe>

</body>

</html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS:float & clear

<html><head> <style type="text/css">

img.droite{float: right ; padding-left:20px;}

img.gauche{float: left ; padding-right:20px;}

.break { clear: both ;}

</style></head><body>

<p>

PARAGRAPHE 1 <br/>

<img class="droite" src="xpath.gif" width="112" height="84" />

This is some text. This is some text. This is some text. ….

</p><p>

PARAGRAPHE 2 <br/>

<img class="gauche" src="xpath.gif" width="112" height="84" />

This is some text. ……

</p><p class="break">

PARAGRAPHE 3 <br/>

This is some text. This is some text. This is some text. …..

</body> </html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire

<body>

<div id="HH">

<div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div>

<div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div>

<div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div>

</div> 

<div id="VG"> <p> "fixed" V G </p>

<div id="RUBRIQUE"> ..... </div>

<div id="RUBRIQUE"> ..... </div>

</div> 

<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> 

</div> 

</body>


CSS: modèle de page Web zones fixes, relatives & absolues

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: unités, pseudo-éléments opacité

CATALOG {display: block; background-color: #cccccc; width: 100%; }

CATALOG:before {

content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; }

CD {

display: inline-block; background-image: url(../IMAGES/cd.gif);

margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt;

border: cyan 5px ridge; -moz-border-radius: 50%; }

CD:hover {

background-image: url(../IMAGES/cd.png); background-position: 0px 4px;

height: 248px; width: 246px; font-size: 11pt; }

CD>ARTIST, CD>TITLE {

display:block ; margin-top: 1em; margin-left: auto; margin-right: auto;

padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; }

CD>TITLE {

width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px;

color: #00FFFF;font-style:italic; text-align:center ;

filter:alpha(opacity=80); opacity:0.8; }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Propriétés des Tables

Tables valeurs

display table inline-table

table-row-group table-column-group

table-header-group table-footer-group

table-caption

table-row table-cell

caption-side top bottm left right inherit

table-layout auto fixed inherit

border-collapse

collapse separate inherit

border-spacing

dist-horiz dist-vertic inherit

empty-cells show hide inherit

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: des Tables sans la balise <table> (v1)

<html> <head> <style type="text/css">

.grdMere{display: table;}

.mere{display: table-row;}

.fille{display: table-cell;}

</style></head>

<body>

<div class="grdMere">

<div class="mere">

<p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p>

</div>

<div class="mere">

<p class="fille"> F21</p> <p class="fille"> F22</p>

</div>

</div>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: des Tables sans la balise <table> (v2)

<html> <head> <style type="text/css">

.grdMere{display: table;}

.grdMere>div{display: table-row;}

.grdMere>div>p{display: table-cell;}

</style></head>

<body>

<div class="grdMere">

<div>

<p> F11</p> <p > F12</p><p> F13</p>

</div>

<div>

<p > F21</p> <p > F22</p>

</div>

</div>

</body></html>

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Exemple: Bibliographie

placement sans <table> avec display: ou float: placement sans <table> avec display: ou float:

<html><head> <link rel="stylesheet"

href="bib.css" type="text/css" /> </head><body> <h1> Bibliographie "Documents"</h1><div class="Livre" > Comprendre XSLT<img src="../../BIBLIO/HTML2841771571.jpg"

width="54" height="90"> <ul> <em> Auteurs:</em> <li> <a href="">Bernard Amann</a></li> <li> <a href="">Philippe Rigaux</a></li> </ul> <span>2002</span><span>Ed: O'REILLY</span></div></body></html>

body > h1 { text-align: center; }

Livre {display: inline-block;width: 22%;background-color: #99FFFF;border: #0000FF medium ridge;margin: 10px ; }

Livre ul { padding-left: 0px;text-align: center; }

Livre li { list-style: none; }

img { float: right ; }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: divers compléments

contenu

pseudo-élements :before :after

textes :first-line :first-letter white-space

compteurs

contenu

pseudo-élements :before :after

textes :first-line :first-letter white-space

compteurs

Exercice[ref]:before {content: "Exercice - " attr(ref);}

Paragraph:first-line {font-style:"italic";}Paragraph:first-letter {font-size:+200%;}SourceLP {white-space:pre;}

{content:"string" attr(A) url(" ") counter(C);}

Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: divers compléments

opacité (chacun sa version !)

media

pagination

opacité (chacun sa version !)

media

pagination

@media print { #footer , #menu {display: none;} #container { width: 92%;

opacity:1.0; /* obligatoire pour imprimer */ } }

Chapitre { page-break-after: always; }Exemple { page-break-inside: avoid ;}

zone {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : importation de styles W3C.org

<link rel="alternate stylesheet" title="Ultramarine" href="http://www.w3.org/StyleSheets/Core/Ultramarine">

<link rel="alternate stylesheet" title="Chocolate" href="http://www.w3.org/StyleSheets/Core/Chocolate">

<link rel="alternate stylesheet" title="Midnight" href="http://www.w3.org/StyleSheets/Core/Midnight">

<link rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle">

<link rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist">

<link rel="alternate stylesheet" title="Swiss" href="http://www.w3.org/StyleSheets/Core/Swiss">

<link rel="alternate stylesheet" title="Traditional" href="http://www.w3.org/StyleSheets/Core/Traditional">

<link rel="alternate stylesheet" title="Steely" href="http://www.w3.org/StyleSheets/Core/Steely">

<link rel="alternate stylesheet" title="Forest (by David Baron)" href="http://dbaron.org/style/forest">

<link rel="stylesheet" title="Plain (by David Baron)" href="http://dbaron.org/style/plain">

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7

doctype en 1ère ligne transitional strict

bugs récurrents margin, padding div float border background etc…

non supportés :hover display: table

hacks CSS

doctype en 1ère ligne transitional strict

bugs récurrents margin, padding div float border background etc…

non supportés :hover display: table

hacks CSS

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

margin: 9px !important; /* FF only */

/margin: 7px; /* IE7 only */

-margin: 5px; /* IE6 only */

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


HTML - Commentaires Conditionnels IE

Syntaxe d'un commentaire conditionnel positif: 

Syntaxe d'un commentaire conditionnel négatif: <![IGNORE[]]> HTML  version non valide pour XHTML et XML

Conditions: IE : Toutes versions d'IE lt IE version: Versions d'IE inférieures à version lte IE version: Versions d'IE inférieures ou égales à version IE version: La version version d'IE gte IE version: Versions d'IE supérieures ou égales à version gt IE version: Versions d'IE supérieures à version version: IE 5, 5.5, 6 ou 7.

Utile pour adapter les styles CSS aux versions IE

Syntaxe d'un commentaire conditionnel positif: 

Syntaxe d'un commentaire conditionnel négatif: <![IGNORE[]]> HTML  version non valide pour XHTML et XML

Conditions: IE : Toutes versions d'IE lt IE version: Versions d'IE inférieures à version lte IE version: Versions d'IE inférieures ou égales à version IE version: La version version d'IE gte IE version: Versions d'IE supérieures ou égales à version gt IE version: Versions d'IE supérieures à version version: IE 5, 5.5, 6 ou 7.

Utile pour adapter les styles CSS aux versions IE

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Ilot XML dans HTML

<html>

<body>

<xml id="MonIlotXML" src="data.xml"></xml>

<table border="1" datasrc="#MonIlotXML">

<tr>

<td><span datafld="NOM"></span></td>

<td><span datafld="PRENOM"></span></td>

</tr>

</table>

</body>

</html>

LexiqueLexique


TechsTechs

SommaireSommaire

..

..

..

..

.

..

Paul FranchiSI 4

2014-15


Chap V -

CSS 3

Chap V -

CSS 3

Support des Navigateurs

Survol, extensions Mozila

@keyframes, animations

Media Queries

Boites flexibles Mozilla

Support des Navigateurs

Survol, extensions Mozila

@keyframes, animations

Media Queries

Boites flexibles Mozilla

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : Overview & Web support (2011)

CSS 2.1 features Units Importance At-rules Basic selectors Pseudo-classes Pseudo-elements Basic properties Print properties Conformance

CSS 3 features Units At-rules Basic selectors Pseudo-classes Pseudo-elements Basic properties Print properties

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: normalisation en cours (modules)

Completed work CSS Level 2 CSS Level 1 Selectors CSS Color

High Priority CSS Level 2 Re

vision 1

CSS Namespaces

CSS Backgrounds

CSS Borders CSS Multi-colu

mn Layout

Media Queries

Medium Priority CSS Snapshot 200

7 CSS Snapshot 201

0 CSS Mobile Profile

2.0

CSS Marquee CSS Paged Media CSS Print Profile CSS Values and U

nits

CSS Cascading and Inheritance

CSS Text CSS Writing Modes CSS Line Grid CSS Ruby CSS Generated Co

ntent for Paged Media

Medium Priority CSS Fonts CSS Basic Box Model CSS Template Layout CSS Speech CSS Basic User Interfac

e

CSS Scoping CSS Grid Positioning CSS Grid Layout CSS Regions CSS Flexible Box Layou

t

CSS Image Values CSS 2D Transformation

s

CSS 3D Transformations

CSS Transitions CSS Animations

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: propriétés en fonction

bordures: arrondies, dégradées, ombrées

effets de texte: ombre, fontes, etc.

(re) dimensionnement:

.text_shadow { color: #897048; background-color: #fff; text-shadow: 2px 2px 2px #ddccb5;}

.border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048;}

.ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto;}

.border_shadow { -webkit-box-shadow: 10px 10px 5px #888;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: propriétés en fonction

backgrounds: size, position, multiples

multi-colonnes: span, gap, rule

.multiplecolumns { -moz-column-width: 130px; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5;}

.backgroundsize { background: url(logo.gif); -webkit-background-size: 137px 50px; -khtml-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px; background-repeat: no-repeat;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: normalisation en cours

transform: rotate, translate, skew, scale

transition: div.pub {/* OK ss SAFARI, mais en attente de FF 3.7 */

-webkit-transition: -webkit-transform 3s ease-in;-moz-transition: -moz-transform 3s ease-in;-webkit-border-radius: 3em;}

.top { -moz-transform: rotate(-45deg) skew(15deg, 15deg);}div.polaroid:hover {

/* FF SAFARI OPERA CHROME */-webkit-transform: rotate(0deg) scale(1.25) ;-moz-transform: rotate(0deg) scale(1.25);transform: rotate(0deg) scale(1.05);}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: normalisation en cours

@keyframes animation-

delay direction duration iteration-count name play-state timing-function fill-mode

resize box-sizing

border- content- padding-

h1 { animation-duration: 3s; animation-name: slidein;}@keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%;}}@-webkit-keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%;}}

/* support Firefox, WebKit, Opera and IE8+ */.example {

resize: both; -moz-box-sizing: border-box; box-sizing: border-box;}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire



@media print screen projection tv braille aural all

@media print { #menu, #footer, aside { display:none; } body { font-size:120%; color:black; } }

«A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.»

«A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.»

@media screen and (max-width: 640px) { .bloc { display:block; clear:both; } }

logical and not only

media features

min- max-

width height color aspect-ratio resolution

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: Boites flexibles (Mozilla/XUL)

« Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML . »

« Le modèle de boite flexible CSS3 permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML . »

display: flex | inline-flex flex-flow: <‘flex-direction’> || <‘flex-wrap’> flex-directionflex-direction: row | row-reverse |

column | column-reverse flex-wrap: nowrap | wrap | wrap-reverse order: integer justify-content: flex-start | flex-end | center | space-

between | space-around align-items: flex-start | flex-end | center | baseline |

stretch align-content: flex-start | flex-end | center | space-

between

#main { min-height: 800px; display: -webkit-flex;display: flex; -webkit-flex-flow: row;flex-flow: row; } #main > article {; -webkit-flex: 3 1 60%;flex: 3 1 60%; -webkit-order: 2; order: 2; }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: Boites flexibles ("Holly Grail")

@media all and (max-width: 640px) {#main, #page {-webkit-flex-flow: column; flex-flow: column; flex-direction: column; }#main > article, #main > nav, #main > aside { /* Return document order */ -webkit-order: 0; order: 0; } }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: Mozilla Extensions

-moz-background-clip -moz-background-inline-policy

-moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-start-width -moz-box-align -moz-box-direction -moz-box-flex -moz-box-flexgroup -moz-box-ordinal-group -moz-box-orient -moz-box-pack -moz-box-sizing -moz-column-count-moz-column-gap -moz-column-width -moz-column-rule Gecko

1.9.1 -moz-column-rule-width

Gecko 1.9.1 -moz-column-rule-style

Gecko 1.9.1 -moz-column-rule-color

Gecko 1.9.1 -moz-float-edge

-moz-force-broken-image-icon

-moz-font-feature-settings Gecko 2.0

-moz-font-language-override Gecko 2.0

-moz-force-broken-image-icon -moz-image-region -moz-margin-end -moz-margin-start -moz-opacity Obsolete -moz-outline Obsolete -moz-outline-color Obsolete -moz-outline-offset Obsolete -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -moz-outline-style Obsolete -moz-outline-width Obsolete -moz-padding-end -moz-padding-start -moz-stack-sizing Gecko 1.9.1 -moz-tab-size Gecko 2

-moz-transform Gecko 1.9.1 -moz-transform-origin

Gecko 1.9.1 -moz-transition Gecko 2 -moz-transition-delay Gecko

2 -moz-transition-duration

Gecko 2 -moz-transition-property

Gecko 2 -moz-transition-timing-function

Gecko 2 -moz-user-focus -moz-user-input -moz-user-modify -moz-user-select -moz-window-shadow Gecko

1.9.1 -moz-initial -moz-appearance-moz-win-browsertabbar-toolbox

New in Firefox 3 -moz-win-communications-toolbox

New in Firefox 3 -moz-win-media-toolbox New

in Firefox 3 -moz-mac-unified-toolbar

New in Firefox 3.5 etc …

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: spécial Mozilla

opacité & coins arrondis

multi-colonnes

bordures multiples

.col_3 { -moz-column-count: 3;

-moz-column-gap: 10%;-moz-column-width: 25%;

}

Bouton:hover {-moz-border-bottom-colors: #FF0000 #00FF00 #0000FF ;-moz-border-right-colors: #FF0000 #00FF00 #0000FF ;}

.joliBouton {background-image: url(sourire.png);border:#0000FF thick ridge ;-moz-border-radius: 25px ;-moz-opacity : 0.85 ;

}

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: spécial Mozilla

:not() :root :target

backgrounds.linearDiagonal {background: -moz-linear-gradient(left top, blue, white); }.linearMultiple {background: -moz-linear-gradient(left, red, orange, yellow, green, blue); } .radialEllipse {background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white); } .radial {background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));} .radialRepetition {background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); }

#onglets li div { display: none; } #onglets > li:target { color: #FF0000; font-size: 24px ; }#onglets > li:target > div { display: block; } #onglets > li:not(:target) > div { display: none; }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS 3: Tutoriaux du Web

CSS3 please!

Animations avec CSS transform Transition Timing Function

Sliding content 3D Flipping Accordions (widgets)

50 animations with CSS3 ( and Jquery ) CSS3 Animation Browser supports

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


Sur CSS

LESS permet la réutilisation de régles CSS avec

des variablesdes mixinsdes psudo_classespar héritage

comme pre processeur avec

lessc styles.less > styles.css dans le navigateur avec

<script src="less.js" type="text/javascript"> </script>

SASS

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : Méthodologie "Diviser pour ..." : plusieurs feuilles CSS pour séparer des niveaux ou

domaines de style: appli1 ,...,applin, fontes, layout, media, etc. Réutiliser "autant que possible" vos CSS ou celles des autres (après

"validation") Partir avec de bonnes fondations ("nettoyer le terrain") Utiliser des CSS Conditionnelles

Coder "défensif" Eviter les "hacks" Les bonnes habitudes:

Formater et colorer votre source Commenter souvent, commenter "intelligent" Tester, tester, et reTester Lire le Web, mais "défensivement"

"Diviser pour ..." : plusieurs feuilles CSS pour séparer des niveaux ou domaines de style: appli1 ,...,applin, fontes, layout, media, etc.

Réutiliser "autant que possible" vos CSS ou celles des autres (après "validation")

Partir avec de bonnes fondations ("nettoyer le terrain") Utiliser des CSS Conditionnelles

Coder "défensif" Eviter les "hacks" Les bonnes habitudes:

Formater et colorer votre source Commenter souvent, commenter "intelligent" Tester, tester, et reTester Lire le Web, mais "défensivement"

/* nettoyer le terrain*/* { margin: 0; padding: 0; border: 0; }



#left-content { float: left; }

#left-content * { margin-left: 10px; }

#left-content { float: left; margin-left: 10px; }

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : savoir-faire (sans script)

Panneaux (fixes, relatifs, absolus) sans "table" Cadres sans "frame", ni "iframe" Widgets avec ":hover"

Menus (surgissants, déroulants, scrollants, arborescents, etc) Boutons (pseudo-"radio") Effets : "popup", loupe, zoom, etc.

Zones dédiées Barres de Navigation "Sticker" ou "PostIt"

Texte en multicolonnes Génération de contenu et puces (numérotation) Opacité Onglets (avec CSS3:target) Mode "Impression" Page Web dédiées (multi-panneaux):

Explorateur: accès par index, listes, aperçus, et visualisation Atelier de Développement: code source, visualisation, documentation

Panneaux (fixes, relatifs, absolus) sans "table" Cadres sans "frame", ni "iframe" Widgets avec ":hover"

Menus (surgissants, déroulants, scrollants, arborescents, etc) Boutons (pseudo-"radio") Effets : "popup", loupe, zoom, etc.

Zones dédiées Barres de Navigation "Sticker" ou "PostIt"

Texte en multicolonnes Génération de contenu et puces (numérotation) Opacité Onglets (avec CSS3:target) Mode "Impression" Page Web dédiées (multi-panneaux):

Explorateur: accès par index, listes, aperçus, et visualisation Atelier de Développement: code source, visualisation, documentation

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


« Responsible » Web development

jquery.js modernizr.js detects browser features

normalize.css CSS resets for modern standards (HTML5)

LESS extends CSS with dynamic behavior.

selectivizr.js CSS adaptation for IE

Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js Joomla, Wordpress Jquery UI jQuery UI is a curated set of user interface

interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Foundation "The most advanced responsive front-end framework in the world."

jquery.js modernizr.js detects browser features

normalize.css CSS resets for modern standards (HTML5)

LESS extends CSS with dynamic behavior.

selectivizr.js CSS adaptation for IE

Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js Joomla, Wordpress Jquery UI jQuery UI is a curated set of user interface

interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Foundation "The most advanced responsive front-end framework in the world."

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


« Responsible » Fluid Design

Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones.

Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

.

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones).

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones).

LexiqueLexique

RéfsRéfs


Sheets

Syntaxe

les Sélecteurs

le modèle de boite

sXML et CSS


CSS 3 norme




CSS 3 Tutoriaux

class vs #id

Méthodologie

CSS 3 -moz

SommaireSommaire


CSS : Une galerie Photo sous DW

Développement par étapes sous DW <div > <span> <table> #id et .classe en position absolue Areas

MAIN HEAD NAVIGATION

Liens internes (ancres) externes (hyperliens)

Menus & Boutons Images Effets CSS version XML+XSL

version "Doc Exemples"

Développement par étapes sous DW <div > <span> <table> #id et .classe en position absolue Areas

MAIN HEAD NAVIGATION

Liens internes (ancres) externes (hyperliens)

Menus & Boutons Images Effets CSS version XML+XSL

version "Doc Exemples"

CSSCSSCSS

XSL