|
5.5 Modification de la feuille de style |
|
|
|
|
Concevoir son template -
05. La feuille de style CSS
|
|
Écrit par Jean Louis Servais
|
|
15-02-2006 |
 | Joomla! 1.0.x |
 |
30/03/2006 : Correction mineure : Suppression répétition dans le texte.
15/04/2006 : Retouche de la présentation.
|
 |
Commentaire de la ligne 1 du code à revoir...
|
 |
ATTENTION : Les numéros de ligne du code CSS sont données uniquement pour faciliter les renvois vers les commentaires à l'intérieur de ce tutoriel. Cette numérotation est donc différente de celle de la feuille de style de vôtre template.
|
Nous allons procéder à une petite modification de notre feuille de style css en prévision du test de mise en ligne du template :
| Etape 1 : |
Ouvrez la feuille de styles template_css.css avec l'éditeur approprié. |
| Etape 2 : |
Recherchez le style dénommé td et complétez-le ainsi :
1
2
3
4
5
6
7
8
9
10
|
td {
background-color: Yellow;
border: 1px solid Red;
color: Red;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
font-weight: bold;
padding: 6px;
}
|
Les numéros de lignes diffèrent de ceux de votre feuille de style. Ceci est sans importance pour le template. Ils sont utiles uniquement pour les explications données dans ce tutoriel.
|
| Etape 3 : |
Sauvegardez votre travail et fermez l'éditeur. |
Nous avons simplement défini les propriétés du style des cellules normales des tableaux pour obtenir une présentation semblable à celle ci :
Voici les explications sur ce que nous venons de faire :
| Ligne 1 : |
td {
Le sélecteur est dans le cas présent aussi le nom du style et il s'applique aux balises html : <td>.
L'accolade indique le début de la définition des propriétés du style. |
| Ligne 2 : |
Un commentaire précisant la portée du style. |
| Ligne 3 : |
background-color: Yellow;
La couleur du fond est initialisée en jaune (yellow en anglais). |
| Ligne 4 : |
border: 1px solid Red;
Une bordure de 1 pixel d'épaisseur matérialisée par un trait plein de couleur rouge (red en anglais). |
| Ligne 5 : |
color: Red;
La couleur rouge pour l'encre des textes. |
| Ligne 6 : |
font-family: "Courier New", Courier, monospace;
Une police d'écriture de la famille Courrier afin de la différencier des polices habituelles des navigateurs. |
| Ligne 7 : |
font-size: 18px;
Une taille de caractère de 18 pixels. |
| Ligne 8 : |
font-weight: bold;
Les caractères sont forcés en gras. |
| Ligne 9 : |
padding: 6px;
Un espacement intérieur de 6 pixels est appliqué aux quatre côtés.
|
| Ligne 10 : |
}
Et pour terminer on ferme l'accolade de fin de définition du style. |
Comme nous venons de le voir, la définition d'un style est d'une simplicité enfantine. Ceux qui parlent l'anglais sont avantagés. Mais face aux différences d'interprétations des navigateurs, nous sommes tous dans la même galère.
| La déclaration padding: 6px; est équivalent et moins lourd que :
padding: 6px 6px 6px 6px; |
|
|
Dernière mise à jour : ( 11-08-2008 )
|
