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

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

Formation CSS Avancée ✴ Introduction ✴ HTML • Dtd ✴ HTML5 ✴ CSS 2 • syntaxe • sélecteurs, propriétés, valeurs • modèles de boîte et ﬂux de positionnement • cascade ✴ CSS 3 ✴ Compatibilité ✴ Bonnes pratiques ✴ Bibliothèques

Formation CSS avancéeIntroduction

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

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.ﬁ/doctype/ http://www.w3.org/2010/04/xhtml10-strict.html

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

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/

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 dafﬁchage réduites tv télévision (basse résolution, couleur, déﬁlement des pages limité, sonorisé)+ http://www.w3.org/TR/CSS21/media.html#media-groups

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]) ﬁchier css+ http://www.w3.org/TR/CSS21/syndata.html

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

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

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-ﬁrefox-and-internet-explorer/

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/

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éciﬁcité 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

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

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

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-qualiﬁé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 ﬁchier+ 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

Formation CSS avancéeCSS / Bibliothèques, Frameworks moteurs javascript de sélecteurs css moteurs javascript de compatibilité systèmes de grilles css moteur d’afﬁchage 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/

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/

Formation CSS avancéeYaml,Yui+ http://www.webtoolkit.info/css-clearﬁx.html http://developer.yahoo.com/yui/selector/

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

Formation CSS avancéePerformances+ http://www.youtube.com/watch?v=AWF7ZzPyagE&feature=relmfu http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=related

8, rue Lucien Leuwen75020 Paris Jean-Christophe Carius06 07 58 82 82 Création internet & management webjccarius@newsyntax.com

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

by newsyntax

Accessibility

Categories

Upload Details

Usage Rights

Statistics

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