Continguts:

Tot i que el llenguatge estàndard de fulls d'estil del W3C, els CSS2, es troba completament explicat en el Manual de CSS2 dins d'aquest Manual d'HTML Dinàmic, cal recordar que existeixen també altres llenguatges de fulls d'estil susceptibles de ser utilitzats amb l'HTML. En aquest tema es dóna una visió general de les característiques comunes dels llenguatges de fulls d'estil des de la perspectiva de l'HTML (maneres d'invocar-los, l'efecte que tenen en l'estructura d'un document HTML, etc.).
INTRODUCCIÓ
Els fulls d'estil representen un important i transcendental avenç per als dissenyadors de pàgines Web, ampliant-los les possibilitats per millorar l'aparença de les seves pàgines. En els entorns científics en els quals va ser concebuda la Xarxa la gent està més preocupada pel contingut de les seves pàgines que per la presentació. A mesura que gent més diversa va anar descobrint la Xarxa, les limitacions de l'HTML van esdevenir una contínua font de frustracions, i els autors es van veure forçats a esquivar les limitacions estilístiques de l'HTML. Mentre que les intencions havien estat bones -- millorar la presentació de les pàgines Web -- les tècniques per a fer-ho han tingut uns desafortunats efectes colaterals. Aquestes tècniques funcionen per a alguna gent, de vegades, però no per a tothom i sempre. Les tècniques utilitzades fins ara pels autors per millorar l'aspecte de les pàgines Web inclouen:


Aquestes tècniques incrementen considerablement la complexitat de les pàgines Web, ofereixen una flexibilitat limitada, pateixen problemes d'interoperabilitat, i creen dificultats a la gent amb discapacitats.

Els fulls d'estil solucionen aquests problemes al mateix temps que reemplacen el limitat rang de mecanismes de presentació de l'HTML. Els fulls d'estil fan fàcil l'especificació de la quantitat d'espai blanc entre les línies de text, els colors utilitzats pel text i els fons, la mida i l'estil de la font, i multitut d'altres detalls.

L'HTML 4.0 facilita el suport per a les següents característiques dels fulls d'estil:

Col·locació flexible de la informació d'estil
La col·locació dels fulls d'estil en fitxers separats fa que la seva reutilització sigui més fàcil. De vegades és útil incloure instruccions de presentació dins del document al qual s'apliquen, bé agrupades a l'inici del document o bé com atributs dels elements al llarg del cos del document. Per a fer més fàcil la manipulació de l'estil en termes d'un site l'especificació de l'HTML 4.0 (i, per tant, aquest manual) descriu com utilitzar les capçaleres HTTP per assignar els fulls d'estil que s'han d'aplicar a un document.


Independència de llenguatges específics de fulls d'estil
L'especificació de l'HTML 4.0 no lliga l'HTML a cap llenguatge de fulls d'estil en particular. Això permet la utilització d'un rang de llenguatges d'aquest tipus, per exemple uns de simples per a la majoria dels usuaris i uns de més complexes per a la minoria d'usuaris amb unes necessitats altament especialitzades. Els exemples inclosos en aquest tema tots utilitzen els CSS (Fulls d'Estil en Cascada) però també serien possibles altres llenguatges de fulls d'estil.


L'efecte cascada
És la capacitat proporcionada per alguns llenguatges de fulls d'estil, com CSS, d'acceptar informacions d'estil des de diferents recursos per a ser combinades conjuntament. Això podria ser, per exemple, línies guia d'estils corporatius, estils comuns a un grup de documents, i estils específics d'un sol document. Mitjançant l'emmagatzematge d'aquestes informacions d'estil separadament, els estils poden ser reutilitzats, simplificant la generació de pàgines i fent més efectiu l'ús de l'accés a la xarxa. L'efecte cascada defineix una seqüència ordenada de fulls d'estil on les regles dels fulls d'estil més recents tenen una més gran precedència que les de fulls d'estil més antics. No tots els llenguatges de fulls d'estil suporten l'efecte cascada.


