Curso IT Fundamentos CSS 022_Texto, fuentes, enlaces

Texto

El control de texto CSS nos ayuda a presentar mejor la información textual en las páginas web y mejorar el efecto visual.

Sangría

Se usa para establecer la sangría de la primera línea del texto, adecuado para la sangría de párrafos. Evite usarlo en elementos en línea. La propiedad acepta valores absolutos o relativos. Las unidades absolutas incluyen píxeles (px), pulgadas (in), centímetros (cm), milímetros (mm), etc. Las unidades relativas incluyen em, rem, vw, vh, etc.

Ejemplo:

1
p {
2
  text-indent: 2em;
3
}

Efecto:

Modo de escritura

El modo de escritura en CSS se refiere a la dirección de disposición del texto, incluyendo modos horizontal, vertical y mixto. En realidad, establece la dirección de visualización de los elementos de bloque en la página: de arriba a abajo, de derecha a izquierda o de izquierda a derecha. Esto determina la dirección del texto.

• horizontal-tb: Flujo de bloque de arriba a abajo. La dirección de texto correspondiente es horizontal.
• vertical-rl: Flujo de bloque de derecha a izquierda. La dirección de texto correspondiente es vertical.
• vertical-lr: Flujo de bloque de izquierda a derecha. La dirección de texto correspondiente es vertical.

Ejemplo:

1
body {
2
  writing-mode: vertical-rl;
3
}

Efecto: Cuando cambiamos el modo de escritura, también cambiamos la dirección del bloque y del texto en línea. En el modo de escritura horizontal-tb, la dirección del bloque es horizontal de arriba a abajo, mientras que en el modo vertical-rl, la dirección del bloque es vertical de derecha a izquierda. La dimensión de bloque siempre se refiere a la dirección de visualización del bloque en el modo de escritura de la página. La dimensión en línea siempre se refiere a la dirección del texto.

Esta imagen muestra las dos dimensiones en el modo de escritura horizontal.

Esta imagen muestra las dos dimensiones en el modo de escritura vertical.

Dirección del texto

Use la propiedad direction para establecer la dirección de lectura del texto: de izquierda a derecha (ltr) o de derecha a izquierda (rtl). Adecuado para sitios web multilingües, estableciendo la dirección de lectura según el idioma del texto. Algunos idiomas (como el árabe) se escriben horizontalmente pero de derecha a izquierda.

Ejemplo:

1
html {
2
  direction: rtl;
3
}

Efecto:

Decoración de texto

Use la propiedad text-decoration para establecer efectos de decoración de línea en el texto.

• none: Sin línea
• overline: Línea superior
• underline: Subrayado
• line-through: Tachado

Ejemplo:

1
<p style="text-decoration: none;">Sin línea de texto</p>
2
<p style="text-decoration: overline;">Tengo línea superior</p>
3
<p style="text-decoration: underline;">Tengo subrayado</p>
4
<p style="text-decoration: line-through;">Tengo tachado</p>

Efecto:

Alineación de texto

Establece la alineación horizontal del texto.

• left: Texto alineado a la izquierda, valor predeterminado en la mayoría de los idiomas.
• center: Texto centrado horizontalmente.
• right: Texto alineado a la derecha.
• justify: Texto justificado, rellenando cada línea con espacios adicionales. Debido a la disposición del texto y el ancho del contenedor (texto corto, falta de espacios, pocas líneas, idioma único), en algunos casos el efecto de justificación puede no ser fácilmente visible.
• justify-all (poco común): Similar a justify, pero distribuye el espacio adicional uniformemente al inicio y al final de la línea.
• start: Según la dirección del texto del navegador, el texto se alinea al inicio (generalmente a la izquierda).
• end: Según la dirección del texto del navegador, el texto se alinea al final (generalmente a la derecha).

Ejemplo:

1
<p style="text-align: left;">Este texto está alineado a la izquierda</p>
2
<p style="text-align: right;">Este texto está alineado a la derecha</p>
3
<p style="text-align: center;">Este texto está centrado</p>

Efecto:

Altura de línea

Con la propiedad line-height se puede establecer la altura entre líneas de texto. Ajustar la altura de línea según el tamaño de fuente y los requisitos de diseño puede mejorar la legibilidad.

Ejemplo:

1
<p>Esta es una altura de línea normal <br>Esta es una altura de línea normal</p>
2
<p style="line-height: 3;">Mira la altura de línea de este texto <br>Mira la altura de línea de este texto</p>

Efecto:

Espaciado

Establece el espaciado entre contenidos de texto.

• letter-spacing establece el espaciado entre letras, caracteres chinos y números.
• word-spacing establece el espaciado entre palabras (caracteres a ambos lados de los espacios).

Ejemplo:

1
<p style="letter-spacing: 10px;">Mira mi espaciado de texto CSS</p>
2
<p style="word-spacing: 10px;">Mira mi espaciado de texto CSS 123</p>

Efecto:

Salto de línea

