Créer et modifier les feuilles de style d’un site SPIP

Ce qu’est une feuille de style CSS

Une feuille de style est un fichier qui contient les attributs graphiques des balises html placées dans une page html. Ainsi, pour modifier la présentation de la page, il suffit de modifier la feuille de style. CSS signifie cascading style sheet, c’est-à-dire feuille de style en cascade, pour signifier que les styles s’appliquent "en cascade" : un élément hérite des caractéristiques de style des éléments dans lesquels il est imbriqué (si plusieurs styles entrent en conflit, c’est le style le plus spécifique à l’élément qui s’applique). Notons cependant que certaines caractéristiques de style ne "s’héritent" pas (voir ci-dessous "Héritage des caractéristiques de style").

Sur les feuilles de style, on peut consulter en particulier Feuilles de style : "classes", "blocs" et "blocs flottants", http://openweb.eu.org/articles/tableaux_css, www.commentcamarche.net/css/cssproperty.php3, http://openweb.eu.org/css et http://openweb.eu.org/articles/initiation_flux.

Dans un site SPIP standard, les feuilles habillage.css, spip_style.css et impression.css contiennent l’essentiel des caractéristiques de présentation des squelettes html (depuis Spip 1.9, la feuille typographie.css a disparu en se fondant dans habillage.css). Ces feuilles de style par défaut se trouvent dans le dossier Dist.

A quoi reconnaît-on qu’une page Web travaille avec une feuille de style ?

Quel est l’intérêt de travailler avec une feuille de style plutôt qu’en indiquant les données de style dans le fil du html ?

L’usage de feuilles de styles est une des bases de la conformité aux standards W3C et aux normes d’accessibilité. Il s’agit de découpler le contenu du site (ses textes, images, fichiers audio…) de ses caractéristiques de présentation. Voici les principaux avantages que l’on en retire :

A la place de aural, on peut avoir print (pour impression), braille (pour lecteur au toucher), all (pour tous medias), tv (pour un affichage sur écran tv), handheld (pour ordinateurs de poche), etc. Reste bien sûr à élaborer le contenu de ces feuilles de style par médias.

Comment créer une feuille de style ?

Premier aperçu d’une feuille de style

Voici un morceau d’un squelette article :

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.

Voici les codes correspondants :

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 :

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 et 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é.

Bon à savoir par ailleurs :

Eléments, identifiants et classes

Un style peut s’appliquer à un élément html, à un identifiant ou à une classe.

Une possibilité offerte par les identifiants est d’utiliser des ancres du type a href="#navigation" pour créer par exemple un lien sur l’expression "Retour au menu principal".

Les classes de style peuvent également ne s’appliquer qu’à un type d’éléments spécifique de la page html. Au lieu d’être appelée par div id="xxx" depuis la page html, une classe peut l’être par exemple par l’élément p marquant les paragraphes. Cela donne p class="xxx" dans la page html et
p.xxx
déclaration de style ;
…
déclaration de style ;

pour la feuille de style, la syntaxe générale étant :
élément.nom_de_classe
déclaration de style ;
…
déclaration de style ;

Les éléments html de type bloc et les éléments html de type en ligne

Les contenus « en bloc » sont le plus souvent introduits par l’élément div, un titre h1, h2, h3, etc., la balise de paragraphe p, la balise de liste ul, les balises d’élément de liste ol, li, dl, dd, la balise de citation blockquote ou la balise table. Ils se succèdent, à l’affichage dans le navigateur, de façon verticale alignée sur la marge gauche de la page.

Les contenus « en ligne » s’affichent dans une succession horizontale. Ils sont annoncés par des éléments comme span (voir ci-dessus), la marque d’un lien hypertexte a, l’insertion d’images img, les balises tt (texte en script), strong (texte en gras), sup (exposant), sub (indice), etc.

L’instruction text-align marche à l’intérieur d’un bloc, mais pas pour les éléments en ligne.

Positionnement des blocs dans une page html

Le principe général est de créer des blocs div délimitant les contours des différentes zones de la page (haut de page, menu gauche, pied de page, encadrés…), puis de détacher en squelettes autonomes les invariants des pages (qui seront appelés à l’aide de INCLURE).

Précisons une différence importante entre les blocs dont la position n’est pas absolue et ceux dont la position est absolue (c’est-à-dire fixée en px) : les premiers se placent les uns à la suite des autres par ordre de leur apparition dans le fil du code html de la page et chacun se positionne en haut à gauche de son bloc conteneur : à l’aide des marges externes du bloc (margin), on le peut positionner chaque bloc précisément relativement à son bloc parent et à ses blocs "frères". Et à l’aide de padding (marge interne), on peut positionner précisément le texte à l’intérieur du bloc.
Si un bloc a un positionnement horizontal absolu (du type left : 180px) mais pas de positionnement vertical absolu (du type top : 40px), il se placera sous le bloc qui le précède. Sa place dans le fil du code html est donc déterminante.
Les blocs dont les positions sont absolues peuvent en revanche s’écrire où l’on veut dans le fil du code html.

La largeur et la hauteur des blocs peuvent être relatives ou absolues. Attention cependant. Pour la plupart des navigateurs, la taille d’un bloc est égale à width + padding + border. Mais pour Internet Explorer, la taille du bloc est seulement égale à width. Pour éviter les disparités entre un affichage de votre page dans I. Explorer et un affichage dans un autre navigateur, il vaut mieux :

Bon à savoir :

Héritage des caractéristiques de style

Rappel : les caractéristiques graphiques s’héritent en cascade. Par exemple, si l’on trouve dans la page html

les textes des paragraphes de la page hériteront des caractéristiques associées à l’élément body.

Des caractéristiques de style comme font-family, font-style, color, text-decoration, text-align, ul sont héritées par les éléments "enfants".

Les caractéristiques suivantes : padding, margin, border, background-color, background-image, width, height, float, position, top, left, bottom, right, display, ne sont pas héritées par des éléments enfants.

Styles et éléments imbriqués

Nous voyons aussi dans l’exemple ci-dessus que l’on peut imbriquer des classes les unes dans les autres. Par exemple, les caractéristiques de

.divers .menu-titre

s’appliquent aux éléments de la classe "menu-titre" contenus dans des éléments de la classe "divers". On trouve alors dans la page html quelque chose comme

On peut également créer des styles selon les modèles suivants :

.menu h1, qui s’appliqueront aux éléments h1 contenus dans un élément de classe "menu". On trouvera alors dans la page html quelque chose comme

ou encore

ul .forum, appelés par le code html

ou encore

ul ul .forum, appelés par le code html

Autres informations sur les feuilles de style

Trois grands styles graphiques pour un site Web

Les pros parlent du :

Les notions de marge, bordure, espacement

La bordure est un encadré en général de couleur qui peut atteindre plusieurs pixels de large. L’espacement (padding) est la marge entre le contenu (texte et/ou images) et la bordure. Margin caractérise la marge à l’extérieur de la bordure.

Ces trois instructions peuvent prendre des valeurs différentes pour le haut, le côté droit, le bas et le côté gauche.
L’espacement peut par exemple prendre des valeurs comme padding-top : 15px ; padding-right : 20px ; padding-bottom : 15px ; padding-left : 20px ; On peut aussi écrire directement dans la feuille de style : padding15px, 20px, 15px, 20px ; Les valeurs sont attribuées à partir du haut, dans le sens des aiguilles d’une montre.

Les caractéristiques de style générées par SPIP

SPIP possède dans le fichier spip_style.css des attributs de style qui sont automatiquement associés aux "raccourcis typographiques" saisis par les rédacteurs et administrateurs du site lors de la création des articles. Si l’on modifie les feuilles de style de son site SPIP, il faut donc veiller à y reporter les attributs de spip_style.css.

Par exemple, la saisie d’un intertitre dans un article s’effectue à l’aide de trois accolades, et appelle la classe h3.spip du fichier spip_style.css. Cela génère le code html suivant dans la page qui s’affiche pour l’internaute :

Si vous souhaitez par exemple maîtriser les caractéristiques de la classe "spip" attribuée par défaut aux paragraphes d’un article, créer vos propres attributs de style pour la classe "p.spip".

Voir www.spip.net/fr_article3381.html, www.spip.net/fr_article3377.html, www.spip.net/fr_article3382.html, www.spip.net/fr_article3378.html, www.spip.net/fr_article3379.html.

Utiliser la balise #EXPOSE en lien avec une une feuille de style

La balise #EXPOSE permet de mettre en évidence, dans un menu ou dans une liste, l’objet principal de la page où l’on se trouve (voir www.spip.net/fr_article2319.html).

SPIP remplace automatiquement la balise #EXPOSE par "on" si l’objet correspond au contexte ; sinon la balise est simplement ignorée.

Il suffit donc de créer dans la feuille de style un style "on" pour qu’il s’applique quand l’objet correspond au contexte. Par exemple, si l’on veut obtenir, dans chaque page affichant un article du site, que les liens vers les articles de la rubrique en cours soient de couleur bleue, sauf le lien vers l’article affiché dans la page, qui sera en caractères gras et de couleur rouge :

dans la page html, et

a color : blue ;
a.on color : red ; font-weight : bold ;
dans la feuille de style.

On peut aussi écrire

Ainsi, si l’on crée dans le squelette :

cela aura pour résultat d’afficher le titre des articles de la rubrique en cours avc un lien hypertexte pointant vers chacun, sauf pour l’article affiché sur la page en cours.

Voir aussi : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Mis en ligne le mardi 12 septembre 2006