Ud 2

Módulo 2. CSS3.
Unidad 4. Estructura, estilos, selectores y jerarquías en CSS3.

Unidad 5. Propiedades, elementos flotantes y posicionamiento.
Unidad 4: Estructura, estilos, selectores y
jerarquías en CSS3
1. Introducción a CSS3.
En HTML5 nos hacíamos cargo de la semántica de la web y de los elementos que la iban
a integrar. En esta última versión se ha intentado separar la parte de la semántica de la parte
del diseño, es decir, una aplicación web que tenga una estructura y una funcionalidad concreta
puede tener un aspecto totalmente diferente sólo con cambiar solo un archivo (css) y lo más
importante, sin tener que modificar nada en los archivos html que habíamos creado inicialmente.
Esto nos trae muchas ventajas, en las que podemos destacar total independencia del
204
equipo de diseño y del de desarrollo; eso no quita que trabajen conjuntamente, sino que se
puedan dividir el trabajo. Renovar la apariencia de una web estéticamente creando un efecto
totalmente diferente, sin cambiar una letra del contenido.
Un ejemplo sencillo: imaginemos que hemos escrito un menú superior con una lista,
como vimos en las primeras unidades. Algo parecido a esto:
INICIO | PRODUCTOS | ¿QUIÉNES SOMOS? | CONTACTAR
Como toma de contacto no estaría mal, pero ¿y si pudiéramos poner en un sitio diferente
algo distinto? como:
miarchivo.css
.menuinicio{
texto: azul;
tipo: negrita y cursiva;
fondo: amarillo;
}
M2. CSS3
Esos no serían los comandos exactos, pero si muy parecidos, la mayoría sería una simple
traducción. Obtendríamos un resultado muy parecido a éste:
Bueno, ha cambiado un poco el menú y la verdad que hoy en día podemos encontrar
muchos ejemplos de menús realizados así. Lo importante como hemos dicho anteriormente, es
que si la empresa que nos pidió el diseño decide cambiar los colores de la marca, no es necesa-
rio cambiar todo, archivo por archivo: inicio.html, productos.html, etc, solo nos tendríamos que
ir a nuestro archivo miarchivo.css y modificarlo y el cambio se aplicará a todos los archivos
existentes. Imaginemos que la marca ha cambiado los colores de amarillo y azul, por azul y
blanco:
miarchivo.css
.menuinicio{
texto: blanco;
tipo: negrita y cursiva;
fondo: azul;
205
}
El resultado sería el siguiente:
Como podréis ver, tenemos un menú totalmente diferente, cambiando sólo "algo" en un
sitio, ésto es porque hemos independizado totalmente el diseño de la parte semántica de la web.
Existe una web donde podremos ver muchos más ejemplos de ésto:
http://www.csszengarden.com/
Si seleccionas, view all design verás que hay muchos diseños diferentes pero si te fijas
en el contenido, apreciarás que es el mismo; ésta es la idea en la que tenemos que pensar siem-
pre que desarrollemos nuestra aplicación web, ya que nos facilitará muchísimo el mantenimien-
to, además de agilizar las modificaciones respecto al diseño.
Estos archivos que contienen nuestros modificaciones de diseños se llama hojas de

estilo en cascada, (CSS - Cascading Style Sheets) y la última versión es la CSS3 que veremos a
continuación.
2. Estructura de una web con CSS3 y modelo de cajas.

CSS3 es externo a las web HTML5, aunque cada vez está más ligado, pues puedes hacer
una web entera sin usar ninguna hoja de estilo. Por lo que tenemos que tener en cuenta cuan-
do estemos programando, debemos añadir en un futuro o a la vez que se esté desarrollando
Aula Mentor
el código las hojas de estilo necesarias. En este curso se ha decidido añadir el estilo después,
para comprender aún más la independencia de ellos, y ver que el diseño puede ir totalmente
independiente del código en HTML5. En el siguiente apartado veremos las formas de agregar las
hojas de estilo a nuestros ficheros en HTML5.
Debemos recordar que un navegador web se encarga de ir leyendo etiqueta por etiqueta
nuestra página y entenderá solo dos tipos de elementos:
Elementos de bloque (block). Serán tratados como una estructura que se van posicio-
nando uno sobre otros, creciendo hacia abajo de nuestra web, y aunque pusiéramos las etique-
tas en línea, una seguida de la otra, aparecerá como si fueran dos bloques diferentes, ésto pasa
con la mayoría de las etiquetas: <header><section><aside><footer><p>, etc. Veamos un ejemplo:
<!DOCTYPE html><html lang="es"><head><meta charset="utf-8" /><title>WEB EN HTML5</tit-

le></head><body><header><a id="inicio"></a><h1>MI PRIMERA WEB CON HTML5</h1></
header><nav><ul><li><a href="#INICIO">INICIO</a></li><li><a href="#CONTACTAR">CONTACTAR</a></
li></ul></nav><section><article><h3> FORMULARIOS </h3><p>Primer texto</p><p>Segundo texto</p></
article><article><p>Tercer texto</p><p>Cuarto texto</p></article></section><footer><p> Píe de página
construido con HTML5 </p></footer></body></html>
Como verás, están todas las etiquetas seguidas una de otra, forma no aconsejada para un
mantenimiento efectivo, pero si como una forma de dificultar a un tercero cómo se ha realizado
la web. Pero si ejecutamos el archivo en el navegador veremos el siguiente resultado:
206
Elementos en línea (in line). En este caso los elementos se posicionan uno al lado del
otro, no crecen hacia abajo ni insertan ningún salto de línea a no ser que ya no haya más espacio
en la web.
M2. CSS3
Pero antes de continuar y llegados a este punto debemos conocer en qué consiste el
modelo de cajas y para qué nos sirve en la creación de nuestras aplicaciones web. El navega-
dor entiende cada etiqueta HTML como una caja, y cada caja tiene unas propiedades definidas,
según las cuales las ubicarán en un sitio y forma concreta. Si recordamos cuando usamos el
modo desarrollador de nuestra web, nos vamos a la pestaña Element y abrimos una web que
ya hayamos realizado, por ejemplo voy a usar la página del ejemplo2.
Podemos ver que hay varios elementos, pero si vamos pasando el ratón por encima de
ellos y vamos desplegando los elementos, al seleccionar el enlace que teníamos creado llamado 207
empresa, lo primero que nos muestra es donde está seleccionado en el código; cosa muy útil
cuando cogemos código de terceros para el mantenimiento y estamos un poco perdidos.
Aula Mentor
También debemos fijarnos que a la derecha aparece una caja con unas propiedades del
elemento, padding, border, margin, etc y si vamos moviéndonos por ella, observaremos a qué se
refiere cada punto. Como ya veremos más adelante todo esto es muy importante. Además, nos
comenta qué estilo está usando por defecto el navegador, si subimos con el scroll vertical, entre
otras cosas podemos ver en la zona Styles esa información, el estilo que está usando el propio
navegador para ese código en concreto:
Conforme el navegador va leyendo etiquetas, va creando su modelo de cajas, con las

