Conception de pages pour un navigateur
Généralités sur la mise en forme avec les styles
Le langage CSS
En complément du HTML, il faut utiliser le langage CSS (Cascading Style Sheets) pour mettre en forme les informations envoyées à un navigateur.
On applique un style à chaque balise.
Il existe trois façons d'appliquer un style à une balise :
- dans la balise elle-même en utilisant l'attibut
style, - dans l'en-tête du code HTML,
- dans une feuille de style séparée du document HTML.
Chaque style a un nom et se voit attribuer une valeur (parmis un ensemble de valeurs prédéfinies).
Exemple : le style text-align peut prendre l'une des valeurs left, right, center ou justify.
Pour attribuer une valeur à un style, le code du langage CSS est le suivant :
nom_du_style:valeur_du_style
Défintion du style dans la balise
Dans une balise, il faut utiliser l'attribut style.
Exemple : <p style="font-size:12px; color:red">...</p>
Définition du style dans l'en-tête du code HTML
Il est souvent préférable de définir le style dans l'en en-tête du code. Ainsi, il s'applique à toutes les balises concernées du document.
Exemple (le code suivant doit être placé entre <head> et </head>) :
<style type="text/css">
p {
font-size:12px;
color:red;
}
</style>
Définition d'un style dans une feuille de style séparée du document html
La feuille de style séparée
La feuille de style doit avoir un nom du type FeuilleDeStyle.css
La feuille de style ne doit contenir que des caractères.
Dans la feuille de style, les styles sont définis comme en en-tête de document.
- Exemple :
- nom_balise {nom_style: valeur ; nom_style : valeur}
- nom_balise.nom_class {nom_style: valeur ; nom_style : valeur}
Lien entre le document html et la feuille de style
Exemple :
<html>
<head>
<link rel="stylesheet" href="FeuilleDeStyle.css" type="text/css">
<head>
<body>
…
</body>
</html>
