Cours XHTML/CSS

Lundi 20 Octobre 2008

Balises, propriétés et valeursli{ color: blue; background: #156129; margin: 14px 14px 14px 14px; list-style: none;}

Dans cet exemple, li correspond à la balise de liste du langage

XHTMLcolor, background, margin et list-style sont les

propriétés de la balise liblue, #156129, 14px 14px 14px 14px et none

sont les valeurs affectées aux propriétés

Sélecteurs La balise d’un CSS peut être remplacée par

un sélecteur. Par exemple :

pour faire référence à toutes les balises (*)pour cibler des balises en fonction de leur

attribut class (.)pour cibler des balises en fonction de leur

attribut id (#)

Le sélecteur universel * Le sélecteur universel étoile (*) s'adresse à

toutes les balises. Vous l‘utiliserez essentiellement pour modifier la police de tous les éléments affichés dans un document.

* { font-family: Arial;}Ou encore

* { font-family: "Courier New";}

Le sélecteur de type Le sélecteur de type permet de changer le

style d'une balise. Ici, par exemple, le style de toutes les balises <h2> :

h2 {font-size: 130%;}

Le sélecteur de classe Le sélecteur de classe est représenté par un

point (.). Il cible les balises en fonction de la valeur de leur attribut class. Par exemple, le style ci-après s'applique à toutes les balises <a> dont l'attribut class vaut "gras" :

a.gras {font-weight: bold;}

Le sélecteur d'identificateur Le sélecteur d'identificateur est représenté

par le caractère dièse (#). Il cible la balise dont la propriété id a la valeur spécifiée. Ici, seule la balise dont la propriété id vaut rouge est concernée :

#rouge {color: red;}

Exercice Ecrire un fichier CSS externe qui effectue les

actions suivantes :Titres <h3> affichés en caractères rougesBalises <a> de classe "vert" affichés en vertBalises <p> de classe "ital" affichées en

italiqueBalises <p> d'identificateur "gras" affiché en

gras

Solution : Le fichier moncss.cssh3 {color: red;}a.vert {color: green;}p.ital {font-style: italic;}p#gras {font-weight: bold;}

Solution : le fichier test.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="moncss.css" /> </head> <body> <h3>Ceci est un titre H3</h3><br><br> <a class="vert" href="http://site.com">Lien en vert</a><br><br> <a href="http://site.com">Lien classique</a><br><br> <p class="ital">un paragraphe en italique </p><br> <p>Un autre paragraphe en normal</p><br> <p id="gras">Un autre paragraphe en gras</p> </body></html>

Documents

Cours XHTML/CSS