Créer et modifier les feuilles de style d'un site SPIP
(→Les éléments html de type bloc et les éléments html de type en ligne : mise en forme) |
(→Premier aperçu d’une feuille de style : mise en forme) |
||
| Ligne 46 : | Ligne 46 : | ||
http://www.generationcyb.net/IMG/gif/31101-2.gif | http://www.generationcyb.net/IMG/gif/31101-2.gif | ||
| − | + | === Les grands pavés sur la page === | |
| + | Cette partie affiche deux pavés d’infos : | ||
| + | * le pavé bleu (que nous appellerons "pavé auteur") affiche le nom de l’auteur (ou des auteurs) de l’article sur la page duquel on se trouve, les coordonnées de son site s’il en possède un, sa "biographie" éventuelle et le titre d’un choix d’articles de cet auteur. | ||
| + | * Le pavé rose (que nous appellerons "pavé rubrique") affiche une sélection d’articles puisés dans la rubrique dans laquelle on se trouve. | ||
| + | Il y aussi un "formulaire signature", dont nous ne nous occuperons pas pour l’instant. | ||
| + | |||
| + | === Les codes correspondants dans le squelette "article"=== | ||
Voici les codes correspondants : | Voici les codes correspondants : | ||
http://www.generationcyb.net/IMG/gif/31102-2.gif | http://www.generationcyb.net/IMG/gif/31102-2.gif | ||
| − | Les données des feuilles de style sont appelées par les instructions "class" contenues ici dans des tags "div" indiquant l’emplacement de blocs, dans des tags "ul" indiquant le début d’une liste à puces, dans des tags "li" indiquant un élément d’une liste à puces, etc. | + | === Les appels aux feuilles de style appropriées=== |
| + | Les données des feuilles de style sont appelées par les instructions "class" contenues ici : | ||
| + | * dans des tags "div" indiquant l’emplacement de blocs, | ||
| + | * dans des tags "ul" indiquant le début d’une liste à puces, | ||
| + | * dans des tags "li" indiquant un élément d’une liste à puces, etc. | ||
Dans la feuille de style habillage.css, on trouve entre autres les styles suivants : | Dans la feuille de style habillage.css, on trouve entre autres les styles suivants : | ||
| Ligne 64 : | Ligne 74 : | ||
http://www.generationcyb.net/IMG/gif/31106-2.gif | http://www.generationcyb.net/IMG/gif/31106-2.gif | ||
| − | Cela signifie par exemple que le style "encart", qui concerne les deux pavés "auteur" et "rubrique", a les caractéristiques suivantes : positionnement relatif à droite, largeur de 14 fois la largeur standard de caractère (désactivé) ou 34% de la largeur d’écran, marge gauche de 4% de la largeur d’écran ou 2 fois la largeur standard de caractère (désactivé), marge haute de une fois la hauteur standard de caractère, marge basse nulle, marge droite nulle | + | Cela signifie par exemple que '''le style "encart"''', qui concerne les deux pavés "auteur" et "rubrique", a les caractéristiques suivantes : |
| + | * positionnement relatif à droite, | ||
| + | * largeur de 14 fois la largeur standard de caractère (désactivé) ou 34% de la largeur d’écran, | ||
| + | * marge gauche de 4% de la largeur d’écran ou 2 fois la largeur standard de caractère (désactivé), | ||
| + | * marge haute de une fois la hauteur standard de caractère, | ||
| + | * marge basse nulle, | ||
| + | * marge droite nulle. | ||
| − | + | On remarque au passage qu’on se trouve ici avec des dimensions plus "relatives" qu’"absolues". C’est un choix conforme aux normes d’accessibilité, qui permet par exemple aux personnes mal voyantes d’agrandir la taille des pavés facilement dans leur navigateur. | |
| − | + | '''Le style "menu"''' comporte : | |
| + | * une bordure de couleur #a0a0a0 (gris) de 1 pixel de large | ||
| + | * une marge inférieure haute de 16 pixels. | ||
| + | Remarquons que l’on peut également imbriquer des styles : ici, le style "menu-titre", lorsqu’il survient à l’intérieur d’un style "divers", présente un fond de couleur f2f2ff (mauve pâle) et un texte centré. | ||
== Eléments, identifiants et classes == | == Eléments, identifiants et classes == | ||
