Lenguajes de marcas Tema 3.

CSS

TEMA 3 – Lenguajes de marcas: CSS.

1. Introducción a las hojas de estilo
2. Hojas de estilo en un archivo externo
3. Hojas de estilo incrustadas
4. Hojas de estilo en línea
5. Normas básicas
6. El “Modelo de caja”
7. Propiedades
8. Selectores
8.1. Selectores de tipos
8.2. Selectores de clases
8.3. Selectores de ID
8.4. La etiqueta span
8.5. La etiqueta div
8.6. Selector universal
8.7. Selectores descendientes o contextuales
9. Propiedades de las listas
10. Propiedades de las tablas
11. Pseudoelementos y Pseudoclases
11.1. Pseudoelementos
11.2. Pseudoclases
12. El formato visual: propiedades de posicionamiento y visibilidad
12.1. La propiedad ‘display’
12.2. Elección de un esquema de posicionamiento: La propiedad ‘position’
12.3. Uso de capas: la propiedad "z-index"
12.4. Flotantes: La propiedad "float"
12.5. La propiedad visibility
12.6. Anchura de un elemento: width
12.7. Altura de un elemento: height
12.8. Control del desbordamiento de caja: overflow

Página 1/42
 Lenguajes de marcas Tema 3. CSS

1. Introducción a las hojas de estilo

En los entornos científicos en que la Web fue concebida, la gente estaba más preocupada
por el contenido de sus páginas que por su presentación. A medida que laWeb era
descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones
del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados
a superar las limitaciones estilísticas del HTML. Las hojas de estilo resuelven estos
problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de
presentación del HTML.

Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el
sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo
de las fuentes, y otros muchos detalles.

Las hojas de estilo representan, por tanto, un avance importante para los diseñadores
de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de
sus páginas. Además, si queremos generar documentos con un aspecto idéntico para dar
un aspecto más robusto y claro a nuestros documentos nos vemos obligados a señalar,
para cada elemento de nuestras páginas, el formato que queremos. Con las hojas de
estilo definimos las características comunes a todas nuestras páginas una sola vez,
lo que facilita mucho nuestro trabajo cuando tenemos muchas páginas en el servidor.

Las Hojas de Estilo o CSS (Cascading Style Sheets - Hojas de Estilo en Cascada)
son un mecanismo que permite aplicar formato a los documentos escritos en
HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las
páginas de su apariencia:
- la información estará contenida en la página HTML, pero este archivo no debe definir
cómo será visualizada esa información
- las indicaciones acerca de la composición visual del documento estaránespecificadas
en el archivo de la CSS.

Sólo con código HTML encontraremos Con CSS nos valemos de HTML para
tanto las etiquetas para la información definir la estructura de la información (el
como para la presentación. contenido), y el aspecto se proporciona
mediante CSS.

Página 2/42
 Lenguajes de marcas Tema 3. CSS

Veamos un ejemplo de código CSS que indica que los encabezados h1 deben mostrarse
con tipografía Arial, de 19 puntos, en color azul y alineación central:

h1 { font-family: Arial, Sans-serif;

font-size: 19pt;
color: #0000FF;
text-align: center;
}

El archivo css contiene reglas que constan de un selector (en este ejemplo, h1) y una
o más declaraciones (en el ejemplo tenemos cuatro declaraciones).
Cada declaración tiene dos partes: una propiedad (por ejemplo, font-size) y un valor
(en este caso, 19pt).
Estas reglas son las que determinan cómo deberá mostrarse la página.

Selector { declaraciones }

declaración = propiedad: valor

Como se ve en el ejemplo anterior, puede haber varias declaraciones, debiendo separar

cada una de la siguiente con el carácter punto y coma (;). Se puede dejar el ; después
de la última declaración, pero no es obligatorio.

Hay tres formas de trabajar con css:

- Hojas de estilo en un archivo externo
- Hojas de estilo incrustadas
- Hojas de estilo en línea

2. Hojas de estilo en un archivo externo

Salvamos el fichero anterior, por ejemplo como “estilos1.css”. Luego, en cada página HTML
de nuestro sitio agregamos la etiqueta link indicando el fichero que contiene nuestra hoja
de estilo (el archivo con extensión .css):

estilos1.css
h1 { font-family: Arial, Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}

indice.html
<html lang="es">
<head> <title>Título</title>
<link rel="stylesheet" href="estilos1.css" type="text/css">
</head>
<body>
...
<p>Este párrafo es normal</p>
<h1> Este texto aparecerá con fuente arial de 19 puntos,
en color azul y alineación central.</h1>
…
</body>
</html>

Página 3/42
 Lenguajes de marcas Tema 3. CSS

El elemento link aparece siempre en la sección head del documento y especifica:

• el tipo de vínculo: a una hoja de estilo ("stylesheet")
• la ubicación de la hoja de estilo a través del atributo "href"
• el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezados h1 de las páginas que contienen la referencia al archivo
de la CSS tendrán el aspecto que hemos definido.

El documento que contiene todas las definiciones de estilo tendrá extensión

.css, y no podrá contener ninguna etiqueta HTML; sólo podrá contener los
estilos.

Se pueden importar tantos documentos de estilos como se deseen, siempre teniendo

en cuenta que si existen definiciones que entran en conflicto entre los diferentes
documentos, el navegador tendrá en cuenta únicamente la última opciónleída.

Este método es el más recomendable y el que permite mayor flexibilidad ya que

los estilos pueden cambiarse sin tocar el código HTML y la CSS puede ser
compartida por varias páginas

3. Hojas de estilo incrustadas

Hemos visto cómo se especifican las reglas de estilo en un archivo externo, pero
también existe la posibilidad de poner la hoja de estilo dentro de una página HTML
usando el elemento style en el interior del documento al que se le quiere dar estilo, en
la sección <head>. De esta forma los estilos serán reconocidos antes de que la página
se cargue por completo.

<html lang="es">
<head>
<title>CSS incrustada</title>
<style type="text/css">
h1 { color: blue; }
</style>
</head>
<body>
<h1>Título color azul</h1>
<p>Un párrafo cualquiera...</p>
</body>
</html>

Como se ve en el ejemplo, el elemento style se usa dentro del encabezado

(<head></head>) de la página, especificando el tipo de hoja de estilo:

<style type="text/css">
h1 { color: blue; }
p { color: red; }
... (aquí se agregan todas las reglas de estilo) ...
</style>

Este método permite aplicar la hoja de estilo sólo a la página que la contiene.
Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en nuestro
sitio tenemos algunas pocas páginas que usan un formato distinto al resto.

Página 4/42
 Lenguajes de marcas Tema 3. CSS

En muchos casos convendrá usar ambos métodos simultáneamente: poner un

elemento link a una hoja externa para aplicar un estilo general y luego crear una hoja
incrustada en la que solamente deberemos definir las reglas específicas para esa
página.

Por las leyes de cascada de las CSS, en caso de existir una misma regla (una en la
hoja externa, otra en la hoja incrustada) con distintos valores, tiene preponderancia la
definida en último lugar.

4. Hojas de estilo en línea

Por último, también es posible aplicar el estilo directamente en la etiqueta o

elemento HTML utilizando el siguiente formato:

<elemento style = "propiedad1: valor1; propiedad2: valor2; ...">

...
</elemento>

Nótese que las declaraciones van entrecomilladas.

Por ejemplo:

<p style="text-align: left; color: blue"> Texto alineado a la izquierda y

de color azul </p>

<p style="color:red">Párrafo de texto en color rojo</p>

Por supuesto, la definición del estilo dentro de la propia etiqueta no es la manera más
eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La
existencia de una regla como la del último ejemplo constituye por sí misma una hoja de
estilo por lo que debemos declarar en el encabezado de la página el tipo de CSS que
estamos usando.

<style type="text/css"></style>

Esta declaración no será necesaria si en la misma página estamos usando una

hoja de estilo incrustada o si existe una referencia a una hoja externa.

Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo

usado en el código HTML, pero con dos importantes diferencias:
- El conjunto de propiedades que se pueden aplicar es mucho mayor y
- Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen
preferencia sobre los formatos aplicados con HTML.

