Cascading Style Sheets
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] Articles relacionats
- Acid2; Test dissenyat per Web Standards Project per a detectar si un navegador processa correctament el codi HTML i CSS.
[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
