Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

Qu'est ce qu'un sélecteur (selector) CSS ?

Un sélecteur CSS peut être défini comme étant une chaîne de caractères (ensemble de mots-clés et/ou de symboles), qui permet d'identifier les éléments qui vont profiter du style CSS. Chaque sélecteur pointe vers un endroit précis de la page Web. Pour ceux qui adorent l'explication assistée par les graphiques peuvent contempler ce petit dessin :

les éléments d'une règle CSS : le sélecteur CSS, déclaration CSS, propriété CSS et valeur CSS

Cette règle CSS signifie que le style défini dans la déclaration ne va concerner que les balises h1 et p ainsi que les classes ".menu".

Les sélecteurs CSS sous Dreamweaver

Ouvrez votre Dreamweaver, puis allez dans le menu Texte / Styles CSS / Nouveau, ça va vous afficher la fenêtre suivante :

les sélecteurs CSS sous Dreamweaver : sélecteur de type, classe, id et pseudo-classe

Vous pouvez d'emblée constater que le Dreamweaver reconnait quatre types de sélecteurs CSS :

Dans ce chapitre, on va seulement voir le sélecteur de type (type selector), qu'on appelle aussi sélecteur de balise (tag selector), qui permet de redéfinir l'aspect d'une balise.

Sélecteur de type (type selector) : sélecteur de balise (tag selector)

Avant d'entrer dans le vif du sujet. Vous devez savoir que chaque balise à un rendu visuel par défaut, je m'explique davantage, chaque navigateur applique une feuille de style par défaut.

Ce style par défaut ne sera appliqué que si aucun autre style n'est disponible (style auteur ou style utilisateur). Pour tout vous dire, le W3C a présenté aux développeurs de navigateurs une feuille de style d'exemple qu'ils sont priés à implémenter par défaut.

La feuille de style par défaut indique comment les éléments XHTML doivent être rendus dans les navigateurs : comme le mode d'affichage (display : block ou inline), les marges externes (margin) et les marges internes (pudding), la taille de la police etc. Par exemple, selon la feuille proposée par le W3C la balise <p> doit être affichée dans tous les navigateurs de la façon suivante :

 p { 
display: block; /* le paragraphe va créer un retour à la ligne avant et après*/  
margin: 1.12em 0; /* marge gauche et droite de 0, marge inférieure et supérieure de 1.12em */  
}
  
Les spécifications du W3C étant simplement des recommandations supplétives dépourvues de toute autorité, la plupart des navigateurs ont crée leur propre feuille de style initiale pour le rendu par défaut, certains logiciels dont le code-source est ouvert comme Firefox permettent l'accès en lecture et en écriture (modification) de cette feuille de style initiale. Pour accéder à celle de Firefox rendez-vous dans le dossier :
"\Program Files\Mozilla\Firefox\res" puis ouvrez les deux fichiers "forms.css" qui comprend l'apparence des balises de formulaires (form, fieldset, input, textarea, option, legend, select, label, etc.) et "html.css" qui comprend l'aspect par défaut des autres balises (p, blockquote, h1..h6, table etc.).

Si on veut changer l'aspect inhérent aux paragraphes <p> à savoir : marge gauche et droite de 0, marge inférieure et supérieure de 1.12em, alignement à gauche et texte en couleur noire. On pourra appliquer un nouveau style au sélecteur de balise "p", et le tour est joué. Exemple :

p {
font-family: Helvetica;
color: #0033CC;
font-size: large;
background-position: right; 
} 

Si on généralise l'écriture on aura :
Nom de la balise {propriété CSS : valeur; propriété CSS : valeur; propriété CSS : valeur; ....}
On sépare chaque couple "propriété/valeur" par un point virgule, et on met double-point entre la propriété est sa valeur conjointe.

La disposition des phrases avec laquelle j'ai redéfini la balise <p> n'est pas obligatoire, mais c'est très important car ça facilite énormément la lisibilité du code, Mais vous pouvez quand même écrire ce bout de code en une seule ligne ou comme bon vous semble :

p {font-family:Helvetica;color:#0033CC;font-size:large;background-position:right; }

C'est aussi valable car l'essentiel c'est de respecter les règles de codage à savoir les accolades, les doubles-points, et les points-virgules. Mais cette méthode est peu recommandée. Car ça peut éventuellement causer de sérieux problèmes en cas de mise à jour et modification de la feuille de style.

Dorénavant nos paragraphes, seront alignés à droite et non à gauche comme d'hab. Ils auront une couleur bleue, au lieu de la couleur antique noire. Enfin les paragraphes vont être habillés par une nouvelle police "Helvetica" et une taille supérieure à la normale.

Voici le rendu visuel de notre paragraphe après redéfinition :

Un fichier XHTML permet d'insérer le contenu de la page,
alors qu'un fichier CSS permet de modéliser la page

Admirez-moi le nouveau paragraphe, j'espère que vous vous rendez compte de la puissance des CSS. Je crois que c'est fini pour la première partie, maintenant passons à la suite pour régler le compte aux autres sélecteurs CSS (les classes et les id) et d'autres notions dans ce pays de merveilles.

Aidez la Communauté des Étudiants !