CREACIÓ DE PÀGINES WEB AMB KOMPO
7. Fulls d’estils

Els objectius de la setena lliçó són:

Activitat 7.1. Funcionament de les fulles d’estil

Les fulles d’estils constitueixen un llenguatge senzill que complementa el de HTML quan es tracta de modificar algunes etiquetes de les pàgines web. Les fulles d’estils en cascada (CCS: Cascading Style Sheets) suposen un suport fonamental a l’hora de dissenyar les pàgines web, perquè permeten una major precisió en l’ajust dels elements del disseny. Aquesta tècnica consisteix a separar el disseny del contingut, de manera que les indicacions per a conformar el disseny s’agrupen en un full d’estil o arxiu que està fora del contingut del document de la pàgina HTML. El que fa fonamentalment el codi de les fulles d’estils és transformar les etiquetes del llenguatge HTML i conformar a les característiques que vulguem donar-li; però també, i això és l’important, amb aquest codi podem crear etiquetes noves, que introduïm dins del document. Un dels avantatges dels fulls d’estils és que es pot modificar algunes característiques de tots els documents d’un lloc web des d’un arxiu, sense haver de modificar-les en cada un dels documents.

Fins ara l’ús dels fulls d’estils ha estat una mica limitat, a causa que els navegadors d’Internet no estaven prou preparats per a aquest codi. Però des que han aparegut els navegadors de versió 6 (Internet Explorer i Mozilla-Nescape), ja es poden utilitzar els fulls d’estils amb més llibertat, encara que cal tenir en compte que encara hi ha usuaris que continuen utilitzant navegadors antics, per la qual cosa s’ha de tenir especial cura en crear unes fulles d’estils que siguin totalment operatives en els nous navegadors i que alhora no impedeixin o entorpeixin la visió d’una pàgina web amb els antics.

Aquesta pàgina web inclou a la seva carpeta principal un fitxer de fulls d’estils en cascada: estils.css. Aquest fitxer conté el codi sobre les modificacions que es realitzen en tots els documents d’aquest lloc.

Per connectar un fitxer de fulls d’estils amb la resta d’arxius HTML que conformen un lloc web cal col·locar una crida a la capçalera (<head>) de cada document, en la redacció s’introdueix el nom del fitxer CSS amb l’atribut href:

<Link rel = "stylesheet" type = "text /css" href = " estilos.css ">

També es pot incloure el codi dels estils en la capçalera (<head>) del document, com veurem en l’activitat 7. En aquest cas, cal utilitzar l’etiqueta d’HTML <style>, indicant que és codi de fulls d’estils (CSS):

< style type = "text /css" >
BODY {
background-color: #FEEFCB;
color: # 000000;
} </style>
 

I també es pot incloure com atribut d’una etiqueta dins del cos (<body>) del document HTML. Aquest cas el podem veure en el següent exemple: suposem que el color del text d’un document és el negre, i volem que un paràgraf en concret tingui el text de color blau; hauríem d’escriure el següent:

<P> paràgraf de negre de color </p>
<p estil = "color: 0000ff"> paràgraf de color blau </p>

Paràgraf de color blau

Amb l’atribut style hem inclòs el codi del color de text (color) dins de l’etiqueta de paràgraf (<p>).
 

Activitat 7.2. Alguns exemples d’estils

En aquest curs no estudiarem a fons les fulles d’estils. Qui vulgui aprendre més sobre aquest tema pot acudir a la pàgina web HTML en castellà, que comentem en el capítol de Enllaços d’interès. Aquí estudiarem alguns exemples dels efectes que produeixen les fulles d’estils analitzant el codi que guarda l’arxiu estilos.css d’aquesta pàgina del curs.

El primer que volem aconseguir és que el tipus de lletra i el tamany del text normal siguin els mateixos en tots els documents, i no volem que sigui l’usuari el que tingui predeterminat en el seu navegador, que sol ser el Times New Roman de 12 punts. També anem a establir els marges del document i els colors del fons i del text. Per a això, modificarem l’etiqueta <body>, perquè és el cos del document i per tant totes les altres etiquetes hereten els seus atributs:

BODY {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
marge: 1% 3% 1% 3%;
background-color: #FEEFCB;
color: # 000000;
}

En el nostre cas volem que sigui el tipus de lletra (font-family) Verdana i, si no està instal·lat a l’ordinador de l’usuari, llavors volem que siguin els tipus Arial i Helvetica, I si tampoc aquests es troben instal·lats, haurà de ser un tipus de lletra sans-serif, és a dir, de les anomenades de pal sec. Quant als colors de fons (background-color) i al color del text (color), els valors els hem expressat en les dues últimes línies.

