CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 38
Visitas el mes pasado: 99
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Podemos definir el borde de cualquier elemento HTML mediante las propiedades que vamos a ver a continuación. Podemos definir además distintas propiedades para cada uno de los cuatro lados del elemento. Las propiedades las veremos en grupos de cuatro, en ellas se distingue mediante las palabras:
top
: el lado superior.right
: el lado derecho.bottom
: el lado inferior.left
: el lado izquierdo.Las propiedades border-width
controlan la anchura de
los bordes, y su definición es la siguiente:
border-top-width border-right-width border-bottom-width border-left-width |
Anchura del borde superior Anchura del borde derecho Anchura del borde inferior Anchura del borde izquierdo |
---|---|
Valores | ( <medida> | thin | medium | thick ) | inherit |
Descripción | Establece la anchura de cada uno de los cuatro bordes de los elementos |
Valor inicial | medium |
se aplica a | todos los elementos |
Los valores de la anchura de los bordes se pueden indicar mediante una medida
o mediante las palabras clave thin
(borde delgado), medium
(borde normal)
y thick
(borde ancho).
También podemos establecer la anchura de los bordes mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
border-width | Anchura del borde |
---|---|
Valores | ( <medida> | thin | medium | thick ) {1, 4} | inherit |
Descripción | Establece la anchura de todos los bordes del elemento |
Valor inicial | medium |
se aplica a | todos los elementos |
La propiedad border-width permite indicar entre uno y cuatro valores,
estos pueden ser indistintamente medidas o las palabras clave
thin, medium, thick
. El número de valores indicado significa lo
siguiente:
Pulsa para ver una página de ejemplo
Las propiedades border-color
controlan el color de
los bordes, y su definición es la siguiente:
border-top-color border-right-color border-bottom-color border-left-color |
Color del borde superior Color del borde derecho Color del borde inferior Color del borde izquierdo |
---|---|
Valores | <color> | transparent | inherit |
Descripción | Establece el color de cada uno de los cuatro bordes de los elementos |
Valor inicial | - |
se aplica a | todos los elementos |
La manera de definir los colores es la misma que para el color de texto.
Puedes verlo en la página
1.4 Colores y medidas de este mismo manual. La palabra clave
transparent
crea un margen transparente.
También podemos establecer el color de los bordes mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
border-color | Color del borde |
---|---|
Valores | ( <color> | transparent ) {1, 4} | inherit |
Descripción | Establece el color de todos los bordes del elemento |
Valor inicial | - |
se aplica a | todos los elementos |
La propiedad border-color permite indicar entre uno y cuatro valores,
que pueden ser definiciones de color o la palabra clave
transparent
. El número de valores indicado se interpreta
exactamente igual que para la propiedad anterior (border-width).
Pulsa para ver una página de ejemplo
Las propiedades border-style
permite establecer el estilo de
los bordes, y su definición es la siguiente:
border-top-style border-right-style border-bottom-style border-left-style |
estilo del borde superior Estilo del borde derecho Estilo del borde inferior Estilo del borde izquierdo |
---|---|
Valores | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit |
Descripción | Establece el estilo de cada uno de los cuatro bordes de los elementos |
Valor inicial | none |
se aplica a | todos los elementos |
Los valores para esta propiedad sólo pueden indicarse mediante alguna de
las palabras reservadas. El estilo por defecto es none
; es por esto
que los elementos no muestran ningún borde visible, a menos que se establezca
explícitamente un estilo de borde.
También podemos establecer el estilo de los bordes mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
border-style | Estilo del borde |
---|---|
Valores | (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ) {1, 4} | inherit |
Descripción | Establece el estilo de todos los bordes del elemento |
Valor inicial | - |
se aplica a | todos los elementos |
La propiedad border-style permite indicar entre uno y cuatro valores, que serán las palabras claves indicadas. El número de valores indicado se interpreta exactamente igual que para las propiedades anteriores.
En la siguiente página de ejemplo se muestra es aspecto que tienen los diferentes valores de la propiedad.
Los valores más usados son solid para una línea simple y double para una línea doble. Los estilos dotted y dashed muestras una línea de puntos y una linea discontinua respectivamente.
Mediante la propiedad border
de tipo "shorthand" se puede establecer
de forma directa el valor de todos los atributos de todos los bordes de un elemento.
su definición es la siguiente
border | Estilo completo de todos los bordes |
---|---|
Valores | ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit |
Descripción | Establece el estilo completo de todos los bordes de todos los elementos |
Valor inicial | - |
se aplica a | todos los elementos |
En los valores de la propiedad escribiremos la medida, el color, y el estilo, aunque se recomienda hacerlo en este orden, en cualquier otro orden también es válido.
también se pueden utilizar las propiedades border-top, border-right,
border-bottom, border-left
para referirse a uno sólo de los bordes.
La forma de escribir los valores de estas propiedades es idéntica que en
la propiedad border
.
Cuando los cuatro bordes no son idénticos pero sí muy parecidos, se puede utilizar la propiedad border para establecer de forma directa los atributos comunes de todos los bordes y posteriormente especificar para cada uno de los cuatro bordes sus propiedades particulares:
Hay que tener en cuenta que como el valor por defecto de la propiedad border-style es none, si una propiedad shorthand no establece explícitamente el estilo de un borde, el elemento no muestra ese borde:
En la siguiente página veremos el tratamiento de los márgenes :
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com