/* 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électeur 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 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... */
}
/*A*/
p.classe1[attr='valeur']
/*B*/
p.classe1 {}
/*C*/
p.classe2 {}
/*D*/
p {}
/*E*/
p { propriete: valeur !important; }