llenguatge declaratiu per a donar estils a pàgines web From Wikipedia, the free encyclopedia
Cascading Style Sheets (CSS, en català: Fulls d'Estil en Cascada) és un llenguatge de fulls d'estil utilitzat per descriure la semàntica de presentació (l'aspecte i format) d'un document escrit en un llenguatge de marques. La seva aplicació més comuna és dissenyar pàgines web escrites en HTML i XHTML, però el llenguatge també pot ser aplicat a qualsevol classe de document XML, incloent-hi SVG i XUL.
![]() | |
Tipus | format de fitxer, llenguatge de programació i Full d'estil ![]() |
---|---|
Extensió | css ![]() |
MIME | text/css ![]() |
Desenvolupador | CSS Working Group (en) ![]() ![]() |
Versió inicial | 17 desembre 1996 ![]() |
Més informació | |
Stack Exchange | Etiqueta ![]() |
Lloc web | w3.org… ![]() |
CSS està dissenyat principalment per permetre la separació de contingut del document (escrit en HTML o un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, colors, i fonts. Aquesta separació pot millorar l'accessibilitat al contingut, proporcionar més flexibilitat i control en l'especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules). CSS també pot deixar la mateixa pàgina de marques ser presentada en estils diferents mitjançant mètodes de render diferents, com a la pantalla, en impressió, per veu (quan és llegida en veu alta per un navegador amb lector o pantalla lectora) i amb mecanismes tàctils amb sistemes Braille. Mentre que l'autor d'un document típicament associa els documents amb un full d'estil CSS, els lectors poden utilitzar un full d'estil diferent, potser un al seu propi ordinador, per invalidar aquell que l'autor ha especificat.
CSS especifica un esquema de prioritat per determinar quines regles d'estil s'apliquen si més d'una regla està associada amb un element en particular. En aquests fulls anomentas en cascada, es calculen prioritats o pesos i s'assignen a regles, de manera que els resultats siguin previsibles.
Les especificacions CSS són mantingudes pel World Wide Web Consortium (W3C). El tipus de mitja d'Internet (Tipus MIME) text/css
és registrat per a l'ús amb CSS per RFC 2318 (Març de 1998).
CSS proporciona tres camins diferents per aplicar les regles d'estil a una pàgina Web:
1. Un full d'estil extern,
que és un full d'estil que està emmagatzemat en un arxiu diferent a l'arxiu on s'emmagatzema el codi HTML de la pàgina web. Aquesta és la manera de programar més potent, perquè separa completament les regles de format per la pàgina HTML de l'estructura bàsica de la pàgina.
2. Un full d'estil intern, que és un full d'estil que està incrustat dins d'un document HTML. (Va a la dreta de l'element <head>). D'aquesta manera s'obté el benefici de separar la informació de l'estil, del codi HTML pròpiament dit. Es pot optar per copiar el full d'estil incrustat d'una pàgina a una altra, (aquesta possibilitat és difícil d'executar si es vol per guardar les còpies sincronitzades). En general, l'única vegada que es fa servir un full d'estil intern, és quan es vol proporcionar alguna característica a una pàgina web en un simple fitxer, per exemple, si s'està enviant alguna cosa a la pàgina web.
3. Un estil en línia, que és un mètode per insertar el llenguatge d'estil de pàgina directament, dins d'una etiqueta HTML. Aquesta manera de fer no és totalment adequada. L'inserir la descripció del format dins del document de la pàgina web a nivell de codi es converteix en una feina llarga, costosa i poc elegant per resoldre el problema de la programació de la pàgina. Aquest mode de treball es podria usar de manera ocasional si es pretén aplicar un format amb pressa, ràpidament. No és tot senzill o estructurat com hauria de ser, però funciona. Aquest és el mètode recomanat per maquetar correus electrònics en HTML.
CSS té una sintaxi simple i utilitza un cert nombre de paraules clau angleses per especificar els noms de diverses propietats d'estil.
Un full d'estil consta d'una llista de regles. Cada regla o conjunt de regles consta d'un o més selectors i un bloc de declaracions. Un bloc de declaració consta d'una llista de declaracions entre claus d'ator. Cada declaració mateixa consta d'una propietat, dos punts (:), un valor, seguit de semidos punts (;).[2]
En CSS, els selectors s'utilitzen per declarar a quins dels elements de marca s'aplica un estil. Els seleccionadors poden afectar a tots els elements d'un tipus específic, o només aquells elements que tenen un cert atribut; es pot afectar a elements depenent de com es posen relativament els uns dels altres en el codi de marcatge, o damunt com es nien dins del moder d'objectes del document.
Les pseudoclasses són una altra forma d'especificació utilitzada en CSS per identificar elements de marca, i en alguns casos, accions d'usuari específiques a què s'aplica un bloc de declaracions particular. Un exemple sovint utilitzat és la pseudoclasse de :hover
que aplica un estil a' només quan l'usuari 'assenyala' l'element visible, normalment mantenint el cursor sobre l'element. S'afegeix a un seleccionador com en a:hover o #elementid:hover. Altres pseudoclasses i els pseudo-elements
són, per exemple, :first-line
, :visited
o :before
. Una pseudoclasse especial és :lang(c)
, "c".
Una pseudoclasse selecciona elements sencers, com :link
o :visited
, mentre que un pseudo-element
fa una selecció que pot constar d'elements parcials, com :first-line
o :first-letter
.
Els seleccionadors es poden combinar d'altres maneres també, especialment en CSS 2.1, per aconseguir especificitat i flexibilitat més gran.[3]
Aquí hi ha un exemple que resumeix les regles de dalt:
selector [, selector2, ...][:pseudo-classe] {propietat: valor;
[propietat2: valor2;
...]
}
/* comentari */
Abans de CSS, gairebé tots els atributs de presentació de documents de HTML es contenien dins del marcatge de HTML; tots els colors de font, estils de fons, alineacions d'element, vores i mides s'havien de descriure explícitament, sovint repetidament, dins del HTML. CSS permet als autors moure molta d'aquella informació a un full d'estil separat que fa el marcatge de HTML considerablement més simple.
Els encapçalaments (elements de h1), subencapçalaments (h2), sub-subencapçalaments (h3), etc., es defineixen estructuralment utilitzant HTML. En impressió i a la pantalla, l'elecció de font, mida, color i èmfasi per a aquests elements és presentacional.
Abans de CSS, els autors de documents que volien assignar unes característiques tipogràfiques a, per exemple, tots els encapçalaments h2
havien d'utilitzar l'etiqueta font
de HTML i altres elements presentacionals per a cada instància d'aquell tipus d'encapçalament. Les marques de presentació addicionals en HTML feia més complexos els documents, i generalment més difícils de mantenir. En CSS, la presentació és separada de l'estructura. En impressió, CSS pot definir color, font, alineació de text, mida, vores, espaiat, disposició moltes altres característiques tipográfiques.Ho pot fer independentment per pantalles i vistes impreses. CSS també defineix estils no visuals com la velocitat i èmfasi amb què el text es llegeix en veu alta per lectors de text auditius. El W3C ara considera que els avantatges de CSS per definir tots els aspectes de la presentació de pàgines de HTML són superiors a uns altres mètodes. Per això, ha declarat obsolet l'ús de tot el marcatge HTML de presentació original.
La informació CSS pot ser proporcionada per diverses fonts. La informació d'estil de CSS es pot adjuntar com a document separat o ser dins el document HTML. Es poden importar múltiples fulls d'estil. Diferents estils es poden aplicar depenent del mecanisme de sortida que s'utilitza; per exemple, la versió de pantalla pot ser bastant diferent de la versió impresa, de manera que els autors puguin fer a mida la presentació apropiadament per a cada medi.
Esquema de prioritat per a fonts CSS (de prioritat més alta a més baixa):
El full d'estil amb la prioritat més alta controla com es mostra el contingut. Les declaracions no posades en la font de prioritat més alta són passades per una font de prioritat més baixa com l'estil d'agent usuari. Aquest procés s'anomena cascading.
Un dels objectius de CSS és també permetre control més gran dels usuaris sobre la presentació. Algú que troba els encapçalaments en cursiva vermells difícils de llegir pot aplicar un full d'estil diferent. Depenent del seu navegador i el lloc web, un usuari pot triar entre diversos fulls d'estil proporcionats pels dissenyadors, pot treure tot l'estil afegit i veure el lloc emprant l'estil per defecte del navegador, o pot invalidar només l'estil d'encapçalament en cursiva vermell sense canviar uns altres atributs.
Arxiu highlightheaders.css que conté:
h1 { color: white; background-color: orange !important; }
h2 { color: white; background-color: green !important; }
Tal arxiu s'emmagatzema localment i és aplicable si s'ha especificat en les opcions de navegador. "!important" significa que prevalgui sobre les especificacions dels autors.
Els avantatges d'utilitzar CSS (o un altre llenguatge d'estil) són:
Els fulls d'estil han existit d'una forma o altra des dels començaments de SGML durant els anys 1970. Els Fulls d'Estil en Cascada es desenvolupaven com a mitjà per crear una aproximació consistent a proporcionar informació d'estil per a documents web.
A mesura que HTML augmentava, anava afegint una varietat més àmplia de capacitats estilístiques per satisfer les demandes de desenvolupadors web. Aquesta evolució donava més control sobre l'aspecte dels llocs però al cost que HTML es tornés més complex d'escriure i de mantenir per als dissenyadors. Les diferències entre navegadors web feien difícil la consistència de l'aparença dels llocs web, i els usuaris tenien menys control sobre com el contingut web era mostrat.
Per millorar les capacitats de presentació de webs, nou llenguatges diferents de fulls d'estil es proposaven a la llista de correu www-style de W3C. De les nou propostes, dos s'escolliren com la fonament pel que va esdevenir CSS: Fulls d'Estil en Cascada HTML (CHSS) i Proposta de Full d'Estil basada en Stream (SSP, Stream-based Style Sheet Proposal). CHSS, un llenguatge que té una mica de semblança amb el CSS d'avui, era proposat per Håkon Wium Lie l'octubre de 1994.Bert Bos estava treballant en un navegador anomenat Argo, que emprava el seu propi llenguatge de fulls d'estil, l'SPP.[4] Lie and Yves Lafon joined Dave Raggett to expanded the Arena browser for supporting CSS as a testbed application for the W3C.[5][6][7] Lie y Bos treballaren junts per desenvolupar l'estandard CSS (la 'H' fou eliminada del nom perquè aquests fulls d'estil també podien ser aplicats a altres llenguatges de marques, a part de CSS.[8]
A diferència dels llenguatges d'estil existents com DSSSL i FOSI, CSS deixava l'estil d'un document ser influït per múltiples fulls d'estil. Un full d'estil podia heretar d'un altra, permetent una mescla de preferències estilístiques controlades d'igual manera pel diseñador web i l'usuari.
La proposta de Lie es presentava a la conferència "Mosaic i la web" (anomenada WWW2 posteriorment) a Chicago, Illinois el 1994, i una altra vegada amb Bert Bos el 1995.[8] En aquest temps, el W3C ja estava sent establert, i es va interessar en el desenvolupament de CSS. Organitzava un taller amb aquest propòsit presidit per Steven Pemberton. Això va fer que el W3C afegisin feina al CSS al HTML editorial review board (ERB). Lie y Bos eren el personal tècnic principal sobre aquest aspecte del projecte, amb membres addicionals, incloent-hi Thomas Reardon de Microsoft, participant també. L'agost del 1996 la Corporació Netscape Communication presentava un llenguatge de fulls d'estil alternatiu anomenat Fulls d'Estil de JavaScript (JSSS).[8] Aquesta especificació mai no va ser acabada i és obsoleta.[9] al Final del 1996, CSS estava preparat per tornar-se oficial, i la recomanació CSS nivell 1 era publicada el desembre.
El desenvolupament de HTML, CSS, i el DOM s'havia fet en un grup, la Junta de Revisió Editorial d'HTML (ERB, Editorial Review Board). El 1997, l'ERB es partia en tres grups de feina: Grup de feina d'HTML, presidit per Dan Connolly de W3C; Grup de feina de DOM, presidit per Lauren Wood de SoftQuad; i grup de feina de CSS, presidit per Chris Lilley de W3C.
El Grup d'Explotació de CSS començava a tractar assumptes que no s'havien encarat amb el nivell 1 de CSS, ocasionant la creació del nivell de CSS 2 el 4 de novembre del 1997. Es publicava com a Recomanació de W3C el 12 de maig, del 1998. El nivell de CSS 3, que es començava el 1998, és, el 2009, encara en desenvolupament.
El 2005 els Grups de feina de CSS decidien reforçar els requisits dels estàndards més estrictament. Això significava que els estàndards ja publicats com CSS 2.1, els Selectors CSS 3 i el Text CSS3 es retiraven de les recomanacions candidates a nivell de l'esborrany de treball.
Encara que l'especificació de CSS1 es completava el 1996 i l'Internet Explorer 3 de Microsoft sortia en aquell presentant suport limitat per a CSS, varen passar més de tres anys abans que qualsevol navegador web aconseguís una implementació plena de l'especificació. L'Internet Explorer 5.0 per a Macintosh, aparegut al març de 2000, va ser el primer navegador a tenir support (més del 99 percent) a CSS1, superant opera, que havia estat el líder des de la introducció de suport de CSS 15 mesos abans. Uns altres navegadors els varen seguir, i molts d'ells addicionalment implementaven parts de CSS2. En juliol de 2008, cap navegador (acabat) té plenament implementat CSS2, amb nivells d'aplicació que varien.
Tot i que els primers navegadors com l'Internet Explorer 3 i 4, i Netscape 4.x tenien suport per a CSS, era típicament incomplet i afligit amb errors seriosos. Això era un obstacle seriós per a l'adopció de CSS.
Quan més tard els navegadors 'versió 5' començaven a oferir una bastant plena implementació de CSS, eren encara incorrectes en certes àrees i estaven plens d'inconsistències, errors i unes altres peculiaritats. La proliferació de tals inconsistències relacionades amb CSS i fins i tot la variació en el suport de trets de l'estandard ha fet difícil que els dissenyadors aconsegueixin una aspecte coherent entre plataformes. Alguns autors recorren a trucs com CSS hacks i els filtres CSS per obtenir resultats coherents a través de navegadors web i plataformes.
Problemes amb l'adopció desigual dels navegadors de CSS junt amb errates en l'especificació original va portar el W3C a revisar l'estàndard de CSS2 a CSS2.1, que pot més a prop a una foto laborable de suport de CSS actual en navegadors de HTML. Algunes propietats de CSS2 que cap navegador reeixidament no implementava es deixaven caure, i en uns quants casos, els comportaments definits es canviaven per portar l'estàndard|norma a línia|recta amb les aplicacions existents predominants. CSS2.1 es convertia en una Recomanació de Candidat el 25 de febrer del 2004, però CSS2.1 es retirava a estatus d'Esborrany de feina el 13 de juny, 2005,[10] i només va ser retornat a estatus de Recomanació Candidata el 19 de juliol, 2007.[11]
CSS té diversos nivells i perfils. Cada nivell de CSS es construeix a partir de l'últim, típicament afegint trets nous i típicament denotat com CSS1, CSS2, i CSS3. Els perfils són típicament un subconjunt d'un o més nivells de CSS fets per a una interfície d'usuari o dispositiu particular. Actualment hi ha perfils per a mecanismes mòbils, impressores, i televisors. Els perfils no s'haurien de confondre amb tipus de mitjans de comunicació, que es van afegir a CSS2.
La primera especificació CSS que va esdevenir una recomanació oficial del W3C és el nivell de CSS 1, publicat el desembre del 1996.[12] Entre les seves capacitats hi ha suport per:
El W3C ja no manté la recomanació CSS1.[13]
CSS Nivell 2 era desenvolupat pel W3C i es publicava com a Recomanació el maig del 1998. Essent un superconjunt de CSS1, CSS2 inclou un cert nombre de capacitats noves com posicionament absolut, relatiu, i fix d'elements i z-index, el concepte de tipus de mitjans multimèdia, suport per a fulls d'estil auditius i text bidireccional, i propietats de font noves com ombres. El W3C manté la recomanació CSS2.[14]
CSS Nivell 2 revisió 1 o CSS 2.1 arregla errors en CSS2, treu característiques a les quals es donava suport molt pobre i afegeix ampliacions ja implementades als navegadors a l'especificació. Encara que era una Recomanació Candidata durant uns quants mesos, el 15 de juny del 2005 era tornat a un esborrany per a futura revisió.[15] Va ser retornat a estatus de Recomanació Candidata el 19 de juliol del 2007.
El nivell de CSS 3 és actualment en desenvolupament, des del 15 de desembre del 2005.[16] Els primers esborranys de CSS3 van ser alliberats el juny del 1999.[17] El Roadmap de W3C CSS3 proporciona un resum i introducció d'aquesta nova versió de fulls d'estil.[18] A diferència de CSS2, que va ser una especificació que definia diverses funcionalitats, CSS3 està dividida en diversos documents separats, anomenats mòduls. Cada mòdul afegeix noves funcionalitats a les definides a CSS2, de manera que es preserven les anteriors per mantenir la compatibilitat. Degut a la modulació dels CSS3, diversos mòduls poden trobar-se en diferents estadis de desenvolupament.
Les especificacions de CSS3 aporten novetats que permeten fer webs més elaborades i dinàmiques, amb una major separació d'estils i continguts. Aquestes especificacions donen suport a moltes necessitats de les webs actuals, sense haver de recórrer als llenguatges de programació. CSS3 ofereix noves funcions que poden ser implementades en qualsevol pàgina de Firefox, Konqueror, Opera o Safari:
La border-style propietat pot tenir d'un a quatre valors (per a la vora superior, la vora dreta, la vora inferior i la vora esquerra).
Els canvis en aquestes tecnologies obeeixen al fenomen de la Web 2.0 i a les recomanacions del creador de la World Wide Web, de portar la web a la màxima expressió de la semàntica. Els avantatges principals en aquesta nova versió és la inclusió de noves propietats especialment pel que fa a l'aspecte gràfic. Amb aquestes noves propietats la càrrega de la pàgina disminueix, ja que molts efectes estan sota el control del navegador.