Dependències de mitjà
L'HTML permet als autors especificar documents d'una manera independent de mitjà. Això permet als usuaris accedir a les pàgines Web utilitzant una àmplia varietat de dispositius i de mitjans, per ex., pantalles gràfiques per ordinadors que treballen amb Windows, Macintosh OS i X11, dispositius per a televisió, telèfons adapatats especialment i dispositius portables PDA (Personal Digital Assistant, assistent personal digital o electrònic), navegadors basats en la parla, i dispositus tàctils basats en el braille.

Els fulls d'estil, en contrast, s'apliquen a mitjans o grups de mitjans específics. Un full d'estil pensat per a ser utilitzat en pantalla pot ser aplicable quan s'imprimeixi, però serà de molt poc ús per als navegadors basats en la parla. L'especificació de l'HTML 4.0 permet definir les categories principals de mitjans als quals un determinat full d'estil és aplicable. Això permet als agents d'usuari evitar la recuperació de fulls d'estil inadients. Els llenguatges de fulls d'estil poden incloure característiques per descriure les dependències de mitjà dins del mateix full d'estil.


Estils alternatius
Pot ser que els autors desitgin oferir als lectors diverses maneres de visionar un document. Per exemple, un full d'estil per presentar documents compactes amb fonts petites, o bé un que especifiqui fonts més grans per a una millor llegibilitat. L'especificació de l'HTML 4.0 permet als autors especificar un full d'estil preferit així com alternatives que tinguin per objectiu usuaris o mitjans específics. Els agents d'usuari haurien de donar als usuaris la oportunitat de seleccionar d'entre uns quants fulls d'estil alternatius o invalidar el conjunt de fulls d'estil.


Preocupació pel funcionament
Hi ha gent que ha expressat preocupació sobre les qüestions del funcionament degudes als fulls d'estil. Per exemple, el fet de recuperar un full d'estil extern pot retardar la presentació total per a l'usuari. Una situació similar té lloc si el HEAD del document inclou una llarga llista de regles de fulls d'estil.


La proposta actual tracta aquestes qüestions permetent als autors incloure les instruccions de presentació dins de cada element HTML. La informació de presentació aleshores es troba disponible en el moment en què l'agent d'usuari vol presentar cada element.

En molts casos els autors aprofitaran un full d'estil comú per a un grup de documents. En aquest cas, el fet de distribuir fulls d'estil al llarg del document realment portarà a un pitjor funcionament que utilitzar un full d'estil linkat, ja que per a la majoria de documents el full d'estil estarà ja present en la caché local. La disponibilitat pública de bons fulls d'estil esperonarà aquest efecte.
AFEGIR ESTIL A L'HTML
Els documents HTML poden contenir regles de fulls d'estil directament dins d'ells o poden importar fulls d'estil.

Qualsevol llenguatge de fulls d'estil pot ser utilitzat amb l'HTML. Un simple llenguatge de fulls d'estil pot ser suficient per a les necessitats de la majoria dels usuaris, però per a necessitats altament especialitzades poden ser més adients altres llenguatges. L'especificació de l'HTML 4.0 (i, per tant, aquest manual) utilitza els "Fulls d'Estil en Cascada" (CSS) pels exemples.

La sintaxi de les dades d'estil depèn del llenguatge d'estil.
Assignar el llenguatge de fulls d'estil per defecte
Els autors han d'especificar el llenguatge de fulls d'estil de la informació d'estil associada amb un document HTML.

Els autors haurien d'utilitzar l'element META per assignar el llenguatge de fulls d'estil per a un document. Per exemple, per a assignar CSS com a llenguatge per defecte els autors haurien de posar la següent declaració en el HEAD dels seus documents:
   <META http-equiv="Content-Style-Type" content="text/css">
El llenguatge de fulls d'estil per defecte també es pot inicialitzar amb les capçaleres HTTP. La declaració META de més amunt és equivalent a la següent capçalera HTTP:
	Content-Style-Type: text/css
Els agents d'usuari haurien de determinar el llenguatge de fulls d'estil per defecte per a un document d'acord amb els següents passos (de més alta a més baixa prioritat):

  1. Si hi ha alguna declaració META que especifiqui el "Content-Style-Type", aleshores l'última de la seqüència de caràcters determina el llenguatge de fulls d'estil per defecte.
  2. D'altra manera, si hi ha alguna capçalera HTTP que especfiqui el "Content-Style-Type", l'última de la seqüència de caràcters determina el llenguatge de fulls d'estil per defecte.
  3. D'altra manera, el llenguatge de fulls d'estil per defecte és "text/css".

Els documents que incloguin elements que inicialitzin l'atribut style però que no defineixin un llenguatge de fulls d'estil per defecte són incorrectes. Les eines d'autor haurien de generar la informació del llenguatge de fulls d'estil per defecte (típicament una declaració META) per tal que els agents d'usuari no hagin de basar-se en un "text/css" per defecte.
Informació d'estil inline
Mitjançant l'atribut style es pot definir informació d'estil inline.
Informació d'estil de capçalera: l'element STYLE
L'element STYLE permet als autors posar regles de fulls d'estil en la capçalera del document. L'HTML permet qualsevol nombre d'elements STYLE en la secció HEAD d'un document.

Els agents d'usuari que no suporten els fulls d'estil, o que no suporten un determinat llenguatge de fulls d'estil utilitzat per un element STYLE, han d'ocultar els continguts de l'element STYLE. És un error presentar el contingut d'aquest element com a part del text del document. Alguns llenguatges de fulls d'estil suporten una sintaxi per ocultar el contingut als agents d'usuari no conformats.
Tipus de mitjans
L'HTML permet als autors dissenyar documents que aprofitin les característiques dels mitjans sobre els quals s'ha de presentar el document (per ex., pantalles gràfiques, pantalles de televisió, dispositius manuals, navegadors basats en la parla, dispositius tàctils Braille, etc.). Mitjançant l'especificació de l'atribut media, els autors permeten als agents d'usuari carregar i aplicar els fulls d'estil selectivament.

Descriptors de mitjans reconeguts??

Les següents declaracions de mostra s'apliquen a tots els elements H1. Quan es projecten en una reunió de negocis tots les instàncies seran de color blau. Quan s'imprimeixin totes les instàncies estaran centrades:
   <HEAD>
      <STYLE type="text/css" media="projection">
         H1 { color: blue}
      </STYLE>

      <STYLE type="text/css" media="print">
         H1 { text-align: center }
      </STYLE>
Aquest exemple afegeix efectes de so a les ancles per a utilitzar amb les sortides de veu:
   <STYLE type="text/css" media="aural">
      A { cue-before: uri(campana.aiff); cue-after: uri(dong.wav)}
   </STYLE>
</HEAD>
El control de mitjans és particularment interessant quan s'aplica a fulls d'estil externs ja que els agents d'usuari poden estalviar-se temps recuperant de la xarxa només aquells fulls d'estil que s'apliquen al dispositiu actual. Per exemple, els navegadors basats en la parla poden evitar descarregar fulls d'estil dissenyats per a la presentació visual.
FULLS D'ESTIL EXTERNS
Els autors poden separar els fulls d'estil dels documents HTML. Això ofereix diversos beneficis:

