El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem les diferents propietats de text que CSS ofereix per estilitzar el contingut textual d'una pàgina web. Aquestes propietats ens permeten controlar l'aparença del text, com ara el color, l'alineació, l'espaiat entre lletres i paraules, i molt més.

Color del Text

La propietat color s'utilitza per canviar el color del text. Es pot definir utilitzant noms de colors, valors hexadecimals, RGB, RGBA, HSL o HSLA.

p {
    color: blue; /* Nom del color */
}

h1 {
    color: #ff6347; /* Valor hexadecimal */
}

h2 {
    color: rgb(255, 99, 71); /* Valor RGB */
}

h3 {
    color: rgba(255, 99, 71, 0.5); /* Valor RGBA amb opacitat */
}

h4 {
    color: hsl(9, 100%, 64%); /* Valor HSL */
}

h5 {
    color: hsla(9, 100%, 64%, 0.5); /* Valor HSLA amb opacitat */
}

Alineació del Text

La propietat text-align s'utilitza per alinear el text dins del seu contenidor. Els valors possibles són left, right, center i justify.

p.left {
    text-align: left; /* Alineació a l'esquerra */
}

p.right {
    text-align: right; /* Alineació a la dreta */
}

p.center {
    text-align: center; /* Alineació al centre */
}

p.justify {
    text-align: justify; /* Justificació del text */
}

Decoració del Text

La propietat text-decoration s'utilitza per afegir decoracions al text, com ara subratllats, línies per sobre o línies a través del text.

p.underline {
    text-decoration: underline; /* Subratllat */
}

p.overline {
    text-decoration: overline; /* Línia per sobre */
}

p.line-through {
    text-decoration: line-through; /* Línia a través */
}

p.none {
    text-decoration: none; /* Sense decoració */
}

Transformació del Text

La propietat text-transform s'utilitza per controlar la capitalització del text. Els valors possibles són uppercase, lowercase, capitalize i none.

p.uppercase {
    text-transform: uppercase; /* Tot en majúscules */
}

p.lowercase {
    text-transform: lowercase; /* Tot en minúscules */
}

p.capitalize {
    text-transform: capitalize; /* Primera lletra de cada paraula en majúscula */
}

p.none {
    text-transform: none; /* Sense transformació */
}

Espaiat entre Lletres i Paraules

Les propietats letter-spacing i word-spacing s'utilitzen per ajustar l'espaiat entre lletres i paraules respectivament.

p.letter-spacing {
    letter-spacing: 2px; /* Espaiat entre lletres */
}

p.word-spacing {
    word-spacing: 10px; /* Espaiat entre paraules */
}

Interlineat

La propietat line-height s'utilitza per ajustar l'alçada de la línia del text, és a dir, l'espai entre línies de text.

p.normal {
    line-height: normal; /* Valor per defecte */
}

p.double {
    line-height: 2; /* Doble espaiat */
}

p.custom {
    line-height: 1.5; /* Espaiat personalitzat */
}

Exercicis Pràctics

Exercici 1: Canviar el Color del Text

Crea un paràgraf amb el text "Hola, món!".
Canvia el color del text a vermell utilitzant un valor hexadecimal.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 1</title>
    <style>
        p {
            color: #ff0000; /* Color vermell */
        }
    </style>
</head>
<body>
    <p>Hola, món!</p>
</body>
</html>

Exercici 2: Alinear el Text

Crea tres paràgrafs amb el text "Alineació a l'esquerra", "Alineació al centre" i "Alineació a la dreta".
Alinea cada paràgraf segons el seu text.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 2</title>
    <style>
        p.left {
            text-align: left;
        }
        p.center {
            text-align: center;
        }
        p.right {
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="left">Alineació a l'esquerra</p>
    <p class="center">Alineació al centre</p>
    <p class="right">Alineació a la dreta</p>
</body>
</html>

Exercici 3: Decoració del Text

Crea tres paràgrafs amb el text "Subratllat", "Línia per sobre" i "Línia a través".
Aplica la decoració corresponent a cada paràgraf.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 3</title>
    <style>
        p.underline {
            text-decoration: underline;
        }
        p.overline {
            text-decoration: overline;
        }
        p.line-through {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">Subratllat</p>
    <p class="overline">Línia per sobre</p>
    <p class="line-through">Línia a través</p>
</body>
</html>

Conclusió

En aquesta secció, hem après a utilitzar diverses propietats de text en CSS per estilitzar el contingut textual de les nostres pàgines web. Hem vist com canviar el color del text, alinear-lo, afegir decoracions, transformar la capitalització, ajustar l'espaiat entre lletres i paraules, i modificar l'interlineat. Aquests coneixements ens permetran crear dissenys més atractius i llegibles.

En el proper tema, explorarem les propietats de fonts en CSS, on aprendrem a canviar el tipus de lletra, la mida, l'estil i molt més.

Propietats de Text

Contingut

Color del Text

Alineació del Text

Decoració del Text

Transformació del Text

Espaiat entre Lletres i Paraules

Interlineat

Exercicis Pràctics

Exercici 1: Canviar el Color del Text

Exercici 2: Alinear el Text

Exercici 3: Decoració del Text

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu