info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-21 05:51:31 +02:00
Code Issues Releases Wiki Activity

Fixes french translation of CSS

Browse Source
This commit is contained in:
Pierre-Arnaud Baciocchini
2014-09-16 17:33:10 +02:00
parent 8df21274b9
commit 9df9e23aa4
1 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
fr-fr/css-fr.html.markdown
View File

@@ -14,13 +14,12 @@ 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. 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 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. 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. 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 **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.
voir les résultats, comprendre, et vous familiariser avec le langage.
Cet article porte principalement sur la syntaxe et quelques astuces. 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! */ /* 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 */ /* 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; } * { color:red; }
/* /*
Voici un élément dans notre HTML: Voici un élément dans notre HTML :
<div class='une-classe classe2' id='unId' attr='valeur' /> <div class='une-classe classe2' id='unId' attr='valeur' />
*/ */
@@ -48,7 +47,7 @@ Voici un élément dans notre HTML:
/* Vous pouvez le cibler par une classe */ /* Vous pouvez le cibler par une classe */
.une-classe { } .une-classe { }
/* ou les deux */ /* ou par deux */
.une-classe.classe2 { } .une-classe.classe2 { }
/* ou par son type */ /* 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 /* 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'] { } 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 */ /* Un élément qui est en enfant direct */
div.un-parent > .enfant {} 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 {} 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 {} div.un-parent.classe {}
/* Vous pouvez cibler un élément basé sur un enfant de même parent */ /* Vous pouvez cibler un élément basé sur un enfant de même parent */
@@ -95,7 +94,7 @@ div.un-parent.classe {}
.je-suis-tout-avant ~ .cet-element {} .je-suis-tout-avant ~ .cet-element {}
/* Il y a des pseudo-classes qui permettent de cibler un élément /* Il y a des pseudo-classes qui permettent de cibler un élément
basé sur le comportement, plus que la structure de la page */ basé sur le comportement, en plus de la structure de la page */
/* élément avec le curseur au-dessus */ /* élément avec le curseur au-dessus */
:hover {} :hover {}
@@ -111,14 +110,14 @@ basé sur le comportement, plus que la structure de la page */
/* #################### /* ####################
## PROPRIETES ## PROPRIÉTÉS
####################*/ ####################*/
selecteur { selecteur {
/* Units */ /* Units */
width: 50%; /* pourcentage */ width: 50%; /* pourcentage */
font-size: 2em; /* times current font-size */ font-size: 2em; /* taille de la police multipliée par X */
width: 200px; /* pixels */ width: 200px; /* pixels */
font-size: 20pt; /* points */ font-size: 20pt; /* points */
width: 5cm; /* centimetres */ width: 5cm; /* centimetres */
@@ -139,7 +138,7 @@ selecteur {
/* Polices */ /* Polices */
font-family: Arial; font-family: Arial;
font-family: "Courier New"; /* Si espace, entre guillemets */ 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`. Le CSS s'écrit dans des fichiers `.css`.
```xml ```xml
<!-- Vous devez inclure le CSS dans la balise <head>: --> <!-- Vous devez inclure le CSS dans la balise <head> : -->
<link rel='stylesheet' type='text/css' href='chemin/style.css' /> <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é. --> <!-- Vous pouvez inclure du CSS dans le HTML directement, mais ce n'est vraiment pas recommandé. -->
@@ -158,7 +157,7 @@ Le CSS s'écrit dans des fichiers `.css`.
</style> </style>
<!-- ou directement sur l'élément HTML. <!-- ou directement sur l'élément HTML.
PS: À ne pas faire. --> PS : à ne pas faire. -->
<div style='propriete:valeur;'> <div style='propriete:valeur;'>
</div> </div>
@@ -166,11 +165,11 @@ PS: À ne pas faire. -->
## Priorités ## 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. et une même propriété peut être définie plusieurs fois.
Dans ces cas, une des propriétés devient prioritaire. Dans ces cas, une des propriétés devient prioritaire.
Voici du code CSS: Voici du code CSS :
```css ```css
/*A*/ /*A*/
@@ -197,7 +196,7 @@ et le code HTML:
</p> </p>
``` ```
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. Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entiers.
* `E` a la priorité grâce à `!important`. * `E` a la priorité grâce à `!important`.
@@ -211,7 +210,7 @@ Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entie
## Compatibilité ## Compatibilité
La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles 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é. 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. [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/) * [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/) * [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) * [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)