View
1.943
Download
1
Category
Preview:
Citation preview
Jean-Christophe Carius
8, rue Lucien Leuwen 75020 Paris 06 07 58 82 82 jccarius@newsyntax.com
conseil conception design réalisation
Création internet & management web
Formation CSS avancée2011
ORGANISME PLB Formations informatiques et Management
MISSION Formation
PUBLIC Ingénieurs en informatique
Formation CSS Avancée
✴ Introduction
✴ HTML
• Dtd
✴ HTML5
✴ CSS 2
• syntaxe
• sélecteurs, propriétés, valeurs
• modèles de boîte et flux de positionnement
• cascade
✴ CSS 3
✴ Compatibilité
✴ Bonnes pratiques
✴ Bibliothèques
IntroductionFormation CSS avancée
HTML4 / éléments (strict)Formation CSS avancée
éléments de type bloc
• ADDRESS• BLOCKQUOTE• DIV• DL• FIELDSET• FORM• H1, H2, H3, H4, H5, H6• HR• NOSCRIPT• OL• P• PRE• TABLE• UL• DD• DT• LI• TBODY• TD• TFOOT• TH• THEAD• TR
éléments de type en-ligne
• A• ABBR• ACRONYM• B• BIG• BR• CITE• CODE• DFN• EM• I• KBD• LABEL• Q• SAMP• SMALL• SPAN• STRONG• SUB• SUP• TT• VAR
éléments de type bloc ou en-ligne
• BUTTON• DEL• IFRAME• INS• MAP• OBJECT• SCRIPT
Le type varie selon le contexte. Ils sont en-ligne s'ils apparaissent dans un élément en ligne ou dans un <P>.
Éléments de 1er niveau Éléments d'entêtes
Éléments de type bloc générique ListesTableaux
Éléments en ligne spéciaux Formulaires
Éléments de phrasesÉléments de style de fontes
éléments de type en-ligne remplacé
• IMG• TEXTAREA• SELECT• INPUT
peuvent recevoir des valeurs pour ‘height’ et ‘width’
http://www.htmlhelp.com/reference/html40/olist.html+
http://en.wikipedia.org/wiki/Quirks_mode+
HTML / DTDFormation CSS avancée
HTML 4.01
strict
transitional
frameset
XHTML 1.0
strict
transitional
frameset
MODE "QUIRKS"
MODE STRICT
http://hsivonen.iki.fi/doctype/
http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html
http://www.w3.org/QA/2002/04/valid-dtd-list.html http://www.w3.org/2010/04/xhtml10-strict.html
HTML5Formation CSS avancée
Flow
Heading
Sectioning
InteractivePhrasing
Embedded
Metadata
<!DOCTYPE html>
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html+http://dev.w3.org/html5/spec/Overview.html#kinds-of-content
http://dev.w3.org/html5/html4-differences/#new-elements
CSS 2 / Sources et préséanceFormation CSS avancée
CSS Utilisateur
CSS "User agent"
CSS Auteur
<p style="color: red"></p>
style en-ligne
<head><link rel="stylesheet" href="styles.css" /><style type="text/css">@import url('styles2.css');p { color: blue; }</style>
</head>!important
!important inverse l'ordre de priorité entre Auteur et Utilisateur
feuille de style
@import toujours AVANT toute règle de la feuille de style contenante.
+ http://www.w3.org/TR/CSS21/http://www.w3.org/Style/CSS/
CSS 2 / mediaFormation CSS avancée
<link rel="stylesheet" media="screen, print" href="impression.css"> @import url('impression.css') print, embossed; @media print { p { color: red } }
embossed impression braillebraille appareils braille à retour tactile
all tout appareil
aural synthétiseurs de parole
handheld appareils portatifs (mobile)print support paginé, aperçu avant impression
projection projecteurs, impressions sur transparents
screen moniteurs couleurs
tty télétype, terminaux ou appareils aux capacités d'affichage réduites
tv télévision (basse résolution, couleur, défilement des pages limité, sonorisé)
+ http://www.w3.org/TR/CSS21/media.html#media-groups
CSS 2 / Syntaxes et règles de baseFormation CSS avancée
#bloc p { color: blue ; background: url('doss/image.png') }
bloc de déclarationsélecteur
URI et nom defontes: sensiblesà la casseURI absolues ou relatives au fichier css
+
valeur propriété valeur
noms de classes, ids: sensibles à la casse[A-Za-z0-9] plus tiret (-) et souligné (_) excepté au début (également pour [0-9])
noms de balise et mots clés CSS:insensibles à la casse
propriété
http://www.w3.org/TR/CSS21/syndata.html
CSS 2 / SélecteursFormation CSS avancée
* sélecteur universel
E sélecteur de type
E F sélecteur descendant
E:hoverE:activeE:focus
pseudo-classes dynamiques
E.test sélecteur de classe
E#test sélecteur d'identifiant
E,F regroupement de sélecteur
E > F sélecteur d'enfant
E:linkE:visited
pseudo-classes de lien
E:first-lineE:first-letterE:beforeE:after
pseudo-éléments
E + F sélecteur adjacent
E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="bar"]
sélecteurs d'attribut
E:lang(c) pseudo-classe de langue
+ http://www.w3.org/TR/CSS21/selector.html#pattern-matching
CSS 2 / PropriétésFormation CSS avancée
• font[-family, -size, -style, -variant, -weight]
Propriétés de fonte
•display•position• top• left• right•bottom• z-index•overflow• clip• visibility
Propriétés de formatage visuel et d'effets visuels
•border• clear•float•height•max-height•min-height•max-width•min-width•width•padding•margin
Propriétés de boîte
• color•background
[-color, -image, -repeat, -position, -attachment]
Propriétés de couleur et de fond
• cursor•outline• content
Propriétés d'interface utilisateur
• list-style[-type,-image,-position]
Propriétés de classification
•direction• letter-spacing•word-spacing• line-height• vertical-align• text-align• text-decoration• text-indent• text-transform•white-space
Propriétés de texte
•border-spacing• empty-cells•border-collapse• caption-side
Propriétés de tableau
+ http://newsyntax.com/TableauProprietesCss
CSS 2 / Modèle de boîteFormation CSS avancée
+http://www.renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/
http://www.quirksmode.org/css/box.html
margin-top
border-bottom
padding-top
width
padding-bottom
margin-bottom
heig
ht
padd
ing-
left
bord
er-le
ft
mar
gin-
left
border-top
padding-right
border-right
margin-right
contenu
contenuimage de fond
couleur de fond
http://www.w3.org/TR/CSS21/box.html
CSS 2 / Schémas de positionnementFormation CSS avancée
Flux normal Flux flottantFlux absolu
Inclut le formatage en bloc des boîtes de bloc, le formatage en-ligne des boîtes en-ligne, le positionnement relatif des boîtes de bloc ou en-ligne
Dans ce modèle, une boîte est complètement retirée du flux normal (elle n'a pas d'influence sur les éléments de même degré de parenté survenant après elle), et est positionnée en fonction d'un bloc conteneur.
Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, puis elle en est extirpée et repoussée le plus possible vers la droite ou la gauche. Le contenu peut s'écouler le long d'un flottant.
+ http://css.maxdesign.com.au/floatutorial/
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
CSS 2 / 13 propriétés pour la mise en pageFormation CSS avancée
display inline | block | inline-block | none | inherit | table | table-row | table-cell
heightmax-heightwidthmax-width
<longueur> | <pourcentage> | auto | inherit
position static | relative | absolute | fixed | inherit
lefttoprightbottom
<longueur> | <pourcentage> | auto | inherit
z-index auto | <entier> | inherit
floatclear
left | right | none | inherit
CSS 2 / L'ordre de cascadeFormation CSS avancée
tri par origine Auteur > Utilisateur > 'User agent'
tri par spécificité style en ligne nbr d'IDs nbr d'attr. et pseudo-classes nbr d'éléments
0 ou 1 0 ou n 0 ou n 0 ou n
tri par poids !important Utilisateur > Auteur > 'User agent'
tri par ordre d'arrivée la dernière survenue l'emporte
http://www.w3.org/TR/CSS21/cascade.html#cascade+
CSS 3 / Aperçu des évolutionsFormation CSS avancée
+
E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:empty
pseudo-classes structurelles
E:enabledE:disabledE:checkedE:indeterminate
pseudo-classes d'état d'élément d'interface
E::first-lineE::first-letterE::beforeE::after
pseudo-éléments
E[foo^="bar"]E[foo$="bar"]E[foo*="bar"]E[ns|attr]
sélecteurs d'attribut
E:target
pseudo-classe d'ancre
E::selection
pseudo-élément de fragment d'interface
E:contains('foo')
pseudo-classe de contenu
E:not(s)
pseudo-classe de négation
E ~ F
sélecteur d'adjacence indirect
border-radiusborder-imagebox-shadowbox-sizing
Propriétés de boîte
opacity
Propriétés de formatage visuel et d'effets visuels
background (multiple)background-originbackground-size
Propriétés de couleur et de fond
text-shadow
Propriétés de texte
@namespaceAnimationsColumnsgradient
counter-incrementcounter-reset
Propriété de classification
font-size-adjustfont-stretch
Propriété de fontes
http://www.w3.org/TR/css3-selectors/#changesFromCSS2
CSS / CompatibilitéFormation CSS avancée
+http://caniuse.com/http://www.quirksmode.org/compatibility.html
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
http://www.positioniseverything.net/explorer.htmlhttp://www.positioniseverything.net/ie-primer.html
CSS / Bonnes pratiquesFormation CSS avancée
+ http://code.google.com/intl/fr-FR/speed/page-speed/docs/rendering.html
✴ Supprimer les règles css inutilisées
✴ Éviter les sélecteurs correspondants à un grand nombre d'éléments
• règle avec sélecteur universel (*) à la clé• règle avec sélecteur d'élément à la clé• règle avec des sélecteurs sur-qualifiés• :hover sur d'autres éléments que A (ie8)
✴ Éviter les sélecteurs d'enfants
✴ Placer <link> st <style> dans <head> et non pas dans <body>
✴ indiquer la taille des images
✴ 'minify css'
✴ Réunir toutes les règles externes dans un seul fichier
Google Page Speed
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
'Sprite' pour images réactives
CSS / Bibliothèques, 'Frameworks'Formation CSS avancée
+ http://www.blueprintcss.org/
http://developer.yahoo.com/yui/3/http://960.gs/
http://www.yaml.de/en/http://code.google.com/p/ie7-js/http://api.jquery.com/category/traversing/
http://api.prototypejs.org/dom/dollar-dollar/
http://sizzlejs.com/
moteurs javascript de sélecteurs cssmoteurs javascript de compatibilité
systèmes de grilles css
moteur d’affichage de fontes non système
http://www.google.com/webfonts
960 Grid System, Google Web FontsFormation CSS avancée
+ http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/
http://www.w3avenue.com/2009/05/04/list-of-really-useful-tools-for-css-developers/
Yaml, YuiFormation CSS avancée
+http://developer.yahoo.com/yui/selector/
http://www.webtoolkit.info/css-clearfix.html
Prototype, Script.aculo.us, Sizzle, JQuery, JQueryuiFormation CSS avancée
+ http://selectivizr.com/
http://gradients.glrzad.com/
http://docs.jquery.com/Release:jQuery_1.3
PerformancesFormation CSS avancée
+ http://www.youtube.com/watch?v=AWF7ZzPyagE&feature=relmfu
http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=related
Jean-Christophe Carius 8, rue Lucien Leuwen 75020 Paris 06 07 58 82 82 jccarius@newsyntax.com
Création internet & management web
Recommended