Créer et modifier les feuilles de style d'un site SPIP
De Wiki Accès Public.
(→Autres informations sur les feuilles de style) |
|||
| Ligne 2 : | Ligne 2 : | ||
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 : | 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 | + | * 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 | + | * 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 == | == Généralités == | ||
| Ligne 184 : | Ligne 186 : | ||
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. | 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 des caractéristiques de style == | + | == 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 | Rappel : les caractéristiques graphiques s’héritent en cascade. Par exemple, si l’on trouve dans la page html | ||
| Ligne 198 : | Ligne 200 : | ||
| − | == Styles et éléments imbriqués == | + | === Styles et éléments imbriqués === |
| Ligne 221 : | Ligne 223 : | ||
http://www.generationcyb.net/IMG/gif/0609063.gif | http://www.generationcyb.net/IMG/gif/0609063.gif | ||
| − | == Autres informations sur les feuilles de style == | + | === 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), | * 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> < | + | * 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. | * on peut attribuer des dimensions minimum à un bloc : min-height ou min-width ou maximum max-height, max-width. | ||
