1 / 10

Cours XHTML/CSS

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

kelly-kirk
Download Presentation

Cours XHTML/CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cours XHTML/CSS Lundi 20 Octobre 2008

  2. 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

  3. 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 (#)

  4. 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";}

  5. 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%;}

  6. 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;}

  7. 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;}

  8. 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

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

  10. 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>

More Related