Les CSS ou feuilles de style sont apparues avec le HTML4.
Leur objectif est de séparer la mise en page d'un site de son contenu.
Les CSS permettent aussi d'assurer l'utilisation d'une même charte
pour plusieurs sites d'où un gain de productivité. On peut
utiliser plusieurs "niveaux" de style pour une page. Ainsi supposons
que vous vouliez définir la page des "aspirateurs" dans
la catégorie "appareils de ménage" d'un site sur
l'électroménager ; grâce aux CSS, vous allez pouvoir
définir la charte graphique à appliquer au site, puis la
mise en page générale à appliquer aux pages de la
catégorie et enfin pour chaque page l'aspect final du texte en
fonction de ses dimensions. Comme vous le voyez, nous avons mis 3 styles
en cascade.
Les CSS permettent la création de sites optimisés
pour un type de support, une page prévue pour un navigateur ne
pourra pas être lue par un logiciel de synthèse vocale. Donc
pour un même document vous avez, grâce aux feuilles de style,
la possibilité de proposer plusieurs affichages sans réaliser
plusieurs fois la même page.
Donc voici les grandes lignes des CSS, si vous ne comprenez
pas encore très bien ce que cela représente j'espère
que la suite va vous y aider, sinon contactez moi et je
vous aiderai dans la mesure du possible, car les CSS et moi ça
fait 2:-))
En pratique cela donne:
<HEAD>
<style type="text/css">
< !--
H1 {
font-family: "Times New Roman";
text-align:center
}
-->
< /style>
</HEAD>
Et voila à partir de maintenant tous les tags H1 de votre page
seront automatiquement en Times New Roman et centrés sur votre
page.
Mais vous avez aussi la possibilité de faire plusieurs
présentations de la même balise dans une page, cela nous
donne alors:
<HEAD>
<style type="text/css>
<!--
H1{
color:green
}
H1.toto{
color:blue
}
#23{
color:red
}
-->
</style>
</HEAD>
<BODY>
<h1>Le style applicable à toute la page</h1>
<!--Voici la seule syntaxe gérée par Netscape 4.5 la
version 6 améliore énormément les choses-->
<h1 class="toto">Le style applicable à cette balise</h1>
<!----------------------------------------------------------------------------------------------------------->
<h1 id="23">Le style applicable à cette balise</h1>
</BODY>
Si vous visualisez cette page dans un navigateur compatible avec les css
vous verrez la couleur de vos tîtres changer mais pas les autres
éléments de ce tag.
Bien alors passons aux choses sérieuses : définir
votre propre style pour vos pages.
Pour ce faire il vous faut suivre la syntaxe suivante:
nom tu tag html.nom
de la class{définition des
options de mise en page}
En rouge vous avez les informations à récupérer
dans le cours de HTML
En bleu vous avez les informations que vous choissisez et qui appartiennent
aux CSS2
En gras vous avez les éléments qui interviennent dans toutes
les définitions de CSS.
De plus vous pouvez stocker l'ensemble des styles à
appliquer à une page HTML dans un ou plusieurs fichiers textes
situés dans un autre dossier, donc l'ensemble du site est modifié
en ne changeant qu'un seul fichier. Celui-ci doit s'appeler toto.css
et dès lors il vous suffit d'insérer la ligne suivante pour
que les styles définis dans toto.css puissent être appliqués
à la page en cours :
<LINK TYPE="text/css" rel="stylesheet" href="toto.css">
Le fichier toto.css ne doit contenir que les définitions des différents
styles, aucun code html ou d'un autre langage!!
Et bien sûr il est possible d'insérer par ce procédé
plusieurs feuilles de style
