Dans le vieil étang
Une grenouille saute
Un ploc dans l'eau !
Basho
Pour me contacter : igrimeau(at)univ-mlv.fr
Vous trouverez toute la documentation concernant HTML 4.01 à l'adresse suivante : http://www.w3.org/TR/html4/.
La documentation concernant la norme CSS2.1 peut être trouvée à l'emplacement suivant : http://www.w3.org/TR/CSS21/.
Une feuille de style comme son nom le dit clairement sert à définir un style. Mais qu'est ce qu'un style en HTML ? Un style est un ensemble de règles permettant de définir comment un objet doit être rendu (i.e. dessiné, affiché).
Grâce aux feuilles de style, il est virtuellement
possible de changer le style de tout objet dans une
page. L'exemple suivant montre comment changer la
couleur de fond d'une page en modifiant l'élément
de style background-color
(couleur
de l'arrière-plan) du body
de cette page:
<!-- Une belle page rouge --> <html> <head> <title>Titre d'une belle page rouge !</title> </head> <body style="background-color: red;"> Une belle page en rouge ! </body> </html>
On peut rassembler tous ces éléments de style dans l'en-tête
du document grâce à une balise <style>
ainsi que le montre l'exemple ci-dessous:
<!-- Une belle page rouge (bis) --> <html> <head> <title>Titre d'une belle page rouge ! (bis)</title> <style> <!-- body { background-color: red; } --> </style> </head> <body> Une belle page rouge ! (bis) </body> </html>
Notez les balises de commentaires (<!-- et -->) autour de la définition des éléments de style. Ces balises sont nécessaires pour tromper les navigateurs obsolètes qui pourraient mal interpréter ces indications de style.
Si on veut pouvoir appliquer le même style à un
ensemble de pages, il est plus simple de rassembler
toutes les informations de style dans un seul et même
fichier. L'extension de ce fichier sera généralement
.css
et il aura le format décrit par
l'exemple suivant:
/* Ma jolie feuille de style. */ body { background-color: red; }
On indiquera dans le code HTML où trouver cette
feuille de style en utilisant le tag link
de la façon suivante:
<!-- Une belle page rouge ! (ter) --> <html> <head> <title>Titre d'une belle page rouge ! (ter)</title> <link rel="stylesheet" title="ma-jolie-feuillede-style" type="text/css" href="exemple3.css" media="screen" /> </head> <body> Une belle page rouge ! (ter) </body> </html>
La valeur stylesheet
du paramètre
rel
indique que l'on déclare une feuille
de style. La valeur screen
du paramètre
media
indique que cette feuille de style
doit être utilisée lors du rendu de la page à l'écran.
La valeur exemple3.css
du paramètre href
indique que la feuille
de style est contenue dans le fichier exemple3.css et
que ce fichier est trouvable au même emplacement que
la page elle-même.
Questions:
media
décrit ci-dessus.
WWW
de votre compte
(créez le si il n'existe pas et octroyez les droits
de parcours pour tous sur ce répertoire), créez un
sous-répertoire td2.
Dans ce sous-répertoire créez un fichier index.html
et un fichier style.css
.
Faites du fichier index.html
une page
au format html reliée à la feuille de style
style.css
que vous laisserez vide pour
l'instant.
index.html
. Expérimentez avec
les paramètres background-repeat
,
background-attachment
, et background-position
. Il arrive assez souvent qu'on ait besoin de plusieurs styles pour un même élément. On peut, par exemple, vouloir définir plusieurs type de paragraphes dont les alignements varieraient. On aurait donc les paragraphes alignés à droite, les paragraphes alignés à gauche, les paragraphes centrés et les paragraphes justifiés.
On pourrait certes s'amuser à écrire le code suivant:
<p style="text-align: left;"> Ce paragraphe est aligné à gauche. </p> <p style="text-align: left;"> Ce paragraphe aussi est aligné à gauche. </p> <p style="text-align: right;"> Ce paragraphe est aligné à droite. </p> <p style="text-align: center;"> Ce paragraphe est centré. </p> <p style="text-align: justify;"> Ce paragraphe est justifié. </p>
On obtiendrait alors le résultat suivant:
Ce paragraphe est aligné à gauche.
Ce paragraphe aussi est aligné à gauche.
Ce paragraphe est aligné à droite.
Ce paragraphe est centré.
Ce paragraphe est justifié.
Mais cette méthode risque d'être un brin fastidieuse. Surtout si on a des paragraphes alignés à gauche avec du texte bleu sur fond blanc, des paragraphes alignés à droite avec une police de taille 17, etc...
Heureusement il existe une méthode pour définir des
groupes de propriétés et leur attribuer un nom.
Ce sont les classes.
L'exemple suivant est un fragment de feuille de style
montrant comment définir une classe red-right-aligned
qui lorsqu'elle est attribuée à un élément aligne le
contenu de cet élément à droite et lui donne la couleur
rouge.
.red-right-aligned { color: red; text-align: right; }
Et ce fragment de code html montre comment attribuer cette classe à paragraphe:
<p class="red-right-aligned"> Oh le joli paragraphe en rouge aligné à droite ! </p>
Cet exemple ressemble au fragment suivant:
Oh le joli paragraphe en rouge aligné à droite !
Les curieux se demanderont probablement déjà pourquoi
le nom de la classe est précédé d'un point lors de sa
définition dans la partie feuille de style.
Ils pourraient penser, non sans raison, que c'est pour
différencier les classes des styles des éléments de base.
Ils n'auraient pas complètement tort.
Mais cela va encore un peu plus loin.
On peut en effet écrire des classes de style destinées
à des éléments de type spécifique. On peut par exemple
modifier notre style red-light-aligned
(que l'on renommera paragraphe-red-right-aligned
pour l'occasion) pour qu'il ne s'applique qu'à des paragraphes.
Pour ce faire on modifiera le style de façon à ce
qu'il ressemble à ça:
p.paragraph-red-right-aligned { color: red; text-align: right; }
Et voilà ! Maintenant si on définit par exemple le titre:
<h1 class="paragraph-red-right-aligned"> Mon joli titre en rouge aligné à droite </h1>
il aura l'aspect suivant:
Mon joli titre en rouge aligné à droite
Questions:
red-text
, green-text
et blue-text
, qui comme leurs noms l'indiquent donneront respectivement la couleur rouge, verte ou bleue aux éléments auxquelles elles seront appliquées.<html> <head> <style> <!-- body { color: red; text-align: right; } p.uneclasse { text-align: left; } --> </style> </head> <body> <p> paragraph 1 </p> <p class="uneclasse"> paragraph 2 </p> <p> paragraph 3 </p> <p> paragraph 4 </p> </body> </html>Visualisez cette page. Que constatez vous ?
Le CSS permet également de faire des choses encore un peu plus complexes. On peut par exemple écrire ceci:
div p { text-indent: 10px; }
Cet exemple dit que tout paragraphe se trouvant à l'intérieur d'un div doit voir sa première ligne indentée de 10 pixels. On dit que cette règle n'affecte que les éléments de type p descendants d'un élément de type div.
On peut également utiliser des classes pour affiner encore un peu plus la sélection comme dans les exemples suivants:
/* n'affecte que les paragraphes descendants * d'un élément de type div de classe 'mondiv' */ div.mondiv p { text-indent: 20px; } /* n'affecte que les paragraphes de classe * 'monparagraphe' et descendants * d'un élément de type div. */ div p.monparagraphe { text-indent: -10px; } /* n'affecte que les paragraphes de classe * 'monparagraphe' descendants d'un élément * de type div de classe 'mondiv'. */ div.mondiv p.monparagraphe { text-indent: 40px; }
Encore plus fort, il est possible de spécifier ces éléments de style sur plus de deux niveaux:
/* N'affecte que les spans de classe 'rouge' descendants des * paragraphes eux mêmes descendants des div de classe 'boite' */ div.boite p spam.rouge { color: red; }Questions:
Comment sont appliqués les divers styles définis
lorsqu'ils se chevauchent ? Par exemple si un style
div.a p
et un style div p.b
sont définis, que se
passe t'il pour le fragment de code suivant:
Vous pouvez, comme d'habitude, vous aider de la norme: http://www.w3.org/TR/CSS21/selector.html.
Créez une ou plusieurs petites pages et leur feuille de style mettant en application ce qui a été vu dans ce TD (pas plus, pas moins) et envoyez la par e-mail avec pour sujet "[IMAC1] HTML/CSS - TD2". Vous publierez également la ou les pages sur votre compte étudiant.
Le sujet de cette page sera "Clark Kent/Superman, l'homme sous le costume moulant". Vous serez jugés à la fois sur le fond et la forme. Lâchez vous.