|
Accueil > Créer >
Feuilles de style
Les feuilles de style (css/cascading style sheet)
ont été crées afin de simplifier la conception et l'entretien de grands sites, mais
leur application sur des sites de moins grande envergure est très utile.
Elles vous permettent de contrôler l'aspect du texte de votre site (style,
taille, couleur, etc) depuis un seul fichier centralisé. (c'est aussi avec les feuilles
de style que l'on crée des liens qui changent de couleurs au passage de la souris)
________________________________________________________________
Comptatible
: A partir de Netscape Communicator 4 et Explorer 4.
(avec les anciens navigateurs, les polices par défaut sont utilisées)
But :
->Chargement plus rapide (réduction du "poid" des pages)
->Présentation graphique homogène sur tout le site
->Plus grande lisibilité du code html
->Modification de l'apparence du site à partir d'un seul fichier
->etc
________________________________________________________________
Comment
ça marche ?
Les styles peuvent être placés dans un fichier externe (dont l'extension
est .css), dans l'en-tête d'une page (entre les balises <head> et </head>) ou
directement dans le corps de la page (entre les balises <body> et </body>).
________________________________________________________________
Un
exemple de définition d'un style
Balise {propriété de style : valeur ; propriété de
style : valeur ; propriété de style : valeur }
en plus concret ..
A {font-family : Arial ; font-size : 18px ; font-style : bold ; font-color :
yellow}
..et ça définit donc un lien (balise A) en Arial, taille 18, gras et
jaune.
________________________________________________________________
Incorporation
de feuilles de style dans l'en-tête d'une page (entre les balises <head> et
</head>)
Déclarer avec la balise STYLE. On y ajoute un attribut text/css, et on met
tout ça entre des balises de commentaires <!--...--> pour éviter au vieux
navigateurs de lire ces informations.
ça nous donne ..
<HTML>
<HEAD>
<STYLE> type="text/css"
<!--
BALISE1 {propriété de style: valeur ; propriété de style: valeur ;
propriété de style: valeur ; etc...}
BALISE2 {propriété de style: valeur ; propriété de style: valeur ;
propriété de style: valeur ; etc...}
BALISE3 etc..etc..
-->
</STYLE>
</HEAD>
<BODY>
..........
..........
</BODY>
</HTML>
Exemple (ça sera plus compréhensible!)
Dans cette exemple, la page utilise un css (feuilles de style) dans
l'en-tête (<head>).
On y trouve une définition pour le corps de la page en général
(<body>) et une définition pour les titres au format H2.
<HTML>
<HEAD>
<STYLE type="text/css">
<!-- body {font: normal 10pt Arial ; color: #000000 ; background :
#FFFFFF }
h2 {font: italic 14pt Verdana ; color #FFCC66 }
-->
</STYLE>
</HEAD>
<BODY>
Ce texte dans le corps de la page et prend le style body
<H2>Celui-là par contre utilise le style H2 !</H2>
</BODY>
</HTML>
________________________________________________________________
Incorporation
de css dans le corps (<body>)
C'est une méthode qui n'est pas souvent utilisée, parcque dans ce cas, les
feuilles de style ne servent à rien !
En fait, elle est uniquement utilisée pour définir une exception dans un
document html.
Exemple !
<HTML>
<HEAD>
Feuilles de style dans l'en-tête (voir ci-dessus)
</HEAD>
<BODY>
<P style="color: blue; font: 14pt times">
TEXTE 2</P>
</BODY>
</HTML>
La feuille de style se trouvant dans l'en-tête n'aura aucune influence sur
le texte "TEXTE 2" (qui apparaitra en times, tailles14 et en
bleu)
________________________________________________________________
Incorporation
de css dans un fichier externe
C'est là que les feuilles de style deviennent intéressantes, puisqu'on
peut modifier le style de tout un site depuis un seul fichier, et il y a un gain en
"poid" intéressant.
Extension du fichier : .css (pas .txt ou .html !)
Et depuis les pages où l'on veut que le style s'applique, on appelle ce
fichier avec la balise LINK.
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css"
href="style.css">
</HEAD>
<BODY>
.....
</BODY>
</HTML>
Un exemple de fichier externe... (pas de balises head ou
body ou html, vous pouvez écrire ce fichier avec le bloc-notes de windows)
<STYLE TYPE="text/css">
<!-- A: VISITED {color: blue }
A: LINK {font-size: 14pt; texte-decoration: none; color:#FFFFFF
A:BODY {font-family: Verdana }
-->
</STYLE>
________________________________________________________________
Liens
modifié au passage de la souris !
Avec les feuilles de style, un lien peut avoir 4 états
différents:
a: link le lien par
défaut
a: hover le lien
survolé
a: active le lien
appuyé
a: visited le lien
déjà visité
On peut également supprimer la ligne caractéristique des liens avec
text-decoration: none (c'est peut-être pas très utile..)
Plutôt que de longs discours, un exemple !
<style type="text/css">
<!--
a:active {font: normal 16pt Arial; color: #000000; text-decoration: none}
a:hover {font: normal 14pt Arial; color: #000000}
a:link {font: normal 14pt Arial; color: #000080; text-decoration: none}
a:visited {font: normal 12pt Arial; color: #000000; text-decoration: none}
--></style>
Ce qui aura pour effet de rendre les liens par défaut en text Arial, 14pt,
bleus et non-soulignés, une fois la souris sur les liens, ils deviendront noirs et
souligné, lorsque l'on clique dessus, ils ne seront denouveau plus soulignés, et
s'aggrandirons (16pt), et les liens déjà visités apparaîtront en tous petits (12pt) et
non-soulignés.
________________________________________________________________
CLASSES
et ID, c'est quoi ?
Avec les classes, on donne des styles différents à des
balises (titres, sous-titres, lien email, etc)
On définit la classe...
.nom_de_la_classe {propriété de style: valeur; propriété de style:
valeur; etc}
Et on appelle la classe à l'endroit désiré...
<BALISE class="nom_de_la_classe">SUPER!</BALISE>
Un exemple !
On crée la classe sous_titre (que l'on place dans l'head ou dans le fichier
externe .css)
.sous_titre {font-type: arial; font-color: blue; font-weight: bold}
..et on appelle la classe sous_titre
<BALISE class="sous_titre"> Ceci est un
sous_titre</BALISE>
|
