Voir le texte source

Voir aussi http://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 [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]"). <br> == Généralités == === 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 : * http://www.generationcyb.net/articles.php3?id_article=321, * http://openweb.eu.org/articles/tableaux_css, * http://www.commentcamarche.net/css/cssproperty.php3, * http://openweb.eu.org/css * http://openweb.eu.org/articles/initiation_flux. Dans un site SPIP standard, l’essentiel des caractéristiques de présentation des squelettes html est contenu dans les feuilles : * ''habillage.css'' (depuis Spip 1.9, cette feuille comprend aussi le contenu de l'ancienne feuille ''typographie.css'', qui a donc disparu) * ''spip_style.css'' * ''impression.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 ? === Les avantages sont nombreux, par rapport à l'indication des 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 : * 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, * 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 : http://www.generationcyb.net/IMG/png/110906.png 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 : 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 : http://www.generationcyb.net/IMG/gif/31102-2.gif === 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 : http://www.generationcyb.net/IMG/gif/31105-2.gif http://www.generationcyb.net/IMG/gif/31103-2.gif http://www.generationcyb.net/IMG/gif/31104-2.gif http://www.generationcyb.net/IMG/gif/31106-2.gif === 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 : * 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é. == Constituants d'une feuille de style == === 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.<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 === 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. == Positionnement des blocs dans une page html == === 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. === Principe général=== A la création de la structure d'une page html (et donc d'un squelette Spip), il s'agit 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... Il s'agit aussi de chercher un code modulaire, et de détacher en squelettes autonomes les invariants des pages. Ces parties de code seront appelées dans les pages à l’aide de l'instruction Spip INCLURE. Mais l'on sort des feuilles de style à proprement parler. S'agissant des blocs, une différence très importante existe ceux dont la position est absolue (fixée en pixels, px) et ceux dont la position ne l'est pas (leur largeur est exprimée en %, par rapport à la dimension de la page écran). La largeur et la hauteur des blocs peuvent être relatives ou absolues. ===Blocs dont la position n’est pas absolue === 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. 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. ===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 : * é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. === 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. == Héritage, imbrication, autres informations == === 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 http://www.generationcyb.net/IMG/png/080906.png 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 http://www.generationcyb.net/IMG/gif/0609061.gif 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 http://www.generationcyb.net/IMG/gif/0609062.gif ou encore ul .forum, appelés par le code html http://www.generationcyb.net/IMG/gif/0609063.gif === 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 <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). * on peut attribuer des dimensions minimum à un bloc : min-height ou min-width ou maximum max-height, max-width. == Quelques spécificités de SPIP == === 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 : http://www.generationcyb.net/IMG/png/1109062.png 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 feuille de style === La balise Spip #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 http://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. 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. ====Première écriture==== On écrit dans la page html : http://www.generationcyb.net/IMG/png/1109063.png et dans la feuille de style : <code>a color : blue ; a.on color : red ; font-weight : bold ; </code> ====Une alternative==== On peut aussi écrire <code>#EXPOSExxx,yyy </code>, afin d’afficher "xxx" pour l’objet correspondant au contexte, et "yyy" pour les autres. Ainsi, si l’on crée dans le squelette : http://www.generationcyb.net/IMG/png/1109064.png 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. Voir aussi : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS Mis en ligne le mardi 12 septembre 2006 sur http://www.generationcyb.net.

Revenir à la page Créer et modifier les feuilles de style d'un site SPIP.