Les feuilles de style en Cascade (CSS)
Qu’est ce que les CSS ?
Pourquoi les CSS?
Grâce aux CSS donc, un document Html peut être séparé de sa mise en
forme, et une même mise en forme peut être appliquée à plusieurs
documents HTML. Les CSS sont un ensemble de règles appliquées aux
balises HTML.
Comment écrire ces règles ?
Avant d’aller plus loin, compléter le tableau ci-dessous à partir du site
http://www.adresse-ip.com/baliseh.htm ou tout site de votre choix
Balise HTML Attributs courants
Après avoir complété le tableau, trouver des balises html qui ont des
attributs communs ?
Page 1 sur 4
La syntaxe d’écriture des règles de Style:
Un sélecteur est une balise Html, comme <p>, <body>, <font>, <img>…..
Ecriture :
Sélecteur {attribut : valeur}
Exemple p { color :red}
ou encore en regroupant plusieurs attributs :
Sélecteur { attribut :valeur ; ……. ;Attribut :valeur }
L’attribut mis en forme doit être commun aux sélecteurs (1,2 et 3)
ou encore
selecteur.valeur_attribut { attribut = valeur_attribut}
exemple p.left { text-align=left}
dans le corps du document html, pour faire appel à cette règle de
style :
<p class=left>
ou encore,
On peut ignorer le sélecteur, le style s’appliquera à toutes les balises qui lui
font appel, à condition d’avoir en commun l’attribut concerné.
.center {text-align = center}
dans le corps du document html
exemple
<p class=center>
Modes de d’enregistrement de Styles
3 styles d’enregistrement : link (fichier externe), embeding(styles définis
dans l’entête) et inline(style particulier à une balise).
a- Dans un fichier externe :
Une feuille de style peut être enregistrée dans un fichier externe.
Avantage, elle est chargée une seule fois par le navigateur Web et s’applique à
toutes les pages qui en font la demande explicite dans l’entête
<head>
<link rel="stylesheet"
type="text/css"
href="mestyles.css" />
</head>
Page 2 sur 4
-Note mestyles.css est un fichier texte contenant toutes les mises en forme du
document html. Le document doit se trouver dans le même dossier
b-Style interne
Quand un document a un seul style on peut déclarer ce style à l’intérieur du
document par :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/fond.jpg")}
</style>
</head>
Remarque
body {background-image: url("images/fond.jpg")} si le fichier n’est pas dans le
répertoire courant, il faut utiliser le mot clé URL.
Pour les anciens navigateurs ne prenant pas en charge la balise style on peut
écrire :
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/fond.jpg")}
-->
</style>
</head>
c-Sur place (inline style)
S’applique à une balise particulière, si elle ne fait pas l’objet de style dans une
feuille ou à l’intérieur du document. Par exemple :
<p style="color :red; margin-left: 10px">
Texte sur lequel s’applique le style
</p>
Page 3 sur 4
Travail à faire
1) Ecrire ou ouvrir un document Html composé de plusieurs paragraphes et un
tableau. Alterner les alignements des paragraphes (gauche centré droit),
changer à chaque fois la couleur et la police des caractères. Justifier le choix
de la syntaxe du style.
Page 4 sur 4
