Voir le texte source
pour
Créer et modifier les feuilles de style d'un site SPIP
Aller à :
Navigation
,
rechercher
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 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 www.generationcyb.net/articles.php3 ?id_article=321, 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 : 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 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 : 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. 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 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é. == 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 < /font> déclaration de style ; ... déclaration de style ; sont appelées classes et peuvent s’appliquer à plusieurs éléments dans la page html. 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. == 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. == 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 .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 ; 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. == 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 : 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 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 : http://www.generationcyb.net/IMG/png/1109063.png 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 : http://www.generationcyb.net/IMG/png/1109064.png 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 sur http://www.generationcyb.net.
Revenir à la page
Créer et modifier les feuilles de style d'un site SPIP
.
Outils personnels
Créer un compte ou se connecter
Espaces de noms
Page
Discussion
Variantes
Affichages
Lire
Voir le texte source
Afficher l’historique
Actions
Rechercher
Navigation
Accueil
Communauté
Actualités
Modifications récentes
Page au hasard
Aide
Boîte à outils
Pages liées
Suivi des pages liées
Pages spéciales