From b33208ad676473b403d4f838b2c89bbae3056f51 Mon Sep 17 00:00:00 2001 From: Pierre-Arnaud Baciocchini Date: Tue, 19 Aug 2014 16:48:56 +0200 Subject: [PATCH 1/5] Added french translation for Swift --- fr-fr/swift-fr.html.markdown | 225 +++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 fr-fr/swift-fr.html.markdown diff --git a/fr-fr/swift-fr.html.markdown b/fr-fr/swift-fr.html.markdown new file mode 100644 index 00000000..18628524 --- /dev/null +++ b/fr-fr/swift-fr.html.markdown @@ -0,0 +1,225 @@ +--- +language: swift +contributors: + - ["Grant Timmerman", "http://github.com/grant"] +translators: + - ["@prrrnd", "https://github.com/prrrnd"] +lang: fr-fr +--- + +Swift est un langage de programmation crée par Apple pour iOS et OS X. Swift a été introduit en 2014 à la conférence WWDC d'Apple. Il est construit avec le compilateur LLVM inclus dans la version bétâ de Xcode 6. + +Pour plus d'informations, en anglais, regardez le [guide d'Apple](https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/LandingPage/index.html), qui inclus un tutoriel complet sur Swift. + +```js +// +// Bases +// + +println("Hello, world") +var myVariable = 42 +let myConstant = 3.1415926 +let explicitDouble: Double = 70 +let label = "du texte " + String(myVariable) // Cast +let piText = "Pi = \(myConstant)" // Interpolation +var optionalString: String? = "optional" // Peut être nil +optionalString = nil + + +// +// Tableaux et dictionnaires +// + +// Tableau +var shoppingList = ["poisson", "eau", "citrons"] +shoppingList[1] = "bouteille d'eau" +let tableauVide = [String]() + +// Dictionnaire +var occupations = [ + "Malcolm": "Capitaine", + "kaylee": "Mécanicien" +] +occupations["Jayne"] = "Secretaire" +let dicoVide = Dictionary() + + +// +// Contrôle et boucles +// + +// Boucle for (tableau) +let monTableau = [1, 1, 2, 3, 5] +for value in monTableau { + if value == 1 { + println("Un!") + } else { + println("Pas un!") + } +} + +// Boucle for (dictionnaire) +for (key, value) in dict { + println("\(key): \(value)") +} + +// Boucle for (interval) +for i in -1...1 { // [-1, 0, 1] + println(i) +} +// utilisez ..< pour exclure le dernier élement + +// Boucle while +var i = 1 +while i < 1000 { + i *= 2 +} + +// Boucle do-while +do { + println("bonjour") +} while 1 == 2 + +// Switch +let legume = "haricot" +switch legume { +case "haricot": + // ... +case "concombre", "patate": + // ... +default: // requis afin de couvrir toutes les possibilités + // ... +} + + +// +// Fonctions +// + +// Les fonctions sont de type primitif, ce qui veut dire qu'elles peuvent être incluses dans d'autres fonctions + +// Fonction +func direBonjour(name: String, day: String) -> String { + return "Bonjour \(name), on est \(day) aujourd'hui." +} +direBonjour("Bob", "mardi") + +// Fonction qui retourne plusieurs valeurs dans un tuple +func getPrix() -> (Double, Double, Double) { + return (3.59, 3.69, 3.79) +} + +// Arguments +func setup(nombres: Int...) {} + +// Passer et retourner des fonctions +func augmenter() -> (Int -> Int) { + func ajouterUn(nombre: Int) -> Int { + return 1 + nombre + } + return ajouterUn +} +var increment = augmenter() +increment(7) + + +// +// Closures +// +var nombres = [1, 2, 6] + +// Les fonctions sont des cas de closures spéciales ({}) + +// Exemple de closure. +// `->` sépare les arguments et le type de retour +// `in` sépare l'en-tête de closure de son corps +nombres.map({ + (nombre: Int) -> Int in + let resultat = 3 * nombre + return resultat + }) + +// Lorsque le type est connu, comme ci-dessus, on peut faire ceci +nombres = nombres.map({ nombre in 3 * nombre }) +//Ou cela +//nombres = nombres.map({ $0 * 3 }) + +print(nombres) // [3, 6, 18] + + +// +// Classes +// + +// Toutes les méthodes et propriétés d'une classe sont publiques. +// Si vous avez juste besoin de stocker des données dans un +// objet structuré, vous devez utiliser une structure + +// Une classe `Square` hérite d'une classe `Shape` +class Rect: Shape { + var longueurCote: Int = 1 + + // Custom getter and setter property + var perimeter: Int { + get { + return 4 * longueurCote + } + set { + longueurCote = newValue / 4 + } + } + + init(longueurCote: Int) { + super.init() + self.longueurCote = longueurCote + } + + func shrink() { + if longueurCote > 0 { + --longueurCote + } + } + + override func getArea() -> Int { + return longueurCote * longueurCote + } +} +var monCarre = new Square(longueurCote: 5) +print(monCarre.getArea()) // 25 +monCarre.shrink() +print(monCarre.longueurCote) // 4 + +// If you don't need a custom getter and setter, +// but still want to run code before and after getting or setting +// a property, you can use `willSet` and `didSet` + + +// +// Enumerations +// + +// Les énumerations peuvent être d'un type spécifique ou non. +// Elles peuvent contenir méthodes et classes + +enum Suit { + case Pic, Coeur, Carre, Trefle + func getIcon() -> String { + switch self { + case .Pic: return "♤" + case .Coeur: return "♡" + case .Carre: return "♢" + case .Trefle: return "♧" + } + } +} + + +// +// Autres +// + +// `protocol`: Similaire aux interfaces en Java +// `extension`s: Permet d'ajouter des fonctionnalités à un type existant +// Generics: Similaire à Java. Utilisez le mot clé `where` pour specifier les pré-requis du generic + +``` From 12292eab583ce66a5ec7a2d60ff0f88a0aa2636b Mon Sep 17 00:00:00 2001 From: Pierre-Arnaud Baciocchini Date: Wed, 20 Aug 2014 07:45:07 +0200 Subject: [PATCH 2/5] [css/fr-fr] Added french translation of CSS --- fr-fr/css-fr.html.markdown | 223 +++++++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 fr-fr/css-fr.html.markdown diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown new file mode 100644 index 00000000..df45cf8e --- /dev/null +++ b/fr-fr/css-fr.html.markdown @@ -0,0 +1,223 @@ +--- +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 developemnt 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 un page HTML afin de leurs 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:** Parce que le résultat du code CSS est un effet visuel, vous pouvez utiliser [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! */ + +/* #################### + ## SELECTEURS + ####################*/ + +/* 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: + +
+*/ + +/* Vous pouvez le cibler par une classe */ +.une-classe { } + +/* ou les 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 profond dans la structure HTML */ +div.un-parent .enfants {} + +/* Attention: le même sélécteur 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, plus que 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 {} + + +/* #################### + ## PROPRIETES + ####################*/ + +selecteur { + + /* Units */ + width: 50%; /* pourcentage */ + font-size: 2em; /* times current font-size */ + 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, deuxième, etc... */ +} + +``` + +## Utilisation + +Le CSS s'écrit dans des fichiers `.css`. + +```xml + + + + + + + +
+
+ +``` + +## Priorités + +Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélécteur +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 +

+

+``` + +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 c'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) + From d46303a1239abe4430c3e0753c943f723545c49e Mon Sep 17 00:00:00 2001 From: Pierre-Arnaud Baciocchini Date: Wed, 20 Aug 2014 07:47:06 +0200 Subject: [PATCH 3/5] Fixed indentation --- fr-fr/css-fr.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown index df45cf8e..17f1eab4 100644 --- a/fr-fr/css-fr.html.markdown +++ b/fr-fr/css-fr.html.markdown @@ -4,7 +4,7 @@ contributors: - ["Mohammad Valipour", "https://github.com/mvalipour"] - ["Marco Scannadinari", "https://github.com/marcoms"] translators: - - ["@prrrnd", "https://github.com/prrrnd"] + - ["@prrrnd", "https://github.com/prrrnd"] lang: fr-fr --- From 8df21274b997b2c8f6913fd4694f141c2f5d68cc Mon Sep 17 00:00:00 2001 From: Pierre-Arnaud Baciocchini Date: Wed, 20 Aug 2014 07:49:13 +0200 Subject: [PATCH 4/5] Removed Swift fr --- fr-fr/swift-fr.html.markdown | 225 ----------------------------------- 1 file changed, 225 deletions(-) delete mode 100644 fr-fr/swift-fr.html.markdown diff --git a/fr-fr/swift-fr.html.markdown b/fr-fr/swift-fr.html.markdown deleted file mode 100644 index 18628524..00000000 --- a/fr-fr/swift-fr.html.markdown +++ /dev/null @@ -1,225 +0,0 @@ ---- -language: swift -contributors: - - ["Grant Timmerman", "http://github.com/grant"] -translators: - - ["@prrrnd", "https://github.com/prrrnd"] -lang: fr-fr ---- - -Swift est un langage de programmation crée par Apple pour iOS et OS X. Swift a été introduit en 2014 à la conférence WWDC d'Apple. Il est construit avec le compilateur LLVM inclus dans la version bétâ de Xcode 6. - -Pour plus d'informations, en anglais, regardez le [guide d'Apple](https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/LandingPage/index.html), qui inclus un tutoriel complet sur Swift. - -```js -// -// Bases -// - -println("Hello, world") -var myVariable = 42 -let myConstant = 3.1415926 -let explicitDouble: Double = 70 -let label = "du texte " + String(myVariable) // Cast -let piText = "Pi = \(myConstant)" // Interpolation -var optionalString: String? = "optional" // Peut être nil -optionalString = nil - - -// -// Tableaux et dictionnaires -// - -// Tableau -var shoppingList = ["poisson", "eau", "citrons"] -shoppingList[1] = "bouteille d'eau" -let tableauVide = [String]() - -// Dictionnaire -var occupations = [ - "Malcolm": "Capitaine", - "kaylee": "Mécanicien" -] -occupations["Jayne"] = "Secretaire" -let dicoVide = Dictionary() - - -// -// Contrôle et boucles -// - -// Boucle for (tableau) -let monTableau = [1, 1, 2, 3, 5] -for value in monTableau { - if value == 1 { - println("Un!") - } else { - println("Pas un!") - } -} - -// Boucle for (dictionnaire) -for (key, value) in dict { - println("\(key): \(value)") -} - -// Boucle for (interval) -for i in -1...1 { // [-1, 0, 1] - println(i) -} -// utilisez ..< pour exclure le dernier élement - -// Boucle while -var i = 1 -while i < 1000 { - i *= 2 -} - -// Boucle do-while -do { - println("bonjour") -} while 1 == 2 - -// Switch -let legume = "haricot" -switch legume { -case "haricot": - // ... -case "concombre", "patate": - // ... -default: // requis afin de couvrir toutes les possibilités - // ... -} - - -// -// Fonctions -// - -// Les fonctions sont de type primitif, ce qui veut dire qu'elles peuvent être incluses dans d'autres fonctions - -// Fonction -func direBonjour(name: String, day: String) -> String { - return "Bonjour \(name), on est \(day) aujourd'hui." -} -direBonjour("Bob", "mardi") - -// Fonction qui retourne plusieurs valeurs dans un tuple -func getPrix() -> (Double, Double, Double) { - return (3.59, 3.69, 3.79) -} - -// Arguments -func setup(nombres: Int...) {} - -// Passer et retourner des fonctions -func augmenter() -> (Int -> Int) { - func ajouterUn(nombre: Int) -> Int { - return 1 + nombre - } - return ajouterUn -} -var increment = augmenter() -increment(7) - - -// -// Closures -// -var nombres = [1, 2, 6] - -// Les fonctions sont des cas de closures spéciales ({}) - -// Exemple de closure. -// `->` sépare les arguments et le type de retour -// `in` sépare l'en-tête de closure de son corps -nombres.map({ - (nombre: Int) -> Int in - let resultat = 3 * nombre - return resultat - }) - -// Lorsque le type est connu, comme ci-dessus, on peut faire ceci -nombres = nombres.map({ nombre in 3 * nombre }) -//Ou cela -//nombres = nombres.map({ $0 * 3 }) - -print(nombres) // [3, 6, 18] - - -// -// Classes -// - -// Toutes les méthodes et propriétés d'une classe sont publiques. -// Si vous avez juste besoin de stocker des données dans un -// objet structuré, vous devez utiliser une structure - -// Une classe `Square` hérite d'une classe `Shape` -class Rect: Shape { - var longueurCote: Int = 1 - - // Custom getter and setter property - var perimeter: Int { - get { - return 4 * longueurCote - } - set { - longueurCote = newValue / 4 - } - } - - init(longueurCote: Int) { - super.init() - self.longueurCote = longueurCote - } - - func shrink() { - if longueurCote > 0 { - --longueurCote - } - } - - override func getArea() -> Int { - return longueurCote * longueurCote - } -} -var monCarre = new Square(longueurCote: 5) -print(monCarre.getArea()) // 25 -monCarre.shrink() -print(monCarre.longueurCote) // 4 - -// If you don't need a custom getter and setter, -// but still want to run code before and after getting or setting -// a property, you can use `willSet` and `didSet` - - -// -// Enumerations -// - -// Les énumerations peuvent être d'un type spécifique ou non. -// Elles peuvent contenir méthodes et classes - -enum Suit { - case Pic, Coeur, Carre, Trefle - func getIcon() -> String { - switch self { - case .Pic: return "♤" - case .Coeur: return "♡" - case .Carre: return "♢" - case .Trefle: return "♧" - } - } -} - - -// -// Autres -// - -// `protocol`: Similaire aux interfaces en Java -// `extension`s: Permet d'ajouter des fonctionnalités à un type existant -// Generics: Similaire à Java. Utilisez le mot clé `where` pour specifier les pré-requis du generic - -``` From 9df9e23aa4f9d36ec4d27528318b173aec3b0b8e Mon Sep 17 00:00:00 2001 From: Pierre-Arnaud Baciocchini Date: Tue, 16 Sep 2014 17:33:10 +0200 Subject: [PATCH 5/5] Fixes french translation of CSS --- fr-fr/css-fr.html.markdown | 60 ++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown index 17f1eab4..bff922df 100644 --- a/fr-fr/css-fr.html.markdown +++ b/fr-fr/css-fr.html.markdown @@ -10,17 +10,16 @@ lang: fr-fr Au début du web, il n'y avait pas d'élements visuels, simplement du texte pure. Mais avec le developemnt 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 +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 un page HTML afin de leurs donner des propriétés visuelles différentes. +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 +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:** Parce que le résultat du code CSS est un effet visuel, vous pouvez utiliser [dabblet](http://dabblet.com/) afin de -voir les résultats, comprendre, et vous familiariser avec le langage. +**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. @@ -28,7 +27,7 @@ Cet article porte principalement sur la syntaxe et quelques astuces. /* Les commentaires sont entourés par slash-étoile, comme cette ligne! */ /* #################### - ## SELECTEURS + ## SÉLECTEURS ####################*/ /* Généralement, la première déclaration en CSS est très simple */ @@ -40,7 +39,7 @@ Vous pouvez cibler tous les éléments d'une page! */ * { color:red; } /* -Voici un élément dans notre HTML: +Voici un élément dans notre HTML :
*/ @@ -48,7 +47,7 @@ Voici un élément dans notre HTML: /* Vous pouvez le cibler par une classe */ .une-classe { } -/* ou les deux */ +/* ou par deux */ .une-classe.classe2 { } /* ou par son type */ @@ -74,18 +73,18 @@ div { } /* Ce qu'il faut bien comprendre, c'est que vous pouvez combiner ceci -- Il ne doit pas y avoir -d'espaces entre.*/ +d'espaces entre. */ div.une-classe[attr$='eu'] { } -/* Vous pouvez aussi cibler un élément par son parent.*/ +/* 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 profond dans la structure HTML */ +/* Cela cible aussi les .enfants plus profonds dans la structure HTML */ div.un-parent .enfants {} -/* Attention: le même sélécteur sans espace a un autre sens. */ +/* 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 */ @@ -94,8 +93,8 @@ div.un-parent.classe {} /* 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, plus que la structure de la page */ +/* 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 {} @@ -111,20 +110,20 @@ basé sur le comportement, plus que la structure de la page */ /* #################### - ## PROPRIETES + ## PROPRIÉTÉS ####################*/ selecteur { - + /* Units */ width: 50%; /* pourcentage */ - font-size: 2em; /* times current font-size */ + 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 */ @@ -132,14 +131,14 @@ selecteur { 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, deuxième, etc... */ + font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, la deuxième est utilisée, etc... */ } ``` @@ -149,7 +148,7 @@ selecteur { Le CSS s'écrit dans des fichiers `.css`. ```xml - + @@ -157,8 +156,8 @@ Le CSS s'écrit dans des fichiers `.css`. selecteur { propriete:valeur; } - +
@@ -166,11 +165,11 @@ PS: À ne pas faire. --> ## Priorités -Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélécteur +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: +Voici du code CSS : ```css /*A*/ @@ -197,7 +196,7 @@ et le code HTML:

``` -Les priorités de style sont: +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`. @@ -210,8 +209,8 @@ Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entie ## Compatibilité -La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles -avec tous les navigateurs. Mais c'est important de vérifier la 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. @@ -220,4 +219,3 @@ avec tous les navigateurs. Mais c'est important de vérifier la compatibilité. * [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) -