110 likes | 202 Views
Cours XHTML/CSS. Lundi 20 Octobre 2008. Balises, propriétés et valeurs. li { color : blue ; background: #156129; margin : 14px 14px 14px 14px ; list -style: none; } Dans cet exemple, li correspond à la balise de liste du langage XHTML
E N D
Cours XHTML/CSS Lundi 20 Octobre 2008
Balises, propriétés et valeurs li { color: blue; background: #156129; margin: 14px 14px14px14px; list-style: none; } Dans cet exemple, • li correspond à la balise de liste du langage XHTML • color, background, margin et list-style sont les propriétés de la balise li • blue, #156129, 14px 14px14px14px 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 rouges • Balises <a> de classe "vert" affichés en vert • Balises <p> de classe "ital" affichées en italique • Balises <p> d'identificateur "gras" affiché en gras
Solution : Le fichier moncss.css h3 {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> <linkrel="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>