generationcyb.net pointcyb lien vers les points cyb
Inscription à la lettre d'information | Fil infos rss 

 

Accueil > Spip > Personnaliser les squelettes graphiques

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


Version imprimable Version imprimable



Voir aussi www.spip.net/fr_rubrique269.html

NB : ce chapitre ne traite pas de notions spécifiques à Spip. La gestion des feuilles de style par Spip est identique à celle qui est recommandée par le W3C (World Wide Web Consortium), exceptée sur deux points :

- Spip génère automatiquement des balises html lors du traitement des balises Spip, et des styles CSS sont associés par défaut à ces balises html générées (voir ci-dessous "Les caractéristiques de style générées par SPIP"). Ces styles CSS sont regroupés dans la feuille de style par défaut spip_style.css (par exemple, lorsque l’on crée des guillemets, la classe blockquote.spip est appelée),
- On peut insérer la balise Spip #EXPOSE dans une feuille de style (voir ci-dessous "utiliser la balise #EXPOSE en lien avec une feuille de style").

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 ?

- A l’existence de l’instruction "class" dans le fil du code html de la page, qui appelle à chaque fois une "classe" particulière de style décrite dans la (les) feuille(s) de style,
- ou au fait que la ou les feuilles de style sont appelées par des instructions du type link rel="stylesheet" href="habillage.css" type="text/css" placées entre les HEAD en début de la page Web. Si les attributs de classe figurent à la suite dans la page (toujours entre les HEAD en début de page), il s’agit d’une feuille de style "interne" (l’instruction ressemble alors plus à style type="text/css") ; sinon, comme c’est le cas avec SPIP, il s’agit de feuilles de style "externes".

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 :

- On gagne du temps dans les opérations de design Web. Dans l’exemple qui suit, une modification à apporter au "pavé auteur" dans les différents squelettes peut être apportée en une fois dans la feuille de style externe habillage.css. Dans le cas de feuilles de style internes ou d’absence de feuille de style, il faudrait apporter la modification autant de fois qu’il y a de squelettes,
- autre gain : au niveau de la vitesse de chargement de la page par le navigateur de l’internaute : la feuille de style n’est chargée qu’une fois par le navigateur, qui l’applique ensuite à toutes les pages visitées,
- une même page Web peut avoir des feuilles de style différentes pour la lecture Web, l’impression papier, la lecture sur support mobile, etc. C’est l’attribut "media" de la balise link qui précise quelle feuille de style doit être utilisée en fonction du média de sortie. On peut par exemple construire une feuille vocale.css qui pourra être interprêtée par les logiciels de synthèse vocale. Elle sera appelée depuis la page html par l’instruction suivante figurant dans le head :

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 ?
- Dans Dreamweaver, aller dans "fenêtre" et "style css" ;
- Dans un simple éditeur de texte ou dans NVU, créer son document et l’enregistrer en .css.

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 :
- quand on attribue la caractéristique position:fixed ; le bloc reste à une hauteur fixe dans la page, même lorsqu’on la fait défiler verticalement,
- si l’on ajoute !important ; à la fin d’une caractéristique, cela a pour effet de rendre la valeur de cette caractéristique prioritaire par rapport à d’autres valeurs qui proviendraient d’éléments supérieurs et dont elle devrait normalement hériter.

Eléments, identifiants et classes

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

- les éléments html sont par exemple body, a, p… A chacun peut être attribué des caractéristiques de style.
Dans la feuille de style, la syntaxe est alors :
élément
déclaration de style ;

déclaration de style ;

- les identifiants # concernent un élément unique dans la page html (signalé par div id="xxx" dans la page html ; par exemple, div id="principal" appelera dan s la page html les caractériques de style associées à #principal dans la feuille de style). Dans la feuille de style, la syntaxe est alors :

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 autres caractéristiques de style appelées par div class="xxx" depuis la page html et se présentant dans la feuille de style sous la forme
.xxx
déclaration de style ;

déclaration de style ;
sont appelées classes et peuvent s’appliquer à plusieurs éléments dans la page html.
Une pseudoclasse est une classe qui dépend de l’activité de l’utilisateur ou de l’état du navigateur. Par exemple, h2 a:link concerne la classe h2 lorsqu’un lien hypertexte est appliqué.

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 :

- éviter d’attribuer une largeur width à un bloc qui comporte un padding left ou right ou un border left ou right. Utilisez plutôt les margin-left et margin-right,
- éviter d’attribuer une hauteur height à un bloc qui comporte un padding top ou bottom ou un border top ou bottom. Utilisez plutôt les margin-top et margin-bottom.

Bon à savoir :
- pour centrer un bloc, il suffit de lui attribuer les caractéristiques margin:0 et auto ; Mais comme cela ne marche pas avec I. Explorer, ajouter l’instruction text.align:center ; dans l’élément supérieur.

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

- les z-index précisent l’ordre de superposition des blocs (plus le chiffre z est élevé, plus le calque se trouve au-dessus des autres),
- lorsque l’on trouve par exemple
.footer a:link, .footer a:hover, .footer a:visited
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 0,8em ;
color : #FFFFFF ;
font-weight : normal ;
text-decoration : none ;
line-height : 20px ;

cela signifie que la classe « footer » adoptera ces caractéristiques de style lorsqu’elle concernera un lien hypertexte (la classe a:hover est active lors du survol du lien, la classe a:visited lorsque le lien a été visité et a:link signale seulement l’existence d’un lien hypertexte). NB : em est la hauteur de la ligne haute de la typographie (celle du l par exemple),
- on peut attribuer des dimensions minimum à un bloc : min-height ou min-width ou maximum max-height, max-width.

Trois grands styles graphiques pour un site Web

Les pros parlent du :

- design ICY : la largeur du site est fixe (en général 760px) et le site est placé sur la partie gauche de l’écran,
- design JELLY : la largeur est fixe, mais le site est centré dans l’écran,
- design FLUID : le site s’adapte automatiquement à la largeur de l’écran. Les positions et dimensions des calques, tableaux et caractères sont définis de façon relative, sous de forme de pourcentages.

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

#EXPOSExxx,yyy
, afin d’afficher "xxx" pour l’objet correspondant au contexte, et "yyy" pour les autres.

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



Répondre à cet article

Contact | Plan du site | Espace privé
Dernier ajout : vendredi 24 mai 2013 | 821 articles sur ce site.

Generationcyb.net est motoris´ par Spip 1.9.2e associ´ a un squelette spip Rizom
Sauf indication, les articles sont mis a disposition sous un contrat Creative Commons
Ministere en charge de la jeunesse Institut national de la jeunesse et de l'education populaire Information jeunesse Centre d'information et de documentation jeunesse