Unidad 17. Estilos CSS Avanzado (XI) |
Bordes |
También tenemos las propiedades de borde.
La primera es border-width que indica el ancho de un borde.
Puede tomar los valores medium, thin y thick. Aunque también se aceptan valores en píxeles y porcentajes que son más fáciles de manejar a la hora de crear bordes con una anchura exacta.
En este caso hemos utilizado:
.borde1 {
border-width: 1px;
}
.borde2 {
border-width: 5px;
}
border-style muestra el borde del elemento de una forma determinada, existen varios tipos:
border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.
En este caso ha sido:
.borde {
border-color: #FFFF00;
}
Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres últimas.
De modo que el siguiente bloque:
.borde {
border-width: 10px;
border-style: groove;
border-color: black;
}
Podría escribirse más fácilmente:
.borde { border: 10px groove black; }
Debes mantener el orden width, style y color, y en este caso deberás especificar cada uno de los valores para que la regla se comporte normalmente.
También para los bordes es posible utilizar las mismas propiedades pero indicando a qué lado nos referimos:
.borde {
border-top-width: 10px;
border-top-style: groove;
border-top-color: black;
border-left-width: 10px;
border-left-style: groove;
border-left-color: black;
border-bottom-width: 10px;
border-bottom-style: groove;
border-bottom-color: black;
border-right-width: 10px;
border-right-style: groove;
border-right-color: black;
}
Que a su vez podría reescribirse como:
.borde {
border-top: 10px groove black;
border-left: 10px groove black;
border-bottom: 10px groove black;
border-right: 10px groove black;
}
Y si todos los valores son iguales para cada uno de los bordes, volvemos a utilizar la propiedad border:
.borde {
border: 10px groove black;
}
Para practicar realiza el Ejercicio Paso a Paso de Controles de Márgenes y Bordes.
|
Pág. 17.11 |
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.