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

HOME

En aquest tema, aprendrem com controlar l'alineació i l'espaiat del text utilitzant propietats de CSS. Aquestes tècniques són essencials per crear dissenys de pàgines web ben organitzats i llegibles.

Propietats d'Alineació de Text

`text-align`

La propietat text-align s'utilitza per especificar l'alineació horitzontal del text dins d'un element. Els valors més comuns són:

left: Alinea el text a l'esquerra (valor per defecte).
right: Alinea el text a la dreta.
center: Centra el text.
justify: Justifica el text, fent que les línies tinguin la mateixa amplada.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Alineació de Text</title>
    <style>
        .left { text-align: left; }
        .right { text-align: right; }
        .center { text-align: center; }
        .justify { text-align: justify; }
    </style>
</head>
<body>
    <p class="left">Aquest text està alineat a l'esquerra.</p>
    <p class="right">Aquest text està alineat a la dreta.</p>
    <p class="center">Aquest text està centrat.</p>
    <p class="justify">Aquest text està justificat. Això significa que les línies tenen la mateixa amplada, ajustant l'espai entre les paraules.</p>
</body>
</html>

Propietats d'Espaiat de Text

`line-height`

La propietat line-height s'utilitza per establir l'alçada de la línia del text. Aquesta propietat pot acceptar valors en unitats absolutes (px, em, etc.) o relatius (percentatge, número).

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Alçada de Línia</title>
    <style>
        .normal { line-height: normal; }
        .double { line-height: 2; }
        .one-half { line-height: 1.5; }
    </style>
</head>
<body>
    <p class="normal">Aquest text té l'alçada de línia normal.</p>
    <p class="double">Aquest text té l'alçada de línia doble.</p>
    <p class="one-half">Aquest text té l'alçada de línia d'un i mig.</p>
</body>
</html>

`letter-spacing`

La propietat letter-spacing s'utilitza per ajustar l'espai entre les lletres d'un text. Els valors poden ser positius (augmenten l'espai) o negatius (redueixen l'espai).

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Espaiat de Lletres</title>
    <style>
        .normal { letter-spacing: normal; }
        .wide { letter-spacing: 2px; }
        .narrow { letter-spacing: -1px; }
    </style>
</head>
<body>
    <p class="normal">Aquest text té l'espaiat de lletres normal.</p>
    <p class="wide">Aquest text té l'espaiat de lletres ampliat.</p>
    <p class="narrow">Aquest text té l'espaiat de lletres reduït.</p>
</body>
</html>

`word-spacing`

La propietat word-spacing s'utilitza per ajustar l'espai entre les paraules d'un text. Similar a letter-spacing, els valors poden ser positius o negatius.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Espaiat de Paraules</title>
    <style>
        .normal { word-spacing: normal; }
        .wide { word-spacing: 10px; }
        .narrow { word-spacing: -5px; }
    </style>
</head>
<body>
    <p class="normal">Aquest text té l'espaiat de paraules normal.</p>
    <p class="wide">Aquest text té l'espaiat de paraules ampliat.</p>
    <p class="narrow">Aquest text té l'espaiat de paraules reduït.</p>
</body>
</html>

Exercicis Pràctics

Exercici 1: Alineació de Text

Crea un document HTML amb tres paràgrafs. Alinea el primer a l'esquerra, el segon al centre i el tercer a la dreta.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Alineació de Text</title>
    <style>
        .left { text-align: left; }
        .center { text-align: center; }
        .right { text-align: right; }
    </style>
</head>
<body>
    <p class="left">Aquest text està alineat a l'esquerra.</p>
    <p class="center">Aquest text està centrat.</p>
    <p class="right">Aquest text està alineat a la dreta.</p>
</body>
</html>

Exercici 2: Espaiat de Text

Crea un document HTML amb tres paràgrafs. Ajusta l'alçada de línia, l'espaiat de lletres i l'espaiat de paraules per a cada paràgraf.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Espaiat de Text</title>
    <style>
        .line-height { line-height: 1.5; }
        .letter-spacing { letter-spacing: 2px; }
        .word-spacing { word-spacing: 10px; }
    </style>
</head>
<body>
    <p class="line-height">Aquest text té una alçada de línia d'un i mig.</p>
    <p class="letter-spacing">Aquest text té un espaiat de lletres ampliat.</p>
    <p class="word-spacing">Aquest text té un espaiat de paraules ampliat.</p>
</body>
</html>

Conclusió

En aquesta secció, hem après com utilitzar les propietats de CSS per controlar l'alineació i l'espaiat del text. Aquestes tècniques són fonamentals per crear dissenys de pàgines web que siguin estèticament agradables i fàcils de llegir. En el proper mòdul, explorarem més propietats de text i fonts per millorar encara més l'estilització del nostre contingut web.

Alineació i Espaiat de Text

Propietats d'Alineació de Text

`text-align`

Propietats d'Espaiat de Text

`line-height`

`letter-spacing`

`word-spacing`

Exercicis Pràctics

Exercici 1: Alineació de Text

Exercici 2: Espaiat de 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