propiedades, cuando nosotros le agregamos otro modelo en el archivo, prevalece nuestro estilo
al del navegador, y la mezcla de su modelo, más el nuestro, será nuestra aplicación web.
3. Estilos.
Hemos hablado de estilos y que hay que aplicarlos en nuestros archivos, y cuando el
navegador los lea, los irá interpretando y comprobará si tiene que modificar las propiedades de
la etiqueta en concreto, pero ¿dónde le digo exactamente al navegador donde están mis estilos?
208 Existen varias formas donde podemos insertar nuestros diseños:
- En línea.
- Internos.
- Externos.
Es importante saber que se pueden usar de varias formas, porque dependiendo de cada
necesidad, usaremos una forma, otra o la combinación de varias.
3.1. En línea.
Nosotros podemos aplicar estilos directamente sobre el propio elemento una vez esta-
mos declarando la etiqueta de apertura, independiente de la etiqueta que sea:
<etiqueta style="mis propiedades"> </cierre etiqueta>
Cuando existan más de una propiedad, estas deberán ir separadas por punto y coma " ;
" . style="propiedad1: valorPropiedad1; propiedad2: valorPropiedad2;">
<p style="mis propiedades">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Podemos usar como ejemplo los siguientes estilos. Para aplicar un tamaño de letra de 22
pixeles y un estilo cursivo (italic) tendríamos que agregar:
M2. CSS3
<p style="font-size: 22px; font-style: italic;">CSS3.</p>
Por ahora debemos fijarnos en la forma de declarar las propiedades, las propiedades
que estamos viendo son a modo de ejemplo para que puedas verlo gráficamente, y veas un
resultado. Tienes en los recursos del curso el ejercicio con el código utilizado, revísalo e intenta
reproducirlo cambiándole por ejemplo el tamaño en font-size de 22px por uno 10px, luego por
30px o cualquier otro. Recuerda que siempre que realices algún cambio, deberás guardar y ac-
tualizar el navegador, sino el cambio producido no lo mostrará.
3.2. Internos.
Además de definir nuestros estilos en la propia etiqueta, en línea, podemos hacerlo in-
ternamente en la cabecera de la página actual. Es decir, si quiero aplicar a toda la página un
estilo concreto podemos hacerlo declarándolo dentro del <head></head> como vimos en un
ejemplo del módulo anterior.
209
Para ello debemos imaginarnos que queremos usar para todos los párrafos <p> un estilo
concreto, por ejemplo "font-size: 22px;" tamaño de letra 22px y estilo de texto en cursiva font-
style: italic. Vamos a coger el mismo ejemplo anterior y agregar el siguiente texto en el <head>
de la página:
....
....
<head>
<meta charset="utf-8" />
<style>
p { font-size: 22px;
font-style: italic;
</style>
Aula Mentor
</head>
....
....
Si ejecutamos el texto, veremos que se ha aplicado a todos nuestros párrafos, es decir,

hemos actuado sobre todas las etiquetas <p> y no hemos tenido que escribir nada en la parte
del HTML5, cosa que vamos buscando para independizar el diseño del texto.
Puedes consultar el ejemplo3-estilo-interno.html
3.3. Externos.
210
En la mayoría de los proyectos de gran embergadura, será necesario trabajar con varios
archivos a la vez, y cada uno de ellos deberá hacer su función, tendremos por tanto:
- Un archivo HTML5, (extensión .html) donde tendremos nuestras etiquetas: texto, formula-
rios, tablas, la semántica de la web, etc.
- Un archivo CSS3, (extensión .css) donde tendremos las reglas de estilo referidas a las eti-
quetas con nuestro diseño.
Además, sería conveniente ir organizando nuestro sitio web, teniendo carpetas para te-
ner los contenidos mejor estructurados. Un ejemplo puede ser el siguiente, no tiene por qué ser
el mismo nombre, es más, cada cual puede organizar y nombrar las carpetas según le interese,
pero a modo de ejemplo:
- Una carpeta css. Donde tendremos todas las hojas de estilo.
- Una carpeta js. Donde tendremos todos los archivos JavaScript.
- Una carpeta audio. Donde almacenaremos nuestros archivos de audio.
- Una carpeta vídeo. Donde almacenaremos nuestros vídeos.
- Una carpeta img. Donde vamos a guardar nuestras imágenes.
Respecto al archivo HTML5 y CSS3 hay una forma de relacionarlo, que debemos incluir
en nuestro fichero html dentro del head usando la etiqueta:
M2. CSS3
<link rel="stylesheet" type="text/css" href="ruta_archivo.css">
index.html miestilo.css (dentro de la carpeta css)
Imaginemos que en el mismo ejemplo usado en el apartado anterior, en vez de tenerlo

de forma interna, queremos tener nuestros estilos de forma externa en un archivo, ¿cómo lo
haríamos?
index.html miestilo.css (dentro de la carpeta css) 211
Prueba a ejecutar el ejemplo 4/index.html y verás que el resultado es el mismo que ha-
ciéndolo directamente en el <head>:
Puedes consultar el ejemplo04-estructura/
Es posible que ahora mismo no le veas mucha utilidad, pero lo normal es que el archivo
de diseño ocupe cientos de líneas solo con el diseño, y es mucho más claro tenerlo todo en un
fichero aparte, sino tendría que estar todo el código dentro del head del documento.
4. Jerarquía.
Como hemos visto, podemos definir estilos en diferentes sitios, entonces ¿cuál es el sitio
predilecto por el navegador? ¿Qué estilo va a poner el navegador finalmente cuando vea el estilo
de esta etiqueta?
Aula Mentor
Como era de esperar, siempre el navegador va a dar más prioridad al estilo que esté más
cercano a la etiqueta. Esto nos viene muy bien también porque si por ejemplo ponemos toda
la web concreta con un estilo concreto, por ejemplo fondo azul, y queremos en un apartado en
concreto poner un fondo amarillo, podemos dejar el fichero inicial tal cual y modificar sólo el
archivo en cuestión. Pero veamos un ejemplo donde pongamos ésto de manifiesto:
Vamos a declarar tres estilos diferentes sobre la misma etiqueta:
- En línea – Color Verde.
- Interna – Color Azul.
- Externa – Color Rojo.
En el siguiente ejemplo vamos a comprender como cada navegador va leyendo y apli-

cando los estilos a cada etiqueta según unas reglas.
miestilo.css
212
index.html
El resultado sería el siguiente, donde vemos que:
¿Por qué no se ha aplicado el estilo externo (rojo) en el fichero? Porque había uno más
cercano a la etiqueta indicando otra definición. Por eso, debemos recordar que cuando el diseño
sea externo no quiere decir que tenga menos valor, si por ejemplo nos equivocamos y cambia-
mos el orden, poniendo la definición justo después de la otra definición, veremos que la cosa
cambia.
….
<head>

M2. CSS3
<style>
p{
color:blue;
</style>
<link rel="stylesheet" type="text/css" href="css/miestilo.css">
</head>
….
<p style="color:green">Texto de prueba CON diseño en línea. </p>
<p>Texto de prueba sin diseño en línea</p>
En este caso, ya si aparece el color Rojo, pero desaparece el color Azul, tendríamos el
siguiente efecto en nuestra aplicación web:
213
Ésto es porque realmente cuando hacemos una llamada a un fichero externo, el navega-
dor lo que hace es agregarlo a continuación, y como está más cerca de la etiqueta, es el último
que tiene en su caché, es el que va a usar, por lo que uno de los fallos más típicos cuando se
trabajan con ficheros externos es el orden de los mismos, haciendo efectos que no esperamos
cuando se trabaja sobre la misma etiqueta. En este ejemplo tenemos que pensar que el navega-
dor ha agregado a continuación del estilo, el contenido del fichero como tipo "text/css":
Agregado del fichero

miestilo.css
Aula Mentor
También podríamos utilizar unas propiedades de diseño en los ficheros externos, otros
en los internos y otros distintos en línea, se puede hacer las mezclas que se nos ocurra, pero
siempre debemos comprender que el último estilo aplicado a la etiqueta HTML es el que el na-
vegador mostrará, es como si existe una cascada y diferentes niveles, siempre recibirás el agua
de fuente inmediatamente superior, de ahí viene el nombre de Cascading Style Sheets, hojas de
estilo en cascada.
Al igual que en una cascada, si en alguna altura una etiqueta recibe una propiedad, las
que estén dentro de ella la heredarán, recibirán ese color, si además se le aplicará un estilo a esta
segunda, todas las etiquetas de este tercer nivel, heredarán las propiedades del primer nivel, más
las del segundo, más las propias, y así se podría repetir indefinidas veces. Veamos un ejemplo:
Nivel 1. Tenemos un artículo <article> que tiene como estilo la letra de color Azul.
Nivel 2. Tenemos un párrafo <p> en su interior que va a tener la letra tamaño 22.
Nivel 3. Tenemos un párrafo <p> en su interior que va a tener la letra en cursiva.
<article style="color:blue">
<p> Texto del nivel 1 </p>
<article style="font-size:32px;">
<p>Texto de nivel 2
214
<article style="font-style:Italic;">
<p>Texto de nivel 3
</article>
</article>
</article>
El texto de nivel inferior se irá impregnando de las etiquetas superiores que hay por
encima, teniendo el nivel 3, en este caso color azul, tamaño 32 y cursiva.
Puedes visitar el ejemplo06-jerarquia3/

M2. CSS3
He realizado mucho hincapié en esto porque la mayoría de los errores que hay con las
hojas de estilo es seguir correctamente el orden, prioridad de las etiquetas, la jerarquía y la he-
rencia. Todo ésto, conforme se vayan realizando ejercicios se irá dominando cada vez más, así
que ¡ánimo y prueba por ti mismo todos estos ejercicios!
5. Reglas de estilo y selectores.

Las reglas de estilo serán los diseños aplicados a cada etiqueta HTML de nuestro docu-
mento, pero en un documento pueden existir muchas etiquetas, y en determinados casos quere-
mos aplicar nuestro diseño a sólo una parte. En el apartado anterior vimos que si ponemos una
regla de estilo a una etiqueta concreta, cuando la aplicamos a la etiqueta <p>, se aplica a toda
etiqueta existente en el documento; pero si queremos seleccionar nuestras etiquetas para hacer
llegar nuestros diseños de una forma más concreta, tenemos otras formas de hacerlo. Para ello
existen los selectores:
- Selectores de elemento.
- Selectores de ID.
- Selectores de Clase.
5.1. Selector de elemento.
Un selector de elemento nos va a permitir aplicar una regla de estilo sobre un tipo de
elemento concreto de HTML. Para ello tenemos que poner el tag o etiqueta seguido de los pares 215
de propiedad: valor, separadas por ";", todo ello cerrado entre corchetes. Es muy importante
seguir estrictamente el formato porque si no tendremos errores difíciles de detectar.
/* Podemos añadir comentarios opcionalmente, y pueden ocupar una o varias líneas. Estos comentarios los
verá un usuario avanzado, por lo que no se debe poner información transcendental.
*/
etiquetaHTML {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
Por ejemplo si queremos aplicar a la etiqueta <h3> el color Azul y a la etiqueta de párrafo
<p>, el color Rojo y cursiva tendremos que escribir lo siguiente:
Aula Mentor
miestilo.css
Si creamos una página de ejemplo, veremos que efectivamente se ha aplicado correcta-

mente a todas las etiquetas del fichero.
Puedes visitar el ejemplo07-selectores-elemento/
216 5.2. Selector de ID.
Los selectores de ID, seleccionarán aquellas etiquetas que coincidan con el identificador
asociado id="nombre_identificador". Estas etiquetas serán distinguidas en el fichero o estilo
CSS, porque les preceden una #, usándose de la siguiente forma:
/*
En este caso seleccionamos todos los elementos que hay en documento que corresponde al identificador
dado. Solo se puede usar una vez en el documento CSS y debe ser declarado una única vez en el CSS. Por
lo que se suele usar para secciones bien diferenciadas, tipo menú superior, contenido, barra lateral,
etc. Aunque se puede usar para cualquier otra etiqueta como párrafos, títulos, tablas, etc.
*/
#nombre_identificador {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
}
M2. CSS3
Veamos un ejemplo, imaginemos que vamos a tener dos identificadores, uno para el
menu_superior y otro para el menu_inferior, y en el menú superior vamos a poner un texto
más grande para destacarlo junto con otras propiedades, y en el inferior un texto más pequeño
y otras propiedades distintas.
…..
<nav id="menu_superior">
<a href="index.html">Inicio</a> | <a href="index.html">Productos</a> | <a href="index.html">Empresa</

a> | <a href="index.html">Contactar</a>
</nav>
…..
…..
<footer id="menu_inferior">
<a href="index.html">Inicio</a> | <a href="index.html">Productos</a> | <a href="index.html">Empresa</

a> | <a href="index.html">Contactar</a>
</footer>
217
…..
…..
Si creamos un fichero css con el siguiente contenido:
/*####################################*/
/*SELECTORES DE ID */
/*####################################*/
#menu_superior{
font-size: 40px;
font-style: italic;
Aula Mentor
color: red;
#menu_inferior{
font-size: 20px;
font-style: normal;
color: blue;
/*####################################*/
218 /*SELECTORES DE ELEMENTO (del ejemplo anterior)*/
/*####################################*/
/* Comentario para la etiqueta h3*/
h3 {
color: blue;
p{
color: red;
font-style: italic;
}
Obtendremos el siguiente resultado:

M2. CSS3
Puedes visitar el ejemplo08-selectores-id/
Además si usamos el modo desarrollador, pulsando la tecla F12, podremos comprobar

qué estilo es el que se está aplicando en ese momento, útil para detectar errores en el código,
indicando el diseño, y el archivo:
5.3. Selector de Clase.

219
Los selectores de Clase, seleccionan los elementos dados por un nombre de clase, esta se
puede utilizar al contrario de los selectores de ID varias veces, comienzan con punto '.', seguido
del nombre que queramos darle a la clase. Esta regla afectará a todos los elementos HTML que
pongamos su atributo 'class'.
Veamos un ejemplo, siguiendo con el apartado anterior, vamos a añadir dos clases, tex-
to_actual y texto_antiguo, y con algunas propiedades para distinguirlos, más adelante veremos
que hace cada una de las propiedades, pero ahora debemos centrarnos en cómo seleccionar los
elementos de nuestra página.
/*
En este caso seleccionamos todos los elementos que correspondan a la

clase con el nombre dado.
*/
.nombre_clase {
propiedad1: valor1;
propiedad2: valor2;
Aula Mentor
propiedad3: valor3;
Si añadimos al fichero que teníamos miestilo.css el siguiente contenido:
...
/*####################################*/
/*SELECTORES DE CLASE*/
/*####################################*/
.texto_actual{
text-decoration: underline;
220 .texto_antiguo{
text-decoration: line-through;
...
Añadimos varios ejemplos de fichero HTML:
….
<section>
<article>
<h1>Título principal artículo 1</h1>
<p class="texto_antiguo">Texto1 del artículo....</p>
<p class="texto_actual">Texto2 del artículo....</p>

M2. CSS3
</article>
….
<article>
<h1>Título principal artículo 2</h1>
</article>
</section> 221
Obtendríamos el siguiente resultado:
Puedes visitar el ejemplo09-selectores-clase/
Como podemos apreciar el efecto ha sido el que queríamos dependiendo de la clase

hemos realizado unas acciones u otras. En este caso hemos usado el estilo text-decoration: line-
Aula Mentor
through; para el estilo antiguo, insertando una línea en el centro y text-decoration: underline;
para poner el texto subrayado.
5.4. Jerarquía entre selectores.
Una vez visto las diferentes formas de seleccionar los elementos, nos podemos realizar
la siguiente pregunta, ¿cuál tiene prioridad respecto a las demás en caso de duda sobre una eti-
queta? En la siguiente tabla podemos ver el orden de prioridad:
1º Selector de ID
2º Selector de Clase
3º Selector de Elemento
Es decir, si a un elemento lo seleccionamos por el elemento, por la clase y por el ID, el

valor que prevalecerá siempre será el del ID y luego la Clase. Veamos un ejemplo:
<p class="desdeClase" id="desdeID">¿De qué color soy?, tengo ID= azul, Clase= rojo y elemento = verde.
Solución= AZUL</p>
<p class="desdeClase">¿De qué color soy?, No tengo ID, Clase= rojo y Elemento = verde. Solución=
ROJO</p>
222
<p>¿De qué color soy?, No tengo ID ni Clase pero si Elemento = verde. Solución= VERDE</p>
En el fichero CSS3 tenemos:
/*SELECTORES DE ID */
#desdeID{
color: blue;
/*SELECTORES DE CLASE*/
.desdeClase{
color: red;
M2. CSS3
/*SELECTORES DE ELEMENTO */
p{
color: green;
El resultado sería:
223
Puedes visitar el ejemplo10-selectores-jerarquia/
6. Resumen.
- Las hojas de estilo en cascada (CSS - Cascading Style Sheets) contienen las definiciones de
estilo y diseño de los documentos HTML5.
- Las etiquetas de HTML serán de dos tipos: elementos de bloque y elemento en línea. Depen-
diendo del diseño que vayamos a realizar tendremos que tener en cuenta esto para obtener
el resultado deseado.
- Para definir nuestras propiedades sobre el documento podemos realizarla de tres formas
diferentes.
• En línea.
• Internos.
• Externos.
- Las hojas de estilo tiene una jerarquía que dependiendo de la proximidad de la etiqueta se
usará un estilo u otro. Por norma general el orden de mayor a menor: en línea, internos y
externos. Aunque debemos tener cuidado en el orden de la definición de éstos dos últimos.
Aula Mentor
- En caso de duda, por existir varias definiciones del mismo nivel sobre la misma etiqueta,
usamos a continuación de la propiedad !important, indicando al navegador que ésta es la
que prevalece sobre las demás.
- En los documentos existen muchas etiquetas y la mayoría se repiten. Para concretar y se-
leccionar más eficazmente a qué etiquetas les queremos aplicar los estilos, tendremos tres
formas básicas:
• Selector de elemento. Selecciona los tag o etiquetas propias del HTML.
• Selector de ID. Crea unos identificadores únicos y se selecciona a través del identifi-
cador creado.
• Selector de Clase. Crea unas clases y se podrán usar varias veces en el mismo documen-
to, seleccionando en tal caso todas las etiquetas que correspondan a esa clase.
- La jerarquía entre selectores será el diseño que decidirá el navegador en caso de duda ante
varias selecciones sobre la misma etiqueta.
1º - Selector de ID.
2º - Selector de Clase.
3º - Selector de elemento.
224
Unidad 5: Propiedades, elementos
flotantes y posicionamiento
1. Propiedades CSS3.
1.1. Unidades de medida.
Cuando estamos asignándole propiedades a nuestras etiquetas podemos expresar de

diferentes formas las unidades de medida según deseemos:
Unidades de medida Absolutas:

225
Este tipo de medida nos permite asignar un valor estático y preconcebido a nuestro
elemento o etiqueta, representándose internamente independientemente del navegador, sistema
operativo y estado de la ventana (al 100% o parcial). Debemos recordar que la resolución de la
pantalla siempre nos la da en píxeles, por ejemplo: 1024x7688, 1280x1024, 800x600, etc.
Medidas en pt (puntos). Define el tamaño en puntos, y cada punto equivale a 1 pulgada/72,

es decir, unos 0.35 milímetros. No muy extendida.
Medidas en mm (milímetros). Define el tamaño en milímetros. No muy extendida.
Medidas en cm (centímetros). Define el tamaño en centímetros. No muy extendida.
Medidas en in (pulgadas). Define el tamaño en pulgadas. No muy extendida.
Medidas en pc (picas). Define el tamaño en picas, y cada pica equivale a 12 puntos, es decir,
unos 4.23 milímetros. No muy extendida.
Unidades de medida Relativas:
Este tipo de medida es más dinámico que el anterior y están referidas a un valor por otra
variable, por lo que no en cada momento va a depender del otro parámetro. Aunque pueda ser
más difícil su manejo, es de los más usados en la web, sobre todo cuando queramos adaptarnos
a diferentes dispositivos de pantalla y resoluciones.
Aula Mentor
Medidas en px (píxeles). Es muy usual usar esta medida al menos para algunas zonas,
para fijar un tamaño concreto e indicar el número de píxeles en pantalla que va a ocupar.
Por ejemplo, cuando dijimos con la propiedad font-size: 32px; estamos diciendo que el texto va
a ocupar 32 píxeles de nuestra pantalla. Esta medida algunos autores la toman también como
absoluta, ya que define un valor fijo, aunque realmente va a depender de la resolución de la
pantalla del usuario.
Medidas en em. Esta unidad de medida es útil cuando queremos tener en cuenta la con-
figuración del tamaño de letra en el ordenador de usuario, por ejemplo para aplicaciones para
discapacitados visuales. Ya que esta medida es relativa al tamaño de letra pre configurado del
usuario en su navegador. El nombre de EM está relacionado con la letra M. Originalmente, la
unidad se deriva de la anchura de la letra mayúscula "M" en el tipo de letra dado. Esta unidad
es la misma para todas las fuentes en un tamaño de punto dado.
Medidas en %. Esta es la más recomendada, está basada en aplicar una unidad relativa a
otro elemento definido en la página. Si por ejemplo queremos que el ancho de una capa sea la
mitad de su contenedor padre, podemos indicar width: 50%.
Podemos usar tanto las medidas absolutas como las relativas conjuntamente, siempre
y cuando la usemos con un objetivo concreto. Siempre es obligatorio indicar las unidades de
medida a continuación del valor que estamos utilizando, salvo que indiquemos que el valor de
una propiedad es 0.
Veamos varios ejemplos con el texto, aunque usar la medida en % se aplica a contene-
dores o div y no a textos como tal:
226
<p style="font-size:10pt;">Texto con valor = 10pt<p>
<p style="font-size:10mm;">Texto con valor = 10mm<p>
<p style="font-size:10cm;">Texto con valor = 10cm<p>
<p style="font-size:10in;">Texto con valor = 10in<p>
<p style="font-size:10pc;">Texto con valor = 10pc<p>
<p style="font-size:10px;">Texto con valor = 10px<p>
<p style="font-size:10em;">Texto con valor = 10em<p>
<p style="font-size:10%;">Texto con valor = 10%<p>
Puedes visitar el ejemplo01-unidad-medida/
Puedes ver el resultado en los recursos de la Unidad 5, apreciarás una gran diferencia en
cada caso, por lo que debemos prestar mucha atención a los valores que ponemos.
1.2. Anchura y Altura.
En algunos casos necesitaremos fijar un valor de altura y anchura a nuestros elementos

de HTML5, por ejemplo, si creamos un contenedor para almacenar las promociones de nuestra
M2. CSS3
web, este contenedor deberá tener un valor de anchura o altura. En caso de no indicarse, el
navegador, entenderá que si necesita crecer el interior del elemento crecerá en el valor que no
se ha indicado.
Para ello, disponemos de una etiqueta para fijar la anchura (width) y otra para fijar la
altura (height). Imaginemos que vamos a crear varios contenedores y queremos darle un tama-
ño concreto, en el archivo HTML5 tendríamos:
<section id="deportes">
<article>
<div id="caja1"></div>
</article>
</section>
<section id="sucesos">
<article>
<div id="caja2"></div>
227
</article>
</section>
Y en el fichero CSS3 tendríamos lo siguiente (nótese que hemos usado una propiedad
para agregarle un fondo background-color y poder distinguir visualmente qué es lo que mostra-
ría nuestro navegador):
#deportes{
width: 200px;
height: 200px;
background-color: green;
#sucesos{
width: 100px;
Aula Mentor
height: 100px;
background-color: red;
#caja1{
width: 50px;
height: 50px;
background-color: blue;
#caja2{
width: 20px;
height: 20px;
228 background-color: black;
Puedes visitar el ejemplo02-anchura-altura/
Debes prestar atención a la forma que ha usado el navegador para mostrar cada com-
ponente, y qué elemento está dentro de cuál, cómo y dónde se han ubicado. Comprender todo
ésto te facilitará en un futuro la organización de contenidos en tu aplicación web.
M2. CSS3
1.3. Colores.
Para expresar los colores en CSS3 existen varias formas, dependiendo de la necesidad
usaremos una u otra:
Color en Inglés:
Se puede escribir el nombre del color en inglés, esta forma nos mostraría un número
limitado de colores. Por ejemplo: red, white, yellow, green, etc.
Color en Hexadecimal indicando intensidad RGB:
Se puede expresar el color en valor hexadecimal indicando el valor de tinte en los colo-
res primarios R (Red), G (Green) y B (Blue). Siendo el valor menor el 00 y el valor máximo el
FF. Los valores en Hexadecimal serían los siguientes:
Para ello, tenemos que anteponer la almohadilla a los colores:
#RRGGBB
Por ejemplo, si queremos poner el color rojo con esta definición, pondríamos el rojo RR con
229
valor FF y el resto con 00:
#FF0000
Si quisiéramos un rojo menos fuerte sólo deberíamos indicar el nuevo valor:
#990000
Color en decimal indicando intensidad RGB:
Podemos expresar la intensidad del color de forma numérica, siendo más precisa que
la forma anterior, ya que en vez de usar 16 valores para definir el tinte del color usamos 255,
siendo 0 el valor inferior y 255 el valor máximo. No acepta negativos en caso de asignarse por
equivocación se tomará el 0. Para ello tenemos el método:
rgb(valor de rojo, valor de verde, valor de azul)
Para el caso que queramos sacar el color violeta (5 partes de azul y 2 de rojo) podríamos
usar la siguiente combinación:
rgb(20,0,100);
Color en % indicando intensidad RGB:
Al igual que en el apartado anterior, podemos indicar los colores usando el método rgb,
pero en este caso en vez de indicar un valor entre el 0 y 255, se usará entre el 0% del color y el
Aula Mentor
100% del color.
rgb(% valor de rojo, % valor de verde, %valor de azul)
Si queremos crear un color que tenga un 30% de rojo, un 60% de verde y un 80% de azul,
tendríamos que indicar:
rgb(30%, 60%, 60%)
Además podemos indicar la transparencia añadiendo un parámetro más al final, como

vimos cuando hicimos los diseños en 2D en el canvas, para ello añadimos al final de rgb una "a"
y el parámetro en última posición:
contexto.strokeStyle = "rgba(255,0,0,1)";
El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1

sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad trans-
parente. Esta notación también se puede usar con las otras formas de agregar colores.
En la siguiente tabla podemos ver los nombres en inglés más estándares en la web:
Color Color name Hex rgb Decimal

black #000000 0,0,0
silver #C0C0C0 192,192,192
230
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255
Respecto a los colores también se pueden usar otros métodos, como son el HLS (hue-
saturation-lightness) y definir muchos más colores con el nombre en inglés; pero con los méto-
dos vistos hasta ahora se puede representar la mayoría de los colores existente y si te interesa
mucho los formatos y definición de los colores, siempre puedes ampliar la información en la
documentación oficial en:
http://www.w3.org/TR/css3-color/#numerical
M2. CSS3
Propiedades de color
Para la definición del color en sí, hemos visto antes varias etiquetas, pero existen algu-
nas propiedades distintas que también están relacionadas con los colores de nuestra aplicación
web, estas son: color (color del texto), background-color (color de fondo) y border-color
(color del borde) y box-shadow (sombra).
Veamos un ejemplo, imaginemos una sección que va a tener un color de texto concreto
(blanco), color de fondo (azul), un borde (verde) y un sombreado (naranja). Podríamos escribir:
#miseccion{
width: 600px;
height: 300px;
color: white;
/* Para que se aprecie mejor aumentamos el grueso del borde*/
border-width: 4px;
border-style: solid;
231
border-color: black;
/* Para la sombra de color naranja */
box-shadow: 2px 2px 12px orange;
/* Para que lo soporte mozilla */
*moz-box-shadow: 2px 2px 12px orange;
/* Para que lo soporte Android Browser 2.1+ */
*webkit-box-shadow:2px 2px 12px orange;
/* Para que lo soporte Internet Explorer 9 (IE9) */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#FFA500',
Direction=135, Strength=12);}
}
Aula Mentor
Puedes visitar el ejemplo03-colores/
Para el sombreado tenemos varios parámetros para poder configurar la dirección, el ta-
maño, intensidad y color de la sombra. Éstas son:
FORMATO DESCRIPCIÓN
box-shadow: x y z color X: margen de la sombra hacia la derecha.
232 Ejemplo: Y: margen de la sombra hacia abajo.
box-shadow: 2px 2px 12px orange; Z: intensidad de degradado o desenfocado

(opcional, por defecto 0)
Color: es el color de la sombra.
1.4. Textos.
Una de las partes más importantes en las páginas web es el tratamiento de texto y las
propiedades que podemos hacer. Podemos aplicar diferentes propiedades a nuestros textos,
entre las más destacadas tendríamos:
1.4.1. Tipo.
1.4.2. Tamaño.
1.4.3. Estilo.
1.4.4. Grosor.
1.4.5. Línea de decoración.
1.4.6. Sombras.
1.4.7. Transformaciones.
M2. CSS3
1.4.8. Indentación.
1.4.9. Espaciados.
1.4.10. Alineación.
1.4.1. Tipo.
Con CSS3 podemos usar diferentes tipos de letra y fuentes predefinidas o incluso con las
nuevas versiones podemos incorporar nuestros propios tipos de fuente, incluso si el usuario no
tiene instalada esa fuente. Para esto tenemos la siguiente etiqueta:
font-family: "Tipo de letra"
Es posible añadir varios tipos de letra y si ése no existiera cogerá el siguiente, y en caso
que el navegador no encontrase el tipo de letra asociado al texto, escogerá el que tenga él por
defecto.
Veamos el siguiente ejemplo:
.opcion1{
font-family: batang, "Comic Sans MS", Arial, Erronea;
} 233
.opcion2{
font-family: "Comic Sans MS", Arial, Erronea;
.opcion3{
font-family: Arial, Erronea;
.opcion4{
font-family: Erronea;
}
Aula Mentor
Puedes visitar el ejemplo04-texto-font/
Si nos fijamos hay dos características que no debemos dejar escapar, la primera es que
cuando el tipo de letra tiene más de una palabra, ésta ha de ir encerrada entre comillas. Y la
segunda, el último tipo de letra ha sido inventado, y he puesto tipo de fuente errónea, y me ha
escrito el texto en un formato concreto, ¿cuál? Debemos recordar que el modo desarrollador de
nuestro navegador (F12) es nuestro mejor aliado, por ejemplo en Firefox si nos vamos al ele-
mento en concreto, veremos que nos indica el tipo de fuente elegida, en este caso al no existir
el tipo Errónea, ha cogido la suya por defecto que es Times New Roman:
234
- Ve pasando el ratón por cada uno de los textos y las opciones y confirma que se ha ido
aplicando los estilos que hemos ido definiendo.
Agregar nuestras propias fuentes de texto
Imaginemos que las fuentes existentes no nos satisfacen o queremos usar un tipo de
fuente que no me detecta el navegador y la apariencia de mi web va a depender mucho de la
tipografía existente, deberíamos usar la siguiente sintaxis:
/* definimos primero el tipo de fuente */
@font-face {
font-family: nombredemifuente;
src: url(rutadelafuente);
}
M2. CSS3
/* Ya la podemos usar en nuestros diseños */
…..
font-family: nombredemifuente;
…..
Un ejemplo puede ser el siguiente:
@font-face
font-family: "mitipografia";
src: url('../font/waltographUI.ttf');
Recuerda que si tenemos el archivo .CSS en una carpeta de distinto nivel, debemos usar
".." para acceder al padre, y a partir de ahí a la carpeta donde estén las fuentes, en este caso font.
235
Podemos hacer nuestras propias fuentes, existen programas específicos donde te las
pueden diseñar, pero también podemos descargarnos otras gratuitas en otros sitios; bien de va-
rios recursos de internet o las que nos facilitan Google Fonts.
http://www.google.com/fonts/#
Por ejemplo, vamos a descargarnos, una fuente de ejemplo (Lobster):

Aula Mentor
Seleccionamos el botón con el título Quick Use a la izquierda de Add to Collection.
Se nos abrirá una ventana con las diferentes opciones del tipo de fuente y la forma de
usarla en nuestra web:
Tenemos tres métodos para agregar la fuente:

236
- Enlazando la ruta del archivo en el head de nuestra página:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
- Haciendo un import con la ruta remota del archivo.
@import url(http://fonts.googleapis.com/css?family=Lobster);
- Mediante JavaScript.
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lobster::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
M2. CSS3
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Te recomiendo que pruebes a descargarte alguna fuente que te guste, y si tuvieras alguna
duda, puedes ver un ejemplo completo con todos estos ejemplos:
Puedes visitar el ejemplo04-texto-font/ 237
1.4.2. Tamaño.
Para variar el tamaño de letra tenemos la propiedad que ya hemos usado anteriormente:
font-size: valor;
Este valor lo podemos expresar de varias formas:
Absoluta Un palabra clave que asigna un valor concre-
to:
{xx-small, x-small , small, medium, large, x-

large, xx-large}
Ejemplo: font-size: x-large;

Aula Mentor
Relativa Relativa al tamaño por defecto que tenga el

navegador en el elemento padre, si está den-
tro de una etiqueta H1 será mayor en relación
a esa etiqueta:
{ larger | smaller }
Ejemplo: font-size: large;

Longitud Indicamos un tamaño específico, indepen-
diente del valor por defecto del navegador. No
se pueden usar valores negativos.
Ejemplo: font-size: 18px;
font-size: 1.7em;
Porcentaje Indicamos el valor en % teniendo como base
la que tenga por defecto el navegador.
Ejemplo: font-size: 200%;
El resultado lo puedes ver en el ejemplo05-texto-size.
Relación de medidas absolutas y otros tamaños de HTML.
238
Valores ab- xx-small x-small small medium large x-large xx-large
solutos
Factor de 3/5 ¾ 8/9 1 6/5 3/2 2/1 3/1
escala
HTML títulos h6 h5 h4 h3 h2 h1
HTML ta- 1 2 3 4 5 6 7
maños de
fuente
1.4.3. Estilo.
También podemos agregarle varias propiedades para modificar el estilo de texto, para
ello, usamos la propiedad:
font-style: valor;
VALOR DESCRIPCIÓN
normal Es el estilo por defecto del navegador, no es
necesario especificarlo mientras no haya una
propiedad padre aplicando otro estilo:
Ejemplo: font-style: normal;

M2. CSS3
italic Representaría nuestro texto de forma cursiva.
Ejemplo: font-style: italic;

oblique Representaría nuestro texto de forma oblicua,
es muy parecida a la italic y dependiendo so-
bre todo del estilo de fuente se apreciará más
o menos.
Ejemplo: font-style: oblique;
1.4.4. Grosor.
Otra forma de destacar nuestro texto es agregarle un grosor concreto, poner por ejemplo
el texto en negrita ayuda mucho a la lectura de texto que queramos destacar. Para ello CSS3 nos
proporciona la siguiente etiqueta:
font- weight: valor;
Se pueden usar los siguientes valores:
VALOR DESCRIPCIÓN
Numérico Existen diferente grosores predefinidos, y de-
pende de la fuente, el navegador y el tamaño
{100 – 900} se apreciará más o menos. 239
•100 - Thin
•200 - Extra Light (Ultra Light)
•300 - Light
•400 - Normal
•500 - Medium
•600 - Semi Bold (Demi Bold)
•700 - Bold
•800 - Extra Bold (Ultra Bold)
•900 - Black (Heavy)
Ejemplo: font-weight: 300;

normal/bold El valor normal correspondería al numérico
400 y el valor bold al 700.
Aula Mentor
bolder/lighter Dependiendo del valor de la etiqueta padre,

aumenta el grosor (bolder) o disminuye el
grosor (lighter)
Puedes ver algunos ejemplos en ejemplo06-texto-style+weight/
1.4.5. Línea de decoración.
Podemos agregar líneas de decoración al texto, usando la siguiente propiedad:
text-decoration: valor;
VALOR DESCRIPCIÓN
none Elimina cualquier apariencia que tenga defi-
nida, ya venga de un elemento jerárquico su-
perior.
Ejemplo: text-decoration: none;

overline Agrega una línea a la parte superior del texto.
Ejemplo: text-decoration: overline;

line-through Agrega una línea en medio del texto, efecto
de tachado.
240
Ejemplo: text-decoration: line-through;
underline Agrega una línea debajo del texto, efecto su-
brayado.
Ejemplo: text-decoration: underline;
Estas propiedades al igual que muchas otras se pueden combinar aplicándose simultá-
neamente mientras no sea restrictiva una de la otra. Serían factibles por ejemplo, agregar a un
texto una línea superior y una inferior.
text-decoration: overline underline;
El resultado de aplicar estas propiedades sería el siguiente:
Puedes visitar el ejemplo07-texto-decoration+shadow+transform/

M2. CSS3
1.4.6. Sombras.
Se puede añadir sombra al texto, usando la propiedad:
text-shadow: valores;
text-shadow: x y z color X: margen de la sombra hacia la derecha.
Ejemplo: Y: margen de la sombra hacia abajo.
text-shadow: 2px 2px 12px orange; Z: intensidad de degradado o desenfocado

(opcional, por defecto 0)
Color: es el color de la sombra.
Estas propiedades al igual que pasa con box-shadow, otras en HTML5 y CSS3 son sopor-
tadas por las últimas versiones de los navegadores.
El resultado de aplicar la propiedad text-shadow: 2px 2px 12px orange; sería:
241
1.4.7. Transformaciones.
En muchas ocasiones nuestra aplicación web tendrá que realizar transformaciones sobre
el texto, ya sea porque reciba los datos de una base de datos en bruto, un formulario web o
porque nos queramos asegurar que el texto tenga un formato en concreto. Para ello tenemos la
siguiente propiedad:
text-transform: valor;
VALOR DESCRIPCIÓN
Escribe la primera letra de cada palabra en
mayúsculas.
capitalize
Ejemplo: text-transform: capitalize;
Escribe todas la letras en mayúsculas.
uppercase Ejemplo: text-transform: uppaercase;

Escribe todas la letras en minúscula.
lowercase Ejemplo: text-transform: uppaercase;

Aula Mentor
Deja las letras sin modificación para evitar que

exista una etiqueta de orden superior con otra
none transformación.
Ejemplo: text-transform: none;
El resultado de aplicando estas propiedades al texto sería:
1.4.8. Indentación.
Al igual que la propiedad anterior, cuando estemos rellenando texto de otras fuentes,
o escribiendo directamente el texto en nuestra web, es necesario indentar nuestro texto (dar
espacios al inicio de la primera línea de cada párrafo). Para ello disponemos de la siguiente
propiedad:
text-indent: valor;
242
En este caso el valor se puede expresar en un valor estático o variable en porcentaje res-
pecto al ancho del párrafo, en caso de que el usuario reduzca o amplíe el tamaño de la ventana,
este % se calculará automáticamente. También se le puede aplicar un valor inherit (valor que
viene heredado de los padres del elemento). Puedes ver unos ejemplos en el Ejemplo08-texto-
indent.
1.4.9. Espaciados.
Podemos asignar un valor concreto de espaciado tanto en las letras como en las palabras
de nuestros párrafos de texto, al igual que el espacio entre líneas (interlineado). Para ello dispo-
nemos de las siguientes etiquetas:
PROPIEDAD DESCRIPCIÓN
letter-spacing: valor; Permite variar el espacio entre los caracteres
de cada palabra.
Ejemplo: letter-spacing: 20px;
letter-spacing: -2px;
M2. CSS3
word-spacing: valor; Permite variar el espacio entre las palabras de

un párrafo.
Ejemplo: word-spacing: 20px;
Ejemplo: word-spacing: -2px;

line-height: valor; Permite controlar el espacio entre líneas, éste
puede ser fijo, un valor de longitud, normal o
un porcentaje.
Ejemplo: line-height: 30px;
line-height: 85%;
white-space: valor; Permite controlar los espacios vacíos, sus va-
lores son pre (preserva los espacios escritos
en el HTML y los saltos de línea). nowrap (Im-
pide los saltos de línea automáticos por lo que
crecerá la web horizontalmente). normal (deja
que el navegador gestione los saltos de línea y
espacios múltiples).
Ejemplo: white-space: pre;
white-space: nowrap;
243
white-space: normal;
Puedes visitar el ejemplo09-texto-espaciado/
Puedes ver varios ejemplos en el link anterior, prueba a realizar varias propiedades y
comprueba que funcionan tal y como dice la especificación.
1.4.10. Alineación.
El texto lo podemos alinear de dos formas diferentes, de forma horizontal y de forma

vertical, para ello HTML5 nos proporciona las siguientes etiquetas y valores posibles.
Aula Mentor
ALINEACIÓN DESCRIPCIÓN
horizontal Alinea el texto de forma horizontal, aunque
dependiendo del caso no hace el efecto exac-
text-align: valor; to que esperábamos. Existen varios valores
posibles que puede coger esta propiedad:
left: Texto alineado a la izquierda (valor por

defecto).
right: Texto alineado a la derecha.
center: Texto centrado.
justify: Texto justificado.
auto: Alineación heredada por defecto.

vertical Alinea el texto de forma vertical respecto a los
otros elementos. Puede tomar varios valores
vertical-align: valor; diferentes:
baseline: Alinea el texto respecto a la parte

inferior de la línea base (valor por defecto).
sub: Escribe el texto en formato subíndice.

244
super: Escribe el texto en formato superíndice
o exponente.
Valor de longitud: Si este es positivo, alinea

el texto por encima de la línea base. Si es ne-
gativo, lo hace por debajo.
Porcentaje: Si es positivo, alinea el texto por

encima de la línea base. Si es negativo, lo hace
por debajo.
top: Realiza una alineación superior respecto

al elemento padre. Por ejemplo en una tabla
sería la parte superior.
middle: Alineación en el medio respecto al

elemento padre. Por ejemplo en una tabla se-
ría en el medio de la celda.
bottom: Alineación inferior respecto al ele-

mento padre. Por ejemplo en una tabla sería
en la parte inferior de la celda.
Al igual que en otras propiedades, dependiendo de valor, mientras no se contradigan se

pueden usar simultáneamente.
M2. CSS3
Puedes ver ejemplos tanto de alineación en el siguiente ejemplo y recuerda realizar tus
propias alineaciones de texto y practicar con las propiedades en el ejemplo10-texto-alineacion/
Hemos visto hasta ahora las propiedades más importantes y que se utilizan en la mayo-
ría de las aplicaciones web aplicadas al texto. Si estás interesado sobre alguna propiedad más
específica y fuentes de CSS3 siempre podemos ver las actualizaciones e información completa
en:
http://www.w3.org/TR/css3-fonts/
1.5. Márgenes, bordes y rellenos Box Model.
Como habíamos comentado anteriormente, debemos ver nuestra web como un conjunto
de etiquetas HTML y estas etiquetas se comportan como un modelo de caja. Pensemos que cada
etiqueta va a ocupar un rectángulo y este rectángulo tiene unas propiedades: márgenes, bordes
y rellenos. Debes prestar mucha atención a los siguientes conceptos porque posteriormente te
facilitarán o dificultarán que lo que quieres representar en tu aplicación web sea realmente lo
que deseas:
245
Tendríamos por tanto las siguientes propiedades sobre nuestra caja:

Aula Mentor
PROPIEDAD DESCRIPCIÓN
margin Nos permite aplicar un margen (espaciado ex-
terno a nuestra caja) a un elemento HTML. Se
puede hacer de forma genérica aplicando el
mismo tamaño a toda la caja usando margin:
valor;. Por ejemplo margin: 50px; aplicaría un
margen de 50px a toda nuestra caja.
También se puede hacer de forma selectiva en

cada lado:
margin-top: Para el margen superior.
margin-bottom: Para el margen inferior.
margin-left: Para el margen izquierdo.
margin-right: Para el margen derecho.

padding Nos permite aplicar un relleno interno (espa-
ciado de nuestra caja) a un elemento HTML.
Se puede hacer de forma genérica aplican-
do el mismo tamaño a toda la caja usando
padding: valor;. Por ejemplo padding: 50px;
aplicaría un margen de 50px a toda nuestra
246 caja.
También se puede hacer de forma selectiva en

cada lado:
padding-top: Para el relleno superior.
padding-bottom: Para el relleno inferior.
padding-left: Para el relleno izquierdo.
padding-right: Para el relleno derecho.
* ¡Ojo! Esta propiedad aumenta el tamaño

de la capa, si tuviéramos un padding=15px;
en un elemento de 100x100px, la
capa correspondiente habrá crecido a
100+15(lado1)+15(lado2)=130px de alto y
130px de ancho.
Veamos varios ejemplo sobre una caja de un tamaño fijo y cómo va interactúan las pro-
piedades vistas sobre las etiquetas de HTML5.
En el siguiente ejemplo podrás ver cómo afectan las propiedades anteriores:

M2. CSS3
Ejemplo11-margin-padding/
Aquí no hemos aplicado nada, sólo he ido agregando cajas dentro de cajas, debéis pen-
sar que es como un puzzle donde tenemos varias cajas. En nuestro caso, una caja grande de
color verde, a continuación cajas de menor tamaño (100x100px). Si usamos el modo depurador
del navegador nos da esa información, muy interesante ya que puedo ver los elementos pasan-
do el ratón por encima de ellos, ésto nos ayudará porque además de indicarnos dónde está el
elemento en cuestión, nos dirá el área que entiende el navegador que va a tener para ubicar ese
elemento y las propiedades.
Estarás pensando que en la imagen de la derecha, la información que nos da es de

102x102 px, pero, ¿si nuestra caja era de 100px? Debemos tener en cuenta que le hemos puesto
un borde de 1px, para distinguir las cajas en este ejemplo, a cada lado y el navegador nos dice
realmente lo que a él le va a ocupar poner esta caja en su tablero. Cuando se crean web y nos 247
crean efectos raros o inesperados suele ser por este tipo de errores, por ejemplo, si hubiera
puesto una caja contenedor (la de color verde) de 300x300 exactamente, no habríamos contado
los 2px añadidos de cada caja por lo que se bajaría a la siguiente línea.
Y ahora imaginemos que aplicamos un margen de 10px a la caja justo del medio, ¿qué
crees que pasará? ¿Y si le aplicamos en vez de un margen un padding?
Margen de 10px (margin:10px;) Padding de 10px (padding:10px)
Queda puesto de manifiesto en los ejemplos anteriores el resultado de aplicar las di-
ferentes propiedades, y además de sacar la conclusión de el margin (da espacio exterior) y el
padding (da espacio interior). No obstante, no debemos dejar pasar por alto qué ha pasado
cuando hemos ampliado esas líneas y cómo han afectado a la posición de las cajas y ¿porqué la
caja 7 no se ha colocado justo debajo de la caja 4? En verdad es porque los elementos van flotan-
do al usar una propiedad que veremos más adelante y se han ido colocando e intentado meter
Aula Mentor
pero se ha topado con la caja 5 y no ha podido ir más allá, y ¿qué ha pasado con las siguientes?
Pues que ha intentado ponerse justo a la derecha de la caja 7 y no ha cogido tampoco, entonces
ha bajado e ido al siguiente hueco libre, justo debajo de todas. De todas formas del apartado 2
sobre los elementos flotantes y posicionamiento veremos más ejemplos.
Depuración en Firefox Imagen girada 90º para ver por qué la caja 7
no se ha puesto debajo de la caja 4.
Aplicar bordes a nuestros diseños
Como ya hemos visto podemos aplicar border a nuestros diseños y este borde será exter-
nos a nuestra caja, por lo que ocupará de ancho: (ancho caja)+2*(ancho del borde). Para aplicar
248 bordes usamos las siguientes propiedades:
border-width:valor;
border-style: valor;
Con border-width le asignamos un valor de ancho al borde y con border-style el estilo,

estas dos etiquetas son las mínimas para aplicar un border a nuestros elementos.
Los diferentes valores que puede tomar border-style serían los siguientes:
Valor Descripción
none Valor por defecto, si está activa anula un bor-
de específico.
hidden Pone un borde oculto, depende del diseño es
posible que lo necesitemos en el caso de con-
flictos de bordes por ejemplo en elementos
de tabla.
dotted Pone un borde con relleno con puntos.
dashed Pone un borde relleno de rayas.
solid Pone un borde contiguo, con relleno sólido.
double Pone doble línea sólida.
groove Efecto 3D relieve incrustado en la página.
ridge Efecto 3D relieve saliendo de la página.
M2. CSS3
inset Efecto 3D simulando marco incrustado hacia

dentro.
outset Efecto 3D simulando marco biselado hacia
fuera.
Podemos ver un ejemplo a continuación:
Cada navegador puede representar de una forma cada propiedad y podemos aplicar un
estilo diferente a cada propiedad, para ello podemos especificar el borde de dos formas:
Específicamente:
Propiedad Descripción
border-top-style Estilo del borde de la parte superior. 249
border-right-style Estilo del borde de la parte derecha.
border-bottom-style Estilo del borde de la parte inferior.
border-leftstyle Estilo del borde de la parte izquierda.
En línea:
border-style: (estilo borde superior) (estilo borde derecho) (estilo borde inferior) (es-
tilo borde izquierdo)
Por ejemplo: border-style: dotted solid double dashed;
Además si solo especificamos dos estilos, éste se hará en parejas
border-style: (superior-inferior) (izquierdo-derecho);
Por ejemplo: border-style: dotted solid;
Ya vimos que en el apartado 1.3 que podíamos aplicar además colores a esos bordes con la
etiqueta:
border-color: valor;
Por ejemplo: border-color: blue;
Puedes ver un ejemplo resuelto en el ejemplo de los recursos: Ejemplo12-boder/

Aula Mentor
Si quieres ver toda la documentación al repecto de los border puedes verlo en:
http://www.w3.org/TR/css3-background/#borders
1.6. ShortHand CSS3.
Los "Shorthand" de CSS3, son la forma de aplicar una propiedad CSS de forma reducida,
lo que nos va a permitir hacer un código menos pesado y más eficiente.
Realmente cuando en el apartado anterior aplicamos varias propiedades de formas con-

tigua, estábamos usando la notación shorthand. Podemos ver a continuación varios ejemplos:
1.6.1. Bordes.
Para representar los bordes, en vez de usar:
border-top-style: valor; border-top-style: dotted;
border-right-style: valor; border-right-style: solid;
border-bottom-style: valor; border-bottom-style: double;
border-left-style: valor; border-left-style: dashed;
250
Podemos usar todo en la misma línea:
border-style: dotted solid double dashed;
Para aplicar varias propiedades a la vez:
border-width: valor; border-width: 2px;
border-style: valor; border-style: solid;
border-color: valor; border-color: blue;
Para aplicar estas propiedades podemos usar:
border: 2px solid blue;
Para aplicar nuevamente más propiedades sobre bordes:

M2. CSS3
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
border-right-width: 2px;
border-right-style: solid;
border-right-color: orange;
border-top-width: 2px;
border-top-style: solid;
border-top-color: blue;
border-bottom-width: 2px; 251
border-bottom-style: solid;
border-bottom-color: red;
Podemos usar de forma shorthand reduciendo muchas líneas de código:
border-left: 2px solid black;
border-right: 2px solid orange;
border-top: 2px solid blue;
border-bottom: 2px solid red;
1.6.2. Fuentes.
Al igual que con los bordes podemos usar la notación shorthand, reduciendo y simplifi-
cando las especificaciones de nuestra propiedades.
Por ejemplo para escribir:

Aula Mentor
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5em;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;
Podemos escribir por ejemplo:
font: bold italic small-caps 1.5em/200% Georgia, "Times New Roman", serif;
1.6.3. Background.
En la mayoría de los casos usamos esta notación de forma normal o extendida, como por
ejemplo:
background-color: orange;
background-image: url(img/mi_imagen.gif);
252
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
Donde estaríamos especificando el color de fondo (orange), la ruta de la imagen de fon-

do (url(img/mi_imagen.gif)), si queremos que se repita la imagen o no por todo el fondo o
queremos que se inserte sólo una vez (no-repeat), la posición (top left) se puede usar también
la siguiente notación:
background: orange url(../img/mi_imagen.jpg) no-repeat bottom right scroll;
1.6.4. Margin, padding, outline.
Este ShorHand es muy útil también porque nos ahorraría muchas líneas, en el caso que
tuvieramos el siguiente ejemplo:
M2. CSS3
div.actual {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
Podríamos usar:
margin: 2em 2.5em 3em 2.5em;
Pasa igual con las otras propiedades: padding o outline. Al igual que nos pasaba con los
bordes, si sólo se indica dos parámetros:
margin: 2em 3em;
El navegador entenderá que el primer parámetro se refiere al valor (top-bottom) superior

e inferior y al valor (left-right) izquierda y derecha.
1.6.5. Listas. 253
Si quisieramos usar varias propiedades en nuestras listas, tendríamos que usar:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(../img/mi_imagen.jpg);
Y usando la notación ShortHand sería:
list-style: circle inside url(../img/mi_imagen.jpg);
Puedes ver varios ejemplos sobre los bordes y la notación ShortHand en el ejemplo13-shorthand/
Varios autores fomentan el uso de la notación ShortHand por la simplificación del código y la
reducción del número de líneas de los archivos. Otros comentan que queda más claro y que me-
morizar las posiciones que corresponden dificulta el desarrollo. Ambas son igualmente válidas,
elige la que más se adapte a ti, y aunque al principio te resulte más incómodo esta notación, no
descartes la notación ShortHand, cuando estés continuamente trabajando con ella, no encontra-
rás excesivos problemas.
Aula Mentor
2. Elementos flotantes.
Como hemos podido comprobar en varias ocasiones los elementos que vamos inser-
tando en nuestra aplicaciones web se mueven y posicionan según unos patrones que debemos
controlar correctamente para no tener problemas posteriormente.
Este apartado es muy importante porque te ayudará o dificultará los diseños web cuan-
do estés en algún proyecto, la diferencia de entender estos conceptos o no, puede ser colocar
elementos y posicionarlos "a ojo" cambiando propiedades hasta que nos dé el resultado que
queremos (evitar a toda costa) o comprender el flujo de los elementos y cómo se posicionan
en la web, y anticiparse al resultado o en su defecto, en caso de error, comprender por qué ha
fallado y poder solucionarlo rápidamente.
Supongamos que nuestra web, va a mostrar siempre en la página inicial tres artículos,
para ello vamos a declararnos tres artículos en el html de la siguiente forma: archivo.html
….
<article id="articuloI">
<p>BLOQUE IZQUIERDO</p>
</article>
254 <article id="articuloC">
<p>BLOQUE CENTRAL</p>
</article>
<article id="articuloD">
<p>BLOQUE DERECHO</p>
</article>
….
archivo.css
#articuloI{
width: 200px;
height: 200px;
background-color: green;
text-align: center;
M2. CSS3
#articuloC{
width: 200px;
height: 200px;
text-align: center;
#articuloD{
width: 200px;
height: 200px;
background-color: blue; 255
text-align: center;
Si ejecutamos ésto tal cual lo tenemos obtendríamos el siguiente resultado:

Aula Mentor
2.1. Float.
Si recordamos cuando vimos los elementos o etiquetas HTML se comportaban como

unas cajas o bloques que iban armándose y si es un elemento de tipo bloque, se colocarán
unas debajo de otras. Para "romper este orden", podemos sacar a los elementos del flujo normal
usando la propiedad:
float: valor;
Para poder usar esta propiedad, debemos tener obligatoriamente definida la pro-
pieda width del elemento. Esta propiedad admite los siguiente parámetros:
VALOR DESCRIPCIÓN
right Coloca al elemento de forma flotante a la de-
recha, dentro del contenedor padre.
left Coloca al elemento de forma flotante a la iz-
quierda dentro del contenedor padre.
none Decimos implícitamente que este elemento no
va a ser flotante.
Si aplicamos al ejemplo anterior la propiedad float:left; obtendríamos este resultado:
256
Pero sin embargo si aplicamos la propiedad float:right; veríamos que los elementos se
nos han desplazado a la derecha y fíjate en el orden en el que aparecen los bloques:
Debemos entender cómo ha resuelto el navegador estas etiquetas:
1. Lee el primer bloque, lo saca del flujo y lo pone a la derecha del padre.
2. Lee el siguiente bloque, lo saca también del flujo y lo pone a la derecha del padre, como ya
hay otro elemento, lo pone a la derecha de él.
3. Lee el siguiente bloque, lo saca nuevamente del flujo y lo pone a la derecha del padre, como
ya hay otros elementos, lo pone a la derecha de ellos.
M2. CSS3
Por último si le agregamos la propiedad izquierda al bloque titulado como BLOQUE IZ-
QUIERDO y la propiedad derecha al bloque titulado como BLOQUE DERECHO, obtendremos el
siguiente resultado, el cual debes analizar con el modo desarrollador para ver qué ha realizado
exactamente. Para clarificar un poco más hemos reducido el tamaño de bloque IZQUIERDO de
200x200 a 150x150, sino lo taparía y no se puede apreciar, fíjate que al indicar float el elemento
bloque verde se ha salido del flujo, y se ha puesto a la izquierda de su padre, pero en el ele-
mento BLOQUE CENTRAL no hemos especificado nada por lo que él sigue en su flujo, que sería
el que hay por defecto. El bloque azul no se ha puesto justo arriba a la derecha, porque encima
al existir un elemento anterior que ha ocupado una posición del padre, éste elemento BLOQUE
CENTRAL al estar en formato de bloque ha ocupado su posición.
Tienes las opciones que estamos comentando en el archivo Ejemplo14-float/

257
2.2. Clear.
Cuando tenemos elementos flotantes tenemos que tener alguna forma de indicar a nues-
tra aplicación que algunos de ellos no van a permitir elementos flotantes junto a él. Para ello
tenemos la siguiente propiedad:
clear:valor;
VALOR DESCRIPCIÓN
none Permite elementos flotantes a ambos lados.
left No permite elementos flotantes a su izquierda.
right No permite elementos flotantes a su derecha.
both El elemento no permite elementos flotantes a
ningún lado.
Veamos el siguiente ejemplo donde comprenderemos cómo y cuándo es necesario usar

la propiedad clear:
Aula Mentor
Se han puesto todos los elementos con float:left, para que se salten el flujo y se vayan
ordenando en el siguiente hueco libre del padre. Ahora si nos centramos en el bloque central y
le añadimos la propiedad clear: left; no permitirá que se ponga ningún elemento flotante a la
derecha.
258
¡Ojo! Este resultado será el mismo que si aplicarámos clear:both; Y a no ser que los
tres bloques estuvieran flotando hacia la derecha float:right; no podríamos probar la opción de
clear:rigth;
Puedes visitar el ejemplo15-clear/
2.3. Overflow.
Imaginemos un supuesto en el que los tres bloques en vez de tener como elemento
padre todo el body de la web, tiene otro elemento padre, y éste no tiene definido ni el ancho
ni el alto, para que se adapte automáticamente al contenido, sin aplicar ninguna propiedad de
M2. CSS3
flotabilidad, tendríamos:
<div id="padre">
<div id="articuloI">
<p>BLOQUE IZQUIERDO</p>
</div>
<div id="articuloC">
<p>BLOQUE CENTRAL</p>
</div>
<div id="articuloD">
<p>BLOQUE DERECHO</p>
</div>
</div>
Se vería en el navegador algo similar a ésto: 259
Si le ponemos los tres elementos de bloque como flotante float:left; veremos que el
padre se ha quedado apenas en nada, sólo en unos píxeles porque le he aplicado un borde para
que se aprecie, sino ni se vería, ¿por qué? Porque se ha salido del flujo del padre y como el padre
ahora no tiene ningún elemento (relleno) dentro no puede adaptarse, tendríamos la siguiente
situación:
Aula Mentor
La línea negra que se aprecia sería el elemento padre, para subsanar ésto tenemos la
propiedad:
overflow: valor;
Con las siguientes opciones:
VALOR DESCRIPCIÓN
visible Opción por defecto. El contenido no se re-
corta.
hidden El contenido oculto se recorta pero el nave-
gador no mostrará la barra de scroll, quedará
oculta.
auto El contenido oculto se recorta pero el navega-
dor no mostrará la barra de scroll a no ser que
260 sea necesario porque el hijo ocupe más del
espacio del padre.
scroll El contenido oculto se recorta pero el navega-
dor y mostrará la barra de scroll.
Inherit Toma el valor que venta por el elemento pa-
dre.
Si aplicamos el valor overflow: auto obtendríamos el siguiente resultado, donde podemos

comprobar que ha metido a sus hijos dentro, a esta opción también se le suele llamar por algu-
nos autores limpiar los float, ya que aun teniendo float fuera del flujo se han encauzado dentro
del elemento contenedor o padre.
3. Posicionamiento de los elementos.

Para indicarle al navegador o browser dónde tiene que posicionar los elementos exiten
diferentes formas:
M2. CSS3
- 3.1. Normal o estático.
- 3.2. Relativo.
- 3.3. Absoluto.
- 3.4. Fijo.
- Heredado jerárquicamente (inherit) como en la mayoría de las propiedades.
3.1. Normal o estático.
Es el valor por defecto que usa el navegador, para los elementos de bloque es colocarse
uno debajo de otro. Y para los elementos en línea, uno detrás del otro mientras los elementos
entren en el elemento padre, en caso que el siguiente elemento no entre, se bajará a la siguiente
línea.
261
Puedes visitar el ejemplo17-position-static/
3.2. Relativo.
La posición relativa se refiere a la distancia dada respecto alguna referencia del elemen-
to conjunto, top, right, bottom o left. Para ello usamos previamente la propiedad: position:
relative; .Si cogemos y decimos en el ejemplo anterior que el bloque del medio (el de color
naranja) queremos que esté a 25px de la izquierdo y 25px de la parte superior, el efecto sería el
de la imagen siguiente, nótese que el elemento inferior no se ha desplazado, se ha quedado en
la misma posición:
Aula Mentor
position: relative;
left: 25px;
top: 25px;
262
Puedes visitar el ejemplo18-position-relative/
3.3. Absoluto.
Si queremos que esté a un valor concreto del elemento padre, tenemos que usar la pro-
piedad position: absolute; y además debemos usar como en el apartado anterior las indicacio-
nes con top, right, bottom o left. En este caso el elemento se sale del flujo y dejaría su hueco
libre, lo que provocaría desplazamientos indeseados sino lo tenemos en cuenta. Si usamos las
siguientes propiedades en el bloque del medio (el de color naranja):
position: absolute;
bottom: 150 px;
right: 25px;
M2. CSS3
Puedes visitar el ejemplo19-position-absolute/
Si nos fijamos en el ejemplo anterior han pasado las siguientes cosas:
- Hemos sacado el bloque naranja de su flujo.
- Se han reordenado los elementos inferiores, subiendose hacia arriba porque ha dejado el
hueco libre el bloque naranja.
- Se ha colocado el bloque naranja a 150px de la ventana del navegador, y no del elemento

padre y a 25px del margen derecho. Si vamos cambiando el tamaño de la ventana veremos
que el elemento va recalculando su posición y se ajusta estrictamente al valor que hay.
En este tipo de posicionamiento si el elemento contenedor también tiene posicionamien-

to absoluto o relativo, el elemento se posicionará con respecto a la esquina superior izquierda
del contenedor.
3.4. Fijo.
El posicionamiento fijo nos va a servir para establecer una posición fija (inamovible) de
un elemento HTML en la Web. Para ello usamos la propiedad con el siguiente valor: position:
fixed; .Al igual que el posicionamiento absoluto, el posicionamiento fijo hace que el elemento
pierda el flujo normal del documento, y se posicionará mediante las mismas propiedades ante-
riores top, left, right y bottom.
263
Puedes visitar el ejemplo20-position-fixed/
Esta opción puede ser muy indicada para posicionar un elemento concreto en un sitio,
por ejemplo, para agregar los link de las redes sociales, o algún banner, etc. Aunque el ususario
haga scroll, este elemento o capa estará siempre visible al usuario.
Aula Mentor
3.5. Visibilidad.
Como hemos visto en los ejemplos anteriores, los elementos tienen unas características
propias definidas previamente, así por ejemplo, cuando usábamos un párrafo con la etiqueta
<p>, sabemos que tiene un valor de bloque, al igual que cuando usamos imágenes con la eti-
queta <img> son elementos en línea. Cuando necesitemos cambiar la forma de un elemento
respecto a ver como bloque o en línea, hemos de usar la siguiente propiedad:
display: valor
Los valores que pueden tomar son:
VALOR DESCRIPCIÓN
block La etiqueta se tratará como un elemento en
bloque.
Inline La etiqueta se tratará como un elemento en
línea.
none Retira al elemento del documento y la visuali-
zación de la página.
Veamos los siguientes ejemplos para comprender esta propiedad, supongamos que tene-
mos en nuestro fichero varios párrafos (elementos en bloque) y varias imágenes (elementos en
línea) y además queremos aplicar la propiedad none a la imagen que pone HTML5.
264
Si asignamos la propiedad inline a los elementos que serían por definición de bloque y
viceversa, obtendríamos el siguiente resultado:
Puedes visitar el ejemplo21-display/

M2. CSS3
Hemos obtenido el resultado que esperábamos y si vemos en modo desarrollador esta

página y pasamos el ratón por el link del elemento que hemos quitado, veremos que tampoco
aparece.
Si quisiéramos que el elemento se ocultase, no fuera visible en el navegador, pero que

siguiera ocupando el espacio original que le corresponde, podemos usar la siguiente propiedad:
visibility: valor;
Siendo los dos valores posibles, visible, cuando el elemento lo puede ver el usuario al
mostrarse en la página, o hidden, cuando queramos que el elemento permanezca oculto en la
página. Siguiendo el ejemplo anterior podríamos poner la imagen central que antes se veía con
visibility:hidden:
265
3.6. Profundidad.
Por último en posicionamiento vamos a ver un tema que seguro te has preguntado; en
el caso que tenga varios bloques y la estructura de la página lo requiera y existan unos encima
de otros, ¿cómo puedo ordenar todo esto?. Para ello usamos la siguiente propiedad:
z-index:número;
El numero ha de ser un número positivo y sólo se podrá aplicar sobre los elementos
que tiene la propiedad position como absoluta, relativa o fixed. El nombre de esta propie-
dad viene dada por "z", por el eje z indicando la profundidad, e "index" por el valor que indica
su orden dentro del eje. Si tuvieramos varios bloques posicionados de forma relativa, y que el
index coincida con el valor de lectura del documento, tendríamos:
Aula Mentor
Si no se especifica ningún valor, el valor inherit o heredado por el navegador es auto,

es decir, iría posicionando los elementos y la profundidad según va leyendo el documento. Si
por ejemplo quisieramos que el bloque de color naranja adelantase dos posiciones, tendríamos
que aumentar el z-index del bloque naranja y disminuir el del bloque azul y el amarillo. ¡Ojo!
Ante la duda entre dos elementos con el mismo orden de profundidad, se utilizará el orden de
lectura del documento.
Puedes visitar el ejemplo23-z-indez/
4. Selectores avanzados.
Como vimos en la unidad anterior, en el apartado 5, existen unos selectores que me
permiten elegir por medio de una clasificación previa los elementos de HTML a los que quiero
hacer referencia. En concreto existían elemento de clase, id y de elemento.
266
Además de esas herramientas, existen otras que podemos usar en nuestros diseños:
1. Selector descendente.
2. Selector de hijos.
3. Selector adyacente.
4. Selector de atributos.
4.1. Selector descendente.
El selector descendente nos va a permitir aplicar reglas de estilo sobre todos aquellos
elementos que estén contenidos dentro de otro, es decir, que sean descendientes. Como había-
mos visto anteriormente se van replicando las propiedades de un descendiente a otro.
Se entiende que es descendiente de otro siempre que la etiqueta esté dentro de otra, por
ejemplo, en el siguiente ejemplo veremos el selector descendiente:
M2. CSS3
/*################################*/
/*SELECTORES DESCENDIENTE*/
/*################################*/
Div{
color: blue;
Puedes visitar el ejemplo24-selectores-avanzados/
Hemos de destacar que como hemos visto se ha aplicado la propiedad tanto a hijos,
nietos, hermanos, etc. Todo elemento que esté dentro del contenedor o padre.
4.2. Selector de hijos.
En determinadas ocasiones necesitaremos que nuestra propiedad sólo afecte a los hijos
directos y no se propague más por sus descendientes, para ello se utiliza la siguiente notación: 267
Etiqueta_padre > Etiqueta_hija
Si queremos en el ejemplo anterior, poner de un color diferente los elementos hijos de

la lista <ul>, tendremos que hacer lo siguiente:
/*################################*/
/*SELECTOR DE HIJOS*/
/*################################*/
ul>li{
color: orange;
Como podemos apreciar de una forma muy sencilla hemos seleccionado sólo los ele-
mentos hijos, independientemente de la profundida, esta propiedad solo ha afectado a los hijos
Aula Mentor
directos de <ul> que en este caso son <li>.
4.3. Selector adyacente.
El selector adyacente nos permite aplicar reglas de estilo sobre elementos que van se-
guidos en el código y que tienen el mismo padre, es decir, sobre elementos "hermanos" y están
seguidos unos del otro. Para ello usamos la siguiente notación:
Etiqueta_hermana1 + Etiqueta_hermana2 (donde se aplicará la propiedad)
/*################################*/
/*SELECTORES DESCENDIENTE*/
/*################################*/
Div{
color: blue;
}
268
Debes fijarte que se ha aplicado en los elementos nieto 1 hijo1 y nieto 1 hijo2 y que no
se ha aplicado la propiedad en el nieto 2 y 3 del Hijo 1 porque no van a continuación de las
etiquetas <li><p> ¿por qué? Porque no tiene la pareja li+p sino en ellas tendría p+p. Si tienes
dudas al respecto, veamos un ejemplo más, imaginemos que tenemos 5 párrafos, pero entre el
párrafo 4 y 5 hay una imagen, si aplicamos la siguiente propiedad p+p:
Obtendremos el siguiente resultado:
p+p{
color; blue;
4.4. Selector de atributos.
Los selectores de atributos, nos van a permitir aplicar reglas de estilo sobre elementos
HTML en función de sus atributos. De esta forma podemos incidir aún más en los elementos que
deseemos, para ello podemos usar los siguientes esquemas:
M2. CSS3
elementoHTML[ atributo = "valor del atributo"]
elementoHTML[ atributo ~= "valor contenido"]
elementoHTML[ atributo |= "valor comienza por+"-""]
[ atributo = "valor del atributo" ]
[ atributo ~= "valor contenido" ]
[ atributo |= "valor comienza por+"-"" ]
Cojamos como base un ejemplo anterior donde ya teníamos definido una propiedad de
adyacencia sobre los párrafos (p+p{color: blue;}), pero queremos afinar aún más la selección y
buscar aquellos que tenga el atributo párrafo3 y párrafo4.
p[id="parrafo3"]{
color: orange;
p[id="parrafo5"]{
color: red; 269
Presta atención a la potencia de este selector, ya que puede ser tan preciso como que-
ramos, además no ha interferido con los otros elementos como sucedía con los selectores adya-
centes.
En la otra notación cuando se usa ~= nos estamos refiriendo a elementos que en su

nombre o definición contengan ese valor, por ejemplo en el siguiente fichero html:
<p class="menu superior">SOY EL TEXTO 6</p>
<p class="sin menu">SOY EL TEXTO 7</p>
<p class="otras cosas">SOY EL TEXTO 8</p>
<p class="menu derecho">SOY EL TEXTO 9</p>
Si agregamos el selector de atributo de la siguiente forma:
class~="menu"
Buscaría el atributo class, y después seleccionaría todos aquellos que su clase contenga
Aula Mentor
el nombre "menu". Quedando de la siguiente forma:
[class~="menu"]{
color: lime;
/* O también podemos usar: */
p[class~="menu"]{
color: lime;
Un detalle muy importante que no debemos dejar pasar es el nombre asignado:
<p class="menu-superior">SOY EL TEXTO 6</p>
<p class="sin menu">SOY EL TEXTO 7</p>
<p class="otras cosas">SOY EL TEXTO 8</p>

270
<p class="menu-derecho">SOY EL TEXTO 9</p>
En este caso, hemos añadido un – después de nombre menu; si usamos el ejemplo an-
terior, el resultado sería muy distinto:
[class~="menu"]{
color: lime;
Y si usaramos la otra forma de seleccionar por atributo, el atributo empieza por un nom-
bre seguido de un guión "-", obtendríamos el siguiente resultado.
[class|="menu"]{
color: lime;
}
M2. CSS3
Esto nos pone de manifiesto que es necesario un buen análisis previo de lo que vas
a emplear en la página web, y elegir unos nombres adecuados para posteriormente llegar a
ellos fácilmente. Existen más formas de seleccionar atributos, aunque estas son las más usuales,
si quieres ver toda la información completa puedes hacerlo en:
http://www.w3.org/TR/selectors/
4.5. Pseudo-clases.
Podemos encontrarnos ocasiones que los elementos que queremos seleccionar no están
tan ligados al atributo, descendencia, adyacencia o seleccionar todos los hijos. En determinadas
ocasiones necesitaremos ser más concretos o referirnos a la relación parental o del estado de
la propia etiqueta, dato que almacena el navegador en su caché. Podrían ser ciertos elementos
no referenciados en la página, como por ejemplo, el primer párrafo, o cómo se muestra el link
cuando ha sido visitado, etc.
La sintaxis para usar las pseudo-clases podrían ser las siguientes:
selector : Pseudo-clase { propiedades de estilo }
selector.clase : Pseudo-clase { propiedades de estilo }
4.5.1. De selección.
Existen diferentes formas de elegir los elementos del documento a las antes vistas, éstas 271
se puede ver en la siguiente tabla:
VALOR DESCRIPCIÓN
:root Elemento raíz o el elemento en el nivel más
alto. P.e en HTML5 la etiqueta <html>
:empty Corresponde a los elementos vacíos y que no
tienen hijos.
:only-child Devuelve aquellos que tienen solo un único
hijo.
:first-child Selecciona el primer elemento hijo.
:last-child Selecciona el último elemento hijo.
:nth-child(n) Selecciona el elemento enésimo o bien las pa-
labras claves even (pares) y odd (impares).
:nth-last-child(n) Selecciona el enésimo hijo a partir del último
elemento.
:only-of-type Devuelve el único elemento de este tipo.
:first-of-type El primer elemento de este tipo.
:last-of-type El último elemento de este tipo.
:nth-of-type(n) El enésimo elemento de este tipo, donde n es
un número o las palabras claves: even (pares)
y odd(impares)
:nth-last-of-type(n) El enésimo elemento de este tipo partiendo
del último elemento.
Aula Mentor
Podemos elegir etiquetas en la que dentro de su descendencia queramos escoger la pri-

mera, como puede ser por ejemplo, elegir al primer hijo, para ello usaríamos:
Pseudo-clase :first-child
Por ejemplo, pensemos que tenemos un elemento HTML concreto, una lista, donde
queremos que el primer elemento de la lista (su primer hijo) aparezca de otro color. Para ello
usaríamos:
div p:first-child{
color:blue;
Si tuvieramos un párrafo y quisieramos aplicar una propiedad concreta a la primera letra

de un párrafo, tendríamos que usar la propiedad:
Pseudo-clase :first-letter
272
div p:first-letter{
color:blue;
font-size: 200%;
O también se podría usar:
.letracapital:first-letter{
color:blue;
font-size: 200%;
Si tenemos muchas líneas y queremos resaltar la primera línea de un párrafo por el mo-
tivo que sea, también podemos seleccionar la primera línea con la propiedad:
Pseudo-clase :first-line
M2. CSS3
.primeralinea:first-line{
font-weight: bold;
font-style: italic;
color: blue;
Debes fijarte que cuando se utiliza esta psedo-clase, se aplica exclusivamente a la pri-
mera fila, por lo que si cambias el tamaño de la ventana, o dinámicamente crece el texto, el
navegador irá calculando automáticamente el texto a la primera fila en tiempo real.
4.5.2. De enlace.
Como vimos en el módulo de HTML5, en nuestros documentos podemos agregar enlaces

a páginas externas, internas, al propio documento o archivos. Cada navegador tiene una forma
concreta de representarla, y tiene además unas propiedades estándar. Normalmente cuando es
un link o enlace lo pone de color azul y subrayado, o cuando el usuario ya ha visitado el enlace
anteriormente, el navegador lo almacena en su caché y nos lo muestra también de otro color.
Ésto puede ser una ventaja en algunas circunstancias, pero existirán muchas otras que deseemos
modificar para dar otra apariencia. Las formas que vamos a ver a continuación van a ser las si- 273
guientes:
Pseudo-clase Descripción
a:link Define la apariencia de un enlace que todavía
no ha sido seleccionado o navegado por el
usuario. Lo más normal es eliminar el subra-
yado y el color.
Una primera aproximación podría ser:
a:link{
text-decoration: none;
color: black;
}
Aula Mentor
a:visited Define la apariencia de un enlace que ha sido

seleccionado o navegado por el usuario. Nor-
malmente se suele usar las mismas propieda-
des que el anterior, aunque claro está todo
depende de nuestra aplicación.
a:visited{
color: black;
}
a:active Define la apariencia de un enlace en el mo-
mento que el usuario hace click sobre él.
a:hover Define la apariencia de un enlace cuando el
274 usuario ha pasado el ratón por encima del en-
lace. Aquí usualmente sí se aplican más pro-
piedades o efectos combinados, por ejemplo
cambiar el tamaño, ponerla en negrita o cam-
biar el fondo.
a:hover{
color: black;
font-size: 125%;
font-weight: bold;
}
M2. CSS3
Partamos de un ejemplo sencillo y vayamos aplicando las propiedades anteriores.
<a href="index.html">Inicio</a> |
<a href="productos.html">Productos</a> |
<a href="empresa.html">Empresa</a> |
<a href="contactar.html">Contactar</a>
Aplicamos la pseudo-clase a:link:
a:link{
color: black;
275
}
Y el resultado sería:
Como hemos visto el usuario no tendría que saber qué es un enlace, a no ser que pase
el ratón por encima, además podemos aplicarle muchas más propiedades.
Normalmente siempre se hacen las declaraciones de a:link y a:visited ya que están muy
relacionadas entre sí, por ejemplo podríamos hacer las siguientes declaraciones:
a:link{
color:black;
a:visited{
Aula Mentor
color:black;
O relacionarlas directamente en la declaración:
a:link,a:visited{
color:black;
Ahora si queremos darle un énfasis al enlace cuando el usuario tenga activo el enlace,
por ejemplo ponerlo en negrita, de color blanco y ponerle un fondo a la etiqueta, podríamos
276 hacer:
a:active{
color: white;
font-weight: bold;
font-style: italic;
Si mantenemos el ratón haciendo click sobre el link, nos aparecerá el estado que tenía-
mos diseñado:
M2. CSS3
Si queremos aplicar nuestros diseños cuando el ratón pase por encima del link, por
ejemplo, que cambie el fondo y que además ponga el tamaño de letra un 150% más grande
tendríamos que hacer:
a:hover{
font-size: 150%;
font-weight: bold;
background-color: lime;
Y tal y como hemos definido, si hacemos click sobre el enlace, activamos a:active, vería-
mos que nos mantiene el tamaño de letra ya que la propiedad superior sólo nos difiere en que
277
es cursiva y el fondo de color azul:
Puedes visitar el ejemplo26-visited-hover-link/index.html
Como podemos ver, es muy fácil aplicar varias propiedades o efectos cuando pasemos
el ratón por encima del link o el enlace, se podría usar como hemos visto aquí en un menú o
en cualquier otro tipo de enlace que tenga nuestra aplicación web.
Debemos tener presente que estas pseudo-clases referidas a los enlaces, tienen un orden
de defición exacto, ya que tiene algunas vinculaciones sobre las propiedades, sino obtendríamos
efectos no controlados, por tanto el orden correcto de definición:
- a:link
- a:visited
- a:hover
- a:active
Aula Mentor
4.5.3. Hover, active y focus.
Las pseudo-clases que hemos visto anteriormente, (hover, active) las podemos aplicar no
solo a los elementos de tipo enlace, existirán etiquetas que podamos crearle sus efectos y de-
pende de la etiqueta tendrá sentido unas mas que otras, como por ejemplo puede ser un botón
o un propio div. Pero además de eso tenemos otra propiedad añadida a las anteriores que es:
EtiquetaHTML : hover
EtiquetaHTML : active
EtiquetaHTML : focus
Que cambiará las propiedades de la etiqueta HTML cuando esta tenga el foco del nave-
gador, por ejemplo, en un formulario, cuando esté el foco en un campo de texto.
Veamos el siguiente código html:
<form>
<label>Campo de texto SIN control del focus</label>
<input type="text" name="campo1" />

278
<br>
<label>Campo de texto <span class="pasadaraton">CON</span> control del focus</label>
<input type="text" name="campo2" class="confocus"/>
<br>
<button type="submit" class="miclick">Enviar Formulario</button>
</form>
Y respecto al CSS:
.confocus:focus{
background-color: lime;
color:blue;
M2. CSS3
.miclick:active{
color:lime;
font-size: 125%;
.pasadaraton:hover{
background-color: lime; 279
color:blue;
font-size: 125%;
Me he creado varias clases, aunque se podía aplicar a un elemento HTML o ID., etc. Le
he asignado varias propiedades dependiendo de cuál es la acción del usuario y seleccionado
algunos elementos del código. Así tendríamos los siguientes efectos, aunque debemos recordar
que depende del navegador éstos puede diferir o incluso no funcionar si es muy antiguo:
Aula Mentor
ORIGINAL
FOCUS en el primer campo de texto (sin propieda :focus)
FOCUS en el campo con la propiedad :focus
280
Al pasar el raton por el texto CON, con la propiedad :hover
Al pulsar en el botón, con la propiedad :active
Puedes visitar el Ejemplo27-hover-active-focus/
Como puedes ver, estas propiedades dan mucho poder al diseñador web para crear
efectos con la interacción del usuario. Ahora si recuerdas cuando navegas por internet en alguna
web y pasas el ratón por algunas zonas concretas, aparecen sin haber realizado nada un banner
con publicidad u otra página web emergente, éstas se activan con estos métodos.
M2. CSS3
5. Compatibilidad con los navegadores HTML5 y CSS3.

Como hemos visto anteriormente existen muchos efectos que dependemos mucho del
navegador, tanto propiedades como métodos definidos en HTML5. Existe una herramienta que
puede ayudar a solventar en la mayoría de los casos estas diferencias.
Para ello podemos nos dirigirnos a la web:
http://modernizr.com/
Nos vamos a DOWNLOAD y selecionamos qué elementos queremos que soporte con el
código.
281
Hacemos click en las opciones que queremos que nuestro código HTML5 sea compati-
ble y después pulsamos en GENERATE!. Posteriormente en DOWNLOAD Custom Build.
Aula Mentor
Ésto nos descargará un archivo JavaScript de nombre similar a modernizr-xxxx.js el

cual vamos a copiar dentro de nuestra carpeta del proyecto web js. y le vamos a cambiar el
nombre, para facilitar la lectura y estructura de la web, por compatibilidad.js. En la mayoría
de los casos tendrá éxito, todo depende de la versión del navegador, según ésta tendrá más o
menos éxito.
Posteriormente en nuestro proyecto, en cada página que tengamos debemos añadir den-
tro del <head> </head> el enlace al archivo que hemos creado, en nuestro caso:
<head>
<title>COMPATIBILIDAD CON NAVEGADORES</title>
<script src="js/compatibilidad.js"></script>
282 </head>
6. Ejemplos prácticos.
Vamos a ver varios ejemplos y opciones complejas para que podamos integrar nuestras
páginas web creadas con HTML5 con CSS3. Realmente ya tendrías la mayoría de los elementos
y conocimientos para poder realizar diseños por ti mismo, pero creo que es conveniente ver
algunos ejemplo completos para afianzar aún más los conceptos. En los recursos del curso se
irán añadiendo cada vez más ejemplos resueltos además de los resueltos aquí. Te recomiendo
encarecidamente que intentes resolverlos por tu cuenta antes de mirar la solución, así te au-
toexaminarás para saber si has comprendido los contenidos.
6.1. Posicionamiento de elementos.
Una empresa nos pide un diseño concreto en el que van a estructurar sus productos
según unos parámetros, nos pasan su código HTML actual:
<body>
<div id="cabecera">
<div id="logo"></div>
M2. CSS3
</div>
<div id="contenido">
<div id="subcontenido">
<div id="subencabezado">
<div class="columna"></div>
</div>
</div>
283
</div>
<div id="redes"></div>
<div id="pie"></div>
</article>
</section>
</body>
Aula Mentor
Realmente este código sería más común de versiones anteriores de HTML, ya que HTML5
nos ofrece otras características, podríamos actualizárselo a HTML5 usando artículos, secciones,
pies y navegación. Te animo que una vez completes este ejercicio, actualices también el código
HTML5, en los recursos hay una versión pero por ahora, nos centraremos sólo en el diseño. Para
ello, nos han proporcionado el siguiente boceto, indicándonos cómo quieren la estructura de la
web:
Puedes visitar el ejemplo29-extra1/

284
Debes intentar respetar los espacios y posicionamientos, algunos serán relativos, otros
absolutos, ahí es donde entra tu faceta como diseñador/a. Puedes usar otra combinación de
colores, aunque si debes respetar la unidad de todos ellos, es decir, las columnas que están en
amarillo indicando las secciones las puedes poner de otro color, pero aplicándole el mismo a
todas y el tamaño debe ser lo más similar posible.
6.2. Menú de navegación.
6.2.1. Versión 1.
La misma empresa anterior, después del éxito que ha tenido nuestro trabajo, decide que
le hagamos un menú en la parte superior, éste ha de ser de texto plano y que se cargue a través
de una lista que nos pasen ellos, por ahora, nos han dado los siguientes datos:
<div id="barraHorizontal">
<ul class="menuHorizontal">
<li> RECIBIR MATERIAL </a></li>
<li> BUSCAR MATERIAL </li>
<li> LISTAR MATERIAL </li>

M2. CSS3
<li> UBICAR/TRASPASAR MATERIAL </li>
</ul>
</div>
Y visualmente quiere que tenga un aspecto parecido al de la imagen, cambia de color al

pasar el ratón por encima, como se puede ver en Listar Material:
6.2.2. Versión 2.
Otra empresa diferente no está contenta con el menú que tiene y nos pide que realice-
mos un menú lateral desplegable para mostrar sus categorías, los datos que nos pasan ahora son
los siguientes:
<ul id="menu">
<li>INICIO</li>
285
<li>Sección 1
<ul class="submenu">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Sección 2
<li>Elemento 1</li>
<li>Elemento 2</li>
Aula Mentor
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Seccion 3
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
286 <li>Seccion 4
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
</ul>
Y queremos realizar un menú que tenga varias secciones y varios elementos dentro de
esas secciones, además conforme vamos pasando el ratón nos va apareciendo otro color dife-
rente al de la lista:
M2. CSS3
Hemos de destacar las siguientes propiedades que hemos añadido:
cursor:pointer;
Para cambiar el cursor cuando pase por encima y que no aparezca la flecha por defecto,
podemos consultar el siguiente enlace puesto que existen muchos más estilos:
http://www.w3.org/TR/SVG/interact.html#CursorProperty
Y list-style-type: none; para evitar que salte el icono indicando que es una lista como vimos
anteriormente.
6.2.3. Versión 3.
La misma empresa que nos pidió el diseño anterior, después de varios meses, deciden
cambiar nuevamente la web, y usando la misma estructura, quieren dar la impresión de que han 287
creado una web nueva. Para ello, quieren en vez de usar un menú vertical desplegable, desean
uno horizontal desplegable, que tenga una apariencia similar a ésta:
Aquí tenemos varias secciones y elementos, pero cuando ejecutemos el menú veremos
una cosa muy distinta que todavía no hemos visto, ¡tienen animaciones y efectos! Bien es la parte
más interesante que nos ha traído CSS3 que veremos en el siguiente apartado, antes para hacer
este tipo de menú debíamos usar flash.
Los ejemplos que hemos visto de menú, serían candidatos a tenerlos en tu snippet pro-
pio o hacerte tus propias plantillas estándar y cuando necesites hacer tu web, crear la estructura
rápidamente y posteriormente sólo tendrías que modificar los nombres de las secciones y los
elementos.
También he de decir que existen muchas web donde puedes ver y descargarte menús de
todo tipo: Apple, Explorador de Windows, animados, lisos, con efectos, sin efectos, horizontales,
verticales, inferiores, etc. No debes pensar que entonces todo lo visto no es necesario, ya que la
mayoría de las veces tendrás que adaptar, modificar y entender que estás realizando para sacarle
todo el partido a tu web.
Aula Mentor
7. Propiedades avanzadas de CSS3.
7.1. Degradados de color.
Un recurso muy usado y con efectos muy importantes en las páginas web son los degra-
dados de color. Tendríamos por tanto dos tipos de degradados: lineales o circulares:
Degradados lineales. Para que los navegadores que utilicen el prefijo –webkit se defi-
nen según la propiedad:
linear. Degradado lineal
origen. Punto inicial del degradado (top left)
background: -webkit-gradient fin. Punto final del degradado (bottom right)
from(color). Color de inicio del degradado
to(color). Color final del degradado
Para el resto de navegadores

288
inicio. Punto inicial del degradado (top left)
background: -linear-gradient color inicio. Color de inicio del degradado
color final. Color final del degradado
Para soportar el máximo de navegadores debemos usar además los siguientes prefijos a
éste:
Prefijo Descripción
-ms- Internet Explorer 10
-moz- Firefox 3.6 y posteriores 16+ no necesita pre-
fijo
-webkit- Chorme 10+
-webkit- Safari 4
-o- Opera 11.1 y a partir de 12.1 sin prefijo
-webkit- iOS Safari 3.2+
-webkit- Android Browser 2.1+
M2. CSS3
Esta tabla no debemos perderla de vista ya que cuando queramos aplicar un diseño con-
creto a un navegador completo deberemos de usar esta clasificación. Además esta clasificación
también se hará para otras propiedades, como por ejemplo los sombreados.
Las versiones antiguas de Internet Explorer no implementa la propiedad de estilo gra-

dient. Se basa en un filtro propietario de Microsoft, por la que deberemos usar:
/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#77ff0000',

gradientType='1');
/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000',
endColorstr='#77ff0000', gradientType='1')";
Un ejemplo típico donde aplicar los degradados sería para crear un efecto botón o efecto
de profundidad, veamos varios ejemplos de degradados donde vamos a intentar dar soporte a
la mayoría de navegadores.
...
289
<div class="degradado1"></div>
...
Y en el css tenemos:
.degradado1 {
width: 300px; height: 300px;
border: 1px solid black;

Aula Mentor
margin-top: 6px;
background:-webkit-gradient(linear,left top,left bottom,from(#1d1f4c), to(#dee3f3));
background:-webkit-linear-gradient(top, #1d1f4c, #dee3f3);
background:-moz-linear-gradient(top, #1d1f4c, #dee3f3);
background:-ms-linear-gradient(top, #1d1f4c, #dee3f3);
background:-o-linear-gradient(top, #1d1f4c, #dee3f3);
background:linear-gradient(top, #1d1f4c, #dee3f3)
290
Si queremos usarlo el efecto para simular un botón sólo debemos cambiar el tamaño de
nuestra capa y dejar todo lo demás igual.
.degradado2 {
……
Ahora le vamos a aplicar sombreados y los bordes redondeados:
.degradado3 {
display: block;
height: 300px;
width: 300px;
padding-top: 6px;
M2. CSS3
margin-bottom: 12px;
margin-top: 12px;
text-align: center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
background:-webkit-gradient(linear,left top,left bottom, from(#1d1f4c), to(#dee3f3));
background:-webkit-linear-gradient(top, #1d1f4c, #dee3f3);
background:-moz-linear-gradient(top, #1d1f4c, #dee3f3); 291
background:-ms-linear-gradient(top, #1d1f4c, #dee3f3);
background:-o-linear-gradient(top, #1d1f4c, #dee3f3);
background:linear-gradient(top, #1d1f4c, #dee3f3)
Sólo con cambiarle el tamaño simularíamos un botón muy llamativo:

Aula Mentor
.degradado4 {
display: block;
height: 25px;
width: 300px;
……
Degradados circulares. En este caso el degradado tendrá forma circular y la siguiente

configuración:
inicio. Punto inicial del degradado.
forma. Forma circular (circle) o elíptica (ellipse).
background: -radial-gradient color inicio. Color de inicio del degradado
color final. Color final del degradado
292
Ahora apliquemos un degradado circular sin sombreado:
.degradado5 {
background: -moz-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -webkit-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -ms-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -o-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: radial-gradient(top left, circle, #1d1f4c, #dee3f3);
}
M2. CSS3
Ahora apliquemos el mismo degradado circular, pero con un tamaño inferior para simu-
lar un botón y con sombreado:
.degradado6 {
height: 25px;
width: 300px;
border-radius: 4px;
box-shadow: 1px 3px 5px rgba(0,0,0,0.6); 293
….
Un ejemplo de degradado multicolor con sombreado y bordes redondeados:
.degradado7 {
display: block;
height: 300px;
width: 300px;
margin-top: 12px;
Aula Mentor
background:-webkit-linear-gradient(left, tomato, cyan, lime);
background:-moz-linear-gradient(left, tomato, cyan, lime);
background:-ms-linear-gradient(left, tomato, cyan, lime);
background:-o-linear-gradient(left, tomato, cyan, lime);
background: linear-gradient(left, tomato, cyan, lime);
294
Y por último otro degradado donde hemos agregado una imagen de fondo para aún
dar más soporte a los navegadores, el truco consiste en añadir una imagen de fondo al inicio
de la regla CSS para que todos aquellos navegadores que no soporten el degradado tengan una
imagen, para ello se utiliza una con el gradiente realizado y que se repita, esta opción es menos
eficiente ya que tendría que cargar una imagen y repetirla por todo el lienzo, pero se gana en
compatibilidad:
.degradado8{
height: 300px;
width: 300px;
margin-top: 12px;

M2. CSS3
background: black url(img/imagen.png) repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -o-linear-background(top, black, white);
background: -ms-linear-background(top, black, white);
background: linear-background(top, black, white);
295
Y la imagen que voy a usar para que en caso que el navegador no lo soporte es la si-
guiente:
Si has programado antes HTML seguro que has usado este truco para poner un fondo
de pantalla en modo mosaico y repetido por toda el fondo, reduciendo el archivo de fondo de
la página. Éste se repetirá por el eje x, de ahí la propiedad:
background: black url(img/imagen.png) repeat-x;

Aula Mentor
7.2. Transformaciones.
Uno de los puntos que ha incorporado CSS3 es las transformaciones sobre los elementos,
esta propiedad permite aplicar rotaciones, cambios de escala, zoom o deformaciones oblicuas.
Para ello tenemos que usar la propiedad:
transform:
Y podremos usar las siguientes transformaciones a los elementos:
- Rotaciones.
- Escalas.
- Deformación oblicua.
- Desplazamiento.
7.2.1. Rotaciones.
Para rotar un elemento usamos el parámetro rotate(ángulo) en grados (deg), radianes

(rad) o gradientes (grad). Siempre que el valor sea positivo la rotación será en el sentido de las
agujas del reloj y por el contrario, los valores negativos lo hacen en sentido inverso. Si se define
296 sólo un valor, el navegador entenderá que queremos que se aplique a los ejes X e Y. Si se espe-
cifican dos valores, el primero al eje de la X y el segundo al de la Y.
Veamos un ejemplo, aplicándolo por ejemplo a un texto, en este caso indicando que el
artículo en cuestión está vendido, sin entrar que ya vimos cómo usar tipos de fuentes y propie-
dades para dar la sensación de:
Aplicamos rotación, color rojo del texto, borde y fondo amarillo en el CSS
Y el código correspondiente sería en el archivo HTML:

M2. CSS3
<section>
<article class="articulo">
<p class="vendido">VENDIDO</p>
</article>
</section>
Y en el archivo CSS o en la parte de diseño tendríamos:
.articulo{
width: 300px;
height: 300px;
.vendido{
297
width: 50%;
color: red;
font-size: 30px;
border: 3px solid red;
background-color: yellow;
text-align: center;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Aula Mentor
7.2.2. Escalado.
En algunas ocasiones vamos a querer escalar algún elemento HTML, tenemos que tener
en cuenta que el escalado puede ser positivo (realizan un zoomIN acercándose) o negativo
(realizan un ZoomOut). Si se define sólo un valor se aplica a los ejes X e Y por igual, si se espe-
cifican dando los dos datos, corresponderán al eje X e Y. Cuando se hace un escalado negativo
se realiza una reflexión sobre el elemento, el valor con escala 1:1 sería scale(1) entre ese valor
y el 0 iría disminuyendo y todos los valores menores que cero harían reflexión progresiva sobre
el elemento.
Hagamos transformaciones al ejemplo anterior:
/*ESCALA*/
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
/*ROTACIONES*/
298
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
¡OJO! Este código anterior estaría mal porque si hiciéramos eso, dependiendo del nave-
gador sólo nos haría la última transformación, en este caso la rotación, y si estuviera ésta antes
que el escalado, sólo nos haría el escalado, ¿qué solución hay? Declararlo conjuntamente:
Sin aplicar escala. Con scale(2) Con scale(0.5)

M2. CSS3
7.2.3. Deformación oblicua.
Para las deformaciones oblicuas tenemos la siguiente propiedad:
skew(ángulo)
Donde el ángulo, al igual que en las otras propiedades, se puede expresar en grados
(deg), radianes (rad) o gradientes (grad), además de valores positivos realizar la transformación
en el sentido de las agujas del reloj y los negativos en sentido contrario. Cuando se aplica sólo
un valor se aplica a los ejes X e Y, y si se define con dos valores el navegador entenderá que el
primer valor es el X y el segundo el Y.
Veamos un ejemplo realizando una deformación oblicua al ejercicio anterior, en este

caso se lo vamos aplicar a nuestro artículo que teníamos definido de 300x300px.
transform: skew(-30deg) transform: skew(-30deg,10deg) 299
7.2.4. Desplazamiento.
El desplazamiento de los elementos se usa a través de la propiedad:
translate(logintud);
Donde la longitud puede estar definida en px, %, em, in, mm o cm. Los desplazamientos
serán hacia la derecha si se usan valores positivos en el eje de las X, y hacia la izquierda en caso
contrario. Para el eje de la Y, los valores positivos efectúan un desplazamiento hacia arriba y los
negativos hacia abajo. Al igual que pasa con las otras propiedades; si se aplica solo un valor, éste
se hará efectivo sobre ambos ejes a la vez, y cuando se especifique dos valores, se entiende que
el primer valor es el de la X y el segundo el de la Y.
Veamos varios ejemplos:

Aula Mentor
translate(150px,0) translate(150px,150px) translate(0,150px)
Puedes visitar el ejemplo34-transformaciones/
7.2.5. Transiciones.
JavaScript podía hacer todo tipo de transiciones, pero ahora con la nueva definición de
CSS3 podemos aplicarlas directamente desde el diseño. Si nunca has visto transiciones, debes
saber que hay unas propiedades básicas que necesitamos dominar para hacer los efectos tal y
como queremos, estas son:
transition-property
Definimos la propiedad que vamos a animar, por ejemplo si vamos a cambiar el alto,
el ancho, el color, etc. Se pueden definir varias propiedades separadas por comas, indicando a
cuales van a ser aplicadas, sino se designa ninguna, por defecto (clave all) se usa todas las pro-
piedades asignables al elemento.
transition-duration
Tiempo en segundos (s) o en milisegundos (ms) que va a durar la transición.
transition-timing-function
300 Define la función de transición que se va a utilizar, existen varias:
- ease: rápida al inicio y más lenta al final.
- linear: rapidez constante en toda transición. En (s) o (ms).
- ease-in: lento al inicio y acelerado al final.
- ease-out: rápida al inicio y desacelerado al final.
- ease-in-out: tanto al inicio como al final más lento.
transition-delay
Corresponde al retardo (o el avance) del inicio de la transición. En (s) o (ms).
También se puede usar la propiedad de forma abreviada como hemos visto a lo largo del
curso con otras propiedades:
transition: font-size 3s ease, color 2s linear;
Ejemplo.
Veamos un ejemplo de transiciones aplicado a un menú vertical, conforme el usuario

vaya pasando el ratón por encima de cada ítem se irá abriendo en forma de acordeón, y cuando
aparezcan las opciones, al pasar por alguna de ella, las vamos a desplazar hacia la derecha y
poner negrita:
M2. CSS3
Inicio Hover sobre Item1 Hover sobre Subitem 2
Puedes visitar el ejemplo35-transiciones/
Para realizar este ejemplo, podríamos tener un fichero HTML parecido a ésto:

<nav >
<div class="menu_vertical">
<ul>
<li>
<h3>Item 1</h3>
<div> 301
<ul class="submenu_vertical">
<li><a href="#">Subitem 1</a></li>
</ul>
</div>
</li>
<li>
<h3>Item 2</h3>
<div>

Aula Mentor
</ul>
</div>
</li>
<li>
<h3>Item 3</h3>
<div>
302 </ul>
</div>
</li>
<li>
<h3>Item 4</h3>
<div>

M2. CSS3
</ul>
</div>
</li>
</ul>
</div>
</nav>

En el fichero CSS3 tenemos que tener las propiedades y los selectores correspondientes 303
a la clase menu_vertical y a la clase submenu_vertical.
.menu_vertical>ul {
margin: 0;
padding: 0;
list-style:none;
width: 280px;}
.menu_vertical>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
Aula Mentor
list-style:none;
height:30px;
width: 280px;
background-color: #196ded;
border-radius: 8px;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;}
.menu_vertical>ul>li>h3 {
304 display:block;
margin: 0;
padding:10px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #fff;
background: #4486f7; }
.menu_vertical>ul>li>div {
M2. CSS3
margin:0;
overflow: auto;
padding:10px;
height:150px;}
.menu_vertical>ul>li:hover { height: 150px;}
.menu_vertical:hover>ul>li:hover>h3 {
color:#fff;
background: #196ded;
font-size: 80%;}
.menu_vertical>ul>li>h3:hover { cursor:pointer;} 305
.submenu_vertical li {
padding:6px;
list-style:none;
color:black;
cursor:pointer;}
.submenu_vertical li:hover {
list-style:none;
color:#fff;
Aula Mentor
font-weight: bold;
cursor:pointer;
font-size: 22px;
margin-left: 45%;
transition: margin-left 0.25s ease-in;
-moz-transition: margin-left 0.25s ease-in;
-webkit-transition: margin-left 0.25s ease-in;
-o-transition: margin-left 0.25s ease-in;}
.submenu_vertical a {
color:#fff;
text-decoration: none;}
306 ¡Ojo! Debes prestar atención a la definición de las transformaciones, ya que en muchas
ocasiones puedes tener efectos no esperados cuando haces combinaciones de ellas, por ejemplo
prueba el siguiente efecto:
translate(150px, 150px) rotate(-45deg);
Y este otro cambiando el orden:
rotate(-45deg) translate(150px, 150px);
¿Qué hay diferente? Depende de la transformación tendremos que guardar un orden para
que sea correcta y se produzca.
Puede ver muchas más transformaciones y visualizar cómo quedarían en la siguiente

web:
http://www.westciv.com/tools/transforms/
También no debes pasar por alto las definiciones que hemos realizado en el CSS, llegan-
do a los elementos exactos que nosotros queremos, como vimos en la sección de selección de
los selectores:
.menu_vertical>ul>li>h3:hover
Estaríamos refiriéndonos en este caso, leyendo de derecha a izquierda:

M2. CSS3
- Voy aplicar las siguientes propiedades hagan :hover sobre el elemento siguiente.
- Título <h3> que sea descendiente de un elemento de lista <li>.
- Que a su vez sea descendiente de un elemento de lista <ul>.
- Y que pertenezca a la clase .menu_vertical.
Con esa definición en el CSS nos estamos refiriendo exactamente a estos elementos de-
finidos en el html en el mismo orden, cuando haga :hover sobre:
<div class="menu_vertical">
<ul>
<li>
<h3>Item 1</h3>
Si por ejemplo, cambiáramos cualquier etiqueta <h3> por <h1> o el orden de los ele-
mentos en esa definición no nos estaríamos refiriendo al mismo caso, y obtendríamos un resul-
tado totalmente diferente.
8. Resumen. 307
- Las hojas de estilo las definimos a través de propiedades. Estas propiedades se pueden referir
a varias transformaciones o cambios; tamaño tanto en anchura y altura, colores, márgenes,
bordes y rellenos.
- Unas de las propiedades a las que debemos darle importancia en nuestra aplicación web son
los textos. Pudiendo modificar el tipo de letra, tamaño, estilo, grosor, línea de decoración
(subrayado), indentación, alineación y espaciados.
- Las propiedades se pueden definir de una en una o conjuntamente en una notación corta. A
ésta se le llama ShortHand y si la usamos en todo el archivo nos podremos ahorrar un gran
número de líneas.
- Los elementos en la aplicación web se tratan como bloques o cajas que se van uniendo entre
sí hasta que forman la web que ve el usuario. Estas cajas según del tipo que sea tendrán un
comportamiento predefinido. Con las propiedades float, clear y overflow podemos mane-
jar orden de colocación de las mismas.
- Existen unos selectores distintos de los de elemento, id o clase. Estos selectores avanzados
juegan más con la semántica y posición de los elementos definidos en la web. Por tanto ten-
dremos selectores de elementos descendientes, de hijas, adyacentes y de atributos.
- Cuando queramos afinar aun más la selección de elementos, podemos fijarnos en su posi-
ción parental o del estado de la propia etiqueta. Se llaman pseudo-clases y podríamos definir
con ellas: :opcion, a:opcion, etiqueta:hover, etiqueta:active o etiqueta:focus.
Aula Mentor
- Debido al número elevado de navegadores y versiones de los mismos, a veces se emplea

mucho tiempo en realizar una página web compatible con el mayor número. Para evitar eso
se puede solicitar ayuda a través de una web que nos generan código compatible con las
propiedades que hemos generado, es el caso de http://modernizr.com/
- Además de las propiedades básicas, con CSS3 se pueden realizar desde degradados de color
(lineales, circulares) y transformaciones de los elementos (rotaciones, escalado, deformacio-
nes oblicuas, desplazamientos y transiciones).
308

Ud 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ud 2

Cargado por

Copyright:

Formatos disponibles

Módulo 2. CSS3.

Unidad 4. Estructura, estilos, selectores y jerarquías en CSS3.

INICIO | PRODUCTOS | ¿QUIÉNES SOMOS? | CONTACTAR

tipo: negrita y cursiva;

INICIO | PRODUCTOS | ¿QUIÉNES SOMOS? | CONTACTAR

tipo: negrita y cursiva;

El resultado sería el siguiente:

INICIO | PRODUCTOS | ¿QUIÉNES SOMOS? | CONTACTAR

Estos archivos que contienen nuestros modificaciones de diseños se llama hojas de

2. Estructura de una web con CSS3 y modelo de cajas.

<!DOCTYPE html><html lang="es"><head><meta charset="utf-8" /><title>WEB EN HTML5</tit-

Conforme el navegador va leyendo etiquetas, va creando su modelo de cajas, con las

<etiqueta style="mis propiedades"> </cierre etiqueta>

<p style="font-size: 22px; font-style: italic;">CSS3.</p>

<meta charset="utf-8" />

Si ejecutamos el texto, veremos que se ha aplicado a todos nuestros párrafos, es decir,

Puedes consultar el ejemplo3-estilo-interno.html

- Una carpeta css. Donde tendremos todas las hojas de estilo.

- Una carpeta js. Donde tendremos todos los archivos JavaScript.

- Una carpeta audio. Donde almacenaremos nuestros archivos de audio.

- Una carpeta vídeo. Donde almacenaremos nuestros vídeos.

- Una carpeta img. Donde vamos a guardar nuestras imágenes.

<link rel="stylesheet" type="text/css" href="ruta_archivo.css">

index.html miestilo.css (dentro de la carpeta css)

Imaginemos que en el mismo ejemplo usado en el apartado anterior, en vez de tenerlo

index.html miestilo.css (dentro de la carpeta css) 211

Puedes consultar el ejemplo04-estructura/

Vamos a declarar tres estilos diferentes sobre la misma etiqueta:

- En línea – Color Verde.

- Interna – Color Azul.

- Externa – Color Rojo.

En el siguiente ejemplo vamos a comprender como cada navegador va leyendo y apli-

El resultado sería el siguiente, donde vemos que:

<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/miestilo.css">

<p style="color:green">Texto de prueba CON diseño en línea. </p>

<p>Texto de prueba sin diseño en línea</p>

Agregado del fichero

Nivel 3. Tenemos un párrafo <p> en su interior que va a tener la letra en cursiva.

<p> Texto del nivel 1 </p>

Puedes visitar el ejemplo06-jerarquia3/

5. Reglas de estilo y selectores.

5.1. Selector de elemento.

Si creamos una página de ejemplo, veremos que efectivamente se ha aplicado correcta-

Puedes visitar el ejemplo07-selectores-elemento/

216 5.2. Selector de ID.

<a href="index.html">Inicio</a> | <a href="index.html">Productos</a> | <a href="index.html">Empresa</

<a href="index.html">Inicio</a> | <a href="index.html">Productos</a> | <a href="index.html">Empresa</

Si creamos un fichero css con el siguiente contenido:

218 /*SELECTORES DE ELEMENTO (del ejemplo anterior)*/

/* Comentario para la etiqueta h3*/

/* Comentario para la etiqueta h3*/

Obtendremos el siguiente resultado:

Puedes visitar el ejemplo08-selectores-id/

Además si usamos el modo desarrollador, pulsando la tecla F12, podremos comprobar

5.3. Selector de Clase.

En este caso seleccionamos todos los elementos que correspondan a la

Si añadimos al fichero que teníamos miestilo.css el siguiente contenido:

Añadimos varios ejemplos de fichero HTML:

<h1>Título principal artículo 1</h1>

<p class="texto_antiguo">Texto1 del artículo....</p>

<p class="texto_actual">Texto2 del artículo....</p>

<p class="texto_antiguo">Texto3 del artículo....</p>

218 /SELECTORES DE ELEMENTO (del ejemplo anterior)/