Esta definición en línea sólo afecta a la etiqueta donde se ha definido, al cerrarla dejan
de tener validez las especificaciones.

5. Normas básicas:

Vamos a ver algunas normas básicas a la hora de crear una CSS.

En el ejemplo h1 {color: red;}

el selector <h1> le dice al navegador la parte del documento que se verá afectada por
esa regla.

Página 5/42
 Lenguajes de marcas Tema 3. CSS

Agrupamiento:

Los selectores pueden aparecer individualmente o agrupados, separándolos con

comas: cuando tenemos varios selectores que comparten las mismas declaraciones
pueden agruparse en una lista separada por comas (,).

h1, h2, h3 { color: red;}

o lo que es lo mismo

h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. Las
propiedades que se desean modificar en una CSS para un mismo selector pueden
agruparse, pero será necesario separar cada una de ellas con un punto y coma:

p {text-align:center; color:red; }

El agrupamiento no se trata de un tipo de selector especial sino de una fórmula

abreviada para aplicar las mismas propiedades a distintos selectores en un solo paso.
Por ejemplo, si tenemos:

h1 {font-family: Arial, Sans-serif;}

p {font-family: Arial, Sans-serif;}
table {font-family: Arial, Sans-serif;}

Podemos simplificarlo de este modo:

h1, p, table {font-family: Arial, Sans-serif;}

Normalmente se describe una propiedad por línea, de la siguiente manera:

h1 {padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: red;
background-color: #d8da3d;
}

El valor, representado a la derecha de los dos puntos (:), establece el valor de la

propiedad.
Es importante recordar que si el valor está formado por más de una palabra, hay que
ponerlo entre comillas.

p {font-family: "sans serif";}

Comentarios:

En cualquier lugar de la página pueden incluirse comentarios. Estos no influyen en el

procesamiento de la Hoja de Estilo y deben comenzar con una barra y un asterisco (/*) y
terminar con un asterisco y una barra (*/).
Pueden ocupar varias líneas de texto pero no pueden anidarse (incluir un comentario dentro
de otro comentario).

/* Esto es un comentario */

Página 6/42
 Lenguajes de marcas Tema 3. CSS

6. El “Modelo de caja”:

Todos los elementos HTML que aparecen en un documento se emplazan dentro de

una caja rectangular que los incluye, es decir, los rodea. Esta característica se estudia
por medio del denominado “Modelo de Caja”. En este modelo se especifican
determinadas áreas de la caja de cada elemento HTML que podrán ser dotadas
de estilo según las necesidades de presentación que tengamos. El comportamiento de
la caja va a depender del tipo de elemento que vayamos a tratar.

El modelo de caja de CSS describe las cajas rectangulares que son generadas por los
elementos. El elemento raíz del documento (<html> o, mejor aún, <body>) genera una
caja que actúa como bloque de contención de las cajas generadas subsecuentemente. A
su vez, cada caja puede actuar como bloque de contención de otras cajas generadas por
sus elementos descendientes.

Cada una de las cajas puede separarse en cuatro áreas distintas que definen
su aspecto:
- Contenido: es el área que contiene la información representable del elemento
(textos, imágenes, objetos... ).
- Relleno (padding): esta área es el espacio existente entre el rectángulo del
contenido y el borde definible para cada una de las cajas.
- Borde (border): el elemento puede presentar un borde con un grosor, una forma
y un color que delimitan las áreas anteriores.
- Margen (margin): la parte más externa de cada caja de elemento es el margen. Este
proporciona el espacio que separa una caja de las generadas por los elementos
anterior y siguiente.

Top

Left Righ
t

Bottom

Las áreas de padding, border y margin se dividen en cuatro segmentos:

top (superior), bottom (inferior), left (izquierdo) y right (derecho).
De este modo podemos distinguir: border-left, border-right, border-top y border-bottom
(lo mismo para padding y margin).

Veamos un ejemplo donde se manipula la caja de un párrafo: en la figura de la izquierda

podemos apreciar tres cajas iguales, correspondientes a los tres párrafos que se incluyen
en el documento. En la figura de la derecha observamos que el párrafo centralha definido
un estilo para su caja, añadiendo un grosor al margen transparente, unborde punteado
de color rojo y un espacio de relleno en color azul.

Página 7/42
 Lenguajes de marcas Tema 3. CSS

<html lang="es">
<head>
<title>Ejemplo 1 de hojas de estilos</title>
<style type="text/css">
p { font-family: "trebuchet ms";
font-weight: bold;
line-height: 20pt;
}
</style>
</head>
<body>
<p>Primer párrafo de texto</p>
<p style="margin: 20pt;
background-color: #2E9AFE;
border-width: thick;
border-color: red;
border-style: dotted;
text-indent: 20pt;
line-height: 44pt;">Segundo párrafo de texto</p>
<p>Tercer párrafo de texto</p>
</body>
</html>

El relleno y el margen son transparentes, por lo que:

- en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están
definidos)
- y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su
elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o
imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están
definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más
prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre
totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se
visualiza el color de fondo. Combinando imágenes transparentes y colores de fondo se
pueden lograr efectos gráficos muy interesantes.

Todo esto es muy técnico, pero ¿para qué sirve?: fundamentalmente para tener elcontrol
no sólo de las propiedades del elemento en sí (su color, la fuente usada para el texto, etc.),
sino también de las propiedades de esa caja generada por el elemento (sus

Página 8/42
 Lenguajes de marcas Tema 3. CSS

márgenes, sus bordes, la posición dentro del documento) que será lo que nos permita
componer visualmente la página de un modo mucho más rico y flexible que
con HTML.

Este modelo de caja es el que permite, por ejemplo, que cualquier elemento de la
página pueda recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de
lo que sucede con HTML, todos los elementos pueden tener una imagen de fondo o un
borde (sin necesidad de usar una tabla para eso).

También es posible darle una ubicación precisa a cualquier elemento dentro de lapágina,
ya sea con respecto a la pantalla o a otros elementos.

Mejor aún, nos da la posibilidad de usar un lenguaje como, por ejemplo JavaScript para
conseguir efectos muy interesantes modificando las propiedades de las cajas (moverlas de
su posición, mostrarlas o esconderlas, cambiar su tamaño, etc.).

Cada etiqueta HTML va a generar una caja según el tipo al que pertenezca,
pero la descripción anterior se aplica a todas ellas. La clasificación del tipo de etiquetas
es la siguiente:

- Etiquetas de bloque: este tipo de etiquetas son aquellas que fuerzan un salto de
línea antes y después del elemento. Por ejemplo, las etiquetas <div> y <p> son
de este tipo.

- Etiquetas en línea: son las etiquetas que se incluyen dentro de otro elemento, y
que no generarán saltos de línea, de modo que su anchura será la necesaria para
mostrar su contenido. Por ejemplo, las etiquetas <span>, <code> y <b>
pertenecen a este tipo.

- Etiquetas de sustitución: se trata de las etiquetas referidas a elementos que

solicitan recursos al servidor, de forma que su caja será generada en función del
objeto que se incluye en sustitución de la etiqueta. Por ejemplo, las imágenes
mediante etiquetas <img>.

7. Propiedades

Existen una serie de convenciones en estos apuntes que debemos tener en cuenta:

Página 9/42
 Lenguajes de marcas Tema 3. CSS

| separa dos o más alternativas; exactamente una de ellas debe aparecer

|| separa dos o más opciones; una o más de ellas debe aparecer, en
cualquier orden
[] agrupamiento de elementos
+ repetición 1 ó más veces
* repetición 0 ó más veces
? repetición 0 ó 1 vez
{A,B} repetición como mínimo A veces y como máximo B veces

Ejemplos:

[<family-name> , ]* indica que el valor de tipo <family_name> seguido por una coma
se puede incluir cero o más veces.

El valor <url>? <color> significa que la URL es opcional y el color obligatorio y en el

orden indicado.

Por último, el valor [<medida> | thick | thin] {1,4} indica que se pueden escribir
entre 1 y 4 veces un valor que sea o una medida o la palabra thick o la palabra thin.

Las propiedades que podemos usar dentro de una hoja de estilo son:

Propiedades de tipo de letra:

font-size tamaño de la letra

<porcentaje> | <medida> | xx-small | x-small | small | medium|
large |
x-large | xx-large | smaller | larger (respecto del anterior definido)

font-weight Peso de la letra

En entero (Normal=400, Bold=700)
Normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900

font-style Estilo de letra

normal | italic | oblique

font-family Familia de tipos de letra genérica (serif, …)

[[<nombre-de-la-familia> | <familia-genérica>],]*
[<nombre-de-la-familia> | <familia-genérica>] | inherit
el valor inherit, obliga al elemento a heredar el valor definido en su
antecesor directo.

font-variant con el valor small-caps las mayúsculas ocupan lo mismo que

las minúsculas
normal | small-caps

font genérico para definir los anteriores en una sola propiedad sin
necesidad de
indicar el nombre de la propiedad individual. Sintaxis:
[font-style || font-variant || font-weight]? font-size
[/line-height]? font-family]

Ejemplo: style=”font: 18pt bold italic; …”

Página 10/42
 Lenguajes de marcas Tema 3. CSS

Ejemplo 1:

<style type="text/css">
h1 {font-family: "Verdana";
font-style: italic;
font-weight: 600;
}
/* las cabeceras h1 aparecerán con una fuente de la familia Verdana, pero si no
se encuentra esa familia, el navegador utilizará la que haya por defecto. */

p {font-family: "Arial", sans-serif;

font-size: xx-large;
}
/* los párrafos utilizarán la familia Arial, pero si no se encuentra esa
familia, el navegador recurrirá a la fuente sans-serif. */

h2 {font-family: "Times New Roman", Garamond, "Courier New";

font-size: 75%;
}
/* las cabeceras h2 aparecerán con una fuente de la familia Times New Roman, si
no se encuentra la familia, recurrimos a Garamond, pero si aún así no la
encontramos, se intentará con Courier New. */
</style>
...

<body>
<h1>Este es un texto de cabecera H1 con fuente verdana</h1>
<h2>Este otro texto, de cabecera H2, utiliza times new roman</h2>
<p>Este párrafo aparece con fuente arial </p>
</body>

Propiedades de color y fondo:

color: color del elemento html

<color>

admite valores básicos (#FF00FF, RGB(255,0,255) ) o palabras

clave (red, blue, green, …).

background-color: color de fondo de un elemento HTML

<color> | transparent

background-image: imagen de fondo de un elemento HTML

none | <URL del recurso>

background-repeat: forma en que se repite una imagen en el fondo

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

background-position: indica la posición dentro del contenedor donde se sitúa la

imagen
de background
[top | center | bottom] || [left | center | right]

background-attachment: indica si la imagen se mantiene fija cuando se realice

un scroll
(fixed) o no (scroll)
scroll | fixed

Página 11/42
 Lenguajes de marcas Tema 3. CSS

background: genérico para definir los anteriores en una sola

propiedad
[background-color || background-image || background-repeat ||
background-attachment || background-position]

Ejemplo 2:

<style type="text/css">
body { background-image: url("imagenes/buzon_cerrado.jpg");
background-repeat: repeat-y;
background-position: left top;
}
p { font: 14pt Verdana;
}
</style>

...

<body>
<p>En este documento hemos incluido una imagen de fondo de un archivo
.jpg, hemos indicado que se repita verticalmente, y cuya primera
aparición estará alineada con la esquina superior izquierda.</p>
</body>

Propiedades de texto:

text-decoration: estilo especial para el texto

none | [underline || overline || line-through]

text-transform: efectos sobre un grupo de texto (conversión a mayúsculas, …)

capitalize | uppercase | lowercase | none

text-align: alineación horizontal de elementos de texto

left | right | center | justify

text-indent: sangrado del texto

<medida> | <porcentaje>

letter-spacing: permite definir el espaciado entre las letras

normal | <medida>

word-spacing: separación entre palabras

normal | <medida>

line-height: distancia entre líneas de un párrafo

normal | <medida> | <porcentaje>

Ejemplo 3:

<style type="text/css">
h1 { text-transform: uppercase;
}
h2 { text-decoration: underline;
text-align: right;
}

Página 12/42
 Lenguajes de marcas Tema 3. CSS

</style>

...

<body>
<h1>este es un texto cabecera h1 en mayúsculas</h1>
<h2> texto subrayado y alineado a la derecha</h2>
</body>

Propiedades de las cajas de los elementos:

1) Propiedades del margen:

margin: <medida> | <porcentaje> | <auto>

Especifica el grosor del margen de los cuatro lados de la caja de un elemento.

Podremos indicar entre uno y cuatro valores que se referirán a los cuatro márgenes
de la caja y que podrán ser medidas (un ancho fijo), valores en porcentaje (calculado
con respecto al ancho del bloque de contención) o el valor auto (determinado por el
navegador), pudiendo combinarse unos con otros en la misma lista:
• Si hay sólo un valor: se aplica a todos los lados.
• Si hay dos valores: los márgenes superior e inferior son determinados por
el primer valor y los márgenes derecho e izquierdo son determinados por el
segundo.
• Si hay tres valores: el superior es definido por el primer valor, el izquierdo y
el derecho son definidos por el segundo, y el inferior es definido por el
tercero.
• Si hay cuatro valores: se aplican al margen superior, derecho, inferior e
izquierdo, respectivamente.
Mediante las propiedades margin-top, margin-right, margin-bottom y margin-left,
podremos aplicar de forma individual los márgenes superior, derecho, inferior e
izquierdo respectivamente. Los valores posibles para estas propiedades son los
mismos que para la propiedad margin.

margin-left: <medida> | <porcentaje> | <auto>

margin-right: <medida> | <porcentaje> | <auto>
margin-top: <medida> | <porcentaje> | <auto>
margin-bottom: <medida> | <porcentaje> | <auto>

2) Propiedades del borde:

Las propiedades del borde especifican el ancho, color y estilo del borde de una caja. Estas
propiedades se aplican a todos los elementos. Vamos a ver las resumidas, pero igual que
anteriormente, se puede aplicar un estilo diferente a cada uno de los 4 bordes de la caja(ej:
border-right-style).

border-style: estilo del borde del elemento

[hidden | solid | dotted | dashed double | groove | ridge | inset |
outset]

El valor inicial del estilo de borde es 'none', ningún borde será

visible a menos que se establezca otro estilo de borde.
None: Ningún borde

Página 13/42
 Lenguajes de marcas Tema 3. CSS

Hidden: Igual a 'none'

Dotted: El borde es una serie de puntos
Dashed : El borde es una serie de pequeños segmentos de
línea
Solid: El borde es un único segmento de línea
Double: El borde son dos líneas sólidas
Groove: El borde luce como si estuviese tallado en la página
Ridge:Lo opuesto a 'grove': el borde parece que estuviera
sobresaliendo de la página
Inset: El borde hace que toda la caja luzca como si estuviera
empotrada en la página
Outset: Lo opuesto a 'inset': el borde hace que toda la caja
parezca sobresalir de la página

border-width: anchura del borde

[<medida> | <porcentaje> | thin | medium | thick]

border-color: color del borde

<color> | transparent

border: genérico para definir los bordes anteriores

[border-width || border-style || <color>]

Página 14/42
 Lenguajes de marcas Tema 3. CSS

Ejemplo 4:

<style type="text/css">
h1 { border-width: thick;
border-color: red;
border-style: dotted;
}
h2 { border-style: solid;
margin: 10px;
}
/* margen de 10 píxeles en todas las direcciones. */
h3 { border-style: solid;
margin: 0.1cm auto auto 0.75in;
}
/* 0.1 cm para el margen superior y 0.75 pulgadas para el izquierdo,
mientras que para los márgenes derecho e inferior se ajustará
automáticamente. */
h4 { border-bottom: thick solid red;
}
/* La regla anterior define un borde inferior para las cabeceras de
tipo h4 (una línea gruesa entera de color rojo). */

</style>

3) Propiedades del relleno:

padding-left: <medida> | <porcentaje>

padding-right: <medida> | <porcentaje>
padding-top: <medida> | <porcentaje>
padding-bottom: <medida> | <porcentaje>

Estas propiedades determinan el relleno superior, derecho, inferior e izquierdo de

una caja. Se puede especificar un ancho fijo o indicar un porcentaje que se calcula
con respecto al ancho del bloque de contención.

A diferencia de las propiedades del margen, los valores para el relleno no pueden
ser negativos.

padding

La propiedad 'padding' es una propiedad resumida que se utiliza para definir los
cuatro rellenos a la vez. Pueden especificarse de uno a cuatro valores para el
ancho del relleno:
• Si hay sólo un valor: se aplica a todos los lados.
• Si hay dos valores: los rellenos superior e inferior son determinados por el
primer valor y los rellenos derecho e izquierdo son determinados por el
segundo.
• Si hay tres valores: el superior es definido por el primer valor, el izquierdo y
el derecho son definidos por el segundo, y el inferior es definido por el
tercero.
• Si hay cuatro valores: se aplican al relleno superior, derecho, inferior e
izquierdo, respectivamente.

El color de la superficie o la imagen del área de relleno es especificado a través

de la propiedad 'background' del elemento.

Página 15/42
 Lenguajes de marcas Tema 3. CSS

Ejemplo 5:

<html lang="es">
<head>
...
<title>Ejemplo estilos</title>
<style type="text/css">
.Parrafo1 { padding-left: 50%; padding-right: 20px;
padding-top: 1em; padding-bottom: 6pt;
background-color: yellow;
border: 1px solid;
}
.Parrafo2 { margin: 1.5cm;
border: solid red thin;
padding-left: 25%; padding-right: 25%;
padding-top: 0.5cm; padding-bottom: 1cm;
background-color: blue;
}
b { margin: 2cm;
border: solid red thin;
background-color: green;
}
</style>
</head>

<body>
<p> Este párrafo no tiene estilo </p>
<p class="Parrafo1">A este párrafo le hemos aplicado las cuatro
propiedades individuales para el relleno y para cada lado hemos usado
una unidad de medida distinta. Cuando se usa un porcentaje (como en
<code>padding-left</code>) &eacute;ste se refiere al ancho del bloque
de contenci&oacute;n, es decir, a la caja del elemento padre (en este
ejemplo, es <code>&lt;BODY&gt;</code>). Como el color de fondo del
relleno es igual a la propiedad &quot;<code>background</code>&quot;
del elemento, hemos usado esta propiedad para definir un color
amarillo de fondo.</p>
<p> Este párrafo no tiene estilo </p>
<p class="Parrafo2">Este párrafo tiene un estilo diferente</p>
<p> Este párrafo no tiene estilo pero <b>este texto en negrita</b>
sí<b>y este también</b> ¿lo ves?.</p>
</body>
</html>

Página 16/42
 Lenguajes de marcas Tema 3. CSS

El resultado es el siguiente:

4) Unidades de medida:

Hay dos tipos de unidades de medida: relativas y absolutas.

Las unidades de medidas relativas especifican una medida en relación a otra

propiedad de medida. Las hojas de estilo que utilizan unidades relativas modificarán
su escala de un medio a otro más fácilmente (p.ej. de un monitor de ordenador a una
impresora láser). Las unidades relativas son:

• em: relativa respecto del tamaño de fuente 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 y tamaño de letra que se esté utilizando.
• ex: relativa respecto de la altura de la letra x ("equis minúscula") del tipo y
tamaño de letra que se esté utilizando.
• px: píxeles, relativa respecto de la resolución de la pantalla del usuario.

Las unidades de medida absoluta son útiles solamente cuando las propiedades físicas
del medio de salida son conocidas. Las unidades absolutas son:

• in: inches — 1 pulgada (inch) es igual a 2.54 centímetros.

• cm: centímetros.
• mm: milímetros.
• pt: puntos — los puntos usados por CSS2.1 equivalen a 1/72 pulgadas. Es la
unidad absoluta más utilizada.
• pc: picas — 1 pica es igual a 12 puntos.

Página 17/42
 Lenguajes de marcas Tema 3. CSS

8. Selectores:

Los selectores identifican a un elemento dentro de la página Web para luego poder
definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple
nombre de las etiquetas usadas en HTML (BODY, P, TABLE, UL, etc.) hasta complejas
combinaciones que permiten un juego muy amplio de selecciones dentro dela página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más

complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacarle el
máximo provecho.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas
de Estilo, pero los selectores que se pueden definir con estos programas son sólo los
más elementales. La complejidad que pueden alcanzar los selectores contextuales escapa
a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar
a sus propios recursos.

En esta sección se explican los llamados selectores simples.

8.1. Selectores de tipo:

Son los que identifican a un tipo de elemento dentro de los que conforman el
código HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los signos < y
>. Por ejemplo, TABLE selecciona todos los elementos <TABLE> de la página. La
siguiente regla identifica a los elementos <H1> de la página y los alinea centralmente:

h1 {text-align: center;}

Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja
de Estilo, podemos modificar el aspecto de todos los elementos de esetipo en
todas las páginas de nuestro sitio. Esa es también su limitación: su utilidadse limita
al caso en que todos los elementos de un tipo tengan la misma apariencia encada una
de nuestras páginas. ¿Qué sucede si en ciertos casos queremos usar un párrafo con
características diferenciadas?.

8.2. Selectores de clases:

Solucionemos la cuestión anteriormente planteada: se puede conseguir que haya más

de un estilo para cada etiqueta HTML utilizando las clases. El selector de clases consta
de un punto (.) seguido por el nombre de la clase que hemos creado. Supongamos que
para publicar un reportaje queremos contar con un párrafo especial que
denominaremos "pregunta"; en nuestra hoja de estilo añadimos:

p.pregunta {font-weight: bold; font-style: italic;}

Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el supuesto
reportaje les agregamos el atributo CLASS dentro de la etiqueta de la página HTML:

<p class="pregunta">Esta es una pregunta del reportero</p>

Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas negritas para
diferenciarlos de los párrafos normales.

Página 18/42
 Lenguajes de marcas Tema 3. CSS

También se pueden especificar clases genéricas. En este caso se pone el nombre de

una clase tras el punto, pero no se indica por delante el nombre de ninguna etiqueta.
Cualquier etiqueta que utilice esa clase quedará afectada por su código CSS. Veamos un
ejemplo: en nuestra hoja de estilo añadimos:

.contraste {color: #FFFF00; background-color: #000000;}

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo

class="contraste". Para usarlo, en el documento html podríamos incluir, por ejemplo:

<h1 class="contraste">Un título con contraste</h1>

<p class="contraste">Un párrafo con contraste</p>
<ol class="contraste">Una lista con contraste</ol>

Ejemplo 6:

Supongamos el archivo misestilos.css cuyo contenido es:

h1 { color: red;}
p { color: blue;}
p.invertido { color: white;
background-color: black;}
.colorido { color: green;
background-color: yellow;}

Ahora supongamos el siguiente documento html:

<html lang="es">
<head>
...
<title>Ejemplo de estilos</title>
<link rel="stylesheet" href="misestilos.css" TYPE="text/css">
</head>
<body>
<h1>Título rojo (selector de tipos)</h1>

<p>Los párrafos son azules. Se usa un selector de tipos

para individualizarlos.</p>

<p class="invertido">Una clase de párrafo especial. La clase se llama "invertido"

y el selector es un selector de clases. El texto es blanco sobre fondo negro.</p>

<p class="colorido">Este párrafo usa otra clase llamada "colorido".

El fondo es amarillo y el texto es verde. Esta es una clase genérica
que se puede aplicar a cualquier elemento, no solamente a los párrafos. </p>

<p>Por ejemplo, una palabra en negrita (elemento B de HTML) se verá así:

<b>con negritas y texto azul,</b> pero un elemento B con el
atributo CLASS="colorido" se verá así: <b class="colorido">texto
en negrita, letras verdes y fondo amarillo</b>.</p>

<p>Otro ejemplo. Esta es una lista de la clase "colorido" que tiene</p>

<ul class="colorido">
<li>Texto en verde</li>
<li>Fondo amarillo</li>
</ul>

<p>Pero en el caso en que apliquemos la clase &quot;invertido&quot;

a una lista:</p>
<ul class="invertido">
<li>Esta no tendrá ningún efecto porque la clase &quot;invertido&quot;
se puede aplicar sólo a los párrafos.</li>
</ul>

Página 19/42
 Lenguajes de marcas Tema 3. CSS

</body>
</html>

Página 20/42
 Lenguajes de marcas Tema 3. CSS

La salida en pantalla será:

8.3. Selectores de ID:

Los selectores de id se parecen a los selectores de clases, pero sólo pueden aplicarse
a un elemento de la página. Esto se hace con el atributo id: no pueden existir dos
elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único.
En cualquier otro caso, se debería usar el atributo class en su lugar.

Sintaxis: en vez de usar un punto se utiliza el carácter # y en lugar de class se pone id.

Puedo definir: p.pregunta {……}

div.pregunta {……}
Pero no puedo definir: p#pregunta {……}
div#pregunta {……}

<html lang="es">
<head>
<style type="text/css">
#elemento1 { declaración de estilo }
...
</style>
</head>
<body>
<p id="elemento1"> Párrafo que aplica el estilo. </p>
...
</body>
</html>

Página 21/42
 Lenguajes de marcas Tema 3. CSS

Por ejemplo:
<html lang="es">
<head>
<style type="text/css">
h1#titulo1 {text-align: center;}
#inclinada {font-style: italic;}
</style>
</head>
<body>
<h1 id="titulo1">Título centrado</h1>
<p id="inclinada">Párrafo en cursiva</p>
</body>
</html>

En el primer caso, aquel elemento h1 con id="titulo1" de la página será centrado.

En el segundo, cualquier elemento que tenga asignado el atributo id="inclinada" irá en
itálica.

Los selectores de id no tienen la flexibilidad de los de clases, pero son una opción
para aquellos casos en que se necesite identificar de modo exclusivo un
determinado elemento de la página.

Veamos un ejemplo:
<h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
<h2>Capítulo 1.2</h2>
...
<h1>Capítulo 2</h1>
...
<h2>Capítulo 2.1</h2>
...
<h3>Capítulo 2.1.2</h3>
...
El código anterior podría hacer referencia a encabezados de cualquier documento
dividido en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la
siguiente manera:

<html lang="es">
<head>
<style type="text/css">
h1#capitulo1 {color:red; font-size: 150%; text-align: center;}
h2#capitulo1-1 {color:blue; font-size: 120%; font-style: italic;}
h2#capitulo1-2 {color:green; font-size: 115%; font-style: italic;}
h1#capitulo2 {color:yellow; font-size: 125%; text-align: center;}
h2#capitulo2-1 {color:orange; font-size: 90%; font-style: italic;}
h3#capitulo2-1-2 {font-size: 80%; font-style: italic;}
</style>
</head>

<body>
<h1 id="capitulo1">Capítulo 1</h1>
...
<h2 id="capitulo1-1">Capítulo 1.1</h2>
...
<h2 id="capitulo1-2">Capítulo 1.2</h2>
...
<h1 id="capitulo2">Capítulo 2</h1>
...
<h2 id="capitulo2-1">Capítulo 2.1</h2>
...
<h3 id="capitulo2-1-2">Capítulo 2.1.2</h3>

Página 22/42
 Lenguajes de marcas Tema 3. CSS

...
</body>
</html>

Veamos ahora un ejemplo genérico que combina los distintos selectores vistos
hasta ahora:

Ejemplo 7:

<html lang="es">
<head>
<title>Ejemplo estilos</title>
<style type="text/css">

p.clase1 { color: #0000FF; text-align: center; }

/* declaración de estilo para los párrafos de clase1 */

h2.clase2 { color: #FF0000; text-align: right; }

/* declaración de estilos para las cabeceras de tipo 2 y de clase2 */

h1#indent1 { color: #00FF00; text-align: center; }

/* declaración de estilos para la cabecera de tipo 1
que presente el identificador indent1 */
</style>
</head>

<body>
<h1>Cabecera de tipo 1 sin estilo </h1>
<h1 id="indent1">Cabecera de tipo 1 con el estilo único para este elemento (verde
y centrado)</h1>
<h2 class="clase2">Cabecera de tipo 2 con el estilo de clase2 (rojo y a la dcha)</h2>
<p>Párrafo sin ningún estilo</p>
<p class="clase1">Párrafo con el estilo de la clase1 (azul y al centro)</p>
</body>
</html>

8.4. La etiqueta span:

A veces se quiere dar estilo a un trozo de texto que no está comprendido en

ninguna etiqueta. Para poder hacerlo se usa span.

span puede usarse como un selector en una hoja de estilo, y también acepta los
atributos style, class e id.

Ejemplo:

<style type=”text/css”>
.clase1 { color:red; }
</style>
...
<p>En un lugar de <span class=”clase1”>La Mancha</span> de cuyo nombre
no quiero acordarme, no ha mucho que vivía...</p>

Sólo el texto “La Mancha” saldrá de color rojo.

Página 23/42
 Lenguajes de marcas Tema 3. CSS

8.5. La etiqueta div:

Un div (abreviatura de "división") es básicamente un contenedor. En él, podemos meter

cualquier clase de contenido, con la gran ventaja de que lo podemos manipular a nuestro
antojo con CSS, colocarlo en cualquier parte de la página, de cualquier tamaño, de
cualquier color, con bordes o sin ellos, con imágenes de fondo o sin ellas, etc. A diferencia
de las tablas, los divs no se dividen por dentro, pero podemos anidarlos y organizarlos casi
como las tablas (en caso de ser necesario).

Un div puede contener párrafos, encabezados, tablas, y aun otras divisiones (otros div).
Esto lo hace ideal para hacer diferentes clases de contenedores.

8.6. Selector universal:

El selector universal se escribe con un asterisco (*) y representa a cualquier

elemento de la página. Por ejemplo, con:

* {color: red} /* Se aplica a cualquier etiqueta HTML */

Todos los elementos de la página tendrán como color de primer plano el rojo.

Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra página
con determinadas propiedades generales.

8.7. Selectores descendientes o contextuales

Un selector descendiente selecciona los elementos que se encuentran dentro de otros

elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas
de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página
que se encuentren dentro de un elemento <p>:

p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector
descendiente, un elemento no tiene que ser "hijo directo" de otro. La única condición es
que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se
encuentre.
Al resto de elementos <span> de la página que no están dentro de un elemento <p>,
no se les aplica la regla CSS anterior.

Los selectores descendientes permiten aumentar la precisión del selector de tipo o

etiqueta. Así, utilizando el selector descendiente es posible aplicar diferentes estilos a

Página 24/42
 Lenguajes de marcas Tema 3. CSS

los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color
azul todo el texto de los <span> contenidos dentro de un <h1>:

p span { color: red; }

h1 span { color: blue; }

Con las reglas CSS anteriores:

• Los elementos <span> que se encuentran dentro de un elemento <p> se
muestran de color rojo.
• Los elementos <span> que se encuentran dentro de un elemento <h1> se
muestran de color azul.
• El resto de elementos <span> de la página, se muestran con el color por defecto
aplicado por el navegador.

La sintaxis formal del selector descendiente se muestra a continuación:

selector1 selector2 selector3 ... selectorN

Los selectores descendientes siempre están formados por dos o más selectores
separados entre sí por espacios en blanco. El último selector indica el elemento sobre el
que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se
debe encontrar ese elemento.
En el siguiente ejemplo, el selector descendiente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se
encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de
elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendiente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */

p, a, span, em { text-decoration: underline; }

/* El estilo es SOLO para los elementos "em" que están dentro de "p a span" */
p a span em { text-decoration: underline; }

Se puede restringir el alcance del selector descendiente combinándolo con el selector

universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color

rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a>
que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de

Página 25/42
 Lenguajes de marcas Tema 3. CSS

un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente

bajo un elemento <p>, no se cumple la condición del selector p * a.

9. Propiedades de las listas:

Las propiedades referentes a las listas son: 'list-style-type' 'list-style-image' 'list-style-

position’ 'list-style’.
Aquí sólo vamos a ver list-style-type. Para más información, consultar el manual de
referencia de CSS.

La propiedad list-style-type se aplica a elementos con 'display: list-item' y especifica la

apariencia del marcador de los elementos (items) de la lista si 'list-style-image' tiene el
valor 'none' o si la imagen señalada por el URL no puede ser mostrada.

Valores: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper- roman

| lower-greek | lower-latin | upper-latin | armenian | georgian | none
Por defecto: disc.

El valor 'none' especifica ningún marcador.

<style type="text/css">
ul.vacio {
list-style-type:none;
}
ul.circulorelleno {
list-style-type:disc;
}
</style>

<body>
…
<ul class="vacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulorelleno">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
…
</body>

10. Propiedades de las tablas:

En CSS disponemos de un método para generar o anular el espacio entre celdas

adyacentes por medio de la propiedad border-collapse.

Admite los valores: collapse | separate

• collapse: con este valor las celdas se colapsan completamente, tanto entre unas y
otras como con el borde de la tabla. La única separación que habrá será ladefinida
por la anchura de los bordes de celdas.

Página 26/42
 Lenguajes de marcas Tema 3. CSS

• separate: este valor indica que las medidas de border-spacing y de rellenos serán
aplicadas a las celdas de la tabla. Es el valor por defecto.

Prueba este ejemplo con una tabla y después quita la línea de border-collapse y vuelve a
probarlo:

table {
border-collapse: collapse; /* probar separate para ver la diferencia */
border-spacing: 10px;
border: red 5px dotted;
background-color: #FDD;
padding: 15px;
}
td, th {
border: 10px solid navy;
padding: 10px;
background-color: #DDF;
}

11. Pseudoelementos y Pseudoclases

11.1. Pseudoelementos

• El pseudo-elemento :first-line. Mediante este pseudo-elemento podremos acceder a la

primera línea visual del texto de un párrafo. Esta primera línea va a referirse a la
primera línea que produce el navegador al presentar el texto, de forma que acaba
cuando se produce la ruptura de la línea para pasar a la siguiente. Debemos tener
presente que no se trata de un elemento HTML real, es decir, no se define mediante
una etiqueta, tan sólo es interpretada por el navegador. Para especificar las propiedades
de este pseudo-elemento el selector estará compuesto del identificador del elemento y
a continuación los caracteres ":first-line".

Por ejemplo:

<style type="text/css">
body { font: 12pt Arial; }
p { color: red; }
p:first-line { color: blue; }
</style>
...
<p>Este es el primer párrafo del texto sobre el que hemos definido
un estilo para la primera línea mediante un pseudo-elemento.</p>
<p>Este es el segundo párrafo <br/>del texto sobre el que hemos
definido un estilo para la primera línea mediante un pseudo-
elemento.</p>

Sólo podremos aplicar el pseudo-elemento :first-line con las siguientes propiedades:

- propiedades relacionadas con las fuentes
- propiedades relacionadas con el color y el fondo
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height

Página 27/42
 Lenguajes de marcas Tema 3. CSS

- text-shadow
- clear

Página 28/42
 Lenguajes de marcas Tema 3. CSS

• El pseudo-elemento :first-letter. Este otro pseudo-elemento nos va a permitir dotar

de estilos a la primera letra de todo un bloque, por ejemplo, un párrafo de texto:

<style type="text/css">
body { font-family: Arial; }
p { font-size: 12pt;
line-height: 12pt;
color: red; }
p:first-letter { font-size: 250%;
font-weight: bold;
color: maroon;
background: salmon;
float: left; }
</style>
...
<p>Este párrafo de texto tiene definido un estilo para la primera
letra para que parezca una capitular caída. El tamaño es del
250%, con color marrón y fondo color salmón.</p>

Sólo podremos aplicar el pseudo-elemento :first-letter con las siguientes

propiedades:
- propiedades relacionadas con las fuentes
- propiedades relacionadas con el color y el fondo
- propiedades relacionadas con los márgenes
- propiedades relacionadas con el relleno o padding
- propiedades relacionadas con los bordes
- text-decoration
- vertical-align (solo si tiene definida la propiedad float con valor none)
- text-transform
- line-height
- text-shadow
- float
- clear

11.2. Pseudoclases
Las pseudoclases son unas clases especiales, que se refieren a algunos estados
especiales del elemento HTML. Las pseudoclases más utilizadas son las que se aplican a
la marca <a> (ancla). La sintaxis varía con respecto al concepto de clase visto
anteriormente:

a:pseudoclase {
propiedad: valor;
}

Es decir separamos el nombre de la marca HTML con dos puntos.

Las pseudo-clases :link y :visited

Las aplicaciones del usuario normalmente muestran los vínculos no visitados de un modo
diferenciado de aquellos previamente visitados. CSS proporciona las pseudo- clases ':link'
y ':visited' para distinguirlos:

• La pseudo-clase :link se aplica a los vínculos que aún no han sido visitados.
• La pseudo-clase :visited se aplica una vez que el vínculo ha sido visitado por el
usuario.

Página 29/42
Lenguajes de marcas Tema 3. CSS

Página 30/42
 Lenguajes de marcas Tema 3. CSS

Las pseudo-clases dinámicas :hover, :active, y :focus

Las aplicaciones del usuario interactivas a veces cambian el procesamiento en respuesta

a las acciones del usuario.

Se dice que una pseudoclase es dinámica, en el sentido de que un elemento puede

adquirir o perder una pseudo-clase a medida que el usuario interactúa con el
documento.

CSS proporciona tres pseudo-clases para los casos comunes:

• La pseudo-clase :hover se aplica mientras el usuario señala un elemento (con

algún dispositivo para apuntar – el elemento tiene el puntero del ratón encima),
pero no lo activa.
• La pseudo-clase :active se aplica mientras un elemento está siendo activado por
el usuario. Por ejemplo, el lapso durante el cual el usuario presiona el botón del
ratón y lo suelta.
• La pseudo-clase :focus se aplica mientras un elemento tiene el foco.

Un mismo elemento puede verse afectado por varias pseudo-clases diferentes de forma
simultánea: cuando se pulsa por ejemplo un enlace que fue visitado previamente, al enlace
le afectan las pseudo-clases :visited, :hover y :active. Debido a estacaracterística y al
comportamiento en cascada de los estilos CSS, el orden en quedefinimos las pseudoclases
es fundamental para su correcto funcionamiento (debe respetarse el orden: link-visited-
hover-active). El siguiente ejemplo muestra el único orden correcto para establecer las
cuatro pseudo-clases principales en un enlace:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Ejemplo 8:

Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener
un enlace:

<html lang="es">
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>

La hoja de estilo es:

a:link { background-color:#00ff00;
color:#ff0000; }
a:visited { background-color:#000000;
color:#ffffff; }
a:hover { background-color:#ff00ff;
color:#fffff; }
a:active{ background-color:#ff0000;

Página 31/42
 Lenguajes de marcas Tema 3. CSS

color:#ffff00; }

Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo verde:
a:link { background-color:#00ff00;
color:#ff0000;
}

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color
amarillo con fondo rojo:
a:active { background-color:#ff0000;
color:#ffff00;
}

Al pasar la flecha del ratón sobre algún enlace veremos que aparece de color blanco con
fondo lila:
a:hover { background-color:#ff00ff;
color:#fffff;
}

Por último todos los enlaces que hayamos hecho click deberán aparecer de color blanco
con fondo negro:
a:visited { background-color:#000000;
color:#ffffff;
}

Ejemplo 9:

Eliminar el subrayado a un enlace por medio de las pseudoclases.

<html lang="es">
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>

La hoja de estilo es:

a:link { text-decoration: none;
}
a:visited { text-decoration: none;
}

Es decir, configuramos la propiedad text-decoration con el valor none, por defecto está
configurada con el valor underline.

Tener en cuenta que podemos agrupar la regla de esta forma:

a:link, a:visited { text-decoration: none;
}

Se podrían poner estilos diferentes en la misma página:

a.tip1:link {……}
a.tip1:link {……}
…………
<a href = “#” class= “tip1”>
<a href = “#” class= “tip2”>

Página 32/42
Lenguajes de marcas Tema 3. CSS

Página 33/42
 Lenguajes de marcas Tema 3. CSS

12. El formato visual: propiedades de posicionamiento y visibilidad.

Hemos visto hasta ahora algunas propiedades (bordes, márgenes, rellenos) que pueden
aplicarse a las cajas y también las propiedades que definen su color/imagen de fondo.
Ahora vamos a ver cómo se puede definir el tipo y dimensiones de esas cajas, su
comportamiento y relación con las otras cajas en la estructura del documento.

Vamos a definir a qué denominamos “flujo de la página” o “flujo HTML”: es el flujo de

escritura de elementos dentro de la pantalla que nos presenta el navegador. El navegador,
va colocando en la página los elementos (definidos mediante etiquetas HTML) según los
va encontrando en el código.

Con HTML si, por ejemplo, una cabecera H1 va antes que una imagen, nunca vamos a poder
intercambiar sus posiciones y colocar la imagen detrás del H1 que le sigue en el código. Sin
embargo, en CSS sí puede modificarse el flujo normal del HTML. Por ejemploel valor
absolute del atributo position rompe el flujo de la página (saca del flujo de la página el
elemento).

12.1. La propiedad "display"

Especifica el modo en que van a visualizarse los elementos.

Valores: inline | block | list-item | run-in | compact | marker | table | inline-table | table-
row-group | table-header-group | table-footer-group | table-row | table-column- group |
table-column | table-cell | table-caption | none
Valor inicial: inline

Estos valores nos permiten alterar el comportamiento visual de los elementos de

la página, por ejemplo, haciendo que un elemento a nivel de línea en HTML (p.e.
<span>) se transforme en un elemento de bloque, de modo que cualquier texto
marcado con esa etiqueta comenzaría en una nueva línea. De igual modo, podríamos
hacer que cualquier elemento de bloque (por ejemplo <div>) se comporte como un
elemento de línea. A continuación se indica el significado de algunos de estos valores
(ver especificación para más detalles):
block
Este valor provoca que un elemento genere una caja de bloque principal
<span style="display: block;"> Este span ahora funciona como bloque </span>

inline
Este valor provoca que un elemento genere una o más cajas de línea
<div style="display: inline;"> Este div ahora funciona en línea </div>

list-item
Provoca que un elemento genere una caja de bloque principal y una caja de línea
list-item
marker
Este valor declara que el contenido generado antes o después de una caja será un
marcador
none
Este valor provoca que un elemento no genere ninguna caja (es decir, el
elemento no tiene ningún efecto sobre la composición) y los elementos
descendientes tampoco generan cajas. Hay que destacar que este valor no crea
una caja invisible sino que hace que el elemento desaparezca por completo. Esa
es la diferencia con las propiedades sobre visibilidad que provocan que un
elemento pueda ser invisible pero siga ocupando un espacio en la página.

Página 34/42
 Lenguajes de marcas Tema 3. CSS

run-in y compact
Estos valores crean cajas de bloque o de línea según el contexto y tienen un
comportamiento como el que conocemos para las listas de definiciones
table, inline-table, table-row-group, table-column, table-column-group,
table-header-group, table-footer-group, table-row, table-cell y table-
caption
Estos valores provocan que un elemento se comporte como un elemento tabla.

Veamos algunos ejemplos:

Fácilmente esta propiedad la podemos entender si inicializamos la marca p (párrafo) con

el siguiente valor:

p { display: inline; }

Luego si en la página HTML imprimimos dos párrafos, los mismos deberían aparecer en
la misma línea.

Aquí hay algunos ejemplos de la propiedad 'display':

p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* no muestra imágenes */

12.2. Elección de un esquema de posicionamiento: La propiedad "position"

Valores: static | relative | absolute | fixed

Valor inicial: static
Se aplica a: todos los elementos, no al contenido generado
No se hereda.

Con CSS los autores pueden ubicar los elementos de la página usando uno de estos
valores:

static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos

en la página. Quiere decir que los elementos se colocarán según elflujo normal
del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de
otra manera, static no provoca ningún posicionamiento especial de los elementos y
por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.

relative

Este valor indica que la posición de la caja se ajusta en relación a su posición normal
dentro de la página (su posición dependerá del lugar donde esté en el código HTML).
Las capas con posicionamiento relative, admiten los valores top, left, bottom y right
para definir la distancia a la que se colocan con respecto al punto donde esté en ese
momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los
elementos colocados después de las capas relative, tendrán en cuenta sus
dimensiones para continuar el flujo y saber dónde colocarse, sin embargo, no se
tendrá en cuenta los top, left, bottom o right configurados. Esto es: cuando una
caja X se posiciona relativamente, la caja

Página 35/42
 Lenguajes de marcas Tema 3. CSS

siguiente se sitúa como si X no se hubiera desplazado. Esto implica que el

posicionamiento relativo puede ocasionar que las cajas se superpongan.

absolute

El valor absolute en el atributo position permite posicionar elementos de manera

absoluta, es decir de manera definida por los valores de los atributos top, left,
bottom y right, que indican la distancia con respecto a un punto. Las capas o
elementos con posicionamiento absoluto se eliminan del flujo normal del HTML.
Por lo tanto los elementos posicionados absolutamente no están afectados por el
lugar donde aparezcan en el código HTML y tampoco tienen ninguna influencia sobre
la posición de las cajas siguientes que sí formen parte del flujo normal del HTML.

Los valores top, left, bottom y right se expresan con unidades css y son una
distancia con respecto al primer elemento contenedor que tenga un valor de
position distinto de static. Si todos los contenedores donde esté la capa
posicionada con position absolute (todos sus padres hasta llegar a BODY) son
static, simplemente se posiciona con respecto al lado superior de la página, para
el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en
el caso de utilizar right.

fixed

El posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única

diferencia es que para una caja posicionada de modo fijo, el bloque de contención
es establecido por el acceso visual (la pantalla del monitor) y elelemento no se
mueve cuando se realiza un desplazamiento. Esto significa que cuando se hace un
scroll en la página los elementos con position: fixed mantienen su posición en la
pantalla.

El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el espacio

disponible del navegador para la página). Si utilizamos top y left, estaremos
marcando su posición con respecto a la esquina superior izquierda y si utilizamos
bottom y right su posición será relativa a la esquina inferior derecha.

Hay que tener en cuenta que el atributo fixed en el navegador Internet Explorer sólo
funciona en la versión 7 y superiores.

Se puede ver algunos ejemplos en:

http://www.desarrolloweb.com/articulos/atributo-position-css.html

12.3. Uso de capas: la propiedad "z-index"

Al colocar los elementos en posiciones precisas dentro de la página, en algunos casos,

ciertos elementos pueden superponerse visualmente con otros. En estos casos, ¿cuál queda
por encima y cuál por debajo?. Por lo general, el navegador usa el mismo ordenque los
elementos tienen en la página para definir el orden en que son apilados. Este orden
dentro de la pila de elementos puede adjudicarse explícitamente con la propiedad z-index
utilizando un valor entero (cuanto más alto el entero, más cercano al lector o más arriba
en la pila). Se trata, por tanto, de definir el lugar de la caja respecto al eje z.

Cada caja pertenece a un contexto de apilamiento, en el cual tiene un entero como nivel
de pila (es su posición en el eje z en relación a otras cajas en el mismo contexto de
apilamiento).

Página 36/42
 Lenguajes de marcas Tema 3. CSS

Las cajas creadas con niveles de pila mayores son siempre procesadas encima de las
cajas con niveles de pila menores.

Las cajas pueden tener niveles de pila negativos.

Las cajas con el mismo nivel de pila en un contexto de apilamiento son apiladas de abajo
hacia arriba de acuerdo al orden en la estructura del documento.

Se dice que un elemento establece un contexto de pila al cual pertenecen todos sus
descendientes. En cada uno de esos contextos se establece un nuevo nivel de pila para
los elementos descendientes. Y aquí lo importante: el contexto de pila (¡no la propiedad z-
index!) es heredado y los elementos pertenecientes a distintos contextos no pueden
"mezclarse".

Página 37/42
 Lenguajes de marcas Tema 3. CSS

Ejemplo: si en una página encontramos dos elementos (A y B), uno con z-index=5 (A) y
el otro con z-index=3 (B), A será procesado encima de B. Supongamos ahora que A tiene
un descendiente (C) con z-index=0: el elemento C, por pertenecer al contexto depila del
elemento ubicado más arriba, también será procesado por encima de B (aunqueB tenga
z-index=3). Todos los elementos descendientes de A se ubicarán por encima de B (y
también por encima de todos los descendientes de B).

Esta propiedad se aplica solamente a los elementos posicionados (position:absolute,

position:relative, o position:fixed) y se pueden usar valores negativos.

Valores: auto | <entero>

Valor inicial: auto
Se aplica a: los elementos posicionados
Los valores tienen los siguientes significados:

<entero>
Este número es el nivel de pila de la caja. La caja también establece un contexto
de pila local en el cual su nivel de pila es '0'. Se pueden usar valores negativos.

auto
El nivel de pila de la caja generada es el mismo que el de la caja de su padre. La
caja no establece un nuevo contexto de pila local.
inherit Indica que hereda el de su elemento padre.

12.4. Flotantes: la propiedad 'float'

Un flotante es una caja que es desplazada a la izquierda o a la derecha en la

línea actual. Con float podemos indicar tanto left como right para que los elementos se
posicionen a la izquierda o la derecha, con el contenido que se coloque a continuación
rodeando al elemento flotante. Los valores de esta propiedad tienen los siguientes
significados:

Valores: left | right | none

Valor inicial: none
Se aplica a: todos menos los elementos posicionados y los contenidos generados
No se hereda.

left
El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye
sobre el costado derecho de la caja, comenzando en la parte superior.

right
Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja,
comenzando en la parte superior.

none
La caja no es flotante.

Ejemplo: los elementos de las listas aparecen siempre uno debajo de otro, en líneas
consecutivas. Pero podríamos cambiar ese comportamiento definiendo el siguiente estilo:
li { float: right; }

Página 38/42
 Lenguajes de marcas Tema 3. CSS

Ahora al aplicar el estilo el primer elemento aparece a la derecha del todo y los otros
elementos van colocándose en la misma línea en el siguiente espacio libre que haya.
Así, el segundo elemento se colocaría en la misma línea, todo a la derecha que se puede,
conforme al espacio que se tenga en el contenedor donde estén colocados.

<html lang="es">
<head>
<style type="text/css">
li { float: right; }
</style>
</head>
<body>
<ul>
<li>Texto1</li>
<li>Texto2</li>
<li>Texto3</li>
</ul>
</body>
</html>

12.5. La propiedad visibility

Además de las propiedades que controlan el posicionamiento de los elementos, CSS define
otras propiedades para controlar su visualización. Entre ellas se encuentra la propiedad
visibility:

visibility: determina la visibilidad de un elemento

[hidden | visible]

Inicialmente todas las cajas que componen la página son visibles. Empleando el valor
hidden es posible convertir una caja en invisible para que no muestre sus contenidos. El
resto de elementos de la página se muestran como si la caja todavía fuera visible,
por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora se
muestra un hueco vacío.

12.6. Anchura de un elemento: width

Mediante esta propiedad podremos especificar el ancho del contenido de los elementos
a nivel de bloque o de los elementos reemplazados (imágenes, controles de formularios
y objetos).

Admite los valores: <medida> | <porcentaje> | auto

• <medida>: Podremos especificar la anchura mediante un valor para el ancho que

no podrá ser negativo.

• <porcentaje>: El valor en porcentaje se calcula a partir del ancho de su bloque de

contención.

• auto: El valor para el ancho del elemento se ajustará al espacio horizontal disponible
y a los valores de bordes, márgenes y rellenos laterales que se hayan establecido. Es
el valor por defecto.

Se aplica a: todos los elementos, excepto los elementos de línea no reemplazados y las
filas de las tablas.

Página 39/42
 Lenguajes de marcas Tema 3. CSS

No se hereda.

El navegador puede interpretará de distinto modo el valor de width según el DTD de

HTML4 (Definición de Tipo de Documento) definido. En explorer, el valor strict provoca
que width se aplique al ancho del contenido, de forma que la anchura de la caja se
corresponde con dicho valor de width sumado a los valores de ancho de bordes y de
rellenos. En cambio, el valor transitional tiene como efecto que se aplique a toda la caja,
incluyendo el grosor del borde y del relleno, de modo que el contenido se ajusta al
espacio restante.

12.7. Altura de un elemento: height

Sus valores son los mismos que para width.

A partir de un valor de altura para un elemento definido mediante esta propiedad, si su

contenido precisa de mayor espacio vertical para representarse se produce el llamado
desbordamiento, es decir, el contenido aparecerá fuera de la caja.

Este efecto puede controlarse mediante la propiedad overflow, que estudiaremos más
adelante. Pero si no aplicamos esta propiedad, el contenido desbordado se superpone
sobre el siguiente elemento.

12.8. Control del desbordamiento de caja: overflow

Como ya hemos visto, es posible definir unas dimensiones para la caja de un elemento
mediante las propiedades height y width.

Pero el tamaño que tendrá la caja mediante estas propiedades puede no ser suficiente para
mostrar el contenido del elemento. En estos casos se dice que el contenido "desborda" la
caja. El control de este desbordamiento se realiza mediante la propiedad overflow (si no
aplicamos esta propiedad, dependiendo del navegador, se respetará en todo momento el
tamaño especificado -el contenido desbordado se superpone sobre el siguiente elemento-
o se modificará el tamaño de caja ampliándola para mostrar completamente el contenido,
sin desbordamientos).

La propiedad overflow nos permitirá hacer accesible el contenido desbordado.

Admite los valores: visible | hidden | scroll | auto | inherit

• visible: si el contenido desborda la caja de bloque, este no se recorta. Es el valor

por defecto.
• hidden: este valor impide que se muestre el contenido que desborde la caja de
bloque, es decir, se recorta, de forma que queda inaccesible.

• scroll: este valor también impide que el contenido aparezca fuera de las dimensiones
de la caja, pero facilita la barra de deslizamiento para permitir al usuario acceder
al contenido desbordado (la barra de scroll o deslizamiento horizontal y vertical
aparecerán esté o no el contenido desbordado).

• auto: este valor deja en manos del navegador el comportamiento para el

desbordamiento, aunque debe facilitar la barra de scroll para acceder al contenido
desbordado.

Página 40/42
 Lenguajes de marcas Tema 3. CSS

• inherit: se hereda el valor de la propiedad definida anteriormente.

Página 41/42
 Lenguajes de marcas Tema 3. CSS

Prueba el siguiente ejemplo:

Ejemplo 10:

<h1>Título de la Página</h1>

<p style="width: 50%; height: 80px; background: skyblue; color: green; overflow:
visible;">visible En un lugar de la Mancha, <br/> de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco
y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas
de velludo para las fiestas con sus pantuflos de lo mismo</p> <br />

<p style="width: 50%; height: 80px; background: pink; color: green; overflow:
hidden;">hidden En un lugar de la Mancha, <br/> de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco
y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas
de velludo para las fiestas con sus pantuflos de lo mismo</p> <br />

<p style="width: 50%; height: 80px; background: yellow; color: green; overflow:
scroll;">scroll En un lugar de la Mancha, <br/> de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco
y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas
de velludo para las fiestas con sus pantuflos de lo mismo</p> <br />

<p style="width: 50%; height: 80px; background: grey; color: green; overflow:
auto;">auto En un lugar de la Mancha, <br/> de cuyo nombre no quiero acordarme, no ha mucho
tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y
galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas
de velludo para las fiestas con sus pantuflos de lo mismo</p> <br />

<p>Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no
llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la
podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años, era de complexión
recia, seco de carnes, enjuto de rostro; gran madrugador y amigo de la caza.</p> <br />

Página 42/42