Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

2. Texto en CSS (IV)

2.4 Los bordes

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.

Propiedades border-width.

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:

• Si se indica un valor: Se aplica a los cuatro bordes.
• Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al borde izquierdo y derecho.
• Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.
• Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.

Pulsa para ver una página de ejemplo

Propiedades border-color.

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

Propiedades border-style.

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.

Propiedad border tipo "shorthand"

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 :

Los márgenes.

Página creada por ANYELGUTI.

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