A fin de identificar con precisión la separación de
ideas en una página web, aplicaremos
bordes avanzados de textos en un documento CSS. En ocasiones, los creadores de
páginas web pasan largas horas para
determinar la manera más indicada de otorgarle bordes precisos a una caja CSS,
con la finalidad de mostrarlos de forma parcial. Por este motivo, aplicaremos las
propiedades necesarias para definir bordes específicos.
Es posible asignar cuatro valores
para realizar definiciones de bordes con las propiedades color, style y width, cada
uno se especifica en sentido de las agujas del reloj:
- el primer
valor es para el borde superior
- el segundo
para la derecha
- el tercero
para el de abajo
- el cuarto para
la izquierda
Cuando es necesario especificar los bordes para
obtener una organización personalizada, utilizamos las posiciones en inglés top, right, bottom y left, como se muestra en la siguiente
ilustración:
061-01_0703_ilu01.
Tipos de especificación para propiedades de bordes
En un código CSS, creamos los dos
tipos de especificaciones:
- En el
selector body definimos la propiedad border para mostrarlo con tamaño de 20
píxeles y estilo sólido. Posteriomente, establecemos el color en inglés, con
cuatro valores diferentes.
- En el
selector p definimos las propiedades border-left, border-right, border-top y
border-bottom, con valores diferentes
para cada uno de los lados de la caja CSS.
En la siguiente imagen observamos
cómo en ambos bloques, todos los bordes tienen diseños diferentes.
061-01_0703_ilu02.
Código CSS con diferentes tipos de bordes
Con una especificación avanzada de
CSS, definimos bordes parciales, llamados así debido a la posibilidad de
aplicar diseño a un lado del bloque en particular. Es necesario seguir el orden
de border + posición + atributo de
diseño, debido a ello tenemos las presentaciones de:
- border-left-color: black; para borde izquierdo en color negro.
- border-top-width: 10px; para borde superior con grosor de 10
píxeles.
- border-right-style:
dotted; para borde derecho con estilo punteado.
- border-bottom-color: yellow; para borde inferior con color
amarillo.
En la siguiente ilustración
observamos un ejemplo de cada uno.
061-01_0703_ilu03.
Código CSS con bordes parciales
Cuando se utilizan bordes
parciales, es necesario tener precaución al momento de definir el bloque de
declaración, debido a la posibilidad de cometer el error, de omitir la
especificación utilizada por defecto. En el ejemplo de la imagen tenemos la
primera declaración donde solo se muestra un borde, el de la derecha, puesto
que es el único con definición style. Para
asegurarnos la visualización de los demás bordes, es necesario agregar un borde
por defecto, como en el ejemplo siguiente, solid.
061-01_0703_ilu04.
Código CSS con error en bordes parciales
Keynotes
- Para realizar definiciones de bordes con las
propiedades color, style y width, es posible asignar cuatro
valores, cada uno de los cuales debe ser especificado en sentido de las agujas
del reloj.
- Cuando es necesario especificar los bordes
para obtener una organización personalizada, utilizamos las posiciones en
inglés top, right, bottom y left.
- Con una especificación avanzada de CSS,
definimos bordes parciales, llamados así debido a la posibilidad de aplicar
diseño a un lado del bloque en particular. Es necesario seguir el orden de border + posición + atributo de diseño.
- Cuando se utilizan bordes parciales, es
necesario tener precaución al momento de definir el bloque de declaración,
debido a la posibilidad de cometer el error, de omitir la especificación
utilizada por defecto.
RetoCrea cuatro bordes avanzados diferentes
en un documento CSS. Es necesario seguir las reglas de este lenguaje y crear un
documento externo al HTML.
¡Comparte el resultado final del
reto en tu vPages y pide a tres
compañeros que aporten una optimización!
Tiempo disponible: entre 15 y 30
minutos.
CierreMediante la aplicación de bordes avanzados de
textos en un documento CSS, optimizamos el tiempo al momento de especificar
bordes precisos a una caja CSS, y los mostramos de forma parcial cuando sea
necesario. También, identificamos con precisión la separación de ideas de una
página web. Con práctica y constancia
seremos los mejores en la organización de información para proyectos destinados
a la internet.