Fulls d'estil preferits i alternatius
L'HTML permet als autors associar qualsevol nombre de fulls d'estil externs amb un document. El llenguatge de fulls d'estil defineix com interactuen múltiples fulls d'estil externs (per exemple, les regles de l'"efecte cascada" de CSS).

Els autors poden especificar diversos fulls d'estil mútuament excloents anomenats fulls d'estil alternatius. Els usuaris poden seleccionar els seus fulls d'estil favorits d'entre aquests depenent de les seves preferències. Per exemple, un autor pot especificar un full d'estil dissenyat per a pantalles petites i un altre per a usuaris amb una visió dèbil (per ex., fonts grans). Els agents d'usuari haurien de permetre als usuaris poder seleccionar d'entre fulls d'estil alternatius.

L'autor pot especificar que una de les alternatives sigui un full d'estil preferit. Els agents d'usuari haurien d'aplicar el full d'estil preferit de l'autor a no ser que l'usuari hagi seleccionat una alternativa diferent.

Els autors poden agrupar diversos fulls d'estil alternatius (incloent-hi els fulls d'estil preferits per l'autor) sota un sol nom d'estil. Quan un usuari seleccioni un estil anomenat, l'agent d'usuari ha d'aplicar tots els fulls d'estil amb aquell nom; no han d'aplicar fulls d'estil alternatius amb un nom d'estil diferent d'aquest. L'apartat sobre com especificar fulls d'estil externs explica com anomenar un grup de fulls d'estil.

Els autors també poden especificar fulls d'estil persistents que els agents d'usuari han d'aplicar a més de qualsevol full d'estil alternatiu.

Els agents d'usuari han de respectar els descriptors de mitjans quan apliquin qualsevol full d'estil. Els agents d'usuari també haurien de permetre als usuaris inhabilitar completament els fulls d'estil de l'autor, i en tal cas l'agent d'usuari no haurà d'aplicar cap full d'estil persistent o alternatiu.
Especificar fulls d'estil externs
Els autors poden especificar fulls d'estil externs amb els següents atributs de l'element LINK:

Els agents d'usuari haurien de proporcionar un mitjà perquè els usuaris puguin veure i triar de la llista d'estils alternatius. El valor de l'atribut title es recomana com a nom de cada tria.

Exemple: primer s'especifica un full d'estil persistent localitzat en el fitxer elmeuestil.css:
   <LINK href="elmeuestil.css" rel="stylesheet" type="text/css">
el fet de fixar l'atribut title fa que aquest sigui el full d'estil preferit de l'autor:
   <LINK href="elmeuestil.css" title="compacte"
         rel="stylesheet" type="text/css">
el fet d'afegir la paraula clau "alternate" a l'atribut rel fa que aquest sigui un full d'estil alternatiu:
   <LINK href="elmeuestil.css" title="Mitja" 
         rel="alternate stylesheet" type="text/css">

Els autors també poden utilitzar l'element META per inicialitzar el full d'estil preferit del document. Per exemple, per assignar "compacte" com a full d'estil preferit (veieu el full d'estil precedent) els autors poden incloure la següent línia en el HEAD:
   <META http-equiv="Default-Style" content="compacte">
El full d'estil preferit també es pot especificar amb les capçaleres HTTP. La recent declaració META és equivalent a la capçalera HTTP:
	Default-Style: "compacte"
Si dues o més declaracions META o capçaleres HTTP especifiquen el full d'estil preferit l'última és la que té preferència. Les capçaleres HTTP es considera que tenen lloc abans que el HEAD del document, per a aquest propòsit.

Si dos o més elements LINK especifiquen un full d'estil preferit, el primer és el que té preferència.

Els fulls d'estil preferits especificats amb META o amb les capçaleres HTTP tenen preferència sobre els que estant especificats amb l'element LINK.
FULLS D'ESTIL EN CASCADA
Els llenguatges de fulls d'estil en cascada, com CSS, premeten que les informacions d'estil provinents de diversos recursos es combinin. No obstant, no tots els llenguatges de fulls d'estil suporten l'efecte cascada. Per a definir el comportament d'un efecte cascada els autors especifiquen una seqüència d'elements LINK i/o STYLE. La informació d'estil cau en cascada en l'ordre en què els elements van apareixent en el HEAD.

Nota. L'especificació de l'HTML 4.0 no especifica el comportament de l'efecte cascada en els diferents llenguatges de fulls d'estil. Els autors haurien d'evitar barrejar llenguatges de fulls d'estil.

Exemple: s'especifiquen dos fulls d'estil alternatius anomenats "compacte". Si l'usuari selecciona l'estil "compacte", l'agent d'usuari ha d'aplicar tant els fulls d'estil externs com el full d'estil persistent "comu.css". Si l'usuari selecciona l'estil "impressió gran" només s'aplicaran el full d'estil alternatiu "impressiogran.css" i el full d'estil persistent "comu.css":
   <LINK rel="alternate stylesheet" title="compacte" 
         href="base-petita.css" type="text/css">
   <LINK rel="alternate stylesheet" title="compacte"
         href="extras-petita.css" type="text/css">
   <LINK rel="alternate stylesheet" title="impressió gran"
         href="impressiogran.css" type="text/css">
   <LINK rel="stylesheet" href="comu.css" type="text/css">

Exemple: aquí l'efecte cascada involucra tant l'element LINK com l'element STYLE:
   <LINK rel="stylesheet" href="corporatiu.css" type="text/css">
   <LINK rel="stylesheet" href="reporttecnic.css" type="text/css">
   <STYLE type="text/css">
      p.especial { color: rgb(230, 100, 180) }
   </STYLE>
