UD01 | Hojas de estilo en la construcción de una página web

Los textos

En este bloque vamos a aplicar estilos CSS a los textos. Los elementos HTML destinados a los textos se pueden clasificar como elementos de bloque y elementos de línea.

  1. Elementos de bloque básicos para los textos: <h1> hasta <h6>, <p>, <>, <>,
  2. Elementos de línea básicos para los textos: <strong>, <em>, <i>, <span>, <a>,

Formatos básicos

Se practican los estilos básicos que se aplican a los textos:

Estilos de textos básicos
Ejemplo:

h1
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
    sans-serif;
    color: chocolate;
    font-size: 45px; /* Para las fuentes las unidades
    de medida rem y em suelen ser más apropiadas */
    line-height: 50px;
    font-weight: normal; /* Los valores más habituales:
        lighter = 100, normal = 400,  bold = 800 */
    letter-spacing: 8px;
    text-shadow: 5px 5px 15px chocolate; /* Los cuatro valores
    son:
        desplazamiento horizontal | desplazamiento vertical | 
        longitud/intensidad de la sombra | color de la sombra */
    text-align: center;
}
Se presenta la forma de importar fuentes online de Google Web Fonts:

Estilos de textos básicos
Ejemplo:

<!-- * Aquí van los links de Google Web font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:
wght@100&display=swap"
rel="stylesheet" rel="styleshe<t"> 

<style>
    h1{
        font-family: 'Goldman', cursive;
    }
</style>
Se presenta diversas transformaciones del texto:

Transformación a tipo título
Ejemplo:

<p class=".tipo-titulo">
    Soy un párrafo
</p>
.tipo-titulo{
    text-transform: capitalize;
}

Transformación a minúsculas
Ejemplo:

<p class=".minusculas">
    Soy un párrafo
</p>
.minusculas{
    text-transform: lowercase;
}

Transformación a mayúsculas
Ejemplo:

<p class=".mayusculas">
    Soy un párrafo
</p>
.mayusculas{
    text-transform: uppercase;
}
Se presentan los subrayados y los tachados:

Sin subrayado
Ejemplo:

<a href="#" class="sin-linea">Este es un enlace sin subrayado</a>
.sin-linea{
    text-decoration: none;
}

Con subrayado
Ejemplo:

<p class="sin-linea">Este es un párrafo subrayado</p>
.subrayado{
    text-decoration: underline;
}

Con línea superior
Ejemplo:

<p class="linea-sup">Este es un párrafo con línea superior</p>
.linea-sup{
    text-decoration: overline;
}

Texto tachado
Ejemplo:

<p class="tachado">Este es un párrafo tachado</p>
.tachado{
    text-decoration: line-through;
}

Nota: Puede resultar más apropiado señalar textos tachados mediante el elemento HTML <del>

Elemento HTML <del>
Ejemplo:

<p>
    En este texto hay un fragmento de <del>texto
    tachado</del>. La ventaja de este procedimiento
    es que introduce un significado semántico.
</p>

Nota: El elemento HTML <del>, puede venir acompañadop del elemento HTML <ins>

Elemento HTML <ins>
Ejemplo:

<p>
    Añade un significado semántico señalando que un
    fragmento de código ha sido insertado.
</p>
<p>Ejemplo:</p>
<blockquote>
    El agua es insípida <del>y húmeda.</del>
    <ins>inodora e incolora.</ins>
</blockquote>
Se presenta la propiedad text-shadow:

Sombra desplazada
Ejemplo:

.sombra-1{
    text-shadow: 3px 5px white;
    /* valor 1: desplazamiento horizontal
       valor 2: desplazamiento vertical
       valor 3: color de la sombra */
}

.sombra-2{
    text-shadow: -3px -5px white;
    /* Los desplazamientos pueden ser negativos */
}

Sombra desenfocada
Ejemplo:

.sombra{
    text-shadow: 6px 6px 3px white;
    /* valor 3: desenfoque de la sombra */
}

Múltiples sombras
Ejemplo:

.sombra{
    text-shadow: 3px 3px 3px white, -3px -3px 3px grey;
    /* Las sombras se separan con comas */
}
Se presentan los diferentes tipos de separaciones del texto:

Propiedad letter-spacing | Texto expandido
Ejemplo:

.expandido{
    letter-spacing: 10px; /* Las letras se separan */
}

Propiedad letter-spacing | Texto comprimido
Ejemplo:

.comprimido{
    letter-spacing: -3px; /* Las letras se juntan */
}

Propiedad word-spacing
Ejemplo:

.entrepalabras{
    word-spacing: 30px; /* Las palabras se separan */
}

Propiedad line-height con medidas absolutas
Ejemplo:

.interlineado{
    line-height: 24px; /* Unidades absolutas */
}

Propiedad line-height con medidas relativas
Ejemplo:

.interlineado{
    line-height: 2;
 /* Unidades relativas. Doble de la altura de la
    línea por defecto */
}
Se presentan la propiedad writing-mode:

Valor por defecto horizontal-tb
Ejemplo:

.texto-normal{
    writing-mode: horizontal-tb;
    /* modo de escritura por defecto */
}

Valor vertical-lr
Ejemplo:

.texto-rotado{
    writing-mode: vertical-lr;
 /* El contenido fluye verticalmente de arriba hacia abajo
    y horizontalmente de izquierda a derecha. El próximo
    renglón vertical se posiciona a la derecha del renglón
    anterior. */
}

Valor vertical-lr
Ejemplo:

.texto-rotado{
    writing-mode: vertical-rl;
 /* El contenido fluye verticalmente de arriba hacia abajo
    y horizontalmente de derecha a izquierda. El próximo
    renglón vertical se posiciona a la izquierda del
    renglón anterior. */
}