El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos cómo utilizar las propiedades de CSS para decorar y transformar el texto en nuestras páginas web. Estas propiedades nos permiten agregar efectos visuales y modificar la apariencia del texto de manera significativa.

Propiedades de Decoración de Texto

`text-decoration`

La propiedad text-decoration se utiliza para agregar decoraciones al texto, como subrayado, línea sobre el texto o línea a través del texto.

Sintaxis:

selector {
    text-decoration: value;
}

Valores posibles:

none: Sin decoración (valor por defecto).
underline: Subraya el texto.
overline: Agrega una línea sobre el texto.
line-through: Agrega una línea a través del texto.
blink: Hace que el texto parpadee (no recomendado y no soportado en todos los navegadores).

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Decoración de Texto</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">Este texto está subrayado.</p>
    <p class="overline">Este texto tiene una línea sobre él.</p>
    <p class="line-through">Este texto tiene una línea a través de él.</p>
</body>
</html>

`text-decoration-color`

La propiedad text-decoration-color permite cambiar el color de la decoración del texto.

Sintaxis:

selector {
    text-decoration-color: color;
}

Ejemplo:

.underline {
    text-decoration: underline;
    text-decoration-color: red;
}

`text-decoration-style`

La propiedad text-decoration-style define el estilo de la decoración del texto.

Valores posibles:

solid: Línea sólida (valor por defecto).
double: Línea doble.
dotted: Línea punteada.
dashed: Línea discontinua.
wavy: Línea ondulada.

Ejemplo:

.dashed {
    text-decoration: underline;
    text-decoration-style: dashed;
}

`text-decoration-thickness`

La propiedad text-decoration-thickness permite ajustar el grosor de la decoración del texto.

Ejemplo:

.thick {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

Propiedades de Transformación de Texto

`text-transform`

La propiedad text-transform se utiliza para controlar la capitalización del texto.

Sintaxis:

selector {
    text-transform: value;
}

Valores posibles:

none: No realiza ninguna transformación (valor por defecto).
capitalize: Convierte la primera letra de cada palabra en mayúscula.
uppercase: Convierte todo el texto a mayúsculas.
lowercase: Convierte todo el texto a minúsculas.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transformación de Texto</title>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="capitalize">este texto será capitalizado.</p>
    <p class="uppercase">este texto será convertido a mayúsculas.</p>
    <p class="lowercase">ESTE TEXTO SERÁ CONVERTIDO A MINÚSCULAS.</p>
</body>
</html>

Ejercicio Práctico

Ejercicio 1: Aplicando Decoraciones y Transformaciones

Crea un archivo HTML y aplica diferentes decoraciones y transformaciones de texto utilizando las propiedades aprendidas.

Instrucciones:

Crea un archivo HTML con una estructura básica.
Agrega varios párrafos con diferentes clases.
Aplica text-decoration, text-decoration-color, text-decoration-style, text-decoration-thickness y text-transform a los párrafos.

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Decoración y Transformación de Texto</title>
    <style>
        .underline {
            text-decoration: underline;
            text-decoration-color: blue;
        }
        .overline {
            text-decoration: overline;
            text-decoration-style: wavy;
        }
        .line-through {
            text-decoration: line-through;
            text-decoration-thickness: 2px;
        }
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="underline">Este texto está subrayado y en color azul.</p>
    <p class="overline">Este texto tiene una línea ondulada sobre él.</p>
    <p class="line-through">Este texto tiene una línea a través de él con grosor de 2px.</p>
    <p class="capitalize">este texto será capitalizado.</p>
    <p class="uppercase">este texto será convertido a mayúsculas.</p>
    <p class="lowercase">ESTE TEXTO SERÁ CONVERTIDO A MINÚSCULAS.</p>
</body>
</html>

Conclusión

En esta lección, hemos aprendido cómo utilizar las propiedades de CSS para decorar y transformar el texto. Estas propiedades nos permiten agregar efectos visuales y modificar la apariencia del texto de manera significativa. Asegúrate de practicar con diferentes combinaciones para familiarizarte con estas propiedades y sus efectos. En la próxima lección, profundizaremos en el modelo de caja y diseño en CSS.

Decoración y Transformación de Texto

Propiedades de Decoración de Texto

`text-decoration`

`text-decoration-color`

`text-decoration-style`

`text-decoration-thickness`

Propiedades de Transformación de Texto

`text-transform`

Ejercicio Práctico

Ejercicio 1: Aplicando Decoraciones y Transformaciones

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo