En ocasiones, las páginas disponibles en la internet
tienen información desorganizada, al menos en apariencia, porque sus creadores desconocen
el uso y beneficio de los contornos. Para evitarlo, describiremos el proceso de
implementación de la propiedad outline en español contorno de texto.
Además, con la finalidad de delimitar bloques de información de una página web, aplicaremos contornos de textos en
documentos CSS.
El proceso de especificación de líneas
alrededor de textos en documentos CSS, tiene dos posibilidades de ejecución:
mediante un cortorno o mediante un borde. Muchas veces suelen confudirse estos
conceptos, y asumir su igualdad, sin embargo, existe una gran diferencia entre
ellos.
Con el contorno es posible definir
una línea, la cual se crea fuera de las dimensiones del elemento, es decir, sin
interferir con el borde. Por este motivo, cuando es necesario crear líneas alrededor
de un texto sin afectar el tamaño del elemento, utilizamos contornos. En la
ilustración tenemos un ejemplo de cada uno.
061-01_0701_ilu01. Texto con borde y contorno
Para definir el contorno con
lenguaje CSS en una página web, es
necesario utilizar la propiedad outline, acompañada
de style para la definición del
estilo. En el ejemplo tenemos el body, en
español cuerpo, con la especificación
de contorno solid, o sólido en español. Para la etiqueta de
párrafo definimos el estilo double,
por lo tanto se muestra una línea doble. Existen otras especificaciones de
estilo, las cuales ubicamos en el estándar oficial de CSS.
061-01_0701_ilu02. Texto con estilo en el contorno
Al aplicar el contorno de textos es
posible definir su ancho a través de la propiedad outline-width. En la imagen observamos una línea fina en el cuerpo
debido a la especificación del valor thin; en el caso del párrafo definimos una
línea gruesa con thick, por lo tanto,
la línea es más pronunciada en comparación con la anterior.
061-01_0701_ilu03. Texto con anchura en el contorno
Tal como se muestra en la imagen,
también es posible cambiar el color del contorno mediante outline-color. Por lo
tanto, la etiqueta body la definimos
en color blue, azul en español, y la
etiqueta de párrafo color verde en hexadecimal.
061-01_0701_ilu04. Texto con color en el contorno
La etiqueta de contorno pertenece
a la clasificación shorthand, por lo
tanto, si lo deseamos, especificamos todas las propiedades descritas
anteriormente en una sola instrucción. De esta forma, es posible simplificar las
declaraciones de CSS, y optimizar las especificaciones de estilos.
061-01_0701_ilu05. Texto con contorno shorthand
Keynotes
- El proceso de especificación de líneas
alrededor de textos en documentos CSS, tiene dos posibilidades de ejecución:
mediante un cortorno o mediante un borde.
- Con el contorno es posible definir una
línea, la cual se crea fuera de las dimensiones del elemento, es decir, sin
interferir con el borde. Por este motivo, cuando es necesario crear líneas
alrededor de un texto sin afectar el tamaño del elemento, utilizamos contornos.
- Para definir el contorno con lenguaje CSS en
una página web, es necesario utilizar
la propiedad outline, acompañada de style para la definición del estilo
- Al aplicar el contorno de textos es posible
definir su ancho a través de la propiedad outline-width.
- Es posible cambiar el color del contorno
mediante outline-color.
- La
etiqueta de contorno pertenece a la clasificación shorthand, por lo tanto, si lo deseamos, especificamos todas las
propiedades.
Reto
Define tres tipos de contornos diferentes
en un documentos CSS. Especifica propiedades por separado y shorthand. Sigue las recomendaciones
oficiales de este lenguaje.
¡Comparte el resultado final de tu
reto en vPages y pide a tres
compañeros una sugerencia de optimización a tu lista de pasos!
Tiempo disponible: entre 15 y 30
minutos.
CierreMediante la aplicación de contornos de textos en
documentos CSS, creamos páginas web organizadas
y delimitamos con precisión sus bloques de información. La paciencia y la
práctica constante permiten el diseño minucioso de contornos para proyectos
destinados a la internet.
