L'arxiu m3p1.html mostra una representació d'un document de text per defecte del navegador. No conté cap estil, per la qual cosa les diferents seccions i subseccions, els paràgrafs, les cites i els diferents elements en línia no tenen cap comportament visual i adpoten el full d'estil mínim que proporciona el navegador. A la pràctica anterior s'ha vist la manera correcta d'estructurar el text d'un document web, de manera que sigui vàlid segons les recomanacions del W3C i, per tant, permeti una major accessiblitat des de qualsevol navegador o dispossitiu.
A partir d'ara es veuran les diferents regles de CSS, que proporcioaran al document web un estil visual bàsic, i per tant, alteraran la presentació que el navegador mostra per defecte.
Amb les regles del CSS es pot modificar, entre moltes altres coses, la font del text, la seva mida, el seu color, el fons,..., sense que es modifiqui la seva estructura.
Heu de tenir molt present un dels principis de la W3C i d'aquest curs: separar la forma, el disseny, de l'estructura del document. D'aquesta manera, el document, independentment del seu aspecte visual, serà sempre accessible.
En aquesta pràctica es veuran un conjunt de regles bàsiques que afecten al comportament visual del text. En les pràctiques següents es veuran exemples dels diferents elements en bloc i en línia, amb la intenció de millorar el seu aspecte visual, utilitzant l'arxiu m3p1.html com a punt de partida.
Una de les primeres regles a definir en l'estil del document és la que determina la tipografia del text o la família de la font. La propietat CSS que permet especificar el tipus de font del document és font-family
. La manipulació de la tipografia des dels fulls d'estil és una gran eina pel disseny visual del document, especialment pel que fa referència a un augment de la llegibilitat, però presenta una sèrie de limitacions:
Existeixen cinc grans famílies de fonts, conegudes també com a fonts genèriques:
m
és idèntic al del caràcter i
. És una família de fonts utilitzada especialment per representar les línies de codi o llenguatges de programació.Obrint al navegador l'arxiu m3p3_1.html podreu veure les diferències visuals de cadascuna de les famílies de fonts. S'ha utilitzat una classe (class
) com a regla d'estil que permeti afectar a més d'un element del document:
.sans-serif { font-family: sans-serif; }
Tant l'etiqueta p
de paràgraf com la h2
de capçalera de nivell 2, comparteixen una mateixa regla:
<h2 class="sans-serif">Lorem Ipsum</h2> <p class="sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut magna. Vestibulum massa nunc, condimentum nec, dapibus in, dapib ... mattis lorem.</p>
Vista de l'arxiu m3p3_1.html
De moment definireu un tipus o família de font pel cos del document, body
, que afecti a la totalitat del text, i, més endavant anireu especificant d'altres tipus de font per a elements concrets.
El valor de la propietat font-family
pot incloure un únic tipus o família de font, o bé més d'una de diferents, sempre separades entre elles per una coma. El fet de definir més d'una font o família de fonts per la propietat font-family
, planteja al navegador una jerarquia de valors, de la que prendrà el primer com a font a utilitzar en la visualització del document, però tindrà una o vàries alternatives en el cas de no trobar la font assignada com a principal. Tradicionalment, s'utilitzen els primers valors per a fonts específiques i, la resta, per a fonts genèriques que s'aproximin visualment a la primera.
Veieu el següent exemple que s'utilitzarà a l'arxiu m3p3_2.html:
body { font-family: "Trebuchet MS", arial, helvetica, sans-serif; }
Per ordre de preferència, s'ha situat en primer lloc una font específica, Trebuchet MS
, seguida d'altres fonts que, en el cas d'arial
o helvetica
, representen un grup de fonts. Finalment, s'ha especificat una família de fonts, sans-serif
, per l'hipotètic cas que el navegador no disposi de les fonts precedents i mostri la web amb algunes de les fonts d'aquesta família disponibles al seu ordinador.
Vista de l'arxiu m3p3_2.html
Tant el color de la font com el color de fons, no són propietats específiques del text.
De moment determinareu el color blanc(#fff
) com a color de fons i un gris fosc com a color de la font, per a tot el text del document. Més endavant s'aniran especificant colors a determinats element.
body { font-family: "Trebuchet MS", arial, helvetica, sans-serif; background-color:#fff; color: #333; }
Per defecte, els navegadors representen el text a 16px
, una mida força gran, i, generalment, visualment poc atractiva. Aquest valor per defecte es pot modificar mitjançant la propietat font-size
del cos (body
) de la pàgina, que es prendrà també com a base per a la representació de la resta d'elements (h1
,h2
,h3
, p
,...). Veieu el següent exemple:
body { font-family: "Trebuchet MS", arial, helvetica, sans-serif; background-color: #f8f8f8; color: #333; font-size: 0.9em; }
Obriu l'arxiu m3p3_3.html per a comprovar els canvis.
Vista de l'arxiu m3p3_3.html
La propietat line-height
defineix la distància vertical entre dos línies prenent coma a referent la part inferior de un tipus de caràcter no descendent, és a dir, es prendrà com a referència una o
enlloc d'una q
. Les unitats de mesura que es poden utilitzar són idèntiques a les que determinen la mida de la font o, en el cas d'assignar un valor numèric, per exemple, 3
, sense especificar la unitat de mesura, la distància entre línia serà la resultant de multiplicar el valor 3
pel valor de la mida de la font (font-size
).
S'ha incorporat el valor 2
a la distància vertical entre línies. D'aquesta manera s'aconsegueix que el text sigui més llegible:
body { font-family: "Trebuchet MS", arial, helvetica, sans-serif; background-color: #f8f8f8; color: #333; font-size: 0.9em; line-height: 2; }
Per acabar, determinareu un límit en l'amplada del document de 700 px
i un marge respecte a l'esquerra dels límits de la pantalla de 30 px
(recordeu que esteu modificant el cos del document):
body { width: 700px; margin-left: 30px; font-family: "Trebuchet MS", arial, helvetica, sans-serif; background-color: #f8f8f8; color: #333; font-size: 0.9em; line-height: 2; }
Obriu l'arxiu m3p3_4.html per veure el resultat.
Vista de l'arxiu m3p3_4.html
Fins aquí s'han vist vàries propietats generals de l'estil visual del text. En les pràctiques següents es veurà la manera de precissar més l'aspecte visual dels diferents elements textuals de bloc i de línia, amb la finalitat de millorar encara més la presentació.