CSS
CSS és un estàndard dissenyat principalment per separar els atributs d’estil (com el color de fons, la mida de la font o el sagnat) del contingut. Encara que aquest pot treballar amb molts tipus de documents, és majorment utilitzat com una forma de proveir informació d’estil en pàgines web.
La separació entre contingut i presentació millora la flexibilitat, permetent als autors definir un únic conjunt d’estils per a milers de documents, reduint així el temps i treball que s’ha d’invertir en cada actualització. Així mateix, la implementació de CSS permet a un document ser exclusivament semàntic, a l’alliberar-lo de la necessitat d’usar elements d’estil.
Declaracions, propietats i valors
Una declaració consisteix, bàsicament, en l’assignació d’un valor a una propietat.
En altres paraules, una declaració és la resposta a una pregunta. Com d’ample hauria de ser aquesta taula? Quin gruix aquesta vora? De quin color hauria de ser aquest fons? Com de gran la font en aquest paràgraf? I és exactament així com defineixes l’aspecte de la teva document: establint declaracions, una per a cada propietat que necessites definir.
Però CSS té un format específic que ha de seguir tota declaració. Aquest consisteix en el nom de la propietat seguit de dos punts “:” i el valor que li serà assignat. Quan es proveeix més d’una declaració en el mateix bloc, cada declaració ha de ser separada de la seva pròxima per un punt i coma “;”. Aquest és el motiu pel qual els autors normalment usen un punt i coma al final de cada declaració, independentment de la presència de declaracions següents. El proper esquema descriu les parts d’una declaració CSS.
Ús d’estils en un document
HTML presenta tres mètodes per afegir informació d’estil a un document; l’atribut style, l’element style i a través d’un arxiu extern.
Atribut style
L’ús de l’atribut style és la forma més fàcil i directa d’aplicar declaracions d’estil a un element. Aquest atribut pot tenir com a contingut, qualsevol nombre de declaracions d’estil, separades unes de les altres per un punt i coma “;”. Com que style és un atribut global, pot ser usat en qualsevol element d’HTML.
Però malgrat tota la seva simplicitat i immediatesa, l’ús d’aquest mètode trenca d’alguna manera un dels principals beneficis de CSS: la possibilitat de crear declaracions d’estil que poden ser reutilitzades en tants elements com sigui possible, cosa que es tradueix en flexibilitat i portabilitat. Només imagina’t havent de aplicar aquest mateix estil a centenars d’elements en els teus documents.
Això no vol dir que aquest enfocament no sigui útil. De fet, pot ser molt pertinent fer-lo servir quan necessites aplicar un estil a un sol element i per única vegada.
L’element style
L’element style és un contenidor per declaracions d’estil. Dins d’aquest element podem tenir qualsevol nombre de declaracions d’estil, sempre que estiguin correctament organitzades en grups de selectors.
Aquest element té la particularitat que només pot ser declarat en la secció de la capçalera (head) del document.
Arxius externs
L’avantatge d’utilitzar un arxiu extern per emmagatzemar informació d’estil resideix en la possibilitat de compartir aquest arxiu entre un gran nombre de documents. Quan un document és carregat, el navegador detecta la referència a l’arxiu de fulls d’estil, carregant i aplicant els estils com si fossin part del document.
Un arxiu extern de fulls d’estil pot ser inserint en el document amb l’element link, tenint el valor “text/css” en l’atribut type, i l’URL de l’arxiu de fulls d’estil en l’atribut href. Igual que l’element style, aquest element només pot estar ubicat en el bloc de capçalera (head) del document.
Sobre els continguts de l’arxiu de fulls d’estil, ha de presentar el mateix tipus d’informació que en un element style, és a dir, qualsevol nombre de declaracions d’estil organitzades en grups de selectors.
Document html amb l’element link apuntant al full d’estils:
Full d’estils:
Visualització del document HTML:
Selectors
Un selector és el mitjà per fer una referència a un grup d’un o més elements HTML, per tal d’aplicar a aquest un conjunt de declaracions CSS.
Hi ha una estructura amb la que s’ha de complir per a usar un selector i està composta pel selector seguit del conjunt de declaracions tancades per claus “{}”. El següent exemple, en el qual espais i trenquis de línia han estat agregats per millorar la lectura, reflecteix aquesta estructura.
Selector universal
El selector universal s’indica mitjançant un asterisc (*). Malgrat la seva senzillesa, no s’utilitza habitualment, ja que és difícil que un mateix estil es pugui aplicar a tots els elements d’una pàgina.
Selectors de tipus o etiqueta
Selecciona tots els elements de la pàgina que l’etiqueta HTML coincideix amb el valor del selector. Per exemple, tots els paràgrafs <p>, tots el ítems d’una llista <li>, tots els enllaços <a>, etc.
Selectors de ID
El selector de ID es correspon amb tots els elements que tenen el valor especificat en el seu atribut id. Com, per definició, els valors de id han de ser únics, aquest selector pot afectar només a un element en el document. En la seva declaració, l’ID especificat ha d’estar precedit pel signe numeral (“#”).
HTML:
CSS:
RESULTAT:
Selectors de classe
Una classe és un concepte introduït per CSS amb el propòsit d’agrupar declaracions i aplicar-les a un conjunt personalitzat d’elements, independentment del seu tipus o naturalesa. Des d’un altre punt de vista, una classe és una o més declaracions CSS, agrupades sota un nom que els elements poden utilitzar per accedir a les seves definicions i ser afectats per elles.
Dit això, un selector de classe aplica un conjunt de delcaracions a tots els elements que tenen el nom de classe especificat en el seu atribut class. En la seva construcció, un punt (“.”) ha de precedir al nom de la classe.
Exemple: un conjunt de declaracions per la classe anomenada “important”.
Selectors avançats
CSS permet realitzar combinacions amb els quatre selectors bàsics descrits a dalt, fent referència a les relacions entre pares, fills, germans, descendents i més. Amb algunes d’aquestes eines podries, per exemple, aplicar declaracions a tots els paràgrafs que són fills directes del cos (body) (body > p). A més, proveeix altres selectors basats en la composició dels atributs o els estats que un element presenta, permetent als autors aplicar declaracions a, per exemple, tots els elements input que són de tipus “ràdio” (atribut type) (input[type=”radio”]).
Herència
L’herència és un concepte pel qual els elements descendents hereten les propietats declarades per als seus ancestres. Això no és altra cosa més que el comportament desitjat, i evita haver de redefinir les mateixes propietats en els fills d’un element.
Exemple: definint l’estil de l’element body, els elements que estan dins el body hereten les seves propietats d’estil.
Resultat:
Col·lisions d’estils
En els full d’estils més complexes, és habitual que varies regles CSS s’apliquin a un mateix element HTML. El problema d’aquestes regles múltiples és que poden provocar col·lisions.
De quin color es mostrarà el paràgraf?
Els estils de diferents orígens i selectors són aplicats en un ordre específic i unívoc. Aquest ordre d’especificitat ajuda a resoldre conflictes i fa al sistema més predictible, el que permet als autors plantejar el seu esquema d’estils amb certesa.
Com més específic sigui un selector, més importància té la seva regla associada. En el cas d’arribar a igual especificitat, es considera la última regla indicada.
La següent llista mostra l’ordre d’especificitat que s’aplica en CSS. Cada forma d’aplicar estils en aquesta llista preval quan competeixi amb aquells sota de si.
- L’atribut style.
- El slector d’ID.
- El selector de classe.
- El selector de tipus.
- El selector universal.
Per exemple, si utilitzes l’atribut style i, dins d’un element style, un selector de classe per definir la mateixa propietat d’un element, la definició en l’atribut style prevaldrà.
Un altre exemple:
RESULTAT: