Google


 

Abaix: Una mateixa pàgina amb un aspecte totalment diferent, just canviant el full d'estil que té assignat.

css pagina 1

css pagina 2

 

La idea dels fulls d'estil, aplicats a les pàgines web no pot ser més simple. Igual que amb un programa d'autoedició o processador de textos, el full d'estil té definit el format del text, els encapçalaments, subtítols, etc. i es pot filar tan prim com es vulgui. Qualsevol canvi que es faci al full d'estil automàticament es reflexa en la pàgina web que estigui basada en aquest full d'estil.

El poder que té aquesta forma de definir el format de les pàgines és enorme. Veurem que és possible canviar l'aspecte d'un web sencer, amb totes les pàgines que es vulgui, canviant un sol full d'estil! És a dir, pot convertir la tasca de reformar una web en una rialla.

Deixant de banda la conveniència que pot suposar aquest sistema de format, els fulls d'estil són una eina prou flexible que permet coses impossibles de fer amb l'HTML per si sol. Per exemple:

Els enllaços amb HTML serien sempre del mateix color. Amb els fulls d'estil pot haver-hi tants formats d'enllaços com vulguem. Per exemple, un estil per a una barra de menu, un altre per a una taula lateral, un altre pel peu de pàgina i un diferent per als que estan enmig del text...
L'efecte de canvi de color i estil que s'observa en passar el ratolí per sobre amb Internet Explorer es fa amb fulls d'estil.
Amb HTML els enllaços apareixen (glub!!) sempre subratllats.
Permeten un control tipogràfic molt complet, en comparació al groller maneig que fa de les lletres l'HTML.
Es pot controlar amb precissió la disposició dels elements de la pàgina i, si cal, es poden fixar posicions absolutes i invariables.

Què són i com es manegen.
Els fulls d'estil són un estàndard per al web que s'ha començat a aplicar a partir dels navegadors a la versió 3 i 4, i cal dir que Internet Explorer està més avençat en aquest aspecte que Navigator. Sens dubte, les versions vinents seran cada cop millors en el seu maneig.

Aplicar fulls d'estil a un web no és una decissió irreversible, i es pot canviar tot molt fàcilment. A més, si tenim molta feina ja feta, és senzill aplicar-hi fulls d'estil sense haver de tocar pràcticament res de la resta de les pàgines.

Els fulls d'estil per a pàgines Web es diuen en anglès Cascading Style Sheets, i es coneixen més aviat per les sigles (CSS). Són "en cascada",perquè es pot definir l'estil a diferents nivells, cada un dels quals s'imposa a l'anterior. La forma en què es defineix el full d'estil és semblant al llenguatge de l'HTML, en el sentit de que consta d'una sèrie de codis que es redacten en forma de text i s'incorporen dins de la pàgina web o s'hi enllacen en forma d'un fitxer separat (amb l'extensió .CSS). Per exemple, aquestes pàgines tenen assignat un full d'estil que es diu "full_estil.css". El podeu cercar al vostre caché del disc dur...

No entrarem en aquest tema amb molt de detall (però si decidiu aprendre més us assegurem que ho paga i que és senzill -vegeu els recursos que hi ha sobre CSS a la pàgina del Consorci de la WWW), però expliquem breument com funciona el full d'estil.

A la definició de l'estil, assignam a cada element de la pàgina una sèrie de propietats referents al tipus de text, colors, tamany, posició... i podem crear tantes variants o classes com volguem per a cada element. Per exemple, podem tenir un tipus de text en color blanc sobre fons negre i un altre invers, i altres tipus de text amb diferents combinacions de colors com aquesta o aquesta per fer subtítols...

El que és més atractiu d'usar els estils és que, un cop definits, no cal que ens preocupem més per especificar tamany de lletra, tipus de font, aliniat, o qualsevol altre atribut (i se'n poden especificar molts); només seleccionant el text i indicant que hi correspon un determinat estil ho arregla tot automàticament i sense errades. I per canviar per tot el document o tot un conjunt d'ells no cal anar seleccionant parts del text; basta redefinir l'estil i llest. Un estalvi de treball monumental.

També és possible definir diferents variants per als enllaços (cosa impossible amb l'HTML per si sol, que només considera el color dels enllaços i les seves variants active i visited). Per exemple, podem tenir enllaços com els d'una barra de menu i enllaços normals a la mateixa pàgina). Amb IE 4-5 (però no amb Netscape fins a la versió 4.x) es pot aprofitar una propietat interessant que és especificar un color de fons, tipus de lletra, i color quan el ratolí passa sobre l'enllaç (a:hover). Fixeu-vos, si emprau aquest navegador, amb els enllaços d'aquesta pàgina: canvien de color en passar-hi a sobre.

