Menú

1. Historia

2. Funcionamiento

3. Sintaxis CSS

4. Propagación de Estilos

5. Propiedades de Hojas de estilo

6. Pseudoclases

7. Agradecimientos

Inicio Actualización Links Acerca de ...

Updates

05/09/2006 Inclusión de javascript en la cabecera

04/09/2006 Sustitución de Animación Macromedia Director

02/09/2006 Modificación de la página de Links

10/06/2006 Inclusión de Animación Macromedia Director

Propiedades de las hojas de estilos

Ya hemos visto que la definción de estilos consiste en la sucesión de pares propiedad:valor separados por ; en los que indicamos que característica del texto que va entre la etiqueta HTML queremos controlar.

Todas estas propiedades estan divididas en 5 grandes grupos que facilitan su utilización y documentación:

• Propiedades de texto
• Propiedades de las fuentes
• Propiedades de los colores y fondos
• Propiedades de margenes y padding
• Propiedades de los bordes

En las proximas paginas encontrareis una lista de estas propiedades, y páginas de ejemplos de como utilizarlas.

Para unificar el aspecto de las páginas de ejemplos he creado una hoja de estilos "estilo1.css" muy sencilla que ya teneis que empezar a entender.

/*Fichero hoja de estilos. Estilos1.css*/

 body { background-color: #000000;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10pt;
       color: #FFFFFF;
       margin-right: 100px;
       margin-left: 100px}

 .titulo { font-size: 36pt;
      font-weight: bolder;
      color: #FFCC00;
      text-align: left;
      margin-left: -50px}

  /*Fin del fichero */ 

En la que como podeis observar definimos el color del fondo, el tipo y tamaño de letra que aparecera en la página, los margenes y definimos una clase título, que utilizaremos para presentar el titulo. Luego desde cada página la referenciamos de la siguiente manera:

<link rel="stylesheet" href="estilos1.css">

He utilizado para los ejemplos citas famosas, espero que os gusten.

Propiedades de texto

Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras y parrafos.

Las propiedades que podemos utilizar son las siguientes:

text-transform

Especifica, por medio de palabras reservadas, si las letras del texto deben transformarse en mayúsculas, minúsuculas, sólo la primera letra de cada palabra en mayúsculas, o si ha de dejarse como está. Se hereda.

uppercase | lowercase | capitalize | none

H1 {text-transform : uppercase}

En el ejemplo anterior todas las cabeceras de nivel 1 apareceran en mayúsculas.

vertical-align

Alineación vertical del texto en relación con la línea base del texto. No se hereda.

baseline | sub | super | top | text-top | middle | mottom | text-bottom | %

STRONG {vertical-align: sub}

text-align

Fija la alineación del bloque, al margen izquierdo, al derecho, centrado o a ambos. Se hereda.

left | right | center | justify

H1 {text-align: center}

En este caso todas las cabeceras de nivel 1 apareceran centradas.

text-indent

Fija la sangría o indentación de la primera línea del texto. Se hereda.

XX unidad | %, (Por defecto su valor es 0)

P {text-indent: 2em}

line-height

Indica la distancia entre dos lineas adyacentes. Se hereda.

normal | XX unidad | %

text-decoration

Fija una o más características "decorativas" del texto, como subrayado, lineas superiores, caracteres tachados o parpadeantes.

Si se aplica a un elemento de bloque la heredan sólo los descendientes que sean de texto (o en-linea). Si se aplica a uno de éstos la heredan todos los descendientes.

underline | overline | line-trough | blink | none

H1 {text-decoration: underline}

En el ejemplo anterior todas las cabeceras de nivel 1 apareceran subrayadas.

letter-spacing

Especifica el espaciado entre letras. En el caso de especificar una longitud esta se sumara a la normal. Se hereda.

normal | XX unidad

H1 { letter-spacing: 0.5pc}

word-spacing

Especifican el espaciado entre palabras. En el caso de especificar una longitud esta se sumara a la normal. Se hereda.

normal | XX unidad

H1 { word-spacing: 0.5pc}

Declarando longitudes

En algunas de las propiedades tenemos que definir una longitud. En la sintaxis CSS esta se define con un signo opcional, un número y un identificador de unidad. Estos tres elementos van juntos y sin espacios entre ellos.

En la siguiente tabla se muestran los diferentes tipos de medidas que admiten las CSS:

Abreviatura	Unidad	Equivalencia
in	pulgadas	2.54 cm
cm	centimétros
mm	milimetros
pt	puntos	1/72 pulgadas
pc	picas	12 puntos
em	anchura-m
ex	altura-x
px	píxeles

Ademas al poner una longitud se puede especificar de forma absoluta o de forma relativa mediante la unidad em o utilizando porcentajes.

Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su grosor, etc.

Las propiedades que podemos utilizar son las siguientes:

font-family

Indicamos la familia de la fuente a utilizar. Sus posibles valores son los nombres de las fuentes, pudiendo especificar un conjunto de familias. Se selecciona la primera que se encuentra en el sistema. Se hereda.

nombre de las familias de las fuentes | familia genérica