Controla la forma en que el texto realiza saltos de línea.

word-wrap: Controla principalmente el salto de línea de palabras largas o URLs, más adecuado para escenarios en inglés.

• normal (valor predeterminado): Sigue las reglas normales de salto de línea, no permite saltos dentro de palabras.
• break-word: Permite saltos dentro de palabras, puede forzar el salto de palabras largas o URLs.

Ejemplo:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Mira cómo hago salto de línea HelloCSS Hello-CSS</p>
2
    <p class="base example2">Mira cómo hago salto de línea HelloCSS Hello-CSS</p>

Efecto:

white-space: Controla el manejo de espacios en blanco dentro de un elemento, incluyendo espacios, saltos de línea, etc.

• normal (valor predeterminado): Manejo normal de espacios en blanco, combina espacios consecutivos y realiza saltos de línea según los caracteres de nueva línea.
• nowrap: No permite saltos de línea, ignora los caracteres de nueva línea.
• pre: Preserva los espacios en blanco, no combina espacios consecutivos, el texto se muestra según el formato del código fuente.
• pre-line: Preserva los caracteres de nueva línea, combina espacios consecutivos, otros espacios se manejan normalmente.
• pre-wrap: Preserva los espacios en blanco, combina espacios consecutivos, preserva los caracteres de nueva línea.

Ejemplo:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Mira cómo hago salto de línea HelloCSS Hello-CSS</p>
2
    <p class="base example2">Mira cómo hago salto de línea HelloCSS Hello-CSS</p>
3
    <p class="base example3">Mira cómo hago salto de línea HelloCSS Hello-CSS</p>

Efecto:

Sombra

Permite agregar uno o varios (separados por comas) efectos de sombra al texto para mejorar la legibilidad o crear efectos de diseño únicos.

• h-shadow: Posición de la sombra horizontal. Puede ser un valor positivo (desplazamiento a la derecha) o negativo (desplazamiento a la izquierda).
• v-shadow: Posición de la sombra vertical. Puede ser un valor positivo (desplazamiento hacia abajo) o negativo (desplazamiento hacia arriba).
• blur: Opcional. Indica el grado de desenfoque de la sombra, cuanto mayor sea el valor, más borroso. Se puede omitir.
• color: Color de la sombra. Puede ser un valor de color específico, una palabra clave o un valor RGBA.

Ejemplo:

1
<p style="text-shadow: 2px 2px black;">Mira mi sombra</p>
2
<p style="text-shadow: 1px 1px 1px red;">Mira mi sombra</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Mira mi sombra</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Mira mi sombra</p>

Efecto:

Transformación

Controla la transformación de mayúsculas y minúsculas del texto.

• none: Valor predeterminado, mantiene las mayúsculas y minúsculas originales.
• capitalize: Convierte la primera letra de cada palabra a mayúscula.
• uppercase: Convierte todo el texto a mayúsculas.
• lowercase: Convierte todo el texto a minúsculas.

Ejemplo:

1
<p style="text-transform: none;">Mira cómo me transformo hello CSS</p>
2
<p style="text-transform: capitalize;">Mira cómo me transformo hello CSS</p>
3
<p style="text-transform: uppercase;">Mira cómo me transformo hello CSS</p>
4
<p style="text-transform: lowercase;">Mira cómo me transformo hello CSS</p>

Efecto:

Desbordamiento de texto

En CSS, se puede usar la propiedad overflow para manejar el desbordamiento de texto.

• visible: El texto no se desborda, se muestra completamente.
• hidden: Cuando el texto se desborda, se oculta.
• scroll: Cuando el texto se desborda, se muestran barras de desplazamiento para que el usuario pueda ver todo el contenido.
• auto: Cuando el texto se desborda, se decide según el ancho y alto del elemento si se muestran barras de desplazamiento.

Ejemplo:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Mira si mi contenido de texto se desborda</p>
2
    <p class="base example2">Mira si mi contenido de texto se desborda</p>
3
    <p class="base example3">Mira si mi contenido de texto se desborda</p>
4
    <p class="base example4">Mira si mi contenido de texto se desborda</p>

Efecto:

Fuentes

Cómo controlar y definir fuentes es una parte importante del diseño web.

Familia de fuentes

Defina la fuente con la propiedad font-family. font-family puede especificar una fuente, se recomienda proporcionar varias fuentes alternativas. El navegador probará estas fuentes en orden de prioridad hasta encontrar una fuente disponible adecuada. Si el nombre de la fuente contiene espacios, caracteres especiales o caracteres chinos, se recomienda usar comillas. Se pueden usar servicios de fuentes web, tenga en cuenta los derechos de autor de las fuentes.

Ejemplo:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Efecto:

Tamaño

