Alineación de texto: text-align
Establece la alineación del texto (izquierda, derecha, centro, justificado).
Un ejemplo para text-align es
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de text-align</title>
<style>
/* Alinea el texto al centro */
.centro {
text-align: center;
}
/* Alinea el texto a la izquierda */
.izquierda {
text-align: left;
}
/* Alinea el texto a la derecha */
.derecha {
text-align: right;
}
/* Justifica el texto (rellena el espacio en cada línea) */
.justificado {
text-align: justify;
}
</style>
</head>
<body>
<h1 class="centro">Texto centrado</h1>
<p class="izquierda">Este texto está alineado a la izquierda.</p>
<p class="derecha">Este texto está alineado a la derecha.</p>
<p class="justificado">Este es un ejemplo de texto justificado. El texto se extiende hacia los márgenes izquierdo y derecho.</p>
</body>
</html>
<html>
<head>
<title>Ejemplo de text-align</title>
<style>
/* Alinea el texto al centro */
.centro {
text-align: center;
}
/* Alinea el texto a la izquierda */
.izquierda {
text-align: left;
}
/* Alinea el texto a la derecha */
.derecha {
text-align: right;
}
/* Justifica el texto (rellena el espacio en cada línea) */
.justificado {
text-align: justify;
}
</style>
</head>
<body>
<h1 class="centro">Texto centrado</h1>
<p class="izquierda">Este texto está alineado a la izquierda.</p>
<p class="derecha">Este texto está alineado a la derecha.</p>
<p class="justificado">Este es un ejemplo de texto justificado. El texto se extiende hacia los márgenes izquierdo y derecho.</p>
</body>
</html>
El ejemplo 19 da un ejemplo de la página generada.
Los selectores con punto (por ejemplo, .justificado) del ejemplo anterior son conocidos como "selectores de clase". Estos selectores se utilizan para aplicar estilos CSS a elementos HTML que tienen un atributo class específico en su definición.
La razón principal para utilizar selectores de clase es que permiten aplicar estilos a múltiples elementos en tu página web sin necesidad de repetir las mismas propiedades CSS en cada elemento individualmente. Aquí hay algunas ventajas de utilizar selectores de clase:
Reutilización de Estilos: Puedes reutilizar el mismo estilo en varios elementos HTML en tu página, simplemente aplicando la misma clase a cada uno de ellos. Esto facilita la consistencia en el diseño de tu sitio web.
Mantenimiento Simplificado: Si deseas realizar cambios en el estilo de todos los elementos que comparten una clase específica, solo necesitas hacer la modificación en un lugar (en la definición de la clase en tu hoja de estilo CSS), en lugar de tener que actualizar cada elemento individualmente.
Claridad en el Código HTML: Los selectores de clase hacen que tu código HTML sea más legible y descriptivo, ya que puedes nombrar las clases de manera significativa para indicar su propósito o estilo.
En el ejemplo proporcionado, utilizamos selectores de clase para aplicar diferentes alineaciones de texto (text-align) a elementos HTML. Esto hace que el código sea claro y fácil de entender, ya que se puede ver de inmediato qué estilo se aplica a cada elemento. Por ejemplo, .centro alinea el texto al centro, y .justificado justifica el texto.
Para aplicar estos estilos, simplemente agregamos la clase deseada a los elementos HTML en el código HTML. Por ejemplo:
<p class="centro">Este es un párrafo centrado.</p>
<p class="justificado">Este es un párrafo justificado.</p>
En resumen, los selectores de clase son una práctica común en CSS porque ofrecen un enfoque flexible y eficiente para aplicar estilos a elementos HTML de manera coherente y mantenible.
Para aprender a decorar texto, haz clic aquí.
Volver a Catálogo de estilos.
Comentarios
Publicar un comentario