|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Principe
des feuilles de style
Problème
de compatibilité
La
syntaxe des feuilles de style
Les
balises <DIV> et <SPAN>
Le
positionnement d'élément |
|
1. Principe des feuilles de style
Avec la version 3 du langage HTML, la mise en forme du texte passait
par la traditionelle utilisation des éléments tels que
<FONT>, <P>, <UL>....Deux problèmes
se posaient alors :
Les éléments de mise en forme étaient relativement
limités.
Surtout, dans le cas de documents structurés avec, par exemple,
des titres répétitifs quant à leur présentation,
cela prenait beaucoup de temps pour effectuer la mise en forme et
encore plus pour mettre à jour cette mise en forme.
Une des grandes nouveautés de la version 4 de l'HTML, fût
les feuilles de style en cascade : CSS-1 ou les " Cascading
style sheets" version 1.
Une feuille de style est un groupe d'éléments de
mise en forme ( les styles ) qui contrôlent le formatage d'un
document.
En utilisation optimale, c'est un document à part entière
qui contient tous les styles pouvant être appliqués à
tous les éléments de pages que l'on souhaite.
Ainsi, un seul document mémorise toute la mise en forme de
votre site, il n'est plus nécessaire de répéter
x fois une même mise en forme.
De plus, en cas de modification des mises en forme, il suffit de
modifier le style adéquat dans la feuille de styles pour que
tous les éléments, dans toutes les pages du site, qui
utilisaient ce style, soient mis à jour.
Avec les feuilles de styles en cascade, vous êtes sûr
de l'homogénéité de la présentation de
vos pages, vous travaillez rapidement et efficacement.
Aujourd'hui, tous les sites professionnels utilisent les CSS.
Les feuilles de style sont un complément direct au langage
HTML. Il s'agit d'un langage pour définir les propriétés
de format de commandes HTML distinctes.
Par exemple, vous pouvez déterminez que tous vos titres
principaux auront une taille de police de 18 px, dans la police Verdana,
en italique avec des espacements par rapport aux marges gauche et
droite de 1,70 cm et un espace de 2 cm par rapport au paragraphe suivant.
Les CSS permettent d'atteindre une précision bien meilleure
car de telles mentions ne sont pas possibles avec le HTML courant. |
| |
 |
