Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 85

Visitas el mes pasado: 108

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. Texto en CSS (IV)

2.4 Los bordes

html

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:


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:

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, lo que hace que los elementos no muestren 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.

Pulsa para ver una página de ejemplo



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. 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.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com