Cascading Style Sheets

Poll without page-refresh

Article on other languages:

	del.icio.us
	Digg
	Furl
	Reddit
	Rojo
	Add to OnlyWire

Els fulls d'estil en cascada (Cascading Style Sheets, CSS) són un llenguatge formal usat per a definir la presentació d'un document estructurat escrit en HTML o XML (i per extensió en XHTML). El W3C (World Wide Web Consortium) és l'encarregat de formular l'especificació dels fulls d'estil que servirà d'estàndard per als agents d'usuari o navegadors.

La idea que es troba darrere del desenvolupament de CSS és separar l'estructura d'un document de la seva presentació.

Per exemple, l'element d'HTML <H1> indica que un bloc de text és un encapçalament i que és més important que un bloc etiquetat com <H2>. Versions més antigues d'HTML permetien atributs extra dins l'etiqueta oberta per donar-li format (com el color o la mida de font). No obstant això, cada etiqueta havia de disposar d'aquesta informació si es desitjava un disseny consistent per a una pàgina, i a més, una persona que llegís aquesta pàgina amb un navegador, perdia totalment el control sobre la visualització del text.

Quan s'utilitza CSS, l'etiqueta <H1> no hauria de proporcionar informació sobre com serà visualitzat, només marca l'estructura del document. La informació d'estil separada en una fulla d'estil especifica com s'ha de mostrar <H1>: color, font, alineació del text, grandària, i altres característiques no visuals com definir el volum d'un sintetitzador de veu, per exemple.

La informació d'estil pot ser adjuntada tant com un document separat o en el mateix document HTML. En aquest document, podrien definir-se estils generals en la capçalera del document o en cada etiqueta particular mitjançant l'atribut "style".

Els avantatges d'utilitzar CSS (o altre llenguatge d'estil) són:

Control centralitzat de la presentació d'un lloc web complet amb el que s'agilita de forma considerable l'actualització del mateix.
Els navegadors permeten als usuaris especificar el seu propi full d'estil local que serà aplicada a un lloc web remot, amb el que augmenta considerablement l'accessibilitat. Per exemple, persones amb deficiències visuals poden configurar el seu propi full d'estil per a augmentar la grandària del text o remarcar més els enllaços.
Una pàgina pot disposar de diferents fulles d'estil segons el dispositiu que la mostri o fins i tot a elecció de l'usuari. Per exemple, per a ser impresa, mostrada en un dispositiu mòbil, o ser "llegida" per un sintetitzador de veu.
El document HTML en si mateix és més clar d'entendre i s'aconsegueix reduir considerablement la seva grandària.

Hi ha diverses versions : CSS1 i CSS2, amb CSS3 en desenvolupament pel World Wide Web Consortium (W3C). Els navegadors moderns implementen CSS1 bastant bé, encara que existeixen petites diferències d'implementació segons marques i versions dels navegadors¹. CSS2, no obstant això, està solament parcialment implentat en els més recents.

¹ Un problema molt conegut d'implementació de CSS és el de la versió 5.X del popular navegador Internet Explorer que utilitza un model no estàndard per al càlcul de les mesures (vegi's més avall).

Maquetació CSS

Els dissenyadors web van optar per la utilització de taules per al disseny de pàgines webs. D'aquesta forma, l'ús que donaven a les taules era com elements d'estil quan la seva veritable comesa és albergar contingut. La maquetació CSS consisteix a utilitzar capes (layers) que en HTML es defineixen amb les marques <div></div> (d'obertura i tancament, respectivament) per a estructurar l'aplicació web, com alternativa a les taules i els marcs (frames). Així, podem anomenar cada capa amb l'atribut id de manera que podrem definir les propietats d'aquesta capa en l'arxiu CSS extern al document, encara que també es pot incloure el codi CSS en la mateixa pàgina que l'HTML, però és poc funcional (és convenient fer ús de la modularitat per a fer més senzill el manteniment). Un exemple d'utilització de la marca div seria:

Exemple.html
...
dins de body
<div id="capa1">
    Aquí podem posar el que volguem: imatges, text, etc.<br />
</div>

Estil_Exemple.css

#capa1 { /*aquí definim les propietats de la capa*/
background-color: #fff;
margin: auto;
color: #000;
}

Recomanacions del W3C

Cascading Style Sheets, nivel 1 (CSS1), Desembre de 1996

Propietats de fonts
Propietats de color i fons
Propietats de text
- Espaiat de paraules
- Alineació
Propietats de caixa
- Marge
- Vora
- Farcit
Propietats de classificació
- Visualització
- Llistes

Il·lustració de propietats de caixa

Marge (Margin)

Vora (Border)

Farciment (Padding)

Contingut (Content)

Farciment (Padding)

Vora (Border)

Marge (Margin)

Si es defineix una caixa amb l'atribut width (amplada), s'interpreta pel model de caixa del W3C com l'amplada del contingut. L'amplada del farciment i de la vora s'afegixen a l'amplada total de l'element.

En el model de caixa de Microsoft l'atribut d'amplada és l'amplada total, és a dir, l'amplada del contingut, del farciment i de la vora.

Això restringeix severament l'ús d'aquest model en una especificació per a diversos navegadors. Si hom vol evitar-lo, no pot especificar el marge, el farciment o la vora en la mateixa etiqueta que l'amplada del contingut. Una altra possibilitat és usar un hack.

No obstant això, l'Internet Explorer 6.0 pot variar-se a una manera d'acord amb l'estàndard si s'usa una declaració !DOCTYPE apropiada.

Articles relacionats

Acid2; Test dissenyat per Web Standards Project per a detectar si un navegador processa correctament el codi HTML i CSS.

Enllaços externs

This article is from Wikipedia. All text is available under the terms of the GNU Free Documentation License.

Giant Panda

Mercedes Car

This site monitored by SitePinger.net

Cascading Style Sheets

Taula de continguts

Maquetació CSS

Recomanacions del W3C

Articles relacionats

Enllaços externs

Referències

Tutorials i altres recursos

Galeries i exemples d'ús