Initiation à l’intégration XHTML/CSS - séance 3
oct
7
2009
Troisième séance de cours, dans le cadre de la formation proposée aux étudiants SRC Hunan, dispensée par l’IUT Michel de Montaigne, Bordeaux III.
Autres balises xhtml de mise en forme du contenu
La balise <div></div>
Il s’agit d’une balise de type bloc permettant de mettre en forme plus aisément une page web.
Exemple :
1 | <div><p>Mon texte ici <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="Google"/></p></div> |
Attributs de la balise <div></div>
| attributs | exemple | ||||
|---|---|---|---|---|---|
| nom | valeur | description | |||
| id, class | identifiants internes au document | permet d’associer des styles aux éléments portant l’id ou la class |
|
||
| lang | en, fr,… | indication de la langue |
|
||
| title | titre de l’élément | titre de l’élément |
|
||
| style | toutes les propriétés des styles | information de style en ligne |
|
||
| clear | left, right, both | gère l’aligement et les objets flottants |
|
||
Comment vérifier que le code xhtml est correct ?
Des outils existent en ligne pour valider un code xhtml :
- Si la page est publiée sur Internet : validation par URL : http://validator.w3.org/
- Si la page est uniquement sur votre ordinateur : validation par upload de la page : http://validator.w3.org/#validate_by_upload
Initiation aux css
Les Cascading Style Sheets permettent de travailler la mise en forme du document xhtml et d’apporter des informations modifiant :
- Les couleurs, les tailles, les espaces au niveau des polices,
- L’agencement des éléments dans la page,…
Sources : http://openweb.eu.org/articles/initiation_css
Comment faire appel aux css ?
Dans la partie de l’entête du document , entre les balises <style type="text/css"> </style>
1 2 3 4 5 6 7 | <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Module Internet - SRC Hunan > Séance n°3</title> <style type="text/css"> ici vos css </style> </head> |
Comment appliquer des styles ?
À tous les éléments de la page :
le sélecteur universel * agit sur tous les éléments HTML. Pour définir par exemple une couleur rouge par défaut :
1 | * { color: #red; } |
Les éléments susceptibles d’avoir une couleur d’avant-plan, comme les paragraphes de texte, les titres, les bordures… seront rouges, sauf si une autre couleur leur est spécifiquement attribuée ;
À toutes les instances d’un élément
Pour que le texte des paragraphes soit par exemple en bleu :
1 | p { color: blue; } |
Le contenu de toutes les balises <p> sera bleu, sauf si une autre couleur leur attribuéee par ailleurs de façon plus spécifique ;
À certaines instances d’un élément
Pour que le texte de certains paragraphes seulement soit par exemple en vert, on définit la classe .vert :
1 | p.vert { color: green; } |
Le contenu de toutes les balises <p class="vert"> sera vert. Le contenu des balises <p> restera bleu ;
À une instance unique d’un élément
Pour que le texte d’un paragraphe précis soit par exemple en vert, on définit l’id #vert :
1 | p#vert { color: green; } |
le contenu de la seule balise <p id="vert"> sera vert. Le contenu des autres balises <p> restera bleu ;
À un ensemble d’éléments successifs
Pour que le texte d’un titre et des paragraphes qui le suivent soient gris, on définit la classe .gris :
1 | .gris { color: grey; } |
Ce style s’appliquera aux éléments bornés par l’élément div :
1 2 3 4 5 | <div class="gris"> <h1>…</h1> <p>…</p> <p>…</p> </div> |
Ainsi les éléments h1 et p auront pour code couleur le gris
À une partie de contenu de paragraphe
Pour que certains mots d’un paragraphe soient gris, on applique la classe .gris à l’élément span :
1 | <p>…<span class="gris">ceci sera en gris</span>… </p> |
Les différents types de styles
Les couleurs sont spécifiées à l’aide des Mots-clé HTML ou du modèle de couleur RGB .
Couleur et image d’arrière-plan
- pour que l’arrière-plan d’un élément soit blanc :
1
background-color: white;
- pour qu’une image occupe l’arrière-plan d’un élément :
1
background-image: url("…url de l'image…") - pour que l’image d’arrière-plan ne se répète pas dans l’élément :
1
background-repeat: no-repeat;
- pour que l’image d’arrière-plan soit centrée dans l’élément :
1
background-position: center;
Couleur d’avant-plan
- pour que l’avant-plan d’un élément soit noir :
1
color: black;
Bordures
- pour que l’élément ait une bordure noir et continue de 5 pixels d’épaisseur :
1
border: 5px solid black;
- pour que la bordure soit en pointillé :
1
border: 5px dotted black;
- pour que la bordure donne une impression de relief :
1
border: 5px groove black;
Taille, alignement et positionnement
Largeurs, hauteurs
- pour spécifier la largeur d’un élément (ici 250px) :
1
width: 250px;
- pour spécifier la hauteur d’un élément (ici 250px) :
1
height: 250px;
Marges, espacement
- pour spécifier la largeur d’une marge autour d’un élément (ici 25px) :
1
margin: 25px;
- pour spécifier la largeur de l’espacement autour d’un élément (ici 25px) :
1
padding: 25px;
Alignement du texte
- pour centrer un texte :
1
text-align: center;
- pour aligner un texte à gauche :
1
text-align: left;
- pour aligner un texte à droite :
1
text-align: right;
Positionnement des éléments:
- pour centrer horizontalement un élément dans la page (ici avec une largeur de 70% de celle-ci) :
1 2
margin-left: 15%; margin-right: 15%; - pour extraire un élément du flux normal et le positionner à gauche :
1
float: left;
- pour extraire un élément du flux normal et le positionner à droite :
1
float: right;
- pour empêcher un élément flottant de déborder vers le bas sur le contenu qui le suit :
- le faire suivre d’un élément
1
<div class="spacer"> </div>
1
.spacer { clear: both; }
- le faire suivre d’un élément
- pour extraire un élément du flux normal et le positionner de manière absolue dans la fenêtre du navigateur (ici, à 25 px des bords haut et droit) :
1 2 3
position: absolute; right: 25px; top: 25px;
Typographie
- pour spécifier une police de caractères (ici type arial) :
1
font-family: arial, verdana, helvetica, sans-serif;
- Pour spécifier une taille de caractères (ici 1em) :
1
font-size: 1em;
- pour spécifier une hauteur de ligne (ici 1.5em) :
1
line-height: 1.5em;
- pour spécifier une mise en italique :
1
font-style: italic;
- pour spécifier une mise en gras :
1
font-weight: bold;
- pour spécifier un soulignement :
1
text-decoration: underline;
- pour barrer un texte :
1
text-decoration: line-through;
- pour forcer l’affichage du texte en capitales :
1
text-transform: uppercase;
Formats d’hyperliens
- pour définir la couleur par défaut des hyperliens (ici, bleu) :
1
a { color: blue; } - pour définir des hyperliens non soulignés :
1
a { text-decoration: none; } - pour définir la couleur des hyperliens visités (ici, bleu) :
1
a:visited { color: #800080; } - pour définir la couleur des hyperliens survolés (ici, bleu) :
1
a:hover { color: #800080; } - pour définir la couleur des hyperliens activés (ici, bleu) :
1
a:active { color: #800080; }
Valider son code
Le validateur CSS du W3C vérifie la conformité de votre feuille de style à la spécification CSS1 ou CSS2.
Evaluation
- Quiz à traiter en une demi-heure.