Significado de propiedades css

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

. Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)

. Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

. Borde (border): línea que encierra completamente el contenido y su relleno.

. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.

. Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

 

Unidades de Medida Relativas

 

.em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M («eme mayúscula») del tipo de letra que se esté utilizando.

. ex, relativa respecto de la altura de la letra x («equis minúscula») del tipo de letra que se esté utilizando.

.px, (píxel) relativa respecto de la pantalla del usuario.

 

Descripcion de algunas propiedades

 

.Font-family: Familia de fuente.

.Font-color: Color.

.Font-face: Tipografia.

.Font-size: Tamaño.

.width: Anchura

.height: Altura

.margin-top: Margen superior

.margin-right: Margen derecho

.margin-bottom: Margen inferior

.margin-left: Margen izquierdo

padding-top: Relleno superior

padding-right: Relleno derecho

padding-bottom: Relleno inferior

padding-left: Relleno izquierdo

border-top-width: Anchura del borde superior

border-right-width: Anchura del borde derecho

border-bottom-width: Anchura del borde inferior

border-left-width: Anchura del borde izquierdo

border-top-color: Color del borde superior

border-right-color: Color del borde derecho

border-bottom-color: Color del borde inferior

border-left-color: Color del borde izquierdo

border-top-style: Estilo del borde superior

border-right-style: Estilo del borde derecho

border-bottom-style: Estilo del borde inferior

border-left-style: Estilo del borde izquierdo

 

Propiedades shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo «shorthand» que permiten establecer todos los atributos de los bordes de forma directa. CSS ha definido una propiedad «shorthand» para cada uno de los cuatro bordes y una propiedad «shorthand» global.

Antes de presentar las propiedades, es conveniente definir los tres siguientes tipos de valores:

<medida_borde> = <medida> | thin | medium | thick
<color_borde> = <color> | transparent
<estilo_borde> = none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset

border-top: Estilo completo del borde superior

border-right: Estilo completo del borde derecho

border-bottom: Estilo completo del borde inferior

border-left: Estilo completo del borde izquierdo

Las propiedades «shorthand» permiten establecer alguno o todos los atributos de cada borde. El siguiente ejemplo establece el color y el tipo del borde inferior, pero no su anchura:

h1 {

border-bottom: solid red;

}

En el ejemplo anterior, la anchura del borde será la correspondiente al valor por defecto (medium). Este otro ejemplo muestra la forma habitual utilizada para establecer el estilo de cada borde:

div {

border-top: 1px solid #369;

border-bottom: 3px double #369;

}