https://www.wiki.leomartin.net/ 2026-04-10T13:01:21+00:00 https://www.wiki.leomartin.net/ https://www.wiki.leomartin.net/lib/tpl/dokuwiki/images/favicon.ico text/html 2016-01-05T15:07:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:adding_borders&rev=1452002863&do=diff <- Margin and padding shorthand notationDefining element size -> border:<épaisseur> <style> <color>; border-<side>:<épaisseur> <style> <color>; border-<side>-<property>:<value>; border-style * solid * dotted * dashed * double * groove * ridge * inset * outset text/html 2016-01-05T17:21:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:additional_resources&rev=1452010901&do=diff <- Working with color - Solution-> * w3.org/Style/CSS/current-work.en.html * kuler.adobe.com * colorzilla.com/gradient-editor * fontsquirrel.com * google.com/webfonts text/html 2015-12-28T15:31:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:adjacent_selectors&rev=1451313115&do=diff <- Child selectorsAttribute selectors -> Sélecteur adjacent sélecteur_a+sélecteur_b {} sélecteur_a + sélecteur_b {} Pas de changement dû aux whitespace : sélecteur_b qui suivent directement un élémenet frère sélecteur_a. h2 + p {} // tous les premiers p qui suivent un h2. text/html 2016-01-04T19:50:36+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:adjusting_paragraph_line_height&rev=1451933436&do=diff <- Indenting textControlling the space between elements -> line-height leading/interlignage différence entre valeur type 1 (ratio relatif à la taille du texte) ou 1em (relatif à la valeur d'un em pour l'élément). text/html 2015-12-28T15:36:53+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:attribute_selectors&rev=1451313413&do=diff <- Adjacent selectorsPseudo-class selectors -> Sélecteur attribut a[title] {} // tous les liens avec un attribut title. a[title="titre du lien"] {} // tous les liens avec un attribut title égal à "titre du lien". a[class="red"] {} // = a.red (ciblera class="red" MAIS PAS class="red title"). a[class~="red"] {} // ~= : "qui inclut" : class="red title" -> OK a[href^="http://"] {} // ~= : "chaîne qui commence part", ici liens externes a[href$="pdf"] {} // ~= : "chaîne qui débute/finit part", ici l… text/html 2016-01-05T15:34:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:background_properties&rev=1452004479&do=diff <- Creating rounded cornersUsing background images -> background area content+padding sont couverts. text/html 2016-01-05T16:07:33+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:background_shorthand_notation&rev=1452006453&do=diff <- Using multiple backgroundsStyling container elements - Lab -> background: <color> <url> <repeat> <position-horizontale> <position-verticale>; background: <url-0> <repeat> <position-horizontale> <position-verticale>, <url-1> <repeat> <position-horizontale> <position-verticale>, <url-2> <repeat> <position-horizontale> <position-verticale>, <color>; /* couleur à la fin pour être sous la pile */ background: <color>; text/html 2015-12-28T13:46:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:checking_for_browser_support&rev=1451306781&do=diff <- Using external style sheetsDealing with browser inconsistencies -> support Part de marché des navigateurs, par zone géo, etc. : gs.statcounter.com Testez son code dans plusieurs navigateurs. Tester sur mobile. * caniuse.com * quirksmode.com * reference.sitepoint.com/css Navigateurs : * developer.mozilla.org/en/Mozilla_ text/html 2015-12-28T15:30:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:child_selectors&rev=1451313043&do=diff <- Descendent selectorsAdjacent selectors -> Sélecteur enfant parent > enfant body > header {} // tous les header immédiatement enfant de l'élément body text/html 2015-12-28T13:50:44+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:class_selectors&rev=1451307044&do=diff <- Element selectorsID selectors -> Sélecteur classe .classe {} .important { font-color: red; } text/html 2016-01-05T16:35:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:color_keyword_definitions&rev=1452008103&do=diff <- Styling container elements - SolutionUnderstanding hexadecimal notation -> * w3.org/TR/css3-color/ * CSS+SVG colors text/html 2015-12-28T13:40:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:common_units_of_measurement&rev=1451306431&do=diff <- Setting propertiesInline styles -> Unités * absolues (ou valeurs fixes), particulièrement adaptées pour les devices avec une sortie de taille connue, comme une imprimante. * in:inches * cm:centimeters * mm:millimeters * pt:points * pc:picas * relatives, plus adaptées pour les text/html 2016-01-05T14:34:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:controlling_element_spacing&rev=1452000888&do=diff <- Understanding the box modelControlling interior spacing -> margin Les marges verticales peuvent collapser. -> vertical margin collapse * si deux marges se touchent, elle fusionnent. Si même valeur on prend cette valeur si une plus grand on prend celle_là. * -> borders & padding peuvent interférer dans le vertical margin-collapse text/html 2016-01-05T15:51:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:controlling_image_positioning&rev=1452005518&do=diff <- Using background imagesUsing multiple backgrounds -> control image positioning * background-position: <left|right|center|valeur numérique avec éventuellement unité> <top|bottom|center|valeur numérique avec éventuellement unité>; /* si on ne passe qu'une valeur, center est présumé pour l'autre. */ text/html 2016-01-05T14:48:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:controlling_interior_spacing&rev=1452001680&do=diff <- Controlling element spacingMargin and padding shorthand notation -> marges intérieures composants : * width * height * padding padding Permet principalement d'éloigner le contenu de ses bords. + de padding = - de content-width contrairement à margin, pas de valeur auto, mais des pourcentages. text/html 2016-01-04T18:45:01+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:controlling_text_alignment&rev=1451929501&do=diff <- Writing font shorthand notationLetter and word spacing -> controlling text alignment text-align * left * right * center * justify hyphens * none * manual (default) * auto hyphens:auto; text/html 2016-01-04T20:29:24+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:controlling_the_space_between_elements&rev=1451935764&do=diff <- Adjusting paragraph line heightBasic text formatting - Lab -> Espace entre éléments * -> margin * margin et padding vus en détail plus tard * pas d'héritage pour ces propriétés text/html 2016-01-05T15:27:10+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:creating_rounded_corners&rev=1452004030&do=diff <- Defining element sizeBackground properties -> border-radius border-radius: <haut+droite+bas+gauche>; border-radius: <top-left+bottom-right> <top-right+bottom-left>; border-radius: <top-left> <top-right+bottom-left> <bottom-right>; border-radius: <top-left> <top-right> <bottom-left> <bottom-right>; border-<top|bottom>-<left|right>: <value> border-radius: <horizontal-radius>/<vertical-radius>; text/html 2015-12-28T13:34:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:css_authoring_tools&rev=1451306040&do=diff <- Exploring default stylingCSS syntax -> What are stylesheets ? fichiers texte + extension .css outils d'édition * aptana studio text/html 2016-01-05T17:11:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:css_gradients&rev=1452010312&do=diff <- Styling drop shadowsWorking with color - Lab -> gradients property: linear-gradient(<direction?>,<color> <start>, <color> <start>); /* Most simple syntax */ - --> colorzilla.com/gradient-editor/ text/html 2015-12-28T13:36:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:css_syntax&rev=1451306218&do=diff <- CSS authoring toolsWriting a selector -> Syntax Les CSS sont utilisés pour décrire la présentation de documents structurés comme le HTML, XML, SVG ou d'autre langages Markup. p { font-size:16px; } pselecteur{ (...) }déclarationfont-size:propriété16px;valeur Aussi possible : text/html 2015-12-28T13:47:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:dealing_with_browser_inconsistencies&rev=1451306863&do=diff <- Checking for browser supportStructuring HTML correctly -> inconsistencies * Internet Explorer numéro 1 sur les bugs, mais aussi sur l'user base -> plus de temps perdu avec * positioniseverything.net * hacks : différents dangers (code allourdi, plus dur à maintenir, peut générer des bugs à l'avenir ou sur d'autres navigateurs) text/html 2016-01-05T15:19:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:defining_element_size&rev=1452003540&do=diff <- Adding bordersCreating rounded corners -> width & height width = content-width Un élément avec width:100px + padding:20px à une largeur de 140px : le width est cumulatif avec le padding. text/html 2015-12-28T15:29:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:descendent_selectors&rev=1451312983&do=diff <- Grouping selectorsChild selectors -> Sélecteur descendant sélecteur_ascendant sélecteur_descendant {} On cible les éléments descendant contenus dans un sélecteur parent (imédiatement ou non immédiatement). div p {} /* Tous les p contenus dans des div. */ À noter que les navigateurs lisent les sélecteurs de droite à gauche : text/html 2015-12-28T15:52:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:dynamic_pseudo-class_selectors&rev=1451314378&do=diff <- Pseudo-class selectorsStructural pseudo-class selectors -> Sélecteur de pseudo-class dynamique a:link : tous les a avec un href ! a:visited : liens visités a:hover : liens survolés a:active : liens en train d'être cliqués ou en focus. On peut avoir le focus via l'uri. Par ex <http://mon.url/mapage.html#element> text/html 2015-12-28T13:49:59+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:element_selectors&rev=1451306999&do=diff <- Structuring HTML correctlyClass selectors -> Sélecteur élément tag {} body { font-size: 16px; } text/html 2015-12-28T14:08:30+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:element-specific_selectors&rev=1451308110&do=diff <- Using classes and IDsThe universal selector -> element-specific element.classe {} h2.author {} text/html 2015-12-28T13:42:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:embedded_styles&rev=1451306575&do=diff <- inline stylesUsing external style sheets -> embedded Dans le head du document, dans un élément <style>. Peu re bien pour une pae, mais pas plus -> feuilles externes. text/html 2015-12-28T13:32:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:exploring_default_styling&rev=1451305976&do=diff <- Using the exercise filesCSS authoring tools -> defaults Unstyled = browser style + réglages personnalisés (typo : taille, couleur...) Les styles que l'on défini ne le sont pas sur une tabula rasa mais sur la base des styles par défauts définis par le navigateur/utilisateur. CSS Reset text/html 2016-01-04T17:31:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:font_style_and_font_weight&rev=1451925087&do=diff <- Setting font sizeTransforming text -> font-style * normal * Oblique : italique simulé * italic : fonte italique de la famille * inherit font-weight * 100 (darkness value) (lightest) * 200 (idem) * (...) * 900 (boldest) * lighter * light * normal * bold text/html 2015-12-28T14:11:32+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:grouping_selectors&rev=1451308292&do=diff <- The universal selectorDescendent selectors -> Grouper des sélecteurs sélecteur, sélecteur, sélecteur div,section,aside {} text/html 2015-12-28T13:51:29+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:id_selectors&rev=1451307089&do=diff <- Class selectorsUsing classes and IDs -> Sélecteur id #id #notice { font-family: serif; } text/html 2016-01-04T19:30:32+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:indenting_text&rev=1451932232&do=diff <- Letter and word spacingAdjusting paragraph line height -> text-indent * <value> exemple donné : text-indent négatif pour aligner un texte commencant par des guillemets. autre exemple : valeur -2000em, élément toujours là texte invisible. text/html 2015-12-28T13:41:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:inline_styles&rev=1451306494&do=diff <- Common units of measurementEmbedded styles -> inline Styles inline : directement dans l'attribut style d'un élément. Très peu utile/utilisé, contextes particuliers, ex: client email. text/html 2016-01-04T18:58:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:letter_and_word_spacing&rev=1451930338&do=diff <- Controlling text alignmentIndenting text -> letter/word-spacing * letter-spacing -> tracking, interlettrage (le kerning ce sera pour plus tard !) * word-spacing -> espace intermots text-rendering (svg property) * optimizeLegibility (default in firefox) * optimizeSpeed (default in webkit) text/html 2016-01-05T14:59:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:margin_and_padding_shorthand_notation&rev=1452002340&do=diff <- Controlling interior spacingAdding borders -> Plusieurs syntaxes pour padding et margin : - 4 valeurs : <Haut> <Gauche> <Bas> <Droite> - 3 valeurs : <Haut> <Gauche+Droite> <Bas> - 2 valeurs : <Haut+Bas> <Gauche+Droite> - 1 valeur : <Haut+Bas+Gauche+Droite> text/html 2015-12-28T15:55:22+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:nth-child_selectors&rev=1451314522&do=diff <- Structural pseudo-class selectorsPseudo-element selectors -> nth-child exemples tr:nth-child(2n+1) /* tous les rang impairs de l'élément table */ tr:nth-child(odd) /* la même */ tr:nth-child(2n+0) /* tous les éléments pairs de la table */ tr:nth-child(even) /* la même */ text/html 2015-12-28T15:37:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:pseudo-class_selectors&rev=1451313475&do=diff <- Attribute selectorsDynamic pseudo-class selectors -> Pseudo-Class :hover DOM : Représentation structurelle de tous les éléments d'un document html, parfois utilisé par les navigateurs et scripts à traverser cette structure, récupérer du conteny ou appliquer un comportement. On y réfère généralement comme à l'arbre (tree) text/html 2015-12-28T17:15:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:pseudo-element_selectors&rev=1451319357&do=diff <- Nth-child selectorsTargeting page content - Lab -> p::first-line (CSS3) ou p:first-line (CSS2) p::first-letter / p:first-letter * : & :: -> différencier pseudo-class selector(:) et pseudo-element selector (::) * :: pas forcément supporté (genre IE8) ::before & ::after * permet d'ajouter du contenu avant ou après un élément. text/html 2016-01-04T15:38:22+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:reducing_conflicts_through_planning&rev=1451918302&do=diff <- The !important declarationResolving conflicts - Lab -> Solver les conflits general guideline * éviter d'utiliser des styles locaux (embedded) autant que possible * Ajoute une couche de complexité dont l'effet n'est pas toujours prévisible * Mettre à jour, maintenir ou modifier les styles peuvent devenir une corvée s'il fait se souvenir des styles locaux de chaque page. text/html 2016-01-04T15:04:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:selector_specificity&rev=1451916280&do=diff <- Using inheritanceThe !important declaration -> Spécifité selecteurIDclassesélémentsspécificitébody0011#mainContent100100quote01010div p0022#sidebar p101101 Les id ont une forte proéminence, c'est pour cela qu'ils sont évités : très difficiles à “overwritter”. note : inheritance > specificity text/html 2016-01-04T16:35:01+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:setting_a_font_family&rev=1451921701&do=diff <- Resolving conflicts - SolutionUsing @font-face -> font-family: fontname; font-family: Helvetica, Arial, sans-serif; // "font-stack" : fallback procedure : 2,3 font, 4 au max en général. types de fonte : * serif * sans-serif * monospace * cursive * fantasy -> Mettre les noms de fonte sen plusieurs mots entre text/html 2016-01-04T17:16:32+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:setting_font_size&rev=1451924192&do=diff <- Setting a font familyFont style and font weight -> font-size Reserved keywords * xx-large * x-large * large * medium * small * x-small * xx-small relative units of measurement * em (ratio, relatif à une taille héritée -user-agent, déclaration-) text/html 2015-12-28T13:38:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:setting_properties&rev=1451306326&do=diff <- Writing a selectorCommon units of measurement -> Table complète des propriétés : * w3.org/TR/CSS21/propidx.html text/html 2016-01-04T17:59:45+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:setting_text_color&rev=1451926785&do=diff <- Text decoration optionsWriting font shorthand notation -> color * keyword (ex: red) * hex value * rgb value * rgba value * hsl value * hsla value * ... text/html 2015-12-28T15:53:59+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:structural_pseudo-class_selectors&rev=1451314439&do=diff <- Dynamic pseudo-class selectorsNth-child selectors -> Sélecteur de pseudo-classe structurels * sel:first-child(n) si premier élément du parent * sel:nth-child(n) * sel:first-of-type si premier du type dans le parent * sel:only-child text/html 2015-12-28T13:48:53+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:structuring_html_correctly&rev=1451306933&do=diff <- Dealing with browser inconsistenciesElement selectors -> Structuring html correctly Un CSS efficace s'appuie sur un HTML efficace. Sans une structure HTML consistent et logique, il n'est pas possible d'écrire efficacement du CSS. Petit guide des bonnes pratiques d'écriture HTML. * se focaliser sur l'écriture de code clair et sémantique. text/html 2016-01-05T17:06:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:styling_drop_shadows&rev=1452010016&do=diff <- Using RGBa and HSLaCSS gradients -> drop-shadows box-shadow box-shadow: <horizontal-length> <vertical-length> <blur-radius> <spread> <color>; text-shadow text-shadow: <horizontal-length> <vertical-length> <blur-radius> <color>; text/html 2015-12-29T01:26:37+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:targeting_page_content_-_solution&rev=1451348797&do=diff <- Targeting page content - LabWhat happens when styles conflict -> * Éviter les sélecteurs Id ? text/html 2016-01-04T17:50:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:text_decoration_options&rev=1451926257&do=diff <- Using text variantsSetting text color -> text-decoration * none * underline * overline * line * blink text/html 2016-01-04T15:13:35+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:the_important_declaration&rev=1451916815&do=diff <- Selector specificityReducing conflicts through planning -> La mention !important bat tout. Héritage, spécificité, style inline, tout (sauf une autre mention !important, plus spécifique). #myId element_tag{ property: value !important; } Ne pas l'utiliser pour n'importe quoi au risque de rendre le code impossible à maintenir. text/html 2015-12-28T14:10:38+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:the_universal_selector&rev=1451308238&do=diff <- Element-specific selectorsGrouping selectors -> Sélecteur universel Affecte tous les éléments de la sélection parent (page, élément). * {} Ce sélecteur affecte tout, et peut donc bypasser les héritages. ex : <head> <style> * { color: blue;} main,section { color: red;} </style> </head> <main> <section> <p>blablabla</p> </section> </main> text/html 2016-01-04T17:37:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:transforming_text&rev=1451925447&do=diff <- Font style and font weightUsing text variants -> text-transform * capitalize * inherit * lowercase * none * uppercase Change via style, pas sémantique, rien -> donc par exemple si syndication : pas d'effet. text/html 2016-01-05T16:39:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:understanding_hexadecimal_notation&rev=1452008397&do=diff <- Color keyword definitionsUsing RGB values -> * #RRGGBB * #RGB * kuler.adobe.com text/html 2016-01-04T23:28:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:understanding_the_box_model&rev=1451946500&do=diff <- Basic text formatting - SolutionControlling element spacing -> The box model Chaque élément est une boite rectangulaire avec : * margin (marge extérieure) * border * padding (marge interne) * width Définissent la taille de l'élément et son rapport à son environnement. Valeur par défaut pour la propriété overflow: visible; text/html 2015-12-31T10:14:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:understanding_the_cascade&rev=1451553281&do=diff <- What happens when styles conflictUsing inheritance -> “La dernière règle appliquée est celle utilisée” L'ordre compte, ex si style externe indiqué avant ou après style embedded dans le head. text/html 2016-01-05T15:39:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_background_images&rev=1452004786&do=diff <- Background propertiesControlling image positioning -> background-image background-image: url(path/to/image); * Path relatif au CSS. * Pard efaut image en mosaïque Liste de propriétés * background-image * background-color * background-repeat: <repeat|no-repeat|repeat-x|repeat-y>; /* repeat is default */ text/html 2015-12-28T14:07:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_classes_and_ids&rev=1451308023&do=diff <- ID selectorsElement-specific selectors -> considération Le principal but des classes et id n'est pas de permettre le ciblage CSS, mais d'ajouter à la sémantique. ID : le contenu est-il unique et a-t-il besoin d'être identifié. text/html 2015-12-28T13:43:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_external_style_sheets&rev=1451306636&do=diff <- Embedded stylesChecking for browser support -> ### feuille de style externe Lié avec un élément <link href=“<uri>” type=“text/css” rel=“stylesheet”> dans le <head>. Ou (not a best practice !): <style>@import url("styles.css");</style> text/html 2016-01-04T16:53:47+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_font-face&rev=1451922827&do=diff <- Setting a font familySetting font size -> * avant toute déclaration (afin d'être accessible partout) @font-face { font-family:'<name>'; src: url('<path/to/font>'); format('<format>'); font-weight: normal; // mettre weight avant style, sinon risque de bug font-style: normal; } text/html 2016-01-05T16:54:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_hsl_values&rev=1452009260&do=diff <- Using RGB valuesWorking with opacity -> * Hue : 0-360 * Saturation : 0-100% * Lightness : 0-100% * hsl(Hue,Saturation,Lightness) * hsl(0-360,0-100%,0-100%) text/html 2015-12-31T10:41:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_inheritance&rev=1451554881&do=diff <- Understanding the cascadeSelector specificity -> Ufiliser l'héritage afin d'optimiser son code. “child property wins over inheritance”. travailler avec l'inheritance * avec la complexification des sites, l'inheritance devient plus difficile à “tracker”. * organiser les styles permet d'éviter les conflits d'inhéritance text/html 2016-01-05T16:02:08+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_multiple_backgrounds&rev=1452006128&do=diff <- Controlling image positioning Background shorthand notation -> Pour utiliser plusieurs images de fond, on sépare les différentes valeurs par une virgule. Toute image image dans la liste sera sous les précédentes. Si une seul valeur par exemple pour background-repeat, valeur appliquée à toutes les images. Aussi >=ie9. text/html 2016-01-05T16:50:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_rgb_values&rev=1452009034&do=diff <- Understanding hexadecimal notationUsing HSL values -> * rgb(R,G,B) * rgb(0-255,0-255,0-255) * rgb(0-100%,0-100%,0-100%) text/html 2016-01-05T16:58:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_rgba_and_hsla&rev=1452009532&do=diff <- Working with opacityStyling drop shadows -> * hsla(h,s,l,alpha); * rgba(r,g,b,alpha); * alpha:0-1 text/html 2016-01-04T17:45:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:using_text_variants&rev=1451925902&do=diff <- Transforming textText decoration options -> support opentype Pas dispo, mais le W3C travaille dessus. font-variant * inherit * normal * small-caps text/html 2015-12-31T10:08:35+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:what_happens_when_styles_conflict&rev=1451552915&do=diff <- Targeting page content - SolutionUnderstanding the cascade -> Cumul de styles en conflit ou remplacement. Comportement déterminé par 3 éléments : * cascade * inhéritance * specificity text/html 2016-01-05T16:56:53+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:working_with_opacity&rev=1452009413&do=diff <- Using HSL valuesUsing RGBa and HSLa -> opacity: <value>; Définit l'opacité de l'élément dans son entièreté. text/html 2015-12-28T13:37:50+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:writing_a_selector&rev=1451306270&do=diff <- CSS syntaxSetting properties -> - w3.org/TR/selectors/ text/html 2016-01-04T18:35:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=cccn:writing_font_shorthand_notation&rev=1451928928&do=diff <- Setting text colorControlling text alignment -> font shorthand notation font: <font-weight> <font-style> </font-variant> <size>/line-height <font-stack>; font: <size> <font-stack>; /* minimal version */ keywords Il est possible d'utiliser un ensemble de mots-clés optionnels qui indiquent à l'user-agent, d'utiliser les formatages de police utilisées par le système. Cela peut être particulièrement pratique pour des applications ou widgets.