Secció 3: Propietats

1. Conceptes generals

1.1. Sintaxi

Fem un breu repàs de la sintaxi CSS relacionada amb les propietats, que ja vam veure a la Secció 1 apartat 2: 'Elements d'un style sheet'

Un style sheet està format per un seguit de sentències. Cada sentència consta d'un selector i un bloc de declaracions delimitat per claus, { }. Al seu torn, el bloc de declaracions està format per una o més declaracions separades per punt i coma. Centrem-nos ara en la sintaxi d'una declaració.

Com ja deus saber, una declaració està formada per una propietat i un valor separats per dos punts.

propietat: valor;
propietat: valor1, valor2, ... , valor n;

Com veiem al segon exemple, algunes propietats, com ara font-family, poden rebre un seguit de valors separats per comes. En aquests casos el navegador del client intenta aplicar el primer valor a la propietat, si no és possible ho prova amb el segon, i així successivament.

Els noms de les propietats i els possibles valors que pot rebre cadascuna d'elles estan definits a l'especificació CSS, i és el que veurem en els propers apartats d'aquesta secció.

Quan el nom d'una propietat té més d'una paraula, aquestes se separen mitjançant guions. Com veurem, és un fet molt corrent, com ara a font-size, background-color o border-top-width.

La sintaxi dels valors està especificada per a cada propietat. Nosaltres veurem els casos generals als apartats 1.2 a 1.5 (colors, longituds, adreces i percentatges), i els casos particulars s'explicaran individualment a la propietat afectada.

1.2. Colors

Moltes propietats reben valors de color. L'especificiació CSS ofereix dues possibilitats per designar colors:

• Mitjançant paraules clau. Els 16 colors definits a HTML 4.0 són aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.
• En format RGB. El format RGB (Red.Green.Blue) consisteix a especificar tres números corresponents a la proporció entre vermell, verd i blau. El rang d'aquests números és de 0 a 255, i es pot especificar de diverses maneres. Per exemple el color vermell, que correspon als valors vermell=255, verd=0 i blau=0, pot expressar-se com:
  • rgb(255,0,0)
    Les quantitats de cada color s'indiquen amb un número de 0 a 255.
  • rgb(100%,0,0)
    Les quantitats de cada color s'indiquen amb percentatges (100% equival a 255).
  • #ff0000
    Els valors s'indiquen en format #rrggbb. Cada grup de dues xifres indica la quantitat d'un color en notació hexadecimal. Explicar la notació hexadecimal està fora de l'abast d'aquest curs.
  • #f00
    El format hexadecimal de tres xifres #rgb es converteix al de sis duplicant cada xifra.

En veurem exemples a l'apartat 2 'Propietats relacionades amb el color i el fons'.

1.3. Longituds

Per indicar longituds en CSS utilitzarem un número seguit d'una unitat, sense deixar cap espai entre mig. Les longituds poden ser positives o negatives, tot i que no totes les propietats acceptaran valors negatius. Per exemple, un marge pot ser negatiu, però en cavi no té sentit una mida de font negativa. Per la longitud '0', la unitat és opcional.

Hi ha dos tipus d'unitats, relatives i absolutes. Es recomana l'ús de mesures relatives sempre que sigui possible, ja que permet que la representació dels documents HTML s'adapti a les condicions particulars de cada usuari (diferents monitors, resolucions o preferències).

Unitats relatives

Especifiquen una longitud relativa a la font. Hi ha dues unitats relatives:

• em - fa referència a la mida de la font, que com veurem més endavant és establerta per la propietat font-size. Un cas excepcional és l'ús de em precisament per la propietat font-size. En aquest cas la longitud farà referència al valor de font-size del seu element pare.
• ex - fa referència a l'alçada-x (x-height) de la font. Aquesta unitat correspon normalment a l'alçada de la lletra 'x', i és per tant més petita que em.

Per exemple, si el marge d'un paràgraf té el valor '3em' significarà que el marge serà el triple que la mida de la font d'aquest paràgraf. En canvi, si el valor de la propietat font-size d'un element A és '3em' significarà que la mida de la font del link serà tres vegades més gran que la del seu element pare. Si no ho veus del tot clar no t'amoïnis, tot s'anirà aclarint a mesura que veiem les diferents propietats amb detall.

