El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Decoració i Transformació de Text

Següent ►
►

En aquest tema, explorarem com podem utilitzar CSS per decorar i transformar el text dins d'un document HTML. Aquestes tècniques són útils per millorar la presentació visual del text i fer que el contingut sigui més atractiu i llegible.

Propietats de Decoració de Text

text-decoration

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

Sintaxi:

text-decoration: none | underline | overline | line-through | initial | inherit;

Exemples:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Decoració de Text</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">Aquest text està subratllat.</p>
    <p class="overline">Aquest text té una línia per sobre.</p>
    <p class="line-through">Aquest text té una línia a través.</p>
</body>
</html>

text-decoration-color

La propietat text-decoration-color permet canviar el color de la decoració del text.

Sintaxi:

text-decoration-color: color;

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Color de Decoració de Text</title>
    <style>
        .underline-red {
            text-decoration: underline;
            text-decoration-color: red;
        }
    </style>
</head>
<body>
    <p class="underline-red">Aquest text està subratllat en vermell.</p>
</body>
</html>

text-decoration-style

La propietat text-decoration-style defineix l'estil de la decoració del text, com línia contínua, discontínua, puntejada, etc.

Sintaxi:

text-decoration-style: solid | double | dotted | dashed | wavy;

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Estil de Decoració de Text</title>
    <style>
        .underline-dotted {
            text-decoration: underline;
            text-decoration-style: dotted;
        }
    </style>
</head>
<body>
    <p class="underline-dotted">Aquest text està subratllat amb una línia puntejada.</p>
</body>
</html>

Propietats de Transformació de Text

text-transform

La propietat text-transform s'utilitza per controlar la capitalització del text.

Sintaxi:

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Exemples:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Transformació de Text</title>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="capitalize">aquest text serà capitalitzat.</p>
    <p class="uppercase">aquest text serà en majúscules.</p>
    <p class="lowercase">AQUEST TEXT SERÀ EN MINÚSCULES.</p>
</body>
</html>

Exercicis Pràctics

Exercici 1: Aplicar Decoració de Text

Crea un document HTML amb tres paràgrafs. Aplica les següents decoracions de text:

  1. Subratllat amb color blau.
  2. Línia per sobre amb estil discontínua.
  3. Línia a través amb color verd.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Decoració de Text</title>
    <style>
        .underline-blue {
            text-decoration: underline;
            text-decoration-color: blue;
        }
        .overline-dashed {
            text-decoration: overline;
            text-decoration-style: dashed;
        }
        .line-through-green {
            text-decoration: line-through;
            text-decoration-color: green;
        }
    </style>
</head>
<body>
    <p class="underline-blue">Aquest text està subratllat en blau.</p>
    <p class="overline-dashed">Aquest text té una línia per sobre discontínua.</p>
    <p class="line-through-green">Aquest text té una línia a través en verd.</p>
</body>
</html>

Exercici 2: Aplicar Transformació de Text

Crea un document HTML amb tres paràgrafs. Aplica les següents transformacions de text:

  1. Capitalitzar el text.
  2. Convertir el text a majúscules.
  3. Convertir el text a minúscules.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Transformació de Text</title>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="capitalize">aquest text serà capitalitzat.</p>
    <p class="uppercase">aquest text serà en majúscules.</p>
    <p class="lowercase">AQUEST TEXT SERÀ EN MINÚSCULES.</p>
</body>
</html>

Resum

En aquesta secció, hem après com utilitzar les propietats de CSS per decorar i transformar el text. Hem vist com aplicar subratllats, línies per sobre i línies a través del text, així com canviar el color i l'estil d'aquestes decoracions. També hem après com capitalitzar el text, convertir-lo a majúscules o minúscules. Aquestes tècniques són essencials per millorar la presentació visual del text en les nostres pàgines web.

En el següent tema, explorarem el model de caixa i com podem utilitzar-lo per dissenyar i organitzar els elements de la nostra pàgina web.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats