Con la finalidad de resaltar textos de diferentes
maneras eficientemente, implementaremos la decoración de textos CSS en el
diseño de páginas web, según las
reglas de este lenguaje. Existen páginas de internet
donde se definen líneas en diferentes posiciones del texto, a fin de llamar la
atención del usuario. Sin embargo, han pasado largas horas para lograrlo. Por
tal razón, evaluaremos los diferentes usos de la propiedad text-decoration en documentos CSS.
Cuando necesitamos tachar o
resaltar textos mediante líneas al crear una página web, existen varios tipos de declaraciones con CSS. Así, atraemos la
atención del usuario, de forma precisa a la información necesaria. En la
ilustración, tenemos algunos ejemplos de decoraciones, en los cuales existe
tachado en medio del texto, arriba, abajo, o de forma combinada.
061-01_0606_ilu01. Textos con
decoraciones
En CSS existen las propiedades shorthand, utilizadas con frecuencia en
el diseño de páginas, para asignar diferentes valores al mismo tiempo a una
propiedad, existen diversas etiquetas con esta característica; entre ellas, text-decoration, cuyo significado en español
es decoración del texto. Los elementos pertenecientes a esta clasificación
permiten simplificar con eficiencia los códigos de diseños. Debido a ello, la
decoración de texto es aplicable, con más detalles si ampliamos la propiedad de
la siguiente forma:
- text-decoration-line: para definir la línea de decoración; es
decir, si se muestra debajo, arriba o sobre el texto.
- text-decoration-color: para definir el color de la línea.
- text-decoration-style: para definir el estilo de la línea; es
decir, si se muestra doble o sencilla, entre otros formatos.
Tal como se muestra en la imagen,
todos los valores de los elementos mencionados son en inglés.
061-01_0606_ilu02. Instrucciones
detalladas de decoración
Para aplicar la propiedad text-decoration-color:
- En la
etiqueta de párrafo, se define la propiedad text-decoration-line
y, como valor, overline, es decir,
una línea sobre el texto. Debido a la propiedad color en azul, tanto la línea como el texto toman el mismo color.
- En la
etiqueta de división, se define, además, text-decoration-color
y, como valor, red; por lo tanto, el
usuario verá la decoración de línea en rojo y el texto en azul.
En la siguiente ilustración, observamos
cómo:
061-01_0606_ilu03. Asignación de color a
una decoración
Para aplicar el estilo de la línea
de decoración, es necesario definir la propiedad text-decoration-style:
- En la
etiqueta de encabezado, se aplicaron dos tipos de líneas, tanto debajo como
sobre el texto, y el estilo es wavy;
en español, curvas.
- En la
etiqueta de párrafo, el estilo es double;
es decir, doble.
- En la
etiqueta de división div, el estilo
es dashed, cuyo significado en
español es punteada.
061-01_0606_ilu04. Asignación de estilo a
una decoración
Kerynotes
- Cuando necesitamos tachar o resaltar textos
mediante líneas al crear una página web,
existen varios tipos de declaraciones con CSS. Así, atraemos la atención del
usuario, de forma precisa, a la información necesaria.
- En CSS existen las propiedades shorthand, utilizadas con frecuencia en
el diseño de páginas, para asignar diferentes valores a una propiedad. Al mismo
tiempo, existen diversas etiquetas con esta carácteristica; entre ellas, text-decoration, cuyo significado en
español es decoración del texto.
- Para aplicar el estilo de la línea de
decoración, es necesario definir la propiedad text-decoration-style.
RetoDecora de tres formas diferentes varios textos de
un documento HTML, mediante un documento externo de CSS. Sigue las recomendaciones oficiales de este
lenguaje.
¡Comparte el resultado final de tu reto en VKTV y pide a tus compañeros un
comentario de optimización!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la decoración de
textos CSS en el diseño de páginas web,
optimizamos el tiempo, al momento de definir líneas en diferentes posiciones
del texto, con el interés de llamar la atención del usuario. Asimismo, resaltamos
textos de forma eficiente, y de diferentes maneras. La perseverancia y la
organización son determinantes para diseñar con pulcritud, los estilos de un
texto.
