-
Les sélecteurs
Nous allons d'abord voir la structure du CSS, puis quelque propriétés de base.
Voilà la structure d'un code CSS:
selecteur
{
propriétés 1: valeurs;
propriété 2 : valeurs;
}
Donc on indique en premier le ou les sélecteurs(ce sont les différents éléments qui subiront les propriétés) puis on indique les propriétés qui leurs seront attribuer.
Il faut savoir que lorsque l'on met du CSS directement dans une balise, il n'y a pas besoins de selecteur, donc on écrit directement les propriétées.
I- Les selecteurs
Les sélecteurs sont les moyens de sélectionner une balise ou un groupe de balises(ou d'éléments).
Sélectionner une balises:
Tous d'abord, pour sélectionner une balise, il suffit de taper son nom :
p
{
/*propriétés*/
}
Vous remarquer que j'ai entourer propriétés de /* et */, c'est comme cela qu'on écrit un commentaire en CSS, il commence par /* et fini par */.
Ici, ce code sélectionnera TOUTES les balises p qui seront sur notre page HTML.
Maintenant, imaginons que nous voulions sélectionner des images, mais seulement celle qui seraient dans un paragraphe (car oui, comme je vous l'ai dis dans le chapitre sur les images, on peut mettre une images hors d'un paragraphe). La balise image est donc à l'intérieur de la balise p. Donc on marquera ceci:
p img
{
/*propriétés*/
}
Sélectionner plusieurs balises:
Maintenant imaginons que nous voulions appliquer un code CSS à deux balises, par exemple les balises h2 et h1. Voilà comment procédés:
h1, h2
{
/*propriétés */
}
Sélectionner une balise qui en suit une autre:
Imaginons ce code html:
<h1>Titre</h1>
<p>Blablabla</p>
La balise <p> suit bien la balise <h1> ? Donc si vous tapez ceci:
h1 + p
{
}
Les propriétés s'appliqueront sur la balise <p> seulement !
Sélectionneur universelle
Ce sélectionneur sélectionne toutes les balises compris dans votre page HTML:
*
{
}
Sélectionner une balise ayant un attribut:
Pour sélectionner une balise qui à un attribut, par exemple "title", on utilise les crochets : [] avec l'attribut à l'intérieur.
a[title]
{
}
Ce code sélectionne donc les balises a qui ont un attribut title, peu importe sa valeur.
Sélectionner une balise ayant un attribut avec une valeur particulière:
Pour sélectionner une balise qui à un attribut mais qui à une valeur particulière, par exemple l'attribut "title" avec comme valeur "vacance", on utilise cette syntaxe : balise [attribut*="Valeur"] :
a[title*="vacance"]
{
}
Il une méthode pour différencier une balise en particulier. Par exemple imaginons ce code html:
<p>BlaBlaBlaBla</p>
<p>Je veux que ce texte soit en rouge !</p>
<p>BlaBlaBlaBla</p>
Comment faire pour sélectionner seulement la balise que l'on veut ? On ne peut pas avec les techniques précédentes !
On a donc besoins d'utiliser les classes et les id !
Les classes
Les classes sont un moyens de différencié des balises des autres. Pour ce faire il faut rajouter un attribut appelé "class" au balise que l'on veut modifié.
Voilà ce que cela donne:
<p>BlaBlaBlaBla</p>
<p class="nomDeLaClasse">Je veux que ce texte soit en rouge !</p>
<p>BlaBlaBlaBla</p>
Il vous suffit de mettre comme valeur le nom que vous désirez, par exemple "Rouge":
<p>BlaBlaBlaBla</p>
<p class="Rouge">Je veux que ce texte soit en rouge !</p>
<p>BlaBlaBlaBla</p>
Maintenant, dans votre code CSS, il vous suffira de tapez "." puis le nom de la classe pour appliqué les propriétés que vous voulez:
.Rouge
{
}
Et le plus fort dans tous cela, c'est qu'une classe peut-être commune à plusieurs balises:
<p>BlaBlaBlaBla</p>
<p class="Rouge">Je veux que ce texte soit en rouge !</p>
<p>BlaBlaBlaBla</p>
<p class="Rouge">Je veux que ce texte soit en rouge aussi!</p>
Ces deux textes apparaitrons donc en rouge !
Les id :
Les id sont les même procédés que les classes, sauf qu'il ne peuvent s'appliquer qu'à UNE seul balise.
De plus, on remplace le "." par un "#" et on utilise l'attribut "id". Voilà ce que donne un id:
<p id="Rouge">Texte en rouge</p>
Et voilà le code CSS:
#Rouge
{
}
Il est tout à fait possible de donner le même nom à une classe et un id.
Allez plus loin !
Imaginez que vous vouliez allez plus loin ! Vous voulez colorer en rouge juste UN seul mot de votre paragraphe, comment faire ?
Il existe des balises dites annonyme qui servent à rien ! Quand je dis à rien, c'est à dire qu'elle ne modifie en aucun cas votre code .
La balise annonyme div:
La balise div est une balise double et de type BLOCK, on ne peut donc pas la placer dans un paragraphe.
Elle est utiliser pour par exemple, centrez plusieurs balises. Par exemple prenons ce code:
<h1>Article 1</h1>
<p>blablablabla</p>
<h1>Article 2</h1>
<p>blablablabla</p>
Si vous voulez centrez juste les deux premières balises(dans notre exemple, elles correspondent à l'article 1), il vous suffit de les englobez dans un div et de donner une classe ou un id à ce même div !
On aurez pu utiliser une classe, et l'attribuer aux balise <h1> et <p>, mais imaginez une très très grand article ! Avec plein de balises <p> et <img /> ! Il aurait fallu à chaque fois rajouter l'attribut class, ce qui deviendrait lourd à la longue, alors qu'avec un div, on aurez juste une seul fois à écrire l'attirbut classe ! <div class="TexteCentrer">
<h1>Article 1</h1>
<p>blablablabla</p>
</div>
<h1>Article 2</h1>
<p>blablablabla</p>
Le code CSS ne donnerait que ça :
.TexteCentrer
{
}
La balise anonyme span:
Cette balise est une balise double, de type INLINE, elle peut donc être insérer directement dans un pargraphe !
C'est d'ailleurs ce que l'on cherche pour notre exemple de tout à l'heure !
Voilà comment procéder :
<p> Voici un paragraphe, et voici un mot <span class="rouge">rouge</span> !</p>
Ici, la balise span à pour classe "rouge", dans le code CSS, cela donnera donc :
.rouge
{
}
Voilà pour les sélecteurs !
II-Exemple de propriétés
Maintenant passons aux propriétés !
Les propriétés commence par leur nom suivis de ":" puis d'une valeur.
propriété: valeur;
Toutes cette ligne s'appelle une instruction, et une instruction fini TOUJOURS par un ";" point-virgule !Couleur du texte:
Vous devez déjà la connaitre celle-ci, car on à pas arrêtez de l'utiliser dans les exemple ! Il s'agit de la propriété "color", qui à comme valeur une couleur. Il existe plusieur moyen d'indiquer une couleur:
- Par nom: il suffit de taper son nom: "red, blue, green, pink, purple, yellow, orange, black, white" (On ne peut utiliser que ces nom là ! Il n'en existe pas d'autre ! Cependant, vous pouvez rajouter "light" devant certaine mais pas toutes.)
- Par valeur hexadecimal
- Par valeur rgb ou rgba
Pour les valeurs hexadecimal, il s'agit d'une écriture commencent par un "#" et suivis de lettre et de chiffre, voilà un exemple : #66FF66
Pour obtenir la valeur des couleur de façon hexadecimal, utiliser ce site: http://www.proftnj.com/RGB3.htm
Une fois la bonne teinte trouver, copier les nombres contenue dans la case "code hexadecimal".
Pour les valeurs rgba et rgb c'est un peu spécial.
En fait le code s'écrit comme ceci:
color: rgb(Rouge, Vert, Bleu);
rgb et rgba prennent des valeur entre parenthèse, la première et le niveau de rouge, le deuxième le niveau de vert et la troisième le niveau de bleu(d'ou le nom rgb qui signifie red green blue)
Pour trouvez les valeurs de rouge, vert et bleu d'une couleur vous pouvez soit utiliser mon site, soit utiliser un logiciel tel que Paint ou autres(il le font tous normalement).
En ce qui concerne rgba, il prend 4 valeurs :
color: rgba(rouge, vert, bleu, Niveau de transparence);
Le niveau de transparence se situe entre 1 et 0, ou 1 représente un couleur entièrement opaque et 0 une couleur entièrement transparente.
Nous verrons les autres plus en détaille dans le chapitre prochain.
-
Commentaires
Suivre le flux RSS des commentaires
Ajouter un commentaire
Créer mon blog