Avec
le langage CSS, commence ce que l'on appelle le DHTML (Dynamic HTML).
Maitriser
le langage HTML sans connaitre les feuilles de style peut devenir un handicap
lors de la création de sites Web importants.
En effet, les feuilles
de style apportent de nombreuses améliorations dans la création
de pages HTML :
- La structure et la présentation des pages d'un site
étant séparées dans ce nouveau système, la modification
d'une feuille de style se répercute aussitôt sur l'ensemble du site.
- La
taille du code HTML est très sensiblement réduite par l'utilisation
des feuilles de style, jouant ainsi un rôle important sur le temps de chargement
des pages.
- Le langage CSS apporte un affinement dans la mise en page
des documents proche de la PAO et apportent du dynamisme et de l'interactivité
à vos pages.
- Une plus grande lisibilité du code HTML.
En
résumé, le concept de feuilles de style consiste à choisir une balise,
une classe ou ID et lui attribuer des caractéristiques de mise en forme. Il suffit
ensuite d'intégrer les mises en forme avec la majorité des Balises
HTML en utilisant l'attribut "class".
DÉFINITION
D'UN STYLE :balise, classe ou ID {propriété de style: Valeur;
propriété de style: Valeur ...}Par exemple: B
{ font-size=18px; font-style=bold; font-color=Red}
Tous vos textes en gras
seront en taille 18 et de couleur rouge. td.a {
font-size=18px; font-style=bold; font-color=Red}
Tous vos textes entre
les balises <TD CLASS="a"> et </TD>seront
en taille 18 et de couleur rouge. INCORPORATION
DES STYLES : - À l'intérieur
des marqueurs <BODY>
Cette méthode est utilisée
pour les cas isolés non répétitifs.
Dans le cas contraire,
elle serait contraire aux gains apportés par les feuilles de style.
Exemple
: <B style="font-color:Blue">Salut</B>
Le mot
"Salut" s'affiche en bleu.
- À l'intérieur
des marqueurs <HEAD>
Permet de déclarer les feuilles
de style pour l'ensemble du document.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
a:link { text-decoration: none; color: #FFFFCC}
a:visited { text-decoration: none; color: #FFFFCC}
a:active { text-decoration: none; color: #FFFFCC}
a:hover { text-decoration: none;color: #0000FF}
-->
</STYLE>
</HEAD>
<BODY>
Dans
cet exemple, retire tous les soulignés des liens et leur attribut une couleur.
- Dans
un fichier externe dont l'extension est .css
Voila qui devient
interressant, car vous allez pouvoir créer vos feuilles de style une fois
pour toute et pour l'ensemble de votre site.
Il faut d'abord créer un fichier
texte contenant les feuilles de style et dont l'extension sera .css, puis
créer le raccourci vers cette page dans les pages web :
Le contenu du
document "monstyle.css" :
a.c:hover { color:
#990033; text-decoration: none}
a.c:link { text-decoration: none; color: #FFFFCC}
a.c:active
{ text-decoration: none; color: #FFFFCC}
a.c:visited { text-decoration: none;
color: #FFFFCC}
a.a:hover { color: #6699FF; text-decoration: none}
a.a:link
{ text-decoration: none; color: #FFFFCC}
a.a:active { text-decoration: none;
color: #FFFFCC}
a.a:visited { text-decoration: none; color: #FFFFCC}
td
{ font-size: 12px; color: #000000; text-decoration: none; font-family: Arial,
Helvetica, san-serif}
a.b:active { text-decoration: none; color: #000000}
a.b:hover
{ color: #4A4A95; text-decoration: none}
a.b:link { text-decoration: none;
color: #000000}
a.b:visited { text-decoration: none; color: #000000}
a.d:active
{ text-decoration: none; color: #FFFFCC}
a.d:hover { color: #4A4A95; text-decoration:
none}
a.d:link { text-decoration: none; color: #FFFFCC}
a.d:visited { text-decoration:
none; color: #FFFFCC}
a:active { text-decoration: none; color: #0000CC}
a:hover
{ color: #0000FF; text-decoration: none}
a:link { text-decoration: none; color:
#0000CC}
a:visited { text-decoration: none; color: #0000CC}
.lettrine:first-letter{font-size:300%;float:left}
L'insertion
dans le code HTML :
<HTML>
<HEAD>
<LINK
rel=stylesheet type="text/css" href="monstyle.css">
</HEAD>
Les
classes
La notion de classe permet d'affecter des styles différents
pour une même balise.
Définition d'un classe :
.nom_de_la_classe
{propriété de style: Valeur; propriété de style: Valeur ...}
Attention
!!!, pour différencier la définition d'une classe, d'une balise
HTML, il faut ajouter un "Point" devant le nom des classes.
Par
exemple :
a{propriété de style: Valeur; propriété de style: Valeur ...}
Rédéfini la mise en forme des liens.
.a{propriété
de style: Valeur; propriété de style: Valeur ...}
Alors que cet exemple
définit une classe appelée "a".
Pour utiliser
cette classe, ajouter l'attribut "class" à la balise :
<BALISE
class="nom_de_la_classe"> ... </BALISE>
Exemple :
.toto
{font-type: arial; font-color: red; font-weight: bold}
Les
ID
Les ID servent à éviter les incompréhensions
de langage avec le javascript qui utilise lui aussi la syntaxe nom.nom.
Définition
d'une ID :
#nom_ID { propriété de style: Valeur; propriété de style: Valeur
...}
Pour utiliser l'ID :
<BALISE ID="#nom_ID" > ...
</BALISE>
LES
BALISES <SPAN> et <DIV> Depuis le début,
nous utilisons les balises de mise page pour intégrer les feuilles de style
dans le code HTML. Il peut arriver que ces balises ne soient pas disponibles,
en voulant par exemple appliquer des styles différents pour deux mots qui
se suivent.
Voilà, vous connaissez le minimum
pour vous lancer dans les feuilles de style.
Vous pouvez aussi consulter l'annuaire
de sites concernant le langage CSS, ainsi que les trucs et astuces en CSS.
Une
gallerie de pages montrant les possibilités des feuilles de style est en
construction et bientôt disponible..
La documentation française
officielle sur les feuilles de style, téléchargeable ci-dessous
vous sera d'une aide appréciable pour évoluer : http://www.yoyodesign.org/doc/w3c/css2/cover.html |
