diff options
| -rw-r--r-- | css.html.markdown | 91 | ||||
| -rw-r--r-- | de-de/css-de.html.markdown | 179 | ||||
| -rw-r--r-- | elixir.html.markdown | 2 | ||||
| -rw-r--r-- | fr-fr/css-fr.html.markdown | 221 | ||||
| -rw-r--r-- | json.html.markdown | 2 | ||||
| -rw-r--r-- | julia.html.markdown | 2 |
6 files changed, 364 insertions, 133 deletions
diff --git a/css.html.markdown b/css.html.markdown index cdef50cc..e058d691 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -3,6 +3,7 @@ language: css contributors: - ["Mohammad Valipour", "https://github.com/mvalipour"] - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] filename: learncss.css --- @@ -24,18 +25,19 @@ The main focus of this article is on the syntax and some general tips. ```css -/* comments appear inside slash-asterisk, just like this line! */ +/* comments appear inside slash-asterisk, just like this line! + there are no "one-line comments"; this is the only comment style */ /* #################### ## SELECTORS - ####################*/ + #################### */ /* Generally, the primary statement in CSS is very simple */ selector { property: value; /* more properties...*/ } /* the selector is used to target an element on page. -You can target all elments on the page! */ +You can target all elments on the page using asterisk! */ * { color:red; } /* @@ -62,61 +64,61 @@ div { } /* or that the attribute has a specific value */ [attr='value'] { font-size:smaller; } -/* start with a value*/ +/* start with a value (CSS3) */ [attr^='val'] { font-size:smaller; } -/* or ends with */ +/* or ends with (CSS3) */ [attr$='ue'] { font-size:smaller; } -/* or even contains a value */ +/* or even contains a value (CSS3) */ [attr~='lu'] { font-size:smaller; } /* and more importantly you can combine these together -- there shouldn't be -any spaaace between different parts because that makes it to have another -meaning.*/ +any space between different parts because that makes it to have another +meaning. */ div.some-class[attr$='ue'] { } -/* you can also select an element based on its parent.*/ +/* you can also select an element based on its parent. */ -/*an element which is direct child of an element (selected the same way) */ +/* an element which is direct child of an element (selected the same way) */ div.some-parent > .class-name {} -/* or any of its parents in the tree */ -/* the following basically means any element that has class "class-name" -and is child of a div with class name "some-parent" IN ANY DEPTH */ +/* or any of its parents in the tree + the following basically means any element that has class "class-name" + and is child of a div with class name "some-parent" IN ANY DEPTH */ div.some-parent .class-name {} /* warning: the same selector wihout spaaace has another meaning. -can you say what? */ + can you say what? */ div.some-parent.class-name {} /* you also might choose to select an element based on its direct -previous sibling */ + previous sibling */ .i-am-before + .this-element { } -/*or any sibling before this */ +/* or any sibling before this */ .i-am-any-before ~ .this-element {} /* There are some pseudo classes that allows you to select an element -based on its page behaviour (rather than page structure) */ + based on its page behaviour (rather than page structure) */ /* for example for when an element is hovered */ -:hover {} +selector:hover {} -/* or a visited link*/ -:visited {} +/* or a visited link */ +selected:visited {} -/* or not visited link*/ -:link {} +/* or not visited link */ +selected:link {} /* or an input element which is focused */ -:focus {} +selected:focus {} /* #################### ## PROPERTIES - ####################*/ + #################### */ selector { @@ -126,8 +128,12 @@ selector { width: 200px; /* in pixels */ font-size: 20pt; /* in points */ width: 5cm; /* in centimeters */ - width: 50mm; /* in millimeters */ - width: 5in; /* in inches */ + min-width: 50mm; /* in millimeters */ + max-width: 5in; /* in inches. max-(width|height) */ + height: 0.2vh; /* times vertical height of browser viewport (CSS3) */ + width: 0.4vw; /* times horizontal width of browser viewport (CSS3) */ + min-height: 0.1vmin; /* the lesser of vertical, horizontal dimensions of browser viewport (CSS3) */ + max-width: 0.3vmax; /* same as above, except the greater of the dimensions (CSS3) */ /* Colors */ background-color: #F6E; /* in short hex */ @@ -135,16 +141,20 @@ selector { background-color: tomato; /* can be a named color */ background-color: rgb(255, 255, 255); /* in rgb */ background-color: rgb(10%, 20%, 50%); /* in rgb percent */ - background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb (CSS3) */ + background-color: transparent; /* see thru */ + background-color: hsl(0, 100%, 50%); /* hsl format (CSS3). */ + background-color: hsla(0, 100%, 50%, 0.3); /* Similar to RGBA, specify opacity at end (CSS3) */ + /* Images */ - background-image: url(/path-to-image/image.jpg); + background-image: url(/path-to-image/image.jpg); /* quotes inside url() optional */ /* Fonts */ font-family: Arial; - font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ - font-family: "Courier New", Trebuchet, Arial; /* if first one was not found - browser uses the second font, and so forth */ + font-family: "Courier New"; /* if name has spaaace it appears in single or double quotes */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; /* if first one was not found + browser uses the second font, and so forth */ } ``` @@ -155,17 +165,17 @@ Save any CSS you want in a file with extension `.css`. ```xml <!-- you need to include the css file in your page's <head>: --> -<link rel='stylesheet' type='text/css' href='filepath/filename.css' /> +<link rel='stylesheet' type='text/css' href='path/to/style.css' /> <!-- you can also include some CSS inline in your markup. However it is highly recommended to avoid this. --> <style> - selector { property:value; } + a { color: purple; } </style> <!-- or directly set CSS properties on the element. This has to be avoided as much as you can. --> -<div style='property:value;'> +<div style="border: 1px solid red;"> </div> ``` @@ -207,27 +217,28 @@ The precedence of style is as followed: Remember, the precedence is for each **property**, not for the entire block. * `E` has the highest precedence because of the keyword `!important`. - It is recommended to avoid this unless it is strictly necessary to use. + It is recommended to avoid this unless it is strictly necessary to use. * `F` is next, because it is inline style. * `A` is next, because it is more "specific" than anything else. - more specific = more specifiers. here 3 specifiers: 1 tagname `p` + - class name `class1` + 1 attribute `attr='value'` + more specific = more specifiers. here 3 specifiers: 1 tagname `p` + + class name `class1` + 1 attribute `attr='value'` * `C` is next. although it has the same specificness as `B` - but it appears last. + but it appears last. * Then is `B` * and lastly is `D`. ## Compatibility Most of the features in CSS2 (and gradually in CSS3) are compatible across -all browsers and devices. But it's always vital to have in mind the compatiblity +all browsers and devices. But it's always vital to have in mind the compatiblity of what you use in CSS with your target browsers. [QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this. +To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource. + ## Further Reading * [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) * [QuirksMode CSS](http://www.quirksmode.org/css/) * [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) - diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index 8909b251..23c1df94 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -8,107 +8,106 @@ lang: de-de filename: learncss-de.css --- -In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwickliung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. -CSS ist die allgemeine Sprache, die dazu da ist, damit man den HTML-Code und die Designelemente von Webseiten (strikt) unterscheiden kann. +In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwicklung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. +Durch Verwendung von CSS lässt sich eine strikte Trennung zwischen HTML-Code und Designelementen erreichen. -Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente anzuvisieren und ihnen stilistische Eigenschaften zu geben. +Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente innerhalb eines Dokuments auszuwählen und ihnen visuelle Eigenschaften zu geben. CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist. -**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. +**HINWEIS:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet. ```css -/* kommentare werden in sternchen-schrägstrichkombinationen gepackt (genauso wie hier!) */ +/* Kommentare werden in Sternchen-Schrägstrichkombinationen gepackt (genauso wie hier!) */ /* #################### ## SELEKTOREN ####################*/ -/* Eigentlich ist die häufigste Anwendungsweise von CSS sehr simpel */ +/* Eigentlich ist das grundlegende CSS-Statement sehr simpel */ selektor { eigenschaft: wert; /* mehr eigenschaften...*/ } -/* der selektor wird dazu benutzt, ein element auf der seite anzuvisieren +/* Der Selektor wird dazu benutzt, ein Element auf der Seite auszuwählen. -Aber man kann auch alle Elemente auf einer Seite anvisieren! */ +Man kann aber auch alle Elemente auf einer Seite auswählen! */ * { color:red; } /* farbe:rot */ /* -Wenn wir so ein Element auf einer Seite haben: +Angenommen wir haben folgendes Element auf einer Seite: <div class='eine-klasse klasse2' id='eineId' attr='wert' /> */ -/* kann man es so bei seiner klasse anvisieren */ +/* kann man es so über seine Klasse auswählen */ .eine-klasse { } -/*oder bei beiden klassen! */ +/* oder über beide Klassen! */ .eine-klasse.klasse2 { } -/* oder beim namen des tags */ +/* oder über den Namen des Tags */ div { } -/* oder bei seiner id */ +/* oder über seine Id */ #eineId { } -/* oder daran, dass es ein Attribut hat! */ +/* oder darüber, dass es ein Attribut hat! */ [attr] { font-size:smaller; } -/* oder daran, dass das attribut einen bestimmten wert hat*/ +/* oder auch darüber, dass das Attribut einen bestimmten Wert hat */ [attr='wert'] { font-size:smaller; } -/* beginnt mit einem wert*/ -[attr^='wert'] { font-size:smaller; } +/* beginnt mit dem übergebenen Wert */ +[attr^='we'] { font-size:smaller; } -/* oder endet mit */ +/* endet damit */ [attr$='rt'] { font-size:smaller; } -/* oder sogar nur beinhaltet */ +/* oder beinhaltet einen Teil davon */ [attr~='er'] { font-size:smaller; } -/* was aber noch wichtiger ist, ist dass man alle diese kombinieren -kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, -da es mit einem leerzeichen zwei verschiedene selektoren wären*/ +/* Noch wichtiger ist aber die Möglichkeit, all das miteinander kombinieren +zu können - man sollte hierbei nur mit der Leerzeichensetzung vorsichtig sein, +ein Leerzeichen macht es zu zwei verschiedenen Selektoren */ + div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ -/* man kann auch ein element daran festmachen, wie sich die übergeordneten -elemente verhalten!*/ +/* Man kann auch ein Element über seine Elternelemente auswählen */ -/*es muss allerdings ein direktes kind sein */ +/* > wählt ein direktes Kind aus */ div.ein-elternteil > .klassen-name {} -/* oder jeder seiner eltern in der struktur */ -/* das folgende heißt also, dass jedes element mit der klasse 'klassen-name' -und dem elternteil IN JEDER TIEFE ausgewählt wird */ +/* Mit einem Leerzeichen getrennt kann man alle Elternelemente ansprechen */ +/* Das folgende heißt also, dass jedes Element mit der Klasse 'klassen-name' +und dem Elternteil IN JEDER TIEFE ausgewählt wird */ div.ein-elternteil .klassen-name {} -/* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung, +/* Achtung: das selbe ohne das Leerzeichen hat eine andere Bedeutung, kannst du mir sagen, was? */ div.ein-elternteil.klassen-name {} -/* man kann auch ein element nach seinem direkten vorherigen zwilling +/* Man kann ein Element auch nach seinem direkten Nachbarelement auswählen */ .ich-bin-vorher + .dieses-element { } -/* oder jeden zwilling davor */ +/* Oder über jedes Geschwisterelement davor */ .ich-kann-jeder-davor-sein ~ .dieses-element {} -/* es gibt ein paar pseudoklassen, die sich basierend auf dem -seitenverhalten, nämlich nicht auf der seitenstruktur auswählen -lassen können */ +/* Mit Pseudoklassen lassen sich Elemente anhand ihres momentanen Zustands +auf der Seite auswählen (anstatt über die Seitenstruktur) */ -/* zum beispiel, wenn über ein element mit dem mauszeiger gefahren wird */ +/* Zum Beispiel, wenn über ein Element mit dem Mauszeiger gefahren wird */ :hover {} -/* oder einen bereits besuchten link*/ +/* Oder einen bereits besuchten Link*/ :visited {} -/* oder einen noch nicht besuchten link*/ +/* Oder einen noch nicht besuchten Link*/ :link {} -/* oder ein eingabeelement, das zurzeit im fokus steht */ +/* Oder ein Eingabeelement, das zurzeit im Fokus steht */ :focus {} @@ -117,64 +116,64 @@ lassen können */ ####################*/ selector { - - /* einheiten */ - width: 50%; /* in prozent */ - font-size: 2em; /* mal der derzeitigen schriftgröße */ - width: 200px; /* in pixeln */ - font-size: 20pt; /* in punkten */ - width: 5cm; /* in zentimetern */ - width: 50mm; /* in millimetern */ - width: 5in; /* in zoll */ - - /* farben */ - background-color: #F6E /* in kurzem hex */ - background-color: #F262E2 /* in langem hex */ - background-color: tomato /* kann auch eine genannte farbe sein */ - background-color: rgb(255, 255, 255) /* in rgb */ - background-color: rgb(10%, 20%, 50%) /* in rgb prozent */ - background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem rgb */ - - /* bilder */ + + /* Einheiten */ + width: 50%; /* in Prozent */ + font-size: 2em; /* mal der derzeitigen Schriftgröße */ + width: 200px; /* in Pixeln */ + font-size: 20pt; /* in Punkten */ + width: 5cm; /* in Zentimetern */ + width: 50mm; /* in Millimetern */ + width: 5in; /* in Zoll */ + + /* Farben */ + background-color: #F6E /* in kurzem Hex */ + background-color: #F262E2 /* in langem Hex */ + background-color: tomato /* kann auch eine benannte Farbe sein */ + background-color: rgb(255, 255, 255) /* in RGB */ + background-color: rgb(10%, 20%, 50%) /* in RGB Prozent */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem RGB */ + + /* Bilder */ background-image: url(/pfad-zum-bild/image.jpg); - - /* schriften */ + + /* Schriften */ font-family: Arial; - font-family: "Courier New"; /* wenn der name ein leerzeichen beinhält, kommt er in - apostrophe */ - font-family: "Courier New", Trebuchet, Arial; /* wenn der erste nicht gefunden wird, wird - der zweite benutzt, und so weiter */ + font-family: "Courier New"; /* wenn der Name ein Leerzeichen beinhält, kommt er in + Anführungszeichen */ + font-family: "Courier New", Trebuchet, Arial; /* wird die erste Schriftart + nicht gefunden, wird die zweite benutzt, usw. */ } ``` ## Benutzung -speichere das css, das du benutzen willst mit der endung '.css'. +Speichere das CSS, das du benutzen willst mit der endung '.css'. ```xml -<!-- du musst die css-datei im <head>-bereich der seite erwähnen --> +<!-- du musst die CSS-Datei im <head>-bereich der seite einbinden --> <link rel='stylesheet' type='text/css' href='filepath/filename.css' /> -<!-- es geht allerdings auch direkt, wobei diese methode nicht +<!-- Einbindung funktioniert auch inline, wobei diese Methode nicht empfohlen ist --> <style> selector { property:value; } </style> -<!-- oder direkt am element (sollte aber gelassen werden) --> +<!-- Oder direkt auf einem Element (sollte aber vermieden werden) --> <div style='property:value;'> </div> ``` -## Wichtigkeit +## Spezifität -ein element kann von mehr als einem selektoren angezielt werden. -und kann auch eine eigenschaft mehr als einmal zugewiesen bekommen. -in diesen fällen gibt es regeln, die die wichtigkeit von selektoren einführen. +Ein Element kann natürlich auch von mehr als einer Regel in einem Stylesheet +angesprochen werdenm und kann eine Eigenschaft auch öfters als einmal zugewiesen +bekommen. In diesen Fällen gibt es Regeln, die die Spezifität von Selektoren regeln. -wie haben dieses CSS: +Wir haben dieses CSS: ```css /*A*/ @@ -194,34 +193,34 @@ p { property: wert !important; } ``` -und das folgende markup: +und das folgende Markup: ```xml <p style='/*F*/ property:value;' class='class1 class2' attr='value'> </p> ``` -die wichtigkeit der stile ist wie folgt: -(die wichtigkeit gilt nur für **eigenschaften**, nicht für ganze blöcke) - -* `E` hat die größte wichtigkeit wegen dem schlüsselwort `!important`. - man sollte diese form aber vermeiden. -* `F` ist als nächstes, da es direkt an dem element definiert ist. -* `A` ist als nächstes, da es "spezifischer" als alle anderen ist. - spezifischer = mehr zuweisungen: 1 tagname `p` + - klassenname `klasse1` + 1 attribut `attr='value'` -* `C` ist als nächstes obwohl es genau so ist wie `B` - aber es erscheint als letztes. -* dann ist `B` +Die Spezifität der Stile ist wie folgt: +(die Spezifität gilt nur für **einzelne Eigenschaften**, nicht für ganze Blöcke) + +* `E` hat die größte Spezifität wegen dem Schlüsselwort `!important`. + man sollte diese Form aber vermeiden. +* `F` ist als nächstes dran, da es direkt an dem element definiert ist. +* Dann folgt `A`, da es "spezifischer" als alle anderen ist. + spezifischer = mehr Zuweisungen: 1 Tagname `p` + + Klassenname `klasse1` + 1 Attribut `attr='value'` +* `C` kommt als nächstes, obwohl es genau so ist wie `B`, + es erscheint aber später im Stylesheet. +* dann kommt `B` * und als letztes `D`. -## Kompabilität +## Kompatibilität -die meisten features von CSS sind in allen browsern verfügbar. -man sollte jedoch immer darauf achten, wenn man etwas mit CSS -programmiert. +Die meisten Features von CSS sind in allen Browsern verfügbar. Man sollte +jedoch immer darauf achten die benutzten Features auf Verfügbarkeit in den +vom Projekt unterstützten Browser zu überprüfen. -[QuirksMode CSS](http://www.quirksmode.org/css/) ist eine der besten quellen dafür. +[QuirksMode CSS](http://www.quirksmode.org/css/) oder [Can I Use](http://caniuse.com/) sind zwei der besten Quellen dafür. ## Weiterlesen diff --git a/elixir.html.markdown b/elixir.html.markdown index 946c0a1b..c0abc815 100644 --- a/elixir.html.markdown +++ b/elixir.html.markdown @@ -360,7 +360,7 @@ spawn(f) #=> #PID<0.40.0> # `spawn` returns a pid (process identifier), you can use this pid to send # messages to the process. To do message passing we use the `send` operator. # For all of this to be useful we need to be able to receive messages. This is -# achived with the `receive` mechanism: +# achieved with the `receive` mechanism: defmodule Geometry do def area_loop do receive do diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown new file mode 100644 index 00000000..bdab9715 --- /dev/null +++ b/fr-fr/css-fr.html.markdown @@ -0,0 +1,221 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators: + - ["@prrrnd", "https://github.com/prrrnd"] +lang: fr-fr +--- + +Au début du web, il n'y avait pas d'élements visuels, simplement du texte pure. Mais avec le dévelopement des navigateurs, +des pages avec du contenu visuel sont arrivées. +CSS est le langage standard qui existe et permet de garder une séparation entre +le contenu (HTML) et le style d'une page web. + +En résumé, CSS fournit une syntaxe qui vous permet de cibler des élements présents +sur une page HTML afin de leur donner des propriétés visuelles différentes. + +Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parlons de CSS2.0 +qui n'est pas le plus récent, mais qui reste le plus utilisé et le plus compatible avec les différents navigateur. + +**NOTE :** Vous pouvez tester les effets visuels que vous ajoutez au fur et à mesure du tutoriel sur des sites comme [dabblet](http://dabblet.com/) afin de voir les résultats, comprendre, et vous familiariser avec le langage. +Cet article porte principalement sur la syntaxe et quelques astuces. + + +```css +/* Les commentaires sont entourés par slash-étoile, comme cette ligne! */ + +/* #################### + ## SÉLECTEURS + ####################*/ + +/* Généralement, la première déclaration en CSS est très simple */ +selecteur { propriete: valeur; /* autres proprietés...*/ } + +/* Le sélécteur sert à cibler un élément du HTML + +Vous pouvez cibler tous les éléments d'une page! */ +* { color:red; } + +/* +Voici un élément dans notre HTML : + +<div class='une-classe classe2' id='unId' attr='valeur' /> +*/ + +/* Vous pouvez le cibler par une classe */ +.une-classe { } + +/* ou par deux */ +.une-classe.classe2 { } + +/* ou par son type */ +div { } + +/* ou son id */ +#unId { } + +/* ou par le fait qu'il a un attribut */ +[attr] { font-size:smaller; } + +/* ou que l'attribut a une valeur spécifique */ +[attr='valeur'] { font-size:smaller; } + +/* commence avec une valeur */ +[attr^='val'] { font-size:smaller; } + +/* termine avec une valeur */ +[attr$='eur'] { font-size:smaller; } + +/* contient une valeur */ +[attr~='leu'] { font-size:smaller; } + + +/* Ce qu'il faut bien comprendre, c'est que vous pouvez combiner ceci -- Il ne doit pas y avoir +d'espaces entre. */ +div.une-classe[attr$='eu'] { } + +/* Vous pouvez aussi cibler un élément par son parent. */ + +/* Un élément qui est en enfant direct */ +div.un-parent > .enfant {} + +/* Cela cible aussi les .enfants plus profonds dans la structure HTML */ +div.un-parent .enfants {} + +/* Attention : le même sélecteur sans espace a un autre sens. */ +div.un-parent.classe {} + +/* Vous pouvez cibler un élément basé sur un enfant de même parent */ +.je-suis-avant + .cet-element { } + +/* ou n'importe quel enfant de même parent avec celui ci */ +.je-suis-tout-avant ~ .cet-element {} + +/* Il y a des pseudo-classes qui permettent de cibler un élément +basé sur le comportement, en plus de la structure de la page */ + +/* élément avec le curseur au-dessus */ +:hover {} + +/* lien visité */ +:visited {} + +/* lien non visité */ +:link {} + +/* élément avec le focus */ +:focus {} + + +/* #################### + ## PROPRIÉTÉS + ####################*/ + +selecteur { + + /* Units */ + width: 50%; /* pourcentage */ + font-size: 2em; /* taille de la police multipliée par X */ + width: 200px; /* pixels */ + font-size: 20pt; /* points */ + width: 5cm; /* centimetres */ + width: 50mm; /* millimetres */ + width: 5in; /* pouces */ + + /* Couleurs */ + background-color: #F6E; /* court hex */ + background-color: #F262E2; /* long hex */ + background-color: tomato; /* couleur nommée */ + background-color: rgb(255, 255, 255); /* rouge, vert, bleu */ + background-color: rgb(10%, 20%, 50%); /* rouge, vert, bleu en pourcent */ + background-color: rgba(255, 0, 0, 0.3); /* rouge, vert, bleu avec transparence */ + + /* Images */ + background-image: url(/chemin-vers-image/image.jpg); + + /* Polices */ + font-family: Arial; + font-family: "Courier New"; /* Si espace, entre guillemets */ + font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, la deuxième est utilisée, etc... */ +} + +``` + +## Utilisation + +Le CSS s'écrit dans des fichiers `.css`. + +```xml +<!-- Vous devez inclure le CSS dans la balise <head> : --> +<link rel='stylesheet' type='text/css' href='chemin/style.css' /> + +<!-- Vous pouvez inclure du CSS dans le HTML directement, mais ce n'est vraiment pas recommandé. --> +<style> + selecteur { propriete:valeur; } +</style> + +<!-- ou directement sur l'élément HTML. +PS : à ne pas faire. --> +<div style='propriete:valeur;'> +</div> + +``` + +## Priorités + +Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélecteur +et une même propriété peut être définie plusieurs fois. +Dans ces cas, une des propriétés devient prioritaire. + +Voici du code CSS : + +```css +/*A*/ +p.classe1[attr='valeur'] + +/*B*/ +p.classe1 {} + +/*C*/ +p.classe2 {} + +/*D*/ +p {} + +/*E*/ +p { propriete: valeur !important; } + +``` + +et le code HTML: + +```xml +<p style='/*F*/ propriete:valeur;' class='classe1 classe2' attr='valeur'> +</p> +``` + +Les priorités de style sont : +Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entiers. + +* `E` a la priorité grâce à `!important`. +* `F` vient ensuite, car le code se trouve directement dans le HTML. +* `A` vient ensuite, car il est le plus spécifique. + plus spécifique veut dire, celui qui cible le plus l'élément +* `C` vient ensuite. Il est aussi spécifique que `B`, mais est écrit après. +* Puis `B` +* Et enfin `D`. + +## Compatibilité + +La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles +avec tous les navigateurs. Mais il est important de vérifier la compatibilité. + +[QuirksMode CSS](http://www.quirksmode.org/css/) est une très bonne source pour cela. + +## En savoir plus (en anglais) + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) diff --git a/json.html.markdown b/json.html.markdown index 9041eaa2..f5287138 100644 --- a/json.html.markdown +++ b/json.html.markdown @@ -17,7 +17,7 @@ going to be 100% valid JSON. Luckily, it kind of speaks for itself. { "key": "value", - "keys": "must always be enclosed in quotes (either double or single)", + "keys": "must always be enclosed in double quotes", "numbers": 0, "strings": "Hellø, wørld. All unicode is allowed, along with \"escaping\".", "has bools?": true, diff --git a/julia.html.markdown b/julia.html.markdown index e9d3a162..82712553 100644 --- a/julia.html.markdown +++ b/julia.html.markdown @@ -12,7 +12,7 @@ This is based on the current development version of Julia, as of October 18th, 2 ```ruby -# Single line comments start with a number symbol. +# Single line comments start with a hash (pound) symbol. #= Multiline comments can be written by putting '#=' before the text and '=#' after the text. They can also be nested. |