CSS
De Viquipèdia
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).
Taula de continguts |
[edita] 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;
}
[edita] 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)
|
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.
[edita] Enllaços externs
[edita] Referències
- (anglès) Definició de l'estàndard CSS en W3C.org
- (anglès) W3C CSS Servei de Validació automatitzat de documents CSS
- (anglès) Comparació de la presentació CSS en diferents motors de la Wikipedia anglesa.
[edita] Tutorials i altres recursos
- (català) Curs de CSS en català
- (anglès) Proves CSS2 per Peter-Paul Koch
- (anglès) Box model hack
- (anglès) Box Sizing Behavior
- (anglès) Classes particulars del CSS de l'HTML Source.
- (anglès) CSS Panic Guide
- (anglès) Explorer Exposed!
[edita] Galeries i exemples d'ús
- (anglès) CSS Zen Garden
- (anglès) CSS Town
- (anglès) <oXygen/> CSS Editor
