Interessem-nos aquí pels estils creats quan les dreceres tipogràfiques s’insereixen en un text entrat sota SPIP. Que es mostri un article, una breu, una secció o una altra no té cap mena d’importància: els estils porten sempre els mateixos noms. Això no ens impedirà però descobrir com aplicar-hi eventualment aparences gràfiques diferents...
El text de base
Fins i tot el text de base sota SPIP, aquell que entreu en un dels formularis de l’espai privat, teclejant amb rapidesa, genera tags HTML particulars. En efecte, el text es retalla en paràgrafs; a cada paràgraf correspon un tag <p class="spip">. Podem associar per tant a aquests paràgrafs un estil ben precís, que no serà aplicat a la resta del text de la pàgina.
Comencem per escollir una font de caràcters. Per a això s’utilitza la propietat font-family, que pren com a valor un o diversos noms de fonts de caràcters a utilitzar. Per a un cos de text com el d’un article és millor una font «serif»; posem que ens decidim per «Bookman Old Style». Haurem d’afegir al nostre fitxer mes_styles.css la regla següent:
p.spip {
font-family: "Bookman Old Style";
}(fixeu-vos que el nom d’una font que tingui diverses paraules ha d’anar entre cometes...) Un problema pot sobrevenir si la font «Bookman Old Style» no està instal·lada a l’ordinador d’aquells que us visiten: cada ordinador té una configuració diferent, i no oblideu que les fonts «gratuïtes» de Microsoft rarament estan instal·lades en aquells ordinadors que funcionen sota Linux i Macintosh... És preferible de preveure aquest cas i especificar una o diverses fonts de substitució successives:
p.spip {
font-family: "Bookman Old Style", "Times New Roman", serif;
}S’especifica aquí com substitutes successives de Bookman, la clàssica «Times New Roman», i com a últim recurs «serif». «serif» no és una font per si mateixa, és un codi genèric que indica al navegador d’agafar la font «serif» per defecte de l’ordinador; així mateix «sans-serif» especifica la font «sans-serif» per defecte (en general Arial o Helvètica).
Es retindrà aquesta regla important: en la propietat font-family, convé sempre proposar diverses eleccions successives per adaptar-se a les fonts de caràcters instal·lades en l’ordinador del visitant. Fixem-nos que aquesta regla és també vàlida pel tag < font face="..."> de l’HTML tradicional.
Per descomptat que altres propietats són a la vostra disposició. Podeu, per exemple, regular la mida del text amb la propietat font-size. No obstant això, fixeu-vos que els navegadors disposen d’una regulació per configurar la mida del text per defecte, i el text principal de les vostres pàgines no hauria de sobrepassar aquesta regulació, per raons de comoditat visual: és l’usuari qui escull la mida de base, no el webmestre.
Fixeu-vos bé que els estils que apliqueu als tags <p> s’apliquen a cada paràgraf en tant que objectes autònoms. Això permet alguns efectes interessants, com per exemple indentar la primera línia dels paràgrafs utilitzant la propietat text-indent. Per defecte, aquesta propietat té un valor zero, és a dir que no hi ha indentació. Es pot modificar per obtenir, en cada primera línia de paràgraf, un decalatge de 1em (més o menys 3 espais [1]):
p.spip {
text-indent: 60px;
}Aplicar un tractament diferenciat
En lloc d’estendre’ns sobre la panòplia d’estils generats automàticament per les dreceres tipogràfiques d’SPIP, i que ho pugueu vestir a la vostra manera (podeu donar una ullada als articles següents «d’aquesta manteixa secció»), ens centrem aquí en aquell cas que vulgueu aplicar una aparença diferent a un mateix estil, segons quina sigui la seva posició dins la plantilla (esquelet). Aquest desig és legítim: podem, per exemple, voler mostrar el cos d’un text amb una font «serif» amb indentació al començament de paràgraf, però la postdata amb una font més «llisa» (sans-serif) i més petita, sense indentació.
Aquesta operació és, en realitat, molt simple. Cal primer de tot que modifiqueu el vostre esquelet per tal d’introduir-hi els elements que permetran discriminar el text i la postada.
Això agafarà per exemple, a l’interior del bucle ARTICLES principal, la forma següent:
<div class="texte">#TEXTE</div>
<div class="ps">#PS</div>Aquí s’ha de recalcular la pàgina (ja que s’ha modificat l’HTML...). La visualització del navegador és sempre la mateixa: normal, com que els nostres nous estils no són objecte de cap regla en el full d’estil, són ignorats pel navegador. Posem-hi remei:
.texte p.spip {
font-family: "Times New Roman", serif;
text-indent: 50px;
}
.ps p.spip {
font-family: Tahoma, Arial, sans-serif;
font-size: 90%;
}La gran novetat no rau aquí en les propietats gràfiques sinó en la manera com s’apliquen al codi HTML. En efecte, «.texte p.spip» significa: «aquesta regla s’aplica a tots els tags <p class="spip"> que estiguin continguts dins d’un tag que tingui un atribut class igual a «texte». Podríem restringir una mica aquesta regla especificant que el tag pare ha de ser a més un tag <div> (el començament de la regla s’escriuria llavors «div.texte p.spip»); però com que dominem l’estructura dels nostres propis esquelets, no és gaire útil fer molt restrictiu el full d’estil.
De tota manera, aquest full d’estil ens ha donat el resultat esperat: els paràgrafs del cos del text es mostren amb una indentació, els de la postdata en una font més petita i sense indentació. Per verificar que aquestes regles s’apliquen correctament a cadascun dels paràgrafs <p class="spip"> i no al conjunt <div class="...">, podem divertir-nos definint un marc negre:
.texte p.spip {
border: 1px solid black;
}Fixem-nos que cada paràgraf del cos del text (però no la postdata) està envoltat del seu propi marc negre. Si haguéssim escrit simplement «.texte» en lloc de «.texte p.spip», seria tot el text sencer el que s’hauria envoltat d’un únic marc negre englobant. Remarquem de passada en l’aparició de la propietat border...
Nota: aquest truc, que consisteix en traçar un marc de color per saber a quins elements s’aplica precisament una regla, pot ser molt útil quan el vostre full d’estil s’enriqueix. No dubteu a utilitzar-lo si vosaltres us comenceu a perdre...
Per tant, podeu adonar-vos com és de potent aquest mètode CSS i, utilitzant-lo intel·ligentment, com us pot ajudar a l’hora de dissenyar la vostra pàgina Web.
Després de la tipografia de les etiquetes SPIP, seguirem aprenent els CSS i els trucs d’SPIP amb els formularis.