Estils dels paràgrafs
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.
Decoració del text
La propietat text-decoration determina carcterístiques decoratives del text. Les opcions d'aquesta propietat segons el valor assignat són:
- una línia que subratlla el text (
underline) - una línia que se situa per sobre del text (
overline) - una línia que travessa el text , com si estigués barrat (
line-through) - el text es veu intermitent (
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;
}
Espaiats
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; */
}
Indentació
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;
}
Alineació (horitzontal)
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
