mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2025-08-20 13:31:43 +02:00
Fixes french translation of CSS
This commit is contained in:
Pierre-Arnaud Baciocchini
@@ -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.
|
||||
|
||||
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
|
||||
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 :
|
||||
|
||||
<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 */
|
||||
.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 */
|
||||
@@ -95,7 +94,7 @@ div.un-parent.classe {}
|
||||
.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 */
|
||||
basé sur le comportement, en plus de la structure de la page */
|
||||
|
||||
/* élément avec le curseur au-dessus */
|
||||
:hover {}
|
||||
@@ -111,14 +110,14 @@ 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 */
|
||||
@@ -139,7 +138,7 @@ selecteur {
|
||||
/* 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
|
||||
<!-- 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' />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- ou directement sur l'élément HTML.
|
||||
PS: À ne pas faire. -->
|
||||
PS : à ne pas faire. -->
|
||||
<div style='propriete:valeur;'>
|
||||
</div>
|
||||
|
||||
@@ -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:
|
||||
</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.
|
||||
|
||||
* `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é
|
||||
|
||||
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.
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user