Estils aplicables al text¶

Les següents regles es trobaran en un fitxer CSS, i es poden aplicar als elements textuals del nostre document HTML per a canviar el seu aspecte. Recorda que podem utilitzar aquestes regles amb diferents tipus de selectors (selectors HTML, selectors id i selectors class. Podem crear regles que afecten també a tot el document, utilitzant el selector HTML body. Les següents regles, per exemple, fan que tots els elements textuals del cos del document siguen de color blau, excepte els encapçalaments h2, que seran grocs.

body {
color: blue;
}
h2 {
color: yellow;
}

color¶

Podrem indicar el color de la font, de qualsevol de les maneres que a hem aprés (RGB, hexadecimal o amb el nom del color).

p {
color: #FE4747;
}

font-size¶

Podrem indicar la mida de la font. Aquesta grandària és, per defecte 16px, 12pt o 1em.

h1 {
font-size: 20pt;
}

line-height¶

Podrem indicar la distància d’interlineat.

p {
line-height: 10px;
}

text-align¶

Alineació del text. Pot prendre els valors left, right, center o justify.

h2 {
text-align: center;
}

text-indent¶

Desplaçament (positiu o negatiu) de la primera línia del text.

p {
text-indent: 25px;
}

text-decoration¶

Efectes del text com el subratllat o el taxat. Pot prendre els valors none, underline, overline i line-through.

h1 {
text-decoration: underline;
}

Fonts en documents HTML¶

@font-face¶

En les versions anteriors a HTML5 les tipografies que es podien utilitzar en una pàgina web eren molt limitades, però actualment podem utilitzar pràcticament qualsevol font tipogràfica existent.

En primer lloc caldrà utilitzar @font-face per carregar les fonts que desitgem utilitzar. Cada etiqueta @font-face carregarà una font (caldran tantes com fonts anem a utilitzar) i tenen la forma següent:

@font-face {
    font-family: nom_de_la_font;
    src: url("nom del fitxer") format("Tipus");
}

On

nom_de_la_font és el nom que utilitzarem per a aquesta font. Podem utilitzar qualsevol nom, encara que no coincideix-ca amb el nom del fitxer.
nom_del_fitxer és el nom del fitxer que conté la font. Pot ser una adreça HTTP o una ruta a un fitxer local.
tipus és el tipus de font, per exemple TrueType, OpenType, SVG o WOFF

Per exemple, si tenim una font anomenada «Nemoy» en un fitxer anomenat «Nemoy.otf» la nostra regla @font-face quedaria així.

@font-face {
    font-family: paragrafs_i_llistes;
    src: url("Nemoy.otf") format("OpenType");
}

Nota

Recorda: Utilitza una regla @font-face per cadascuna de les fonts diferents que vas a utilitzar.

font-family¶

Una vegada hem utilitzat les regles @font-face per carregar les fonts, l’únic que cal fer és copiar la línia font-family on tinga que ser utilitzada.

p {
    font-size: 14pt;
    color: black;
    font-family: paragrafs_i_llistes;
}

li {
    font-size: 14pt;
    color: black;
    font-family: paragrafs_i_llistes;
}

Una manera més simple de utilitzar @font-face és mitjançant el lloc Google web fonts. En aquest lloc és molt simple triar una o varies fonts, i després copiar i enganxar una etiqueta link que s’ens oferirà en la capçalera del nostre document HTML.