• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Formation Css avancée - pédagogie - design internet - Jean-Christophe Carius
 

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

on

  • 1,933 views

 

Statistics

Views

Total Views
1,933
Views on SlideShare
1,933
Embed Views
0

Actions

Likes
1
Downloads
34
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 flux 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.fi/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 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
    • 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
    • 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-firefox-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 / 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
    • 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
    • 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-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
    • 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/
    • 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-clearfix.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