Per als títols i subtítols del curs hem utilitzat els quatre primers encapçalats (h1, h2, h3 i h4) del llenguatge HTML, que hem modificat al nostre gust. Potser el més destacat sigui que el encapçalat 3 l’hem dissenyat amb una franja de fons i una línia en les vores superior i inferior; a més els seus marges esquerre i dret són de zero píxels, és a dir, ocupen tota l’amplada de la pantalla.

Pel que fa als hipervincles, hem volgut que (etiqueta <A>) no estiguin subratllats:

a {text-decoration: none; }

Però sí desitgem que quan l’usuari col·loqui el punter del ratolí a sobre dels textos (hover) que porten els enllaços, aquests textos adquireixin el color vermell fins que el punter del ratolí abandoni el text.

a: hover {color: red; }

Finalment, ens hem inventat alguns estils, per als que no hem utilitzat una etiqueta HTML ja existent, com en els casos anteriors, perquè les fulles en cascada (CSS) ens donen la possibilitat de crear classes noves, que han de portar un punt al principi de la paraula que hem ideat per denominar-les. Dos d’aquests estils són:.box, que crea un quadre al voltant d’un text, i.boton, que crea els botons que apareixen de tant en tant en aquests documents.

Hem volgut incloure en aquest curs una quarta pàgina del Monstre el disseny està realitzat íntegrament mitjançant els fulls d’estils. Per veure com funciona realment aquesta tècnica de disseny, hem escrit dos arxius amb fulles d’estils diferents per al mateix document d’HTML. Aquests arxius es diuen estilos1.css i estilos2.css, i l’arxiu del contingut es diu index4.htm ; els tres es troba a la carpeta exemples d’aquest curs. Si obrim aquest últim arxiu en el navegador, ho veurem amb els estils de l’arxiu estilos1.css; però si canviem el nom del fitxer en la crida que aquest troba en la seva capçalera pel de estilos2.css, el seu disseny canvia totalment. Això demostra la potència que tenen els fulls d’estils, que en pocs anys s’han imposat a Internet, de manera que el futur de la Xarxa no s’entén sense aquest excel·lent llenguatge. La pàgina del Monstre amb estils es pot veure prement aquest botó:

Pàgina amb estils

Activitat 7.3. Activitat 7: Estils a la pàgina del Monstre

La primera part d’aquesta activitat consisteix a canviar la visualització dels hipervincles del marc esquerre. Volem que el text d’aquests hipervincles aparegui en color blau clar quan l’usuari posa a sobre d’ells el punter del ratolí. Per a això hem d’introduir codi de fulls d’estil en cascada (CSS) a la capçalera del fitxer sumario.html, és a dir, entre l’etiqueta <head> i la seva etiqueta de tancament. Ara, per tant, no anem a incloure codi en un arxiu a part, com hem fet més amunt. En aquest cas, el codi que anem a incloure dins de l’expressió utilitzada per inserir fulls d’estil en un document:

<Style type = "text /css">
<! -
a {text-decoration: none}
a: hover {color: # 99FFFF}
//->
</style>

L’etiqueta <style> indica al navegador que es tracta de fulls d’estil. Les expressions " <! - "i el seu tancament" //-> "s’utilitzen perquè no hi hagi errors en els navegadors que no admetin fulls d’estil, tot i que ja pràcticament totes les versions actuals dels navegadors les admeten. I només queda el codi, la primera línia indica que tots els hipervincles d’aquesta pàgina no porten cap tipus d’adorn (text-decoration: none), és a dir, no estan subratllats, i la segona línia es refereix al fet que el text adquireix un color blau clar (color: # 99FFFF) quan l’usuari col·loca el punter del ratolí a sobre del text d’un hipervincle (a: hover).

També anem a incloure codi de CSS a l’arxiu principal de la pàgina del Monstre, a l’arxiu de la col·lecció d’imatges i en el del sumari o índex, per tal de canviar el tipus de lletra i la mida. Volem utilitzar el tipus Verdana, el mateix utilitzat en aquesta pàgina del curs, i afegirem altres tipus de lletra per si algun usuari no el té instal·lat en el seu ordinador. La mida de la lletra el donem en percentatge, per si algú vol augmentar la mida de lletra des del navegador. El codi resa així:

<Style type = "text /css">
<! -
cos, td {font-family: Verdana, Arial, sans-serif; font-size: 80%}
//->
</style>

Com en l’arxiu de l’índex ja hem introduït un script d’estils, només haurem de inserir en ell l’estil corresponent al body.

Si volem veure com queda tot això reflectit a la pàgina web del Monstre, premem aquest botó:

Pàgina amb marcs