Jean-Christophe Carius                         Création internet & management web                          conseil     con...
Formation CSS Avancée ✴   Introduction ✴   HTML     •   Dtd ✴   HTML5 ✴   CSS 2     •   syntaxe     •   sélecteurs, propri...
Formation CSS avancéeIntroduction
Formation CSS avancéeHTML4 / éléments (strict) éléments de type bloc                 éléments de type bloc                ...
Formation CSS avancéeHTML / DTD                                          MODE "QUIRKS"                                    ...
Formation CSS avancéeHTML5                                            <!DOCTYPE html>                                     ...
Formation CSS avancéeCSS 2 / Sources et préséance                  CSS "User agent"                                       ...
Formation CSS avancéeCSS 2 / media                                  <link rel="stylesheet" media="screen, print" href="imp...
Formation CSS avancéeCSS 2 / Syntaxes et règles de base    sélecteur                                      bloc de déclarat...
Formation CSS avancéeCSS 2 / Sélecteurs                                                                    E:first-line   p...
Formation CSS avancéeCSS 2 / PropriétésPropriétés de fonte                     Propriétés de texte           Propriétés de...
Formation CSS avancéeCSS 2 / Modèle de boîte                                                                              ...
Formation CSS avancéeCSS 2 / Schémas de positionnement    Flux normal                             Flux absolu             ...
Formation CSS avancéeCSS 2 / 13 propriétés pour la mise en pagedisplay    inline | block | inline-block | none | inherit |...
Formation CSS avancéeCSS 2 / Lordre de cascade tri par poids !important Utilisateur > Auteur > User agent tri par origine ...
Formation CSS avancéeCSS 3 / Aperçu des évolutionspseudo-classes structurelles   pseudo-élément                sélecteurs ...
Formation CSS avancéeCSS / Compatibilité+     http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_S...
Formation CSS avancéeCSS / Bonnes pratiques Google Page Speed                                              Sprite pour ima...
Formation CSS avancéeCSS / Bibliothèques, Frameworks                                                            moteurs ja...
Formation CSS avancée960 Grid System, Google Web Fonts+     http://net.tutsplus.com/articles/news/a-detailed-look-at-the-9...
Formation CSS avancéeYaml,Yui+     http://www.webtoolkit.info/css-clearfix.html      http://developer.yahoo.com/yui/selector/
Formation CSS avancéePrototype, Script.aculo.us, Sizzle, JQuery, JQueryui+     http://selectivizr.com/      http://gradien...
Formation CSS avancéePerformances+     http://www.youtube.com/watch?v=AWF7ZzPyagE&feature=relmfu     http://www.youtube.co...
8, rue Lucien Leuwen75020 Paris                         Jean-Christophe Carius06 07 58 82 82           Création internet &...
Upcoming SlideShare
Loading in …5
×

Formation Css avancée - pédagogie - design internet - Jean-Christophe Carius

