08/11/14

Le sélecteur d'identificateur

Reprenons l'exemple précédent ; le premier paragraphe du texte est une introduction à l'interview ; on souhaite donc lui donner une mise en forme particulière (en italique et plus petit) ; cette partie, sémantiquement, n'apparait qu'une fois sur la page. Nous pourrions faire une classe .intro mais il est plus indiqué d'utiliser un autre type de sélecteur : le sélecteur d'identificateur.

1. Placez vous dans la balise p contenant le premier paragraphe, passez par le menu Dialogue/Editer la balise sous curseur.... Il suffit alors d'ajouter un nom dans le champ ID. Nommez ce premier paragraphe "intro".
2. Faites une nouvelle règle CSS et choisissez #intro dans la zone Sélecteur(s) ; vous pouvez ensuite décider de la mise en forme.

Remarquez l'écriture du sélecteur de règle dans la palette StylesCSS : #intro . Le signe # indique que le sélecteur de cette règle est un identificateur; elle ne s'appliquera donc qu'à la balise portant le nom intro .

Nous souhaitons modifier le texte du pied de page en traçant un trait entre le paragraphe précédent et lui-même.
En HTML il était habituel d'inclure entre les deux paragraphes une balise <hr /> pour obtenir ce trait (essayez) ; mais une fois de plus cela revient à ajouter une balise sans fonction sémantique.
Avec les CSS on a une propriété qui permet d'obtenir un résultat équivalent sans modifier le balisage : on peut ajouter des bordures sur un élément. Modifiez la règle du pied de page pour définir une bordure supérieure sur le dernier paragraphe, diminuer le corps et centrer le contenu.

Principes d'un identificateur de balise

• Chaque identificateur doit n'apparaitre qu'une fois dans le document html
• son nom doit respecter les précautions habituelles (pas d'espace, d'accents, ...)
• dans le HTML il apparait comme : <p id="monp"> et pas <p id="#monp">
• dans le CSS il apparait comme #monp {color:"0F0";} et pas monp {...}

Valider les CSS

Comme pour le HTML, on peut faire valider les règles CSS que l'on a mises dans un document : Validation avec le W3C