BODY { font-family: Verdana, Arial, Helvetica, sans-serif}

En el ejemplo anterior estamos diciendo que todo el contenido de la página este en Verdana, y que en caso de que no este instalada utilice Arial y si no Helvetica y si no el tipo de familia genérica sans-serif.

font-style

Especifica el estilo de la fuente, es decir, si los caracteres iran en normal, en itálica (cursiva) o en oblicua (un poco más inclinada que la itálica). Se hereda.

normal | italic | oblique

H1, H2, H3{font-style: italic} H1,EM{font-style: normal}

En este ejemplo estamos indicando que las cabeceras de hasta nivel 3 iran en itálica. Pero que el texto emfatizado de las cabeceras de nivel 1 iran en normal.

font-variant

Especifica la variante de la fuente, es decir, si los caracteres serán tomados de la fuente normal o de small-caps (o versalitas, donde las minúsculas son parecidas a las mayusculas pero de menor tamaño) dentro de una familia de fuentes. Se hereda.

normal | small-caps

font-weight

Especifica el peso, densidad o grosor (cantidad de espacio ocupado en relación con el rectángulo en que se inscribe el carácter) de la fuente de caracteres dentro de una família de fuentes, con valores entre 100 y 900 siendo cada vez más densos. El valor 400 equivale a normal, y el 700 a bold.

El valor bolder indica que los caracteres deben ser más densos que el valor heredado excepto en el que caso de que ya valga 900.

El valor lighter funciona a la inversa de bolder indicando que tiene que ser de menos densidad excepto en el caso de que ya valga 100.

Esta propiedad se hereda.

lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900

STRONG {font-weight: bolder}

font-size

Especifica el tamaño de la fuente. Se hereda.

Puede ponerse como una longitud en unidades (absoluta o relativa), aunque también admite palabras reservadas que indican tamaños absolutos predefinidos (de menor a mayor xx-small, x-small, small, medium, large, x-large, xx-large).

Los valores larger y smaller especifican un tamaño, en relación con los anteriores, respectivamente un grado mayor o menor que el heredado.

Para facilitar el funcionamiento en cascada, es conveniente utilizar longitudes relativas (como em) o porcentajes.

XX units | % | larger | smaller | xx-small | x-small | medium | large | x-large | xx-large

Propiedades de los colores y fondos

Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.

Las propiedades que podemos utilizar son las siguientes:

color

Especificamos el color del primer plano del contenido del texto. Se hereda.

Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)

EM {color: red}

En el anterior ejemplo cualquier texto enfatizado de la página aparecera en rojo.

background-color

Especifica el color del fondo del elemento, que puede ser un color o la palabra reservada transparent (el fondo del elemento padre se ve).

En general, las propiedades del fondo no se heredan, pero al ser su valor inicial transparent, el fondo del elemento padre se ve en los hijos.

Esta propiedad no se hereda.

transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)

H1 {background-color: #0000FF}

En el anterior ejemplo todos los encabezados de nivel 1 aparaceran con un fondo azul.

background-image

Designa una imagen para rellenar el fondo del elemento por medio de una URL o la palabra reservada none para indicar que no se utilizara ninguna imagen.

Puede fijarse también un color que se colocará debajo de la imagen, y que asomará si la imagen no está disponible o, si lo está, detrás de sus zonas transparentes.

Esta propiedad no se hereda.

none | url(dirección)

H1 {background-image: white url("fondo.gif")}

En el ejemplo anterior cualquier encabezado de nivel 1 tendra como fondo la imagen "fondo.gif" y si esa imagen no esta disponible el fondo aparecera en color blanco.

background-repeat

Establece si la imagen de fondo (establecida con background-image) se repetirá horizontal y verticalmente para rellenar todo el fondo del elemento (repeat), sólo horizontalmente (repeat-x), sólo verticalmente (repeat-y), o no se repetirá (no-repeat). No se hereda.

repeat | repeat-x | repeat-y | no-repeat

H1 {background-image: white url("fondo.gif")}

En este ejemplo al no especificarse la propiedad background-repeat por defecto se toma el valor repeat por lo que la imagen "fondo.gif" se repetira tanto horizontal como verticalmente tantas veces como sea necesario hasta ocupar toda la zona determinada por el encabezado.

background-attachment

Establece si la imagen debe desplazarse (scroll) o permanecer fija con respecto a la ventana (fixed) cuando el usuario hace scroll. En cualquier caso sólo asoma en el área de contenido y relleno del elemento). No se hereda.

scroll | fixed

background-position

Fija la posición de la imagen en el área de relleno del elemento por medio de:

Coordenadas, expresadas como longitud (distancia hasta la esquina superior izquierda del límite de relleno) o porcentaje sobre el tamaño de la caja (el punto n% de la imagen se sitúa en el punto n% del area de relleno), de manera que "0% 0%" indica un ajuste a la esquina superior izquierda, "100% 100%" a la inferior derecha y "50% 50%" centrada. Si se expresa una sola se entiende como "x" dándose a "y" el valor 50%.

