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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 38
Visitas el mes pasado: 99
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
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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 :
imprimir esta página
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