HOJAS DE ESTILOS

1.
2.
3.

4.
5.
6.

7.

8.

9.

Introduccin
Localizacin de las hojas de estilo
Sintaxis de las hojas de estilo
3.1. Selectores de tipos
3.2. Selectores de clase
3.3. Selectores de contexto
3.4. Selectores ID
3.5. Selectores agrupados
3.6. Selectores de atributos
3.7. Selector universal
3.8. Reglas CSS sin selector
Pseudoclases y pseudoelementos
Cascada y herencia
Estilos: propiedades
6.1. Unidades de medida
6.2. Propiedades del texto
6.3. Propiedades de las fuentes
6.4. Propiedades background y color
6.2. Propiedades de clasificacin
Otros elementos de las hojas de estilo
7.1. El cursor o ratn
7.2. La barra de desplazamiento
Cuadros
8.1. Posicionamiento y visualizacin
8.2. Otras propiedades de los cuadros
8.3. Capas
8.4. Filtros
Uso de estilos segn su funcionalidad

1. Introduccin
Las hojas de estilo en cascada (Cascading Style Sheets) ofrecen grandes
posibilidades a la hora de crear pginas Web. CSS permitir aadir sutiles
refinamientos a las pginas sin necesidad de comprender complejas tcnicas
de cdigo.
La mayora de los lenguajes informticos son estructurados, lo que significa
que el orden en que se incluyen las sentencias es vital. HTML es
estructurado porque cada elemento que contiene se procesa y se muestra en
orden. CSS no es estructural, es declarativo. En las hojas de estilo todo se
expresa en reglas que no tienen necesariamente que estar en orden. Para
crear un estilo lo que hay que decidir es qu normas se quieren poner, de tal
modo que las pginas Web las cumplan.

Hojas de estilo CSS

1/21

2. Localizacin de las hojas de estilo

Las hojas de estilo se pueden introducir en distintas posiciones. Atendiendo
al lugar donde se definen los estilos tenemos los siguientes tipos de hojas de
estilo.

En otro fichero: Se define el estilo en un fichero separado. Se emplea

la etiqueta link dentro de la cabecera del documento para hacer
referencia a dicho archivo. Se utilizan tres parmetros:
o rel: Se especifica el tipo de contenido; en este caso hay que
decirle que es una hoja de estilo mediante el valor stylesheet.
o type: Se especifica el tipo mime para las hojas de estilo; en este
caso el valor es text/css.
o href: Se especifica la ubicacin del fichero que contiene los
estilos.
Ejemplo:
<link rel=stylesheet type=text/css href=estilo.css>

En el mismo fichero: Se define el estilo dentro del propio documento

web. A la hora de hacer esto tenemos dos opciones:
o De cabecera: Esta etiqueta se cierra. Se suele situar dentro de la
cabecera del documento. Es conveniente emplear el parmetro
type con el mismo valor que en la etiqueta LINK.
Ejemplo:
<style>
Definicin de estilos.
</style>

o En las etiquetas html: Empleando el estilo dentro de una etiqueta

de html con el atributo style.
Ejemplo:
<h1 style=color:red>

Definidas en el navegador: Se emplean modificando las propiedades

del navegador. Todas las pginas Web se ajustarn a ese estilo.
En internet explorer hay que seleccionar.
Herramientas Opciones de internet Ficha General Botn
Accesibilidad

Hojas de estilo CSS

2/21

Segn esto podemos clasificar las hojas de estilo en:

Externas: Las que se definen empleando otro fichero.

Internas: Las que se definen en la cabecera del documento html.
Locales: Las que se definen dentro de las etiquetas html de la pgina
Web.
De usuario: Las que se definen mediante las propiedades del
navegador.

3. Sintaxis de las hojas de estilo

En el uso de las hojas de estilos hay que diferenciar entre la definicin de los
propios estilos y el uso de los mismos. Los estilos CSS se definen mediante
reglas. Podemos escribir todas las reglas que deseemos. La sintaxis para
definir las reglas CSS es la siguiente:
selector { atributo1 : valor1 ; atributo : valor2 .....}

El selector puede ser distintas cosas: una etiqueta de html, varias etiquetas,
una combinacin de las mismas, una clase, etc. El selector hace referencia a
qu elemento se le aplicar la regla CSS.
Entre corchetes viene una serie de pares atributo-valor separados por
puntos y comas. Los pares atributos-valor determinan qu caractersticas
(valor) poseer una determinada propiedad (atributo). Entre ellos no se
inserta el carcter de igual, sino que se utilizan el carcter de dos puntos. Se
pueden poner tantos pares atributos valor como deseemos. Todos estos pares
atributo-valor se aplicarn al selector especificado en la regla CSS.
El uso de estas reglas se especifica dentro de la pgina Web, insertando las
etiquetas html correspondientes.
En las reglas CSS tenemos varios tipos de selectores.

3.1. Selectores de tipo

El estilo se aplicar a todas las etiquetas html para las que se ha definido el
estilo. El selector en este caso es una etiqueta de html. La regla CSS se
aplicar siempre que aparezca la etiqueta html en el documento Web.
Ejemplo :
p { font : bold }
Indica poner la fuente en negrita en los prrafos.
<p> esto es un prrafo </p>
Este prrafo aparecer en negrita. Siempre que se escriba una etiqueta p.

Como podemos ver, por un lado est la definicin de la regla. En este caso en
un fichero de estilos o en la cabecera de la pgina Web. Por otro lado est el
Hojas de estilo CSS

3/21

uso de la propia regla simplemente al insertar la etiqueta correspondiente

de html.

3.2 Selectores de clase

Se define el estilo para su posterior uso. No va asociado a una etiqueta
concreta, sino que se puede emplear en todas las etiquetas.
La regla se define indicando el nombre de una clase; este nombre puede ser
el que nosotros deseemos, ponindole un punto delante. Posteriormente este
nombre sin el punto se utilizar ms adelante a la hora de utilizar la regla
CSS.
En cuanto al uso de la regla, se emplea el atributo class en la etiqueta de
html a la que se aplica la regla. El valor de este atributo class es el nombre
de la clase que pusimos en la definicin de la regla. El punto del nombre de
la clase nicamente aparece en la definicin de la regla.
Ejemplo :
.clase { font : bold }
<h1 class=clase> Esto es una cabecera </p>
<p class=clase> Esto es un prrafo </p>
Ambos textos aparecern en negrita. Esta cabecera y este prrafo
aparecern en negrita. El efecto del estilo es nicamente para
estos dos elementos.

Si escribimos un prrafo o cabecera sin el atributo class no se emplear el

estilo.
Ejemplo :
.clase { font : bold }
<p> Esto es un prrafo </p>
Este texto no aparecer en negrita porque no se ha empleado el
atributo class con el valor clase.

3.3 Selectores de contexto

En este caso el selector es un conjunto de etiquetas de html. Son cadenas de
dos o ms selectores simples separados por espacios en blanco. El efecto de
este tipo de reglas viene cuando en el documento Web aparece la
combinacin de etiqueta en el orden en que aparecen en la misma regla
CSS.
Ejemplo:
P B { color : red }
<B>Primera linea</B>
<P><B>Segunda linea</B></P>

Hojas de estilo CSS

4/21

En este ejemplo, primera lnea aparecer en negrita pero no en

rojo. El texto segunda lnea aparece en rojo negrita.

3.4 Selectores ID
Los selectores ID son asignados individualmente con el propsito de una
definicin en trminos por elemento. Se emplea el indicador #. El
funcionamiento es como el de los selectores de clase, que empleaba el punto.
En el caso de los selectores ID, en la definicin de la regla se indica un
nombre precedido del carcter #. Se usar en las etiquetas html que
deseemos con el atributo id. El valor de este atributo es el nombre que
pusimos en la definicin de la regla pero sin poner el carcter #.
Ejemplo
#nombre {color:red}
<p id=nombre>Hola</p>

En general, se usa un selector ID en lugar de un selector de clase si la regla

que estamos definiendo solamente se utilizar una vez. La ventaja es que
JavaScript reconoce el campo id de html.

3.5 Agrupamiento
Para definir el mismo estilo para varias etiquetas. Se escriben los selectores
de estas etiquetas separadas por comas. La regla se aplicar a cada una de
las etiquetas por separado. Esto evita tener que escribir la misma regla
varias veces.
Ejemplo
Queremos que todas las cabeceras tengan el color azul.
h1, h1, h3, h4, h5, h6 {color:blue}
Esto sera lo mismo que escribir
h1 {color:blue}
h2 {color:blue}
h3 {color:blue}
h4 {color:blue}
h5 {color:blue}
h6 {color:blue}

3.6 Selectores de atributos

Los selectores de atributos permiten seleccionar elementos de la pgina
segn sus propiedades o el valor asignado a estas propiedades. Supongamos
que hemos creado varias clases de prrafos y queremos identificar a todos
aquellos que tengan especificado el atributo CLASS (cualquiera sea el valor
de ese atributo) para darle un margen izquierdo de 1 cm:
P[CLASS] {margin-left: 1cm}

Hojas de estilo CSS

5/21

Ahora, si queremos seleccionar solamente aquellos prrafos que tengan el

atributo CLASS="pregunta", debemos usar:
P[CLASS="pregunta"] {margin-left: 1cm}

Los selectores de atributos no funcionan en Internet Explorer pero si en

FireFox. Realizan la misma funcin que los selectores de clase.

3.7 Selector universal

El selector universal permite establecer una regla para todos los elementos.
Se emplea el asterisco. Todos los elementos del documento Web recibirn el
efecto de dicha regla.
Ejemplo
* {color:red}
Todos los elementos sern de color rojo

3.8 Reglas CSS sin selector

Se pueden emplear reglas CSS sin usar un selector. En este caso la
definicin de las reglas es absolutamente igual pero el selector no se indica.
Para usar este tipo de reglas, se escribe la misma dentro de la etiqueta de
html, concretamente usando el atributo style.
Ejemplo:
<h1 style=color:red>

Es una forma rpida de darle una serie de propiedades a un elemento

concreto de la pgina, cuando queremos que nicamente se aplique cuando
aparece en una determinada posicin y no en el resto

4. Pseudos-clases y pseudos-elementos
Las pseudos-clases y los pseudos-elementos permiten definir estilos para
estados o partes de un elemento concreto. La sintaxis de ambos es igual. Al
selector al que se va a aplicar (etiqueta html) se le pone un punto al final y a
continuacin va la pseudo-clase o el pseudo-elemento.

Pseudos-clase: Se define un estilo para una variedad de la

etiqueta. Existen muy pocas pseudo-clases. Las ms comunes son
las de los enlaces. Se escribe la etiqueta para la que queremos que
tenga efecto, junto con su particularidad (pseudo-clase) separadas
por un punto. El resto de la regla es igual.
Ejemplo
a.visited { color : red }
<a href=http://www.google.es> Entra en google </a>

Hojas de estilo CSS

6/21

Una vez que ya se ha entrado en google, el enlace

ser de color rojo.

Las pseudos-clases se emplean fundamentalmente para el color de

los enlaces aunque se pueden definir otras propiedades. Las
pseudos-clases de los enlaces seran las siguientes:
a.link Enlace
a.visited Enlace visitado
a.active Enlace activo
a.hover Enlace cuando el ratn est sobre l.

Pseudoelemento: Son igual que las pseudo-clases pero se han

denominado distinto porque hacen referencia a determinados
elementos sobre el que se va a aplicar el estilo. Hay dos: primera
lnea y primera letra. Ejemplos de pseudoelementos son first-line y
first-letter que permiten definir un estilo propio.
En el caso de first-line, se refiere a la primera lnea de un
elemento, tpicamente un prrafo.
En el caso de first-letter, se refiere a la primera letra de un
elemento; prrafo, encabezado, etc.

5. Cascada y herencia
La cascada es la propiedad de las hojas de estilo que determina qu tipo de
hoja de estilo se aplica. Como sabemos, podemos colocar los estilos en
diferentes posiciones: hojas externas, internas (en la cabecera o en las
etiquetas html) y de usuario. Un sistema sencillo para aclarar el tema sera:
la ltima regla que se lee tiene preferencia. Esto es importante cuando
existen varias reglas que se contradicen.
Podemos usar las siguientes dos reglas:

Una hoja local tiene prioridad sobre una interna o externa.

Si hay conflicto entre una interna y una externa tiene prioridad la

ltima declarada.
Ejemplo:
En una hoja externa se especifica un color de texto azul en
parrafos.
En la interna se especifica un color de texto rojo en parrafos.

Hojas de estilo CSS

7/21

<link href=estilo.css >

<style>
p { color : red }
</style>

<style>
p { color : red }
</style>
<link href=estilo.css >

El color sera el ROJO

El color sera AZUL

La herencia determina que si hay dos reglas en cascada que no son

absolutamente idnticas, aunque una de las dos tenga precedencia, puede
heredar las propiedades de la otra regla que no entren en conflicto.
Ejemplo
Tenemos una hoja de estilo externa en la que establecemos las
reglas para los enlaces:
a { font: bold 14pt verdana; color: blue }
Tenemos tambin una hoja de estilos interna definida con la
etiqueta style antes del link que enlaza con la externa y que
dice lo siguiente:
a { text-decoration: none; color: red }
Qu aspecto tendrn finalmente los enlaces? La hoja interna
dice que rojos y sin subrayado. La declaracin de hoja de estilo
externa que establece que el texto debe ser azul queda anulada;
sin embargo, ninguna declaracin en la hoja de estilo interna
contradice
lo
establecido
por
font,
de
modo
que
dicha
declaracin se heredar.

6. Estilos: propiedades
Los estilos o propiedades de estilos aplicables a las pginas Web son muchas
y se clasifican segn diferentes tipos.
Nota: Ver pgina Web: http://www.htmlhelp.com/es/reference/css

6.1. Unidades de medida

Existen distintos tipos de unidades de medida en las hojas de estilo. Los
valores de longitud se forman con un signo + o opcional, seguido de un
nmero y de una abreviacin de dos letras que indica la unidad. No hay
espacios en blanco en un valor de longitud. Por un lado tendremos medidas
absolutas y por otro lado medidas relativas.
Las medidas absolutas son las siguientes:
in: pulgadas; 1in = 2,54cm
cm: centmetros
mm: milmetros
pt: puntos; 1pt = 1/72 pulgadas
Hojas de estilo CSS

8/21

pc: picas; 1pc = 12pt

Las medidas relativas son:

em: la altura de la fuente de los elementos
px: pxeles, relativa a la resolucin de la pantalla
%: el tamao como porcentaje de un tamao de fuente definido
anteriormente.
Los colores en CSS se pueden especificar, al igual que con html, mediante
un nombre (en ingls) o mediante una especificacin numrica RGB. Esta
especificacin se puede realizar de alguna de estas cuatro formas:

#rrggbb Igual que en html

#rgb Empleando un dgito hexadecimal para cada nmero en lugar
de dos.
rgb(X,X,X) Donde X es un nmero entre 0 y 255.
rgb(Y%,Y%,Y%) Donde Y es un nmero entre 0.0 y 100.0

Un valor URL (para indicar una direccin web, una imagen, etc.) viene dado
por URL(valor), donde valor puede ir opcionalmente entrecomilladas (con
comillas simples o dobles).

6.2. Propiedades del texto

word-spacing: Espacio entre palabras.
Valores posibles: normal | <longitud>
Valor por defecto: normal
letter-spacing: Espacio entre letras.
Valores posibles: normal | <longitud>
Valor por defecto: normal
text-decoration: Decoracin del texto.
Valores posibles: none | underline (subrayado) | overline (lnea por
encima) | line-through (tachado) |blink (parpadeo, slo en FireFox)
Valor por defecto: none
vertical-align: Alineacin vertical del texto.
Valores posibles: baseline (normal) | sub (subndice) | sup
(superndice) | top (alinea la parte superior del elemento con el
elemento ms alto de la lnea) | middle (alinea el punto medio
vertical del elemento con la lnea base ms la mitad de la altura de la
letra x del elemento padre)| bottom (alinea la parte inferior del
elemento con el elemento ms bajo de la lnea)
Valor por defecto: baseline

Hojas de estilo CSS

9/21

text-transform: Transformacin del texto

Valores posibles: none (ninguna transformacin) | capitalize (escribe
en maysculas el primer carcter de cada palabra) |uppercase
(escribe en maysculas todos los caracteres) | lowercase (escribe en
minsculas todos los caracteres)
Valor por defecto: none
text-align: Alineacin del texto.
Valores posibles: left | right | center | justify (alineado a la derecha y
a la izquierda).
Valor por defecto: Determinado por el navegador
text-indent: Sangra de la primera lnea.
Valores posibles: <longitud> | <porcentaje>
Valor por defecto: 0
line-height: Espaciado entre lneas.
Valores posibles: normal | <longitud> | <porcentaje>
Valor por defecto: normal

6.3. Propiedades de las fuentes

font-family: Tipo de letra o fuente.
Valores posibles: <fuente> Se pueden poner varias separadas por
comas.
Valor por defecto: Determinado por el navegador
font-style: Determina si una fuente est o no en cursiva (inclinada).
Valores posibles: normal | italic (inclinada) | oblique (inclinada)
Valor por defecto: normal
font-variant: Determina si la fuente se muestra en maysculas tipo normal
o pequeas SMALL-CAPS.
Valores posibles: normal |small-caps (maysculas pequeas)
Valor por defecto: normal
font-weight: Peso de la fuente.
Valores posibles: normal | bold (negrita) | bolder (ms negrita que la
anterior) | lighter (menos negrita que la anterior) | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900
Valor por defecto: normal
font-size: Tamao de la fuente.
Valores posibles: xx-small | x-small | small | mdium | large | xlarge | xx-large | <longitud> | <porcentaje>
Valor por defecto: medium
font: Esta propiedad permite poner todas las caractersticas anteriores.
Hojas de estilo CSS

10/21

6.4. Propiedades background y color

color: Especifica el color de un elemento.
Valores posibles: <color>
Valor por defecto: Determinado por el navegador
background-color: Color de fondo.
Valores posibles: <color> | transparent
Valor por defecto: transparent
background-image: Imagen de fondo.
Valores posibles: <url> |none (ninguna imagen)
Valor por defecto: none
background-repeat: Determina cmo se repite la imagen de fondo.
Valores posibles: repeat (se repite a lo ancho y a lo alto) | repeat-x (se
repite nicamente a lo ancho) | repeat-y (se repite nicamente a lo
alto) | no-repeat (no se repite)
Valor por defecto: repeat
background-attachment: Determina si la imagen de fondo se desplazar con
el contenido o su contenido quedar fijo
Valores posibles: scroll (la imagen se desplaza con el contenido) |
fixed (quedar fija)
Valor por defecto: scroll
background-position: Determina la posicin inicial de la imagen de fondo.
Valores posibles: <longitud> | <porcentaje> Se indican dos valores sin
comas por medio que indican distancia desde arriba y desde la
izquierda.
Valor por defecto: 0% 0%
background: Esta propiedad permite poner todas las caractersticas
anteriores

6.5. Propiedades de clasificacin

list-style-type: Tipo de estilo de lista
Valores posibles: disc (disco) | circle (crculo) | square (cuadrado
relleno) | decimal (nmeros decimales) | lower-roman (nmeros
romanos en minsculas) | upper-roman (nmeros romanos en
maysculas) | lower-alpha (letras en minsculas) | upper-alpha
(letras en maysculas) |none
Valor por defecto: disc
list-style-image: Imagen de estilo de lista.
Valores posibles: <url> | none
Valor por defecto: none
Hojas de estilo CSS

11/21

list-style-position: Posicin de estilo de lista.

Valores posibles: inside (las lneas se ajustarn dejabo del marcador
de lista) | outside (las lneas se ajustarn son sangra).
Valor por defecto: outside
list-style: Esta propiedad permite poner todas las caractersticas anteriores.

7. Otros elementos de las hojas de estilo

Otros elementos que podemos modificar mediante hojas de estilo son la
barra de desplazamiento y el cursor del ratn.

7.1. El cursor del ratn

Se trata de la propiedad que especifica el cursor del ratn cuando el
elemento es apuntado por ste. El nombre de la propiedad es cursor. Los
posibles valores son:

auto: El que el browser tenga por defecto.

crosshair: La flecha.

default: El cursor por defecto de cada plataforma.

hand: Una mano.

move: Icono de movimiento.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize y

w-resize: Son los diferentes cursores de cambio de tamao y
apuntadores en diferentes direcciones.

text: Cursor para el texto.

wait: Cursor de espera.

help: Cursor de ayuda.

Se aplica sobre el elemento sobre el que se desea que al pasar el ratn por
encima del mismo, ste cambie.
Ejemplo:
img { cursor : help }
Sobre las imgenes aparecer el ratn con la interrogacin.

7.2. La barra de desplazamiento

El aspecto de la barra de desplazamiento del navegador se puede modificar
mediante las siguientes propiedades:

scrollbar-face-color: el color de la parte movible de la barra.

scrollbar-highlight-color: el color del brillo (parte superior e izquierda
de los elementos).

Hojas de estilo CSS

12/21

scrollbar-3dlight-color: parte clara del relieve.

scrollbar-darkshadow-color: parte oscura del relieve.
scrollbar-shadow-color: el color de la sombre (parte inferior y derecha
de los elementos).
scrollbar-arrow-color: color de las fechas.
scrollbar-track-color: color de la parte de la barra no movible.

Se aplican sobre el elemento BODY.

Ejemplo:
body { scrollbar-face-color : red }
Pone la parte
color rojo.

movable

de

la

barra

de

desplazamiento

de

8. Cuadros, cajas o bloques

8.1. Posicionamiento y visualizacin
En las pginas Web los elementos van generando bloques o cajas segn se
van insertando. Este modelo de formato visual rige el comportamiento de las
cajas generadas por los elementos de la pgina. Vamos a ver cmo se puede
definir el tipo y dimensiones de esas cajas, su comportamiento y relacin con
las otras cajas en la estructura del documento.
Tipos de elementos en html:
Elementos de bloque: Son aquellos tratados visualmente como
bloques separados de los elementos que le rodean. Podemos decir que
son aquellos que comienzan con una nueva lnea dentro del
documento. Se separan del siguiente elemento con otra lnea.
Ejemplos de elementos de bloque son <P> y <DIV>. La imagen
<IMG> no es un elemento de bloques. Una tabla <TABLE> si es un
elemento de bloque.
Elementos en lnea: Son aquellos que no forman nuevos bloques de
contenido; el contenido es distribuido a travs de las lneas. Ejemplos:
<B>
Elementos de lista: Son elementos de bloque que generan una caja
principal y otras cajas adicionales que se agregan al costado del
documento.
Dos de las propiedades ms importantes de los cuadros son display y
position.
Propiedad DISPLAY
Cada elemento HTML tiene un valor de la propiedad display por defecto
basado en la propia especificacin de HTML.
block: Este valor provoca que un elemento genere una caja de bloque
principal, es decir, un salto de lnea antes y despus del elemento.
Hojas de estilo CSS

13/21

Ejemplo: En un texto podemos hacer que una palabra sea un

bloque haciendo que su display valga block y, en
consecuencia, que aparezca sola en una lnea.

inline: Este valor provoca que un elemento genere una o ms cajas de

lnea, es decir, no hay salto de lnea antes ni despus del elemento.
Ejemplo: Comprobar que una imagen es un elemento de lnea
de tal modo que si se inserta en una frase de texto, se
ver como el texto aparece a la izquierda y a la derecha.
Se podra hacer de bloque poniendo el valor display a
block. En consecuencia, aparecera el texto por encima y
por debajo de la imagen.
Ejemplo: Juntar varios prrafos en un solo con la siguiente
regla:
P { display : inline }

list-item: Este valor provoca que un elemento genere una caja de

bloque principal y una caja de lnea list-item.
Ejemplo: Insertar un prrafo dentro de una lista sin que
aparezca entre las etiquetas <li> y </li>. El prrafo no
tendr item o dibujo de elemento de lista. Si aadimos la
regla p {display : list-item} veremos como aparece el item
o dibujo de lista.

none: Este valor hace que el elemento no se visualice.

Hasta ahora hemos empleado como principal elemento de bloque de HTML

el prrafo, es decir, la etiqueta <P>. Sin embargo, ahora que ya queda algo
ms claro lo que es un bloque podemos introducir la etiqueta HTML para
insertar un bloque de contenido. Se trata de la etiqueta DIV o divisin. Est
muy relacionada con las hojas de estilo. Lo que venga dentro de un <DIV> y
su cierre </DIV> ser un elemento de bloque, por consiguiente, generar
una lnea por encima y otra por debajo del elemento.
Ejemplo: En este ejemplo podemos ver como estas
aparecen una debajo de otra, es decir, en dos
contenido distintos.
<DIV>Esto es un texto</DIV>
<DIV>Estamos en clase de informtica</DIV>

dos frases
bloques de

Propiedad POSITION
Con la propiedad POSITION se pueden situar los elementos de una pgina
donde se el autor desee.

static: Esta es la posicin predeterminada y la que conocemos en

HTML. La caja se sita dentro del flujo normal de la pgina y las
propiedades 'top', 'right', 'bottom' y 'left' no se aplican
relative: La posicin de la caja se ajusta en relacin a su posicin
normal dentro de la pgina. Cuando una caja X se posiciona
relativamente la caja siguiente se sita como si X no se hubiera
desplazado.
absolute: Las cajas son quitadas del flujo normal de la pgina y su
posicin se especifica con las propiedades 'left', 'right', 'top', y 'bottom'.
Estas propiedades especifican los desplazamientos con respecto al
bloque de contencin de la caja por lo que los elementos posicionados

Hojas de estilo CSS

14/21

absolutamente no tienen ninguna influencia sobre la posicin de las

cajas siguientes. El bloque de contencin para una caja posicionada es
establecido por el antepasado posicionado ms cercano o, si no existe,
por el bloque de contencin inicial (la esquina superior izquierda de la
pgina).
fixed: El posicionamiento fijo es una subcategora del posicionamiento
absoluto. La nica diferencia es que para una caja posicionada de
modo fijo, el bloque de contencin es establecido por el acceso visual
(la pantalla del monitor) y el elemento no se mueve cuando se realiza
un desplazamiento. Esto significa que cuando se hace un scroll en la
pgina los elementos con position: fixed mantienen su posicin en la
pantalla. No funciona con Internet Explorer y si con FireFox.

Para las cajas con position:absolute, el desplazamiento es con respecto al

bloque de contencin de la caja. Para las cajas con position:relative, el
desplazamiento es con respecto al borde externo de la propia caja (es decir,
la caja se desplaza de su posicin normal dentro de la pgina de acuerdo a
estas propiedades). Cuando se quiera poner unas coordenadas respecto a un
punto de la pgina debemos usar absolute y si queremos posicionar un
elemento respecto a otro elemento contenedor, usaremos relative.
Propiedades TOP, RIGHT, LEFT y BOTTOM

Top: Esta propiedad especifica la distancia que se desplaza el

elemento por debajo del borde superior del bloque de contencin.
Right: Esta propiedad especifica la distancia que se desplaza el
elemento hacia la izquierda del borde derecho contencin.
Left: Esta propiedad especifica la distancia que se desplaza el
elemento hacia la derecha del borde izquierdo del bloque de
contencin.
Bottom: Esta propiedad especifica la distancia que se desplaza el
elemento por sobre de borde inferior del bloque de contencin.

Propiedad OVERFLOW
Generalmente el contenido de un bloque se mantiene dentro de los lmites
del bloque, pero puede suceder que el contenido desborde esos lmites y
quede parcial o totalmente fuera del borde del mismo.
Esto puede suceder si especificamos un tamao determinado para un
elemento (con las propiedades 'width' y 'height', por ejemplo) y su contenido
resulta demasiado grande para las medidas adjudicadas. Cuando se produce
un desbordamiento, la propiedad overflow especifica si el bloque recortado y
(en caso afirmativo) cmo ser recortado. La propiedad overflow puede
tomar lo siguientes valores:

Hojas de estilo CSS

15/21

Visible: Este valor indica que el contenido no es recortado, es decir,

puede ser procesado fuera de la caja de bloque.
Hidden: Este valor indica que el contenido es recortado y los usuarios
no tendrn acceso al contenido recortado. El tamao y forma de la
zona de recorte son especificados por la propiedad 'clip'.
Scroll: Este valor indica que el contenido es recortado y el navegador
debe proporcionar un mecanismo de desplazamiento que permanecer
siempre visible (aunque la caja no tenga parte de su contenido
recortado).
Auto: El comportamiento del valor 'auto' depende del navegador, pero
significa que ste debe proporcionar un mecanismo de desplazamiento
para las cajas desbordadas.

8.2. Otras propiedades de los cuadros

margin-top: Margen superior. Los valores en porcentaje se refieren al ancho
del elemento padre. Se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje> | auto
Valor inicial: Definido por el navegador
margin-right: Margen derecho. Los valores en porcentaje se refieren al
ancho del elemento padre. Se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje> | auto
Valor inicial: Definido por el navegador
margin-bottom: Margen inferior. Los valores en porcentaje se refieren al
ancho del elemento padre. Se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje> | auto
Valor inicial: Definido por el navegador
margin-left: Margen izquierdo. Los valores en porcentaje se refieren al
ancho del elemento padre. Se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje> | auto
Valor inicial: Definido por el navegador
margin: Mrgenes del elemento. Los valores en porcentaje se refieren al
ancho del elemento padre. Se permiten valores negativos. Si se dan cuatro
valores se aplican a los mrgenes superior, derecho, inferior e izquierdo
respectivamente. Si se da un valor, se aplica a todos los mrgenes. Si se dan
dos o tres valores, los valores que faltan se toman de su lado opuesto.
Valores posibles: <longitud> |<porcentaje> | auto
Valor inicial: Definido por el navegador
padding-top: Relleno superior o espacio a colocar entre el borde superior y el
contenido. Los valores en porcentaje se refieren al ancho del elemento padre.
No se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje>
Valor inicial: 0
Hojas de estilo CSS

16/21

padding-right: Relleno derecho o espacio a colocar entre el borde derecho y el

contenido. Los valores en porcentaje se refieren al ancho del elemento padre.
No se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje>
Valor inicial: 0
padding-bottom: Relleno inferior o espacio a colocar entre el borde inferior y
el contenido. Los valores en porcentaje se refieren al ancho del elemento
padre. No se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje>
Valor inicial: 0
padding-left: Relleno izquierdo o espacio a colocar entre el borde izquierdo y
el contenido. Los valores en porcentaje se refieren al ancho del elemento
padre. No se permiten valores negativos.
Valores posibles: <longitud> |<porcentaje>
Valor inicial: 0
padding: Relleno del elemento o espacio a colocar entre los bordes y el
contenido. Los valores en porcentaje se refieren al ancho del elemento padre.
No se permiten valores negativos. Si se dan cuatro valores se aplican a los
lados superior, derecho, inferior e izquierdo respectivamente. Si se da un
valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores que
faltan se toman de su lado opuesto.
Valores posibles: <longitud> |<porcentaje>
Valor inicial: 0
border-top-width: Ancho del borde superior.
Valores posibles: thin | medium | thick |<longitud>
Valor inicial: medium
border-right-width: Ancho del borde derecho.
Valores posibles: thin | medium | thick |<longitud>
Valor inicial: medium
border-bottom-width: Ancho del borde inferior.
Valores posibles: thin | medium | thick |<longitud>
Valor inicial: medium
border-left-width: Ancho del borde izquierdo.
Valores posibles: thin | medium | thick |<longitud>
Valor inicial: medium
border-width: Ancho del borde. Si se dan cuatro valores se aplican a los
lados superior, derecho, inferior e izquierdo respectivamente. Si se da un
valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores que
faltan se toman de su lado opuesto.
Hojas de estilo CSS

17/21

Valores posibles: thin | medium | thick |<longitud>

Valor inicial: medium
border-color: Color del vorde
Valores posibles: <color>
Valor inicial: Definido por el navegador
border-style: Estilo del borde
Valores posibles: none (sin borde) | dotted (lnea de puntos) | dashed
(lnea discontinua) | solid (slido) | double (borde doble) | groove |
ridge | inset | outset (estos cuatro ltimos valores son distintos tipos
de bordes con relieve).
Valor inicial: none
border-top: Forma rpida de establecer el ancho, el estilo y el color del borde
superior.
Valores posibles: Los de ancho, estilo y color de borde.
Valor inicial: No definido.
border-right: Forma rpida de establecer el ancho, el estilo y el color del
borde derecho.
Valores posibles: Los de ancho, estilo y color de borde.
Valor inicial: No definido.
border-bottom: Forma rpida de establecer el ancho, el estilo y el color del
borde inferior.
Valores posibles: Los de ancho, estilo y color de borde.
Valor inicial: No definido.
border-left: Forma rpida de establecer el ancho, el estilo y el color del borde
izquierdo.
Valores posibles: Los de ancho, estilo y color de borde.
Valor inicial: No definido.
border: Forma rpida de establecer el ancho, el estilo y el color del borde.
Esta propiedad slo puede establecer todos los cuatro border, es decir,
aplicar a los cuatros bordes el mismo ancho, estilo y color.
Valores posibles: Los de ancho, estilo y color de borde.
Valor inicial: No definido.
width: Ancho
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: auto
height: Alto
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: auto
Hojas de estilo CSS

18/21

8.3. Capas
Como hemos visto, los elementos pueden ubicarse en posiciones precisas
dentro de la pgina. Esta posibilidad puede provocar que, en algunos casos,
ciertos elementos se superpongan visualmente con otros; en esas
situaciones, cul queda por encima y cul por debajo?
Por lo general, el navegador usa el mismo orden que los elementos tienen en
la pgina para definir el orden en que son apilados. Este orden dentro de la
pila de elementos puede adjudicarse explcitamente con la propiedad z-index
utilizando un valor entero (cuanto ms alto el entero, ms cercano al lector o
ms arriba en la pila).
Para que la propiedad z-index tenga efecto debe especificarse con un valor
de la propiedad position.

8.4. Filtros
Los filtros en CSS permiten modificar y realizar distintos efectos sobre los
cuadros. Se usa la propiedad filter.
Reflejar contenido
Horizontal: filter:fliph()
Vertical: filter:flipv()
Transparencia
filter:alpha(opacity=x)
Donde x es un valor entre 0 (trasnparente) y 100 (totalmente opaca).
Transparencia de un color
filter:chroma(color=x)
Donde x es el color que queremos hacer transparente
Ondas
filter:wave(freq=X)
Donde x es un valor que indica el nmero de cortinillas que
aparecern.
filter:wave(strength=X)
Donde x es un valor que indica deformacin, cuanto ms grande ms
deformada aparecer la imagen
filter:wave(phase=X)
Donde x es un valor (entre 0 y 100) que indica la posicin de aparicin
de las cortinillas.
filter:wave(lightstrength=X)
Hojas de estilo CSS

19/21

Donde x es un valor (entre 0 y 100) que indica la claridad u oscuridad

de las cortinillas.
Inversin de colores
filter:invert()
Los filtros se pueden combinar.

9. Uso de estilos segn su funcionalidad

Los estilos se pueden emplear con distinto mbito segn donde estn
definidos.
Para una etiqueta concreta: Se puede modificar el comportamiento de una
etiqueta html definiendo un estilo propio para esa etiqueta. Se emplear un
selector.
Ejemplo: Quiero que todas las cabeceras de tipo 1 sean de color
rojo.
H1 { color : red }

Para una etiqueta una sola vez : Se especifica qu estilo voy a emplear
especificando la clase a utilizar dentro de la etiqueta. Se emplean las clases.
Se emplear un selector de clase, un selector ID o una hoja local.
Ejemplo: Quiero una etiqueta concreta de tipo 1 sea de color
rojo; el resto normales.
.rojo { color : red } Un selector de clase
<h1 class=rojo> Hola </h1>
#colorado { color : red } Un selector ID
<h1 id=colorado> Hola </h1>
<h1 style=color:red> Hola </h1> Hoja de estilos local

Para la combinacin de etiquetas: El estilo se aplica cuando se encuentra

una combinacin de dichas etiquetas. Se emplean selectores de contexto.
(Ver ejemplo de los selectores de contexto).
Para cualquier etiqueta: Se emplean clases.
Ejemplo: Quiero poner de color rojo lo que me de la gana.
.rojo { color : red }
<p class=rojo> Prrafo </p>
<h1 class=rojo> Cabecera </h1>

Estilo sin etiqueta: Se emplea para situar un estilo en cualquier lugar sin
que tenga que hacer el efecto por la aparicin de una etiqueta html. Se usa
la etiqueta de html <SPAN> combinado con un selector de clase.
Hojas de estilo CSS

20/21

Ejemplo:
Estamos
escribiendo
<span
class=rojo>un
relativo</span> a un tema de informtica

texto

Nota: la cadena un texto relativo aparecer en rojo sin ms.

Para una etiqueta con un determinado atributo con o sin un determinado
valor: Se emplea un selector de atributo.

Hojas de estilo CSS

21/21