mercredi 24 octobre 2012

Les sélecteurs, tuto CSS

J'ai donc décidé de suivre ce tuto pour comprendre les sélecteurs, parce qu'intuitivement je n'ai pas très bien compris la règle, et dans mon bouquin, y a rien d'expliqué, que des trucs à suivre.

http://www.tuteurs.ens.fr/internet/web/html/css.html

Donc je note sur les sélecteurs :

le sélecteur c'est genre a, pour sélectionner tous les liens.
Les caractères sont hérités : si je définis body, ça sera valable aussi dans p, par exemple.
Il peut être généralisé, genre a, mais si y en a un plus précis, c'est celui-ci qui l'emporte.
Par exemple, a.autre chose { blabla; } passera au dessus de a dans le contexte en question.

On peut en désigner plusieurs, suffit de séparer par une virgule :
a, h1, .truc { } ça désigne les liens, les h1, les classes truc.

Les sélecteurs hiérarchiques :

C'est ça que j'ai particulièrement du mal à comprendre, je crois.

Voilà. Par exemple :
table p { } ça définit le p situé dans table. Jusque là, ça va. Ça peut être hérité également, ça n'a pas d'importance. Par exemple si on a table et que dans les cellules td on a p, ben, ça marche. Pas besoin de préciser td... J'imagine par contre que si c'est uniquement td qu'on veut sélectionner, on précise table td p.
On peut mettre autant de balises qu'on veut.

par contre, on peut également mettre des règles exclusives.
genre ul > li ça signifie que si li est descendant direct de ul seulement.
Donc si on a li qui est en dessous de ol, ça s'applique pas.
Là, j'ai comme un truc qui s'illumine !!

Bon rappel bref : div c'est des blocs, là où span c'est inline. Ca se change mais puisque c'est d'office, autant les utiliser pour ce qu'ils sont.

Les pseudo-classes

Le sélecteur a:link désigne un lien par opposition à une ancre.
En fait, c'est genre :hover:visited etc. On peut les mettre à la suite comme ça :
a:link:hover, a:visited:hover { background-color: yellow; }

Voilà, je crois que j'ai enfin compris.

Il y a encore une chose que je ne suis pas sûre de comprendre, c'est pourquoi on écrit parfois a.truc { } et pourquoi pas .truc a{ } étant donné que j'ai l'impression que ce n'est pas la même chose.

Aucun commentaire:

Membres