Articles
Introducción a CSS
Propiedades de CSS relacionadas con el texto

Propiedades de CSS relacionadas con el texto

Este artículo explica las propiedades de CSS relacionadas con el texto.

Puedes aprender sobre el uso y cómo escribir las propiedades text-align, text-decoration y text-transform.

YouTube Video

Creando HTML para vista previa

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Tipografía (Relacionado con el texto)

Propiedad text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align es una propiedad en CSS que se utiliza para especificar la alineación horizontal del texto y los elementos en línea. Normalmente se utiliza para alinear el texto de párrafos o títulos a la izquierda, derecha o centro. Desempeña un papel importante en el diseño de páginas web y el formato del texto.

Valores principales para text-align

left (alineado a la izquierda) 
1p {
2    text-align: left;
3}
  • left alinea el texto a la izquierda (este es el método de alineación predeterminado para muchos idiomas).
right (alineado a la derecha) 
1p {
2    text-align: right;
3}
  • right alinea el texto a la derecha. Es especialmente eficaz para idiomas que se escriben de derecha a izquierda, como el árabe y el hebreo.
center (alineado al centro) 
1p {
2    text-align: center;
3}
  • center alinea el texto al centro. Se utiliza frecuentemente para títulos y encabezados.
justify (justificado) 
1p {
2    text-align: justify;
3}
  • justify alinea de forma equitativa los bordes izquierdo y derecho de las líneas, dando una impresión de alineación ordenada. Se utiliza en diseños como periódicos y revistas.
start (alineado al inicio) 
1p {
2    text-align: start;
3}
  • start alinea el texto según la posición de inicio. En los idiomas que se escriben de izquierda a derecha, se comporta igual que la alineación a la izquierda.
end (alineado al final) 
1p {
2    text-align: end;
3}
  • end alinea el texto según la posición de finalización. En los idiomas que se escriben de izquierda a derecha, se comporta igual que la alineación a la derecha.

Uso y ejemplos de text-align

Título usando alineación central
  • La alineación centrada se utiliza a menudo para títulos de páginas web y documentos. Se ve bien y resulta en un diseño visualmente equilibrado.
Alineación a la izquierda o derecha para párrafos
  • Los párrafos de texto suelen estar alineados a la izquierda por defecto, pero la alineación a la derecha o centrada se puede utilizar para diseños específicos.
Justificar el texto uniformemente
  • Cuando se justifica con justify, cada línea de texto se alinea uniformemente con los bordes izquierdo y derecho. Es útil para diseños de estilo periódico o revista.

Resumen

  • text-align es una propiedad de CSS utilizada para alinear horizontalmente texto o elementos en línea.
  • Puede manejar varios diseños como alineación a la izquierda, a la derecha, centrada y justificada.
  • Elegir la alineación adecuada según el diseño y los objetivos es clave para lograr un diseño legible y estéticamente agradable.

Usemos eficazmente la alineación de texto como parte de tu diseño con text-align.

La propiedad text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration es una propiedad de CSS utilizada para aplicar subrayados, líneas superiores, tachados o líneas estilizadas personalizadas al texto. Usando esta propiedad, puedes hacer que el estilo del texto sea más decorativo o visualmente destacado.

Explicación:

  • La clase text-decoration-underline muestra un subrayado en el texto.
  • La clase text-decoration-overline dibuja una línea sobre el texto.
  • La clase text-decoration-line-through aplica un tachado al texto.
  • La clase text-decoration-custom-underline es un ejemplo de personalización del color, estilo y grosor del subrayado.

Valores clave de text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Especificar none eliminará cualquier decoración del texto. Se utiliza cuando quieres quitar el subrayado de los enlaces, por ejemplo.
underline 
1p {
2    text-decoration: underline;
3}
  • Especificar underline dibujará un subrayado debajo del texto. Se puede usar para enlaces o partes que desees enfatizar.
overline 
1p {
2    text-decoration: overline;
3}
  • Especificar overline dibujará una línea sobre el texto. Se usa para cambiar la apariencia o para decoración especial.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Especificar line-through dibujará un tachado en el texto. Se utiliza para indicar correcciones.
blink（点滅）
  • blink es un valor que hace que el texto parpadee, pero en realidad no se usa ya que la mayoría de los navegadores ya no lo soportan.

Configuraciones avanzadas de text-decoration

text-decoration permite configuraciones detalladas como las siguientes:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • La propiedad text-decoration-color te permite especificar el color de los subrayados o tachados. Por defecto, coincide con el color del texto, pero puedes agregar un acento visual eligiendo un color diferente.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • La propiedad text-decoration-style te permite especificar el estilo de las líneas decorativas. Los valores incluyen lo siguiente:.
    • solid (Por defecto, línea sólida)
    • double (línea doble)
    • dotted (línea de puntos)
    • dashed (línea discontinua)
    • wavy (Línea ondulada)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • La propiedad text-decoration-thickness te permite especificar el grosor de las líneas decorativas. Puedes ajustarlo utilizando unidades como 2px o 0.1em, por ejemplo.

Resumen:

  • text-decoration es una propiedad para agregar líneas decorativas al texto, como subrayados o tachados.
  • Con text-decoration-color, text-decoration-style y text-decoration-thickness, es posible una personalización más detallada.
  • Se utiliza con frecuencia para enfatizar enlaces o texto importante, o como un elemento de diseño.

Usando text-decoration, puedes agregar acentos sutiles o énfasis al texto.

Propiedad text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform es una propiedad CSS para transformar el formato de mayúsculas/minúsculas del texto. Esta propiedad te permite controlar el formato de visualización del texto especificado en HTML, convirtiendo automáticamente el formato de mayúsculas/minúsculas del texto ingresado por el usuario o el texto existente.

Explicación:

  • La clase text-transform-none muestra el texto sin cambiarlo del original.
  • La clase text-transform-capitalize convierte la primera letra de cada palabra en mayúscula.
  • La clase text-transform-uppercase convierte todo el texto en mayúsculas.
  • La clase text-transform-lowercase convierte todo el texto en minúsculas.

Valores principales de text-transform

none 
1p {
2    text-transform: none;
3}
  • Especificar none deja el texto sin cambios.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Especificar capitalize convierte la primera letra de cada palabra en mayúscula. Los límites de las palabras son reconocidos por espacios o puntuación.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Especificar uppercase convierte todo el texto en mayúsculas.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Especificar lowercase convierte todo el texto en minúsculas.
full-width
  • Especificar full-width convierte el texto en caracteres de ancho completo. Esto se utiliza normalmente como un estilo especial al trabajar con Kanji o Kana, pero pocos navegadores lo soportan.

Resumen:

  • text-transform es una propiedad CSS conveniente para cambiar el formato de mayúsculas/minúsculas del texto.
  • A menudo se utiliza para crear una consistencia visual en encabezados, menús de navegación y textos de formularios.
  • Es útil cuando quieres mostrar el texto en un estilo específico independientemente de la entrada del usuario.

Al usar esta propiedad, puedes manipular fácilmente el texto mientras mantienes una consistencia visual.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades CSS relacionadas con fuentesPropiedades CSS relacionadas con el espaciado de texto