Unitats absolutes

Com el seu nom indica, són unitats que determinen un valor concret que no depèn d'altres factors. Les unitats absolutes són:

• px - píxels
• in - inches (polzades). 1 polzada equival a 2.54 centímetres.
• cm - centímetres
• mm - milímetres
• pt - punts. Els punts utilitzats a CSS equivalen a 1/72 part de polzada.
• pc - pica. 1 pica és igual a 12 punts.

Es desaconsella l'ús de totes les unitats absolutes excepte px, i fins i tot és millor evitar aquesta unitat sempre que es pugui utilitzar una unitat relativa. Les longituds absolutes s'haurien d'utilitzar només quan es coneixen les dimensions exactes del medi (per exemple, quan un document estigui destinat a imprimir-se).

Nota: he comès una imprecisió voluntàriament, per tal de simplificar l'explicació de les unitats. Si mirem l'especificació CSS2 del W3C, veurem que la unitat px està classificada com a relativa, ja que és relativa al dispositiu de visualització, típicament el monitor. De fet un píxel no té una mida concreta (depen no només del monitor, sinó també de la resolució de pantalla), a diferència de les unitats absolutes. Ara bé, a la pràctica només utilitzarem unitats relatives, i entre elles trobem dos comportaments diferents: em i ex són valors que depenen de l'element al qual s'apliquen, mentre que px és una longitud fixa per a cada usuari (20px no són iguals a tots els monitors, però sí ho són al monitor d'un usuari concret, independentment de l'element al qual afectin). És per això que he decidit separar px de les altres propietats relatives, com fan altres tutorials similars. Probablement la majoria de lectors passin per alt aquesta nota, però no he pogut evitar incloure-la per si algú desitjava una explicació més rigorosa.

1.4. Adreces (URL)

Per especificar adreces en CSS utilitzarem el format següent:

url(adreça)

Les adreces poden ser absolutes o relatives. Si són relatives es calculen respecte a la ubicació de l'arxiu .css, o respecte a la ubicació de l'arxiu .html si l'style sheet està incrustat (embedded). A més podem optar per posar-les o no entre cometes (simples o dobles). Els següents són exemples d'adreces vàlides:

url("http://www.dense13.com/")
url(http://programmingtutorials.com/)
url('imatges/fons.jpg')
url(../botons/endavant.gif)

1.5. Percentatges

Els percentatges en CSS s'indiquen mitjançant un número immediatament seguit del signe %. Com en el cas de les longituds, segons la propietat a la que afectin poden ser negatius.

Els percentatges són sempre relatius a un altre valor, generalment una longitud. Cada propietat que admet percentatges definex quin és el valor al qual faran referència. Aquest valor pot ser el d'una altra propietat del mateix element, o bé el d'una propietat de l'element pare. Veurem exemples de seguida, com ara a les propietats font-size, text-indent o margin.

Hem vist a la Secció 1 apartat 6 'Element pare, element fill i herència' que moltes de les propietats són heretades pels elements fill. En el cas dels percentatges quan la propietat s'hereta el que s'hereta no és el percentatge en sí, sinó el valor computat, és a dir, el valor de longitud resultant d'aplicar el percentatge. Suposem que tenim tres elements A, B i C, i que B és fill de A i C és fill de B. Si A té una mida de font de 20px i B té una mida de font del 50% (és a dir, 10px), quina serà la mida de font de C? Si C heretés el valor del percentatge, tindria un 50% sobre la mida de font de B, i resultaria un total de 5px. Però el que s'hereta és el valor computat de B, és a dir, els 10px.

Durant tota aquesta secció i la propera, sovint es farà referència a aquest apartat, com ara cada vegada que una propietat admeti valors de longitud. Al llarg del text les paraules color, longitud, adreça i percentatge escrites com les veus aquí indiquen un enllaç cap a l'explicació corresponent. Si després d'utilitzar algun d'aquests enllaços vols tornar a la pàgina on eres, clica el botó 'Retrocedir' del teu navegador. En alguns navegadors les tecles 'esborrar' (backspace) o bé 'ALT+esquerra' tenen també aquesta funció.