A la nostra fictícia universitat, les investigadores s’han revelat. No estan d’acord amb l’estètica dels seus treballs. Volen tenir llibertat per modificar l’aparença de la visualització dels escrits al navegador. «De debò el fons ha de ser blanc?», «No podem canviar la tipografia?», «Això no quedaria més bonic a dues columnes?»,… Tot són queixes.
El consorci del 3WC es reuneix i decideix fer una concessió. Les científiques podran estilar els seus treballs, però:
- Caldrà crear un llenguatge separat de l’ ‘HTML
- Aquest llenguatge haurà de ser també limitat i simple.
- S’haurà de poder crear amb qualsevol editor de text, no caldrà tenir un equip ni un programari sofisticat per generar els estils.
- Al navegador, haurem de poder prescindir dels estils si volem. Les pàgines web han de seguir mostrant tota la informació, sense dependre dels estils.
- Si els estils estan mal escrits, el navegador no haurà de fallar.
Dit això, l’equip de programadors i programadores es posen a treballar en un nou llenguatge que, finalment, anomenen CSS: Cascade Style Sheets (Fulles d’estil en cascada). El llenguatge s’anomena així perquè els estils s’aplicaran com aigua que cau d’una cascada:
- Si demanem al navegador que estili un element d’una manera i més endavant li diem que ho faci diferent, el navegador farà cas a l’última ordre.
- Però si la segona ordre no és igual o més específica, aleshores farà cas a la primera.
El que faran amb el CSS és indicar al navegador quin element volen modificar i com el volen modificar. Hauran d’aprendre unes poques normes del CSS:
- Com indicar un element
- Com indicar què volen canviar, coneixent les propietats modificables
- Com indicar quins valors podran donar a les propietats dels diferents elements.
Ben mirat, el CSS no és una cosa tan estranya. A classe hem fet servir el símil de les instruccions per pintar les cases d’un carrer. Imaginem per un moment que som les pintores encarregades de pintar i l’Ajuntament ens envia una llista d’ordres:
- Totes les portes del carrer seran de color blau fosc
- Els edificis antics tindran la façana de color rosa
- Els edificis més nous tindran la façana de color blau clar
- Els edificis antis tindran les portes de color blau clar
- La casa anomenada «Cal General», serà de color groc
Hi ha algunes ordres genèriques (com pintar les portes de color blau fosc) i ordres més específiques (com pintar les portes de les cases antigues de color blau clar). Com a pintores, entendrem que hem de fer cas a les ordres més específiques (no valdrà dir «ah, no! vau dir que les portes eren sempre de color blau fosc»). Si l’endemà canvien d’opinió sobre el color de les portes en general (ara les volen grogues.. quin malson), també entendrem que prevaldrà l’ordre més recent.
També entendrem que podem classificar les cases segons la seva edat, tindrem diferents classes de casa (cases antigues, cases noves). I que a algunes cases s’hi podran referir per un nom únic (una identificació).
Al llenguatge CSS:
- L’equivalent de les portes i finestres serien les etiquetes de l’html (p, h1, h2, img)
- L’equivalent de les classes seria l’atribut «class» d’una etiqueta i es representarien amb el símbol punt (.)
- L’equivalent de les identificacions úniques seria l’atribut «id» d’una etiqueta i es representa amb el símbol coixinet (#)
La sintaxis del CSS es pot resumir així:
element o elements que volem modificar { (claudàtor que obre)
propietat: valor;
propietat: valor;
} (claudàtor que tanca)
Entre el claudàtor que obre i el que tanca, podem assignar valors a diferents propietats. Cada conjunt de valor i propietat el separarem amb punt i coma (;)
La propietat sempre estarà separada del valor per dos punts (:)
El conjunt d’element/s a modificar i propietats modificades entre claudàtors és una regla de CSS
Podem identificar un element per la seva etiqueta:
p{
}Podem indicar una llista d’elements:
h1, h2, h3, h4{
}Les comes indiquen que parlem d’una llista d’elements
Podem indicar un element pel nom del seu atribut «class«
.title{
}En CSS, el punt fa referència a l’atribut class. En l’HTML un element de la classe «title» té l’atribut class amb el valor «title»:
<h2 class="title">...</h2><h2 class="title title-gran">...</h2> Fixeu-vos que un element pot tenir més d’una classe, només cal separar-les amb un espai en blanc en l’html
Podem indicar un element pel nom de l’atribut «id«
#titol-principal{
}A l’html, un element identificat com a títol principal té l’atribut «id» amb el valor «titol-principal»
<h1 id="titol-principal">...</h1> Un element només pot tenir una id; aquesta id no la pot tenir cap més element a la mateixa pàgina. NO és recomenable fer servir la ID al CSS, però no està prohibit.
Selectors contextuals
Si volem modificar tots els enllaços, farem servir l’etiqueta a (a{ } ). Però.. i si volem modificar només els enllaços de les llistes? Aleshores ho escriurem així:
li a{ }El que fem és posar l’etiqueta (a) en un context (li). L’espai en blanc entre etiquetes significa enniuament.
Si volem modificar tots els element amb l’atribut class amb el valor «title» ho farem així:
.title{ }Però si volem modificar només els h2 amb l’atribut class amb el valor title, ho farem així:
h2.title{ }En aquest cas, no hi ha espai entre els dos elements, per tant estem parlant del mateix element: els h2 amb l’atribut class igual a title.
A l’html trobarem això:
<h2 class="title">...</h2>Si combinem totes aquestes normes, podrem fer referència a qualsevol element de la pàgina.
Propietat background-color i color com a valor
Qualsevol element d’una pàgina web pot tenir un color de fons.
La propietat del color de fons és background-color (fixa’t que «color» s’escriu en anglès americà)
El color de fons el podem escriure amb diferents fòrmules
- Podem fer servir el nom del color: white, black, red,…
- Podem fer servir un número hexadecimal: #RRGGBB (#A1A1A1, #333333,…)
- Podem indicar el color en rgb: rgb(R,pG,B) . R, G, B tindran un valor entre 0 i 255.
- Podem indicar el color en rgba: rgba(R,G,B,A). A fa referència a alpha, l’opacitat. Alpha és un valor entre 0 (gens opac) i 1 (màxima opacitat). 0.5 representa un 50% d’opacitat
R fa referència a Red (vermell), G fa referència a green (verd) i B fa referència a blue (vermell). El valor 0 indica cap quantitat de llum. Per tant rgb(0,0,0) o #000000 representen el color negre.
En un número hexadecimal, el valor més alt que podem fer servir és la lletra F . Per cada color podrem fer servir un valor entre 00 – gens- i FF – màxim. El color #FFFFFF representa el blanc.
On trobem el CSS?
El CSS pot estar:
- A l’HTML del body, a l’atribut style de qualsevol etiqueta (exemple: <p style=»background-color:red»>)
- Al head de l’html, dins les etiquetes «style» (<head>..<style></style> …</head>)
- En un document extern i vinculat al head de l’html (<link href=»URL» rel=»stylesheet»).
Sempre que puguem, evitarem els estils en línia
I sempre que pugem posarem els estils en un document extern.
A l’exercici d’avui, però, hem fet servir l’etiqueta style del head per a indicar els estils. El que hem fet és estilar diferents elements de la pàgina, modificant el color de fons:
- Del body
- Dels paràgrafs,c
- D’h1, h2, h3, h4
- D’enllaços
- D’enllaços a la llista
- Dels h2 del footer
Per cert! A través de diferents errors, hem comprovat com n’és d’important que les etiquetes html estiguin correctament tancades…