En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.
| Requisits previs: | Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS). |
|---|---|
| Objectiu: | Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web. |
Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.
Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.
Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:
Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).
Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).
La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).
La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:
p {
color: red;
}
Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
{{ EmbedLiveSample('Color', '100%', 220) }}
Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:
p {
font-family: arial;
}
Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.
Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.
La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).
La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):
| Nom | Tipus de lletra genèric | Observacions |
|---|---|---|
| Arial | sans-serif | Sovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible. |
| Courier New | monospace | Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent. |
| Georgia | serif | |
| Times New Roman | serif | Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent. |
| Trebuchet MS | sans-serif | Has de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils. |
| Verdana | sans-serif |
Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.
Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.
CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.
Els cinc noms es defineixen de la manera següent:
| Nom | Definició | Exemple |
|---|---|---|
serif |
Tipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies). | My big red elephant |
sans-serif |
Tipus de lletra que no tenen serifes. | My big red elephant |
monospace |
Tipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic. | My big red elephant |
cursive |
Tipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats. | My big red elephant |
fantasy |
Tipus de lletra amb intencions decoratives. | My big red elephant |
Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.
És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!
Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.
font-familyAfegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
Això ens dona el resultat següent:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}
En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:
px (píxels): L’alçada expressada en nombre de píxels que vols que tingui el text. Aquesta és una unitat absoluta; dona sempre el mateix valor final calculat per al tipus de lletra de la pàgina en qualsevol situació.em: 1 em és igual a la mida de la lletra que s’ha establert per al tipus de lletra de l'element pare de l'element al qual apliquem estil (més concretament, l'amplada d'una lletra M majúscula continguda dins de l'element pare). Això pot arribar a ser complicat de calcular si hi ha molts elements imbricats amb mides de tipus de lletra establertes diferents, però és factible, com veuràs a continuació. Així, doncs, per què t’ha de preocupar? Resulta força natural una vegada que t’hi acostumes i pots fer servir unitats em per a dimensionar-ho tot, no només text. Pots tenir un lloc web complet definit amb mides en unitats em, i així se simplifica molt el manteniment.rem: Aquestes unitats funcionen igual que les unitats em, excepte que 1 rem és igual a la mida de lletra del tipus de lletra que s’ha establert per a l'element arrel del document (és a dir, {{htmlelement("html")}}), no l'element pare. Això facilita força els càlculs per a esbrinar la mida de la lletra, però malauradament les unitats rem no són compatibles amb Internet Explorer 8 o anteriors. Si necessites compatibilitat amb navegadors antics per al teu projecte, pots utilitzar unitats em o px, o bé utilitzar un {{glossary("polyfill")}} com REM-unit-polyfill.L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.
Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?
<!-- document base font-size is 16px --> <article> <!-- If my font-size is 1.5em --> <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> </article>
Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.
Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.
El nostre nou resultat és així:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}
CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:
normal: Estableix per al text el tipus de lletra normal (activa les cursives).italic: Estableix per al text l’ús de la versió cursiva del tipus de lletra, si està disponible; si no està disponible, simula la cursiva amb oblique.oblique: Estableix per al text l’ús d’una versió simulada d'un tipus de lletra en cursiva, creada inclinant la versió normal.normal i bold:
normal, bold: Gruix dels tipus de lletra normal i negretalighter, bolder: Estableix la intensitat de negreta en un element un nivell més lleu o més intens que la intensitat de negreta de l'element pare.100–900: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal.none: Evita qualsevol transformació.uppercase: Transforma TOT EL TEXT A MAJÚSCULES.lowercase: Transforma tot el text a minúscules.capitalize: Transforma totes les paraules perquè tinguin La Primera Lletra en Majúscula.full-width: Transforma tots els glifs de manera que s'escriuen dins d'un quadrat d'amplada fixa, similar a un tipus de lletra monoespaiada, i permet l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com el xinès, el japonès, el coreà).none: Anul·la qualsevol decoració de text ja present.underline: Subratlla el text.overline: Posa una línia sobre el text.line-through: Posa una Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy
Observem com afegir un parell d'aquestes propietats al nostre exemple:
El resultat és aquest:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
text-transform: capitalize;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}
Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:
text-shadow: 4px 4px 5px red;
Les quatre propietats són:
px. Aquest valor s'ha d'incloure.black.Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.
Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 26px;
text-transform: capitalize;
text-shadow: -1px -1px 1px #aaa,
0px 2px 1px rgba(0,0,0,0.5),
2px 2px 2px rgba(0,0,0,0.7),
0px 0px 3px rgba(0,0,0,0.4);
}
h1 + p {
font-weight: bold;
}
p {
font-size: 14px;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}
Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.
Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.
La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:
left: Justifica el text a l'esquerra.right: Justifica el text a la dreta.center: Centra el text.justify: Varia els espais entre les paraules perquè totes les línies de text ocupin la mateixa amplada. Cal utilitzar-lo amb cura; pot presentar un aspecte terrible, sobretot quan s'aplica a un paràgraf amb paraules molt llargues. Si fas servir aquesta propietat, has de pensar d’utilitzar-hi també conjuntament alguna altra cosa, com ara {{cssxref("hyphens")}}, per partir les paraules més llargues al final de línia.Si s'aplica text-align: center; a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
text-transform: capitalize;
text-shadow: -1px -1px 1px #aaa,
0px 2px 1px rgba(0,0,0,0.5),
2px 2px 2px rgba(0,0,0,0.7),
0px 0px 3px rgba(0,0,0,0.4);
text-align: center;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}
{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}
La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:
line-height: 1.6;
Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
text-transform: capitalize;
text-shadow: -1px -1px 1px #aaa,
0px 2px 1px rgba(0,0,0,0.5),
2px 2px 2px rgba(0,0,0,0.7),
0px 0px 3px rgba(0,0,0,0.4);
text-align: center;
}
h1 + p {
font-weight: bold;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
}
{{ EmbedLiveSample('Interlineat', '100%', 250) }}
Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.
Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:
p::first-line {
letter-spacing: 4px;
word-spacing: 4px;
}
Afegim-ne una mica al nostre exemple, així:
<h1>Tommy the cat</h1> <p>I remember as if it were a meal ago...</p> <p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
html {
font-size: 10px;
}
h1 {
font-size: 2.6rem;
text-transform: capitalize;
text-shadow: -1px -1px 1px #aaa,
0px 2px 1px rgba(0,0,0,0.5),
2px 2px 2px rgba(0,0,0,0.7),
0px 0px 3px rgba(0,0,0,0.4);
text-align: center;
}
h1 + p {
font-weight: bold;
}
p::first-line {
letter-spacing: 2px;
word-spacing: 4px;
}
p {
font-size: 1.4rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
}
{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}
Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:
Estils per als tipus de lletra:
underline de la propietat text-decoration-line.Aplicació d’estil al text per al disseny de pàgina
També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.
Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.
S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.
Un exemple complet tindria un aspecte com aquest:
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.
Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.
<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
<h2>HTML Input</h2>
<textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>Some sample text for your delight</p></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
<div class="controls">
<input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
</div>
</div>
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
output.innerHTML = htmlInput.value;
styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
{{ EmbedLiveSample('Codi_executable', 700, 800) }}
Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}