| |
2. Problème de compatibilité
Exactement comme il y a plusieurs versions du langage HTML, il y a
plusieurs versions du langage CSS.
La première version 1.0 apparut en 1996 et depuis Mars 1998,
il y a la version 2.0
Attention, l'utilisation des CSS-1 est réservé aux navigateurs
de version 4 et plus. Les navigateurs de version antérieure
ne pourront pas afficher les mises en forme, seulement le texte brut.
Netscape 4.x interprète la presque totalité du langage
CSS-1 et une partie des commandes de la version CSS-2.
Microsoft Internet Explorer interprète encore mieux CSS-1 et
CSS-2 plus quelques mentions de feuilles de style spécifiques
introduite par Microsoft comme les filtres à effets graphiques
( voir exemple )
Voyons tout de suite les diverses possibilités de syntaxe :
3. La syntaxe des feuilles de style
Tout d'abord, comme pour les navigateurs ignorant le javascript, vous
devez cacher le code des feuilles de styles à l'aide des commentaires
pour les anciens navigateurs :
<!-- //-->
Il existe plusieurs façon d'intégrer des feuilles
de style en HTML :
- L'instruction style en tant qu'élément
On définit un style pour un élément dans
une page HTML;
Cet élément peut concerner une balise HTML dont
on souhaite redéfinir la mise en forme, par exemple, la
balise <H1>.
Mais si on ne souhaite donner une mise en forme spécifique
à cette balise <H1> que pour certains titres,
il faut créer une class avec un nom bien unique.
Exemple :
<html>
<head>
<style type="text/css">
<!--
h1
{
font-size: 14pt;
color: red;
font-weight: bold;
background-color: yellow;
}
//-->
</style>
</head>
</html>
Ici, pour définir la propriété de la balise
<H1>, on indique la balise concernée, puis
entre deux accolades les caractéristiques de cette propriété
( s'il y a plusieurs propriétés, on les sépare
par des points virgule ).
Résultat :
Voila mon titre H1 spécifique !!
Le problème ici, c'est que tous mes titres de niveau 1
avec la balise <H1> reprendront cette mise en forme,
dans cette page HTML .
Si je souhaite créer un autre titre <H1> avec
une mise en forme différente, il faut donner un nom propre
à la balise <H1> et utiliser l'attribut class.
|
| |
|
| |
Exemple :
<html>
<head>
<style type="text/css">
<!--
h1.montitre
{
font-size: 14pt;
color: red;
font-weight: bold;
background-color: yellow;
text-align: center;
}
//-->
</style>
<H1 class="montitre">Titre
1 avec mise en forme spécifique !</H1>
</head>
</html>
Résultat :
Titre 1 avec mise en forme spécifique
!
- Les attributs CLASS et ID
L'attribut CLASS peut s'employer avec la quasi totalité
des balises HTML existantes.
Il faut définir dans votre fichier HTML ou dans
un fichier externe .css ( voir plus bas ) un style avec un nom
spécifique.
Exemple :
<html>
<head>
<style type="text/css">
<!--
.bgstyle1
{
font-family: Arial,Verdana,Helvetica;
font-size: 12px;
color: #660000;
font-style: normal;
font-weight: bold;
text-align: left;
background-color: #FF9933;
}
//-->
</style>
</head>
</html>
Attention : Le nom du style, lorsqu'il ne s'agit pas d'une
balise HTML, doit obligatoirement être précédé
d'un point.
Une fois votre style défini, vous pouvez l'employer dans
de nombreuses balises HTML, telles que <TR>, <TD>,
<P>, <A> etc...
Au sein d'une balise <TD>, toute ma cellule prendra le style
défini plus haut :
<td class="bgstyle1">Tout
le texte compris à l'intérieur de ma cellule prend
le style de la class "bgstyle1".</td>
Résultat :
|
| Tout le texte compris à l'intérieur
de ma cellule prend le style de la class "bgstyle1". |
| |
L'attribut ID est utilisé de la même manière
que l'attribut CLASS mais de préférence au
sein d'un script JavaScript.
Exemple avec un ID ( Attention au # ):
<html>
<head>
<style type="text/css">
<!--
#test
{
font-size: 14px;
color: red;
font-weight: bold;
background-color: yellow;
text-align: left;
}
//-->
</style>
</head>
<body>
<p id="test>Paragraphe
avec une mise en forme spécifique !</p>
</body>
</html>
Résultat :
|
| |
|
Paragraphe avec une mise en forme spécifique !
|
|
| |
|
|
| |
|
| |
4. Les balises <DIV> et <SPAN>
:
Les balises <DIV> et <SPAN> permettent de
désactiver certaines instructions de la feuille de styles.
Vous pouvez de cette manière, modifier le style appliqué
à certaines balises, tout en conservant les autres effets définis
dans le fichier CSS.
La balise <DIV> est davantage utilisé pour des
blocs de texte entier alors que la balise <SPAN> est
employée pour des portions de texte ( des mots ou quelques
lettres ).
Les balises <DIV> et <SPAN> supportent les
atributs ID et CLASS.
Exemple avec <DIV> :
<html>
<head>
</head>
<body>
<div style="margin-left: 100px; margin-right:
100px; color: blue; background-color: yellow">Ce
Paragraphe sera positionné à 100 pixels par rapport
à la marge gauche, à 100 pixels par rapport à
la marge droite, avec une couleur de police bleu, un style gras et
un fond jaune.
Tout ce qui est compris entre la balise <DIV> prendra la mise
en forme décrite plus haut.</div>
</body>
</html>
Résultat :
Ce
Paragraphe sera positionné à 100 pixels par rapport
à la marge gauche, à 100 pixels par rapport à
la marge droite, avec une couleur de police bleu, un style gras
et un fond jaune.
Tout ce qui est compris entre la balise <DIV> prendra la mise
en forme décrite plus haut.
|
| |
|
| |
Exemple avec <SPAN> :
Voici un paragraphe de texte avec un style défini, nommé
"arial13gris"
Voici le code à insérer :
<html>
<head>
<style type="text/css">
.arial13gris
{
font-face: Arial; font-size: 13px; color: grey; margin-right: 30px;
margin-left: 30px; font-weight: bold
}
</style>
</head>
<body>
<P class="arial13gris">Les
autorités suisses de réglementation du secteur des telecoms
vont autoriser les fournisseurs de services de téléphonie
mobile de troisième génération (norme UMTS) à
partager leurs infrastructures.
La Commission fédérale des communications a indiqué
que cette décision permettra de réduire le coût
de développement des réseaux UMTS sans menacer la concurrence.
La Suisse a attribué quatre licences UMTS, respectivement à
Swisscom, à Orange, à 3G Mobile, filiale de l'espagnol
Telefonica Moviles et à TDC Switzerland, filiale du danois
TDC.
</P>
</body>
</html>
Résultat :
Les autorités suisses de réglementation
du secteur des telecoms vont autoriser les fournisseurs de services
de téléphonie mobile de troisième génération
(norme UMTS) à partager leurs infrastructures.
La Commission fédérale des communications a indiqué
que cette décision permettra de réduire le coût
de développement des réseaux UMTS sans menacer la
concurrence. La Suisse a attribué quatre licences UMTS, respectivement
à Swisscom, à Orange, à 3G Mobile, filiale
de l'espagnol Telefonica Moviles et à TDC Switzerland, filiale
du danois TDC.
Si on souhaite conserver le style des deux premières phrase
mais modifier le style de la dernière phrase pour une écriture
en rouge par exemple, on va définir un second style et insérer
la balise <SPAN>.
Code HTML :
<html>
<head>
<style type="text/css">
.arial13gris
{
font-face: Arial; font-size: 13px; color: grey;
margin-right: 30px; margin-left: 30px; font-weight: bold }
.arial13rouge
{ font-face:
Arial; font-size: 13px; color: red; margin-right: 30px; margin-left:
30px; font-weight: bold }
</style>
</head>
<body>
<P class="arial13gris">Les
autorités suisses de réglementation du secteur des telecoms
vont autoriser les fournisseurs de services de téléphonie
mobile de troisième génération (norme UMTS) à
partager leurs infrastructures.
La Commission fédérale des communications a indiqué
que cette décision permettra de réduire le coût
de développement des réseaux UMTS sans menacer la concurrence.<SPAN
class="arial13rouge">La Suisse a attribué
quatre licences UMTS, respectivement à Swisscom, à Orange,
à 3G Mobile, filiale de l'espagnol Telefonica Moviles et à
TDC Switzerland, filiale du danois TDC.</SPAN>
</P>
</body>
</html>
Résultat :
Les autorités suisses de réglementation
du secteur des telecoms vont autoriser les fournisseurs de services
de téléphonie mobile de troisième génération
(norme UMTS) à partager leurs infrastructures.
La Commission fédérale des communications a indiqué
que cette décision permettra de réduire le coût
de développement des réseaux UMTS sans menacer la
concurrence. La Suisse a attribué
quatre licences UMTS, respectivement à Swisscom, à
Orange, à 3G Mobile, filiale de l'espagnol Telefonica Moviles
et à TDC Switzerland, filiale du danois TDC.
|
| |
|
| |
5. Positionnement d'élément
:
Au niveau du HTML, il est parfois assez difficile de placer
des blocs de texte, des images, des tableaux au pixel près
au sein de sa page web.
Il faut pour cela maîtriser parfaitement la gestion des tableaux,
créer de multiples cellules ce qui est assez fastidieux.
Avec les feuilles de styles CSS, vous allez pouvoir positionner
très précisemment vos divers éléments
car ils seront considérés comme des objets, et à
ce titre, vous aurez la possibilité de les manipuler par rapport
au sommet et à la marge gauche de votre page( comme un repère
orthonormé avec des coordonnées d'abcisse et d'ordonnée).
Pour placer un élément, il existe deux types de positionnement
:
- Le positionnement absolu
Le positionnement absolu est de loin le plus précis; vous
allez définir des coordonnées par rapport au bord
haut de la fenêtre du navigateur et par rapport au bord
gauche de cette même fenêtre.
Vous saisissez aussi la largeur et la hauteur du bloc de texte,
d'images etc...
Exemple de positionnement absolu :
Voici
un bloc de texte qu'on peut manipuler
de manière très précise
puisqu'on peut ajuster le texte au pixel
près!
Je peux même insérer une couleur d'arrière
plan, des images et même placer le bloc par dessus une
image, une bordure etc...
Voici le code HTML :
<div style="position: absolute;
left: 400px; top: 6420px; width: 300; height: 100; color: green;
background-color: #DCF8DE; font-weight: bold; border: thin #336600
outset">blablablabla..........</div>
- Le positionnemnt relatif
|
|
Voici
du texte qu'on peut manipuler de manière beaucoup moins précise
qu'avec la solution absolute.
de manière relative à une cellule de tableau, je positionne
mon texte à 80 pixels du bord gauche de la cellule.
|
Voici le code HTML :
<div style="position: relative;
left: 80px; top: 0px; width: 300; color: green; background-color:
#DCF8DE; font-weight: bold; border: thin #336600 outset">blablablabla..........</div>
|
|
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