paleta d'estils

Els editors de pàgines web més actuals incorporen fàcils sistemes de creació i aplicació de fulls d'estil; es poden assignar estils genèrics, com als paràgrafs, text de taules, enllaços... o crear-ne d'especials, amb un nom descriptiu per identificar-los.

Aplicar el full d'estil.
El full d'estil es pot aplicar per mitjà d'un enllaç a un fitxer extern (.css), amb un estil general per a tot el document (inclòs dins de la part <head> de la pàgina web), o amb un estil definit per a una secció particular de la pàgina. A més, qualsevol format aplicat directament des de l'HTML s'imposa als anteriors.

Si hem optat per enllaçar a les nostres pàgines web un full d'estil extern, els avantatges que tenim són molt grans. Donem format a els pàgines sense preocupar-nos de tipus de lletra, tamanys, colors... simplement indicam quin tipus d'element és cada un. En cas d'optar per una de les variants (classes) que haguem definit (per exemple, paràgraf amb text invertit), hem d'indicar a l'html amb les ordres pertinents.

Si tenim deu, cent, un miler... de pàgines web enllaçades al full d'estil, totes tindran un aspecte consistent. La part més notable és que si decidim canviar l'aspecte de tota la web (per exemple, canviar el tipus de lletra base del text), n'hi ha prou amb canviar-la al full d'estil.

Amb uns minuts de treball actualitzam completament i sense errades tot el nostre web. Això es diu comoditat. I mai estam limitats a refer l'aspecte del nostre web, podem preparar un nou full d'estil que substitueixi el vell i tot queda llest en un instant.

Programes per redactar els fulls d'estil.
Però per aplicar fulls d'estil a les pàgines Web, evidentment, no desitgem haver d'embullar-nos amb el codi de les pàgines web. Volem fer-ho d'una manera tan senzilla com ho fem amb un processador de textos. Cal dir que FrontPage Express i Composer NO permeten aplicar fulls d'estil. Usant aquests editors, en principi, ho haurieu de fer a mà.

Solució? Emprar un programa per crear i aplicar fulls d'estil, un editor de CSS. N'hi ha freeware, com els que recomanem a la pàgina de Cheapware, i altres que trobareu a partir de l'abans recomanada pàgina del World Wide Web Consortium. Per un altre costat, els editors de pàgines Web més avançats que comentam a la pàgina sobre programes per elaborar HTML permeten crear i aplicar fulls d'estil sense cap problema.

TRUC:     Reciclar fitxers CSS:  Si voleu aprofitar la feina ja feta: si alguna pàgina web us agrada especialment, podeu aprofitar el seu full d'estil (cas que n'hagin utilitzat, naturalment.) Com es fa? Mirau el codi font de la pàgina web. Els exploradors duen aquesta opció a Ver->Código Fuente. Fixeu-vos a la part de dalt de la pàgina. Si està enllaçada a un full extern, veureu quelcom semblant a això: <LINK REL= "STYLESHEET" HREF="nom_del_full_d'estil.css">

Cercau al vostre disc (amb la utilitat de búsqueda de l'explorador de windows aquest full d'estil i ja el podeu aprofitar pels vostres abjectes fins!). Si l'estil està inclòs al cap de la pàgina web (entre les etiquetes <head> i </head> podeu fer el mateix. N'hi ha prou amb copiar tot el bocí que està inclòs entre les etiquetes d'estil, entre <STYLE TYPE= "TEXT/CSS"> I </STYLE> i enganxar-lo a la pàgina o pàgines que vulgueu "estilitzar", o bé guardar el bocí com a full d'estil (nom_que_vulgueu.css) per després aplicar-lo a les pàgines web que us convengui.


Més informació.
Per aprendre més sobre els fulls d'estil, el millor punt de partida ho teniu a la pàgina del Consorci del WWW (http://www.w3.org). Aneu a la secció que indica CSS. Allí trobareu tot d'enllaços a recursos relacionats amb fulls d'estil, programes necessaris, exemples, fulls ja llestos per emprar. Hi ha molts de recursos disponibles i és fàcil aprendre'n.

a dalt    { A dalt }


[ Vigital ] [ Manual de diseño digital, en castellano ] [ Contactar ]

idees i suggerències programes per al web Gràfics per al web CSS HTML

Pàgina inicial pàgina inicial