Estilos de esquema CSS

Los contornos CSS son más que solo un borde La propiedad de esquema CSS es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es remotamente diferente de la propiedad fronteriza.

Los contornos CSS son más que solo un borde

La propiedad de esquema CSS es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es remotamente diferente de la propiedad fronteriza. El W3C explica que tiene las siguientes diferencias:

  • Los contornos no ocupan espacio.
  • Los contornos pueden ser no rectangulares.

Los contornos no ocupan espacio

Esta declaración, en sí misma es confusa. ¿Cómo puede un objeto en su página web no ocupar espacio en la página web? Pero si piensa que su página web es como una cebolla, cada elemento de la página puede colocarse encima de otro elemento. La propiedad de contorno no ocupa espacio porque siempre se coloca en la parte superior del cuadro del elemento.

Cuando se coloca un esquema alrededor de un elemento, no tiene ningún efecto sobre cómo se presenta ese elemento en la página. No cambia el tamaño ni la posición del elemento. Si coloca un esquema en un elemento, ocupará la misma cantidad de espacio que si no tuviera un esquema de ese elemento. Esto no es cierto para una frontera. Se agrega un borde en un elemento al ancho y la altura externos del elemento. Entonces, si tuviera una imagen de 50 píxeles de ancho, con un borde de 2 píxeles, ocuparía 54 píxeles (2 píxeles para cada borde lateral). Esa misma imagen con un contorno de 2 píxeles ocuparía solo 50 píxeles de ancho en su página, el contorno se mostraría sobre el borde exterior de la imagen.

Los contornos pueden ser no rectangulares

Antes de comenzar a pensar «genial, ahora puedo dibujar círculos», piénselo de nuevo. Esta declaración tiene un significado diferente de lo que piensas. Cuando coloca un borde en un elemento, el navegador interpreta el elemento como si fuera una caja rectangular gigante. Si el cuadro se divide en varias líneas, el navegador solo deja los bordes abiertos porque el cuadro no está cerrado. Es como si el navegador estuviera viendo el borde con una pantalla infinitamente ancha, lo suficientemente ancha como para que ese borde sea un rectángulo continuo.

Por el contrario, la propiedad de contorno tiene en cuenta los bordes. Si un elemento delineado abarca varias líneas, el contorno se cierra al final de la línea y se vuelve a abrir en la siguiente línea. Si es posible, el contorno permanecerá completamente conectado también, creando una forma no rectangular.

Usos de la propiedad del esquema

Uno de los mejores usos de la propiedad de esquema es resaltar los términos de búsqueda. Muchos sitios hacen esto con un color de fondo, pero también puede usar la propiedad de contorno y no preocuparse por agregar espacio adicional en sus páginas.

La propiedad del color del contorno acepta el término «invertir» que hace que el color del contorno sea el inverso del fondo actual. Esto le permite resaltar elementos en páginas web dinámicas sin necesidad de saber qué colores se usan.

También puede usar la propiedad de contorno para eliminar la línea de puntos alrededor de los enlaces activos. Este artículo de CSS-Tricks muestra cómo eliminar el contorno punteado.

Rate article
labsfabs.com
Add a comment