Palabras reservadas, poniendo una o dos en cualquier orden. Si falta una se le da el valor "center" , de manera que por ejemplo "left" es equivalente a "center left".

Esta propiedad no se hereda.

XX unidad | % | top | center | bottom | left | right (el valor por defecto es la esquina superior izquierda "0% 0%")

P.nota {background-image: white url("fondo.gif");
        background-repeat : repeat-y;
        background-position: top center;}

background

Esta propiedad en sí representa un metodo abreviado para especificar todos los valores en un solo marcador.

transparent | color | url | repeat | scroll | position

Sobre la utilización del color

El color puede ser especificado mediante nombre o mediante especificación RGB.

Los nombres son los pertenecientes a la paleta VGA de Windows: aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white, y yellow.

La especificación RGB se puede efectuar de tres formas. La primera es mediante tres números hexadecimales, donde el primero corresponde a la cantidad de rojo, el segundo a la cantidad de verde y el tercero a la cantidad de azul.

Por ejemplo.

#FF0000 - Sera el color rojo
#00FF00 - Sera el color verde
#0000FF - Sera el color azul

y con la combinación de estos podemos conseguir los colores que queramos.

#FFFF00 - Amarillo

El mismo color puede ser especificado mediante la funcion rgb() indicando el código de color o el porcentaje:

rgb(0,255,0) --color verde
rgb(0%,100%,0) --color verde

Propiedades de margenes y padding

Con estas propiedades especificamos los margenes de cualquier elemento y con el padding controlamos la distancia entre el borde y el contenido.

Las propiedades que podemos utilizar son las siguientes:

margin-top

Fijamos el margen superior.

Con la propiedad auto el navegador un valor adecuado dependiendo del tipo de elemento.

XX unidades | % | auto (el valor por defecto es 0)

BODY {margin-top: 1cm}

margin-bottom

Fijamos el margen inferior. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin-left

Fijamos el margin izquierdo. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin-right

Fijamos el margen derecho. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin

Mediante esta propiedad podemos especificar todos los valores de los margenes de una sola vez.

Se pueden poner hasta cuatro valores, para especificar cada uno de los margenes.

margin: ancho1 ancho2 ancho3 ancho4

Pero si sólo especificamos ancho1 se refíere a los cuatro lados del margen. Si se especifican dos valores, ancho1 se refíere a los lados superior e inferior y ancho2 al izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se refiere al lado superior, ancho2 al izquierdo y derecho y ancho3 al inferior.

Esta propiedad no se hereda.

XX unidades | % | auto (el valor por defecto es 0)

BODY {margin: 1in 2in} 

En el ejemplo le estamos dando a la página un margen superior e inferior de 1 pulgada e izquierdo y derecho de 2 pulgadas.

padding-top

Distancia entre el borde superior y el contenido. No se hereda.

XX unidades | %

padding-bottom

Distancia entre el borde inferior y el contenido.No se hereda.

XX unidades | %

padding-left

Distancia entre el borde izquierdo y el contenido. No se hereda.

XX unidades | %

padding-right

Distancia entre el borde derecho y el contenido. No se hereda.

XX unidades | %

padding

Mediante esta propiedad podemos definir en una única propiedad los cuatro valores anteriores. Funciona de la misma manera que la propiedad margin.

Esta propiedad no se hereda.

XX unidades | %

H1 {padding: 10%}

Propiedades de los bordes

Con estas propiedades especificamos el ancho, color y estilo del area de borde.

Las propiedades que podemos utilizar son las siguientes:

border-top-width
border-bottom-width
border-left-width
border-right-width

Mediante estas cuatro propiedades especificamos el ancho del area de borde por encima, debajo, a la izquierda y derecha del elemento.

Se puede especificar una longitud o las palabras reservadas thin, medium y tick para que el navegador asigne tres valores normalizados de grosor creciente y constantes en el documento.

Estas propiedades no se heredan.

thin | medium | thick | XX unidad

H1 {border-top-width: thin}

border-width

Especificamos en una única propiedad el ancho de todo el area de borde. Funciona de la misma manera que la propiedad margin.

Esta propiedad no se hereda.

thin | medium | thick | XX unidad

H1 { border-width: thin thick medium}

border-style

Especificamos el estilo de visualización del borde.

Los posibles valores son:

none

ninguno, anchura cero

dottet

punteado

dashed

discontinuo

solid

liso

double

doble

groove

hundido

ridge

resaltado

inset

toda la caja hundida

outset

toda la caja resaltada

Esta propiedad no se hereda.

none | dottet | dashed | solid | double | groove | ridge | inset | outset

border-color

Especificamos el color del borde. No se hereda.

nombre del color | valor HEX | Rgb (R%, G%, B%) | Rgb (R,G,B)

border-top
border-bottom
border-left
border-right

En cada una de las cuatro propiedades podemos especificar en conjunto todas las características de cada uno de los lados del borde: tamaño, estilo y color.

Estas propiedades no se heredan.

anchura | estilo | color

border

Mediante esta propiedad podemos especificar de forma conjunta todas las propiedades de un borde: tamaño, estilo y color.

Esta propiedad no se hereda.

anchura | estilo | color