Con la finalidad de resaltar textos específicos de
una página web con eficiencia,
aplicaremos estilos de texto CSS en el diseño de proyectos para internet, según
las reglas de este lenguaje.
En ocasiones, los creadores de
páginas web desconocen cómo resaltar
textos, además del uso de colores. Por lo tanto, pasan largas horas en el
diseño, sin captar la atención del usuario donde es necesario. Debido a ello,
crearemos un documento CSS con especificación de líneas en diferentes partes
del texto, la ubicación exacta del mismo, espaciados precisos y unificación
entre mayúsculas y minúsculas.
Cuando redactamos un documento en
el procesador de texto Word, es posible alinear la información de diferentes
formas, o decorarlo con diferentes propósitos, bien sea con una línea trazada
sobre el texto o debajo. En la ilustración, observamos tres ejemplos de algunos
de los tipos de diseños posibles mediante el lenguaje CSS.
061-01_0604_ilu01. Textos con diferentes
estilos
La alineación, en inglés align, es un estilo de texto
frecuentemente utilizado, apto para ubicar el texto de tres formas diferentes,
al centro, a la derecha y a la izquierda.
- Center: permite alinear el texto en el centro, como se aprecia en
el encabezado.
- Right: permite alinear el texto a la derecha, como se aprecia en
el primer bloque de información.
- Left: permite alinear el texto a la izquierda, como se aprecia en
el segundo bloque de información.
061-01_0604_ilu02. Código CSS con
alineación de texto
La decoración, en inglés decoration, es un estilo de texto para
mostrar una línea trazada de formas diferentes:
- Underline: para una línea debajo del texto.
- Overline: para una línea sobre el texto.
- Line-through: para una línea a mitad del texto.
061-01_0604_ilu03. Código CSS con
decoración de texto
La transformación, en inglés transformation, es un estilo de texto apto
para mostrar al usuario las letras de forma uniforme. Por lo tanto, al especificar:
- Capitalize: mostramos las iniciales de cada palabra en mayúscula.
- Lowercase: mostramos todas las palabras en minúscula.
- Uppercase: mostramos todas las palabras en mayúsculas.
En los tres casos se muestra al
usuario es estilo especificado, sin afectar la escritura original de la
información.
061-01_0604_ilu04. Código CSS con
transformación de texto
La sangría, en ingles indent, es un estilo de texto para el
espacio de la primera línea. Entre las diferentes formas de definir su valor están
las siguientes:
- El número
con em: define el espacio entre la
izquierda y el texto.
- El número
positivo: define el espacio entre la izquierda y el texto, más uno adicional sobre
él.
- El número
negativo: define el espacio disminuido. Por lo tanto, en la ilustración, el
texto queda fuera de la pantalla.
061-01_0604_ilu05. Código CSS con sangría
de texto
Los estilos de textos son
ampliamente utilizados a lo largo del diseño de una página web, gracias a ellos, es posible ordenar correctamente de toda la
información.
Keynotes
- La alineación, en inglés align, es un estilo de texto
frecuentemente utilizado, apto para ubicar el texto de tres formas diferentes,
al centro, a la derecha y a la izquierda.
- La decoración, en inglés decoration, es un estilo de texto para
mostrar una línea trazada de formas diferentes: Underline: para una línea debajo del texto. Overline: para una línea sobre el texto. Line-through: para una línea a mitad del texto.
- La transformación, en inglés transformation, es un estilo de texto apto
para mostrar al usuario las letras de forma uniforme.
RetoAplica tres de los estilos de texto CSS aprendidos.
Es necesario seguir las reglas oficiales de este lenguaje.
¡Comparte el resultado del reto en tu VKTV e invita a tus compañeros a evaluarte!
Tiempo disponible: entre 15 y 30 minutos.
CierreLa aplicación de estilos de texto
CSS, en el diseño de proyectos para internet, permite optimizar tiempos al
momento de resaltar textos y captar correctamente la atención de los usuarios. Por
lo tanto, con paciencia, organización y precisión, diseñaremos textos
caracterizados por su vistosidad.
