El desconocimiento de los
diferentes valores para la propiedad border-style,
conlleva a presentar desorganizadamente de la información, por lo tanto, el
usuario tiene dificultad para comprenderla. Debido a ello, describiremos los
diferentes estilos de CSS disponibles para un borde.
También, con la finalidad de
organizar eficientemente la información de una página web, aplicaremos bordes básicos de textos en documentos CSS, según
las reglas de este lenguaje de diseño.
La opción del borde en el lenguaje CSS, permite delimitar
información para separarla de otro texto o imagen. Para ello, se encuentran las
propiedades básicas, mostradas en la ilustración. La propiedad border se define con style para el estilo de una línea, con width para el ancho, y con color para la apariencia. De estas estas
tres propiedades se desglosan otras adicionales, a fin de ser más específicos.
061-01_0702_ilu01. Propiedades básicas de border
Para el estilo del borde con border-style tenemos nueve opciones:
- None: para no mostrar borde, o
simplemente se omite la declaración.
- Solid: para una línea sólida.
- Double: para una doble línea.
- Dotted: para mostrar línea punteada.
- Dashed: para líneas un poco mas largas.
- Groove, ridge, inset y outset, para mostrar líneas en diferentes dimensiones.
061-01_0702_ilu02. Especificaciones de estilos de líneas
Para el ancho del borde con border-width, tenemos cuatro opciones:
- Thin: para mostrar una línea fina.
- Medium:
para una línea con grosor medio.
- Thick: para mayor grosor en la línea.
- Length: para especificar un tamaño
exacto del grosor, mediante las diferentes unidades de medidas ofrecidas por
CSS.
061-01_0702_ilu03. Especificaciones de grosor de líneas
Para usar el border-color,
utilizamos el nombre del color: en inglés, en decimal o hexadecimal,
mediante la clasificación RGB, RGBa y HSL. Cuando se utiliza transparent, indicamos al navegador web
la presencia del borde, sin embargo, debe ser transparente.
061-01_0702_ilu04.
Especificaciones de color de líneas
Con la implementación de las propiedades descritas, el estilo
se aplica a los cuatro lados de la caja CSS, por lo tanto, al especificar dos valores
en la declaración, el primer valor se aplica en la parte superior e inferior, y
el segundo valor a la derecha y a la izquierda. En la siguiente ilustración observamos
un ejemplo entre los estilos solid ydouble, los anchos especificados en 10 y
20 píxeles, y los colores blue y black. Cuando especificamos cuatro valores,
cada lado toma un valor en sentido de las agujas del reloj y los muestra de
forma diferente.
061-01_0702_ilu05. Especificaciones de básicas en determinadas posiciones
Keynotes
- La propiedad border se define
con style para el estilo de una
línea, con width para el ancho, y con
color para la apariencia. De estas
estas tres propiedades se desglosan otras adicionales, a fin de ser más
específicos.
- Para el estilo del borde con border-style tenemos nueve opciones.
- Para el ancho del borde con border-width, tenemos cuatro opciones.
- Para usar el border-color, podememos
utilizar el nombre del color: en inglés, en decimal o hexadecimal, mediante la
clasificación RGB, RGBa y HSL. Cuando se utiliza transparent, indicamos al
navegador la presencia del borde, sin embargo, debe ser transparente.
RetoAplica cuatro diferentes bordes en
un documento CSS. Toma tres propiedades consideradas por ti como dominio
esencial al momento de crear páginas web,
y explica el motivo de tu elección.
¡Comparte el resultado final del
reto en tu vBox y pide a dos
compañeros que comenten el procedimiento para agregar un borde diferente al
tuyo!
Tiempo disponible: entre 15 y 30
minutos.
CierreA través de la aplicación de lo
aprendido sobre los bordes básicos de textos damos diferentes valores para la
propiedad border-style, y creamos presentaciones
de información de forma organizada, por lo tanto, el usuario las comprenderá correctamente.
Con paciencia y determinación ordenaremos textos en páginas web, delimitándolos por bordes vistosos
