En aquesta pràctica veureu les diferents propietats què, si bé no són exclussives de l'element paràgraf, afecten al comportament visual del bloc de text del document.
La propietat text-decoration
determina carcterístiques decoratives del text. Les opcions d'aquesta propietat segons el valor assignat són:
underline
)overline
)line-through
)blink
), ja que alterna dos estats el de visible i el de no visible.Aquest valors poden coexistir en una mateixa declaració, si es posen separats per espais. Finalment la propietat text-decoration
pot tenir el valor none
, que elimina qualsevol decoració de text definida prèviament i que, generalment, és també utilitzat per eliminar el subratllat per defecte dels enllaços.
És important advertir sobre l'ús indiscriminat del valor underline
com a decoració del text. Recordeu que un enllaç és habitualment reconegut amb un subratllat. D'altra banda, també representa una pràctica deficient, pel què fa a accesibilitat i usabilitat, l'ús del valor blink
, ja que un text o una paraula intermitent distorsiona el flux de lectura del document.
Proveu d'incorporar els diferents valors de la propietat de decoració del text a la pràctica. Per últim, definiu només la propietat none
que elimini qualsevol element decoratiu del text i que, per tant, faciliti la seva lectura:
p { text-decoration: none; }
Perquè les paraules del text quedin més separades entre elles del que ho estan per defecte, s'ha d'utilitzar la propietat word-spacing
, o bé la propietat letter-spacing
, si el que es vol separar més són els caràcters. Les unitats que admeten aquestes dues propietats, són les mateixes, de mida i percentatge, que s'han explicat anteriorment (Veure pràctica X del mòdul 2). Aquesta propietat admet també valors negatius. Veieu el següent exemple:
p { text-decoration: none; word-spacing: 10px; letter-spacing: 10px; }
Actualitzeu el document web i comproveu que cada paraula i cada caràcter dels paràgrafs del document tenen una separació de 10 px. Aquest fet dificulta clarment la seva lectura. Cal utilitzar, doncs, aquestes dues propietats amb precaució i tenint sempre en copmte que la seva utilització no vagi en detriment de la legibilitat del text. Recupereu ara el valor original del selector "p", comentant les dos darreres propietats:
p { text-decoration: none; /* word-spacing: 10px; letter-spacing: 10px; */ }
La indentació és una propietat que té el seu origen a la presentació impresa dels documents i no representa una convenció estàndard a la presentació de documents web. La indentació o sangria del text (indent
) tabula la primera línia d'un bloc de text. Admet valors de mesura i percentatge, que també poden ser negatius.
Seguint amb l'exemple anterior, s'ha afegit un valor 2em d'identació al paràgraf:
p { text-decoration: none; /* word-spacing: 10px; letter-spacing: 10px; */ text-indent: 2em; }
La propietat text-align
determina l'alineació d'un bloc de text. Permet quatre valors diferents: left
, text alineat a l'esquerra; center
, text alineat al centre; right
, text alineat a la dreta i, per últim, justify
, que justifica el text pels dos costats, esquerre i dret. Per defecte, l'alineació és a l'esquerra.
Es recomanable no utilitzar l'alineació justificada per a la presentació de documents web per diferenciar-la dels documents d'impressió. D'altra banda l'ús de l'alineació centrada pot provocar inconsistències d'espaiat entre les paraules.
Veieu l'exemple amb el text justificat:
p { text-decoration: none; /* word-spacing: 10px; letter-spacing: 10px; */ text-indent: 2em; text-align: justify; }
Podeu veure el resultat de tot el que s'ha fet a aquesta pràctica a l'arxiu m3p5_1.html.
Vista de l'arxiu m3p5_1.html