Codes promotions, réductions et bons plans pour vos achats en ligne
|
|
|
Les versions 4 et + des navigateurs respectent les normes CSS (Cascading Style Sheet, feuille de style).
Les feuilles de style permettent un gain de temps en développement et en maintenance de page mais sont peu connues.
Même s'il ne s'agit pas de javascript, je pense que cet article est utile.
Sommaire de la page :
1 - La création de style
La déclaration de style se fait dans l'entête de la page, encadrée par les balises <STYLE> et </STYLE>.
Il y a 3 possibilités pour affecter un style :
- modifier le style d'une balise existante
- créer une nouvelle classe de style
- affecter l'attribut style
Les balises existantes
Voici la syntaxe pour affecter la police arial en 12 points à toutes les cellules des tableaux d'une page.
Toutes les propriétés de style sont détaillées dans le dernier paragraphe.
<HTML><HEAD>
<STYLE>
TD {font-family:arial;font-size:12pt}
</STYLE>
</HEAD>
<BODY>
Ici le corps de la page
</BODY></HTML>
Ici, toutes les cellules TD auront comme style par défaut Arial 12pt.
On peut modifier ainsi toutes les balises existantes.
Le cas particulier de la balise de lien A
La balise <A> est particulière, car elle peut être dérivée selon l'action du visiteur. On obtient ainsi 3 balises A.
A {text-decoration:none}
A:hover {text-decoration:underline}
A:active {color:red}
A:visited {color:green}
Avec cette déclaration, le texte de lien :
- est souligné au passage de la souris,
- devient rouge sur un clic,
- reste vert pour indiquer que ce lien a été visité.
ATTENTION : Netscape 4.X ne supporte pas cette fonctionnalité. Plus généralement, il n'est pas possible de changer le style d'un objet HTML une fois la page chargée dans Netscape.
Création de classes
Modifier les balises existantes n'est pas suffisant quand il s'agit d'affecter un style à une partie de texte. Par exemple dans cette page, les parties de code sont en courier new vert, grâce à la classe de style "code" qui est déclarée ainsi :
<HTML><HEAD>
<STYLE>
.code {font-family:courrier;color:green}
</STYLE>
</HEAD>
Le point devant code indique la création d'une nouvelle classe appelée code.
Pour affecter ce style à une portion de texte, on écrit :
<SPAN class="code">texte mis en forme</SPAN>
La balise <SPAN> permet d'affecter à un groupe de mot une classe de style.
Il est aussi possible d'affecter ce style à une balise existante. Pour donner le style courier new vert à une cellule de tableau, on écrit :
<TD class="code">cellule en police courrier vert</TD>
Affecter l'attribut style
Il n'est pas indispensable de créer une classe de style pour affecter un style à un objet. Par exemple :
<SPAN style="font-family:courier;color:green">Texte mis en forme</SPAN>
L'attribut style d'une balise reçoit les propriétés de style.
Il est toutefois préférable de déclarer une classe pour regrouper la mise en forme.
2 - Les feuilles de style externes
Nous avons vu jusqu'ici comment affecter un style à une page, ce qui implique de recopier la déclaration dans toutes les pages et rend les mises à jour longues et périlleuses.
Il est possible de regrouper la déclaration des styles dans un fichier externe et de l'appeler dans toutes les pages du site. La maintenance est accélérée et toutes les pages du site sont homogènes.
Le fichier externe
L'extension d'un fichier de feuille de style est toujours .css
Le fichier css contient uniquement l'intérieur des balises <STYLE>.
Voici un exemple de fichier de style appelé style.css :
/* Ceci est un commentaire */
TD {font-family:arial;font-size:12pt}
.code {font-family:courrier;color:green}
Le fichier style.css ne contient pas les balises <STYLE>.
Comme en javascript, les commentaires sont marqués par // ou /* */.
L'intégration du fichier externe
Une ligne dans l'entête suffit pour appeler le fichier de style dans une page :
<HTML><HEAD>
<LINK rel="StyleSheet" type="text/css" href="style.css">
</STYLE>
</HEAD>
La balise <LINK> fait un lien entre la page en cours et le fichier de style externe.
3 - Les propriétés de style
Nous avons vu comment déclarer les styles dans une page. La norme CSS a prévu de nombreuses propriétés pour les différents objets HTML. Toutes ces propriétés ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport à Internet Explorer 4 et 5, qui lui-même ne respecte pas toutes les normes.
Les propriétés de police
Normes respectées par Internet Explorer et Netscape.
| Propriété |
Signification |
Valeurs possibles |
| font-size |
Hauteur de police en points ou pixels |
font-size:12px
font-size:10pt |
| font-family |
Nom de police |
font-family:arial,verdana
font-family:sans serif |
| font-weight |
Epaisseur de la police (gras) |
font-weight:bold
font-weight:normal |
font-style |
Style de police (italic) |
font-style:italic
font-style:normal |
| color |
Couleur de police |
color:green
color:#FFCC00 |
Les propriétés de texte
Normes respectées par Internet Explorer et Netscape.
| Propriété |
Signification |
Valeurs possibles |
| text-height |
Hauteur de ligne en points ou pixels |
text-height:12px |
| text-decoration |
Attribut de soulignement |
text-decoration:overline
text-decoration:line-through
text-decoration:underline
text-decoration:none |
| text-align |
Alignement de paragraphe (balise P) |
text-align:left text-align:right text-align:center |
text-indent |
Indentation de paragraphe (balise P) |
text-indent:25px text-indent:-15px |
| text-transform |
Transformation des majuscules |
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase |
Les propriétés d'arrière-plan
Seul Internet Explorer 4 et 5 permet de choisir une image d'arrière plan.
| Propriété |
Signification |
Valeurs possibles |
| background |
Image d'arrière-plan |
background:image.gif |
| background-color |
Couleur d'arrière-plan |
background-color:black |
Les propriétés de positionnement
Netscape 4.X a un gestion particulière des propriétés de positionnement.
| Propriété |
Signification |
Valeurs possibles |
| clip |
Clipping |
clip:auto |
| width |
Largeur de la zone |
width:auto
width:150 |
| height |
Hauteur de la zone |
height:auto
height:100 |
| top |
Ordonnée du coin supérieur gauche |
top:10 |
| left |
Abscisse du coin supérieur gauche |
left:400 |
| overflow |
Recouvrement |
overflow:clip
overflow:scroll
overflow:none |
| position |
Type de positionnement |
position:absolute
position:relative
position:static |
| visibility |
Visibilité |
visibility:hidden
visibility:visible |
Les propriétés d'encadrement
Aucune de ces propriétés n'est reconnue par Netscape 4.X
Internet Explorer respecte presque complètement l'affichage de ces propriétés.
| Propriété |
Signification |
Valeurs possibles |
| margin-top |
Marge du haut en pixels |
margin-top:10 |
| margin-right |
Marge du bas en pixels |
margin-right:15 |
| margin-bottom |
Marge du haut en pixels |
margin-bottom:15 |
| margin-left |
Marge de gauche en pixels |
margin-left:10 |
| margin |
Groupement des 4 marges haute, droite, bas et gauche |
margin:10,15,15,10 |
| padding-top |
Espacement en haut |
padding-top:10 |
padding-right |
Espacement à droite |
padding-right:10 |
padding-bottom |
Espacement en bas |
padding-bottom:10 |
padding-left |
Espacement à gauche |
padding-left:10 |
padding |
Groupement des espacements en haut, à droite, en bas et à gauche |
padding:10,10,10,10 |
| border-style |
Style de contour |
none, solid, double, groove, ridge, inset, outset |
| border-color |
Couleur de contour |
border-color:red |
| border-width |
Largeur de contour |
border-width:3px
thin, medium, thick |
| border-left-width |
Epaisseur du trait de contour gauche |
border-left-width:thin |
| border-right-width |
Epaisseur du trait de contour droit |
border-right-width:medium |
| border-top-width |
Epaisseur du trait de contour haut |
border-top-width:thick |
| border-bottom-width |
Epaisseur du trait de contour bas |
border-bottom-width:0px |
| float |
Flottaison du bloc
A éviter |
float:right
float:left |
Lire aussi l'introduction aux normes du W3C
|
 
|
