====== HTML + CSS, sélecteurs======


**Le sélecteur permet de cibler les éléments dans le document.

Les propriétés et valeurs permettent de définir l'habillage de ces éléments.**

<code>
[SELECTEUR] { 
[PROPRIETE]: [VALEUR]; 
}
</code>

----

===== Sélecteur =====

**Pour viser les balises d'un type particulier, il suffit d'écrire son nom!** 

Exemple: **p.**

**Pour viser les balises ayant une classe particulière, il suffit d'écrire le nom de la classe précédée d'un point.**
    
Exemple: **.nomdelaclasse**
    
**Pour viser les balises ayant un identifiant particulier, il suffit d'écrire le nom de l'identifiant précédé d'un dièse**.

Exemple: **#nomdelidentifiant**

Il est possible de combiner les sélecteurs : **Séparés par des virgules pour cumuler les éléments ("et").** 

Exemple: **h1, p, .article**

**Séparés par des espaces pour cibler l'enfant d'une hiérarchie ("dans").**

Exemple: **div .article h2**

----

===== Propriétés =====

Il existe de nombreuses propriétés, quelques exemples.

**commentaire:**
 /* commentaire */

**background:**
  * image d'arrière-plan: background-image: url(nom.jpg); 
  * taille arrière-plan: background-size: 100% , 100%; 
  * défilement arrière-plan: background-attachment: fixed;

**font:**
  * taille de font: font-size: 30px; 
  * famille de font: font-family: arial, sans-serif;

**text:**
  * text-align: center justify left right;

**marge extérieure:**
  * margin: margin: 30px;

**marge intérieure:**
  * padding: 20px;

**bordure:**
  * border: 4px solid black;

<code>
/* commentaire */

background-image: url(nom.jpg);
background-size: 100% , 100%; 
background-attachment: fixed;

font-size: 30px; 
font-family: arial, sans-serif;

text-align: center justify left right;

margin: 30px;
padding: 20px;

border: 4px solid black;


</code>

----

===== Mémento CSS =====

  * http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css
  * http://www.css-faciles.com/proprietes-css-liste-alphabetique.php