Codificación aprenderaprogramar.com: CU01026D
CAJAS Y MODELO DE BORDES
En apartados anteriores del curso hemos dicho que CSS se basa en el modelo de cajas. Cada división estructural en la página web, cada etiqueta o tag, genera una caja que puede ser un elemento tipo block (a todo lo ancho) o un elemento inline (se posiciona al lado de otros en una línea). Vamos a estudiar cómo aplicar bordes a las cajas y las propiedades básicas relacionadas con los bordes.
BORDE ÚNICO O BORDES POR PARTES
Lo primero que debemos tener en cuenta es que una caja podremos verla como un elemento con un borde o bien como un elemento con distintos bordes (hasta un total de cuatro bordes: superior o top, derecho o right, abajo o bottom, izquierdo o left).
Si sólo necesitamos definir un borde pensaremos como en la imagen de la izquierda: todo el elemento lo consideraremos rodeado por un solo borde. Cuando necesitemos definir de forma diferenciada uno o varios de los cuatro bordes posibles, pensaremos siguiendo el modelo mostrado en la imagen de la derecha. Si prestas atención a esta imagen, verás que cuando están establecidos de distintos colores los cuatro bordes, en la zona de unión entre bordes en las esquinas se produce un “choque” entre dos bordes. El navegador divide la esquina común entre los dos colores y esto en cierta manera puede generar un efecto similar a 3D (tridimensional). En el caso de que sólo se estableciera un borde como el borde superior (border-top), éste borde se mostraría como una línea rectangular de cierto grosor, con las esquinas terminando en ángulos rectos en lugar de en bisel.
Un borde se define utilizando propiedades de bordes para elementos CSS, de entre las cuales las fundamentales son:
a) El tipo de borde (border-style) mediante el cual definimos si es una línea normal, un borde de puntos, un borde de pequeñas líneas, etc.
b) El grosor del borde (border-width), mediante el cual definimos el grosor del borde.
c) El color del borde (border-color), medianTe el cual definimos el color del borde.
| PROPIEDAD CSS border-style | |
| Función de la propiedad | Define el tipo de borde que se aplica a un elemento. |
| Valor por defecto | none (no existe borde) |
| Aplicable a | Todos los elementos |
| ¿Se hereda directamente? | No |
| Valores posibles para esta propiedad | none (no existe borde; no se ocultan otros bordes adyacentes) |
| hidden (el borde existe pero está oculto y no es visible; oculta bordes contiguos) | |
| dotted (borde a base de puntos redondeados) | |
| dashed (borde a base de trazos o segmentos rectangulares) | |
| solid (borde como una línea normal formando un rectángulo) | |
| double (borde en forma de doble línea, exterior e interior) | |
| groove (efecto 3D con foco de luz arriba a la izquierda. En algunos colores y grosores de línea la visualización no es buena) | |
| ridge (efecto 3D con foco de luz abajo a la derecha. En algunos colores y grosores de línea la visualización no es buena) | |
| inset (efecto 3D de ventana con elemento al fondo. En algunos colores y grosores de línea la visualización no es buena) | |
| outset (efecto 3D de elevación. En algunos colores y grosores de línea la visualización no es buena) | |
| Ejemplos aprenderaprogramar.com | img {border-style: solid;} .imgVentana {border-style: inset; border-width:10px;} |
La propiedad border-style se puede aplicar a todo el borde del elemento, o bien a cualquiera de los cuatro bordes en que se puede subdividir un borde. De esta manera se generan cuatro propiedades cuyo funcionamiento es análogo al de border-style, pero que permiten dar un tratamiento diferenciado a cada uno de los bordes: border-top-style, border-right-style, border-bottom-style y border-left-style. La sintaxis a utilizar es esta:
| selectorDeElemento {border-top-style: valor1; border-right-style: valor2; border-bottom-style: valor3; border-left-style: valor4; } |
No hay por qué especificar los cuatro bordes. Podemos especificar sólo uno de ellos, o dos, o tres, hasta el máximo de 4, en el orden que queramos. Por ejemplo podríamos usar img {border-top-style: solid; } con lo cual únicamente aparecería para los elementos img un borde: el borde superior. Hemos dicho que hay 3 propiedades básicas para definir un borde, relativas al tipo (style), grosor (width) y color (color). Si dejamos sin definir el border-style el resultado será que no se visualizará borde, ni siquiera aunque esté definido un grosor y color, ya que por defecto el border-style tiene valor “none”, lo que significa que no se visualizará borde alguno.
¿Qué ocurriría si en el código CSS incluimos una declaración como img {border-style: solid; border-top-style: dashed; } ? Podemos ver el resultado en la siguiente imagen:
En primer lugar, se establece el borde para todos los elementos imagen como un borde sólido (línea normal). ¿Por qué se ve un borde si no hemos establecido un grosor (width) ni un color (color)? Tenemos que tratar de razonar sobre el por qué de las cosas que observamos. Ser buenos programadores o diseñadores CSS implica razonar y entender, no sólo conocer de memoria propiedades o sintaxis del lenguaje. Si sin haber establecido un grosor se ve una línea de determinado grosor es porque se está aplicando un valor de defecto o valor inicial para el grosor. Igualmente si el borde se ve de color azul sin haber establecido un color es porque se está aplicando un valor de defecto o valor inicial para el color. Estos valores de defecto serán los definidos por el estándar CSS o por el navegador que estemos utilizando. Si no deseamos que se apliquen estos valores por defecto debemos especificar unos valores para dichas propiedades.
Otra cuestión que podemos razonar con esta imagen es: ¿Por qué aparece el borde superior (top) en forma de segmentos y el resto de bordes (right, bottom, left) en forma de línea normal? Si leemos el código empleado veremos que en primer lugar se define que el borde completo de los elementos img será solid (línea normal); a continuación se define que el borde superior de los elementos img será en forma de trazos (segmentos). El navegador procede a sustituir el borde superior por el borde a trazos, mientras que mantiene el resto de bordes (right, bottom y left) como borde normal. Con este código hemos efectuado una declaración inicial que es contradicha por una declaración posterior. Quizás no tengamos problemas y la visualización sea correcta en todos los navegadores. Pero como “estilo de trabajo” recomendaríamos evitar siempre que sea posible las contradicciones porque a la larga pueden generar problemas. En este caso en vez de {border-style: solid; border-top-style: dashed; } podríamos usar la declaración {border-top-style: dashed; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }. Veremos más adelante que esta expresión puede escribirse también de forma abreviada o compacta. De esta manera hemos definido con claridad lo que queremos sin necesidad de incurrir en contradecir o sobreescribir parcialmente una propiedad. Si nuestras definiciones de código CSS son precisas, la probabilidad de que surjan problemas será menor. Por tanto y a modo de recomendación, no te conformes con que la visualización sea correcta: intenta que el código esté definido lo más correctamente posible.
EJERCICIO
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