2,103
-1

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,103
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Formation Css avancée - pédagogie - design internet - Jean-Christophe Carius

  1. 1. Jean-Christophe Carius Création internet & management web conseil conception design réalisation8, rue Lucien Leuwen75020 Paris Formation CSS avancée 201106 07 58 82 82jccarius@newsyntax.com ORGANISME PLB Formations informatiques et Management MISSION Formation PUBLIC Ingénieurs en informatique
  2. 2. 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
  3. 3. Formation CSS avancéeIntroduction
  4. 4. Formation CSS avancéeHTML4 / éléments (strict) éléments de type bloc éléments de type bloc éléments de type en-ligne ou en-ligne • ADDRESS • A • BLOCKQUOTE Le type varie selon le contexte. Ils sont en- • ABBR • DIV ligne sils apparaissent dans un élément en • ACRONYM • DL ligne ou dans un <P>. • B • FIELDSET • BIG • FORM • BUTTON • BR • H1, H2, H3, H4, H5, H6 • DEL • CITE • HR • IFRAME • CODE • NOSCRIPT • INS • DFN • OL • MAP • EM • P • OBJECT • I • PRE • SCRIPT • KBD • TABLE • LABEL • UL • Q • DD • SAMP • DT • SMALL • LI • SPAN • TBODY • STRONG • TD • SUB • TFOOT • SUP • TH • TT • THEAD • VAR • TRÉléments de 1er niveau Éléments dentêtes éléments de type en-ligne remplacéÉléments de type bloc générique Tableaux Listes • IMG peuvent recevoir des valeurs • TEXTAREA pour ‘height’ et ‘width’Éléments de style de fontes Éléments de phrases • SELECT • INPUTÉléments en ligne spéciaux Formulaires+ http://www.htmlhelp.com/reference/html40/olist.html
  5. 5. Formation CSS avancéeHTML / DTD MODE "QUIRKS" MODE STRICT HTML 4.01 XHTML 1.0 strict frameset strict frameset transitional transitional+ 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://en.wikipedia.org/wiki/Quirks_mode http://hsivonen.iki.fi/doctype/ http://www.w3.org/2010/04/xhtml10-strict.html
  6. 6. Formation CSS avancéeHTML5 <!DOCTYPE html> Flow Phrasing Heading Interactive Embedded Sectioning Metadata+ http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html http://dev.w3.org/html5/html4-differences/#new-elements http://dev.w3.org/html5/spec/Overview.html#kinds-of-content
  7. 7. Formation CSS avancéeCSS 2 / Sources et préséance CSS "User agent" CSS Utilisateur CSS Auteur feuille de style <head> <link rel="stylesheet" href="styles.css" /> style en-ligne <style type="text/css"> @import url(styles2.css); <p style="color: red"></p> p { color: blue; } @import toujours AVANT </style> toute règle de la feuille de style !important </head> contenante. !important inverse lordre de priorité entre Auteur et Utilisateur+ http://www.w3.org/TR/CSS21/ http://www.w3.org/Style/CSS/
  8. 8. Formation CSS avancéeCSS 2 / media <link rel="stylesheet" media="screen, print" href="impression.css"> @import url(impression.css) print, embossed; @media print { p { color: red } } all tout appareil screen moniteurs couleurs print support paginé, aperçu avant impression handheld appareils portatifs (mobile) braille appareils braille à retour tactile embossed impression braille aural synthétiseurs de parole projection projecteurs, impressions sur transparents tty télétype, terminaux ou appareils aux capacités daffichage 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
  9. 9. Formation CSS avancéeCSS 2 / Syntaxes et règles de base sélecteur bloc de déclaration #bloc p { color: blue ; background: url(doss/image.png) } propriété valeur propriété valeur noms de balise et mots clés CSS: insensibles à la casse URI et nom de fontes: sensibles noms de classes, ids: à la casse sensibles à la casse URI absolues ou [A-Za-z0-9] plus tiret (-) relatives au et souligné (_) excepté au début (également pour [0-9]) fichier css+ http://www.w3.org/TR/CSS21/syndata.html
  10. 10. Formation CSS avancéeCSS 2 / Sélecteurs E:first-line pseudo-éléments * sélecteur universel E:first-letter E:before E sélecteur de type E:after E.test sélecteur de classe E F sélecteur descendant E#test sélecteur didentifiant E>F sélecteur denfant E:hover pseudo-classes dynamiques E+F sélecteur adjacent E:active E:focus E[foo] sélecteurs dattribut E[foo="bar"] E:link pseudo-classes de lien E[foo~="bar"] E:visited E[foo|="bar"] E:lang(c) pseudo-classe de langue E,F regroupement de sélecteur+ http://www.w3.org/TR/CSS21/selector.html#pattern-matching
  11. 11. Formation CSS avancéeCSS 2 / PropriétésPropriétés de fonte Propriétés de texte Propriétés de boîte • font • direction • border [-family, -size, -style, -variant, • letter-spacing • clear -weight] • word-spacing • float • line-height • heightPropriétés de formatage visuel • vertical-align • max-heightet deffets visuels • text-align • min-height • display • text-decoration • max-width • position • text-indent • min-width • top • text-transform • width • left • white-space • padding • right • margin Propriétés de tableau • bottom Propriétés de couleur et de fond • z-index • border-spacing • overflow • empty-cells • color • clip • border-collapse • background • visibility • caption-side [-color, -image, -repeat, -position, -attachment]Propriétés dinterface utilisateur Propriétés de classification • cursor • list-style • outline [-type,-image,-position] • content+ http://newsyntax.com/TableauProprietesCss
  12. 12. Formation CSS avancéeCSS 2 / Modèle de boîte couleur de fond image de fond margin-top contenu border-top padding-top width padding-right margin-right border-right padding-left border-left margin-left height contenu padding-bottom border-bottom margin-bottom+ http://www.w3.org/TR/CSS21/box.html http://www.quirksmode.org/css/box.html http://www.renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/
  13. 13. Formation CSS avancéeCSS 2 / Schémas de positionnement Flux normal Flux absolu Flux flottant Inclut le formatage en bloc Dans ce modèle, une boîte Dans ce modèle, une boîte des boîtes de bloc, le est complètement retirée est dabord positionnée formatage en-ligne des du flux normal (elle na pas selon le flux normal, puis boîtes en-ligne, le dinfluence sur les éléments elle en est extirpée et positionnement relatif des de même degré de parenté repoussée le plus possible boîtes de bloc ou en-ligne survenant après elle), et est vers la droite ou la gauche. positionnée en fonction Le contenu peut dun bloc conteneur. sécouler le long dun flottant.+ http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme http://css.maxdesign.com.au/floatutorial/
  14. 14. Formation CSS avancéeCSS 2 / 13 propriétés pour la mise en pagedisplay inline | block | inline-block | none | inherit | table | table-row | table-cellposition static | relative | absolute | fixed | inheritleft <longueur> | <pourcentage> | auto | inherittoprightbottomfloat left | right | none | inheritclearz-index auto | <entier> | inheritheight <longueur> | <pourcentage> | auto | inheritmax-heightwidthmax-width
  15. 15. Formation CSS avancéeCSS 2 / Lordre de cascade tri par poids !important Utilisateur > Auteur > User agent tri par origine Auteur > Utilisateur > User agent tri par spécificité style en ligne nbr dIDs nbr dattr. et pseudo-classes nbr déléments 0 ou 1 0 ou n 0 ou n 0 ou n tri par ordre darrivée la dernière survenue lemporte+ http://www.w3.org/TR/CSS21/cascade.html#cascade
  16. 16. Formation CSS avancéeCSS 3 / Aperçu des évolutionspseudo-classes structurelles pseudo-élément sélecteurs dattribut Propriétés de formatage de fragment dinterface visuel et deffets visuelsE:root E[foo^="bar"]E:nth-child(n) E::selection E[foo$="bar"] opacityE:nth-last-child(n) E[foo*="bar"] pseudo-classes détat Propriété de classificationE:nth-of-type(n) E[ns|attr] délément dinterface counter-incrementE:nth-last-of-type(n)E:last-child E:enabled sélecteur dadjacence indirect counter-resetE:first-of-type E:disabled E~F Propriétés de texteE:last-of-type E:checkedE:only-child E:indeterminate text-shadow Propriétés de couleurE:only-of-type et de fond pseudo-classe dancre Propriétés de boîteE:empty E:target background (multiple) border-radiuspseudo-éléments background-origin border-image pseudo-classe de contenu background-size box-shadowE::first-lineE::first-letter E:contains(foo) box-sizing Propriété de fontesE::beforeE::after pseudo-classe de négation font-size-adjust @namespace E:not(s) font-stretch Animations Columns gradient+ http://www.w3.org/TR/css3-selectors/#changesFromCSS2
  17. 17. Formation CSS avancéeCSS / Compatibilité+ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets) http://www.quirksmode.org/compatibility.html http://caniuse.com/ http://www.positioniseverything.net/ie-primer.html http://www.positioniseverything.net/explorer.html
  18. 18. Formation CSS avancéeCSS / Bonnes pratiques Google Page Speed Sprite pour images réactives ✴ 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 dautres éléments que A (ie8) ✴ Éviter les sélecteurs denfants ✴ 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+ http://code.google.com/intl/fr-FR/speed/page-speed/docs/rendering.html http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
  19. 19. Formation CSS avancéeCSS / Bibliothèques, Frameworks moteurs javascript de sélecteurs css moteurs javascript de compatibilité systèmes de grilles css moteur d’affichage de fontes non système+ http://www.blueprintcss.org/ http://developer.yahoo.com/yui/3/ http://www.google.com/ webfonts http://code.google.com/p/ie7-js/ http://api.prototypejs.org/ dom/dollar-dollar/ http://www.yaml.de/en/ http://960.gs/ http://api.jquery.com/category/traversing/ http://sizzlejs.com/
  20. 20. Formation CSS avancée960 Grid System, Google Web Fonts+ 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/
  21. 21. Formation CSS avancéeYaml,Yui+ http://www.webtoolkit.info/css-clearfix.html http://developer.yahoo.com/yui/selector/
  22. 22. Formation CSS avancéePrototype, Script.aculo.us, Sizzle, JQuery, JQueryui+ http://selectivizr.com/ http://gradients.glrzad.com/ http://docs.jquery.com/Release:jQuery_1.3
  23. 23. Formation CSS avancéePerformances+ http://www.youtube.com/watch?v=AWF7ZzPyagE&feature=relmfu http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=related
  24. 24. 8, rue Lucien Leuwen75020 Paris Jean-Christophe Carius06 07 58 82 82 Création internet & management webjccarius@newsyntax.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×