Efectes cascada depenents de mitjà
Un efecte cascada pot incloure fulls d'estil aplicables a diferents mitjans. Tant LINK com STYLE poden utilitzar-se amb l'atribut media. L'agent d'usuari aleshores és el responsable de filtrar aquells fulls d'estil que no s'apliquin al mitjà actual.

Exemple: es defineix un efecte cascada on el full d'estil "corporatiu" es proporciona en diverses versions: una expressa per a la impressió, una per a l'ús en pantalla i una per als navegadors basats en la parla (útil, per exemple, per llegir un correu electrònic dins del cotxe). El full d'estil "reporttecnic" s'aplica a tots els mitjans. La regla de color definida per l'element STYLE s'utilitza per a la impressora i la pantalla però no per a la presentació acústica:
	<LINK rel="stylesheet" media="aural" 
            href="corporatiu-acustic.css" type="text/css">
	<LINK rel="stylesheet" media="screen"
            href="corporatiu-pantalla.css" type="text/css">
	<LINK rel="stylesheet" media="print"
            href="corporatiu-impressora.css" type="text/css">
	<LINK rel="stylesheet" href="reporttecnic.css" type="text/css">
	<STYLE type="text/css">
	    p.especial { color: rgb(230, 100, 180) }
	</STYLE>
L'herència i l'efecte cascada
Quan un agent d'usuari vol presentar un document necessita trobar valors per a les propietats d'estil, per ex., la família de fonts, l'estil de la font, la mida, l'alçada de la línia, el color del text, i coses així. El mecanisme exacte depèn del llenguatge de fulls d'estil, però la següent descripció és generalment aplicable:

OCULTACIÓ DE LES DADES D'ESTIL ALS AGENTS D'USUARI
Alguns llenguatges de fulls d'estil suporten sintaxi expressa per permetre als autors ocultar el contingut de l'element STYLE als agents d'usuari no conformats.

Exemple: il·lustració de com es pot comentar el contingut dels elements STYLE a CSS per assegurar-se que els agents d'usuari antics no conformats no el presentaran en forma de text:
	<STYLE type="text/css">
	<!--
	   H1 { color: red }
	   P  { color: blue}
	   -->
	</STYLE>
FER REFERÈNCIA A FULLS D'ESTIL AMB LES CAPÇALERES HTTP
Els administradors dels servidors de la Xarxa poden trobar convenient configurar un servidor per tal que un full d'estil sigui aplicat a tot un grup de pàgines. La capçalera HTTP Link descrita en la RFC2068, secció 19.6.1.2, té el mateix efecte que un element LINK amb els mateixos atributs i valors. Múltiples capçaleres Link corresponen a múltiples elements LINK que tinguin lloc en el mateix ordre. Per exemple:
   Link: <http://www.essaa.com/corporatiu.css> REL=stylesheet
correspon a:
   <LINK rel="stylesheet" href="http://www.essaa.com/corporatiu.css">

És possible especificar diversos estils alternatius utilitzant múltiples capçaleres Link, i utilitzant després l'atribut rel per determinar l'estil per defecte.

Exemple: Aquí, el full d'estil "compacte" s'aplica per defecte ja que s'omet la paraula clau "alternate" per a l'atribut rel:
   Link: <compacte.css>; rel="stylesheet"; title="compacte"
   Link: <impressiogran.css>; rel="alternate stylesheet"; 
         title="impressió gran"

Això hauria de funcionar també quan els documents HTML s'enviïn per correu electrònic. Alguns agents de correu electrònic poden alterar la ordenació de les capçaleres RFC822. Com a protecció perquè això no afecti l'ordre de cascada pels fulls d'estil especificats amb les capçaleres Link, els autors poden utilitzar la concatenació de capçaleres per barrejar diverses instàncies del mateix camp de capçalera. Els signes de cometes només són necessaris quan l'atribut value inclogui algun espai en blanc. Cal utilitzar les entitats SGML per referenciar caràcters que d'altra manera no estarien permesos en l'HTTP o en les capçaleres de correu electrònic, o que és provable que estiguin afectats pel trànsit que passa a través dels gateways.

Els elements LINK i META implicats per les capçaleres HTTP es defineixen com si tinguessin lloc abans de qualsevol element LINK i META explícits en el HEAD del document.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos