Tema 2

CSS: Cascading Style Sheet

Módulo Lenguajes de Marcas y Sistemas de Gestión de Información

Lenguajes de Marcas CFGS; Tema2:CSS

© Gerardo Martín Esquivel, 2.012
© Alejandro Fernández Martín, 2017
Algunos derechos reservados.
Este trabajo se distribuye bajo la Licencia "Reconocimiento-No comercial-
Compartir igual 3.0 Unported" de Creative Commons disponible en
http://creativecommons.org/licenses/by-nc-sa/3.0/

Índice de contenido
Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2Estructura y sintaxis...........................................................................................................................3
2.1Estructura y sintaxis....................................................................................................................3
2.1.1Notas sobre sintaxis............................................................................................................4
2.1.2CSS incrustado o CSS interno............................................................................................4
2.2El árbol del documento fuente....................................................................................................6
2.3Formato de valores......................................................................................................................8
2.3.1Colores................................................................................................................................8
2.3.2Medidas...............................................................................................................................9
2.3.3URL.....................................................................................................................................9
2.4Selectores..................................................................................................................................11
2.4.1Selectores Simples.............................................................................................................11
2.4.2Selectores específicos........................................................................................................11
2.4.3Selectores de clase.............................................................................................................11
2.4.4Selectores compuestos......................................................................................................12
2.4.5NUEVO EN CSS3............................................................................................................12
2.4.6Selectores de atributos......................................................................................................12
2.4.7NUEVO EN CSS3............................................................................................................14
2.4.8Pseudo-elementos..............................................................................................................14
2.4.9NUEVO EN CSS3............................................................................................................15
2.4.10Pseudo-clases..................................................................................................................16
2.4.11Especificidad de un selector............................................................................................17
2.5Propiedades modificables con CSS..........................................................................................19
2.5.1Propiedades para color y fondo.........................................................................................19
2.5.2Propiedades para la fuente................................................................................................20
2.5.3Propiedades del texto........................................................................................................21
2.5.4Propiedades resumidas......................................................................................................21
2.6Listas.........................................................................................................................................23
2.7Tablas........................................................................................................................................23
2.8Modelo de Cajas.......................................................................................................................25
2.8.1Propiedades para el margen..............................................................................................25
2.8.2Propiedades para el relleno...............................................................................................26
2.8.3Propiedades para el borde.................................................................................................27
Grosor del borde...................................................................................................................27
Color del borde.....................................................................................................................27
Estilo del borde.....................................................................................................................27
2.8.4Formato visual (control de flujo de cajas).........................................................................28
2.8.5Flujo Normal.....................................................................................................................32
2.8.6Posicionamiento Relativo.................................................................................................32
2.8.7Flotantes............................................................................................................................33
2.8.8Posicionamiento Absoluto.................................................................................................33
2.8.9Posicionamiento Fijo.........................................................................................................34
2.9Contadores................................................................................................................................35
2.9.1Contadores anidados.........................................................................................................36
2.10Tipos de medios......................................................................................................................39
2.10.1Reglas específicas para medios paginados......................................................................41
2.10.2Las cajas de página y sus márgenes................................................................................42
2.11Interfaz de usuario...................................................................................................................44

I.E.S Julio Verne Página 2 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2 Estructura y sintaxis
2.1 Estructura y sintaxis
Una hoja de estilo define la presentación de un documento, con independencia de su estructura. Si
en el tema anterior usamos HTML para definir la estructura, en este tema usaremos CSS
(Cascading Style Sheet - Hoja de estilo en Cascada) para definir la presentación.
Por supuesto que existen otros lenguajes de estilo; elegimos CSS porque está definido por la W3C .
Una hoja de estilo estará siempre ligada a un documento principal (que puede ser HTML o XML,
etc) al que llamaremos documento fuente.
Una hoja de estilo CSS comienza con una cabecera compuesta por las llamadas reglas @, que
aportan información sobre el contenido de la propia hoja, como por ejemplo la codificación de
caracteres:
@charset "UTF-8"; (ojo con el punto y coma)
Las reglas @ comienzan siempre por este carácter y terminan con un punto y coma (;).

Después de la cabecera tenemos el grueso de la hoja de estilo, que se dedica a describir la

presentación que queremos aplicar a nuestro documento fuente. Será una secuencia de sistemas de
reglas de este tipo:
selector {
propiedad1: valor;
propiedad2: valor;
/* ......... */
propiedadN: valor;
}
Selector: indica el elemento (o elementos) del documento fuente a los que queremos aplicar estilo.
Por ejemplo: un párrafo HTML o una imagen
Propiedad: característica que queremos modificar. Por ejemplo: tamaño de letra o color.
Valor: que queremos que tome la característica. Por ejemplo: 1 cm o rojo.
Declaración: pareja propiedad : valor
Bloque de declaraciones: lista de declaraciones separadas por punto y coma (;) y encerrada entre
llaves {}
Sistema de reglas: selector seguido de un bloque de declaraciones
EJEMPLO DE SISTEMA DE REGLAS:
P {
color: blue;
background-color: red;
}
Puesto que el selector es P, las reglas se aplican a todos los párrafos del documento fuente. La
primera propiedad (color) hace referencia al color del texto y lo establece en azul. La segunda
propiedad (background-color) hace referencia al color de fondo y lo establece en rojo.

I.E.S Julio Verne Página 3 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.1.1 Notas sobre sintaxis

➢ No puede haber reglas @ dentro de un bloque {}, ni después de un sistema de reglas.
Las reglas @ sólo se permiten al principio.
➢ CSS no distingue entre mayúsculas y minúsculas, salvo para elementos externos.
Esto significa que en los elementos externos a CSS (nombres de ficheros, selectores)
tendremos que atenernos a sus propias reglas. Por ejemplo, HTML no distingue
mayúsculas y minúsculas, pero XML si.
➢ Un error en el selector invalida todo el sistema de reglas.
➢ Un error en una propiedad o en un valor anula sólo la declaración implicada,
aplicándose el resto de reglas del mismo sistema.
➢ Si aparecen dos o más declaraciones sobre la misma propiedad se quedará con la
última que pueda aplicar. Sabiendo esto podemos usarlo para asignar valores que son
soportados por algunos agentes de usuario y no son soportados por otros.
➢ Las palabras reservadas (propiedades o valores) que comienzan por guión (-) o guión
bajo (_) son añadidos de los navegadores que no funcionarán en otras aplicaciones.
La W3C recomienda no usarlas. (los añadidos de Iexplore comienzan por mso-, los
de Mozilla por -moz-, los de Opera por -o-)
➢ Cuando usemos números reales, el separador decimal será el punto (.)
➢ Al igual que en HTML podemos encerrar las cadenas entre comillas dobles o
simples, pero sin mezclar ambas.
➢ El carácter de escape (\) se antepone a los caracteres especiales o saltos de líneas
para forzar a que se ignoren. Por ejemplo, la secuencia \{ "libera" al corchete de su
significado especial en CSS.
➢ El carácter de escape (\) se antepone a números hexadecimales para incluir la
correspondiente entidad de caracteres según la tabla ISO 10646, equivalente a
Unicode. Si tras el número viene otro carácter hexadecimal tendremos que marcar su
final, bien con un espacio en blanco, bien forzando su tamaño a 6 dígitos con ceros a
la izquierda.
➢ Los comentarios CSS se encierran entre /* y */ No son anidables (o sea, no se
permiten comentarios dentro de comentarios). Si nuestro código CSS está incrustado
en un elemento STYLE de HTML entonces los comentarios se encierran entre <!-- y
-->
Téngase en cuenta que la consecuencia de los errores será una salida distinta de la que esperábamos,
pero no recibiremos avisos. Podemos evitar los errores de sintaxis con las herramientas para
autocompletar que ofrecen algunos entornos como Eclipse.
2.1.2 CSS incrustado o CSS interno
Llamamos hoja de estilo externa a la que definimos en un fichero separado, con la extensión .css y
que tendremos que relacionar de alguna manera con el documento fuente al que aplica el estilo (en
HTML lo hacíamos con un elemento LINK, véase el tema anterior):
<LINK href="fichero.css" rel="stylesheet" type="text/css">

NOTA: Se puede especificar la codificación de caracteres de la hoja de estilo desde el documento

fuente con el atributo charset del elemento LINK.

I.E.S Julio Verne Página 4 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

También se puede aplicar estilo CSS dentro del propio documento HTML, incrustado. No es lo más
adecuado cuando perseguimos la separación estructura/presentación, pero en algún caso puntual
puede ser útil.
Si pretendemos dar estilo a un elemento concreto usamos el atributo style:
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY>
<P style="color:blue">Mi párrafo</P>
</BODY>

pero también podemos incluir un sistema de reglas completo en el elemento STYLE, dentro de la
cabecera:
<HEAD>
<STYLE type="text/css">
P {
color: blue;
background-color: red;
}
</STYLE>
</HEAD>

I.E.S Julio Verne Página 5 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.2 El árbol del documento fuente

El documento fuente es el que define el contenido, aquel contenido al que pretendemos
aplicar estilo con CSS. En los ejemplos de este tema el documento fuente estará escrito en HTML,
pero debe quedar claro que se puede aplicar estilo CSS a documentos fuente escritos en otros
lenguajes de marcas. A lo largo de este curso lo haremos con también con documentos XML.
En cualquier caso, el documento fuente tendrá siempre una estructura arbórea con una sola raíz, en
la que cualquier nodo puede tener un sólo padre pero indefinidos hijos.
Dado un documento fuente, CSS lo primero que hará será construir el árbol asociado. El árbol
correspondiente a un documento HTML podría ser el siguiente:

HTML

HEAD BODY

META TITLE H1 H2 P P

A IMG

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=UTF-8">
<TITLE>Documento HTML básico</TITLE>
</HEAD>
<BODY>
<H1>IES Julio Verne</H1>
<H2>Introducción</H2>
<P>El <A href=”http://www.iesjulioverne.es”>Instituto Julio
Verne</A> se encuentra en el Barrio Pino Montano de Sevilla.</P>
<P><IMG alt="imagen de la fachada" src="fachada.png"></P>
</BODY>
</HTML>
NOTA 1: Si hemos hecho una indentación correcta, veremos que todos los elementos HTML que
son hermanos en el árbol, comienzan en la misma columna del documento.

NOTA 2: Obsérvese que la declaración del tipo del documento (DOCTYPE) no tiene un nodo en el

I.E.S Julio Verne Página 6 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

árbol. Sólo los elementos HTML forman parte del árbol.

La estructura en árbol da lugar a una serie de conceptos que, aunque son muy intuitivos, señalamos
a continuación para ratificarlos:
➢ raíz: nodo primero del que cuelga todo el árbol. Es el único nodo que no tiene padre.
➢ padre: (de un nodo) aquel inmediatamente superior al que está ligado. Todos los
nodos del árbol tienen uno y sólo un padre (salvo el nodo raíz que no tiene padre)
➢ hijo: (de un nodo) aquellos inmediatamente inferiores a los que está ligado. Cada
nodo puede tener un número ilimitado de hijos o puede no tener ninguno. (los nodos
sin hijos se llaman hojas)
➢ descendiente: (de un nodo) el hijo, el hijo de sus hijos, etc.
➢ antepasado: (de un nodo) el padre, el padre de su padre, etc.
➢ hermanos: los que comparten un mismo padre. Puesto que el orden de los hermanos
importa, se distingue entre hermanos precedentes (los que están a su izquierda),
hermanos siguientes (los que están a su derecha) y hermanos adyacentes (los que
están seguidos, sin otros hermanos entre ellos)
➢ nodo precedente: (de un nodo) el que es su antepasado o su hermano precedente.
➢ nodo siguiente: (de un nodo) el que es su descendiente o su hermano siguiente.

I.E.S Julio Verne Página 7 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.3 Formato de valores

2.3.1 Colores
Tenemos múltiples formas de expresar un color en CSS. En la siguiente tabla aparecen dos de ellas,
mediante palabras reservadas o mediante el valor RGB hexadecimal que expresa con dos dígitos
hexadecimales los valores rojo, verde y azul.
PALABRA VALOR RGB PALABRA VALOR RGB
RESERVADA RESERVADA
aqua #00ffff olive #808000
black #000000 orange #ffa500
blue #0000ff purple #800080
fuchsia #ff00ff red #ff0000
gray #808080 silver #c0c0c0
green #008000 teal #008080
lime #00ff00 white #ffffff
maroon #800000 yellow #ffff00
navy #000080 transparent sin valor RGB

Si deseamos expresar los valores RGB en decimal usamos la siguiente notación:

rgb(x, y, z)
donde x, y, z son números de 0 a 255.
En porcentajes:
rgb(x%, y%, z%)
donde x, y, z son números de 0 a 100.
Hexadecimal abreviado:
#xyz
donde x, y, z son dígitos hexadecimales y el color correspondiente sería el equivalente a:

I.E.S Julio Verne Página 8 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

#xxyyzz

También podemos utilizar el sistema RGBA que incluye la opacidad del color en un valor que va de
0 a 1, siendo 1 totalmente opaco y 0 totalmente transparente
color: rgba(255,0,10,0.5);

2.3.2 Medidas
Las medidas se expresan mediante un número seguido de la unidad (la unidad es opcional si el
número es 0). Disponemos de unidades absolutas (que sólo serán útiles cuando conozcamos las
propiedades físicas del medio de salida) y de propiedades relativas:
TIPO DE MEDIDA UNIDAD SIGNIFICADO
in inch (pulgadas)
mm milímetros
absolutas cm centímetros
pt puntos (1/72 pulgadas)
pc picas (1/6 pulgadas)
em tamaño de fuente
relativas ex altura de la x minúscula
px píxeles
porcentaje %

EJEMPLO:
P { margin: 2cm; }
Establece los márgenes del párrafo en 2 centímetros.
Cuando se utilicen medidas relativas, hay que tener en cuenta la herencia de las propiedades en
CSS. Cuando se establece una propiedad en un elemento, todos sus descendientes heredan dicha
propiedad. Por lo tanto, si utilizamos valores relativos, éstos se calculan en función del elemento en
el que están contenidos.
BODY {font-size: 10px;}
P {font-size: 2em;}
Como el tamaño de letra se ha establecido en BODY a 10px y P está contenido en BODY, el tamaño
de letra en P será de 10 x 2 = 20px.

2.3.3 URL
En ocasiones, desde CSS tendremos que hacer referencia a otros ficheros. La sintaxis para incluir
estas referencias es la siguiente:
url("fichero.css")
EJEMPLO:

I.E.S Julio Verne Página 9 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

@import url("fichero.css");
Es una regla @ que incluye reglas de estilo definidas en otro fichero.
NOTA: Si la URL incluye caracteres especiales como espacios, paréntesis, coma, comilla simple o
comillas dobles, tendremos que "escaparlos" con el carácter (\).

NOTA: Las URLs relativas se refieren a la carpeta donde se encuentra la hoja de estilo y no a la
localización del documento fuente.

I.E.S Julio Verne Página 10 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.4 Selectores
Los sistemas de reglas CSS comienzan con un selector que indica el elemento del documento fuente
al que se aplicará la regla. Los selectores pueden ser muy variados y complejos y es aquí donde
radica la potencia de CSS.
2.4.1 Selectores Simples
➢ Selector universal: Se denota con un asterisco (*) y significa que las reglas se
aplicarán a todos los elementos del documento.
➢ Cualquier elemento HTML: Las reglas se aplicarán a todas las ocurrencias de ese
elemento HTML en el documento.
EJEMPLO:
* {
font-family: serif;
} /* indica la fuente para todos los elementos del documento */

LI {
font-family: serif;
} /* indica la fuente para todos los elementos de listas */

2.4.2 Selectores específicos

➢ Un selector simple seguido del símbolo almohadilla (#) y seguido de un
identificador: La regla se aplica al elemento indicado siempre que tenga un atributo
id cuyo valor corresponda al identificador.
EJEMPLO:
IMG#logo {
margin: 2cm;
}
se lee: "el IMG de nombre logo" (el identificador se establece con el atributo id de HTML como
vimos en el tema anterior):
<IMG id="logo">
NOTA: Se puede omitir el elemento quedando #identificador

2.4.3 Selectores de clase

➢ Un selector simple seguido de un punto (.) y seguido de un nombre de clase: La
regla se aplicará a todos los elementos indicados que tengan un atributo class cuyo
valor incluya al identificador.
EJEMPLO:
IMG.playa {
margin: 2cm;
}
se lee "los IMG de la clase playa" (la clase se establece con el atributo class de HTML como vimos
en el tema anterior):
<IMG class="playa">
o bien:

I.E.S Julio Verne Página 11 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

<IMG class="familia playa">

en este último caso el elemento IMG pertenece a dos clases: familia y playa.
NOTA: En el selector se pueden especificar varias clases. Por ejemplo IMG.playa.familia afecta a
todas las imágenes que son simultáneamente de la clase playa y de la clase familia.
2.4.4 Selectores compuestos
➢ Varios selectores separados por comas: Las reglas se aplicarán a cada uno de los
selectores incluidos.
LI, P {
font-family: serif;
}
Afecta a todos los párrafos y a todos los elementos de lista.
➢ Varios selectores separados por espacios: descendientes
LI P {
font-family: serif;
}
se lee "los P que son descendientes de LI". Obsérvese que se lee hacia atrás o, dicho de otro modo,
los elementos finales a los que afectan las reglas son los que están inmediatamente antes de la llave
de apertura ({).
➢ Varios selectores separados por el signo "mayor que" (>): hijos
OL > LI {
font-family: serif;
}
se lee "los LI que son hijos de OL". La regla se aplicará a los elementos de listas ordenadas.
➢ Varios selectores separados por el signo "más" (+): hermanos adyacentes
H1 + P {
font-family: serif;
}
se lee "los P que siguen inmediatamente a H1". La regla se aplicará al primer párrafo justo después
de un encabezado de primer nivel.
2.4.5 NUEVO EN CSS3
CSS3 ha introducido una serie de selectores nuevos.
➢ Selector general de hermanos (SS1 ~ SS2)
Se selecciona a cualquier elemento SS2 que sea hermano de SS1 sin importar cuándo aparezca,
siempre que aparezcan después del elemento SS1.
H1 ~ P {
font-family: serif;
}
Selecciona cualquier P hermano de H1 que aparezca después en el código HTML.
2.4.6 Selectores de atributos
Los selectores de atributo permite seleccionar elementos del documento fuente en función de sus

I.E.S Julio Verne Página 12 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

atributos o los valores de estos.

CÓDIGO SE LEE
SS1[atrib] Los SS1 que tengan el atributo atrib
SS1[atrib=valor] Los SS1 que tengan el atributo atrib con el valor indicado
SS1[atr~=val] Los SS1 con el atributo atr y valor una lista entre espacios que incluye val
SS1 [atr|=val] Los SS1 con atributo atr y valor que empieza por val- ó valor 'val' . (val
tiene que ser una sola palabra o al menos estar separada por - ). El
contenido del atributo debe ser de un solo valor.
EJEMPLO:
H3[title] {
text-decoration: underline;
}
subraya los encabezados de nivel 3 que tengan un atributo title como <H3 title="algo">
EJEMPLO:
IMG[alt=logo] {
background: gray;
}
establece color de fondo gris para las imágenes con un atributo alt con el valor logo como <IMG
alt="logo">
EJEMPLO:
A[rel~=copyright] { ... }
afecta a los enlaces que tengan en el atributo rel el valor copyright entre otros, como en <A
rel="copyright copyleft copyeditor"...>
EJEMPLO:
A[class~=ejemplo] { ... }
afecta a los enlaces que sean de la clase ejemplo como <A class=”uno ejemplo dos”>
NOTA: Obsérvese que este último ejemplo es equivalente a A.ejemplo {...}. Podríamos decir que el
punto es una forma abreviada de este selector de atributo pero que sólo vale para el atributo class.
EJEMPLO:
CITE[lang|=en] {
...
}
afecta a todas las citas en inglés como <CITE lang="en-us"> ó <CITE lang="en">
EJEMPLO:
H3+TABLE[width] TH {
text-align: right;
}
Alinea a la derecha las celdas de encabezamiento de las tablas que vayan justo a continuación de un
encabezado de nivel 3, si la tabla tiene fijada la anchura.

I.E.S Julio Verne Página 13 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.4.7 NUEVO EN CSS3

Existen 3 nuevos selectores:
CÓDIGO SE LEE
SS1[att^=val] Los SS1 cuyo atributo comienza por...
SS1[att$=val] Los SS1 cuyo atributo termina en…
SS1[att*=val] Los SS1 cuyo atributo contiene...

Ejemplos:
A[href^⁼”http://”]{….}
Todos los enlaces cuyo atributo href comienza por http://
A[href$=”.doc”{...}
Todos los enlaces cuyo atributo href termina en .doc
INPUT[name*=”sev”]{ … }

Todos los input cuyo atributo name contengan sev

El módulo de selectores de CSS3 se puede considerar como estable y es soportado por la mayoría
de los navegadores.

2.4.8 Pseudo-elementos
Permiten apuntar a partes no estructuradas del documento fuente
CÓDIGO SE LEE
SS1:first-line La primera línea de los SS1. Solo se aplica a elementos de bloque
SS1:first-letter La primera letra de los SS1. Solo se aplica a elementos de bloque
SS1:first-child El elemento SS1 que sea el primer hijo de su padre
EJEMPLO:
P:first-line {
text-transform: uppercase;
}
mostrará en mayúsculas las letras de la primera línea
NOTA: El final de la primera línea dependerá en cada momento de las dimensiones de la ventana,
resolución de pantalla, etc. y esta propiedad se ajustará automáticamente al cambiar el tamaño de la
ventana.
EJEMPLO:
P:first-letter {
font-size: 200%

I.E.S Julio Verne Página 14 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

}
mostrará la primera letra de cada párrafo con el doble de tamaño del resto del párrafo.

CÓDIGO CONSECUENCIA
SS1:before añade contenido al principio de los SS1. El contenido a añadir será el valor
de la propiedad content
SS1:after añade contenido al final de los SS1. El contenido a añadir será el valor de
la propiedad content
El contenido generado tomará las propiedades del elemento, si bien se le pueden añadir más
EJEMPLO:
A[href]:before {
content: “Enlace para pinchar: “;
text-decoration: underline;
}
Aparecerá el texto subrayado "Enlace para pinchar:" delante de cada origen de enlace.
EJEMPLO:
P:after {
content: “:) ”;
}
Aparecerá el texto ":)" tras cada uno de los párrafos.
NOTA: El contenido generado pasa a ser parte del elemento para posteriores referencias. Esto quiere
decir que si añadimos un texto delante de un párrafo con :before y posteriormente alteramos la
primera letra del párrafo con :first-letter, la letra que se verá afectada es la primera del contenido
generado, no la primera del párrafo.
2.4.9 NUEVO EN CSS3
En CSS3 se mantienen los mismos pseudoelementos pero cambia la sintaxis. Ahora se escriben de
la siguiente forma:
::first-line ::first-letter ::before ::after
Nota: No se incluyen nuevos elementos que no vayan a ser estandarizados, como ::selection.
En CSS3 aparecen más de 20 nuevos pesudo-elementos:

CÓDIGO CONSECUENCIA
SS1:nth-child(nº) El elemento SS1 que sea el hijo n.º-enésimo.
(7)(7n)(odd)(even)
SS1:nth-last-child(nº) El elemento SS1 que sea el hijo n.º-enésimo empezando por el
final
SS1:empty El elemento SS1 pero que no tenga ningún tipo de contenido
SS1:last-child El elemento SS1 que sea el último hijo

I.E.S Julio Verne Página 15 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

SS1:nth-of-type(nº) El elemento SS1 que sea el enésimo de ese tipo dentro del padre
SS1:nth-last-of-type(nº) Igual que el anterior pero contando desde el final
SS1:only-child El elemento SS1 que es hijo único de su padre
INPUT:valid El elemento INPUT que tenga un valor válido (html5)
INPUT:invalid El elemento INPUT que no tenga un valor válido (html5)
INPUT:enabled Todos los elementos INPUT que estén habilitados
INPUIT:checked Todos los elementos INPUT que estén marcados
SS1:empty Todos los elementos SS1 que no tengan contenido
INPUT:in-range Todos los elementos INPUT que tengan un valor establecido
dentro del rango de valores válidos establecidos (html5)
SS1:only-of-type El elemento SS1 que sea el único hijo de ese tipo de su padre
INPUT:optional Elemento INPUT que NO tenga establecido required
INPUT:read-only Elemento INPUT que tenga establecido readonly
INPUT:write-read Elemento INPUT NO que tenga establecido readonly
INPUT:required Elemento INPUT que tenga establecido required
Nota: Se pueden utilizar expresiones como nth-of-type(2n+1) o
s1:not(expresión) Selecciona los elementos s1 que no cumplan la
expresión

Para más información visita https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS

Ejemplo:
P:last-child{
background-color:blue;
}
Selecciona a todos los párrafos que son últimos hijos de sus padres

p:not(.dato){
color:red;
}
Selecciona a todos los párrafos que no pertenezcan a la clase dato

2.4.10Pseudo-clases
Permiten elegir elementos según características que no se deducen de la estructura del documento
fuente, sino de las acciones del usuario.
CÓDIGO CONSECUENCIA
A:link Afecta a los enlaces que aún no han sido visitados por el usuario
A:visited Afecta a los enlaces que ya han sido visitados por el usuario

I.E.S Julio Verne Página 16 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

SS1:hover Afecta a los SS1 mientras se están señalando con un dispositivo apuntador
SS1:active Afecta a los SS1 mientras están activos (entre click y soltar)
SS1:focus Afecta a los SS1 mientras tienen el foco
El orden de estas reglas es importante: Si usamos :link después de :hover para un mismo elemento,
quedará anulado el efecto de :hover.
Se pueden combinar las pseudo-clases: :focus:hover (la regla se aplicará sólo si se dan ambos al
mismo tiempo: que tenga el foco y que se esté señalando)

2.4.11 Especificidad de un selector

Cuando las reglas entran en contradicción (dos o más reglas afectan a la misma propiedad del
mismo elemento y con indicaciones distintas) se resuelve de la siguiente forma: tiene prioridad la
regla que sea más específica y en caso de empate, la que se le lea después, aunque siempre tiene
mayor peso la regla que esté incluida como atributo de estilo HTML (style) (aunque las
pseudoelementos first-letter, first-line tiene más prioridad)

EJEMPLO: Supongamos el siguiente elemento HTML

<P style="color:blue" class="c1 c2" id="miParrafo">
y el siguiente código CSS aplicado sobre el elemento anterior. Puede comprobarse que todos los
selectores afectarían a nuestro elemento y además todas las reglas son contradictorias pues
establecen colores distintos para el texto de nuestro párrafo.
P#miParrafo {
color: brown;
} /*tercero*/

P.c1.c2 {
color: yellow;
} /*cuarto*/

P.c1:first-line {
color: black;
} /*primero*/

P[id] {
color: aqua;
} /*quinto*/

P.c1 {
color: purple;
} /*quinto */

P {
color: red;

I.E.S Julio Verne Página 17 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

} /*sexto*/

P {
color: green;
} /*sexto*/
En este ejemplo el texto del párrafo sería negro pues aunque la regla que más prioridad tiene es la
que aparece en el código HTML, con el atributo style, el pseudoelemento first-line tiene mayor
prioridad. Puede observarse que tienen mayor prioridad cuanto más específicas son.
En algunos casos vemos que hay varias reglas con la misma prioridad, porque son igual de
específicas. En estos casos quedará el efecto de aquella regla que está escrita más abajo porque
anula a la anterior.

I.E.S Julio Verne Página 18 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.5 Propiedades modificables con CSS

2.5.1 Propiedades para color y fondo

PROPIEDAD FUNCIÓN VALOR OBSERVACIONES

color Color del texto color
1 totalmente opaco, 0 totalmente
opacity Transparencia 0-1
transparente
background-color Color del fondo color
Conviene indicar también un color
de fondo para las zonas
background-image Imagen de fondo url
transparentes de la imagen y por si
no se encuentra la imagen
repeat La repite horizontal y verticalmente
Mosaico con repeat-x La repite horizontalmente
background-repeat repeticiones de la
imagen repeat-y La repite verticalmente
no-repeat Sólo aparece una vez
scroll Se desplaza con el bloque
background-attachment
fixed Fija respecto del acceso visual
0% indica limite izquierda o arriba
porcentaje
100% indica limite derecha o abajo
medida desde la esquina superior izquierda
Alineación de la top
background-position imagen dentro de uno o dos valores, se pueden
bottom mezclar con medidas y porcentajes
la caja (relleno)
left cuando sólo hay un valor, el valor
right que falta se supone centrado

center

I.E.S Julio Verne Página 19 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.5.2 Propiedades para la fuente

PROPIEDAD FUNCIÓN VALOR OBSERVACIONES

toma la primera disponible, se recomienda
lista entre que la última sea genérica. Las genéricas de
font-family comas de CSS son serif (como times), sans-serif
familias (como helvética), cursivo, fantasia y
monospace
normal estos nombres cambian según la BD que
italic acompaña a la fuente; si no se dispone de
font-sytle
italic, intentará oblique (simulación por
oblique software de itálica)
normal
font-variant Versalitas: minúsculas con aspecto de
small-caps
mayúsculas pero más pequeñas
100|
la única garantía es que cada uno es igual o
200|....|
más oscuro que el anterior.
900

font-weight grosor normal como 400

bold como 700
bolder +100 sobre el valor heredado
lighter -100 sobre el valor heredado
medida absoluta o relativa
xx-small
x-small
small
tamaño de medium de menor a mayor tamaño
font-size
fuente large
x-large
xx-large
larger un escalón más sobre el heredado
smaller un escalón menos sobre el heredado

Podemos importar fuentes de nuestro ordenador con la regla @font-face y luego modificar la
propiedad font-family:

@font-face{font-family: nombreMifuente; src: url(“archivo de fuente”);}

P{
font-family:”nombreMifuente”,serif;
}

I.E.S Julio Verne Página 20 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

Otra forma es importarla directamente de internet de recursos como Google Font® o similares
mediante una instrucción LINK
Ejemplo:

<link href='https://fonts.googleapis.com/css?family=Indie+Flower'
rel='stylesheet' type='text/css'>

2.5.3 Propiedades del texto

PROPIEDAD FUNCIÓN VALOR OBSERVACIONES

sangría de primera medida puede ser negativa
text-indent
línea porcentaje respeto del ancho de la caja de contención
left izquierda
alineación right derecha
text-align
horizontal del texto center centrado
justify justificado: izquierda y derecha a la vez
none sin rayar
underline subrayado
text-decoration
overline sobrerayado
line-through tachado
normal
letter-spacing espaciado de letras
medida puede ser negativa
espaciado de normal
word-spacing
palabras medida puede ser negativa
capitalize 1º letra de cada palabra en mayúscula
uppercase todo mayúsculas
text-transform
lowercase todo minúsculas
none respeta el original

2.5.4 Propiedades resumidas

Estas propiedades no aportan nada nuevo (es decir, con lo que hemos visto en este tema podemos
hacer lo que hacen las propiedades resumidas) pero permiten abreviar código. Si decides usarlas
infórmate bien (por ejemplo, en la especificación) porque cuando omites un valor en una de ellas se
presupone que lo estás reseteando. Un ejemplo de propiedad resumida puede ser border que hace el
trabajo de border-style, bordet-width y border-color de una sola vez o background que hace el
trabajo de background-color, background-image, background-repeat, background-attachment y
background-position.

I.E.S Julio Verne Página 21 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

EJEMPLO:
P {
color: red;
border-color: yellow;
border: dotted 3px;
}
➢ En la primera regla se establece el color de los párrafos en rojo (puesto que el color
que toma el borde es aquel que el elemento usa para el primer plano, el color de
borde se ha establecido en rojo).
➢ En la segunda regla se establece el color del borde en amarillo, anulando el color
rojo de la primera línea (para el borde, el texto seguirá rojo).
➢ En la tercera regla se usa una propiedad resumida que establece estilo, grosor y
color del borde. Al omitir el color, éste queda reseteado a su valor original: rojo. Por
tanto ESTAMOS CAMBIANDO UNA PROPIEDAD (el color del borde) AUNQUE NO ESTÉ ESCRITA.
NOTA 1: El orden en el que aparecen los distintos valores en una propiedad resumida es irrelevante.
border: red dotted 3px; sería equivalente a border: 3px red dotted;
NOTA 2: El orden en que aparecen las reglas SI es importante. Si en el ejemplo anterior cambiamos
el orden de la 2ª y 3ª regla, el color del borde será amarillo.

I.E.S Julio Verne Página 22 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.6 Listas
Las siguientes propiedades sólo se aplican a los elementos de tipo lista, esto es, todos aquellos a los
que asignemos display: list-item; y a los que ya lo tienen por defecto como el elemento LI de
HTML.
PROPIEDAD VALORES DESCRIPCIÓN
decimal desde 1
decimal-leading-zero decimal desde 01 siempre con dos cifras
lower-roman números romanos minúsculas
upper-roman números romanos mayúsculas
georgian numeración georgiana
armenian numeración armenia
list-style-type lower-latin o lower-alpha alfabeto latino minúscula
upper-latin o upper-alpha alfabeto latino mayúscula
lower-greek alfabeto griego
disc círculo
circle circunferencia
square cuadrado
none Sin viñeta
imagen que queremos usar. Es conveniente poner
list-style-image url también un valor de list-style-type para el que
recurrirá si hay problemas con la imagen
inside la segunda línea comienza debajo de la viñeta
list-style-position
outside la viñeta se queda a la izquierda de todas las líneas
list-style propiedad resumida: tipo, imagen y estilo

2.7 Tablas
Las propiedades para tablas se aplican a los elementos con los siguientes valores para la propiedad
display: table, inline-table, table-row-group, table-header-group, table-footer-group, table-row,
table-column-group, table-column, table-cell, table-caption.
En HTML esos elementos son: TABLE, TR, THEAD,.. etc. Recuérdese que CSS no sólo se aplica
a HTML, también se aplica a otros lenguajes como XML y esos otros lenguajes pueden no tener
ningún elemento así definido por defecto. En esos casos tendremos que hacerlo explícitamente con
la propiedad display.
Las celdas heredan propiedades de columnas y grupos de columnas aunque no sean descendientes,
que no lo son.

I.E.S Julio Verne Página 23 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

PROPIEDAD NOTAS VALORES DESCRIPCIÓN

top arriba de la tabla (por defecto)
caption-side se aplica a la tabla
bottom abajo de la tabla
collapse líneas de extremo a extremo
border-collapse se aplica a la tabla
separate líneas alrededor de las celdas

Después de establecer el border-collapse siguen sin verse los bordes, porque el estilo por defecto de
bordes es "none". Tendremos que aplicar border-style al elemento de la tabla que queramos que
tenga bordes (celda, fila, columna, grupo de filas o columnas) mientras que el border-collapse se
aplica a la tabla entera.

PROPIEDAD NOTAS VALORES DESCRIPCIÓN

se aplica a la tabla. 1 medida para todos
sólo tiene sentido si border-collapse: separate.
border-spacing 1º horizontal
indica la separación entre bordes de celdas 2 medidas
adyacentes. 2º vertical
Los elementos internos de tablas no tienen márgenes, sólo border-spacing.
aplicable a celdas TD, TH show las muestra
para mostrar celdas vacías es imprescindible
empty-cells
que esté el TD o el TH, o sea, que si hemos hide no las muestra
obviado las etiquetas no se mostrarán

Podemos controlar la posición vertical de los elementos en las celdas :

PROPIEDAD NOTAS VALORES
top
Se aplica a las celdas de las
vertical-align bottom
tablas o a elementos inline
middle

Existe la posibilidad de establecer un tamaño fijo a todas las celdas de la tabla. Esto permite que el
navegador muestre más rápido la tabla ya que conoce el espacio que ocupa. Mediante la propiedad
table-layout y con el valor fixed todas las celdas tendrán el mismo tamaño que estableceremos con
width

table {
table-layout: fixed;
width: 150px;
border-collapse: collapse;
border: 3px solid purple;
}

I.E.S Julio Verne Página 24 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.8 Modelo de Cajas

CSS presenta todos los elementos del documento fuente en una caja rectangular de 4 zonas
concéntricas que, de fuera a dentro, se denominan Margen, Borde, Relleno y Contenido:

Margen (margin)
Borde (border)
Relleno (padding)
Contenido

El contenido es el elemento en sí, ya se trate de texto o de una imagen.

Alrededor del contenido se distribuyen el relleno, el borde y el margen. Podemos modificar cada
uno de ellos en cuanto a su tamaño de forma independiente para cada uno de los lados: arriba,
derecha, abajo o izquierda.
El color del contenido, el relleno y el borde será el mismo, el que hayamos establecido como color
de fondo del elemento mediante la propiedad background-color. El color del margen será siempre
transparente y no lo podemos modificar.

2.8.1 Propiedades para el borde

El borde de una caja CSS puede modificarse en grosor como el margen y el relleno, pero además es
posible modificarle el color y el estilo.
Grosor del borde
PROPIEDAD FUNCIÓN VALOR
border-top-width tamaño del borde superior
thin (fino)
border-bottom-width tamaño del borde inferior medium
border-right-width tamaño del borde derecho thick (grueso)
medida
border-left-width tamaño del borde izquierdo
border-width tamaño del borde de 1 a 4 medidas separadas por espacios
Color del borde
PROPIEDAD FUNCIÓN VALOR OBSERVACIONES
border-top-color color del borde superior Por defecto tendrá el
border-bottom-color color del borde inferior color de fondo del
elemento.
border-right-color color del borde derecho transparent
color
border-left-color color del borde izquierdo Si lo definimos como
transparent seguirá
border-color color del borde teniendo grosor.

I.E.S Julio Verne Página 25 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

Estilo del borde

border-top-style estilo del borde superior none
border-bottom-style estilo del borde inferior dotted (puntos)
dashed (segmentos)
border-right-style estilo del borde derecho solid Por defecto el valor será
border-left-style estilo del borde izquierdo double none y por tanto no
groove (hundido) tendrá grosor
ridge (sobresale)
border-style estilo del borde inset (caja hundida)
outset (caja salida)
NOTA: Si vamos a establecer un borde, lo primero que tenemos que hacer es asignarle un estilo. Los
cambios de color o tamaño no surtirán efecto hasta que le asignemos el estilo.
Redondear los bordes

Propiedad Función Valores

border-bottom-left-radius: Redondea la esquina izquierda inferior
border-bottom-right- Redondea la esquina derecha inferior
radius Valor
%
border-top-left-radius Redondea la esquina izquierda superior
border-top-right-radius Redondea la esquina derecha superior
4 valores separados por
border-radius Propiedad resumen espacios

2.8.2 Propiedades para el margen

PROPIEDAD FUNCIÓN VALOR OBSERVACIONES
margin-top tamaño del margen superior medida Sin efecto en
margin-bottom tamaño del margen inferior medida elementos de línea
margin-right tamaño del margen derecho medida
margin-left tamaño del margen izquierdo medida
margin tamaño del margen de 1 a 4 medidas entre espacios

NOTA: las medidas de los márgenes pueden ser absolutas o relativas. Cuando son relativas se
refieren a la anchura de la caja de contención. Ojo! tanto si definimos distancias verticales como
distancias horizontales se toma como referencia la ANCHURA de la caja de contención.

La propiedad margin nos permite establecer el tamaño de todo el margen (de los cuatro lados) de
una sola vez. Esta propiedad puede tener como valor 1, 2, 3, ó 4 medidas.
➢ Si se ponen 4 medidas el orden es: top, right, bottom, left, es decir, en el sentido de
las agujas del reloj comenzando desde arriba.
➢ si se ponen 3: top, right, bottom (left será igual a right)
➢ si se ponen 2: top, right (left será igual a right, bottom será igual a top)

I.E.S Julio Verne Página 26 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

➢ si se pone 1: todos igual

➢ Si establecemos 0 auto estamos centrando el elemento

EJEMPLO: Los párrafos tendrán un margen izquierdo de 2 cms. y un margen derecho de 1 cm.
P {
margin-left: 2cm;
margin-right: 1cm;
}
EJEMPLO: Margen de 1 cm. arriba, 2 pulgadas a la derecha, 2 picas abajo y 2 puntos a la derecha
P {
margin: 1cm 2in 2pc 2pt;
}
EJEMPLO: Margen de 1 cm. arriba y abajo, 2 pulgadas a la derecha y a la izquierda
P {
margin: 1cm 2in;
}
EJEMPLO: Margen de 1 cm. por todo el contorno del párrafo
P {
margin: 1cm;
}

2.8.3 Propiedades para el relleno

PROPIEDAD FUNCIÓN VALOR
padding-top tamaño del relleno superior medida
padding-bottom tamaño del relleno inferior medida
padding-right tamaño del relleno derecho medida
padding-left tamaño del relleno izquierdo medida
padding tamaño del relleno de 1 a 4 medidas separadas por espacios
La propiedad padding permite establecer el tamaño de todo el relleno de una sola vez. Se aplican
las mismas reglas que para la propiedad margin.

2.8.4 Propiedad outline

outline es una línea que se dibuja alrededor del elemento, exterior al borde.
Podemos modificar las mismas propiedades que en el borde, es decir, el estilo, el color y el ancho
(outline-color, outline-style, outline-width)

2.8.5 Formato visual (control de flujo de cajas)

2.8.4.1 Propiedades para el formato visual
La posición que ocupan las cajas en la página, vienen determinada por el tipo de elemento al que
pertenece (bloque o línea). Pero dicho comportamiento puede ser variado con la propiedad position

I.E.S Julio Verne Página 27 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

produciendo 4 tipos de comportamiento:

• static
• relative
• absolute
• fixed
• float

✔ static: es el comportamiento normal por defecto. No se ve afectado por el cambio en los

valores top, bottom, right o left. Solo se tiene en cuenta si los elementos son de bloque ,
apareciendo uno debajo de otro, o de línea que aparecen uno a continuación del otro. Si no
cabe en la línea se colocará en la línea siguiente.
✔ relative: El elemento se desplaza de su posición original mediante las propiedades top,
right, bottom y left. El resto de las cajas no se ven afectadas y seguirán ocupando sus
posiciones originales.

✔ absolute: Se utiliza para colocar los elementos en una posición exacta en la página. La
posición establecida por las propiedades top, right, bottom y left son medidas respecto al
elemento contenedor. El resto de elementos modifican sus propiedades para ocupar el hueco
dejado. Para establecer la posición, antes tiene que establecer su elemento contenedor. El
elemento contenedor será el elemento que esté posicionado de cualquier forma menos static.
Una vez establecido el elemento contenedor, se aplican las propiedades top, right, bottom y
left siendo medidas desde y no hacia.

✔ fixed: el posicionamiento es similar al absolute pero la caja no moverá su posición aunque

el usuario se desplace por la página. En medios paginados, se repiten en todas las páginas lo
que lo hace muy útil para encabezados y pie de página de documentos HTML. Como
referencia de posicionado usará siempre la página no su elemento contenedor
✔ float: la caja se posiciona en el lado derecho o izquierdo de la página y el resto se
desplazada para ocupar el hueco. Si se desplazan más de una caja en modo float, se adaptan
para no solaparse y si no caben en la misma línea se posicionan en la línea inferior.

PROPIEDAD DESCRIPCIÓN VALOR OBSERVACIONES

I.E.S Julio Verne Página 28 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

static flujo normal, por defecto

Define el posicionamiento de la relative posicionamiento relativo
position
caja absolute respecto bloque de contención
fixed respecto acceso visual (ventana)
Préstese atención a que son distancias
Establece las distancias DESDE
top DESDE y no distancias HACIA (arriba,
cada lateral
bottom abajo, izqda o dcha)
medida
right
Sólo para elementos posicionados
left Si hay contradicciones gana left
(absolute o fixed)
sobre right y top sobre bottom
Hace flotar la caja hacia la right
float
izquierda o la derecha left
Especifica si un elemento puede
estar al lado de un elemento
posicionado float que le precede right
clear en el código html. Se moverá left
hacia abajo hasta que cumpla la both
condición establecida. Funciona
bien con los elementos de bloque
block como bloque
inline como línea (por defecto)
elementos de línea reemplazados
inline-block
Indica como debe visualizarse el (como IMG u OBJECT)
elemento no genera caja. Ojo! no es que sea
display invisible, es que no hay caja. Este
no se debe confundir con none valor será irreversible, en el sentido
visibility, descrito más adelante de que sus descendientes no podrán
visualizarse de ningún modo
list-item como elemento de lista
table como tabla

Por defecto, todos los elementos tendrán display:inline pero el motivo de que veamos
comportamientos distintos en los elementos de HTML es que el navegador aplica una hoja de estilo
por defecto para HTML estableciendo los comportamientos de visualización que ya conocemos. En
esa hoja por defecto es donde se determina cuáles de los elementos HTML son de bloque y cuáles
son de línea.

I.E.S Julio Verne Página 29 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

PROPIEDAD DESCRIPCIÓN VALOR OBSERVACIONES

width Al modificar la anchura el bloque
Para elementos de bloque y elementos
min-width deja de ocupar todo el ancho
de línea reemplazados: anchura,
max-width disponible.
anchura mínima, anchura máxima, medida
height Si está posicionado (absolute o
altura, altura mínima y altura máxima
min-height fixed) otros elementos podrán
respectivamente.
max-height ocupar el ancho que queda libre.
medida
line-height Altura de línea de base a línea de base
(altura de fuente + interlineado) indica el nº de veces que
número
multiplica el tamaño de la fuente
baseline línea base del padre
Alineación vertical: aplicable a los sitúa la base de línea en el centro
middle
elementos de línea. Implica un de la línea, no de la caja
vertical-align desplazamiento del elemento con sup
respecto a la línea base que, supper
normalmente, provoca un aumento del también con respecto a la línea
top
alto del bloque de contención. bottom
medida Si queremos subirlo más arriba

PROPIEDAD DESCRIPCIÓN VALOR OBSERVACIONES

visible se verá fuera del bloque de contención
Cuando hay contenidos que son
más grandes que los bloques de hidden no se ve el sobrante, ni hay
contención, esta propiedad nos posibilidad de scroll
overflow permite decidir que hacer con el scroll visible a través de scroll
sobrante.
Sólo para bloques o elementos como scroll, pero las barras de
reemplazados. auto desplazamiento sólo aparecen si son
necesarias
visible por defecto
invisible, transparente, pero deja el
hueco afectando a la composición de
Para hacer visible o invisible un hidden
visibility la página, sus descendientes podrían
elemento
ser visibles
aplicable a elementos de tablas, para
collapse
ocultar determinadas filas o columnas
clip Permite recortar la zona visible forma (*) sólo para position:absolute o fixed
Un número mayor indica más cerca
Indica la posición de la caja en el
del usuario y por tanto "tapa" cajas
z-index eje Z (más o menos cerca del número
con un número menor
usuario)
sólo para position:absolute o fixed

I.E.S Julio Verne Página 30 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

(*) forma: CSS 2.1 sólo admite el rectángulo como forma y la sintaxis es rect (arriba, dcha, abajo,
izqda) que define el rectángulo visible para la propiedad clip. arriba y abajo son medidas tomadas
desde la parte superior de la caja original; izqda y dcha son medidas tomadas desde la izquierda de
la caja original.
EJEMPLO:
P {
position: absolute;
clip: rect(2cm, 8cm, 10cm, 3cm );
}
Estará visible la parte de la caja que va desde el 2º centímetro al 10º contando desde arriba y desde
el 3º al 8º contando desde la izquierda:

3 cm.
8 cm.

2 cm.

10 cm.

En rojo: la parte visible, recortada con clip.

En azul: la parte no visible del párrafo.

I.E.S Julio Verne Página 31 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.8.6 Flujo Normal

PROPIEDADES
DESCRIPCIÓN PROPIEDADES
SIN EFECTO

Las cajas se disponen una debajo de otra.

Bloques Los márgenes superior/inferior se cierran (se toma el
mayor de ambos).
Las cajas se disponen una tras otra horizontalmente.
Los márgenes izquierda/derecha NO se cierran.
El ancho de la línea está limitado por el ancho del bloque position:static
de contención. (no hace falta top
El alto de la línea será el suficiente para la más alta de especificarlo bottom
todas las cajas de línea (o más, si la alineación vertical porque es el right
entre cajas obliga a ello). valor por left
Líneas
Las cajas de una línea se pueden alinear por arriba, abajo defecto)
o linea base del texto.
Si no caben las cajas en la línea horizontalmente, se
distribuyen en varias líneas apiladas verticalmente (como
ocurre con las líneas de un párrafo), sin separación
vertical y sin superponerse. Si una línea no puede
partirse por algún motivo, se desborda.

2.8.7 Posicionamiento Relativo

DESCRIPCIÓN PROPIEDADES OBSERVACIONES
Primero se calcula la posición que
le correspondería en el flujo normal
Al establecer
y después se desplaza con respecto position:relative
position:relative ésta
a esa posición, manteniendo la top (desplazamiento desde arriba)
caja se convierte en
forma que le correspondería en la bottom (desde abajo)
bloque de contención
ubicación original. El right (desde la derecha)
para sus descendientes,
desplazamiento no afecta a la caja left (desde la izquierda)
incluso aunque no se
siguiente que seguirá en el sitio que Si hay contradiciones gana left
desplace de forma real
le correspondería si ésta no se sobre right y top sobre bottom
(0,0)
hubiera desplazado (o sea, deja el
hueco en el sitio original).

I.E.S Julio Verne Página 32 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.8.8 Flotantes
DESCRIPCIÓN PROPIEDADES OBSERVACIONES
LÍNEAS FLOTANTES:
Son cajas que, dentro del bloque, se desplazan a la
izquierda o a la derecha, saliendo del bloque.
Obliga a fluir al resto del contenido del bloque
utilizando el ancho disponible.
Nunca se puede superponer a otras flotantes, de
(*)se puede evitar que sean
modo que si no caben, se desplazará hacia abajo.
adyacentes con la propiedad
Los siguientes bloques serán adyacentes (si
clear: right | left | both
caben(*)) o desplazarse hacia abajo.
que indica el lado que ese
Los márgenes de la flotante y el bloque NO se
elemento debe tener “limpio”
cierran. float: right (que no haya nada).
1º Una flotante estará tan arriba como le sea posible o
2º Una flotante de izquierdas estará tan a la float: left
izquierda como le sea posible y una de derechas
estará tan a la derecha como le sea posible
3º En caso de conflicto primero (1º) gana a segundo
(2º)
BLOQUES FLOTANTES:
La anchura de la caja será el
Se desplazará hacia el lado indicado y su anchura
mínimo que permita alojar su
dejará de ser el total del ancho disponible. El resto
contenido (salvo lo dispuesto
del documento fluirá por el lado que queda libre
con width)
(salvo lo dispuesto con la propiedad clear).

DEFINICIÓN: ELEMENTO POSICIONADO. Se dice que un elemento está posicionado si el valor de la

propiedad position es relative, absolute o fixed.

2.8.9 Posicionamiento Absoluto

DESCRIPCIÓN PROPIEDADES OBSERVACIONES
Establece una posición fija con respecto al
bloque de contención. No se considera bloque
de contención (es este un caso raro) al padre,
sino al antepasado más cercano que esté
fijaremos la posición
posicionado, esto es, con valor absolute,
exacta con las
relative o fixed en la propiedad position) position: absolute
propiedades top,
Una caja con posicionamiento absoluto se sale
bottom, right, left
del flujo normal. No afecta a la colocación del
resto de elementos e incluso puede
superponerse con otras cajas porque no fluye.
Sus márgenes no se cierran.

I.E.S Julio Verne Página 33 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.8.10Posicionamiento Fijo
Descripción Propiedades Observaciones
Establece una posición fija con respecto al acceso visual
(borde de la ventana o del folio).
No será afectado por scroll en medios continuos fijaremos la
Se repite en cada página en medios paginados (para, por posición exacta
ejemplo, encabezados y pies) position: fixed con las
Una caja con posicionamiento absoluto se sale del flujo propiedades top,
normal. No afecta a la colocación del resto de elementos e bottom, right, left
incluso puede superponerse con otras cajas porque no fluye.
Sus márgenes no se cierran.

2.9 Otros elementos modificables

CSS 3 ha incluido muchos elementos nuevos que podemos modificar o utilizar para dar un
contenido más espectacular a nuestras páginas
2.9.1 Box-shadow
Crea una sombra al contenedor del elemento (no al contenido). La sintaxis es:
box-shadow: valor-y, valor-x, desenfoque, tamaño, color;
box-shadow: 10px, 20px, 3px, 4px, red;

2.9.2 Text-shadow
Crea una sombra al texto. La sintaxis es:
tex-shadow: valor-y, valor-x, desenfoque, color;
text-shadow: 2px, 1px, 3px, black;

2.9.3 Gradiente
Cambia el color de forma incremental cambiando entre colores. Existen varios tipos, el lineal y el
radial en función de si el cambio de color es utilizando líneas rectas o círculos.
linear-gradient (dirección, color1, color2,…);
La dirección se puede omitir o utilizar los valores: to right, to left, to bottom right, to top right, …
o incluso ángulos: 90deg, -20deg, ….

background: linear-gradient(to right, red, black);

background:linear-gradient(45deg, red, blue, yellow);

radial-gradient (dirección, color1, color2, ….);

Para otras características consultar documentación

I.E.S Julio Verne Página 34 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.10 Contadores
Permiten numerar de forma automática elementos del documento fuente: párrafos, títulos,
imágenes, etc. Los contadores permiten hacer tres cosas:
➢ iniciarlos
➢ incrementarlos
➢ mostrarlos
PARA INICIARLOS se usa la propiedad counter-reset. El valor de esta propiedad será el nombre del
contador y un número que indica el valor inicial del contador (si se omite, toma 0 por defecto):
H1 {
counter-reset: parrafo 1;
}
En cada encabezado H1 el contador de nombre parrafo tomará el valor 1.
PARA INCREMENTARLOS se usa la propiedad counter-increment. El valor de esta propiedad será el
nombre del contador y un número que indica en cuantas unidades se incrementa (si se omite, se
incrementa en 1 por defecto)
P {
counter-increment: parrafo;
}
En cada párrafo se incrementará en uno el contador de nombre parrafo.
PARA MOSTRARLOS se usa la propiedad content, que como ya conocemos permite incluir contenido
generado con los pseudo-elementos before o after. El valor será counter (nombreContador,
estiloLista). El estilo de lista será uno de los valores reconocidos para list-style-type

P:before {
content: counter(parrafo, upper-roman);
}

Delante de cada párrafo se mostrará el valor del contador llamado párrafo, en números romanos
mayúscula.
Si juntamos los tres ejemplos el resultado será que delante de todos los párrafos aparecerá
numeración en romanos mayúscula. La numeración se iniciará en cada apartado, en realidad, en
cada H1.

NOTA1: Cuando en un mismo elemento tenemos más de una operación sobre un contador, el orden
en el que se aplican es: reseteo, incremento y visualización, aunque estén escritas en otro orden.
NOTA2: Un contador en un elemento con display:none no se resetea ni se incrementa. Un contador
en un elemento con visibility:hidden si se puede resetear e incrementar.
NOTA3: Si necesitamos resetear/incrementar varios contadores en un mismo elemento habrá que
hacerlo en un sola regla, de lo contrario sólo se ejecutará el último.
EJEMPLO:

I.E.S Julio Verne Página 35 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

H1 {
counter-reset: seccion;
}

H1 {
counter-reset: capitulo;
}
Este código sólo reseteará el contador llamado capitulo. (porque ambos actúan sobre el selector H1
y puesto que se trata de la misma propiedad, la última escrita anula a la primera) Si deseamos
resetear ambos tenemos que hacerlo en una sola regla:
H1 {
counter-reset: sección capitulo;
}

2.10.1Contadores anidados
Cuando usamos contadores en elementos que están anidados en el documento fuente, (por ejemplo
en los LI de listas anidadas), en cada nivel de anidamiento se crea una nueva instancia del contador
que es independiente del nivel superior y, por tanto, las operaciones de reseteo o incremento tienen
efecto sólo en ese nivel.
Ejemplo:
LI {
counter-increment: indice;
}
aplicado sobre listas anidadas, tendremos un contador llamado indice por cada nivel de
anidamiento. En cada LI se incrementa sólo la instancia del contador indice correspondiente al
nivel en que se encuentra.
Para mostrar todas las instancias de un contador se usa la propiedad counters (Obsérvese que acaba
en s y por tanto es distinta de la propiedad counter):
LI:before {
content: counters(cont, "separador");
}
EJEMPLO:
LI:before {
content: counters(indice, ".");
}
Muestra todas las instancias de los contadores de nombre indice separados por puntos, en orden
desde el nivel más externo de anidamiento hasta el actual.

I.E.S Julio Verne Página 36 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

EJEMPLO: DIFERENCIA ENTRE LA NUMERACIÓN DE UNA LISTA OL Y UNA LISTA CON CONTADORES ANIDADOS:
@charset "UTF-8";
UL {
counter-reset: indice;
}
UL LI {
counter-increment: indice;
}
UL LI:before {
content: counters(indice, ".") " ";
}
UL {
list-style-type: none;
}
******************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<TITLE>Contadores Anidados</TITLE>
<LINK rel="stylesheet" type="text/css" href="contadores.css">
</HEAD>
<BODY>
<OL>
<LI>Mi libro con una lista ordenada
<OL>
<LI>tema 1
<OL>
<LI>apartado</LI>
<LI>apartado</LI>
</OL>
</LI>
<LI>tema 2
<OL>
<LI>apartado</LI>
<LI>apartado</LI>
</OL>
</LI>
<LI>tema 3
<OL>
<LI>apartado</LI>
<LI>apartado</LI>
</OL>
</LI>
</OL>
</LI>
</OL>
<HR>
<UL>
<LI>Mi libro con contadores anidados
<UL>
<LI>tema 1

I.E.S Julio Verne Página 37 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

<UL>
<LI>apartado</LI>
<LI>apartado</LI>
</UL>
</LI>
<LI>tema 2
<UL>
<LI>apartado</LI>
<LI>apartado</LI>
</UL>
</LI>
<LI>tema 3
<UL>
<LI>apartado</LI>
<LI>apartado</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
</BODY>
</HTML>

EL RESULTADO SERÍA ESTE:

I.E.S Julio Verne Página 38 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.11 Tipos de medios

HTML es independiente de los medios, es decir, representa el contenido sin tener en cuenta el
medio (pantalla de PC, PDA, TV, impresora, voz, braille, ...) en el que será representado. CSS
permite diferenciar la presentación según el medio al que va destinado. Usando CSS tal y como
hemos visto hasta ahora las reglas se aplican a todos los medios (las que puedan aplicarse, porque
hay propiedades que son específicas para algunos medios -el salto de página sólo tiene sentido en
medios paginados y los colores no tienen sentido en medios auditivos- otras propiedades son de
aplicación en varios medios pero interesa darles valores distintos a cada uno -por ejemplo, el
tamaño de letra para pantallas o para proyectores-)
Los tipos de medios definidos en CSS son:
MEDIO DESCRIPCIÓN
all afecta a todos los medios
Destinado material paginado y para documentos visibles en pantalla en
print
modo de vista previa para impresión
screen pantallas de ordenador
speech sintetizadores de voz

La sintaxis para actuar sobre los medios es:

@media nombreMedio {
selector {
propiedad: valor;
}
}
donde nombreMedio puede ser un medio o una lista de medios separados por comas.
EJEMPLO:
@media print {
P {
text-indent: 2cm;
}
}
donde establecemos una sangría para la primera línea de todos los párrafos cuando se visualice en
un medio paginado como la impresora. En un navegador los párrafos quedarán sin indentar puesto
que no es un medio paginado.

Podemos incluir código CSS en función del medio al que se le va a aplicar, incluyendo el atributo
media en la etiqueta LINK.

<link href="impresion.css" rel="stylesheet" type="text/css" media="print" />

I.E.S Julio Verne Página 39 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

NOTA: podemos ver el efecto de esta regla también en un navegador, si mostramos la vista previa.
(En Mozilla: Archivo/Vista preliminar)
NOTA: En Chrome o en Chromium con Archivo/Imprimir, pero antes hemos de habilitar la vista
previa en la página about:flags, y habilitar también el visor PDF en about:plugins y reiniciar el
navegador. Chromium no dispone de visor PDF, pero podemos usar el de Chrome copiando el
fichero libpdf.so de la carpeta /opt/google/chrome/ de una instalación Chrome a la carpeta /usr/lib/
chromium-browser/ de una instalación Chromium.
La regla @import nos permite incluir las reglas CSS que tenemos en un fichero externo:
@import url(“fichero.css”);
El efecto será el mismo que tendría escribir esas reglas en ese punto del documento.
Podemos restringir el efecto de una regla @import a un único tipo de medios (o a varios separados
por comas):
@import url(“fichero.css”) nombreMedio1, nombreMedio2;

NOTA: Recuerda que las reglas @ tienen que ir colocadas al principio del documento CSS, antes de
los sistemas de reglas y que la primera regla @ habrá de ser obligatoriamente @charset sin poder
estar precedida ni siquiera de un espacio.

2.11.1 Reglas específicas para medios paginados

PROPIEDAD VALORES DESCRIPCIÓN

orphans número Establece el número mínimo de líneas huérfanas o viudas que se
permiten. Si el flujo de documento provoca un número menor,
widows por defecto: 2 entonces todo el bloque se traslada.
NOTA: Cuando un párrafo queda dividido en dos partes por un salto de línea, las líneas de la parte
que queda al final de la página se llaman huérfanas y las líneas que quedan al principio de la
página siguiente se llaman viudas.
NO FUNCIONA EN FIREFOX

PROPIEDAD FUNCIÓN VALOR ACCIÓN

always salto de página siempre
avoid lo evita
page-break-before Salto de página previo left uno o dos saltos de página hasta que la
page-break-after Salto de página posterior siguiente página sea izquierda o
right derecha respectivamente
auto ni fuerza ni prohibe
auto
page-break-inside dentro del bloque
avoid
Estas propiedades se aplican exclusivamente a elementos de bloque en el flujo normal. En caso de
contradicción (que puede suceder porque un mismo punto del documento estará afectado por la
regulación de los saltos de línea de la caja que lo contiene, de la caja precedente y de la caja
siguiente) always, left y right mandan más que avoid.

I.E.S Julio Verne Página 40 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

2.11.2 Las cajas de página y sus márgenes

Caja de página

Margen de página

Área de página

Cada página se considera una caja especial formada por dos cajas concéntricas: el margen y el área.
Para actuar sobre los márgenes de una caja de página usamos las propiedades margin ya conocidas
pero el selector habrá de ser uno de los siguientes:
SELECTOR PÁGINAS SOBRE LAS QUE ACTÚA
@page Actúa sobre todas las páginas
@page :first Sólo afecta a la primera página. Útil para crear una portada
@page :left Afecta sólo a las páginas de la izquierda o de la derecha. Útil cuando se prepara una
@page :right impresión a doble cara y necesitamos márgenes distintos en cada lado.
EJEMPLO:
@page :first {
margin: 4cm;
}
Establece un margen de 4 centímetros por los cuatro lados, pero sólo para la primera página del
documento.
El selector @page :first tiene prioridad sobre @page :left y @page :right y éstos tienen prioridad
sobre @page.

NOTA: Para que funcione en Firefox debemos incluir los selectores @page en la regla @media
print

NOTA: Los selectores @page son eso: selectores y no reglas @ aunque la notación pueda llevar a
confusión.
En el contexto de páginas no se permiten las unidades em y ex, que hacen referencia a los tamaños

I.E.S Julio Verne Página 41 de 42 Dpto. Informática

Lenguaje de Marcas 1º CFGS-INFORMÁTICA

de la fuente. El resto de las unidades CSS son válidas. Si utilizamos porcentajes se tomará como
referencia al ancho de la caja de página para los márgenes izquierdo/derecho y el alto de la página
para los márgenes arriba/abajo.
Habrá que controlar especialmente elementos cuyo contenido desborde el tamaño o que puedan
tener un posicionamiento fuera de la página o muchas páginas más abajo generando páginas en
blanco.
2.12 Interfaz de usuario

PROPIEDAD FUNCIÓN VALORES DESCRIPCIÓN

default
auto
crosshair cruz simple
pointer el "dedito" de los enlaces
permite seleccionar move mano o cruz con cuatro flechas
el dibujo del
text introducción de texto
puntero de ratón
cursor cuando pasa sobre wait reloj
el elemento. El progress reloj con flecha
dibujo dependerá
del juego habilitado help interrogante
e-resize, ne-resize,
nw-resize, n-resize,
para indicar el borde que será desplazado
se-resize, sw-resize,
s-resize, w-resize
url recurso que contiene el puntero

A las formas de elegir un color ya vistas, podemos añadir una serie de palabras clave que hacen
referencia a los colores que el sistema operativo esté usando en este momento, con la intención de
integrar el contenido de la página como si se tratara de una ventana más del sistema.
EJEMPLO:
P {
border-color: ActiveBorder;
}
seleccionará el color que en este momento se esté usando para el borde la ventana activa.
El listado de posibilidades es amplio y puedes consultarlo en las páginas 239 y 240 de la
especificación de la W3C para CSS 2.1. En CSS 3 está desaprobado este uso de los colores.

I.E.S Julio Verne Página 42 de 42 Dpto. Informática