6 CSS

TUTORIAL BSICO DEL PROGRAMADOR WEB:
CSS DESDE CERO.

Objetivos
CSS es un lenguaje de estilo que define la presentacin de los documentos HTML. Por
ejemplo, con CSS podemos cambiar fuentes, colores, mrgenes, tamaos, imgenes de
fondo, maquetacin, crear animaciones y otros efectos y ms. Este curso permite
aprender los fundamentos de CSS, imprescindible para trabajar con pginas web hoy da.
Destinatarios
Cualquier persona con inters en aprender fundamentos que le permitan crear pginas web
usando CSS. Para realizar este curso, debes tener conocimientos previos de HTML. Se
recomienda haber realizado el curso Tutorial bsico del programador web: HTML desde cero
de aprenderaprogramar.com antes de seguir este curso.
Contenidos
INTRODUCCIN A CSS. QU ES Y PARA QU SIRVE CSS. VERSIONES CSS. EL W3C.

MODELO DE CAJAS CSS. ESTILOS EN LNEA, INTERNO Y EXTERNO. TIPOS DE ELEMENTOS.
SELECTORES POR ID (#) Y POR CLASE(.). CONCEPTO DE HERENCIA Y DE CASCADA.
SELECTORES AVANZADOS. PSEUDOCLASES. PSEUDOELEMENTOS.
COLORES Y FONDOS. FUENTES Y TEXTOS. UNIDADES DE MEDIDA. PROPIEDADES CSS.
BORDES CSS. MARGIN Y PADDING. PROPIEDADES BSICAS. EFECTOS AVANZADOS.
ENLACES CON CSS. LISTAS CON CSS. TABLAS CON CSS. MENS CON CSS.
POSICIONAMIENTO. FLOAT Y CLEAR. MAQUETACIN EN COLUMNAS. DISEO FLUIDO.
PREFIJOS CSS DE NAVEGADOR: CHROME, FIREFOX, INTERNET EXPLORER, OPERA, SAFARI.
EFECTOS CSS DE LTIMA GENERACIN. USO DE SPRITES. ANIMACIONES.
Duracin
150 horas de dedicacin efectiva, incluyendo lecturas, estudio y ejercicios.
Direccin, modalidades y certificados

El curso est dirigido por Csar Krall, Responsable del Departamento de Produccin de
aprenderaprogramar.com del portal web aprenderaprogramar.com. Se oferta bajo la
modalidad web (gratuito).
Para ms informacin: contacto@aprenderaprogramar.com
Indice del curso Tutorial bsico program

mador web: CSSS desde cero.
IND
DIC
CE DEL
D L CU
URSSO
1.
IN
NTRODUCCI
N A CSS. QU
U ES Y PAR
RA QU SIRVEE CSS. VERSIIONES CSS. EEL W3C.
1.1.
1.2.
1.3.
1.4.
1.5.
1.6.
1.7.
1.8.
Q
Qu es CSS? HTML, cono
ocimiento preevio necesarrio.
EEs CSS un len
nguaje de pro
ogramacin?? Para qu sirve?
s
Difereencias de HTM
ML, CSS, PHP
P, ASP...
Diferencias en
ntre CSS y HTTML. Fronterra entre CSS,, HTML y pro
ogramacin.
CSSS en aplicacciones web Joomla, Word
dPress, Drup
pal, phpBB... Plantillas, Teemplates o Themes.
T
Em
mpezar a usaar CSS a parttir de un documento HTM
ML con estru
uctura bsica.
Veersiones CSSS. Algo de hisstoria y persp
pectiva. Qu es el W3C?? Recomendaciones oficiiales.
Documentaci
n especificaacin oficial CSS.
C W3scho
ools y W3foo
ols. Validaci
n CSS W3C validator.
v
Q
Qu necesito
o para escrib
bir cdigo CSSS y crear pgginas web?
2.
M
MODELO
DE CAJAS
C
CSS. ESTILOS
E
EN LNEA,
L
INTER
RNO Y EXTER
RNO. TIPOS D
DE ELEMENT
TOS.
2.1.
2.2.
2.3.
De la estructu
ura HTML y su semntica al modelo de
d cajas CSS. Elementos b
block e inline
e CSS.
Esstilos por deffecto, en lneea, interno y externo. So
obreescrituraa de estilos. link rel.
Archivos CSS. Comentarios CSS.
3.
P ID (#) Y POR CLASE((.). CONCEPT

TO DE HEREN
NCIA Y DE CA
ASCADA.
SEELECTORES POR
3.1.
3.2.
3.3.
Seelectores por id. Selectorres por class. Ejemplos.

Co
oncepto de herencia
h
en hojas de estilo CSS. Qu
es? Forzar herencia con
n inherit.
Co
onceptos: caascada y hereencia CSS. Esstilos de usuaario. !importtant. Ejemplo
os prcticos.
4.
SEELECTORES AVANZADOS
A
S. PSEUDOCLLASES. PSEUDOELEMENTTOS. EJEMPLLOS PRCTIC
COS.
4.1.
4.2.
4.3.
Seelectores avaanzados, pseeudoclases y pseudoelem

mentos CSS.
firrst-child, nth
h-child, last, not, -letter -line, after, before.
Seelector univeersal. nth-of--type y nth-laast-child.
5.
CO
OLORES CSS.
5.1.
5.2.
Co
olores HTMLL y CSS. RGB decimal o po
orcentual. C
digos de co
olores hexadeecimales.
W safe colo
Web
ors. Colores RGBA,
R
HSL, HSLA.
H
Transp
parencia CSS.. Lista de colores HTML - CSS.
Ms informacin: contacto
o@aprenderaprogramar.com
Indice del curso Tutorial bsico programador web: CSS desde cero.
6.
FONDOS.
6.1.
6.2.
6.3.
6.4.
Color de fondo. Propiedad background-color CSS.

Definicin de fondo CSS. background-image. Efecto fondo pgina web. background-repeat.
CSS background-position, background-attachment, clip, origin y size. Shortand fondo. Ejemplos.
Definicin de fondo CSS. background-image. Efecto fondo pgina web. background-repeat.
7.
UNIDADES DE MEDIDA. PROPIEDADES WIDTH Y HEIGHT.
7.1.
7.2.
Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel px, porcentaje, em, ex.
Propiedades CSS width y height. auto (automtico). Ejemplos prcticos y ejercicios resueltos.
8.
BORDES CSS. PROPIEDADES RELACIONADAS.
8.1.
8.2.
8.3.
Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right bottom left.
Shortand: notacin CSS abreviada. border-width (thin, thick) border-color (transparent).
Propiedad outline.
9.
MARGEN (MARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.
9.1.
9.2.
Concepto de margen y relleno CSS. Diferencias entre margin y padding CSS (box model).
Padding y margin CSS. Top, right, bottom, left. Margin negativo y centrar con margin auto.
10.
POSICIONAMIENTO, MAQUETACIN Y DISEO CON CSS. POSITION, FLOAT, CLEAR Y MS.
10.1.
10.2.
10.3.
10.4.
10.5.
10.6.
10.7.
10.8.
10.9.
10.10.
Propiedad position CSS: static, relative, absolute, fixed. Top, right, bottom, left. Ejemplos.
Propiedad display CSS. inline, block, none, list-item. Ejercicios de ejemplo resueltos.
Concepto float CSS. none, left, right y centrar?. Colocar texto alrededor de una imagen.
clear CSS bothEl texto no envuelve una imagen html? Explicacin a problemas.
Diseo web CSS dos, tres, cuatro columnas con float width en porcentajes no funciona?
overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibility (visible, hidden, collapse).
z-index CSS no funciona? Superposicin de elementos tipo capas, objetos, div o imgenes.
CSS vertical-align middle Centrar verticalmente una imagen, texto, div, etc. Ejemplos.
Diseo lquido CSS (fluido) frente a responsive-design.
Propiedades CSS max-width, min-width, max-height, min-height.
11.
FUENTES Y TEXTO.
11.1.
11.2.
11.3.
CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line.
CSS efecto sombra con text-shadow y blur, text-overflow clip, ellipsis.
Interlineado: propiedad CSS line-height.
Ms informacin: contacto@aprenderaprogramar.com
11.4.
11.5.
11.6.
11.7.
11.8.
11.9.
11.10.
11.11.
11.12.
CSS text-transform y first-letter, letter-spacing y word-spacing.

Cortar palabras largas con word-wrap.
CSS font-size (uso de larger, smaller).
font-weight o negrita (bolder, lighter).
font-style o cursiva italic.
CSS font-family. tipografa (tipos de letra). Lista de tipos.
font-variant (small-caps). Shortand font.
@font-face CSS. Fuentes web gratuitas. Problemas.
Convertir woff, eot, ttf, otf, svg. Font converters.
12.
ENLACES CSS.
12.1.
Pseudoclases CSS link, visited, focus, hover y active. Estilos y efectos en links.
13.
LISTAS CSS.
13.1.
13.2.
13.3.
13.4.
Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image.

Shortand list-style.
Men horizontal CSS o vertical. Crear mens con efectos a partir de listas CSS. Ejemplos.
Men desplegable CSS horizontal. Efecto dropdown. Ejemplo de cdigo (float, display).
14.
TABLAS CSS.
14.1.
14.2.
14.3.
Estilos y herencia CSS en tablas. Width, height, font-size y overflow en tablas. border-collapse.
Diseo de tablas CSS. border-spacing, caption-side, empty-cells.
Diseo de tablas CSS. Colores de filas intercalados alternos.
15.
COMPATIBILIDAD Y PREFIJOS DE NAVEGADOR: CHROME, FIREFOX, INTERNET EXPLORER,
OPERA, SAFARI.
15.1.
15.2.
15.3.
15.4.
Comentarios condicionales CSS. Problemas: compatibilidad entre navegadores.

Strict mode. Filtros.
Prefijos CSS de navegador Chrome, Firefox, Internet Explorer, Opera, Safari.
Prefijos -webkit -moz -ms -o Ejemplos.
16.
EFECTOS CSS DE LTIMA GENERACIN. USO DE SPRITES. ANIMACIONES.
16.1.
16.2.
16.3.
16.4.
16.5.
Sprite CSS: concepto. Qu es, cmo crear y usar un sprite? Ejemplos y cdigo resuelto.
Columnas CSS: column-count, column-width, columns, colum-gap y colum-rule. Ejemplos.
Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Crculo o elipse.
Efecto sombra CSS: box-shadow. Sombra interior inset. Difuminado blur, spread. Ejercicios.
Degradados CSS. Efecto lineal y radial. linear-gradient.
16.6.
16.7.
16.8.
16.9.
16.10.
16.11.
16.12.
16.13.
Angulos CSS: unidades deg, grad, turn, rad.

Efectos CSS. radial-gradient tipo circle o ellipse.
Efectos CSS. transform: rotate, scale, skew y translate. Rotar, escalar, sesgar, trasladar.
Animaciones CSS. transition-property, transition-duration, timing-function y efecto delay.
Animacin CSS. Diferenciar transicin y animacin. @keyframes: fotogramas o estados clave.
Animation CSS. name, duration, delay, fill-mode, iteration-count.
Animation CSS. direction, timing-function, play-state.
cursor CSS. Tipos. Efectos hover: move, no-drop, resize, not-allowed, crosshair, progress, wait.
17.
MS SOBRE CSS.
17.1.
17.2.
Otros aspectos de CSS.

Qu hemos aprendido y qu no hemos aprendido con este curso de CSS?
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203
Orientacin curso Tutorial bsico programador web: CSS desde cero
ORIENTACIN SOBRE EL CURSO PASO A PASO TUTORIAL BSICO DEL PROGRAMADOR WEB: CSS
DESDE CERO
CSS es un lenguaje diseado para separar el contenido de las pginas web de su presentacin. As, un
mismo contenido podra verse de distintas maneras o con distintos aspectos aplicndole distintos
estilos CSS.
CSS no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina lenguaje de

programacin coloquialmente. Esto es posiblemente debido a que muchas veces el lenguaje CSS se
mezcla de alguna manera con el HTML o con lenguajes de programacin como PHP. Esta mezcolanza
implica que a veces el cdigo CSS est junto al HTML o PHP, o que a la hora de desarrollar una web o
solucionar un problema en una web sean necesarios conocimientos tanto de HTML como de CSS como
de un lenguaje de programacin propiamente dicho.
CSS es un lenguaje descriptivo, formado por una serie de atributos, valores y etiquetas que el
navegador interpretar de una u otra forma mostrando distintos aspectos para las diferentes etiquetas
que forman la estructura de una pgina HTML. Es decir, podemos obtener muchos aspectos y diseos
para una misma pgina HTML simplemente cambiando su hoja de estilos.
Este curso que estamos comenzando va dirigido a aquellas personas que quieran adquirir unos
fundamentos bsicos para crear hojas de estilo con vistas a poder desarrollar en el futuro pginas web
atractivas y de cierta complejidad. No vamos a desarrollar un manual de referencia de CSS, sino un
curso bsico paso a paso. No vamos a contemplar todos los aspectos de las hojas de estilo CSS, sino
aquellos que consideramos bsicos desde el punto de vista didctico, con vistas a que posteriormente
la persona que lo desee ample sus conocimientos. Nuestro objetivo es ser claros, sencillos y breves, y
para eso tenemos que centrarnos en determinadas cuestiones de CSS y dejar de lado otras.
Como conocimientos previos para iniciar este curso recomendamos (seguir la recomendacin o no
queda a criterio del alumno y/o profesor que vayan a seguir el curso) estos: Ofimtica bsica (saber
copiar, pegar, mover y abrir archivos, etc.) y haber realizado el Curso bsico de HTML que se ofrece en
aprenderaprogramar.com (http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192).
Conocer algn lenguaje de programacin sera un aspecto positivo.
Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender CSS requiere tiempo y esfuerzo. Para hacer ese recorrido ms llevadero, te recomendamos
que utilices los foros de aprenderaprogramar.com, herramienta a disposicin de todos los usuarios de
la web (http://www.aprenderaprogramar.com/foros/), y que te servir para consultar dudas y recabar
orientacin sobre cmo enfrentarte a los contenidos. Entre los miembros del portal web y otros
usuarios, trataremos de ayudarte para que el estudio te sea ms llevadero y seas capaz de adquirir los
conocimientos necesarios y avanzar como programador o diseador web.
El tiempo necesario (orientativamente) para completar el curso incluyendo prcticas con ordenador,
suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 90 horas de
aprenderaprogramar.com, 2006-2029
Orientacin curso Tutorial bsico programador web: CSS desde cero
dedicacin efectiva o aproximadamente un mes y medio con una dedicacin de 3 horas diarias de lunes
a viernes. Aprender a crear pginas web requiere dedicacin y esfuerzo.
El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene
algunas indicaciones especficas para usuarios de Windows, pero tambin puede ser utilizado en otros
entornos (Linux, Macintosh, etc.).
Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultar de
gran utilidad.
Prxima entrega: CU01003D

Concepto de CSS. Hojas de estilo en cascada.
DEFINICIN O CONCEPTO DE LENGUAJE CSS

CSS es un lenguaje utilizado en la presentacin de documentos HTML. Un documento HTML viene
siendo coloquialmente una pgina web. As, podemos decir que el lenguaje CSS sirve para dotar de
presentacin y aspecto, de estilo, a una pgina web. Este lenguaje es principalmente utilizado por
parte de diseadores y programadores web para elegir multitud de opciones de presentacin como
colores, tipos y tamaos de letra, imgenes de fondo, bordes, etc.
La filosofa de CSS se basa en intentar separar lo que es la estructura o contenido y configuracin bsica
del documento HTML de su presentacin. Por decirlo de alguna manera: la pgina web sera lo que hay
debajo (el contenido) y CSS sera un cristal de color que hace que el contenido se vea de una forma u
otra. Usando esta filosofa, resulta muy fcil cambiarle el aspecto a una pgina web: basta con cambiar
el cristal que tiene delante. Piensa por ejemplo qu ocurre si tienes un libro de papel y lo miras a
travs de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a travs de un cristal
amarillo, vers el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas
maneras. CSS permite cambiar el estilo a los contenidos de las pginas web.
Algunas opciones bsicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas
tpicas etiquetas HTML como <H1> (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un
texto como encabezado, en tamao grande). Pero tambin hay funciones algo ms complejas, como
introducir espaciado entre elementos <DIV> (div es una etiqueta HTML para identificar una
determinada regin o divisin de contenido dentro de una pgina web) o establecer imgenes de
fondo, bordes redondeados, etc..
CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su definicin siempre se hace
uso de un identificador de etiqueta HTML (como por ejemplo <H1>), y luego indicamos con qu aspecto
queremos que se muestren todas las etiquetas <H1> que aparezcan en un documento. Podemos definir
cmo queremos que se muestren las distintas partes del documento HTML, pudiendo en cada caso
definir sus propiedades (color, tipo de fuente, tamao, espacio de mrgenes, bordes, imagen de fondo,
etc.) con algn determinado valor deseado.
Vamos a ver primero lo que sera un ejemplo muy sencillo de aplicacin de CSS, que tratar de una
pgina web o archivo HTML donde tan solo tendremos un prrafo de texto. El texto estar dentro de
una etiqueta <p>. Distinguiremos con este ejemplo entre contenidos y presentacin o aspecto.
Para seguir este tutorial es necesario que tengas conocimientos bsicos de HTML. Si no los tienes, te
recomendamos que realices primero el curso bsico de HTML disponible en la seccin de cursos de
aprenderaprogramar.com (o si prefieres acceder directamente, puedes hacerlo a travs de este enlace:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192).
Nuestro documento html contendr el siguiente texto de partida (en este caso se ha llamado
ejemplo.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aplicacin CSS - aprenderaprogramar.com</title>
</head>
<body>
<p>Texto de ejemplo para visualizar resultados </p>
</body>
</html>
Una vez creado el documento ejemplo.html en nuestro ordenador, lo abriremos con un navegador
web, obteniendo un resultado que ser similar a ste:
Tenemos una pgina web que tan solo tiene un prrafo (Texto de ejemplo para visualizar resultados).
Este aparece en color negro por defecto y nosotros, para ver la utilidad de CSS deseamos mostrar el
texto en rojo. En realidad con CSS podemos hacer cosas mucho ms complejas, pero ahora slo
queremos poner un ejemplo para mostrar la utilidad de CSS.
Una vez hayamos creado un archivo con el estilo para aplicar a los prrafos (durante el curso
aprenderemos cmo hacer esto y muchas ms cosas) podremos hacer que todos los prrafos de una
pgina web se muestren de una misma manera sin tener que modificar prrafo a prrafo, sino
nicamente modificando el estilo CSS que se debe aplicar a los prrafos. Como decamos, introduciendo
el cdigo CSS adecuado podremos lograr que cambie el aspecto de nuestra pgina web:
Hace falta CSS para realizar esto? Antiguamente no. Podamos hacerlo simplemente usando HTML:
<font color ="red"><p> Texto de ejemplo para visualizar resultados</p></font>

Sin embargo, con esta escritura slo estbamos modificando el aspecto de un prrafo, mientras que
con CSS podemos modificar el aspecto de todos los prrafos de una pgina web, repartidos en cientos
de lneas y de archivos, automticamente. Con la evolucin de HTML, algunas formas sintcticas que
servan para dotar de aspecto a las pginas web han pasado a considerarse obsoletas o descatalogadas,
dejando que la presentacin quede controlada de forma independiente a travs de CSS.
CSS hace que resulte fcil cambiar la presentacin ya que si ahora quisiramos cambiar el color, fuente,
tamao, etc, de todos los prrafos de nuestra pgina web, tan solo deberamos de cambiar las
propiedades en el archivo donde hayamos definido el estilo para los prrafos, sin alterar nada en la
pgina web. Esto es mucho ms fcil, rpido y legible que tener que estar modificando todas y cada una
de las etiquetas <p> que aparecieran en nuestra pgina web.
Ahora bien, imaginemos que tenemos una pgina web con 3 etiquetas <p> pero no deseamos que
todas tengan la misma presentacin. CSS tiene previsto cmo poder aplicar distintos estilos a ciertos
prrafos o etiquetas. Durante el curso veremos cmo. Esta imagen sera un ejemplo de uso de distintos
estilos para la etiqueta <p> de prrafos.
La forma de definicin de estilos CSS separa la presentacin de la informacin en una pgina web. Es
muy til porque tenemos los estilos por un lado y los contenidos por otro. Si en un momento dado
queremos cambiar la forma en que se ve la pgina pero no sus contenidos, nicamente tendramos que
modificar los archivos css. Pero tambin existen estas otras formas de aplicar estilos, lo veremos a lo
largo del curso.
Quizs los ejemplos que hemos visto hasta el momento te resulten muy sencillos y poco atractivos. A
continuacin mostramos imgenes de lo que puede hacerse utilizando CSS a nivel avanzado, que como
vers puede ser realmente espectacular.
Fjate en las dos imgenes que mostramos a continuacin y trata de identificar qu tienen en comn y
qu tienen distinto:
Podemos decir que tienen en comn un mismo texto, un mismo men y posicin de men. En cambio
podemos decir que cambian los colores, tipos y tamaos de letra y las imgenes de fondo, tanto
detalles decorativos como las flores o personas, como fondos que crean marcos para el texto o los
mens. Con un conocimiento avanzado de CSS podremos lograr efectos similares a estos que estamos
viendo y cambiar el aspecto de una pgina web con slo un click de botn.

Para qu sirve
s
CSS? Es un
u lenguaje de programacin??
PARA QU SIRVE CSS

CSS es un lenguaje que sirve para
p
dotar de
d presentaacin y aspeecto, de esstilo, a pgginas web
ntos HTML). CSS no es un lenguaje de
d programaacin. Podramos decir que es un len
nguaje que
(documen
suele apaarecer relacio
onado o pr
ximo a un lenguaje de programaciin o que su
uele colaborrar con un
lenguaje de
d programaacin, pero no
n es un lengguaje de proggramacin propiamente dicho.
d Lenguajees de program
macin HTM
ML y CSS. Estta expresin
n es, desde el punto de
A veces oirs hablar de
mal, incorreccta, ya que ni
n HTML ni CSS
C son lengguajes de pro
ogramacin. No obstantte, a veces
vista form
coloquialm
mente se usaa el trmino programaccin CSS.
Un lenguaaje de prograamacin es un
u lenguaje que
q se usa para
p
realizar procesos de inters a traavs de un
ordenado
or o dispositivvo electrnicco, desde un
n clculo para un estudiante o ingeniero, a una co
ompra por
internet, pasando po
or cualquier cosa que se
s te ocurraa. Un lenguaaje de programacin tie
ene como
caracterssticas bsicass el tener laa capacidad para tomarr decisiones o ejecutar un proceso u otro en
funcin de las circunsstancias (por ejemplo dep
pendiendo del
d botn que pulse el ussuario), as co
omo el ser
das veces haasta que se cumpla una condicin. C
CSS no es un
n lenguaje
capaz de repetir proccesos repetid
mita cumplir estas
e
funcion
nes, por tantto no es un lenguaje de programaci
p
n aunque se
e use junto
que perm
a lenguajees de programacin.
CSS es un
n lenguaje que apareci para hacer ms fciles y con mejor aspecto lo
os desarrollos web. Un
desarrollo
o web comprrende mltip
ples reas dee conocimien
nto:
Anlisis y
diseo
funcional
Anlisis y
disseo
arquitectural
Program
macin
Desarrollo
web
Diseo
grfico,
Maqu
uetacin
Integraacin,
Testting
Sistemas
(servidores,
bases de
datos)
aprenderraprogramar.co
om, 2006-2029
Para qu sirve CSS? Es un lenguaje de programacin?
En la clasificacin que hemos hecho, CSS estara englobado dentro del rea de diseo grfico y
maquetacin.
Los desarrollos web tienen dimensiones muy variables. Podemos hablar desde una pequea pgina
web para una empresa local hasta un gran portal para una empresa de mbito internacional. En ambos
casos podramos decir que interviene la programacin web y el diseo web. Sin embargo, un pequeo
desarrollo puede ser llevado a cabo por una sola persona que abarque tanto programacin como
diseo, mientras que un gran desarrollo requiere de un equipo de trabajo ms o menos amplio y con
distintos especialistas, ya que en torno a los desarrollos web hay diferentes reas de conocimiento
implicadas (anlisis, diseo, programacin, sistemas, integracin, testing, etc.).
En un gran desarrollo existen personas especializadas en las distintas reas, de modo que el
programador no suele trabajar en el diseo (excepto para hacer algn retoque o cambio, o para
solucionar problemas). No obstante, s resulta conveniente que un programador web tenga los
conocimientos bsicos de CSS ya que le resultarn tiles y necesarios, por un lado para la solucin de
problemas y por otro para integrar cuestiones donde el diseo y la programacin se entremezclan.
Si miramos a los lenguajes o tecnologas que hay en torno a los desarrollos web podramos hacer una
clasificacin que comprende: HTML, CSS, Bases de datos, Servidores, Lenguajes de programacin del
lado del cliente (p.ej. Javascript) y Lenguajes de programacin del lado del servidor (p.ej. PHP).
HTML
Lenguajes
del lado
del
servidor
CSS
Tecnologas
web
Lenguajes
del lado
del cliente
Bases de
datos
Servidores
HTML y CSS son tecnologas (o metalenguajes, ya que no puede considerrselos lenguajes de

programacin) que intervienen en prcticamente todo desarrollo, grande o pequeo. Se encargan de
dotar de una estructura y presentacin agradables a aquello que ve el usuario de pginas web.
Para qu sirve CSS? Es un lenguaje de programacin?
Los lenguajes de programacin del lado del servidor realizan procesos en el servidor (computador
remoto que se encarga de enviar las pginas web a travs de internet): podemos citar entre estos
lenguajes Java (JSP), ASP.NET, PHP, o Perl, entre los principales.
Los lenguajes de programacin del lado del cliente realizan procesos en el ordenador personal del
usuario (efectos visuales, clculos, etc.): podemos citar entre estos lenguajes Javascript, Java (applets),
o VBScript, entre los principales.
En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las principales.
Las tecnologas se combinan entre ellas de muy diversas maneras. Podemos citar algunas
combinaciones bastante habituales entre lenguajes de programacin y bases de datos: Java + Oracle,
ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinacin utilizada, en un desarrollo web
moderno siempre intervendr HTML y CSS.
En resumen, CSS es un lenguaje para dotar de presentacin y estilo a pginas web cuyos aspectos
bsicos deben ser conocidos tanto por programadores web como por diseadores web o maquetadores
web. En la prctica, muchas veces se entremezcla el cdigo de programacin con el cdigo HTML y
cdigo CSS, de ah que coloquialmente se hable de programacin web para referirse a todo este
conjunto, aunque formalmente ni HTML ni CSS son lenguajes de programacin.
Fjate que estamos tratando de dejar claro qu es y para qu sirve CSS antes de empezar a estudiar este
lenguaje porque si tenemos los conceptos claros nos ser mucho ms sencillo el aprendizaje,
ahorraremos tiempo y cometeremos menos errores.

Efectos CSS. La frontera en

ntre CSS, HTMLL y programaci
n
EFECTOS CSS. UBICAR

R LA FRONTEERA
En el anteerior epgrafe del curso hemos
h
indicaado que CSSS no es un lenguaje de programacin
n pero que
en cierto sentido se entremezcla
e
con stos. A veces nos encontrarem
e
mos que se puede lograr un mismo
d programacin. Por qu tantas fo
ormas para
efecto usaando HTML, usando CSSS usando un lenguaje de
hacer unaa misma cosaa? Dnde esst la frontera entre cada lenguaje?
Esta pregunta no es de
d fcil respu
uesta. Vamos a ver con un
u ejemplo lo
l que puedee ocurrir parra algo tan
sencillo co
omo aplicar algunos efecctos a un texxto. No obsttante, ten en
n cuenta quee este ejemp
plo relativo
a texto po
odra aplicarsse a otros co
onceptos com
mo bordes, mrgenes,
m
an
nimaciones, eetc.
El lenguaje HTML peermite aplicaar algunos efectos
e
visuales al texto. Escribe o copia este
e cdigo y
gurdalo en un archivvo de nombree ejemplo1.h
html.
<!DOCTYYPE HTML PUBLIC "-//W3C//D

DTD HTML 4.01 Transitional//EEN" "http://ww
ww.w3.org/TR/h
html4/loose.dtd
d">
<html>
<head>
<tittle>Ejemplo HTTML aprenderap
programar.com
m</title>
<meta name="tipo
o_contenido" content="text/
c
html;" http-equ
uiv="content-tyype" charset="u
utf-8">
</head>
<body>
<p>>Negrita: <stron
ng>Quiero apreender a program
mar</strong><//p>
<p>>Itlica: <i>Quiiero aprender a programar</i>
></p>
<p>>Tachado: <strrike>Quiero aprrender a prograamar</strike><//p>
<p>>Color fuente: <font color ="ggreen">Quiero aprender a pro
ogramar</font>></p>
</body>
</html>>
Con Javasscript podem

mos hacer alggo parecido. Escribe o copia
c
este c
digo y gurrdalo en un archivo
a
de
nombre ejemplo2.htm
e
ml:
<!DOCTYYPE HTML PUBLIC "-//W3C//D
DTD HTML 4.01 Transitional//EEN" "http://ww
ww.w3.org/TR/h
html4/loose.dtd
d">
<html>
<head>
<tittle>Ejemplo Javvascript aprenderaprogramar.com</title>
<meta name="tipo
o_contenido" content="text/
c
html;" http-equ
uiv="content-tyype" charset="u
utf-8">
</head>
<body>
<sccript>
varr txt = "Quiero aprender
a
a proggramar";
doccument.write("<p>Negrita: " + txt.bold() + "</p>");
doccument.write("<p>Itlica: " + txt.italics()
t
+ "<//p>");
doccument.write("<p>Tachado: " + txt.strike() + "</p>");
doccument.write("<p>Color fuentte: " + txt.fontcolor("green") + "</p>");
</script>
</body>
</html>>
om, 2006-2029
Efectos CSS. La frontera entre CSS, HTML y programacin
Y por ltimo en vez de aplicar Javascript o simple HTML, podemos usar CSS. Escribe o copia este cdigo
y gurdalo en un archivo de nombre ejemplo3.html:
<html>
<head>
<title>Ejemplo CSS aprenderaprogramar.com</title>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
<style type="text/css">
#negrita{font-weight:bold;}
#italica{font-style:italic;}
#tachado{text-decoration: line-through;}
#verde{color:green;}
</style>
</head>
<body>
<p>Negrita: <span id="negrita">Quiero aprender a programar</span></p>
<p>Italica: <span id="italica">Quiero aprender a programar</span></p>
<p>Tachado: <span id="tachado">Quiero aprender a programar</span></p>
<p>Color fuente: <span id="verde">Quiero aprender a programar</span></p>
</body>
</html>
Haz doble click sobre cada uno de los archivos para visualizar el resultado en un navegador. El resultado
que obtenemos es algo similar a esto:
El nico cdigo que debemos entender por el momento es el correspondiente al ejemplo 1, ya que es
cdigo HTML que ya debemos conocer. El cdigo del ejemplo 2 y ejemplo 3 no te preocupes si no lo
entiendes ya que el objetivo ahora no es comprender ese cdigo, sino simplemente ver cmo podemos
alcanzar un mismo objetivo usando distintos lenguajes como HTML, Javascript CSS.
Adems si nos fijamos, el cdigo Javascript y el cdigo CSS est dentro de un documento HTML (aunque
podran estar en archivos separados).
Todo esto nos puede llevar a preguntarnos: Por qu se entremezclan unos lenguajes con otros? La
respuesta sera histrica y tcnica: HTML se convirti en la forma de crear pginas web, pero tena
muchas limitaciones. En un momento dado, se consider que entremezclar (embeber) lenguajes entre
s poda ser una buena opcin tcnica para resolver problemas o hacer cosas que no era posible o
conveniente hacer con HTML. As, podemos embeber Javascript en HTML embeber CSS en HTML, o
embeber HTML en PHP, etc. Por ello a veces ocurre que no hay una frontera clara entre lenguajes de
programacin, HTML y CSS. Esto, que puede resultar un tanto confuso inicialmente, se va convirtiendo
en comprensible a medida que se trabaja y se aprende ms sobre estos lenguajes.
Por otro lado, por qu tantas vas distintas para hacer algo cuando quizs que solo hubiera una
manera de poner el texto en negrita, o una sola manera de poner un color de fuente, sera ms simple?
Para esto podemos citar varios motivos:
a) Motivos histricos: a veces las cosas se empezaron a hacer de una manera y luego se pens
que era mejor hacerlas de otra. Sin embargo, para evitar que las pginas web existentes
dejaran de funcionar, se siguieron permitiendo formas de hacer las cosas anticuadas. Por
ejemplo la etiqueta <strike> </strike> en HTML se considera deprecated (obsoleta, de uso no
recomendado) en HTML 4.01 y no est admitida en HTML 5. Sin embargo, se sigue usando.
Muchas formas de hacer las cosas se admiten aunque no estn recomendadas.
b) Motivos de independencia de tecnologas: HTML es una cosa y Javascript es otra, aunque en la
prctica nos encontremos con que Javascript se puede entremezclar (embeber) en HTML.
Podramos hacer cosas en Javascript y no querer usar otro lenguaje, es decir, podramos tratar
de hacer cosas independientes sin entremezclar tecnologas. Por ello lenguajes como
Javascript PHP incorporan posibilidades para hacer cosas que ya se pueden hacer de otra
manera. De esta forma tienen la potencialidad de ser ms independientes.
c) Motivos de polticas de desarrollo y estndares: quizs no te lo hayas preguntado nunca, pero
conviene tener al menos una orientacin al respecto: Quin define qu es un lenguaje como
HTML, CSS, PHP, cmo se debe escribir, qu resultado debe generar cada etiqueta o
instruccin, etc.? En general detrs de los lenguajes, aunque algunos fueron creados por
personas individuales, hay empresas, comunidades de desarrollo, asociaciones, consorcios
internacionales, comits, etc. En ocasiones un grupo de personas no est de acuerdo con la
forma en que se est creando una especificacin del lenguaje y forman grupos de trabajo
alternativos que definen estndares alternativos. A veces triunfa un estndar y el otro se
desecha, pero otras veces conviven distintos estndares que permiten hacer las cosas de
distintas maneras. Para los creadores de pginas web esto resulta negativo, pero as es la vida!
d) Otros motivos: podramos abundar en el por qu de que las cosas sean como son, pero con
tener una idea general nos basta.
Acostmbrate a pensar que los desarrollos web no son matemticas. Las cosas se pueden hacer de
muchas maneras, y de hecho muchas veces se hacen de mala manera por desconocimiento, por
prisas, o por ser ms fcil.
Acostmbrate a pensar que los desarrollos web usan distintos lenguajes que muchas veces se
entremezclan entre s hasta el punto de ser difcil distinguir en qu corresponde a un lenguaje y qu
corresponde a otro. Hay lenguajes comunes en los desarrollos web como HTML, pero por ejemplo en
cuanto a lenguajes de programacin no todos los programadores usan el mismo.
Acostmbrate a encontrarte con que a veces las cosas no funcionan como una esperara que lo
hicieran, no debido a que se haya escrito mal el cdigo o usado mal una instruccin, sino debido a que
en el mundo de internet existen distintos estndares y distintas versiones. A veces aunque nos
esforcemos porque todo se vea como nosotros esperamos en todos los navegadores o dispositivos, es
difcil conseguirlo. Es un poco catico, pero es as.
En este curso ms que aprendernos todas las instrucciones, estndares, etc. vamos a tratar de ser
capaces de razonar el por qu de las cosas, y a tratar de esforzarnos por saber cmo generar cdigo
limpio, bien estructurado y de calidad.

CSS en gestores de conten

nido como Joom
mla, WordPresss, Drupal
CSS EN AP
PLICACIONESS WEB
entacin o
Ya hemoss dicho que CSS nos perrmite separaar el contenido de una pgina web de su prese
aspecto. Una de las aplicacioness ms ampliiamente exttendida de CSS
C est en dotar de un
u aspecto
d
de lass que destacaan los Gestores de Conteenidos o CMSS (Content
atractivo a las aplicaciiones web, dentro
Managem
ment System
ms). Un CMSS es softwaare que se instala en el
e servidor y sirve paraa publicar
contenido
os en una pgina web fccilmente.
pto de aplicacin web (programa que

q se alojaa en un servvidor remotto o hostingg y al que
El concep
accedemo
os a travs de
d internet) es muy am
mplio, de heccho con el paso
p
de los aos se ha hecho tan
amplio co
omo los proggramas de orrdenador o las
l actividades que realizza el ser hum
mano. Las ap
plicaciones
web se han
h populariizado en loss ltimos a
os gracias a que buen
na parte de estas aplicaaciones se
comenzarron a distribuir y utilizar de forma gratuita, con una comunidad de usuaarios y desarrrolladores
de softwaare en torno a ellas.
Muchas de
d estas apliicaciones sirrven para qu
ue personas que no tien
nen conocim
mientos de in
nformtica
gestionen
n pginas weeb como tiendas de comeercio electrnico, foros, portales de ccontenidos, peridicos
digitales, etc.
s podran clasificar de varias
v
manerras. De hecho
o es difcil reealizar una clasificacin
Las aplicaciones web se
s utilizan las distintas aplicaciones muchas
m
vecees se solapan
n. Vamos a
debido a que los campos en que se
hacer unaa clasificaci
n comn, que
q es basndonos en el tipo de pgina
p
web para el que
e son ms
habitualm
mente usadoss:
CLASIFICA
ACIN
EJEMPLOS
DESC
CRIPCIN
Gestores de
d
Contenido
os
mla, Drupal, OpenCMS, Plone, WordPrress,

Joom
b2evvolution, Geeeklog, Serendipity, Textpatttern,
CMSS Made Simple,
S
conccrete5, Con
ntao,
ImpressPages, liveSite,
l
Nuccleus, PyroC
CMS,
TYPO
O3, Chamilo,, Moodle, ph
hpMyFAQ, e107,
Mah
hara, Mambo
o, ocPortal, PHP-Fusion,
P
PHPP
Nukke, Tiki Wiki, Xoops,
X
Zikula
eb de muy
Orienttados a crearr portales we
diferen
ntes temticaas, desde un
n peridico
digital hasta una tienda on-line o un blog,
pginaa personal, etcc.
Foros y libros de
visitas
phpBB, SMF, flu

uxBB, MyBB, Vanilla Foru
ums,
XMB
B Forums, GBo
ook, Lazarus GuestBook,
G
dos para la ccreacin de sistemas

s
de
Pensad
foros donde loss usuarios participan
intercaambindose m
mensajes o para libros de
visitas
om, 2006-2029
CSS en gestores de contenido como Joomla, WordPress, Drupal
CLASIFICACIN
EJEMPLOS
DESCRIPCIN
Wikis
MediaWiki, DocuWiki, PmWiki, WikkaWiki,

TikiWiki, PikiWiki
Pensados para mantener un sistema de

informacin entre una comunidad de
usuarios. Este sistema puede ser generalista
como wikipedia o estar especializado en un
rea o campo de conocimiento concreto.
Tiendas y
comercio
electrnico
Magento, PrestaShop, CubeCart, OpenCart,

osCommerce, TomatoCart, Zen Cart,
Pensadas para crear tiendas electrnicas y

galeras de productos destinadas al
comercio electrnico.
Utilidades varias
ExtCalendar, phpScheduleit, WebCalendar,

phpFreeChat, phpMyChat, DadaMail, PHPList,
SiteRecommender, OpenX, OSClass, QuickSell
Classifieds, Help Center Live, Hesk, osTicket
Permiten crear calendarios, galeras de

imgenes, Chats, Sistemas de envo de
correo electrnico, sistemas de anuncios,
sistemas de soporte a usuarios
MILLONES DE DESCARGAS, MILLONES DE WEBS DISTINTAS

Vamos a centrarnos ahora en lo que permite mostrar una aplicacin web a los usuarios. Por ejemplo,
para un diario digital diremos que existe una parte denominada BackEnd donde escriben los articulistas
y otra parte denominada FrontEnd que es la pgina web en s del diario. Aplicaciones web que pueden
servir para este propsito son Joomla, Drupal o WordPress. Si cientos de diarios digitales utilizan
Drupal, por ejemplo, Cmo consiguen tener un aspecto diferente unos de otros si el punto de partida
es siempre el mismo?
La respuesta est en que estas herramientas incorporan cdigo CSS avanzado mediante el que se crean
aspectos distintos. La aplicacin web suele contar con una parte para la gestin de contenidos mientras
que otra parte denominada plantilla, template, theme, skin, etc. se encarga de controlar el aspecto.
El template o theme acta como una piel sobre los contenidos. Fjate cmo aplicando un filtro una
fotografa puede cambiar:
Con CSS avanzado la idea es similar: aplicamos distintos tipos de fuentes, tamaos de fuentes,
imgenes de fondo, colores, etc. para conseguir distintos aspectos. Fjate en estas imgenes, que
corresponden a themes o plantillas del gestor de contenidos Drupal.
Aqu vemos cmo usando CSS se pueden conseguir muy distintos aspectos. Esto ha permitido el xito
de gestores de contenidos como Joomla, Drupal o WordPress, con los que se puede crear desde una
pgina dedicada al comercio electrnico hasta una web de un restaurante o un peridico digital.
Gracias a los templates o themes tambin se puede cambiar el aspecto de pginas web cada cierto
tiempo.
Si te fijas en las imgenes anteriores se puede argumentar que realmente no tienen el mismo contenido
debajo. Efectivamente, en este caso no tienen el mismo contenido. Pero ten en cuenta que quizs el
aspecto de una peluquera deba ser un poco diferente al aspecto de un restaurante.
En las siguientes imgenes te mostramos un mismo contenido con un cambio de theme:
En este caso el contenido s es el mismo (excluyendo el espacio publicitario). Fjate en los cambios:
cambia la imagen de fondo que aparece en la cabecera de la web. Cambia el color de los elementos
(letras, fondos), cambia la forma en que aparece el men, cambia el espaciado entre lneas, etc. Pero la
informacin que hay debajo es la misma.
Todo esto es posible gracias a CSS, la tcnica y lenguaje que permite separar contenidos y presentacin.
Realmente las pginas web tienen una gran variedad de aspectos no solo gracias a distintos colores e
imgenes, sino tambin gracias a que las tcnicas CSS permiten crear muy distintos aspectos.
Existen muchos estudios de diseo y programacin donde se trabaja en la creacin de templates o
themes prediseados. Hay muchos de distribucin gratuita, pero la mayora de los templates o themes
de calidad son de pago (cosa lgica, ya que tienen un gran trabajo detrs).
Hemos querido con esta aproximacin al uso de CSS en aplicaciones web remarcar la importancia que
ha adquirido esta tcnica en los desarrollos web. No vamos a entrar de momento en cuestiones
relacionadas con templates o themes, sino a centrarnos en cuestiones bsicas de CSS. La realidad en
torno a los templates o themes de aplicaciones web es bastante compleja, ya que actualmente se
tiende no slo a permitir cambiar el aspecto de un mismo contenido, sino a permitir completamente la
personalizacin de la presentacin de pginas web (por ejemplo permitir usar dos mdulos laterales y
una columna central, o por el contrario dos columnas centrales sin mdulos laterales, etc.). Esto ya
supone el uso de programacin al mismo tiempo que CSS, y tambin suele suponer la participacin de
distintos especialistas (diseadores, maquetadores, expertos en CSS, programadores, etc.) para la
creacin de los templates o themes profesionales de las aplicaciones web.
Lo primero es lo primero, as que empecemos con los fundamentos de CSS.

Empezar a usar
u CSS a parttir de un docum
mento HTML bsico
UN DOCU
UMENTO HTM
ML BSICO
c
CSS no
os sirve para dotar de aspecto a un documento
d
H
HTML
vamoss a partir de un cdigo
Para ver cmo
HTML quee representaa la estructura bsica de una pgina web. En estta estructuraa la pgina web
w queda
dividida en:
e cabecera con el ttulo
o y mensaje breve, men
n, texto con
n algunas imgenes, form
mulario de
contacto y un pie de pgina
p
con in
nformacin sobre
s
los auttores o el cop
pyryght.
Crea un documento HTML

H
con un editor de teexto como No
otepad++ co
on el siguientte contenido
o:
<!DOCTYPE HTML PUBLIC

C "-//W3C//DTD
D HTML 4.01 Trransitional//EN" "http://www.w3.org/TR/htm
ml4/loose.dtd">
>
<!Cdigo
o base para el curso
c
-->
<html>
<head>
<title>Porttal web - apren
nderaprogramar.com</title>
<meta chaarset="utf-8">
<meta nam
me="description" content="Po
ortal web apren
nderaprogramaar.com">
<meta nam
me="keywords"" content="apreender, program
mar, cursos, librros">
</head>

<body>

<div>
<h1>Portaal web aprenderaprogramar.co
om</h1>
<h2>Didcctica y divulgacin de la prograamacin</h2>
</div>

<br />
>
<div>

<div>
<div>Men</div>
<hr/>
<ul>
<li><a hreff="#">Inicio</aa></li>
<li> <a hreef="libros.html"">Libros de programacin</a>> </li>
<li> <a hreef="cursos.htmll">Cursos de prrogramacin</aa> </li>
<li> <a hreef="humor.html">Humor inforrmtico</a> </li>
</ul>
</div>

om, 2006-2029
Empezar a usar CSS a partir de un documento HTML bsico


<div>

<div>
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p>Hay que tener claro que <a href="http://www.aprenderaprogramar.com">aprender programacin</a> no es tarea de un
da ni de una semana: aprender programacin requiere al menos varios meses y, si hablamos de programacin a nivel
profesional, varios aos. No queremos con esto desanimar a nadie: en un plazo de unos pocos das podemos estar haciendo
nuestros primeros programas.</p>
<p>Puedes
seguir
uno
de
<a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros
cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y
sencillo como Notepad++, aunque son vlidas otras alternativas como Crimson Editor.</p>
<a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientasinformaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>

<br/>

<form method="get" action="accion.html">
Si quieres contactar con nosotros envanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Direccin: <input type="text" name="direccion" /><br />
Correo electrnico: <input type="text" name="correo" /><br />
Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>

</div>

</div>

<br /> <br /> <br />

<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png"
apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>

</body>

</html>
alt="logo
El cdigo anterior es HTML y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo
que lo denominaremos "cdigo base del curso". Para seguir este curso debes ser capaz de comprender
todo el cdigo HTML que hemos usado, su significado y sintaxis. Si no comprendes el cdigo anterior no
continues avanzando, dirgete a la web aprenderaprogramar.com y en la seccin cursos busca el Curso
bsico del programador web: HTML desde cero y realzalo. Si no lo haces as no entenders o no le
sacars todo el partido posible a este curso.
Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla
alguna imagen puedes cambiar las rutas y poner otra imagen que t desees):
En este documento tenemos varios elementos como etiquetas de ttulo h1 y h2, links, listas con
elementos dentro de las listas, imgenes, formularios, botones, texto, etc. Todo ello nos va a servir para
usar CSS y ver las posibilidades que nos ofrece CSS para dar formato a nuestras pginas web. En este
curso nos vamos a centrar en tratar de aprender los aspectos ms importantes de CSS y la lgica de CSS.
El objetivo ser saber hacer un buen diseo de CSS, un buen uso de CSS y comprender lo que hacemos.
Por el contrario, no vamos a tratar de aprender o conocer todas las propiedades, posibilidades o
instrucciones de CSS ya que si logramos comprender cmo funciona y su lgica, nos bastar con realizar
bsquedas en internet para encontrar aquella propiedad o sintaxis que podamos necesitar en un
momento dado. Aprende a pescar, no te conformes con que te den peces.

De la estrucctura HTML al modelo

m
de cajaas CSS. Block e inline.
ORGANIZZACIN CONCEPTUAL HTTML

v
el cd
digo HTML co
orrespondien
nte a una pgina web se
encilla que
En la anteerior entregaa del curso vimos
constaba de cabeceraa con el ttulo y mensajee breve, men
n, texto con
n algunas im
mgenes, form
mulario de
p
con in
nformacin sobre
s
los auttores o el copyryght. HTM
ML podemoss decir que
contacto y un pie de pgina
define un
na organizaccin concep
ptual: cada elemento est
e
dentro de otro eleemento o, en ltima
instancia, dentro de laa pgina web
b o documen
nto HTML.
ML para nuestro ejemplo

o podramoss verla tal y como se
La organizacin concceptual que define HTM
refleja en el esquema 1.
p
se
alar algunass cosas que resultan sign
nificativas.
Dentro dee la organizaacin que deefine HTML podemos
Por ejemp
plo, en distintas partes del documento HTML encontramos texto. No o
obstante, lass etiquetas
dentro dee las que se encuentra el
e texto inforrman en algunos casos del
d significad
do de dicho texto. Por
ejemplo el
e texto denttro de etiquetas <h1> </h1> sabe
emos que co
orresponde a un ttulo prinicpal. El
texto den
ntro de etiqu
uetas <li> </li> sabem
mos que corrresponde a un
u elemento
o de una lista. El texto
dentro dee elementos <p> </p> sabemos que corresponde a un prrrafo. Hay ocaasiones en qu
ue el texto
no aparecce dentro dee etiquetas con
c un signiificado explccito. Por ejeemplo un texxto dentro de
d <div>
</div> es simplementte el texto dentro de un contenedorr o espacio distinto
d
de ottros espacio
os, pero no
tenemos ms informaacin acerca de su comettido.
Por otra parte
p
en algunas partes aparece texxto suelto sin
n estar delim
mitado por eetiquetas, po
or ejemplo
dentro deel formulario
o aparece teexto, sin estaar incluido dentro
d
de ettiquetas especficas. Sab
bemos que
dicho textto forma parrte del formu
ulario, pero nada
n
ms.
Otra cuesstin que no
os puede llaamar la aten
ncin es que si bien la mayora dee las etiquettas tienen
elemento
o de aperturaa y cierre (po
or ejemplo <h1>
<
</h1>), algunas etiquetas
e
se abren y cierrran en un
mismo elemento, com
mo <br/>, mientras
m
quee otras se in
ncluyen aparrentemente como si solo
o tuvieran
c
de <imgg >. Todas estas
e
particu
ularidades dee HTML debeemos conoce
erlas.
apertura, como es el caso
MODELO DE CAJAS
Ya hemoss visto cmo conceptualm
mente HTMLL define una organizacin
n donde todo
os los elementos estn
dentro dee un elemeento matriz (el elementto body) y a su vez caada elementto puede te
ener otros
elemento
os dentro de l y as sucessivamente.
A partir del
d HTML, los navegadores tienen que realizaar la interprretacin del cdigo y mostrar
m
en
pantalla una
u pgina web. Ahoraa bien, a partir de un documento
d
f
de
HTML habra distintas formas
presentarr la informaacin en pan
ntalla. Por ejemplo,
e
podran mostrrarse los succesivos elem
mentos de
izquierda a derecha,, o bien dee arriba abaajo, o bien de derecha a izquierda Qu hacen los
ores? Los naavegadores actan
a
seg
n unas regllas predefinidas aceptad
das por todos (o casi
navegado
todos) segn la cual cada elemen
nto HTML see considera que est delimitado porr un rectnggulo o caja
c
para laa web.
invisible. De ah que se hable de modelo de cajas
om, 2006-2029
De la estructura HTML al modelo de cajas CSS. Block e inline.
Esquema 1. Organizacin conceptual basada en HTML
Cada caja puede ser o bien tipo <<block>> que podramos considerar como bloque a lo ancho o bien
tipo <<inline>> que podramos considerar como elemento dentro de una lnea. Cada caja se coloca
dentro de la pantalla de la siguiente manera:
-
Una caja debajo de otra, si son elementos block del documento HTML del mismo rango o nivel
en la jerarqua. Muchas de las etiquetas HTML se tratan por defecto como elementos block. Por
ejemplo los elementos <div> </div> son elementos block. Igualmente son elementos block
los formularios <form> </form> o las listas <ul> </ul>.
En el siguiente esquema reflejamos algunos elementos block dentro de nuestro ejemplo.
Si te fijas, las cajas que hemos representado son las divisiones principales dentro de la caja que lo
engloba todo que es la definida por <body> </body>.
Una caja al lado de otra, de izquierda a derecha de acuerdo con el orden con que aparezcan en
el documento HTML, si son elementos inline del documento HTML del mismo rango o nivel en
la jerarqua. Los elementos se mantienen uno al lado de otro (excepto en el caso de que ya no
haya espacio para ubicarlos, en cuyo caso pasan a la siguiente lnea). Algunas de las etiquetas
HTML se tratan por defecto como elementos inline. Por ejemplo los elementos <img> son
elementos inline. Grficamente en nuestro ejemplo esto se visualiza porque distintos
elementos <img> se colocan uno al lado de otro y no uno debajo de otro como haran
elementos block, como vemos a continuacin.
Una caja dentro de otra, siendo la caja interior la de menor rango o jerarqua. Puede haber
varias cajas dentro de cada caja, segn se defina en el documento HTML. Por ejemplo dentro de
la caja div que define la cabecera de nuestra web de ejemplo hay dos cajas, una
correspondiente al ttulo principal <h1> </h1> y otra correspondiente al ttulo segundo <h2>
</h2>.
El siguiente esquema reflejara el modelo de cajas del documento HTML de forma similar a como lo
construye un navegador web como pueda ser Internet Explorer, Google Chrome o Mozilla Firefox,
Safari, etc.
Esquema 2. Modelo de cajas CSS
En este esquema comprobamos que una pgina web puede tener gran complejidad en su organizacin
estructural y en su representacin con modelo de cajas.
Hemos representado las cajas en general delimitadas con una lnea contnua (que en el navegador se
vuelve invisible) excepto aquellos elementos de texto que no estn delimitados por etiquetas
especficas, que constituyen casos especiales que representamos con lnea discontnua.
Como veremos a lo largo del curso, CSS nos servir para aplicar estilos (bordes, fondos, tipos de letra,
interlineado, etc.) a todas las cajas de un mismo tipo si lo deseamos, o tambin a cajas concretas para
las que deseemos tener un tratamiento especial.
EJERCICIO
Analiza el siguiente cdigo HTML y crea dos esquemas. Un esquema de organizacin utilizando llaves
como hemos visto anteriormente, y otro esquema que refleje las cajas que intervienen en el
documento HTML, siguiendo el ejemplo visto anteriormente.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
</head>
<body>
<p><a href="principal.html" title="Pgina principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aqu presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un beb.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versin del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
Para comprobar si tus

aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los

foros
Formas de aplicar
a
estilos CSS:
C por defectto, en lnea, sob
breescritura.
ESTILOS POR
P DEFECTO
O
o a nuestros documentoss HTML de vaarias maneraas: incluyend
do propiedad
des CSS en
Podemos dar formato
las propiaas lneas de HTML (aplicacin de estilos en lnea), en la parte
p
inicial del documento HTML
(aplicacin de estiloss interna) o en un arch
hivo de exte
ensin .css independien
nte del arch
hivo HTML
(aplicacin de estilos externa).
e
Antes de escribir nu
uestro primeer cdigo CSSS remarquemos una cuestin
c
imp
portante: al crear un
documentto HTML este ya posee un
u estilo. Cu
ul? El estilo por defecto
o que aplican
n los navegad
dores. Este
estilo porr defecto sueele comprender un tipo de
d letra, colo
or negro parra el texto y color blanco
o de fondo
para el teexto. El estilo
o por defecto
o para los en
nlaces (links) suele ser co
olor azul y su
ubrayado, au
unque esto
puede vaariar segn el
e navegado
or que utiliccemos. Es im
mportante teener esto een cuenta po
orque nos
podemos encontrar que ciertos elementos se visualice
en de distin
nta manera en dos navegadores
diferentess (por ejemplo Internett Explorer y Mozilla Fire
efox) debido
o a que un n
navegador aplique
a
un
diferente estilo por deefecto.
mplo que ven
nimos usand
do para el deesarrollo del curso (cdiggo base del
Consideraa el formularrio en el ejem
curso). Fjjate en la siguiente imaagen cmo se visualiza el mismo cdigo
c
HTMLL en dos navegadores
distintos sin
s haber aplicado estiloss:
Podemos sealar algu

unas diferenccias:
a) En
n el navegad
dor 2 el botn Enviar aparece rem
marcado con
n un borde aazul y es un poco ms
pequeo que en el navegaador 1.
n el navegad
dor 2 la visuaalizacin dell textarea co
orrespondien
nte al mensaaje incluye un scroll en
b) En
el lateral dereecho, que no
o existe en el navegador 1.
1
O
por ejeemplo la altu
ura de la cajaa del textareaa es ms peq
quea en el navegador 2 que en el
c) Otras:
navegador 1.
om, 2006-2029
Formas de aplicar estilos CSS: por defecto, en lnea, sobreescritura.
Aqu nos encontramos con algo a lo que debemos acostumbrarnos como desarrolladores web. En
general, no es posible (o quizs s sea posible, pero llevara demasiado tiempo y sera demasiado
costoso) conseguir exactamente la misma visualizacin en distintos navegadores web.
Muchas personas pasan horas tratando de cuadrar con exactitud los elementos de una pgina web y
muchas veces este trabajo, o parte de este trabajo, carece de sentido, ya que al cambiar de navegador
(o de sistema operativo con el mismo navegador) todo lo que se haba cuadrado puede aparecer
descuadrado, o al menos no exactamente como se pensaba, dando lugar a grandes decepciones.
Nuestra recomendacin es no obsesionarse con pequeos detalles y, cuando se trate de desarrollos
importantes, probar las webs en distintos navegadores y ordenadores. Para este curso empezaremos
trabajando con un solo navegador ya que para el aprendizaje nos resulta suficiente. Nosotros usaremos
Mozilla Firefox, pero puedes usar otro si lo deseas. Cuando hayamos avanzado iremos explicando
algunos detalles o caractersticas especficas de los distintos navegadores. Cuando trates de visualizar
las pginas web que construiremos durante el curso ten en cuenta que puedes obtener visualizaciones
distintas de aquellas que mostramos nosotros debido a que tu navegador no interprete exactamente de
la misma manera el cdigo. No te preocupes ahora por los pequeos detalles, trata de aprender los
conceptos e ideas que hay en torno a CSS, ms adelante ya habr tiempo de definir cmo se debe
manejar la problemtica del distinto comportamiento entre navegadores.
ESTILOS EN LNEA
Una de las formas ms simples e intuitivas de dotar de estilos al cdigo HTML es usando el atributo
style que admiten la mayora de las etiquetas HTML.
Supn que sobre el cdigo de ejemplo que estamos utilizando en el curso deseamos que el texto de los
elementos del men se muestre de color verde y el texto de los prrafos de color azul. Para aplicar un
estilo en lnea utilizaremos esta sintaxis:
<nombreDeEtiqueta style = propiedadCSS : valorEstablecido; > </nombreDeEtiqueta>
En nuestro caso para un prrafo usaramos <p style =color: blue;> </p>
Para aplicar el color verde a los elementos del men, que estn en una lista, podemos probar a aplicarle
el atributo style y la propiedad color a la etiqueta <ul> </ul>. El cdigo quedara como sigue:
<ul style = "color: green;">
<li><a href="#" >Inicio</a></li>
<li> <a href="libros.html">Libros de programacin</a> </li>
<li> <a href="cursos.html">Cursos de programacin</a> </li>
<li> <a href="humor.html">Humor informtico</a> </li>
</ul>
El resultado obtenido lo vemos a continuacin:
Podremos comprobar que no hemos obtenido el efecto deseado. Queramos poner el texto de los
elementos del men en color verde y sin embargo contina en color azul. S podemos observar, sin
embargo, que las vietas o iconos circulares que aparecen en el lateral izquierdo han cambiado de color
negro a color verde. Cmo explicamos este comportamiento? Tenemos que pensar en el modelo de
cajas para comprender qu es lo que ocurre. El modelo de cajas para los elementos del men sera el
siguiente:
Caja de la lista <ul> </ul>

Caja del elemento de lista Inicio <li> </li>
Caja del elemento link <a> </a>
Caja del elemento de lista Libros <li> </li>

Caja del elemento de lista Cursos <li> </li>

Caja del elemento de lista Humor <li> </li>

En este esquema tenemos cajas en tres niveles: la caja ms exterior correspondiente a la lista, las cajas
dentro de la lista correspondientes a cada uno de los elementos dentro de la lista, y las cajas ms
interiores correpondientes a las etiquetas <a> <a> que definen los link.
El navegador acta aplicando estilos desde los niveles ms exteriores hacia los niveles ms interiores,
de forma que el estilo que se ve cuando existen varios es el ms interior entre todos los posibles estilos
que afectan a un elemento.
En este caso, toda la lista se establece con color verde, lo cual afecta a las vietas y al texto. En las
etiquetas <li> no existe estilo propio que contradiga el color verde. Sin embargo, los elementos link
tienen un estilo propio, un estilo que en este caso es incorporado por defecto por el navegador, segn
el cual estos elementos aparecen en color azul y subrayados. Este es el ltimo estilo que lee el
navegador y el que aplica a la caja de los elementos <a> y esta caja al ser la ms interna es la que se
visualiza, mostrndose el texto en color azul al estar dentro de las etiquetas <a> </a>.
Para resolver este conflicto aadiremos estilos que modifican el color para los links:
<ul style = "color: green;">
<li><a href="#" style = "color: green;>Inicio</a></li>
<li> <a href="libros.html" style = "color: green;>Libros de programacin</a> </li>
<li> <a href="cursos.html" style = "color: green;>Cursos de programacin</a> </li>
<li> <a href="humor.html" style = "color: green;>Humor informtico</a> </li>
</ul>
Ahora s hemos conseguido el efecto deseado.
Fjate en que hemos mantenido el estilo aplicado a la etiqueta <ul> </ul> par que el color de las
vietas se mantenga en verde. Si no aplicramos ese estilo, el estilo aplicado sera el estilo por defecto
segn el cual las vietas se mostraran en negro.
Nos planteamos ahora dejar las vietas en color rojo y el texto del men en color verde pero sin
subrayado. Para ello tendremos que aadir una propiedad al link que elimine el estilo subrayado que
por defecto incorpora el navegador. Esta propiedad ser text-decoration cuyos posibles valores son
none (ninguno), underline (subrayado), overline (lnea superior), line-through (tachado). El cdigo ser
el siguiente:
<ul style="color: red;">

<li><a href="#" style="color:green; text-decoration: none;">Inicio</a></li>
<li><a href="libros.html" style="color:green; text-decoration: none;">Libros programacin</a> </li>
<li><a href="cursos.html" style="color:green; text-decoration: none;">Cursos programacin</a> </li>
<li><a href="humor.html" style = "color:green; text-decoration: none;">Humor informtico</a> </li>
</ul>
Y el resultado:
Decimos que hemos sobreescrito una propiedad CSS, en este caso la propiedad de subrayado de los
links, reemplazndola por una nueva propiedad.
Hay una cosa que llama la atencin: vemos que el cdigo CSS est entremezclado o embebido
dentro del cdigo HTML. Por ejemplo en <ul style="color: red;"> vemos que HTML y CSS estn
ntimamente relacionados, tanto que resulta difcil distinguir qu es HTML y qu es CSS. Esta es una
caracterstica a la que debes acostumbrarte, en los desarrollos web se entremezclan distintos lenguajes
o metalengajes. Podramos decir que HTML y CSS son sublenguajes de un supralenguaje: el lenguaje de
los desarrollos web.
EJERCICIO
A partir del siguiente cdigo:
<html>
<head>
</head>
<body>
<h1>Novedades</h1>
</body>
</html>
Modifica el cdigo HTML anterior para cumplir con estos requisitos mediante la aplicacin de estilos en
lnea:
a) La etiqueta h1 debe mostrar su texto en color rojo.

b) La etiqueta h3 con el texto relativo a X-FASHION debe mostrar su texto en color verde.
c) La etiqueta h3 con el texto relativo a X-MOTION debe mostrar su texto en color azul.
d) Todos los prrafos deben mostrar su texto en color brown (marrn).
respuestas
son
correctas
puedes
consultar
en
los

foros
Formas de aplicar
a
estilos CSS:
C interno y en
e archivos css.
FORMAS DE APLICAR CSS

Ya hemoss visto que existen estilos por defeecto que aplican autom
mticamente los navegad
dores web
cuando no
n hay estilo
os especificaados, as co
omo que po
odemos emb
beber cdiggo CSS en laas propias
etiquetas de HTML, en
lnea. Vamos
V
a ver ahora dos fo
ormas adicio
onales de ap
plicar estilos CSS: en la
parte iniccial del docu
umento HTM
ML (aplicaci
n de estiloss interna o CSS interno
o) o en un archivo
a
de
extensin
n .css independiente del archivo
a
HTM
ML (aplicacin
n de estilos externa
e
o CSSS externo).
minado cdiggo HTML baase para el desarrollo

d
deel curso, cd
digo HTML
Volvemoss a lo que heemos denom
donde no se aplican estilos.
e
mos estilos CSSS en lnea co
on este ejem
mplo:
En el epggrafe anterior vimos cmo aplicbam
<ul style=="color: red;">
<li><a hreef="#" style=""color:green; text-decoratiion: none;">In
nicio</a></li>>
<li><a hreef="libros.htm
ml" style="colo
or:green; textt-decoration: none;">Libro
os programaciin</a> </li>
<li><a hreef="cursos.htm
ml" style="co
olor:green; texxt-decoration: none;">Curssos programacin</a> </li>
>
<li><a hreef="humor.html" style = "ccolor:green; te
ext-decoratio
on: none;">Hu
umor informttico</a> </li>
</ul>
CSS INTER
RNO
Vamos a ver ahora c
mo podemo
os definir essos estilos en
n la cabecera del docum
mento HTML usando la
siguiente sintaxis:
<head>
<style tyype="text/csss">
elementtoAfectadoPo
orElEstilo {
propiedad1ParaEseTipoDeElementtos:valor;
propiedadnParaEseTiipoDeElementtos:valor;
}
</style>>
</head>>
Las difereentes propied

dades y valores se puedeen poner en una misma lnea o en distintas lneas segn se
prefiera (ssiempre separados mediiante punto y coma).
om, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.
Dentro de las etiquetas <head> </head> incluiremos una etiqueta de apertura de declaracin de
estilos <style type=text/css>, a continuacin colocaremos la definicin de tantos estilos como
deseemos y cerraremos la declaracin con </style>. En HTML 5 no es necesario especificar type
=text/css pero de momento seguimos recomendando que se use esta sintaxis.
En nuestro cdigo de ejemplo el cambio de los elementos del men para que tengan el texto color
verde y el icono o smbolo de vieta de color rojo se hara de esta forma:
<!Cdigo ejemplo para el curso -->
<html>
<head>
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>
</head>
<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>

<br />

<div>

<div>
<div>Men</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
</ul>
</div>

<!Aqu el resto del cdigo del ejemplo -->
</html>
Puedes comprobar que hemos usado las mismas propiedades CSS y los mismos valores que usbamos
en lnea.
Visualiza la pgina en tu navegador. El resultado para el men ser el mismo que cuando aplicamos CSS
en lnea:
No obstante podrs comprobar que hay otros elementos de la pgina web que tambin se ven
afectados, por ejemplo los links presentes en el texto. Esto se debe a que hay una diferencia importante
entre aplicar estilos CSS en lnea y aplicarlos como CSS interno en la cabecera <head> </head> del
documento HTML. Al aplicar estilos en lnea, tenemos que repetir la aplicacin de estilos en cada una
de las lneas que queramos modificar y en cada ocasin afectamos a nicamente una lnea. Con la
aplicacin de estilos interna nos basta con declarar una vez el estilo y el tipo de elemento al que se
aplica, y automticamente se aplicar a todos los elementos de ese tipo existentes dentro de la pgina
web. Esto permite que en una pgina web de gran extensin nos ahorremos tener que escribir
mltiples veces la definicin de estilos (una en cada lnea), ya que una sola declaracin inicial nos
bastar, lo cual es una ventaja bastante evidente.
Sin embargo ahora surge una cuestin adicional: es posible que tengamos dos o ms listas de tipo <ul>
y en algunos casos, por ejemplo mens, queramos aplicar un estilo, y en otros casos, por ejemplo listas
de elementos dentro de un artculo periodstico, queramos aplicar otro estilo. Tambin es posible que
deseemos que los elementos del men sean links con texto verde y sin subrayado, pero queramos
mantener el resto de links como texto azul con subrayado. Tal y como hemos hecho la definicin de
estilos no conseguimos hacer esto, ya que estamos modificando todas las listas y todos los links
presentes en el documento. CSS permite resolver satisfactoriamente esta problemtica para aplicar
estilos especficamente all donde queremos. Veremos cmo prximamente.
CSS EXTERNO
Aunque el CSS interno nos permite unificar en una declaracin todos los estilos para un archivo html,
seguimos teniendo el problema de tener que repetir la definicin de estilos en la cabecera de cada uno
de los archivos html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos quizs sea menos
problemtico, pero cuando el desarrollo tiene cientos o miles de archivos s se convierte en un
verdadero problema, ya que cada vez que introdujramos cambios habra que hacerlo en los cientos o
miles de archivos de que constara el desarrollo.
Para solventar esta solucin se ide la declaracin externa de CSS, basada en declarar los estilos CSS en
un archivo independiente que puede servir como referente para dotar de estilos a decenas, cientos o
miles de archivos html, que nicamente debern invocar el nombre de archivo utilizando una sintaxis
especfica. De este modo un cambio en los estilos habr que hacerlo nicamente en el archivo de estilos
correspondiente, lo cual supone una gran ventaja. Incluso un cambio completo de los estilos de una
pgina web se puede conseguir simplemente sustituyendo el archivo correspondiente.
Vamos a generar un archivo de estilos independiente. Para ello abre Notepad++ (o el editor de texto
que ests usando) y crea un archivo con el siguiente contenido:
/* Comentario en CSS estilos aprenderaprogramar.com*/

ul {color:red;}
a {color:green; text-decoration: none;}
Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma CSS
en lnea y en la forma CSS interna.
Los contenidos que se encuentren entre los smbolos /* . */ sern considerados comentarios y se
pueden usar para introducir informacin del autor del archivo, versin, etc. as como para escribir
aquellas aclaraciones sobre los estilos que se consideren necesarias. Un comentario puede comprender
una o varias lneas segn se desee.
Elige Guardar Como y guarda el archivo con un nombre y extensin css, por ejemplo estilos.css.
Asegrate que la extensin del archivo sea css. No es vlido si no tiene esta extensin.
En nuestro archivo HTML eliminaremos la definicin de estilos interna y dejaremos slo la invocacin al
archivo escrita con la siguiente sintaxis:
<head>
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">

</head>
link es una etiqueta que se usa en HTML para establecer vnculos entre un documento HTML y otros
recursos como una imagen de icono o una hoja de estilos CSS. En este caso se indica con la propiedad
rel (relacin o relationship) que el documento HTML debe usar los estilos definidos como texto/css en
un archivo con el nombre indicado. Ten en cuenta que si como ruta de archivo indicas simplemente el
nombre del archivo, ste debe encontrarse en la misma carpeta en que se encuentre el documento
HTML. Si el archivo CSS se encuentra en otra carpeta debers indicarlo escribiendo una URL completa u
bien una URL relativa que determine la ruta.
Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el archivo HTML. En el
archivo HTML tendremos lo siguiente:

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">

</head>
<!Aqu el resto del cdigo . -->
...
Ahora procedemos a visualizar el archivo HTML en nuestro navegador. Si se est cargando la hoja de
estilos correctamente deberemos obtener el mismo resultado que habamos obtenido con la aplicacin
de estilos interna. Prueba a hacer distintos cambios en el archivo css y visualiza los resultados.
QU TIPO DE CSS USAR?

En la siguiente tabla hacemos un resumen de las caractersticas de los distintos tipos de CSS que hemos
visto hasta el momento:
DECLARACIN
CSS
ARCHIVOS AFECTADOS
CSS SE APLICA A
En lnea
Uno, aquel donde se realiza la declaracin
Una lnea de cdigo
Interna
Uno, aquel en cuya cabecera se realiza la

declaracin
Todos los elementos del archivo en los que

resulte de aplicacin el estilo
Todos los archivos que invoquen el archivo css
Todos los elementos de los archivos

afectados en que resulte de aplicacin el
estilo
Externa
Cul de estas formas de aplicar CSS es mejor? Cul usar? En primer lugar cabe hacer una reflexin
sobre qu forma de aplicar CSS har nuestros desarrollos web ms fcilmente mantenibles y aptos para
ser modificados con poco esfuerzo. Parece claro que es la declaracin externa la que mejor independiza
los estilos del contenido y la que menor nmero de modificaciones implicar en general. Por ello es la
forma de trabajar con CSS a la que debemos acostumbrarnos.
No obstante, cuando trabajes con desarrollos web comprobars que tambin son de uso frecuente la
aplicacin de estilos en lnea o interna. En algunos casos esto es debido a desconocimiento de la
persona que realiza el desarrollo o a la forma de funcionamiento del programa con el que se ha creado
la pgina web, pero en otros casos obedece a que se ha querido hacer as.
En ocasiones se opta por hacer modificaciones en lnea porque se buscan efectos puntuales que slo se
quieren aplicar en un punto concreto y en ningn otro. En ocasiones se opta por hacer definiciones CSS
internas porque se quiere afectar muy puntualmente a un archivo y a ningn otro. Y en otros casos, se
usan los estilos en lnea o internos simplemente por las prisas o por ser lo ms rpido.
A efectos del navegador, una declaracin en lnea tiene precedencia sobre una declaracin interna, y a
su vez una declaracin interna tiene precedencia sobre una declaracin externa. Por tanto podramos
tener CSS sobreescrito varias veces: la declaracin externa puede ser sobreescrita por la interna, y sta
a su vez por la en lnea. El navegador aplicar el orden:
Declaracin en lnea > Declaracin interna > Declaracin externa
Podra ocurrir que los estilos que visualicemos en el navegador estn definidos a trozos de modo que
parte de lo que se visualiza se debe a las declaraciones CSS externas, parte a las declaraciones CSS
internas y parte a declaraciones en lnea. Esto en general ser indeseable, ya que har difcil de
mantener el desarrollo web, no se sabr con certeza cmo se generan los estilos y el desarrollo puede
terminar convirtindose en un caos difcil de mantener. Tambin puede dar lugar a visualizaciones
incorrectas o errneas.
A modo de resumen y como recomendacin: mantn los estilos de forma externa, lo ms
ordenadamente posible y sin utilizar redefiniciones internas ni en lnea. Usa este tipo de definiciones
(interna o en lnea) exclusivamente cuando resulte necesario y comenta adecuadamente el cdigo.
Trabajar ordenadamente ser algo que a la larga te resultar ventajoso, tanto a ti mismo como a otras
personas que tengan que trabajar en desarrollos donde t hayas participado.
EJERCICIO 1
Modifica el cdigo HTML mostrado a continuacin para cumplir con estos requisitos mediante la
aplicacin de estilos internos:
a) Todas las etiquetas h1 deben mostrar su texto en color rojo.
b) Todas las etiquetas h3 deben mostrar su texto en color verde.
c) Todos los prrafos deben mostrar su texto en color brown (marrn).

<html>
<head>
</head>
<body>
<h1>Novedades</h1>
</body>
</html>

respuestas
son
correctas
puedes
consultar
en
los
foros
EJERCICIO 2
Modifica el cdigo HTML del ejercicio anterior para cumplir con estos requisitos mediante la aplicacin
de CSS externo definido en un archivo independiente, donde debes incluir al menos un comentario:
a) Todas las etiquetas h1 deben mostrar su texto en color azul.
b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).
c) Todos los prrafos deben mostrar su texto en color brown (marrn).

respuestas
son
correctas
puedes
consultar
en
los

foros
Selectores CSS.
C Id. Aplicarr CSS a una partte de una pgin
na web.
SELECTOR
RES CSS
mo aplicar esstilos CSS a todas
t
las etiquetas HTM
ML de un tipo
o, por ejemp
plo a todos
Hemos esstudiado cm
los prraffos, todas lass listas, todo
os los links, etc.
e Pero en numerosas ocasiones
o
no
o queremos que todas
las etiqueetas de un tipo tengan un
u mismo esstilo, sino ap
plicar distinttos estilos a una etiquetta o a una
parte de una
u pgina web.
w
Para ello adems del
d selector de
d etiqueta o palabra claave que ya conocemos
existen ottros selectores, entre loss ms usadoss tenemos los selectores por id y los sselectores de
e clase.
mos primero los selectorees de etiquetta o palabra clave tipo ettiqueta {prop
piedad:valorr;}:
Recordem
ul {color:rred;} suponaa aplicar color rojo al texto de todass las listas dee tipo ul del documento
o HTML, es
decir, a to
odas las etiqu
uetas <ul> </ul>.
a {color:green; text-decoration: none;} supona aplicar co
olor verde y sin
s subrayad
do a todos lo
os links del
documentto HTML, es decir, a todaas las etiquetas <a> <//a>.
De la mism
ma forma see pueden usaar como seleector otras etiquetas HTM
ML como divv { }, span { }, p { }, etc.
pero supo
oniendo que se apliquen a todos los elementos
e
de ese tipo.
R POR ID
SELECTOR
Trataremo
os ahora dee aplicar estilos a slo una
u parte de una pgin
na web o do
ocumento HTML. Esto
implica do
os cosas:
a) En
n el documento HTML, habr
h
que ideentificar la parte
p
del doccumento a la que querem
mos aplicar
essos estilos in
ncluyendo un
n atributo paara la etiqueta que delim
mita el fragm
mento de cd
digo donde
queremos aplicar estilos. Por ejemplo
o si queremo
os aplicar estilos dentro de un conte
enedor div
nombreIdentificativoEleggido> </d
div>. Si quisiiramos aplicar estilos
laa sintaxis serra <div id=n
s
lo a un prrrafo la sintaxxis sera <p id
d=nombreId
dentificativoElegido> </p>
b) En
n la declaraccin de estilo
os tendremos que declarar los estilos a aplicarr a ese fraggmento de
c
digo realizaando la declaaracin usand
do esta sintaaxis.
#nombreIdentificativo
oElegido {
propiedaad1ParaEseTipoDeElementtos:valor;
propiedaadnParaEseTipoDeElementtos:valor;
}
Las propieedades se pueden defin

nir en una so
ola lnea si se
e prefiere ass, el nico rrequisito es separarlas
con punto
o y coma.
om, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una pgina web.
Con un ejemplo lo veremos ms claro. Partimos del cdigo base HTML que estamos usando para el
curso, en el cual tenemos un men. Vamos a elegir un nombre para identificar ese men. Podramos
elegir como nombre <<menu>> (usaremos nombres sin tildes). Ahora mismo solo tenemos un men,
pero en el futuro es posible que existan otros, por eso vamos a preferir elegir como nombre
<<menu1>>. En el documento HTML vamos a identificar el men con el atributo id aplicado al
contenedor div dentro del cual est el men. El cdigo es este:

<html>
<head>
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">

</head>
<body>
<div>
</div>
<br />
<div>

<div id="menu1">
<div>Men</div>
<hr/>
<ul>
</ul>
</div>

</html>
Hemos incluido <div id=menu1> en el contenedor div que delimita nuestro men.
En el archivo css externo, en nuestro caso denominado estilos.css, vamos a definir que ese fragmento
de pgina web (el men) tenga el texto verde y fondo gris. Para ello escribiremos lo siguiente:
/* Curso CSS estilos aprenderaprogramar.com*/

#menu1 {
color:green;
background-color: DarkGray;
}
Si lo preferimos podemos escribir la declaracin en una sola lnea, obteniendo el mismo resultado. Es
decir, podemos escribir #menu1 {color:green; background-color: DarkGray; }. Esto resulta ms
compacto y ahorra espacio, pero tambin puede ser menos claro a la hora de leer. Algunos
programadores o diseadores prefieren el estilo compacto y otros diferenciando lneas.
El resultado obtenido ser similar a este:
Analicemos ahora el resultado obtenido: se ha aplicado el fondo gris a la caja que define el contenedor
div. Se ha aplicado color verde al texto y a las vietas de la lista existente en el men. Sin embargo, los
links del men mantienen su color azul y subrayado, a pesar de que hemos indicado que el color verde
debera de aplicarse a todo el contenedor. Por qu ocurre esto? CSS no aplica la misma importancia a
todas las reglas o estilos que se especifican. En este caso la regla o estilo que hemos definido no supera
en la escala de importancia CSS a la regla por defecto segn la cual los links son de color azul y
subrayado.
Para resolver este conflicto hemos de especificar que queremos que los elementos <a> </a> (links)
dentro del bloque de cdigo con identificador menu1 se muestren aplicando la regla de estilo definida
para el men. Modifica el archivo css escribiendo el siguiente cdigo y visualiza la pgina web:

#menu1, #menu1 a {color:green; background-color: DarkGray; }
Mediante la sintaxis #nombreIdentificativoElegido elementoAfectadoPorElEstilo {} estamos

especificando explcitamente que deseamos aplicar esa regla de estilo al elemento indicado (en
nuestro caso los links, <a> </a>) dentro de un bloque de cdigo definido por un identificador. De esta
forma el navegador le concede preferencia o mayor importancia al estilo definido que al estilo por
defecto de los links. El resultado en este caso es que se muestra el texto de los links en color verde
(pero se sigue manteniendo el subrayado porque no hemos sobreescrito esta propiedad de los links):
Vamos a especificar ahora que los links del men no aparezcan subrayados. Para ello modificaremos
nuestro archivo css dejndolo con esta lnea:
#menu1, #menu1 a { color:green; background-color:DarkGray; text-decoration:none;}
Ahora s tenemos el men en color verde y sin subrayado, ya que hemos sobreescrito la propiedad textdecoration que estaba dando lugar a la aparicin del subrayado:
Es interesante de lo visto hasta ahora razonar cmo CSS trabaja con unos rdenes de precedencia o
jerarqua de reglas CSS. No te preocupes de conocerlos con exactitud, ya que a lo largo del curso y a
medida que vayas cogiendo experiencia irs aprendiendo ms al respecto. Tambin ten en cuenta que
los rdenes de precedencia pueden cambiar segn los navegadores o segn las versiones CSS. Por tanto
ms que saber con exactitud los rdenes de precedencia nos interesa el ser capaces de interpretar por
qu ocurren las cosas y la forma de trabajar de CSS y su filosofa.
APLICAR ESTILOS DIFERENCIADOS DENTRO DE UN SELECTOR ID

El cdigo que hemos visto anteriormente se puede escribir tambin de esta manera:

#menu1 {color:green; background-color: DarkGray; text-decoration:none; }
#menu1 a {color:green; background-color: DarkGray; text-decoration:none; }
El efecto con este cdigo sera el mismo que con el anterior. Realmente en este caso no tendra inters
escribir la especificacin para menu1 {} y para menu1 a {} por separado ya que resulta ms
compacto escribirlo en una lnea. Sin embargo s tiene inters en el caso de que deseemos aplicar un
estilo general al men y sobreescribir o especificar estilos diferenciados para los elementos <a> </a>
dentro del men.
En nuestro caso vamos a hacer lo siguiente: estableceremos como color general para el men rojo y
como fondo gris. Como fondo para los links (elementos a) dentro del men no especificaremos
ninguno, el color lo estableceremos en verde y eliminaremos el subrayado. Escribe este cdigo y
visualiza el resultado:

#menu1 {color:red; background-color: DarkGray; text-decoration:underline; }
#menu1 a {color:green; text-decoration:none; }
En este caso tenemos como color de los elementos del men rojo, pero los links se muestran en verde
porque para los elementos a el color ha sido sobreescrito y el navegador elige el estilo ms interno.
Prueba a establecer distintas propiedades para #menu1 y para #menu1 a. Posiblemente te encuentres
que en algunos casos los resultados no son tal y como esperas. Ten en cuenta que el navegador tiene
que resolver sobre el orden de importancia de las reglas, las sobreescrituras, estilos por defecto, etc. lo
cual hace que el proceso adquiera cierta complejidad. En ocasiones se producen conflictos en la
definicin de estilos que el navegador tratar de resolver, aunque en algunos casos quizs no pueda
resolver el problema y simplemente ignore los estilos que entran en conflicto. Iremos hablando sobre
estas situaciones a medida que vayamos viendo ejemplos.
CUNDO UTILIZAR SELECTORES POR ID?

El atributo id nos permite darle un nombre especfico a una parte de un documento HTML definida por
una etiqueta HTML, diferencindola de las dems. En general este atributo se utiliza para poner
nombres a distintas partes de un documento HTML, por ejemplo menu, articulo, formulario, footer, etc.
de modo que cada parte de la web est identificada con un nombre nico. No es recomendable aplicar
el mismo nombre id a distintas partes de una web, ni siquiera aunque sean del mismo tipo. Un id debe
ser nico, por lo tanto ese nombre debe aparecer solo una vez en el documento HTML. Si queremos
aplicar un mismo estilo en distintas partes de la web utilizaremos el atributo class, que explicaremos
ms adelante.
No es obligatorio identificar todas las partes de una web con ids. Puede haber partes del documento
HTML con identificador y otras partes que carezcan de l. Incluso la totalidad de la web puede carecer
de identificadores id.
El uso del smbolo # combinado con el atributo id permite aplicar CSS a partes muy concretas de una
pgina web y se usa sobre todo cuando se quieren diferenciar partes estructurales del documento
HTML como el men o el footer, y en general aplicado a elementos <div> </div> que actan como
contenedores. Aunque se podra aplicar a etiquetas ms especficas como <p> esto no es habitual ya
que supondra estarle poniendo un nombre nico a un prrafo y un prrafo en general no tiene tanta
importancia dentro de una web como para ponerle un nombre especfico. No obstante, ten en cuenta
que existe la posibilidad de usar este atributo sobre cualquier etiqueta HTML.
EJERCICIO
Analiza el siguiente cdigo HTML. En l encontrars tres etiquetas div. Haz lo siguiente:
a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera,
<<xFashion>> para la segunda y <<tMotion>> para la tercera.
b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren
dentro del elemento con id <<novedades>>.
c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro
de los elementos con id <<xFashion>> y <<tMotion>>.
d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo
(yellow).
<html>
<head>
</head>
<body>
<div>
<h1>Novedades</h1>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

respuestas
son
correctas
puedes
consultar
en
los

foros
Selectores CSS:
C class. Apliccar CSS a una parte
p
de una pgina web.
SELECTOR
RES CSS
mos cmo ap
plicar estilos CSS a todas las etiquettas HTML dee un tipo, o bien a una parte del
Ya sabem
documentto HTML co
on un nombre nico (id). Pero muchas
m
vecees querremo
os aplicar una misma
definicin
n de estilos en
e distintos lugares de un
na pgina we
eb. Para ello adems del selector de etiqueta o
palabra clave que ya conocemos y del selecto
or # por id, podemos deefinir estilos para aplicarrlos donde
deseemoss mediante el
e atributo class.
R POR CLASSS
SELECTOR
Trataremo
os ahora dee definir estilos que po
odamos aplicar en difeerentes lugaares de una pgina o
proyecto web, all donde nosotro
os deseemos. Para ello haaremos dos cosas:
c
n el documento HTML, habr
h
que ideentificar la parte
p
del doccumento a la que querem
mos aplicar
a) En
essos estilos in
ncluyendo un
n atributo paara la etiqueta que delim
mita el fragm
mento de cd
digo donde
queremos aplicar estilos. Por ejemplo
o si queremo
os aplicar estilos dentro de un conte
enedor div
laa sintaxis seera <div claass=nombreeIdentificativvoElegido> </div>. SSi quisiram
mos aplicar
esstilos slo a un prrafo
o la sintaxiss sera <p class=nomb
c
breIdentificattivoElegido>
> </p>.
Po
odemos com
mprobar quee la sintaxis es
e casi igual a la empleaada con el atributo id, pero
p
ahora
ussando el trm
mino class.
b) En
n la declaraccin de estilo
os tendremos que declarar los estilos a aplicarr a ese fraggmento de
c
digo realizaando la declaaracin usand
do esta sintaaxis.
.nombreeIdentificativo
oElegido {
}
Mientras que para el id el smbolo

o CSS que see empleaba era
e la almohaadilla #, paara los class el smbolo
CSS que empleamos
e
e el . (punto
es
o).
Las propieedades se pu
ueden definiir en una sola lnea o agrrupndolas como
c
nosotrros queramo
os, el nico
requisito es separarlas con punto y coma.
om, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una pgina web.
Con un ejemplo lo veremos ms claro. Partimos del cdigo base HTML que estamos usando para el
curso, en el cual tenemos un men, tres prrafos, dos imgenes y un formulario. Vamos a definir un
estilo CSS consistente en poner fondo naranja, texto en negrita y el texto un 100 % del tamao normal
con el fin de aplicarlo en dos puntos de nuestra pgina web: al primer prrafo y al texto Si quieres
contactar del formulario. A este estilo vamos a llamarlo destacado y lo definimos en nuestro
archivo css de esta forma:
.destacado { background-color: orange; font-weight:bold; font-size:100%; }
Ahora tenemos que aplicar estilos CSS en las partes del documento HTML que nos interesan, el primer
prrrafo:
<p class="destacado">Aprender a programar es un objetivo que se plantea
mucha gente y que no todos alcanzan.</p>
Hemos indicado de esta forma que la caja contenedora definida por las etiquetas <p> </p> del primer
prrafo ver su estilo afectado por las reglas CSS que hemos definido.
Pero en el caso del formulario tenemos un problema. El cdigo inicial es este:
Si quieres contactar con nosotros envanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
</form>
Y el texto al que queremos aplicar el estilo destacado es Si quieres contactar con nosotros. Cul es
el problema? Que dicho texto no tiene una caja especfica, sino que es un texto suelto dentro de otra
caja, en este caso la caja inmediata que lo enmarca es la caja del formulario. Podemos verlo en este
esquema:
Si queremos aplicar estilos tenemos que hacerlo sobre etiquetas delimitadoras (una caja) y ahora
mismo solo disponemos de <form> </form>. Si escribimos <form class="destacado" method="get"
action="accion.html"> el resultado sera este:
Obviamente el estilo se aplica a toda la caja del formulario, y no slo al texto que nosotros deseamos.
Qu solucin podemos darle? Hemos de crear una caja especfica para el texto ya que es slo al texto
a quien queremos aplicarle el estilo destacado. Esto podemos hacerlo de varias maneras: con un
prrafo <p> </p>, con un contenedor <div> </div> o con un divisor <span> </span>. Las
diferencias entre las opciones son que el prrafo es un elemento de tipo block que lleva asociados un
estilo predeterminado por el navegador. div es un elemento que crea una divisin o caja y es de tipo
block, tambin ocupar la pgina web a todo lo ancho. div en principio no lleva estilos predeterminados
asociados. Por ltimo span es un elemento que crea una divisin inline, por tanto no abarca todo el
ancho de la pgina sino el espacio ocupado por aquello que contiene (en este caso el espacio ocupado
por el texto) y tampoco tiene estilos predeterminados asociados. Fjate en la diferencia entre aplicar un
estilo a un elemento block o a un elemento inline.
Elegiremos aquel elemento divisor que nos parezca ms adecuado en funcin de los criterios de diseo.
En nuestro caso vamos a optar por un divisor <p> </p>
El cdigo del formulario en el documento HTML nos queda as:
<p class="destacado">Si quieres contactar con nosotros envanos este formulario relleno:</p> <br /><br
/>Nombre: <input type="text" name="nombre" /><br />
</form>
Ejecuta el cdigo. La visualizacin obtenida debe ser la tipo block que hemos indicado anteriormente.
EJERCICIO
a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la tercera.
b) Usando CSS establece como color de texto el rojo (red) y tamao de fuente el 150% respecto de lo
normal para los elementos cuyo valor class sea <<principal>>.
c) Usando CSS establece como color de texto el verde para los elementos y tamao de fuente el 110%
respecto de lo normal para los elementos cuyo valor class sea <<secundario>>.
d) Usando CSS establece como color de fondo para los prrafos dentro de elementos cuyo atributo class
sea <<secundario>> el amarillo (yellow).

<html>
<head>
</head>
<body>
<div>
<h1>Novedades</h1>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

respuestas
son
correctas
puedes
consultar
en
los

foros
Herencia CSSS: concepto. Palabra

P
clave in
nherit.
HERENCIA
A EN CSS
Hemos visto cmo ap
plicar estiloss CSS a todaas las etique
etas HTML de un tipo, o bien a una parte del
documentto HTML con un nombrre nico (id),, o bien en distintas
d
parrtes de un d
documento o proyecto
web usan
ndo class. Un
na caractersstica interesaante de CSS es cmo no
os permite definir estiloss en clases
superiorees o clases paadre que se van
v transmitiendo hacia las subclasess o clases hijas.
C
QUE SOLO SEAN APLICABLESS A ETIQUETA
AS ESPECFIC
CAS
DEFINIR CLASES
os definido
Partimos del cdigo que hemos uttiliado en la anterior entrega del cursso. En concreeto habamo
ombre era d
destacado y cuyo cdigo
o era:
una clase CSS cuyo no
/* Curso CSS estilos ap
prenderaprogramar.com*/
.destacad
do { background-color: oran
nge; font-weigght:bold; fontt-size:100%; }
olo sea aplicaable a una ettiqueta espeecfica. Por ejjemplo si mo

odificamos
Podemos definir que una clase so
el cdigo que define la clase destaacado y escriibimos:
/* Cu
urso CSS estilo
os aprenderap
programar.com
m*/
p.desstacado{ backgground-color:: orange; font-weight:bold; font-size:100
0%; }
e
destaccado slo surte efecto cu
uando va en una etiquetta p, en cambio en otrass etiquetas
Ahora el estilo
como div,, span, a, etcc. no tendra efecto.
Esto nos permitira ussar el mismo
o nombre dee clase y obttener distinttos efectos ssegn en qu etiqueta
mos la clase. Por
P ejemplo::
aplicram
/* Currso CSS estiloss aprenderaprrogramar.com
m*/
p.desttacado { backgground-color: orange; font--weight:bold; font-size:100
0%; }
div.deestacado {backkground-colorr: blue; font-w
weight:bold; fo
ont-size:100%
%; }
d
un
n prrafo con
n el atributo class = desttacado su fo
ondo ser naaranja. En caambio si es
Ahora si definimos
un divisor div con el
e atributo class
c
= destacado su fondo ser azul. Prueb
ba a ejecutaar cdigo
comprobaando estas diferencias.
DENTRO DE UNA CLASE

S
DEFINIR SUBESTILOS
das cajas deentro de otrra principal tengan estilos diferenciados. Por
Podemos definir quee determinad
ejemplo, podemos qu
uerer que lo
os prrafos de clase de
estacado teengan fondo
o naranja, pe
ero que si
om, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.
dentro del prrafo hay un link (etiquetas <a> </a>) dicho link tenga un estilo especfico, por ejemplo
que tenga fondo amarillo y un tamao un 20% superior a lo normal. Para ello escribiramos:
p.destacado{
background-color: orange;
font-weight:bold;
font-size:100%; }
p.destacado a { background-color: yellow;
font-size:120%;
}
Con la declaracin p.destacado a { } estamos indicando que los links dentro de prrafos con estilo
destacado estarn en negrita (por herencia del estilo general aplicable a la clase destacado) y tendrn
fondo amarillo y tamao de letra un 20% superior a lo normal (ya que hemos sobreescrito las
propiedades de color de fondo y tamao de letra de la clase padre).
Si quisiramos definir un estilo destacado para los prrafos, otro para los div, pero el mismo subestilo
para los links que estn tanto dentro de prrafos como dentro de divs escribiramos lo siguiente:
p.destacado{ background-color: orange; font-weight:bold; font-size:100%; }
div.destacado { background-color: blue; font-weight:bold; font-size:100%; }
p.destacado a, div.destacado a { background-color: yellow; font-size:120%; }
Con la declaracin p.destacado a, div.destacado a { } aplicamos el mismo estilo a los link dentro de
prrafos o div que lleven el atributo class = destacado.
Se observa una cosa: podemos definir estilos agrupando el cdigo de distintas maneras. Podemos
repetir cdigo pero tambin podemos crear clases padre que agrupen las caractersticas comunes y
definir en clases hijo las caractersticas especficas. Veamos el siguiente cdigo:
.destacado {font-weight:bold; font-size:100%;}
p.destacado {background-color: orange;}
div.destacado { background-color: blue; }
p.destacado a, div.destacado a {background-color: yellow; font-size:120%; font-weight:lighter; }
Este cdigo define: una clase padre o superclase <<destacado>> segn la cual la letra ser negrita y el
tamao de letra normal (100 %). Las clases hijas <<p.destacado>> y <<div.destacado>> aportan las
caractersticas de la clase padre (por herencia) ms algunas otras caractersticas adicionales (aadidas)
o distintas (sobreescritura de propiedades de la clase padre), y las clases hijas de las hijas
<<p.destacado a>> y <<div.destacado a>> tienen las caractersticas de la clase padre y de la clase abuela
con algunas caractersticas adicionales o distintas.
Observamos aqu una propiedad importante de CSS: la herencia o transmisin de caractersticas de
clases antecesoras a clases sucesoras o de clases padre a clases hija.
CONCEPTO DE HERENCIA CSS

La herencia CSS permite evitar la repeticin de cdigo en todas las subclases que derivan a partir de una
clase superior. La herencia se aplica tanto a estilos de etiquetas HTML (por ejemplo todas las etiquetas
son subetiquetas de la etiqueta padre body, de modo que un estilo aplicado a body ser heredable por
el resto de etiquetas HTML) como a selectores id o class.
Esto nos da alguna pista sobre prcticas CSS que son habituales entre programadores o diseadores CSS
experimentados: si aplicamos algunos estilos bsicos como un tipo de letra (propiedad CSS font-family)
a la etiqueta body y todas las otras etiquetas son herederas del estilo de body, habremos conseguido
definir el tipo de letra en toda la pgina web en una simple lnea, sin necesidad de tener que estar
repitiendo el estilo en mltiples ocasiones para prrafos, div, span, forms, etc.
Ejemplo de declaracin de este tipo:
body {font-family: Arial, sans-serif; }
En un documento HTML todo tiene ascendiente excepto el elemento html. As body hereda de html, div
hereda de body y <<div a>> (link dentro de un contenedor div) hereda de div. En nuestro caso el estilo
<< p.destacado a>> hereda de <<p.destacado>> y <<p.destacado>> hereda de <<destacado>>.
Sin embargo no todas las propiedades se heredan. Por ejemplo la propiedad font-family es heredable,
pero los mrgenes (propiedad margin) no se heredan excepto si se indica explcitamente que deben
heredarse. Por qu unas propiedades se heredan y otras no? Los creadores de CSS pensaron que sera
til que algunas propiedades se heredaran porque suelen mantenerse constantes dentro de una caja.
Por ejemplo lo ms normal es usar un tipo de letra en un contenedor y no mezclar distintos tipos de
letra. En cambio, otras propiedades era poco lgico que se heredaran, como los mrgenes, ya que por
ejemplo las fotografas dentro de un artculo normalmente tenan un margen distinto al que tena el
propio artculo respecto a su contenedor o los prrafos. Nos encontramos as con que la herencia de
propiedades se rige en cierta manera por el sentido comn. No obstante, en la especificacin oficial
de CSS encontraremos que cuando se define una propiedad se establece un atributo denominado
inherit que puede estar establecido en yes o en no segn la propiedad de que se trate. As fontfamily es una propiedad cuyo valor inherit es yes: esta propiedad se hereda. En cambio la propiedad
margin tiene un valor inherit no, lo cual significa que no se hereda. Ms adelante abordaremos las
propiedades CSS, explicaremos cmo consultar la documentacin oficial CSS y estudiaremos esta
circunstancia con ms detalle.
Hay algunas curiosidades en torno a la herencia. Por ejemplo no todos los navegadores responden
exactamente igual en cuanto a la herencia. Podras encontrarte algn navegador donde no se genera
herencia de una propiedad mientras que en otro s.
Otra curiosidad es algo que hemos comentado: hemos dicho que la propiedad background-color se
transmite por herencia. Sin embargo la definicin del estndar CSS dice que background-color tiene un
valor inherit no. Cmo se explica esto? Lo veremos ms adelante cuando hablemos de las
propiedades CSS, pero baste decir que el color de fondo por defecto para todos los elementos es el
transparente. Al tener el padre un color y superponer el hijo transparente el efecto visual es que se
hereda el color del padre, aunque formalmente no es as.
FORZAR LA HERENCIA CON INHERIT

Hay una manera explcita para indicar que la propiedad que se debe aplicar es la heredada del estilo
padre. Considera el cdigo con que venimos trabajando en el que tenemos un men. Supn que el
men lo hemos identificado con <div id="menu1">:

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
</head>
<body>
<div>
</div>
<br />
<div>

<div id="menu1">
<div>Men</div>
<hr/>
<ul>
</ul>
</div>

</html>
Escribe esta definicin en el archivo estilos.css y visualiza el resultado:

body {font-family: Arial, sans-serif;}
#menu1{ color: red; text-decoration:none;}
Se obtiene algo similar a esto:

Vemos que el color rojo no est siendo aplicado por la etiqueta a (link) dentro del elemento con id
menu1, y esto a pesar de que la propiedad color es heredable (su valor inherit = yes). La propiedad textdecoration tampoco est siendo aplicada. En este caso text-decoration no es heredable (inherit = no).
En realidad que sea heredable o no no est teniendo efecto aqu ya que las propiedades por defecto del
elemento <<a>> sobreescriben a las propiedades que hubiramos definido en nuestro estilo menu1. Ya
sabemos que podemos sobreescribir la propiedad de color y no subrayado del elemento <<a>> dentro
de menu1 por ejemplo escribiendo este cdigo (ejemplo A):
#menu1 a { color: red; text-decoration:none;}
Que ms sintticamente podemos escribir as (ejemplo B):

#menu1, #menu1 a { color: red; text-decoration:none;}
Conociendo la palabra clave inherit tambin podramos obtener el mismo efecto as (ejemplo C):
#menu1 a { color: inherit; text-decoration:inherit; }
En este caso hemos indicado que los links dentro de menu1, los hijos <<menu1 a>>, deben tener un
color y un text-decoration tal como se haya definido en el padre, <<menu1>>.
El resultado con (A), (B) o (C) ser algo similar a esto:
El uso de inherit puede tener algunas desventajas:

a) Algunos navegadores (en especial ms antiguos) puede que no reconozcan la palabra clave
inherit, con lo cual seguiran mostrando los links dentro del men en color azul y subrayados.
b) Puede hacer el cdigo menos claro o menos fcil de entender, en especial si tenemos que
recorrer varios niveles de herencia hasta comprobar desde dnde viene una propiedad. En este
caso la sobreescritura puede resultar ms clara.
c) Podemos caer en la tentacin, como se ha hecho en el ejemplo anterior, de aplicar inherit a una
propiedad que en CSS tiene valor inherit = no. Es decir, aplicar herencia CSS a una propiedad
que de acuerdo con la documentacin oficial CSS no tiene herencia. Esto puede generar
confusiones y hacer el cdigo difcil de comprender y mantener. Sobreescribiendo la propiedad
no habra lugar a dudas.
Por ello en general no usaremos la invocacin de estilos de elementos padre con inherit excepto en
circunstancias excepcionales. Esto no quita que debamos conocer su significado pues podemos
enfrentarnos a tener que analizar o modificar hojas de estilo que hayan sido generadas por otras
personas.
RESUMEN
Las clases CSS pueden ser aplicadas a etiquetas especficas (por ejemplo que la clase solo sea aplicable a
<p> </p>) o a etiquetas de cualquier tipo, segn hagamos la definicin de reglas CSS.
Tambin pueden definirse los estilos de modo que un mismo nombre de clase d lugar a la aplicacin
de distintas reglas en funcin de en qu etiqueta se aplique, por ejemplo que una clase d lugar a un
fondo naranja si se aplica en una etiqueta <p> y a un fondo azul si se aplica en una etiqueta <div>.
Las etiquetas HTML o estilos CSS definidos presentan herencia de estilos para aquellas propiedades
que tienen un valor inherit yes. La herencia puede no producirse si existe sobreescritura del estilo por
parte de algn elemento, o si una propiedad tiene valor inherit no.
Puede forzarse la herencia desde un elemento padre escribiendo en el cdigo CSS del elemento hijo
nombreDeLaPropiedad: inherit, aunque en general ser preferible sobreescribir la propiedad en lugar
de indicar herencia con inherit por ser ms claro.
EJERCICIO
a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la tercera.
b) Usando CSS establece como color de texto el rojo (red) y tamao de fuente el 130% respecto de lo
normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea
<<principal>>.
c) Usando CSS establece como color de texto el verde y tamao de fuente el 110% respecto de lo
normal para los elementos h3 que se encuentren dentro de un elemento cuyo valor class sea
<<secundario>>.
d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se
encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea
<<secundario>>.
e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.

<html>
<head>
</head>
<body>
<div>
<h1>Novedades</h1>
</div>
<div>
<h3>Lanzamos el producto <span>X-FASHION</span></h3>
</div>
<div>
<p>Hemos lanzado una nueva versin del producto <span>T-MOTION</span></p>
</div>
</body>
</html>

respuestas
son
correctas
puedes
consultar
en
los

foros
Referenciarr CSS con cualquier atributo HTML.

H
REFERENC
CIAR CON CU
UALQUIER ATRIBUTO
A
os aplicar esstilos CSS a partir
p
de unaa etiqueta HTTML (referen
nciar por tagg), o bien a
Sabemos que podemo
partir de una parte deel documentto HTML con
n un nombre
e nico (refeerenciar por id), o bien a partir del
atributo class
c
(referen
nciar por claase). A partirr de CSS3 se introdujo laa posibilidad
d de referencciar estilos
mediante cualquier attributo de elementos HTTML.
Los atribu
utos son parmetros associados a una
u etiquetaa HTML y qu
ue tienen un valor concreto. Por
ejemplo en
e <div classs=destacado > </div> el atributto class del contenedorr div tiene como valor
destacad
do. Pero enccontramos muchos
m
otross atributos en el cdigo HTML.
H
Algunos ejemplos son:
Ejemp
plo cdigo
Etique
eta
Atribu
uto
V
Valor del atriibuto
<a> <//a>
hreff
libros.htm
ml
<img src="h
http://i.imgur.ccom/afC0L.jpg" alt="Notepad+++"
title="Notep
pad++, un til editor
e
de texto"">
<img >
src
http:///i.imgur.com/afC0L.jpg
<img src="h
title="Notep
e
de texto"">
<img >
alt
Notepad+
++
<img src="h
title="Notep
e
de texto"">
<img >
titlee
Notep
pad++, un till editor de
texto
<input type="text" name="nombre" />
<input >
typee
text
<input type="text" name="nombre" />
<input >
name
nombre
<input >
typee
submit
<a href="lib
bros.html">Libro
os de programaacin</a>
p
aplicar estilos a todos los elementos de
e un tipo quee cumplan teener cierto atributo. La
Con CSS podemos
sintaxis a emplear es:
NombreeElementoHTM
ML[selectorDe
eAtributo] {
}
om, 2006-2029
Referenciar CSS con cualquier atributo HTML.
Como selector de atributo tenemos distintas posibilidades. A continuacin sealamos algunas:

Selector de atributo
[nombreAtributo]
Ejemplo CSS
Observaciones
input[name] { background-color: red;}
Selecciona todos los elementos que tienen el

atributo nombreAtributo, independientemente
de su valor. En el ejemplo, todos los inputs que
lleven name tendrn fondo rojo y todos los
prrafos que lleven title tendrn fondo amarillo.
p[title] {background-color: yellow;}

Nota: no puede haber espacio entre el
nombre de elemento y el corchete.
[nombreAtributo = "valor"]
input[name="correo"]{backgroundcolor: yellow; font-size:75%;}
Selecciona todos los elementos cuyo

nombreAtributo es valor. En el ejemplo, se pone
fondo amarillo y tamao de letra 75% a todos los
elementos input con atributo nombre =
correo. Si el input no tiene nombre este no
es correo, no se aplica.
[nombreAtributo^="valor"]
a[href^="http://www.aprender"]
{background-color:
yellow;
fontsize:75%;}

nombreAtributo comienza por valor. En el
ejemplo, se pone fondo amarillo y tamao de
letra 75 % a todos los links cuyo atributo href
comienza por http://www.aprender
[nombreAtributo*="valor"]
a[href*="aprenderaprogramar"]
{background-color:
pink;
fontsize:125%;}

nombreAtributo contiene a valor. En el ejemplo,
se pone fondo rosado y tamao de letra 125 % a
todos los links cuyo atributo href contiene
aprenderaprogramar.
[nombreAtributo$="valor"]
a[href$=".com"], a[href$="6"]
{background-color: pink; fontsize:125%;}

nombreAtributo termina en valor. En el ejemplo,
se pone fondo rosado y tamao de letra 125 % a
todos los links cuyo atributo href termina en
.com en 6.
Los selectores ^, * y $ tienen aqu un uso similar al que se da en otros lenguajes para crear lo que se
denomina expresiones regulares: expresiones que siguen un determinado patrn (como empezar por,
terminar por, contener, etc.).
Escribe cdigo CSS utilizando estos selectores y prubalos sobre el documento HTML base que estamos
usando para el curso. Recuerda no dejar espacios entre el nombre de elemento y los corchetes, es
decir, a[href$="6"] es correcto pero a [ href$="6" ] no es correcto por contener espacios.
EJERCICIO
Crea una regla de estilos para aplicar la propiedad font-family: Arial a toda la pgina web. Crea otra
regla que afecte a todas las etiquetas de imagen (<img >) que tengan atributo title y aplcales las
siguientes propiedades CSS: border-style:solid, border-width: 5px y border-color: LightSalmon. Aplica
esta regla al cdigo HTML base que estamos usando para el curso a travs del archivo estilos.css con el
que estamos aplicando estilos a este documento HTML y visualiza los resultados.
Referenciar CSS con cualquier atributo HTML.
SOLUCIN
El cdigo a incluir en el archivo estilos.css sera el siguiente:
body {font-family: Arial;}
/*Aplicamos un borde especial a las imgenes que tienen atributo title*/
img[title]{border-style:solid; border-width: 5px; border-color: LightSalmon;}
Nota: si tu navegador no reconoce LightSalmon escribe #FFA07A en lugar de LightSalmon. Es decir,
escribiramos border-color: #FFA07A;
El resultado al visualizar el documento HTML en el navegador debe ser similar a este, donde vemos las
imgenes que tienen atributo title con un borde color salmn:
SELECTORES BSICOS FRENTE A ESPECIALES

La mayora de las pginas web se pueden trabajar con los selectores bsicos basados en etiquetas
HTML, atributos id y class. En general otros selectores tienen menor uso, en parte porque pueden
complicar la dificultad de comprensin de una hoja de estilos. Restringiremos por tanto su uso a casos
en que sea especialmente necesario y comentaremos adecuadamente el cdigo CSS cuando los
utilicemos.

Selectores avanzados
a
CSS.. Pseudoclases..
SELECTOR
RES AVANZA
ADOS CSS
d los selecttores bsico
os (por etiqu
ueta, por id o por classs) y de los sselectores basados en
Adems de
atributos HTML, disp
ponemos dee algunas fo
ormas ms de establecer criterios de selecci
n para la
n de estilos CSS:
C selectorees especialess y pseudoclases CSS.
aplicacin
Hay selecttores especiales que usaan los smbolos >, + y ~ paara especificcar la relacin
n entre elem
mentos.
Como seleector de atributo tenemo
os distintas posibilidades
p
s. A continuaacin sealam
mos algunas:
S
Selector
Ejemplo CSS
C
div > ul
u { background-color: red;}
elemPadre > elemHijo
div > p.destacado {b

backgroundcolor: pink;}
mg[src$=".png""]
div > im
{backgground-color: blue;
b
}
elemAnterior + elemSiguieente
elemAnterior ~ elemPosteerior
Observaaciones
Selecciona to
odos los elemen
ntos de tipo elemHijo que
estn conteenidos en un elemento elemPadre
directamentee (sin que existtan otros elem
mentos entre
ambos). En el
e ejemplo, todos las listas tipo ul que
estn dentro de un div tend
drn fondo rojo, todos los
n dentro de
prrafos cuyaa clase sea desstacado y estn
un div tendrn fondo rosa y todas las im
mgenes tipo
png dentro dee un div tendrn fondo azul .
p.desttacado + p { colo
or: green;}
Selecciona todos los elemen

ntos de tipo ele
emSiguiente
que estn exxactamente desspus de un elemAnterior
(sin otros elementos entree ellos) y que
e tengan al
ue ste. En el
e ejermplo,
mismo elemeento padre qu
aquellos prrrafos que estn justo despu
us de otro
prrafo cuya clase sea destacado tendrn el texto de
color verde.
p.desttacado ~ p{ colo
or: green;}
Selecciona
todos
los
elementos
de
tipo
uacion que ap
parezcan desp
pus de un
elemAcontinu
elemAnterior (pudiendo exisstir elementos intermedios
mento padre
entre ellos) y que tengan aal mismo elem
que ste. En el ejemplo, aq
quellos prrafos que estn
despus de un prrafo cuya clase sea destacado y que
tengan el mismo contenedor tendrn colorr verde.
q las reglaas que usan > solo se aplican cuand

do existe un
na relacin
Es importtante tener en cuenta que
directa paadre hijo contenedo
or contenid
do sin que existan
e
cajass intermedias entre los elementos
e
indicados. Por ejemplo div ul se ap
plica a una lista incluso si
s el elemento
o ul est den
ntro de un diivisor span
intermediio entre la lissta y el div. En
E cambio div > ul no se aplica
a
a una lista si est d
dentro de un
n span. Las
reglas + slo
s
se aplicaan entre heermanos (elementos co
on un mismo
o padre, por ejemplo do
os prrafos
dentro dee un div seran hermano
os cuyo padre es el div)) al hermano
o justo desp
pus del indicado. Por
ltimo laas reglas ~ se aplican entre herm
manos a todos los herrmanos quee se encuen
ntren con
posterioriidad al indicaado incluso aunque
a
estn separados por elementtos intermed
dios.
om, 2006-2029
Selectores avanzados CSS. Pseudoclases.
PSEUDOCLASES CSS
Existen algunos elementos especiales que se pueden seleccionar con lo que en CSS se denominan
pseudoclases, que son identificadores especiales que van precedidos por dos puntos. Entre las
pseudoclases disponibles tenemos las siguientes:
Pseudoclase
tipoElem:first-child
tipoElem:last-child
tipoElem:only-child
Ejemplo CSS
Observaciones
li:first-child {font-size: 200%;}
Selecciona el primer elemento dentro de una serie de

elementos del tipo tipoElem. En el ejemplo, all donde
haya una serie de elementos li, el primero de ellos
tendr el doble de tamao de fuente normal.
li:last-child {font-size: 200%;}
Selecciona el ltimo elemento dentro de una serie de

elementos del tipo tipoElem. En el ejemplo, all donde
haya una serie de elementos li, el ltimo de ellos
tendr el doble de tamao de fuente normal.
div.destacado img:onlychild{border-style:solid; borderwidth:10px;}
Selecciona un elemento si es hijo nico, es decir, si es

el nico elemento dentro del contenedor tipoElem. En
el ejemplo se seleccionan las imgenes que estn
dentro de contenedores div cuya clase sea destacado y
dentro de los cuales exista nicamente una imagen y
le aplica un borde de anchura 10 pxeles.
li:nth-child(3) {font-size: 200%;}

tipoElem:nth-child(number)
p.destacado:nth-child(2)
size: 50%;}
{font-
Selecciona el elemento nmero number dentro de una

serie de elementos de tipo tipoElem. No puede haber
elementos intermedios de otro tipo en la serie. En el
ejemplo, el tercer elemento de una serie de li tendra
el doble del tamao normal de fuente y el segundo
elemento dentro de una serie de prrafos con clase
destacado tendra el 50 % del tamao normal.
Elem1:not(tipoElem2)
p:not(.destacado) {color:
yellow;}
Selecciona todos los elementos de tipo Elem1 que no

sean de tipo tipoElem2. En el ejemplo, se seleccionan
todos los prrafos cuya clase no sea destacado.
tipoElem::first-letter
p::first-letter {font-size: 300%;}
Selecciona la primera letra de tipoElem
tipoElem::first-line
p::first-line {color:red}
Selecciona la primera lnea de tipoElem
tipoElem::after
h1::after {content:"***";
background-color: yellow;}
Posiciona al final del elemento tipoElem permitiendo

aadir contenido usando content:contenidoDeseado
con las propiedades que se indiquen.
h1::before {content:"---"; color:

blue;}
Posiciona al principio del elemento tipoElem

permitiendo
aadir
contenido
usando
content:contenidoDeseado con las propiedades que
se indiquen.
tipoElem::before
Escribe cdigo CSS utilizando estos selectores y prubalos sobre el documento HTML base que estamos
usando para el curso.
No deben existir espacios al escribir estas declaraciones. Por ejemplo li:nth-child(3) {font-size: 200%;} es
vlido pero li : nth-child (3) {font-size: 200%;} no es vlido por existir espacios.
Si el nmero referenciado con nth-child no existe, la regla no tendr efectos. En lugar de first-child se
puede usar nth-child(1) alternativamente.
Existen ms pseudoclases CSS que iremos estudiando a lo largo del curso.
COSAS QUE PUEDEN OCURRIR

Quizs con el cdigo que hemos ido probando en lo que llevamos de curso hayas encontrado algn
selector o fragmento de cdigo que no te ha funcionado como caba esperar. Quizs hayas pensado que
has hecho algo mal, o que hay algn error en los contenidos del curso. Muchas veces no ser ni una
cosa ni otra. El motivo de que muchas veces no se obtenga el resultado esperado es la distinta
respuesta de los distintos navegadores (Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari, etc.)
ante determinado cdigo. A lo largo del curso iremos estudiando cmo resolver, en la medida de lo
posible, estos problemas. Pero como ya hemos indicado en alguna ocasin, en el mundo de los
desarrollos web los cambios y novedades son constantes y no queda otra que tener paciencia, tratar de
adquirir experiencia y mantenerse actualizado a travs de cursos, internet, libros, revistas, etc.
Pondremos un ejemplo relacionado con lo anterior. Hay una pseudoclase que es ::selection cuya
inclusin en el estndar CSS se ha discutido y es permitida por algunos navegadores pero por otros no.
La sintaxis sera del tipo p::selection { color: gold; background-color: red; } y dara lugar a que cuando el
usuario hace una seleccin dentro de un elemento p, aquello seleccionado aparezca de color oro y con
fondo rojo. Al no haberse estandarizado, es posible que no se reconozca la sintaxis por el navegador y
que no se pueda ver este efecto, o bien que los distintos navegadores tengan distintas sintaxis para
aplicar estos efectos y haya que escribir una lnea especfica de distinta manera para cada navegador.
Al igual que con esta pseudoclase puede ocurrir algo similar con otros elementos CSS. Sera ideal que
todos los navegadores funcionaran igual, pero en la prctica nos encontraremos pequeas o grandes
divergencias entre ellos.
Otra cosa que puede ocurrir con cierta frecuencia es que estemos analizando el cdigo css de una web
o aplicacin web y encontremos cdigo que no hayamos estudiado. En ese caso tenemos que acudir a
nuestro conocimiento general sobre CSS para interpretar que por ejemplo div:empty seleccionar los
elementos div que no tengan hijos o contenedores internos, mientras que input:checked {backgroundcolor: green;} aplicar color de fondo verde a aquellos elementos input con el atributo
checked="checked". Sin embargo, buena parte de este cdigo puede que no sea soportado por muchos
navegadores.
Algunas personas dicen: Esto de los desarrollos web es catico! Quizs no sea para tanto, en realidad
hay un grado de estandarizacin bastante amplio, pero s es verdad que en algunos momentos puede
parecer un tanto catico.
EJERCICIO
Dado este fragmento de cdigo HTML que estamos usando como base para el curso:
<ul>
</ul>

Definir que esta lista es de clase (class) especial. La clase especial no tendr estilos especificados. En
cambio, deber definirse que los elementos li dentro de la lista ul de clase especial tengan color de
fondo gris para los elementos impares (primero, tercero, quinto, sptimo) y color de fondo rosa para
los elementos pares (segundo, cuarto, sexto, octavo).
Indicar los cambios en el documento HTML y el cdigo a incluir en el archivo css.
SOLUCIN
En el archivo HTML escribiremos: <ul class="especial">
El contenido del archivo css puede ser el siguiente:
ul.especial li:nth-child(1) {background-color: grey;}
ul.especial li:nth-child(2) {background-color: pink;}
ul.especial li:nth-child(3) {background-color: grey;}
ul.especial li:nth-child(4) {background-color: pink;}
Dado que solo tenemos 4 elementos en la lista solo definimos los cuatro primeros hijos.
Pero como queremos indicar que se apliquen los estilos a todos los elementos impares y pares sera
ms correcto usar esta definicin:
ul.especial li:nth-child(odd) {background-color: grey;}
ul.especial li:nth-child(even) {background-color: pink;}
El resultado ser similar a este:

Selectores avanzados
a
CSS.. Combinacione
es. Ejemplos y ejercicios.
EJEMPLOSS SELECTOREES CSS

o del curso hemos ido estudiando disstintos tipos de selectorees que nos p
permiten ind
dicar en un
A lo largo
archivo csss a qu eleementos del cdigo HTM
ML se debe aplicar
a
una regla.
r
En la p
prctica los selectores
pueden aparecer
a
com
mbinados un
nos con otros: vamos a ver ejemp
plos reales d
de selectores que nos
podemos encontrar en pginas weeb.
SELECTOR
R UNIVERSALL
Se usa el smbolo * como selecto
or universal. Este selecto
or afecta a to
odos los elem
mentos denttro de una
w
Suele usarse
u
para anular los mrgenes o espaciadoss predeterm
minados que
e utiliza el
pgina web.
navegado
or. Un ejemplo sera el sigguiente:
*{
n; text-decorration:none;
margin: 0; padding: 0;; color: green
}
Esta reglaa establece las propiedaades de marrgin y paddin
ng en 0 pixeeles para tod
dos los elem
mentos, su
color en verde
v
y la pro
opiedad textt-decoration con valor no
one.
Un aspecto interesan
nte del selecctor universaal es que para las propieedades que se indiquen
n anula los
or defecto que tengan lo
os elementos HTML paraa esas propieedades. Por ejemplo los ttulos h1,
valores po
los prraffos, etc. tien
nen unos mrgenes y co
olores por de
efecto. Usan
ndo el selecttor universall podemos
anularlos (como en ell ejemplo esttableciendo su valor a ce
ero) o establecerlos a un
n valor iniciaal concreto
mo en el ejem
mplo se estaablece el color verde o que no existta decoraci
n para los
igual paraa todos (com
textos). Esste resultado
o no se consigue si esa definicin se hace usando
o body { }
En la siguiente imagen
n vemos el resultado
r
de aplicar esa definicin
d
deel selector un
niversal paraa el cdigo
mplo para el curso.
HTML quee estamos ussando como base de ejem
om, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.
Vemos que al aplicar las propiedades margin y padding 0 usando el selector universal, todos los
elementos aparecen apelotonados al carecer del espaciado que incorpora el navegador por defecto.
Sin embargo, s se aprecian algunos espacios. Por qu? Porque tenemos definidos algunos saltos de
lnea con etiquetas <br/>. Estos saltos de lnea siguen existiendo.
MS SELECTORES
Algunos selectores adicionales respecto a los que hemos visto son estos:
Selector
tipoElem:nth-last-child(num)
tipoElem:nth-of-type(sel)
Ejemplo CSS
Observaciones
li:nth-last-child(2) {font-size:
200%;}
li:nth-of-type(odd) {font-size:
200%; color: red;}
li:nth-of-type(even) {font-size:
100%;}
Selecciona los elementos de tipo tipoElem dentro de

una serie contando desde el ltimo hasta la posicin
indicada por num. En el ejemplo, los penltimos
elementos li dentro de una serie tendrn tamao de
fuente el doble de lo normal.
Selecciona los elementos de tipo tipoElem dentro de
una serie y a los que son de tipo sel les aplica los
estilos indicados. En el ejemplo los elementos li
impares tendrn tamao de fuente doble del normal y
color rojo, mientras que los pares tendrn tamao de
fuente normal y el color que corresponda.
Recuerda que en algunos navegadores es posible que no se obtengan los resultados deseados.
EJEMPLOS DE CDIGO CSS Y SU INTERPRETACIN

Hasta ahora hemos trabajado con selectores normalmente de forma independiente: selectores por
etiqueta, por id, por clase, por atributo, selectores avanzados especficos, etc. Cuando nos enfrentemos
al desarrollo del cdigo CSS de una web, o cuando tengamos que analizar una hoja de estilos
desarrollada por otra persona, nos encontraremos que los selectores aparecen combinados de distintas
maneras.
A continuacin vamos a mostrar ejemplos reales de cdigo CSS y a interpretar el significado de los
selectores que se utilizan.
Selector
Observaciones aprenderaprogramar.com
*{}
Selector universal. Afecta a todos los elementos de la web y sobreescribe

los estilos por defecto.
html { }
Selector que afecta a toda la web pero no sobreescribe algunos estilos por
defecto.
body.contentpane { }
Selector que afecta a cualquier elemento con atributo class =

contentpane que est dentro de <body> </body>
Selector
#mainout { }
Selector que afecta a cualquier elemento con id = mainout
.padding { }
Selectores que afectan a elementos con class = padding.
h3 #slo { }
Selector que afecta a elementos con id = slo situados dentro de

elementos h3. Por ejemplo <h3 >Portal web para aprender programacin
<span id="slo"> aprenderaprogramar.com</span></h3>
.find form .search .inputbox { }
Afecta a elementos cuya clase sea inputbox que se encuentren dentro de

elementos cuya clase sea search que se encuentren dentro de elementos
form que se encuentren dentro de elementos de clase find.
.find, form, .search, .inputbox { }
Afecta a elementos cuya clase sea inputbox search find y a

elementos <form> </form>. Ntese que la diferencia con el anterior
selector es que en este caso los elementos estn separados por comas.
.search label { }
Afecta a elementos <label> </label> que se encuentren dentro de un

elemento con class = search.
.find .searchintro { }
Afecta a elementos cuya clase sea searchintro que se encuentren dentro

de elementos cuya clase sea find.
.syndicate-module span { }
Afecta a <span> </span> que se encuentren dentro de elementos con

class = syndicate-module
fieldset a { }
Afecta a links (<a> </a>) dentro de <fieldset> </fieldset>
a img, fieldset, img { }
Afecta a elementos img dentro de links, a elementos fieldset y a elementos

img.
fieldset { }
Afecta a elementos <fieldset> </fieldset>
#form-login fieldset { }
Afecta a elementos <fieldset> </fieldset> que estn dentro de

elementos con id = form-login
#login ul, #form-login ul { }
Afecta a listas ul dentro de elementos con id = login listas ul dentro de

elementos con id = form-login
.inputbox, .registration input, .login

input, .contact-form input,
#jform_contact_message, input {
}
Afecta a elementos con class = inputbox elementos input que estn

dentro de otro con clase registration elementos input que estn
dentro de otro con clase login elementos input que estn dentro de
otro con clase contact-form o elementos con id =
jform_contact_message elementos input.
EJERCICIO
Indicar el mbito de aplicacin de los selectores que se indican:
Selector
.header { }
.find form .search .button { }
.find, form, .search, .button { }
.header label { }
#cohe, #cobo { }
.syndicate-module img { }
#form-login p { }
#login br { }
#login .button { }
label.invalid { }
div.itemCommentsForm form
input#submitCommentButton
#s5_bottom_menu_wrap ul.menu li {
}
.module_round_box ul.menu ul a {
}
Ambito de aplicacin
SOLUCIN
Selector
Ambito de aplicacin
.header { }
Afecta a elementos cuya clase sea header.
.find form .search .button { }
Afecta a elementos cuya clase sea button y estn dentro de elementos

cuya clase sea search y estn dentro de un <form> </form> que est
dentro de un elemento cuya clase sea find.
.find, form, .search, .button { }
Afecta a elementos cuya clase sea button search find estn

dentro de un <form> </form>.
.header label { }
Afecta a elementos <label> </label> que se encuentren dentro de un

elemento con class = header.
#cohe, #cobo { }
Afecta a elementos con id = cohe elementos con id = cobo
.syndicate-module img { }
Afecta a <img > que se encuentren dentro de elementos con class =

syndicate-module
#form-login p { }
Afecta a prrafos que estn dentro de elementos con id = form-login
#login br { }
Afecta a elementos <br/> que estn dentro de elementos con id = formlogin
#login .button { }
Afecta a elementos con class = button que estn dentro de elementos con
id = login
label.invalid { }
Afecta a elementos con class = invalid que estn dentro de <label>

</label>.
div.itemCommentsForm form
input#submitCommentButton
Afecta a elementos con id = submitCommentButton que estn dentro de

elementos <input> </input> que estn dentro de elementos form que
estn dentro de un div cuya clase sea itemCommentsForm.
#s5_bottom_menu_wrap ul.menu li {
Afecta a elementos li que se encuentren dentro de un elemento ul cuya clase

sea menu y que se encuentren dentro de un elemento con id =
.module_round_box ul.menu ul a {
}
s5_bottom_menu_wrap
Afecta a links que se encuentren dentro de listas ul que se encuentren dentro
de otras listas ul cuya clase sea menu y que se encuentren dentro de
elementos cuya clase sea module_round_box.

Cascada CSSS: concepto. im

mportant, especcificidad.
CASCADA
A EN CSS
En epgrafes anteriorees del curso hemos visto
o cmo funciona la herencia CSS y c
mo los elem
mentos de
rango infeerior heredaan las propieedades CSS de
d elemento
os de rango superior. Po
or ejemplo un
u prrafo
<p> </p
p> hereda laas propiedad
des de color definidos para <body> </body>. Sin embargo, algunas
propiedad
des no se heredan y en algunas propiedade
es como el color de lo
os link apre
ecibamos
peculiarid
dades.
unstancia con la que nos tendremos que familiarizar es la existencia d

de conflictoss entre las
Una circu
declaracio
ones CSS. Po
or ejemplo si estamos traabajando con
n un archivo CSS externo
o podemos in
ncluir en l
una declaaracin p {fo
ont-color: blue;}. Pero podra
p
suceder que como CSS intern
no entre las etiquetas
<head> </head> see encontrara una declaracin p {font--color: red;}.. Y tambin p
podra suced
der que en
un prraffo concreto dentro del documento
d
HTML apare
eciera una declaracin como <p stylle = fontcolor: yellow;. Estas declaracionees suponen un conflicto o colisin de
d estilos p
para el naveggador, que
ha de deccidir qu estilo aplicar.
Ya comen
ntamos que de
d forma gen
neral el naveegador aplicaa el criterio de
d precedenccia:
Declaraci
n en lnea > Declaracin
n interna > Declaracin
D
externa
e
Esto podeemos verlo como una cascada
c
de forma
f
que el
e navegadorr va recorrieendo la casccada hasta
llegar al nivel
n
ms bajo posible.
CS
SS externo
(arc
chivos .css)
CSS inte
erno
(dentro de <head>)
<
CS
SS en lnea
(uso de
d style=""")
CSS de us
suario
(opcin en
dor)
navegad
Hemos in
ncluido en el
e esquema la opcin CSS
de usuario para reflejar

r
que algunos navegadores
permiten definir al usuario estiloss propios.
om, 2006-2029
Cascada CSS: concepto. important, especificidad.
ESTILOS DE USUARIO CSS

A travs de una opcin de men de algunos navegadores, se puede definir por ejemplo que el texto se
debe mostrar de un tamao determinado o de un color determinado. Cuando el usuario elige estas
opciones normalmente anula aquello que ha sido definido por el autor de la pgina web, de modo que
sus opciones prevalecen respecto a cualquier otro tipo de declaracin. Esta situacin no es habitual, de
hecho quizs la mayora de los usuarios la desconocen o no la usan. Su empleo quizs se limita a
personas con problemas de vista para poner tamaos de fuente grandes o colores especficos que les
faciliten la visin, o a usuarios avanzados que tienen un gran dominio de las opciones de configuracin.
A pesar de su relativo poco uso, como programadores web debemos tener constancia de ello porque es
posible que tengamos que resolver problemas donde esta configuracin afecte a la solucin del
problema.
Aprovechando que hablamos de opciones de configuracin de los navegadores, citaremos tambin que
algunos navegadores permiten configurar opciones relativas a los estilos por defecto. Ya hemos dicho
que cuando un documento HTML carece de estilos aplicados, en realidad s tiene lo que podramos
denominar estilos bsicos o estilos por defecto que aplica el navegador. Por ejemplo, una navegador
recin instalado puede tener un tamao de fuente por defecto de 12 pixeles, pero en aquellos
navegadores que lo permiten, este parmetro podra cambiarse y establecerse en 16 pixeles a travs de
las opciones de configuracin del navegador. Tambin algunos navegadores permiten configurar otros
parmetros adicionales. Este es uno de los motivos por los que es recomendable no confiar en los
estilos por defecto cuando se crean pginas web, sino especificar todos los parmetros desde nuestra
hoja de estilos para asegurarnos de que se aplican exactamente las reglas CSS que nosotros deseamos.
ORIGEN, IMPORTANCIA Y ESPECIFICIDAD

Nos encontramos con que existen distintos tipos de CSS como el predefinido por el navegador, el
definido por el autor de la pgina web (que puede ser externo, interno o en lnea) el definido por el
usuario en la configuracin de su navegador. A su vez, las reglas pueden entrar en conflicto (que una
regla diga una cosa y otra regla una cosa distinta) y no slo a nivel navegador autor usuario, sino en
lo que para nosotros es la definicin CSS principal, la que escribimos cuando creamos una web. Por
ejemplo en un archivo css externo podemos tener una regla body {color: red;} y otra regla p { color:
blue;} y otra regla #destacado {color: yellow;}. Si en el documento HTML nos encontramos algo as
como <p id=destacado> </p> Qu estilo aplica el navegador entre los tres posibles?
Todas estas situaciones se denominan situaciones de conflicto o colisin y CSS define una forma de
resolucin de conflictos o colisiones. A este mecanismo de resolucin de conflictos se le denomina
cascada. La cascada se basa en determinar todas las reglas que son de aplicacin a un elemento y que
entran en conflicto, en ordenar esas reglas en base a unos criterios y mostrar como resultado en el
navegador la regla que haya quedado en primer lugar, a la que denominamos regla ganadora.
El mecanismo es similar a la asignacin de pesos a cada regla CSS para lograr la ordenacin.
Supongamos que la regla body {color: red;} tiene peso 45 sobre 100 para ser aplicada a los prrafos que
la regla p { color: blue;} tiene peso de 55 para ser aplicada a los prrafos y que la regla #destacado
{color: yellow;} tiene peso 70 para ser aplicada a un prrafo con id = destacado. Cuando el navegador
se encuentra un prrafo dentro del documento HTML ve las reglas que le son de aplicacin y el peso de
cada una, aplicando como regla ganadora la que mayor peso tenga.
Cmo se determinan los pesos y el orden que se asigna a las reglas, es decir, cmo se determina qu
regla gana cuando hay varias reglas que entran en conflicto?
Las reglas de resolucin de conflictos son complejas y no todos los navegadores responden de la misma
manera. Por ello en cursos de aprendizaje de CSS no recomendamos un estudio en profundidad, sino
conocer las reglas bsicas y la filosofa del procedimiento de cascada.
El navegador sigue un proceso similar al siguiente para la resolucin de colisiones de estilos:
1) Crea una lista con todas las reglas que son de aplicacin directa o indirecta por herencia a un
elemento concreto. Cuanto ms directa o prxima est la regla al elemento, antes se coloca. La
proximidad viene dada por cun prxima est la regla a una definicin directa del elemento
afectado. Por ejemplo si un elemento div con id=menu1 tiene un prrafo con class=items
entre #menu1 {} y .items {} la regla ganadora a la hora de aplicar estilo al prrafo es .items {
} porque es la que ms directamente define el elemento. En este ejemplo menu1 define al
elemento indirectamente a travs del div, mientras que items define directamente la clase del
prrafo y por ello resulta ganadora.
Otro ejemplo: para un prrafo dentro de un div, una regla que hereda de div est ms prxima
que una regla que hereda de body. Si existiera una regla directa relativa a los prrafos, esta ira
en primer lugar antes que las dems debidas a herencia.
Si existe una sola regla directa relativa al elemento que se est evaluando, se aplica y termina el
proceso de cascada.
2) Si existe ms de una regla con igual nivel de proximidad, se dividen las reglas por origen en base
a si se trata de estilos de usuario, predefinidos del navegador, estilos de autor, y en caso de
estilos de autor si son css externo, interno o en lnea. Se ordenan en base al origen.
Bsicamente se colocan primero las declaraciones en lnea, luego las internas y luego las
externas.
3) Se dividen las declaraciones de reglas en declaraciones importantes y declaraciones normales.
Las declaraciones importantes son las que estn escritas como:
nombreElemento {propiedad: valor !important;}
Si dos declaraciones son iguales y una lleva !important y la otra no, prevalece la que lleve !important
incluso aunque la otra aparezca con posterioridad. Por ejemplo si en un archivo css escribimos:
div {color:blue !important;}
div {color: pink; }
Podra pensarse que los elementos div tendrn color rosa por aparecer esta regla en ltimo lugar y
sobreescribir a la anterior. Sin embargo, no ocurre as porque la palabra clave !important hace que esa
declaracin prevalezca sobre otra igual que no lleve la palabra clave !important. El significado de
!important en este caso sera similar a esta regla sobreescribe a cualquier otra que defina la misma
propiedad para el mismo elemento y no es sobreescribible.
Si en un archivo css externo tenemos la declaracin p {color:blue !important;} y en el documento HTML

tenemos en lnea <p style=color:red;> </p> la palabra clave !important anular la precedencia del
origen, de modo que el texto se ver de color azul. El significado de !important quedara ampliado a
esta regla no es sobreescribible y anula la precedencia debida al origen.
Algunos navegadores antiguos no reconocen la palabra clave !important. Entre los navegadores
modernos, no todos aplican exactamente el mismo significado a la presencia de esta palabra clave.
Teniendo en cuenta el origen y si existe o no la palabra clave !important, las reglas se ordenan
situndose en primer lugar las declaraciones de estilos en lnea, excepto cuando una regla de aplicacin
directa al elemento lleva la palabra clave !important. Si existe una regla ganadora, se aplica.
4) Si no existe una regla ganadora, para las reglas en conflicto se valora un parmetro
denominado especificidad. Estaramos en el caso de que existan reglas que definan
directamente un elemento y que entren en conflicto. Por ejemplo estas dos reglas:
body div.destacado p {color: cyan;}
div.destacado p {color: yellow;}
Definen directamente el estilo para prrafos que se encuentren dentro de elementos div cuyo atributo
class sea destacado. No hay una regla entre las dos que defina ms directamente el valor de la
propiedad para ese tipo de elemento, por lo que hay que proceder a una resolucin de conflicto. Esta
resolucin se hace con el procedimiento de clculo de especificidad que explicaremos ms adelante. La
regla con mayor especificidad ser la que se mostrar al visualizar la web.
Otro ejemplo de conflicto sera en un prrafo con id=atelier y esta declaracin en un archivo css:
p {color: red; text-decoration:none;}
#atelier {color: yellow;}
Ambas reglas son de aplicacin directa al prrafo, por lo que la regla ganadora se determina mediante
el clculo de especificidad.
5) Si se llega a que dos reglas tienen igual especificidad, igual importancia e igual origen y se
contradicen, prevalecer la que est escrita en ltimo lugar (criterio de orden o de
sobreescritura).
EJERCICIO
En el archivo CSS externo a un documento HTML encontramos esta declaracin:
.magicTitle {
margin:0px;
width:20px;
height:30px;
color:green !important;
border-style: hidden !important;
}
Por otro lado dentro del cdigo HTML tenemos el siguiente cdigo:
<div class="magicTitle" style="border:1px solid blue; color: blue;">
Aprendiendo a programar
</div>
Responde a las siguientes preguntas:

a) Se mostrar un borde para el div? Por qu?
b) Con qu color se mostrar el texto, con color verde o con color azul? Por qu?
c) Se respetarn los valores de width y height definidos en el archivo CSS externo o quedarn
anulados? Por qu?

respuestas
son
correctas
puedes
consultar
en
los

foros
Clculo de especificidad.
e
U de !important.
Uso
CLCULO DE LA ESPEC
CIFICIDAD
erentes reglas son de aplicacin a un elemento
El mecaniismo de casccada CSS dettermina que cuando dife
stas se ordenan
o
en base
b
a unos criterios. Si con el criterrio de proxim
midad o de o
origen no se ha podido
resolver el
e conflicto entre reglas se
s valora lo que
q se denom
mina especificidad. La especificidad para
p
reglas
que aplicaan igual de directamentte a un elem
mento es un valor numrico que utilliza el naveggador para
ordenar reglas que en
ntran en confflicto.
La especificidad se puede
p
calcular como un
n nmero qu
ue consta de cuatro dggitos ABCD en el cual
tenemos:
er dgito: tom
ma valor 1 cu
uando el estilo se declaraa en lnea o cero
c
en caso contrario.
A o prime
B o segun
ndo dgito: see calcula sum
mando 1 porr cada identifficador de tipo id que afecte a un ele
emento. Si
una declaaracin es #m
menu1 #item
m1 {} el valo
or del segundo dgito dee especificidaad para esta regla ser
2, resultad
do de sumarr 1+1, una un
nidad por cad
da id que afe
ecte al elemeento.
C o tercer dgito: se calcula sumando 1 por cada clase o pseudoclasse que afectte a un elem
mento. Por
ejemplo .destacado { } aporta un valor 1, mientras qu
ue .destacado .especial .suiter { } aporta un
valor 3 resultado de sumar 1+1+1, una unidad
d por cada claase o pseudo
oclase.
D o cuarto
o dgito: se calcula
c
sumaando 1 por caada elemento HTML o psseudoelemen
nto que aparrezca en la
declaraci
n. Por ejem
mplo ul li a { } aporta un valor 3, re
esultado de sumar
s
1+1+1
1, una unidad
d por cada
elemento
o HTML referenciado.
Valor po
or
atributo sty
yle
Valor por
atributtos id
Valor por
Valor
V
por
e
elementos
atrib
butos class o
pse
eudoclases simples
Una vez determinado

d
o cada dgito
o, se obtienee un valor nu
umrico (porr ejemplo 01
112) que pod
demos ver
como el peso
p
de la reegla. Gana la regla con
n mayor peso
o. Es interesante fijarse en que el usso de style
siempre ganar
g
a cuaalquier comb
binacin de reglas, lo cu
ual nos dice que habituaalmente los estilos en
lnea ganaarn. Una web bien consstruida debee prescindir en
e general del
d uso de esstilos en lne
ea, aunque
comprobaars que porr un motivo u otro es frecuente enccontrarlos cu
uando se anaalizan desarrrollos web
existentess. Despus de
d los estiloss en lnea, los estilos deffinidos para un id resultaan ganadores respecto
al resto. Finalmente,
F
las clases o pseudoclasees ganan a laa definicin de estilos paara elemento
os simples
HTML.
mos anteriorm
mente, la palabra clave !important puede introdu
ucir excepcio
ones.
Como vim
om, 2006-2029
Clculo de especificidad. Uso de !important.
EJERCICIO RESUELTO
Supongamos que tenemos el siguiente cdigo HTML:
<div> <!Ejemplo aprenderaprogramar.com-->
<div class="destacado">
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
</div> </div>
Si en un archivo css tenemos las siguientes declaraciones, determinar cul es la puntuacin por
especificidad cuando proceda, cul es la regla ganadora, de qu color se visualizar el texto y por qu:
Puntuacin
Declaraciones
especificidad
body {color: grey;}

.destacado {color: green;}
div.destacado {color: blue;}
div:first-child {color: magenta;}
body {color: grey;}
body {color: grey;}
.destacado
!important;}
{color:
green

p {color: blue;}
p {color: blue !important;}
Regla ganadora, color del texto y por qu
SOLUCIN AL EJERCICIO PLANTEADO

Nota: no todos los navegadores responden igual a la palabra clave !important, por lo que podras
encontrar algunos navegadores en que la respuesta no fuera exactamente como hemos indicado.
Declaraciones
Puntuacin
Regla ganadora, color del texto y por qu

1 regla: no aplica directamente, si hiciramos el clculo body
aporta 1 al cuarto dgito. Total 0001
body {color: grey;}
No
0-0-1-3
No
div.destacado {color: blue;}
No
0-0-1-2
div:first-child {color: magenta;}
0-0-1-1
2 regla: body, div y p aportant 1+1+1 = 3 al cuarto dgito y

.destacado aporta 1 al tercer dgito. Total 0013
3 regla: no aplica directamente. Si lo calculramos, 0010
4 regla: no aplica directamente. Si lo calculramos, 0011
5 regla: div y p aportan 1+1=2 al cuarto dgito y .destacado
aporta 1 al tercer dgito. Total 0012
6 regla: la pseudoclase first-child aporta 1 al tercer dgito y div
aporta 1 al cuarto dgito. Total 0011
Gana: la regla 2, el texto se vera de color cyan.
body {color: grey;}
No
body {color: grey;}
No
0-0-1-0
0-0-1-3
.destacado {color: green !important;}

No
Gana: la nica regla que, por herencia, afecta. El texto se vera

de color gris. Si calculramos la especificidad sera 0001
Gana: la segunda regla por ser la ms prxima. El texto se vera
de color verde.
Gana: la primera regla. Aunque la segunda regla lleva la palabra
clave !important es menos directa. La primera regla afecta
directamente al elemento p por lo que tiene prevalencia.
0-0-1-3
No
p {color: blue;}
0-0-0-1
0-0-1-3
No
p {color: blue !important;}
!important
Gana la primera regla, el texto se ver de color cyan.
Gana la tercera regla: hay dos reglas que afectan directamente

al elemento p, la primera y la tercera. Al tener la tercera la
declaracin !important significa que se sobreescriben el resto de
reglas, independientemente de su valor de especificidad y
origen.
CMO USAR !IMPORTANT EN CSS

Considera una declaracin de este tipo. Prubala sobre el cdigo HTML de prueba que estamos usando
para el curso:
body div.destacado p {color: cyan; text-decoration:underline;}
p {color: red !important;}
Aqu apreciamos dos cosas no del todo correctas. En primer lugar, por convenio los programadores y
diseadores web suelen poner las declaraciones ms generales en primer lugar y las ms especficas a
continuacin, tanto ms abajo en el archivo o definicin css cuanto ms especficas sean. Esto facilita el
anlisis y comprensin de hojas de estilo. Por tanto cambiaramos el orden de la declaracin y
pondramos en primer lugar la declaracin ms general relativa a prrafos en general y en segundo
lugar la otra declaracin, ms especfica.
En segundo lugar, si queremos que los prrafos sean rojos: Para qu declarar un color de prrafo cyan
que luego anulamos con una declaracin con la palabra clave !important? En un archivo CSS con cientos
de lneas estas declaraciones generan confusin y dificultan el anlisis del cdigo. Cuando vemos cosas
de este tipo analizando pginas web en general corresponden a que la persona que gener el cdigo no
tena claros los conceptos de CSS a que se han realizado correcciones apresuradas en el cdigo
dejando inconsistencias. El problema est en que cuando una hoja de estilos se manipula mltiples
veces aadiendo en cada ocasin ms inconsistencias, se vuelve incoherente e inmanejable.
El cdigo anterior queda ms correcto as. Comprueba que obtienes el mismo resultado:
p {color: red;}
body div.destacado p {text-decoration:underline;}
Slo debera usarse !important en casos concretos y en los que resulta estrictamente necesario. Usar la
palabra clave !important con frecuencia anulando estilos repetidos es sntoma de un mal cdigo CSS.
En general, para personas que se estn iniciando con CSS recomendamos no usar !important en el
cdigo, posponiendo su uso para cuando se haya adquirido experiencia y un mayor nivel de destreza.
CONCLUSIONES SOBRE LA CASCADA CSS

El orden final con que se ordenan reglas en conflicto se basa en un proceso denominado cascada. El
proceso es complejo, las reglas van cambiando en el tiempo y pueden existir diferencias entre
navegadores. Por ello no resulta de inters aprender todas las reglas del proceso de cascada ni estar
realizando continuamente clculos para determinar precedencias. Sin embargo, s resulta de inters
comprender el concepto y las reglas bsicas porque nos puede ayudar a resolver problemas que
aparezcan en la visualizacin de pginas web. Con esto, ms la aplicacin de sentido comn y la
experiencia que iremos ganando a medida que trabajemos con CSS, ser suficiente para crear pginas
web con un cdigo CSS de calidad.

Colores HTM
ML y CSS. RGB, hexadecimales. Ejemplos.
COLORES EN HTML Y CSS

o
entre los aspectos importantees de las pgginas web tenemos el co
olor. El color interviene
Como es obvio,
en el atraactivo y facilidad de lecttura que puede tener una
u pgina web.
w
No vam
mos a hablarr ahora de
cmo se deben
d
comb
binar los colo
ores, sino dee cmo se pu
ueden especcificar colorees usando HTTML y CSS.
Hay distin
ntas maneraas de ponerr nombre a un color: notacin RGB
B, cdigos hexadecimale
es, uso de
nombres especficos, etc.
CDIGOSS RGB DECIM

MALES
Los colores en los monitores
m
dee los ordend
dadores personales y dispositivos m
mviles com
mo tablets,
smartpho
ones, etc. se forman por combinacin de tres co
olores bsicos: rojo (Red)), verde (Gre
een) y azul
(Blue). La combinaci
n de las letrras de estos tres
t
colores en ingls es RGB y as see denomina al sistema
olores basado
o en indicar la proporci
n de cada un
no de estos ttres colores. Hay otros
de construccin de co
de edicin, pero
sistemas como
c
el CMYYK que son de
d aplicacin
n en el diseo
o y la industrria grfica y d
p
no en
los desarrrollos web.
Un color con
c el sistem
ma RGB se escribe en CSSS as:
rgb (cantid
dadDeRojo, cantidadDeV
c
Verde, Cantid
dadDeAzul)
La cantidaad de cada color

c
se exprresa entre un
n valor mnim
mo que es ceero y un valo
or mximo que es 255.
Si se indiccara un nmero menor que
q cero se considerara
c
cero, o si see indica un nmero mayo
or que 255
se consideerara 255. El
E color rgb (0,
( 0, 0) es el negro y el color rgb (25
55, 255, 255
5) es el blancco. El color
rojo ser el rgb (255, 0,
0 0), el verde rgb (0, 255
5, 0) y el azull (0, 0, 255).
de sin azul daa lugar al am
marillo: rgb (2
255, 255, 0).
La mezclaa completa de rojo y verd
La mezclaa completa de verde y azul sin rojo daa lugar al cyaan: rgb (0, 25
55, 255).
El resto de
d colores see construyen
n mezclando
o estos colorres bsicos: por ejemplo
o el rgb (255
5, 100, 15)
sabemos que ser un color rojizo--amarillento porque hay mucho rojo,, algo de verd
de y poco azul.
Sobre el cdigo
c
de prrueba HTMLL que estamo
os usando para el curso, en concretto vamos a fijarnos
f
en
nuestra lissta de elemeentos de men
n:
<<ul>
<
<li><a
href="##">Inicio</a><</li>
< <a href="libros.html" >LLibros de proggramacin</aa> </li>
<li>
< <a href="ccursos.html" >Cursos
<li>
>
de pro
ogramacin<//a> </li>
< <a href="h
<li>
humor.html" >Humor
>
informtico</a> <//li>
<
</ul>
om, 2006-2029
Colores HTML y CSS. RGB, hexadecimales. Ejemplos.
Prueba a aplicar estas reglas CSS y visualiza el resultado, que deber ser similar al que mostramos en la
imagen a continuacin:
li:first-child {background-color: rgb(255, 255, 0);}
li:nth-child(2){background-color: rgb(0, 0, 0);}
CDIGOS RGB PORCENTUALES

Los cdigos RGB se pueden expresar en valores de tanto por ciento, correspondiendo el 0% a 0 y el
100% a 255 en la notacin anterior. La sintaxis ser:
rgb (cantidadDeRojo%, cantidadDeVerde%, CantidadDeAzul%)
El cdigo del ejemplo anterior en notacin porcentual se escribira as:

li:first-child {background-color: rgb(100%, 100%, 0%);}
li:nth-child(2){background-color: rgb(0%, 0%, 0%);}
li:nth-child(3){background-color: rgb(0%, 100%, 100%);}
li:nth-child(4){background-color: rgb(100%, 39.21%, 5.88%);}
Visualiza el resultado de este cdigo y comprueba que sea igual que el anterior.
Nota: los valores de porcentajes decimales deben ir separados con un punto y no con una coma, por
ejemplo rgb(100%, 39.21%, 5.88%) es vlido pero rgb (100%, 39,21%, 5,88%) no es vlido.
La equivalencia entre un valor numrico y el valor porcentual se puede calcular con una regla de tres Si
255 equivale a 100, un valor equivale a o lo que es lo mismo, usando la frmula:
Porcentaje equivalente = Valor Numrico * (100/255) para pasar de valor numrico a porcentaje
Valor numrico = Porcentaje equivalente * (255/100) para pasar de valor numrico a porcentaje
Por ejemplo, el valor numrico 15 es un porcentaje de 15 x 100 / 255 = 5.88%
CDIGOS HEXADECIMALES
Una de las notaciones soportada por las hojas de estilo CSS para colores, y hoy da la ms usada, es la
notacin basada en cdigos hexadecimales. Este sistema de cdigos se basa en el alfabeto hexadecimal
compuesto por 16 smbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Ha de considerarse la equivalencia A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15
Un cdigo en base hexadecimal se traslada a numeracin decimal utilizando potencias de 16. Por
ejemplo el cdigo 1B0DE equivale al nmero 1x164 + 11x163 + 0x162 + 13*161 + 14x160 = 65536 +
45056 + 0 + 208 + 14 = 110814. El cdigo A3 equivaldra a 10x161 + 3*160 = 160 + 3 = 163
La notacin hexadecimal sigue el sistema RGB: define la cantidad de color rojo, verde y azul que se
aplica para formar un color, de ah que tambin se le denomine notacin RGB hexadecimal. Pero usa
otra notacin distinta a la que vimos para expresar colores RGB anteriormente, en concreto con
notacin hexadecimal un color se designa como:
#cantidadDeRojoHexadecimalcantidadDeVerdeHexadecimalCantidadDeAzulHexadecimal
Los cdigos se expresan como el smbolo # seguido de 6 smbolos, correspondiendo los dos primeros a
la cantidad de rojo expresada en notacin hexadecimal, los dos intermedios a la cantidad de verde
expresada en notacin hexadecimal y los dos ltimos a la cantidad de azul expresada en notacin
hexadecimal. Por ejemplo #FF4D21 es la notacin de un color hexadecimal.
Los lmites siguen siendo 0 como lmite inferior, que en hexadecimal se expresa como 00, y 255 como
lmite superior, que en hexadecimal se expresa como FF (15x161 + 15x160 = 240 + 15 = 255).
La cantidad de cada color se expresa de la misma forma que en el sistema RGB: entre un valor mnimo
que es cero y un valor mximo que es 255, pero los nmeros se escriben en hexadecimal. Si se indicara
un nmero hexadecimal menor que cero se considerara cero, o si se indica un nmero hexadecimal
mayor que 255 se considerara 255. El color negro, rgb (0, 0, 0), se expresa como #000000 en
hexadecimal. El color blanco, rgb (255, 255, 255), se expresa como #FFFFFF hexadecimal. El color rojo,
rgb (255, 0, 0), se expresa como #FF0000 hexadecimal. El verde, rgb (0, 255, 0), es el #00FF00
hexadecimal y el azul rgb (0, 0, 255) es el #0000FF hexadecimal.
La mezcla completa de rojo y verde sin azul da lugar al amarillo, rgb (255, 255, 0) #FFFF00
hexadecimal.
Si tuviramos que expresar un color intermedio como el rgb (255, 100, 15) tendremos que expresar
255, 100 y 15 en notacin hexadecimal, resultando que 255 es FF en hexadecimal, 100 es 64 en
hexadecimal y 15 es 0F en hexadecimal, por lo que el color es #FF150F.
Prueba este cdigo CSS y comprueba que el resultado es el mismo que has obtenido con cdigos rgb
decimales y cdigos rgb porcentuales anteriormente.
li:first-child {background-color: #FFFF00;}
li:nth-child(2) {background-color: #000000;}
li:nth-child(3) {background-color: #00FFFF;}
li:nth-child(4) {background-color: #FF640F;}
VARIACIONES PERMITIDAS EN CDIGOS HEXADECIMALES

Se admiten algunas variantes a la hora de definir un color hexadecimal en CSS.
Un color se puede designar con solo tres smbolos en lugar de seis. En este caso se considera que es una
abreviacin de la repeticin de esos smbolos, por ejemplo #FFF se considera abreviacin de #FFFFFF y
#05F se considera abreviacin de #0055FF.
Tambin se admite el uso de letras en minsculas en lugar de letras maysculas. De este modo, #ffffff
equivale a #FFFFFF #0dab4f equivale a #0DAB4F.
El sistema ms extendido es usar seis smbolos y letras maysculas, pero en ocasiones te encontrars
hojas de estilo donde se usan con frecuencia tres smbolos u hojas de estilo donde usan minsculas.
Tambin en muchos casos se encuentran mezclas, por ejemplo algunos colores designados con
maysculas y otros con minsculas.
Para aquellas personas que se inician con CSS recomendamos usar siempre la notacin de 6 smbolos
(evitando las abreviaturas) y letras maysculas.
CONOCER A QU COLOR CORRESPONDE UN CDIGO HEXADECIMAL

En ocasiones estaremos analizando una hoja de estilos y veremos un color hexadecimal como #F477A2
y querremos saber a qu color, visualmente, corresponde. Para ello basta escribir en un buscador como
bing, google o yahoo colores hexadecimal y pinchar en cualquiera de las pginas que ofrecen el
servicio de mostrar un color a partir de su cdigo. Una vez introduzcamos el cdigo, se nos mostrar el
color que representa. El resultado para el color de ejemplo que hemos puesto ser similar a este:
El mismo resultado podemos obtener usando un programa de diseo grfico como Gimp Photoshop,
que en sus herramientas de color permiten introducir cdigos hexadecimales y nos muestran el color
asociado a ese cdigo.
CONOCER EL CDIGO DE UN COLOR

En ocasiones tendremos una imagen en formato jpg, png, tiff, etc. y querremos conocer el cdigo de
alguno de los colores que aparecen en la imagen. Para ello abriremos la imagen con un programa de
diseo grfico como Gimp Photoshop, escogeremos la herramienta recoge-color y pulsaremos
sobre la parte de la imagen donde est el color deseado. Una vez hecho esto, con la herramienta de
color del programa ya podremos ver el cdigo hexadecimal, RGB, HSV, etc. correspondiente a ese color.
En otros casos veremos una pgina web y querremos conocer qu color es el que aparece como fondo,
borde, relleno, etc. de un elemento. Para ello podemos proceder de varias maneras:
a) Usar una herramienta recoge-color web (como ColorZilla, disponible para Mozilla Firefox y
Google Chrome) que nos indica los cdigos de color simplemente pinchando con el ratn sobre
aquella parte de la web de la que queremos conocer el color.
b) Usar una herramienta de anlisis web (como Firebug para Mozilla Firefox o Firebug Lite para el
resto de navegadores) que nos permite obtener mltiple informacin sobre la web.
c) Hacer una captura de pantalla (print screen) y pegar la imagen obtenida en un programa de
diseo grfico como Gimp Photoshop. Una vez hecho esto, obtendremos el color como
hemos explicado para una imagen cualquiera.
Estas herramientas son en algunos casos complejas y no vamos a profundizar en ellas de momento
porque no las consideramos ahora de importancia para el desarrollo del curso. No obstante, nos ha
parecido oportuno citarlas para ir teniendo unas nociones generales sobre ellas y para que aquellas
personas que tengan curiosidad puedan investigar por su cuenta si lo desean.
EJERCICIO
En la siguiente tabla estn mal ordenados los cdigos de colores. Ordnalos de forma que en cada fila
estn los cdigos equivalentes de forma ordenada y crea un documento HTML donde se muestre un
cuadrado donde aparezca como texto el color con la notacin empleada, y como color de fondo el
color:
Nombre
Hexadecimal
RGB
DimGray
1E90FF
178,34,34
IndianRed
696969
205,92,92
FireBrick
CD5C5C
30,144,255
DodgerBlue
B22222
75,0,130
Indigo
4B0082
105,105,105

respuestas
son
correctas
puedes
consultar
en
los

foros
Web safe co
olors, RGBA, HSSL, HSLA, lista de
d colores HTM
ML - CSS.
COLORES EN LA WEB
c
en CSS
C es la nottacin hexad
decimal esco
ogiendo el
Aunque laa forma ms habitual de designar colores
color deseeado entre lo
os varios millones posibles, hay algun
nas curiosidaades que meerece la penaa nombrar.
Por un lad
do, la existencia de un conjunto
c
de colores al qu
ue se denom
minaron web safe colors que fue
usado durrante varios aos debido
o a que los monitores
m
en que se visuaalizaban las p
pginas web
b no tenan
capacidad
d para mostrrar todos los colores.
LOS WEB SAFE COLOR

RS
o total de co
olores RGB see puede calccular teniend
do en cuentaa que cada u
uno de los trres colores
El nmero
admite 25
56 valores (d
desde 0 hastta 255), de ah
a que el total de colorees disponiblee sea exagerradamente
grande, en concreto de
d 256 x 256
6 x 256 = 16.7
777.216 colo
ores. Cuando
o surgieron lo
os desarrollo
os web y el
nternet, la mayora
m
de lo
os monitoress slo eran capaces de mostrar
m
256 ccolores diferrentes. Por
auge de in
ello se deefini una gama
g
de colores (en co
oncreto 216, ya que algunos se dejjaron reservvados para
elemento
os de sistema) a los quee se llam colores segu
uros para la web o w
web safe colo
ors. Estos
colores erran colores que
q se mostrraban correcctamente en todos los monitores, de ah que se los llamara
colores seeguros, frentte a otros colores que po
odan no mosstrarse correectamente qu
ue eran insegguros.
Hoy da lo
os monitoress han evolucionado y ya tienen capacidad para mostrar
m
millo
ones de colores, con lo
cual ha perdido
p
sentido la clasificacin de colores entre seguros e inseguro
os. La mayora de los
diseadorres usan el color que les apetece entre los millones
m
disp
ponibles y to
odos son se
eguros. No
obstante, los web saffe colors sigguen siendo utilizados co
on preferencia por algunos disead
dores a los
do usar una gama de co
olores bsica o les gusta usar una gama de colorres simple.
que les reesulta cmod
Tambin son
s usados por
p algunos diseadores que crean diseos
d
para dispositivoss con limitaciones en la
gama de colores.
c
Si quieres consu
ultar la lista con
c los 216 web
w safe colors puedes h
hacerlo en laa direccin
websafecolors.info
N RGBA
NOTACI
Existen ottras notaciones o sistem
mas de colores menos utilizadas
u
peero que vam
mos a nombrrar porque
estn adm
mitidas para su uso en CSSS y convienee al menos conocerlas brrevemente.
La notacin RGBA incorpora un parmetro adicional de
enominado Alpha
y que indica el grado de

do 0.0 el valor
v
mnim
mo, que sign
nifica completamente
transpareencia que se aplica al color siend
transpareente, y 1.0 el valor mxim
mo, que significa complettamente opaaco.
om, 2006-2029
Web safe co
d colores HTM
ML - CSS.
Un color con
c el sistem
ma RGBA se escribe
e
en CSSS as:
rgba (cantidadDeR
Rojo, cantidaadDeVerde, CantidadDeA
C
Azul, valorDeeAlpha)
Sobre el cdigo
c
de pru
ueba HTML que
q estamoss usando parra el curso, volvemos
v
a fiijarnos en nu
uestra lista
de elemen
ntos de men
n:
<<ul>
<
<li><a
href="##">Inicio</a><</li>
< <a href="libros.html" >LLibros de proggramacin</aa> </li>
<li>
< <a href="ccursos.html" >Cursos
<li>
>
de pro
ogramacin<//a> </li>
< <a href="h
<li>
humor.html" >Humor
>
informtico</a> <//li>
<
</ul>
e resultado, que deber ser similar aal que mostrramos ms

Prueba a aplicar estass reglas CSS y visualiza el
adelante:
/* Curso CSS
C estilos aprrenderaprograamar.com*/
li:first-child {background-color: rgba((255,0,0,1);}
li:nth-child
d(2){backgrou
und-color: rgba(255,0,0,0.66);}
li:nth-child
d(3){backgrou
und-color: rgba(255,0,0,0.33);}
li:nth-child
d(4){backgrou
und-color: rgba(255,0,0,0);}}
f
blanco
o y vamos aadiendo tran
nsparencia el
e efecto quee observamos es que el
Cuando teenemos un fondo
color pareece que se va haciendo ms
m claro. En
n realidad no
o es que el co
olor se haga ms claro, sino
s
que al
tener mss transparencia deja ver cada vez ms el fondo blanco resultndonos a la vista ms claro.
Escribe laa declaracin .destacado {backgrou
und-color: rggb(0,0,0);} y aade en el HTML c
digo para
indicar qu
ue la lista seea de esa claase: <ul classs="destacado">. Con estto, comprueeba la diferencia entre
aadir traansparencia teniendo
t
fon
ndo blanco o aadir tran
nsparencia teeniendo fond
do negro. En
n el primer
caso el co
olor se va hacciendo cada vez ms clarro, en el segu
undo se va haciendo cada vez ms osscuro.
GBA. En especial, navegadores antigguos no la

Nota: no todos los navegadores admiten la notacin RG
d colores disponibles ess ms de 16 millones, a
adindole laa transparencia resulta
soportan. El nmero de
un nmerro de coloress prcticameente infinito.
om, 2006-2029
Web safe co
d colores HTM
ML - CSS.
NOTACI
N HSL
El sistemaa HSL usa una rueda dee colores y tres
t
parme
etros, el prim
mero un valo
or numrico
o y los dos
siguientess un porcenttaje, de modo
o que un color HSL se escribe:
hsl (anguloDeGiroC
Color, sombrraGrisSaturaccin%, CantidadDeAzul, brillo%)
ngulo de 0 ggrados (o 36
60 grados)
El primer parmetro o ngulo reepresenta el color. En laa rueda el n
20 grados el verde y el n
ngulo de 240
0 grados el azul.
representta el rojo, el ngulo de 12
El segundo parmetro
o o porcentaje de saturacin represe
enta la cantid
dad de color frente a som
mbra gris y
r
e color comp
el
pleto mientrras que el 0%
% supone nad
da de color y todo de so
ombra gris.
el 100 % representa
Todo colo
or con saturaacin 0 es una sombra gris.
El tercer parmetro
p
o porcentaje de brillo geenera el negrro si es 0% y color ms claro (repressentara la
incidenciaa de luz sobre el color) cu
uanto ms prximo est a 100% hastta llegar al bllanco.
Prueba a visualizar
v
el cdigo HTML con esta deefinicin de estilos:
/* Curso CSS
li:first-child {background-color: hsl(0,,0%,50%);}
li:nth-child
d(2){backgrou
und-color: hsl((0,50%,50%);}}
li:nth-child
d(3){backgrou
und-color: hsl((0,100%,50%);}
li:nth-child
d(4){backgrou
und-color: hsl((58,100%,50%
%);}
m
gris, laa segunda griscea-rojizza, la terceraa roja y la
El resultado debe ser la primeraa lnea del men
cuarta en un tono amarillo.
n
admiten laa notacin HSL.
H
En espeecial, navegaadores antigguos no la
Nota: no todos los navegadores
soportan.
om, 2006-2029
Web safe colors, RGBA, HSL, HSLA, lista de colores HTML - CSS.
NOTACIN HSLA
El sistema HSLA es respecto al HSL anlogo a lo que es el sistema RGBA respecto al RGB, es decir, aade
un parmetro adicional alpha que representa la transparencia y que toma un valor entre 0 y 1. La
sintaxis es:
hsla (anguloDeGiroColor, sombraGrisSaturacin%, CantidadDeAzul, brillo%, valorDeAlpha)
Los efectos que se generan son los mismos que hemos descrito para la notacin RGBA. Recuerda que al
aadir transparencia el efecto obtenido depende del color de fondo que tengamos. Si el fondo es
blanco, la impresin que se genera es que el color se va aclarando. Si es oscuro, la impresin es que el
color se va oscureciendo.
NOMBRES DE COLORES ESTNDAR

Los navegadores permiten el uso de nombres especficos para ms de cien colores: adems de los ms
conocidos (Red, Blue, Yellow, Brown, Pink, Green, etc.) existen nombres para muchos colores ms. Por
ejemplo BlueViolet es color azul violceo, Tomato es color tomate, SkyBlue es color cielo. Se admite el
uso de minsculas y maysculas indistintamente: es vlido tanto red como Red, BlueViolet como
blueviolet.
No es un sistema muy extendido y es posible que algunos navegadores no reconozcan algunos
nombres, pero algunos diseadores lo usan y sobre todo se recurre a l cuando se quiere poner un
color rpidamente y nos acordamos del nombre pero no del cdigo hexadecimal. En general, se
desaconseja su uso ya que es menos seguro que el uso de cdigos de color.
A modo de curiosidad, ponemos a continuacin una lista de nombres de colores.
aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown,
burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan,
darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred,
darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue,
dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray,
green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen,
lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightpink, lightsalmon,
lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon,
mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue,
mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin,
navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise,
palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue,
saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow,
springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow,
yellowgreen
Web safe colors, RGBA, HSL, HSLA, lista de colores HTML - CSS.
EJERCICIO
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB
178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada divisin un punto decimal ms de
opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia
desde 1.0 hasta 0.1 (en cada divisin un punto decimal ms de transparencia). En cada divisin escribe
el cdigo de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con
transparencia 0.6>>

respuestas
son
correctas
puedes
consultar
en
los

foros
Color de fon
ndo. Propiedad
d background-ccolor CSS.
BACKGRO
OUND-COLOR CSS
La propied
dad backgro
ound-color dee CSS nos peermite establecer un colo
or de fondo een cualquierr elemento
delimitado dentro de una pgina web. Todo elemento
e
tie
ene la propieedad color d
de fondo con
n valor por
defecto transparent
e (trasnparrent), por lo que muchaas veces se piensa que no existe un
n color de
fondo porr defecto. En
n realidad s existe,
e
pero no se ve.
PROPIEDAD
D CSS background-color
Valor po
or defecto
transsparent
Se here
eda directam
mente?
No
Un co
olor RGB RG
GBA p.ej. rgb (2
255, 0, 0)
Un co
olor hexadecim
mal p.ej. #FF0
0000
Valores
posibles
propiedaad
para
esta
Un co
olor HSL HSLLA p.ej. hsl(0, 100%, 50%)
Un co
olor designado
o con nombree (p.ej. red)
inherrit (el color se heredar del elemento pad
dre)
Ejemplos aprenderaaprogramar.ccom
background-ccolor:#ffff00
0;}
h1 {b
.desttacado {backkground-colo
or: red;}
e hecho, yaa la hemos utilizado para poner

La propieedad backgrround-color es bastantee simple. De
ejemplos bsicos sob
bre selectorees css y otras cuestioness a lo largo del curso, por lo que no
o vamos a
extendern
nos en ella.
Un aspectto interesantte de esta propiedad es que en ocassiones puedee servirnos p
para visualizaar las cajas
que confo
orman una pgina web
b. Por ejemplo consideremos los elementos
e
h
h1 y h2 que
e tenemos
definidos en el cdigo
o HTML que estamos
e
usando para el curso:
<<body>
<
<div>
<
<h1>Portal
weeb aprenderap
programar.com</h1>
<
<h2>Didctica
y divulgacin
n de la programacin</h2>
<
</div>
<
<br/>
mos estos esttilos:

Si aplicam
/* Curso CSS
body {background-color: yellow;}
h1{backgrround-color: blue;}
b
h2{backgrround-color: red;}
om, 2006-2029
Vemos con claridad cules son las cajas que intervienen. Si quisiramos ver la caja div que envuelve a
los ttulos h1 y h2 bastara con aadir div {background-color: pink;} con lo que veramos algo as:
Al visualizar las cajas podemos entender mejor qu es lo que est ocurriendo en una pgina web. No
siempre ser necesario, de hecho cuando tengamos un poco de experiencia prcticamente las iremos
visualizando mentalmente sin necesidad de aplicar un color de fondo, o usaremos una herramienta de
anlisis para estudiarlas, pero al comenzar a trabajar con CSS nos podr servir de ayuda en algunas
ocasiones.
Si analizamos la imagen y el resultado obtenido podemos ver algunas cosas curiosas:
a) A pesar de que en el cdigo no tenemos ningn elemento que separe el div del body, el div
aparece separado del body tanto por arriba como por la izquierda como por la derecha. Lo
comprobamos porque se ve el fondo amarillo. Por qu existe esa separacin?
b) El h1 est perfectamente ajustado al div: no existe separacin alguna ni por arriba ni por la
izquierda ni por la derecha. El borde azul est perfectamente alineado con el borde rosado. En
cambio, hacia abajo el h1 est separado del h2, si no existiera esa separacin no se vera el
fondo rosado. Sin embargo en el cdigo no hemos especificado ningn elemento que d lugar a
esa separacin entre h1 y h2. Por qu aparece esta separacin?
Aparentemente la nica divisin normal entre elementos vendra dada por el <br/> que est debajo
del div, y dado que el br es un elemento separador sera lgico que creara un espacio entre la caja del
div y la siguiente caja dentro del documento HTML.
La razn para esos espacios que apreciamos se debe a los estilos por defecto que introduce el
navegador para los elementos div, h1 y h2. Hablaremos de ello ms adelante, de momento nuestro
objetivo ha sido nicamente conocer esta propiedad y ver cmo nos puede ayudar a conocer el modelo
de cajas CSS y el funcionamiento del navegador. Ms adelante hablaremos de por qu aparecen esas
separaciones entre elementos y de cmo podemos modificar o anular esos estilos que por defecto
introducen los navegadores.
Recordar que se puede aadir un grado de transparencia a un color de fondo definiendo el color con
notacin rgba hsla como hemos explicado en apartados anteriores del curso.
EJERCICIO
Crea un documento HTML donde la ventana del navegador est dividida en 6 partes, cada una con su
borde. En cada divisin pon como color de fondo lo siguiente:
a) Divisin 1: un color expresado con notacin RGB.
b) Divisin 2: un color expresado con notacin RGBA.
c) Divisin 3: un color expresado con notacin hexadecimal.
d) Divisin 3: un color expresado con notacin HSL.
e) Divisin 4: un color expresado con notacin HSLA.
f) Divisin 5: un color designado con un nombre.
En cada divisin incluye un texto con la notacin y color empleado. Por ejemplo <<Notacin RGB, color
218, 165, 32>>. Para comprobar si tus respuestas son correctas puedes consultar en los foros

Versiones CSS.
C Algo de hisstoria y perspecctiva.
VERSIONEES CSS
Comprobaars que a lo
o largo del curso no hem
mos dedicado
o apenas unaas palabras a hablar de cules
c
son
las versiones de CSS. El motivo paara ello es qu
ue con este curso
c
preten
ndemos transmitir ms laa lgica de
CSS y sus fundamento
os que las esspecificidadees concretas que tiene caada versin. No obstante
e, haremos
ahora algu
unas reflexio
ones y comentarios sobree las versiones CSS.
EL WORLD
D WIDE WEB
B CONSORTIUM O W3C
CSS es un lenguaje cu
uya definicin
n ha sido creeada por el World
W
Wide Web Consorrtium, cuyass siglas son
W3C. Se trata
t
de un consorcio
c
internacional que
q produce especificacio
ones, recomendaciones, manuales
y herramientas en reelacin al deesarrollo de internet. El W3C es un organismo que cuenta entre sus
principalees promotorres al MIT (Massachuss
(
sets Institute
e of Techno
ology, USA), el ERCIM (European
Research Consortium
m for Informatics and Mathematics,
M
, participado
o por numeerosos pasess), la Keio
Universityy (Japn) y laa Beihang Un
niversity (China).
Uno de lo
os objetivoss principales del W3C ess generar esstndares: documentos
d
donde se definen
d
las
sintaxis de lenguajes y protocoloss que intervieenen en el desarrollo
d
dee internet. El objetivo es promover
que las empresas,
e
instituciones y personas que
q participan o trabajaan en desarrollos web utilicen
u
un
mismo lenguaje y se pongan de acuerdo a laa hora de ge
enerar softw
ware y produ
uctos relacionados con
d
quee la propied
dad para daar color de fondo es background-ccolor y no
internet. Por qu decimos
back_colo
or bcol? Po
orque la forrma de nombrar esta prropiedad ha sido definid
da por el W3
3C de esta
manera y todas las em
mpresas, insttituciones y personas
p
lo han
h aceptado
o.
No siemp
pre lo que propone
p
el W3C
W es aceeptado. El W3C
W emite propuestas,
p
no leyes de
e obligado
cumplimieento porquee no tiene caapacidad leggal para ello
o. Hay otras instituciones o grandes empresas
que tamb
bin hacen propuestas
p
o tienen criterios propio
os, y en ocassiones esas propuestas o criterios
alternativvos hacen que
q
haya distintos
d
grupos de trrabajo y distintos estndares o forma de
funcionam
miento del so
oftware.
Por ltimo
o, hay que teener en cuen
nta que el W3C
W est form
mado por un
n equipo de personas que tambin
cometen errores y qu
ue lo que dice el W3C no
n siempre tiene
t
por qu ser lo mejo
or ni lo ms usado. No
obstante, hoy da el W3C
W es la principal institu
ucin de refe
erencia a la hora
h
de crearr y difundir estndares
e
relacionad
dos con los desarrollos
d
w entre elllos el CSS.
web,
LAS VERSIONES DE CSSS

El W3C trabaja continuamente paara mejorar el
e lenguaje CSS,
C corrigien
ndo errores e incorporando nuevas
funcionaliidades. Antees de llegar a una especcificacin o recomendac
r
cin oficial se trabajan numerosos
n
borradorees que son sometidos a revisin y co
orreccin. Cu
uando se alcaanza un relativo grado de
d acuerdo
entre los miembros del W3C se lib
bera lo que se
s denominaa una recomeendacin ofiicial de CSS versin a
modo de propuesta para su uso y aplicacin por
p todas las empresas, in
nstituciones y personas.
om, 2006-2029
Versiones CSS. Algo de historia y perspectiva.
Las versiones de CSS a lo largo de la historia han sido*:

CSS 1: publicada en 1996.
CSS 2.1: publicada en 2004.
CSS 4: se estima que pueda ser especificacin oficial en 2019.
*Las fechas indicadas son slo orientativas, la realidad es que una version no aparece un da, sino que
tiene un largo proceso de desarrollo que a veces dura aos. Con CSS 3 se introdujo una fuerte
modularizacin o divisin por apartados de CSS, de modo que algunos mdulos se encontraban en fase
de borrador mientras otros se convertan en especificacin oficial.
A la pregunta de qu versin usar? damos la siguiente respuesta: la que sea de ms amplia difusin en
el momento en que ests haciendo un desarrollo web. Ten en cuenta que CSS en general va
manteniendo su sintaxis y lgica con las diferentes versiones, y que en general una nueva versin
mantiene las caractersticas de las anteriores y adems introduce nuevas posibilidades. Por tanto tus
conocimientos de CSS te seguirn valiendo aunque aparezcan nuevas versiones. Por ejemplo, algunas
propiedades que aparecieron con CSS 1, entre ellas background-color, siguen usndose en CSS 3 y CSS
4. Otras propiedades aparecieron con CSS 2 2.1, otras han aparecido con CSS 3 y otras con CSS 4.
Por otro lado, hay que tener en cuenta que seguir con exactitud una versin no significa que nuestra
web vaya a funcionar perfectamente, debido a que no todos los navegadores reconocen todas las
propiedades o sintaxis que se definen en una versin. Tambin puede suceder que un navegador s
reconozca la sintaxis pero no ofrezca el mismo resultado que otro, lo cual da lugar a problemas en la
visualizacin de pginas web.
Conseguir buenos resultados con CSS pasa por estar al da de la especificacin del W3C pero tambin
por seguir las novedades de la web, de los navegadores y siendo prcticos, por hacer muchas pruebas y
comprobaciones con distintos navegadores o herramientas especficas para este fin.
EJERCICIO
Busca informacin en internet e indica para cada una de las siguientes propiedades CSS en qu versin
de CSS fueron introducidas y si siguen estando vigentes en la actual versin de CSS: a) clip , b) fontweight c) overflow d) animation. Para comprobar si tus respuestas son correctas puedes consultar en
los foros aprenderaprogramar.com.

Documentaacin oficial CSSS, W3C Schoolss y W3C validattor
SERVICIOS DEL W3C

omentado qu
ue el estndar CSS es deefinido por el
e consorcio internacionaal W3C. El W3C
W ofrece
Hemos co
algunos servicios
s
de inters a traavs de inteernet, como la posibilidaad de consultar la docum
mentacin
oficial relaacionada con
n CSS, una web
w divulgativa y con ejemplos sobree la aplicacin
n de CSS en la prctica
y la validaacin (comprrobacin de cumplimientto del estnd
dar) CSS de pginas
p
web..
DOCUMENTACIN OFFICIAL CSS

o
del consorcio W3C
C es http://w
www.w3.orgg/. A travs de esta web podemos acceder a
La web oficial
distintos contenidos del trabajo de la W3C, que no solo
o tratan sob
bre CSS, sino
o en generall sobre las
das con el desarrollo
d
weeb como HTM
ML, CSS, Javvascript, grfficos, audio y video en
tecnologaas relacionad
entornos web, protoccolos, etc.
Desde la pgina princcipal de W3C
C podemos navegar
n
hastta llegar a laa pgina oficial CSS (cuyaa URL ser
similar a esta:
e
http://w
www.w3.orgg/Style/CSS/) donde podremos encon
ntrar numerosa informacin sobre
CSS (en ingls). Denttro de esta informacin estn dispo
onibles las especificacio
e
ones oficialess CSS, por
e http://ww
ww.w3.org/TTR/selectors// podemos consultar
c
la especificaci
e
n oficial de selectores
ejemplo en
para CSS. El principal problema dee recurrir a la documentacin oficial para el apreendizaje es que
q resulta
demasiad
do extensa y demasiado tcnica.
t
Tam
mbin existen
n numerososs documento
os tcnicos, algunos
a
de
los cualees son reccomendaciones, otros pre-recomendaciones (se denom
minan cand
didatos a
recomend
dacin) y otros borradores. Este exceso de info
ormacin y su forma dee presentacin resulta
poco til de cara a ad
dquirir una formacin
f
prrctica y bsica sobre CSSS. No obstante, convien
ne conocer
ncia porque puede
p
ser neecesaria su consulta en algn
a
momen
nto.
su existen
RECURSO
OS DIDCTICO
OS SOBRE CSSS
Indicado ya que la documentaci
d
er demasiado rida o exxtensa, qu
recursos
n oficial CSSS puede se
existen qu
ue sean ms didcticos y educativos?? Existen num
merosas alteernativas.
En primeer lugar sealaremos la pgina web http://ww
ww.w3schools.com/. Estta plataform
ma alberga
tutorialess y documen
ntacin sobrre numerosaas tecnologas relacionaadas con el desarrollo web
w como
HTML, CSSS, Javascriptt, AJAX, PHP
P, SQL y muchas otras. Contrariame
C
ente a lo quee pueda parrecer, esta
web pertenece a unaa empresa privada
p
y no
o est en ab
bsoluto relaccionada con el consorcio
o W3C. La
similitud del
d nombre de dominio resulta, cuando menos, confusa. Taampoco hay indicacioness explcitas
en la plattaforma de la no-relaci
n con el W3C.
W
Los resu
ultados de w3schools
w
su
uelen aparecer en los
primeros lugares cuan
ndo se hacen
n consultas en
e buscadore
es, de ah que muchos ussuarios o pro
ofesionales
relacionad
dos con inteernet piensen
n que w3sch
hools es un servicio
s
de W3C,
W
cuando
o la realidad es que no
es as. Deebido a esto
os hechos y a otros aspeectos negativos que se pueden achacar a w3scchools han
surgido voces
v
crticaas que recomiendan no
n usar estta web, en
ntre los que podemoss destacar
http://ww
ww.w3fools.ccom/.
om, 2006-2029
Documentacin oficial CSS, W3C Schools y W3C validator
Nosotros no recomendamos el uso de w3schools, pero tampoco lo desaconsejamos. Simplemente

pensamos que debe conocerse qu es y cules son sus ventajas e inconvenientes. Como ventajas
sealaremos estas:
-
Se trata de una plataforma web con una buena estructuracin de los contenidos y una buena
presentacin.
Tiene un sistema de contenidos, ejemplos y pruebas basadas en la edicin de cdigo on-line
que en general resultan bastante didcticos y facilitan el aprendizaje.
Es accesible gratuitamente.
Como inconvenientes sealeremos los siguientes:

-
Parecen aprovecharse de la confusin y similitud de nombre con el W3C, aparentando ofrecer

informacin oficial cuando no la es.
Ofrecen cursos y certificados previo pago que no estn avalados por organismos o empresas
con garantas suficientes. Su publicidad puede resultar engaosa.
En general se trata de webs bastante cargadas de publicidad que se entremezcla con los
contenidos, llegando a resultar molesta.
Parte de la informacin que ofrece esta web puede ser no correcta o estar no actualizada.
La mayor parte de los desarrolladores web o diseadores web han utilizado en algn momento
w3schools. Nosotros simplemente te aconsejamos que si la usas, conozcas qu es, sus ventajas e
inconvenientes.
A continuacin vamos a ofrecer un listado con recursos didcticos sobre CSS:
Recurso
URL
Tutorial CSS de aprenderaprogramar.com
http://www.aprenderaprogramar.com/index.php?option=com_
content&view=category&id=75&Itemid=203
Documentacin CSS de Mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS
Wiki de la W3C para CSS
http://www.w3.org/wiki/CSS
Documentacin CSS de webplatform
http://docs.webplatform.org/wiki/css
Documentacin CSS de sitepoint
http://reference.sitepoint.com/css
Documentacin CSS de w3schools
http://www.w3schools.com/css/
Nuestra recomendacin es que para el aprendizaje inicial de CSS uses un solo curso y trates de seguirlo
de forma completa y hasta el final, consultando otras fuentes slo para cuestiones puntuales. Si tratas
de adquirir una formacin bsica recurriendo a varias fuentes de informacin al mismo tiempo es
posible que acabes perdiendo el tiempo y hacindote un lo. Una vez tengas las bases de CSS y algo de
experiencia, ser ms fcil moverte consultando la multitud de recursos e informacin que existen en
libros, revistas y pginas web.
VALIDACIN CSS CON W3C VALIDATOR

Hay un servicio de la W3C que puede resultar de relativo inters: el W3C CSS validator o validador CSS
de la W3C. Se accede a travs de w3.org escogiendo la opcin validators: CSS. Tambin se puede
acceder directamente en la URL http://jigsaw.w3.org/css-validator/
Una vez en la pgina con el formulario de entrada, basta introducir una URL para que el contenido de
esa pgina web sea sometido a anlisis y aparezcan los resultados del mismo. Si el CSS de la web
cumple con la especificacin oficial aparece un mensaje informativo y se nos ofrece la posibilidad de
insertar los logos de validacin W3C en nuestra pgina web.
En caso de que la pgina web no cumpla la especificacin, se nos indican cuntas faltas se han
encontrado y cules son. Las faltas se dividen en faltas menores (warnings o advertencias) y faltas
mayores o errores.
El servicio de validacin CSS puede ser una herramienta til para personas que estn aprendiendo y
para profesionales, al permitirles identificar en qu partes de su cdigo no estn cumpliendo con la
especificacin oficial. No obstante, te recomendamos que no pierdas demasiado tiempo tratando de
que la pgina web que ests creando tenga cero errores por un motivo simple: no tener errores en el
validador no garantiza que tu web se vaya a visualizar correctamente. Muchas personas pierden horas
tratando de corregir el cdigo para pasar la validacin W3C cuando su web no tena ningn problema
de visualizacin. Entonces, para qu perder el tiempo en ello? S, siempre es bonito pasar
limpiamente un validador, la cuestin que debemos tener en mente es si merece la pena el tiempo que
vayamos a invertir.
A modo de curiosidad, piensa en algunas pginas web importantes que conozcas (por ejemplo de algn
diario, alguna televisin, alguna empresa importante) y psale el validador CSS de W3C. Encontrars
que muchas de ellas no superan la validacin, y sin embargo son webs de prestigio y con millones de
visitas. Si estas grandes webs no se preocupan de tener una validacin W3C perfecta merece la pena
obsesionarse con no tener errores de validacin CSS en nuestras pginas web? A modo de curiosidad te
diremos que en el momento de escribir este curso hemos pasado el validador CSS a facebook.com y
hemos obtenido como resultado 24 errores. En la web oficial del gobierno de Estados Unidos, 102
errores, y as podramos continuar una larga lista de webs importantes que no superan la validacin.
Pero repetimos: lo importante no es superar la validacin, lo importante es que la web funcione y se
vea correctamente.
Sobre los logos del W3C de validacin, su presencia en una pgina web no asegura que la pgina web
pase el validador, ya que se trata de simples imgenes que cualquiera podra insertar en su web. La
forma de saber si una web cumple la validacin es pasar su URL por el validador CSS de la W3C.
EJERCICIO
Crea un documento HTML que conste de los siguientes elementos: un ttulo h1 con el texto
Aprendizaje de la programacin. Una divisin div con id men que contenga: un ttulo h2 con el texto
Men y una lista de elementos no ordenados (ol) con los siguientes items: Programacin bsica,
Programacin intermedia y Programacin avanzada. Finalmente, una divisin div con id footer con el
texto Curso aprenderaprogramar.com. Establece diferentes valores de las propiedades color,
background-color y font-size para:
a) Los elementos h1
b) Los elementos h2
c) Los elementos ol y partes internas a este (elementos li de listas).
d) El elemento con id footer.
A continuacin utiliza el W3C validator y comprueba si no te indica ningn error, o qu errores o

warnings te indica y trata de identificar el por qu de ellos y corregirlos. Puedes comprobar si tus
respuestas son correctas consultando en los foros aprenderaprogramar.com.

Unidades de medida CSS. Relativas, abso

olutas o hbridaas.
UNIDADEES DE MEDID
DA
Cuando trabajamos
t
c CSS neccesitaremos especificar con frecuen
con
ncia anchuraa, altura, mrgenes o
tamao de
d distintos elementos
e
c
como
cajas contenedora
c
s de distinto
os tipos, imgenes, texto
o, etc. CSS
permite laa especificaccin de valores relacionados con el tamao de distintas maaneras para facilitar el
trabajo a los programadores y diseeadores weeb.
Las unidaades de med

dida CSS se dividen en dos
d grupos: unidades dee medida reelativas y un
nidades de
medida ab
bsolutas. Tam
mbin se hab
bla a veces de
d unidades hbridas.
Las unidades de medida relativas son aquellaas que determ
minan un tamao en fun
ncin de otro tamao.
Por ejemplo si indicamos que el ancho de un elemento como 50%, dicho porceentaje tiene que estar
referido al
a 50% de alggo de qu? En el caso de
d un ancho del 50% pueede estar refferido normaalmente al
50% del ancho
a
que teenga el conteenedor del elemento.
e
Laas unidades relativas
r
aluden a un ele
emento de
referenciaa. Veremos que
q existen distintos
d
elem
mentos que se toman co
omo referenccia.
Las unidades de medida absolutaas son aquelllas que dete
erminan el taamao de alggo de formaa concreta,
especficaa y medible. Por ejemplo
o si decimos que un tamaao de un diiv debe ser d
de 150 mm de
d alto, no
hay duda al respecto. El div tomar exactameente ese valo
or (aunque puede haber pequeas distorsiones
os una regla escolar
e
y lo m
medimos, el div tendr
en funcin del disposiitivo en que se visualice) y si cogemo
esa medid
da (aproximaadamente 15
50 mm).
Las unidades de mediida se aplican a numerossas propiedaades CSS de las que emp
pezaremos destacando
o de un elem
mento). La siintaxis a emplear es la
dos de ellas: width (aancho de un elemento) y height (alto
siguiente::
width: valorDe
ePropiedadU
Unidades;
selectorDeEElemento {w
height: valorD
DePropiedadUnidades;}
UNIDADEES DE MEDID
DA ABSOLUTA
AS
A continuacin indicamos las unid
dades de med
dida absoluttas disponibles en CSS:
Unidad
d
Smbo
olo
Ejem
mplo aprende
eraprogramaar.com
Pulgada
in
div {bacckground-colo
or:pink; width:: 7in;}
Centmettro
cm
div{backkground-colorr:pink; width: 20cm;}
Milmetro
mm
m
div{backkground-colorr:pink;
1000mm
m;}
om, 2006-2029
width:
Ob
bservacioness
1 pulgada son
n 25.4 mm
Unidades de medida CSS. Relativas, absolutas o hbridas.
Unidad
Smbolo
Ejemplo aprenderaprogramar.com
Observaciones
Punto
pt
div{background-color:pink; font-size: 24pt;}
1 punto equivale a 1/72 pulgadas

aprox. 0.35 mm
Pica
pc
div{background-color:pink; font-size: 2pc;}
1 pica equivale a 12 puntos o aprox.

4.23 mm
Pixel*
px
div{background-color:pink; font-size: 24px;}
Tantas veces los puntos visibles que

tenga la pantalla donde se visualice
la pgina web como se especifique.
*Puede considerarse una unidad
hbrida, ni absoluta ni relativa.
Prueba a aplicar estas reglas sobre el cdigo HTML de prueba que estamos usando en el curso.
Las unidades de medida absolutas en general podemos decir que se utilizan poco en desarrollos web,
excepto el pixel que es una unidad especial y, en menor medida, el punto. Pulgadas, milmetros, picas,
etc. tienen ms sentido en trabajos de impresin sobre papel. El pixel tiene aplicaciones diversas
mientras que la unidad pt se usa a veces para definir el tamao de letra (tamao de fuente).
El motivo para que las unidades absolutas se usen poco es que no permiten adaptarse al tamao de la
pantalla que utilice cada usuario. Hoy da, existen grandes pantallas (por ejemplo de 32 pulgadas de
unos 480 x 730 mm) pero tambin pequeas pantallas (por ejemplo smartphones con pantallas de 7
pulgadas de unos 90x170 mm de tamao). Si queremos mostrar un contenido y lo definimos en
unidades absolutas, por ejemplo con un ancho de 300 mm y un alto de 200 mm, cuando lo veamos en
un monitor grande nos parecer pequeo; por el contrario cuando lo veamos en un dispositivo
pequeo como una tablet nos aparecer cortado por ser excesivamente grande. Si en vez de unidades
absolutas indicamos una unidad relativa como 100%, el contenido se adaptar al ancho disponible para
cada dispositivo, lo cual resulta ventajoso. En realidad la gran variacin de tamao de los dispositivos
supone un problema que no es nada fcil de solventar, ni siquiera utilizando unidades de medida
relativas. Ser uno de los campos en que la experiencia y la prctica resulten fundamentales en el
trabajo con desarrollos web.
El pixel es una unidad de medida un tanto especial. Comprobaremos que se alude a esta medida como
una unidad relativa, absoluta o hbrida segn dnde consultemos. La realidad es que puede
considerrsela de cualquiera de estas tres maneras segn dnde centremos nuestra atencin. En
nuestra opinin es ms justo considerarla unidad relativa porque no tiene un valor absoluto y nico,
sino que presenta variaciones segn los dispositivos. No obstante, estas variaciones son relativamente
pequeas o moderadas, de ah que muchas veces se lo considere una unidad absoluta.
Una pantalla se divide en miles de pequeos puntos visibles denominados pixeles. Cuando distintos
grupos de pixeles toman distintos colores se forman las letras, imgenes o formas que podemos ver en
las pantallas. Por ejemplo si situamos pixeles negros uno junto a otro en horizontal sobre un fondo
blanco, se acaba formando una lnea negra horizontal. Si en vez de en horizontal cada pixel est
ligeramente desplazado hacia la derecha y ligeramente por encima del anterior se formar una lnea
negra inclinada. Por el mismo principio se forman letras, imgenes, figuras, etc.
Las pantallas suelen tener una resolucin expresada expresada en pixeles, por ejemplo 1280 x 800 px,
donde el primer valor indica el nmero de puntos horizontales y el segundo valor el nmero de puntos
verticales en que se divide la pantalla (que podemos ver como una cuadrcula de minsculos puntitos).
El tamao real del pixel considerado como un cuadradito muy pequeo puede variar entre
dispositivos, por ejemplo podremos encontrar dispositivos donde un pixel mida 0.20 mm y otros donde
mida 0.30 mm. Las diferencias entre dispositivos pueden ser pequeas cuando hablamos de tamaos
de pantalla similares, pero se hacen apreciables para tamaos de pantalla muy diferentes.
El anlisis terico de las resoluciones de los dispositivos y unidades de medida puede ser extenso, por lo
que nosotros vamos a optar por considerar al pixel, desde el punto de vista prctico, una unidad de
medida hbrida. Absoluta en cuanto a que define unas dimensiones ms o menos exactas para
dispositivos similares (como monitores de ordenadores), relativa en cuanto a que sus dimensiones
varan cuando cambiamos el tipo de dispositivo (por ejemplo en un smartphone el pixel tendr distinta
dimensin que en un monitor de 32). Esta definicin puede ser poco exacta desde el punto de vista
terico, pero a efectos prcticos nos va a resultar suficiente para trabajar en desarrollos web.
Consideraremos el pixel como un pequeo puntito visible de una pantalla.
El pixel es una unidad de medida no tan rgida como pueda ser el mm y no tan flexible como pueda ser
el % u otras unidades relativas. Permite fijar tamaos de forma relativamente precisa, pero a su vez con
un cierto grado de adaptacin al dispositivo en que se visualiza una web. Se usa con bastante frecuencia
en distintos aspectos del diseo como iremos comprobando a lo largo del curso.
UNIDADES DE MEDIDA RELATIVAS

A continuacin indicamos las unidades de medida relativas disponibles en CSS:
Unidad
Smbolo
Porcentaje
Relativa al
tamao de letra
Relativo a la x
minscula
Pixel*
em
ex
px
Ejemplo
#menu1 {width: 50%;}
Porcentaje relativo al elemento contenedor.
#menu1 {font-size: 2.65em;}
Tantas veces el tamao que sea de aplicacin

como se indique. Por ejemplo si el tamao de
letra de aplicacin es 12 pixeles, 1 em son
12px, 2 em son 24 px, 3 em son 36 px, etc.
#menu1 {font-size: 2.65ex;}
Tantas veces la altura de la letra x minscula

como se especifique. Por ejemplo si la x
minscula que se debera mostrar mide 10mm,
1 ex son 10 mm, 1.5ex son 15mm, 2ex son
20mm, etc.
#menu1 {font-size: 24px;}
Tantas veces los puntos visibles que tenga la

pantalla donde se visualice la pgina web como
se especifique.
*Puede considerarse una unidad hbrida, ni
absoluta ni relativa.
QU UNIDAD USAR?
Las unidades estrictamente absolutas como el mm son poco habituales en los diseos web y podemos
decir que prcticamente no se usan.
Son de uso muy habitual unidades relativas como el % y el em porque permiten la adaptacin flexible a
los distintos tamaos de pantalla de los dispositivos. El % nos permite establecer proporciones
adecuadas en relacin a la pantalla y el em en relacin al tamao de texto que se est usando.
Por ltimo el pixel es tambin muy usado pues permite que determinados elementos de la web se
visualicen con tamaos bastante precisos, evitando que la web tenga cambios drsticos de aspecto
cuando se cambie de dispositivo.
Usa preferentemente %, em y px en aquellas hojas de estilo que tengas que crear. Usa otras unidades
cuando razonadamente resulten necesarias.
EJERCICIO
Los navegadores aplican un tamao por defecto a los ttulos h1 a h6, aunque estos tamaos no son
siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que ests
empleando, divide la pgina web en una cuadrcula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y
como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el
tamao. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo
se vea del mismo tamao y modo, pero sin embargo la forma de definir el estilo ser diferente en cada
caso. Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
Orientacin: h1 suele ser 24px 2em en la mayora de los casos, pero tendrs que comprobarlo en el
navegador que ests empleando.
Ttulo
Tamao px
Tamao em
Tamao pt
Tamao %
h1
h2
h3
h4
h5
h6

Propiedade
es CSS width y height.
h
Ejemplo
os y ejercicios.
WIDTH Y HEIGHT
L usaremo
os con frecue
encia para
Dos propiedades bsicas en CSS son width (ancho) y height (alto). Las
o de mucchos elemen
ntos en nue
estro diseo
o CSS. Estaas propiedad
des sern
determinaar el tama
designadaas con algun
na de las uniidades de medida
m
que hemos
h
estud
diado previamente, usan
ndo la que
resulte ms adecuadaa en funcin del elemento al que se vayan
v
a aplicar.
PROPIEDA
ADES CSS wid
dth y height
Valor po
or defecto
auto (en este casso, es determ

minado por eel navegador)
Aplicable a
Elem
mentos tipo block
b
y elementos insertados en unaa posicin
que son reemplaazados por un
u objeto (entre ellos im
mg, input,
textaarea, select, object)
o
Se here
eda directam
mente?
No
Una unidad
u
de medida absolutaa como in, cm,, mm, pt, pcc
Valores
posibles
propiedaad
para
u
de medida relativa como
c
%, em ex
esta Una unidad
Una unidad
u
de medida hbrida como
c
px (pixel)
inherrit (indica que se hereda del elemento paadre)
html {height: 100

0%;}
Ejemplos aprenderaaprogramar.ccom
bodyy {background-color: yellow; width: 9

900px;}
.logo
o-module {wiidth: 16em;}
mos que la sin

ntaxis a emp
plear es la sigguiente:
Recordem
selectorDeEElemento {w
width: valorDe
ePropiedadU
Unidades;
height: valorD
DePropiedadUnidades;}
h
no son
n aplicables a cualquier elemento.
Un aspectto importantte es que lass propiedadees width y height
Por ejemplo elementtos de tipo inline como <span> </span> no admiten estas propie
edades. Si
intentamo
os aplicar width
w
o heigght a un eleemento que no lo admiite, el naveggador simple
emente lo
ignorar.
Las propieedades widtth y height no
n siempre se
s especifican. Se puede especificar una de ellass, ambas o
ninguna. Para aquellaa propiedad que no se especifica,
e
el
e elemento tomar com
mo anchura y altura el
ncia le sean de
d aplicacin
n.
valor que por defecto o por heren
om, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.
No debe existir espacio entre el valor establecido y las unidades cuando escribamos el cdigo. Por
ejemplo si establecemos #menu1 {width: 80%;} no debe existir espacio entre 80 y %. Si establecemos
#menu1 {width: 600px;} no debe existir espacio entre 600 y px. En el caso de unidades que se expresen
con decimales, la separacin decimal debe indicarse con un punto en lugar de con una coma. Por
ejemplo #menu1 {font-size: 12.75pt;} es correcto pero #menu1 {font-size: 12,75pt;} es incorrecto y no
ser interpretado por el navegador.
En el caso de decimales inferiores a uno, se admite omitir el 0 previo al punto decimal o el 0 de
terminacin. Por ejemplo sera tan vlido escribir #margen1 {widht: 0.90%;} como #margen1 {widht:
.9%;} como #margen1 {widht: .90%;}
En el caso de valores cero (nulo), no es necesario indicar unidades de medida. Por ejemplo
#soundCode1 {widht: 0px;} es igual de vlido que #soundCode1 {widht: 0;}
EJEMPLO PRCTICO
Define los siguientes estilos para el documento HTML que estamos usando como base de ejemplo para
el curso y visualiza el resultado:
html{background-color: pink;}
body {background-color: yellow; width: 800px;}
h1{background-color: blue; width: 50%;}
h2{background-color: red; width: 8em}
Con los conocimientos que hemos ido adquiriendo a lo largo del curso ya hemos de ser capaces de
interpretar qu es lo que visualizamos. Vamos a hacerlo. El fondo se muestra rosa porque hemos
definido que el background-color del elemento html sea rosado. En amarillo vemos el elemento body.
El ancho del elemento body es de 800 px. El elemento body no tiene el mismo ancho que el elemento
html por dos motivos: por un lado, la pantalla donde se ha visualizado la web para capturar la imagen
que hemos mostrado tiene una resolucin de 1024 x 768 pixeles. Como nosotros hemos definido que el
elemento body tendr 800 px, el resto que falta hasta los 1024 px disponibles se ven con el color de
fondo del elemento html. Otro motivo por el que el elemento body no tiene el mismo ancho que el
elemento html es que el navegador introduce unos mrgenes por defecto (ya veremos ms adelante
cmo se pueden anular). Prueba a cambiar el width de body y ponle distintos valores como 200 px y
2400 px. Para valores de ancho que exceden el tamao mximo en pixeles de anchura de la pantalla el
navegador incorporar automticamente unas barras de desplazamiento o scrolls.
El elemento h1 con el texto Portal web aprenderaprogramar.com tiene un ancho del 50%. Pero el
50% de qu? Pues el 50% de su elemento contenedor (elemento dentro del cual est o elemento
padre). Como su elemento contenedor es body y ste tiene 800 px de ancho, el ancho de h1 es la mitad
de este valor, es decir, 400 px.
Con el elemento h1 comprobamos una cosa: que el texto se muestra en dos lneas y que el tamao del
texto de la segunda lnea excede en anchura al tamao de su elemento contenedor, el h1 con anchura
de 400 px. Por tanto ya sabemos que el texto ocupa algo ms de 400 px y por ello se sale del espacio
azul y ocupa parte del espacio amarillo. No sera ms lgico que el texto se cortara cuando llegara al
lmite de su contenedor? O que siguiera en la siguiente lnea en vez de salirse hacia la derecha? Quizs,
pero el comportamiento que observamos est determinado por el navegador que estamos usando. Se
est aplicando la siguiente regla: si el texto excede el ancho de su elemento contenedor, se crean
nuevas lneas aumentando la altura (height) automticamente siempre que existan espacios dentro del
texto que permitan introducir el salto de lnea. Si no existe espacio para introducir ese salto de lnea, el
texto se expande hacia la derecha sobrepasando el tamao de su contenedor.
El elemento h2 tiene fijado un width de 8 em. El em es una medida relativa al tamao de letra que se
est usando. A qu tamao de letra en este caso? Pues al tamao de letra del h2, que como no lo
hemos especificado, lo determina por defecto el navegador. El tamao por defecto puede variar entre
navegadores, pero de forma aproximada podemos decir que sern similares a estos: 16px (1em o
100%) como tamao normal de fuente, h1 de tamao 2.25em (36px) y h2 de 1.5em (24px). En este caso
hemos comprobado que el navegador que usamos aplica 24px de tamao al h2, entonces 8em se
interpreta como 8 veces el tamao de fuente del elemento, resultando 8x24 = 192 pixeles.
Para verificar que el navegador maneja la propiedad height automticamente (a falta de especificacin
por nuestra parte su valor es auto) y lo que ocurre cuando el texto no se puede ajustar al espacio
disponible fjate en la siguiente imagen que refleja lo que ocurre al escribir un texto ms largo:
Como vemos el texto se sale del elemento contenedor h1, superponindose sobre el elemento padre,
body, y al tener ms ancho an se expande hasta ocupar espacio del elemento padre del padre o
abuelo, el elemento html. Si el texto se alargara an ms el navegador introducira un scroll para
permitir que se pueda leer.
Para entender mejor la diferencia entre que width y height estn especificados con un valor o que no lo
estn y mantengan el valor por defecto auto fjate en la siguiente imagen. Hemos escrito un texto
muy largo en el h1 y en el lado izquierdo vemos lo que ocurre si definimos h1{background-color: blue;
width: 50%;} mientras que en el lado derecho vemos el resultado para el cdigo h1{background-color:
blue; width: 50%; height: 150px;}
En el lado izquierdo vemos cmo el navegador adapta automticamente el valor height del h1 para que
el texto no se salga de l. Al no estar especificada la propiedad height tiene valor auto. En el lado
derecho, al tener restringida la altura del h1 a 150 pixeles, cuando el texto no cabe en su contenedor
contina expandindose hacia abajo.
Lo que nos interesa de todo esto es ser capaces de interpretar lo que ocurre cuando se obtiene una
visualizacin errnea o distorsionada debido al cdigo CSS. Hay que tener en cuenta, sin embargo, que
los problemas de visualizacin en pginas web pueden tener otros orgenes distintos del CSS como el
cdigo de programacin, configuraciones de servidor o navegador, etc.
EJERCICIO RESUELTO
Crea una hoja de estilos css de forma tal que el elemento body tenga el 100% del ancho de la pantalla,
los elementos h1 un 80% y los elementos h2 un 60%. Escribe un CSS para obtener la misma
visualizacin pero expresando los valores en pixeles.
SOLUCIN
A continuacin proponemos una solucin. Si tu respuesta no coincide con lo que indicamos o tienes
dudas, puedes consultar en los foros aprenderaprogramar.com.
La definicin de estilos en % sera la siguiente. Hemos aadido colores de fondo para que se visualice
mejor:
html {background-color: pink; }
body {background-color: yellow; width: 100%;}
h1 {background-color: blue; width: 80%;}
h2 {background-color: red; width: 60%;}
Comprueba el resultado al aplicar estos estilos al cdigo HTML base que estamos usando para el curso.
Si quisiramos realizar una definicin equivalente en pixeles, tendramos que consultar la resolucin en
pixeles de la pantalla con que estamos trabajando (en Windows se puede ver yendo al botn Inicio,
luego Panel de Control y luego Ajustar resolucin de pantalla)
Supongamos que estamos en un monitor de 1280 x 800 pixeles. El 100 % son los 1280 pixeles, el 80 %
son 1280 x (80/100) = 1024 pixeles y el 60 % son 1280 x (60/100) = 768 pixeles. En este caso tendramos
que escribir:
h1 {background-color: blue; width: 1024px;}
h2 {background-color: red; width: 768px;}
Supongamos que estamos en un monitor de 1366 x 768 pixeles. En este caso el 100 % son los 1366
pixeles, el 80 % 1092.8 pixeles y el 60 % son 819.60 pixeles. El cdigo a escribir sera:
h1 {background-color: blue; width: 1092.8px;}
h2 {background-color: red; width: 819.6px;}
Para otras resoluciones de pantalla tendramos que hacer los mismos clculos.
Fjate que usando tanto por ciento la representacin o aspecto ser igual en todos los dispositivos o
pantallas, mientras que usando pixeles el aspecto depende de la pantalla en que estemos viendo la
web. De ah que con frecuencia se aluda al pixel como una medida absoluta o hbrida.

Bordes CSS.. Propiedad border-style.
CAJAS Y MODELO
M
DE BORDES
En apartaados anteriores del curso
o hemos diccho que CSS se basa en el modelo d
de cajas. Cad
da divisin
estructuraal en la pgina web, cad
da etiqueta o tag, gene
era una caja que puede ser un elem
mento tipo
block (a todo
t
lo anch
ho) o un eleemento inlin
ne (se posiciona al lado de otros en
n una lnea). Vamos a
bsicas relacionadas con
estudiar cmo
c
aplicarr bordes a lass cajas y las propiedades
p
n los bordes.
BORDE NICO O BOR

RDES POR PA
ARTES
e cuenta ess que una caaja podremos verla como
o un elemen
nto con un
Lo primerro que debemos tener en
borde o bien
b
como un
n elemento con distintos bordes (haasta un total de cuatro b
bordes: superior o top,
derecho o right, abajo
o o bottom, izquierdo
i
o left).
d
un borde pensaremos como en
e la imagen de la izquieerda: todo el elemento
Si slo neecesitamos definir
lo consideeraremos rod
deado por un solo bordee. Cuando ne
ecesitemos definir de forma diferenciiada uno o
varios de los cuatro bordes posibles, pensarremos siguie
endo el mod
delo mostrad
do en la imaagen de la
derecha. Si
S prestas atencin a esta imagen, veers que cuando estn esstablecidos d
de distintos colores
c
los
cuatro bo
ordes, en la zona de unin entre bo
ordes en las esquinas see produce un choque entre dos
bordes. El
E navegadorr divide la esquina comn entre loss dos colorees y esto en cierta mane
era puede
generar un
u efecto sim
milar a 3D (triidimensional). En el caso
o de que slo
o se establecciera un bord
de como el
borde sup
perior (bordeer-top), stee borde se mostrara
m
com
mo una lneaa rectangularr de cierto grosor,
g
con
las esquin
nas terminan
ndo en ngulos rectos en lugar de en bisel.
Un bordee se define utilizando propiedades
p
de bordes para elementos CSS, dee entre las cuales las
fundamen
ntales son:
a) Ell tipo de borrde (border-style) mediaante el cual definimos
d
si es una lneaa normal, un
n borde de
puntos, un bo
orde de pequ
ueas lneas, etc.
b
(bordeer-width), mediante el cu
ual definimos el grosor del borde.
b) Ell grosor del borde
c) Ell color del bo
orde (borderr-color), med
dianTe el cuaal definimos el
e color del b
borde.
om, 2006-2029
Bordes CSS. Propiedad border-style.
PROPIEDAD CSS border-style

Funcin de la propiedad
Define el tipo de borde que se aplica a un elemento.
Valor por defecto
none (no existe borde)
Aplicable a
Todos los elementos
Se hereda
directamente?
No
none (no existe borde; no se ocultan otros bordes adyacentes)
hidden (el borde existe pero est oculto y no es visible; oculta bordes contiguos)
dotted (borde a base de puntos redondeados)
dashed (borde a base de trazos o segmentos rectangulares)
solid (borde como una lnea normal formando un rectngulo)
Valores posibles
esta propiedad
para
double (borde en forma de doble lnea, exterior e interior)

groove (efecto 3D con foco de luz arriba a la izquierda. En algunos colores y
grosores de lnea la visualizacin no es buena)
ridge (efecto 3D con foco de luz abajo a la derecha. En algunos colores y
inset (efecto 3D de ventana con elemento al fondo. En algunos colores y
outset (efecto 3D de elevacin. En algunos colores y grosores de lnea la
visualizacin no es buena)
img {border-style: solid;}

Ejemplos
aprenderaprogramar.com .imgVentana {border-style: inset; border-width:10px;}
La propiedad border-style se puede aplicar a todo el borde del elemento, o bien a cualquiera de los
cuatro bordes en que se puede subdividir un borde. De esta manera se generan cuatro propiedades
cuyo funcionamiento es anlogo al de border-style, pero que permiten dar un tratamiento diferenciado
a cada uno de los bordes: border-top-style, border-right-style, border-bottom-style y border-left-style.
La sintaxis a utilizar es esta:
selectorDeElemento {border-top-style: valor1; border-right-style: valor2;
border-bottom-style: valor3; border-left-style: valor4; }
No hay por qu especificar los cuatro bordes. Podemos especificar slo uno de ellos, o dos, o tres, hasta
el mximo de 4, en el orden que queramos. Por ejemplo podramos usar img {border-top-style: solid; }
con lo cual nicamente aparecera para los elementos img un borde: el borde superior. Hemos dicho
que hay 3 propiedades bsicas para definir un borde, relativas al tipo (style), grosor (width) y color
(color). Si dejamos sin definir el border-style el resultado ser que no se visualizar borde, ni siquiera
aunque est definido un grosor y color, ya que por defecto el border-style tiene valor none, lo que
significa que no se visualizar borde alguno.
Qu ocurrira si en el cdigo CSS incluimos una declaracin como img {border-style: solid; border-topstyle: dashed; } ? Podemos ver el resultado en la siguiente imagen:
En primer lugar, se establece el borde para todos los elementos imagen como un borde slido (lnea
normal). Por qu se ve un borde si no hemos establecido un grosor (width) ni un color (color)?
Tenemos que tratar de razonar sobre el por qu de las cosas que observamos. Ser buenos
programadores o diseadores CSS implica razonar y entender, no slo conocer de memoria
propiedades o sintaxis del lenguaje. Si sin haber establecido un grosor se ve una lnea de determinado
grosor es porque se est aplicando un valor de defecto o valor inicial para el grosor. Igualmente si el
borde se ve de color azul sin haber establecido un color es porque se est aplicando un valor de defecto
o valor inicial para el color. Estos valores de defecto sern los definidos por el estndar CSS o por el
navegador que estemos utilizando. Si no deseamos que se apliquen estos valores por defecto debemos
especificar unos valores para dichas propiedades.
Otra cuestin que podemos razonar con esta imagen es: Por qu aparece el borde superior (top) en
forma de segmentos y el resto de bordes (right, bottom, left) en forma de lnea normal? Si leemos el
cdigo empleado veremos que en primer lugar se define que el borde completo de los elementos img
ser solid (lnea normal); a continuacin se define que el borde superior de los elementos img ser en
forma de trazos (segmentos). El navegador procede a sustituir el borde superior por el borde a trazos,
mientras que mantiene el resto de bordes (right, bottom y left) como borde normal. Con este cdigo
hemos efectuado una declaracin inicial que es contradicha por una declaracin posterior. Quizs no
tengamos problemas y la visualizacin sea correcta en todos los navegadores. Pero como estilo de
trabajo recomendaramos evitar siempre que sea posible las contradicciones porque a la larga pueden
generar problemas. En este caso en vez de {border-style: solid; border-top-style: dashed; } podramos
usar la declaracin {border-top-style: dashed; border-right-style: solid; border-bottom-style: solid;
border-left-style: solid; }. Veremos ms adelante que esta expresin puede escribirse tambin de forma
abreviada o compacta. De esta manera hemos definido con claridad lo que queremos sin necesidad de
incurrir en contradecir o sobreescribir parcialmente una propiedad. Si nuestras definiciones de cdigo
CSS son precisas, la probabilidad de que surjan problemas ser menor. Por tanto y a modo de
recomendacin, no te conformes con que la visualizacin sea correcta: intenta que el cdigo est
definido lo ms correctamente posible.
EJERCICIO
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>.
En cada divisin introduce un texto (p.ej. div 1, div 2, div 3) y aplcale un estilo de borde diferente
utilizando la propiedad border-style.

respuestas
son
correctas
puedes
consultar
en
los

foros
Shortand CSSS. Propiedade

es border-width
h, border-colorr.
SHORTAN
ND NOTATIO
ON O NOTACIN ABREVIA
ADA CSS
Con bastaante frecuencia tendrem
mos propiedades CSS don
nde es posiblle definir un valor globall, como un
borde niico, o bien hasta cuatro valores
v
espeecficos para el lado supeerior (top), derecho (right), inferior
(bottom) o izquierdo (left). Para facilitar
f
la esscritura de c
digo CSS peermite el uso
o de diferenttes formas
abreviadaas.
La forma abreviada (en ingls sshortand nottation) bsiica para difeerentes prop
piedades que
e usan los
cuatro lados de las cajas CSS se basa en usar esta siintaxis: selectorElementto {nombreP
Propiedad:
valorTop valorRight
v
vaalorBottom valorLeft;
v
}
Por ejemplo la forma abreviada img {bordeer-style: solid dashed dotted doublle; } es equivalente a
escribir de
d forma exttendida imgg {border-top
p-style: solid
d; border-rigght-style: dashed; borde
er-bottomstyle: dottted; border--left-style: double; }. Tener en cuen
nta que en laa forma abreeviada los vaalores van
separadoss simplemen
nte con un espacio.
e
En ambos
a
casoss el resultado
o sera similar al que ve
emos en la
siguiente imagen.
p
comp
probar, usar la forma abrreviada nos permite
p
ahorrrar en exten
nsin de cdigo que es
Como se puede
necesario
o teclear y por
p tanto no
os permite ahorrar
a
tiem
mpo cuando estemos esscribiendo c
digo CSS.
Adems, cuando los archivos
a
CSSS son muy exxtensos, usaar la forma abreviada
a
pu
uede redund
dar en que
nuestros archivos
a
sean ms ligero
os y se cargueen ms rpid
damente.
La notaci
n abreviadaa o shortand
d notation see usa para muchas propieedades paraa establecer mrgenes,
rellenos, etc. por lo que
q nos la encontrarem
e
mos repetidaamente cuan
ndo trabajem
mos con CSSS. Hay una
cosa que debemos memorizar:
m
e orden en que
el
q se escriben los valo
ores y su correspondenccia con los
cuatro lad
dos de la caja. Para ello podemos ussar esta reglaa mnemotcnica: el da ccomienza a las 12:00 y
el primer lado es TOP, las agujass del reloj avanzan hacia la derechaa y el segundo lado el RIGHT.
R
Las
agujas sigguen avanzan
ndo y el terccer lado es BOTTOM.
B
El reloj
r
sigue avvanzando y eel cuarto lad
do es LEFT.
De ah qu
ue cuando vemos
v
una expresin de
d tipo img {border-style: solid dasshed dotted double; }
debamos pensar en so
olid --> TOP, dashed --> RIGHT,
R
dotte
ed --> BOTTO
OM, double --> LEFT.
p
usarr formas abrreviadas de otras maneras, usando en vez de cuatro valorres menos
Pero se pueden
valores. En
E la siguientte tabla vem
mos el signifiicado de las expresioness segn el nmero de vaalores que
usemos:
om, 2006-2029
Shortand CSS. Propiedades border-width, border-color.
Valores
empleados
Ejemplo
Significado
img {border-style: dotted; }
Los cuatro lados de la caja se

muestran con el valor indicado.
img {border-style: dotted solid; }
El primer valor se aplica a TOP y

BOTTOM y el segundo valor se
asigna a RIGHT y LEFT
img {border-style: dotted solid dashed; }
El primer valor se aplica a TOP, el

segundo a RIGHT y LEFT y el tercero
a BOTTOM
img {border-style: dotted solid dashed double;}
El primer valor se aplica a TOP, el

segundo a RIGHT, el tercero a
BOTTOM y el cuarto a LEFT
Hay ms formas de notaciones abreviadas en CSS como veremos ms adelante. Algunos navegadores,
en especial los ms antiguos, podran no reconocer las expresiones abreviadas, aunque prcticamente
todos los navegadores actuales s las reconocen.
PROPIEDAD CSS BORDER-WIDTH

Vistos ya los diferentes tipos de bordes que podemos aplicar con CSS, un aspecto importante ser
definir su grosor. Esto se hace con la propiedad border-width.
PROPIEDAD CSS border-width
Define el grosor de borde que se aplica a un elemento.
Valor por defecto
medium (grosor por defecto medio)
Aplicable a
Todos los elementos
Se hereda directamente?
No
Una unidad de medida absoluta o relativa admitida y aplicable (en general
cualquier unidad excepto porcentaje ser vlida)
thin (fino)
Valores posibles para esta

medium (medio)
propiedad
thick (grueso)
inherit (heredado del elemento padre)
Ejemplos
aprenderaprogramar.com
img {border-style: solid; border-width: 15px;}

.imgVentana {border-style: inset; border-width:1.25em;}
El grosor exacto en el caso de usar thin, medium y thick depende del navegador que estemos utilizando,
de ah que normalmente los diseadores prefieran especificar el tamao de los bordes con valores
como pixeles o em, que les permiten un mayor control.
Recordar que para que el borde sea visible debemos establecer border-style, ya que sin esta propiedad
establecida la aplicacin de border-width no generar ningn resultado.
La propiedad border-width puede especificarse usando la shortand notation como hemos explicado
anteriormente. Por ejemplo {border-width:0.25em 0.85em 0.45em;} establece el borde superior en
0.25em, los bordes laterales izquierdo y derecho en 0.85em y el borde inferior en 0.45em.
La propiedad border-width se puede aplicar a todo el borde del elemento, o bien a cualquiera de los
cuyo funcionamiento es anlogo al de border-widht, pero que permiten dar un tratamiento
diferenciado a cada uno de los bordes: border-top-width, border-right-width, border-bottom-width y
border-left-width. La sintaxis a utilizar y la forma de funcionamiento es la misma que hemos explicado
anteriormente para border-style.
PROPIEDAD CSS BORDER-COLOR

La propiedad border-color nos permite aplicar colores de borde.
PROPIEDAD CSS border-color
Define el color de borde que se aplica a un elemento.
Valor por defecto
Ser el valor que tenga la propiedad color para el elemento,

establecida en el cdigo o la que tenga el elemento por defecto.
Aplicable a
Todos los elementos
No
Un color establecido de cualquiera de las maneras vlidas en CSS

transparent (el borde existe pero es transparente)
propiedad
Ejemplos
img {border-style: solid; border-width: 15px; border-color: cyan}

.imgVentana {border-style: solid dotted; border-width:0.35em;
border-color: red blue;}
El valor transparent nos permite generar la apariencia de que existe un borde pero este no ser visible
por ser transparente.
Recordar que para que el borde sea visible debemos establecer border-style, ya que sin esta propiedad
establecida la aplicacin de border-color no generar ningn resultado.
La propiedad border-color puede especificarse usando la shortand notation como hemos explicado
anteriormente. Por ejemplo {border-color:#ff0000 rgb(0,255,0) blue rgba(0,255,0,0.33);} establece los
bordes de distintos colores siguiendo el orden top right bottom left.
La propiedad border-color se puede aplicar a todo el borde del elemento, o bien a cualquiera de los
cuyo funcionamiento es anlogo al de border-widht, pero que permiten dar un tratamiento
diferenciado a cada uno de los bordes: border-top-color, border-right-color, border-bottom-color y
border-left-color. La sintaxis a utilizar y la forma de funcionamiento es la misma que hemos explicado
anteriormente para border-style.
PROPIEDAD CSS BORDER

Hasta ahora hemos visto que para establecer un borde habamos de definir al menos la propiedad
border-style, y si queramos especificar el grosor y el color adicionalmente tenamos que definir borderwidth y border-color.
Hay una propiedad que permite expresar las tres propiedades bsicas de un borde de forma abreviada:
la propiedad border. La sintaxis a emplear es:
border { valorBorderWidth valorBorderStyle valorBorderColor; }
PROPIEDAD CSS border

Permite definir grosor, estilo y color de borde.
Valor por defecto
Los de las distintas sub-propiedades de que consta.
Aplicable a
Todos los elementos
No
Un valor (establecer border-style)
Valores posibles para esta Dos valores (establecer border-style y grosor o color)
propiedad
Tres valores (establecer border-width, border-style y border-color)
Ejemplos
img {border: 15px solid #FFAA33; }
.imgVentana { border: dotted;}
Nota: en general los navegadores permiten que las subpropiedades de border se expresen en cualquier
orden, es decir, dar igual escribir img {border: 15px solid #FFAA33; } que img {border: solid #FFAA33
15px;}. El navegador interpretar en cada caso qu es el estilo, qu es el grosor y qu es el color.
La propiedad admite hasta tres valores (anchura, estilo y color) de los cuales es obligatorio el estilo y
opcionales los otros dos.
Valores
empleados
Ejemplo
Significado
img {border: dotted; }
Los cuatro lados de la caja se muestran con el estilo

indicado. Grosor y color sern los de defecto.
img {border: 20px solid; }

img {border: solid red; }
Se aplica el estilo indicado y el grosor color

indicado. Lo no especificado ser por defecto.
img {border: 15px solid #FFAA33; }
Se aplica el grosor, estilo y color indicados.
Este tipo de propiedades como border que permiten abreviar diferentes propiedades se denominan
shortand properties o propiedades abreviadas.
La propiedad border se puede aplicar a cualquiera de los cuatro bordes en que se puede subdividir un
borde. De esta manera se generan cuatro propiedades cuyo funcionamiento es anlogo al de border,
pero que permiten dar un tratamiento diferenciado a cada uno de los bordes: border-top, border-right,
border-bottom y border-left. La sintaxis a utilizar y la forma de funcionamiento para estas propiedades
son las que ya conocemos.
El siguiente esquema resume las propiedades de borde CSS:
EJERCICIO 1
Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>.
En cada divisin introduce un texto (p.ej. div 1, div 2) y aplcale los siguientes estilos de borde
escribiendo de forma individual cada una de las siguientes propiedades CSS:
a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 pxeles y color verde. La
parte derecha con borde de trazos o segmentos rectangulares, grosor 20 pxeles y color azul. La parte
inferior con borde de lnea doble, grosor 10 pxeles y color #A52A2A. La parte izquierda con borde con
efecto groove, grosor 30 pxeles y color #2F4F4F.
b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 pxeles y color #B22222. La parte
derecha con borde slido, grosor 22 pxeles y color #DAA520. La parte inferior con borde de lnea doble,
grosor 25 pxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17
pxeles y color #808000.

respuestas
son
correctas
puedes
consultar
en
los
foros
EJERCICIO 2
Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1,
pero en este caso usando la notacin shortand de bordes CSS y la propiedad border abreviada. Para
comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Margen y re
ellenos en CSS. Margin y padd
ding en el box model.
m
MARGEN Y RELLENO
n del funciionamiento de CSS debemos cono
ocer, saber utilizar y
Para avanzar en la comprensi
ding. Al iguaal que con lo
os bordes, tendremos
t
diferenciaar dos propiedades importantes: margin y padd
distintas propiedades derivadass de las prrincipales y tambin teendremos sshortand no
otations o
notacionees abreviadas para poderr expresarlass.
MARGIN Y PADDING
Empezareemos realizan
ndo una defiinicin de co
onceptos:
a) Contenido dee un elemeento HTML es aquello que se preetende mosstrar al visu
ualizar ese
uede ser un
n texto, un
na imagen o quizs ottros elemen
ntos como un objeto
elemento: pu
reeproductor de
d sonido un
u mapa. El contenido
c
en
n CSS tiene forma de cajaa rectangular.
b) Borde: es el permetro
p
qu
ue engloba ell contenido y el posible relleno
r
(en in
ngls padding) entre el
ntenido.
borde y el con
c) Relleno (padd
ding): es el espacio transparente que
q se pued
de dejar, opcionalmente
e, entre el
co
ontenido y el
e borde del elemento. El relleno no
n tiene collor (pero peermite ver el
e color de
fo
ondo).
d) Margen:
M
es el
e espacio trransparente que se pue
ede dejar, op
pcionalmentte, entre el borde del
elemento y el borde de otras
o
cajas adyacentes.
a
El
E margen no tiene color (pero perm
mite ver el
co
olor de fondo).
Viendo essquemas grficos y cdiggo se compreendern con ms facilidad estos concceptos:
Ca
aja contenedora
margin
m
n
pa
adding
Conttenido (tex
xto,
im
magen)
aprenderraprograma
ar .com
om, 2006-2029
Margen y rellenos en CSS. Margin y padding en el box model.
Un elemento HTML puede tener margin y padding, slo tener margin, slo tener padding, o no tener ni
margin ni padding. En caso de no tener margin ni padding el elemento aparecer ajustado
exactamente a su caja contenedora.
Al igual que ocurra con las propiedades de borde, las propiedades de margen y relleno se pueden
subdividir para aplicarlas a cada uno de los lados de la caja CSS por separado.
EJEMPLO EN CDIGO
Para ver la aplicacin prctica de estos conceptos vamos a utilizar el cdigo HTML de base que venimos
empleando a lo largo del curso.
Define los siguientes estilos css y visualiza el resultado en tu navegador:
*{font-family: arial;}
body {background-color: yellow; width: 60%;}
h1{margin: 25px; padding: 45px; border: solid 6px blue; }
h2{border-style: solid; border-color:red; margin: 0; padding:0;}
div {border: solid thick black;}
div div {border: solid medium purple;}
div div div {border: dashed medium grey;}
img {border: solid #FF00FF 2px;}
Vamos a analizar lnea a lnea el cdigo CSS y los resultados obtenidos. La primera lnea es un
comentario. En la segunda lnea establecemos que las fuentes de texto a emplear en todos los
elementos del documento sean tipo arial. En la tercera lnea establecemos que el elemento body tenga
color de fondo amarillo y ocupe el 60% del ancho de pantalla disponible.
En la cuarta lnea definimos que el margen de los elementos h1 ser de 25 pxeles. Al no especificar top,
right, bottom o left, este margen se aplicar en las cuatro direcciones (mismo comportamiento que el
que hemos estudiado previamente con los bordes). Igualmente definimos que el relleno para los
elementos h1 ser de 45 px en todas las direcciones y que el borde se muestre de color azul.
En la quinta lnea definimos que los elementos h2 muestren un borde de color rojo y que no llevarn
margen ni relleno.
En las siguientes lneas establecemos bordes para que se muestren las cajas contenedoras de los
elementos HTML de distintos colores. Estas lneas no nos interesa comentarlas ahora.
En los resultados de visualizacin comprobamos lo siguiente: si los elementos h2 no tienen margen, se
mostrarn pegados a las cajas adyacentes. As vemos que ocurre con la caja del div contenedor, pero no
con la caja del h1. Es esto correcto? S, porque el h1 tiene establecido un margen y por tanto la caja
del elemento h2 no puede pegarse a la caja del elemento h1 porque hay un margen que lo impide.
Prueba a hacer el siguiente cambio en el cdigo: h2{border-style: solid; border-color:red; margin: 25px;
padding:0;}
Al visualizar el resultado comprobars que los mrgenes verticales (top y bottom) contiguos no son
aditivos, es decir, si la caja h1 tiene de margen 25px y la caja de h2 tiene de margen 25px, el espacio
vertical que quedar entre ambas cajas es 25px y no 50px. Por qu? Porque la referencia para
establecer un margen vertical es el borde de las cajas y no el lmite del margen de una caja adyacente.
Si la caja h1 tuviera de margen vertical 25px y la caja h2 tuviera de margen vertical 10px el espacio
entre ambas cajas sera de 25px, el mayor entre los dos valores.
El comportamiento de los mrgenes horizontales es diferente: en este caso, s es aditivo. Supongamos
que tenemos dos imgenes una al lado de otra y establemos img {margin:25px;}. En este caso el espacio
que habr entre ambas imgenes s es de 50 px, es decir, los mrgenes horizontales s se suman,
mientras que los verticales no se suman. Este comportamiento peculiar deberemos tenerlo en cuenta
cuando trabajemos con CSS. Y como CSS no es matemticas, habr que realizar pruebas y
comprobaciones para verificar que se cumple aquello que esperamos.
La idea clave con que debemos quedarnos es que los mrgenes verticales tienen un comportamiento
distinto al de los mrgenes horizontales.
Continuamos con el anlisis de los resultados. Si la caja h2 no tiene padding, la lnea de borde quedar
ceida al contenido (en este caso al texto). As vemos que ocurre por la izquierda, por arriba y por
abajo. Sin embargo por la derecha el borde no est ajustado al texto. Por qu? Porque los elementos
h1 y h2 son elementos de tipo block, y por tanto tienden a ocupar todo el ancho de pantalla. Ms
adelante veremos que podemos cambiar el comportamiento para que se comporten como block
como inline segn nuestro criterio.
Finalmente queremos llamar la atencin sobre el hecho de que se muestre un pequeo espacio entre el
borde del div y el borde del elemento body, de ah que se vea una pequea franja amarilla por fuera del
contenedor div. Esta situacin se debe a los mrgenes o rellenos que por defecto aplica el navegador.
Podemos eliminar estos mrgenes o rellenos por defecto incluyendo en el selector universal este
cdigo: *{margin:0; padding:0;} Prueba a aplicarlo y comprubalo. A prcticas de este tipo, consistentes
en escribir cdigo para anular el comportamiento por defecto que introducen los navegadores, se le
suele denominar reseteo. Es una prctica que siguen muchos diseadores y programadores, pero no
todos. Algunos programadores estn en contra de utilizar prcticas de reseteo.
El cdigo de reseteo puede ser bastante ms amplio que el que hemos indicado y hablaremos de ello
ms adelante. Nosotros iremos introduciendo algunas prcticas de reseteo cuando lo consideremos
necesario para el desarrollo del curso.
EJERCICIO
Para cada una de las siguientes afirmaciones indica si la afirmacin es verdadera o falsa y justifica
brevemente tu respuesta:
a) CSS muestra los contenidos con tres formas bsicas: rectangular, circular y elipsoidal.
b) Al crear un documento HTML, pueden aparecer mrgenes y rellenos que no hayan sido
explcitamente introducidos por nosotros como programadores, sino que hayan sido introducidos por el
navegador que estemos empleando.
c) El reseteo CSS consiste en la recarga de la pgina para borrar la cach del navegador, de modo que
los estilos se recarguen completamente.

respuestas
son
correctas
puedes
consultar
en
los

foros
Margen y re
ellenos en CSS. Margin y padd
ding en el box model.
m
MARGIN Y PADDING
Ya debem
mos tener claaro el concep
pto de margeen y de relle
eno en CSS. Ambos
A
son eelementos muy
m usados
en los diseos y que presentan
p
cieertas similitu
udes y ciertas diferenciass. En algunoss casos el efe
ecto visual
al que llevvan es muy parecido.
p
Sin
n embargo, conviene
c
tener clara la diiferencia enttre ambos co
onceptos y
saber utilizarlos adecu
uadamente.
PROPIEDA
AD CSS PADD
DING
La propied
dad CSS padding nos perrmite fijar el relleno de un
u elemento.. La sintaxis a emplear ess del tipo:
4Uds; }
selecttorElemento { padding vaalor1Uds valor2Uds valor3Uds valor4
PROPIIEDAD CSS padding

p
Funcin de la propie
edad
Permite definir un relleno entre el borde de caja y eel contenido.
Valor po
or defecto
0 (n
no existe relleno).
Aplicable a
Elem
mentos tipo block y ele
ementos inseertados en u
una posicin que son
reem
mplazados po
or un objeto (e
entre ellos imgg, input, textaarea, select, object).
Se here
eda
directam
mente?
No
Un valor
v
absoluto
o o relativo (establece relleeno en los cuatro sentidos)
Dos valores (el prrimero de ello
os aplica a top
p y bottom y eel segundo a riight y left)
Valores posibles parra

opiedad
esta pro
Tress valores (el primero para top, el segundo right / left y el tercero bottom).
Cuatro valores (see aplican a top, right, botto
om y left en esste orden)
inheerit (heredado
o del elemento padre)
#meenu1 {paddingg: 55px 0.5em
m 177px 2px;}
.imggVentana { padding: 15px;}

Ejemplos
eraprogramaar.com h1 {padding:
aprende
{
10%
% 5%;}
.con
ntainer1 {padd
ding: 0 auto;}
La propieedad paddingg se puede aplicar en todos

t
los lad
dos del elem
mento, o bieen a cualquiera de los
cuatro lad
dos que confforman una caja CSS. Existen cuatro propiedades cuyo funcionamiento es
e anlogo
al de padding, pero que
q permiten
n dar un traatamiento diferenciado a cada uno d
de los lados de la caja
ding-top, paadding-right,, padding-bo
ottom y pad
dding-left. Laa sintaxis a utilizar y la forma de
CSS: padd
funcionam
miento es la misma que hemos
h
expliccado.
om, 2006-2029
El valor de padding se puede establecer en %, realizndose el clculo respecto al ancho del elemento
contenedor (un valor 100% sera un relleno igual al ancho del elemento contenedor).
La propiedad padding no admite valores negativos.
Recordar que tanto margin como padding generan un espacio transparente. El color o imagen que se
vean en dicho espacio sern el color de fondo (background-color) o la imagen de fondo (backgroundimage) que estn definidos para el elemento afectado.
Tanto con margin como con padding pueden haber determinadas situaciones en que los navegadores,
sobre todo los ms antiguos, no respondan como sera de esperar, aunque la mayor parte de los
navegadores actuales responden adecuadamente.
PROPIEDAD CSS MARGIN

La propiedad CSS margin nos permite fijar el margen de un elemento. La sintaxis a emplear es del tipo:
selectorElemento { margin valor1Uds valor2Uds valor3Uds valor4Uds; }
PROPIEDAD CSS margin

Permite definir el margen entre el borde de la caja del elemento y el

borde de las cajas adyacentes.
Valor por defecto
0 (no existe margen).
Aplicable a
Elementos tipo block y elementos insertados en una posicin que son

reemplazados por un objeto (entre ellos img, input, textarea, select, object).
Se hereda
directamente?
No
auto (el navegador aplicar el margen por defecto)
Un valor absoluto o relativo (establece mrgenes en los cuatro lados de la caja)
Valores posibles para

esta propiedad
Dos valores (el primero de ellos aplica a top y bottom y el segundo a right y left)
Tres valores (el primero para top, el segundo right / left y el tercero bottom).
Cuatro valores (se aplican a top, right, bottom y left en este orden)
#menu1 {margin: 55px 0.5em 177px 2px;}
.imgVentana { margin: 15px;}

Ejemplos
aprenderaprogramar.com h1{margin: 10% 5%;}
.container1 {margin: 0 auto;}
La propiedad margin se puede aplicar en todos los lados del elemento, o bien a cualquiera de los cuatro
lados que conforman una caja CSS. Existen cuatro propiedades cuyo funcionamiento es anlogo al de
margin, pero que permiten dar un tratamiento diferenciado a cada uno de los lados de la caja CSS:
margin-top, margin-right, margin-bottom y margin-left. La sintaxis a utilizar y la forma de
funcionamiento es la misma que hemos explicado anteriormente.
El valor de margin se puede establecer en %, realizndose el clculo respecto al ancho del elemento
contenedor (un valor 100% sera un margen igual al ancho del elemento contenedor).
A diferencia de otras propiedades, se admite que un valor de margin pueda ser negativo (aunque esto
no es usual y no debera usarse excepto cuando razonadamente es necesario y aconsejable. Un margen
negativo puede dar lugar, en algunos casos, a visualizaciones incorrectas o extraas). Para entender el
efecto de valores de margen negativos podemos pensar en los mrgenes como aviones que tienen un
espacio bsico definido por la anchura de sus alas y fuselaje, que definen un espacio rectangular que
sera el margin 0 (no hay margin y el avin empuja a otros aviones colindantes). Ese espacio se puede
aumentar hacia fuera estableciendo un margin positivo que sera como establecer un permetro de
seguridad para el avin, lo que impide que otros aviones entren en el espacio reservado a nuestro
avin. Si el margen se establece en un valor negativo, el avin no slo no tiene un espacio extra hacia
fuera, sino que tampoco tiene su espacio bsico y se coloca invadiendo el espacio delimitado por otro
avin contiguo. Margin positivo sera empujar hacia fuera y margin negativo sera solaparse con
elementos adyacentes.
En la siguiente imagen vemos cmo afecta establecer un margen positivo o negativo a un elemento
Contenido 1 que tiene otros dos elementos vecinos.
La invasin del espacio colindante puede ser en todas direcciones o establecerse especficamente para
alguna de las cuatro direcciones posibles (top, right, bottom o left) usando margin-top, margin-right,
margin-bottom o margin-left. Un aspecto a tener en cuenta es que cuando existe superposicin de un
elemento con otros habr que comprobar o establecer qu elemento debe quedar encima y qu
elemento debe quedar debajo. En la imagen anterior hemos dibujado el elemento Contenido 1
situndose encima de los otros elementos, pero en la prctica esto depender de diversos factores y no
siempre ser as. Existen propiedades CSS con las que podremos controlar el orden de apilamiento de
elementos cuando existe superposicin. Lo veremos ms adelante.
Otro aspecto que merece ser comentado es el resultado que se obtendr al establecer un valor de
margin auto. Elegir auto equivale a indicar que el margin debe ser establecido automticamente por
el navegador. En general, si un elemento es de tipo block y no tiene establecido una anchura especfica,
cuando establecemos el margin con valor auto el margen que aplicar el navegador cer cero (sin
margen). En cambio, si el elemento es de tipo block pero tiene un valor de ancho (width) definido, al
establecer el margin auto el navegador establecer un margen izquierdo y derecho iguales, de modo
que el contenido estar equidistante respecto al borde del contenedor. El efecto que se aprecia, en este
caso, es que el elemento aparece centrado.
Ejemplo:
a) Cdigo que da lugar a un margen cero: h1{ border: solid; margin:auto; }, el elemento h1 se ve a todo
lo ancho y sin mrgenes.
b) Cdigo que da lugar a el centrado horizontal del elemento: h1{border: solid 6px blue; width:65%;
margin:auto;}. El elemento h1 se ve sin mrgenes superior (top) ni inferior (bottom), pero se ve
centrado (con mrgenes right y left de igual valor).
Prueba a visualizar la pgina de pruebas en tu navegador con este cdigo. En el primer caso h1 es un
elemento block sin ancho definido, por lo que tiende a ocupar todo el ancho disponible. En este caso
margin: auto; da lugar a que se aplique margen cero. En el segundo caso h1 es un elemento block con
ancho el 65% del elemento contenedor, por tanto tiene un ancho definido. En este caso margin: auto;
da lugar a que se apliquen mrgenes iguales por ambos lados del elemento y a que visualmente el
elemento aparezca centrado.
EJERCICIO
Crea un documento HTML con 2 elementos div de anchura 250 pxeles, con un margen de 20px en
todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y
aplcale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte
superior con borde de puntos redondeados, grosor 15 pxeles, color #DC143C y relleno de 30 pxeles. La
parte derecha con borde de trazos o segmentos rectangulares, grosor 10 pxeles, color verde y relleno
de 45 pxeles. La parte inferior con borde de lnea doble, grosor 10 pxeles, color #FF00FF y relleno 0
pxeles. La parte izquierda con borde con efecto ridge, grosor 40 pxeles, color #2F4F4F y relleno 60
pxeles.
Responde a las siguientes preguntas:

a) Cul es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
b) Cul es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
c) Cul es el ancho total desde el lmite izquierdo del borde del div ms a la izquierda hasta el lmite
derecho del borde del div ms a la derecha (teniendo en cuenta mrgenes, bordes y rellenos)?

respuestas
son
correctas
puedes
consultar
en
los

foros
Fondo o bacckground en CSSS. background

d-image, repeatt, etc.
FONDO EN CSS
p
relacionadaas con el fon
ndo de las cajas
c
del boxx-model o modelo
m
de
CSS tienee diferente propiedades
cajas. Ya conocemos
c
l propiedad
la
d background
d-color. Vam
mos a ampliarr el conocimiento sobre los fondos
estudiand
do otras prropiedades relacionadas: backgrou
und-image, background-repeat, baackgroundattachment, backgrou
und-position y la propied
dad shortand
d background
d.
CONCEPTTO DE FONDO
O DE UN ELEEMENTO
El fondo de
d un elemento CSS com
mprende el espacio desde
e los bordes hacia el inteerior de la caaja del box
model, incluyendo el propio bord
de. Por tanto
o el fondo co
omprende el espacio de borde, el paadding y el
o. El margin no se ve afectados por el
e fondo del elemento. SSi el borde ess opaco, el
espacio del contenido
fondo queedar oculto
o por el bord
de. En cambio si tiene trransparenciaa o partes no
o opacas, de
ejar ver el
fondo.
Ca
aja contenedora
margin
m
n
pa
adding
Conttenido (tex
xto,
im
magen)
aprenderraprograma
ar .com
AD BACKGRO
OUND-COLO
OR
PROPIEDA
Es la prop
piedad que permite
p
estaablecer el color de fondo
o, de la cual ya hemos h
hablado, por lo que no
vamos a extendernos
e
s en ella. Reccordar que el
e backgroun
nd-color por defecto para todos los elementos
e
es transpaarent.
AD BACKGRO
OUND-IMAG
GE
PROPIEDA
Esta prop
piedad nos permite estab
blecer una im
magen de fo
ondo para un
n elemento. Una imagen
n se coloca
encima del backgroun
nd-color. Si la imagen es opaca, ocu
ultar el bacckground-collor. Si la imaagen tiene
partes traansparentes, se ver el co
olor de fondo
o rellenando
o esas partess transparenttes.
om, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.
La sintaxis a emplear es del tipo:

selectorElemento {background-image: valorDefinido; }
El valor definido puede ser none para indicar que no existe imagen de fondo, o puede definirse
escribiendo lo siguiente: url(rutaDeLaImagen). No debe haber espacio entre url y el parntesis dentro
del que se coloca la ruta. Es decir, url(ruta) es correcto pero url (ruta) es incorrecto.
Como ruta de la imagen puede especificarse un nombre de archivo que tengamos en el mismo
directorio en el que se encuentre el archivo HTML, por ejemplo url(barco.jpg), o tambin una ruta
relativa a otro directorio. Por ejemplo url(images/barco.jpg) hara referencia a un archivo de nombre
barco.jpg que se encuentra dentro del directorio images.
Tambin puede especificarse una url completa, por ejemplo podra escribirse lo siguiente:
url(http://www.crimsoneditor.com/images/logo.jpg)
El contenido de la ruta puede escribirse entre comillas simples o dobles. Es decir, resulta vlida
cualquiera de estas tres opciones:
a) url(http://www.crimsoneditor.com/images/logo.jpg)
b) url(http://www.crimsoneditor.com/images/logo.jpg)
c) url('http://www.crimsoneditor.com/images/logo.jpg')
En algunos casos las rutas pueden tener caracteres extraos y estos caracteres pueden dar lugar a
problemas al no ser capaz el navegador de reconocer la ruta.
PROPIEDAD CSS background-image

Permite definir una imagen de fondo para un elemento.
Valor por defecto
none (no existe imagen de fondo).
Aplicable a
Todos los elementos.
Se hereda
directamente?
No
none (establece que no existe imagen de fondo)

esta propiedad
Una ruta relativa (al fichero de imagen)

Una ruta absoluta (al fichero de imagen)
#menu1 {background-image: url(barco.jpg);} .imgVentana { background-image:
url(http://crimsoneditor.com/images/logo.jpg);}
Ejemplos
aprenderaprogramar.com h1 { background-image: url(bgforh1.png); }
.container1 {background-image: none;}
En caso de que el archivo de imagen a que se aluda no est disponible, la visualizacin ser la misma
que si estuviera establecido que background-image fuera none. Por tanto si tenemos un color de fondo
y una imagen de fondo, en caso de no encontrarse o no estar disponible la url con el archivo de la
imagen de fondo, se vera el color de fondo. Este es el motivo por el que se recomienda establecer color
de fondo incluso si se pone una imagen de fondo opaca: en caso de no estar la imagen disponible, el
color de fondo aportara la seguridad de que se visualiza algo como fondo.
Para ver la aplicacin prctica de estos conceptos vamos a utilizar el cdigo HTML de base que venimos
empleando a lo largo del curso.
*{font-family: arial; }
body {background-color: yellow;}
h1{
border: dashed thick purple; width: 55%; color: blue; background-color:pink;
margin:20px; padding:50px;
background-image:
url(http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png);
}
El resultado ser similar a la imagen anterior y lo interpretamos de la siguiente manera: el borde tiene
partes no opacas por estar establecido como dashed. Por ello all donde la lnea es discontnua se ve la
imagen de fondo o, en caso de que la imagen de fondo tenga transparencia (como en este caso), se ve
el color de fondo.
Por defecto, la imagen se coloca en la parte superior izquierda alineada o encajada con el borde
superior izquierdo, y a partir de aqu se repite hacia arriba (de ah que se vean algunas manchas en el
borde superior, hacia la izquierda (de ah que se vean manchas en el borde izquierdo), hacia la derecha
y hacia abajo. Este comportamiento puede ser cambiado utilizando otras propiedades de background
(background-position y background-repeat) como veremos ms adelante.
En caso de que la imagen fuera ms grande que el espacio disponible en el elemento, slo se mostrara
una parte de la imagen (la parte que quepa).
Se pueden poner varias imgenes de fondo (aunque slo en navegadores modernos; algunos
navegadores ms antiguos pueden no funcionar con esta posibilidad) . En este caso, la visualizacin es
el resultado de crear un collage o pila de imgenes, situndose encima la primera en la enumeracin,
ms abajo la siguiente y as sucesivamente hasta llegar a la capa final que sera el color de fondo. Al
hacer esto, se crea un efecto de superposicin donde la transparencia de una imagen deja ver
parcialmente lo que hay debajo. En caso de que la primera imagen fuera opaca, ocultara todo lo que
hay debajo.
Ejemplo: background-image: url(barco.png, mar.jpg) da lugar a que la imagen del mar se vea debajo
de la imagen del barco.
Prueba a visualizar el resultado de establecer una imagen de fondo con transparencia encima de otra
imagen de fondo (por ejemplo background-image:
url(http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png),
url(http://www.crimsoneditor.com/images/logo.jpg);
Prueba tambin a establecer una imagen de fondo para el elemento body y comprueba los resultados.
Podrs ver cmo si toda la pgina tiene una imagen de fondo oscura, el texto negro se hace difcil de
leer.
Un aspecto de inters radica en que se pueden usar imgenes de pequeo tamao que situadas en un
fondo y repetidas creen el efecto de papel tapiz para una pgina web. Por ejemplo podemos coger
imgenes simples de forma cuadrada:
Estas imgenes, si estn bien diseadas, al repetirse crean un fondo uniforme o papel tapiz
pareciendo que fueran una sola cosa. Esto supone una gran ventaja respecto a usar una imagen de gran
tamao por varios motivos:
a) Usando una imagen de fondo que se repite la pgina puede ser tan grande a lo ancho y a lo alto
como queramos, no tenemos que preocuparnos de si la imagen va a ser lo suficientemente
grande para cubrir el espacio de la pgina web.
b) Usando una imagen pequea que se repite facilitamos que la pgina web cargue ms
rpidamente al tener el navegador que recibir una pequea imagen y repetirla, en lugar de
tener que recibir una gran imagen. De este modo, podemos cargar por ejemplo una imagen de
4 Kb cuya carga es muy rpida en lugar de una imagen de 400 Kb cuya carga sera muy lenta.
PROPIEDAD BACKGROUND-REPEAT
Esta propiedad nos permite definir si una imagen de fondo de tamao inferior al disponible debe
repetirse. Tambin se puede especificar si la repeticin debe ser horizonal (eje x), vertical (eje y) o en
ambos sentidos.
selectorElemento { background-repeat: valorDeRepeticin; }
PROPIEDAD CSS background-repeat

Permite definir si una imagen de fondo debe repetirse y cmo.
Valor por defecto
repeat (la imagen se repite horizontal y verticalmente).
Aplicable a
Se hereda
directamente?
No
repeat (repeticin horizontal y vertical)
repeat-x (repeticin slo horizontal)

esta propiedad
repeat-y (repeticin slo vertical)

no-repeat (la imagen se muestra slo una vez, sin repeticiones)
#menu1 {background-image: url(barco.jpg); background-repeat: no-repeat;}
.imgVentana { background-image: url(ut.jpg); background-repeat: repeat-x;}

Ejemplos
aprenderaprogramar.com h1{ background-image: url(ut.jpg); background-repeat: repeat-y;}
.container1 { background-image: url(ut.jpg); background-repeat: repeat;}
Opcionalmente puede usarse otra sintaxis (aunque no la vemos por el momento recomendable porque
en algunos navegadores puede no ser reconocida) basada en dos palabras clave, una para definir el
comportamiento en el eje x u horizontal y otra para establecer el comportamiento en el eje y o vertical.
La sintaxis es de tipo:
selectorElemento { background-repeat: valorParaEjeX valorParaEjeY; }
Escribir background-repeat: repeat-x; sera equivalente a escribir background-repeat: repeat-x norepeat;

Hay otras palabras clave, aunque no son reconocidas por todos los navegadores. En concreto, space
significara que la imagen se repite hasta donde sea posible pero sin cortarse en ningn momento. La
palabra round vendra a significar que la imagen se repite hasta donde sea posible y en caso de quedar
un espacio sobrante, se produce un redimensionamiento del tamao de la imagen hasta ajustarse al
espacio disponible. Ten en cuenta que si estableces la propiedad background-repeat con una sintaxis
que el navegador no reconoce, le aplicar su valor por defecto, que es repeat. Ten en cuenta tambin
que no todos los navegadores responden igual.
Prueba a establecer la propiedad background-repeat sobre el cdigo que vimos anteriormente y
comprueba sus efectos.
EJERCICIO 1
Crea un documento HTML con 4 elementos div de 250 pxeles de ancho y 250 pxeles de alto, todos
ellos con un margin de 30 pxeles en todas direcciones y un padding de 30 pxeles en todas direcciones.
En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color
diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros
EJERCICIO 2
Crea dos pginas web cumpliendo estos requisitos:
a) Una pgina web debe tener una nica imagen de gran tamao (por ejemplo 1024x768 pxeles) como
imagen de fondo, sin repeticin de la misma.
b) Una pgina web debe tener una imagen de pequeo tamao (por ejemplo 135x135 pxeles) que
mediante el uso de la propiedad repeat se expanda como fondo de la pgina web creando un efecto
tapiz.

respuestas
son
correctas
puedes
consultar
en
los

foros
background
d-position, attaachment, clip, size,
s
origin CSS..
PROPIEDA
ADES DE FON
NDO
CSS tienee diferente propiedades
p
relacionadaas con el fon
ndo de las cajas
c
del boxx-model o modelo
m
de
cajas. Ya conocemos algunas de ellas. Vamos a ampliar el conocimieento sobre llos fondos estudiando
e
otras propiedades: baackground-p
position, background-attaachment, baackground-cllip, backgrou
und-origin,
backgroun
nd-size y la propiedad
p
sh
hortand backkground.
PROPIEDA
AD BACKGRO
OUND-POSITTION
Esta prop
piedad nos permite
p
establecer la posicin de un
na imagen de fondo. Por defecto he
emos visto
que la imaagen de fond
do se sita en
e la parte su
uperior izquie
erda del elem
mento (justo
o en la esquina interior
del bordee), pero podremos especiificar otra po
osicin usand
do esta propiedad.
La sintaxiss a emplear es
e del tipo:
seleectorElemento {backgrou
und-position: especificaccinDePosici
n; }
p
hacerse de distin
ntas maneraas. Una de ellas es esscribir dos
La especiificacin de posicin puede
porcentajes, represen
ntando el primero
p
de ellos el dessplazamiento
o x (horizon
ntal) y el se
egundo el
miento y (veertical). Ahorra bien, el % de qu medida es la que se usa?? Se usa la medida
m
del
desplazam
ancho y alto total disp
ponible meno
os el ancho y alto de la im
magen.
os resultadoss aplicando porcentajes

p
son
s estos:
A efectos prcticos, lo
0% 0%: la imagen se coloca en posici
n superior izquierda (posicin p
por defecto, no hay
desplazam
miento).
100% 0%:: la imagen se
s coloca en posicin superior dereccha (se desplaza el total del espacio diferencia
en horizontal).
s coloca en posicin infferior izquierrda (se desplaza el total del espacio diferencia
0% 100%:: la imagen se
en verticaal).
100% 100
0%: la imagen
n se coloca en
e posicin inferior derecha (se desp
plaza el total del espacio diferencia
en verticaal y en horizo
ontal).
om, 2006-2029
background-position, attachment, clip, size, origin CSS.
PROPIEDAD CSS background-position

Permite definir la posicin de la imagen de fondo de un elemento.
Valor por defecto
0% 0%.
Aplicable a
Se hereda
directamente?
No
Dos porcentajes (primer % indica horizontal, segundo % indica vertical)
Un porcentaje (indica % horizontal, y en la vertical se produce el centrado
automtico de la imagen)
Dos unidades de medida, relativas o absolutas (primera unidad indica el
desplazamiento horizontal respecto al punto de inicio, segunda unidad indica el
desplazamiento vertical respecto al punto de inicio).

esta propiedad
Una unidad relativa o absoluta (indica desplazamiento horizontal respecto al

punto de inicio, y en la vertical se produce el centrado automtico de la imagen)
Dos palabras clave a elegir entre left, center y right en la horizontal y top, center
y bottom en la vertical (primera palabra indica posicin en la horizontal y
segunda palabra clave indica posicin en la vertical)
Una palabra clave a elegir entre left, center y right (indica posicin en la
horizontal; en la vertical se produce el centrado automtico de la imagen).
inherit (se heredan las caractersticas del elemento padre).
background-position: 25% 45%;
background-position: 250px 2.55em;
background-position: center bottom;

Ejemplos
aprenderaprogramar.com background-position: right;
background-position: -10%;
background-position: -10px -10px;
Se admiten valores negativos para especificar la posicin de la imagen de fondo. Los valores negativos
se llevarn la imagen hacia fuera del espacio disponible y posiblemente quede una parte de la imagen
no visible. Una utilidad que puede tener el establecer un valor negativo es para posicionar la imagen
encima del borde izquierdo o del borde superior.
Si usamos dos o ms imgenes de fondo podramos fijar sus posiciones separando la especificacin de
posicin de cada una de ellas como en este ejemplo, (aunque algunos navegadores antiguos pueden no
reconocer esta sintaxis):
background-image: url(http://i.imgur.com/afC0L.jpg), url(http://www.crimsoneditor.com/images/logo.jpg);
background-repeat: no-repeat;
background-position: -10px -10px, right bottom;
PROPIEDAD BACKGROUND-ATTACHMENT
Esta propiedad nos permite establecer si la imagen se comporta como una imagen normal, y se muestra
en una posicin concreta, o si se desplaza a medida que el usuario se desplaza por la pgina web
haciendo scroll de modo que aparece siempre fija como fondo de un elemento determinado (siempre
que ese elemento est visible en la pantalla).
El comportamiento normal se corresponde con la palabra clave scroll, mientras que el aparecer siempre
fija como fondo cuando hay desplazamiento se corresponde con la palabra clave fixed. Hay otra nueva
palabra clave, slo soportada por las ltimas versiones de los navegadores, que es local, cuyo
significado es que si el elemento dentro del cual est la imagen tiene una barra de desplazamiento o
scroll, la imagen permanece fija en ese elemento mientras se haga scroll en l.
La mejor forma de entender el comportamiento de background-attachment es realizar una prueba.
Para ello vamos a utilizar el cdigo HTML de base que venimos empleando a lo largo del curso.
body {background-color: yellow;
background-image: url(http://i.imgur.com/afC0L.jpg);
background-attachment: fixed;
}
h1 {height: 450px; width: 2000px;}
h2 {height: 450px;}
Comprueba cmo la imagen se mantiene en la parte superior izquierda de la pgina web aunque te
desplaces verticalmente hacia abajo (hemos introducido una altura y anchura desproporcionada para
los elementos h1 y h2 simplemente para forzar que la pgina se expanda en la vertical y en la horizontal
y poder comprobar mejor el efecto que se genera).
Un aspecto importante a tener en cuenta es que si se establece background-attachment: fixed; la
posicin de la imagen de fondo que visualizaremos ya no es la esquina interior superior izquierda del
elemento, sino que es la esquina superior izquierda de la ventana visible en el navegador. Esto puede
hacer que la imagen de fondo no se vea (por haberse desplazado hasta la esquina superior izquierda de
la ventana del navegador, quedando fuera del rea de fondo del elemento), o que aparezca cortada
aparentando ser una visualizacin errnea. Por eso muchos programadores y diseadores web utilizan
background-attachment preferentemente para poner imgenes de fondo al elemento body (cuya rea
de visualizacin coincide normalmente con la ventana del navegador). Si se usa background-attachment
con otros elementos, hay que establecer la posicin adecuadamente para que la visualizacin sea
correcta.
Podran especificarse varias imgenes de fondo y varios comportamientos de esta propiedad, de la
misma forma que vimos para la propiedad background-position.
PROPIEDAD CSS background-attachment

Permite fijar una imagen de fondo fija aunque haya desplazamientos.
Valor por defecto
scroll
Aplicable a
Se hereda
directamente?
No
scroll (comportamiento normal)

esta propiedad
fixed (la imagen se mantiene como fondo an en desplazamientos)

local (la imagen se mantiene como fondo si el elemento tiene barras de
desplazamiento y el usuario se mueve dentro del elemento)
body { background-image: url(http://i.imgur.com/afC0L.jpg);
Ejemplos
background-attachment: fixed; }
OTRAS PROPIEDADES DE FONDO

Adems de las propiedades de fondo que hemos visto, CSS contempla otras menos comunes que son
las siguientes:
a) background-clip: determina la ubicacin del rea de fondo. Sus valores posibles son borderbox, lo cual situa el rea de fondo en la esquina exterior del borde en la parte superior
izquierda, padding-box, lo cual sita el rea de fondo en la esquina interior del borde en la
parte superior izquierda del borde, o content-box, lo cual situa el rea de fondo en la esquina
superior izquierda del contenido quedando excluida el rea de padding. El valor de defecto es
border-box, lo que da lugar a que si hay un color de fondo se site debajo del borde. La
propiedad background-clip afecta tanto al color de fondo como a la imagen de fondo, sin
embargo hay que tener en cuenta que la posicin de la imagen de fondo es la que hemos
indicado al hablar de background-image y no se ve afectada por border-clip. Es decir, la imagen
se mantiene en su posicin a no ser que especifiquemos otra. Con border-clip la imagen podra
verse cortada (si reducimos el rea de fondo). Esta propiedad puede no funcionar
correctamente en navegadores antiguos.
b) background-origin: determina respecto a qu origen se ha de considerar la posicin establecida
mediante la propiedad background-position. Sus valores posibles son border-box, padding-box
y content-box. Su valor de defecto es padding-box, de ah que una imagen se site en la
esquina interior de la parte superior izquierda del borde. Si queremos situar la imagen en la
parte exterior de la esquina (alineada con el borde) basta establecer el background-origin:
border-box;
c) background-size: permite establecer el tamao de las imgenes de fondo. Se pueden utilizar las
palabras clave cover (indica que la imagen debe escalar su tamao manteniendo sus
proporciones hasta que encaje en una dimensin del fondo para cubrir completamente el rea
de fondo; la imagen puede verse cortada), auto (indica que la imagen se mantendr con sus
dimensiones originales si no se ha modificado ninguna de ellas, o sin deformarse en caso de
haber especificado una de las dos dimensiones) contain (indica que la imagen debe escalarse
manteniendo sus proporciones hasta alcanzar una de las dos dimensiones del rea de fondo; la
imagen no se cortar en ningn caso, pero el rea de fondo puede quedar parcialmente
descubierta). Esta propiedad puede no ser reconocida en navegadores antiguos.
La propiedad background-size tambin puede establecerse usando unidades de medida relativas o

absolutas y especificando dos medidas o solo una medida.
Si se especifica solo una medida como background-size: 30%; background-size: 4.5em backgroundsize: 50px, se entiende que esta medida establece el ancho (width) de la imagen. La altura
automticamente se trata como si tuviera valor auto.
Si se especifican dos medidas, la primera de ellas se considerar de aplicacin a la dimensin horizontal
y la segunda a la dimensin vertical. Por ejemplo en background-size: 4.5em 2.25em; la dimensin
horizontal se establece en 4.5em y la vertical en 2.5em.
En el caso de usar porcentajes, el % se calcula respecto a las dimensiones del rea de fondo de la
imagen establecidas por background-origin. Por defecto coincide con el rea de padding, pero puede
cambiarse si se cambia el valor de la propiedad background-origin. Tambin genera una alteracin el
uso de background-attachment: fixed; porque el rea de fondo en este caso es el rea visible de la
ventana del navegador.
PROPIEDAD SHORTAND BACKGROUND

Esta propiedad nos permite establecer de forma conjunta las diferentes propiedades de fondo.
background: { valorColorDeFondo valorImagenDeFondo valorRepeticinImagen valorPosicinImagen
valorSizeImagen valorOriginPosicin ValorClipFondo valorAttachmentFondo } ;
No es necesario seguir un orden concreto para escribir las propiedades. Si se dejan algunos valores sin
especificar, el navegador aplicar los valores por defecto que tengan esas propiedades sin especificar.
Por ejemplo si escribimos: background: { blue url(img1.jpg) } ; los valores correspondientes a la
repeticin, attachment, posicin, etc. sern los valores por defecto para estas propiedades.
Un aspecto importante a tener en cuenta si se usa la propiedad shortand background, es que cualquier
propiedad no especificada se sobreescribe a su valor por defecto anulando los posibles valores
anteriores que se hubieran especificado. Por ejemplo si escribimos:
.content43 {background-repeat: no-repeat; background: url(http://i.imgur.com/afC0L.jpg); } podramos
pensar que la imagen no se a repetir porque hay indicado un valor no-repeat. Sin embargo, la imagen s
se repetir porque aunque no lo hemos indicado especficamente, al incluir una propiedad shortand
con posterioridad a la especificacin inicial de background-repeat, el valor de repeticin se sobreescribe
pasando a ser su valor de defecto (que es repeat, de ah que la imagen s se repetir). Es un aspecto con
el que conviene ser cuidadosos. En principio, si elegimos usar la propiedad shortand, no debemos
realizar otras especificaciones independientes para no incurrir en contradicciones.
El esquema anterior resume las propiedades relacionadas con el fondo (background) CSS. Obviamente
no debemos pretender recordar de memoria todas las propiedades ni todos sus valores posibles o
palabras clave asociadas. No obstante, debemos tener conocimiento de las posibilidades que nos ofrece
CSS para el manejo de fondos y saber buscar informacin y aplicar nuestro conocimiento de la lgica de
CSS cada vez que nos sea necesario. Para ello es conveniente realizar pruebas y escribir cdigo en
nuestro ordenador.
CAPAS DE VISUALIZACIN
Hemos visto que en el box-model o modelo de cajas CSS intervienen diferentes elementos como un
contenido, un borde, un relleno o padding, una imagen de fondo, un color de fondo y un margen.
Cuando varios elementos se superponen unos tienen que visualizarse encima de otros, y de ah que
hablemos de modelo tridimensional o modelo de capas para las cajas CSS. El orden en que se muestran
los elementos es:
a)
b)
c)
d)
El borde se superpone al resto de elementos (capa 1)

El contenido y el padding se sitan debajo del borde (capa 2)
La imagen de fondo se sita debajo del contenido y el padding (capa 3)
El color de fondo y el margen se sitan debajo de la imagen de fondo (capa 4)
EJERCICIO
Crea un documento HTML con 4 elementos div de 400 pxeles de ancho y 400 pxeles de alto, todos
ellos con un margin de 40 pxeles en todas direcciones y un padding de 40 pxeles en todas direcciones.
En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un
background-color diferente. Usa la propiedad background-position para hacer que la imagen est
centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen
mide 100x100 pxeles, deber existir la misma distancia hasta el borde del div en las cuatro
direcciones). Para comprobar si tus respuestas son correctas puedes consultar en los foros

Posicionam
miento CSS: posiition static, relaative, absolute
e, fixed.
POSICION
NAMIENTO CSS
C
Hasta aho
ora conocem
mos que los elementos
e
HTTML se divid
den en dos grandes tiposs: elementos block que
tienden a ocupar el esspacio dispo
onible a todo
o lo ancho y en
e caso de existir
e
varios se sitan un
nos debajo
de otros y elementoss inline que ocupan el espacio necessario dentro
o de una lneea y en caso
o de existir
varios se sitan
s
uno ju
unto a otro en
e la misma lnea (siempre que haya espacio).
Los principales elementos HTML tipo

t
block son:
a)
b)
c)
d)
e)
f)
g)
h)
Divisores: divv
D
Prrafos: p
Fo
ormularios: form
Ttulos: h1, h2
2, h3, h4, h5, h6.
Liistas: ul, ol
Ellementos de
e listas: li
Taablas: table
O
Otros:
center,, pre, tbody, td, th, tr
t
inline so
on:
Los principales elementos HTML tipo
a)
b)
c)
d)
e)
Liinks: a
D
Divisores:
spaan
Im
mgenes: img (aunque este elemento
o tiene caracctersticas esspeciales)
Co
ontroles de formulario: input, label
O
Otros:
strong,, u, select
el elementto body, que engloba todo

Queda fu
uera de la clasificacin
c
t
el espacio disponible en el
dispositivo de visualizacin.
Cuando teenemos distintos elemen

ntos tipo blo
ock cada uno
o se coloca en
e una nuevaa lnea distin
nta a la del
elemento
o anterior, ess decir, se colocan uno deebajo de otro
o:
Bloque1 tiene
t
este co
ontenido de texto
t
Bloque2 tiene
t
este co
ontenido de texto
t
Bloque3 tiene
t
este co
ontenido de texto
t
Cuando teenemos distiintos elemen

ntos en lneaa se colocan uno
u junto a otro:
o
Elemento
oEnLnea1 EleementoEnLn
nea2 Elemen
ntoEnLnea3
om, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.
Adems los elementos en lnea que estn dentro de un bloque se insertan en la misma lnea que el
contenido del bloque. Por ejemplo:
Este texto es un prrafo y esto es un link inline y aqu contina el prrafo.
Recordar que las propiedades width y height slo son aplicables a elementos tipo block y elementos
insertados en una posicin que son reemplazados por un objeto (entre ellos img, input, textarea, select,
object).
Ahora bien, cuando creamos pginas web necesitaremos que elementos de dimensiones determinadas
se siten en posiciones determinadas. Por ejemplo podemos querer tener tres elementos con
dimensiones width y height definidas (por tanto bloques) situados en determinadas posiciones como
vemos en este esquema:
Bloque 1
Bloque 3
Bloque 2
Con el cdigo simple que hemos visto hasta ahora esto no sera posible, ya que unos elementos se
situaran debajo de otros, sin cumplir nuestro objetivo de situarlos en posiciones especficas.
CSS tiene distintas propiedades y posibilidades que nos van a permitir gestionar el posicionamiento de
elementos para crear diseos atractivos y conforme a nuestras necesidades. Comenzaremos el estudio
de estas posibilidades con la propiedad CSS position.
PROPIEDAD POSITION
Esta propiedad nos permite establecer la posicin de un elemento.
selectorElemento {position: especificacinDePosicin; }
PROPIEDAD CSS position

Permite definir el tipo de posicin de un elemento y su comportamiento.
Valor por defecto
static
Aplicable a
Elementos tipo block y algunos elementos inline especiales como img.

static (comportamiento normal o por defecto)
relative (permite que un elemento se desplace respecto a lo que hubiera sido
su posicin normal; el resto de elementos continan en su posicin ignorando al
que se desplaza, lo que puede crear superposiciones; el espacio libre que deja el
elemento queda libre).

esta propiedad
absolute (permite que un elemento se desplace respecto al origen de

coordenadas del primer elemento contenedor posicionado respecto a la
esquina superior izquierda de la ventana de visualizacin; el resto de elementos
actan como si el desplazado no existiera, por lo que su espacio ser ocupado
por otros elementos; puede crear superposiciones)
fixed (permite fijar un elemento en una posicin respecto al origen de
coordenadas del primer elemento contenedor posicionado respecto a la
esquina superior de la ventana de visualizacin; el elemento se mantendr en la
ventana de visualizacin o viewport, siempre en una misma posicin aunque el
usuario se desplace por la web haciendo scroll)
#content1 {position: relative; }

Ejemplos
aprenderaprogramar.com .elementoFijado {position: fixed; }
La posicin absoluta de un elemento que no est dentro de ningn otro se determina respecto a la
parte superior izquierda del elemento html (parte superior izquierda de la ventana donde se visualiza la
pgina web; normalmente coincide con la parte superior izquierda del elemento body).
Si un elemento est dentro de varios contenedores (p.ej. dentro de varios div) el origen de coordenadas
se establece respecto a la esquina superior izquierda del contenedor que tenga un valor de position
establecido y distinto de static o, en caso de no existir ningn elemento contenedor posicionado,
respecto a la esquina superior izquierda del elemento html (parte superior izquierda de la ventana
donde se ve la pgina web). Esto se comprender con los ejemplos de cdigo que veremos.
Los ejemplos de cdigo sobre el uso de esta propiedad los veremos una vez hayamos estudiado algunas
propiedades que se usan habitualmente junto a sta (top, right, bottom y left).
Esta no es la nica propiedad para establecer posiciones de elementos. Hay otras propiedades
importantes como float, que veremos ms adelante.
PROPIEDADES TOP, RIGHT, BOTTOM Y LEFT

Estas propiedades nos permiten definir el desplazamiento de la posicin de un elemento respecto a un
origen de coordenadas y el origen de coordenadas que se toma.
PROPIEDADES CSS top, right, bottom y left

Permiten definir el desplazamiento de un elemento y el origen de

coordenadas que se tomar para el mismo.
Valor por defecto
Auto
Aplicable a
Elementos que estn posicionados (no aplica si la posicin es static).

auto (no hay desplazamiento especificado y como origen de coordenadas se
toma la esquina superior izquierda del elemento padre)

estas propiedades
Una unidad de medida relativa (se admiten porcentajes).

Una unidad de medida absoluta.
#menu1 { position: relative; top: 40px; left: 2em; }

Ejemplos
aprenderaprogramar.com #moduloEGM { position: absolute; bottom: 5%; left: 30px; }
Para elementos con posicin relative estas propiedes definen cunto se desplaza el elemento respecto
a lo que sera su posicin normal.
Para elementos con posicin absolute o posicin fixed estas propiedades definen cunto se desplaza el
elemento respecto a las coordenadas de origen.
Se admiten valores de desplazamientos negativos.
En el caso de usar porcentajes, ste se calcula:
a) Respecto al valor de altura (height) del elemento si se aplican con top bottom.
b) Respecto al valor de anchura (width) del elemento si se aplican con right left.
No tiene sentido utilizar top y bottom al mismo tiempo, porque sera decir que el elemento sube y baja.
Hay que utilizar slo una de estas dos propiedades. Lo mismo podemos decir para right y left.
EJEMPLOS DE POSICIONAMIENTO RELATIVO

A continuacin veremos algunos ejemplos de uso de las propiedades anteriormente especificadas. Para
ello vamos a utilizar el cdigo HTML de base que venimos empleando a lo largo del curso.
Posicionam
e, fixed.
/* Curso CSS estilos aprenderap

programar.com*/
*{ffont-family: arial; }
bo
ody {width: 600
0px;}
divv {border-style:: solid;}
divv div {border-sttyle: dashed; bo
order-color: greeen; margin: 5p
px;}
divv div div {bordeer-style: dashed
d; border-color:: red; margin: 5px;}
5
Con esto lo nico quee hemos hech

ho es poner bordes y mrgenes para visualizar las cajas que conforman
c
la pgina web. El resultado debe ser
s similar a este:
Vemos un
n div en color verde correspondientee al men (de
entro del cuaal hay otro d
div en color rojo
r
con el
texto Meen, una ln
nea generadaa por el <hr/>> y una lista ul con los iteems de men
).
Accede al cdigo HTM
ML y establecce como id de dicho div menu1.
El cdigo HTML de ese fraggmento de

web qued
dar as:

<d
div id="menu1">
<d
div>Men</div>>
<h
hr/>
<u
ul>
<lii><a href="#">Inicio</a></li>
<lii><a href="libro
os.html" >Libros de programaccin</a> </li>
<lii><a href="curssos.html" >Curssos de programacin</a> </li>
>
<lii> <a href="hum
mor.html" >Hum
mor informtico
o</a> </li>
<//ul>
<//div>

mos a modifficar la definicin de estilos CSS paraa hacer lo sigguiente: mod

dificaremos la
l posicin
Ahora vam
del elemeento con id menu1
parra que se desplace 50 pixxeles hacia abajo

a
y 40 piixeles hacia la derecha
respecto a lo que deb
ba ser su posicin origin
nal. Adems vamos
v
a haccer que el seegundo elemento de la
om, 2006-2029
Posicionam
e, fixed.
lista de ittems de meen se despllace 150 pixxeles hacia laa izquierda respecto a lo que debiera ser su
posicin normal
n
y el tercer
t
elemeento de la lissta 50 pixeless a la izquierrda respecto
o de lo que debiera
d
ser
su posici
n normal. Paara ello usam
mos este cd
digo y visualizzamos el ressultado:
programar.com*/
bo
ody {width: 600
0px;}
px;}
5
#m
menu1 { positio
on:relative; top::50px; left: 40px; }
li:n
nth-child(2) {po
osition: relativee; right: 150px;}}
li:n
nth-child(3) {po
osition: relativee; right: 50px;}
Comprobaamos que la caja del divv se ha despllazado (con todo

t
su conttenido). Iguaalmente los elementos
e
de lista in
ndicados se han
h desplazaado. Compro
obamos algunas cosas cu
uriosas: al deesplazar la caaja del div,
sta sale por fuera dee las dimenssiones del elemento bod
dy y se ha su
uperpuesto ccon la caja que
q exista
A
Al
desplazar
el
segundo
e
elemento
de
e
lista
150
px
p
hacia
la
iz
zquierda,
el
e
elemento
ha
a quedado
debajo.
cortado y no se visualiza parte de
d l (si el desplazamie
ento hubieraa sido todavva mayor, no se vera
ninguna parte
p
de estee item de la lista aparenttando haberr desaparecido. El terceer elemento de la lista
se ve desp
plazado pero
o no se ha saalido de la paantalla.
Para desp
plazar hacia abajo usamos top y parra desplazar hacia la derecha usamo
os left. Pued
de parecer
confuso porque
p
left significa
s
izqu
uierda, pero usar left no
o significa d
desplazar haacia la izquie
erda, sino
respecto
o a lo que sera la posicin
p
normal de su
u lateral izq
quierdo, deesplazar lo indicado,
correspon
ndiendo un valor
v
positivo
o a desplazaar hacia la derecha y un
n valor negattivo a despllazar hacia
la izquierd
da.
om, 2006-2029
EJEMPLOS DE POSICIONAMIENTO ABSOLUTO

Seguimos trabajando sobre el HTML y hoja de estilos anterior. Define los siguientes estilos css y
visualiza el resultado en tu navegador:
body {width: 600px;}
div {border-style: solid;}
div div {border-style: dashed; border-color: green; margin: 5px;}
div div div {border-style: dashed; border-color: red; margin: 5px;}
#menu1 { position:absolute; }

body {width: 600px;}
#menu1 { position:absolute; left:0; top:0; }
El cdigo #menu1 { position:absolute; } equivale a #menu1 { position:absolute; left: auto; top: auto; } lo
que supone que se toma como origen de coordenadas el del elemento padre. De ah que en la imagen
de la izquierda se vea la caja en su posicin natural, pero al estar posicionada de forma absoluta es
ignorada por el resto de elementos y su espacio es ocupado como si no estuviera ah.
El cdigo #menu1 { position:absolute; left:0; top:0; } significa que el origen de coordenadas ser el del
primer contenedor posicionado o, si no existe, la esquina superior izquierda de la ventana de
visualizacin. En este caso se toma la esquina superior izquierda de la ventana como origen de
coordenadas.
Cuando se establece position en absolute o fixed el ancho del bloque se ajusta al contenido (excepto si
est establecido especficamente mediante la propiedad width).
Prueba a cambiar los valores de left y top y comprueba sus resultados. Por ejemplo si estableces valores
left: -50px; top: -50px; vers cmo la caja se sale de la pantalla por la esquina superior izquierda. Si
estableces right:0; top:0; vers que la caja se sita en la parte superior derecha de la pantalla.
Supn ahora que quieres usar como origen de coordenadas absolutas la esquina superior izquierda del
div contenedor del que estamos usando como ejemplo. Ese div contenedor tiene, aparte del men,
varias cosas ms como texto con imgenes y un formulario.
Para hacer que el div del men tome para origen de coordenadas el div contenedor en lugar de la
esquina superior izquierda de la pantalla hemos de posicionar el contenedor. Posicionarlo significa
darle un valor de position distinto del valor por defecto (static). Esto podemos hacerlo de varias
maneras. Por ejemplo podramos poner un id al div contenedor y aplicarle una regla nombreEscogido
{position: relative; }. No es necesario establecer un desplazamiento ya que nosotros ahora lo nico que
queremos es que dicho elemento se identifique como un elemento posicionado, y para ello establecer
su propiedad position como relative es suficiente.
Tambin podemos hacerlo como vemos en este cdigo:
body {width: 600px; border-style:dotted;}
div {border-style: solid; position:relative;}
#menu1 { position:absolute; left:150px; top:30px; }
Hemos establecido para todos los div su propiedad position como relative. Al ir a realizar el
posicionamiento del elemento con id menu1 el navegador busca el primer div contenedor posicionado
y realiza el desplazamiento respecto a su esquina superior izquierda. Comprueba la diferencia al
mantener todos los div con position:relative; y visuliza cmo cambia el resultado respecto a eliminar
ese posicionamiento para todos los div: el origen de coordenadas que se toma es distinto.
EJEMPLOS DE POSICIONAMIENTO FIXED

Seguimos trabajando sobre el HTML y hoja de estilos anterior. Escribe y comprueba los resultados con
este cdigo:
body {width: 600px; height:2400px; border-style:dotted;}
#menu1 { position:fixed; left:50; top:0;}
Hemos establecido un valor de height para body aleatoriamente grande para forzar que aparezcan
barras de scroll vertical en la pgina web.
Al hacer scroll, comprobars que la caja del elemento con id menu1 se mantiene fija en una posicin de
la pgina aunque nos desplacemos con el scroll.
El comportamiento del origen de coordenadas con fixed es igual al que hemos explicado con absolute.
EJERCICIO 1
Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas
contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 pxeles
de margin en todas direcciones, 30 pxeles de padding en todas direcciones y un background color
diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente
manera:
a) El div 1 deber desplazarse 200 pxeles a la derecha y 100 pxeles hacia abajo respecto a lo que sera
su posicin normal.
b) El div 2 deber desplazarse 50 pxeles a la izquierda y 50 pxeles hacia arriba respecto a lo que sera
su posicin normal.
c) El div 3 deber desplazarse 450 pxeles a la derecha y 300 pxeles hacia arriba respecto a lo que sera
su posicin normal.
respuestas
son
correctas
puedes
consultar
en
los
foros
EJERCICIO 2
Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3), la primera con unas
dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y
un background color verde. La tercera con dimensiones 100x100px y background color azul. Usando
posicionamiento absoluto establece para el div2 y el div3 el mismo origen que para el div1, de modo
que el efecto generado sea ver un cuadrado amarillo dentro del cual hay un cuadrado verde dentro del
cual hay un cuadrado azul. Para comprobar si tus respuestas son correctas puedes consultar en los
foros aprenderaprogramar.com.
EJERCICIO 3
Define un documento HTML con varios div que contengan suficiente texto como para que la pgina se
muestre con scroll (barras de desplazamiento). El primero de los div debe contener el texto <<Esta
pgina web utiliza cookies. Si contina navegando acepta el uso de cookies.>>, un valor height (altura)
de 100 pxeles y color de fondo amarillo. Usando posicionamiento fixed, fija este div en la parte
superior de la pgina de modo que se contine visualizando an cuando hagamos scroll. Para
comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Propiedad display
d
CSS.
DISPLAY CSS
C
Los elemeentos HTML se dividen en
e dos grandes tipos: elementos blocck que tiendeen a ocupar el espacio
disponiblee a todo lo ancho
a
y en caaso de existiir varios se sitan
s
unos debajo
d
de ottros y elementos inline
que ocupan el espacio necesario dentro de una
u lnea y en
e caso de existir
e
varios se sitan un
no junto a
q haya esp
pacio). La propiedad disp
play nos perrmite alterar el tipo de
otro en laa misma lnea (siempre que
caja con que
q se muesttra un elemeento.
Sabemos que por ejem

mplo los elem
mentos tipo ttulo como h1 son elem
mentos blockk, y por tanto
o de forma
natural tienden a occupar todo el
e ancho de la pgina. Po
or el contrario elementoss como los links a o las
imgeness son elemen
ntos inline. Veamos cmo
o la propiedaad display peermite alteraar estas cualidades.
AD DISPLAY
PROPIEDA
Esta prop
piedad nos permite
p
estaablecer el tip
po de caja que
q el naveggador empleear para vissualizar un
elemento
o, siendo los tipos
t
ms co
omunes inline y block, au
unque existen
n bastantes otros.
e del tipo:
selectorElemento {display: especificcacinDeVisualizacin; }
PROP
PIEDAD CSS display
d
Funcin de la propie
edad
Permite definir el tipo de po

osicin de caaja para visuaalizar un elem
mento.
Valor po
or defecto
Dep
pende del elemento
e
(inline para elementos inline y block para
elem
mentos tipo block)
Aplicable a
Tod
dos los elemeentos.
inlin
ne (el elementto se muestraa en una caja inline)
i
blocck (el elementto se muestra en una caja block).
b
non
ne (el elementto no se muestra; el efecto
o es como si no existiera, por lo que
su espacio
e
ser ocupado por otros elemento
os)

opiedad
esta pro
list--item (el elem

mento se comp
porta como si fuera un elem
mento li)
inlin
ne-block (el elemento
e
gene
era una caja block
b
pero qu
ue se comportta como si
fuerra inline admiitiendo otros elementos en
n la misma ln
nea; el compo
ortamiento
se asemeja
a
al de los elementoss img)
Otro
os que llevan a que el elem
mento simulee el comportaamiento de ottro (inlinetable, table, table-caption, tab
ble-cell, table-column, tablle-column-gro
oup, tablefootter-group, tab
ble-header-gro
oup, table-row
w, table-row-ggroup)
om, 2006-2029
Propiedad display
d
CSS.
PROP
PIEDAD CSS display
d
Otro
os avanzados (flex, inline-flex, grid, inlinee-grid, run-in))
inhe
erit (se heredaan las caracte
ersticas del elemento padree).
#content1 {displaay: inline;}
Ejemplos
aprende
eraprogramaar.com .elementoMonter {display: bloock;}
merosos valo
ores, pero lo
os ms usado
os son inlinee, block e inline-block.
La propiedad display admite num
os tres valo
ores los que debemo
os aprenderr ahora. El resto loss iremos co
onociendo
Son esto
progresivaamente a medida
m
quee nos puedaan resultar necesarios o cuando profundicem
mos en el
conocimieento de CSSS. Tener en cuenta tam
mbin que estas
e
otras propiedades
p
a que nos referimos
pueden no ser recono
ocidas por muchos naveggadores.
mos algunos ejemplos
e
de uso de las propiedades
p
nte especificadas. Para
A continuacin verem
anteriormen
os a utilizar el
e cdigo HTM
ML de base que
q venimos empleando a lo largo deel curso.
ello vamo
Define loss siguientes estilos
e
css y visualiza
v
el resultado en tu navegado
or:
programar.com*/
*{ffont-family: arial;}
bo
ody {width:600p
px;}
px;}
5
h1
1 {border-style: dashed; bordeer-color: green;}
h2
2 {border-style: dashed; bordeer-color: red; }
li {border-style:
{
d
dotted;
border-width:thin; borrder-color:brow
wn; margin: 3pxx;}
ho es poner bordes y mrgenes para visualizar las cajas que conforman

c
Con esto lo nico quee hemos hech
la pgina web. El resultado ser siimilar a este::
om, 2006-2029
Propiedad display CSS.
Vemos un div en color verde correspondiente al men (dentro del cual hay otro div en color rojo con el
texto Men, una lnea generada por el <hr/> y una lista ul con los items de men).
Accede al cdigo HTML y establece como id de dicho div menu1.
EJERCICIO RESUELTO
Sin ejecutar cdigo, indica cules deberan ser los resultados obtenidos al aadir las lneas que se
indican en la tabla al archivo CSS. Completa la tabla primero sin ejecutar el cdigo. Luego, compara tu
solucin con la expuesta en la solucin.
Fragmento de cdigo aadido

li {display: inline;}
img {display: block;}
#menu1 {display:none;}
h2 {margin-left:30px; display:list-item;}
li {display: inline-block;}
ul {display: table; }
li {display: table-cell; padding:10px;}
Resultado
Propiedad display CSS.
SOLUCIN
Prueba a visualizar los resultados en tu navegador al aadir estos fragmentos de cdigo y comprueba
que obtienes los mismos resultados que se indican a continuacin:
Fragmento de cdigo aadido
Resultado
li {display: inline;}
Los elementos de item de men que son li y que ocupaban cada

uno una lnea, se ponen en la misma lnea. Slo cuando no caben
en una lnea continuan en la siguiente.
img {display: block;}
Las imgenes que estaban en una sola lnea unas junto a otras se
sitan cada una en una lnea comportndose como elementos
block
#menu1 {display:none;}
El men (con sus cajas interiores, items de men, etc.)

desaparece completamente y su espacio es ocupado por el texto
Aprender a programar es
h2 {margin-left:30px; display:list-item;}
El ttulo h2 aparece con una vieta como si fuera un elemento li

de una lista
li {display: inline-block;}
A diferencia de establecer slo inline, si un elemento salta de

lnea lo hace completamente por ser un bloque. Su texto no
puede cortarse entre lneas como ocurrira si fuera inline.
ul {display: table; }
li {display: table-cell; padding:10px;}
Hace que la lista se comporte como una tabla donde cada item
es una celda.
Hay una curiosidad. En la imagen donde vimos las cajas podemos observar que el elemento h2 tiene un
espacio libre por arriba y por debajo, que corresponde a un margin-top y margin-bottom automtico
que aplica el navegador por defecto para este tipo de elementos. Si escribimos h2 {display: inline;}
comprobamos no slo que la caja deja de ocupar todo el ancho disponible sino que los mrgenes
desparecen Por qu? Porque en los elementos inline no son aplicables (o se ignoran si estn
establecidas) ciertas propiedades como width, height, margin y float. De este modo, al cambiar el
formato de caja no slo estamos afectando a que los elementos ocupen una lnea a todo lo ancho o no,
sino tambin otras propiedades que pueden quedar desactivadas cuando se cambia el tipo de caja
usando la propiedad display. Tener en cuenta tambin que los elementos inline slo pueden contener
otros elementos inline o texto en su interior.
Otra curiosidad. Posiblemente no obtengas nada coherente, pero comprueba qu ocurre si como css
utilizas esta nica declaracin *{font-family: arial; display: inline-block;}
Si te surgen dudas puedes consultar en los foros aprenderaprogramar.com.
Propiedad float
f
y posicion
namiento flotan
nte CSS.
POSICION
NAMIENTO FLOTANTE
F
Aunque ya
y conocemos la propieedad positio
on, que nos permite orgganizar la p
posicin de elementos
e
dentro dee una pginaa web, esta propiedad
p
no es lo suficcientemente flexible com
mo para lograr diseos
atractivoss y que se visualicen correctamen
c
nte en todo
o tipo de dispositivos. Vamos a estudiar
e
el
denominaado posicionamiento flo
otante, quee ampla las posibilidades para organ
nizar los elem
mentos en
la web.
onamiento flotante pued

de resultar un
u poco dessconcertantee o confuso cuando se empieza
e
a
El posicio
trabajar con
c l. Comp
prender su funcionamien
f
nto y posibilidades requ
uiere tiempo
o y bastantess horas de
estudio y ejercicio. Hay
H que teneer paciencia y practicar para llegar a comprenderlo. Sin embargo, a
medida que se conocce y se adquiere experieencia resultar fcil trabaajar con l y se compren
ndern las
ventajas que
q supone, de ah que sea
s la forma de posicionaamiento mss utilizado.
Lo primerro que trataaremos de abordar
a
es laa definicin de flotar.. El concepto de posicio
onamiento
flotante se
s cre inicialmente paara lograr que el texto se situara alrededor d
de las imge
enes y no
necesariamente debajo de ellas.
Crea un archivo HTMLL con este co
ontenido:
<h
html>
<h
head>
<title>Portal web
b - aprenderaprrogramar.com<</title> <meta charset="utf-8"
c
>
<liink rel="stylesh
heet" type="texxt/css" href="esstilosCU01034D
DA.css">
<//head>
<b
body>
<d
div>
<p
p>Aqu un prraafo de texto situ
uado antes de la
l imagen, denttro de un div co
ontenedor</p>
<im
mg src="http:///i.imgur.com/affC0L.jpg" alt="N
Notepad++" titlle="Notepad+++, un til editor de texto">
<p
p>Aqu otro prrrafo de texto. CSS
C es un lengu
uaje utilizado en
n la presentaci
n de documen
ntos HTML.
Un
n documento HTML
H
viene siendo coloquialm
mente una pggina web. As,, podemos deccir que el lengu
uaje
CSSS sirve para do
otar de presentaacin y aspecto
o, de estilo, a una pgina weeb.
<//p>
<//div>
<//body>
<//html>
Y un archivo de hoja de estilos (nosotros estaamos usando

o el nombre de archivo eestilosCU010
034DA.css)
con este cdigo
c
que nos
n permite ver
v el borde de la caja co
ontenedora:
programar.com*/
bo
ody {width: 410
0px; border-style: dotted; }
divv {border-style:: solid; margin: 20px; padding: 5px; backgrou
und-color: yellow;}
p {text-align:
{
justtify; margin:15p
px;}
im
mg {margin:10pxx;}
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.
Se llama flotar un elemento a establecer un comportamiento especial para l definiendo un valor

para la propiedad CSS float.
selectorElemento {float: valorFloat; }
La propiedad float slo admite 3 valores: none (el elemento no flota), right y left.
El valor none significa que el elemento se comportar de la forma habitual dentro del flujo del
documento HTML, y es el valor por defecto. Un elemento con float: none; decimos que no es flotante.
El valor right har que el elemento se desplace hacia la derecha. Se desplazar dentro de su lnea de
posicin y dentro de su contenedor tanto como sea posible, y que los elementos que vienen a
continuacin se situarn envolvindolo (en este caso lo rodearn por la izquierda, ya que el elemento
estar completamente a la derecha). Los elementos anteriores no cambian su comportamiento.
El valor left har que el elemento se desplace hacia la izquierda. Se desplazar dentro de su lnea de
posicin y dentro de su contenedor tanto como sea posible y que los elementos que vienen a
continuacin se situarn rodendolo (en este caso lo rodearn por la derecha, ya que el elemento
estar completamente a la izquierda). Los elementos anteriores no cambian su comportamiento.
La propiedad float no se puede usar para centrar elementos en una pgina web. No existe un valor
center para esta propiedad. Unicamente sirve para arrastrar elementos hacia la derecha o hacia la
izquierda, tanto como sea posible, generando un cambio en el flujo del documento HTML.
Ahora visualiza el resultado modificando la regla css del cdigo anterior para elementos img de las
siguientes maneras:
1) img {margin:10px; float:none;}
2) img {margin:10px; float:right;}
3) img {margin:10px; float:left;}
/*Elemento img no es flotante */

/*Elemento img es flotante */
/*Elemento img es flotante */
Visualiza los resultados, que debern ser similares a estos:
Comprobamos cmo con float:none; para la imagen, el comportamiento es el normal. Con float: left; el
prrafo anterior a la imagen no cambia su comportamiento. Sin embargo, el prrafo posterior se sita
envolviendo (wrapping) al elemento flotante. Con float: right; ocurre lo mismo, pero en este caso la
imagen est lo ms a la derecha posible dentro de su contenedor y el texto del prrafo que viene
debajo envuelve la imagen por su lado izquierdo.
Un aspecto importante es que la propiedad float slo debe usarse con elementos tipo block, o quizs
sera preferible decir sobre elementos que tengan una anchura definida (valor width establecido. Un
valor width establecido significa que lo habremos especificado a travs de cdigo sobre un elemento
block, o que el elemento es un elemento img sin width especificado pero que tiene un valor width
implcito, el ancho de la propia imagen).
Ahora bien, si decimos que slo debe usarse con elementos tipo block cmo es que hemos aplicado
con xito la propiedad a un elemento img que es un elemento inline? La explicacin es que cuando se
aplica la propiedad float sobre un elemento, ste automticamente pasa a comportarse como una caja
tipo block. Dicho esto podramos pensar que tambin podramos aplicarle la propiedad float a un
prrafo en el ejemplo anterior. La respuesta es: no. No podemos, o al menos no debemos, porque los
prrafos del ejemplo anterior an siendo block no tienen un ancho especificado. La propiedad float
slo debe aplicarse a elementos con un ancho (width) definido explcita o implcitamente. Si se aplica
la propiedad float a un elemento sin ancho especificado podemos tener resultados impredecibles, o
diferentes segn el navegador empleado. Por tanto no debemos hacerlo.
CAJAS ENVOLVENTES EN TORNO A UN ELEMENTO FLOTANTE

Hemos comprobado cmo un elemento como un prrafo envuelve a un elemento flotante como una
imagen. La pregunta que nos planteamos ahora es: cul es la caja del prrafo envolvente? Lo podemos
visualizar si en el anterior cdigo CSS usamos estas reglas:
p {text-align: justify; margin:15px; border-style:solid; border-color:grey;}
img {margin:10px; float:left;}
En la imagen vemos la respuesta: el elemento flotante ha salido del flujo normal del documento. La caja
del elemento envolvente tiene su forma normal y se encuentra por debajo del elemento flotante.
Los bordes, imgenes de fondo y colores de fondo de los elementos envolventes se sitan debajo de
los elementos flotantes a los que envuelven.
CUNTOS ELEMENTOS ENVUELVEN A UN ELEMENTO FLOTANTE?

En el ejemplo que venimos viendo un prrafo envuelve a la imagen que ha tomado posicionamiento
flotante. Pero qu ocurrira si tenemos varios prrafos de pequeo tamao? El primero envuelve y los
dems siguen su flujo normal o todos los siguientes elementos van envolviendo?
Vamos a modificar el fragmento de cdigo HTML de la etiqueta body as:
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<p>Aqu primer prrafo tras la imagen</p> <p>Aqu segundo prrafo tras la imagen</p>
<p>Aqu tercer prrafo tras la imagen</p> <p>Aqu cuarto prrafo tras la imagen</p>
<p>Aqu quinto prrafo tras la imagen</p>
</div>
</body>
Y el cdigo CSS lo dejaremos as:

body {width: 510px; border-style: dotted; }
div {border-style: solid; margin: 15px; padding: 5px; background-color: yellow;}
Al comprobar el resultado, vemos que todos los elementos a continuacin de un elemento flotante
proceden a envolverlo por un lateral mientras haya espacio para ello. Podemos hacer que los
elementos debajo de un elemento flotante dejen de envolverlo a partir de un elemento dado usando la
propiedad clear, que explicaremos a continuacin.
EJERCICIO
Para cada una de las siguientes afirmaciones indica si es verdadera o falsa, y justifica brevemente tu
respuesta:
a) La propiedad float puede tomar cuatro valores: top, right, bottom y left.
b) float es una propiedad que nos permite maquetar pginas web (documentos HTML).
c) Usando float: center; podemos centrar el contenido de un elemento respecto de su caja
contenedora.
d) Un elemento flotante sale del flujo normal de posicionamiento de elementos en una pgina web.
e) Todos los elementos a continuacin de un elemento flotante lo envuelven, a no ser que
especifiquemos lo contrario usando la propiedad clear.

respuestas
son
correctas
puedes
consultar
en
los

foros
Propiedad float
f
y posicion
namiento flotan
nte CSS.
POSICION
NAMIENTO FLOTANTE
F
Hay variaas cuestionees sobre el posicionamiento flotantte que an debemos rresolver. Porr ejemplo,
veremos cmo usand
do la propiedad clear po
odemos deffinir que un elemento y aquellos qu
ue vengan
d este debeen dejar de envolver al elemento flotante. Tam
mbin veremos qu ocurrre cuando
despus de
varios elementos conssecutivos se flotan.
mer lugar la propiedad float:

Recordareemos en prim
PRO
OPIEDAD CSSS float
Funcin de la propie
edad
o especial paara un eleme

ento, que
Permite estableecer un comportamiento
es desplazado
d
tan a la dereccha o izquierrda como seaa posible y admite ser
envvuelto por ottros elementos.
Valor po
or defecto
non
ne
Aplicable a
Elem
mentos con un ancho, esspecificado o implcito co
omo en imggenes.
non
ne (el elementto tendr com
mportamiento normal)

opiedad
esta pro
righ
ht (el elementto se desplazaa a la derechaa tanto como es posible y admite
a
ser
envuelto).
left (el elemento
o se desplaza a la izquierdaa tanto como es posible y admite
a
ser
envuelto).
inhe
#content1 {float: left;}

Ejemplos
aprende
eraprogramaar.com .elementoMonter {float: right;}
mo si a un eleemento com
mo una imageen se le aplicaba un valo
or de float
En la entrrega anterior vimos cm
distinto de none, los elementos
e
a continuacin de l (en nuestro
n
ejem
mplo prrafoss) lo envolvaan.
om, 2006-2029
PROPIEDAD CLEAR
La propiedad clear indica si un elemento y los que le siguen pueden envolver a un elemento flotante
precedente y cmo (por la izquierda, por la derecha o por ninguno de los dos lados).
selectorElemento {clear: valorAsignado; }
PROPIEDAD CSS clear

Permite establecer si un elemento y los que le siguen debe envolver

(wrap) a un elemento flotante precedente y cmo.
Valor por defecto
none
Aplicable a
Elementos tipo block.

none (el elemento y los que le siguen envolver al elemento flotante anterior)
left (el elemento y los que le siguen no envolvern a un elemento flotante
anterior cuya propiedad float sea left; no habr elementos a la derecha del
flotante).

esta propiedad
right (el elemento y los que le siguen no envolvern a un elemento flotante

anterior cuya propiedad float sea right; no habr elementos a la izquierda del
flotante).
both (el elemento y los que le siguen no envolvern a un elemento flotante
anterior por ninguno de los dos lados; reestablece el flujo normal)
#content1 {clear: left;}

Ejemplos
aprenderaprogramar.com .elementoMonter {float: right;}
Usaremos este cdigo para probar la propiedad:

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01035DA.css">
</head>
<body> <div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<p>Aqu primer prrafo tras la imagen</p> <p>Aqu segundo prrafo tras la imagen</p>
<p id="tercero">Aqu tercer prrafo tras la imagen</p>
<p>Aqu cuarto prrafo tras la imagen</p> <p>Aqu quinto prrafo tras la imagen</p>
</div> </body> </html>
Y el cdigo CSS lo dejaremos as (pon el nombre adecuado al archivo css):

body {width: 510px; border-style: dotted; }
div {border-style: solid; margin: 15px; padding: 5px; background-color: yellow;}
Ahora probaremos a aadir estas reglas y comprobar el resultado:

a) #tercero {clear: both;} : comprobaremos cmo el prrado con id=tercero que corresponde al
prrafo cuyo texto es Aqu tercer prrafo ya no flota a la derecha de la imagen, sino que se
sita debajo de ella restableciendo el comportamiento normal.
b) #tercero {clear: right;} : comprobaremos cmo el prrafo con id=tercero se mantiene
flotando en torno a la imagen. Por qu? Porque clear: right; da lugar a que los elementos no
floten a la izquierda de un elemento con valor de float right. Como en este caso no tenemos un
elemento con valor de float right, este cdigo no genera ningn efecto.
c) #tercero {clear: left; } : comprobaremos cmo el prrado con id=tercero que corresponde al
prrafo cuyo texto es Aqu tercer prrafo ya no flota a la derecha de la imagen, sino que se
sita debajo de ella. Por qu? Porque clear: left; da lugar a que un elemento y los que le
siguen dejen de envolver a un elemento anterior cuyo valor de float sea left, como es el caso
que nos ocupa.
Es fcil intuir que clear es una propiedad que se usa en combinacin con la propiedad float para crear
diseos atractivos.
QU ENVUELVE A UN ELEMENTO FLOTANTE Y CUNDO LO ENVUELVE?

El posicionamiento flotante tiene diversas peculiaridades que debemos ir conociendo poco a poco.
Vamos a emplear este cdigo HTML:
<html> <head>
<link rel="stylesheet" type="text/css" href="estilosCU01035DB.css">
</head>
<body>
<div>
<p>Un texto antes de las cajas</p>
<div id="caja1">Caja 1</div>
<div id ="caja4">Caja 4</div>
<p>Un texto despus de las cajas</p>
<div class="limpiador"></div>
</div> </body>
</html>
Y el siguiente cdigo css de partida (ponle el nombre de archivo adecuado):
Propiedad float
f
y posicion
namiento flotan
nte CSS.
/* Cu
urso CSS estiloss aprenderaprogramar.com*/
*{fon
nt-family: arial;}
bodyy {width:410px;; border-style: dotted;}
d
div {b
border-style: so
olid; margin:7px; background--color: #FFEFD5
5; }
div div
d {padding: 5p
px; width: 60px;;}
p {margin:5px;}
.limp
piador{padding:0; border-stylee:none;}
#cajaa1{ border-colo
or:red; } #caja2{{ border-color:b
blue;} #caja3{ border-color:gre
b
een;} #caja4{bo
order-color:oran
nge;}
La situaci
n de partida es esta:
Ahora vam
mos a realizaar este camb
bio en el cdigo CSS: #caja1{ border-ccolor:red; flo
oat:right; }
Al estableecer el valor de float right comprobam
mos que la caja
c 1 se va hacia
h
la dereccha tanto co
omo puede
saliendo del
d flujo norrmal del documento. La caja 2 se sita en la lneea en que see encontrabaa la caja 1,
ocupando
o la posicin natural qu
ue le corresp
pondera si no existiera laa caja 1, de h
hecho pasa algo similar
a esto porque la caja 1 ha salido del
d flujo norm
mal y la caja 2 ignora a la caja 1. A
Ahora bien, laa caja 2 no
or qu? En reealidad la cajja 2 s es envvolvente de la caja 1, lo que
q ocurre
se ve que envuelva a la caja 1 Po
es que no
o hay texto para apreciaar el efecto.. Alarga el te
exto corresp
pondiente all div de la caja 2 para
comprobaar el efecto. Qu ocurre? Que el teexto se alargga hacia abajjo tratndosse de adaptaar al width
definido para la cajaa, con lo cu
ual tampoco
o comprobamos que haaya comporrtamiento en
nvolvente.
o: #caja2{ borrder-color:bllue; width:39
90px;}
Modifica as el cdigo
omprobar qu
ue el texto de la caja 2 que llega a confluir ccon la caja 1 tiene un
Ahora s podemos co
comportaamiento envo
olvente.
om, 2006-2029
Conclusin: el comportamiento envolvente no se aprecia si no existe texto y anchura suficiente para

que se pueda apreciar. En caso de no existir texto y anchura suficiente, el documento se muestra como
si el flujo normal continuara ignorando al elemento flotante.
A la pregunta Qu envuelve a un elemento flotante? Podemos responder que lo que envuelve a un
elemento flotante es el texto de los elementos que vengan a continuacin de l. Repetimos: lo que
envuelve es el texto, no envuelven las cajas ni imgenes ni otro tipo de elementos, slo texto.
Cundo envuelve el texto de un elemento posterior a un elemento flotante? Cuando existe ancho
(width) suficiente para que el siguiente elemento alcance el borde del elemento flotante y cuando el
texto tiene longitud suficiente como para poder apreciar el efecto.
QU OCURRE SI NO HAY ESPACIO SUFIENTE PARA ENVOLVER?

Sobre el cdigo inicial que habamos planteado, vamos ahora a realizar este cambio en el cdigo CSS:
#caja1{ border-color:red; float:left; }
Observaremos algo extrao: la caja 2 parece que no envuelve a la caja 1. El texto de la caja 2 aparece
debajo del texto de la caja 1. Qu ocurre? Que el texto de la caja 2 para poder situarse a la derecha del
texto de la caja 1 necesita disponer de un ancho suficiente. Si no dispone de ancho, pasa a la siguiente
lnea (agrandando el tamao de su caja). Basta darle el ancho suficiente para que se vea cmo el texto
de la caja 2 envuelve al texto de la caja 1 por su derecha.
Modificaremos el cdigo as: #caja2{ border-color:blue; width:250px;}
Con ello comprobamos cmo el texto de la caja 2 envuelve a la caja 1.
Muchas veces un programador o diseador web nos ha planteado por qu el texto no envuelve a una
imagen HTML u otro tipo de elemento. Aqu est la respuesta. Cuando no hay espacio suficiente para
envolver el texto se sita debajo del elemento flotante.
Propiedad float
f
y posicion
namiento flotan
nte CSS.
QU OCU
URRE SI APLLICAMOS FLO
OAT A VARIO
OS ELEMENT
TOS CONSECU
UTIVOS?
Si aplicam
mos float a varios elem
mentos conseecutivos, loss elementoss se van arrrimando uno
os a otros
mientras exista espacio suficientee. Cuando ya no queda esspacio, pasarrn a la siguiente lnea.
Modifica el cdigo in
nicial que heemos usado as: #caja1{ border-colo
or:red; float:left; } #caja2{ bordercolor:bluee; float: left;}} #caja3{ borrder-color:grreen; float: le
eft;} #caja4{b
border-color:orange; floaat: right;}
El resultado lo interpretamos de la siguientee manera. Laa caja 1 se sita tan a laa izquierda como
c
le es
e decir, pegaada al lmitee del conteneedor. La cajaa 2 trata de situarse
s
tan a la izquierd
da como le
posible, es
es posiblee, pero al encontrar
e
un
n elemento flotante ya posicionado
o no puede pegarse al borde del
contenedor, sino que se alinea junto al elemeento flotante
e que se ha encontrado.
e
La caja 3 se comporta
c 4, en cam
mbio, se sita tan a la deerecha como le es posiblee.
igual. La caja
El prrafo
o Un texto despus
d
de las cajas traata de envollver al ltimo
o elemento flotante (la caja 4). Su
texto com
mienza en la vertical lnea que sera su posicin natural si nin
nguna de lass 4 cajas exisstieran (ya
que han salido
s
del flu
ujo normal) y en la horizo
ontal comien
nza desde que un elemeento float de
eja espacio
suficientee para poderr insertarse. Trata de avanzar para envolver
e
a laa caja 4, perro al no haber espacio
disponiblee salta a la siiguiente lnea.
Elimina ah
hora los prrrafos Un texto antes dee las cajas y Un texto despus
d
de laas cajas y comprueba
el resultad
do (mantiendo el posicio
onamiento flotante de laas cuatro cajas, tres a la izquierda y la
l cuarta a
la derechaa).
Te podrss encontrar con
c algo as:
Qu est ocurriendo
o? Que al salir del flujo normal los ele
ementos flottantes dejan
n de ocupar espacio
e
en
su caja co
ontenedora de
d forma qu
ue el valor heeight de la caja
c conteneedora puede llegar a haccerse nulo.
Esto en allguna ocasi
n puede quee ni siquiera lo notemos.. No obstante, en alguno
os casos como aquellos
donde ten
nemos un borde, color de fondo o imagen de fondo
f
para la
l caja conteenedora pue
ede ser un
problemaa.
Cmo evvitar que la caja
c
conteneedora no inccluya a las caajas flotantees hijas y haccer que se dibujen sus
fondos co
orrectamentee englobando a los elemeentos flotanttes? Hay varrias maneras para hacer esto.
e
Una form
ma de hacerlo es converttir en flotan
nte tambin a la caja maadre. Una caaja flotante ampla su
tamao para
p
incluir a sus cajas hijjas, de formaa que declarrando a la madre como fflotante ya se
e ampliar
automticcamente. Si hacemos esta
e
modificacin: div {border-style
{
e: solid; margin:7px; baackgroundcolor: #FFFEFD5; float:left; } el resu
ultado ser similar a este:
om, 2006-2029
Propiedad float
f
y posicion
namiento flotan
nte CSS.
Vemos c
mo el elem
mento body aparece co
omprimido sin
s altura en
n la parte su
uperior, porque al ser
tanto la caja madre co
omo las hijass flotantes, estn
e
fuera del
d flujo del documento
d
y el elementto body no
o body porq
que hemos
adquiere altura. Teneer en cuentaa que en estte caso estamos viendo el elemento
aplicado la propiedaad border-sttyle:dotted; pero esto lo hacemoss en el maarco de un curso de
mento body no
n lleva borde prcticameente nunca.
aprendizaaje, en la prctica profesiional el elem
Ahora veaamos otra alternativa distinta a con
nvertir en flo
otante a la caja
c
madre. Vamos a de
ejar la caja
madre como div {bord
der-style: solid; margin:7
7px; backgro
ound-color: #FFEFD5;}
#
yp
por el contraario vamos
a hacer essta modificaccin: .limpiador{paddingg:0; border-sttyle:none; clear:both; }
El resultad
do ser simillar a este:
o? Porque all incluir un elemento,

e
en este caso un div, con valor clear::both; que
Por qu ocurre esto
otar, la caja se comportta como si debajo
d
de lo
os elementoss flotantes
indica que debe mostrarse sin flo
o con flujo normal,
n
de modo
m
que se
e muestra co
onteniendo ttanto a los elementos
e
estuviera el elemento
nto limpiador est vacco realmentee no se mue
estra, pero
flotantes como a estee elemento. Si el elemen
n
interpreta quee hay algo, adapta las dim
mensiones de la caja.
como el navegador
Hay ms formas de lograr un ressultado similar a este (p
por ejemplo aplicando laa propiedad overflow:
hidden; a la caja madrre), pero no vamos a enttrar a explicaarlas ahora.
O
EJERCICIO
Define un
n documento
o HTML dond
de a travs del
d uso de laas propiedad
des float y cleear y de las anteriores
propiedad
des que hem
mos visto a lo largo del cu
urso crees un
n diseo con este aspecto
o:
a) En prim
mer lugar see deben mosstrar 8 cajas div de 50x5
50 pxeles, con
c margin-rright de 5 pxeles para
cada una de ellas, y cada una de ellas con distinto colo
or de fondo, alineadas en horizontaal hacia la
izquierda gracias al usso de float leeft.
undo lugar see debe mosttrar un div co
on un texto y color de fondo amarillo
o, con marge
en superior
b) En segu
e inferior de 20 pxelees, abarcando
o todo el anccho disponib
ble.
c) En terccer lugar se deben mosttrar 3 cajas div
d de 200x5
50 pxeles, con
c margin-rright de 5 pxeles para
cada una de ellas, y cada una de ellas con distinto colo
or de fondo, alineadas en horizontaal hacia la
derecha gracias
g
al uso
o de float right.
om, 2006-2029
d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el
texto <<Curso CSS aprenderaprogramar.com>>
Nota: si es necesario, usa los div contenedores auxiliares que te sean necesarios.
Para comprobar si tu cdigo y respuestas son correctas puedes consultar en los foros

Diseo web
b con dos, tres o ms columnaas con float.
DISEO EN
E COLUMNA
AS
Uno de lo
os usos habittuales de flo
oat y clear ess crear dise
os donde las cajas tieneen distintos tamaos
t
y
se crean una
u cabecerra de pgina web, una parte central,, una o variaas columnas laterales y un
u espacio
pie o footeer. Veamos cmo
en la parte inferior denominado
d
c
podem
mos generarr este tipo de
d diseos
usando CSSS.
Vamos a partir
p
de estee cdigo HTM
ML:
<h
html> <head>
<title>Portal web
c
>
<liink rel="stylesh
heet" type="texxt/css" href="esstilosCU01036D
DA.css">
<//head>
<b
body>
<d
div id="caja1">C
Caja 1</div> <d
div id="caja2">C
Caja 2</div>
<d
div id="caja3">C
Caja 3</div> <d
div id ="caja4">Caja 4</div>
<//body>
<//html>
c de partida (ponle el nombre

n
de arrchivo adecu
uado):
Y el siguieente cdigo css
/* Cu
*{fon
nt-family: arial;}
bodyy {width:410px;; border-style: dotted;
d
border--width: 2px;}
div {b
border-style: so
olid; border-wid
dth:2px; margin
n:7px; padding::7px; backgroun
nd-color: #FFEFFD5; }
or:red;}
or:blue; }
or:green;}
#cajaa4{border-colorr:orange;}
da es que sim
mplemente tenemos
t
cuaatro cajas (deentro de las cuales se su
upone que
La situacin de partid
vamos a organizar
o
los diferentes contenidos
c
d la pgina web):
de
w
om, 2006-2029
Diseo web con dos, tres o ms columnas con float.
ANCHURA Y ALTURA ESPECIFICADA Y TOTAL DE UN ELEMENTO WIDTH NO FUNCIONA?

Cul es el valor de la propiedad width de la caja 1? Viendo el dibujo y el cdigo podramos pensar que
el clculo para obtener este ancho sera: 410 px totales 7px * 2 lados = 396 pxeles
Sin embargo, el valor de la propiedad width se refiere al ancho del espacio que ocupa el contenido del
elemento excluido el margen, borde y padding. Esto nos lleva a que el width de la caja 1 se calcule
como 410 px totales 7 px * 2 mrgenes 7 px * 2 paddings 2px * 2 bordes = 378 pxeles Por qu es
esto as?
Podemos pensar en distintos tipos de anchura (nos referiremos a anchura, aunque para altura es
igualmente vlido lo que expondremos). La anchura declarada es la anchura que especificamos al dar
un valor a la propiedad width. La anchura aparente en pantalla es la anchura que aparenta tener el
elemento en la pantalla (hasta el borde visible, si existe). La anchura total asociada al elemento se
obtiene como margin + border + padding + width (en horizontal para widht, o de la misma forma en
vertical para height)
Al declarar un valor width para un elemento hijo en porcentajes, se toma como valor de referencia el
valor de la propiedad width de su elemento padre. Esto puede generar efectos extraos y hace que
mucha gente piensa que width en porcentajes no funciona. En realidad s funciona, pero hay que
saber cmo. Escribe este cdigo y visualiza los resultados:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
*{margin:0; padding:0;}
div{ border-style:solid; border-width:1px; height: 115px;}
#caja1{width:410px; }
#caja2{width:410px; margin-left:20px;}
#caja3{width:410px; margin-left:20px; padding-left:20px;}
#caja4{width:410px; margin-left:20px; padding-left:20px; border-left-width:20px;}
.interior {margin-top: 25px; width:100%; height:40px; background-color:pink;}
</style>
</head>
<body>
<div id="caja1">Caja 1 <div class="interior">100% caja 1</div></div>
<div id="caja2">Caja 2 con width 410 px y margin-left 20px<div class="interior">100% caja 2</div></div>
<div id="caja3">Caja 3 con width 410 px, margin-left 20 px y padding-left 20px<div class="interior">100% caja 3</div></div>
<div id ="caja4">Caja 4 con width 410 px, margin-left 20 px,
padding-left 20px y border-left-width 20 px<div class="interior">100% caja 4</div></div>
</body>
</html>
Observamos algunas cosas extraas:

a) En la caja 1 vemos cmo la caja interior en color rosado sobresale ligeramente por el lado
derecho Por qu? Esta caja rosada interior se posiciona justo en la esquina interior del borde
superior izquierdo de la caja contenedora (caja 1). Luego es desplazada hacia abajo 25px debido
a la propiedad margin-top que tiene establecida. A continuacin se dibuja ocupando un espacio
de 1px como ancho del borde izquierdo + 410 px de contenido + 1 px de borde derecho. El
ancho visible en pantalla (delimitado por los bordes) es de 412 px, igual que el de su caja padre,
pero est ligeramente desplazada hacia la derecha, de ah que sobresalga ligeramente por la
derecha.
b) En la caja 3 vemos que la caja interior con un ancho del 100% no toma las dimensiones de la
caja 3, sino que es ms pequea. Por qu? Porque el borde que vemos de la caja 3 incluye el
padding aplicado a la caja 3 de 20 px de modo que la caja 3 se ve en la pantalla con un ancho
de (410 px de contenido + 20 px de padding-left + 2 px de bordes) = 432 px. Sin embargo la caja
interior tiene el 100 % del valor width de su caja contenedora, es decir, 410 px, ms 2 px de
borde, con lo que se ve con un ancho de 412 px.
En resumen, hay que tener siempre presente que los valores width y height son los relativos al
contenido de un elemento excluido el padding, borde y margen. El ancho apreciable en pantalla de un
elemento puede ser superior al establecido con width debido al padding y al borde. El ancho total
asociado a un elemento puede ser superior al establecido con width debido al padding, al borde y al
margin.
Diseo web
b con dos, tres o ms columnaas con float.
CREAR UN
N DISEO
Ahora vam
mos a utilizaar el cdigo CSS
C para crear un diseo
o con cabeceera, una colu
umna lateral izquierda,
un espacio principal y un pie de pgina o footeer.
digo CSS y comprueba
c
lo
os resultados sobre el c
digo HTML d
de las 4 cajass:
Escribe el siguiente c
/* Cu
*{fon
nt-family: arial;}
bodyy {width:410px;; border-style: dotted;
d
border--width: 2px;}
div {b
border-style: so
olid; border-wid
dth:2px;
marggin:7px; padding:7px;
backkground-color: #FFEFD5; }
/*La anchura del co
ontenido de la caja
c 1 es:
410 - 14 de margin - 4 de border - 14 de paddingg, resulta 378 pxx*/
or:red;}
#cajaa2{ margin:0 7p
px 7px 7px; border-color:blue;
widtth:75px; float:leeft; height:200p
px; }
/*An
ncho total 410 px
p - 8px bordes - 21 px de marrgin - 28 de pad
dding -75px con
ntenido caja 2
obteenemos 278 px*/
#cajaa3{ margin:0 7p
px 7px 0px; border-color:green
n;
widtth:278px; float:: left; height: 30
00px;}
#cajaa4{border-colorr:orange; clear::both; height:55
5px;}
Hemos ap
plicado unoss valores de height para poder visuaalizar el dise
o. En una w
web real height puede
quedar sin especificar, de modo que las cajass irn agrandando su tamao en vertical en fun
ncin de la
cantidad de
d contenido
o que albergguen.
om, 2006-2029
EJERCICIO RESUELTO
Escribir el cdigo CSS para crear un diseo similar al anterior pero con cabecera, una columna lateral
izquierda, un espacio principal y una columna lateral derecha.
SOLUCIN
Aadiremos esta lnea como ltima lnea del cdigo HTML, antes del cierre de body, para restablecer el
flujo normal (realmente no tenemos elementos debajo y no sera necesario hacerlo, pero podramos
tenerlos):
El cdigo CSS sera:
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
width:65px; float:left; height:200px; }
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
-65 px contenido caja 4 obtenemos 198 px*/
#caja3{ margin:0 7px 7px 0px; border-color:green;
width:198px; float: left; height: 300px;}
#caja4{ margin:0; border-color:orange; float: left; width:65px; height:200px;}
.limpiador {clear:both; padding:0; border-style:none; }
Comprueba los resultados en tu navegador.

Ten en cuenta que este es un posible cdigo para obtener un diseo como el propuesto. Quizs a ti se
te haya ocurrido otro cdigo y ser igualmente vlido (o incluso mejor que este). Por ejemplo, no hay
por qu usar px para fijar las dimensiones, podramos usar % em u otras unidades. Ten en cuenta que
CSS y el diseo web no son matemticas. Lo importante es obtener el resultado deseado y generar un
cdigo lo mejor posible, pero no el cdigo perfecto porque este no existe (o requerira demasiado
tiempo trabajar para conseguirlo, sin obtener ventajas a cambio).
EJERCICIO
Define un documento HTML donde a travs del uso de la propiedad float y de las anteriores
propiedades que hemos visto a lo largo del curso crees un diseo con este aspecto:
Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)
Conoce las ltimas novedades del lenguaje

JavaScript. (color de fondo: #ADD8E6)
Men
-Cursos
-Humor
-Divulgacin
Artculo sobre Gimp, un programa de software

libre para el diseo grfico. (color de fondo:
#90EE90)
Contacta con nosotros (color de fondo: #DDA0DD)
Espacio reservado para

publicidad
Aviso legal
Nota: los anchos de los elementos sern del 100 % disponible si es todo el ancho (por ejemplo
<<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Men>>) y del 50 % si es una
columna doble (por ejemplo <<Artculo sobre Gimp>>).

Concepto de sprite CSS. Q

Qu es y para qu
q sirve un sprite?
EFICIENCIIA Y VELOCID
DAD DE CARGA
Una pgin
na web compleja puede tener que cargar
c
decen
nas o cientoss de imgenees, tanto imgenes de
fondo como imgenees de contenido. Hemo
os visto que las imgenes de fondo
o se manejaan con las
propiedad
des tipo bacckground y que entre estas propiedades teneemos algunaas como baackgroundposition que
q nos perm
miten estableecer dnde debe
d
situarse
e la imagen.
Uno de lo
os problemas con las que se enfrenttan las pgin
nas web es que
q son cadaa vez ms co
omplejas y
con frecu
uencia incluyyen un gran nmero dee imgenes. Cargar una imagen con
nlleva una peticin
p
al
servidor, una respuesta del servvidor, carga en el naveggador, etc. e incluso si las imgenes son de
umen tiempo
o y hacen qu
ue la pgina ccargue con le
entitud.
pequeo tamao todaas estas peticiones consu
des que ofreece CSS para el manejo
o de imgenes de fondo
o podemos mejorar
m
la
Gracias a las facilidad
eficiencia del procesado de imgeenes y la velo
ocidad de carrga de la pggina.
CONCEPTTO DE SPRITEE CSS

En prograamacin el co
oncepto de sprite
s
puedee tener distin
ntos significaados. En CSS nos referimos a sprite
para haceer alusin a un
u conjunto de imgenees diferentess agrupadas todas ellas een una mism
ma imagen.
Por ejemp
plo:
Esto que vemos es un

u ejemplo tpico: diferrentes icono
os se agrupaan en una imagen siguiendo una
cuadrcula. La cuadrrcula es un elemento
e
qu
ue usan los diseadores
d
g
grficos
paraa saber que cada
c
icono
ocupa exaactamente el
e mismo esp
pacio (por ejeemplo 64 pixxeles de anccho y 64 pixeeles de alto),, pero una
vez terminan de crear el diseo laa imagen se suele guardar sin cuadrcula (es deccir, no se ven
n lneas de
divisin entre las distiintas imgen
nes). El fondo
o tipo tablero
o de ajedrezz en los progrramas de disseo como
Gimp Ph
hotoshop ind
dica que la im
magen es una transparen
ncia, no form
ma parte de la imagen en s.
om, 2006-2029
Concepto de sprite CSS. Qu es y para qu sirve un sprite?
En el caso de agrupar iconos en una sola imagen, el nmero de iconos puede llegar a ser muy grande,
en algunos casos pueden ser decenas o cientos.
En la imagen anterior tenemos 7x7 iconos en una sola imagen. Supongamos que en cargar una imagen
en la pgina web se tardara 0,1 segundos. Si cargramos los 49 iconos por separado requerira 4.9
segundos mientras que cargando el sprite nicamente necesitamos 0.1 segundos (esto es una
simplificacin, pero nos vale como ejemplo). Este es el motivo por el que se usan los sprites en diseo
web y en CSS.
Hasta ahora hemos visto las imgenes dentro del sprite como imgenes todas iguales, cada uno en un
espacio de la cuadrcula, pero esto no tiene por qu ser as. Por ejemplo se puede usar algo de este
tipo:
Aqu vemos cmo las distintas imgenes que componen el sprite siguen una cuadrcula, pero cada
cuadro es de distintas dimensiones. Por ejemplo, el icono de la estrella tiene distinto tamao que el
icono del pulpo o el icono del escner.
Tambin puede crearse el sprite considerando que una imagen ocupa varios espacios de la cuadrcula
como vemos aqu:
En la imagen anterior vemos algunos iconos que ocupan un cuadro completo, otros de menor tamao
que solo ocupan parte de un cuadro y por otro lado una imagen de una cabeza de pjaro de mayores
dimensiones que ocupa varios espacios de la cuadrcula.
Un sprite no slo puede contener iconos, tambin puede tener otro tipo de imgenes como logos,
botones, imgenes que representen bordes o esquinas de contenedores, fondos, etc.
GENERAR O CREAR LOS SPRITES CSS

Normalmente se parte de las imgenes que componen un sprite por separado para luego reunirlas en el
sprite. Esto se puede hacer de varias maneras:
a) Usando un programa de diseo grfico (como Photoshop, Gimp, etc.).
b) Usando herramientas on-line (sprite generators) que a travs de pginas web nos permiten
subir las imgenes y nos devuelven el sprite creado.
No vamos a profundizar en la creacin de sprites porque no es nuestro objetivo ahora entrar en este
tipo de detalles. Con tener el concepto o idea general nos basta.
CMO USAR LOS SPRITES CSS

En un sprite reunimos distintas imgenes que van a aparecer en la pgina web como si fueran imgenes
independientes, aunque realmente sean una sola imagen. Cmo se consigue esto? Tendremos que
jugar con el rea visible de un elemento y con la posicin de la imagen. Con lo que hemos visto en
apartados anteriores del curso ya conocemos cmo funcionan los fondos CSS, cmo se determina su
rea visible y cmo se puede jugar con la posicin de las imgenes de fondo. Por ello ya debemos ser
capaces de aplicar estos conceptos a la resolucin de un ejercicio.
EJERCICIO RESUELTO
Usando el cdigo HTML de base que venimos empleando a lo largo del curso, y en concreto el
fragmento siguiente:

<div>
<div>Men</div>
<hr/>
<ul>
</ul>
</div>

Concepto de sprite CSS. Q

Qu es y para qu
q sirve un sprite?
Se desea realizar lo sigguiente:

e elemento <hr/> con un elemento que tenga como
c
fondo una imagen
n de 18x40
a) Reemplazar el
e se repita a lo largo de todo
t
el ancho disponiblee en la web, creando
c
la
pixeles de ancchoxalto que
ap
pariencia de ser una barrra de separacin.
La imagen a utilizzar debe ser la que poneemos a continuacin (o cualquier
c
otrra con las dim
mensiones
indicaadas):
on cuatro ico
onos, cada uno de los cu
uales ocupa 40x40 pixele
es, colocar
b) Paartiendo de un sprite co
co
omo imagen
n de fondo en un elemen
nto anexo a cada
c
item dee men cadaa uno de los iconos. La
im
magen a utilizar debe serr la que poneemos a continuacin (o cualquier
c
otrra con las dim
mensiones
in
ndicadas):
Como cad
da icono tien
ne 40 pixeless de ancho y 40 de alto, el
e tamao to
otal del spritte es de 160 pixeles de
ancho por 40 pixeles de alto. Los 160 pixeles de ancho ressultan de mu
ultiplicar el aancho de 40 pixeles de
cada icono por 4.
La idea a utilizar es la siguiente: cada elemeento anexo a un item dee men tend
dr un rea visible de
40x40 pixxeles, de mod
do que al colocar el spritte slo se vea un icono (llos otros queedarn oculttos). En los
cuatro eleementos aneexos a los iteem de men
colocaremo
os la misma imagen, perro en distintta posicin
segn el elemento,
e
daando lugar a que en cad
da caso en el rea visiblee se vea algo
o distinto. Laa siguiente
imagen reefleja la idea:
om, 2006-2029
Hemos dejado como transparentados los iconos que no deben aparecer en la web (aqu los mostramos
transparentados para que se aprecie la idea de que siempre estamos utilizando la misma imagen, pero
colocndola de distinta manera para que en el rea visible aparezca justo el trozo de imagen que a
nosotros nos interese).
Nota: eliminar las vietas de la lista que conforma el men usando esta propiedad: li {list-style-type:
none;}
SOLUCIN AL EJERCICIO
Para el apartado a) modificaremos el cdigo HTML de la siguiente manera:

<div id="barra"></div>
Hemos comentado el hr (con lo cual lo eliminamos), y a cambio hemos introducido un contenedor div
sin texto y con id=barra.
En el archivo de estilos css introduciremos el siguiente cdigo:
#barra {width: auto; height: 40px; background-image: url("barra.png")}
Donde barra.png es el nombre de archivo con la imagen, que debe estar localizado en el mismo
directorio que el archivo html. Tambin se podra usar una URL externa como
https://lh3.googleusercontent.com/-_6GcdriGAEI/UkkjeJoZlOI/AAAAAAAAAb0/5B8NPiEqYsM/s40/CU01037D_5.png
Para el apartado b) crearemos contenedores de divisin donde alojar las imgenes de fondo.
No podemos usar <span> para crear los contenedores porque span es un elemento inline y necesitamos
aplicar width y height, y hay que recordar lo siguiente: width y height son slo aplicables a elementos
tipo block y elementos insertados en una posicin que son reemplazados por un objeto (entre ellos img,
input, textarea, select, object). Usaremos por tanto elementos div para crear las divisiones.
<ul id="itemsMenu">
<li><div></div><a href="#">Inicio</a></li>
<li><div></div> <a href="libros.html" >Libros de programacin</a> </li>
<li><div></div> <a href="cursos.html" >Cursos de programacin</a> </li>
<li><div></div> <a href="humor.html" >Humor informtico</a> </li>
</ul>
El cdigo que proponemos como solucin es el siguiente (ten en cuenta que t puedes haber creado
otro cdigo diferente. Lo importante es que el cdigo est bien construido y proporcione los resultados
deseados):

#barra {height: 40px; background-image: url("barra.png"); margin-bottom:30px;}
li {list-style-type: none;}
#itemsMenu li {height: 45px; line-height:2em; margin-top: 5px; }
#itemsMenu li div { height: 40px; width:40px; margin-right:15px; background-image: url(cuatroIconos.png);
float:left;}
#itemsMenu li:nth-child(1) div {background-position: 0px;}
Donde cuatroIconos.png es el nombre de archivo con la imagen, que debe estar localizado en el mismo
directorio que el archivo html. Tambin se podra usar una URL externa como
https://lh6.googleusercontent.com/-KahySaHLhww/UkkjeX4jh4I/AAAAAAAAAcA/iEIIJs6NvVw/s160/CU01037D_6.png
Con los conocimientos que hemos adquirido a lo largo del curso debemos ser capaces de interpretar
este cdigo y sus resultados. Si tienes dudas, consulta en los foros (aprenderaprogramar.com/foros).
El resultado a obtener ser similar a este:
Comprobamos cmo podemos usar una sola imagen y crear la apariencia de estar usando cuatro
imgenes jugando con el rea visible y posicin de la imagen.

Propiedade
es visibility y ovverflow
VISIBILITY
Y CSS
En apartaados anteriores hemos visto
v
cmo a travs de la propiedad
d display po
odamos haccer que un
elemento
o desaparecciera de una pgina weeb estableciendo su valor en nonee (el eleme
ento no se
muestra; el efecto es como si no existiera, po
or lo que su espacio es ocupado por otros elem
mentos). La
d visibility permite
p
crear un efectto similar, pero
p
en estte caso el elemento permanece
p
propiedad
ocupando
o su espacio, aunque no se
s muestra.
PROPIIEDAD CSS visibility

Funcin de la propie
edad
Permite ocultarr elementos sin que su espacio sea ocupado po

or otros y
tam
mbin colapsaar filas o colu
umnas de un
na tabla.
Valor po
or defecto
visible
Aplicable a
Tod
dos los elementos (excep
pto valor colllapse, slo para filas o columnas
de tablas).
t
visib
ble (el elemen
nto es visible)

esta pro
opiedad
hidd
den (el elemento es transparente, no es visible).
collaapse (aplicablle a filas o columnas de tab
blas las colapsa haciendo qu
ue sean no
visib
bles).
inhe
#content1 {visibillity: hidden;}

Ejemplos
aprende
eraprogramaar.com tr.filaColapsada {visibility: collaapse;}
h
direcctamente po
or parte de
Un aspectto importantte a tener en cuenta es que esta propiedad se hereda
todas las cajas hijas de una dada, de mod
do que ningguna caja hija se mostrrar (excepto si tiene
da la propiedad como
o visible). Esto tiene cierto inteers, pues nos permitte ocultar
establecid
completamente una parte
p
de una pgina web excepto algunos elemen
ntos especficamente se
alados.
ntar: para qu
q vamos a querer tener en nuesstra web un
n elemento que
q no se
Nos podeemos pregun
muestra? Pueden existir varios motivos.
m
Uno
o de ellos, que queramo
os reservar u
un espacio que
q no sea
ocupado por ningn
n otro elem
mento. Otro
o motivo puede ser que a travss de un len
nguaje de
programaacin como PHP,
P
Javascriipt, etc. querramos alteraar el valor dee la propiedaad visibility para
p
que el
elemento
o en algunos casos se muestre y en ottros no.
El valor co
ollapse pued
de no responder correctaamente en algunos naveggadores.
Veremos cdigo para aplicar esta propiedad despus
d
de explicar la pro
opiedad overflow.
om, 2006-2029
Propiedades visibility y overflow
PROPIEDAD OVERFLOW CSS

Una caja dentro del box-model de una pgina web puede tener unas dimensiones limitadas y el
contenido exceder esas dimensiones. A eso se le llama desbordamiento (overflow en ingls). La
propiedad overflow sirve para controlar cmo debe actuar el navegador en caso de que el contenido
(por ejemplo texto) de una caja exceda las dimensiones de la misma.
PROPIEDAD CSS overflow

Permite definir cmo debe comportarse el navegador en caso de que el

contenido de una caja exceda su tamao.
Valor por defecto
visible
Aplicable a
Elementos tipo block

visible (el contenido no se corta, se sale de su contenedor y se superpone con
los elementos adyacentos que puedan existir)
hidden (el contenido que se muestra es slo el que cabe en la caja contenedora
y el resto queda no visible).

esta propiedad
scroll (el contenido que se muestra es slo el que cabe en la caja contenedora y
el navegador muestra barras de scroll que permiten acceder al contenido no
visible; el scroll se muestra incluso si el contenido no excede la caja).
auto (el comportamiento es el que establezca el navegador por defecto para
casos de desbordamiento, normalmente mostrar scroll)
#content1 {overflow: hidden;}

Ejemplos
aprenderaprogramar.com .elementoExpress {overflow: scroll;}
Crea un documento HTML con este contenido:

<html> <head>
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web de didctica y divulgacin de la programacin cursos humor y ms
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id ="caja4">Caja 4 aprenderaprogramar.com web de didctica y divulgacin de la programacin cursos humor y ms
</body>
</html>
Y un archivo de hoja de estilos con estas reglas (pon el nombre de archivo adecuado) que nos
permitirn ver el resultado de aplicar los distintos valores de overflow:
div {border-style: solid; border-width:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; width:100px; height:200px; }
#caja1{ border-color:red; float:left; overflow: visible;}
#caja2{ border-color:blue; float:left; overflow: hidden;}
#caja3{ border-color:green; float: left; overflow: scroll;}
#caja4{ border-color:orange; float: left; overflow: auto;}
.limpiador {clear:both; padding:0; width:0; height:0; border-style:none; }
En la caja 1 con la propiedad overflow: visible; comprobamos cmo el contenido se sale de la caja tanto
hacia la derecha como hacia abajo. No obstante hay una diferencia: hacia la derecha el texto se
encuentra otro elemento y queda tapado, mientras que hacia abajo no encuentra otros elementos, y
a pesar de salirse de la caja contenedora (incluso se sale del elemento body) se muestra.
Prueba ahora a establecer la propiedad visibility para distintas cajas con distintos valores, e incluso para
el elemento body, y comprueba los resultados.
PROPIEDADES OVERFLOW-X Y OVERFLOW-Y CSS

Las propiedades overflow-x y overflow-y son completamente anlogas a la propiedad overflow, slo
que en vez de controlar tanto el desbordamiento horizontal como vertical, nicamente controlan el
horizontal (overflow-x) o el vertical (overflow-y). De esta manera, se pueden especificar distintos
comportamientos en horizontal y en vertical.
Estas propiedades pueden no funcionar correctamente en algunos navegadores por lo que son menos
usadas que la propiedad overflow. Tambin tienen definidos algunos valores como no-display y nocontent que no son reconocidos por algunos navegadores.
En algunos casos, al establecer valores visible o hidden para estas propiedades en sentido horizontal o
vertical el navegador introduce barras de scroll en el otro sentido, an no habindose especificado nada
al respecto.
EJERCICIO
Crea un contenedor div con las siguientes caractersticas definidas a travs de CSS: ancho y alto 200
pxeles, color de fondo amarilo, borde color azul de 2 pxeles de ancho tipo slido, un texto de tamao
30 pxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la
propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto.

Propiedad z-index.
z
Superp
posicin de elementos.
PROPIEDA
AD Z-INDEX
Hasta ahora hemos hablado deel posicionaamiento de elementos en el plan
no de la paantalla de
os direccion
nes: horizonttal (x) y vertical (y). CSS permite, aunque co
on algunas
visualizacin y en do
limitacion
nes, gestionaar la posicin
n en la vertical (eje z) de modo que dados
d
dos eleementos sup
perpuestos
se pueda indicar cul debe mostraarse encima y cul debajo.
PROP
PIEDAD CSS z-index
z
Funcin de la propie
edad
Permite definir cmo se colocan unos elementos en

ncima de otro
os.
Valor po
or defecto
auto
Aplicable a
Elem
mentos con posicin estaablecida exp
plcitamente.
auto
o (no hay z-index especificaado)

esta pro
opiedad
Un nmero entero (el elemen

nto est ms prximo
p
al usuario cuanto mayor sea
el vaalor de su z-in
ndex; se admitten nmeros negativos).
inhe
#content1 {z-indeez: 22;}

Ejemplos
aprende
eraprogramaar.com .elementoJukeBoox {z-index:0;}
p
superpo
oner conteniidos a nuestro antojo, yaa que slo
Es importtante destacar que z-index no vale para
funciona cuando
c
se cu
umplen deteerminadas co
ondiciones.
En el caso
o de un elem
mento A cuyyo contenido
o (texto) se sale
s de su co
ontenedor y sse superpone con otro
elemento
o B situado
o con posterioridad en el cdigo HTM
ML, el texto quedar por debajo del elemento
B debid
do al orden del
d cdigo. La
L propiedad
d z-index no funcionar ya que ni siq
quiera se traata de una
superposiicin entre elementos,
e
siino del texto
o desbordado
o de uno con
n el contened
dor de otro.
En el caso
o de un elem
mento A po
osicionado y otro B no
o posicionado, no podr establecerse el orden
en el eje z usando z in
ndex ya que ambos
a
elementos tendran que estar posicionados para resp
ponder a zindex.
En el caso
o de elemen
ntos situado
os dentro de cajas conte
enedoras, su
u valor de z--index se esttablece en
relacin a la caja contenedora. Supongamos que una cajja A tiene posicin y zz-index 10 y dentro de
ella hay una caja B con
c posicin
n y z-index 2
20. Otra cajaa C tiene posicin
p
y z-index 15. Si las cajas A,
qu orden se muesttran? Se mosstrar la cajaa C en posici
n superior (por tener
B y C se superponen En
z-index 15
5 frente al valor
v
10 de la otra caja en
e su mismo
o nivel) y debajo la caja A (con la caaja B en su
interior). La caja B es hija de la cajja A por lo que su z-index es relativo
o a su padre, no puede co
ompararse
o estn en su
u mismo niveel.
con otras cajas que no
om, 2006-2029
Propiedad z-index.
z
Superp
posicin de elementos.

H
con estte contenido
o:
<html>
<head>
nderaprogramar.com</title> <meta
<
charset=""utf-8">
<link rel="stylesheet" typ
pe="text/css" href="estilosCU0
01039DA.css">
</head>
<body>
<div id="caaja1">Caja 1 Ap
prender</div>
<div id="caaja2">Caja 2 a<</div>
<div id="caaja3">Caja 3 prrogramar</div>>
<div id ="ccaja4">Caja 4 . com</div>
c
</body>
</html>
hivo de hoja de estiloss con estas reglas (pon

n el nombree de archivo
o adecuado) que nos
Y un arch
permitirn ver el resultado antes de
d aplicar z-index:
/* Curso CSS
C estilos aprenderaprogramaar.com*/
*{font-fam
mily: arial;}
body {widtth:507px; border-style: dotted
d; border-width
h: 2px;}
div {bordeer-style: solid; border-width:2p
b
px;
padding:7px; background
d-color: #FFEFD
D5; width:150pxx; height:150pxx; position:abso
olute; }
#caja1{ bo
order-color:red;; top: 55px; leftt: 50px; }
#caja2{ bo
order-color:bluee; top: 25px; lefft: 175px; }
#caja3{ bo
order-color:greeen; top: 70px; leeft: 200px; }
#caja4{ bo
order-color:oran
nge; top: 100pxx; left: 100px; }
Ahora aaade propiedaades z-index de la siguien

nte manera y compara lo
os resultadoss de una form
ma y otra:
#caja1{ bo
order-color:rred; top: 55p
px; left: 50pxx; z-index:40;; }
#caja2{ bo
order-color:b
blue; top: 25
5px; left: 175
5px; z-index:1
10;}
#caja3{ bo
order-color:ggreen; top: 70px;
7
left: 20
00px; z-indexx:20 }
#caja4{ bo
order-color:o
orange; top: 100px; left: 100px; z-ind
dex:0;}
om, 2006-2029
Propiedad z-index. Superposicin de elementos.
Elimina la propiedad position:absolute; para todos los div, manteniendo el resto del cdigo igual. Si
visualizas el resultado comprobars que las propiedades top y left son ignoradas y que el
posicionamiento sigue el flujo natural de elementos block en un documento. Declara ahora posicin
absoluta nicamente para la caja 4 con #caja4{ border-color:orange; top: 100px; left: 100px; z-index:0;
position:absolute;} El resultado ser que la caja 4 se superpone con las otras cajas. Sin embargo, el
hecho de que la caja 4 tenga un z-index 0 y las otras cajas un z-index superior no lleva a que la caja 4 se
vaya al fondo. Por qu? Porque z-index slo funciona entre elementos con posicin establecida. En
este caso la caja 4 tiene una posicin absoluta establecida y est fuera del flujo normal del documento,
mientras que las otras cajas no tienen posicin establecida y estn dentro del flujo normal.
Las cajas con posicin absoluta se sitan por encima de las cajas dentro del flujo normal del
documento, es como si estuvieran en dos planos distintos, un plano superior para elementos con
posicin absoluta y un plano inferior para elementos dentro del flujo normal.
Con frecuencia se trata de aplicar z-index para elementos no posicionados, o entre elementos
posicionados y no posicionados, y el resultado es que aparentemente z-index no funciona. z-index s
funciona, pero de acuerdo con unas reglas y limitaciones que debemos conocer para no tener
quebraderos de cabeza innecesarios.
EJERCICIO
Analiza el siguiente cdigo, visualiza su resultado y responde a las preguntas:
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
*{font-family: sans-serif;}
#cajaGris { width: 225px; height: 225px; border: solid 1px #ccc; background: #ddd; margin-top:20px; }
#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;
background: #8daac3; margin-top: -50px; margin-left: 50px;}
#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;
background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;}
</head>
</style>
<body>
<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>
</body>
</html>
a) Cuntas cajas contenedoras hay? Estn identificadas por id o por class?

b) Cul es el grosor del borde de la caja azul y en qu unidades est expresado?
c) Por qu se superponen unas cajas encima de otras? En qu orden aparecen las cajas superpuestas
(es decir, cul est arriba, cul est en posicin intermedia y cul est en el fondo)? Por qu aparecen
con ese orden y no otro?
Propiedad z-index. Superposicin de elementos.
d) Queremos que la caja gris se site por encima del resto de cajas. Qu modificaciones en el cdigo
hemos de hacer para lograr este objetivo?
e) Modifica el cdigo para que la caja ocre quede en el fondo, la caja azul en posicin intermedia y la
caja gris encima.

Propiedade
es para control del texto CSS.
PROPIEDA
ADES PARA CONTROL
C
DEEL TEXTO CSSS
CSS dispo
one de una serie de prop
piedades quee permiten controlar
c
la forma
f
en qu
ue se muestrra el texto.
Entre ellaas vamos a estudiar
e
algu
unas como teext-align, color, text-deccoration, texxt-indent, wh
hite-space.
Algunas de
d ellas son muy usadas como text-aalign. Otras como whitee-space, an siendo men
nos usadas
tienen un gran potenccial.
PROPIEDA
AD TEXT-ALIGN
PROPIEEDAD CSS te
ext-align
Funcin de la propie
edad
Permite definir cmo se alin

nea una unid
dad de texto (prrafo o siimilar).
Valor po
or defecto
left
Aplicable a
Con
ntenido de elementos tip
po block y contenido de ttablas

esta pro
opiedad
left,, right, centerr, justify (el te

exto se alinea segn se indiq
que)
inhe
#content1 {text-aalign: center;}

Ejemplos
aprende
eraprogramaar.com .elementoJukeBoox {text-align: justify;}
Los elemeentos inline dentro del texto como

o imgenes o spans queedan tambin afectadoss por esta
propiedad
d. La propied
dad acta siiempre en relacin a la alineacin horizontal
h
deel texto. La alineacin
vertical haabr que reaalizarla usand
do otras prop
piedades.
Alineacin deel texto left
Alineacin del textto right
Alin
neacin del texto center
Alin
neacin del textto justify el
textto queda alinead
do tanto por
la d
derecha como por la izquierda
med
diante el ajuste del
d espacio.
Esta propiedad se herreda directam

mente por paarte de los elementos hijjos.
AD COLOR
PROPIEDA
Para establecer el collor de un texxto se usa laa propiedad color. En realidad sera ms razonable que se
llamara text-color, peero por motivos histriicos se ha mantenido
m
laa denominaacin color. Ya hemos
hablado de
d la formaa de expresar colores y grados de
e transparen
ncia para co
olores usand
do CSS en
anterioress apartados del curso. Recordar que es posib
ble usar notaacin RGB d
decimal o porcentual,
p
notacin hexadecimaal o notacion
nes RGBA, HSL
H y HSLA. Ejemplo: co
ontentJBox {ccolor: # FF0
0000;} Esta
d se hereda directamen
nte por partte de los ele
ementos hijos con la nica excepcin de los
propiedad
enlaces <aa> </a>, cu
uyo color tieene que establecerse dire
ectamente sii quiere ser ccambiado.
om, 2006-2029
Propiedades para control del texto CSS.
PROPIEDAD TEXT-DECORATION
PROPIEDAD CSS text-decoration
Permite definir algunos elementos decorativos para texto como el

subrayado o el efecto de tachado.
Valor por defecto
none
Aplicable a
Textos

esta propiedad
none (no hay decoracin), underline (subrayado normal), overline (subrayado

por encima), line-through (efecto de tachado)
#content1 {text-decoration: none;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox {text-decoration: line-trough;}
Esta propiedad sirve para evitar el uso de las antiguas etiquetas HTML de subrayado <u> </u> y
tachado <strike> </strike>. Por qu no deben usarse estas etiquetas HTML? Porque como ya hemos
comentado con anterioridad en los desarrollos web actuales HTML debe usarse exclusivamente para
definir la estructura y contenedores del documento, mientras que los estilos deben estar definidos por
separado mediante CSS.
Un valor adicional para esta propieadad era blink, que serva para indicar que el texto deba parpadear.
No obstante, este valor se ha eliminado del estndar por lo que no debe usarse.
El valor none puede usarse para anular el subrayado que por defecto introducen los navegadores para
los links (elementos a) si establecemos a {text-decoration: none;}.
Aunque text-decoration es una propiedad sencilla, tiene un aspecto que puede resultar bastante
problemtico. Supongamos que queremos establecer que todo el texto dentro de un div vaya
subrayado, pero que en el elemento con id= contentMbox el texto no lleve subrayado. Podramos
pensar en usar este cdigo:
div {text-decoration: underline;}
#contentMbox {text-decoration: none;}
El resultado es que an dentro del elemento para el que hemos especificado text-decoration:none; el
texto sigue estando subrayado. Por qu? Porque text-decoration es una propiedad un tanto especial
que se dibuja acumulativamente transmitindose de padres a hijos sin ser anulable por los hijos. En
este caso lo que ocurre es que a todos los div se le aplica el subrayado y luego, acumulativamente, al
elemento contentMbox se le aplica text-decoration: none;. El resultado es underline + none =
underline, el texto aparece subrayado. Supongamos ahora que escribimos esto:
div {text-decoration: underline;}
#contentMbox {text-decoration: overline;}
El texto dentro del elemento contentMbox aparecer con una lnea por abajo (underline) y una lnea
por arriba (overline) debido al carcter acumulativo de esta propiedad.
PROPIEDAD TEXT-INDENT
PROPIEDAD CSS text-indent
Permite definir el indentado (desplazamiento hacia dentro) de la

primera lnea de un prrafo de texto.
Valor por defecto
Aplicable a
Textos

esta propiedad
Una unidad de medida absoluta o relativa (incluido %) permitida en CSS

#content1 {text-indent: 20px;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox {text-indent: 0.6em;}
En el caso de utilizarse un valor en %, el porcentaje se calcula como porcentaje del valor width del
elemento padre.
PROPIEDAD WHITE-SPACE
PROPIEDAD CSS white-space
Determina el tratamiento que le da el navegador a los espacios en

blanco.
Valor por defecto
normal
Aplicable a
Todos los elementos

normal (si aparece una secuencia de varios espacios en blanco dentro de un
texto en el documento HTML, el navegador los colapsa dejando un solo
espacio; el espacio en blanco se usa para generar saltos de lnea si se excede el
tamao del contenedor. Los saltos de lnea en el documento HTML se ignoran)
nowrap (el comportamiento es como el normal, pero el espacio en blanco no se usa
para generar saltos de lnea, por lo que todo el texto queda en una sola lnea)

propiedad
pre (el texto se conserva tal y como est en el documento HTML, conservando
las secuencias de espacio y saltos de lnea como estn all definidos)
pre-wrap (el comportamiento es como con wrap pero los espacios en blanco
se usan para generar nuevas lneas si no hay espacio sufiente disponible)
pre-line (se mantienen los saltos de lnea definidos en el documento HTML, se
colapsan secuencias de espacios en blanco y se usan espacios en blanco para
generar nuevas lneas si no hay espacio suficiente disponible)
Ejemplos
#content1 {white-space: pre;}

.elementoJukeBox {white-space: nowrap;}
Esta propiedad evita el uso de la etiqueta HTML <pre> cuyo uso es no recomendado.
Puede resultar de gran inters para realizar ciertas maquetaciones de ciertas partes de pginas webs
donde queremos que el texto se comporte de una manera especfica en relacin a los espacios en
blanco, tabuladores y saltos de lnea.
Crea un documento HTML con este contenido (respetando los espacios y saltos de lnea):
<html>
<head>
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web
de didctica y divulgacin de la
programacin cursos humor y ms
</div>
programacin cursos humor y ms</div>
<div id ="caja4">Caja 4 aprenderaprogramar.com web
<div id ="caja5">Caja 5 aprenderaprogramar.com web
</body>
</html>
Y un archivo de hoja de estilos con estas reglas (pon el nombre de archivo adecuado) que nos
permitirn ver el resultado del uso de white-space:
div {border-style: solid; border-width:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; width:290px; height:110px; }
#caja1{ border-color:red; white-space:normal;}
#caja2{ border-color:blue; white-space: nowrap; font-size:12px;}
#caja3{ width: 225px; border-color:green; white-space: pre;}
#caja4{ width: 225px; border-color:orange; white-space: pre-wrap;}
#caja5{ width: 225px; border-color:black; white-space: pre-line}
.limpiador {clear:both; padding:0; width:0; height:0; border-style:none; }
En la caja 1 vemos el comportamiento normal, segn el cual varios espacios en blanco seguidos son
ignorados y el texto se va desarrollando sobre la caja y aprovechando un espacio en blanco para crear
el salto de lnea cuando es necesario debido a que el tamao del contenedor es insuficiente.
En la caja 2 vemos el comportamiento no-wrap. El texto no salta de lnea y se mantiene en una nica
lnea, excediendo el tamao del contendor sin adaptarse a l. Si quisiramos evitar que el texto salga
fuera del contenedor podramos usar la propiedad overflow.
En la caja 3 vemos el comportamiento con pre. El texto se mantiene tal cual ha sido definido en el
documento HTML, incluyendo secuencias de espacios, tabuladores, saltos de lnea, etc.
En la caja 4 vemos el comportamiento con pre-wrap. En este caso se mantiene el texto tal cual ha sido
definido en el documento HTML, pero all donde no hay espacio suficiente el texto crea nuevas lneas
aprovechando espacios en blanco para hacerlo.
En la caja 5 vemos el comportamiento con pre-line. En este caso se mantienen los saltos de lnea del
documento HTML, pero los espacios en blanco se colapsan y se generan saltos de lnea automticos
cuando el contenido excede el tamao del contenedor.
EJERCICIO
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:
a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 20px
en todas direcciones, relleno de 10 pxeles en todas direcciones, ancho de 200 pxeles, altura de 400
pxeles y borde slido de 4 pxeles de anchura.
b) El div 1 debe tener alineacin del texto centrada, color de texto #FF6347. Debe contener un texto
suficientemente largo, con algunas palabras subrayadas y el primer prrafo indentado un 10%.
c) El div 2 debe tener alineacin del texto a la derecha, color de texto #008080. Debe contener un texto
suficientemente largo, con algunas palabras subrayadas por encima y el primer prrafo indentado en 50
pxeles. Este div estar definido en el HTML como un texto con saltos de lnea definidos en ciertos
puntos. Al mostrarse por pantalla, deben usarse propiedades CSS para se mantengan los saltos de lnea
definidos en el documento HTML, se colapsen secuencias de espacios en blanco y se usen espacios en
blanco para generar nuevas lneas si es necesario
d) El div 3 debe tener alineacin del texto justificada, color de texto #8B4513. Debe contener un texto
suficientemente largo, con algunas palabras tachadas, y el primer prrafo indentado en un 20%.
Adems el texto contendr una frase donde existan 15 espacios en blanco seguidos, y dichos espacios
deben mostrarse cuando se visualice el texto (si coincide con un borde del contenedor debern
continuar en una nueva lnea).

Propiedade
es para control del texto CSS y efecto sombraa.
CONTROLL DEL TEXTO CSS

Ya conoceemos algunaas propiedad
des para dar formato a textos, como
o text-align, ccolor, text-decoration,
text-inden
nt, white-spaace, etc. Vam
mos a contin
nuar repasan
ndo propiedades que resultan de inters para
darle form
mato a textos como text--overflow, lin
ne-height y text-shadow.
t
. Con text-sh
hadow podre
emos crear
sombras con
c distintoss efectos lo cual
c nos resu
ultar til parra mejorar nuestros diseos web.
PROPIEDA
AD TEXT-OV
VERFLOW
Ya conoceemos la pro
opiedad overrflow, que permite
p
definir cmo deebe comporttarse el navegador en
caso de que el conten
nido de una caja exceda su tamao, por ejemplo
o si el texto que excede el tamao
manecer visib
ble, oculto, o accesible mediante
m
barrras de scrolll.
de su cajaa contenedorra debe perm
La propiedad text-oveerflow se con
ncibi para dar
d un mayo
or control sob
bre cmo deebera comportarse un
texto quee se sale dee su conteneedor, permittiendo el reemplazo del final del teexto por unos puntos
suspensivvos (ellipsis) o por una cadena definid
da por nosotros, por ejem
mplo podra ser Leer ms.
Para apliccar esta prop
piedad tenem
mos que esttablecer ante
es la propied
dad overflow
w con valor hidden,
h
ya
que si no lo hacemos no observarremos efecto
o alguno (pre
evalecer lo indicado porr overflow). Adems
A
lo
s aplicar al
a texto que no quepa en
n sentido horizontal pero
o en cualquier punto del texto, no
indicado se
slo al fin
nal. Esto puede generar efectos
e
extraaos (por eje
emplo que unos puntos ssuspensivos aparezcan
en un pun
nto intermed
dio, cuando realmente slo deberan
n aparecer al final). Paraa evitar esto habremos
de forzar que el texto no haga saltos
s
de lneea usando white-space:
w
nowrap; graacias a lo qu
ue el textoverflow se aplicar exactamente
e
a la parte final del texto
o.
PROPIED
DAD CSS textt-overflow
Funcin de la propie
edad
Permite generaar un tratam

miento espeecfico para texto que excede
e
el
tam
mao de su co
ontenedor.
Valor po
or defecto
clip
Aplicable a
Elem
mentos tipo block con te
exto
clip (el texto se co
orta al llegar al
a borde del contenedor)

esta pro
opiedad
ellip
psis (la partee final del te
exto se reem
mplaza con antes de salirse
s
del
conttenedor)
Unaa cadena, escrrita entre com
millas simples, por ejemplo Leer ms (no
o admitido
por algunos naveegadores)
inhe
Ejemplos
#content1 {overflow: hidden; white-space:
w
n
nowrap;
text--overflow: ellipsis;}
aprende
eraprogramaar.com
om, 2006-2029
Propiedades para control del texto CSS y efecto sombra.
Supongamos que | representa el lmite del contenedor. Supongamos este texto:

aprenderaprogramar.com es una w|eb para aprender programacin.
Los resultados que obtendramos para los distintos casos seran:
clip: aprenderaprogramar.com es una w|
ellipsis: aprenderaprogramar.com es una |
...contina : aprenderaprogramar.com contina |
Nota: debido a las limitaciones y problemas de compatibilidad entre navegadores no recomendamos el

uso de esta propiedad. Usa preferiblemente overflow en lugar de text-overflow.
PROPIEDAD LINE-HEIGHT
Esta propiedad es de amplio uso para establecer la separacin entre lneas cuando se muestra un texto.
PROPIEDAD CSS line-height

Permite fijar la altura ocupada por las lneas (interlineado).
Valor por defecto
normal
Aplicable a
Todos los elementos

normal (el interlineado ser el predeterminado por el navegador o el existente
por herencia)

esta propiedad
Un nmero sin especificar unidades (el interlineado ser tantas veces el

interlineado normal como indique el nmero)
Una unidad de medida relativa o absoluta (se admiten porcentajes)
#content1 {line-height: 1.3;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox {line-height: 130%;}
Se recomienda no especificar unidades para line-height porque puede entrar en conflicto con el tamao
del texto. Por ejemplo si el texto es de 14px y especificamos line-height 10px el texto no cabra en la
lnea y se generara una superposicin. Otro caso problemtico sera tener un elemento h1 dentro de
un div y aplicar line-height: 1.1em. Al hacer esto se fuerza al h1 a que tome como interlineado 1.1 veces
el tamao de letra definido para el div, lo que puede generar distorsiones. En cambio especificando
simplemente 1.1 sin unidades todos los elementos tomarn como interlineado 1.1 veces lo que sera su
interlineado normal, lo cual proporciona un resultado ms seguro que otra especificacin basada en
unidades.
PROPIEDAD TEXT-SHADOW
Esta propiedad sirve para aadir efectos de sombra a un texto, lo cual permite generar diseos
atractivos.
La sintaxis a emplear es la siguiente:
selectorElemento {text-shadow: valorX valorY blurOpcional colorOpcional; }
Donde valorX indica el tamao o desplazamiento de la sombra respecto al texto hacia la derecha
(valores positivos) o hacia la izquierda (valores negativos), expresado con una unidad de medida vlida
en CSS.
ValorY indica el tamao o desplazamiento de la sombra respecto al texto hacia abajo (valores positivos)
o hacia arriba (valores negativos), expresado con una unidad de medida vlida en CSS.
blur es un parmetro opcional que indica un efecto de desenfoque o difuminado de la sombra,
expresado con una unidad de medida vlida en CSS. A mayor valor, la sombra tiene un mayor
difuminado y se vuelve ms clara y brillante.
El color es un parmetro opcional. Si se indica, especifica el color de la sombra. Si no se indica, el color
de la sombra ser el mismo que el color que tenga el texto.
PROPIEDAD CSS text-shadow

Permite definir un efecto de sombra para el texto.
Valor por defecto
none
Aplicable a
Todos los elementos

none (no hay efecto de sombra)

esta propiedad
valorX valorY blurOpcional colorOpcional (genera una sombra de acuerdo a los

parmetros especificados; se permiten especificar 2 ms sombras, separando
su especificacin mediante comas)
#content1 { text-shadow: 2px 2px red;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox { text-shadow: -6px -6px 12px blue ;}
Esta propiedad est disponible en todos los navegadores recientes, pero algunos ms antiguos pueden
no reconocerla.
Crea un documento HTML con este contenido para probar esta propiedad y visualiza los resultados:
<html>
<head>
h1 {padding:10px 20px;}
</style>
</head>
<body>
<h1 style="color: black; text-shadow: 2px 2px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 4px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px blue ;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px 12px blue ;">aprenderaprogramar.com</h1>
</html>
En la imagen anterior observamos en primer lugar una sombra slida de color rojo con desplazamiento
hacia la derecha y abajo. En segundo lugar tenemos esa misma sombra con un ligero difuminado (blur)
y en tercer lugar la misma sobra con un mayor difuminado an. En cuarto lugar tenemos dos sombras,
una hacia abajo a la derecha roja y difuminada y otra hacia arriba a la izquierda azul y slida. En quinto
lugar la sombra azul anterior se ha difuminado, con lo cual observamos el efecto de dos sombras
difuminadas, una roja hacia abajo a la derecha y otra azul hacia arriba a la izquierda.
EJERCICIO
en todas direcciones, relleno de 8 pxeles en todas direcciones, ancho de 240 pxeles, altura de 300
pxeles y borde slido de 3 pxeles de anchura con color de borde azul.
b) El div 1 debe contener un texto suficientemente largo como para exceder el tamao del contenedor,
y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos . La altura de
lnea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener
tamao de fuente 18 pxeles y una sombra slida de color rojo con desplazamiento hacia la derecha y
abajo.
c) El div 2 debe contener un texto suficientemente largo como para exceder el tamao del contenedor,
y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos
en el lugar donde se corte el texto. La altura de lnea debe ser un 10 % superior a lo normal. Un
fragmento del texto (delimitarlo con span) debe tener tamao de fuente 18 pxeles y una sombra slida
de color azul con desplazamiento hacia la izquierda y abajo.
d) El div 3 debe tener alineacin del texto justificada y color de texto #8B4513. Debe contener un texto
suficientemente largo como para exceder el tamao del contenedor. La altura de lnea debe ser un 20
% superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamao de fuente 18
pxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor
verde detrs del texto.

Propiedade
MS CON
NTROL DEL TEXTO CSS
Continuam
mos repasan
ndo propiedaades que resultan de inters para darle
d
formatto a textos como
c
texttransform
m, que nos peermitir entrre otras posiibilidades traansfomar un
n texto a mayysculas o minsculas.
m
Adems veremos
v
com
mo word-spacing y letteer-spacing nos
n permiten
n variar el eespacio de separacin
s
entre pallabras o lettras y word-wrap nos permitir ro
omper palab
bras largas que no cab
ben en su
contenedor y no tieneen espacios intermedios que permitaan crear salto
os de lnea.
PROPIEDA
AD TEXT-TRA
ANSFORM
PROPIEDA
AD CSS text--transform
Funcin de la propie
edad
Permite transfo
ormar la aparriencia de un
n texto.
Valor po
or defecto
non
ne
Aplicable a
Tod
dos los elemeentos
non
ne (no hay tran
nsformacin del
d texto)
upp
percase (transforma el texto
o a maysculaas)

opiedad
esta pro
low
wercase (transfforma el texto
o a minsculas)
capiitalize (convieerte la primeraa letra de cada palabra en maysculas)
inhe
Ejemplos
#content1 {text-ttransform: uppercase;}
aprende
eraprogramaar.com
mos que teneemos el texto: La mejorr web para APRENDER a programar.

p
Los efectos seran:
Supongam
uppercase
e: LA MEJOR
RA WEB PARA
A APRENDER
R A PROGRAM
MAR
lowercase
e: la mejor web
w para aprrender a proggramar
capitalize
e: La Mejor Web
W Para Aprrender A Pro
ogramar
n selector que nos perm

mite definir estilos paraa la primera letra de texto de un
Recordar que hay un
prrafo o contenedo
or que es firrst-letter. Po
odemos com
mbinar este selector con
n text-transfform para
poner la primera lettra en un formato
f
esp
pecial. Por ejemplo
e
p::ffirst-letter {ffont-size: 30
00%; texttransform
m: uppercasee;} nos perrmite ponerr la primerra letra en maysculass y con un
n formato
extragrande.
om, 2006-2029
Propiedade
PROPIEDA
ADES LETTER
R-SPACING Y WORD-SPA
ACING
Se trata de
d dos propiiedades de uso
u no habittual que perrmiten estab
blecer una seeparacin en
ntre letras
especficaa o una separracin entre palabras esp
pecfica.
Su valor por
p defecto es normal y se estableccen indicand
do una unidaad de medid
da vlida en CSS como
valores en
n pxeles o en em.
Ejemplos:: content1 { letter-spacin
l
ng: 9px;}
#jukBox { word-spacin
ng: 1.3em;}
Se admiteen valores neegativos, perro en alguno
os casos pueden generarr efectos extraos indese
eados (por
ejemplo superposici
s
n de palabraas o letras un
nas encima de
d otras).
PROPIEDA
AD WORD-W
WRAP
Ya sabem
mos que a no ser que hayamos
h
esp
pecificado lo
o contrario con
c la propiedad white--space, las
palabras aprovecharn espacios en blanco para
p
situarse
e en una nu
ueva lnea cu
uando el espacio a lo
ancho es insuficiente en el conten
nedor. No obstante, exisste el probleema de que u
una palabra puede ser
tan larga que ocupe todo el ancho disponible y se salgaa del conten
nedor sin posibilidad de crear una
nueva lneea por la faltta de espacio
os en blanco
o (esto se podra denominar palabraa irrompible). Usando
la propied
dad word-wrap cuyo valor por defeecto es norm
mal y cuyo nico
valor p
posible es break-word
podemos especificar que la palab
bra deber continuar
c
en una nueva lnea incluso
o cuando no
o exista un
espacio en blanco parra generar el salto de lneea.

H
con estte contenido
o para probar esta propieedad y visualliza los resulttados:
<html> <head> <title>Portal web - aprenderaprogramaar.com</title> <meta
<
charset=="utf-8">
<style typee="text/css">
*{font-fam
mily: arial; }
h1 {margin
n: 20px; paddin
ng:10px 20px; border-style:
b
solid; border-colo
or: red; border--width: thin;}
</style> <//head>
<body> <h
h1 style="width
h:210px; backgrround-color:yellow;">aprenderaprogramar.co
om</h1>
<h1 style=="width:210px; background-co
olor:yellow; word-wrap: break-word;">aprenderaprogramarr.com</h1>
</body><//html>
om, 2006-2029
EJERCICIO
en todas direcciones, sin relleno, ancho de 180 pxeles, altura de 300 pxeles y borde slido de 6 pxeles
de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo, con numerosos prrafos, como para exceder
el tamao del contenedor. El texto del html debe transformarse completamente a maysculas
mediante el uso de propiedades CSS. La separacin entre letras debe ser un 5% superior a lo normal. La
primera letra de cada prrafo debe tener un tamao un 250% lo normal.
c) El div 2 debe contener un texto suficientemente largo como para exceder el tamao del contenedor.
El texto del html debe transformarse completamente a minsculas mediante el uso de propiedades
CSS. La separacin entre letras debe ser un 10% superior a lo normal. Debe contener una palabra
(cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y romperse
para no exceder la capacidad del contenedor usando la propiedad word-wrap.
d) El div 3 debe contener un texto suficientemente largo como para exceder el tamao del contenedor.
El texto del html debe transformarse para que toda palabra comience con una letra mayscula
mediante el uso de propiedades CSS. La separacin entre palabras debe ser un 10% superior a lo
normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no
quepa en el contenedor, y no romperse.

vertical-aliggn CSS. Alinear verticalmente elementos.
CENTRAD
DO VERTICALL DE ELEMEN
NTOS
Hemos vissto un nmeero relativam
mente amplio
o de propied
dades CSS qu
ue nos perm
miten trabajar aspectos
de alineaccin en la horizontal y, sin embargo
o, las posibilidades de trrabajo en la vertical son menores.
Vamos a estudiar la propiedad
p
veertical-align que permite
e el posicionamiento y ceentrado de elementos
e
en la vertical, aunque su funcionamiento tienee ciertas com
mplicaciones.
PROPIEDA
AD VERTICAL-ALIGN
Es muy frrecuente oir la expresin
n vertical-allign no funciiona bien a personas que estn comenzando
con CSS o que tienen un conocim
miento superfficial de CSS.. La realidad es que hay que conocer para qu
sirve esta propiedad y comprendeerla para pod
der valorar lo
os resultadoss que se obtiienen con ellla.
Es una pro
opiedad quee al principio resulta difcil de entender, vamos a tratar
t
de haccerlo poco a poco.
PROPIED
DAD CSS verttical-align
Funcin de la propie
edad
Perm
mite posicionar elementtos inline en
n distintas alineaciones verticales
resp
pecto a unaa lnea. Tam
mbin permitte alinear veerticalmente cualquier
elem
mento dentro de una celda de una tabla..
Valor po
or defecto
baseeline
Aplicable a
Elem
mentos inline y elementos dentro
d
de celd
das de tablas
base
eline (el elem
mento se alineaa como lo harra normalmen
nte)
mid
ddle (elementtos inline se alinean de modo
m
que se centran vertticalmente
resp
pecto a la lneea del elemento padre en la que estn; eelementos en
n celdas de
tablas se centran verticalmente en la celda de
d la tabla)
top y bottom (eleementos inlin
ne se alinean de
d modo que se su parte superior
s
se
c
en
alineea con la lnea en la que esstn; elementtos en celdas de tablas se colocan
la paarte superior en la celda de
e la tabla)

esta pro
opiedad
textt-top y text-b
bottom (elem
mentos inline se alinean d
de modo que
e su parte
supeerior se alineaa con la parte superior de laa lnea del eleemento padre; su efecto
suelle ser muy sim
milar al de top
p y bottom)
sub y super (elem
mentos inline
e se alinean de
d modo que se su parte superior
s
se
dice del elemeento padre)
alineea con las lneeas de subndice o supernd
Unaa unidad de medida rellativa o absoluta vlida en CSS (se
e admiten
porccentajes. Desplaza la lnea de base del elemento haccia arriba respecto a su
baseeline en la medida
m
indicad
da. Si se indicca 0 equivalee a baseline; si es % se
calccula respecto al
a valor de line
e-height. Se admiten
a
valorees negativos.))
inhe
om, 2006-2029
PROPIED
DAD CSS verttical-align
Ejemplos
img {vertical-align
n:middle;}
eraprogramaar.com
aprende
mos la prop
piedad verticcal-align tien
ne cierta com
mplejidad, entre
e
otras ccosas porque muestra
Como vem
distinto comportamie
c
ento segn se
s aplique a elementos en conteneedores norm
males o a elementos
e
dentro dee celdas de taablas.
Dentro dee una tabla el
e comportam
miento de veertical-align podemos
p
deccir que es el que espera la mayora
de la gentte: permite centrar
c
verticcalmente.
H
con estte contenido
o para probarlo y visualiza los resultados:
<
charset=="utf-8">
<style typee="text/css"> *{font-family:
*
arrial; } table {maargin:20px; backkground-color:yyellow;}
td {height:: 100px; text-align:center; pad
dding:2px;}
</style> </head>
<
<body>
<table borrder="1" cellpad
dding="0" cellspacing="0" stylle="width: 450p
px;">
<tr> <td sttyle="vertical-align:baseline;" ><p>Un texto<</p></td>
<td style=""vertical-align:ttop;" ><p>Un teexto</p></td>
<td style=""vertical-align:b
bottom;" ><p>U
Un texto</p><//td>
<td style=""vertical-align:m
middle;" ><p>U
Un texto</p></ttd>
</tr> </tab
ble> </body> </html>
ultado es el esperado: co
on top el texxto se coloca arriba, con bottom se
Con las ceeldas de una tabla el resu
coloca abajo y con middle se centra verticalmente.
mos a intenttar emular este comporttamiento con
n contenedo
ores normales como div. Crea un
Ahora vam
documentto HTML con
n este conten
nido para pro
obarlo y visu
ualiza los resultados:
<
charset=="utf-8">
<style typee="text/css"> *{font-family:
*
arrial; }
div {heightt: 100px; width:112px; text-align:center; pad
dding:2px; float:left; backgroun
nd-color:yellow
w; border-style:solid;}
</style> </head>
<
<body>
<div style=="vertical-align::baseline;" ><p>Un texto</p><</div>
<div style=="vertical-align::top;" ><p>Un texto</p></div
t
v>
<div style=="vertical-align::bottom;" ><p>>Un texto</p><</div>
<div style=="vertical-align::middle;" ><p>Un texto</p><//div>
</body> </html>
<
om, 2006-2029
Por qu no se alineea el texto? Pues porquee la propied

dad vertical-align funcion
na de una manera
m
en
d otra man
nera fuera de
d las tablass. Fuera de tablas, esta propiedad no puede aplicarse
a
a
tablas y de
elemento
os tipo block.. Por tanto no
n puede aplicarse a un contenedor
c
e
esperando
q
que lo que haaya dentro
de l se centre verticaalmente. El cdigo
c
anterrior no tiene sentido (aun
nque mucha gente inten
nta realizar
nes verticales as, de ah que se oiga con tanta fre
ecuencia quee no funcion
na).
alineacion
Fuera de tablas,
t
esta propiedad see aplica a eleementos inlin
ne para centtrarlos respecto a la lneaa en la que
se insertaan, no puedee ser aplicad
da a un contenedor parra que los elementos deentro de l se alineen
verticalmeente. El conccepto es com
mpletamentee distinto en tablas que fuera
f
de tablas (lo cual ess curioso y
habra qu
ue preguntarle a los creadores de CSS por qu
u han hech
ho esto as).. Para comp
prender el
concepto de vertical-align fuera de
d tablas fjaate en esta imagen porq
que supone un resumen
n didctico
del uso dee vertical-aliggn fuera de tablas.
t
En el recuadro superrior izquierdo vemos lo que sera una

u lnea dentro de un contenedor div en su
n
se coloca
c
en la parte superior del div. En
E el recuad
dro inferior izzquierdo vem
mos cmo
posicin natural:
aparecera la imagen si se inserta dentro de una lnea sin especificar
e
v
vertical-align
(o lo que es lo mismo,
ole vertical-align: baseline;). En el reccuadro superior derecho
o se ha aplicaado vertical--align: top;
aplicndo
a la imageen y sta lo que
q hace es poner su paarte superiorr alineada co
on la lnea deentro de la cual
c est la
imagen. En
E el recuad
dro inferior derecho se ha aplicado vertical-aliggn: middle; a la imagen y sta se
centra verticalmente respecto a laa lnea dentrro de la cual est.
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.
Podemos destacar lo siguiente:

a) vertical-align se aplica al elemento inline para alinearlo respecto a la lnea dentro de la cual est
(por el contrario, text-align se aplica al contenedor para alinear horizontalmente su contenido,
lo cual es un concepto distinto).
b) vertical-align no alinea respecto al contenedor, sino respecto a la lnea.
Mostramos ahora el cdigo HTML. Escrbelo, visualiza los resultados y trata de comprenderlo:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
img { margin-left: 5px; margin-right:5px; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px; border-style: solid; border-color: red;
border-width: thin; background-color: yellow; text-align: center;}
</style> </head>
<body>
<div style="float:left;">Lnea de texto sin una imagen</div>
<div style="float:left;">
<p> Lnea de texto<img style="vertical-align:baseline;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p>
</div>
<div style="clear:both; float:left;" >
<p> Lnea de texto<img style="vertical-align:top;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p>
</div>
<div style="float:left;">
<p> Lnea de texto<img style="vertical-align:middle;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p>
</div> </body> </html>
Y CMO ALINEAMOS ENTONCES VERTICALMENTE?

Ya hemos visto que vertical-align no nos va a servir para realizar un centrado vertical de un elemento
dentro de un contenedor, pero esto nos interesar hacerlo con frecuencia. Cmo hacerlo entonces?
Esta es una cuestin que suele generar problemas a los programadores y diseadores web porque no
existe un nico mtodo, sino que hay varias maneras de hacerlo y cada una tiene sus ventajas y sus
inconvenientes.
Existen aproximadamente una docena de mtodos ms o menos estndar descritos para centrar
verticalmente con CSS. Sin embargo, ninguno de ellos es la solucin perfecta. Aqu vamos a poner un
ejemplo de un mtodo sin que esto signifique que sea el mejor ni que lo recomendemos. Simplemente
lo ponemos a modo de ejemplo.
En nuestro caso vamos a tratar de centrar verticalmente un div interior situado dentro de un div
exterior. A su vez el div interior tiene un texto y vamos a tratar de centrarlo verticalmente.
La situacin de partida es esta:

<
charset=="utf-8">
*{font-fam
mily: arial; }
img { marggin-left: 5px; margin-right:5px; }
div { width
h: 360px; heightt: 210px; margiin: 10px; paddin
ng:5px 20px; bo
order-style: solid; border-colo
or: red;
border-wid
dth: thin; backgground-color: yellow;
y
text-aliggn: center;}
</style> </head>
<
<body>
<div style=="float:left;">Lnea de texto sin una imagen</div>
<div style=="float:left;">
<p> Lnea de texto<img style="vertical-a
s
align:baseline;" src="http://i.im
mgur.com/afC0
0L.jpg">con unaa imagen</p>
</div>
<div style=="clear:both; flo
oat:left;" >
s
align:top;" src="http://i.imgur.com/afC0L.jpgg">con una imagen</p>
</div>
<div style=="float:left;">
s
align:middle;" src="http://i.im
s
gur.com/afC0LL.jpg">con una imagen</p>
</div> </b
body> </html>
Y el cdiggo que nos va a servir como soluciin, basado en posicionamiento abssoluto del div
d interior
respecto al
a exterior, es
e este:
<
charset=="utf-8">
*{font-fam
mily: arial; }
div {width: 300px; heightt: 300px; border-style:solid; baackground-colo
or:#FED2FB; possition:relative;}
div div {width:100px; heigght: 100px; texxt-align:center; background-color:yellow; bo
order-style:dash
hed;
border-wid
dth:2px; top:50
0%; margin-top:-52px; left: 50%
%; margin-left:-52px;
position:absolute; line-height:4em;}
div div p {ccolor:blue; }
</style> </head>
<
<body>
<div> <divv ><p>Jump!</p
p></div> </div>>
</body> </html>
<
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.
Escribe ambos cdigos, visualiza el resultado y compara una situacin y otra. Trata de comprender todo
lo que hemos hecho (con los conocimientos adquiridos a lo largo del curso ya debemos ser capaces de
interpretar este cdigo). En un caso hemos posicionado el div interior respecto al interior y en el caso
del texto hemos aplicado line-height para forzar al texto a desplazarse verticalmente. Si algo no te
queda claro escribe una consulta en los foros (http://aprenderaprogramar.com/foros).
A modo de resumen: no hay un mtodo universal para centrar verticalmente en CSS. Cada programador
o diseador usa uno o varios mtodos y trata de buscar soluciones adaptadas a cada situacin que se le
plantea.
EJERCICIO
Analiza el siguiente cdigo, visualiza su resultado y responde a las preguntas:
<html>
<head>
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
#vcent { display: table; }
#vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div><span>Lnea de texto contenedor 1</span></div>
<div id="vcent"><span>Lnea de texto contenedor 2</span></div>
</body>
</html>
a) Cuntas cajas contenedoras hay? Estn identificadas por id o por class o por ninguno de ellos?
b) Visualiza el resultado en al menos dos navegadores distintos. Qudiferencias observas entre
ambos? A qu crees que se deben?
c) Por qu el texto <<Lnea de texto contenedor 2>> se muestra centrado verticalmente?
e) Modifica el cdigo para que el texto <<Lnea de texto contenedor 1>> se muestre centrado
verticalmente.
Tipografa y fuentes CSS. Propiedades

P
re
elacionadas.
TIPOGRAFA CSS
mos viendo posibilidades
p
s que ofrece CSS en relaccin a los texxtos. Un aspeecto importaante de los
Continuam
textos es el tipo de letra que usan
u
y cmo se configura la letra. Hay distintas propiedades para
configurar la tipografa, entre ellas font-size, font-weight
f
y font-style.
PROPIEDA
AD FONT-SIZZE
PROPIEDAD CSS fo
ont-size
Funcin de la propie
edad
Permite estableecer el tama

o de letra.
Valor po
or defecto
med
dium
Aplicable a
Tod
dos los elemeentos
Unaa unidad de medida
m
absolutta o relativa (iincluido %, en
n cuyo caso el clculo se
hacee respecto al tamao
t
de lettra del elemento padre) peermitida en CSSS

esta pro
opiedad
Unaa palabra clavve: xx-small, x-small, smaall, medium, large, x-large

e, xx-large
donde medium es el tamao por
p defecto qu
ue aplica el naavegador.
Unaa palabra clavve: larger sm
maller, que significa ms ggrande o mss pequeo
que el tamao dee letra del elem
mento padre.
inhe
#content1 {font-ssize: 20px;}

Ejemplos
eraprogramaar.com .elementoJukeBoox {font-size: small;}
aprende
s
Cuando see usan las un

nidades em y ex para fijaar el tamao de letra, el clculo
c
de sste se hace respecto
r
al
tamao de
d letra del elemento
e
pad
dre. En camb
bio cuando se
s usa em y ex en otro contexto, el tamao
t
de
letra que se toma com
mo referenciaa es el del prropio elemen
nto.
Hay que tener
t
en cueenta que al aplicar fontt-size se pue
eden estar modificando
m
dimensiones de otros
elemento
os de la pgina web deb
bido a que hay
h unidadess de medidaa como em y ex que tom
man como
referenciaa el tamao de letra.
Si estableecemos como
o tamao dee letra en el elemento body
b
un valor como 12 p
pxeles, entonces 1 em
te. Si no se ha
sern 12 pxeles,
p
2 em
m sern 24 pxeles y as sucesivamen
s
h establecid
do un valor de
d tamao
de letra, entonces 1 em correspo
onde al valo
or del tama
o de letra por
p defecto que use el navegador
n
malmente es de 16 pxelees).
(que norm
Usar tamaaos de letra relativos basados
b
en em
e en palaabras clave puede
p
ser interesante, puesto
p
que
nos permitirn cambiar la aparien
ncia de toda la pgina we
eb variando el tamao de fuente de referencia
d su definicin en el elem
mento body.
a travs de
om, 2006-2029
Tipografa y fuentes CSS. Propiedades relacionadas.
Algunos programadores y diseadores web usan una tcnica consistente en establecer el tamao de
fuente en body en el 62.5% (de 16 px) que son 10 px de modo que 1 em sern 10 px. En el resto de
elementos usan valores en em cuya correspondencia en pxeles es directa, ya que 1 em sern 10px, 1.2
em sern 12px, 1.6em sern 16px y as sucesivamente.
Los ttulos suelen tener una equivalencia similar a la que mostramos a continuacin.
Tipo de ttulo
Palabra clave
Pxeles
em (*)
h1
xx-large
24
1.5
h2
x-large
22
1.375
h3
large
18
1.125
h4
medium
16
h5
small
12
0.75
h6
xx-small
10
0.625
(*) Tener en cuenta que el valor de un em es cambiante si se modifica el tamao de fuente de

referencia.
PROPIEDAD FONT-WEIGHT
PROPIEDAD CSS font-weight
Permite establecer el grosor de letra.
Valor por defecto
normal
Aplicable a
Todos los elementos

Un valor numrico mltiplo de 100 comprendido entre 100 y 900

esta propiedad
Una palabra clave: normal (equivale a 400), bold (equivale a 700), bolder (indica
ms grueso que el grosor de fuente del elemento padre), lighter (indica
menos grueso que el grosor de fuente del elemento padre).
#content1 {font-weight: bold;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox {font-weight: 300;}
Algunas fuentes slo permiten los valores normal y bold. En este caso cualquier valor entre 100 y 500 se
considerara normal y cualquier valor entre 600 y 900 se considerara bold.
Tipografa y fuentes CSS. Propiedades relacionadas.
PROPIEDAD FONT-STYLE
Esta propiedad es una propiedad sencilla que permite poner una fuente en cursiva (italic) o en oblcuo
(oblique), siempre que la fuente que est en uso lo permita (no todas las fuentes permiten la cursiva
por ejemplo).
La cursiva y la oblcua son muy similares, de hecho a veces ni se distinguen. La diferencia entre ambas
est en que la cursiva usa caracteres parecidos a los de la fuente original, pero distintos, mientras que
la oblcua utiliza los mismos caracteres que la fuente original pero ligeramente inclinados.
El valor por defecto para esta propiedad es normal y sus valores posibles normal, italic y oblique.
Un ejemplo de aplicacin sera este: p.italic { font-style:italic }
EJERCICIO
Elige dos navegadores distintos y rellena la siguiente tabla para cada uno de ellos.
Tipo de ttulo
Pxeles
em
h1
h2
h3
h4
h5
h6

font-family,, font-variant, shortand

s
font.
TIPOGRAFA CSS
mos viendo posibilidades
p
s que ofrece CSS en relaccin a los texxtos. Un aspeecto importaante de los
Continuam
textos es el tipo de letra que usan
u
y cmo se configura la letra. Hay distintas propiedades para
configurar la tipografa, entre ellas font-familyy, font-varian
nt y la propieedad shortan
nd font.
PROPIEDA
AD FONT-FA
AMILY
Fuente (fo
ont) suele usarse como sinnimo dee letra. As, tamao de fuente
f
signiffica tamao de letra y
tipo de fuente signiffica tipo de letra. Hay tipos
t
de fue
entes muy conocidos co
omo Arial, Times
T
New
Roman, Calibri
C
pero la realidad es
e que existeen cientos o miles de tipo
os de letras.
Las fuenttes disponib
bles en un computador
c
r se corresp
ponden con archivos do
onde se enccuentra la
informacin de dicha fuente. Porr ejemplo en
n Windows podemos
p
usaar la fuente arial porque
e existe un
archivo denominado arial.ttf en el
e sistema. El
E tipo (form
mato o exten
nsin) del archivo puede
e variar de
unos sisteemas a otross: extensionees habitualess son ttf, wofff, svg, etc.
El tipo dee letra que ussa una pgin
na web ha sido histricamente un prroblema deb
bido a que lo
os intentos
de usar determinado
d
s tipos de fu
uentes chocaaban con qu
ue los navegadores empleaban fuentes que el
usuario tu
uviera dispon
nible en su ordenador
o
o dispositivo de
d visualizaciin. Si el diseeador o pro
ogramador
creaba la pgina web pensando en
e un tipo dee fuente X y el usuario no dispona de dicha fue
ente en su
ordenado
or, la pginaa no se visu
ualizaba tal y como se haba prevvisto (y en m
muchas ocasiones los
resultados eran desasstrosos). La propiedad
p
fo
ont-family trat de definir una va qu
ue evitara esste tipo de
problemaas y se ha usaado y sigue usando
u
much
ho, aunque hoy
h da se co
ombina con o
otras soluciones (como
@font-facce, que vereemos ms adelante) quee tratan de ser la soluccin definitivva al problema de las
fuentes en los desarro
ollos web.
En desarrollos web see usan los sigguientes concceptos:
a) Liista de prioridad: permitte definir varrias posibilid
dades respeccto a las fuen
ntes a emple
ear en una
pgina web, de
d modo quee la fuente que
q se usar es la primera en la listaa de prioridaad siempre
que est disponible. En caaso de no estar disponible la primeraa fuente en la lista de prioridad, se
pasara a la seegunda y as sucesivamente. Si no hu
ubiera dispon
nible ninguna fuente den
ntro de las
definidas en la lista de prioridad, se ussara la fuentte por defectto.
b) Faamilia tipogrfica o fueente concretta: alude a una fuentee concreta y todas sus variantes
(n
negrita, cursiiva, etc.). Un
na familia tip
pogrfica es por ejemplo Times New
w Roman, otra familia
tipogrfica ess Times y otra
o familia tipogrfica
t
es
e Arial. Paara escribir u
una familia tipogrfica
t
n CSS debem
mos hacerlo
o entre comillas simpless o dobles siempre
s
quee el nombre contenga
en
esspacios en blanco.
om, 2006-2029
font-family, font-variant, shortand font.
c) Familia genrica: alude a un grupo de fuentes de caractersticas similares y que se distinguen

slo por pequeas variaciones entre ellas. CSS permite indicar familias genricas como
mecanismo de seguridad para poder buscar alguna fuente dentro del sistema del usuario que
tenga caractersticas parecidas a las que desea el diseador o programador. Sirve por tanto
como mecanismo de seguridad para poder usar una fuente lo ms parecida posible a una
deseada. Hay 5 familias genricas que se usan en CSS: serif (ejemplo: Times), sans-serif
(ejemplo: Arial), monospace (ejemplo: Courier) , cursive (ejemplo: Zapfino ) y fantasy (ejemplo:
Comic Sans MS).
Normalmente en una lista de prioridad se escriben primero las familias tipogrficas y en ltimo lugar las
familias genricas. Ejemplo: Arial, Helvetica, sans-serif; es una lista de prioridad donde los dos primeros
nombres aluden a tipos de letra concretos y el ltimo a una familia genrica a usar en caso de no estar
disponible ninguna de los tipos concretos indicados.
PROPIEDAD CSS font-family

Permite indicar el tipo de fuente que se debe usar y establecer un orden

de prioridad para el caso de no disponibilidad de algunas fuentes.
Valor por defecto
No existe un valor por defecto, depende del navegador
Aplicable a
Todos los elementos

Un tipo de fuente concreto

esta propiedad
Una familia genrica de fuentes

Una lista de prioridad que puede incluir tipos de fuente concretas o familias
genricas, separadas por comas.
#content1 { Trebuchet MS, Helvetica, sans-serif;}

Ejemplos
aprenderaprogramar.com .elementoJukeBox { font-family: 'Courier New', Courier, monospace;}
Aunque se admite especificar slo un tipo de fuente especfico, se recomienda indicar siempre un tipo
de fuente genrico para el caso de que no pueda cargarse la fuente especfica deseada.
Cuando se definen prioridades, el hecho de que sea posible aplicar el primer criterio especificado no
significa que no se vaya a usar el segundo. Por ejemplo, podra existir un smbolo no disponible en la
fuente deseada, y en ese caso se recurre a la segunda posibilidad en la lista de prioridades.
Para crear diseos con tipos de letra que no sean los ms comunes habremos de recurrir a una regla
especial CSS, @font-face, que estudiaremos ms adelante.
PROPIEDAD FONT-VARIANT
Esta propiedad es una propiedad sencilla que permite poner una fuente en un modo especial
denominado de pequeas maysculas, versales o small-caps. Si usamos text-transform:
uppercase; el texto se pondr en maysculas normales. Si usamos font-variant: small-caps; el texto se
pondr en una mayscula condensada, de un tamao inferior a la mayscula normal correspondiente a
esa letra.
El valor por defecto para esta propiedad es normal y el nico valor alternativo que admite es smallcaps. Por ejemplo: p { font-variant:small-caps;}
PROPIEDAD SHORTAND FONT

Al igual que con otras propiedades, CSS permite el uso de una propiedad shortand denominada font
donde se pueden declarar abreviadamente distintas propiedades relacionadas con las fuentes.
Recordar que hay que tener una precaucin con las propiedades shortand: un valor no declarado en la
propiedad ser sobreescrito a su valor por defecto. Si no tenemos esto en cuenta, podemos estar
sobreescribiendo una propiedad sin darnos cuenta.
La sintaxis a emplear es la siguiente:
selectorElemento {Valor-font-styleOpcional Valor-font-variantOpcional Valor-font-weightOpcional

ValorFont-sizeObligatorio/ValorLine-heightOpcional valoresListaPrioridad-font-family }
Ejemplo
p { font: 12px/2em sans-serif }
Significado
El tamao de letra se establece en 12 pixeles, el
interlineado se establece en 2em y el tipo de letra
es la familia genrica sans-serif. El resto de
propiedades implicadas quedan establecidas a sus
valores por defecto.
Ejemplo
Significado
#content1 { font: bold 1.3em "Trebuchet font-style ser negrita (bold), el tamao de letra
MS",Arial,Sans-Serif; }
1.3em y se usar prioritariamente la fuente
Trebuchet MS. Si no estuviera disponible se usara
Arial. Si no estuviera disponible se usuara
cualquier fuente de tipo Sans-Serif. El resto de
propiedades implicadas quedan establecidas a sus
valores por defecto.
EJERCICIO
a) Deben exisitir tres contenedores (div1, div2 y div3) situados uno debajo de otro, cada uno con margin
33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde
slido de 5 pxeles de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo (varios prrafos), tipo de fuente genrica serif,
tamao de fuente 18 pxeles y al menos un prrafo de varias lneas con la fuente establecida como
mayscula condensada (small caps).
c) El div 2 debe contener un texto suficientemente largo (varios prrafos), tipo de fuente genrica sans
serif, tamao de fuente 14 pxeles y color del texto #B22222.
d) El div 3 debe contener un texto suficientemente largo (varios prrafos), y las propiedades de texto
establecidas con la propiedad CSS font (shortand). El tipo de fuente ser genrica fantasy y el tamao
del texto 2 veces lo normal .

@font-face CSS. Especificaar nombre y rutta de fuente.
@FONT-FFACE CSS
Hemos co
omentado las dificultadees que histrricamente haan existido en
e relacin aal uso de tipo
os de letra
en pginaas web. Esto se deba principalmentee a que los navegadores
n
s se venan b
basando en un
u archivo
de fuentee instalada en el propio ordenador
o
d usuario y no se podaa garantizar que el usuario tuviera
del
disponiblee la fuente que especificaba el programador o disseador.
REGLA @FONT-FACE
f
disp
ponibles por parte de cad
da usuario
Para supeerar la limitacin de teneer que depender de las fuentes
se cre laa regla @font-face que permite
p
espeecificar un no
ombre y la lo
ocalizacin (url) de un archivo con
la fuente que se desea usar en un
na pgina weeb. De esta manera,
m
cambia el concep
pto tradicion
nal, ya que
nt-face podreemos usar fu
uentes que hemos definid
do y localizad
do nosotros mismos, sin depender
con @fon
de las fueentes de quee disponga el
e usuario. Teen en cuentaa que @fontt-face est d
disponible en
n todos los
navegado
ores modernos, pero quee versiones antiguas
a
de navegadoress no admiten el uso de esta
e regla,
de ah que siempre deebamos espeecificar una familia tipoggrfica genrrica como altternativa de seguridad
para el caso de que un
na fuente especificada no pueda carggarse.
Una fuente es un arcchivo inform
mtico con laa informacin necesaria para que un sistema operativo o
programaa puede mosstrar un tipo
o de letra determinado. Por ejemplo, en Wind
dows se disp
pone de la
fuente A
Arial graciass a que denttro del sistem
ma de archivos existe un archivo deenominado arial.ttf.
a
Si
borramoss ese archivo
o, la fuente deja de esttar disponib
ble. El tipo (formato o eextensin) del
d archivo
puede varriar de unos sistemas a otros:
o
extenssiones habitu
uales son ttf, otf, woff, svvg, etc.
La extensin woff (W
Web Open Font Format) ha
h sido creada especficaamente com
mo tipo de fu
uente para
os web y asp
pira a convertirse en un estndar.
e
Sin
n embargo, laa realidad ess que no exisste todava
desarrollo
un formatto de archivo
o estndar que se haya im
mpuesto parra todos los navegadores
n
s.
El uso bssico de la reegla @font-faace conlleva definir dos parmetros: por un lado, el alias o nombre
con el quee vamos a designar a la fuente cuando la empleemos en nuestras reglass CSS. Por ottro lado, la
ruta dond
de se localizaa el archivo que
q contienee la fuente.
La sintaxiss bsica a em
mplear es de este tipo:
@
@font-face
{font-family: "nombreDeFuente"; srrc: url(nombreDeArchivo
o.extension); }
Con esta regla definiimos un nom

mbre de fueente p.ej. b
burlesque e indicamos una ruta del
d archivo
donde est disponible esa fuentee p.ej. burleesque.woff. En
E este caso
o hemos ind
dicado simplemente el
om, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.
nombre del archivo, por lo que la ruta debe ser la misma donde se ubique el archivo css de estilos.
Ahora este nombre de fuente puede utilizarse como se hara normalmente con los nombres de fuente
en la propiedad font-family, por ejemplo h1 {font-family: burlesque, sans-serif; }
Tambin es posible definir rutas de archivos alojados externamente indicando su url. Por ejemplo:
@font-face { font-family: "Bitstream Vera Serif Bold";
src: url(https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf); }
Y este nombre de fuente se podra aplicar por ejemplo en body { font-family: "Bitstream Vera Serif
Bold", serif }
Tener en cuenta que siempre es recomendable dar al menos una familia genrica para indicar el tipo de
fuente que se debera usar en el caso de que no se pueda cargar la fuente deseada.
Debido a que la regla @font-face se ha ido introduciendo en los ltimos aos y los diferentes
navegadores han ido admitiendo formatos de fuentes distintos poco a poco, un truco al que recurren
muchos diseadores y programadores para garantizar que la mayor parte de navegadores usen la
fuente deseada es especificar las rutas de los archivos fuente en distintos formatos, de modo que se
usar el primero en ser reconocido por el navegador. Por ejemplo:
@font-face { font-family: Sansat;
src: url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }
La regla @font-face permite que se especifique si se debe buscar la fuente primero en el ordenador del
usuario y usarla en caso de estar disponible, antes que usar una fuente especificada mediante un
archivo. Para ello se especifica el origen como local(nombreDeFuenteEnSistemaUsuario). Esto es lo
que se hace en este ejemplo:
@font-face { font-family: Sansat; src: local(Sansation Light),
url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }
Se podran especificar varios nombres de fuentes locales separados por comas si se desea.
LAS MEJORES FUENTES WEB GRATUITAS

Existen diferentes pginas web donde se ofrecen archivos de fuentes gratuitos. Es difcil decir cul es la
pgina que ofrece las mejores fuentes, entre otras cosas porque en estas pginas hay cambios
contnuos y se van incorporando nuevas fuentes y nuevos formatos continuamente. A continuacin
damos una relacin de sitios que permiten el uso de fuentes gratuitas, sin recomendar ninguno en
concreto. Prubalos y usa el que ms te guste.
Nombre
URL
Font Squirrel
http://www.fontsquirrel.com/
Da Font
http://www.dafont.com/
Google fonts
http://www.google.com/fonts
Comentarios
Coleccin de fuentes no slo para desarrollos
web. Archivos de descarga disponibles en
determinados formatos.
Coleccin de fuentes con clasificacin por
temticas.
Servicio de google que ofrece fuentes gratuitas.
Google ofrece una url que permite enlazar al
archivo de fuente alojado en sus servidores, o
tambin la descarga de la fuente.
CONVERTIDORES DE FUENTES ONLINE

Muchas veces las fuentes que tenemos disponibles para descarga estn en un solo formato como ttf y
para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios formatos. Los
formatos ms usados son: WOFF, EOT, TTF, OTF y SVG.
En principio usando TTF y EOT nos garantizamos que nuestra fuente sea reconocida por la mayora de
los navegadores, aunque si buscamos el mximo de seguridad convendra incluir los cinco formatos.
Existen distintos convertidores on-line, entre los cuales el de Font Squirrel es quizs el ms usado y el
que mejores crticas recibe.
Nombre
Font Squirrel
converter
URL
Comentarios
Permite subir un archivo en un formato
http://www.fontsquirrel.com/tools/webfonty descargar un archivo zip con la fuente

generator
en diferentes formatos incluyendo woff,
eot, ttf y svg.
Online Font
Converter
http://onlinefontconverter.com/
Files conversion
http://www.files-conversion.com/fontconverter.php
Font converter
http://www.fontconverter.org/
Admite la conversin entre distintos

formatos.
formatos.
formatos.
Ten en cuenta que al realizar la conversin la fuente convertida ser muy similar a la original, pero
quizs no exactamente igual (pueden aparecer pequeas diferencias en el espacio entre letras por
ejemplo). Recomendacin: no trates de cuadrar una pgina web al milmetro. Considera siempre que
puede ocurrir que la fuente que se cargue no sea exactamente la que t habas previsto.
PROBLEMAS CON @FONT-FACE

La regla @font-face se ha introducido en los ltimos aos y su estandarizacin todava no es suficiente,
aunque su uso es cada vez ms amplio. Te podrs encontrar con situaciones como que:
a) Un determinado navegador no reconozca la regla @font-face, con lo cual recurrir a la fuente
estndar que hayas definido, o si no la has definido, a la fuente por defecto.
b) Un determinado navegador no reconozca el formato de la fuente que hayas indicado.
c) Un determinado navegador no responda bien a la sintaxis que hemos descrito y sea necesario
aplicar un parche o cdigo especfico para ese navegador.
d) Algunas reglas CSS no se aplican bien con un determinado formato de fuente. Por ejemplo,
quizs te encuentres que al aplicar text-transform: uppercase; con algunas fuentes no te
funcione.
Para muchos de los problemas que genera font-face existen soluciones especficas o parches de los que
no vamos a hablar porque supondra entrar en detalles muy concretos y no es ese nuestro objetivo.
Recuerda que el objetivo de este curso es conocer la lgica de CSS y sus aspectos ms importantes, sin
entrar en detalles relativos a navegadores concretos.
Algunos programadores o diseadores trabajan con frmulas alternativas a font-face (normalmente
scripts escritos en algn lenguaje de programacin) buscando evitar los problemas que les surgen.
EJERCICIO EJEMPLO RESUELTO DE USO DE @FONT-FACE

Usando el cdigo HTML de base que venimos empleando a lo largo del curso, y usando la regla @fontface, definir tres tipos de letra distintos (obtenidos desde alguna de las fuentes web gratuitas que
hemos indicado) para las etiquetas h1, h2 y p. Para comprobar si tu cdigo y respuestas son correctas
puedes consultar en los foros aprenderaprogramar.com.
SOLUCIN
Nosotros vamos a usar las siguientes fuentes:
Ttulos h1: fuente Bubblegum Sans. Nos hemos descargado la fuente en formato otf (BubblegumSansRegular.otf) desde fontsquirrel.com
Ttulos h2: fuente Just Gotta Smile. Nos hemos descargado la fuente en formato ttf (Just Gotta
Smile.ttf) desde dafont.com.
Prrafos p: fuente Alef. Nos hemos descargado la fuente en formato ttf (Alef-Regular.ttf) desde
google.com/fonts
Si quieres usar otras fuentes no hay problema.
Junto al archivo css de definicin de estilos debemos colocar los archivos de las fuentes (los tres
archivos que hemos citado, en nuestro caso de extensin otf, ttf y ttf). El cdigo bsico que resuelve el
ejercicio y el resultado a obtener sera el siguiente (escribe el cdigo y visualiza el resultado; si no
obtienes el resultado previsto sigue leyendo):
*{font-family: arial; background-color:yellow;}
@font-face { font-family: "bubblegum"; src: url('BubblegumSans-Regular.otf'); }
@font-face { font-family: "Just Gotta Smile"; src: url('Just Gotta Smile.ttf'); }
@font-face { font-family: "Alef-Regular"; src: url('Alef-Regular.ttf'); }
h1 {font-family: "bubblegum", arial; font-size: 42px; }
h2 {font-family: "Just Gotta Smile", arial; font-size: 30px; }
p {font-family: "Alef-Regular", arial; }
p a {font-family: "Alef-Regular", arial;}
Nota: hemos puesto un fondo amarillo y letra arial para los elementos sin letra definida; adems hemos
dotado de un tamao de letra adecuado a los elementos h1 y h2. Tambin hemos definido el tipo de
letra especficamente para los elementos a (links) dentro de prrafos porque stos no heredan el tipo
de letra definido.
Qu problema ms comn nos podemos encontrar con este cdigo? Que algunos navegadores no
reconozcan el formato de la fuente. Para tener mayor seguridad en cuanto a que los navegadores
apliquen la fuente deseada vamos a generar las fuentes en los formatos ms comunes.
En nuestro caso accederemos a un servicio web gratuito para convertir fuentes, en concreto vamos a
usar http://www.fontsquirrel.com/tools/webfont-generator y subimos los ficheros fuente que tenemos
(BubblegumSans-Regular.otf, Just Gotta Smile.ttf y Alef-Regular.ttf) y nos descargamos el archivo zip
con las fuentes convertidas a distintos formatos.
Ahora para cada fuente tendremos cuatro archivos, cada uno de los cuales corresponde a una
extensin. Por ejemplo para BubblegumSans-Regular ahora tendremos cuatro archivos como
bubblegumsans-regular-webfont.woff, bubblegumsans-regular-webfont.ttf, bubblegumsans-regularwebfont.eot, bubblegumsans-regular-webfont.svg. Para las otras fuentes lo mismo, con lo cual en total
tendremos 12 archivos.
Ahora escribimos el cdigo indicando que en caso de no reconocerse un formato, se utilice el siguiente
disponible. Ten en cuenta que debes colocar los 12 archivos con las fuentes en la misma ubicacin en la
que tengas el archivo css de estilos. El cdigo quedara as:
*{font-family: arial; background-color:yellow;}
@font-face { font-family: "bubblegum"; src: url('bubblegumsans-regular-webfont.woff'),
url('bubblegumsans-regular-webfont.ttf'),
url('bubblegumsans-regular-webfont.eot'),
webfont.svg'); }
url('bubblegumsans-regular-
@font-face { font-family: "Just Gotta Smile"; src: url('just_gotta_smile-webfont.woff'),

url('just_gotta_smile-webfont.ttf'), url('just_gotta_smile-webfont.eot'), url('just_gotta_smile-webfont.svg'); }
@font-face { font-family: "Alef-Regular"; src: url('alef-regular-webfont.woff'),
url('alef-regular-webfont.ttf'), url('alef-regular-webfont.eot'), url('alef-regular-webfont.svg'); }
h1 {font-family: "bubblegum", arial; font-size: 42px; }
h2 {font-family: "Just Gotta Smile", arial; font-size: 30px; }
p {font-family: "Alef-Regular", arial; }
p a {font-family: "Alef-Regular", arial;}
Con este cdigo tenemos mayores garantas de que la visualizacin ser correcta en la mayor parte de
los navegadores. Pero la garanta no es del 100%, de ah que siempre sea conveniente especificar qu
fuente debe mostrarse en caso de no poder cargar la deseada. En nuestro caso hemos indicado arial.

Pseudoclase
es CSS. Links. liink, visited, hovver, active.
PSEUDOC
CLASES PARA
A LINKS
Cuando hablamos
h
dee selectoress nombramo
os las pseud
doclases CSSS y dijimos que las pse
eudoclases
permiten identificar ciertos
c
elementos o situ
uaciones den
ntro de una pgina web para aplicar un estilo
o a dichos ellementos o situaciones.
s
Por ejemplo
o, la pseudoclase :first-child permite
e definir el
especfico
estilo a ap
plicar al prim
mer elemento
o de una seriie.
CSS define otra seriee de selectorres denomin

nados pseudoelementos que van prrecedidos de
e :: y cuya
funcin es
e anloga a la de las pseudoclases
p
s. Tambin hemos
h
hablaado de elloss anteriorme
ente en el
curso, po
or ejemplo ::first-letter nos permitee definir un estilo para la primera letra del texto de un
elemento
o.
Vamos a hablar ahoraa de cmo dotar
d
de estilos a los lin
nks en CSS. Para
P
ello es necesario re
eferirnos a
algunas pseudoclases que son las que permiteen hacer esto
o.
Pseudoclaase
:linkk
Apliccable a
Signifficado
Los links
Se usa para defin

nir estilos paara links que no han
sido pinchados
p
po
or el usuario,, aunque si no
n est en
el orrden adecuaado puede sobreescrib
bir otros
estiloss de links
:visite
ed
Slo links que ya han ssido Se usaa para defin

nir estilos para links que han sido
pinch
hados por el usuario
pinchaados por el usuario y ass distinguirlos de los
no pin
nchados
:focus
Cualquier elemento que tien

ne el Se ussa para defiinir estilos para elementos que
foco por estar seeleccionado con tienen
n el foco. Un link puede ttener el foco
o.
el rattn o por uso del tabulad
dor
:hove
er
Cualquier elemento que tien

ne el Se usa para definir
d
estilo
os especficcos para
eleme
entos por loss que el usuaario pasa el ratn por
punttero del ratn encima dee l
encim
ma, an sin piinchar en ellos
:active
Cualquier elem
mento en
mento de serr activado
mom
el Se usar para defiinir estilos eespecficos para

p
links
button> en eel justo mom
mento en
<a> o botones <b
que so
on pulsados..
e la que ya conocemos: tipoElemento:nombrePseudoclase { }

om, 2006-2029
Pseudoclases CSS. Links. link, visited, hover, active.
A la hora de aplicar estas pseudoclases es importante el orden en que se aplican, ya que si no se hace
correctamente se pueden anular estilos definidos. Por ejemplo:
a:hover {color: orange;}
a:link {text-decoration:none; font-weight: bold; color:blue;}
Podramos pensar que los links sobre los que se situara el ratn se mostraran naranjas, pero no va a ser
as. Se mostrarn azules porque a:link sobreescribe lo definido en a:hover porque :link afecta a todos
los links (incluso los que tienen el ratn encima de ellos) mientras que :hover slo afecta a
determinados links. Por ello si situamos :link despus de :hover estaremos anulando lo definido en
:hover.
Para evitar esto se usa una regla mnemotcnica: LVHA (link-visited, hover, active; es conveniente
recordar y aplicar este orden para evitar sobreescribir indebidamente. Podemos usar una frase como
Llegamos vivos hasta amanecer o Luego vuelvo hasta all para acordarnos de este orden.
La pseudoclase :focus se suele colocar justo antes de :hover.
Veremos ejemplos de uso de estas propiedades a continuacin.
PROPIEDAD OUTLINE CSS

La propiedad outline CSS es una propiedad shortand anloga a la propiedad border. De hecho, lo que
hace es crear un contorno similar a un borde, con la diferencia de que no ocupa espacio. Su uso suele
ser para marcar los contornos de un elemento (muchas veces lo usan los diseadores y programadores
para ver las cajas del modelo de cajas mientras estn realizando el diseo).
Al igual que con los bordes existen propiedades individuales que son: outline-style, outline-widht y
outline-color, pero en general ser preferible usar la propiedad shortand.
Dado que esta propiedad es completamente anloga a la propiedad border, te remitimos a leer el
apartado de bordes si quieres profundizar en su manejo. En el cdigo del ejemplo que vemos a
continuacin puedes ver un ejemplo de aplicacin de esta propiedad.
EJEMPLO DE APLICACIN
Usando el cdigo HTML de base que venimos empleando a lo largo del curso, escribe un archivo de
estilos css con este cdigo:
*{font-family: sans-serif; }
a:link {text-decoration:none; font-weight: bold; color:blue; }
a:visited {color: #6D006D;}
a:focus {outline: dashed thin red;}
a:hover {color: orange;}
a:active {font-style: italic;}
li {margin:5px;}
li a:link{border-bottom:solid #B22222 2px; font-weight: bold; color:#B22222;}
Pseudoclase
En la imaggen anteriorr vemos el reesultado de aplicar

a
el cdigo css indiicado. En naranja el aspe
ecto de un
link sobree el que tuviramos situaado el ratn encima. Abaajo en azul, laa lnea punteeada roja ind
dica que el
link tienee el foco. El color azul con
c fuente en
e negrita es el que hem
mos definido para todo
os los links
excepto lo
os que estn
n dentro de elementos
e
li, que se mue
estran en la parte
p
superio
or de otro co
olor.
Hemos eliminado el subrayado
s
por defecto de
d los links y a cambio hemos
h
usado
o la propiedaad borderE
es una prctica
p
que usan mucho
os diseadorres porque lees permite un mayor con
ntrol sobre
bottom. Esto
los links (evita que queden
q
cortaadas las parrtes inferiores de las letras, permitte establecer grosores
personalizzados, etc.).
Nota: en algunos
a
naveegadores puede haber comportamie
entos extrao
os o particullares. Por eje
emplo que
los links visitados
v
defiinidos con a::visited no reespondan y no
n muestren
n los estilos d
definidos a trravs de la
regla css correspondie
c
ente. Esto haa sido introd
ducido como
o opcin de seguridad
s
en
n algunos navegadores
para evitar que se pueda
p
rastreear lo que ha
h hecho el usuario y qu links haa visitado durante
d
su
n. Podemo
os modificarr las opcion
nes de segguridad en nuestro navegador (en
n algunos
navegaci
navegado
ores esto se hace acced
diendo a Op
pciones, Privvacidad y eligiendo Reccordar mi historial de
descargass y navegaci
n), pero essto slo afecttar a nuestrro navegador.
Consejo: acostmbrat
a
te a aceptar que los naveegadores ten
ngan distinto
os comportam
mientos. Es algo
a con lo
que tend
drs que con
nvivir. En algunos caso
os se podrn
n aplicar so
oluciones esspecficas o parches
especfico
os para cada navegador y en otros casos simplem
mente habr que aceptarlo as.
O RESUELTO
EJERCICIO
Usando el
e cdigo HTTML de basee que venim
mos emplean
ndo a lo larggo del curso
o, se desea realizar lo
siguiente::
Para los liinks dentro de
d elemento
os li: estableccer su color como #B222
222. Estos lin
nks deben ap
parecer sin
subrayado
o y en negritta.Poner la siguiente imaagen (que mide 38x38 pxx) a la izquierda de los lin
nks dentro
de listas:
om, 2006-2029
Pseudoclase
Para los links dentro de prrafos:: establecer su color com

mo azul, form
mato negritaa, sin subrayado. Color
ndo han sido
o visitados: #6D006D. Color
C
al pasaar el ratn encima
e
de elllos: naranjaa. Poner la
para cuan
siguiente imagen (quee mide 38x38
8 px) a la derrecha de los links dentro de prrafos:
mente: cuan
ndo el usuariio ponga el ratn
r
encima de un elem
mento que llleva el icono
o rosado la
Adicionalm
imagen de fondo deb
ber cambiarr y pasar a ser
s la imagen
n con el icon
no azul. Del mismo mod
do, cuando
ponga el ratn encim
ma de un eleemento que lleva el icon
no azul la im
magen de fon
ndo deber cambiar y
pasar a seer la imagen con el icono
o rosado. Es decir,
d
el colo
or del icono debe
d
cambiaar al pasar ell ratn por
encima deel link generaando un efeecto de camb
bio.
Nota: elim
minar las vieetas de las lisstas usando esta propied
dad: li {list-sttyle-type: no
one;}
SOLUCIN
N
Aqu te planteamos una posible so
olucin (en tu
t caso tendrrs que poneer las rutas d
de imgenes que hayas
utilizado). Ten en cueenta que se puede
p
llegarr a un resultaado de distin
ntas maneraas, por tanto
o tu cdigo
podra seer distinto a este cdigo
o. Para com
mprobar si tu cdigo y respuestas son correctaas puedes
consultar en los foros aprenderap
programar.co
om.
/* Curso CSS
*{font-fam
mily: sans-serif; }
li {list-stylee-type: none; }
a:link {textt-decoration:no
one; font-weigh
ht: bold; color:b
blue;
backgroun
nd: url('CU0104
47D_2.png') no--repeat right;
padding-riight:38px; display:inline-block; line-height:2.5
5em;}
a:visited {ccolor: #6D006D
D;}
a:focus {ou
utline: dashed thin
t
red;}
a:hover {color: orange; background: url(('CU01047D_3.png') no-repeat right;}
a:active {fo
ont-style: italic;;}
li {margin:5px;}
li a:link{texxt-decoration:n
none; font-weigght: bold; color:#B22222;
backgroun
nd: url('CU0104
47D_3.png') no--repeat left;
padding-leeft:46px; line-heeight:2.5em; diisplay:inline-blo
ock; }
li a:hover{background: urrl('CU01047D_2
2.png') no-repeeat left;}
En este cdigo
c
hemo
os introducid
do el icono como image
en de fondo y hemos crreado tama
o para l
introducieendo un paadding laterral (right o left segn nos interesse). A su vvez hemos hecho las
modificacciones necessarias (mrgeenes, displayy, line-heigh
ht) para consseguir una b
buena visualizacin. El
resultado que debes obtener
o
debee ser similar a el que mostramos a co
ontinuacin.
e el ratn encima de un
n link, el icono correspondiente debe cambiar de color.
Cuando el usuario sit
om, 2006-2029
Pseudoclases CSS. Links. link, visited, hover, active.

Estilos paraa listas CSS list-sstyle. type, possition, image.
APLICAR ESTILOS
E
A LISTAS
Al trabajaar con docum
mentos HTML es habitual el uso de liistas para realizar enumeeraciones. Laas listas se
clasifican en dos grandes tipos. Po
or un lado las listas desordenadas o ul
u (unordereed lists) en lo
os cuales el
orden no se consideraa importantee. Por otro laado las listas ordenadas, etiqueta <ol> (ordered liists).
Una lista desordenada podra ser por ejemplo

o de person
nas asistentees a la conferencia, don
nde no hay
un primeer asistente y un segun
ndo asistente, sino simp
plemente assistentes. Esstas listas es habitual
representtarlas usando vietas (eelemento grfico que puede ser un
n pequeo ccrculo u otrro tipo de
elemento
o como un cu
uadrado, unaa estrella, etcc.). Ejemplo:
Ju
uan
Peedro
Issmael
Una lista ordenada po

odra ser por ejemplo P
Puntuacin obtenida
o
por los alumnoss en el exame
en donde
el alumno
o con mayo
or puntuaci
n es el elem
mento 1 de la lista, el
e siguiente el elemento
o 2, y as
sucesivam
mente. Estas listas es hab
bitual represeentarlas usan
ndo nmero
os. Ejemplo:
1. Ju
uan
2. Peedro
3. Issmael
Los naveggadores suelen introduccir mrgeness o paddings por defectto a las listaas. En caso de querer
eliminar estos
e
valoress de defecto deberemos establecer una regla de este
e tipo:
ul { margin: 0; padding: 0; }
ntos de la listta se peguen
n demasiado al borde izquierdo del
Sin embarrgo esto pueede hacer que los elemen
contenedor. Para haccer que se alineen
a
aproxximadamentte con los prrafos tal y como los muestra
m
el
navegado
or se puede usar
u una reglla del tipo ul li { margin-left: 1em; }
PROPIEDA
AD LIST-STYLLE-TYPE
PROPIED
DAD CSS list-sstyle-type
Funcin de la propie
edad
Perm
mite estableceer el tipo de smbolo
s
a mosstrar precedieendo a los elem
mentos de
una lista.
Valor po
or defecto
discc (muchos navvegadores usaan disc para liistas desorden

nadas ul y decimal para
listaas ordenadas ol)
o
Aplicable a
Elem
mentos li de una lista dessordenada u ordenada
o
o eelementos a los
l que se
hayaa aplicado la propiedad
p
display: list-item
m;
om, 2006-2029
Estilos para listas CSS list-style. type, position, image.
PROPIEDAD CSS list-style-type

disc (se mostrar un crculo relleno, opcin por defecto), circle (se mostrar un
crculo no relleno) square (mostrar un cuadradito relleno).
none: no se mostrar ningn smbolo
decimal (nmeros empezando en 1), decimal-leading-zero (nmeros de dos
dgitos desde 01 hasta 99)

esta propiedad
lower-roman (nmeros romanos en minsculas, i, ii, iii, iv) upper-roman

(nmeros romanos en maysculas)
lower-alpha (letras minsculas empezando por la a) upper-alpha (letras
maysculas empezando por la A). Mismo efecto con lower-latin y upper-latin.
Otros valores menos usados: lower-greek (letras griegas), armenian
(numeracin armenia), georgian (numeracin georgiana), etc.
Algunos navegadores incluyen soporte para numeraciones en otros idiomas
ul li {list-style-type: square;}
Ejemplos
aprenderaprogramar.com li {list-style-type: upper-latin;}
El color de la vieta ser el mismo que sea aplicable a la lista.

Muchas veces se crean mens de navegacin que se basan en listas. En este caso normalmente se
prescinde de las vietas o numeraciones para lo cual se establece esta propiedad con el valor none.
PROPIEDAD LIST-STYLE-POSITION
PROPIEDAD CSS list-style-position
Permite controlar la posicin de las vietas.
Valor por defecto
outside
Aplicable a
Elementos li de una lista desordenada u ordenada o elementos a los que

se haya aplicado la propiedad display: list-item;
outside (la vieta o numeracin aparecer a la izquierda fuera del bloque de
texto que queda a la derecha de la vieta)

esta propiedad
inside (la vieta o numeracin aparecer como si fuera parte del texto al
comienzo de la primera lnea)
.myList li {list-style-position: inside;}

Ejemplos
aprenderaprogramar.com .sandList li {list-style-position: outside;}
Si hay poco texto puede que no se aprecie la diferencia en esta propiedad. Slo cuando tenemos varias
lneas se puede comprobar el distinto efecto que se genera. Ejemplo:
En este ejemplo tenemos la vieta outside, la vieta est a la izquierda y el bloque de texto a la
derecha. En este ejemplo tenemos la vieta outside, la vieta est a la izquierda y el bloque de
texto a la derecha.
En este ejemplo tenemos la vieta inside, la vieta est a la izquierda y el bloque de texto se
alinea con la vieta como si sta fuera texto. En este ejemplo tenemos la vieta inside, la vieta
est a la izquierda y el bloque de texto se alinea con la vieta como si sta fuera texto.
PROPIEDAD LIST-STYLE-IMAGE
PROPIEDAD CSS list-style-image
Permite definir una imagen especfica para ser usada en lugar de un

smbolo tipo vieta de entre los predefinidos para listas.
Valor por defecto
none
Aplicable a
Elementos li de una lista desordenada u ordenada o elementos a los que

se haya aplicado la propiedad display: list-item;
none (no se aplica una imagen a modo de vieta)

esta propiedad
url (rutaDeLaImagenDeseada)
.myList li {list-style-image: url(CU01048D_1.png);}

Ejemplos
aprenderaprogramar.com .sandList li { list-style-image: url(CU01048D_1.png);}
Esta propiedad da poco juego a la hora de crear efectos adicionales, modificar tamaos, posiciones, etc.
por lo que muchos programadores y diseadores prefieren colocar una imagen a modo de vieta
usando una imagen de fondo y anulando la vieta propiamente dicha en lugar de usando esta
propiedad.
PROPIEDAD SHORTAND LIST-STYLE

Al igual que con muchas otras propiedades, CSS permite definir una propiedad shortand o abreviada
para aplicar estilos a listas. La sintaxis bsica a emplear es de este tipo:
selectorElemento {Valor-list-style-type valor-list-style-position valor-list-style-image }
Las propiedades se pueden indicar en cualquier orden. Ejemplos:

ul li {list-style: square inside; }
ul li {list-style: square outside url(http://i.imgur.com/afC0L.jpg) ; }
Para qu definir un tipo de vieta si definimos una imagen? Al definir una imagen, esta ser la que se
muestre siempre que sea posible cargarla. Si no es posible cargarla, se mostrar el tipo de vieta que
hayamos especificado (o si no hemos especificado ninguna, la vieta que aplique el navegador por
defecto).
EJERCICIO
Crea una lista ul con 27 elementos li (puedes partir del men que tenemos en el cdigo HTML de base
que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a
los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shortand,
los tres siguientes tipo circle e inside sin usar la propiedad shortand, los tres siguientes tipo square e
inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leadingzero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los
tres ltimos con una imagen mediante list-style-image. Para comprobar si tu cdigo y respuestas son
correctas puedes consultar en los foros aprenderaprogramar.com.

Mens vertticales y menss horizontales CSS.

C
MEN VEERTICAL Y MEN HORIZO

ONTAL CSS
A partir de
d listas dee tipo ul es habitual crear mens de navegacin en pgiinas web do
onde cada
elemento
o del men see correspond
de con un elemento de la lista. Para ello hemos de crear reglas css por
un lado paara eliminar los estilos por defecto de la lista y po
or otro para generar la aapariencia de
e men.
Para ver un
u ejemplo de
d aplicacin
n usaremos el
e cdigo HTM
ML de base que
q venimoss empleando
o a lo largo
del curso,, y en concreeto el fragmeento siguientte:

<div>
<div>Men</div>
<hr/>
<ul>
<li><a hreff="#">Inicio</aa></li>
<li> <a hreef="libros.html"">Libros de programacin</a>> </li>
<li> <a hreef="cursos.htmll">Cursos de prrogramacin</aa> </li>
<li> <a hreef="humor.html">Humor inforrmtico</a> </li>
</ul>
</div>

Dotaremo
os de definicin de clase al men as:: <ul class="m
menuVert1">>
Y crearem
mos los estilo
os necesarios para visualizar la lista como un meen vertical.. Escribe este cdigo y
comprueb
ba los resultaados:
/* Curso CSS
*{font-fam
mily: sans-serif; }
hr{display:none;}
ul.menuVeert1 {width: 220
0px; list-style: none;
n
text-align: center; text-sh
hadow: 2px 2pxx 4px red; padd
ding:0;}
ul.menuVeert1 li {paddingg: 10px 0px; borrder: groove blu
ue;
border-wid
dth: 6px 6px 0p
px 6px; backgro
ound-color: #F7
7FE2E;}
ul.menuVeert1 li:last-child
d { border-botto
om: groove bluee; border-botto
om-width: 6px;}
ul.menuVeert1 li a:link, ul..menuVert1 li a:visited
a
{ text-d
decoration: non
ne; color:black;}
ul.menuVeert1 li:hover {baackground-colo
or: #FFD700;}
om, 2006-2029
Mens verticales y mens horizontales CSS.
Todos los efectos que hemos aplicado en este cdigo han sido explicados durante el desarrollo del
curso, por lo que deberas ser capaz de interpretar todas las reglas que hemos definido.
MEN HORIZONTAL CSS

Vamos a crear un men horizontal a partir del anterior de la siguiente manera.
a) En el cdigo HTML introducimos esta lnea despus del cierre del elemento ul del men: <div
class="limpiador"></div>
b) Definimos el cdigo CSS de la siguiente manera:

*{font-family: sans-serif; }
hr{display:none;}
ul.menuVert1 { list-style: none; text-align: center; text-shadow: 2px 2px 4px red; padding:0; }
ul.menuVert1 li {width: 220px; padding: 10px 0px; border: groove blue;
border-width: 6px 6px 6px 6px; background-color: #F7FE2E; float:left;}
ul.menuVert1 li a:link, ul.menuVert1 li a:visited { text-decoration: none; color:black;}
ul.menuVert1 li:hover {background-color: #DC143C;}
.limpiador{padding:0; border-style:none; clear:both; }
El motivo para introducir un elemento limpiador (y la existencia de alternativas a este procedimiento)

ya la hemos discutido anteriormente. El resultado a obtener ser similar a este.
USAR MENS HORIZONTALES PREDISEADOS

Cuando estemos creando una web es posible que nos den un diseo en formato de imagen creado
por un diseador grfico que tengamos que transformar en un diseo web. Tambin es posible que
tengamos que crear una pgina web construyendo nosotros mismos un diseo.
En el rea de CSS existe una gran cantidad de cdigo que ya ha sido creada por otros programadores y
diseadores y que tenemos a nuestra disposicin en internet. En general ser ms til usar algo ya
disponible que crear un diseo desde cero (aunque depende de la situacin y de cada caso). Para hacer
uso de cdigo predefinido nicamente debemos elegir pginas web de diseadores que ofrecen su
cdigo gratuitamente y que nos resulten tiles o nos gusten.
Vamos a mostrar un cdigo que hemos adaptado desde un cdigo ofrecido por un diseador a travs
de internet para crear un men horizontal con aspecto de solapas y vamos a tratar de interpretarlo.
En primer lugar el cdigo HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos2.css">
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgacin</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul>
</div>
</body>
</html>
Y a continuacin el cdigo CSS (define correctamente el nombre de archivo) y el resultado de

visualizacin:
Mens vertticales y menss horizontales CSS.

C
body {fontt-family: sans-serif; backgroun

nd-color: yellow
w; font-size: 14p
px;}
#navlist { padding:
p
3px 0p
px;
border-bottom: 1px solid
d #778;
font: bold 16px Verdana, sans-serif; }
#navlist li { list-style: none; display: inline; margin-left:1
10px;}
#navlist li a { padding: 3px 1em;
border: 1p
px solid #778; border-bottom:
b
none;
backgroun
nd: #DDE; text-d
decoration: non
ne; }
#navlist li a:link
a
{ color: #4
448; }
#navlist li a:hover
a
{color: #000; background: #AAE; borrder-color: #227
7; }
#navlist li a#current
a
{ bacckground: #AAEE; }
Vamos a proceder a interpretar el

e cdigo. El cdigo
c
HTML de la partee del men, esquematizaadamente,
es el siguiiente:
<div id="n
navcontainerr">: define el contenedor para alojar el men com
mo con id n
navcontainerr
<ul id="naavlist">: define la lista qu
ue constituyee el men co
omo con id n
navlist
<li><a hreef="" id="cu
urrent"><//a></li>: define un eleme
ento a con id
d current
<li></li>>: se crean vaarios elemen
ntos de lista dentro
d
de ul y dentro de navcontaineer
</ul> </diiv>: se cierraan los elemen
ntos
En el cdigo CSS encontramos lo siguiente:

s
body {}: define el co
olor de fondo
o, tipo de fueente y tama
o de fuente
px 0; margin--left: 0; border-bottom: 1px
1 solid #77
78; font: bold 16px Verd
dana, sans#navlist { padding: 3p
o ms impo
ortante es el
e uso de bo
order-bottom
m para crear una lnea horizontal inferior al
serif; }: lo
contenedor a todo lo ancho de laa pgina. El padding
p
top y bottom see establece een 3px lo cuaal desplaza
h
abajo.
el borde hacia
om, 2006-2029
#navlist li { list-style: none; margin: 0; display: inline; margin-left:10px;}: elimina los smbolos de vieta
de lista y hace que los elementos de lista se muestren inline (uno a continuacin de otro en la misma
lnea) en lugar de como elementos block, con una separacin entre ellos.
#navlist li a { padding: 3px 0.5em; border: 1px solid #778; border-bottom: none; background: #DDE;
text-decoration: none; }: cada link dentro de un elemento de lista lleva un relleno (al ser de 3px hacia
abajo, la parte inferior de este relleno coincide con la lnea de borde que hemos colocado
anteriormente. Tambin se crean los bordes eliminando el inferior (que ya est construido mediante la
lnea de borde a todo lo ancho), se pone un color de fondo y se elimina el subrayado por defecto de los
link.
#navlist li a:link { color: #448; }: establece el color de texto para los links dentro de elementos li del
men.
#navlist li a:hover {color: #000; background: #AAE; border-color: #227;}: establece que cuando el ratn
se sita sobre un elemento de lista el texto se muestre negro, cambie su color de fondo y su color de
borde.
#navlist li a#current { background: #AAE; }: establece un color de fondo distinto para el elemento que
est identificado con el id current.
Nota: en un ejemplo de men horizontal anterior hemos usado float:left; mientras que en este ejemplo
hemos usado display:inline; Por qu? No es obligatorio hacer las cosas de una determinada manera,
por eso usamos una u otra forma para ver distintos ejemplos de formas de trabajar. Con los
conocimientos que ya tenemos, debemos pensar que hay una diferencia importante entre usar float
left y usar display inline: cuando los elementos float no caben en el espacio disponible se colocan
debajo creando una nueva lnea. En cambio los elementos inline se siguen manteniendo siempre en una
lnea. En muchos casos usar float ser ms ventajoso para poder aadir tantos elementos de men
como se deseen sin preocuparnos de si caben en el espacio disponible o no.
EJERCICIO
Analiza el cdigo HTML y CSS que mostramos a continuacin y realiza una interpretacin descriptiva del
cdigo, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cmo se
ha hecho la interpretacin descriptiva del cdigo de ejemplo que hemos visto anteriormente).
respuestas
son
correctas
puedes
consultar
en
los
foros
<html><head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">

/*Curso CSS aprenderaprogramar.com*/
#nav-menu ul {font-family: sans-serif; list-style: none;
padding: 0;margin: 0; }
#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none;
text-align: center;}
#nav-menu li a:hover {background-color: #FF6347; }
</style></head>
<body><div id="nav-menu">
<ul id="navlist"><li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgacin</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul></div></body></html>

Men desplegable horizon

ntal CSS. Efecto
o dropdown.
MEN DEESPLEGABLE CSS

Aunque en
e muchas ocasiones laa generacin de efecto
os visuales relativament
r
te complejos se hace
mediante un lenguajee como javasscript, vamoss a comprobaar como usando HTML y CSS podemo
os generar
c un efecto visual muyy interesantee.
un men desplegable atractivo y con
d
un men
m
con 4 items
i
princip
pales. Cada item
i
principaal tiene subitems o sube
elementos.
Vamos a disear
El esquem
ma que define cules son los iteems princip
pales y cules los subitems lo de
efinimos a
continuaccin.
Item principal
Subitems
Apre
ender a programar desdee cero
Libros
Creaacin y admin
nistracin weeb con Joom
mla
Lengguaje de proggramacin Jaava
Divulgaci
n
Los 100
1 trucos dee CSS
Pre
eguntas frecuentes
Hum
mor informtiico
Humor
Hum
mor bases de datos
Hum
mor programaacin
Hum
mor universid
dad
m
o aparrtado tendr tres subitems o subapaartados. El
Podemos comprobar que el primer item de men
i
tendr un solo sub
bitem. El terccer item no tendr ning
n subitem. El cuarto ite
em tendr
segundo item
cuatro subitems.
b cargue iniciialmente mo
ostraremos slo los itemss principales del men:
Cuando laa pgina web
om, 2006-2029
Men desplegable horizon

ntal CSS. Efecto
o dropdown.
Cuando el
e usuario po
osicione el puntero del ratn sobre un elemento principaal, aparecer el men
desplegab
ble con los subitems correspondientes. Por ejem
mplo al posicionarnos sob
bre el item Libros
se
vern los tres subitem
ms correspon
ndientes y se podr elegirr aquel que se
s desee:
La idea general
g
es laa siguiente. En HTML se
s definen todos
t
los iteems y subitems. Los ite
ems sern
elemento
os li dentro de
d una lista ul. Los men
ns que se despliegan
d
sern elemen
ntos ul que contienen
elemento
os li y que a su
s vez estn dentro de lo
os elementoss li del men
principal. P
Puede parece
er un poco
complicad
do, pero estu
udiando el c
digo llegars a entenderlo fcilmentte.
Escribe este
e
cdigo HTML y co
omprueba su
s estructurra. Hazte un
n esquema donde indiiques qu
elemento
os van quedando dentro
o de otros. Fjate en lo
os comentarios que heemos incluid
do, que te
servirn de
d gua. Ten en cuenta que
q en el do
ocumento HTTML no se define
d
qu ser visible al
a cargar la
pgina y qu
q no ser visible,
v
ya qu
ue esto lo haremos a travvs de CSS.
<html>
<head> <title>Portal web
c
>
pe="text/css" href="estilosCU0
01050D.css">
</head>
<body>
<div id="w
wrap"> 
<h2>CSS-M
Men desplegable</h2>
<p>aprend
deraprogramar.com</p>
<ul id="navbar"> 
<li><a hreff="http://apren
nderaprogramaar.com">Libros<</a> 
<ul> 
>
nderaprogramaar.com">Aprend
der a programaar desde cero<//a></li> 
nderaprogramaar.com">Creaci
n y administraacin web con Joomla</a></li
J
> 
nderaprogramaar.com">Lenguaaje de program
macin Java</a>></li> 
</ul>
</li>
nderaprogramaar.com">Divulgaacin</a> 
<ul> 
>
nderaprogramaar.com">Los 100 trucos de CSSS</a></li> 
</ul>
</li>
nderaprogramaar.com">Pregun
ntas frecuentess</a></li>
om, 2006-2029
Men desplegable horizontal CSS. Efecto dropdown.
<li><a href="http://aprenderaprogramar.com">Humor</a> 

<ul> 
<li><a href="http://aprenderaprogramar.com">Humor informtico</a></li> 
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> 
<li><a href="http://aprenderaprogramar.com">Humor programacin</a></li> 
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> 
</ul>
</li>
</ul>
<div class="limpiador"></div> 
</div>
</body>
</html>
Escribe ahora el cdigo CSS. Con los contenidos que hemos visto a lo largo del curso debes ser capaz de
interpretar todas las instrucciones que aparecen en el mismo. Pon el nombre de archivo css adecuado.
Ten en cuenta que en algunos navegadores, en especial en los ms antiguos, es posible que no
obtengas el resultado deseado.
body {font: 62.5%/1.2 Arial, Helvetica, sans-serif; background-color: #eee; }
h2 {margin:0;}
/*Caja contenedora*/
#wrap { font-size: 1.8em; width: 520px; padding: 20px;
margin: 0 auto; /*Da lugar al centrado de la caja en el elemento superior body*/
background-color: #fff;}
/* Estilos que crean el men desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }
/*Elementos items principales de men que se muestran siempre*/
#navbar li { list-style: none; float: left; margin:10px;}
#navbar li a {
display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
padding: 3px 8px; background-color: #5e8ce9; color: #fff;
text-decoration: none; }
/*Listas de subitems de men*/
#navbar li ul {
display: none; /*La lista inicialmente no se muestra debido a display:none; */
background-color: #69f;}
#navbar li:hover ul {
font-size: 12px;
display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
position: absolute; /*Al desplegarse el submen no ocupa espacio y no desplaza a otros elementos gracias a que
establecemos position absolute*/
margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
}
Men desplegable horizontal CSS. Efecto dropdown.
#navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en
vertical */
/*Creamos la apariencia de los subitems de men, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }
/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratn sobre un subitem de men*/
#navbar li li a:hover { background-color: #8db3ff; }
.limpiador{padding:0; border-style:none; clear:both; } /*Forzamos a la caja a mostrarse an conteniendo elementos
flotantes*/
Es importante que comprendas todo el cdigo HTML y todo el cdigo CSS que hemos utilizado.
Sealaremos algunos aspectos principales que se usan para generar el efecto de men desplegable:
a) Las listas de subitems no se muestran inicialmente porque tienen establecida la propiedad
display como none. Hacemos que se muestren cuando el usuario pone el ratn encima de un
item principal indicando que la lista hija de ese elemento pase a tener su propiedad display
como block.
b) Las listas de subitems no desplazan a otros elementos porque establecemos su propiedad
position como absolute. El valor absolute permite que un elemento se desplace respecto al
origen de coordenadas del primer elemento contenedor posicionado respecto a la esquina
superior izquierda de la ventana de visualizacin; el resto de elementos actan como si el
elemento con position absolute no existiera, por lo que su espacio es ocupado por otros
elementos. Nosotros no usamos absolute para crear un desplazamiento, pero s nos
aprovechamos de que da lugar a que no se ocupe espacio.
Adems en este ejemplo utilizamos otras propiedades como float que ya hemos estudiado
anteriormente en el curso y que aqu nos sirven para repasar y reafirmar conocimientos. Si ests
siguiendo el curso y tienes dudas, consulta en los foros en http://aprenderaprogramar.com/foros.
Un aspecto que merece la pena comentar es cmo CSS introduce elementos que le permiten realizar
tareas asemejables a las de un lenguaje de programacin. En concreto, fjate cmo la lgica del men
desplegable es de tipo condicional, una capacidad propia de los lenguajes de programacin. En
concreto, se tratara de ejecutar Si el usuario tiene el ratn apuntando a un item de men { Mostrar
lista desplegable de subitems} sino { Mostrar slo el item principal }. No lo hemos expresado as, pero
la lgica se aproxima a esto. Comentamos en su momento que CSS no es un lenguaje de programacin,
no obstante se entremezcla con stos al escribirse embebidos unos lenguajes con otros, o tiene algunas
analogas como la que estamos comentando que se asemeja a una operacin lgica.

Aplicar estillos a tablas con

n CSS. border-ccollapse.
ESTILOS PARA
P
TABLAS
En el pasado las tablas fueron elementos qu
ue muchos diseadores
d
o programaadores utilizaban para
d
dondee las celdas eran
e
conteneedores parte
es de la web.. Hoy en da esto ya no se usa y los
crear un diseo
diseos se crean usando elementos flotantes o nuevas capacidadess de CSS parra crear colu
umnas. Sin
o elementos importantes
i
dentro de una
u web.
embargo, las tablas siguen siendo
ue no est reecomendado
o el uso de taablas para crrear divisiones de maque
etacin en
Debe queedar claro qu
la web. Por ejemplo un
u men no
o es recomen
ndable coloccarlo dentro de una tabla, ser prefe
erible usar
elemento
os flotantes para
p
ello. Sin embargo, muchas vecces estaremo
os trabajand
do en desarrrollos web
donde no
os ser necessario introdu
ucir tablas sim
mplemente porque
p
se trata de un co
ontenido tabulado. Por
contenido
o tabulado hacemos
h
alu
usin a una serie de re
egistros que describen los valores de ciertos
parmetros que se ind
dican en la cabecera
c
de la
l tabla. Por ejemplo, un
na tabla pued
de servir para describir
a
los nutrientes de los alimentos.
o nutricionall por cada 10

00 g de alimeento.
Contenido
Alime
ento
Caloras (kkCal)
Grasas (g)
Pro
otena (g)
Carbohid
dratos (g)
Arnd
dano
49
0.2
0.4
12
2.7
Pltano
90
0.3
1.0
23
3.5
Cere
eza
46
0.4
0.9
10
0.9
Fre
esa
37
0.5
0.8
8.3
ntenidos tab
bulados usam
mos tablas y para lograr que la tablaa tenga un
Para representar estee tipo de con
aspecto esttico
e
adeccuado aplicam
mos estilos CSS.
C
Recordareemos ahora algunos concceptos bsiccos de HTML:
<table> </table> deelimita la tab
bla.
<caption>> </caption>: elementto opcional que
q permite poner un tttulo de tablaa. Muchas ve
eces no se
usa.
d
filas o celdas quee no son celd
das de datos, sino encabeezados de la tabla.
<thead> <thead>: delimita
<th> <//th>: delimitaa una celda de
d encabezado (table he
eader). A vecces todas las celdas de un
na tabla se
definen co
omo celdas normales
n
y se
s prescinde del uso de th.
<tbody> <tbody>: delimita
d
las fiilas y celdas de datos de una tabla.
<tr> </ttr>: delimita una fila (tab
ble row).
<td> <//td>: delimitaa una celda normal
n
de daatos (table data cell).
<tfoot> </tfoot>: deelimita el piee de tabla.
om, 2006-2029
Aplicar estilos a tablas con CSS. border-collapse.
Vamos a utilizar el siguiente cdigo HTML para trabajar los estilos de tablas. Escribe el cdigo en un
editor y guarda el documento HTML.
<html>
<link rel="stylesheet" type="text/css" href="estilosCU01051D.css">
</head>
<body>
<table >
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Caloras (kCal)</th> <th>Grasas (g)</th>
<th>Protena (g)</th> <th>Carbohidratos (g)</th>
</tr>
<tr> <td>Arndano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr> <td>Pltano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
</html>
Por tradicin era (y en cierta medida sigue siendo) muy habitual usar atributos de la etiqueta HTML
table para definir los bordes y espaciado en las tablas, por ejemplo <table border="1" cellpadding="14"
cellspacing="0">
Estos atributos no los usaremos en nuestros desarrollos web, ya que como venimos indicando a lo largo
de todo el curso debemos separar la estructura del documento (html) de su apariencia (css).
Si la tabla no tiene definido ningn estilo se mostrar como por defecto la muestre el navegador, en
general sin bordes. Para introducir bordes tenemos que definir el borde de la tabla (borde externo) y el
borde de las celdas (bordes internos). Escribe este cdigo CSS, gurdalo en un archivo css con el
nombre adecuado, y comprueba la diferencia entre visualizar la tabla sin estilos o con este estilo bsico:
body {font-family: Arial, Helvetica, sans-serif; }
table, th, td {border: 1px solid #000;}
Podemos comprobar que al dibujar la tabla se dibuja un borde externo para la tabla en su conjunto y
luego un borde interno para cada una de las celdas. El efecto que se genera es un poco extrao al tener
la tabla lneas dobles de separacin. Este efecto se puede anular usando la propiedad border-collapse
como veremos a continuacin.
ATRIBUTOS QUE NO SE HEREDAN EN TABLAS

Algunas reglas que normalmente se heredan no son heredadas por las tablas. Por ejemplo si aplicamos
una regla como body {font-size: 8px;} podremos comprobar que en algunos navegadores las tablas no
heredan este tamao. Tendremos entonces que especificar estos valores para tablas usando
declaraciones como table {font-size: 8px;}. Aunque sean los mismos atributos que los definidos para la
etiqueta body, ser necesario para evitar que el navegador aplique el valor por defecto que tenga
previsto para tablas.
Nota: otra va por la que se puede conseguir la herencia de algunos atributos como font-size en tablas
es aadiendo una declaracin en cabecera del documento HTML del tipo <!DOCTYPE html PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Este tipo de declaraciones
pueden dar lugar a que el navegador acte de una forma u otra (se dice que el navegador utiliza un
modo u otro), lo cual nos vuelve a referenciar al problema de las diferentes formas en que los distintos
navegadores pueden mostrar un mismo cdigo HTML. En general preferiremos reescribir el atributo y
asegurarnos de que el navegador actuar conforme esperamos antes que fiarnos de que todos los
navegadores respondan igual ante una declaracin en la cabecera del documento HTML.
ANCHURA Y ALTURA DE TABLAS Y ELEMENTOS DE TABLAS

La anchura de una tabla ser la necesaria para mostrar sus contenidos y cada celda tendr el ancho
necesario, excepto si establecemos indicaciones especficas. Una forma interesante de hacerlo es
usando porcentajes. Por ejemplo si establecemos un ancho para la tabla de 550 px y tenemos 5
columnas, podemos indicar que todas las columnas tengan el mismo ancho dividiendo el 100% de
ancho de la tabla entre 5 para obtener un 20 %. Aplicaramos reglas de este tipo: table {width: 550px;}
th, td {width: 20%;}
Si la tabla est dentro de otro contenedor y queremos que ocupe el 100% de espacio disponible
podemos aplicar reglas del tipo table {width: 100%; }
ATRIBUTOS NO APLICABLES A TABLAS

Podemos establecer un valor de height para las celdas de tablas pero este valor no ser respetado si el
contenido de la celda es mayor que el espacio disponible. Si intentamos aplicar un atributo como th, td
{ overflow: hidden;} comprobaremos que probablemente no funcione. Si necesitamos aplicar un valor
height y que ste no sea modificable de ninguna manera, podemos introducir el contenido de las celdas
en el HTML dentro de elementos div. Por ejemplo:
<td><div>Arndano este texto es muy largo y va a exceder el espacio disponible</div></td>
Ahora estableceramos el control de la altura de los elementos div y el valor de la propiedad overflow
que s es aplicable a los elementos div de forma similar a esta:
th, td {text-align: center; padding:0.5em; width:25%; height: 1em; overflow: hidden;}
th div, td div {height: 1em; overflow: hidden; color:red;}
Haz pruebas escribiendo cdigo para verificar lo que hemos expuesto.
PROPIEDAD BORDER-COLLAPSE
PROPIEDAD CSS border-collapse
Permite controlar si en una tabla cada elemento mantiene un borde

propio generando un efecto de bordes dobles o si los bordes se
fusionan generando un efecto de borde nico.
Valor por defecto
separate
Aplicable a
Tablas
separate (cada elemento conserva su borde)

esta propiedad
collapse (los bordes se fusionan en un borde nico)

.myTable {border-collapse: separate;}

Ejemplos
aprenderaprogramar.com .myTableSP {border-collapse: collapse;}
Aunque el valor separate es el valor por defecto para esta propiedad, la mayora de las veces se aplica
el valor collapse porque genera una visualizacin ms sencilla y acorde a las expectativas de los
usuarios.
Modifica el cdigo CSS del ejemplo anterior como indicamos a continuacin y comprueba el efecto que
se produce:
body {font-family: Arial, Helvetica, sans-serif; }
table, th, td {border: 1px solid #000; border-collapse: collapse;}
th, td {text-align: center; padding:0.5em;}
Comprobars que ahora los bordes se muestran como bordes nicos.

EJERCICIO
Crea un documento HTML con tres tablas, todas ellas iguales, con un ttulo de tabla, cinco columnas y 7
filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplcale los siguientes
estilos y comprueba la visualizacin obtenida:
a) La tabla 1 tendr una anchura de 600 pxeles y cada columna tendr un 20% de la anchura total de la
tabla. Existirn bordes nicos de color gris y tendrn un grosor de 8 pxeles.
b) La tabla 2 tendr una anchura igual al 100 % disponible en la ventana y cada columna tendr un 20 %
de la anchura total de la tabla. Existirn bordes dobles de color marrn y tendrn un grosor de 2
pxeles.
c) La tabla 3 tendr una anchura de 500 pxeles y cada columna tendr 100 pxeles de anchura. Slo
existirn bordes en la parte inferior de las filas (es decir, no habr bordes laterales ni superiores), tipo
borde nico, con un grosor de 6 pxeles y color azul.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros

Tablas CSS. border-spacingg, caption-side

e, empty-cells.
DISEO CSS
C DE TABLA
AS
Hay una serie de prropiedades que
q nos perrmiten defin
nir estilos para tablas. Vamos a esstudiar las
propiedad
des border-sspacing, capttion-side y empty-cells. Adems
A
abordaremos c
mo utilizar los fondos
en las tab
blas, cmo crear
c
filas co
on colores diferentes
d
y veremos un
n ejemplo dee cmo utilizar estilos
creados por
p otros pro
ogramadoress o diseadorres.
PROPIEDA
AD BORDER--SPACING
PROPIEDA
AD CSS bord
der-spacing
Funcin de la propie
edad
olar la sepaaracin entrre bordes d

dentro de una
u
tabla
Permite contro
des no estn fusionados con border-ccollapse.
cuando los bord
Valor po
or defecto
Aplicable a
Tab
blas sin bordeer-collapse establecido
e
o con border-collapse: se
eparate;
Unaa unidad de medida vlida en
e CSS (indica separacin vertical y horizzontal)

opiedad
esta pro
Dos unidades de medida sepaaradas con un

n espacio (la p
primera unidaad indicar
ontal y la segu
unda separacin vertical)
sepaaracin horizo
inhe
.myTable {borderr-spacing: 2em

m;}
Ejemplos
eraprogramaar.com .myTableSP {bordder-spacing: 15px
aprende
1
5px;}
Esta prop
piedad es anloga
a
al atributo
a
cellspacing que
e se usaba tradicionalm
mente en HTML
H
para
establecer una separaacin entre celdas
c
en lass tablas. En el
e caso de la antigua propiedad cellp
padding, se
mplemente usando
u
la prropiedad pad
dding.
puede obtener un efeecto anlogo en tablas sim
0 el efecto es similar a definir borrder-collapsee:collapse; aunque
a
en
Si se estaablece bordeer-spacing: 0;
realidad son
s situacion
nes distintas.. Usando borrder-spacingg:0; los bordees dobles sigguen existien
ndo, lo que
ocurre ess que estn tan juntos que
q visualmeente slo se
e aprecia una lnea de b
borde. En esste caso el
grosor de las lneas dee borde ser doble del esspecificado (ya
( que se juntan dos lneeas de borde
e). Usando
ollapse: collapse; no existen lneas dee borde paraa cada celda,, sino que las lneas colin
ndantes se
border-co
fusionan en una sola lnea. En este caso el grosor de
d las lneass de borde ser exactaamente el
especificaado.
om, 2006-2029
Tablas CSS. border-spacing, caption-side, empty-cells.
PROPIEDAD CAPTION-SIDE
Es una propiedad que permite colocar el elemento caption en una posicin concreta. Los valores
permitidos son top, right, left, bottom y hacen que el ttulo establecido en caption se coloque en el
lugar especificado. Por defecto el ttulo se coloca en posicin top (encima de la tabla). En posiciones top
y bottom (debajo de la tabla) el ttulo aparece por defecto centrado horizontalmente. Si queremos
establecer una alineacin horizontal especfica podemos usar text-align como en este ejemplo, que
coloca el ttulo abajo a la derecha:
table {width: 550px; caption-side:bottom;}
caption {text-align:right;}
En el caso de las posiciones left y right por defecto el ttulo se coloca en el lateral, alineado con la parte
superior de la tabla. Si queremos centrarlo verticalmente podemos hacerlo como en este ejemplo:
table {width: 550px; caption-side:left;}
caption {vertical-align:middle;}
Esta propiedad es una propiedad poco usada, aunque en algunos casos concretos puede resultar de
inters.
PROPIEDAD EMPTY-CELLS
Normalmente las celdas tienen un contenido. Por ejemplo <td>9</td> es una celda con contenido 9.
<td> </td> es una celda con un espacio en blanco. No obstante, en algunos casos las celdas
pueden estar completamente vacas en forma <td></td>. Esto es bastante frecuente cuando no se
tienen algunos datos y resulta imposible rellenar la tabla completamente.
La propiedad empty-cells sirve para definir cmo debe mostrar el navegador las celdas vacas. Tiene dos
valores posibles: show (valor por defecto) y hide. Si usamos show (o simplemente si no especificamos
esta propiedad) las celdas vacas se mostrarn de la misma manera que las celdas normales. Si usamos
hide los bordes y fondo (background) de la celda no se mostrarn
Esta propiedad es una propiedad poco usada, aunque en algunos casos concretos puede resultar de
inters.
FONDOS (BACKGROUND EN TABLAS)

Se pueden aplicar colores de fondo o imgenes de fondo a las tablas. La nica peculiaridad a tener en
cuenta es que en una tabla existen distintos elementos y a la hora de aplicar fondos cada elemento
queda en una capa inferior o superior a la hora de visualizarse, de modo que un fondo en una capa
inferior puede quedar oculto por un fondo establecido en una capa superior. Los fondos que pueden
establecerse y el orden en que quedaran ordenados son los siguientes:
1. Fondo del elemento table, es el que se sita ms abajo y ser tapado total o parcialmente por
otros fondos si se establecen.
2. Fondo de grupos de columnas
3. Fondo de columnas
4. Fondo de grupos de filas

5. Fondo de filas
6. Fondo de celdas, que son los que se sitan ms arriba y tapan total o parcialmente a los
fondos que existan debajo.
COLORES DE FILAS INTERCALADOS O ALTERNOS

Es frecuente presentar tablas donde los colores de filas estn intercalados o alternos. Esto se puede
hacer de forma sencilla con CSS. Una forma de hacerlo sera establecer en el documento HTML una
especificacin de clase para cada fila. Por ejemplo <tr class=tr_type1></tr> alternando con <tr
class=tr_type2></tr>.
Pero en general ser mucho ms prctico y sencillo usar los selectores avanzados :nth-child(odd) y :nthchild(even) que ya hemos explicado anteriormente en el curso para conseguir alternar los colores de
fondo. Aqu mostramos un cdigo de ejemplo donde aplicamos un color de fondo amarillo a las celdas
de cabecera de la tabla y un color gris a las filas impares y un color rosado a las filas pares.
table th {background-color: yellow; }
table tr:nth-child(odd) {background-color: grey;}
table tr:nth-child(even) {background-color: pink;}
El resultado que se consigue es del tipo que mostramos a continuacin.
USAR DISEOS EXISTENTES

Como ya hemos comentado en otras ocasiones, existen muchos diseos atractivos que han sido
creados por diseadores expertos que son puestos a disposicin de todos por sus creadores a travs de
internet. Normalmente ser interesante usar estos diseos cuando queramos ahorrar tiempo y nos
resulte til un diseo que se nos proponga. Para encontrar diseos para tablas basta con usar un
buscador e introducir una bsqueda como css table designs diseos css para tablas. En los
resultados, podremos encontrar diferentes propuestas de diseo y de cdigo.
A continuacin te indicamos el cdigo de un diseo de tabla propuesto por un diseador. Escribe el

cdigo HTML y el cdigo CSS y comprueba el resultado.
<html>
<link rel="stylesheet" type="text/css" href="estilosCU01051D.css">
</head>
<body>
<table >
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Caloras (kCal)</th> <th>Grasas (g)</th>
<th>Protena (g)</th> <th>Carbohidratos (g)</th>
</tr>
<tr> <td>Arndano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr> <td>Pltano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
</html>

body {font-family: Arial, Helvetica, sans-serif;}
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse; }
th {
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}
td {
padding: 8px;
color: #669;
background: #e8edff;
border-bottom: 1px solid #fff;
border-top: 1px solid transparent;
}
tr:hover td { background: #d0dafd; color: #339; }
Tablas CSS. border-spacingg, caption-side

e, empty-cells.
Fjate en el cdigo CSSS que crea este diseo

o de tabla. Con
C los contenidos que hemos estudiado a lo
c
ya deb
bemos ser caapaces de comprender to
odas las reglaas CSS utilizaadas.
largo del curso
Ten en cuenta que nosotros
n
aqu
u por motivvos didctico
os estamos aplicando eestilos directtamente a
os table, th, td,
t etc. lo cu
ual supondraa que son esstilos para to
odas las tablas. Para deffinir varios
elemento
estilos differentes parra tablas basstar definir clases o idss que apliqu
uemos a tab
blas y luego definir los
estilos para esos ids o clases. Porr ejemplo #tablaTipo1 td
d { } .tab
blaTipo1 td { } seran reglas que
mitiran aplicaar estilos differentes a taablas concre
etas a las que hayamos aplicado un id o clase
nos perm
concreta.
Con este ejemplo com
mprobamos otra cosa: un buen dise
o no tiene por qu ser complicado a nivel de
n la tabla antterior lo pod
demos comprobar, un bu
uen diseo puede basarse simplemen
nte en una
cdigo. En
buena com
mbinacin de colores dee texto, colorres de fondo
o y tipos de leetra. El cdiggo es bastan
nte sencillo
y esto es bueno para acelerar
a
la velocidad de carga de unaa pgina web
b y para evitaar problemas debido a
ntos navegaadores interp
preten el c
digo de forrma distintaa. Cuando ests trabajando en la
que distin
creacin de
d pginas web
w recuerda esta mxim
ma: lo senccillo puede ser bello y effectivo. Lo co
omplicado
tender a crearnos prroblemas.
Lo que hemos
h
indiccado aqu aplicado a tablas es vlido tambin para el resto de diseo CSS:
composiciones de pgginas web, estilos
e
para botones,
b
estiilos para form
mularios, etcc. pueden en
ncontrarse
nos tiles paara nuestros diseos, y se
er preferiblee el cdigo ssencillo al complicado.
en interneet y resultarn
O
EJERCICIO
Crea el c
digo HTML de
d una tablaa con un ttulo de tabla, cinco
c
column
nas y 7 filas ((la primera ella,
e fila de
encabezados que no
o son datos propiamentte dichos). Aplcale
A
los siguientes estilos, com
mprueba la
ntes cuestion
nes:
visualizacin obtenidaa y respondee a las siguien
/* Curso CSS
C aprenderaprogramar.com */
table { collor: #333; font--family: Helveticca, Arial, sans-sserif; width: 640
0px; border-colllapse: collapsee;}
td, th { borrder: 1px solid transparent;
t
heeight: 30px; }
th { backgrround: #D3D3D
D3; font-weight: bold; }
td { backgrround: #FAFAFA
A; text-align: ceenter; }
tr:nth-child(even) td { bacckground: #F1FF1F1; }
tr:nth-child(odd) td { background: #FEFEEFE; }
tr td:hover { background:: #666; color: #FFF; }
om, 2006-2029
a) Describe cul es el efecto que genera cada una de las especificaciones que hemos incluido en el
cdigo CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table
con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que
).
b) Indica qu modificacin habra que hacer en el cdigo para que se muestren bordes dobles con
grosor 2 pxeles.
c) Indica qu modificacin habra que hacer en el cdigo para que se muestren bordes simples de color
naranja de grosor 3 pxeles.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros

Diseo lquido (fluido) CSSS frente a respo

onsive design.
DISEO LQUIDO FRENTE A RESPO

ONSIVE DESIGN
uge del acceeso a intern
net a travss de tablets, smartphon
nes, smartTV
Vs, etc. ha surgido el
Con el au
problemaa de que las pginas web
b deben mostrarse en pantallas
p
de muy diferen
nte tamao. Conseguir
muy distintos es algo q
que la misma pginaa web se veea bien en dispositivos
d
que no es sencillo
s
de
resolver.
mera aproxim
macin o intento de ressolver este problema
p
ess el denomin
nado diseo
o lquido o
Una prim
fluido. See dice que una
u pgina web
w tiene diseo
d
lquid
do cuando laa anchura de sus eleme
entos est
definida utilizando
u
po
orcentajes. Supongamos
S
que tenemo
os una cabeccera cuyo an
ncho fijamoss en el 100
%, una co
olumna laterral cuyo anch
ho fijamos en el 25 % y una parte prrincipal de ccontenidos cuyo ancho
fijamos en
e el 75%. El
E resultado ser que al visualizarse
e en distintos dispositivvos la anchu
ura de los
elemento
os ser un po
orcentaje de la anchura disponible.
d
Ve
eamos algun
nos ejemploss:
D
Dispositivo
Dimension
nes
p
pantalla
en pixeles
p
Ancho que tomar la

columna lateraal (25 %)
A
Ancho que to
omar la
p
parte princip
pal (75%)
Un
n TV Full HD
1.920 x 108
80 px
480 pxx
1440 px
p
Un ord
denador porrttil
1280 x 800
0 px
320 pxx
960 px
p
Tablet Saamsung Galaaxy Tab
800 x 1280
0 px
200 pxx
600 px
p
iPhone
640 x 960
160 pxx
480 px
p
mos que esttablecemos un ancho ffijo para nuestra pgin

na web de 9
900 px y qu
ue para el
Supongam
contenedor que confforma la columna lateraal definimoss #columnaLLateral {widh
ht: 225px; } y para el
#
tral {width: 675px;}.
6
Con
n estas reglaas decimos
contenedor del espaccio principal definimos #espacioCent
que el disseo no es flluido porquee no se adap
ptarn al anccho disponible de pantalla. En la TV Full HD de
nuestro ejemplo
e
el an
ncho disponible es de 1920 px, mienttras que el ancho total q
que ocuparem
mos con la
definicin
n indicada ess de 900 pxx. Esto supon
ne que 1920
0 920 = 10
000px de la pantalla de
el televisor
quedar libre, con lo que la sensaacin ser qu
ue la pgina web se ve muy
m pequeaa y se desaprovecha la
pantalla.
ntrario, si consideramos el iPhone deel ejemplo, su
s ancho disp
ponible es dee 640 px mie
entras que
Por el con
nuestra pgina
p
web tiene
t
900 px de ancho. Como la pgina web no
n cabe en la pantalla, aparecer
cortada y para poder ver las partees no visibless aparecern unas barrass de scroll. Laa sensacin ser
s
que la
pgina weeb se ve muyy grande y co
ortada.
Pasamos ahora al diseeo fluido. Para
P
ello deffiniramos lass anchuras en
e porcentajes. Fjate qu
ue siempre
hablamoss de anchuraas porque se entiende qu
ue las pginaas web en veertical son m
muy largas y el usuario
om, 2006-2029
Diseo lquido (fluido) CSS frente a responsive design.
ya est acostumbrado a tener que subir y bajar por ellas. En cambio, tener que moverse lateralmente
es algo que suele considerarse desagradable. En el diseo fluido definiramos los anchos de esta
manera: para la columna lateral #columnaLateral {widht: 25%; } y para el contenedor del espacio
principal #espacioCentral {width: 75%;}.
Parece una solucin ideal. Ahora el tamao de la pgina web se ajustar a la pantalla y no se
desaprovechar ninguna parte de las pantallas grandes ni aparecern barras de scroll lateral en las
pantallas pequeas. Qu ocurre en la prctica? En la prctica esta solucin no es ideal ni mucho
menos. Nos encontramos que ocurre lo siguiente: en las pantallas grandes, un prrafo que en una
pantalla de un ordenador mediano se ve en 5 lneas se ver quizs en una sola lnea ya que el ancho
disponible es muy grande. El efecto es una lnea muy larga que resulta desagradable de leer. Por el
contrario, cuando un prrafo consta de una sola lnea corta, en una pantalla muy grande se ver en el
lateral izquierdo mientras que a su derecha queda un gran espacio en blanco. En general, el diseo
fluido dar lugar a una deformacin de contenidos que quedan muy a lo largo o demasiado cortos, y la
impresin general es mala.
En las pantallas pequeas como las de un smartphone, el diseo fluido har que la pgina web se
comprima para ocupar el ancho disponible que es muy poco. Cuando la pantalla es realmente
pequea, el efecto que se genera es de miniaturizacin o que todo se ve diminuto, tan pequeo
que prcticamente no se puede leer. Por ello en la prctica es ms habitual establecer estas anchuras
principales en pixeles antes que en porcentajes.
La solucin a obtener una correcta visualizacin en pginas web puede pasar por distintas vas:
a) Utilizar lo que se denomina responsive design que se podra traducir como diseo sensible al
dispotivo aunque muchas veces en espaol se habla simplemente de diseo responsive. Esta
tcnica trata de usar un nico HTML y CSS pero mediante la deteccin del dispositivo en que se
va a visualizar la pgina, ofrecer un diseo adecuado para cada tipo de dispositivo (esto obliga a
escribir diferentes reglas segn el tipo de dispositivo en que se vaya a visualizar la web).
b) Utilizar diferentes dominios para el acceso con dispositivos pequeos o dispositivos grandes.
Por ejemplo el dominio http://www.iberia.com/ est destinado a dispositivos de pantallas
medianas o grandes mientras que http://iberia.mobi/ est destinado a tablets, smartphones y
similares. Los diseos son distintos: ms simples para los dispositos pequeos. Puede utilizarse
la deteccin de dispositivo para redirigir del dominio principal al .mobi.
c) Definir ancho en pixeles, que como indicamos al hablar de medidas CSS podra considerarse una
medida hbrida entre relativa y absoluta y es la que suele ofrecer un mejor resultado
intermedio.
d) Utilizar otras tcnicas.
En general cuando hablamos de las diferentes tcnicas que se pueden emplear hay algunas
propiedades CSS que suelen resultar tiles y que son: max-widht, min-width, max-height y min-height.
Diseo lquido (fluido) CSS frente a responsive design.
PROPIEDAD MAX-WIDTH
Esta propiedad permite definir la anchura mxima de un elemento, indicada en una unidad de medida
vlida con CSS (admitindose porcentajes). Su valor por defecto es none, que equivale a que esta
propiedad no est declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque
s a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.
Si se usa un porcentaje, se refiere al ancho del elemento contenedor.
En el diseo fluido, nos puede servir para evitar que en las pantallas muy grandes la pgina web se
expanda demasiado lateralmente. De este modo podemos permitir que se vea ms grande, pero con un
lmite mximo. Ejemplo: #columnaLateral {width: 25%; max-widht: 420px; } #espacioCentral {width:
75%; max-widht: 1680px;}.
PROPIEDAD MIN-WIDTH
Esta propiedad permite definir la anchura mnima de un elemento, indicada en una unidad de medida
vlida con CSS (admitindose porcentajes). Su valor por defecto es none, que equivale a que esta
propiedad no est declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque
s a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.
Si se usa un porcentaje, se refiere al ancho del elemento contenedor.
En el diseo fluido, nos puede servir para evitar que en las pantallas muy pequeas la pgina web se
miniaturize. De este modo podemos permitir que se vea ms pequea, pero con un lmite mnimo.
Ejemplo: #columnaLateral {widht: 25%; max-widht: 420px; min-widht: 180px; } #espacioCentral {width:
75%; max-widht: 1680px; min-width: 720px; }.
PROPIEDAD MAX-HEIGHT
Esta propiedad es anloga a max-widht, pero menos usada ya que como hemos indicado el sentido
vertical suele tomarse menos en consideracin. Se puede aplicar a cualquier elemento excepto
elementos inline (aunque s a elementos inline tipo imagen u objetos incrustados), columnas de tablas
o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del
contenedor. Si este valor no est establecido, aplicar esta regla puede no tener efecto alguno.
PROPIEDAD MIN-HEIGHT
Esta propiedad es anloga a min-widht, pero menos usada ya que como hemos indicado el sentido
vertical suele tomarse menos en consideracin. Se puede aplicar a cualquier elemento excepto
elementos inline (aunque s a elementos inline tipo imagen u objetos incrustados), columnas de tablas
o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del
contenedor. Si este valor no est establecido, aplicar esta regla puede no tener efecto alguno.
Propiedad cursor
c
CSS. Efecctos sobre el puntero del rat
n.
CURSOR CSS
C
CSS perm
mite modificaar el smbolo
o que se muestra como puntero cuaando se sitaa el puntero
o del ratn
sobre unaa superficie mediante
m
la propiedad cursor.
c
Aunque no siemp
pre se usa, essta propiedaad permite
generar algunos efecttos visuales atractivos
a
y hacer
h
ms am
migable la naavegacin.
El motivo
o por el que resulta de mayor inters esta prop
piedad es po
orque combinada con t
cnicas de
programaacin puede servir para generar efeectos dinmicos indicativvos de accio
ones del usuario como
elemento que se pu
uede seleccio
onar o arrasstrar o pro
oceso en ejeecucin cam
mbiando la forma del
d ratn. Taambin se pu
uede usar sin combinar con program
macin, pero
o las posibilid
dades que
puntero del
tendremo
os para aplicaar esta propiiedad sern ms limitadaas.
La propieedad cursor es habituall aplicarla en
e combinaccin con hover para caambiar el asspecto del
puntero cuando
c
el ussuario se posiciona en determinado
d
web, aunque
e se puede
s lugares dee la pgina w
aplicar a un
u elemento
o sin necesidaad de hacerlo en combin
nacin con ho
over.
AD CURSOR
PROPIEDA
La forma ms directa para entend
der esta prop
piedad es vie
endo una im
magen con los tipos ms habituales
ueden mostrrar.
de punterros que se pu
PROP
PIEDAD CSS cursor
c
Funcin de la propie
edad
Permite definir el aspecto del puntero que

q se muesttra en pantalla.
Valor po
or defecto
Autto
Aplicable a
Tod
dos los elemeentos
om, 2006-2029
Propiedad cursor CSS. Efectos sobre el puntero del ratn.
PROPIEDAD CSS cursor

auto (el navegador determina el aspecto)
url (rutaDeLaImagenDeseada) [Se pueden especificar varias urls separadas por comas
por si no es posible cargar una se intenta cargar la siguiente y un valor predefinido final
por si no es posible cargar ninguna url)
Una palabra clave predefinida indicadora de un tipo general: auto, default (puntero
bsico de defecto, usualmente una flecha), none (no muestra puntero)
Una palabra clave predefinida indicadora de un tipo de status: context-menu, help,
pointer, progress, wait

esta propiedad
Una palabra clave predefinida indicadora de un tipo de seleccin: cell, crosshair, text,
vertical-text
Una palabra clave predefinida indicadora de un tipo de arrastrar y soltar: alias, copy,
move, no-drop, not-allowed
Una palabra clave predefinida indicadora de redimensionamiento o scrolling: all-scroll,
col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, ne-resize,
nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize
Una palabra clave predefinida indicadora de zoom: zoom-in, zoom-out

.myBox {cursor: url(CU01048D_1.png), wait;}
Ejemplos
aprenderaprogramar.com .myBoxT2 { cursor: help;}
Prueba el resultado de usar la propiedad cursor CSS escribiendo el cdigo que mostramos a
continuacin y visualizndolo en tu navegador. Ten en cuenta que algunas palabras clave no son
reconocidas por algunos navegadores (cuanto ms antiguo sea el navegador menos palabras clave
reconocer):
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border-style:solid; border-width:1px;
height: 95px; width: 240px;
margin:10px; background-color:yellow;
font-size: 24px; text-align:center;}
</style>
</head>
<body>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="cursor: url(http://cursors2.totallyfreecursors.com/thumbnails/mickey-mouse2.gif), wait;">Url (wait si falla) </div>
<div style="cursor:none;">none </div>
<div style="cursor:context-menu;">context-menu (falla en varios navegadores) </div>
<div style="cursor:help;">help </div>
<div style="cursor:pointer;">pointer </div>
<div style="cursor:progress;">progress </div>
<div style="cursor:wait;">wait </div>
Propiedad cursor CSS. Efectos sobre el puntero del ratn.
<div style="cursor:cell;">cell </div>

<div style="cursor:crosshair;">crosshair </div>
<div style="cursor:text;">text </div>
<div style="cursor:row-resize;">row-resize </div>
</div>
<div style="cursor:alias;">alias </div>
<div style="cursor:copy;">copy </div>
<div style="cursor:move;">move </div>
<div style="cursor:no-drop;">no-drop </div>
<div style="cursor:not-allowed;">not-allowed </div>
<div style="cursor:all-scroll;">all-scroll </div>
<div style="cursor:col-resize;">col-resize </div>
<div style="cursor:s-resize;">s-resize </div>
<div style="cursor:nwse-resize;">nwse-resize </div>
<div style="cursor:zoom-in;">zoom-in </div>
<div style="cursor:zoom-out;">zoom-out </div>
</div>
</body>
</html>
EJERCICIO
a) Deben exisitir dos contenedores (div1, div2) situados en horizontal, cada uno con margin 25px en
todas direcciones, sin relleno, ancho de 200 pxeles, altura de 300 pxeles y borde slido de 5 pxeles de
anchura con color de borde violeta.
b) El div 1 debe contener un texto con varios links (etiqueta <a> de html). Al pasar el cursor sobre
cualquiera de los links dentro del div1 el cursor deber ponerse en modo help (es decir, se ver un
pequeo interrogante junto al cursor).
c) El div 2 debe contener una imagen con anchura 300 pxeles y altura igual o superior a 200 pxeles. La
imagen debe a su vez ser un link a otro documento HTML al que denominamos documento 2 y que
debe abrirse en una nueva pestaa cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen
el cursor deber ponerse en modo zoom-in, es decir, mostrar una lupa con un pequeo + en su interior.
En el documento 2 debemos tener la misma imagen pero con mayor tamao, por ejemplo 600 pxeles
de anchura. Antes de crear el cdigo tendrs que preparar las imgenes: partir de una imagen con un
tamao ms amplio, y con la ayuda de cualquier programa de edicin de imgenes crear su gemela con
menores dimensiones.

Comentario
os condicionale
es CSS. Compatibilidad de navvegadores.
COMENTA
ARIOS COND
DICIONALES CSS
Con el paso de los ao
os y la evolu
ucin de los lenguajes
l
y tecnologas
t
e
empleados
een desarrollo
os web hay
un factor que ha perrmanecido como un pro
oblema: las diferentes
d
fo
ormas de intterpretar o mostrar
m
el
cdigo dee los distinto
os navegadores. Una tccnica creada por Microso
oft basada een condicion
nales se ha
venido ussando para trratar de corrregir problem
mas especficcos de ciertos navegadorres.
Las personas que trab

bajan en dessarrollos web
b estn acosstumbrados a tener que lidiar con esste tipo de
problemaas. No todo
os los naveggadores responden igual. Algunos navegadorees (al meno
os en sus
versiones ms moderrnas) cumpleen o tratan de cumplir en
e todo lo posible
p
el esttndar defin
nido por la
ncargada de definir
d
el esttndar CSS. Otros
O
navegaadores cump
plen la mayor parte del
W3C, orgaanizacin en
estndar pero no responden
r
b
bien
con allgunas prop
piedades o caractersticcas. Adems algunos
navegado
ores incorporran caractersticas particulares propiaas, que no see encuentran
n dentro del estndar.
Cuando see est realizando un dessarrollo web, es frecuentte realizar pruebas en diistintos nave
egadores y
en distinttas versioness. No se pueeden probar todos los naavegadores y todas las vversiones po
orque sera
imposiblee, pero los deesarrolladorees web sueleen tener un conjunto
c
de navegadores
n
s y versioness para test.
Uno de lo
os navegadorres que hist
ricamente ha
h venido daando ms pro
oblemas es eel Internet Explorer de
Microsoftt, aunque haay que decirr que en lass ltimas ve
ersiones se han
h realizado mejoras y cada vez
tiende a cumplir
c
mejo
or los estndares.
Para perm
mitir a los prrogramadorees y diseado
ores solucion
nar los problemas o difeerencias espe
ecficas de
Internet Explorer,
E
Miccrosoft cre un mecanissmo de filtrro que perm
mite definir rreglas especficas para
navegado
ores concreto
os.
En primeer lugar veaamos en qu
u puede co
onsistir un problema de
d distintas interpretaccin entre
navegado
ores. Para ello hemos esccrito este cd
digo HTML y el CSS en un
n archivo con
n el nombre adecuado
y hemos realizado
r
un test para comprobar la visualizacin
v
n en dos naveegadores distintos:
<html>
<head>
nderaprogramar.com</title> <meta
<
charset=""utf-8">
pe="text/css" href="CU01055D
D_A.css">
</head>
<body>
<div id="txxtCabecera"><h
h1>aprenderap
programar.com<</h1></div>
</body>
</html>
om, 2006-2029
Comentario
os condicionale
es CSS. Compatibilidad de navvegadores.
/* Curso CSS
*{font-fam
mily: arial;}
#txtCabecera {width: 500
0px; margin: 0 auto;
a
padding: 10px; border: solid
s
2px; text-aalign: center;
text-shado
ow: 2px 2px 12p
px red, -6px -6p
px 12px blue ;}
Esta prueba en concreto la hemo

os hecho con
n el navegado
or Firefox (versin actuaal) y con un navegador
n
E
de hace
h
unos 12 aos (estaa es una verssin antigua, pero aqu no queremo
os entrar a
Internet Explorer
discutir sobre las verrsiones o so
obre los navvegadores, simplemente queremos poner un ejjemplo de
n el mismo cdigo
c
se pueden obteneer visualizaciiones distinttas y entender que esto puede ser
cmo con
un probleema para lo
os programaadores y diseadores web.
w
Podram
mos tener problemas de
e distintas
visualizaciones tambin entre navvegadores modernos).
m
Al
A comprobar el resultad
do de visualizzacin nos
ncontrado co
on estas diferrencias princcipales:
hemos en
a) Un navegadorr muestra el efecto text-shadow mientras que el otro no.
or alinea la caja
c
en el centro
c
de la pantalla miientras que el otro lo alinea
a
a la
b) Un navegado
izzquierda de la pantalla.
c) Un navegador muestra un mayor esp
pacio superio
or de relleno
o sobre el teexto dentro de la caja
m
mientras
que el otro muestra menos espacio
e
de re
elleno.
blema como
o el de text--shadow un paso lgico
o es pregunttarse: soportan estos
Para anallizar un prob
navegado
ores la propieedad text-sh
hadow? Es deecir, estn preparados
p
para interpretarla correcctamente?
Da la imp
presin de que
q el segun
ndo navegador no. De to
odas formass, para comp
probarlo reaalizamos la
bsquedaa text-shado
ow mozilla developer en
n internet y comprobamo
c
os lo siguiente:
Aqu nos indica para la propiedad text-shadow

w la compatibilidad de lo
os navegadorres y nos dice que esta
propiedad
d es admitid
da en Chrom
me desde laa versin 2.0.158.0, en Firefox dessde la versi
n 3.5, en
om, 2006-2029
Comentarios condicionales CSS. Compatibilidad de navegadores.
Internet Explorer desde la versin 10, en Opera desde la versin 9.5 y en Safari desde la versin 1.1.
Esto nos confirma lo que sospechbamos: el navegador que no muestra el efecto text-shadow no lo
hace porque no est preparado para interpretar esta propiedad, debido a su antiguedad.
Es conveniente realizar comprobaciones bsicas de este tipo antes de dar por hecho que la culpa es
del navegador, ya que a veces la culpa no es del navegador, sino del programador o diseador que ha
creado un cdigo inadecuado.
Una vez conocemos el problema podemos elegir entre dos opciones: corregirlo para que la visualizacin
sea correcta en el navegador donde hemos detectado el problema, o ignorarlo. Si lo ignoramos la
pgina web no se ver correctamente en ese navegador, pero como hemos comentado no se pueden
comprobar ni corregir los problemas de visualizacin en todos los navegadores. Hay navegadores muy
antiguos en los que no se suelen chequear ni corregir problemas de visualizacin porque se consideran
obsoletos y que hay muy poca gente que pueda estar usndolos todava. No tiene sentido aspirar a que
nuestros desarrollos web se vean correctamente en todos los navegadores porque esto nos llevara
semanas o meses de trabajo y tendra poco inters prctico: lo normal es centrarse en que la pgina se
vea bien en los principales navegadores en versiones relativamente modernas (hasta qu versin
comprobar es algo que cada desarrollador o equipo de desarrollo tiene que decidir).
VARIAS FORMAS DE SOLUCIONAR UN PROBLEMA

Con frecuencia existen varias formas de solucionar un problema. Vamos a referirnos, a modo de
ejemplo, al problema de que la caja no se muestre centrada en uno de los navegadores que hemos
probado. A modo de comprobacin, realizamos la bsqueda margin css mozilla developer en internet
y nos vamos a la pgina de documentacin de Mozilla correspondiente. En la parte denominada
Browser compatibility aparece que para Internet Explorer el Basic support fue introducido en la
versin 3.0 mientras que para auto value indica que la versin en que se introdujo fue 6.0 (strict mode).
Esto nos da una pista sobre una forma de solucionar el problema: la indicacin de strict mode quiere
decir que Internet Explorer no realiza el centrado con margin: 0 auto; excepto si en la cabecera del
documento HTML se hace una declaracin de que el documento est definido en HTML strict. Para
corregir el problema escribiramos esta lnea como primera lnea del documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Una vez hecho esto comprobaramos que la caja ya aparece centrada. Quizs esta solucin pueda
resultarnos adecuada. O quizs no, porque no queramos realizar este tipo de declaracin.
Tambin es posible que no nos demos cuenta de que el problema se podra resolver de esta manera.
En caso de que no nos resulte una solucin adecuada o que se nos pase por alto la posibilidad de usar
esta solucin, normalmente dispondremos de varias alternativas para lograr un mismo objetivo. Existen
en internet muchas webs donde se habla de tcnicas CSS para resolver problemas o conseguir un
objetivo de distintas maneras. No tiene sentido aspirar a conocerlo todo ni a saber todos los trucos o
alternativas posibles. S ser conveniente que nos vayamos construyendo nuestro pequeo repertorio
de trucos o formas de solucin y que nos acostumbremos a buscar en internet formas de solucionar
problemas.
FILTROS CSS
Se habla de filtro CSS en alusin a alguna instruccin o mecanismo que permita conocer qu
navegador, versin o tipo de dispositivo (tablet, smartphone, etc.) es en el que se va a visualizar la
pgina web y aplicar unas reglas especficas para ese caso.
Lo ideal sera no tener que usar filtros, sino que unas solas reglas nos resolvieran todos los problemas,
pero en la prctica a veces no queda ms remedio que recurrir a diversas estrategias para lograr
mejorar la visualizacin en navegadores o dispositivos que presentan problemas de visualizacin y no
queremos dejar atrs. No obstante, ten presente una cosa: cuantos menos filtros, trucos o
especificidades utilices mejor, el cdigo ser ms sencillo y por tanto ms fcil de mantener y de
corregir.
Existen diversos tipos de filtros y diversas tcnicas. Vamos a comentar ahora una de ellas, que se ha
venido usando para resolver problemas de visualizacin especficos del navegador Internet Explorer de
Microsoft, denominada tcnica de comentarios condicionales para Internet Explorer.
La forma de aplicar estos filtros se basa en indicar con un condicional unas reglas especficas a cargar y
aplicar exclusivamente para ese navegador (o conjunto de navegadores). Las reglas se escriben dentro
de las etiquetas <head> </head> del documento HTML y estos ejemplos facilitan su comprensin:
Ejemplo
Significado

Si el navegador es Internet Explorer 7, concretamente

para este navegador aplicar las reglas definidas en el
archivo indicado. Se puede especificar IE 7, IE 8, IE 9,
IE 10, IE 12, IE 15, IE 20, IE 30 es decir, cualquier
versin que queramos.

Si el navegador es Internet Explorer en cualquiera de

sus versiones, concretamente para este navegador
aplicar las reglas definidas en el archivo indicado.

Si el navegador es Internet Explorer 15 o superior,

concretamente para esta versin o sus superiores
aplicar las reglas definidas en el archivo indicado. gte
= greater than or equal to
Si el navegador es Internet Explorer versin superior a
la 15, concretamente para estas versiones o sus
superiores aplicar las reglas definidas en el archivo
indicado. gt = greater than



Mismo razonamiento pero para versiones inferiores o

iguales, o inferiores. lt = lower than, inferior. lte =
lower than or equal to, inferior o igual a.
Operador lgico and, si el navegador cumple el
primer requisito y el segundo al mismo tiempo,
concretamente para esas versiones aplicar las reglas
definidas en el archivo indicado.
Operador lgico or, si el navegador cumple el
primer requisito, o el segundo, o ambos,
concretamente para esas versiones aplicar las reglas
definidas en el archivo indicado.
Nota: no deben existir espacios sobrantes dentro de los tags porque en ese caso puede no interpretarse
el cdigo.
Ahora veamos cmo sera la aplicacin concreta para resolver el problema que hemos descrito
anteriormente.En el cdigo HTML aadiramos el fragmento condicional de la siguiente manera:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CU01055D_A.css">

</head>
<body>
<div id="txtCabecera"><h1>aprenderaprogramar.com</h1></div>
</body>
</html>
Fjate que aqu no hemos incluido la declaracin de DOCTYPE que indicamos antes. Vamos a suponer
que no queremos incluir esta declaracin (o que no nos hemos dado cuenta de que podemos usar esto
para resolver el problema de centrado de la caja).
Ahora en un archivo css independiente del principal, al que vamos a denominar ie7.css, incluiremos
estas reglas:
body {text-align:center;}
#txtCabecera { background-color: #FA8258; }
h1 { padding: 15px 5px 5px 5px;}
Ahora tenemos 3 archivos. El archivo html del documento html, el archivo CSS principal (en nuestro
caso lo hemos llamado CU01055D_A.css) y el archivo CSS especfico para los navegadores que cumplen
el condicional indicado (en nuestro caso el condicional es que el navegador sea Internet Explorer7 y el
archivo lo hemos denominado ie7.css). Las tres reglas definidas en el archivo ie7.css se aplicarn slo
cuando el navegador donde se vaya a mostrar la pgina web sea el que hemos indicado en el
condicional. Las reglas que aplicamos son:
a) body {text-align:center;} , alineamos al centro los elementos dentro de body. Esta regla
posiblemente no la usaramos en un desarrollo web real porque en general no nos va a
interesar alinear todos los elementos dentro de body al centro (si lo hacemos, tendramos que
establecer alineaciones especficas para el resto de elementos cuando no quisiramos que
estn centrados). Pero para este ejemplo concreto nos sirve.
b) #txtCabecera {background-color: #FA8258;} , a falta del efecto text-shadow aplicamos como
sustituto un color de fondo. No logramos el mismo efecto que con text-shadow, pero
supondremos que es la alternativa que elegimos entre las varias posibles. Otra alternativa
sencilla sera usar una imagen de fondo. Podramos asemejar ms el aspecto al que genera textshadow, pero no vamos a entretenernos en ello.
c) h1 { padding: 15px 5px 5px 5px;}, ampliamos el relleno para conseguir una visualizacin lo ms
parecida a lo que nosotros deseamos.
Ten en cuenta que hablamos de visualizacin parecida, similar, etc. ya que no podemos o no
queremos detenernos a buscar la precisin absoluta porque esto no tiene sentido.
El resultado ahora obtenido lo comprobamos a continuacin. Gracias al filtro hemos centrado la caja,
adecuado su relleno y aunque no hemos igualado el efecto de sobra al menos hemos puesto un color
de fondo:
MS FILTROS CSS
Hemos comentado una tcnica de filtrado concreta, pero hay otras tcnicas. Algunas de esas otras
tcnicas las veremos ms adelante dentro del curso. Ten en cuenta que las tcnicas de filtrado van
evolucionando con el tiempo: algunas tcnicas dejan de ser tiles o vlidas mientras que surgen otras
nuevas. En este curso no nos interesa conocer las diferentes tcnicas de filtrado para los distintos
navegadores, sino comprender la problemtica existente en torno a las diferencias entre navegadores y
el concepto de filtrado como tcnica que puede ayudar a solucionar problemas especficos.
EJERCICIO
Busca en alguna pgina web o blog de internet una tcnica de filtrado, aplcala y explica su utilidad.
Prefijos CSSS especficos de

e navegadores.
PREFIJOS CSS DE NAV

VEGADORES
n prefijos de navegador o prefijos com
merciales (ve
endor prefixes) a un preffijo que se antepone a
Se llaman
una reglaa CSS destin
nado a que dicha regla sea leda y aplicada exclusivamen
e
nte por un navegador
n
concreto (por ejemplo
o Chrome) pero no por el
e resto de naavegadores. El uso de prefijos suele aplicarse
a
a
des que se encuentran en fase experrimental o qu
ue an no se han converttido en un esstndar.
propiedad
enido usand
do especficamente para Microsoft
Al igual que los comeentarios condicionales que se han ve
E
loss prefijos so
on un tipo de filtro que permite qu
ue una instru
uccin CSS se
s aplique
Internet Explorer,
especficaamente a un
n navegador o familia de navegad
dores pero no
n a los deems. Sin em
mbargo, a
diferenciaa de los co
omentarios condicionale
c
es, existen prefijos
p
especficos para todos loss tipos de
navegado
or. A continu
uacin se ind
dican los preefijos ms haabituales y seguidament
s
te pasaremos a ver un
ejemplo.
P
Prefijo
Familiaa de navegadores a los que

q aplica
-w
webkit-
C
Chrome,
Safaari, Android, iOs
-moz-
Firefox
-o-
O
Opera
-ms-
Microsoft In
nternet Explo
orer
u ejemplo de uso que es quizs lo

o que mejorr nos haga comprender
c
para qu se
e usan los
Veamos un
prefijos. Escribe estee cdigo HTTML y CSS (estableciendo el nom
mbre de arcchivo adecu
uado) que
procedem
mos a explicaar a continuacin:
om, 2006-2029
Prefijos CSS especficos de navegadores.
<html>
<head>
<link rel="stylesheet" type="text/css" href="CU01056D_A.css">
</head>
<body>
<div class="fondoGradient"><h1>aprenderaprogramar.com</h1></div>
</body>
</html>

.fondoGradient {
text-align:center; width: 500px; height: 9em;
line-height: 4.5em; margin: 0 auto;
border: solid 3px;
background-color: #F4FA58; /*Navegadores que no aceptan el gradiente de fondo*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#F4FA58), to(#FF0000)); /* Chrome, Safari versiones
ms antiguas */
background-image: -webkit-linear-gradient(top, #F4FA58, #FF0000); /* Chrome, Safari versiones relativamente modernas */
background-image: -moz-linear-gradient(top, #F4FA58, #FF0000); /* Firefox versiones relativamente modernas*/
background-image: -o-linear-gradient(top, #F4FA58, #FF0000); /* Opera versiones relativamente modernas*/
background-image:
linear-gradient(to bottom, #F4FA58, #FF0000); /* Chrome, Firefox, IE, Opera versiones actuales */
}
Vamos a comentar el cdigo CSS que hemos utilizado y que a primera vista podremos calificar como
poco elegante, ya que como vemos hay una aparente repeticin de instrucciones con distintos
prefijos o variantes de sintaxis. La repeticin de cdigo nunca es deseable porque dificulta la
comprensin y mantenimiento de nuestros desarrollos web. No obstante, tenemos que estar
preparados para interpretar este tipo de situaciones cuando estemos analizando una pgina web.
Tambin podemos usar cdigo de este tipo cuando consideremos que es razonadamente necesario,
pero debemos evitar su uso continuado y sin reflexin.
El cdigo CSS define una clase donde el texto del elemento se alinea al centro mediante la propiedad
text-align, la anchura del elemento se establece en 500 pixeles, y su anchura en 9 veces la altura de
letra de aplicacin. Para centrar verticalmente el texto se ha usado line-height. Se ha establecido un
borde de 3 pixeles y un color de fondo con cdigo #F4FA58 que es un tono de amarillo mediante la
propiedad background-color.
A continuacin se escribe una propiedad background-image en distintas ocasiones. Recordar que la
propiedad background-image coloca una imagen encima del background-color. Por tanto si la imagen
ocupa todo el contenedor, el color de fondo quedar oculto. La primera lnea que encontramos es:
background-image: -webkit-gradient(linear, left top, left bottom, from(#F4FA58), to(#FF0000)); Esta
lnea aplica el prefijo -webkit- a una propiedad denominada gradient que crea una imagen de fondo
tipo degradado de colores a partir de la definicin de los colores que deben intervenir y de otros
parmetros. El prefijo webkit significa que esta lnea est dirigida a navegadores Chrome, Safari,
Android, iOs y que el resto de navegadores ignorarn lo que aqu se indique. Sin embargo en la
siguiente lnea volvemos a encontrar el prefijo webkit de esta manera:
background-image: -webkit-linear-gradient(top, #F4FA58, #FF0000); Por qu se repite dos veces el
prefijo webkit?
Como hemos dicho, los prefijos se usan normalmente para propiedades experimentales, que estn en
fase de diseo o prueba. La sintaxis para la propiedad con el prefijo -webkit- la definen los
desarrolladores de estos navegadores y a lo largo del tiempo es posible que cambien la forma en que
debe escribirse una regla experimental. Ello da lugar a situaciones como esta: existe una sintaxis que se
vena usando en algunas versiones de estos navegadores (que es la definida en la primera lnea). Luego
la sintaxis fue cambiada y se empez a usar otra diferente (que es la definida en la segunda lnea). Para
que la pgina se visualice como esperamos tanto en navegadores Chrome ms antiguos como en
navegadores Chrome ms modernos, se incluyen ambas formas de la sintaxis. El navegador ignorar
aquella que no es adecuada y utilizar la que puede interpretar correctamente.
A continuacin nos encontramos con lneas que son exclusivamente de aplicacin a navegadores
Firefox (prefijo -moz-) y Opera (prefijo -o-).
Finalmente nos encontramos con esta lnea:
background-image: linear-gradient(to bottom, #F4FA58, #FF0000); Aqu podemos comprobar que no
aparece ningn prefijo. Por qu? Porque a partir de una determinada versin esta propiedad ha
dejado de considerarse experimental y se ha convertido en una propiedad estndar (al menos para
algunos navegadores). Ahora para que los usuarios que usen navegadores en los que esta propiedad se
ha normalizado aplicamos esta lnea.
Con estas repeticiones de la misma regla con diferentes prefijos o sintaxis buscamos lograr que la
visualizacin sea correcta en:
-
Las versiones de navegadores que introdujeron esta propiedad como experimental por primera
vez.
Las versiones de navegadores que mantuvieron la propiedad como experimental pero fueron
introduciendo cambios en la sintaxis.
Las versiones de navegadores que dejaron de considerar a esta propiedad como experimental y
la empezaron a emplear como una propiedad normalizada.
De este modo tratamos de cubrir el mayor rango de navegadores posibles para que el mayor nmero
de usuarios posible vean la pgina web como nosotros esperamos. Ahora bien, qu ocurre con
usuarios que empleen versiones de navegadores en los que esta propiedad no exista ni siquiera como
experimental? Estos navegadores ignorarn la sintaxis incluso aunque exista un prefijo dirigido a ellos
porque no est preparados para reconocer esas instrucciones. Al ignorar background-image aplicarn la
propiedad background-color, que s es reconocida por todos los navegadores. El efecto no ser el
mismo, pero es la alternativa que se ha dado aqu.
En los navegadores que s reconozcan el gradiente el resultado ser similar a este:
BUEN USO Y MAL USO DE PREFIJOS

A la hora de usar propiedades experimentales y aplicar prefijos conviene plantearse cules son las
ventajas y los inconvenientes existentes para cada caso particular. Supongamos que el ejemplo anterior
simplemente trataba de aplicar una imagen con gradiente de color al fondo de una caja en la pgina
web. Qu ventajas e inconvenientes presentara el uso de la propiedad linear-gradient?
Ventajas:
-
Posiblemente el tiempo de carga de la pgina sea ms rpido usando esta propiedad que
usando una imagen. Con esta propiedad el navegador simplemente tiene que renderizar
(dibujar) a partir de una instruccin, mientras que con una imagen es necesario descargar el
archivo y cada descarga de archivo implica un pequeo consumo de tiempo.
Inconvenientes:
-
Al ser una propiedad con poca trayectoria histrica las diferentes versiones de navegadores
requieren de distintas sintaxis, lo que obliga a la repeticin de varias lneas de cdigo con el
mismo fin.
Podemos tener dudas de que la visualizacin vaya a ser buena en la mayor parte de dispositivos
y navegadores, ya que algunos de ellos (en especial los ms antiguos) no reconocern esta
propiedad.
Qu ser mejor entonces, aplicar o no aplicar este tipo de propiedades? En principio te

recomendaramos que siguieras estos criterios:
-
Si dispones de una alternativa altamente estandarizada, simple, que permite alcanzar el

objetivo planteado y que evita la repeticin de cdigo, sala y prescinde de propiedades
experimentales.
Si consideras que te aporta ms ventajas que inconvenientes y te decides a usarla, trata de
cubrir el mayor rango posible de navegadores y versiones y establece una regla de
salvaguarda, es decir, una regla que permita que la pgina web se vea razonablemente bien si
la propiedad que ests intentando aplicar no es admitida por un navegador concreto. En
nuestro ejemplo anterior la regla de salvaguarda era background-color, alternativa en caso de
que fallara la aplicacin de background-image.
Respecto al uso de prefijos, salos slo cuando sean realmente necesarios. Aqu hemos visto cmo se
aplica el prefijo a una propiedad, pero tambin se aplican en ocasiones a selectores o valores. Antes de
aplicar prefijos infrmate en pginas que den informacin de calidad como Mozilla Developer Network.
Otra cuestin a valorar es si merece escribir las distintas sintaxis para dar soporte a versiones anteriores
de navegadores. Cuando la propiedad se ha convertido en un estndar, algunos programadores y
diseadores optan por escribir simplemente la sintaxis estndar junto a la salvaguarda y se olvidan de la
repeticin de distintas sintaxis para versiones anteriores de navegadores. Es decir, en el ejemplo
anterior en lugar de las diversas lneas escribiramos simplemente:
background-color: #F4FA58;
background-image: linear-gradient(to bottom, #F4FA58, #FF0000);
Es decir, se sintetiza en dos lnea: la salvaguarda y la sintaxis estandarizada. En algunos casos ni siquiera
ser necesario la salvaguarda. Por ejemplo imagnate que pretendes aplicar un borde redondeado y
usas una propiedad que ha sido experimental hasta hace poco sin aplicar salvaguarda. Los navegadores
que reconozcan la regla mostrarn el borde redondeado, mientras que los que no la reconozcan lo
mostrarn rectangular. Si este no es un aspecto clave y no te preocupa, puedes utilizar una sola lnea y
dejar que se muestre de una forma u otra segn el navegador que est empleando el usuario.
Como ves existen distintas alternativas y recursos para resolver problemas o conseguir objetivos, no
hay un criterio nico. Algunos equipos de trabajo siguen prefiriendo usar imgenes antes que
propiedades avanzadas porque piensan que as se garantizan la misma representacin en todos los
navegadores, mientras que otros equipos optan por el uso de nuevas propiedades considerando que
aportan ms ventajas que inconvenientes. Con el tiempo irs formndote tus propios criterios y formas
de actuar y razonar en lo relativo al uso de CSS. No pretendas hacer las cosas perfectas, simplemente
ocpate de hacer que las cosas funcionen bien aunque la codificacin no sea la mejor posible.
MS FILTROS CSS
Hemos comentado ya dos tcnicas de filtrado, una basada en comentarios condicionales y otra en
prefijos, pero hay otras tcnicas. Algunas de esas otras tcnicas las veremos ms adelante dentro del
curso.
EJERCICIO
Busca en alguna pgina web o blog de internet una tcnica de filtrado basada en prefijos para el
navegador que ests utilizando. Aplcala y explica su utilidad. Para comprobar si tu cdigo y respuestas
son correctas puedes consultar en los foros aprenderaprogramar.com.

Columnas con
c CSS: column
n-count, colum
mn-width, colum
mn-rule, etc.
COLUMNA
AS EN CSS
Aunque con las herramientas quee ya conocem
mos somos capaces
c
de crear columnas, CSS ha in
ntroducido
eo de elemeentos web een columnass. Vamos a
una serie de propiedaades que prretenden faccilitar el dise
estudiar laas propiedad
des column-ccount, colum
mn-width, columns, colum
m-gap y colu
umn-rule.
Ten en cu
uenta que esstas propiedades no son
n soportadass por muchass de las verssiones de navegadores
que no so
on recientess, e incluso en
e algunos de
d los recien
ntes todava se considerran experime
entales, lo
que obligga al uso de prefijos especficos
e
d navegado
de
or, aunque algunos navvegadores ya
y las han
introducid
do como estndar y no reequieren de prefijo.
AD COLUMN
N-COUNT
PROPIEDA
PROPIED
DAD CSS colu
um-count
Funcin de la propie
edad
Perm
mite definir el
e nmero de columnas con que se deb
be mostrar el contenido
dentro de un elem
mento.
Valor po
or defecto
auto
o
Aplicable a
Con
ntenedores como elemento
os block, tablee, table-cell, ettc.

opiedad
esta pro
Un nmero
n
enterro igual o supe
erior a 1
inhe
.myContainer {co
olumn-count: 3;}
Ejemplos
aprende
eraprogramaar.com .myContainerSP { column-counnt: 5;}
PROPIEDA
AD COLUMN
NS
Esta prop
piedad es un
n shortand que permitee especificarr el nmero
o de column
nas bien en forma de
nmero de
d columnass (lo que serra equivalen
nte a usar column-coun
c
nt), bien indiicando una unidad de
medida (lo que sera equivalente
e
a usar colum
mn-width).
Ejemplo: myBox {columns: 3; }
om, 2006-2029
Columnas con CSS: column-count, column-width, column-rule, etc.
PROPIEDAD COLUMN-WIDTH
PROPIEDAD CSS colum-width
Permite sugerir un ancho de columna deseado, aunque su aplicacin no ser

estricta si existe column-count, que induce un ancho basado en el nmero de
columnas especificado.
Valor por defecto
auto
Aplicable a
Contenedores como elementos block, table, table-cell, etc.

auto (el nmero de columnas derivar del establecido con column-count)

esta propiedad
Una unidad de medida vlida en CSS

.myContainer {column-width: 150px;}

Ejemplos
aprenderaprogramar.com .myContainerSP { column-width: 5em;}
En presencia de column-count, puede omitirse esta propiedad ya que column-count induce un ancho
de columna basado en el nmero de columnas indicado. Puede entrar en conflicto con column-count si
los valores indicados son incompatibles entre s. En ausencia de column-count, puede inducir un
nmero de columnas en base al ancho especificado. Si nos fijamos, column-count y column-width
vienen siendo dos formas de expresar lo mismo.
PROPIEDAD COLUMN-GAP
Esta propiedad sirve para definir un espacio de separacin entre columnas. Ejemplo: column-gap: 20px;
En algunos navegadores es necesario el uso de prefijo especfico de navegador.
PROPIEDAD COLUMN-RULE-WIDTH, COLUM-RULE-STYLE, COLUM-RULE-COLOR, COLUMN-GAP

Estas propiedades tienen por finalidad establecer el ancho, style y color de la lnea de separacin entre
columnas.
column-rule-width funciona de forma anloga a border-width (valor por defecto medium, y valore
posibles thin, medium, thick una unidad de medida vlida CSS).
column-rule-style funciona de forma anloga a border-style.
column-rule-color funciona de forma anloga a border-color.
PROPIEDAD SHORTAND COLUMN-RULE

Esta propiedad permite establecer los valores de column-rule width, column-rule-style y column-rulecolor en una sola lnea. Ejemplo: colum-rule: 3px solid blue;
EJEMPLO DE DISEO CON COLUMNAS

Escribe este cdigo y visualiza sus resultados. Con los contenidos que hemos explicado a lo largo del
curso debes ser capaz de interpretar todo el cdigo que hemos incluido, por ejemplo por qu resulta de
inters aplicar la propiedad word-wrap, por qu usamos prefijos y por qu hemos dejado comentada la
lnea correspondiente a column-width. Tambin debes ser capaz de valorar las ventajas y desventajas
que puede tener usar este tipo de propiedades.
<html>
<head>
* {font-family: verdana, sans-serif; margin:0; background-color:#FAEBD7;}
h1, h2 {text-align:center;}
.container2{
word-wrap: break-word;
font-size: 12px;
width: 450px;
border: solid 5px red;
margin: 10px auto 10px auto; padding: 10px; line-height: 1.5em;
-moz-column-count: 3; -webkit-column-count: 3;
column-count: 3;
/*-moz-column-width: 130px; -webkit-column-width: 130px; colum-width: 130px;*/
-moz-column-gap: 20px; -webkit-column-gap: 20px; colum-gap: 20px;
-moz-column-rule: 3px solid blue; -webkit-column-rule: 3px solid blue;
colum-rule: 3px solid blue;}
</style> </head>
<body>
<h1>Columnas con CSS</h1>
<h2>aprenderaprogramar.com</h2>
<div class="container2">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programacin
en diferentes lenguajes: pseudocdigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho ms. Cursos de programacin
en diferentes lenguajes: pseudocdigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho ms. Cursos de programacin
en diferentes lenguajes: pseudocdigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho ms.
CSS no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina lenguaje de programacin
coloquialmente. CSS no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina lenguaje de
programacin coloquialmente. CSS no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina
lenguaje de programacin coloquialmente.
Cursos de programacin en diferentes lenguajes: pseudocdigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho ms.
Cursos de programacin en diferentes lenguajes: pseudocdigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho ms.
</div>
</body>
</html>
El resultado que se obtiene en un navegador que acepte estas propiedades ser similar a este:
EJERCICIO
Analiza el cdigo que mostramos a continuacin, aplcalo a un documento HTML y visualiza los
resultados, y responde a las preguntas.
.cols3 {
-webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #000;
-moz-column-count: 3; -moz-column-gap: 20px; -moz-column-rule: 1px solid #000;
column-count: 3; column-gap: 20px; column-rule: 1px solid #000;
}
.cols3 h1 { -webkit-column-span:all; -moz-column-span:all; column-span:all;
}
Explica paso a paso a qu da lugar cada instruccin o fragmento de cdigo (ejemplo: .cols3 indica que
se aplicarn los estilos definidos a todos los elementos html cuyo atributo class sea igual a cols3, webkit-column-count: 3; se escribe para lograr que ). Qu utilidad tiene la propiedad column-span?

Efecto CSS de
d esquinas red
dondeadas con
n border-radiuss.
ESQUINAS REDONDEA
ADAS EN CSSS
mo un color o imagen de
e fondo, se
Las cajas CSS son recttangulares y cuando apliicamos propiedades com
bargo, para hacer los diseos weeb ms atraactivos los
aplican sobre la caja rectangular. Sin emb
diseadorres usan esq
quinas redon
ndeadas. Estte efecto antiguamente no era fcil de consegu
uir y haba
ia y redondeeadas u otrass tcnicas.
que recurrrir a utilizar imgenes dee fondo con transparenc
t
Con la pro
opiedad borrder-radius se
s ha hecho posible redo
ondear las esquinas
e
de llas cajas con
n facilidad.
Ten en cu
uenta que estta propiedad
d no es sopo
ortada por muchas de lass versiones d
de navegadorres que no
son recieentes, e incluso en algunos
a
de los recienttes todava es posiblee que se consideren
c
experimentales, lo qu
ue obliga al uso
u de prefijo
os especfico
os de navegaador, aunquee la mayor paarte de los
navegado
ores actualess ya las han in
ntroducido como
c
estndar y no requieren de preefijo.
FORMAS DE ESPECIFICAR EL REDO

ONDEO
El redond
deo de una esquina
e
se puede especificar con un parmetro R que indica el radio del crculo
que se va
v a empleaar para geneerar el redo
ondeo (cuan
nto ms graande mayor efecto de redondeo
conseguirremos).
Aunque el
e uso de un fragmento
o de crculo
o es quizs lo ms hab
bitual, tambin podemo
os generar
esquinas a partir de un fragmento
o de elipse co
omo vemos en
e la siguiente imagen.
os de especificar dos parmetros, un

n valor horizzontal R1 y
Cuando usamos un frragmento dee elipse hemo
un valor vertical R2. Si R1 y R2 son iguales equivale a usar un sollo valor. Si R1 y R2 son
n distintos
generamo
os distintos efectos
e
de aachatamiento
o.
PROPIEDA
AD BORDER--TOP-LEFT-R
RADIUS
om, 2006-2029
Efecto CSS de esquinas redondeadas con border-radius.
PROPIEDAD CSS border-top-left-radius
Permite redondear la esquina superior izquierda de una caja CSS y definir la

forma en que se hace indicando parmetros que hacen la esquina ms o menos
redondeada.
Valor por defecto
Aplicable a

Una unidad de medida vlida CSS (indica radio para el crculo que genera el
redondeo de la esquina superior izquierda, excepto si se usa un porcentaje)

esta propiedad
Dos unidades de medida vlidas CSS (la primera medida indica radio horizontal
de la elipse a emplear y la segunda medida radio vertical)
.myContainer {border-top-left-radius: 40px;}

Ejemplos
aprenderaprogramar.com .myContainerSP { border-top-left-radius: 40px 20px;}
Si se especifican valores en forma de porcentajes, se calculan para el radio horizontal en funcin del
valor width de la caja, y para el radio vertical en funcin del valor height de la caja. Si se especifica un
solo porcentaje se calcularn los dos radios: el horizontal en funcin del ancho y el vertical en funcin
del alto. Por tanto el uso de porcentaje implica que se aplica el redondeo por elipse.
PROPIEDADES BORDER-TOP-RIGHT-RADIUS, BORDER-BOTTOM-LEFT-RADIUS Y BORDER-BOTTOMRIGHT-RADIUS

Estas propiedades funcionan de la misma forma que hemos visto para border-left-top-radius. Nos
permiten especificar el redondeo individual de cada una de las esquinas superior derecha, inferior
izquierda o inferior derecha.
PROPIEDAD BORDER-RADIUS (SHORTAND)

PROPIEDAD CSS border-radius
Permite especificar el redondeo de todas las esquinas de una caja CSS y definir
la forma en que se debe hacer.
Valor por defecto
Aplicable a
Una unidad de medida vlida CSS (indica radio para el crculo que genera el
redondeo de todas las esquinas)
PROPIEDAD CSS border-radius

esta propiedad
Dos unidades de medida vlidas CSS (la primera medida indica radio superior
izquierdo y radio inferior derecho; la segunda medida indica radio superior
derecho e inferior izquierdo)
Tres unidades de medida vlidas CSS (la primera medida indica radio superior
izquierdo, la segunda radio superior derecho e inferior izquierdo y la tercera
radio inferior derecho)
Cuatro unidades de medida vlidas CSS (la primera medida indica radio superior
izquierdo, la segunda radio superior derecho, la tercera radio inferior izquierdo
y la cuarta radio inferior derecho)
Una a cuatro unidades de medida / Una a cuatro unidades de medida (las
unidades a la izquierda de la barra son radio horizontal para el formato de
elipse y las unidades a la derecha de la barra son radio vertical)
.myContainer {border-radius: 40px;}

Ejemplos
aprenderaprogramar.com .myContainerSP { border-radius: 40px / 20px;}
Si se especifican valores en forma de porcentajes, se calculan para el radio horizontal en funcin del
valor width de la caja, y para el radio vertical en funcin del valor height de la caja. Si se especifica un
solo porcentaje se calcularn los dos radios: el horizontal en funcin del ancho y el vertical en funcin
del alto. Por tanto el uso de porcentaje implica que se aplica el redondeo por elipse.
EJEMPLOS DE USO DE BORDER-RADIUS

curso debes ser capaz de interpretar todo el cdigo que hemos incluido. Tambin debes ser capaz de
valorar las ventajas y desventajas que puede tener usar este tipo de propiedades.

div{ border: 5px solid; height: 60px; width: 260px; margin:10px; background-color:yellow;
font-size: 20px; text-align:center; padding-top: 20px; word-wrap:break-word; }
h2{margin: 15px 0 -15px 40px;}
</style>
</head>
<body>
<h2>CSS border-radius aprenderaprogramar.com</h2>
<div style="border-radius: 5px;">border-radius: 5px;</div>
<div style="border-radius: 10px;">border-radius: 10px; </div>

<div style="border: double #A52A2A 8px; border-radius: 13em/3em;">border-radius: 13em/3em; </div>
</div>
<div style="border-top-left-radius: 40%;">border-top-left-radius: 40%; </div>
<div style="border-radius: 80px 20px;">border-radius: 80px 20px; </div>
<div style="border-radius: 60px 20px 5px;">border-radius: 60px 20px 5px; </div>
<div style="border-radius: 60px 20px 5px 90px;">border-radius: 60px 20px 5px 90px; </div>
<div style="border-radius: 60px/20px;">border-radius: 60px/20px; </div>
<div style="border: solid #A52A2A 5px; border-radius: 50%;">border-radius: 50%; </div>
</div>
</body>
</html>
EJERCICIO
En numerosas ocasiones queremos crear un diseo para una pgina web o aplicacin parecido al que
nos encontramos en otra pgina web. Supn que has encontrado el siguiente diseo. Crea el cdigo
HTML y CSS para lograr un resultado lo ms parecido posible a lo que se ve en la siguiente imagen,
donde tenemos una tabla con bordes redondeados.
Orientacin:
Crea el cdigo de la tabla en HTML. Define una clase para la tabla (p.ej. class="tabla-destacada"), define
el elemento thead para poner ah la fila y celdas de encabezado. Define el contenido de la tabla dentro
de tbody. Define la ltima fila como tfoot.
Busca imgenes en internet para introducirlas como smbolo de check o aspa en las casillas
correspondientes.
Vete aplicando propiedades CSS por partes hasta lograr el efecto deseado.
Nota: no tienes que conseguir exactamente el mismo aspecto de la imagen, slo lo ms aproximado
posible.

Efecto CSS de
d sombras 3D
D con box-shado
ow.
EFECTO SOMBRA EN CSS

piedad text-ttransform paara aplicar sombras y efectos tridimensionales a texto, as
Ya conoceemos la prop
como la propiedad border-style
b
que permitee generar algunos efecttos tipo som
mbra pero en realidad
bastante limitados. La
L propiedad
d box-shadow
w facilita la introducci
n de sombrras y efectoss 3D. Este
efecto anttiguamente no era fcil de
d conseguirr y se sola re
ecurrir al uso
o de imgenees u otras tccnicas.
Con la propiedad bo
ox-shadow se
s ha hecho
o posible co
onseguir som
mbras y efeectos 3D en
n las cajas
contenedoras CSS con
n facilidad. Ten
T en cuentta que esta propiedad no es soportaada por mucchas de las
versiones de navegadores que no son recientees, e incluso en algunos de los recien
ntes todava es posible
que se co
onsidere exp
perimental, lo
l que obliga al uso de prefijos esp
pecficos de navegador, aunque la
mayor paarte de los navegadores
n
s actuales yaa las han in
ntroducido como estnd
dar y no req
quieren de
prefijo.
PROPIEDA
AD BOX-SHA
ADOW
La sintaxiss a emplear se
s basa en in
ndicar uno o ms efectoss de sombra separados p
por comas. Caada efecto
de sombra comprende hasta 5 parmetros:
selectorDeEElemento { noEspecificad
do_none_o_inset_opcion
nal
distancia_horizontal_reequerida disttancia_verticcal_requeridaa
blurOpcionaal
spreadOpcional
nal}
colorOpcion
Si no se especifica,
e
laa sombra seer externa (hacia fueraa de la caja)). Si se escriibe la palabrra inset la
sombra seer interna (hacia dentro
o de la caja).
Blur crea un efecto dee difuminado
o y brillo.
de que la propia
p
caja
Spread crrea un efectto de agrandamiento de la sombraa, hacindola ms grand
contenedora. Si spreead es cero
o la sombra tiene el mismo tam
mao que laa caja, pero con un
desplazam
miento.
Si se espeecifica un co
olor, la somb
bra tomar el
e color espe
ecificado. Si no se especcifica color, la sombra
tomar ell valor que por defecto o explcitameente tenga la propiedad color
c
de apliccacin.
om, 2006-2029
Efecto CSS de sombras 3D con box-shadow.
PROPIEDAD BOX-SHADOW
PROPIEDAD CSS box-shadow
Permite crear sombras hacia fuera o hacia dentro de una caja contenedora. Se
pueden especificar varios efectos separando su especificacin por comas.
Valor por defecto
none
Aplicable a

none (elimina el efecto de sombra)
Una especificacin sintctica con un desplazamiento horizontal (offset-x) y
vertical (offset-y) en unidades de medida vlidas (no se admiten %).

esta propiedad
Una especificacin sintctica que adems de los desplazamientos puede incluir

opcionalmente: el valor inset para indicar que la proyeccin de sombra debe ser
hacia el interior, un valor de efecto blur en una unidad de medida vlida (no se
admiten porcentajes), un valor de efecto spread en una unidad de medida
vlida (no se admiten porcentajes) y un valor de color.
.myContainer { box-shadow: -5px -5px; }

Ejemplos
aprenderaprogramar.com .myContainerSP { box-shadow: inset 0 0 15px 0 maroon; }
Si el contenedor tiene un borde con forma distinta a la rectangular establecida con border-radius, la
sombra establecida con box-shadow adopta la forma que tenga el borde.
Si los desplazamientos se establecen a cero, la sombra no se visualiza excepto si se establecen valores
para el efecto blur o spread, en cuyo caso se crea una sombra uniforme en torno a toda la caja
contenedora.
Los desplazamientos con valores positivos son hacia la derecha para el horizontal y hacia abajo para el
vertical. Los desplazamientos con valores negativos son hacia la izquierda para el horizontal y hacia
arriba para el vertical.
Supongamos que se especifican varias sombras: box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em
0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
En este caso, la sombra relacionada en primer lugar se sita encima del resto de sombras (que pueden
quedar ocultas por esta, parcial o totalmente). En este ejemplo la sombra roja estara encima de la
sombra oro, esta encima de la sombra lima y esta encima de la sombra azul.
EJEMPLO DE USO DE BOX-SHADOW

valorar las ventajas y desventajas que puede tener usar este tipo de propiedades.
<html> <head>
div{ border: 3px solid; height: 45px; width: 250px; margin:45px 25px; background-color:yellow;
font-size: 16px; text-align:center; padding-top: 10px; word-wrap:break-word; }
div:first-child {margin:10px 20px 0 20px;} h2{margin: 15px 0 -45px 70px;}
</style> </head>
<body>
<h2>CSS box-shadow aprenderaprogramar.com</h2>
<div style="border-radius: 20px; box-shadow: -5px -5px;">box-shadow: -5px -5px;</div>
<div style="border-radius: 20px; box-shadow: 8px 8px;">box-shadow: 8px 8px;</div>
<div style="border-radius: 20px;box-shadow: 15px 15px;">box-shadow: 15px 15px; </div>
<div style="border-radius: 20px; box-shadow: 15px 15px maroon;">box-shadow: 15px 15px maroon; </div>
<div style="border-radius: 20px; box-shadow: 15px 15px 20px maroon;">box-shadow: 15px 15px 20px maroon; (con blur) </div>
</div>
<div style="border-radius: 20px; box-shadow: -5px -5px 0px 10px;">box-shadow: -5px -5px 0px 10px; (con spread)</div>
<div style="border-radius: 20px; box-shadow: 8px 8px 10px 0;">box-shadow: 8px 8px 10px 0; (con blur)</div>
<div style="border-radius: 20px;box-shadow: 15px 15px 10px 5px;">box-shadow: 15px 15px 10px 5px; (con blur y spread) </div>
<div style="border-radius: 20px;box-shadow: 0 0 15px 0 maroon;">box-shadow: 0 0 15px 0 maroon; (sin desplazar con blur sin spread) </div>
<div style="border-radius: 20px;box-shadow: 0 0 15px 10px maroon;">box-shadow: 0 0 15px 10px; (sin desplazar con blur y spread) </div>
</div>
</body>
</html>
EJERCICIO RESUELTO
Invertir todas las sombras del ejemplo anterior para que se proyecten hacia dentro de las cajas
contenedoras y no hacia fuera y comprobar los resultados comparndolos con los anteriores.
SOLUCIN
Tenemos que aadir la especificacin inset para las sombras. El cdigo sera el siguiente:
<html>
<head>
div{ border: 3px solid;
margin:35px 25px; background-color:yellow;
font-size: 14px; text-align:center;
padding-top: 16px; word-wrap:break-word;
}
div:first-child {margin:0 20px 0 20px;}
h2{margin: 15px 0 -45px 70px;}
</style>
</head>
<body>
<h2>CSS box-shadow aprenderaprogramar.com</h2>
<div style="border-radius: 20px; box-shadow: inset -5px -5px;">box-shadow: inset -5px -5px;</div>
<div style="border-radius: 20px; box-shadow: inset 8px 8px;">box-shadow: inset 8px 8px;</div>
<div style="border-radius: 20px;box-shadow: inset 15px 15px;">box-shadow: inset 15px 15px; </div>
<div style="border-radius: 20px; box-shadow: inset 15px 15px maroon;">box-shadow: inset 15px 15px maroon; </div>
<div style="border-radius: 20px; box-shadow: inset 15px 15px 20px maroon;">box-shadow: inset 15px 15px 20px maroon;
</div>
</div>
<div style="border-radius: 20px; box-shadow: inset -5px -5px 0px 10px;">box-shadow: inset -5px -5px 0px 10px;</div>
<div style="border-radius: 20px; box-shadow: inset 8px 8px 10px 0;">box-shadow: inset 8px 8px 10px 0;</div>
<div style="border-radius: 20px;box-shadow: inset 15px 15px 10px 5px;">box-shadow: inset 15px 15px 10px 5px; </div>
<div style="border-radius: 20px;box-shadow: inset 0 0 15px 0 maroon;">box-shadow: inset 0 0 15px 0 maroon; </div>
<div style="border-radius: 20px;box-shadow: inset 0 0 15px 10px maroon;">box-shadow: inset 0 0 15px 10px maroon; </div>
</div>
</body>
</html>
El resultado que se obtiene en un navegador que acepte estas propiedades ser similar al mostrado a
continuacin.

Degradadoss CSS. Degradado lineal y deggradado radial.
DEGRADA
ADOS EN CSSS
Un color que
q se va deegradando prrogresivamente hasta co
onvertirse en otro es un eefecto muy usado
u
para
fondos dee elementoss (o incluso como
c
fondo web) ya que permite conseguir un efecto atractivo. Este
efecto an
ntiguamentee no era fccil de conseeguir y se sola
s
recurrirr al uso de imgenes de fondo.
Actualmente disponemos de mecanismos quee facilitan inccluir degradaados en pgin
nas web.
Los degraadados CSS son de doss tipos: degradados line

eales (linearr-gradient) o degradado
os radiales
(radial-graadient). En el
e primer casso la transforrmacin de color
c
va avan
nzando lneaa a lnea, mie
entras que
en el segu
undo caso laa transformaacin de colo
or se producce porque su
ucesivos crcculos concn
ntricos van
cambiand
do de color. Aqu
A
vemos la
l diferencia entre ambo
os efectos.
Un degraadado lineall es una im

magen que genera
g
CSS a travs de
d la invocaacin de un
na funcin
denominaada linear-grradient.
LNEA DE GRADIENTEE
Un gradieente lineal se define a partir
p
de unaa lnea de grradiente. La imagen se ggenera creando lneas
cuyo color va cambian
ndo, perpend
diculares a laa lnea de graadiente. Aqu
u vemos la lnea de gradiente para
distintos degradados:
d
om, 2006-2029
Degradados CSS. Degradado lineal y degradado radial.
En el primer caso la lnea de gradiente va de arriba hacia abajo, por lo que las lneas de color son
horizontales. En el segundo caso la lnea de gradiente forma un ngulo de 45 grados y esto hace que las
lneas de color formen un ngulo respecto a la caja contenedora. En el tercer caso la lnea de gradiente
es horizontal y esto hace que las lneas de color sean verticales.
Como vemos, nos puede resultar de inters trabajar indicando un grado de inclinacin especfico para
la lnea de gradiente.
UNIDADES ANGULARES CSS

CSS permite la especificacin de un ngulo o inclinacin en unidades denominadas unidades angulares.
Las unidades admitidas son grados deg, grados grad, tantos por uno de circunferencia turn y radianes.
Como en CSS las designaciones de orden siguen la definicin top, right, bottom, left, las unidades
angulares consideran que el valor 0 se corresponde con la vertical (es decir, no se sigue el mismo
criterio que en matemticas donde 0 grados se corresponden con la horizontal). En la siguiente tabla
vemos las unidades angulares y su significado grfico.
Visin grfica
Equivalencia
Comentarios
90deg = 100grad
0.25turn 1.5708rad
180deg = 200grad
0.5turn 3.1416rad
Un valor positivo desplaza el ngulo en sentido horario.

Para linear-gradient 90deg equivale a to right (degradar
desde la izquierda hacia la derecha).
Un valor de 180deg para linear-gradient equivale a to

bottom (degradar desde arriba hacia abajo).
-90deg = -100grad = 0.25turn -1.5708rad
Un valor negativo desplaza el ngulo en sentido

antihorario. -90deg con linear-gradient equivale a to left
(degradar desde la derecha hacia la izquierda)
0deg = 0grad = 0turn =

0rad
Un valor 0deg equivale a la posicin de partida. Con

linear-gradient equivale a to top (degradar desde abajo
hacia arriba).
FUNCIN LINEAR-GRADIENT
Esta funcin nos permite generar una imagen con un degradado de colores con una direccin y colores
especificados. Tener en cuenta que linear-gradient no genera un color de fondo, sino una imagen sin
dimensiones especificadas, que se adaptar automticamente para cubrir todo el espacio disponible.
Esta funcin no es soportada por muchas de las versiones de navegadores que no son recientes (o bien
la soportan con sintaxis especficas para cada navegador o versin), e incluso en algunos de los
recientes todava es posible que se considere experimental. Esto obliga a que debamos pensar si
conviene hacer uso de prefijos especficos de navegador. Nosotros trabajaremos aqu sin estos prefijos
porque la mayor parte de los navegadores actuales ya la han introducido como estndar y no requieren
de prefijo.
La funcin se suele invocar normalmente como fondo cuando se usa la propiedad background-image o
cuando se usa la propiedad shortand background (aunque quizs a ti se te ocurran otros usos que
podras tambin probar). Habitualmente la sintaxis ser de este tipo:
selectorDeElemento { background: linear-gradient
anguloOespecificacinDeDireccin
colorInicial
colorFinal}
Ejemplo: style="background: linear-gradient (45deg, #008080, #FFEBCD);

La especificacin de direccin se puede hacer con una unidad angular o usando alguno de los siguientes
valores:
a) to bottom: indica que se comienza con el color inicial arriba (top) y se progresa hasta el color
final abajo (bottom). Equivale a un ngulo de 180deg.
b) to top: indica que se comienza con el color inicial abajo (bottom) y se progresa hasta el color
final arriba (top). Equivale a un ngulo de 0deg.
c) to right: indica que se comienza con el color inicial a la izquierda (left) y se progresa hasta el
color final a la derecha (right). Equivale a un ngulo de 90deg.
d) to left: indica que se comienza con el color inicial a la derecha (right) y se progresa hasta el
color final a la izquierda (left). Equivale a un ngulo de -90deg 270deg.
Pero existen ms posibilidades: se puede especificar una lista de colores separados por comas. Ejemplo:
style="background: linear-gradient( 90deg, red, blue, yellow); ". El nmero de colores puede ser el que
se desee. Con esta sintaxis cada color ocupa una fraccin del espacio disponible. En el espacio anterior,
se comienza con el rojo que se va degradando hasta convertirse en azul, luego el azul se va degradando
hasta convertirse en rojo y cada color ocupa un tercio del espacio disponible por ser tres colores. Si
fueran 5 colores, cada color ocupara una quinta parte del espacio disponible.
Otra posibilidad es especificar puntos de localizacin (stop points) de los colores, de forma que no se
distribuyan a partes iguales, sino como nosotros especifiquemos. La sintaxis es de tipo:
style="background: linear-gradient( 90deg, red, blue 20px, yellow); " signfica que se comienza en el
color rojo que se va degradando hasta convertirse en azul a una distancia de 20px desde el inicio. A
partir de esos 20px el azul se va transformando en amarillo hasta ser completamente amarillo al final
del degradado.
Otro ejemplo:
style="background: linear-gradient( 90deg, blue, red 30px, yellow 120px, green); " significa que se
comienza en el color azul que se degrada hasta convertirse en rojo a los 30px del inicio, desde ah el
rojo se degrada hasta convertirse en amarillo a los 120px del inicio y a partir de ah el amarillo se
degrada hasta convertirse en verde al final.
EJEMPLOS DE USO DE LINEAR-GRADIENT

valorar las ventajas y desventajas que puede tener usar esta funcin.
<html>
<head>
*{margin:0; padding:0; font-family: verdana, sans-serif;}
div{ border: 1px solid; float: left;
margin:10px 15px;
font-size: 20px; font-weight:bold; text-align:center;
}
h2{margin: 55px 0 -30px 65px; font-size:22px; white-space:pre;
text-align:center; width: 400px;}
</style>
</head>
<body>
<h2>CSS linear-gradient
aprenderaprogramar.com</h2>
<div style=" width:600px; border-style:none; border-width:0; background-color:white;">
<div style=" background: linear-gradient( to bottom, #008080, #ffebcd); ">to bottom</div>
<div style=" background: linear-gradient( 45deg, #008080, #ffebcd); ">45deg</div>
<div style="background: linear-gradient( 75deg, #008080, #ffebcd); ">75deg</div>
<div style="background: linear-gradient( 90deg, red, blue, yellow); ">90deg, red, blue, yellow</div>
<div style="background: linear-gradient( 90deg, red, blue 10px, yellow); ">90deg, red, blue 10px, yellow</div>
<div style="background: linear-gradient( 90deg, blue, red 30px, yellow 120px, green); ">90deg, blue, red 30px, yellow 120px,
green</div>
</div>
</body>
</html>
El resultado que se obtiene en un navegador que acepte esta funcin ser similar a este:
Degradadoss CSS. Degradado lineal y deggradado radial.
O
EJERCICIO
Crea un documento
d
H
HTML
dondee tengas un contenedor div centrado, con mrggenes de 50 pxeles en
todas direecciones y dimensiones
d
ancho 400 pxeles y altto 200 pxelees. Crea el eefecto que se ve en la
siguiente imagen denttro de dicho contenedorr usando la propiedad
p
CSSS linear-grad
dient.
mprobar si tu cdigo
o y respueestas son correctas puedes
p
consultar en los foros
Para com
aprenderaaprogramar..com.
Prxima entrega:
e
CU0
01061D
Acceso al curso comp
pleto en apreenderaprograamar.com -- > Cursos, o en la direcci
n siguiente:
http://apreenderaprograamar.com/index.php?option=com_conte
ent&view=category&id=75&
&Itemid=203
om, 2006-2029
radial-gradiient CSS. borde

er-image CSS.
MS EFEC
CTOS CSS
A lo largo
o del curso hemos ido viendo cm
mo CSS ha ido
i introducciendo progrresivamente
e cada vez
mayores posibilidadees para gen
nerar efecto
os visuales atractivos que
q
hace u
unos aos resultaban
r
complicad
dos de geneerar. Adems de las pro
opiedades que
q ya hemos visto com
mo text-shadow, boxshadow, etc.
e CSS est en constantte evolucin e incorpora cada vez ms posibilidad
des.
Ya comen
ntamos en su
u momento que el objetivo de este curso
c
era ap
prender la lggica de CSS y tener un
conocimieento slido de
d sus fundaamentos y no ser un manual de refeerencia dond
de se especifficara toda
la sintaxiss y todas las posibilidad
des de esta tecnologa. En esta entrega vamoss a comentaar algunas
propiedad
des o efecto
os que son interesantes. Para cono
ocer su sinttaxis te reco
omendamos consultes
alguna
web
d
de
refereencia
CSSS
de
entre
las
que
mos
en
indicam
http://ww
ww.aprenderraprogramarr.com/index.php?option=
=com_content&view=artticle&id=727
7
&catid=75
5:tutorial-basico-program
mador-web-ccss-desde-ce
ero&Itemid=203
Nosotros usamos habitualment
h
te Mozilla Developer Network como
c
web de referencia para
especificaacin y sintaxxis, pero eligge t la que te parezca ms adecuadaa.
GRADIENT
RADIAL-G
Al igual que
q linear-grradient serva para geneerar un degrradado lineal, radial-grad
dient permitte generar
degradados circularess o elpticos. Aqu vemos la diferenciaa entre lineal y radial:
nt:
t
u
usando
CSS radial-gradie
r
Y aqu alggunas posibilidades que tendramos
om, 2006-2029
radial-gradiient CSS. borde

er-image CSS.
c
que estos efecttos no son posibles en
n los naveggadores mss antiguos y que los
Ten en cuenta
navegado
ores actualess pueden req
querir el uso
o de prefijoss o tener distintas posib
bilidades o respuestas
r
segn la versin y navegador que se utilice. Ten en
n cuenta qu
ue aunque cconviene co
onocer las
posibilidades de CSS debemos valorar
v
las ventajas
v
y desventajas
d
de todo aquello que usemos
u
en
nuestros desarrollos web.
w
Como alternativa ms
m estndaar, tenemos el uso de baackground-im
mage para
mostrar laas imgenes de degradad
do radial. Estto tiene sus ventajas
v
y su
us inconvenieentes.
BORDER-IMAGE CSS
Los bordees en CSS se controlan principalmentte mediante la propiedad border (y en menor medida
m
con
la propied
dad outline). La propied
dad border-image se ide
e para trataar de facilitaar el uso de imgenes
para consstituir bordess con diseo
os personalizzados, de mo
odo que cadaa desarrollo web pudieraa tener los
bordes qu
ue deseara a travs de im
mgenes quee definen un fragmento del
d borde y sse repiten o colocan
c
de
una maneera determin
nada especificada median
nte cdigo.
om, 2006-2029
radial-gradient CSS. border-image CSS.
Ten en cuenta que estos efectos no son posibles en los navegadores ms antiguos y que los
navegadores actuales pueden requerir el uso de prefijos o tener distintas posibilidades o respuestas
segn la versin y navegador que se utilice. Ten en cuenta que aunque conviene conocer las
posibilidades de CSS debemos valorar las ventajas y desventajas de todo aquello que usemos en
nuestros desarrollos web. Como alternativa ms estndar, tenemos el uso de background-image para
generar los bordes. Esto tiene sus ventajas y sus inconvenientes.
RECORDATORIO
CSS est incorporando continuamente posibilidades y novedades. Muchas de ellas tratan de permitir a
los desarrolladores web trabajar sin usar carga de imgenes localizadas en archivos para crear los
efectos deseados. No obstante, ten en cuenta que las imgenes procedentes de archivos no estn
sujetas a interpretacin por parte del navegador, mientras que los efectos generados mediante cdigo
s, lo que puede dar lugar a que la visualizacin en distintos navegadores no sea coincidente o requiera
de parches. Por eso los efectos CSS no son utilizados por muchos desarrolladores, que prefieren ser
ms conservadores y seguir utilizando imgenes tradicionales. Por otro lado, otros desarrolladores
utilizan todos los efectos CSS posibles en sustitucin de las imgenes tradicionales. Nosotros te
recomendamos que razones para cada ocasin qu es lo ms conveniente, teniendo en cuenta factores
como velocidad de carga de la pgina y compatibilidad entre navegadores entre otros aspectos.
EJERCICIO
Busca en internet (en un blog, pgina web, etc.) una imagen para crear un borde personalizado con
border-image. Crea un documento HTML con un div de 400 pxeles de ancho y 200 pxeles de alto en
cuyo interior muestre un degradado radial y aplcale el borde personalizado. Ten en cuenta las
peculiaridades de tu navegador.
Efectos CSS con transform

m: rotate, scale,, skew, translatte.
MS EFEC
CTOS CSS
La propiedad CSS tran
nsform perm
mite generar efectos grfiicos que antes no era po
osible generaar con CSS,
orizontal, esccalado verticcal, sesgado horizontal
como efecto de rotaccin, escalado completo, escalado ho
o vertical y traslacin horizontal o vertical de elementos.
e
AD TRANSFO
ORM
PROPIEDA
Esta prop
piedad puedee no ser recconocida porr los navegadores antigu
uos o requerir del uso de
d prefijos
especfico
os para algun
nos navegado
ores actuales.
PROPIEEDAD CSS traansform
Funcin de la propie
edad
Perm
mite rotar, escalar, sesgar o trasladar eleementos.
Valor po
or defecto
none
Aplicable a
Elem
mentos transfformables (tipo block o equ
uivalente).
none (indica que no hay transfformacin)
rotaate (udAng) (d
donde udAng es
e una unidad
d angular vlid
da en CSS)
scale (valorX) scale (valorX, valorY)
v
scaleX(valorX) sscaleY(valorY)) (donde la
espeecificacin X fuerza
f
el escaalado en horizontal y la esspecificacin Y lo fuerza
en vertical,
v
siendo ambas nm
meros enteros o decimales)

esta pro
opiedad
skew
wX (udAng) skewY(udAnd) (donde udA
Ang es una unidad angularr vlida en
CSS. Se establecee un sesgado del
d elemento en horizontal o en vertical))
tran
nslate (valorX) transllate (valorX,, valorY) translateX(vvalorX)
tran
nslateY(valorYY) (donde la esspecificacin X fuerza la traaslacin en ho
orizontal y
la especificacin
e
Y lo fuerza en vertical, siendo ambaas unidades de
d medida
vlid
das admitind
dose porcentaajes)
inhe
.myContainer { skkewX(-30deg);}
Ejemplos
aprende
eraprogramaar.com .myContainerSP { scale(0.5);}
e
muy vistosos cuaando se apro
ovecha para ccombinarla con
c hover,
Esta propiedad permiite generar efectos
ntBox1:hover { transform
m: skewX(-2
20deg);} da lugar a que el efecto se
e produzca
por ejemplo: #conten
cuando el
e usuario paase el ratn
n por encima del eleme
ento afectad
do, y mientrras esto no ocurre el
elemento
o se muestra como est definido
d
paraa una situacin normal. Este
E tipo de eefectos ante
eriormente
no se pod
dan generar con CSS y era necesario
o hacerlo me
ediante imgenes previam
mente prepaaradas con
un prograama de dise
o grfico, co
on Javascriptt u otras tcn
nicas.
om, 2006-2029
Efectos CSS con transform: rotate, scale, skew, translate.
Escribe el siguiente cdigo HTML y comprueba los resultados de esta propiedad (ten en cuenta que es
posible que necesites aadir prefijos, depende del navegador que ests usando):
<html>
<head>
div{ border: 5px solid; width: 260px; margin:10px; background-color:yellow; font-size: 20px; text-align:center;
padding-top: 20px; word-wrap:break-word; }
h2{margin: 15px 0 -15px 40px;} img {padding:10px; }
#contentBox1 {border-radius: 40px; margin-left:40px;}
#contentBox1:hover { transform: skewX(-20deg);}
}
</style> </head>
<body>

<h2>CSS transform: rotate</h2>
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="border-radius: 40px; margin-top: 50px; transform:
rotate(45deg);">aprenderaprogramar.com<img
src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>

<h2 style="margin-top:80px;">CSS transform: scale</h2>
</div>
<div style="border-radius: 40px; margin-top: 50px; transform:
scale(0.5);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: skewX</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform:
skewX(-30deg);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: skewY</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform:
skewY(-20deg);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: translate</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform: translate(70px, 70px);">aprenderaprogramar.com<img
</div>

<h2>CSS transform con hover</h2>
<div id="contentBox1" >aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
</body>
</html>
EJERCICIO
Estudia el siguiente cdigo CSS y responde a las cuestiones planteadas:
#skew { transform:skew(35deg); }
#scale { transform:scale(1,0.5); }
#rotate { transform:rotate(45deg); }
#translate { transform:translate(10px, 20px); }
#rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
a) Crea un documento HTML donde se vean los estilos que tenemos en el cdigo aplicados a distintos
elementos.
b) Explica el significado de cada una de las partes del cdigo (por ejemplo #skew indica el estilo que se
aplicar a los elementos con atributo id=skew. Transform:skew(35deg) indica que )

Animacione
es CSS con transition. Ejemplo
os.
MS EFEC
CTOS CSS
Combinan
ndo la propiedad transfo
orm con hovver podemoss crear efecttos dinmico
os sobre unaa web. Sin
embargo, la animacin que se pueede consegu
uir con este efecto
e
es basstante limitada. CSS ha in
ntroducido
nuevas tcnicas que permiten
p
elaaborar animaaciones ms sofisticadass que pueden
n colaborar a no tener
que recurrrir a tecnolo
ogas como Jaavascript Flash.
F
CONCEPTTO DE TRANSSICIN CSS

Una transsicin CSS ess un efecto de
d cambio progresivo de
esde un estado inicial haasta un estad
do final de
un elemento HTML. En
E el estado inicial el eleemento tiene unas prop
piedades y en el estado final tiene
una o varias propiedaades que han
n cambiado. El navegado
or se encargaa de generar los pasos intermedios
que supon
nen cambiarr de un estad
do a otro, de la forma que especifiquemos a travs del cdigo
o.
Una transsicin CSS em
mpieza cuan
ndo se produ
uce una situacin de disparo del ccambio. El disparo
d
del
cambio pu
uede ser gen
nerado de diistintas maneeras, pero laa forma ms bsica y la q
que vamos a ver en los
ejemplos que pondreemos a continuacin es que el cambio empiezaa cuando el usuario pone el ratn
encima deel elemento HTML afectaado por la trransicin, es decir, que usamos
u
la pseudoclase :h
hover para
definir la transicin
t
qu
ue empieza cuando
c
el ussuario pone el
e puntero deel mouse encima del elemento.
Una transsicin empieeza y termin
na y no se repite
r
indefin
nidamente (a
( no ser qu
ue el usuario
o vuelva a
poner el ratn encim
ma del elemento otra vez), aunque veremos ms
m adelantee que CSS ofrece
o
ms
nerar animacciones.
posibilidades para gen
Mediantee transicionees CSS podeemos generaar efectos dinmicos
d
qu
ue anteriorm
mente slo se podan
generar recurriendo a otros lengu
uajes o tecnologas. Con
nstituyen un recurso inteeresante, perro a la vez
do de que se puede caer en la tentacin de crear pginas web
b con gran caantidad de
peligroso,, en el sentid
efectos y movimiento
os pero que resulten
r
dem
masiado sobrecargadas y poco tiles p
para los usuaarios.
PROPIEDA
AD TRANSITION-PROPER
RTY
Esta prop
d prefijos
especfico
os para algun
nos navegadores actualees. Consulta en
e Mozilla Developer
D
Neetwork para conocer si
debes aplicar prefijos.
CSS perm
mite cambiar las propied
dades de un elemento HTML
H
mediaante una transicin con efecto de
animacin
n progresiva. El primer parmetro
p
a definir
d
es qu
u propiedad
d es la que see va a cambiaar durante
la animacin. Por ejem
mplo, podem
mos cambiar la altura laa anchura dee un elementto. Tambin se pueden
cambiar varias
v
propieedades simultneamentee, por ejemp
plo la altura, la anchura y el color o la imagen
de fondo,, tamao dee texto, etc. Para definir qu propie
edad o prop
piedades van
n a ser inclu
uidas en la
animacin
n se usa la prropiedad transition-prop
perty.
om, 2006-2029
Animaciones CSS con transition. Ejemplos.
PROPIEDAD CSS transition-property

Permite definir qu elementos van a ser afectados por una transicin.
Valor por defecto
all
Aplicable a

all (indica que se vern afectadas por la transicin todas las propiedades que se
pueda)

esta propiedad
none (indica que no se aplicar la transicin a ninguna propiedad)

nombreDeLaPropiedad (indicando un nombre de propiedad se especifica la
propiedad que se va a ver afectada; si son varias, separarlas con comas.)
.myContainer { transition-property: color, transform; }

Ejemplos
aprenderaprogramar.com .myContainerSP { transition-property: font-size; }
PROPIEDAD TRANSITION-DURATION
Esta propiedad puede no ser reconocida por los navegadores antiguos o requerir del uso de prefijos
especficos para algunos navegadores actuales. Consulta en Mozilla Developer Network para conocer si
debes aplicar prefijos. transition-duration sirve para especificar cul tiene que ser la duracin de la
transicin en segundos (s) o en milisegundos (ms). Su valor por defecto es 0 (esto equivale a que no
habr transicin). En caso de que haya varias propiedades afectadas, los tiempos se especifican
separados por comas y se asocian a cada propiedad en el mismo orden en que los define la propiedad
transition-property. Ejemplo: transition-property: color, transform; transition-duration: 10s, 4s;
En este caso la transicin para la propiedad color durar 10 segundos, ser ms lenta. La transicin para
la propiedad transform durar 4 segundos, ser ms rpida.
Otro ejemplo con valores expresados en milisegundos: transition-duration: 120ms, 750ms;
PROPIEDAD TRANSITION-DELAY
Esta propiedad sirve para especificar cul tiene que ser el retardo con el que empiece la transicin en
segundos (s) o en milisegundos (ms), a partir del momento en que se produzca la situacin de
disparo. Su valor por defecto es 0 (esto equivale a que la transicin comenzar inmediatamente
cuando se produzca la situacin de disparo). En caso de que haya varias propiedades afectadas, los
tiempos se especifican separados por comas y se asocian a cada propiedad en el mismo orden en que
los define la propiedad transition-property. Ejemplo:
transition-property: color, transform; transition-delay: 2s, 0s;

En este caso la transicin para la propiedad empezar con un retardo de 2 segundos, no se har
patente inmediatamente. El retardo para la propiedad transform ser de cero segundos, lo que significa
que se empezarn a apreciar los efectos de la transicin inmediatamente una vez se produzca la
situacin de disparo.
Otro ejemplo con valores expresados en milisegundos: transition-delay: 120ms, 750ms;
PROPIEDAD TRANSITION-TIMING-FUNCTION
PROPIEDAD CSS transition-timing-function
Permite definir la velocidad a la que transcurre la transicin respetando la

duracin establecida. A efectos prcticos, permite que el usuario vea la
animacin como progresiva a velocidad constante o con cierta aceleracin.
Valor por defecto
ease
Aplicable a

ease: comienzo rpido, luego velocidad constante y final lento.
ease-in: al revs que ease.
ease-out: similar a ease con final a velocidad constante.
ease-in-out: comienzo lento y progresin a velocidad constante.
linear: progresin a velocidad constante.

esta propiedad
step-start: salto de la situacin inicial a la final al comienzo.

step-end: salto de la situacin inicial a la final al final.
steps (numeroDePasos, end) [El parmetro numeroDePasos establece el
nmero de pasos intermedios entre la situacin inicial y la final, lo que equivale
a que la transicin se vea como pequeos saltos.]
cubic-bezier(valor0a1, valor0a1, valor0a1, valor0a1) [Esta forma de definicin
permite especificar la curva temporal de forma matemtica para definir formas
de cambio personalizadas]
.myContainer { transition-timing-function:ease;}
Ejemplos
aprenderaprogramar.com .myContainerSP { transition-timing-function:steps(6, end);}
EJEMPLO DE APLICACIN
Escribe el siguiente cdigo y comprueba los resultados (ten en cuenta que para algunos navegadores
puede ser necesario que indiques prefijos). El efecto a apreciar es cmo un div con un texto e imagen va
rotando y cambiando de color hasta volver a su posicin inical pero con el color cambiado.
<html>
<head>
.bloquePub{ border: 5px solid; width: 260px;
margin:60px 0 0 90px; background-color:yellow;
font-size: 20px; text-align:center;
transition-property: color, transform;
transition-duration: 6s, 4s;
transition-timing-function: ease;
transition-delay: 2s, 0s;
}
.bloquePub:hover {color: red; transform:rotate(360deg);}
h2{margin: 15px 0 0 140px;}
img {padding:10px; }
}
</style>
</head>
<body>
<h2>CSS transition</h2>
<div id="mainCont" style="border-style:none; border-width:0; background-color:white;">
<div class="bloquePub" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"
alt="Notepad++" ></a></div>
</div>
</body>
</html>
El mismo efecto se puede conseguir usando la propiedad shortand transition como veremos a
continuacin.
PROPIEDAD SHORTAND TRANSITION

Las funciones relacionadas con transiciones transition-property, transition-duration, transition-delay y
transition-timing-function se pueden agrupar en una sola propiedad shortand denominada transition.
La sintaxis a emplear es de este tipo:
selectorDeElemento { valorTransitionProperty valorTransitionDuration

valorTransitionDelay
valorTransitionTimingFunction}
Para aplicar esta propiedad en el ejemplo visto anteriormente reemplazaramos las cuatro propiedades
relacionadas con transition por esta lnea:
transition: color 6s ease 2s, transform 4s ease 0s;
El efecto lo vemos descrito en esta secuencia de imgenes:
LO ELEGANTE Y LO EXCESIVO
Con las propiedades que estamos viendo que permiten efectos dinmicos usando CSS muchos
diseadores y programadores son capaces de generar efectos elegantes y atractivos para pginas web.
Sin embargo, muchos otros llenan sus pginas web de complejos efectos visuales que son muy
espectaculares, pero luego resultan desagradables para el usuario debido a que en la pgina todo se
est moviendo y dando vueltas, lo que puede llegar incluso a generar mareos. Por tanto, concluimos
con una recomendacin. Si usas estos efectos, hazlo con prudencia y moderacin.
EJERCICIO
#transEj1 div { transition:all 2s ease-in-out; perspective: 800px; perspective-origin: 50% 100px; }
#transEj1:hover #rotateX { transform:rotateX(180deg);}
#transEj1:hover #rotateY { transform:rotateY(180deg);}
#transEj1:hover #rotateZ { transform:rotateZ(180deg);}
a) Crea un documento HTML donde se vean los estilos que tenemos en el cdigo aplicados a distintos
elementos.
b) Explica el significado de cada una de las partes del cdigo (por #transEj1 div indica los estilos que se
aplicarn a div dentro de elementos con id=transEj1. transition: all indica que , 2s indica que ,
ease-in-out indica que, etc.)

Animacione
es CSS. Regla @keyframes.
@
Eje
emplos.
ANIMATIO
ON CSS
Ya hemoss visto que usando
u
las propiedades
p
transform y transition con
c hover p
podemos cre
ear efectos
dinmicoss sobre una web. Sin em
mbargo, la an
nimacin estt limitada a que se pro
oduzca al posicionar el
usuario el
e ratn sobrre un elemeento o usar otros recursos. CSS ha introducido
o nuevas tccnicas que
permiten elaborar an
nimaciones ms sofisticcadas que pueden
p
colaborar a no tener que recurrir a
tecnologaas como Javaascript Flassh.
ACIN CSS
CONCEPTTO DE ANIMA
El concep
pto de animaacin es un concepto
c
que tiene ciertta similitud con
c el conceepto de transsicin CSS,
pero que es ms amp
plio y ofrece ms posibilidades. Una animacin es
e un efecto dinmico que cambia
ue puede teener varios estados intermedios
las propiedades de un elemento en el tiempo y qu
especificaados. Una an
nimacin requiere al men
nos de dos esstados: el esstado inicial ((from) y el esstado final
(to). No obstante, pueede tener otrros estados intermedios
i
adicionales.
A continuacin vemoss las diferenccias entre traansicin y an
nimacin:
Transicin
A
Animacin
Cambio de
d estado inicial a final
cuando ussuario posicion
na mouse
encima de elemento
Cambio dee estado iniciaal a otro

final, pasan
ndo por varioss estados
intermedios diferentes si se desea y
de ejecuccin espontnea si se
desea
Ejecucin espontnea
e
f
fcil
de
codificar
No
Repeticin
n espontnea durante
cierto tiem
mpo fcil de co
odificar
No
Repeticin
n continua fccil de
codificar
No
Ejecucin hacia delante

e y hacia
detrs fciil de codificarr
No
Puede requerir uso de prefijos

p
en
ciertos navvegadores
Uso bsico
o
om, 2006-2029
Animaciones CSS. Regla @keyframes. Ejemplos.
@KEYFRAMES
Para definir una animacin empezaremos definiendo las propiedades que va a tener el elemento en
cada uno de los estados de la animacin mediante el uso de la regla CSS @keyframes.
Para ello se usa la siguiente sintaxis:
@keyframes nombreDeLaAnimacion{
from {propiedad1: valor1; propiedad2: valor2; propiedadN: valorN; }
valor%1 { propiedad1: valor; propiedad2: valor; propiedadN: valor; }
valor%2 { propiedad1: valor; propiedad: valor2; propiedad: valorN; }
valor%N { propiedad1: valor; propiedad: valor2; propiedad: valorN; }

to {propiedad1: valor1; propiedad2: valor2; propiedadN: valorN; }
}
Las propiedades definidas en from { } definen el estado inicial o situacin de partida. Las propiedades
definidas en to { } definen el estado final o situacin de terminacin. Estos dos estados son de
declaracin obligatoria.
Entre los estados from y to pueden existir un nmero indeterminado de estados intermedios que
representan la situacin en momentos intermedios durante la ejecucin de la animacin. La animacin
va pasando as por los estados definidos hasta llegar al estado final.
El ejemplo ms bsico puede ser tener slo un estado inicial y un estado final. Sera este caso:
@keyframes animacion{
from { margin-left: 10%; }
to { margin-left: 60%; color:red }
}
En este ejemplo estamos definiendo que el elemento HTML al que se le aplique la animacin que tiene
por nombre animacion pasar de tener un margin-left del 10%, es decir, estar al lado izquierdo, a
tener un margin-left del 60%, es decir, estar al lado derecho de su contenedor. Adems en el lado
izquierdo tendr su color por defecto mientras que en lado derecho tomar color rojo. Aqu hemos
definidio bsicamente un movimiento de izquierda a derecha.
Ahora otra definicin con un punto clave intermedio:
50% { margin-left:35%; margin-top:10%; }
to { margin-left: 60%; }
}
Aqu hemos indicado que cuando la transicin est al 50% de su ejecucin el elemento debe estar a
medio camino entre la izquierda y la derecha (entre el 10% y el 60% el punto medio resulta el 35%) y
adems que en ese momento debe tener un desplazamiento hacia abajo debido al margin-top. Hemos
definido un movimiento de izquierda a derecha que va bajando hasta alcanzar su posicin ms baja en
el centro y luego sube hasta llegar a su posicin en el lado derecho.
Ahora otra definicin con ms puntos clave:
25% { margin-left:22.5%; margin-top:10%; }
50% { margin-left:35%; margin-top:0%;}
}
Con esta definicin el elemento partir de arriba a la izquierda, se ir desplazando hacia la derecha y
bajar, luego subir, luego volver a bajar y terminar arriba a la derecha. Hemos definido un
movimiento de sube y baja de arriba a derecha.
Para entender grficamente lo que suponen estas definiciones podemos ver este esquema:
Nosotros hemos usado como ejemplo que un elemento se va moviendo, pero ten en cuenta que
animacin no tiene por qu implicar movimiento. Animacin implica cambio de propiedades, con lo
cual un elemento HTML puede estar quieto y presentar una animacin debido a que va cambiando su
color, su tamao de fuente, su fondo, etc. y no es obligatorio que exista movimiento. De hecho, un
efecto bastante habitual es hacer brillar un texto, hacer que su color o efecto de gradiente de fondo
vaya cambiando, etc.
La regla @keyframes puede no ser reconocida por los navegadores antiguos o requerir del uso de
prefijos especficos para algunos navegadores actuales. Consulta en Mozilla Developer Network para
conocer si debes aplicar prefijos.
Una vez hemos definido los keyframes pasaremos a la definicin de los parmetros que definen la
animacin mediante las propiedades animation-name, animation-duration, animation-delay,
animation-fill-mode, animation-iteration-count, animation-direction y animation-timing-function.
EJERCICIO
@keyframes anime{
0%{ color: #f00; font-size: 10px; top: 10px;}
25%{color: #A52A2A; font-size: 90px; left: 100px;}
50%{ top: 56px; color: #000; font-size: 90px; }
100%{color: #A52A2A; font-size: 90px; left: 0; }
}
a) Cul es el nombre de la animacin? Cuntos puntos clave define?

b) Qu ocurrir (cul ser el cambio de propiedades) durante la animacin?
c) Es equivalente usar 0% en lugar de from? Y 100% en lugar de to?

Animacione
es CSS. animation-name, duraation, etc. Ejem
mplos.
ANIMATIO
ON CSS
Mediantee la regla CSSS @keyfram
mes podemos definir una animacin
n con un nombre y los diferentes
estados por
p los que pasar el eleemento HTM
ML que va a ser animad
do durante eel tiempo qu
ue dure la
animacin
n. Conocida esta regla, vamos a veer cmo apllicarla a un elemento o grupo de elementos
e
mediante el uso de un selector tipo id o cllass y la aplicacin de las propiedaades relacion
nadas con
animation
n CSS.
AD ANIMATIION-NAME
PROPIEDA
Mediantee esta propieedad indicam
mos el nombrre de animaccin definidaa en una regla @keyfram
mes que va
a ser aplicada a un elemento
e
seleccionado mediante
m
un
n selector CSSS. El valor por defecto para esta
propiedad
d es none (implica que no se ap
plicar ningu
una animaciin). Si se desean aplicar varias
animacion
nes, se especcificarn sus nombres separadas por comas.
ame: animacion1musk; } esta reglaa indica quee a los elem
Ejemplo: .pubMov{ animation-n
a
mentos con
pubMov se les aplicar la animacin
n de nombre
e animacion1
1musk que h
habr sido definida
d
en
class = p
una regla @keyframes.
Otro ejem
mplo: .pubMov{ animatiion-name: animacion1m
musk, animaccion7kim; } eesta regla ind
dica que a
los elemeentos con class
c
= pub
bMov se lee aplicarn dos animacciones: la que lleva po
or nombre
animacion
n1musk y la que lleva por
p nombre animacion7kim. Ambas debern haaber sido de
efinidas en
reglas @kkeyframes.
Esta prop
d prefijos
especfico
os para algun
nos navegadores actualees. Consulta en
e Mozilla Developer
D
Neetwork para conocer si
AD ANIMATIION-DURATIION
PROPIEDA
Mediantee esta propiiedad indicaamos el tiem
mpo en seggundos (s) o milisegundos (ms) que llevar
completar un ciclo dee la animaci
n. La animaacin habr sido definidaa en una reggla @keyfram
mes y va a
ser aplicaada a un eleemento seleeccionado mediante
m
un selector CSS. El valor p
por defecto para esta
propiedad
d es 0s (implica que no se aplicar niinguna animacin ya quee la duracin
n es nula). Si se desean
aplicar vaarias animacciones, se esspecificarn sus duracio
ones separad
das por com
mas, siendo cada
c
valor
correspon
ndiente a la animacin cuyo nombrre figura en el mismo orden
o
en la propiedad animationa
name.
om, 2006-2029
Animaciones CSS. animation-name, duration, etc. Ejemplos.
Ejemplo: .pubMov{ animation-name: animacion1musk; animation-duration: 5s;} esta regla indica que
a los elementos con class = pubMov se les aplicar la animacin de nombre animacion1musk que
habr sido definida en una regla @keyframes y que esta animacin deber completarse en 5 segundos.
Otro ejemplo: .pubMov{ animation-name: animacion1musk, animacion7kim; animation-duration: 5s,
250ms;} esta regla indica que la primera animacin deber completarse en 5 segundos y la segunda en
250 milisegundos.
PROPIEDAD ANIMATION-ITERATION-COUNT
Mediante esta propiedad indicamos el nmero de veces que debe repetirse la animacin. La animacin
habr sido definida en una regla @keyframes y va a ser aplicada a un elemento seleccionado mediante
un selector CSS. El valor por defecto para esta propiedad es 1 (implica que la animacin se ejecutar
una sola vez y se detendr). Sus valores posibles son cualquier nmero igual o superior a cero,
admitindose decimales (por ejemplo se admite, 1, 2, 3, 3.1, 3.2, 3.5, 10, 20, etc.) infinite. Si se usa la
palabra clave infinite la animacin se repetir indefinidamente sin parar.
Si se desean aplicar varias animaciones, se especificarn sus repeticiones separadas por comas, siendo
cada valor correspondiente a la animacin cuyo nombre figura en el mismo orden en la propiedad
animation-name.
Ejemplo: .pubMov{ animation-name: animacion1musk; animation-duration: 5s; animation-iterationcount:infinite;} esta regla indica que a los elementos con class = pubMov se les aplicar la animacin
de nombre animacion1musk que habr sido definida en una regla @keyframes y que esta animacin
deber completarse en 5 segundos y que una vez completada volver a repetirse y as continuamente.
Otro ejemplo: .pubMov{ animation-name: animacion1musk, animacion7kim; animation-duration: 5s,
250ms; animation-iteration-count:infinite, 7;} esta regla indica que la primera animacin se repetir
continuamente mientras que la segunda se ejecutar 7 veces y se detendr.
PROPIEDAD ANIMATION-DIRECTION
Mediante esta propiedad indicamos cmo debe ejecutarse una animacin: hacia delante (del principio
al final), hacia atrs (del final al principio), una vez hacia delante y otra hacia detrs, etc. La animacin
habr sido definida en una regla @keyframes y va a ser aplicada a un elemento seleccionado mediante
un selector CSS. El valor por defecto para esta propiedad es normal (implica que la animacin se
ejecutar hacia delante). Sus valores posibles son cualquiera de estas palabras clave:
normal: la animacin se ejecutar hacia delante. Si se repite, cuando vuelve a empezar parte de
la situacin inicial.
reverse: la animacin se ejecutar hacia detrs. Si se repite, cuando vuelve a empezar parte de
la situacin inicial.
alternate: la animacin se ejecutar una vez en un sentido y otra vez en otro, comenzando
hacia delante, luego hacia detrs y as sucesivamente el nmero de repeticiones especificado.
alternate-reverse: la animacin se ejecutar una vez en un sentido y otra vez en otro,
comenzando hacia detrs, luego hacia delante y as sucesivamente el nmero de repeticiones
especificado.
Si se desean aplicar varias animaciones, se especificarn sus direcciones separadas por comas, siendo
cada valor correspondiente a la animacin cuyo nombre figura en el mismo orden en la propiedad
animation-name.
especficos o no ser reconocida por algunos navegadores actuales. Consulta en Mozilla Developer
Network para conocer si debes aplicar prefijos o si la propiedad ser reconocida por un navegador
concreto.
PROPIEDAD ANIMATION-DELAY
Anloga a la propiedad transition-delay. Indica el tiempo en segundos (s) o milisegundos (ms) que debe
retrasarse el inicio de la animacin respecto a lo que sera el momento normal para el comienzo.
Ejemplo: animation-delay: 3s;
PROPIEDAD ANIMATION-TIMING-FUNCTION
La animacin habr sido definida en una regla @keyframes y va a ser aplicada a un elemento
seleccionado mediante un selector CSS. El valor por defecto para esta propiedad es ease (implica que la
animacin se ejecutar con un comienzo rpido, luego velocidad constante y final lento.).
Si se desean aplicar varias animaciones, se especificarn sus timing-functions separadas por comas,
siendo cada valor correspondiente a la animacin cuyo nombre figura en el mismo orden en la
propiedad animation-name.
PROPIEDAD CSS animation-timing-function
Permite definir la velocidad a la que transcurre la animacin respetando la

duracin establecida. A efectos prcticos, permite que el usuario vea la
animacin como progresiva a velocidad constante o con cierta aceleracin.
Valor por defecto
ease
Aplicable a

ease: comienzo rpido, luego velocidad constante y final lento.
ease-in: al revs que ease.
ease-out: similar a ease con final a velocidad constante.
ease-in-out: comienzo lento y progresin a velocidad constante.
linear: progresin a velocidad constante.

esta propiedad
step-start: salto de la situacin inicial a la final al comienzo.

step-end: salto de la situacin inicial a la final al final.
steps (numeroDePasos, end) [El parmetro numeroDePasos establece el
nmero de pasos intermedios entre la situacin inicial y la final, lo que equivale
a que la animacin se vea como pequeos saltos.]
cubic-bezier(valor0a1, valor0a1, valor0a1, valor0a1) [Esta forma de definicin
permite especificar la curva temporal de forma matemtica para definir formas
de cambio personalizadas]
.myContainer { animation-timing-function:ease;}
Ejemplos
aprenderaprogramar.com .myContainerSP { animation-timing-function:steps(6, end);}
PROPIEDAD ANIMATION-PLAY-STATE
Esta propiedad permite detener una animacin que se est ejecutando (ponerla en pausa). Su valor por
defecto es running y sus dos valores posibles son:
running: la animacin est en ejecucin

paused: la animacin est en pausa
Ejemplo: .pubMov:hover{ animation-play-state:paused; } con esta regla damos lugar a que la animacin
se detenga si el usuario pone el puntero del ratn sobre el elemento animado.
PROPIEDAD ANIMATION-FILL-MODE
Esta propiedad permite detener definir cmo debe comenzar y cmo debe quedar un elemento que
tiene una animacin. Su valor por defecto es none (implica que el elemento comenzar y quedar en el
estado que tena antes de que comenzara la animacin) y sus valores posibles son:
none: el elemento comenzar y quedar en el estado previo a la animacin.

forwards: el elemento quedar en el estado final de la animacin.
backwards: el elemento se pondr en el estado indicado para el comienzo de la animacin
inmediatamente y esperar en ese estado hasta que se cumpla el tiempo indicado en
animation-delay. Una vez se cumpla ese tiempo la animacin continuar la ejecucin desde ese
estado inicial.
both: combinacin de las dos opciones anteriores.
Ejemplo: .pubMov:hover{ animation-fill-mode: forwards; } con esta regla damos lugar a que cuando la
animacin se detenga quede en el ltimo estado definido (el correspondiente a to 100% dentro de la
regla @keyframes).
PROPIEDAD SHORTAND ANIMATION

Esta propiedad permite definir las propiedades animation-name, animation-duration, animation-timingfunction, animation-delay, animation-iteration-count, animation-direction y animation-fill-mode en una
sola regla CSS.
Ejemplo: .pubMov{ animation: animacion 5s 2 alternate linear forwards; } equivale al conjunto de
reglas:
animation-name:animacion; animation-duration: 5s; animation-iteration-count:2;
direction:alternate; animation-timing-function:linear; animation-fill-mode: forwards;
animation-
EJEMPLOS DE APLICACIN
Escribe este cdigo y comprueba los resultados en tu navegador. Recuerda que hay navegadores que
no soportan estas propiedades. Consulta en Mozilla Developer Network el soporte que ofrecen los
navegadores y sus versiones.
<html>
<head>
from { margin-left: 10%; color: red;}
50% { margin-left:35%; margin-top:0%;}
}
#bloquePub{ text-align:center; position:relative; width:250px;
padding: 15px; font-family:arial; font-size:22px;
font-weight:bold; background-color: yellow; }
img {padding: 10px;}
.pubMov{ animation-name:animacion; animation-duration: 5s;
animation-iteration-count:2; animation-direction:alternate;
animation-timing-function:linear; animation-fill-mode: forwards; }
.pubMov:hover{ animation-play-state:paused; }
</style>
</head>
<body>
<div class="pubMov" id="bloquePub" style="border-radius: 40px;">aprenderaprogramar.com
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" ></a>
</div>
</body>
</html>
El resultado a obtener debe ser similar al que se indica como Cinco puntos clave en esta figura:
El elemento con un texto y una imagen debe partir de la zona izquierda de la pantalla, ir
progresivamente hacia la derecha bajando primero hasta la posicin 25%, luego subiendo hasta 50%,
luego bajando de nuevo hasta 75% y luego subiendo hasta 100%. A continuacin, debe continuar
invirtiendo el movimiento, es decir, realizar lo que hizo anteriormente pero al revs hasta volver a la
posicin inicial.
Prueba a cambiar el nmero de puntos clave y otros parmetros y observa las diferencias. Si no logras
visualizar la animacin es probable que se deba a un problema de compatibilidad del navegador o
necesidad de uso de prefijos. Consulta en los foros aprenderaprogramar.com si no logras resolverlo.
EJERCICIO
Busca en internet (pgina web o blog) una animacin CSS y ejectala en tu navegador. Escribe por
separado el cdigo HTML y el cdigo CSS. Describe paso a paso qu es lo que indica cada fragmento de
cdigo CSS. Es necesario usar prefijos de navegador para lograr su ejecucin en otros navegadores?

Final curso tutorial prograamacin web CSSS desde cero.
FINAL DELL CURSO TUTTORIAL

Con esta entrega lleggamos al finaal del curso Tutorial bsico del pro
ogramador w
web: CSS desde cero.
os que haya sido un cursso til y ameeno para todas las personas que lo h
hayan seguid
do. Y como
Esperamo
en todo fiinal, cabe hacer algunas consideracio
ones especiales.
uipo humano
o de aprenderaprogramaar.com que ha
h hecho po
osible su pub
blicacin, y
Gracias al equ
ui, Enrique Gonzlez
G
y
en especial a Javier Roa, Jorge Maestro, Manuel Tello, Walter Sagstegu
M
Mario
Rodrgu
uez.
Gracias a todas las person

nas que de una
u u otra fo
orma han paarticipado en
nviando prop
puestas de
m
mejora,
comentarios, avvisos de errratas, etc. y a los alum
mnos que h
han seguido
o el curso
co
olaborando a travs de lo
os foros.
A todos los que

q no han participado
p
p
pero
han segguido el cursso de forma gratuita a trravs de la
w
web,
desde aprenderapr
a
rogramar.com
m les agradeceramos nos
n hicieran llegar una opinin o
propuesta de
d mejora sobre el mismo, bien
b
a traavs de co
orreo electtrnico a
ontacto@aprenderaproggramar.com , bien a trravs de loss foros. Tod
das las opin
niones son
co
bienvenidas y nos sirven para
p
mejorarr.
f
gratuitta y piensen que los contenidos son de calidad
A quienes hayyan seguido el curso de forma
y que merecee dar un peq
queo apoyo
o econmico
o para que see puedan seeguir ofrecien
ndo ms y
m
mejores
conteenidos en esste sitio web
b, les estarem
mos muy agradecidos si realizan unaa pequea
ap
portacin ecconmica en forma de do
onacin pulsando sobre el enlace que aparece en
n la pgina
principal de aprenderapro
ogramar.com
m.
Quienes tengan
t
inters en prosegguir formnd
dose en el rea de programacin y programaci
n web les
animamos a que visiten la seccin Cursos de aprenderaprogramar.com en la URL
http://www
w.aprenderap
programar.com/index.php??option=com_
_content&view
w=article&id==57&Itemid=8
86
Quienes
estn
interesado
os
en
cursos
tutorizados
on-line
pueden
visitar
http://www
w.aprenderap
programar.com/index.php??option=com_
_content&view
w=article&id==64&Itemid=8
87
os que nos haan ledo y no

os siguen, graacias. Nos vemos
v
en el prximo!
p
A todos lo
El equ
uipo de apreenderaprogrramar.com
om, 2006-2029

6 CSS

Cargado por

Información del documento

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

6 CSS

Cargado por

Copyright:

Formatos disponibles

TUTORIAL BSICO DEL PROGRAMADOR WEB:

CSS DESDE CERO.

INTRODUCCIN A CSS. QU ES Y PARA QU SIRVE CSS. VERSIONES CSS. EL W3C.

Direccin, modalidades y certificados

Indice del curso Tutorial bsico program

P ID (#) Y POR CLASE((.). CONCEPT

Seelectores por id. Selectorres por class. Ejemplos.

Seelectores avaanzados, pseeudoclases y pseudoelem

Color de fondo. Propiedad background-color CSS.

UNIDADES DE MEDIDA. PROPIEDADES WIDTH Y HEIGHT.

BORDES CSS. PROPIEDADES RELACIONADAS.

MARGEN (MARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.

POSICIONAMIENTO, MAQUETACIN Y DISEO CON CSS. POSITION, FLOAT, CLEAR Y MS.

CSS text-transform y first-letter, letter-spacing y word-spacing.

Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image.

Comentarios condicionales CSS. Problemas: compatibilidad entre navegadores.

EFECTOS CSS DE LTIMA GENERACIN. USO DE SPRITES. ANIMACIONES.

Angulos CSS: unidades deg, grad, turn, rad.

Otros aspectos de CSS.

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

Orientacin curso Tutorial bsico programador web: CSS desde cero

CSS no es un lenguaje de programacin propiamente dicho, aunque a veces se lo denomina lenguaje de

Orientacin curso Tutorial bsico programador web: CSS desde cero

Prxima entrega: CU01003D

Concepto de CSS. Hojas de estilo en cascada.

DEFINICIN O CONCEPTO DE LENGUAJE CSS

Concepto de CSS. Hojas de estilo en cascada.

Concepto de CSS. Hojas de estilo en cascada.

<font color ="red"><p> Texto de ejemplo para visualizar resultados</p></font>

Concepto de CSS. Hojas de estilo en cascada.

Prxima entrega: CU01004D

PARA QU SIRVE CSS

Para qu sirve CSS? Es un lenguaje de programacin?

HTML y CSS son tecnologas (o metalenguajes, ya que no puede considerrselos lenguajes de

Para qu sirve CSS? Es un lenguaje de programacin?

Prxima entrega: CU01005D

Efectos CSS. La frontera en

EFECTOS CSS. UBICAR

<!DOCTYYPE HTML PUBLIC "-//W3C//D

Con Javasscript podem

Efectos CSS. La frontera entre CSS, HTML y programacin

Efectos CSS. La frontera entre CSS, HTML y programacin

Efectos CSS. La frontera entre CSS, HTML y programacin

Prxima entrega: CU01006D

CSS en gestores de conten

pto de aplicacin web (programa que

mla, Drupal, OpenCMS, Plone, WordPrress,

phpBB, SMF, flu

dos para la ccreacin de sistemas

CSS en gestores de contenido como Joomla, WordPress, Drupal

MediaWiki, DocuWiki, PmWiki, WikkaWiki,

Pensados para mantener un sistema de

Magento, PrestaShop, CubeCart, OpenCart,

Pensadas para crear tiendas electrnicas y

ExtCalendar, phpScheduleit, WebCalendar,

Permiten crear calendarios, galeras de

MILLONES DE DESCARGAS, MILLONES DE WEBS DISTINTAS

CSS en gestores de contenido como Joomla, WordPress, Drupal

CSS en gestores de contenido como Joomla, WordPress, Drupal

CSS en gestores de contenido como Joomla, WordPress, Drupal

Prxima entrega: CU01007D

Crea un documento HTML

<!DOCTYPE HTML PUBLIC

Empezar a usar CSS a partir de un documento HTML bsico