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

Voir aussi http://www.spip.net/fr_rubrique269.html

* 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 [http://wiki-acces-public.infini.fr/index.php/Cr%C3%A9er_et_modifier_les_feuilles_de_style_d%27un_site_SPIP#Les_caract.C3.A9ristiques_de_style_g.C3.A9n.C3.A9r.C3.A9es_par_SPIP "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 [http://wiki-acces-public.infini.fr/index.php/Cr%C3%A9er_et_modifier_les_feuilles_de_style_d%27un_site_SPIP#Utiliser_la_balise_.23EXPOSE_en_lien_avec_une_feuille_de_style "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").

 

 

=== 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 ? ===

Les avantages sont nombreux, par rapport à l'indication des données de style dans le fil du html.

Voici les principaux avantages que l’on en retire :

* gain de 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,

* 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 :

http://www.generationcyb.net/IMG/png/110906.png

=== Comment créer une feuille de style ? ===

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.  

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.

=== Signification des paramètres de ces feuilles de style===

Cela signifie par exemple que '''le style "encart"''', qui concerne les deux pavés "auteur" et "rubrique", a les caractéristiques suivantes :

* 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 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.

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

* les '''éléments''' html sont par exemple ''body'', ''a'','' p''... A chacun peut être attribué des caractéristiques de style.<br>Dans la feuille de style, la syntaxe est alors : <br><code>élément1  déclaration de style ; <br>élément2 déclaration de style ;</code>

* 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''" appellera dans la page html les caractéristiques de style associées à ''#principal'' dans la feuille de style). <br>Dans la feuille de style, la syntaxe est alors : <code></code><br>Une possibilité offerte par les identifiants est d’utiliser des ancres du type ''a href="#navigation"'' par exemple pour créer sur l’expression "Retour au menu principal" un lien vers le menu principal.

* les '''classes''', 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 :<br><code>.xxx  déclaration de style ;<br>.yyy déclaration de style ;</code>. <br>Ces caractéristiques de style sont appelées ''classes'' et peuvent s’appliquer à plusieurs éléments dans la page html. <br>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. <br>Cela donne :

** <code>p class="xxx" </code> dans la page html  

** <code> p.xxx déclaration de style ; ... déclaration de style ;</code>  pour la feuille de style, <br>la syntaxe générale étant : <code>élément.nom_de_classe déclaration de style ; ... déclaration de style ;</code>

=== Eléments html de type bloc ou de type en ligne ===

Ils se succèdent, à l’affichage dans le navigateur, de façon verticale alignée sur la marge gauche de la page.

Ils 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.  

* les marges externes du bloc (''margin'') positionnent chaque bloc précisément relativement à son bloc parent et à ses blocs "frères"

* la marge interne (''padding'') positionne précisément le texte à l’intérieur du bloc.

===Blocs dont la position est absolue ===

Ces blocs peuvent en revanche s’écrire où l’on veut dans le fil du code html.

 

=== Internet Explorer ou non...===

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.  

 

Ainsi, pour éviter les disparités entre un affichage de votre page dans I. Explorer et un affichage dans un autre navigateur, il vaut mieux :

 

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.

=== Styles et éléments imbriqués ===

=== Autres informations sur les feuilles de style ===

* lorsque l’on trouve par exemple <code>.footer a :link, .footer a :hover, .footer a :visited font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 11px ; color : #FFFFFF ; font-weight : normal ; text-decoration : none ; line-height : 20px ;</code> <br>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).

== Quelques spécificités de SPIP ==

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

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

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.  

Exemple : dans chaque page affichant un article du site, l’on veut 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.

On écrit dans la page html :

<code>a color : blue ;

a.on color : red ; font-weight : bold ; </code>

On peut aussi écrire <code>#EXPOSExxx,yyy </code>, afin d’afficher "xxx" pour l’objet correspondant au contexte, et "yyy" pour les autres.

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