El tamaño de fuente en CSS se puede establecer con la propiedad font-size. Se usa para establecer el tamaño de la fuente del texto. El tamaño de fuente se puede especificar con valores absolutos o relativos. Con valores absolutos, el tamaño de fuente es fijo y no cambia con la resolución de pantalla. Las unidades absolutas incluyen: píxeles (px), pulgadas (in), centímetros (cm), milímetros (mm), etc. Con valores relativos, el tamaño de fuente es relativo al tamaño de fuente del elemento padre. Las unidades relativas incluyen: em, rem, vw, vh, etc. Usando palabras clave para especificar el tamaño de fuente se puede mejorar la legibilidad y consistencia. Las palabras clave incluyen: xx-small, x-small, small, medium, large, x-large, xx-large.

Ejemplo:

1
body {
2
  font-size: 16px;
3
}

Diseño responsivo:

• El tamaño de fuente en diseño responsivo debe ser relativo para garantizar una buena experiencia de lectura en diferentes tamaños de pantalla y dispositivos.

Accesibilidad:

• Asegúrese de que el tamaño de fuente sea lo suficientemente grande para cumplir con los estándares de accesibilidad. Se recomienda usar al menos 16px para el texto del cuerpo.

Elección de unidades de fuente:

• Usar unidades relativas (em, rem, %) se adapta mejor a las preferencias de tamaño de fuente del usuario en el navegador, aumentando la accesibilidad del sitio web.

Configuración de altura de línea:

• Establezca la altura de línea según el tamaño de fuente para mejorar la legibilidad del texto. Generalmente, la altura de línea se puede establecer entre 1,4 y 1,6 veces el tamaño de fuente.

Peso

El peso de la fuente en CSS se puede establecer con la propiedad font-weight.

• normal: Peso de fuente predeterminado.
• bold: Fuente en negrita.
• bolder: Más gruesa que el elemento padre.
• lighter: Más fina que el elemento padre.
• Valores numéricos: Establecer el peso de fuente con valores numéricos, normalmente de 100 a 900.

Ejemplo:

1
<div style="font-weight: normal;">Peso de fuente predeterminado</div>
2

3
<div style="font-weight: bold;">
4
    Fuente en negrita
5
    <div style="font-weight: bolder;">Más gruesa que el elemento padre</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Fuente en negrita con valor numérico
10
    <div style="font-weight: lighter;">Más fina que el elemento padre</div>
11
</div>

Efecto:

Estilo

El estilo de fuente en CSS se puede establecer con la propiedad font-style.

• normal: Estilo de fuente predeterminado.
• italic: Estilo cursiva, utiliza el diseño cursiva específico del archivo de fuente.
• oblique: Estilo oblicuo, similar a cursiva. Si el archivo de fuente no tiene un diseño cursiva específico, fuerza la inclinación de la fuente normal.

Ejemplo:

1
<div style="font-style: normal;">Estilo de fuente predeterminado 123 ABC</div>
2
<div style="font-style: italic;">Estilo cursiva 123 ABC</div>
3
<div style="font-style: oblique;">Estilo oblicuo 123 ABC</div>

Efecto:

Color

El color de fuente en CSS se puede establecer con la propiedad color.

• Nombres de colores predefinidos: por ejemplo, red, green, blue, etc.
• Valores de color hexadecimales: por ejemplo, #FF0000, #00FF00, #0000FF, etc.
• Valores de color RGB, RGBA: por ejemplo, rgb(255, 0, 0), rgba(0, 255, 0, 0.5), etc.
• Valores de color HSL, HSLA: por ejemplo, hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7), etc.

Ejemplo:

1
<div style="color: blue;">Color de fuente</div>
2
<div style="color: #ff6a00;">Color de fuente</div>
3
<div style="color: rgba(0, 128, 0);">Color de fuente</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Color de fuente</div>
5
<div style="color: hsla(0, 100%, 50%);">Color de fuente</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Color de fuente</div>
7
<div style="color: transparent;">Color de fuente</div>

Efecto:

Enlaces

En CSS, se puede usar la propiedad color para establecer el color de fuente de los enlaces (hipervínculos).

Establecer color de enlace

• a - Establecer color global de enlace
• a:link - Normal, enlace no visitado
• a:visited - Enlace ya visitado por el usuario
• a:hover - Cuando el usuario pasa el ratón sobre el enlace
• a:active - El momento en que se hace clic en el enlace

Ejemplo:

1
/* Enlace global */
2
a {
3
  color: #3498db; /* Azul */
4
}
5

6
/* Enlace no visitado */
7
a:link {
8
    color: #3498db; /* Azul */
9
}
10

11
/* Enlace visitado */
12
a:visited {
13
    color: #884dff; /* Púrpura */
14
}
15

16
/* Enlace al pasar el ratón */
17
a:hover {
18
    color: #ff6600; /* Naranja */
19
}
20

21
/* Color del enlace al hacer clic */
22
a:active {
23
    color: #ff0000; /* Rojo */
24
}

Establecer subrayado de enlace

Ejemplo:

1
a {
2
    text-decoration: none; /* Eliminar subrayado */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Mostrar subrayado al pasar el ratón */
7
}