Está en la página 1de 318

TUTORIAL BÁSICO DEL PROGRAM ADOR W EB:

CSS DESDE CERO.


Objetivos

CSS es un lenguaje de est ilo que define la present ación de los document os HTM L. Por
ejemplo, con CSS podemos cambiar fuent es, colores, márgenes, t amaños, imágenes de
fondo, maquet ación, crear animaciones y ot ros efect os y más. Est e curso permit e
aprender los fundament os de CSS, imprescindible para t rabajar con páginas w eb hoy día.

Destinatarios

Cualquier persona con interés en aprender fundamentos que le permitan crear páginas web
usando CSS. Para realizar este curso, debes tener conocimientos previos de HTM L. Se
recomienda haber realizado el curso “ Tutorial básico del programador web: HTM L desde cero”
de aprenderaprogramar.com antes de seguir este curso.

Contenidos

 INTRODUCCIÓN A CSS. QUÉ ES Y PARA QUÉ SIRVE CSS. VERSIONES CSS. EL W3C.
 M ODELO DE CAJAS CSS. ESTILOS EN LÍNEA, INTERNO Y EXTERNO. TIPOS DE ELEM ENTOS.
 SELECTORES POR ID (#) Y POR CLASE(.). CONCEPTO DE HERENCIA Y DE CASCADA.
 SELECTORES AVANZADOS. PSEUDOCLASES. PSEUDOELEM ENTOS.
 COLORES Y FONDOS. FUENTES Y TEXTOS. UNIDADES DE M EDIDA. PROPIEDADES CSS.
 BORDES CSS. M ARGIN Y PADDING. PROPIEDADES BÁSICAS. EFECTOS AVANZADOS.
 ENLACES CON CSS. LISTAS CON CSS. TABLAS CON CSS. M ENÚS CON CSS.
 POSICIONAM IENTO. FLOAT Y CLEAR. M AQUETACIÓN EN COLUM NAS. DISEÑO FLUIDO.
 PREFIJOS CSS DE NAVEGADOR: CHROM E, FIREFOX, INTERNET EXPLORER, OPERA, SAFARI.
 EFECTOS CSS DE ÚLTIM A GENERACIÓN. USO DE SPRITES. ANIM ACIONES.

Duración

150 horas de dedicación efect iva, incluyendo lect uras, est udio y ejercicios.

Dirección, modalidades y certificados

El curso est á dirigido por César Krall, Responsable del Depart ament o de Producción de
aprenderaprogramar.com del port al w eb aprenderaprogramar.com. Se ofert a bajo la
modalidad w eb (grat uit o).

Para más información: cont act o@aprenderaprogramar.com


Indice del curso “Tutorial básico program
mador w eb: CSS
S desde cero”.

IND
DIC
CE DEL
D L CU
URS
SO

1. IN
NTRODUCCIÓ
ÓN A CSS. QU
UÉ ES Y PAR
RA QUÉ SIRVE
E CSS. VERSIIONES CSS. E
EL W 3C.

1.1. ¿Q
Qué es CSS? HTM L, cono
ocimient o pre
evio necesarrio.
1.2. ¿E
Es CSS un len
nguaje de pro
ogramación?
? ¿Para qué sirve?
s Difere
encias de HTM
M L, CSS, PHP
P, ASP...
1.3. Diferencias en
nt re CSS y HT
TM L. Front erra ent re CSS,, HTM L y pro
ogramación.
1.4. CS
SS en aplicacciones web Joomla, Word pal, phpBB... Plant illas, Te
dPress, Drup emplat es o Themes.
T
1.5. Em
mpezar a usa
ar CSS a partt ir de un document o HTM
M L con est ru
uct ura básica.
1.6. Ve
ersiones CSS
S. Algo de hisst oria y persp
pect iva. ¿Qu é es el W3C?
? Recomend aciones oficiiales.
1.7. Document ació
ón especifica
ación oficial CSS.
C W3scho
ools y W3foo
ols. Validació
ón CSS W3C validat
v or.
1.8. ¿Q
Qué necesit o para escrib
bir código CSS
S y crear pág
ginas web?

2. M ODELO DE CAJAS
C CSS. ESTILOS
E EN LÍNEA,
L INTER
RNO Y EXTER
RNO. TIPOS D
DE ELEM ENT
TOS.

2.1. De la est ruct ura


u HTM L y su semánt ica al modelo de
d cajas CSS. Element os b
block e inline
e CSS.
2.2. Esst ilos por deffect o, en líne
ea, int erno y ext erno. So
obreescrit ura
a de est ilos. l ink rel.
2.3. Archivos CSS. Coment ario s CSS.

3. ELECTORES POR
SE P ID (#) Y POR CLASE((.). CONCEPT
TO DE HEREN
NCIA Y DE CA
ASCADA.

3.1. Se
elect ores po r id. Select orres por class. Ejemplos.
3.2. Co
oncept o de herencia
h en hojas de est ilo CSS. ¿Qué
é es? Forzar herencia con
n inherit .
3.3. Co
oncept os: ca
ascada y here
encia CSS. Esst ilos de usua
ario. !importt ant . Ejemplo
os práct icos.

4. SE
ELECTORES AVANZADOS
A S. PSEUDOCL
LASES. PSEU DOELEM ENT
TOS. EJEM PL
LOS PRÁCTIC
COS.

4.1. Se
elect ores ava
anzados, pse
eudoclases y pseudoelem
ment os CSS.
4.2. firrst -child, nt h-child,
h last , not , -let t er -line, aft er, b efore.
4.3. Se
elect or unive
ersal. nt h-of--t ype y nt h-la
ast -child.

5. CO
OLORES CSS.

5.1. Co
olores HTM L y CSS. RGB decimal o po
orcent ual. Có
ódigos de co
olores hexade
ecimales.
5.2. W
Web safe colo
ors. Colores RGBA,
R HSL, HSLA.
H parencia CSS.. List a de col ores HTM L - CSS.
Transp

M ás inform ación: cont act o@aprenderap


o rogramar.com
Indice del curso “Tutorial básico programador web: CSS desde cero”.

6. FONDOS.

6.1. Color de fondo. Propiedad background-color CSS.


6.2. Definición de fondo CSS. background-image. Efect o fondo página w eb. background-repeat .
6.3. CSS background-posit ion, background-at t achment , clip, origin y size. Short and fondo. Ejemplos.
6.4. Definición de fondo CSS. background-image. Efect o fondo página w eb. background-repeat .

7. UNIDADES DE M EDIDA. PROPIEDADES W IDTH Y HEIGHT.

7.1. Unidades de medida CSS relat ivas o absolut as. in, cm, mm, pt , pc, pixel px, porcent aje, em, ex.
7.2. Propiedades CSS widt h y height . aut o (aut omát ico). Ejemplos práct icos y ejercicios resuelt os.

8. BORDES CSS. PROPIEDADES RELACIONADAS.

8.1. Tipos de borde CSS. border-st yle hidden, solid... Efect os 3D. border-t op right bot t om left .
8.2. Short and: not ación CSS abreviada. border-widt h (t hin, t hick) border-color (t ransparent ).
8.3. Propiedad out line.

9. M ARGEN (M ARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.

9.1. Concept o de margen y relleno CSS. Diferencias ent re margin y padding CSS (box model).
9.2. Padding y margin CSS. Top, right , bot t om, left . M argin negat ivo y cent rar con margin aut o.

10. POSICIONAM IENTO, M AQUETACIÓN Y DISEÑO CON CSS. POSITION, FLOAT, CLEAR Y M ÁS.

10.1. Propiedad posit ion CSS: st at ic, relat ive, absolut e, fixed. Top, right , bot t om, left . Ejemplos.
10.2. Propiedad display CSS. inline, block, none, list -it em. Ejercicios de ejemplo resuelt os.
10.3. Concept o float CSS. none, left , right y ¿cent rar?. Colocar t ext o alrededor de una imagen.
10.4. clear CSS bot h¿El t ext o no envuelve una imagen ht ml? Explicación a problemas.
10.5. Diseño web CSS dos, t res, cuat ro columnas con float ¿widt h en porcent ajes no funciona?
10.6. overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibilit y (visible, hidden, collapse).
10.7. z-index CSS ¿no funciona? Superposición de element os t ipo capas, objet os, div o imágenes.
10.8. CSS vert ical-align middle Cent rar vert icalment e una imagen, t ext o, div, et c. Ejemplos.
10.9. Diseño líquido CSS (fluido) frent e a responsive-design.
10.10. Propiedades CSS max-w idt h, min-widt h, max-height , min-height .

11. FUENTES Y TEXTO.

11.1. CSS t ext -align, color, t ext -decorat ion, t ext -indent , whit e-space nowrap, pre, pre-wrap, pre-line.
11.2. CSS efect o sombra con t ext -shadow y blur, t ext -overflow clip, ellipsis.
11.3. Int erlineado: propiedad CSS line-height .

M ás información: cont act o@aprenderaprogramar.com


Indice del curso “Tutorial básico programador web: CSS desde cero”.

11.4. CSS t ext -t ransform y first -let t er, let t er-spacing y word-spacing.
11.5. Cort ar palabras largas con word-wrap.
11.6. CSS font -size (uso de larger, smaller).
11.7. font -weight o negrit a (bolder, light er).
11.8. font -st yle o cursiva it alic.
11.9. CSS font -family. t ipografía (t ipos de let ra). List a de t ipos.
11.10. font -variant (small-caps). Short and font .
11.11. @font -face CSS. Fuent es w eb grat uit as. Problemas.
11.12. Convert ir woff, eot , t t f, ot f, svg. Font convert ers.

12. ENLACES CSS.

12.1. Pseudoclases CSS link, visit ed, focus, hover y act ive. Est ilos y efect os en links.

13. LISTAS CSS.

13.1. List as CSS. list -st yle-t ype, list -st yle-posit ion (out side, inside), list -st yle-image.
13.2. Short and list -st yle.
13.3. M enú horizont al CSS o vert ical. Crear menús con efect os a part ir de list as CSS. Ejemplos.
13.4. M enú desplegable CSS horizont al. Efect o dropdown. Ejemplo de código (float , display…).

14. TABLAS CSS.

14.1. Est ilos y herencia CSS en t ablas. Widt h, height , font -size y overflow en t ablas. border-collapse.
14.2. Diseño de t ablas CSS. border-spacing, capt ion-side, empt y-cells.
14.3. Diseño de t ablas CSS. Colores de filas int ercalados alt ernos.

15. COM PATIBILIDAD Y PREFIJOS DE NAVEGADOR: CHROM E, FIREFOX, INTERNET EXPLORER,


OPERA, SAFARI.

15.1. Coment arios condicionales CSS. Problemas: compat ibilidad ent re navegadores.
15.2. St rict mode. Filt ros.
15.3. Prefijos CSS de navegador Chrome, Firefox, Int ernet Explorer, Opera, Safari.
15.4. Prefijos -webkit -moz -ms -o Ejemplos.

16. EFECTOS CSS DE ÚLTIM A GENERACIÓN. USO DE SPRITES. ANIM ACIONES.

16.1. Sprit e CSS: concept o. ¿Qué es, cómo crear y usar un sprit e? Ejemplos y código resuelt o.
16.2. Columnas CSS: column-count , column-widt h, columns, colum-gap y colum-rule. Ejemplos.
16.3. Efect o CSS esquinas redondeadas: border-radius. border-left -t op-radius. Círculo o elipse.
16.4. Efect o sombra CSS: box-shadow. Sombra int erior inset . Difuminado blur, spread. Ejercicios.
16.5. Degradados CSS. Efect o lineal y radial. linear-gradient .

M ás información: cont act o@aprenderaprogramar.com


Indice del curso “Tutorial básico programador web: CSS desde cero”.

16.6. Angulos CSS: unidades deg, grad, t urn, rad.


16.7. Efect os CSS. radial-gradient t ipo circle o ellipse.
16.8. Efect os CSS. t ransform: rot at e, scale, skew y t ranslat e. Rot ar, escalar, sesgar, t rasladar.
16.9. Animaciones CSS. t ransit ion-propert y, t ransit ion-durat ion, t iming-funct ion y efect o delay.
16.10. Animación CSS. Diferenciar t ransición y animación. @keyframes: fot ogramas o est ados clave.
16.11. Animat ion CSS. name, durat ion, delay, fill-mode, it erat ion-count .
16.12. Animat ion CSS. direct ion, t iming-funct ion, play-st at e.
16.13. cursor CSS. Tipos. Efect os hover: move, no-drop, resize, not -allow ed, crosshair, progress, wait .

17. M ÁS SOBRE CSS.

17.1. Ot ros aspect os de CSS.


17.2. ¿Qué hemos aprendido y qué no hemos aprendido con est e curso de CSS?

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

M ás información: cont act o@aprenderaprogramar.com


Orientación curso “Tutorial básico programador web: CSS desde cero”

ORIENTACIÓN SOBRE EL CURSO PASO A PASO “TUTORIAL BÁSICO DEL PROGRAM ADOR W EB: CSS
DESDE CERO”

CSS es un lenguaje diseñado para separar el cont enido de las páginas web de su present ación. Así, un
mismo cont enido podría verse de dist int as maneras o con dist int os aspect os aplicándole dist int os
est ilos CSS.

CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina lenguaje de


programación coloquialment e. Est o es posiblement e debido a que muchas veces el lenguaje CSS se
mezcla de alguna manera con el HTM L o con lenguajes de programación como PHP. Est a mezcolanza
implica que a veces el código CSS est é junt o al HTM L o PHP, o que a la hora de desarrollar una w eb o
solucionar un problema en una web sean necesarios conocimient os t ant o de HTM L como de CSS como
de un lenguaje de programación propiament e dicho.

CSS es un lenguaje descript ivo, formado por una serie de at ribut os, valores y et iquet as que el
navegador int erpret ará de una u ot ra forma most rando dist int os aspect os para las diferent es et iquet as
que forman la est ruct ura de una página HTM L. Es decir, podemos obt ener muchos aspect os y diseños
para una misma página HTM L simplement e cambiando su hoja de est ilos.

Est e curso que est amos comenzando va dirigido a aquellas personas que quieran adquirir unos
fundament os básicos para crear hojas de est ilo con vist as a poder desarrollar en el fut uro páginas web
at ract ivas y de ciert a complejidad. No vamos a desarrollar un manual de referencia de CSS, sino un
curso básico paso a paso. No vamos a cont emplar t odos los aspect os de las hojas de est ilo CSS, sino
aquellos que consideramos básicos desde el punt o de vist a didáct ico, con vist as a que post eriorment e
la persona que lo desee amplíe sus conocimient os. Nuest ro objet ivo es ser claros, sencillos y breves, y
para eso t enemos que cent rarnos en det erminadas cuest iones de CSS y dejar de lado ot ras.

Como conocimient os previos para iniciar est e curso recomendamos (seguir la recomendación o no
queda a crit erio del alumno y/ o profesor que vayan a seguir el curso) est os: Ofimát ica básica (saber
copiar, pegar, mover y abrir archivos, et c.) y haber realizado el Curso básico de HTM L que se ofrece en
aprenderaprogramar.com (ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=69& It emid=192).

Conocer algún lenguaje de programación sería un aspect o posit ivo.

Los conocimient os previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender CSS requiere t iempo y esfuerzo. Para hacer ese recorrido más llevadero, t e recomendamos
que ut ilices los foros de aprenderaprogramar.com, herramient a a disposición de t odos los usuarios de
la web (ht t p:/ / www.aprenderaprogramar.com/ foros/ ), y que t e servirá para consult ar dudas y recabar
orient ación sobre cómo enfrent art e a los cont enidos. Ent re los miembros del port al web y ot ros
usuarios, t rat aremos de ayudart e para que el est udio t e sea más llevadero y seas capaz de adquirir los
conocimient os necesarios y avanzar como programador o diseñador web.

El t iempo necesario (orient at ivament e) para complet ar el curso incluyendo práct icas con ordenador,
suponiendo que se cuent a con los conocimient os previos necesarios, se est ima en 90 horas de

© aprenderaprogramar.com, 2006-2029
Orientación curso “Tutorial básico programador web: CSS desde cero”

dedicación efect iva o aproximadament e un mes y medio con una dedicación de 3 horas diarias de lunes
a viernes. Aprender a crear páginas web requiere dedicación y esfuerzo.

El curso ha sido generado paso a paso usando Windows como sist ema operat ivo y por ello cont iene
algunas indicaciones específicas para usuarios de Windows, pero t ambién puede ser ut ilizado en ot ros
ent ornos (Linux, M acint osh, et c.).

Est amos seguros de que con t u esfuerzo y la ayuda que t e podamos brindar est e curso t e result ará de
gran ut ilidad.

Próxima entrega: CU01003D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Concepto de CSS. Hojas de estilo en cascada.

DEFINICIÓN O CONCEPTO DE LENGUAJE CSS

CSS es un lenguaje ut ilizado en la present ación de document os HTM L. Un document o HTM L viene
siendo coloquialment e “ una página web” . Así, podemos decir que el lenguaje CSS sirve para dot ar de
present ación y aspect o, de “ est ilo” , a una página web. Est e lenguaje es principalment e ut ilizado por
part e de diseñadores y programadores web para elegir mult it ud de opciones de present ación como
colores, t ipos y t amaños de let ra, imágenes de fondo, bordes, et c.

La filosofía de CSS se basa en int ent ar separar lo que es la est ruct ura o cont enido y configuración básica
del document o HTM L de su present ación. Por decirlo de alguna manera: la página web sería lo que hay
debajo (el cont enido) y CSS sería “ un crist al de color” que hace que el cont enido se vea de una forma u
ot ra. Usando est a filosofía, result a muy fácil cambiarle el aspect o a una página web: bast a con cambiar
“ el crist al” que t iene delant e. Piensa por ejemplo qué ocurre si t ienes un libro de papel y lo miras a
t ravés de un crist al de color azul: que ves el libro azul. En cambio, si lo miras a t ravés de un crist al
amarillo, verás el libro amarillo. El libro (el cont enido) es el mismo, pero lo puedes ver de dist int as
maneras. CSS permit e cambiar el est ilo a los cont enidos de las páginas web.

Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas
t ípicas et iquet as HTM L como <H1> (h1 es una et iquet a en el lenguaje HTM L dest inada a most rar un
t ext o como encabezado, en t amaño grande). Pero t ambién hay funciones algo más complejas, como
int roducir espaciado ent re element os <DIV> (div es una et iquet a HTM L para ident ificar una
det erminada región o división de cont enido dent ro de una página web) o est ablecer imágenes de
fondo, bordes redondeados, et c..

CSS es muy int uit ivo y sencillo una vez se llega a aprender, ya que para su definición siempre se hace
uso de un ident ificador de et iquet a HTM L (como por ejemplo <H1>), y luego indicamos con qué aspect o
queremos que se muest ren t odas las et iquet as <H1> que aparezcan en un document o. Podemos definir
cómo queremos que se muest ren las dist int as part es del document o HTM L, pudiendo en cada caso
definir sus propiedades (color, t ipo de fuent e, t amaño, espacio de márgenes, bordes, imagen de fondo,
et c.) con algún det erminado valor deseado.

Vamos a ver primero lo que sería un ejemplo muy sencillo de aplicación de CSS, que t rat ará de una
página web o archivo HTM L donde t an solo t endremos un párrafo de t ext o. El t ext o est ará dent ro de
una et iquet a <p>. Dist inguiremos con est e ejemplo ent re cont enidos y present ación o aspect o.

Para seguir est e t ut orial es necesario que t engas conocimient os básicos de HTM L. Si no los t ienes, t e
recomendamos que realices primero el curso básico de HTM L disponible en la sección de cursos de
aprenderaprogramar.com (o si prefieres acceder direct ament e, puedes hacerlo a t ravés de est e enlace:
ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent& view=cat egory& id=69& It emid=192).

© aprenderaprogramar.com, 2006-2029
Concepto de CSS. Hojas de estilo en cascada.

Nuest ro document o ht ml cont endrá el siguient e t ext o de part ida (en est e caso se ha llamado
ejemplo.ht ml):

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / ww w.w3.org/ TR/ ht ml4/ loose.dt d" >

<ht ml>

<head>

<t it le>Ejemplo aplicación CSS - aprenderaprogramar.com</ t it le>

</ head>

<body>

<p>Text o de ejemplo para visualizar result ados </ p>

</ body>

</ ht ml>

Una vez creado el document o ejemplo.ht ml en nuest ro ordenador, lo abriremos con un navegador
web, obt eniendo un result ado que será similar a ést e:

Tenemos una página web que t an solo t iene un párrafo (“ Text o de ejemplo para visualizar result ados” ).
Est e aparece en color negro por defect o y nosot ros, para ver la ut ilidad de CSS deseamos most rar el
t ext o en rojo. En realidad con CSS podemos hacer cosas mucho más complejas, pero ahora sólo
queremos poner un ejemplo para most rar la ut ilidad de CSS.

Una vez hayamos creado un archivo con el est ilo para aplicar a los párrafos (durant e el curso
aprenderemos cómo hacer est o y muchas más cosas) podremos hacer que t odos los párrafos de una
página web se muest ren de una misma manera sin t ener que modificar párrafo a párrafo, sino
únicament e modificando el est ilo CSS que se debe aplicar a los párrafos. Como decíamos, int roduciendo
el código CSS adecuado podremos lograr que cambie el aspect o de nuest ra página web:

¿Hace falt a CSS para realizar est o? Ant iguament e no. Podíamos hacerlo simplement e usando HTM L:

© aprenderaprogramar.com, 2006-2029
Concepto de CSS. Hojas de estilo en cascada.

<font color =" red" ><p> Text o de ejemplo para visualizar result ados</ p></ font >

Sin embargo, con est a escrit ura sólo est ábamos modificando el aspect o de un párrafo, mient ras que
con CSS podemos modificar el aspect o de t odos los párrafos de una página web, repart idos en cient os
de líneas y de archivos, “ aut omát icament e” . Con la evolución de HTM L, algunas formas sint áct icas que
servían para dot ar de aspect o a las páginas web han pasado a considerarse obsolet as o descat alogadas,
dejando que la present ación quede cont rolada de forma independient e a t ravés de CSS.

CSS hace que result e fácil cambiar la present ación ya que si ahora quisiéramos cambiar el color, fuent e,
t amaño, et c, de t odos los párrafos de nuest ra página web, t an solo deberíamos de cambiar las
propiedades en el archivo donde hayamos definido el est ilo para los párrafos, sin alt erar nada en la
página web. Est o es mucho más fácil, rápido y legible que t ener que est ar modificando t odas y cada una
de las et iquet as <p> que aparecieran en nuest ra página web.

Ahora bien, imaginemos que t enemos una página web con 3 et iquet as <p> pero no deseamos que
t odas t engan la misma present ación. CSS t iene previst o cómo poder aplicar dist int os est ilos a ciert os
párrafos o et iquet as. Durant e el curso veremos cómo. Est a imagen sería un ejemplo de uso de dist int os
est ilos para la et iquet a <p> de párrafos.

La forma de definición de est ilos CSS separa la present ación de la información en una página web. Es
muy út il porque t enemos los est ilos por un lado y los cont enidos por ot ro. Si en un moment o dado
queremos cambiar la forma en que se ve la página pero no sus cont enidos, únicament e t endríamos que
modificar los archivos css. Pero t ambién exist en est as ot ras formas de aplicar est ilos, lo veremos a lo
largo del curso.

Quizás los ejemplos que hemos vist o hast a el moment o t e result en muy sencillos y poco at ract ivos. A
cont inuación most ramos imágenes de lo que puede hacerse ut ilizando CSS a nivel avanzado, que como
verás puede ser realment e espect acular.

Fíjat e en las dos imágenes que most ramos a cont inuación y t rat a de ident ificar qué t ienen en común y
qué t ienen dist int o:

© aprenderaprogramar.com, 2006-2029
Concepto de CSS. Hojas de estilo en cascada.

Podemos decir que t ienen en común un mismo t ext o, un mismo menú y posición de menú. En cambio
podemos decir que cambian los colores, t ipos y tamaños de let ra y las imágenes de fondo, t ant o
det alles decorat ivos como las flores o personas, como fondos que crean marcos para el t ext o o los
menús. Con un conocimient o avanzado de CSS podremos lograr efect os similares a est os que est amos
viendo y cambiar el aspect o de una página web con sólo un click de bot ón.

Próxima entrega: CU01004D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
¿Para qué sirve
s CSS? ¿Es un
u lenguaje de programación?
?

PARA QU É SIRVE CSS

CSS es u n lenguaje que sirve para


p dot ar de
d present ación
a y aspe
ect o, de “ esst ilo” , a pág
ginas w eb
nt os HTM L). CSS no es u n lenguaje de
(documen d programa
ación. Podríamos decir q ue es un len
nguaje que
suele apa
arecer relacio óximo a un lenguaje de programaciión o que su
onado o pró uele colaborrar con un
lenguaje de
d programa
ación, pero no
n es un leng
guaje de prog
gramación p ropiament e dicho.

A veces o irás hablar de


d “ Lenguaje
es de program
mación HTM
M L y CSS” . Estt a expresión
n es, desde el punt o de
mal, incorrecct a, ya que ni
vist a form n HTM L ni CSS
C son leng
guajes de pro
ogramación. No obst antt e, a veces
coloquialm
ment e se usa
a el t érmino “ programacción CSS” .

Un lengua
aje de progra
amación es un
u lenguaje que
q se usa para
p realizar procesos de int erés a t ra
avés de un
ordenado
or o disposit ivvo elect rónicco, desde un
n cálculo par a un estudiant e o ingeni ero, a una co
ompra por
int ernet , pasando po
or cualquier cosa que se
s t e ocurra
a. Un lengua
aje de programación t ie
ene como
caract erísst icas básicass el tener la
a capacidad para “ t omarr decisiones”” o ejecut ar un proceso u ot ro en
función d e las circunsst ancias (por ejemplo dep d bot ón qu e pulse el ussuario), así co
pendiendo del omo el ser
capaz de repet ir proccesos repet id
das veces ha
ast a que se cumpla una condición. C
CSS no es un
n lenguaje
mit a cumplir est
que perm e as funcion
nes, por t antt o no es un l enguaje de programació
p ón aunque se
e use junt o
a lenguaje
es de programación.

n lenguaje q ue apareció para hacer más fáciles y con mejo r aspect o lo


CSS es un os desarrollo s w eb. Un
desarrollo
o w eb comprrende múlt ip
ples áreas de
e conocimien
nt o:

Análisis y
diseño
funcional

Aná
álisis y
Program
mación disseño
arqui t ect ural

Desarrollo
web

Di seño
Int egra
ación,
grá
áfico,
Testt ing
M aquuet ación

Sist emas
(servidores,
bases de
dat os)

© aprenderraprogramar.co
om, 2006-2029
¿Para qué sirve CSS? ¿Es un lenguaje de programación?

En la clasificación que hemos hecho, CSS est aría englobado dent ro del área de diseño gráfico y
maquet ación.

Los desarrollos w eb t ienen dimensiones muy variables. Podemos hablar desde una pequeña página
w eb para una empresa local hast a un gran port al para una empresa de ámbit o int ernacional. En ambos
casos podríamos decir que int erviene la programación w eb y el diseño w eb. Sin embargo, un pequeño
desarrollo puede ser llevado a cabo por una sola persona que abarque t ant o programación como
diseño, mient ras que un gran desarrollo requiere de un equipo de t rabajo más o menos amplio y con
dist int os especialist as, ya que en t orno a los desarrollos w eb hay diferent es áreas de conocimient o
implicadas (análisis, diseño, programación, sist emas, int egración, t est ing, et c.).

En un gran desarrollo exist en personas especializadas en las dist int as áreas, de modo que el
programador no suele t rabajar en el diseño (except o para hacer algún ret oque o cambio, o para
solucionar problemas). No obst ant e, sí result a convenient e que un programador w eb t enga los
conocimient os básicos de CSS ya que le result arán út iles y necesarios, por un lado para la solución de
problemas y por ot ro para int egrar cuest iones donde el diseño y la programación se ent remezclan.

Si miramos a los lenguajes o t ecnologías que hay en t orno a los desarrollos w eb podríamos hacer una
clasificación que comprende: HTM L, CSS, Bases de dat os, Servidores, Lenguajes de programación del
lado del client e (p.ej. Javascript ) y Lenguajes de programación del lado del servidor (p.ej. PHP).

HTM L

Lenguajes
del lado
CSS
del
servidor

Tecnologías
web

Lenguajes
Bases de
del lado
datos
del cliente

Servidores

HTM L y CSS son t ecnologías (o met alenguajes, ya que no puede considerárselos lenguajes de
programación) que int ervienen en práct icament e t odo desarrollo, grande o pequeño. Se encargan de
dot ar de una est ruct ura y present ación agradables a aquello que ve el usuario de páginas w eb.

© aprenderaprogramar.com, 2006-2029
¿Para qué sirve CSS? ¿Es un lenguaje de programación?

Los lenguajes de programación del lado del servidor realizan procesos en el servidor (comput ador
remot o que se encarga de enviar las páginas w eb a t ravés de int ernet ): podemos cit ar ent re est os
lenguajes Java (JSP), ASP.NET, PHP, o Perl, ent re los principales.

Los lenguajes de programación del lado del client e realizan procesos en el ordenador personal del
usuario (efect os visuales, cálculos, et c.): podemos cit ar ent re est os lenguajes Javascript , Java (applet s),
o VBScript , ent re los principales.

En cuant o a bases de dat os podemos nombrar M ySQL, SQLServer y Oracle, ent re las principales.

Las t ecnologías se combinan ent re ellas de muy diversas maneras. Podemos cit ar algunas
combinaciones bast ant e habit uales ent re lenguajes de programación y bases de dat os: Java + Oracle,
ASP.NET + SQLServer, PHP + M ySQL. Sea cual sea la combinación ut ilizada, en un desarrollo w eb
moderno siempre int ervendrá HTM L y CSS.

En resumen, CSS es un lenguaje para dot ar de present ación y est ilo a páginas w eb cuyos aspect os
básicos deben ser conocidos t ant o por programadores w eb como por diseñadores w eb o maquet adores
w eb. En la práct ica, muchas veces se ent remezcla el código de programación con el código HTM L y
código CSS, de ahí que coloquialment e se hable de “ programación w eb” para referirse a t odo est e
conjunt o, aunque formalment e ni HTM L ni CSS son lenguajes de programación.

Fíjat e que est amos t rat ando de dejar claro qué es y para qué sirve CSS ant es de empezar a est udiar est e
lenguaje porque si t enemos los concept os claros nos será mucho más sencillo el aprendizaje,
ahorraremos t iempo y comet eremos menos errores.

Próxima entrega: CU01005D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Efectos CSS. La frontera en
ntre CSS, HTM L y programació
ón

EFECTOS CSS. UBICAR


R LA FRONTE
ERA

En el ant erior
e epígraf e del curso hemos
h indica
ado que CSS
S no es un lenguaje de p rogramación
n pero que
en ciert o sent ido se ent
e remezcla con ést os. A veces nos encont
e mos que se p uede lograr un mismo
rarem
ando HTM L, usando CSS
efect o usa S ó usando u n lenguaje de
d programación. ¿Por q ué t ant as fo
ormas para
hacer una a? ¿Dónde esst á la front era ent re cad a lenguaje?
a misma cosa

Est a pregunt a no es de uest a. Vamo s a ver con un


d fácil respu u ejemplo lo
l que puede
e ocurrir parra algo t an
sencillo co
omo aplicar algunos efecct os a un t exxt o. No obstt ant e, t en en
n cuent a que
e est e ejemp
plo relat ivo
a t ext o po
odría aplicarsse a ot ros co
oncept os com
mo bordes, márgenes,
m an
nimaciones, e
et c.

El lenguaje HTM L pe
ermit e aplica
ar algunos efect
e os visu ales al t ext o. Escribe o copia est e código y
guárdalo en un archivvo de nombre
e ejemplo1.h
ht ml.

<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD


D HTM L 4.01 Transit ional/ / EN"
E " ht t p:/ / www w.w3.org/ TR/ h ht ml4/ loose.dt d"
d >
<ht ml>
<head>
<t itt le>Ejemplo HTTM L aprenderap programar.com m</ t it le>
<m et a name=" t ipo o_cont enido" cont
c ent =" t ext / ht ml;" ht t p-equ
uiv=" cont ent -t yype" charset =" ut
u f-8" >
</ head>
<body>
<p> >Negrit a: <st ronng>Quiero apreender a program mar</ st rong><// p>
<p> >It álica: <i>Quiiero aprender a programar</ i> ></ p>
<p> >Tachado: <st rike>Quiero
r aprrender a progra amar</ st rike><// p>
<p> >Color fuent e: <font color =" green"
g >Quiero aprender a pro ogramar</ font > ></ p>
</ body>
</ ht ml>
>

Con Javasscript podem


mos hacer alg
go parecido . Escribe o copia
c est e có
ódigo y guárrdalo en un archivo
a de
nombre ejemplo2.ht
e m
ml:

<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD


D HTM L 4.01 Transit ional/ / EN" E " ht t p:/ / www w.w3.org/ TR/ h ht ml4/ loose.dt d"
d >
<ht ml>
<head>
<t itt le>Ejemplo Javvascript aprend eraprogramar.com</ t it le>
<m et a name=" t ipo o_cont enido" cont
c ent =" t ext / ht ml;" ht t p-equ
uiv=" cont ent -t yype" charset =" ut
u f-8" >
</ head>
<body>
<sccript >
varr t xt = " Quiero aprender
a a proggramar" ;
doccument .w rit e(" <p>Negrit a: " + t xt .bold() + " </ p>" );
doccument .w rit e(" <p>It álica: " + t xt .it alics() + " <// p>" );
doccument .w rit e(" <p>Tachado: " + t xt .st rike() + " </ p>" );
doccument .w rit e(" <p>Color fuentt e: " + t xt .font color(" green" ) + " </ p>" );
</ script >
</ body>
</ ht ml>
>

© aprenderraprogramar.co
om, 2006-2029
Efectos CSS. La frontera entre CSS, HTM L y programación

Y por últ imo en vez de aplicar Javascript o simple HTM L, podemos usar CSS. Escribe o copia est e código
y guárdalo en un archivo de nombre ejemplo3.ht ml:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w.w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Ejemplo CSS aprenderaprogramar.com</ t it le>
<met a name=" t ipo_cont enido" cont ent =" t ext / ht ml;" ht t p-equiv=" cont ent -t ype" charset =" ut f-8" >
<st yle t ype=" t ext / css" >
#negrit a{font -w eight :bold;}
#it alica{font -st yle:it alic;}
#t achado{t ext -decorat ion: line-t hrough;}
#verde{color:green;}
</ st yle>
</ head>
<body>
<p>Negrit a: <span id=" negrit a" >Quiero aprender a programar</ span></ p>
<p>It alica: <span id=" it alica" >Quiero aprender a programar</ span></ p>
<p>Tachado: <span id=" t achado" >Quiero aprender a programar</ span></ p>
<p>Color fuent e: <span id=" verde" >Quiero aprender a programar</ span></ p>
</ body>
</ ht ml>

Haz doble click sobre cada uno de los archivos para visualizar el result ado en un navegador. El result ado
que obt enemos es algo similar a est o:

El único código que debemos ent ender por el moment o es el correspondient e al ejemplo 1, ya que es
código HTM L que ya debemos conocer. El código del ejemplo 2 y ejemplo 3 no t e preocupes si no lo
ent iendes ya que el objet ivo ahora no es comprender ese código, sino simplement e ver cómo podemos
alcanzar un mismo objet ivo usando dist int os lenguajes como HTM L, Javascript ó CSS.

Además si nos fijamos, el código Javascript y el código CSS est á dent ro de un document o HTM L (aunque
podrían est ar en archivos separados).

Todo est o nos puede llevar a pregunt arnos: ¿Por qué se ent remezclan unos lenguajes con ot ros? La
respuest a sería hist órica y t écnica: HTM L se convirt ió en la forma de crear páginas w eb, pero t enía

© aprenderaprogramar.com, 2006-2029
Efectos CSS. La frontera entre CSS, HTM L y programación

muchas limit aciones. En un moment o dado, se consideró que ent remezclar (embeber) lenguajes ent re
sí podía ser una buena opción t écnica para resolver problemas o hacer cosas que no era posible o
convenient e hacer con HTM L. Así, podemos embeber Javascript en HTM L ó embeber CSS en HTM L, o
embeber HTM L en PHP, et c. Por ello a veces ocurre que no hay una front era clara ent re lenguajes de
programación, HTM L y CSS. Est o, que puede result ar un t ant o confuso inicialment e, se va convirt iendo
en “ comprensible” a medida que se t rabaja y se aprende más sobre est os lenguajes.

Por ot ro lado, ¿por qué t ant as vías dist int as para hacer algo cuando quizás que solo hubiera una
manera de poner el t ext o en negrit a, o una sola manera de poner un color de fuent e, sería más simple?

Para est o podemos cit ar varios mot ivos:

a) M otivos históricos: a veces las cosas se empezaron a hacer de una manera y luego se pensó
que era mejor hacerlas de ot ra. Sin embargo, para evit ar que las páginas w eb exist ent es
dejaran de funcionar, se siguieron permit iendo formas de hacer las cosas “ ant icuadas” . Por
ejemplo la et iquet a <st rike> … </ st rike> en HTM L se considera deprecat ed (obsolet a, de uso no
recomendado) en HTM L 4.01 y no est á admit ida en HTM L 5. Sin embargo, se sigue usando.
M uchas formas de hacer las cosas se admit en aunque no est én recomendadas.

b) M otivos de independencia de tecnologías: HTM L es una cosa y Javascript es ot ra, aunque en la


práct ica nos encont remos con que Javascript se puede “ ent remezclar” (embeber) en HTM L.
Podríamos hacer cosas en Javascript y no querer usar ot ro lenguaje, es decir, podríamos t rat ar
de hacer cosas independient es sin “ ent remezclar” t ecnologías. Por ello lenguajes como
Javascript ó PHP incorporan posibilidades para hacer cosas que ya se pueden hacer de ot ra
manera. De est a forma t ienen la pot encialidad de ser más independient es.

c) M otivos de políticas de desarrollo y estándares: quizás no t e lo hayas pregunt ado nunca, pero
conviene t ener al menos una orient ación al respect o: ¿Quién define qué es un lenguaje como
HTM L, CSS, PHP, cómo se debe escribir, qué result ado debe generar cada et iquet a o
inst rucción, et c.? En general det rás de los lenguajes, aunque algunos fueron creados por
personas individuales, hay empresas, comunidades de desarrollo, asociaciones, consorcios
int ernacionales, comit és, et c. En ocasiones un grupo de personas no est á de acuerdo con la
forma en que se est á creando una especificación del lenguaje y forman grupos de t rabajo
alt ernat ivos que definen est ándares alt ernat ivos. A veces t riunfa un est ándar y el ot ro se
desecha, pero ot ras veces conviven dist int os est ándares que permit en hacer las cosas de
dist int as maneras. Para los creadores de páginas w eb est o result a negat ivo, pero ¡así es la vida!

d) Otros motivos: podríamos abundar en el por qué de que las cosas sean como son, pero con
t ener una idea general nos bast a.

Acost úmbrat e a pensar que los desarrollos w eb no son mat emát icas. Las cosas se pueden hacer de
muchas maneras, y de hecho muchas veces se hacen “ de mala manera” por desconocimient o, por
prisas, o por ser más fácil.

Acost úmbrat e a pensar que los desarrollos w eb usan dist int os lenguajes que muchas veces se
ent remezclan ent re sí hast a el punt o de ser difícil dist inguir en qué corresponde a un lenguaje y qué

© aprenderaprogramar.com, 2006-2029
Efectos CSS. La frontera entre CSS, HTM L y programación

corresponde a ot ro. Hay lenguajes comunes en los desarrollos w eb como HTM L, pero por ejemplo en
cuant o a lenguajes de programación no t odos los programadores usan el mismo.

Acost úmbrat e a encont rart e con que a veces las cosas no funcionan como una esperaría que lo
hicieran, no debido a que se haya escrit o mal el código o usado mal una inst rucción, sino debido a que
en el mundo de int ernet exist en dist int os est ándares y dist int as versiones. A veces aunque nos
esforcemos porque t odo se vea como nosot ros esperamos en t odos los navegadores o disposit ivos, es
difícil conseguirlo. Es un poco caót ico, pero es así.

En est e curso más que aprendernos t odas las inst rucciones, est ándares, et c. vamos a t rat ar de ser
capaces de razonar el por qué de las cosas, y a t rat ar de esforzarnos por saber cómo generar código
limpio, bien est ruct urado y de calidad.

Próxima entrega: CU01006D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
CSS en gest ores de conten
nido como Joom
mla, W ordPress
s, Drupal…

CSS EN AP
PLICACIONES
S W EB

Ya hemoss dicho que CSS nos perrmit e separa


ar el cont en ido de una página w eb de su prese
ent ación o
aspect o. Una de las aplicacioness más ampliiament e extt endida de CSS
C est á en dot ar de un
u aspect o
at ract ivo a las aplicaciiones w eb, dent
d ro de lass que dest aca
an los Gest o res de Cont e
enidos o CM S (Cont ent
M anagem
ment Syst em
ms). Un CM S es soft w are
a que se inst ala en el
e servidor y sirve para
a publicar
cont enido
os en una página w eb fáccilment e.

pt o de aplicación w eb (programa que


El concep q se aloja
a en un servvidor remott o o host ing
g y al que
accedemo
os a t ravés de
d int ernet ) es muy am
mplio, de hec
cho con el paso
p de los años se ha hecho t an
amplio co
omo los prog
gramas de orrdenador o las
l act ividad es que realizza el ser hum
mano. Las ap
plicaciones
w eb se han
h populariizado en loss últ imos añ
ños gracias a que buen
na part e de est as aplica
aciones se
comenzarron a dist rib uir y ut ilizar de forma grat uit a, con una comuni dad de usua
arios y desarrrolladores
a en t orno a ellas.
de soft w are

M uchas de ue personas que no t ien


d est as apliicaciones sirrven para qu nen conocim
mient os de in
nformát ica
gest ionen
n páginas w eb
e como t ien das de come
ercio elect ró nico, foros, port ales de ccont enidos, periódicos
digit ales, et c.

Las aplicaciones w eb se
s podrían clasificar de varias
v manerras. De hecho ealizar una cl asificación
o es difícil re
debido a que los cam pos en que se
s ut ilizan las dist int as aplicaciones muchas
m vece
es se solapan
n. Vamos a
hacer una
a clasificació
ón común, que
q es basá
ándonos en el t ipo de página
p w eb para el que
e son más
habit ualm
ment e usadoss:

CLASIFICA
ACIÓN EJEM PLOS DESC
CRIPCIÓN

mla, Drupal, OpenCM S, Plone, WordPrress,


Joom
b2evvolut ion, Gee
eklog, Serendi pit y, Text pat t ern,
Orientt ados a crearr port ales w eb
e de muy
CM S M ade S
Simple, conccret e5, Con
nt ao,
Gestores de
d diferen
nt es t emát ica
as, desde un
n periódico
Imp ressPages, l
liveSit e, Nuccleus, PyroC
CM S,
Contenido
os digit al hast a una t i enda on-line o un blog,
TYPO hpM yFAQ, e107,
O3, Chamilo,, M oodle, ph
página
a personal, et cc.
M ah
hara, M ambo
o, ocPort al, PHP-Fusion,
P PHP-
P
Nukke, Tiki Wiki, Xoops,
X Zikula

dos para la ccreación de sist


Pensad s emas de
Foros y libros de php BB, SM F, flu
uxBB, M yBB, Vanilla Foru
ums, foros donde loss usuarios part icipan
visitas XM B Forums, GBo
ook, Lazarus Guest
G Book, int erca mensajes o para libros de
ambiándose m
visit as

© aprenderraprogramar.co
om, 2006-2029
CSS en gestores de contenido como Joomla, W ordPress, Drupal…

CLASIFICACIÓN EJEM PLOS DESCRIPCIÓN

Pensados para mant ener un sist ema de


información ent re una comunidad de
M ediaWiki, DocuWiki, PmWiki, WikkaWiki,
W ikis usuarios. Est e sist ema puede ser generalist a
TikiWiki, PikiWiki
como w ikipedia o est ar especializado en un
área o campo de conocimient o concret o.

Tiendas y Pensadas para crear t iendas elect rónicas y


M agent o, Prest aShop, CubeCart , OpenCart ,
comercio galerías de product os dest inadas al
osCommerce, Tomat oCart , Zen Cart ,
electrónico comercio elect rónico.

Ext Calendar, phpScheduleit , WebCalendar, Permit en crear calendarios, galerías de


phpFreeChat , phpM yChat , DadaM ail, PHPList , imágenes, Chat s, Sist emas de envío de
Utilidades varias
Sit eRecommender, OpenX, OSClass, QuickSell correo elect rónico, sist emas de anuncios,
Classifieds, Help Cent er Live, Hesk, osTicket sist emas de soport e a usuarios

M ILLONES DE DESCARGAS, M ILLONES DE W EBS DISTINTAS

Vamos a cent rarnos ahora en lo que permit e most rar una aplicación w eb a los usuarios. Por ejemplo,
para un diario digit al diremos que exist e una part e denominada BackEnd donde escriben los art iculist as
y ot ra part e denominada Front End que es la página w eb en sí del diario. Aplicaciones w eb que pueden
servir para est e propósit o son Joomla, Drupal o WordPress. Si cient os de diarios digit ales ut ilizan
Drupal, por ejemplo, ¿Cómo consiguen t ener un aspect o diferent e unos de ot ros si el punt o de part ida
es siempre el mismo?

La respuest a est á en que est as herramient as incorporan código CSS avanzado mediant e el que se crean
aspect os dist int os. La aplicación w eb suele cont ar con una part e para la gest ión de cont enidos mient ras
que ot ra part e denominada plant illa, t emplat e, t heme, skin, et c. se encarga de cont rolar el aspect o.

El t emplat e o t heme act úa como una piel sobre los cont enidos. Fíjat e cómo aplicando un filt ro una
fot ografía puede cambiar:

© aprenderaprogramar.com, 2006-2029
CSS en gestores de contenido como Joomla, W ordPress, Drupal…

Con CSS avanzado la idea es similar: aplicamos dist int os t ipos de fuent es, t amaños de fuent es,
imágenes de fondo, colores, et c. para conseguir dist int os aspect os. Fíjat e en est as imágenes, que
corresponden a t hemes o plant illas del gest or de cont enidos Drupal.

Aquí vemos cómo usando CSS se pueden conseguir muy dist int os aspect os. Est o ha permit ido el éxit o
de gest ores de cont enidos como Joomla, Drupal o WordPress, con los que se puede crear desde una
página dedicada al comercio elect rónico hast a una w eb de un rest aurant e o un periódico digit al.
Gracias a los t emplat es o t hemes t ambién se puede cambiar el aspect o de páginas w eb cada ciert o
t iempo.

Si t e fijas en las imágenes ant eriores se puede argument ar que realment e no t ienen el mismo cont enido
debajo. Efect ivament e, en est e caso no t ienen el mismo cont enido. Pero t en en cuent a que quizás el
aspect o de una peluquería deba ser un poco diferent e al aspect o de un rest aurant e.

En las siguient es imágenes t e most ramos un mismo cont enido con un cambio de t heme:

© aprenderaprogramar.com, 2006-2029
CSS en gestores de contenido como Joomla, W ordPress, Drupal…

© aprenderaprogramar.com, 2006-2029
CSS en gestores de contenido como Joomla, W ordPress, Drupal…

En est e caso el cont enido sí es el mismo (excluyendo el espacio publicit ario). Fíjat e en los cambios:
cambia la imagen de fondo que aparece en la cabecera de la w eb. Cambia el color de los element os
(let ras, fondos), cambia la forma en que aparece el menú, cambia el espaciado ent re líneas, et c. Pero la
información que hay debajo es la misma.

Todo est o es posible gracias a CSS, la t écnica y lenguaje que permit e separar cont enidos y present ación.

Realment e las páginas w eb t ienen una gran variedad de aspect os no solo gracias a dist int os colores e
imágenes, sino t ambién gracias a que las t écnicas CSS permit en crear muy dist int os aspect os.

Exist en muchos est udios de diseño y programación donde se t rabaja en la creación de t emplat es o
t hemes prediseñados. Hay muchos de dist ribución grat uit a, pero la mayoría de los t emplat es o t hemes
de calidad son de pago (cosa lógica, ya que t ienen un gran t rabajo det rás).

Hemos querido con est a aproximación al uso de CSS en aplicaciones w eb remarcar la import ancia que
ha adquirido est a t écnica en los desarrollos w eb. No vamos a ent rar de moment o en cuest iones
relacionadas con t emplat es o t hemes, sino a cent rarnos en cuest iones básicas de CSS. La realidad en
t orno a los t emplat es o t hemes de aplicaciones w eb es bast ant e compleja, ya que act ualment e se
t iende no sólo a permit ir cambiar el aspect o de un mismo cont enido, sino a permit ir complet ament e la
personalización de la present ación de páginas w eb (por ejemplo permit ir usar dos módulos lat erales y
una columna cent ral, o por el cont rario dos columnas cent rales sin módulos lat erales, et c.). Est o ya
supone el uso de programación al mismo t iempo que CSS, y t ambién suele suponer la part icipación de
dist int os especialist as (diseñadores, maquet adores, expert os en CSS, programadores, et c.) para la
creación de los t emplat es o t hemes profesionales de las aplicaciones w eb.

Lo primero es lo primero, así que em pecemos con los fundament os de CSS.

Próxima entrega: CU01007D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Empezar a usar
u CSS a parttir de un docum
mento HTM L bá
ásico

UN DOCU
UM ENTO HTM
M L BÁSICO

Para ver cómo


c CSS no
os sirve para dot ar de aspect o a un document
d o HTM
H L vamoss a part ir de un código
e represent a la est ruct u ra básica de una página web. En estt a est ruct ura
HTM L que a la página web
w queda
dividida en:
e cabecera con el t ít ulo
o y mensaje breve, men
nú, t ext o con
n algunas im ágenes, form
mulario de
cont act o y un pie de página
p con in
nformación sobre
s los autt ores o el cop
pyryght .

Crea un d ocument o HTM


H L con un edit or de t ext
e o como No
ot epad++ co
on el siguientt e cont enido
o:

<!DOCTYPE HTM L PUBLIC


C " -/ / W3C/ / DTD
D HTM L 4.01 Trransit ional/ / EN" " ht t p:/ / ww w .w3.org/ TR/ ht m
ml4/ loose.dt d" >
<!—Código
o base para el curso
c -->
<ht ml>

<head>
<t it le>Portt al web - apren
nderaprogramar.com</ t it le>
<met a cha
arset ="ut f-8" >
<met a nam
me=" descript io n" cont ent =" Po
ort al web apren
nderaprograma
ar.com" >
<met a nam
me=" keywords"" cont ent =" apre
ender, program
mar, cursos, librros" >
</ head>

<!-- Cont enido de la pági na web -->


<body>

<!-- Cabeccera de la págin a web -->


<div>
<h1>Port al
a web aprenderaprogramar.co
om</ h1>
<h2>Didácct ica y divulgación de la progra
amación</ h2>
</ div>
<!-- Fin de la cabecera de
e la página web -->

<br / >

<!-- Cont enedor para la part


p e cent ral -->
>
<div>

<!-- menu -->


<div>
<div>M en ú</ div>
<hr/ >
<ul>
<li><a hreff=" #" >Inicio</ a></
a li>
<li> <a hre
ef=" libros.ht ml"" >Libros de pro gramación</ a>
> </ li>
<li> <a hre
ef=" cursos.ht mll" >Cursos de prrogramación</ a>
a </ li>
<li> <a hre
ef=" humor.ht m l" >Humor inforrmát ico</ a> </ li>
</ ul>
</ div>
<!-- fin me
enu -->

© aprenderraprogramar.co
om, 2006-2029
Empezar a usar CSS a partir de un documento HTM L básico

<!-- cuerpo -->


<div>

<!-- Text o con imágenes -->


<div>
<p>Aprender a programar es un objet ivo que se plant ea mucha gent e y que no t odos alcanzan.</ p>
<p>Hay que t ener claro que <a href=" ht t p:/ / www.aprenderaprogramar.com" >aprender programación</ a> no es t area de un
día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel
profesional, varios años. No queremos con est o desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo
nuest ros primeros programas.</ p>
<p>Puedes seguir uno de <a
href=" ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=art icle& id=57& It emid=86" >nuest ros
cursos</ a> ent re los varios disponibles. Cuando haya que ut ilizar un edit or de t ext os recomendamos el uso de uno pot ent e y
sencillo como Not epad++, aunque son válidas ot ras alt ernat ivas como Crimson Edit or.</ p>
<a
href=" ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=art icle& id=205& cat id=57:herramient as-
informat icas& It emid=179" >
<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" alt =" Not epad++" t it le=" Not epad++, un út il edit or de t ext o" >
</ a>
<img src=" ht t p:/ / www.crimsonedit or.com/ images/ logo.jpg" alt =" Crimson" t it le=" Crimson, un edit or de t ext o alt ernat ivo" >

</ div>
<!-- Fin del t ext o con imágenes -->
<br/ >
<!-- Formulario de cont act o -->
<form met hod="get " act ion=" accion.ht ml" >
Si quieres cont act ar con nosot ros envíanos est e formulario relleno: <br / ><br / >
Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
Apellidos: <input t ype=" t ext " name=" apellidos" / ><br / >
Dirección: <input t ype=" t ext " name=" direccion" / ><br / >
Correo elect rónico: <input t ype=" t ext " name=" correo" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 rows=2></ t ext area><br / ><br / >
<input t ype=" submit " value=" Enviar" >
<input t ype=" reset " value=" Cancelar" >
</ form>
<!-- Fin del formulario de cont act o -->

</ div>
<!-- fin cuerpo -->
</ div>
<!-- fin cont enedor para la part e cent ral -->
<br / > <br / > <br / >
<!-- Pie de página o foot er -->
<div>
<img src=" ht t p:/ / lh5.ggpht .com/ _PeVwghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png" alt =" logo
apr" t it le=" Logo aprenderaprogramar.com" >
Copyright 2006-2038 aprenderaprogramar.com
</ div>
<!-- Fin del pie de página o foot er -->

</ body>
<!-- Fin del cont enido de la página web -->

</ ht ml>

© aprenderaprogramar.com, 2006-2029
Empezar a usar CSS a partir de un documento HTM L básico

El código ant erior es HTM L y lo usaremos a lo largo del curso para poner diferent es ejemplos, por lo
que lo denominaremos " código base del curso" . Para seguir est e curso debes ser capaz de comprender
t odo el código HTM L que hemos usado, su significado y sint axis. Si no comprendes el código ant erior no
cont inues avanzando, diríget e a la web aprenderaprogramar.com y en la sección cursos busca el “ Curso
básico del programador web: HTM L desde cero” y realízalo. Si no lo haces así no ent enderás o no le
sacarás t odo el part ido posible a est e curso.

Visualiza el document o HTM L en un navegador. Debes obt ener un result ado similar a est e (si t e falla
alguna imagen puedes cambiar las rut as y poner ot ra imagen que t ú desees):

© aprenderaprogramar.com, 2006-2029
Empezar a usar CSS a partir de un documento HTM L básico

En est e document o t enemos varios element os como et iquet as de t ít ulo h1 y h2, links, list as con
element os dent ro de las list as, imágenes, formularios, bot ones, t ext o, et c. Todo ello nos va a servir para
usar CSS y ver las posibilidades que nos ofrece CSS para dar format o a nuest ras páginas web. En est e
curso nos vamos a cent rar en t rat ar de aprender los aspect os más import ant es de CSS y la lógica de CSS.
El objet ivo será saber hacer un buen diseño de CSS, un buen uso de CSS y comprender lo que hacemos.
Por el cont rario, no vamos a t rat ar de aprender o conocer t odas las propiedades, posibilidades o
inst rucciones de CSS ya que si logramos comprender cómo funciona y su lógica, nos bast ará con realizar
búsquedas en int ernet para encont rar aquella propiedad o sint axis que podamos necesit ar en un
moment o dado. “ Aprende a pescar, no t e conformes con que t e den peces” .

Próxima entrega: CU01008D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
De la estruc
ctura HTM L al modelo
m de caja
as CSS. Block e inline.

ORGANIZ
ZACIÓN CON CEPTUAL HT
TM L

En la ant erior
e ent rega
a del curso vimos
v el cód
digo HTM L co
orrespondien
nt e a una pá
ágina w eb se
encilla que
const aba de cabecera
a con el t ít ul o y mensaje
e breve, men
nú, t ext o con
n algunas im
mágenes, form
mulario de
cont act o y un pie de página
p con in
nformación sobre
s los autt ores o el co pyryght . HTM
M L podemos
s decir que
define un
na organizacción concep
pt ual: cada element o est ement o o, en últ ima
e á dent ro de ot ro ele
inst ancia, dent ro de la
a página w eb
b o documen
nt o HTM L.

La organi zación conccept ual que define HTM


M L para nuest ro ejemplo
o podríamoss verla t al y como se
refleja en el esquema 1.

e la organiza
Dent ro de ación que de
efine HTM L podemos
p señ
ñalar algunass cosas que result an sign
nificat ivas.
plo, en dist i nt as part es del document o HTM L encont ramos t ext o. No o
Por ejemp obst ant e, las
s et iquet as
dent ro de
e las que se encuent ra el
e t ext o inforrman en algunos casos del
d significad
do de dicho t ext o. Por
ejemplo el
e t ext o dentt ro de et iqu et as <h1> … </ h1> sabe orresponde a un t ít ulo p rinicpal. El
emos que co
t ext o den
nt ro de et iqu
uet as <li> … </ li> sabem u element o de una list a. El t ext o
mos que corrresponde a un
e element os <p> … </ p> sabemos qu e correspon de a un párrrafo. Hay oca
dent ro de asiones en qu
ue el t ext o
no aparecce dent ro de
e et iquet as con
c un signiificado explíc
cit o. Por eje
emplo un t exxt o dent ro de
d <div> …
</ div> es simplementt e el t ext o d ent ro de un cont enedorr o espacio dist
d int o de ott ros espacio
os, pero no
t enemos más informa
ación acerca de su comett ido.

Por ot ra part
p e en algunas part es aparece t exxt o suelt o sin
n est ar delim
mit ado por e
et iquet as, po
or ejemplo
dent ro de
el formulario
o aparece t ext
e o, sin est ar
a incluido dent
d ro de ett iquet as esp ecíficas. Sab
bemos que
dicho t extt o forma parrt e del formu
ulario, pero nada
n más.

Ot ra cuesst ión que no


os puede lla nción es qu e si bien la mayoría de
amar la at en e las et iquett as t ienen
element o de apert ura
a y cierre (po
or ejemplo <h1>
< … </ h1>), algunas et
e iquet as se abren y cierrran en un
mismo el ement o, com
mo <br/ >, mient
m ras que
e ot ras se in
ncluyen aparrent ement e como si solo
o t uvieran
apert ura, como es el caso
c de <img
g …>. Todas est
e as part icu
ularidades de
e HTM L debe
emos conoce
erlas.

M ODELO DE CAJAS

Ya hemoss vist o cómo concept ualm


ment e HTM L define una organización os los element os est án
n donde t odo
dent ro de
e un eleme
ent o mat riz (el elementt o body) y a su vez ca
ada elementt o puede t ener
e ot ros
element os
o dent ro de él y así sucessivament e.

d HTM L, l os navegad ores t ienen que realiza


A part ir del ar la int erprret ación del código y most
m rar en
pant alla una
u página w eb. Ahora
a bien, a part ir de un document
d o HTM L habríía dist int as formas
f de
present arr la informa
ación en pan
nt alla. Por ejemplo,
e po drían most rarse
r los succesivos elem
ment os de
izquierda a derecha,, o bien de ajo, o bien de derech a a izquier da… ¿Qué hacen los
e arriba aba
ores? Los na
navegado avegadores act
a úan segú das por t od os (o casi
ún unas regllas predefin idas acept ad
t odos) según la cual cada elemen e considera que est á delimit ado porr un rect áng
nt o HTM L se gulo o caja
invisible. De ahí que se hable de “ modelo de cajas”
c para la
a w eb.

© aprenderraprogramar.co
om, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.

Esquema 1. Organización concept ual basada en HTM L

© aprenderaprogramar.com, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.

Cada caja puede ser o bien t ipo <<block>> que podríamos considerar como “ bloque a lo ancho” o bien
t ipo <<inline>> que podríamos considerar como “ element o dent ro de una línea” . Cada caja se coloca
dent ro de la pant alla de la siguient e manera:

- Una caja debajo de ot ra, si son element os block del document o HTM L del mismo rango o nivel
en la jerarquía. M uchas de las et iquet as HTM L se t rat an por defect o como element os block. Por
ejemplo los element os <div> … </ div> son element os block. Igualment e son element os block
los formularios <form> … </ form> o las list as <ul> … </ ul>.

En el siguient e esquema reflejamos algunos element os block dent ro de nuest ro ejemplo.

© aprenderaprogramar.com, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.

Si t e fijas, las cajas que hemos represent ado son las divisiones principales dent ro de “ la caja que lo
engloba t odo” que es la definida por <body> … </ body>.

- Una caja al lado de ot ra, de izquierda a derecha de acuerdo con el orden con que aparezcan en
el document o HTM L, si son element os inline del document o HTM L del mismo rango o nivel en
la jerarquía. Los element os se mant ienen uno al lado de ot ro (except o en el caso de que ya no
haya espacio para ubicarlos, en cuyo caso pasan a la siguient e línea). Algunas de las et iquet as
HTM L se t rat an por defect o como element os inline. Por ejemplo los element os <img> son
element os inline. Gráficament e en nuest ro ejemplo est o se visualiza porque dist int os
element os <img> se colocan uno al lado de ot ro y no uno debajo de ot ro como harían
element os block, como vemos a cont inuación.

- Una caja dent ro de ot ra, siendo la caja int erior la de menor rango o jerarquía. Puede haber
varias cajas dent ro de cada caja, según se defina en el document o HTM L. Por ejemplo dent ro de
la caja div que define la cabecera de nuest ra w eb de ejemplo hay dos cajas, una
correspondient e al t ít ulo principal <h1>… </ h1> y ot ra correspondient e al t ít ulo segundo <h2>
… </ h2>.

El siguient e esquema reflejaría el modelo de cajas del document o HTM L de forma similar a como lo
const ruye un navegador w eb como pueda ser Int ernet Explorer, Google Chrome o M ozilla Firefox,
Safari, et c.

© aprenderaprogramar.com, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.

Esquema 2. M odelo de cajas CSS

© aprenderaprogramar.com, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.

En est e esquema comprobamos que una página w eb puede t ener gran complejidad en su organización
est ruct ural y en su represent ación con modelo de cajas.

Hemos represent ado las cajas en general delimit adas con una línea cont ínua (que en el navegador se
vuelve invisible) except o aquellos element os de t ext o que no est án delimit ados por et iquet as
específicas, que const it uyen casos especiales que represent amos con línea discont ínua.

Como veremos a lo largo del curso, CSS nos servirá para aplicar est ilos (bordes, fondos, t ipos de let ra,
int erlineado, et c.) a t odas las cajas de un mismo t ipo si lo deseamos, o t ambién a cajas concret as para
las que deseemos t ener un t rat amient o especial.

EJERCICIO

Analiza el siguient e código HTM L y crea dos esquemas. Un esquema de organización ut ilizando llaves
como hemos vist o ant eriorment e, y ot ro esquema que refleje las cajas que int ervienen en el
document o HTM L, siguiendo el ejemplo vist o ant eriorment e.

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<p><a href=" principal.ht ml" t it le=" Página principal" >Ir a la pagina principal</ a></ p>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ body>
</ ht ml>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01009D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Formas de aplicar
a estilos CSS:
C por defectto, en línea, sob
breescritura.

ESTILOS POR
P DEFECTO
O

Podemos dar format o a nuest ros document oss HTM L de va


arias manera
as: incluyend
do propiedad
des CSS en
as líneas de HTM L (apli cación de est ilos en lín ea), en la part
las propia p e inicial del document o HTM L
(aplicació n de est iloss int erna) o en un arch
hivo de ext ensión
e .css independien
nt e del arch
hivo HTM L
(aplicació n de est ilos ext
e erna).

Ant es de escribir nu
uest ro prime
er código CS
SS remarqu emos una cuest
c ión imp
port ant e: al crear un
documentt o HTM L est e ya posee un
u est ilo. ¿Cu
uál? El est ilo por defect o que aplican
n los navegad
dores. Est e
est ilo porr defect o sue
ele compren der un t ipo de
d let ra, colo
or negro parra el t ext o y color blanco
o de fondo
para el t ext
e o. El est ilo
o por defect o para los en
nlaces (links) suele ser co
olor azul y su
ubrayado, au
unque est o
puede va
ariar según el
e navegado
or que ut iliccemos. Es im
mport ant e t ener
e est o e
en cuent a po
orque nos
podemos encont rar que ciert os element os se visualice
en de dist in
nt a manera en dos navegadores
diferent ess (por ejem plo Int ernett Explorer y M ozilla Fire
efox) debido
o a que un n
navegador aplique
a un
diferent e est ilo por de
efect o.

a el formularrio en el ejem
Considera mplo que ven
nimos usand
do para el de
esarrollo del curso (códig
go base del
curso). Fíjíjat e en la siguient e ima
agen cómo se visualiza el mismo código
c HTM L en dos navegadores
dist int os sin
s haber ap licado est iloss:

Podemos señalar algu


unas diferenccias:

a) En dor 2 el bot ón “ Enviar” aparece rem


n el navegad marcado con azul y es un poco más
n un borde a
p equeño que en el navega
ador 1.
n el navegad
b) En dor 2 la visua
alización dell t ext area co
orrespondien aje incluye u n scroll en
nt e al mensa
el lat eral dere
echo, que no
o exist e en el navegador 1.
1
c) O ras: por eje
Ot emplo la alt ura
u de la caja
a del t ext area queña en el navegador 2 que en el
a es más peq
n avegador 1.

© aprenderraprogramar.co
om, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.

Aquí nos encont ramos con algo a lo que debemos acost umbrarnos como desarrolladores w eb. En
general, no es posible (o quizás sí sea posible, pero llevaría demasiado t iempo y sería demasiado
cost oso) conseguir “ exact ament e” la misma visualización en dist int os navegadores w eb.

M uchas personas pasan horas t rat ando de “ cuadrar” con exact it ud los element os de una página w eb y
muchas veces est e t rabajo, o part e de est e t rabajo, carece de sent ido, ya que al cambiar de navegador
(o de sist ema operat ivo con el mismo navegador) t odo lo que se había cuadrado puede aparecer
descuadrado, o al menos no exact ament e como se pensaba, dando lugar a grandes decepciones.

Nuest ra recomendación es no obsesionarse con pequeños det alles y, cuando se t rat e de desarrollos
import ant es, probar las w ebs en dist int os navegadores y ordenadores. Para est e curso empezaremos
t rabajando con un solo navegador ya que para el aprendizaje nos result a suficient e. Nosot ros usaremos
M ozilla Firefox, pero puedes usar ot ro si lo deseas. Cuando hayamos avanzado iremos explicando
algunos det alles o caract eríst icas específicas de los dist int os navegadores. Cuando t rat es de visualizar
las páginas w eb que const ruiremos durant e el curso t en en cuent a que puedes obt ener visualizaciones
dist int as de aquellas que most ramos nosot ros debido a que t u navegador no int erpret e exact ament e de
la misma manera el código. No t e preocupes ahora por los pequeños det alles, t rat a de aprender los
concept os e ideas que hay en t orno a CSS, más adelant e ya habrá t iempo de definir cómo se debe
manejar la problemát ica del dist int o comport amient o ent re navegadores.

ESTILOS EN LÍNEA

Una de las formas más simples e int uit ivas de dot ar de est ilos al código HTM L es usando el at ribut o
st yle que admit en la mayoría de las et iquet as HTM L.

Supón que sobre el código de ejemplo que est amos ut ilizando en el curso deseamos que el t ext o de los
element os del menú se muest re de color verde y el t ext o de los párrafos de color azul. Para aplicar un
est ilo en línea ut ilizaremos est a sint axis:

<nombreDeEt iquet a st yle = “ propiedadCSS : valorEst ablecido;” > … </ nombreDeEt iquet a>

En nuest ro caso para un párrafo usaríamos <p st yle =” color: blue;” > … </ p>

Para aplicar el color verde a los element os del menú, que est án en una list a, podemos probar a aplicarle
el at ribut o style y la propiedad color a la et iquet a <ul> … </ ul>. El código quedaría como sigue:

<ul style = "color: green;" >


<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.

El result ado obt enido lo vemos a cont inuación:

Podremos comprobar que no hemos obt enido el efect o deseado. Queríamos poner el t ext o de los
element os del menú en color verde y sin embargo cont inúa en color azul. Sí podemos observar, sin
embargo, que las viñet as o iconos circulares que aparecen en el lat eral izquierdo han cambiado de color
negro a color verde. ¿Cómo explicamos est e comport amient o? Tenemos que pensar en el modelo de
cajas para comprender qué es lo que ocurre. El modelo de cajas para los element os del menú sería el
siguient e:

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 link <a> … </a>

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


Caja del elemento link <a> … </a>

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


Caja del elemento link <a> … </a>

En est e esquema t enemos cajas en t res niveles: la caja más ext erior correspondient e a la list a, las cajas
dent ro de la list a correspondient es a cada uno de los element os dent ro de la list a, y las cajas más
int eriores correpondient es a las et iquet as <a> … <a> que definen los link.

El navegador act úa aplicando est ilos desde los niveles más ext eriores hacia los niveles más int eriores,
de forma que el est ilo que se ve cuando exist en varios es el más int erior ent re t odos los posibles est ilos
que afect an a un element o.

En est e caso, t oda la list a se est ablece con color verde, lo cual afect a a las viñet as y al t ext o. En las
et iquet as <li> no exist e est ilo propio que cont radiga el color verde. Sin embargo, los element os link
t ienen un est ilo propio, un est ilo que en est e caso es incorporado por defect o por el navegador, según
el cual est os element os aparecen en color azul y subrayados. Est e es el últ imo est ilo que lee el

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.

navegador y el que aplica a la caja de los element os <a> y est a caja al ser la más int erna es la que se
visualiza, most rándose el t ext o en color azul al est ar dent ro de las et iquet as <a> … </ a>.

Para resolver est e conflict o añadiremos est ilos que modifican el color para los links:

<ul style = "color: green;" >


<li><a href=" #" style = "color: green;”>Inicio</ a></ li>
<li> <a href=" libros.ht ml" style = "color: green;”>Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" style = "color: green;” >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" style = "color: green;” >Humor informát ico</ a> </ li>
</ ul>

Ahora sí hemos conseguido el efect o deseado.

Fíjat e en que hemos mant enido el est ilo aplicado a la et iquet a <ul> … </ ul> par que el color de las
viñet as se mant enga en verde. Si no aplicáramos ese est ilo, el est ilo aplicado sería el est ilo por defect o
según el cual las viñet as se most rarían en negro.

Nos plant eamos ahora dejar las viñet as en color rojo y el t ext o del menú en color verde pero sin
subrayado. Para ello t endremos que añadir una propiedad al link que elimine el est ilo subrayado que
por defect o incorpora el navegador. Est a propiedad será t ext -decorat ion cuyos posibles valores son
none (ninguno), underline (subrayado), overline (línea superior), line-t hrough (t achado). El código será
el siguient e:

<ul style="color: red;" >


<li><a href=" #" style="color:green; text-decoration: none;" >Inicio</ a></ li>
<li><a href=" libros.ht ml" style="color:green; text-decoration: none;" >Libros programación</ a> </ li>
<li><a href=" cursos.ht ml" style="color:green; text-decoration: none;" >Cursos programación</ a> </ li>
<li><a href=" humor.ht ml" style = "color:green; text-decoration: none;" >Humor informát ico</ a> </ li>
</ ul>

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.

Y el result ado:

Decimos que hemos sobreescrit o una propiedad CSS, en est e caso la propiedad de subrayado de los
links, reemplazándola por una nueva propiedad.

Hay una cosa que llama la at ención: vemos que el código CSS est á “ ent remezclado” o “ embebido”
dent ro del código HTM L. Por ejemplo en <ul st yle=" color: red;" > vemos que HTM L y CSS est án
ínt imament e relacionados, t ant o que result a difícil dist inguir qué es HTM L y qué es CSS. Est a es una
caract eríst ica a la que debes acost umbrart e, en los desarrollos w eb se ent remezclan dist int os lenguajes
o met alengajes. Podríamos decir que HTM L y CSS son sublenguajes de un supralenguaje: el lenguaje de
los desarrollos w eb.

EJERCICIO

A part ir del siguient e código:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / ww w.w3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<p><a href=" principal.ht ml" t it le=" Página principal" >Ir a la pagina principal</ a></ p>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ body>
</ ht ml>

M odifica el código HTM L ant erior para cumplir con est os requisit os mediant e la aplicación de est ilos en
línea:

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.

a) La et iquet a h1 debe most rar su t ext o en color rojo.


b) La et iquet a h3 con el t ext o relat ivo a X-FASHION debe most rar su t ext o en color verde.
c) La et iquet a h3 con el t ext o relat ivo a X-M OTION debe most rar su t ext o en color azul.
d) Todos los párrafos deben most rar su t ext o en color brow n (marrón).

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01010D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Formas de aplicar
a estilos CSS:
C interno y en
e archivos css.

FORM AS DE APLICAR CSS

Ya hemoss vist o que exist en est i los por defe


ect o que ap lican aut om
mát icament e los navegad
dores w eb
cuando no
n hay est ilo
os especifica
ados, así co
omo que po
odemos emb
beber códig
go CSS en la
as propias
et iquet as de HTM L, “ en línea” . Vamos
V a ver ahora dos fo
ormas adicio
onales de ap
plicar est ilos CSS: en la
part e iniccial del docu
ument o HTM
M L (aplicació
ón de est ilos
s int erna o CSS int erno
o) o en un archivo
a de
ext ensión
n .css independient e del archivo
a HTM
M L (aplicación
n de est ilos ext
e erna o CSS
S ext erno).

Volvemoss a lo que he
emos denom
minado códig
go HTM L ba
ase para el desarrollo
d de
el curso, cód
digo HTM L
donde no se aplican est
e ilos.

grafe ant erio r vimos cóm o aplicábam


En el epíg mos est ilos CS
SS en línea co
on est e ejem
mplo:

<ul style=
="color: red;" >
<li><a hre
ef=" #" style=""color:green; text-decoratiion: none;" >In
nicio</ a></ li>
>
<li><a hre
ef=" libros.ht ml"
m style="colo
or:green; textt-decoration: none;" >Libro
os programaciión</ a> </ li>
<li><a hre
ef=" cursos.ht ml"
m style="co xt-decoration: none;" >Curs
olor:green; tex sos programación</ a> </ li>
>
<li><a hre
ef=" humor.ht ml" style = "c
color:green; te on: none;" >Hu
ext-decoratio umor informátt ico</ a> </ li>
</ ul>

CSS INTER
RNO

Vamos a ver ahora có


ómo podemo
os definir essos est ilos en
n la cabecer a del docum
ment o HTM L usando la
siguient e sint axis:

<head>

<style ty
ype="text/ css
s">
elementt oAfect adoPo
orElEst ilo {
propied ad1ParaEseTi poDeElementt os:valor;
propied ad2ParaEseTi poDeElementt os:valor;
propied ad3ParaEseTi poDeElementt os:valor;

propied adnParaEseTiipoDeElementt os:valor;
}
</ style>
>
</ head>
>

Las difere
ent es propied en poner en una misma línea o en di st int as líneas según se
dades y valo res se puede
prefiera (ssiempre sep arados mediiant e punt o y coma).

© aprenderraprogramar.co
om, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

Dent ro de las et iquet as <head> … </ head> incluiremos una et iquet a de apert ura de declaración de
est ilos <st yle t ype=” t ext / css” >, a cont inuación colocaremos la definición de t ant os est ilos como
deseemos y cerraremos la declaración con </ st yle>. En HTM L 5 no es necesario especificar type
=” text/ css” pero de moment o seguimos recomendando que se use est a sint axis.

En nuest ro código de ejemplo el cambio de los element os del menú para que t engan el t ext o color
verde y el icono o símbolo de viñet a de color rojo se haría de est a forma:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w.w 3.org/ TR/ ht ml4/ loose.dt d" >
<!—Código ejemplo para el curso -->
<ht ml>

<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le>
<met a charset ="ut f-8" >
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<style type="text/ css">
ul {color:red;}
a {color:green; text-decoration: none;}
</ style>
</ head>
</ head>

<!-- Cont enido de la página w eb -->


<body>

<!-- Cabecera de la página w eb -->


<div>
<h1>Port al w eb aprenderaprogramar.com</ h1>
<h2>Didáct ica y divulgación de la programación</ h2>
</ div>
<!-- Fin de la cabecera de la página w eb -->
<br / >
<!-- Cont enedor para la part e cent ral -->
<div>
<!-- menu -->
<div>
<div>M enú</ div>
<hr/ >
<ul>
<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
</ div>
<!-- fin menu -->
<!—Aquí el resto del código del ejemplo -->

</ ht ml>

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

Puedes comprobar que hemos usado las mismas propiedades CSS y los mismos valores que usábamos
en línea.

Visualiza la página en t u navegador. El result ado para el menú será el mismo que cuando aplicamos CSS
en línea:

No obst ant e podrás comprobar que hay ot ros element os de la página w eb que t ambién se ven
afect ados, por ejemplo los links present es en el t ext o. Est o se debe a que hay una diferencia import ant e
ent re aplicar est ilos CSS en línea y aplicarlos como CSS int erno en la cabecera <head> … </ head> del
document o HTM L. Al aplicar est ilos en línea, t enemos que repet ir la aplicación de est ilos en cada una
de las líneas que queramos modificar y en cada ocasión afect amos a únicamente una línea. Con la
aplicación de est ilos int erna nos bast a con declarar una vez el est ilo y el t ipo de element o al que se
aplica, y aut omát icament e se aplicará a todos los element os de ese t ipo exist ent es dent ro de la página
w eb. Est o permit e que en una página w eb de gran ext ensión nos ahorremos t ener que escribir
múlt iples veces la definición de est ilos (una en cada línea), ya que una sola declaración inicial nos
bast ará, lo cual es una vent aja bast ant e evident e.

Sin embargo ahora surge una cuest ión adicional: es posible que t engamos dos o más list as de t ipo <ul>
y en algunos casos, por ejemplo menús, queramos aplicar un est ilo, y en ot ros casos, por ejemplo list as
de element os dent ro de un art ículo periodíst ico, queramos aplicar ot ro est ilo. También es posible que
deseemos que los element os del menú sean links con t ext o verde y sin subrayado, pero queramos
mant ener el rest o de links como t ext o azul con subrayado. Tal y como hemos hecho la definición de
est ilos no conseguimos hacer est o, ya que est amos modificando todas las list as y todos los links
present es en el document o. CSS permit e resolver sat isfact oriament e est a problemát ica para aplicar
est ilos específicament e allí donde queremos. Veremos cómo próximament e.

CSS EXTERNO

Aunque el CSS int erno nos permit e unificar en una declaración t odos los est ilos para un archivo ht ml,
seguimos t eniendo el problema de t ener que repet ir la definición de est ilos en la cabecera de cada uno
de los archivos ht ml de nuest ro desarrollo w eb. Si el desarrollo t iene pocos archivos quizás sea menos
problemát ico, pero cuando el desarrollo t iene cient os o miles de archivos sí se conviert e en un

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

verdadero problema, ya que cada vez que int rodujéramos cambios habría que hacerlo en los cient os o
miles de archivos de que const ara el desarrollo.

Para solvent ar est a solución se ideó la declaración ext erna de CSS, basada en declarar los est ilos CSS en
un archivo independient e que puede servir como referent e para dot ar de est ilos a decenas, cient os o
miles de archivos ht ml, que únicament e deberán invocar el nombre de archivo ut ilizando una sint axis
específica. De est e modo un cambio en los est ilos habrá que hacerlo únicament e en el archivo de est ilos
correspondient e, lo cual supone una gran vent aja. Incluso un cambio complet o de los est ilos de una
página w eb se puede conseguir simplement e sust it uyendo el archivo correspondient e.

Vamos a generar un archivo de est ilos independient e. Para ello abre Not epad++ (o el edit or de t ext o
que est és usando) y crea un archivo con el siguient e cont enido:

/ * Coment ario en CSS est ilos aprenderaprogramar.com* /

ul {color:red;}
a {color:green; t ext -decorat ion: none;}

Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma CSS
en línea y en la forma CSS int erna.

Los cont enidos que se encuent ren ent re los símbolos / * …. * / serán considerados coment arios y se
pueden usar para int roducir información del aut or del archivo, versión, et c. así como para escribir
aquellas aclaraciones sobre los est ilos que se consideren necesarias. Un coment ario puede comprender
una o varias líneas según se desee.

Elige Guardar Como… y guarda el archivo con un nombre y ext ensión css, por ejemplo est ilos.css.
Asegúrat e que la ext ensión del archivo sea css. No es válido si no t iene est a ext ensión.

En nuest ro archivo HTM L eliminaremos la definición de est ilos int erna y dejaremos sólo la invocación al
archivo escrit a con la siguient e sint axis:

<head>

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


</ head>

link es una et iquet a que se usa en HTM L para est ablecer vínculos ent re un document o HTM L y ot ros
recursos como una imagen de icono o una hoja de est ilos CSS. En est e caso se indica con la propiedad
rel (relación o relat ionship) que el document o HTM L debe usar los est ilos definidos como t ext o/ css en
un archivo con el nombre indicado. Ten en cuent a que si como rut a de archivo indicas simplement e el

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

nombre del archivo, ést e debe encont rarse en la misma carpet a en que se encuent re el document o
HTM L. Si el archivo CSS se encuent ra en ot ra carpet a deberás indicarlo escribiendo una URL complet a u
bien una URL relat iva que det ermine la rut a.

Nosot ros ubicaremos de moment o el archivo CSS en la misma carpet a que el archivo HTM L. En el
archivo HTM L t endremos lo siguient e:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w.w 3.org/ TR/ ht ml4/ loose.dt d" >
<!—Código ejemplo para el curso -->
<ht ml>

<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le>
<met a charset ="ut f-8" >
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<link rel="stylesheet" type="text/ css" href="estilos.css">
</ head>

<!—Aquí el resto del código …. -->


...

Ahora procedemos a visualizar el archivo HTM L en nuest ro navegador. Si se est á cargando la hoja de
est ilos correct ament e deberemos obt ener el mismo result ado que habíamos obt enido con la aplicación
de est ilos int erna. Prueba a hacer dist int os cambios en el archivo css y visualiza los result ados.

¿QUÉ TIPO DE CSS USAR?

En la siguient e t abla hacemos un resumen de las caract eríst icas de los dist int os t ipos de CSS que hemos
vist o hast a el moment o:

DECLARACIÓN
ARCHIVOS AFECTADOS CSS SE APLICA A
CSS

En línea Uno, aquel donde se realiza la declaración Una línea de código

Uno, aquel en cuya cabecera se realiza la Todos los element os del archivo en los que
Interna
declaración result e de aplicación el est ilo

Todos los element os de los archivos


Externa Todos los archivos que invoquen el archivo css afect ados en que result e de aplicación el
est ilo

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

¿Cuál de est as formas de aplicar CSS es mejor? ¿Cuál usar? En primer lugar cabe hacer una reflexión
sobre qué forma de aplicar CSS hará nuest ros desarrollos w eb más fácilment e mant enibles y apt os para
ser modificados con poco esfuerzo. Parece claro que es la declaración ext erna la que mejor independiza
los est ilos del cont enido y la que menor número de modificaciones implicará en general. Por ello es la
forma de t rabajar con CSS a la que debemos acost umbrarnos.
No obst ant e, cuando t rabajes con desarrollos w eb comprobarás que t ambién son de uso frecuent e la
aplicación de est ilos en línea o int erna. En algunos casos est o es debido a desconocimient o de la
persona que realiza el desarrollo o a la forma de funcionamient o del programa con el que se ha creado
la página w eb, pero en ot ros casos obedece a que se ha querido hacer así.

En ocasiones se opt a por hacer modificaciones en línea porque se buscan efect os punt uales que sólo se
quieren aplicar en un punt o concret o y en ningún ot ro. En ocasiones se opt a por hacer definiciones CSS
int ernas porque se quiere afect ar muy punt ualment e a un archivo y a ningún ot ro. Y en ot ros casos, se
usan los est ilos en línea o int ernos simplement e “ por las prisas” o “ por ser lo más rápido” .

A efect os del navegador, una declaración en línea t iene precedencia sobre una declaración int erna, y a
su vez una declaración int erna t iene precedencia sobre una declaración ext erna. Por t ant o podríamos
t ener CSS sobreescrit o varias veces: la declaración ext erna puede ser sobreescrit a por la int erna, y ést a
a su vez por la en línea. El navegador aplicará el orden:

Declaración en línea > Declaración interna > Declaración externa

Podría ocurrir que los est ilos que visualicemos en el navegador est én definidos “ a t rozos” de modo que
part e de lo que se visualiza se debe a las declaraciones CSS ext ernas, part e a las declaraciones CSS
int ernas y part e a declaraciones en línea. Est o en general será indeseable, ya que hará difícil de
mant ener el desarrollo w eb, no se sabrá con cert eza cómo se generan los est ilos y el desarrollo puede
t erminar convirt iéndose en un caos difícil de mant ener. También puede dar lugar a visualizaciones
incorrect as o erróneas.

A modo de resumen y como recomendación: mant én los est ilos de forma ext erna, lo más
ordenadament e posible y sin ut ilizar redefiniciones int ernas ni en línea. Usa est e t ipo de definiciones
(int erna o en línea) exclusivament e cuando result e necesario y coment a adecuadament e el código.
Trabajar ordenadament e será algo que a la larga t e result ará vent ajoso, t ant o a t i mismo como a ot ras
personas que t engan que t rabajar en desarrollos donde t ú hayas part icipado.

EJERCICIO 1

M odifica el código HTM L most rado a cont inuación para cumplir con est os requisit os mediant e la
aplicación de est ilos int ernos:

a) Todas las et iquet as h1 deben most rar su t ext o en color rojo.


b) Todas las et iquet as h3 deben most rar su t ext o en color verde.
c) Todos los párrafos deben most rar su t ext o en color brow n (marrón).

© aprenderaprogramar.com, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w.w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<p><a href=" principal.ht ml" t it le=" Página principal" >Ir a la pagina principal</ a></ p>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ body>
</ ht ml>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

EJERCICIO 2

M odifica el código HTM L del ejercicio ant erior para cumplir con est os requisit os mediant e la aplicación
de CSS ext erno definido en un archivo independient e, donde debes incluir al menos un coment ario:

a) Todas las et iquet as h1 deben most rar su t ext o en color azul.


b) Todas las et iquet as h3 deben most rar su t ext o en color orange (naranja).
c) Todos los párrafos deben most rar su t ext o en color brow n (marrón).

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01011D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Selectores CSS.
C Id. Aplicarr CSS a una partte de una págin
na w eb.

SELECTOR
RES CSS

Hemos esst udiado cóm


mo aplicar esst ilos CSS a t odas las et i quet as HTM
M L de un t ipo
o, por ejemp
plo a t odos
los párraffos, t odas lass list as, t odo
os los links, et
e c. Pero en numerosas ocasiones
o o queremos que t odas
no
las et ique
et as de un t ipo t engan un
u mismo esst ilo, sino ap
plicar dist intt os est ilos a una et iquett a o a una
part e de una
u página w eb. Para el lo además del
d select or de ave que ya conocemos
d et iquet a o palabra cla
exist en ott ros select or es, ent re loss más usadoss t enemos lo s select ores por id y los sselect ores de
e clase.

es de et iquett a o palabra clave t ipo ett iquet a {prop


mos primero los select ore
Recordem piedad:valorr;}:

a aplicar col or rojo al t ext o de t odas


ul {color:rred;} suponía s las list as de
e t ipo ul del document o HTM L, es
decir, a t odas
o las et iqu
uet as <ul> … </ ul>.

a {color:green; t ext -d ecorat ion: n one;} supon ía aplicar co


olor verde y sin
s subrayad
do a t odos lo
os links del
documentt o HTM L, es decir, a t oda
as las et iquet as <a> … <// a>.

De la mism
ma forma se
e pueden usa
ar como sele
ect or ot ras et iquet as HTM
M L como divv { }, span { }, p { }, et c.
pero supo
oniendo que se apliquen a t odos los element
e os d e ese t ipo.

R POR ID
SELECTOR

Trat aremo
os ahora de
e aplicar est ilos a sólo una
u part e d e una págin
na w eb o do
ocument o HTM L. Est o
implica do
os cosas:

a) En
n el document o HTM L, habrá
h que ide
ent ificar la part
p e del doccument o a la que querem
mos aplicar
essos est ilos in
ncluyendo un
n at ribut o pa
ara la et iquet a que delim
mit a el fragm
ment o de cód
digo donde
q ueremos ap licar est ilos. Por ejemplo
o si queremo
os aplicar est ilos dent ro de un cont enedor
e div
a sint axis serría <div id=” nombreIden
la n t ificat ivoEleg
gido” > … </ div>.
d Si quisiiéramos apli car est ilos

ólo a un párrrafo la sint axxis sería <p id
d=” nombreId
dent ificat ivo Elegido” > … </ p>

b) En os t endremo s que declarar los est il os a aplicarr a ese frag


n la declaracción de est ilo gment o de

ódigo realiza
ando la decla
aración usand
do est a sint axis.
a

#nombr eIdent ificat ivo


oElegido {
propieda
ad1ParaEseTi poDeElementt os:valor;
propieda
ad2ParaEseTi poDeElementt os:valor;
propieda
ad3ParaEseTi poDeElementt os:valor;

propieda
adnParaEseTi poDeElementt os:valor;
}

edades se p ueden defin


Las propie nir en una so
ola línea si se
e prefiere assí, el único rrequisit o es separarlas
con punt o y coma.

© aprenderraprogramar.co
om, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

Con un ejemplo lo veremos más claro. Part imos del código base HTM L que est amos usando para el
curso, en el cual t enemos un menú. Vamos a elegir un nombre para ident ificar ese menú. Podríamos
elegir como nombre <<menu>> (usaremos nombres sin t ildes). Ahora mismo solo t enemos un menú,
pero en el fut uro es posible que exist an ot ros, por eso vamos a preferir elegir como nombre
<<menu1>>. En el document o HTM L vamos a ident ificar el menú con el at ribut o id aplicado al
cont enedor div dent ro del cual est á el menú. El código es est e:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<!—Código ejemplo para el curso -->
<ht ml>

<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a charset ="ut f-8" >
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<link rel="stylesheet" type="text/ css" href="rutaDelArchivo.css">
</ head>

<!-- Cont enido de la página w eb -->


<body>

<!-- Cabecera de la página w eb -->


<div>
<h1>Port al w eb aprenderaprogramar.com</ h1>
<h2>Didáct ica y divulgación de la programación</ h2>
</ div>
<!-- Fin de la cabecera de la página w eb -->
<br / >
<!-- Cont enedor para la part e cent ral -->
<div>
<!-- menu -->
<div id="menu1">
<div>M enú</ div>
<hr/ >
<ul>
<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
</ div>
<!-- fin menu -->
<!—Aquí el resto del código del ejemplo -->

</ ht ml>

Hemos incluido <div id=” menu1” > en el cont enedor div que delimit a nuest ro menú.

© aprenderaprogramar.com, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

En el archivo css ext erno, en nuest ro caso denominado est ilos.css, vamos a definir que ese fragment o
de página w eb (el menú) t enga el t ext o verde y fondo gris. Para ello escribiremos lo siguient e:

/ * Curso CSS est ilos aprenderaprogramar.com* /

#menu1 {
color:green;
background-color: DarkGray;
}

Si lo preferimos podemos escribir la declaración en una sola línea, obt eniendo el mismo result ado. Es
decir, podemos escribir #menu1 {color:green; background-color: DarkGray; }. Est o result a más
compact o y ahorra espacio, pero t ambién puede ser menos claro a la hora de leer. Algunos
programadores o diseñadores prefieren el est ilo compact o y ot ros diferenciando líneas.

El result ado obt enido será similar a est e:

Analicemos ahora el result ado obt enido: se ha aplicado el fondo gris a la caja que define el cont enedor
div. Se ha aplicado color verde al t ext o y a las viñet as de la list a exist ent e en el menú. Sin embargo, los
links del menú mant ienen su color azul y subrayado, a pesar de que hemos indicado que el color verde
debería de aplicarse a t odo el cont enedor. ¿Por qué ocurre est o? CSS no aplica la misma import ancia a
t odas las reglas o est ilos que se especifican. En est e caso la regla o est ilo que hemos definido no supera
en la escala de import ancia CSS a la regla por defect o según la cual los links son de color azul y
subrayado.

Para resolver est e conflict o hemos de especificar que queremos que los element os <a> … </ a> (links)
dent ro del bloque de código con ident ificador menu1 se muest ren aplicando la regla de est ilo definida
para el menú. M odifica el archivo css escribiendo el siguient e código y visualiza la página w eb:

/ * Curso CSS est ilos aprenderaprogramar.com* /

#menu1, #menu1 a {color:green; background-color: DarkGray; }

© aprenderaprogramar.com, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

M ediant e la sint axis #nombreIdent ificat ivoElegido element oAfect adoPorElEst ilo {…} est amos
especificando “ explícit ament e” que deseamos aplicar esa regla de est ilo al element o indicado (en
nuest ro caso los links, <a> … </ a>) dent ro de un bloque de código definido por un ident ificador. De est a
forma el navegador le concede preferencia o mayor import ancia al est ilo definido que al est ilo por
defect o de los links. El result ado en est e caso es que se muest ra el t ext o de los links en color verde
(pero se sigue mant eniendo el subrayado porque no hemos sobreescrit o est a propiedad de los links):

Vamos a especificar ahora que los links del menú no aparezcan subrayados. Para ello modificaremos
nuest ro archivo css dejándolo con est a línea:

#menu1, #menu1 a { color:green; background-color:DarkGray; t ext -decorat ion:none;}

Ahora sí t enemos el menú en color verde y sin subrayado, ya que hemos sobreescrit o la propiedad t ext -
decorat ion que est aba dando lugar a la aparición del subrayado:

Es int eresant e de lo vist o hast a ahora razonar cómo CSS t rabaja con unos órdenes de precedencia o
jerarquía de reglas CSS. No t e preocupes de conocerlos con exact it ud, ya que a lo largo del curso y a
medida que vayas cogiendo experiencia irás aprendiendo más al respect o. También t en en cuent a que
los órdenes de precedencia pueden cambiar según los navegadores o según las versiones CSS. Por t ant o
más que saber con exact it ud los órdenes de precedencia nos int eresa el ser capaces de int erpret ar por
qué ocurren las cosas y la forma de t rabajar de CSS y su filosofía.

© aprenderaprogramar.com, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

APLICAR ESTILOS DIFERENCIADOS DENTRO DE UN SELECTOR ID

El código que hemos vist o ant eriorment e se puede escribir t ambién de est a manera:

/ * Curso CSS est ilos aprenderaprogramar.com* /

#menu1 {color:green; background-color: DarkGray; t ext -decorat ion:none; }

#menu1 a {color:green; background-color: DarkGray; t ext -decorat ion:none; }

El efect o con est e código sería el mismo que con el ant erior. Realment e en est e caso no t endría int erés
escribir la especificación para menu1 {…} y para menu1 a {…} por separado ya que result a más
compact o escribirlo en una línea. Sin embargo sí t iene int erés en el caso de que deseemos aplicar un
est ilo general al menú y sobreescribir o especificar est ilos diferenciados para los element os <a> … </ a>
dent ro del menú.

En nuest ro caso vamos a hacer lo siguient e: est ableceremos como color general para el menú rojo y
como fondo gris. Como fondo para los links (element os a) dent ro del menú no especificaremos
ninguno, el color lo est ableceremos en verde y eliminaremos el subrayado. Escribe est e código y
visualiza el result ado:

/ * Curso CSS est ilos aprenderaprogramar.com* /

#menu1 {color:red; background-color: DarkGray; t ext -decorat ion:underline; }

#menu1 a {color:green; t ext -decorat ion:none; }

En est e caso t enemos como color de los element os del menú rojo, pero los links se muest ran en verde
porque para los element os a el color ha sido sobreescrit o y el navegador elige el est ilo más int erno.

© aprenderaprogramar.com, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

Prueba a est ablecer dist int as propiedades para #menu1 y para #menu1 a. Posiblement e t e encuent res
que en algunos casos los result ados no son t al y como esperas. Ten en cuent a que el navegador t iene
que resolver sobre el orden de import ancia de las reglas, las sobreescrit uras, est ilos por defect o, et c. lo
cual hace que el proceso adquiera ciert a complejidad. En ocasiones se producen conflict os en la
definición de est ilos que el navegador t rat ará de resolver, aunque en algunos casos quizás no pueda
resolver el problema y simplement e ignore los est ilos que ent ran en conflict o. Iremos hablando sobre
est as sit uaciones a medida que vayamos viendo ejemplos.

¿CUÁNDO UTILIZAR SELECTORES POR ID?

El at ribut o id nos permit e darle un nombre específico a una part e de un document o HTM L definida por
una et iquet a HTM L, diferenciándola de las demás. En general est e at ribut o se ut iliza para poner
nombres a dist int as part es de un document o HTM L, por ejemplo menu, art iculo, formulario, foot er, et c.
de modo que cada part e de la w eb est á ident ificada con un nombre único. No es recomendable aplicar
el mismo nombre id a dist int as part es de una w eb, ni siquiera aunque sean del mismo t ipo. Un id debe
ser único, por lo t ant o ese nombre debe aparecer solo una vez en el document o HTM L. Si queremos
aplicar un mismo est ilo en dist int as part es de la w eb ut ilizaremos el at ribut o class, que explicaremos
más adelant e.

No es obligat orio ident ificar t odas las part es de una w eb con ids. Puede haber part es del document o
HTM L con ident ificador y ot ras part es que carezcan de él. Incluso la t ot alidad de la w eb puede carecer
de ident ificadores id.

El uso del símbolo # combinado con el at ribut o id permit e aplicar CSS a part es muy concret as de una
página w eb y se usa sobre t odo cuando se quieren diferenciar part es est ruct urales del document o
HTM L como el menú o el foot er, y en general aplicado a element os <div> … </ div> que act úan como
cont enedores. Aunque se podría aplicar a et iquet as más específicas como <p> est o no es habit ual ya
que supondría est arle poniendo un nombre único a un párrafo y un párrafo en general no t iene t ant a
import ancia dent ro de una w eb como para ponerle un nombre específico. No obst ant e, t en en cuent a
que exist e la posibilidad de usar est e at ribut o sobre cualquier et iquet a HTM L.

EJERCICIO

Analiza el siguient e código HTM L. En él encont rarás t res et iquet as div. Haz lo siguient e:

a) Est ablece at ribut os id para cada una de ellas con valores <<novedades>> para la primera,
<<xFashion>> para la segunda y <<t M ot ion>> para la t ercera.

b) Usando CSS est ablece como color de t ext o el rojo (red) para los element os h1 que se encuent ren
dent ro del element o con id <<novedades>>.

© aprenderaprogramar.com, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.

c) Usando CSS est ablece como color de t ext o el verde para los element os h3 que se encuent ren dent ro
de los element os con id <<xFashion>> y <<t M ot ion>>.

d) Usando CSS est ablece como color de fondo para el element o con id <<novedades>> el amarillo
(yellow ).

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<div>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
</ div>
<div>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
</ div>
<div>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ div>
</ body>
</ ht ml>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01012D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Selectores CSS:
C class. Aplic
car CSS a una parte
p de una pá
ágina w eb.

SELECTOR
RES CSS

mos cómo ap
Ya sabem plicar est ilos CSS a t odas las et iquett as HTM L de
e un t ipo, o bien a una part e del
on un nom bre único (id). Pero muchas
documentt o HTM L co m vece os aplicar u na misma
es querremo
definición e dist int os l ugares de un
n de est ilos en e Para ello además del select or de et iquet a o
na página w eb.
palabra clave que ya conocemos y del select or
o # por id, podemos de
efinir est ilos para aplicarrlos donde
deseemoss mediant e el
e at ribut o cl ass.

R POR CLASS
SELECTOR S

Trat aremo
os ahora de odamos apl icar en dife
e definir est ilos que po erent es luga
ares de una página o
proyect o w eb, allá do nde nosot ro
os deseemos. Para ello ha
aremos dos cosas:
c

a) n el document o HTM L, habrá


En h que ide
ent ificar la part
p e del doccument o a la que querem
mos aplicar
essos est ilos in
ncluyendo un
n at ribut o pa
ara la et iquet a que delim
mit a el fragm
ment o de cód
digo donde
q ueremos ap licar est ilos. Por ejemplo
o si queremo
os aplicar est ilos dent ro de un cont enedor
e div
la
a sint axis se
ería <div cla
ass=” nombre voElegido” > … </ div>. S
eIdent ificat iv Si quisiéram
mos aplicar
esst ilos sólo a un párrafo
o la sint axiss sería <p class=”
c nomb
breIdent ificatt ivoElegido” > … </ p>.
Po
odemos com
mprobar que
e la sint axis es
e casi igual a la emplea
ada con el at ribut o id, pero
p ahora
ussando el t érm
mino class.

b) En
n la declaracción de est ilo
os t endremo s que declarar los est il os a aplicarr a ese frag
gment o de

ódigo realiza
ando la decla
aración usand
do est a sint axis.
a

.nombre
eIdent ificat ivo
oElegido {
ad1ParaEseTi poDeElementt os:valor;
propieda
propieda
ad2ParaEseTi poDeElementt os:valor;
propieda
ad3ParaEseTi poDeElementt os:valor;
propieda
ad4ParaEseTi poDeElementt os:valor;
propieda
ad5ParaEseTi poDeElementt os:valor;
propieda
ad6ParaEseTi poDeElementt os:valor;

propieda
adnParaEseTi poDeElementt os:valor;
}

M ient ras que para el id el símbolo


o CSS que se
e empleaba era
e la almoha
adilla ó #, pa
ara los class el símbolo
CSS que empleamos
e e el . (punt o).
es o

Las propie
edades se pu
ueden definiir en una sol a línea o agrrupándolas como
c nosot rros queramo
os, el único
requisit o es separarlas con punt o y coma.

© aprenderraprogramar.co
om, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una página w eb.

Con un ejemplo lo veremos más claro. Part imos del código base HTM L que est amos usando para el
curso, en el cual t enemos un menú, t res párrafos, dos imágenes y un formulario. Vamos a definir un
est ilo CSS consist ent e en poner fondo naranja, t ext o en negrit a y el t ext o un 100 % del t amaño normal
con el fin de aplicarlo en dos punt os de nuest ra página w eb: al primer párrafo y al t ext o “ Si quieres
cont act ar…” del formulario. A est e est ilo vamos a llamarlo “ dest acado” y lo definimos en nuest ro
archivo css de est a forma:

/ * Curso CSS est ilos aprenderaprogramar.com* /


.dest acado { background-color: orange; font -w eight :bold; font -size:100%; }

Ahora t enemos que aplicar est ilos CSS en las part es del document o HTM L que nos int eresan, el primer
párrrafo:

<p class="destacado" >Aprender a programar es un objet ivo que se plant ea


mucha gent e y que no t odos alcanzan.</ p>

Hemos indicado de est a forma que la caja cont enedora definida por las et iquet as <p> … </ p> del primer
párrafo verá su est ilo afect ado por las reglas CSS que hemos definido.

Pero en el caso del formulario t enemos un problema. El código inicial es est e:

<form met hod=" get " act ion=" accion.ht ml" >
Si quieres cont act ar con nosot ros envíanos est e formulario relleno: <br / ><br / >
Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
Apellidos: <input t ype=" t ext " name=" apellidos" / ><br / >
Dirección: <input t ype=" t ext " name=" direccion" / ><br / >
Correo elect rónico: <input t ype=" t ext " name=" correo" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 row s=2></ t ext area><br / ><br / >
<input t ype=" submit " value=" Enviar" >
<input t ype=" reset " value=" Cancelar" >
</ form>

Y el t ext o al que queremos aplicar el est ilo dest acado es “ Si quieres cont act ar con nosot ros…” . ¿Cuál es
el problema? Que dicho t ext o no t iene una caja específica, sino que es un t ext o “ suelt o” dent ro de ot ra
caja, en est e caso la caja inmediat a que lo enmarca es la caja del formulario. Podemos verlo en est e
esquema:

© aprenderaprogramar.com, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una página w eb.

Si queremos aplicar est ilos t enemos que hacerlo sobre et iquet as delimit adoras (una caja) y ahora
mismo solo disponemos de <form> … </ form>. Si escribimos <form class=" dest acado" met hod=" get "
act ion=" accion.ht ml" > el result ado sería est e:

Obviament e el est ilo se aplica a t oda la caja del formulario, y no sólo al t ext o que nosot ros deseamos.

¿Qué solución podemos darle? Hemos de crear una caja específica para el t ext o ya que es sólo al t ext o
a quien queremos aplicarle el est ilo “ dest acado” . Est o podemos hacerlo de varias maneras: con un
párrafo <p> … </ p>, con un cont enedor <div> … </ div> o con un divisor <span> … </ span>. Las
diferencias ent re las opciones son que el párrafo es un element o de t ipo block que lleva asociados un
est ilo predet erminado por el navegador. div es un element o que crea una división o caja y es de tipo
block, t ambién ocupará la página w eb a t odo lo ancho. div en principio no lleva est ilos predet erminados
asociados. Por últ imo span es un element o que crea una división inline , por t ant o no abarca t odo el
ancho de la página sino el espacio ocupado por aquello que cont iene (en est e caso el espacio ocupado
por el t ext o) y t ampoco t iene est ilos predet erminados asociados. Fíjat e en la diferencia ent re aplicar un
est ilo a un element o block o a un element o inline.

© aprenderaprogramar.com, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una página w eb.

Elegiremos aquel element o divisor que nos parezca más adecuado en función de los crit erios de diseño.
En nuest ro caso vamos a opt ar por un divisor <p> … </ p>

El código del formulario en el document o HTM L nos queda así:

<form met hod=" get " act ion=" accion.ht ml" >
<p class="destacado" >Si quieres cont act ar con nosot ros envíanos est e formulario relleno:</ p> <br / ><br
/ >Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
Apellidos: <input t ype=" t ext " name=" apellidos" / ><br / >
Dirección: <input t ype=" t ext " name=" direccion" / ><br / >
Correo elect rónico: <input t ype=" t ext " name=" correo" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 row s=2></ t ext area><br / ><br / >
<input t ype=" submit " value=" Enviar" >
<input t ype=" reset " value=" Cancelar" >
</ form>

Ejecut a el código. La visualización obt enida debe ser la t ipo block que hemos indicado ant eriorment e.

EJERCICIO

Analiza el siguient e código HTM L. En él encont rarás t res et iquet as div. Haz lo siguient e:

a) Est ablece at ribut os class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la t ercera.

b) Usando CSS est ablece como color de t ext o el rojo (red) y t amaño de fuent e el 150% respect o de lo
normal para los element os cuyo valor class sea <<principal>>.

c) Usando CSS est ablece como color de t ext o el verde para los element os y t amaño de fuent e el 110%
respect o de lo normal para los element os cuyo valor class sea <<secundario>>.

d) Usando CSS est ablece como color de fondo para los párrafos dent ro de element os cuyo at ribut o class
sea <<secundario>> el amarillo (yellow ).

© aprenderaprogramar.com, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una página w eb.

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<div>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
</ div>
<div>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
</ div>
<div>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ div>
</ body>
</ ht ml>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01013D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Herencia CS
SS: concepto. Palabra
P clave in
nherit.

HERENCIA
A EN CSS

Hemos vi st o cómo ap
plicar est iloss CSS a t oda
as las et ique
et as HTM L d e un t ipo, o bien a una part e del
documentt o HTM L co n un nombrre único (id),, o bien en dist
d int as parrt es de un d
document o o proyect o
w eb usan
ndo class. Un
na caract erísst ica int eresa
ant e de CSS es cómo no
os permit e d efinir est ilos
s en clases
superiore
es o clases pa
adre que se van
v t ransmit iendo hacia las subclasess o clases hij as.

DEFINIR CLASES
C QUE SOLO SEAN APLICABLES
S A ETIQUETA
AS ESPECÍFIC
CAS

Part imos del código q ue hemos utt iliado en la ant erior ent rega del cursso. En concre
et o habíamo
os definido
ombre era “ dest
una clase CSS cuyo no d acado” y cuyo código
o era:

/ * Curso CSS est ilos ap


prenderaprogramar.com* /
.dest acad
do { backgrou nd-color: oran
nge; font -w eig
ght :bold; fontt -size:100%; }

Podemos definir que una clase so


olo sea aplica
able a una ett iquet a espe
ecífica. Por ejjemplo si mo
odificamos
el código que define l a clase dest acado
a y escriibimos:

/ * Cu
urso CSS est ilo
os aprenderap
programar.com
m* /
p.desst acado{ backg
ground-color:: orange; font -w eight :bold; font -size:100
0%; }

Ahora el est
e ilo dest accado sólo su rt e efect o cu
uando va en una et iquett a p, en cam bio en ot ras
s et iquet as
como div,, span, a, et c.
c no t endría efect o.

Est o nos permit iría ussar el mismo e clase y obtt ener dist intt os efect os ssegún en qu é et iquet a
o nombre de
mos la clase. Por
aplicáram P ejemplo::

/ * Currso CSS est iloss aprenderaprrogramar.com


m* /
p.destt acado { backg
ground-color: orange; font -w
- eight :bold; font -size:100
0%; }
div.de
est acado {backkground-colorr: blue; font -w
w eight :bold; fo
ont -size:100%
%; }

Ahora si definimos
d un
n párrafo con
n el at ribut o class = “ destt acado” su fo
ondo será na
aranja. En ca
ambio si es
un diviso r div con el
e at ribut o class
c = “ dest acado” su fondo será azul. Prueb
ba a ejecut ar
a código
comproba
ando est as d iferencias.

DEFINIR SUBESTILOS
S DENTRO DE UNA CLASE

Podemos definir que


e det erminad
das cajas de
ent ro de ot ra
r principal t engan est i los diferenciados. Por
ejemplo, podemos qu
uerer que lo
os párrafos de clase “ de
est acado” t engan
e fondo
o naranja, pe
ero que si

© aprenderraprogramar.co
om, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

dent ro del párrafo hay un link (et iquet as <a> … </ a>) dicho link t enga un est ilo específico, por ejemplo
que t enga fondo amarillo y un t amaño un 20% superior a lo normal. Para ello escribiríamos:

/ * Curso CSS est ilos aprenderaprogramar.com* /


p.dest acado{
background-color: orange;
font -w eight :bold;
font -size:100%; }
p.dest acado a { background-color: yellow ;
font -size:120%;
}

Con la declaración p.dest acado a { … } est amos indicando que los links dent ro de párrafos con est ilo
dest acado est arán en negrit a (por herencia del est ilo general aplicable a la clase dest acado) y t endrán
fondo amarillo y t amaño de let ra un 20% superior a lo normal (ya que hemos sobreescrit o las
propiedades de color de fondo y t amaño de let ra de la clase padre).

Si quisiéramos definir un est ilo dest acado para los párrafos, ot ro para los div, pero el mismo subest ilo
para los links que est én t ant o dent ro de párrafos como dent ro de divs escribiríamos lo siguient e:

/ * Curso CSS est ilos aprenderaprogramar.com* /


p.dest acado{ background-color: orange; font -w eight :bold; font -size:100%; }
div.dest acado { background-color: blue; font -w eight :bold; font -size:100%; }
p.dest acado a, div.dest acado a { background-color: yellow ; font -size:120%; }

Con la declaración p.dest acado a, div.dest acado a { … } aplicamos el mismo est ilo a los link dent ro de
párrafos o div que lleven el at ribut o class = “ dest acado” .

Se observa una cosa: podemos definir est ilos agrupando el código de dist int as maneras. Podemos
repet ir código pero t ambién podemos crear clases padre que agrupen las caract eríst icas comunes y
definir en clases hijo las caract eríst icas específicas. Veamos el siguient e código:

/ * Curso CSS est ilos aprenderaprogramar.com* /


.dest acado {font -w eight :bold; font -size:100%;}
p.dest acado {background-color: orange;}
div.dest acado { background-color: blue; }
p.dest acado a, div.dest acado a {background-color: yellow ; font -size:120%; font -w eight :light er; }

Est e código define: una clase padre o superclase <<dest acado>> según la cual la let ra será negrit a y el
t amaño de let ra normal (100 %). Las clases hijas <<p.dest acado>> y <<div.dest acado>> aport an las
caract eríst icas de la clase padre (por herencia) más algunas ot ras caract eríst icas adicionales (añadidas)
o dist int as (sobreescrit ura de propiedades de la clase padre), y las clases hijas de las hijas
<<p.dest acado a>> y <<div.dest acado a>> t ienen las caract eríst icas de la clase padre y de la clase abuela
con algunas caract eríst icas adicionales o dist int as.

Observamos aquí una propiedad import ant e de CSS: la herencia o t ransmisión de caract eríst icas de
clases ant ecesoras a clases sucesoras o de clases padre a clases hija.

© aprenderaprogramar.com, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

CONCEPTO DE HERENCIA CSS

La herencia CSS permit e evit ar la repet ición de código en t odas las subclases que derivan a part ir de una
clase superior. La herencia se aplica t ant o a est ilos de et iquet as HTM L (por ejemplo t odas las et iquet as
son subet iquet as de la et iquet a padre body, de modo que un est ilo aplicado a body será heredable por
el rest o de et iquet as HTM L) como a select ores id o class.

Est o nos da alguna pist a sobre práct icas CSS que son habit uales ent re programadores o diseñadores CSS
experiment ados: si aplicamos algunos est ilos básicos como un t ipo de let ra (propiedad CSS font -family)
a la et iquet a body y t odas las ot ras et iquet as son herederas del est ilo de body, habremos conseguido
definir el t ipo de let ra en t oda la página w eb en una simple línea, sin necesidad de t ener que est ar
repit iendo el est ilo en múlt iples ocasiones para párrafos, div, span, forms, et c.

Ejemplo de declaración de est e t ipo:

body {font -family: Arial, sans-serif; }

En un document o HTM L t odo t iene ascendient e except o el element o ht ml. Así body hereda de ht ml, div
hereda de body y <<div a>> (link dent ro de un cont enedor div) hereda de div. En nuest ro caso el est ilo
<< p.dest acado a>> hereda de <<p.dest acado>> y <<p.dest acado>> hereda de <<dest acado>>.

Sin embargo no t odas las propiedades se heredan. Por ejemplo la propiedad font -family es heredable,
pero los márgenes (propiedad margin) no se heredan except o si se indica explícit ament e que deben
heredarse. ¿Por qué unas propiedades se heredan y ot ras no? Los creadores de CSS pensaron que sería
út il que algunas propiedades se heredaran porque suelen mant enerse const ant es dent ro de una caja.
Por ejemplo lo más normal es usar un t ipo de let ra en un cont enedor y no mezclar dist int os t ipos de
let ra. En cambio, ot ras propiedades era poco lógico que se heredaran, como los márgenes, ya que por
ejemplo las fot ografías dent ro de un art ículo normalment e t enían un margen dist int o al que t enía el
propio art ículo respect o a su cont enedor o los párrafos. Nos encont ramos así con que la herencia de
propiedades se rige en ciert a manera por el “ sent ido común” . No obst ant e, en la especificación oficial
de CSS encont raremos que cuando se define una propiedad se est ablece un at ribut o denominado
“ inherit ” que puede est ar est ablecido en “ yes” o en “ no” según la propiedad de que se t rat e. Así font -
family es una propiedad cuyo valor inherit es “ yes” : est a propiedad se hereda. En cambio la propiedad
margin t iene un valor inherit “ no” , lo cual significa que no se hereda. M ás adelant e abordaremos las
propiedades CSS, explicaremos cómo consult ar la document ación oficial CSS y est udiaremos est a
circunst ancia con más det alle.

Hay algunas curiosidades en t orno a la herencia. Por ejemplo no t odos los navegadores responden
exact ament e igual en cuant o a la herencia. Podrías encont rart e algún navegador donde no se genera
herencia de una propiedad mient ras que en ot ro sí.

Ot ra curiosidad es algo que hemos coment ado: hemos dicho que la propiedad background-color se
t ransmit e por herencia. Sin embargo la definición del est ándar CSS dice que background-color t iene un
valor inherit “ no” . ¿Cómo se explica est o? Lo veremos más adelant e cuando hablemos de las
propiedades CSS, pero bast e decir que el color de fondo por defect o para t odos los element os es el
t ransparent e. Al t ener el padre un color y superponer el hijo t ransparent e el efect o visual es que se
hereda el color del padre, aunque formalment e no es así.

© aprenderaprogramar.com, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

FORZAR LA HERENCIA CON INHERIT

Hay una manera explícit a para indicar que la propiedad que se debe aplicar es la heredada del est ilo
padre. Considera el código con que venimos t rabajando en el que t enemos un menú. Supón que el
menú lo hemos ident ificado con <div id=" menu1" >:

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<!—Código ejemplo para el curso -->
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a charset ="ut f-8" >
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<link rel=" st ylesheet " t ype=" t ext/ css" href=" est ilos.css" >
</ head>
</ head>
<!-- Cont enido de la página w eb -->
<body>
<!-- Cabecera de la página w eb -->
<div>
<h1>Port al w eb aprenderaprogramar.com</ h1>
<h2>Didáct ica y divulgación de la programación</ h2>
</ div>
<!-- Fin de la cabecera de la página w eb -->
<br / >
<!-- Cont enedor para la part e cent ral -->
<div>
<!-- menu -->
<div id=" menu1" >
<div>M enú</ div>
<hr/ >
<ul>
<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
</ div>
<!-- fin menu -->
<!—Aquí el resto del código del ejemplo -->

</ ht ml>

Escribe est a definición en el archivo est ilos.css y visualiza el result ado:

/ * Curso CSS est ilos aprenderaprogramar.com* /


body {font -family: Arial, sans-serif;}
#menu1{ color: red; t ext -decorat ion:none;}

Se obt iene algo similar a est o:

© aprenderaprogramar.com, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

Vemos que el color rojo no est á siendo aplicado por la et iquet a a (link) dent ro del element o con id
menu1, y est o a pesar de que la propiedad color es heredable (su valor inherit = yes). La propiedad t ext -
decorat ion t ampoco est á siendo aplicada. En est e caso t ext -decorat ion no es heredable (inherit = no).
En realidad que sea heredable o no no est á t eniendo efect o aquí ya que las propiedades por defect o del
element o <<a>> sobreescriben a las propiedades que hubiéramos definido en nuest ro est ilo menu1. Ya
sabemos que podemos sobreescribir la propiedad de color y no subrayado del element o <<a>> dent ro
de menu1 por ejemplo escribiendo est e código (ejemplo A):

/ * Curso CSS est ilos aprenderaprogramar.com* /


body {font -family: Arial, sans-serif;}
#menu1{ color: red; t ext -decorat ion:none;}
#menu1 a { color: red; t ext -decorat ion:none;}

Que más sint ét icament e podemos escribir así (ejemplo B):

/ * Curso CSS est ilos aprenderaprogramar.com* /


body {font -family: Arial, sans-serif;}
#menu1, #menu1 a { color: red; t ext -decorat ion:none;}

Conociendo la palabra clave inherit t ambién podríamos obt ener el mismo efect o así (ejemplo C):

/ * Curso CSS est ilos aprenderaprogramar.com* /


body {font -family: Arial, sans-serif;}
#menu1{ color: red; t ext -decorat ion:none;}
#menu1 a { color: inherit ; t ext -decorat ion:inherit ; }

En est e caso hemos indicado que los links dent ro de menu1, los hijos <<menu1 a>>, deben t ener un
color y un t ext -decorat ion t al como se haya definido en el padre, <<menu1>>.

El result ado con (A), (B) o (C) será algo similar a est o:

© aprenderaprogramar.com, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

El uso de inherit puede t ener algunas desvent ajas:

a) Algunos navegadores (en especial más ant iguos) puede que no reconozcan la palabra clave
inherit , con lo cual seguirían most rando los links dent ro del menú en color azul y subrayados.
b) Puede hacer el código menos claro o menos fácil de ent ender, en especial si t enemos que
recorrer varios niveles de herencia hast a comprobar desde dónde viene una propiedad. En est e
caso la sobreescrit ura puede result ar más clara.
c) Podemos caer en la t ent ación, como se ha hecho en el ejemplo ant erior, de aplicar inherit a una
propiedad que en CSS t iene valor inherit = no. Es decir, aplicar herencia CSS a una propiedad
que de acuerdo con la document ación oficial CSS no t iene herencia. Est o puede generar
confusiones y hacer el código difícil de comprender y mant ener. Sobreescribiendo la propiedad
no habría lugar a dudas.

Por ello en general no usaremos la invocación de est ilos de element os padre con inherit except o en
circunst ancias excepcionales. Est o no quit a que debamos conocer su significado pues podemos
enfrent arnos a t ener que analizar o modificar hojas de est ilo que hayan sido generadas por ot ras
personas.

RESUM EN

Las clases CSS pueden ser aplicadas a et iquet as específicas (por ejemplo que la clase solo sea aplicable a
<p> … </ p>) o a et iquet as de cualquier t ipo, según hagamos la definición de reglas CSS.

También pueden definirse los est ilos de modo que un mismo nombre de clase dé lugar a la aplicación
de dist int as reglas en función de en qué et iquet a se aplique, por ejemplo que una clase dé lugar a un
fondo naranja si se aplica en una et iquet a <p> y a un fondo azul si se aplica en una et iquet a <div>.

Las et iquet as HTM L o est ilos CSS definidos present an herencia de est ilos para aquellas propiedades
que t ienen un valor inherit “ yes” . La herencia puede no producirse si exist e sobreescrit ura del est ilo por
part e de algún element o, o si una propiedad t iene valor inherit no.

Puede forzarse la herencia desde un element o padre escribiendo en el código CSS del element o hijo
nombreDeLaPropiedad: inherit , aunque en general será preferible sobreescribir la propiedad en lugar
de indicar herencia con inherit por ser más claro.

EJERCICIO

Analiza el siguient e código HTM L. En él encont rarás t res et iquet as div. Haz lo siguient e:

a) Est ablece at ribut os class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la t ercera.

b) Usando CSS est ablece como color de t ext o el rojo (red) y t amaño de fuent e el 130% respect o de lo
normal para los element os h1 que se encuent ren dent ro de un element o cuyo valor class sea
<<principal>>.

© aprenderaprogramar.com, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.

c) Usando CSS est ablece como color de t ext o el verde y t amaño de fuent e el 110% respect o de lo
normal para los element os h3 que se encuent ren dent ro de un element o cuyo valor class sea
<<secundario>>.

d) Usando CSS est ablece como color de fondo el amarillo (yellow ) para los element os span que se
encuent ren dent ro de element os h3 que se encuent ren dent ro de element os cuyo at ribut o class sea
<<secundario>>.

e) Est ablece como t ipo de fuent e para t odo el document o HTM L el t ipo Arial.

<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<div>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
</ div>
<div>
<h3>Lanzamos el product o <span>X-FASHION</ span></ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
</ div>
<div>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o <span>T-M OTION</ span></ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ div>
</ body>
</ ht ml>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01014D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Referenciarr CSS con cualquier atributo HTM
H L.

REFERENC
CIAR CON CU
UALQUIER ATRIBUTO
A

Sabemos que podemo


os aplicar esst ilos CSS a part
p ir de una
a et iquet a HT
TM L (referen
nciar por t ag
g), o bien a
part ir de una part e de
el documentt o HTM L con
n un nombre
e único (refe
erenciar por id), o bien a part ir del
at ribut o class
c (referen
nciar por cla
ase). A part irr de CSS3 se int rodujo la
a posibilidad
d de referenc
ciar est ilos
mediant e cualquier att ribut o de el ement os HT
TM L.

Los at ribu
ut os son parámet ros associados a una
u et iquet a HTM L y qu
ue t ienen u n valor con cret o. Por
ejemplo en
e <div classs=” dest acad o” > … </ di v> el at ributt o class del cont enedorr div t iene como valor
“ dest acad
do” . Pero enccont ramos muchos
m ot ross at ribut os en el código HTM
H L. Algun os ejemplos son:

Ejemp
plo código Etique
eta Atribu
uto V
Valor del atriibuto

<a href=" lib


bros.ht ml" >Libro
os de programa
ación</ a> <a> … <// a> hreff libros.ht ml
m

<img src=" ht
h t p:/ / i.imgur.ccom/ afC0L.jpg" alt =" Not epad+
++" <img …> src ht t p:// / i.imgur.com / afC0L.jpg
t it le=" Not ep
pad++, un út il edit
e or de t ext o"" >

<img src=" ht
h t p:/ / i.imgur.ccom/ afC0L.jpg" alt =" Not epad+
++" <img …> alt Not epad+
++
t it le=" Not ep
pad++, un út il edit
e or de t ext o"" >

<img src=" ht
h t p:/ / i.imgur.ccom/ afC0L.jpg" alt =" Not epad+
++" <img …> t it le
e Not ep
pad++, un út ill edit or de
t it le=" Not ep
pad++, un út il edit
e or de t ext o"" > t ext o

<input t ype=" t ext " name=" nombre" / > <input …> t ype
e t ext

<input t ype=" t ext " name=" nombre" / > <input …> nam e nombre

<input t ype=" submit " valu e=" Enviar" > <input …> t ype
e submit

Con CSS podemos


p apl icar est ilos a t odos los element os de
e un t ipo que
e cumplan t e
ener ciert o at ribut o. La
sint axis a emplear es:

Nombre
eElement oHTM
M L[ selectorDe
eAtributo] {
propieda
ad1ParaEseTi poDeElementt os:valor;
propieda
ad2ParaEseTi poDeElementt os:valor;

propieda
adnParaEseTi poDeElementt os:valor;
}

© aprenderraprogramar.co
om, 2006-2029
Referenciar CSS con cualquier atributo HTM L.

Como select or de at ribut o t enemos dist int as posibilidades. A cont inuación señalamos algunas:

Selector de atributo Ejemplo CSS Observaciones

input [name] { background-color: red;} Selecciona t odos los element os que t ienen el
at ribut o nombreAt ribut o, independient ement e
p[t it le] {background-color: yellow ;}
[nombreAt ribut o] de su valor. En el ejemplo, t odos los input s que
Not a: no puede haber espacio ent re el lleven name t endrán fondo rojo y t odos los
nombre de element o y el corchet e. párrafos que lleven t it le t endrán fondo amarillo.

Selecciona t odos los element os cuyo


nombreAt ribut o es valor. En el ejemplo, se pone
input [name=" correo" ]{background- fondo amarillo y t amaño de let ra 75% a t odos los
[nombreAt ribut o = " valor" ]
color: yellow ; font -size:75%;} element os input con at ribut o nombre =
“ correo” . Si el input no t iene nombre ó este no
es “ correo” , no se aplica.

Selecciona t odos los element os cuyo


a[href^ =" ht t p:/ / w w w .aprender" ] nombreAt ribut o comienza por valor. En el
[nombreAt ribut o^ =" valor" ] {background-color: yellow ; font - ejemplo, se pone fondo amarillo y t amaño de
size:75%;} let ra 75 % a t odos los links cuyo at ribut o href
comienza por ht t p:/ / w w w .aprender

Selecciona t odos los element os cuyo


a[href* =" aprenderaprogramar" ] nombreAt ribut o cont iene a valor. En el ejemplo,
[nombreAt ribut o* =" valor" ] {background-color: pink; font - se pone fondo rosado y t amaño de let ra 125 % a
size:125%;} t odos los links cuyo at ribut o href cont iene
aprenderaprogramar.

Selecciona t odos los element os cuyo


a[href$=" .com" ], a[href$=" 6" ] nombreAt ribut o t ermina en valor. En el ejemplo,
[nombreAt ribut o$=" valor" ] {background-color: pink; font - se pone fondo rosado y t amaño de let ra 125 % a
size:125%;} t odos los links cuyo at ribut o href t ermina en
.com ó en 6.

Los select ores ^ , * y $ t ienen aquí un uso similar al que se da en ot ros lenguajes para crear lo que se
denomina expresiones regulares: expresiones que siguen un det erminado pat rón (como empezar por…,
t erminar por…, cont ener…, et c.).

Escribe código CSS ut ilizando est os select ores y pruébalos sobre el document o HTM L base que est amos
usando para el curso. Recuerda no dejar espacios ent re el nombre de element o y los corchet es, es
decir, a[href$=" 6" ] es correct o pero a [ href$=" 6" ] no es correct o por cont ener espacios.

EJERCICIO

Crea una regla de est ilos para aplicar la propiedad font -family: Arial a t oda la página w eb. Crea ot ra
regla que afect e a t odas las et iquet as de imagen (<img …>) que t engan at ribut o “ t it le” y aplícales las
siguient es propiedades CSS: border-st yle:solid, border-w idt h: 5px y border-color: Light Salmon. Aplica
est a regla al código HTM L base que est amos usando para el curso a t ravés del archivo est ilos.css con el
que est amos aplicando est ilos a est e document o HTM L y visualiza los result ados.

© aprenderaprogramar.com, 2006-2029
Referenciar CSS con cualquier atributo HTM L.

SOLUCIÓN

El código a incluir en el archivo est ilos.css sería el siguient e:

/ * Curso CSS est ilos aprenderaprogramar.com* /


body {font -family: Arial;}
/ * Aplicamos un borde especial a las imágenes que t ienen at ribut o t it le* /
img[t it le]{border-st yle:solid; border-w idt h: 5px; border-color: Light Salmon;}

Not a: si t u navegador no reconoce Light Salmon escribe #FFA07A en lugar de Light Salmon. Es decir,
escribiríamos border-color: #FFA07A;

El result ado al visualizar el document o HTM L en el navegador debe ser similar a est e, donde vemos las
imágenes que t ienen at ribut o t it le con un borde color salmón:

SELECTORES BÁSICOS FRENTE A ESPECIALES

La mayoría de las páginas w eb se pueden t rabajar con los select ores básicos basados en et iquet as
HTM L, at ribut os id y class. En general ot ros select ores t ienen menor uso, en part e porque pueden
complicar la dificult ad de comprensión de una hoja de est ilos. Rest ringiremos por t ant o su uso a casos
en que sea especialment e necesario y coment aremos adecuadament e el código CSS cuando los
ut ilicemos.

Próxima entrega: CU01015D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Selectores avanzados
a CSS.. Pseudoclases..

SELECTOR
RES AVANZA
ADOS CSS

Además de
d los selectt ores básico
os (por et iqu
uet a, por id o por classs) y de los sselect ores b asados en
at ribut os HTM L, disp
ponemos de ormas más de est ablecer crit erios de selecció
e algunas fo ón para la
n de est ilos CSS:
aplicación C select ore
es especialess y pseudocl ases CSS.

an los símbol os >, + y ~ pa


Hay selectt ores especi ales que usa ara especificcar la relación
n ent re elem
ment os.

Como sele
ect or de at ri but o t enemo
os dist int as posibilidades
p s. A cont inua
ación señalam
mos algunas:

S
Selector Ejemplo CSS
C Observa
aciones

Selecciona t odos
o los elemen
nt os de t ipo elemHijo que
div > ul
u { background -color: red;} est án cont enidos
e en un element o elemPadre
direct ament e (sin que existt an ot ros elem
ment os ent re
div > p.dest acado {b
background-
ambos). En el
e ejemplo, t o dos las list as t ipo ul que
elemPadre > elemHijo color: pink;}
est én dent ro de un div t end
drán fondo roj o, t odos los
mg[src$=" .png"" ]
div > im a clase sea desst acado y est én
párrafos cuya n dentro de
{backg
ground-color: blue;
b } un div t endrá
án fondo rosa y t odas las im
mágenes t ipo
png dent ro de
e un div t endrán fondo azul .

Selecciona t o dos los elemen


nt os de t ipo ele
emSiguient e
que est én exxact ament e desspués de un elemAnt erior
(sin ot ros el ement os ent re
e ellos) y que
e t engan al
elemAnt eri or + elemSiguie
ent e p.destt acado + p { colo
or: green;} ento padre qu
mismo eleme ue ést e. En el
e ejermplo,
aquellos párrrafos que est é
én just o despu
ués de ot ro
párrafo cuya clase sea dest acado t endrán el t ext o de
color verde.

Selecciona t odos los element os de t ipo


uacion que ap
elemAcont inu parezcan desp
pués de un
elemAnt erior (pudiendo exisst ir element os int ermedios
elemAnt eri or ~ elemPost erior
e p.destt acado ~ p{ colo
or: green;} ent re ellos) y que t engan a
al mismo elem
ment o padre
que ést e. En el ejemplo, aq
quellos párrafo s que est én
después de u n párrafo cuya clase sea dest acado y que
t engan el mismo cont enedo r t endrán colorr verde.

Es importt ant e t ener en cuent a que


q las regla
as que usan > solo se aplican cuand
do exist e un
na relación
direct a pa
adre – hijo ó cont enedo
or – cont enid
do sin que exist
e an cajass int ermedias ent re los element
e os
indicados. Por ejempl o div ul se ap
plica a una li st a incluso si
s el element o ul est á den
nt ro de un diivisor span
int ermediio ent re la lisst a y el div. En
E cambio di v > ul no se aplica
a a una list a si est á d
dent ro de un
n span. Las
reglas + sólo
s se aplica
an ent re “ he
ermanos” (element os co
on un mismo
o padre, por ejemplo do
os párrafos
dent ro de
e un div seríían hermano
os cuyo pad re es el div)) al hermano
o just o desp
pués del ind icado. Por
as reglas ~ se aplican ent re herm
últ imo la manos a t o dos los herrmanos que
e se encuen
nt ren con
post erioriidad al indica
ado incluso aunque
a est én separados por elementt os int ermed
dios.

© aprenderraprogramar.co
om, 2006-2029
Selectores avanzados CSS. Pseudoclases.

PSEUDOCLASES CSS

Exist en algunos element os especiales que se pueden seleccionar con lo que en CSS se denominan
pseudoclases, que son ident ificadores especiales que van precedidos por dos punt os. Ent re las
pseudoclases disponibles t enemos las siguient es:

Pseudoclase Ejemplo CSS Observaciones

Selecciona el primer element o dent ro de una serie de


element os del t ipo t ipoElem. En el ejemplo, allí donde
t ipoElem:first -child li:first -child {font -size: 200%;}
haya una serie de element os li, el primero de ellos
t endrá el doble de t amaño de fuent e normal.

Selecciona el últ imo element o dent ro de una serie de


element os del t ipo t ipoElem. En el ejemplo, allí donde
t ipoElem:last -child li:last -child {font -size: 200%;}
haya una serie de element os li, el últ imo de ellos
t endrá el doble de t amaño de fuent e normal.

Selecciona un element o si es hijo único, es decir, si es


el único element o dent ro del cont enedor t ipoElem. En
div.dest acado img:only-
el ejemplo se seleccionan las imágenes que est én
t ipoElem:only-child child{border-st yle:solid; border-
dent ro de cont enedores div cuya clase sea dest acado y
w idt h:10px;}
dent ro de los cuales exist a únicament e una imagen y
le aplica un borde de anchura 10 píxeles.

Selecciona el element o número number dent ro de una


serie de element os de t ipo t ipoElem. No puede haber
li:nt h-child(3) {font -size: 200%;} element os int ermedios de ot ro t ipo en la serie. En el
t ipoElem:nt h-child(number) p.dest acado:nt h-child(2) {font - ejemplo, el t ercer element o de una serie de li tendría
size: 50%;} el doble del t amaño normal de fuent e y el segundo
element o dent ro de una serie de párrafos con clase
dest acado t endría el 50 % del t amaño normal.

Selecciona t odos los element os de t ipo Elem1 que no


p:not (.dest acado) {color:
Elem1:not (t ipoElem2) sean de t ipo t ipoElem2. En el ejemplo, se seleccionan
yellow ;}
t odos los párrafos cuya clase no sea dest acado.

t ipoElem::first -let t er p::first -let t er {font -size: 300%;} Selecciona la primera let ra de t ipoElem

t ipoElem::first -line p::first -line {color:red} Selecciona la primera línea de t ipoElem

Posiciona al final del element o t ipoElem permit iendo


h1::aft er {cont ent :" * * * " ;
t ipoElem::aft er añadir cont enido usando cont ent :” cont enidoDeseado”
background-color: yellow ;}
con las propiedades que se indiquen.

Posiciona al principio del element o t ipoElem


h1::before {cont ent :" ---" ; color: permit iendo añadir cont enido usando
t ipoElem::before
blue;} cont ent :” cont enidoDeseado” con las propiedades que
se indiquen.

Escribe código CSS ut ilizando est os select ores y pruébalos sobre el document o HTM L base que est amos
usando para el curso.

© aprenderaprogramar.com, 2006-2029
Selectores avanzados CSS. Pseudoclases.

No deben exist ir espacios al escribir est as declaraciones. Por ejemplo li:nt h-child(3) {font -size: 200%;} es
válido pero li : nt h-child (3) {font -size: 200%;} no es válido por exist ir espacios.

Si el número referenciado con nt h-child no exist e, la regla no t endrá efect os. En lugar de first -child se
puede usar nt h-child(1) alt ernat ivament e.

Exist en más pseudoclases CSS que iremos est udiando a lo largo del curso.

COSAS QUE PUEDEN OCURRIR…

Quizás con el código que hemos ido probando en lo que llevamos de curso hayas encont rado algún
select or o fragment o de código que no t e ha funcionado como cabía esperar. Quizás hayas pensado que
has hecho algo mal, o que hay algún error en los cont enidos del curso. M uchas veces no será ni una
cosa ni ot ra. El mot ivo de que muchas veces no se obt enga el result ado esperado es la dist int a
respuest a de los dist int os navegadores (Int ernet Explorer, M ozilla Firefox, Chrome, Opera, Safari, et c.)
ant e det erminado código. A lo largo del curso iremos est udiando cómo resolver, en la medida de lo
posible, est os problemas. Pero como ya hemos indicado en alguna ocasión, en el mundo de los
desarrollos w eb los cambios y novedades son const ant es y no queda ot ra que t ener paciencia, t rat ar de
adquirir experiencia y mant enerse act ualizado a t ravés de cursos, int ernet , libros, revist as, et c.

Pondremos un ejemplo relacionado con lo ant erior. Hay una pseudoclase que es ::select ion cuya
inclusión en el est ándar CSS se ha discut ido y es permit ida por algunos navegadores pero por ot ros no.
La sint axis sería del t ipo p::select ion { color: gold; background-color: red; } y daría lugar a que cuando el
usuario hace una selección dent ro de un element o p, aquello seleccionado aparezca de color oro y con
fondo rojo. Al no haberse est andarizado, es posible que no se reconozca la sint axis por el navegador y
que no se pueda ver est e efect o, o bien que los dist int os navegadores t engan dist int as sint axis para
aplicar est os efect os y haya que escribir una línea específica de dist int a manera para cada navegador.

Al igual que con est a pseudoclase puede ocurrir algo similar con ot ros element os CSS. Sería ideal que
t odos los navegadores funcionaran igual, pero en la práct ica nos encont raremos pequeñas o grandes
divergencias ent re ellos.

Ot ra cosa que puede ocurrir con ciert a frecuencia es que est emos analizando el código css de una w eb
o aplicación w eb y encont remos código que no hayamos est udiado. En ese caso t enemos que acudir a
nuest ro conocimient o general sobre CSS para int erpret ar que por ejemplo div:empt y seleccionará los
element os div que no t engan hijos o cont enedores int ernos, mient ras que input :checked {background-
color: green;} aplicará color de fondo verde a aquellos element os input con el at ribut o
checked=" checked" . Sin embargo, buena part e de est e código puede que no sea soport ado por muchos
navegadores.

Algunas personas dicen: ¡Est o de los desarrollos w eb es caót ico! Quizás no sea para t ant o, en realidad
hay un grado de est andarización bast ant e amplio, pero sí es verdad que en algunos moment os puede
parecer un t ant o caót ico.

EJERCICIO

Dado est e fragment o de código HTM L que est amos usando como base para el curso:

© aprenderaprogramar.com, 2006-2029
Selectores avanzados CSS. Pseudoclases.

<ul>
<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
<!-- fin menu -->

Definir que est a list a es de clase (class) especial. La clase especial no t endrá est ilos especificados. En
cambio, deberá definirse que los element os li dent ro de la list a ul de clase especial t engan color de
fondo gris para los element os impares (primero, t ercero, quint o, sépt imo…) y color de fondo rosa para
los element os pares (segundo, cuart o, sext o, oct avo…).

Indicar los cambios en el document o HTM L y el código a incluir en el archivo css.

SOLUCIÓN

En el archivo HTM L escribiremos: <ul class=" especial" >

El cont enido del archivo css puede ser el siguient e:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ul.especial li:nt h-child(1) {background-color: grey;}
ul.especial li:nt h-child(2) {background-color: pink;}
ul.especial li:nt h-child(3) {background-color: grey;}
ul.especial li:nt h-child(4) {background-color: pink;}

Dado que solo t enemos 4 element os en la list a solo definimos los cuat ro primeros hijos.

Pero como queremos indicar que se apliquen los est ilos a t odos los element os impares y pares sería
más correct o usar est a definición:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ul.especial li:nt h-child(odd) {background-color: grey;}
ul.especial li:nt h-child(even) {background-color: pink;}

El result ado será similar a est e:

Próxima entrega: CU01016D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Selectores avanzados
a CSS.. Combinacione
es. Ejemplos y ejercicios.

EJEM PLOS
S SELECTORE
ES CSS

o del curso h emos ido est udiando disst int os t ipos de select ore
A lo largo es que nos p
permit en ind
dicar en un
archivo csss a qué ele
ement os del código HTM
M L se debe aplicar
a una regla.
r práct ica los select ores
En la p
pueden aparecer
a com
mbinados un
nos con ot r os: vamos a ver ejemp de select ores que nos
plos reales d
podemos encont rar en páginas w eb.
e

SELECTOR
R UNIVERSAL
L

Se usa el símbolo * como select or


o universal. Est e select or
o afect a a t odos
o los elem
ment os dentt ro de una
página w eb. Suele usarse
u para anular los márgenes o espaciadoss predet erm
minados que
e ut iliza el
or. Un ejemp lo sería el sig
navegado guient e:

* {
margin: 0 ; padding: 0;; color: green
n; t ext -decorrat ion:none;
}
Est a regla
a est ablece las propieda
ades de marrgin y paddin
ng en 0 pixe
eles para t od
dos los elem
ment os, su
color en verde
v y la pro
opiedad t extt -decorat ion con valor no
one.

Un aspect o int eresan


nt e del selecct or universa
al es que para las propie
edades que se indiquen
n anula los
or defect o q ue t engan lo
valores po os element o s HTM L para
a esas propie
edades. Por ejemplo los t ít ulos h1,
los párraffos, et c. t ien
nen unos má
árgenes y co
olores por de
efect o. Usan
ndo el selectt or universall podemos
anularlos (como en ell ejemplo estt ableciendo su valor a ce
ero) o est ab lecerlos a un
n valor inicia
al concret o
a t odos (com
igual para mo en el ejem
mplo se est ablece
a el co lor verde o que no existt a decoració
ón para los
o no se consigue si esa d efinición se hace usando
t ext os). Esst e result ado o body { … }

En la sigu ient e imagen


n vemos el result
r ado de aplicar esa definición
d de
el select or un
niversal para
a el código
e est amos ussando como base de ejem
HTM L que mplo para el curso.

© aprenderraprogramar.co
om, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.

Vemos que al aplicar las propiedades margin y padding 0 usando el select or universal, t odos los
element os aparecen “ apelot onados” al carecer del espaciado que incorpora el navegador por defect o.
Sin embargo, sí se aprecian algunos espacios. ¿Por qué? Porque t enemos definidos algunos salt os de
línea con et iquet as <br/ >. Est os salt os de línea siguen exist iendo.

M ÁS SELECTORES

Algunos select ores adicionales respect o a los que hemos vist o son est os:

Selector Ejemplo CSS Observaciones

Selecciona los element os de t ipo t ipoElem dent ro de


una serie cont ando desde el últ imo hast a la posición
li:nt h-last -child(2) {font -size:
t ipoElem:nt h-last -child(num) indicada por num. En el ejemplo, los penúlt imos
200%;}
element os li dent ro de una serie t endrán t amaño de
fuent e el doble de lo normal.

Selecciona los element os de t ipo t ipoElem dent ro de


li:nt h-of-t ype(odd) {font -size: una serie y a los que son de t ipo sel les aplica los
200%; color: red;} est ilos indicados. En el ejemplo los element os li
t ipoElem:nt h-of-t ype(sel)
li:nt h-of-t ype(even) {font -size: impares t endrán t amaño de fuent e doble del normal y
100%;} color rojo, mient ras que los pares t endrán t amaño de
fuent e normal y el color que corresponda.

Recuerda que en algunos navegadores es posible que no se obt engan los result ados deseados.

EJEM PLOS DE CÓDIGO CSS Y SU INTERPRETACIÓN

Hast a ahora hemos t rabajado con select ores normalment e de forma independient e: select ores por
et iquet a, por id, por clase, por at ribut o, select ores avanzados específicos, et c. Cuando nos enfrent emos
al desarrollo del código CSS de una w eb, o cuando t engamos que analizar una hoja de est ilos
desarrollada por ot ra persona, nos encont raremos que los select ores aparecen combinados de dist int as
maneras.

A cont inuación vamos a most rar ejemplos reales de código CSS y a int erpret ar el significado de los
select ores que se ut ilizan.

Selector Observaciones aprenderaprogramar.com

Select or universal. Afect a a t odos los element os de la w eb y sobreescribe


* { …}
los est ilos por defect o.

Select or que afect a a t oda la w eb pero no sobreescribe algunos est ilos por
ht ml { … }
defect o.

Select or que afect a a cualquier elemento con at ribut o class =


body.cont ent pane { … }
“ cont ent pane” que est é dent ro de <body> … </ body>

© aprenderaprogramar.com, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.

Selector Observaciones aprenderaprogramar.com

#mainout { … } Select or que afect a a cualquier element o con id = “ mainout ”

.padding { …} Select ores que afect an a element os con class = “ padding” .

Select or que afect a a element os con id = “ slo” sit uados dent ro de


h3 #slo { … } element os h3. Por ejemplo <h3 >Port al w eb para aprender programación
<span id="slo" > aprenderaprogramar.com</ span></ h3>

Afect a a element os cuya clase sea “ input box” que se encuent ren dent ro de
.find form .search .input box { … } element os cuya clase sea “ search” que se encuent ren dent ro de element os
form que se encuent ren dent ro de element os de clase “ find” .

Afect a a element os cuya clase sea “ input box” ó “ search” ó “ find” y a


.find, form, .search, .input box { … } element os <form> … </ form>. Nót ese que la diferencia con el ant erior
select or es que en est e caso los element os est án separados por comas.

Afect a a element os <label> … </ label> que se encuent ren dent ro de un


.search label { … }
element o con class = “ search” .

Afect a a element os cuya clase sea searchint ro que se encuent ren dent ro
.find .searchint ro { … }
de element os cuya clase sea find.

Afect a a <span> … </ span> que se encuent ren dent ro de element os con
.syndicat e-module span { … }
class = “ syndicat e-module”

fieldset a { … } Afect a a links (<a> … </ a>) dent ro de <fieldset > … </ fieldset >

Afect a a element os img dent ro de links, a element os fieldset y a element os


a img, fieldset , img { … }
img.

fieldset { … } Afect a a element os <fieldset > … </ fieldset >

Afect a a element os <fieldset> … </ fieldset> que est én dent ro de


#form-login fieldset { … }
element os con id = “ form-login”

Afect a a list as ul dent ro de element os con id = “ login” ó list as ul dent ro de


#login ul, #form-login ul { … }
element os con id = “ form-login”

.input box, .regist rat ion input , .login Afect a a element os con class = “ input box” ó element os input que est én
dent ro de ot ro con clase “ regist rat ion” ó element os input que est én
input , .cont act -form input ,
dent ro de ot ro con clase “ login” ó element os input que est én dent ro de
#jform_cont act _message, input {
ot ro con clase “ cont act -form” o element os con id =
…} “ jform_cont act _message” ó element os input .

© aprenderaprogramar.com, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.

EJERCICIO

Indicar el ámbit o de aplicación de los select ores que se indican:

Selector Ambito de aplicación

.header { … }

.find form .search .but t on { … }

.find, form, .search, .but t on { … }

.header label { … }

#cohe, #cobo { … }

.syndicat e-module img { … }

#form-login p { … }

#login br { … }

#login .but t on { … }

label.invalid { … }

div.it emComment sForm form


input #submit Comment But t on

#s5_bot t om_menu_w rap ul.menu li {


…}

.module_round_box ul.menu ul a {
…}

© aprenderaprogramar.com, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.

SOLUCIÓN

Selector Ambito de aplicación

.header { … } Afect a a element os cuya clase sea “ header” .

Afect a a element os cuya clase sea “ but t on” y est én dent ro de element os
.find form .search .but t on { … } cuya clase sea “ search” y est én dent ro de un <form> … </ form> que est é
dent ro de un element o cuya clase sea “ find” .

Afect a a element os cuya clase sea “ but t on” ó “ search” ó “ find” ó est én
.find, form, .search, .but t on { … }
dent ro de un <form> … </ form>.

Afect a a element os <label> … </ label> que se encuent ren dent ro de un


.header label { … }
element o con class = “ header” .

#cohe, #cobo { … } Afect a a element os con id = “ cohe” ó element os con id = “ cobo”

Afect a a <img … > que se encuent ren dent ro de element os con class =
.syndicat e-module img { … }
“ syndicat e-module”

#form-login p { … } Afect a a párrafos que est én dentro de element os con id = “ form-login”

Afect a a element os <br/ > que est én dent ro de element os con id = “ form-
#login br { … }
login”

Afect a a element os con class = “ but t on” que estén dent ro de element os con
#login .but t on { … }
id = “ login”

Afect a a element os con class = “ invalid” que est én dent ro de <label> …


label.invalid { … }
</ label>.

Afect a a element os con id = “ submit Comment But t on” que est én dent ro de
div.it emComment sForm form
element os <input > … </ input > que est én dent ro de element os form que
input #submit Comment But t on
est én dent ro de un div cuya clase sea “ it emComment sForm” .

Afect a a element os li que se encuent ren dent ro de un element o ul cuya clase


#s5_bot t om_menu_w rap ul.menu li {
sea “ menu” y que se encuent ren dent ro de un elemento con id =
…}
“ s5_bot t om_menu_w rap”

Afect a a links que se encuent ren dent ro de list as ul que se encuent ren dent ro
.module_round_box ul.menu ul a {
de ot ras list as ul cuya clase sea “ menu” y que se encuent ren dent ro de
…}
element os cuya clase sea “ module_round_box” .

Próxima entrega: CU01017D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Cascada CSS
S: concepto. im
mportant, espec
cificidad.

CASCADA
A EN CSS

En epígrafes ant eriore


es del curso hemos vist o cómo funciona la herencia CSS y có
ómo los elem
ment os de
rango infe
erior hereda
an las propie
edades CSS de
d element os
o de rango superior. Po
or ejemplo un
u párrafo
<p> … </ p>
p hereda la
as propiedad
des de color definidos p ara <body> … </ body>. Sin embargo, algunas
des no se heredan y en algunas propiedade
propiedad es como el color de lo
os link apre
eciábamos
peculiarid
dades.

unst ancia co n la que no s t endremo s que famili arizar es la exist encia d


Una circu de conflict os
s ent re las
declaracio or ejemplo si est amos t ra
ones CSS. Po abajando con
n un archivo CSS ext erno
o podemos in
ncluir en él
una decla
aración p {fo
ont -color: bl ue;}. Pero podría
p suced er que com o CSS int ern
no ent re las et iquet as
<head> … </ head> se
e encont rara una declaración p {font -color:
- red;}.. Y t ambién p
podría suced
der que en
un párraffo concret o dent ro del document
d o HTM L apare
eciera una d eclaración como <p st ylle = “ font -
color: yel low ;” . Est as declaracione
es suponen un conflict o o “ colisión de
d est ilos” p
para el naveg
gador, que
ha de deccidir qué est i lo aplicar.

Ya comen
nt amos que de
d forma gen
neral el nave
egador aplica
a el crit erio de
d precedenccia:

Declaració
ón en línea > Declaración
n int erna > Declaración
D ext
e erna

Est o pode
emos verlo como una cascada
c de forma
f que el
e navegadorr va recorrie
endo la casc
cada hast a
llegar al nivel
n más baj o posible.

CS
SS externo
(arc
chivos .css)

CSS inteerno
(dentro de <head>)
<

CSSS en línea
(uso de
d style="…"")

CSS de us
suario
(opción en
navegaddor)

ncluido en el
Hemos in e esquema la opción “ CSS de usu ario” para reflejar
r que algunos navegadores
permit en definir al usuario est iloss propios.

© aprenderraprogramar.co
om, 2006-2029
Cascada CSS: concepto. important, especificidad.

ESTILOS DE USUARIO CSS

A t ravés de una opción de menú de algunos navegadores, se puede definir por ejemplo que el t ext o se
debe most rar de un t amaño det erminado o de un color det erminado. Cuando el usuario elige est as
opciones normalment e anula aquello que ha sido definido por el aut or de la página w eb, de modo que
sus opciones prevalecen respect o a cualquier ot ro t ipo de declaración. Est a sit uación no es habit ual, de
hecho quizás la mayoría de los usuarios la desconocen o no la usan. Su empleo quizás se limit a a
personas con problemas de vist a para poner t amaños de fuent e grandes o colores específicos que les
facilit en la visión, o a usuarios avanzados que t ienen un gran dominio de las opciones de configuración.
A pesar de su relat ivo poco uso, como programadores w eb debemos t ener const ancia de ello porque es
posible que t engamos que resolver problemas donde est a configuración afect e a la solución del
problema.

Aprovechando que hablamos de opciones de configuración de los navegadores, cit aremos t ambién que
algunos navegadores permit en configurar opciones relat ivas a los est ilos por defect o. Ya hemos dicho
que cuando un document o HTM L carece de est ilos aplicados, en realidad sí t iene lo que podríamos
denominar est ilos básicos o est ilos por defect o que aplica el navegador. Por ejemplo, una navegador
recién inst alado puede t ener un t amaño de fuent e por defect o de 12 pixeles, pero en aquellos
navegadores que lo permit en, est e parámet ro podría cambiarse y est ablecerse en 16 pixeles a t ravés de
las opciones de configuración del navegador. También algunos navegadores permit en configurar ot ros
parámet ros adicionales. Est e es uno de los mot ivos por los que es recomendable no confiar en los
est ilos por defect o cuando se crean páginas w eb, sino especificar t odos los parámet ros desde nuest ra
hoja de est ilos para asegurarnos de que se aplican exact ament e las reglas CSS que nosot ros deseamos.

ORIGEN, IM PORTANCIA Y ESPECIFICIDAD

Nos encont ramos con que exist en dist int os t ipos de CSS como el predefinido por el navegador, el
definido por el aut or de la página w eb (que puede ser ext erno, int erno o en línea) ó el definido por el
usuario en la configuración de su navegador. A su vez, las reglas pueden ent rar en conflict o (que una
regla diga una cosa y ot ra regla una cosa dist int a) y no sólo a nivel navegador – aut or – usuario, sino en
lo que para nosot ros es la definición CSS principal, la que escribimos cuando creamos una w eb. Por
ejemplo en un archivo css ext erno podemos t ener una regla body {color: red;} y ot ra regla p { color:
blue;} y ot ra regla #dest acado {color: yellow ;}. Si en el document o HTM L nos encont ramos algo así
como <p id=” dest acado” > … </ p> ¿Qué est ilo aplica el navegador ent re los t res posibles?

Todas est as sit uaciones se denominan sit uaciones de conflict o o colisión y CSS define una forma de
resolución de conflict os o colisiones. A est e mecanismo de resolución de conflict os se le denomina
“ cascada” . La cascada se basa en det erminar t odas las reglas que son de aplicación a un element o y que
ent ran en conflict o, en ordenar esas reglas en base a unos crit erios y most rar como result ado en el
navegador la regla que haya quedado en primer lugar, a la que denominamos “ regla ganadora” .

El mecanismo es similar a la asignación de “ pesos” a cada regla CSS para lograr la ordenación.
Supongamos que la regla body {color: red;} t iene peso 45 sobre 100 para ser aplicada a los párrafos que
la regla p { color: blue;} t iene peso de 55 para ser aplicada a los párrafos y que la regla #dest acado
{color: yellow ;} t iene peso 70 para ser aplicada a un párrafo con id = “ dest acado” . Cuando el navegador

© aprenderaprogramar.com, 2006-2029
Cascada CSS: concepto. important, especificidad.

se encuent ra un párrafo dent ro del document o HTM L ve las reglas que le son de aplicación y el peso de
cada una, aplicando como regla ganadora la que mayor peso t enga.

¿Cómo se det erminan los pesos y el orden que se asigna a las reglas, es decir, cómo se det ermina qué
regla “ gana” cuando hay varias reglas que ent ran en conflict o?

Las reglas de resolución de conflict os son complejas y no t odos los navegadores responden de la misma
manera. Por ello en cursos de aprendizaje de CSS no recomendamos un est udio en profundidad, sino
conocer las reglas básicas y la filosofía del procedimient o de cascada.

El navegador sigue un proceso similar al siguient e para la resolución de colisiones de est ilos:

1) Crea una list a con t odas las reglas que son de aplicación direct a o indirect a por herencia a un
element o concret o. Cuant o más direct a o próxima est é la regla al element o, ant es se coloca. La
proximidad viene dada por cuán próxima est á la regla a una definición direct a del element o
afect ado. Por ejemplo si un element o div con id=” menu1” t iene un párrafo con class=” it ems”
ent re #menu1 {…} y .it ems {…} la regla ganadora a la hora de aplicar est ilo al párrafo es .it ems {
… } porque es la que más direct ament e define el element o. En est e ejemplo menu1 define al
element o indirect ament e a t ravés del div, mient ras que it ems define direct ament e la clase del
párrafo y por ello result a ganadora.
Ot ro ejemplo: para un párrafo dent ro de un div, una regla que hereda de div est á más próxima
que una regla que hereda de body. Si exist iera una regla direct a relat iva a los párrafos, est a iría
en primer lugar ant es que las demás debidas a herencia.
Si exist e una sola regla direct a relat iva al element o que se est á evaluando, se aplica y t ermina el
proceso de cascada.

2) Si exist e más de una regla con igual nivel de proximidad, se dividen las reglas por origen en base
a si se t rat a de est ilos de usuario, predefinidos del navegador, est ilos de aut or, y en caso de
est ilos de aut or si son css ext erno, int erno o en línea. Se ordenan en base al origen.
Básicament e se colocan primero las declaraciones en línea, luego las int ernas y luego las
ext ernas.

3) Se dividen las declaraciones de reglas en declaraciones import ant es y declaraciones normales.


Las declaraciones import ant es son las que est án escrit as como:

nombreElement o {propiedad: valor !important ;}

Si dos declaraciones son iguales y una lleva !import ant y la ot ra no, prevalece la que lleve !import ant
incluso aunque la ot ra aparezca con post erioridad. Por ejemplo si en un archivo css escribimos:

div {color:blue !import ant ;}

div {color: pink; }

Podría pensarse que los element os div t endrán color rosa por aparecer est a regla en últ imo lugar y
sobreescribir a la ant erior. Sin embargo, no ocurre así porque la palabra clave !import ant hace que esa
declaración prevalezca sobre ot ra igual que no lleve la palabra clave !import ant . El significado de
!import ant en est e caso sería similar a “ est a regla sobreescribe a cualquier ot ra que defina la misma
propiedad para el mismo element o y no es sobreescribible” .

© aprenderaprogramar.com, 2006-2029
Cascada CSS: concepto. important, especificidad.

Si en un archivo css ext erno t enemos la declaración p {color:blue !import ant ;} y en el document o HTM L
t enemos en línea <p st yle=” color:red;” > … </ p> la palabra clave !import ant anulará la precedencia del
origen, de modo que el t ext o se verá de color azul. El significado de !import ant quedaría ampliado a
“ est a regla no es sobreescribible y anula la precedencia debida al origen” .

Algunos navegadores ant iguos no reconocen la palabra clave !import ant . Ent re los navegadores
modernos, no t odos aplican exact ament e el mismo significado a la presencia de est a palabra clave.

Teniendo en cuent a el origen y si exist e o no la palabra clave !import ant , las reglas se ordenan
sit uándose en primer lugar las declaraciones de est ilos en línea, except o cuando una regla de aplicación
direct a al element o lleva la palabra clave !import ant . Si exist e una regla ganadora, se aplica.

4) Si no exist e una regla ganadora, para las reglas en conflict o se valora un parámet ro
denominado especificidad. Est aríamos en el caso de que exist an reglas que definan
direct ament e un element o y que ent ren en conflict o. Por ejemplo est as dos reglas:

body div.dest acado p {color: cyan;}


div.dest acado p {color: yellow ;}

Definen direct ament e el est ilo para párrafos que se encuent ren dent ro de element os div cuyo at ribut o
class sea “ dest acado” . No hay una regla ent re las dos que defina más direct ament e el valor de la
propiedad para ese t ipo de element o, por lo que hay que proceder a una resolución de conflict o. Est a
resolución se hace con el procedimient o de cálculo de especificidad que explicaremos más adelant e. La
regla con mayor especificidad será la que se most rará al visualizar la w eb.

Ot ro ejemplo de conflict o sería en un párrafo con id=” at elier” y est a declaración en un archivo css:

p {color: red; t ext -decorat ion:none;}


#at elier {color: yellow ;}

Ambas reglas son de aplicación direct a al párrafo, por lo que la regla ganadora se det ermina mediant e
el cálculo de especificidad.

5) Si se llega a que dos reglas t ienen igual especificidad, igual import ancia e igual origen y se
cont radicen, prevalecerá la que est é escrit a en últ imo lugar (crit erio de orden o de
sobreescrit ura).

EJERCICIO

En el archivo CSS ext erno a un document o HTM L encont ramos est a declaración:

.magicTit le {
margin:0px;
w idt h:20px;
height :30px;
color:green !import ant ;
border-st yle: hidden !import ant ;
}

© aprenderaprogramar.com, 2006-2029
Cascada CSS: concepto. important, especificidad.

Por ot ro lado dent ro del código HTM L t enemos el siguient e código:

<div class=" magicTit le" st yle=" border:1px solid blue; color: blue;" >
Aprendiendo a programar
</ div>

Responde a las siguient es pregunt as:

a) ¿Se most rará un borde para el div? ¿Por qué?

b) ¿Con qué color se most rará el t ext o, con color verde o con color azul? ¿Por qué?

c) ¿Se respet arán los valores de w idt h y height definidos en el archivo CSS ext erno o quedarán
anulados? ¿Por qué?

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01018D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Cálculo de especificidad.
e U de !import ant.
Uso

CÁLCULO DE LA ESPEC
CIFICIDAD

El mecaniismo de casccada CSS dett ermina que cuando dife


erent es reglas son de apl icación a un element o
ést as se ordenan
o en base
b a unos crit erios. Si con el crit errio de proxim
midad o de o
origen no se ha podido
e conflict o ent re reglas se
resolver el s valora lo que mina especif icidad. La especificidad para
q se denom p reglas
que aplica
an igual de direct amentt e a un elem
ment o es un valor numérico que ut illiza el naveg
gador para
ordenar r eglas que en
nt ran en confflict o.

La especi ficidad se puede


p calcul ar como un
n número qu
ue const a d e cuat ro díg
git os ABCD en el cual
t enemos:

er dígito: t om
A o prime ma valor 1 cu
uando el est i lo se declara
a en línea o cero
c en caso cont rario.

ndo dígito: se
B o segun e calcula sum
mando 1 porr cada ident ifficador de t i po id que af ect e a un ele
ement o. Si
una decla
aración es #m
menu1 #it em
m1 {…} el valo
or del segun do dígit o de
e especificida
ad para est a regla será
2, result ad
do de sumarr 1+1, una un
nidad por cad
da id que afe
ect e al eleme
ent o.

C o terce r dígito: se calcula sum ando 1 por cada clase o pseudoclas


se que afectt e a un elem
ment o. Por
ejemplo .dest acado { … } aport a un valor 1, mient ras qu
ue .dest acad o .especial .suit er { … } aport a un
valor 3 result ado de sumar 1+1+1 , una unidad
d por cada cla
ase o pseudo
oclase.

o dígito: se calcula
D o cuarto c suma
ando 1 por ca
ada element o HTM L o psseudoelemen
nt o que aparrezca en la
declaració
ón. Por ejem
mplo ul li a { … } aport a u n valor 3, re
esult ado de sumar
s 1+1+1
1, una unidad
d por cada
element o HTM L refer enciado.

Valor
V por Valor por
Valor poor Valor por atrib
butos class o e
elementos
atributo sty
yle atributtos id pseeudoclases simples

Una vez det


d erminado
o cada dígit o,
o se obt iene
e un valor nu
umérico (porr ejemplo 01
112) que pod
demos ver
como el peso
p de la re
egla. “ Gana” la regla con
n mayor peso
o. Es int eresant e fijarse en que el us
so de st yle
siempre ganará
g a cua
alquier comb
binación de reglas, lo cu
ual nos dice que habit ua
alment e los est ilos en
línea gana
arán. Una w eb bien consst ruida debe
e prescindir en
e general del
d uso de esst ilos en líne
ea, aunque
comproba
arás que porr un mot ivo u ot ro es fr ecuent e enc
cont rarlos cu
uando se ana
alizan desarrrollos w eb
exist ent ess. Después de
d los est iloss en línea, lo s est ilos deffinidos para un id result a
an ganadores respect o
al rest o. Finalment
F e, las clases o pseudoclase
es ganan a la
a definición de est ilos pa
ara element os
o simples
HTM L.

mos ant eriorm


Como vim ment e, la palabra clave ! import ant p uede int rodu
ucir excepcio
ones.

© aprenderraprogramar.co
om, 2006-2029
Cálculo de especificidad. Uso de !important.

EJERCICIO RESUELTO

Supongamos que t enemos el siguient e código HTM L:

<div> <!—Ejemplo aprenderaprogramar.com-->


<div class=" dest acado" >
<p> Aprender a programar es un objet ivo que se plant ea mucha gent e y que no t odos alcanzan.</ p>
… </ div> … </ div>

Si en un archivo css t enemos las siguient es declaraciones, det erminar cuál es la punt uación por
especificidad cuando proceda, cuál es la regla ganadora, de qué color se visualizará el t ext o y por qué:

Puntuación
Declaraciones Regla ganadora, color del texto y por qué
especificidad

body {color: grey;}


body div.dest acado p {color: cyan;}
.dest acado {color: green;}
div.dest acado {color: blue;}
div.dest acado p {color: yellow;}
div:first -child {color: magent a;}

body {color: grey;}

body {color: grey;}


.dest acado {color: green;}

body div.dest acado p {color: cyan;}


.dest acado {color: green
!import ant ;}

body div.dest acado p {color: cyan;}


.dest acado {color: green;}
p {color: blue;}

body div.dest acado p {color: cyan;}


.dest acado {color: green;}
p {color: blue !import ant ;}

© aprenderaprogramar.com, 2006-2029
Cálculo de especificidad. Uso de !important.

SOLUCIÓN AL EJERCICIO PLANTEADO

Not a: no t odos los navegadores responden igual a la palabra clave !import ant , por lo que podrías
encont rar algunos navegadores en que la respuest a no fuera exact ament e como hemos indicado.

Declaraciones Puntuación Regla ganadora, color del texto y por qué

1ª regla: no aplica direct ament e, si hiciéramos el cálculo body


aport a 1 al cuart o dígit o. Tot al 0001

body {color: grey;} No 2ª regla: body, div y p aport ant 1+1+1 = 3 al cuart o dígit o y
.dest acado aport a 1 al t ercer dígit o. Tot al 0013
body div.dest acado p {color: cyan;} 0-0-1-3
3ª regla: no aplica direct ament e. Si lo calculáramos, 0010
.dest acado {color: green;} No
4ª regla: no aplica direct ament e. Si lo calculáramos, 0011
div.dest acado {color: blue;} No
5ª regla: div y p aport an 1+1=2 al cuart o dígit o y .dest acado
div.dest acado p {color: yellow;} 0-0-1-2 aport a 1 al t ercer dígit o. Tot al 0012
div:first -child {color: magent a;} 0-0-1-1 6ª regla: la pseudoclase first -child aport a 1 al t ercer dígit o y div
aport a 1 al cuart o dígit o. Tot al 0011
Gana: la regla 2, el t ext o se vería de color cyan.

Gana: la única regla que, por herencia, afect a. El t ext o se vería


body {color: grey;} No
de color gris. Si calculáramos la especificidad sería 0001

body {color: grey;} No Gana: la segunda regla por ser la más próxima. El t ext o se vería
.dest acado {color: green;} 0-0-1-0 de color verde.

Gana: la primera regla. Aunque la segunda regla lleva la palabra


body div.dest acado p {color: cyan;} 0-0-1-3
clave !import ant es menos direct a. La primera regla afect a
.dest acado {color: green !import ant ;} No direct ament e al element o p por lo que t iene prevalencia.

body div.dest acado p {color: cyan;} 0-0-1-3

.dest acado {color: green;} No Gana la primera regla, el t ext o se verá de color cyan.
p {color: blue;} 0-0-0-1

Gana la t ercera regla: hay dos reglas que afect an direct ament e
body div.dest acado p {color: cyan;} 0-0-1-3
al element o p, la primera y la t ercera. Al t ener la t ercera la
.dest acado {color: green;} No declaración !import ant significa que se sobreescriben el rest o de
p {color: blue !import ant ;} reglas, independient ement e de su valor de especificidad y
!important
origen.

CÓM O USAR !IM PORTANT EN CSS

Considera una declaración de est e t ipo. Pruébala sobre el código HTM L de prueba que est amos usando
para el curso:

body div.dest acado p {color: cyan; t ext -decorat ion:underline;}

p {color: red !import ant ;}

© aprenderaprogramar.com, 2006-2029
Cálculo de especificidad. Uso de !important.

Aquí apreciamos dos cosas no del t odo correct as. En primer lugar, por convenio los programadores y
diseñadores w eb suelen poner las declaraciones más generales en primer lugar y las más específicas a
cont inuación, t ant o más abajo en el archivo o definición css cuant o más específicas sean. Est o facilit a el
análisis y comprensión de hojas de est ilo. Por t ant o cambiaríamos el orden de la declaración y
pondríamos en primer lugar la declaración más general relat iva a párrafos en general y en segundo
lugar la ot ra declaración, más específica.

En segundo lugar, si queremos que los párrafos sean rojos: ¿Para qué declarar un color de párrafo cyan
que luego anulamos con una declaración con la palabra clave !import ant ? En un archivo CSS con cient os
de líneas est as declaraciones generan confusión y dificult an el análisis del código. Cuando vemos cosas
de est e t ipo analizando páginas web en general corresponden a que la persona que generó el código no
t enía claros los concept os de CSS ó a que se han realizado correcciones apresuradas en el código
dejando inconsist encias. El problema est á en que cuando una hoja de est ilos se manipula múlt iples
veces añadiendo en cada ocasión más inconsist encias, se vuelve incoherent e e inmanejable.

El código ant erior queda más correct o así. Comprueba que obt ienes el mismo result ado:

p {color: red;}

body div.dest acado p {t ext -decorat ion:underline;}

Sólo debería usarse !import ant en casos concret os y en los que result a est rict ament e necesario. Usar la
palabra clave !import ant con frecuencia anulando est ilos repet idos es sínt oma de un mal código CSS.

En general, para personas que se est án iniciando con CSS recomendamos no usar !import ant en el
código, posponiendo su uso para cuando se haya adquirido experiencia y un mayor nivel de dest reza.

CONCLUSIONES SOBRE LA CASCADA CSS

El orden final con que se ordenan reglas en conflict o se basa en un proceso denominado “ cascada” . El
proceso es complejo, las reglas van cambiando en el t iempo y pueden exist ir diferencias ent re
navegadores. Por ello no result a de int erés aprender t odas las reglas del proceso de cascada ni est ar
realizando cont inuament e cálculos para det erminar precedencias. Sin embargo, sí result a de int erés
comprender el concept o y las reglas básicas porque nos puede ayudar a resolver problemas que
aparezcan en la visualización de páginas w eb. Con est o, más la aplicación de sent ido común y la
experiencia que iremos ganando a medida que t rabajemos con CSS, será suficient e para crear páginas
w eb con un código CSS de calidad.

Próxima entrega: CU01019D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Colores HTM
M L y CSS. RGB, hexadecimale s. Ejemplos.

COLORES EN HTM L Y CSS

Como es obvio,
o ent re los aspect o s import ant es
e de las pág
ginas w eb t enemos el co
olor. El color int erviene
en el at ra
act ivo y faci lidad de lectt ura que pu ede t ener una
u página w eb. No vam
mos a hablarr ahora de
cómo se deben
d comb
binar los colo
ores, sino de
e cómo se pu
ueden especcificar colore
es usando HT
TM L y CSS.
Hay dist in
nt as manera
as de ponerr nombre a un color: n ot ación RGB
B, códigos h exadecimale
es, uso de
nombres específicos, et c.

CÓDIGOS
S RGB DECIM
M ALES

Los color es en los monit


m ores de dadores per sonales y d isposit ivos m
e los ordend móviles com
mo t ablet s,
smart pho
ones, et c. se forman por combinació n de t res co
olores básico s: rojo (Red)), verde (Gre
een) y azul
(Blue). La combinació r de est os t res colores en inglés es RGB y así se
ón de las let ras e denomina al sist ema
de const r ucción de co
olores basado
o en indicar la proporció no de est os t res colores. Hay ot ros
ón de cada un
sist emas como
c el CM YK
Y que son de
d aplicación
n en el diseño
o y la indust ria de edición, pero
r gráfica y d p no en
los desarrrollos w eb.

Un color con
c el sist em
ma RGB se escribe en CSS
S así:

rgb (cant id
dadDeRojo, cant
c idadDeV
Verde, Cant id
dadDeAzul)

La cant ida
ad de cada color
c se exprresa ent re un
n valor mínim
mo que es ce
ero y un valo
or máximo q ue es 255.
Si se indiccara un núm ero menor que
q cero se consideraría
c e indica un n úmero mayo
cero, o si se or que 255
se conside
eraría 255. El ( 0, 0) es el negro y el color rgb (25
E color rgb (0, 55, 255, 255
5) es el blanc
co. El color
rojo será el rgb (255, 0,
0 0), el verd e rgb (0, 255
5, 0) y el azull (0, 0, 255).

a complet a d e rojo y verd


La mezcla de sin azul da
a lugar al am
marillo: rgb (2
255, 255, 0).

La mezcla
a complet a d e verde y azul sin rojo da
a lugar al cya
an: rgb (0, 25
55, 255).

El rest o de
d colores se
e const ruyen
n mezclando
o est os colorres básicos: por ejemplo
o el rgb (255
5, 100, 15)
sabemos que será un color rojizo--amarillent o porque hay mucho rojo,, algo de verd
de y poco azul.

Sobre el código
c de prrueba HTM L que est amo
os usando p ara el curso , en concrett o vamos a fijarnos
f en
nuest ra lisst a de eleme
ent os de men
nú:

<
<ul>
<
<li><a href=" #"
# >Inicio</ a><
</ li>
< <a href=" l ibros.ht ml" >L
<li> Libros de prog
gramación</ a>
a </ li>
< <a href=" cursos.ht
<li> c ml" >Cursos
> de pro
ogramación<// a> </ li>
< <a href=" humor.ht
<li> h ml" >Humor
> infor mát ico</ a> <// li>
< ul>
</

© aprenderraprogramar.co
om, 2006-2029
Colores HTM L y CSS. RGB, hexadecimales. Ejemplos.

Prueba a aplicar est as reglas CSS y visualiza el result ado, que deberá ser similar al que most ramos en la
imagen a cont inuación:

/ * Curso CSS est ilos aprenderaprogramar.com* /


li:first -child {background-color: rgb(255, 255, 0);}
li:nt h-child(2){background-color: rgb(0, 0, 0);}
li:nt h-child(3){background-color: rgb(0, 255, 255);}
li:nt h-child(4){background-color: rgb(255, 100, 15);}

CÓDIGOS RGB PORCENTUALES

Los códigos RGB se pueden expresar en valores de t ant o por cient o, correspondiendo el 0% a 0 y el
100% a 255 en la not ación ant erior. La sint axis será:

rgb (cant idadDeRojo%, cant idadDeVerde%, Cant idadDeAzul%)

El código del ejemplo ant erior en not ación porcent ual se escribiría así:

/ * Curso CSS est ilos aprenderaprogramar.com* /


li:first -child {background-color: rgb(100%, 100%, 0%);}
li:nt h-child(2){background-color: rgb(0%, 0%, 0%);}
li:nt h-child(3){background-color: rgb(0%, 100%, 100%);}
li:nt h-child(4){background-color: rgb(100%, 39.21%, 5.88%);}

Visualiza el result ado de est e código y comprueba que sea igual que el ant erior.

Not a: los valores de porcent ajes decimales deben ir separados con un punt o y no con una coma, por
ejemplo rgb(100%, 39.21%, 5.88%) es válido pero rgb (100%, 39,21%, 5,88%) no es válido.

La equivalencia ent re un valor numérico y el valor porcent ual se puede calcular con una regla de t res “ Si
255 equivale a 100, un valor equivale a …” o lo que es lo mismo, usando la fórmula:

Porcent aje equivalent e = Valor Numérico * (100/ 255) para pasar de valor numérico a porcent aje

Valor numérico = Porcent aje equivalent e * (255/ 100) para pasar de valor numérico a porcent aje

Por ejemplo, el valor numérico 15 es un porcent aje de 15 x 100 / 255 = 5.88%

© aprenderaprogramar.com, 2006-2029
Colores HTM L y CSS. RGB, hexadecimales. Ejemplos.

CÓDIGOS HEXADECIM ALES

Una de las not aciones soport ada por las hojas de est ilo CSS para colores, y hoy día la más usada, es la
not ación basada en códigos hexadecimales. Est e sist ema de códigos se basa en el alfabet o hexadecimal
compuest o por 16 símbolos: 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 código en base hexadecimal se t raslada a numeración decimal ut ilizando pot encias de 16. Por
4 3 2 1 0
ejemplo el código 1B0DE equivale al número 1x16 + 11x16 + 0x16 + 13* 16 + 14x16 = 65536 +
1 0
45056 + 0 + 208 + 14 = 110814. El código A3 equivaldría a 10x16 + 3* 16 = 160 + 3 = 163

La not ación hexadecimal sigue el sist ema RGB: define la cant idad de color rojo, verde y azul que se
aplica para formar un color, de ahí que t ambién se le denomine not ación RGB hexadecimal. Pero usa
ot ra not ación dist int a a la que vimos para expresar colores RGB ant eriorment e, en concret o con
not ación hexadecimal un color se designa como:

#cant idadDeRojoHexadecimal cantidadDeVerdeHexadecimalCant idadDeAzulHexadecimal

Los códigos se expresan como el símbolo # seguido de 6 símbolos, correspondiendo los dos primeros a
la cant idad de rojo expresada en not ación hexadecimal, los dos int ermedios a la cant idad de verde
expresada en not ación hexadecimal y los dos últ imos a la cant idad de azul expresada en not ación
hexadecimal. Por ejemplo #FF4D21 es la not ación de un color hexadecimal.

Los límit es siguen siendo 0 como límit e inferior, que en hexadecimal se expresa como 00, y 255 como
límit e superior, que en hexadecimal se expresa como FF (15x161 + 15x160 = 240 + 15 = 255).

La cant idad de cada color se expresa de la misma forma que en el sist ema RGB: ent re un valor mínimo
que es cero y un valor máximo que es 255, pero los números se escriben en hexadecimal. Si se indicara
un número hexadecimal menor que cero se consideraría cero, o si se indica un número hexadecimal
mayor que 255 se consideraría 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 complet a de rojo y verde sin azul da lugar al amarillo, rgb (255, 255, 0) ó #FFFF00
hexadecimal.

Si t uviéramos que expresar un color int ermedio como el rgb (255, 100, 15) t endremos que expresar
255, 100 y 15 en not ación hexadecimal, result ando 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 est e código CSS y comprueba que el result ado es el mismo que has obt enido con códigos rgb
decimales y códigos rgb porcent uales ant eriorment e.

/ * Curso CSS est ilos aprenderaprogramar.com* /


li:first -child {background-color: #FFFF00;}
li:nt h-child(2) {background-color: #000000;}
li:nt h-child(3) {background-color: #00FFFF;}
li:nt h-child(4) {background-color: #FF640F;}

© aprenderaprogramar.com, 2006-2029
Colores HTM L y CSS. RGB, hexadecimales. Ejemplos.

VARIACIONES PERM ITIDAS EN CÓDIGOS HEXADECIM ALES

Se admit en algunas variant es a la hora de definir un color hexadecimal en CSS.

Un color se puede designar con solo t res símbolos en lugar de seis. En est e caso se considera que es una
abreviación de la repet ición de esos símbolos, por ejemplo #FFF se considera abreviación de #FFFFFF y
#05F se considera abreviación de #0055FF.

También se admit e el uso de let ras en minúsculas en lugar de let ras mayúsculas. De est e modo, #ffffff
equivale a #FFFFFF ó #0dab4f equivale a #0DAB4F.

El sist ema más ext endido es usar seis símbolos y let ras mayúsculas, pero en ocasiones t e encont rarás
hojas de est ilo donde se usan con frecuencia t res símbolos u hojas de est ilo donde usan minúsculas.
También en muchos casos se encuent ran “ mezclas” , por ejemplo algunos colores designados con
mayúsculas y ot ros con minúsculas.

Para aquellas personas que se inician con CSS recomendamos usar siempre la not ación de 6 símbolos
(evit ando las abreviat uras) y let ras mayúsculas.

CONOCER A QUÉ COLOR CORRESPONDE UN CÓDIGO HEXADECIM AL

En ocasiones est aremos analizando una hoja de est ilos y veremos un color hexadecimal como #F477A2
y querremos saber a qué color, visualment e, corresponde. Para ello bast a escribir en un buscador como
bing, google o yahoo “ colores hexadecimal” y pinchar en cualquiera de las páginas que ofrecen el
servicio de most rar un color a part ir de su código. Una vez int roduzcamos el código, se nos most rará el
color que represent a. El result ado para el color de ejemplo que hemos puest o será similar a est e:

El mismo result ado podemos obt ener usando un programa de diseño gráfico como Gimp ó Phot oshop,
que en sus herramient as de color permit en int roducir códigos hexadecimales y nos muest ran el color
asociado a ese código.

© aprenderaprogramar.com, 2006-2029
Colores HTM L y CSS. RGB, hexadecimales. Ejemplos.

CONOCER EL CÓDIGO DE UN COLOR

En ocasiones t endremos una imagen en format o jpg, png, t iff, et c. y querremos conocer el código de
alguno de los colores que aparecen en la imagen. Para ello abriremos la imagen con un programa de
diseño gráfico como Gimp ó Phot oshop, escogeremos la herramient a “ recoge-color” y pulsaremos
sobre la part e de la imagen donde est á el color deseado. Una vez hecho est o, con la herramient a de
color del programa ya podremos ver el código hexadecimal, RGB, HSV, et c. correspondient e a ese color.

En ot ros casos veremos una página w eb y querremos conocer qué color es el que aparece como fondo,
borde, relleno, et c. de un element o. Para ello podemos proceder de varias maneras:

a) Usar una herramient a recoge-color w eb (como ColorZilla, disponible para M ozilla Firefox y
Google Chrome) que nos indica los códigos de color simplement e pinchando con el rat ón sobre
aquella part e de la w eb de la que queremos conocer el color.
b) Usar una herramient a de análisis w eb (como Firebug para M ozilla Firefox o Firebug Lit e para el
rest o de navegadores) que nos permit e obt ener múlt iple información sobre la w eb.
c) Hacer una capt ura de pant alla (print screen) y pegar la imagen obt enida en un programa de
diseño gráfico como Gimp ó Phot oshop. Una vez hecho est o, obt endremos el color como
hemos explicado para una imagen cualquiera.

Est as herramient as son en algunos casos complejas y no vamos a profundizar en ellas de moment o
porque no las consideramos ahora de import ancia para el desarrollo del curso. No obst ant e, nos ha
parecido oport uno cit arlas para ir t eniendo unas nociones generales sobre ellas y para que aquellas
personas que t engan curiosidad puedan invest igar por su cuent a si lo desean.

EJERCICIO

En la siguient e t abla est án mal ordenados los códigos de colores. Ordénalos de forma que en cada fila
est én los códigos equivalent es de forma ordenada y crea un document o HTM L donde se muest re un
cuadrado donde aparezca como t ext o el color con la not ación 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

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01020D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.

COLORES EN LA W EB

a forma más habit ual d e designar colores


Aunque la c en CSS
C es la nott ación hexad
decimal esco
ogiendo el
color dese
eado ent re lo
os varios mil lones posibl es, hay algun
nas curiosida
ades que me
erece la pena
a nombrar.
do, la exist encia de un conjunt
Por un lad c o de colores al qu
ue se denom
minaron “ web safe color s” que fue
usado durrant e varios años debido
o a que los monit
m ores en que se visua
alizaban las p
páginas web
b no t enían
capacidad
d para most rar
r t odos los colores.

LOS W EB SAFE COLOR


RS

o t ot al de co
El número olores RGB se
e puede calccular t eniend
do en cuent a que cada u
uno de los t res
r colores
admit e 25
56 valores (d
desde 0 hastt a 255), de ahí
a que el t o t al de colore
es disponible
e sea exagerradament e
grande, en concret o de
d 256 x 256
6 x 256 = 16.7
777.216 colo
ores. Cuando
o surgieron lo
os desarrollo
os web y el
nt ernet , la mayoría
auge de in m de lo
os monit oress sólo eran capaces de most
m rar 256 ccolores diferrent es. Por
ello se de
efinió una gama
g de col ores (en co
oncret o 216, ya que algunos se dejjaron reserv
vados para
o de sist em a) a los que
element os e se llamó “ colores segu
uros para la web” o “ w
web safe colo
ors” . Est os
colores erran colores que
q se most raban
r correcct ament e en t odos los m onit ores, de ahí que se l os llamara
colores se
eguros, frentt e a ot ros co lores que po
odían no mos
st rarse corre
ect ament e qu
ue eran inseg
guros.

Hoy día lo
os monit oress han evolucionado y ya t ienen capacidad para most
m rar millo
ones de colo res, con lo
cual ha perdido
p sen t ido la clasificación de colores en t re seguros e inseguro
os. La mayo ría de los
diseñadorres usan el color que l es apet ece ent re los millones
m disp
ponibles y t o
odos son se
eguros. No
obst ant e, los web saffe colors sig
guen siendo ut ilizados co
on preferen cia por algu nos diseñad
dores a los
esult a cómod
que les re do usar una gama de co
olores básica o les gust a usar una gama de colorres simple.
También son p algunos diseñadores que crean diseños
s usados por d para disposit ivoss con limit aci ones en la
gama de colores.
c Si q uieres consu
ult ar la list a con
c los 216 web
w safe col ors puedes h
hacerlo en la
a dirección
websafecolors.info

ÓN RGBA
NOTACIÓ

Exist en ott ras not acio nes o sist em


mas de colo res menos ut
u ilizadas pe
ero que vam
mos a nombrrar porque
est án adm
mit idas para su uso en CS
SS y conviene
e al menos conocerlas brrevement e.

La not aci ón RGBA in corpora un parámet ro adicional de


enominado “ Alpha” y q ue indica el grado de
encia que se aplica al color siend
t ranspare do 0.0 el valor
v mínim
mo, que sign
nifica comp let ament e
ent e, y 1.0 el valor máxim
t ranspare mo, que signi fica complett ament e opa
aco.

© aprenderraprogramar.co
om, 2006-2029
W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.

Un color con
c el sist em
ma RGBA se escribe
e en CS
SS así:

rgba (cant idadDeR


Rojo, cant ida
adDeVerde, Cant
C idadDeA
Azul, valorDe
eAlpha)

Sobre el código
c de pru
ueba HTM L que
q est amoss usando parra el curso, volvemos
v a fiijarnos en nu
uest ra list a
de elemen
nt os de men
nú:

<
<ul>
<
<li><a href=" #"
# >Inicio</ a><
</ li>
< <a href=" l ibros.ht ml" >L
<li> Libros de prog
gramación</ a>
a </ li>
< <a href="ccursos.ht ml" >Cursos
<li> > de pro
ogramación<// a> </ li>
< <a href=" humor.ht
<li> h ml" >Humor
> infor mát ico</ a> <// li>
< ul>
</

Prueba a aplicar est ass reglas CSS y visualiza el


e result ado, que deberá ser similar a
al que most ramos
r más
adelant e:

/ * Curso CSS
C est ilos aprrenderaprogra
amar.com* /
li:first -chil d {backgroun d-color: rgba((255,0,0,1);}
li:nt h-child und-color: rgb a(255,0,0,0.66);}
d(2){backgrou
li:nt h-child und-color: rgb a(255,0,0,0.33);}
d(3){backgrou
li:nt h-child und-color: rgb a(255,0,0,0);}}
d(4){backgrou

Cuando t enemos
e un fondo
f blanco
o y vamos añ adiendo t ran
nsparencia el
e efect o que
e observamo s es que el
color pare
ece que se va haciendo más
m claro. En
n realidad no olor se haga más claro, sino
o es que el co s que al
t ener máss t ransparen cia deja ver cada vez má
ás el fondo b lanco result ándonos
á a la vist a más cl aro.

Escribe la
a declaració n .dest acad o {backgrou
und-color: rg
gb(0,0,0);} y añade en el HTM L có
ódigo para
indicar qu
ue la list a se ase: <ul classs=" dest acad o" >. Con estt o, comprue
ea de esa cla eba la diferencia ent re
añadir t ra
ansparencia t eniendo fon
ndo blanco o añadir t ran
nsparencia t eniendo
e fond
do negro. En
n el primer
caso el co
olor se va hacciendo cada vez más clarro, en el segu
undo se va h aciendo cad a vez más os
scuro.

Not a: no t odos los n avegadores admit en la not ación RG


GBA. En esp ecial, navegadores ant ig
guos no la
soport an. El número de
d colores d isponibles ess más de 16 millones, añ
ñadiéndole la
a t ransparen cia result a
un númerro de coloress práct icame
ent e infinit o.

© aprenderraprogramar.co
om, 2006-2029
W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.

NOTACIÓ
ÓN HSL

El sist ema
a HSL usa u na rueda de
e colores y t res paráme
et ros, el prim
mero un valo
or numérico
o y los dos
siguient ess un porcentt aje, de modo
o que un col or HSL se escribe:

hsl (an guloDeGiroC


Color, sombrraGrisSat urac
ción%, Cant i dadDeAzul, brillo%)

El primer parámet ro o ángulo re


epresent a el color. En la
a rueda el án
ngulo de 0 g
grados (o 36
60 grados)
representt a el rojo, el ángulo de 12
20 grados el verde y el án
ngulo de 240
0 grados el azul.

El segund o parámet ro
o o porcent aje de sat uración represe
ent a la cant id
dad de color frent e a som
mbra gris y
el 100 % represent
r a el
e color comp
plet o mient ras
r que el 0%
% supone nad
da de color y t odo de so
ombra gris.
Todo colo
or con sat ura
ación 0 es un a sombra gr is.

El t ercer parámet
p ro o porcent aje de brillo ge
enera el negrro si es 0% y color más claro (repres
sent aría la
incidencia
a de luz sobr e el color) cu
uant o más p róximo est á a 100% hastt a llegar al bllanco.

Prueba a visualizar
v el código HTM L con est a de
efinición de est ilos:

/ * Curso CSS
C est ilos aprrenderaprogra
amar.com* /
li:first -chil d {backgroun d-color: hsl(0,,0%,50%);}
li:nt h-child
d(2){backgrou
und-color: hsl((0,50%,50%);}}
li:nt h-child und-color: hsl((0,100%,50%);}
d(3){backgrou
li:nt h-child
d(4){backgrou
und-color: hsl((58,100%,50%
%);}

El result ado debe ser la primera


a línea del menú
m gris, la
a segunda grisácea-rojizza, la t ercera
a roja y la
cuart a en un t ono am arillo.

Not a: no t odos los navegadores


n admit en la
a not ación HSL.
H En espe
ecial, navega
adores ant ig
guos no la
soport an.

© aprenderraprogramar.co
om, 2006-2029
W eb safe colors, RGBA, HSL, HSLA, lista de colores HTM L - CSS.

NOTACIÓN HSLA

El sist ema HSLA es respect o al HSL análogo a lo que es el sist ema RGBA respect o al RGB, es decir, añade
un parámet ro adicional alpha que represent a la t ransparencia y que t oma un valor ent re 0 y 1. La
sint axis es:

hsla (anguloDeGiroColor, sombraGrisSat uración%, Cant idadDeAzul, brillo%, valorDeAlpha)

Los efect os que se generan son los mismos que hemos descrit o para la not ación RGBA. Recuerda que al
añadir t ransparencia el efect o obt enido depende del color de fondo que t engamos. Si el fondo es
blanco, la impresión que se genera es que el color se va aclarando. Si es oscuro, la impresión es que el
color se va oscureciendo.

NOM BRES DE COLORES ESTÁNDAR

Los navegadores permit en el uso de nombres específicos para más de cien colores: además de los más
conocidos (Red, Blue, Yellow, Brown, Pink, Green, etc.) exist en nombres para muchos colores más. Por
ejemplo BlueViolet es color azul violáceo, Tomat o es color t omat e, SkyBlue es color cielo. Se admit e el
uso de minúsculas y mayúsculas indist int ament e: es válido t ant o red como Red, ó BlueViolet como
blueviolet .

No es un sist ema muy ext endido y es posible que algunos navegadores no reconozcan algunos
nombres, pero algunos diseñadores lo usan y sobre t odo se recurre a él cuando se quiere poner un
color rápidament e y nos acordamos del nombre pero no del código hexadecimal. En general, se
desaconseja su uso ya que es menos seguro que el uso de códigos de color.

A modo de curiosidad, ponemos a cont inuación una list a de nombres de colores.

aliceblue, ant iquewhit e, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet , brown,
burlywood, cadet blue, chart reuse, chocolat e, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan,
darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagent a, darkolivegreen, darkorange, darkorchid, darkred,
darksalmon, darkseagreen, darkslat eblue, darkslat egray, darkt urquoise, darkviolet , deeppink, deepskyblue,
dimgray, dodgerblue, firebrick, floralwhit e, forest green, fuchsia, gainsboro, ghost white, gold, goldenrod, gray,
green, greenyellow, honeydew, hot pink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen,
lemonchiffon, light blue, lightcoral, lightcyan, lightgoldenrodyellow, light gray, light green, light pink, light salmon,
light seagreen, light skyblue, light slat egray, light st eelblue, light yellow, lime, limegreen, linen, magent a, maroon,
mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslat eblue,
mediumspringgreen, mediumt urquoise, mediumviolet red, midnight blue, mint cream, mist yrose, moccasin,
navajowhit e, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, palet urquoise,
paleviolet red, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue,
saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slat eblue, slat egray, snow,
springgreen, st eelblue, t an, t eal, t hist le, t omat o, t urquoise, violet , wheat , whit e, whit esmoke, yellow,
yellowgreen

© aprenderaprogramar.com, 2006-2029
W eb safe colors, RGBA, HSL, HSLA, lista de colores HTM L - CSS.

EJERCICIO

Crea un document o HTM L con 20 divisiones. En las diez primeras divisiones int roduce el color RGB
178,34,34 con grados de t ransparencia desde 0.1 hast a 1.0 (en cada división un punt o decimal más de
opacidad). En las ot ras diez divisiones int roduce el color RGB 218,165,32 con grados de t ransparencia
desde 1.0 hast a 0.1 (en cada división un punt o decimal más de t ransparencia). En cada división escribe
el código de color y el grado de t ransparencia que muest ra. Por ejemplo: <<RGB 178,34,34 con
t ransparencia 0.6>>

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01021D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Color de fon
ndo. Propiedad
d background-c
color CSS.

BACKGRO
OUND-COLO R CSS

La propied
dad backgro
ound-color de
e CSS nos pe
ermit e est ab lecer un colo
or de fondo e
en cualquierr element o
delimit ad o dent ro de una página w eb. Todo element
e o t ie
ene la propie
edad color d
de fondo con
n valor por
defect o “ t ransparent e” (t rasnparrent ), por lo que mucha
as veces se piensa que no exist e un
n color de
fondo porr defect o. En
n realidad sí exist
e e, pero no se ve.

PROPIEDAD
D CSS background-color

Valor po
or defecto t ranssparent

¿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 para esta
Un co
olor HSL ó HSL
LA p.ej. hsl(0, 100%, 50%)
ad
propieda
Un co
olor designado
o con nombre
e (p.ej. red)

inherrit (el color se heredará del element o pad


dre)

background-c
h1 {b color:#ffff00
0;}
Ejemplo s aprendera
aprogramar.c
com
.destt acado {back
kground-colo
or: red;}

edad backgrround-color es bast ant e simple. De


La propie e hecho, ya
a la hemos ut ilizado p ara poner
ejemplos básicos sob
bre select ore
es css y ot ras cuest iones
s a lo largo del curso, p or lo que no
o vamos a
ext endern
nos en ella.

Un aspectt o int eresantt e de est a p ropiedad es que en ocas


siones puede
e servirnos p
para visualiza
ar las cajas
que confo
orman una página w eb
b. Por ejem plo consideremos los element
e os h
h1 y h2 que
e t enemos
definidos en el código e amos usando para el curso:
o HTM L que est

<
<body>
<
<div>
<
<h1>Port al we
eb aprenderap
programar.co m</ h1>
<
<h2>Didáct n de la programación</ h2>
ica y divulgación
< div>
</
< >…
<br/

mos est os estt ilos:


Si aplicam

/ * Curso CSS
C est ilos aprrenderaprogra
amar.com* /
body {background-colo r: yellow;}
h1{backgrround-color: blue;}
b
h2{backgrround-color: r ed;}

© aprenderraprogramar.co
om, 2006-2029
Color de fondo. Propiedad background-color CSS.

Vemos con claridad cuáles son las cajas que int ervienen. Si quisiéramos ver la caja div que envuelve a
los t ít ulos h1 y h2 bast aría con añadir div {background-color: pink;} con lo que veríamos algo así:

Al visualizar las cajas podemos ent ender mejor qué es lo que est á ocurriendo en una página web. No
siempre será necesario, de hecho cuando t engamos un poco de experiencia práct icament e las iremos
visualizando ment alment e sin necesidad de aplicar un color de fondo, o usaremos una herramient a de
análisis para est udiarlas, pero al comenzar a t rabajar con CSS nos podrá servir de ayuda en algunas
ocasiones.

Si analizamos la imagen y el result ado obt enido podemos ver algunas cosas curiosas:

a) A pesar de que en el código no t enemos ningún element o que separe el div del body, el div
aparece “ separado” del body t ant o por arriba como por la izquierda como por la derecha. Lo
comprobamos porque se ve el fondo amarillo. ¿Por qué exist e esa separación?
b) El h1 est á perfect ament e ajust ado al div: no exist e separación alguna ni por arriba ni por la
izquierda ni por la derecha. El borde azul est á perfect ament e alineado con el borde rosado. En
cambio, hacia abajo el h1 est á separado del h2, si no exist iera esa separación no se vería el
fondo rosado. Sin embargo en el código no hemos especificado ningún element o que dé lugar a
esa separación ent re h1 y h2. ¿Por qué aparece est a separación?

Aparent ement e la única división “ normal” ent re element os vendría dada por el <br/ > que est á debajo
del div, y dado que el br es un element o separador sería lógico que creara un espacio ent re la caja del
div y la siguient e caja dent ro del document o HTM L.

La razón para esos espacios que apreciamos se debe a los est ilos por defect o que int roduce el
navegador para los element os div, h1 y h2. Hablaremos de ello más adelant e, de moment o nuest ro
objet ivo ha sido únicament e conocer est a propiedad y ver cómo nos puede ayudar a conocer el modelo
de cajas CSS y el funcionamient o del navegador. M ás adelant e hablaremos de por qué aparecen esas
separaciones ent re element os y de cómo podemos modificar o anular esos est ilos que por defect o
int roducen los navegadores.

Recordar que se puede añadir un grado de t ransparencia a un color de fondo definiendo el color con
not ación rgba ó hsla como hemos explicado en apart ados ant eriores del curso.

© aprenderaprogramar.com, 2006-2029
Color de fondo. Propiedad background-color CSS.

EJERCICIO

Crea un document o HTM L donde la vent ana del navegador est é dividida en 6 part es, cada una con su
borde. En cada división pon como color de fondo lo siguient e:

a) División 1: un color expresado con not ación RGB.

b) División 2: un color expresado con not ación RGBA.

c) División 3: un color expresado con not ación hexadecimal.

d) División 3: un color expresado con not ación HSL.

e) División 4: un color expresado con not ación HSLA.

f) División 5: un color designado con un nombre.

En cada división incluye un t ext o con la not ación y color empleado. Por ejemplo <<Not ación RGB, color
218, 165, 32>>. Para comprobar si t us respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01022D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Versiones CSS.
C Algo de his
storia y perspec
ctiva.

VERSIONE
ES CSS

Comproba
arás que a lo
o largo del curso no hem
mos dedicado
o apenas una
as palabras a hablar de cuáles
c son
las versio nes de CSS. El mot ivo pa
ara ello es qu
ue con est e curso
c pret en
ndemos t ran smit ir más la
a lógica de
CSS y sus fundament os
o que las esspecificidade
es concret as que t iene ca
ada versión. No obst ant e,
e haremos
ahora algu
unas reflexio
ones y coment arios sobre
e las version es CSS.

EL W ORLD
D W IDE W EB
B CONSORTI UM O W 3C

CSS es un lenguaje cu
uya definición
n ha sido cre
eada por el World
W Wide Web Consorrt ium, cuyas
s siglas son
W3C. Se t rat a de un consorcio
c int ernacional que
q produce especificacio
ones, recom endaciones, manuales
y herram ient as en re esarrollo de int ernet . El W3C es un organismo que cuent a ent re sus
elación al de
principale
es promot orres al M IT (M ology, USA), el ERCIM (European
( assachussset s Inst it ut e of Techno
Research Consort ium
m for Inform at ics and M at hemat ics,, part icipado
o por nume
erosos países
s), la Keio
Universit y (Japón) y la
a Beihang Un
niversit y (Chi na).

Uno de lo
os objet ivoss principales del W3C ess generar es
st ándares: document
d os donde se definen
d las
sint axis d e lenguajes y prot ocoloss que int ervie
enen en el desarrollo
d de
e int ernet . El objet ivo es promover
que las empresas,
e in st it uciones y personas que
q an en desar rollos w eb ut
part icip an o t rabaja u ilicen un
mismo lenguaje y se pongan de acuerdo a la
a hora de ge uct os relacio nados con
enerar soft w are y produ
int ernet . ¿Por qué decimos
d que
e la propied
dad para da
ar color de fondo es b ackground-c
color y no
back_colo orque la forrma de nom brar est a prropiedad ha sido definid
or ó bcol? Po da por el W3
3C de est a
manera y t odas las em
mpresas, instt it uciones y personas
p lo han
h acept ado
o.

No siemp
pre lo que propone
p el W3C
W es ace
ept ado. El W3C
W emit e propuest
p as, no leyes de
e obligado
cumplimie
ent o porque
e no t iene ca
apacidad leg o. Hay ot ras inst it uciones o grandes empresas
gal para ello
que t amb
bién hacen propuest
p os, y en ocassiones esas propuest as o crit erios
as o t ienen crit erios propio
alt ernat ivvos hacen que
q haya dist
d int os gr upos de t rabajo
r ándares o forma de
y di st int os est á
funcionam
mient o del so
oft w are.

Por últ imo


o, hay que t ener
e en cuen
nt a que el W3C
W est á form n equipo de personas qu e t ambién
mado por un
comet en errores y qu
ue “ lo que di ce el W3C” no or ni lo más usado. No
n siempre t iene por qu é ser lo mejo
obst ant e, hoy día el W3C
W es la pri ncipal inst it ución
u de refe
erencia a la hora
h de crearr y difundir est
e ándares
relacionad
dos con los desarrollos
d w eb, ent re elllos el CSS.

LAS VERSIONES DE CS
SS

El W3C t r abaja cont in uament e pa


ara mejorar el
e lenguaje CSS,
C corrigien
ndo errores e incorporan do nuevas
funcionaliidades. Ant es
e de llegar a una especcificación o recomendac
r ción oficial se t rabajan numerosos
n
borradore
es que son somet idos a revisión y co
orrección. Cu
uando se alca
anza un relat ivo grado de
d acuerdo
ent re los miembros d el W3C se lib
bera lo que se
s denomina
a una recome
endación ofiicial de CSS ó versión a
modo de propuest a p ara su uso y aplicación por
p t odas las empresas, in
nst it uciones y personas.

© aprenderraprogramar.co
om, 2006-2029
Versiones CSS. Algo de historia y perspectiva.

Las versiones de CSS a lo largo de la hist oria han sido* :

CSS 1: publicada en 1996.

CSS 2: publicada en 1998.

CSS 2.1: publicada en 2004.

CSS 3: publicada en 2011.

CSS 4: se est ima que pueda ser especificación oficial en 2019.

* Las fechas indicadas son sólo orient at ivas, la realidad es que una version no aparece un día, sino que
t iene un largo proceso de desarrollo que a veces dura años. Con CSS 3 se int rodujo una fuert e
modularización o división por apart ados de CSS, de modo que algunos módulos se encont raban en fase
de borrador mient ras ot ros se convert ían en especificación oficial.

A la pregunt a de ¿qué versión usar? damos la siguient e respuest a: la que sea de más amplia difusión en
el moment o en que est és haciendo un desarrollo w eb. Ten en cuent a que CSS en general va
mant eniendo su sint axis y lógica con las diferent es versiones, y que en general una nueva versión
mant iene las caract eríst icas de las ant eriores y además int roduce nuevas posibilidades. Por t ant o t us
conocimient os de CSS t e seguirán valiendo aunque aparezcan nuevas versiones. Por ejemplo, algunas
propiedades que aparecieron con CSS 1, ent re ellas background-color, siguen usándose en CSS 3 y CSS
4. Ot ras propiedades aparecieron con CSS 2 ó 2.1, ot ras han aparecido con CSS 3 y ot ras con CSS 4.

Por ot ro lado, hay que t ener en cuent a que “ seguir con exact it ud” una versión no significa que nuest ra
w eb vaya a funcionar perfect ament e, debido a que no t odos los navegadores reconocen t odas las
propiedades o sint axis que se definen en una versión. También puede suceder que un navegador sí
reconozca la sint axis pero no ofrezca el mismo result ado que ot ro, lo cual da lugar a problemas en la
visualización de páginas w eb.

Conseguir buenos result ados con CSS pasa por est ar al día de la especificación del W3C pero t ambién
por seguir las novedades de la w eb, de los navegadores y siendo práct icos, por hacer muchas pruebas y
comprobaciones con dist int os navegadores o herramient as específicas para est e fin.

EJERCICIO

Busca información en int ernet e indica para cada una de las siguient es propiedades CSS en qué versión
de CSS fueron int roducidas y si siguen est ando vigent es en la act ual versión de CSS: a) clip , b) font -
w eight c) overflow d) animat ion. Para comprobar si t us respuest as son correct as puedes consult ar en
los foros aprenderaprogramar.com.

Próxima entrega: CU01023D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Documenta
ación oficial CSS
S, W 3C Schools
s y W 3C validattor

SERVICIOS DEL W 3C

oment ado qu
Hemos co ue el est ánd ar CSS es de
efinido por el
e consorcio int ernaciona
al W3C. El W3C
W ofrece
algunos servicios
s de int erés a t ra
avés de int ernet
e , como la posibilida
ad de consu lt ar la docum
ment ación
oficial rela n CSS, una w eb divulgat i va y con ejemplos sobre
acionada con n de CSS en la práct ica
e la aplicación
y la valida
ación (comprrobación de cumplimientt o del est ánd
dar) CSS de páginas
p w eb..

DOCUM ENTACIÓN OF
FICIAL CSS

La w eb oficial
o del co nsorcio W3C g/ . A t ravés de est a w eb podemos acceder a
C es ht t p:/ / w w w .w 3.org
dist int os cont enidos del t rabajo de la W3C, que no solo
o t rat an sob
bre CSS, sino
o en generall sobre las
as relacionad
t ecnología das con el desarrollo
d w eb
e como HTM
M L, CSS, Javvascript , gráfficos, audio y video en
ent ornos w eb, prot occolos, et c.

Desde la página princcipal de W3C


C podemos navegar
n hastt a llegar a la
a página oficial CSS (cuya
a URL será
similar a est
e a: ht t p:/ / w w w .w 3.org nt rar numer osa información sobre
g/ St yle/ CSS/ ) donde pod remos encon
CSS (en i nglés). Dentt ro de est a información est án dispo
onibles las especificacio
e ones oficiales
s CSS, por
ejemplo en
e ht t p:/ / w w w .w 3.org/ TR/
T select ors// podemos consult
c ar la especificació
e ón oficial de select ores
para CSS. El principal problema de
e recurrir a l a document ación oficial para el apre
endizaje es que
q result a
demasiad
do ext ensa y demasiado t écnica. Tam
mbién exist en
n numerososs document o
os t écnicos, algunos
a de
los cuale
es son reccomendacio nes, ot ros pre-recom endaciones (se denom
minan cand
didat os a
dación) y ot ros borrado res. Est e exceso de info
recomend e present aci ón result a
ormación y su forma de
poco út il de cara a ad
dquirir una formación
f prráct ica y básica sobre CS
SS. No obst ant e, convien
ne conocer
ncia porque puede
su exist en p ser ne
ecesaria su consult a en algún
a momen
nt o.

RECURSO
OS DIDÁCTICO
OS SOBRE CS
SS

Indicado ya que la document


d aci ón oficial CS
SS puede se
er demasiad o árida o exxt ensa, ¿qué
é recursos
exist en qu
ue sean más didáct icos y educat ivos?
? Exist en num
merosas alt ernat
e ivas.

er lugar señ alaremos la página w eb ht t p:/ / w w w .w 3schoo ls.com/ . Estt a plat aform
En prime ma alberga
t ut orialess y documen as t ecnologías relaciona
nt ación sobrre numerosa adas con el desarrollo w eb como
HTM L, CS P, SQL y mu chas ot ras. Cont
SS, Javascriptt , AJAX, PHP C rariame
ent e a lo que
e pueda parrecer, est a
w eb pert enece a una
a empresa privada
p y no
o est á en ab
bsolut o relaccionada con el consorcio
o W3C. La
similit ud del
d nombre de dominio result a, cuando menos, confusa. Ta
ampoco hay indicaciones
s explícit as
en la platt aforma de la no-relació
ón con el W3C.
W Los resu uelen aparecer en los
ult ados de w 3schools su
primeros lugares cuan
ndo se hacen
n consult as en
e buscadore
es, de ahí qu e muchos ussuarios o pro
ofesionales
relacionad
dos con int ernet
e piensen
n que w 3sch
hools es un servicio
s de W3C,
W o la realidad es que no
cuando
es así. De
ebido a est os
o hechos y a ot ros aspe
ect os negat i vos que se pueden ach acar a w 3sc
chools han
surgido voces
v crít ica
as que recomiendan no
n usar estt a w eb, en
nt re los qu e podemos
s dest acar
ht t p:/ / w w w .w 3fools.ccom/ .

© aprenderraprogramar.co
om, 2006-2029
Documentación oficial CSS, W 3C Schools y W 3C validator

Nosot ros no recomendamos el uso de w 3schools, pero t ampoco lo desaconsejamos. Simplement e


pensamos que debe conocerse qué es y cuáles son sus vent ajas e inconvenient es. Como vent ajas
señalaremos est as:

- Se t rat a de una plat aforma w eb con una buena est ruct uración de los cont enidos y una buena
present ación.
- Tiene un sist ema de cont enidos, ejemplos y pruebas basadas en la edición de código on-line
que en general result an bast ant e didáct icos y facilit an el aprendizaje.
- Es accesible grat uit ament e.

Como inconvenient es señaleremos los siguient es:

- Parecen aprovecharse de la confusión y similit ud de nombre con el W3C, aparent ando ofrecer
información oficial cuando no la es.
- Ofrecen cursos y cert ificados previo pago que no est án avalados por organismos o empresas
con garant ías suficient es. Su publicidad puede result ar engañosa.
- En general se t rat a de w ebs bast ant e cargadas de publicidad que se ent remezcla con los
cont enidos, llegando a result ar molest a.
- Part e de la información que ofrece est a w eb puede ser no correct a o est ar no act ualizada.

La mayor part e de los desarrolladores w eb o diseñadores w eb han ut ilizado en algún moment o


w 3schools. Nosot ros simplement e t e aconsejamos que si la usas, conozcas qué es, sus vent ajas e
inconvenient es.

A cont inuación vamos a ofrecer un list ado con recursos didáct icos sobre CSS:

Recurso URL

Tutorial CSS de aprenderaprogramar.com ht t p:/ / w w w .aprenderaprogramar.com/ index.php?opt ion=com_


cont ent & view=cat egory& id=75& It emid=203

Documentación CSS de M ozilla ht t ps:/ / developer.mozilla.org/ en-US/ docs/ Web/ CSS

W iki de la W 3C para CSS ht t p:/ / w w w .w 3.org/ w iki/ CSS

Documentación CSS de w ebplatform ht t p:/ / docs.w ebplat form.org/ w iki/ css

Documentación CSS de sitepoint ht t p:/ / reference.sit epoint .com/ css

Documentación CSS de w3schools ht t p:/ / w w w .w 3schools.com/ css/

Nuest ra recomendación es que para el aprendizaje inicial de CSS uses un solo curso y t rat es de seguirlo
de forma complet a y hast a el final, consult ando ot ras fuent es sólo para cuest iones punt uales. Si t rat as
de adquirir una formación básica recurriendo a varias fuent es de información al mismo t iempo es
posible que acabes perdiendo el t iempo y haciéndot e un lío. Una vez t engas las bases de CSS y algo de
experiencia, será más fácil movert e consult ando la mult it ud de recursos e información que exist en en
libros, revist as y páginas w eb.

© aprenderaprogramar.com, 2006-2029
Documentación oficial CSS, W 3C Schools y W 3C validator

VALIDACIÓN CSS CON W 3C VALIDATOR

Hay un servicio de la W3C que puede result ar de relat ivo int erés: el W3C CSS validat or o validador CSS
de la W3C. Se accede a t ravés de w 3.org escogiendo la opción validat ors: CSS. También se puede
acceder direct ament e en la URL ht t p:/ / jigsaw .w 3.org/ css-validat or/

Una vez en la página con el formulario de ent rada, bast a int roducir una URL para que el cont enido de
esa página w eb sea somet ido a análisis y aparezcan los result ados del mismo. Si el CSS de la w eb
cumple con la especificación oficial aparece un mensaje informat ivo y se nos ofrece la posibilidad de
insert ar los logos de validación W3C en nuest ra página w eb.

En caso de que la página w eb no cumpla la especificación, se nos indican cuánt as falt as se han
encont rado y cuáles son. Las falt as se dividen en falt as menores (w arnings o advert encias) y falt as
mayores o errores.

El servicio de validación CSS puede ser una herramient a út il para personas que est án aprendiendo y
para profesionales, al permit irles ident ificar en qué part es de su código no est án cumpliendo con la
especificación oficial. No obst ant e, t e recomendamos que no pierdas demasiado t iempo t rat ando de
que la página w eb que est és creando t enga cero errores por un mot ivo simple: no t ener errores en el
validador no garant iza que t u w eb se vaya a visualizar correct ament e. M uchas personas pierden horas
t rat ando de corregir el código para pasar la validación W3C cuando su w eb no t enía ningún problema
de visualización. Ent onces, ¿para qué perder el t iempo en ello? Sí, siempre es “ bonit o” pasar
limpiament e un validador, la cuest ión que debemos t ener en ment e es si merece la pena el t iempo que
vayamos a invert ir.

© aprenderaprogramar.com, 2006-2029
Documentación oficial CSS, W 3C Schools y W 3C validator

A modo de curiosidad, piensa en algunas páginas w eb import ant es que conozcas (por ejemplo de algún
diario, alguna t elevisión, alguna empresa import ant e) y pásale el validador CSS de W3C. Encont rarás
que muchas de ellas no superan la validación, y sin embargo son w ebs de prest igio y con millones de
visit as. Si estas grandes w ebs no se preocupan de t ener una validación W3C perfect a ¿merece la pena
obsesionarse con no t ener errores de validación CSS en nuest ras páginas w eb? A modo de curiosidad t e
diremos que en el moment o de escribir est e curso hemos pasado el validador CSS a facebook.com y
hemos obt enido como result ado 24 errores. En la w eb oficial del gobierno de Est ados Unidos, 102
errores, y así podríamos cont inuar una larga list a de w ebs import ant es que no superan la validación.
Pero repet imos: lo import ant e no es superar la validación, lo import ant e es que la w eb funcione y se
vea correct ament e.

Sobre los logos del W3C de validación, su presencia en una página w eb no asegura que la página w eb
pase el validador, ya que se t rat a de simples imágenes que cualquiera podría insert ar en su w eb. La
forma de saber si una w eb cumple la validación es pasar su URL por el validador CSS de la W3C.

EJERCICIO

Crea un document o HTM L que const e de los siguient es element os: un t ít ulo h1 con el t ext o
“ Aprendizaje de la programación” . Una división div con id menú que cont enga: un t ít ulo h2 con el t ext o
“ M enú” y una list a de element os no ordenados (ol) con los siguient es it ems: Programación básica,
Programación int ermedia y Programación avanzada. Finalment e, una división div con id foot er con el
t ext o “ Curso aprenderaprogramar.com” . Est ablece diferent es valores de las propiedades color,
background-color y font -size para:

a) Los element os h1

b) Los element os h2

c) Los element os ol y part es int ernas a est e (element os li de list as).

d) El element o con id foot er.

A cont inuación ut iliza el W3C validat or y comprueba si no t e indica ningún error, o qué errores o
w arnings t e indica y t rat a de ident ificar el por qué de ellos y corregirlos. Puedes comprobar si t us
respuest as son correct as consult ando en los foros aprenderaprogramar.com.

Próxima entrega: CU01024D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Unidades de medida CSS. Relativas, abso
olutas o híbrida
as.

UNIDADE
ES DE M EDID
DA

Cuando t rabajamos con


c CSS neccesit aremos especificar con frecuen
ncia anchura
a, alt ura, m árgenes o
t amaño de
d dist int os element
e os como
c cajas cont
c enedoras de dist int os
o t ipos, imá
ágenes, t ext o,
o et c. CSS
a especificacción de valo res relacion ados con el t amaño de dist int as ma
permit e la aneras para facilit ar el
t rabajo a los program adores y dise
eñadores w eb.
e

Las unida
ades de med
dida CSS se dividen en dos
d grupos: unidades de
e medida re
elat ivas y un
nidades de
medida ab
bsolut as. Tam
mbién se hab
bla a veces de
d unidades híbridas.

Las unidades de med ida relat ivas son aquella


as que det erm
minan un t amaño en fun
nción de ot r o t amaño.
Por ejem plo si indicamos que el ancho de u n element o como 50%, dicho porce
ent aje t iene que est ar
referido al d un ancho del 50% pue
go ¿de qué? En el caso de
a 50% de alg ede est ar refferido norma
alment e al
50% del ancho
a que t enga
e el cont enedor
e del element
e o. La
as unidades relat
r ivas alu den a un ele
ement o de
referencia
a. Veremos que
q exist en dist
d int os elem
ment os que se t oman co
omo referenccia.

Las unidades de med ida absolut as


a son aquelllas que det erminan
e el t amaño
a de alg
go de forma
a concret a,
específica
a y medible. Por ejemplo
o si decimos que un t ama
año de un diiv debe ser d
de 150 mm de
d alt o, no
hay duda al respect o. El div t omará exact ame or (aunque p uede haber pequeñas di st orsiones
ent e ese valo
en funció n del disposiit ivo en que se visualice) y si cogemo
os una regla escolar
e medimos, el div t endrá
y lo m
esa medid
da (aproxima
adament e 15
50 mm).

Las unidades de mediida se aplican a numerossas propieda pezaremos d est acando


ades CSS de las que emp
dos de el las: w idt h (a ment o). La siint axis a em plear es la
ancho de un element o) y height (alt o de un elem
siguient e::

Element o {w
select orDeE w idt h: valorDe
ePropiedad Unidades
U ;

h eight : valorD
DePropiedad Unidades;}

UNIDADE
ES DE M EDID
DA ABSOLUTA
AS

A cont inu ación indicamos las unid


dades de med
dida absolutt as disponibl es en CSS:

Unidad
d Símbo
olo Ejem
mplo aprende
eraprograma
ar.com Ob
bservaciones
s

Pulgada in div {bacckground-colo


or:pink; widt h:: 7in;} 1 pulgada son
n 25.4 mm

Centímettro cm div{backkground-colorr:pink; widt h: 20cm;}

div{backkground-colorr:pink; widt h:
M ilímet ro mm
m
1000mm
m;}

© aprenderraprogramar.co
om, 2006-2029
Unidades de medida CSS. Relativas, absolutas o híbridas.

Unidad Símbolo Ejemplo aprenderaprogramar.com Observaciones


1 punt o equivale a 1/ 72 pulgadas ó
Punto pt div{background-color:pink; font -size: 24pt ;}
aprox. 0.35 mm

1 pica equivale a 12 punt os o aprox.


Pica pc div{background-color:pink; font -size: 2pc;}
4.23 mm

Tant as veces los punt os visibles que


t enga la pant alla donde se visualice
Pixel* px div{background-color:pink; font -size: 24px;} la página w eb como se especifique.

* Puede considerarse una unidad


híbrida, ni absolut a ni relat iva.

Prueba a aplicar est as reglas sobre el código HTM L de prueba que est amos usando en el curso.

Las unidades de medida absolut as en general podemos decir que se ut ilizan poco en desarrollos w eb,
except o el pixel que es una unidad especial y, en menor medida, el punt o. Pulgadas, milímet ros, picas,
et c. t ienen más sent ido en t rabajos de impresión sobre papel. El pixel t iene aplicaciones diversas
mient ras que la unidad pt se usa a veces para definir el t amaño de let ra (t amaño de fuent e).

El mot ivo para que las unidades absolut as se usen poco es que no permit en adapt arse al t amaño de la
pant alla que ut ilice cada usuario. Hoy día, exist en grandes pant allas (por ejemplo de 32 pulgadas de
unos 480 x 730 mm) pero t ambién pequeñas pant allas (por ejemplo smart phones con pant allas de 7
pulgadas de unos 90x170 mm de t amaño). Si queremos most rar un cont enido y lo definimos en
unidades absolut as, por ejemplo con un ancho de 300 mm y un alt o de 200 mm, cuando lo veamos en
un monit or grande nos parecerá pequeño; por el cont rario cuando lo veamos en un disposit ivo
pequeño como una t ablet nos aparecerá cort ado por ser excesivament e grande. Si en vez de unidades
absolut as indicamos una unidad relat iva como 100%, el cont enido se adapt ará al ancho disponible para
cada disposit ivo, lo cual result a vent ajoso. En realidad la gran variación de t amaño de los disposit ivos
supone un problema que no es nada fácil de solvent ar, ni siquiera ut ilizando unidades de medida
relat ivas. Será uno de los campos en que la experiencia y la práct ica result en fundament ales en el
t rabajo con desarrollos w eb.

El pixel es una unidad de medida un t ant o especial. Comprobaremos que se alude a est a medida como
una unidad relat iva, absolut a o híbrida según dónde consult emos. La realidad es que puede
considerársela de cualquiera de est as t res maneras según dónde cent remos nuest ra at ención. En
nuest ra opinión es más “ just o” considerarla unidad relat iva porque no t iene un valor absolut o y único,
sino que present a variaciones según los disposit ivos. No obst ant e, est as variaciones son relat ivament e
pequeñas o moderadas, de ahí que muchas veces se lo considere una unidad absolut a.

Una pant alla se divide en miles de pequeños punt os visibles denominados pixeles. Cuando dist int os
grupos de pixeles t oman dist int os colores se forman las let ras, imágenes o formas que podemos ver en
las pant allas. Por ejemplo si sit uamos pixeles negros uno junt o a ot ro en horizont al sobre un fondo
blanco, se acaba formando una línea negra horizont al. Si en vez de en horizont al cada pixel est á
ligerament e desplazado hacia la derecha y ligerament e por encima del ant erior se formará una línea
negra inclinada. Por el mismo principio se forman let ras, imágenes, figuras, et c.

© aprenderaprogramar.com, 2006-2029
Unidades de medida CSS. Relativas, absolutas o híbridas.

Las pant allas suelen t ener una resolución expresada expresada en pixeles, por ejemplo 1280 x 800 px,
donde el primer valor indica el número de punt os horizont ales y el segundo valor el número de punt os
vert icales en que se divide la pant alla (que podemos ver como una cuadrícula de minúsculos punt it os).

El t amaño real del pixel considerado como “ un cuadradit o muy pequeño” puede variar ent re
disposit ivos, por ejemplo podremos encont rar disposit ivos donde un pixel mida 0.20 mm y ot ros donde
mida 0.30 mm. Las diferencias ent re disposit ivos pueden ser pequeñas cuando hablamos de t amaños
de pant alla similares, pero se hacen apreciables para t amaños de pant alla muy diferent es.

El análisis t eórico de las resoluciones de los disposit ivos y unidades de medida puede ser ext enso, por lo
que nosot ros vamos a opt ar por considerar al pixel, desde el punt o de vist a práct ico, una unidad de
medida híbrida. Absolut a en cuant o a que define unas dimensiones más o menos exact as para
disposit ivos similares (como monit ores de ordenadores), relat iva en cuant o a que sus dimensiones
varían cuando cambiamos el t ipo de disposit ivo (por ejemplo en un smart phone el pixel t endrá dist int a
dimensión que en un monit or de 32” ). Est a definición puede ser poco exact a desde el punt o de vist a
t eórico, pero a efect os práct icos nos va a result ar suficient e para t rabajar en desarrollos w eb.
Consideraremos el pixel como un pequeño punt it o visible de una pant alla.

El pixel es una unidad de medida no t an rígida como pueda ser el mm y no t an flexible como pueda ser
el % u ot ras unidades relat ivas. Permit e fijar t amaños de forma relat ivament e precisa, pero a su vez con
un ciert o grado de adapt ación al disposit ivo en que se visualiza una w eb. Se usa con bast ant e frecuencia
en dist int os aspect os del diseño como iremos comprobando a lo largo del curso.

UNIDADES DE M EDIDA RELATIVAS

A cont inuación indicamos las unidades de medida relat ivas disponibles en CSS:

Unidad Símbolo Ejemplo Observaciones aprenderaprogramar.com

Porcentaje % #menu1 {w idt h: 50%;} Porcent aje relat ivo al element o cont enedor.

Tant as veces el t amaño que sea de aplicación


Relativa al como se indique. Por ejemplo si el t amaño de
em #menu1 {font -size: 2.65em;}
tamaño de letra let ra de aplicación es 12 pixeles, 1 em son
12px, 2 em son 24 px, 3 em son 36 px, et c.

Tant as veces la alt ura de la let ra x minúscula


como se especifique. Por ejemplo si la x
Relativo a la x
ex #menu1 {font -size: 2.65ex;} minúscula que se debería most rar mide 10mm,
minúscula
1 ex son 10 mm, 1.5ex son 15mm, 2ex son
20mm, et c.

Tant as veces los punt os visibles que t enga la


pant alla donde se visualice la página w eb como
Pixel* px #menu1 {font -size: 24px;} se especifique.

* Puede considerarse una unidad híbrida, ni


absolut a ni relat iva.

© aprenderaprogramar.com, 2006-2029
Unidades de medida CSS. Relativas, absolutas o híbridas.

¿QUÉ UNIDAD USAR?

Las unidades est rict ament e absolut as como el mm son poco habit uales en los diseños w eb y podemos
decir que práct icament e no se usan.

Son de uso muy habit ual unidades relat ivas como el % y el em porque permit en la adapt ación flexible a
los dist int os t amaños de pant alla de los disposit ivos. El % nos permit e est ablecer proporciones
adecuadas en relación a la pant alla y el em en relación al t amaño de t ext o que se est é usando.

Por últ imo el pixel es t ambién muy usado pues permit e que det erminados element os de la w eb se
visualicen con t amaños bast ant e precisos, evit ando que la w eb t enga cambios drást icos de aspect o
cuando se cambie de disposit ivo.

Usa preferent ement e %, em y px en aquellas hojas de est ilo que t engas que crear. Usa ot ras unidades
cuando razonadament e result en necesarias.

EJERCICIO

Los navegadores aplican un t amaño por defect o a los t ít ulos h1 a h6, aunque est os t amaños no son
siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que est és
empleando, divide la página w eb en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alt o, t al y
como se ve en la siguient e t abla. En cada espacio, muest ra un t ext o y la forma en que se ha definido el
t amaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt ), h1 (%). El result ado ha de ser que t odo
se vea del mismo t amaño y modo, pero sin embargo la forma de definir el est ilo será diferent e en cada
caso. Para comprobar si t us respuest as y código son correct os puedes consult ar en los foros
aprenderaprogramar.com.

Orient ación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero t endrás que comprobarlo en el
navegador que est és empleando.

Tít ulo Tamaño px Tamaño em Tamaño pt Tamaño %

h1

h2

h3

h4

h5

h6

Próxima entrega: CU01025D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedade
es CSS width y height.
h Ejemplo
os y ejercicios.

W IDTH Y HEIGHT

Dos prop iedades básicas en CSS son widt h (ancho) y height (alt o). Las
L usaremo
os con frecue
encia para
ar el t amañ
det ermina ño de mucchos elemen
nt os en nue
est ro diseño
o CSS. Est a
as propiedad
des serán
designada
as con algun
na de las uniidades de medida
m que hemos
h est ud
diado previament e, usan
ndo la que
result e m ás adecuada
a en función del element o al que se vayan
v a aplicar.

PROPIEDA
ADES CSS wid
dth y height

Valor po
or defecto aut o (en est e cas
so, es det erm
minado por e
el navegador )

Elem
ment os t ipo block
b y elem ent os insert ados en una
a posición
Aplicable a que son reempla
azados por un
u objet o (ent re ellos im
mg, input ,
t ext area,
a select , object
o )

¿Se here
eda directam
mente? No

Una unidad
u de medida absolut a como in, cm,, mm, pt , ó pc
c

Valores posibles para esta Una unidad


u de medida relat iva como
c %, em ó ex

propieda
ad Una unidad
u de medida híbrida como
c px (pixel)

inherrit (indica que se hereda del element o pa


adre)

ht ml {height : 100
0%;}
Ejemplos aprendera
aprogramar.c
com bodyy {backgroun d-color: yell ow ; w idt h: 9
900px;}
.logo
o-module {wiidt h: 16em;}

mos que la sin


Recordem nt axis a emp
plear es la sig
guient e:

select orDeE
Element o {w
w idt h: valorDe
ePropiedad Unidades
U ;

h eight : valorD
DePropiedad Unidades;}

Un aspectt o import antt e es que lass propiedade


es w idt h y height
h no son
n aplicables a cualquier element o.
Por ejem plo elementt os de t ipo inline com o <span> … </ span> n o admit en est as propie
edades. Si
int ent amo
os aplicar w idt h o heig ement o que no lo admiit e, el naveg
ght a un ele gador simple
ement e lo
ignorará.

Las propie
edades widtt h y height no
n siempre se
s especifican. Se puede especificar una de ellas
s, ambas o
ninguna. Para aquella
a propiedad que no se especifica,
e e element o t omará com
el mo anchura y alt ura el
valor que por defect o o por heren
ncia le sean de
d aplicación
n.

© aprenderraprogramar.co
om, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.

No debe exist ir espacio ent re el valor est ablecido y las unidades cuando escribamos el código. Por
ejemplo si est ablecemos #menu1 {widt h: 80%;} no debe exist ir espacio ent re 80 y %. Si est ablecemos
#menu1 {widt h: 600px;} no debe exist ir espacio ent re 600 y px. En el caso de unidades que se expresen
con decimales, la separación decimal debe indicarse con un punt o en lugar de con una coma. Por
ejemplo #menu1 {font -size: 12.75pt ;} es correct o pero #menu1 {font -size: 12,75pt ;} es incorrect o y no
será int erpret ado por el navegador.

En el caso de decimales inferiores a uno, se admit e omit ir el 0 previo al punt o decimal o el 0 de


t erminación. Por ejemplo sería t an válido 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 válido que #soundCode1 {widht : 0;}

EJEM PLO PRÁCTICO

Define los siguient es est ilos para el document o HTM L que est amos usando como base de ejemplo para
el curso y visualiza el result ado:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ht ml{background-color: pink;}
body {background-color: yellow; widt h: 800px;}
h1{background-color: blue; w idt h: 50%;}
h2{background-color: red; widt h: 8em}

Con los conocimient os que hemos ido adquiriendo a lo largo del curso ya hemos de ser capaces de
int erpret ar qué es lo que visualizamos. Vamos a hacerlo. El fondo se muest ra rosa porque hemos
definido que el background-color del element o ht ml sea rosado. En amarillo vemos el element o body.
El ancho del element o body es de 800 px. El element o body no t iene el mismo ancho que el element o
ht ml por dos mot ivos: por un lado, la pant alla donde se ha visualizado la web para capt urar la imagen
que hemos most rado t iene una resolución de 1024 x 768 pixeles. Como nosot ros hemos definido que el

© aprenderaprogramar.com, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.

element o body t endrá 800 px, el rest o que falt a hast a los 1024 px disponibles se ven con el color de
fondo del element o ht ml. Ot ro mot ivo por el que el element o body no t iene el mismo ancho que el
element o ht ml es que el navegador int roduce unos márgenes por defect o (ya veremos más adelant e
cómo se pueden anular). Prueba a cambiar el widt h de body y ponle dist int os valores como 200 px y
2400 px. Para valores de ancho que exceden el t amaño máximo en pixeles de anchura de la pant alla el
navegador incorporará aut omát icament e unas barras de desplazamient o o scrolls.

El element o h1 con el t ext o “ Port al w eb aprenderaprogramar.com” t iene un ancho del 50%. ¿Pero el
50% de qué? Pues el 50% de su element o cont enedor (element o dent ro del cual est á o element o
padre). Como su element o cont enedor es body y ést e t iene 800 px de ancho, el ancho de h1 es la mit ad
de est e valor, es decir, 400 px.

Con el element o h1 comprobamos una cosa: que el t ext o se muest ra en dos líneas y que el t amaño del
t ext o de la segunda línea excede en anchura al t amaño de su element o cont enedor, el h1 con anchura
de 400 px. Por t ant o ya sabemos que el t ext o ocupa algo más de 400 px y por ello se sale del espacio
azul y ocupa part e del espacio amarillo. ¿No sería más lógico que el t ext o se cort ara cuando llegara al
límit e de su cont enedor? ¿O que siguiera en la siguient e línea en vez de salirse hacia la derecha? Quizás,
pero el comport amient o que observamos est á det erminado por el navegador que est amos usando. Se
est á aplicando la siguient e regla: si el t ext o excede el ancho de su element o cont enedor, se crean
nuevas líneas aument ando la alt ura (height ) aut omát icament e siempre que exist an espacios dent ro del
t ext o que permit an int roducir el salt o de línea. Si no exist e espacio para int roducir ese salt o de línea, el
t ext o se expande hacia la derecha sobrepasando el t amaño de su cont enedor.

El element o h2 t iene fijado un widt h de 8 em. El em es una medida relat iva al t amaño de let ra que se
est é usando. ¿A qué t amaño de let ra en est e caso? Pues al t amaño de let ra del h2, que como no lo
hemos especificado, lo det ermina por defect o el navegador. El t amaño por defect o puede variar ent re
navegadores, pero de forma aproximada podemos decir que serán similares a est os: 16px (1em o
100%) como t amaño normal de fuent e, h1 de t amaño 2.25em (36px) y h2 de 1.5em (24px). En est e caso
hemos comprobado que el navegador que usamos aplica 24px de t amaño al h2, ent onces 8em se
int erpret a como 8 veces el t amaño de fuent e del element o, result ando 8x24 = 192 pixeles.

Para verificar que el navegador maneja la propiedad height aut omát icament e (a falt a de especificación
por nuest ra part e su valor es auto) y lo que ocurre cuando el t ext o no se puede ajust ar al espacio
disponible fíjat e en la siguient e imagen que refleja lo que ocurre al escribir un t ext o más largo:

© aprenderaprogramar.com, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.

Como vemos el t ext o se sale del element o cont enedor h1, superponiéndose sobre el element o padre,
body, y al t ener más ancho aún se expande hast a ocupar espacio del element o padre del padre o
“ abuelo” , el element o ht ml. Si el t ext o se alargara aún más el navegador int roduciría un scroll para
permit ir que se pueda leer.

Para ent ender mejor la diferencia ent re que widt h y height est én especificados con un valor o que no lo
est én y mant engan el valor por defect o “ aut o” fíjate en la siguient e imagen. Hemos escrit o un t ext o
muy largo en el h1 y en el lado izquierdo vemos lo que ocurre si definimos h1{background-color: blue;
widt h: 50%;} mient ras que en el lado derecho vemos el result ado para el código h1{background-color:
blue; w idt h: 50%; height : 150px;}

En el lado izquierdo vemos cómo el navegador adapt a aut omát icament e el valor height del h1 para que
el t ext o no se salga de él. Al no est ar especificada la propiedad height t iene valor “ aut o” . En el lado
derecho, al t ener rest ringida la alt ura del h1 a 150 pixeles, cuando el t ext o no cabe en su cont enedor
cont inúa expandiéndose hacia abajo.

Lo que nos int eresa de t odo est o es ser capaces de int erpret ar lo que ocurre cuando se obt iene una
visualización errónea o dist orsionada debido al código CSS. Hay que t ener en cuent a, sin embargo, que
los problemas de visualización en páginas web pueden t ener ot ros orígenes dist int os del CSS como el
código de programación, configuraciones de servidor o navegador, et c.

EJERCICIO RESUELTO

Crea una hoja de est ilos css de forma t al que el element o body t enga el 100% del ancho de la pant alla,
los element os h1 un 80% y los element os h2 un 60%. Escribe un CSS para obt ener la misma
visualización pero expresando los valores en pixeles.

© aprenderaprogramar.com, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.

SOLUCIÓN

A cont inuación proponemos una solución. Si t u respuest a no coincide con lo que indicamos o t ienes
dudas, puedes consult ar en los foros aprenderaprogramar.com.

La definición de est ilos en % sería la siguient e. Hemos añadido colores de fondo para que se visualice
mejor:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ht ml {background-color: pink; }
body {background-color: yellow; widt h: 100%;}
h1 {background-color: blue; w idt h: 80%;}
h2 {background-color: red; widt h: 60%;}

Comprueba el result ado al aplicar est os est ilos al código HTM L base que est amos usando para el curso.
Si quisiéramos realizar una definición equivalent e en pixeles, t endríamos que consult ar la resolución en
pixeles de la pant alla con que est amos t rabajando (en Windows se puede ver yendo al bot ón Inicio,
luego “ Panel de Cont rol” y luego “ Ajust ar resolución de pant alla” )

Supongamos que est amos en un monit or 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 est e caso t endríamos
que escribir:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ht ml {background-color: pink; }
body {background-color: yellow; widt h: 1280px;}
h1 {background-color: blue; w idt h: 1024px;}
h2 {background-color: red; w idt h: 768px;}

Supongamos que est amos en un monit or de 1366 x 768 pixeles. En est e caso el 100 % son los 1366
pixeles, el 80 % 1092.8 pixeles y el 60 % son 819.60 pixeles. El código a escribir sería:

/ * Curso CSS est ilos aprenderaprogramar.com* /


ht ml {background-color: pink; }
body {background-color: yellow; widt h: 1366px;}
h1 {background-color: blue; w idt h: 1092.8px;}
h2 {background-color: red; w idt h: 819.6px;}

Para ot ras resoluciones de pant alla t endríamos que hacer los mismos cálculos.

Fíjat e que usando t ant o por cient o la represent ación o aspect o será igual en t odos los disposit ivos o
pant allas, mient ras que usando pixeles el aspect o depende de la pant alla en que est emos viendo la
web. De ahí que con frecuencia se aluda al pixel como una medida absolut a o híbrida.

Próxima entrega: CU01026D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Bordes CSS.. Propiedad bo rder-style.

CAJAS Y M ODELO DE BORDES

En apart ados
a ant erio res del curso
o hemos diccho que CSS se basa en el modelo d
de cajas. Cad
da división
est ruct ura
al en la página w eb, cad
da et iquet a o t ag, gene
era una caja que puede ser un elem
ment o t ipo
block (a t odo lo anch
ho) o un ele ne (se posici ona al lado de ot ros en
ement o inlin n una línea). Vamos a
est udiar cómo
c aplicarr bordes a lass cajas y las propiedades
p básicas relacionadas con
n los bordes.

BORDE Ú NICO O BOR


RDES POR PA
ARTES

Lo primerro que debemos t ener en


e cuent a ess que una ca
aja podremo s verla como
o un elemen
nt o con un
borde o bien
b como un
n element o con dist int o s bordes (ha bordes: superior o t op,
ast a un t ot al de cuat ro b
derecho o right , abajo
o o bot t om, izquierdo
i o l eft ).

ecesit amos definir


Si sólo ne d un bo rde pensaremos como en erda: t odo el element o
e la imagen de la izquie
lo conside deado por u n solo borde
eraremos rod ecesit emos d efinir de for ma diferenciiada uno o
e. Cuando ne
varios de los cuat ro bordes posi bles, pensarremos siguie
endo el mod
delo most rad
do en la ima
agen de la
derecha. Si
S prest as at ención a est a imagen, ve
erás que cuando est án esst ablecidos d
de dist int os colores
c los
ordes, en la zona de un ión ent re bo
cuat ro bo ordes en las esquinas se
e produce u n “ choque” ent re dos
E navegadorr divide la esquina com ún ent re los
bordes. El es y est o en ciert a mane
s dos colore era puede
generar un
u efect o sim
milar a 3D (t riidimensional). En el caso
o de que sólo
o se est ablecciera un bord
de como el
borde sup
perior (borde
er-t op), ést e borde se most
m raría com
mo una línea
a rect angularr de ciert o grosor,
g con
las esquin
nas t erminan
ndo en ángul os rect os en lugar de en bisel.

Un borde
e se define ut ilizando propiedades
p e ent re las cuales las
de bordes para element os CSS, de
fundamen
nt ales son:

a) Ell t ipo de borrde (border-st yle) media


ant e el cual definimos
d si es una línea
a normal, un
n borde de
p unt os, un bo
orde de pequ
ueñas líneas, et c.
b) Ell grosor del borde
b (borde
er-w idt h), m ediant e el cu
ual definimo s el grosor d el borde.
c) Ell color del bo
orde (borderr-color), med
dianTe el cua
al definimos el
e color del b
borde.

© aprenderraprogramar.co
om, 2006-2029
Bordes CSS. Propiedad border-style.

PROPIEDAD CSS border-style

Función de la propiedad Define el t ipo de borde que se aplica a un element o.

Valor por defecto none (no exist e borde)

Aplicable a Todos los element os

¿Se hereda
No
directamente?

none (no exist e borde; no se ocult an ot ros bordes adyacent es)

hidden (el borde exist e pero est á ocult o y no es visible; ocult a bordes cont iguos)

dot t ed (borde a base de punt os redondeados)

dashed (borde a base de t razos o segment os rect angulares)

solid (borde como una línea normal formando un rect ángulo)

double (borde en forma de doble línea, ext erior e int erior)


Valores posibles para
groove (efect o 3D con foco de luz arriba a la izquierda. En algunos colores y
esta propiedad
grosores de línea la visualización no es buena)

ridge (efect o 3D con foco de luz abajo a la derecha. En algunos colores y


grosores de línea la visualización no es buena)

inset (efect o 3D de vent ana con element o al fondo. En algunos colores y


grosores de línea la visualización no es buena)

out set (efect o 3D de elevación. En algunos colores y grosores de línea la


visualización no es buena)

Ejemplos img {border-st yle: solid;}


aprenderaprogramar.com .imgVent ana {border-st yle: inset ; border-w idt h:10px;}

La propiedad border-st yle se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuat ro bordes en que se puede subdividir un borde. De est a manera se generan cuat ro propiedades
cuyo funcionamient o es análogo al de border-st yle, pero que permit en dar un t rat amient o diferenciado
a cada uno de los bordes: border-top-style , border-right-style , border-bottom-style y border-left-style .
La sint axis a ut ilizar es est a:

select orDeElement o {border-t op-st yle: valor1; border-right -st yle: valor2;
border-bot t om-st yle: valor3; border-left -st yle: valor4; }

No hay por qué especificar los cuat ro bordes. Podemos especificar sólo uno de ellos, o dos, o t res, hast a
el máximo de 4, en el orden que queramos. Por ejemplo podríamos usar img {border-t op-st yle: solid; }
con lo cual únicament e aparecería para los element os img un borde: el borde superior. Hemos dicho
que hay 3 propiedades básicas para definir un borde, relat ivas al t ipo (st yle), grosor (w idt h) y color
(color). Si dejamos sin definir el border-st yle el result ado será que no se visualizará borde, ni siquiera

© aprenderaprogramar.com, 2006-2029
Bordes CSS. Propiedad border-style.

aunque est é definido un grosor y color, ya que por defect o el border-st yle t iene valor “ none” , lo que
significa que no se visualizará borde alguno.

¿Qué ocurriría si en el código CSS incluimos una declaración como img {border-st yle: solid; border-t op-
st yle: dashed; } ? Podemos ver el result ado en la siguient e imagen:

En primer lugar, se est ablece el borde para t odos los element os imagen como un borde sólido (línea
normal). ¿Por qué se ve un borde si no hemos est ablecido un grosor (w idt h) ni un color (color)?
Tenemos que t rat ar de razonar sobre el por qué de las cosas que observamos. Ser buenos
programadores o diseñadores CSS implica razonar y ent ender, no sólo conocer de memoria
propiedades o sint axis del lenguaje. Si sin haber est ablecido un grosor se ve una línea de det erminado
grosor es porque se est á aplicando un valor de defect o o valor inicial para el grosor. Igualment e si el
borde se ve de color azul sin haber est ablecido un color es porque se est á aplicando un valor de defect o
o valor inicial para el color. Est os valores de defect o serán los definidos por el est ándar CSS o por el
navegador que est emos ut ilizando. Si no deseamos que se apliquen est os valores por defect o debemos
especificar unos valores para dichas propiedades.

Ot ra cuest ión que podemos razonar con est a imagen es: ¿Por qué aparece el borde superior (t op) en
forma de segment os y el rest o de bordes (right , bot tom, left ) en forma de línea normal? Si leemos el
código empleado veremos que en primer lugar se define que el borde complet o de los element os img
será solid (línea normal); a cont inuación se define que el borde superior de los element os img será en
forma de t razos (segment os). El navegador procede a sust it uir el borde superior por el borde a t razos,
mient ras que mant iene el rest o de bordes (right , bot t om y left ) como borde normal. Con est e código
hemos efect uado una declaración inicial que es cont radicha por una declaración post erior. Quizás no
t engamos problemas y la visualización sea correct a en t odos los navegadores. Pero como “ est ilo de
t rabajo” recomendaríamos evit ar siempre que sea posible las cont radicciones porque a la larga pueden
generar problemas. En est e caso en vez de {border-st yle: solid; border-t op-st yle: dashed; } podríamos
usar la declaración {border-t op-st yle: dashed; border-right -st yle: solid; border-bot t om-st yle: solid;
border-left -st yle: solid; }. Veremos más adelant e que est a expresión puede escribirse t ambién de forma
abreviada o compact a. De est a manera hemos definido con claridad lo que queremos sin necesidad de
incurrir en cont radecir o sobreescribir parcialment e una propiedad. Si nuest ras definiciones de código
CSS son precisas, la probabilidad de que surjan problemas será menor. Por t ant o y a modo de
recomendación, no t e conformes con que la visualización sea correct a: int ent a que el código est é
definido lo más correct ament e posible.

© aprenderaprogramar.com, 2006-2029
Bordes CSS. Propiedad border-style.

EJERCICIO

Crea un document o HTM L con 10 divisiones, cada una separada de la ant erior por dos element os <br/ >.
En cada división int roduce un t ext o (p.ej. div 1, div 2, div 3…) y aplícale un est ilo de borde diferent e
ut ilizando la propiedad border-st yle.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01027D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Shortand CS
SS. Propiedade
es border-w idth
h, border-colorr.

SHORTAN
ND NOTATIO
ON O NOTACIÓN ABREVIA
ADA CSS

Con bast ant


a e frecuen cia t endrem
mos propiedades CSS don
nde es posiblle definir un valor globall, como un
borde úniico, o bien h ast a cuat ro valores
v espe
ecíficos para el lado supe
erior (t op), d erecho (righ t ), inferior
(bot t om) o izquierdo (left ). Para facilit
f ar la esscrit ura de có
ódigo CSS pe
ermit e el uso
o de diferentt es formas
as.
abreviada

La forma abreviada (en inglés “ short


s and nott at ion” ) básiica para dife
erent es prop
piedades que
e usan los
cuat ro lados de las cajas CSS se basa en usar est a siint axis: select orElementt o {nombreP
Propiedad:
valorTop valorRight
v va
alorBot t om valorLeft
v ;}

Por ejem plo la form a abreviada img {borde


er-st yle: soli d dashed d ot t ed doublle; } es equ ivalent e a
escribir de
d forma extt endida img
g {border-t op
p-st yle: solid ght -st yle: dashed; borde
d; border-rig er-bot t om-
st yle: dott t ed; border--left -st yle: d ouble; }. Tener en cuen
nt a que en la
a forma abre
eviada los va
alores van
separadoss simplemen
nt e con un espacio.
e En ambos
a casos
s el result ado
o sería simil ar al que ve
emos en la
siguient e imagen.

Como se puede
p comp
probar, usar la forma abrreviada nos permit
p nsión de cód igo que es
e ahorrrar en ext en
necesario
o t eclear y por
p t ant o no
os permit e ahorrar
a t iem
mpo cuando est emos esscribiendo có
ódigo CSS.
Además, cuando los archivos
a CSS
S son muy exxt ensos, usa
ar la forma abreviada
a pu
uede redund
dar en que
nuest ros archivos
a sean más ligero
os y se cargue
en más rápid
dament e.

La not ació
ón abreviada
a o short and
d not at ion se
e usa para m uchas propie a est ablecer márgenes,
edades para
rellenos, et c. por lo que
q nos la encont
e rarem
mos repet ida
ament e cuan
ndo t rabajem
mos con CSS
S. Hay una
cosa que debemos memorizar:
m e orden en que
el q se escri ben los valo
ores y su co rrespondenc
cia con los
cuat ro lad
dos de la caj a. Para ello podemos ussar est a regla
a mnemot écnica: el día ccomienza a l as 12:00 y
el primer lado es TOP, las agujass del reloj avanzan haci a la derecha
a y el segun do lado el RIGHT.
R Las
agujas sig
guen avanzan
ndo y el t erccer lado es BOTTOM
B . El reloj
r sigue avvanzando y e
el cuart o lad
do es LEFT.
De ahí qu
ue cuando vemos
v una expresión de
d t ipo img {border-st yl e: solid dasshed dot t ed double; }
debamos pensar en so
olid --> TOP, dashed --> RIGHT,
R dot t ed OM , double --> LEFT.
e --> BOTTO

Pero se pueden
p usarr formas abrreviadas de ot ras maneras, usando en vez de cuat ro valorres menos
valores. En
E la siguientt e t abla vem
mos el signifiicado de las expresioness según el n úmero de va
alores que
usemos:

© aprenderraprogramar.co
om, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.

Valores
Ejemplo Significado
empleados

1 img {border-st yle: dot t ed; } Los cuat ro lados de la caja se


muest ran con el valor indicado.

El primer valor se aplica a TOP y


2 img {border-st yle: dot t ed solid; } BOTTOM y el segundo valor se
asigna a RIGHT y LEFT

El primer valor se aplica a TOP, el


3 img {border-st yle: dot t ed solid dashed; } segundo a RIGHT y LEFT y el t ercero
a BOTTOM

El primer valor se aplica a TOP, el


4 img {border-st yle: dot t ed solid dashed double;} segundo a RIGHT, el t ercero a
BOTTOM y el cuart o a LEFT

Hay más formas de not aciones abreviadas en CSS como veremos más adelant e. Algunos navegadores,
en especial los más ant iguos, podrían no reconocer las expresiones abreviadas, aunque práct icament e
t odos los navegadores act uales sí las reconocen.

PROPIEDAD CSS BORDER-W IDTH

Vist os ya los diferent es t ipos de bordes que podemos aplicar con CSS, un aspect o import ant e será
definir su grosor. Est o se hace con la propiedad border-w idt h.

PROPIEDAD CSS border-w idth

Función de la propiedad Define el grosor de borde que se aplica a un element o.

Valor por defecto medium (grosor por defect o medio)

Aplicable a Todos los element os

¿Se hereda directamente? No

Una unidad de medida absolut a o relat iva admit ida y aplicable (en general
cualquier unidad except o porcent aje será válida)

t hin (fino)
Valores posibles para esta
propiedad medium (medio)

t hick (grueso)

inherit (heredado del element o padre)

Ejemplos img {border-st yle: solid; border-w idt h: 15px;}


aprenderaprogramar.com .imgVent ana {border-st yle: inset ; border-w idt h:1.25em;}

© aprenderaprogramar.com, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.

El grosor exact o en el caso de usar t hin, medium y t hick depende del navegador que est emos ut ilizando,
de ahí que normalment e los diseñadores prefieran especificar el t amaño de los bordes con valores
como pixeles o em, que les permit en un mayor cont rol.

Recordar que para que el borde sea visible debemos est ablecer border-st yle, ya que sin est a propiedad
est ablecida la aplicación de border-w idt h no generará ningún result ado.

La propiedad border-w idt h puede especificarse usando la short and not at ion como hemos explicado
ant eriorment e. Por ejemplo {border-w idt h:0.25em 0.85em 0.45em;} est ablece el borde superior en
0.25em, los bordes lat erales izquierdo y derecho en 0.85em y el borde inferior en 0.45em.

La propiedad border-w idt h se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuat ro bordes en que se puede subdividir un borde. De est a manera se generan cuat ro propiedades
cuyo funcionamient o es análogo al de border-w idht , pero que permit en dar un t rat amient o
diferenciado a cada uno de los bordes: border-top-w idth, border-right-w idth , border-bottom-w idth y
border-left-w idth. La sint axis a ut ilizar y la forma de funcionamient o es la misma que hemos explicado
ant eriorment e para border-st yle.

PROPIEDAD CSS BORDER-COLOR

La propiedad border-color nos permit e aplicar colores de borde.

PROPIEDAD CSS border-color

Función de la propiedad Define el color de borde que se aplica a un element o.

Será el valor que t enga la propiedad color para el element o,


Valor por defecto
est ablecida en el código o la que t enga el element o por defect o.

Aplicable a Todos los element os

¿Se hereda directamente? No

Un color est ablecido de cualquiera de las maneras válidas en CSS


Valores posibles para esta
t ransparent (el borde exist e pero es t ransparent e)
propiedad
inherit (heredado del element o padre)

img {border-st yle: solid; border-w idt h: 15px; border-color: cyan}


Ejemplos
.imgVent ana {border-st yle: solid dot t ed; border-w idt h:0.35em;
aprenderaprogramar.com
border-color: red blue;}

El valor t ransparent nos permit e generar la apariencia de que exist e un borde pero est e no será visible
por ser t ransparent e.

Recordar que para que el borde sea visible debemos est ablecer border-st yle, ya que sin est a propiedad
est ablecida la aplicación de border-color no generará ningún result ado.

© aprenderaprogramar.com, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.

La propiedad border-color puede especificarse usando la shortand not at ion como hemos explicado
ant eriorment e. Por ejemplo {border-color:#ff0000 rgb(0,255,0) blue rgba(0,255,0,0.33);} est ablece los
bordes de dist int os colores siguiendo el orden t op – right – bot t om – left .

La propiedad border-color se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuat ro bordes en que se puede subdividir un borde. De est a manera se generan cuat ro propiedades
cuyo funcionamient o es análogo al de border-w idht , pero que permit en dar un t rat amient o
diferenciado a cada uno de los bordes: border-top-color, border-right-color , border-bottom-color y
border-left-color . La sint axis a ut ilizar y la forma de funcionamient o es la misma que hemos explicado
ant eriorment e para border-st yle.

PROPIEDAD CSS BORDER

Hast a ahora hemos vist o que para est ablecer un borde habíamos de definir al menos la propiedad
border-st yle, y si queríamos especificar el grosor y el color adicionalment e t eníamos que definir border-
w idt h y border-color.

Hay una propiedad que permit e expresar las t res propiedades básicas de un borde de forma abreviada:
la propiedad border. La sint axis a emplear es:

border { valorBorderWidt h valorBorderStyle valorBorderColor; }

PROPIEDAD CSS border

Función de la propiedad Permit e definir grosor, est ilo y color de borde.

Valor por defecto Los de las dist int as sub-propiedades de que const a.

Aplicable a Todos los element os

¿Se hereda directamente? No

Un valor (est ablecerá border-st yle)

Valores posibles para esta Dos valores (est ablecerá border-st yle y grosor o color)

propiedad Tres valores (est ablecerá border-widt h, border-st yle y border-color)

inherit (heredado del element o padre)

Ejemplos img {border: 15px solid #FFAA33; }


aprenderaprogramar.com .imgVent ana { border: dot t ed;}

Not a: en general los navegadores permit en 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 int erpret ará en cada caso qué es el est ilo, qué es el grosor y qué es el color.
La propiedad admit e hast a t res valores (anchura, est ilo y color) de los cuales es obligat orio el est ilo y
opcionales los ot ros dos.

© aprenderaprogramar.com, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.

Valores
Ejemplo Significado
empleados

1 Los cuat ro lados de la caja se muest ran con el est ilo


img {border: dot t ed; }
indicado. Grosor y color serán los de defect o.

2 img {border: 20px solid; } Se aplica el est ilo indicado y el grosor ó color
img {border: solid red; } indicado. Lo no especificado será por defect o.

3 img {border: 15px solid #FFAA33; } Se aplica el grosor, est ilo y color indicados.

Est e t ipo de propiedades como border que permit en abreviar diferent es propiedades se denominan
“ short and propert ies” o propiedades abreviadas.

La propiedad border se puede aplicar a cualquiera de los cuat ro bordes en que se puede subdividir un
borde. De est a manera se generan cuat ro propiedades cuyo funcionamient o es análogo al de border,
pero que permit en dar un t rat amient o diferenciado a cada uno de los bordes: border-top, border-right ,
border-bottom y border-left . La sint axis a ut ilizar y la forma de funcionamient o para est as propiedades
son las que ya conocemos.

El siguient e esquema resume las propiedades de borde CSS:

© aprenderaprogramar.com, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.

EJERCICIO 1

Crea un document o HTM L con 2 divisiones, cada una separada de la ant erior por dos element os <br/ >.
En cada división int roduce un t ext o (p.ej. div 1, div 2) y aplícale los siguient es est ilos de borde
escribiendo de forma individual cada una de las siguient es propiedades CSS:

a) Para el div 1: la part e superior con borde de punt os redondeados, grosor 10 píxeles y color verde. La
part e derecha con borde de t razos o segment os rect angulares, grosor 20 píxeles y color azul. La part e
inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La part e izquierda con borde con
efect o groove, grosor 30 píxeles y color #2F4F4F.

b) Para el div 2: la part e superior con borde con efect o inset , grosor 30 píxeles y color #B22222. La part e
derecha con borde sólido, grosor 22 píxeles y color #DAA520. La part e inferior con borde de línea doble,
grosor 25 píxeles y color #4B0082. La part e izquierda con borde de punt os redondeados, grosor 17
píxeles y color #808000.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

EJERCICIO 2

Crea un document o HTM L con el mismo aspect o y propiedades CSS que las descrit as para el ejercicio 1,
pero en est e caso usando la not ación short and de bordes CSS y la propiedad border abreviada. Para
comprobar si t us respuest as son correct as puedes consult ar en los foros aprenderaprogramar.com.

Próxima entrega: CU01028D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
M argen y re
ellenos en CSS. M argin y padd
ding en el box model.
m

M ARGEN Y RELLENO

Para avanzar en la comprensió


ón del funciionamient o de CSS debemos cono
ocer, saber ut ilizar y
ar dos propi edades imp ort ant es: m argin y padd
diferencia ding. Al igua
al que con lo
os bordes, t endremos
dist int as propiedades derivadass de las prrincipales y t ambién t endremos
e sshort and no
ot at ions o
es abreviadas para poderr expresarlass.
not acione

M ARGIN Y PADDING

Empezare
emos realizan
ndo una defiinición de co
oncept os:

a) Cont enido de ent o HTM L es aquello que se pre


e un eleme et ende mosst rar al visu
ualizar ese
element o: pu
uede ser un
n t ext o, un
na imagen o quizás ott ros elemen
nt os como un objet o
re
eproduct or de
d sonido ó un
u mapa. El cont
c enido en a rect angular.
n CSS t iene f orma de caja
b) Borde: es el perímet
p ro qu
ue engloba ell cont enido y el posible relleno
r nglés paddin g) ent re el
(en in
b orde y el con
nt enido.
c) Relleno (padd
ding): es el espacio t ransparent e que
q de dejar, op cionalment e,
se pued e ent re el
co
ont enido y el
e borde del element o. El relleno no
n t iene collor (pero pe
ermit e ver el
e color de
fo
ondo).
d) M argen: es el
e espacio t ransparent
r e que se pue
ede dejar, op
pcionalmentt e, ent re el borde del
element o y el borde de ot
o ras cajas adyacent
a es. El
E margen n o t iene colo r (pero perm
mit e ver el
co
olor de fond o).

Viendo essquemas gráficos y códig enderán con más facilidad est os conccept os:
go se compre

Ca
aja contenedora

margin
m n
pa
adding
Conttenido (tex
xto,
im
magen…)
aprenderraprograma ar .com

© aprenderraprogramar.co
om, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

Un element o HTM L puede t ener margin y padding, sólo t ener margin, sólo t ener padding, o no t ener ni
margin ni padding. En caso de no t ener margin ni padding el element o aparecerá “ ajust ado”
exact ament e a su caja cont enedora.

Al igual que ocurría 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.

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

EJEM PLO EN CÓDIGO

Para ver la aplicación práct ica de est os concept os vamos a ut ilizar el código HTM L de base que venimos
empleando a lo largo del curso.

Define los siguient es est ilos css y visualiza el result ado en t u navegador:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial;}
body {background-color: yellow ; w idt h: 60%;}
h1{margin: 25px; padding: 45px; border: solid 6px blue; }
h2{border-st yle: solid; border-color:red; margin: 0; padding:0;}
div {border: solid t hick black;}
div div {border: solid medium purple;}
div div div {border: dashed medium grey;}
img {border: solid #FF00FF 2px;}

Vamos a analizar línea a línea el código CSS y los result ados obt enidos. La primera línea es un
coment ario. En la segunda línea est ablecemos que las fuent es de t ext o a emplear en t odos los
element os del document o sean t ipo arial. En la t ercera línea est ablecemos que el element o body t enga
color de fondo amarillo y ocupe el 60% del ancho de pant alla disponible.

En la cuart a línea definimos que el margen de los element os h1 será de 25 píxeles. Al no especificar t op,
right , bot t om o left , est e margen se aplicará en las cuat ro direcciones (mismo comport amient o que el
que hemos est udiado previament e con los bordes). Igualment e definimos que el relleno para los
element os h1 será de 45 px en t odas las direcciones y que el borde se muest re de color azul.

En la quint a línea definimos que los element os h2 muest ren un borde de color rojo y que no llevarán
margen ni relleno.

En las siguient es líneas est ablecemos bordes para que se muest ren las cajas cont enedoras de los
element os HTM L de dist int os colores. Est as líneas no nos int eresa coment arlas ahora.

En los result ados de visualización comprobamos lo siguient e: si los element os h2 no t ienen margen, se
most rarán pegados a las cajas adyacent es. Así vemos que ocurre con la caja del div cont enedor, pero no

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

con la caja del h1. ¿Es est o correct o? Sí, porque el h1 t iene est ablecido un margen y por t ant o la caja
del element o h2 no puede pegarse a la caja del element o h1 porque hay un margen que lo impide.

Prueba a hacer el siguient e cambio en el código: h2{border-st yle: solid; border-color:red; margin: 25px;
padding:0;}

Al visualizar el result ado comprobarás que los márgenes vert icales (t op y bot t om) cont iguos no son
adit ivos, es decir, si la caja h1 t iene de margen 25px y la caja de h2 t iene de margen 25px, el espacio
vert ical que quedará ent re ambas cajas es 25px y no 50px. ¿Por qué? Porque la referencia para
est ablecer un margen vert ical es el borde de las cajas y no el límit e del margen de una caja adyacent e.
Si la caja h1 t uviera de margen vert ical 25px y la caja h2 t uviera de margen vert ical 10px el espacio
ent re ambas cajas sería de 25px, el mayor ent re los dos valores.

El comport amient o de los márgenes horizont ales es diferent e: en est e caso, sí es adit ivo. Supongamos
que t enemos dos imágenes una al lado de ot ra y est ablemos img {margin:25px;}. En est e caso el espacio
que habrá ent re ambas imágenes sí es de 50 px, es decir, los márgenes horizont ales sí se suman,
mient ras que los vert icales no se suman. Est e comport amient o peculiar deberemos t enerlo en cuent a
cuando t rabajemos con CSS. Y como CSS no es mat emát icas, habrá que realizar pruebas y
comprobaciones para verificar que se cumple aquello que esperamos.

La idea clave con que debemos quedarnos es que los márgenes vert icales t ienen un comport amient o
dist int o al de los márgenes horizont ales.

Cont inuamos con el análisis de los result ados. Si la caja h2 no t iene padding, la línea de borde quedará
ceñida al cont enido (en est e caso al t ext o). Así vemos que ocurre por la izquierda, por arriba y por
abajo. Sin embargo por la derecha el borde no est á ajust ado al t ext o. ¿Por qué? Porque los element os
h1 y h2 son element os de t ipo block, y por t ant o t ienden a ocupar t odo el ancho de pant alla. M ás
adelant e veremos que podemos cambiar el comport amient o para que se comport en como block ó
como inline según nuest ro crit erio.

Finalment e queremos llamar la at ención sobre el hecho de que se muest re un pequeño espacio ent re el
borde del div y el borde del element o body, de ahí que se vea una pequeña franja amarilla por fuera del
cont enedor div. Est a sit uación se debe a los márgenes o rellenos que por defect o aplica el navegador.
Podemos eliminar est os márgenes o rellenos por defect o incluyendo en el select or universal est e
código: * {margin:0; padding:0;} Prueba a aplicarlo y compruébalo. A práct icas de est e t ipo, consist ent es
en escribir código para anular el comport amient o por defect o que int roducen los navegadores, se le
suele denominar “ reset eo” . Es una práct ica que siguen muchos diseñadores y programadores, pero no
t odos. Algunos programadores est án en cont ra de ut ilizar práct icas de reset eo.

El código de reset eo puede ser bast ant e más amplio que el que hemos indicado y hablaremos de ello
más adelant e. Nosot ros iremos int roduciendo algunas práct icas de reset eo cuando lo consideremos
necesario para el desarrollo del curso.

EJERCICIO

Para cada una de las siguient es afirmaciones indica si la afirmación es verdadera o falsa y just ifica
brevement e t u respuest a:

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

a) CSS muest ra los cont enidos con t res formas básicas: rect angular, circular y elipsoidal.

b) Al crear un document o HTM L, pueden aparecer márgenes y rellenos que no hayan sido
explícit ament e int roducidos por nosot ros como programadores, sino que hayan sido int roducidos por el
navegador que est emos empleando.

c) El reset eo CSS consist e en la recarga de la página para borrar la caché del navegador, de modo que
los est ilos se recarguen complet ament e.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01029D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
M argen y re
ellenos en CSS. M argin y padd
ding en el box model.
m

M ARGIN Y PADDING

Ya debem
mos t ener cla
aro el concep
pt o de marge
en y de relle
eno en CSS. Ambos
A son e
element os muy
m usados
en los diseños y que present
p an cie
ert as similit udes
u y ciert as diferenciass. En algunoss casos el efe
ect o visual
al que llevvan es muy parecido.
p Sin
n embargo, conviene
c t en er clara la diiferencia entt re ambos co
oncept os y
saber ut il izarlos adecu
uadament e.

PROPIEDA
AD CSS PADD
DING

La propied
dad CSS pad ding nos perrmit e fijar el relleno de un
u element o.. La sint axis a emplear es
s del t ipo:

selectt orElement o { padding va


alor1Uds val or2Uds valo r3Uds valor4
4Uds; }

PROPIIEDAD CSS padding


p

Función de la propie
edad Per mit e definir un relleno ent re el bord e de caja y e
el cont enido.

Valor po
or defecto 0 (n
no exist e rell eno).

Elem
ment os t ipo block y ele
ement os inse
ert ados en u
una posición que son
Aplicable a
reem
mplazados po
or un objet o (e
ent re ellos img area, select , o bject ).
g, input , t ext a

¿Se here
eda
No
directam
mente?

Un valor
v absolut o o relat ivo (est ablece relle
eno en los cuat ro sent idos)

Dos valores (el prrimero de ello


os aplica a t op
p y bot t om y e
el segundo a riight y left )
Valores posibles parra
Tress valores (el p rimero para t op, el segund o right / left y el t ercero b ot t om).
opiedad
esta pro
Cuat ro valores (se
e aplican a t o p, right , bot t om
o y left en esst e orden)

inhe
erit (heredado
o del element o padre)

#me
enu1 {padding
g: 55px 0.5em
m 177px 2px;}

Ejemplos .img
gVent ana { padding: 15px;}
eraprograma
aprende ar.com h1 {padding:
{ 10%
% 5%;}
.con
nt ainer1 {padd
ding: 0 aut o;}

La propie
edad padding
g se puede aplicar en t odos los lad
dos del elem
ment o, o bie
en a cualqui era de los
dos que confforman una caja CSS. Exist en cuat ro propiedades cuyo funci onamient o es
cuat ro lad e análogo
al de pad ding, pero que
q permit en at amient o di ferenciado a cada uno d
n dar un t ra de los lados de la caja
ding-top, pa
CSS: padd adding-right , padding-bo
ottom y pad a sint axis a ut ilizar y la forma de
dding-left . La
funcionam
mient o es la misma que hemos
h expliccado.

© aprenderraprogramar.co
om, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

El valor de padding se puede est ablecer en %, realizándose el cálculo respecto al ancho del elemento
contenedor (un valor 100% sería un relleno igual al ancho del element o cont enedor).

La propiedad padding no admit e valores negat ivos.

Recordar que t ant o margin como padding generan un espacio t ransparent e. El color o imagen que se
vean en dicho espacio serán el color de fondo (background-color) o la imagen de fondo (background-
image) que est én definidos para el element o afect ado.

Tant o con margin como con padding pueden haber det erminadas sit uaciones en que los navegadores,
sobre t odo los más ant iguos, no respondan como sería de esperar, aunque la mayor part e de los
navegadores act uales responden adecuadament e.

PROPIEDAD CSS M ARGIN

La propiedad CSS margin nos permit e fijar el margen de un element o. La sint axis a emplear es del t ipo:

select orElement o { margin valor1Uds valor2Uds valor3Uds valor4Uds; }

PROPIEDAD CSS margin

Permit e definir el margen ent re el borde de la caja del element o y el


Función de la propiedad
borde de las cajas adyacent es.

Valor por defecto 0 (no exist e margen).

Element os t ipo block y element os insert ados en una posición que son
Aplicable a
reemplazados por un objet o (ent re ellos img, input , t ext area, select , object ).

¿Se hereda
No
directamente?

aut o (el navegador aplicará el margen por defect o)

Un valor absolut o o relat ivo (est ablece márgenes en los cuat ro lados de la caja)

Valores posibles para Dos valores (el primero de ellos aplica a t op y bot t om y el segundo a right y left )

esta propiedad Tres valores (el primero para t op, el segundo right / left y el t ercero bot t om).

Cuat ro valores (se aplican a t op, right , bot t om y left en est e orden)

inherit (heredado del element o padre)

#menu1 {margin: 55px 0.5em 177px 2px;}

Ejemplos .imgVent ana { margin: 15px;}


aprenderaprogramar.com h1{margin: 10% 5%;}
.cont ainer1 {margin: 0 aut o;}

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

La propiedad margin se puede aplicar en t odos los lados del element o, o bien a cualquiera de los cuat ro
lados que conforman una caja CSS. Exist en cuat ro propiedades cuyo funcionamient o es análogo al de
margin, pero que permit en dar un t rat amient o diferenciado a cada uno de los lados de la caja CSS:
margin-top, margin-right , margin-bottom y margin-left . La sint axis a ut ilizar y la forma de
funcionamient o es la misma que hemos explicado ant eriorment e.

El valor de margin se puede est ablecer en %, realizándose el cálculo respecto al ancho del elemento
contenedor (un valor 100% sería un margen igual al ancho del element o cont enedor).

A diferencia de ot ras propiedades, se admit e que un valor de margin pueda ser negat ivo (aunque est o
no es usual y no debería usarse except o cuando razonadament e es necesario y aconsejable. Un margen
negat ivo puede dar lugar, en algunos casos, a visualizaciones incorrect as o ext rañas). Para ent ender el
efect o de valores de margen negat ivos podemos pensar en los márgenes como aviones que t ienen un
espacio básico definido por la anchura de sus alas y fuselaje, que definen un espacio rect angular que
sería el margin 0 (no hay margin y el avión “ empuja” a ot ros aviones colindant es). Ese espacio se puede
aument ar hacia fuera est ableciendo un margin posit ivo que sería como “ est ablecer un perímet ro de
seguridad para el avión” , lo que impide que ot ros aviones ent ren en el espacio reservado a nuest ro
avión. Si el margen se est ablece en un valor negat ivo, el avión no sólo no t iene un espacio ext ra hacia
fuera, sino que t ampoco t iene su espacio básico y se coloca invadiendo el espacio delimit ado por ot ro
avión cont iguo. M argin posit ivo sería “ empujar hacia fuera” y margin negat ivo sería “ solaparse” con
element os adyacent es.

En la siguient e imagen vemos cómo afect a est ablecer un margen posit ivo o negat ivo a un element o
“ Cont enido 1” que t iene ot ros dos element os vecinos.

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

La invasión del espacio colindant e puede ser en t odas direcciones o est ablecerse específicament e para
alguna de las cuat ro direcciones posibles (t op, right , bot t om o left ) usando margin-t op, margin-right ,
margin-bot t om o margin-left . Un aspect o a t ener en cuent a es que cuando exist e superposición de un
element o con ot ros habrá que comprobar o est ablecer qué element o debe quedar encima y qué
element o debe quedar debajo. En la imagen ant erior hemos dibujado el element o “ Cont enido 1”
sit uándose encima de los ot ros element os, pero en la práct ica est o dependerá de diversos fact ores y no
siempre será así. Exist en propiedades CSS con las que podremos cont rolar el orden de apilamient o de
element os cuando exist e superposición. Lo veremos más adelant e.

Ot ro aspect o que merece ser coment ado es el result ado que se obt endrá al est ablecer un valor de
margin “ aut o” . Elegir aut o equivale a indicar que el margin debe ser est ablecido aut omát icament e por
el navegador. En general, si un element o es de t ipo block y no t iene est ablecido una anchura específica,
cuando est ablecemos el margin con valor “ aut o” el margen que aplicará el navegador cerá cero (sin
margen). En cambio, si el element o es de t ipo block pero t iene un valor de ancho (w idt h) definido, al
est ablecer el margin aut o el navegador est ablecerá un margen izquierdo y derecho iguales, de modo
que el cont enido est ará equidist ant e respect o al borde del cont enedor. El efect o que se aprecia, en est e
caso, es que el element o aparece cent rado.

Ejemplo:

a) Código que da lugar a un margen cero: h1{ border: solid; margin:aut o; }, el element o h1 se ve a t odo
lo ancho y sin márgenes.

b) Código que da lugar a el cent rado horizont al del element o: h1{border: solid 6px blue; w idt h:65%;
margin:aut o;}. El element o h1 se ve sin márgenes superior (t op) ni inferior (bot t om), pero se ve
cent rado (con márgenes right y left de igual valor).

Prueba a visualizar la página de pruebas en t u navegador con est e código. En el primer caso h1 es un
element o block sin ancho definido, por lo que t iende a ocupar t odo el ancho disponible. En est e caso
margin: aut o; da lugar a que se aplique margen cero. En el segundo caso h1 es un element o block con
ancho el 65% del element o cont enedor, por t ant o t iene un ancho definido. En est e caso margin: aut o;
da lugar a que se apliquen márgenes iguales por ambos lados del element o y a que visualment e el
element o aparezca cent rado.

EJERCICIO

Crea un document o HTM L con 2 element os div de anchura 250 píxeles, con un margen de 20px en
t odas direcciones y uno junt o al ot ro (en horizont al). En cada div int roduce un t ext o (p.ej. div 1, div 2) y
aplícale los siguient es est ilos de borde y relleno a ambos element os. Color de fondo #FFB6C1. La part e
superior con borde de punt os redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La
part e derecha con borde de t razos o segment os rect angulares, grosor 10 píxeles, color verde y relleno
de 45 píxeles. La part e inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0
píxeles. La part e izquierda con borde con efect o ridge, grosor 40 píxeles, color #2F4F4F y relleno 60
píxeles.

Responde a las siguient es pregunt as:

© aprenderaprogramar.com, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.

a) ¿Cuál es el ancho t ot al ocupado por cada div (incluyendo sus bordes y rellenos)?

b) ¿Cuál es el alt o t ot al ocupado por cada div (incluyendo sus bordes y rellenos)?

c) ¿Cuál es el ancho t ot al desde el límit e izquierdo del borde del div más a la izquierda hast a el límit e
derecho del borde del div más a la derecha (t eniendo en cuent a márgenes, bordes y rellenos)?

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01030D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Fondo o bac
ckground en CS
SS. background
d-image, repeatt, etc.

FONDO EN CSS

e diferent e propiedades
CSS t iene p relacionada
as con el fon
ndo de las cajas
c del boxx-model o modelo
m de
cajas. Ya conocemos
c l propiedad
la d background
d-color. Vam
mos a ampliarr el conocim ient o sobre los fondos
est udiand und-image, background -repeat , ba
do ot ras prropiedades relacionadas: backgrou ackground-
at t achment , backgrou
und-posit ion y la propied
dad short and
d background
d.

CONCEPT
TO DE FONDO
O DE UN ELE
EM ENTO

El fondo de
d un element o CSS com e los bordes hacia el int e
mprende el espacio desde erior de la ca
aja del box
model, in cluyendo el propio bord
de. Por t ant o el fondo co
omprende el espacio de borde, el pa
adding y el
espacio d el cont enido
o. El margin no se ve afect ados por el
e fondo del element o. S
Si el borde es
s opaco, el
fondo que
edará ocult o por el bord
de. En camb io si t iene t ransparencia
r a o part es 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
PROPIEDA OUND-COLO
OR

Es la prop
piedad que permit
p e est ablecer
a el co lor de fondo hablado, por lo que no
o, de la cual ya hemos h
vamos a ext
e endernoss en ella. Reccordar que el nd-color por defect o par a t odos los element
e backgroun e os
es t ranspa
arent .

AD BACKGRO
PROPIEDA OUND-IM AG
GE

Est a prop
piedad nos p ermit e est ab
blecer una im
magen de fo
ondo para un
n element o. Una imagen
n se coloca
encima d el backgroun
nd-color. Si la imagen es opaca, ocu
ult ará el bacckground-collor. Si la ima
agen t iene
part es t ra
ansparent es, se verá el co
olor de fondo
o rellenando
o esas part ess t ransparentt es.

© aprenderraprogramar.co
om, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.

La sint axis a emplear es del t ipo:

select orElement o {background-image: valorDefinido; }

El valor definido puede ser none para indicar que no exist e imagen de fondo, o puede definirse
escribiendo lo siguient e: url(rut aDeLaImagen). No debe haber espacio ent re url y el parént esis dent ro
del que se coloca la rut a. Es decir, url(rut a) es correct o pero url (rut a) es incorrect o.

Como rut a de la imagen puede especificarse un nombre de archivo que t engamos en el mismo
direct orio en el que se encuent re el archivo HTM L, por ejemplo url(barco.jpg), o t ambién una rut a
relat iva a ot ro direct orio. Por ejemplo url(images/ barco.jpg) haría referencia a un archivo de nombre
barco.jpg que se encuent ra dent ro del direct orio images.

También puede especificarse una url complet a, por ejemplo podría escribirse lo siguient e:

url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg)

El cont enido de la rut a puede escribirse ent re comillas simples o dobles. Es decir, result a válida
cualquiera de est as t res opciones:

a) url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg)


b) url(“ ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg” )
c) url('ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg')

En algunos casos las rut as pueden t ener caract eres ext raños y est os caract eres pueden dar lugar a
problemas al no ser capaz el navegador de reconocer la rut a.

PROPIEDAD CSS background-image

Función de la propiedad Permit e definir una imagen de fondo para un element o.

Valor por defecto none (no exist e imagen de fondo).

Aplicable a Todos los element os.

¿Se hereda
No
directamente?

none (est ablece que no exist e imagen de fondo)

Valores posibles para Una rut a relat iva (al fichero de imagen)

esta propiedad Una rut a absolut a (al fichero de imagen)

inherit (heredado del element o padre)

#menu1 {background-image: url(barco.jpg);} .imgVent ana { background-image:


Ejemplos url(ht t p:/ / crimsonedit or.com/ images/ logo.jpg);}

aprenderaprogramar.com h1 { background-image: url(“ bgforh1.png” ); }


.cont ainer1 {background-image: none;}

© aprenderaprogramar.com, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.

En caso de que el archivo de imagen a que se aluda no est é disponible, la visualización será la misma
que si est uviera est ablecido que background-image fuera none. Por t ant o si t enemos un color de fondo
y una imagen de fondo, en caso de no encont rarse o no est ar disponible la url con el archivo de la
imagen de fondo, se vería el color de fondo. Est e es el mot ivo por el que se recomienda est ablecer color
de fondo incluso si se pone una imagen de fondo opaca: en caso de no est ar la imagen disponible, el
color de fondo aport aría la seguridad de que se visualiza algo como fondo.

Para ver la aplicación práct ica de est os concept os vamos a ut ilizar el código HTM L de base que venimos
empleando a lo largo del curso.

Define los siguient es est ilos css y visualiza el result ado en t u navegador:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {background-color: yellow ;}
h1{
border: dashed t hick purple; w idt h: 55%; color: blue; background-color:pink;
margin:20px; padding:50px;
background-image:
url(ht t p:/ / lh5.ggpht .com/ _PeVw ghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png);
}

El result ado será similar a la imagen ant erior y lo int erpret amos de la siguient e manera: el borde t iene
part es no opacas por est ar est ablecido como dashed. Por ello allí donde la línea es discont ínua se ve la
imagen de fondo o, en caso de que la imagen de fondo t enga t ransparencia (como en est e caso), se ve
el color de fondo.

Por defect o, la imagen se coloca en la part e superior izquierda alineada o encajada con el borde
superior izquierdo, y a part ir de aquí se repit e 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. Est e comport amient o puede ser cambiado ut ilizando ot ras propiedades de background
(background-posit ion y background-repeat ) como veremos más adelant e.

En caso de que la imagen fuera más grande que el espacio disponible en el element o, sólo se most raría
una part e de la imagen (la part e que quepa).

Se pueden poner varias imágenes de fondo (aunque sólo en navegadores modernos; algunos
navegadores más ant iguos pueden no funcionar con est a posibilidad) . En est e caso, la visualización es
el result ado de crear un collage o pila de imágenes, sit uándose encima la primera en la enumeración,
más abajo la siguient e y así sucesivament e hast a llegar a la capa final que sería el color de fondo. Al
hacer est o, se crea un efect o de superposición donde la t ransparencia de una imagen deja ver

© aprenderaprogramar.com, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.

parcialment e lo que hay debajo. En caso de que la primera imagen fuera opaca, ocult aría t odo 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 result ado de est ablecer una imagen de fondo con t ransparencia encima de ot ra
imagen de fondo (por ejemplo background-image:
url(ht t p:/ / lh5.ggpht .com/ _PeVw ghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png),
url(ht t p:/ / w ww .crimsonedit or.com/ images/ logo.jpg);

Prueba t ambién a est ablecer una imagen de fondo para el element o body y comprueba los result ados.
Podrás ver cómo si t oda la página t iene una imagen de fondo oscura, el t ext o negro se hace difícil de
leer.

Un aspect o de int erés radica en que se pueden usar imágenes de pequeño t amaño que sit uadas en un
fondo y repet idas creen el efect o de papel t apiz para una página w eb. Por ejemplo podemos coger
imágenes simples de forma cuadrada:

Est as imágenes, si est án bien diseñadas, al repet irse crean un fondo uniforme o “ papel t apiz”
pareciendo que fueran una sola cosa. Est o supone una gran vent aja respect o a usar una imagen de gran
t amaño por varios mot ivos:

a) Usando una imagen de fondo que se repit e la página puede ser t an grande a lo ancho y a lo alt o
como queramos, no t enemos que preocuparnos de si la imagen va a ser lo suficient ement e
grande para cubrir el espacio de la página w eb.

b) Usando una imagen pequeña que se repit e facilit amos que la página w eb cargue más
rápidament e al t ener el navegador que recibir una pequeña imagen y repet irla, en lugar de
t ener que recibir una gran imagen. De est e modo, podemos cargar por ejemplo una imagen de
4 Kb cuya carga es muy rápida en lugar de una imagen de 400 Kb cuya carga sería muy lent a.

PROPIEDAD BACKGROUND-REPEAT

Est a propiedad nos permit e definir si una imagen de fondo de t amaño inferior al disponible debe
repet irse. También se puede especificar si la repet ición debe ser horizonal (eje x), vert ical (eje y) o en
ambos sent idos.

La sint axis a emplear es del t ipo:

select orElement o { background-repeat : valorDeRepet ición; }

© aprenderaprogramar.com, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.

PROPIEDAD CSS background-repeat

Función de la propiedad Permit e definir si una imagen de fondo debe repet irse y cómo.

Valor por defecto repeat (la imagen se repit e horizont al y vert icalment e).

Aplicable a Todos los element os.

¿Se hereda
No
directamente?

repeat (repet ición horizont al y vert ical)

repeat -x (repet ición sólo horizont al)


Valores posibles para
repeat -y (repet ición sólo vert ical)
esta propiedad
no-repeat (la imagen se muest ra sólo una vez, sin repet iciones)

inherit (heredado del element o padre)

#menu1 {background-image: url(“ barco.jpg” ); background-repeat : no-repeat ;}

Ejemplos .imgVent ana { background-image: url(ut .jpg); background-repeat : repeat -x;}


aprenderaprogramar.com h1{ background-image: url(ut .jpg); background-repeat : repeat -y;}
.cont ainer1 { background-image: url(ut .jpg); background-repeat : repeat ;}

Opcionalment e puede usarse ot ra sint axis (aunque no la vemos por el moment o recomendable porque
en algunos navegadores puede no ser reconocida) basada en dos palabras clave, una para definir el
comport amient o en el eje x u horizont al y ot ra para est ablecer el comport amient o en el eje y o vert ical.
La sint axis es de t ipo:

select orElement o { background-repeat : valorParaEjeX valorParaEjeY; }

Escribir background-repeat : repeat -x; sería equivalent e a escribir background-repeat : repeat -x no-
repeat ;

Hay ot ras palabras clave, aunque no son reconocidas por t odos los navegadores. En concret o, space
significaría que la imagen se repit e hast a donde sea posible pero sin cort arse en ningún moment o. La
palabra round vendría a significar que la imagen se repit e hast a donde sea posible y en caso de quedar
un espacio sobrant e, se produce un redimensionamient o del t amaño de la imagen hast a ajust arse al
espacio disponible. Ten en cuent a que si est ableces la propiedad background-repeat con una sint axis
que el navegador no reconoce, le aplicará su valor por defect o, que es repeat . Ten en cuent a t ambién
que no t odos los navegadores responden igual.

Prueba a est ablecer la propiedad background-repeat sobre el código que vimos ant eriorment e y
comprueba sus efect os.

© aprenderaprogramar.com, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.

EJERCICIO 1

Crea un document o HTM L con 4 elem ent os div de 250 píxeles de ancho y 250 píxeles de alt o, t odos
ellos con un margin de 30 píxeles en t odas direcciones y un padding de 30 píxeles en t odas direcciones.
En cada uno de los element os div coloca una imagen de fondo diferent e y un background-color
diferent e. Para comprobar si t us respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea dos páginas w eb cumpliendo est os requisit os:

a) Una página w eb debe t ener una única imagen de gran t amaño (por ejemplo 1024x768 píxeles) como
imagen de fondo, sin repet ición de la misma.

b) Una página w eb debe t ener una imagen de pequeño t amaño (por ejemplo 135x135 píxeles) que
mediant e el uso de la propiedad repeat se expanda como fondo de la página w eb creando un efect o
t apiz.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01031D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
background
d-position, atta
achment, clip, size,
s origin CSS..

PROPIEDA
ADES DE FON
NDO

CSS t iene
e diferent e propiedades
p relacionada
as con el fon
ndo de las cajas
c del boxx-model o modelo
m de
cajas. Ya conocemos algunas de ellas. Vamo s a ampliar el conocimie
ent o sobre llos fondos est
e udiando
ot ras pro piedades: ba posit ion, background-at t achment
ackground-p a , ba
ackground-cllip, backgrou
und-origin,
backgroun
nd-size y la propiedad
p sh
hort and backkground.

PROPIEDA
AD BACKGRO
OUND-POSIT
TION

Est a prop
piedad nos permit
p e est ablecer la po sición de un
na imagen d e fondo. Po r defect o he
emos vist o
que la ima
agen de fond
do se sit úa en
e la part e su
uperior izquie ment o (just o en la esqui na int erior
erda del elem
del borde
e), pero podr emos especiificar ot ra po
osición usand
do est a prop iedad.

La sint axiss a emplear es


e del t ipo:

sele und-posit ion : especificacciónDePosició


ect orElemen t o {backgrou ón; }

La especiificación de posición puede


p hacer se de dist in
nt as manera
as. Una de ellas es es
scribir dos
porcent aj es, represen
nt ando el primero
p de ellos el des
splazamient o x (horizon
nt al) y el se
egundo el
mient o y (ve
desplazam ert ical). Ahorra bien, ¿el % de qué m edida es la que se usa?
? Se usa la medida
m del
ancho y alt o t ot al disp
ponible meno
os el ancho y alt o de la im
magen.

A efect os práct icos, lo


os result adoss aplicando porcent
p ajes son
s est os:

0% 0%: la imagen se coloca en posició


ón superior izquierda (posición p
por defect o , no hay
desplazam
mient o).

s coloca en posición su perior derec


100% 0%:: la imagen se cha (se desp laza el t ot al del espacio diferencia
en horizo nt al).

0% 100%:: la imagen se
s coloca en posición infferior izquierrda (se desp laza el t ot al del espacio diferencia
en vert ica
al).

100% 100
0%: la imagen
n se coloca en
e posición i nferior derecha (se desp
plaza el t ot al del espacio diferencia
en vert ica
al y en horizo
ont al).

© aprenderraprogramar.co
om, 2006-2029
background-position, attachment, clip, size, origin CSS.

PROPIEDAD CSS background-position

Función de la propiedad Permit e definir la posición de la imagen de fondo de un element o.

Valor por defecto 0% 0%.

Aplicable a Todos los element os.

¿Se hereda
No
directamente?

Dos porcent ajes (primer % indica horizont al, segundo % indica vert ical)

Un porcent aje (indica % horizont al, y en la vert ical se produce el cent rado
aut omát ico de la imagen)

Dos unidades de medida, relat ivas o absolut as (primera unidad indica el


desplazamient o horizont al respect o al punt o de inicio, segunda unidad indica el
desplazamient o vert ical respect o al punt o de inicio).

Valores posibles para Una unidad relat iva o absolut a (indica desplazamient o horizont al respect o al
esta propiedad punt o de inicio, y en la vert ical se produce el cent rado aut omát ico de la imagen)

Dos palabras clave a elegir ent re left , cent er y right en la horizont al y t op, cent er
y bot t om en la vert ical (primera palabra indica posición en la horizont al y
segunda palabra clave indica posición en la vert ical)

Una palabra clave a elegir ent re left , cent er y right (indica posición en la
horizont al; en la vert ical se produce el cent rado aut omát ico de la imagen).

inherit (se heredan las caract eríst icas del element o padre).

background-posit ion: 25% 45%;


background-posit ion: 250px 2.55em;

Ejemplos background-posit ion: cent er bot t om;


aprenderaprogramar.com background-posit ion: right ;
background-posit ion: -10%;
background-posit ion: -10px -10px;

Se admit en valores negat ivos para especificar la posición de la imagen de fondo. Los valores negat ivos
se llevarán la imagen hacia fuera del espacio disponible y posiblement e quede una part e de la imagen
no visible. Una ut ilidad que puede t ener el est ablecer un valor negat ivo es para posicionar la imagen
encima del borde izquierdo o del borde superior.

Si usamos dos o más imágenes de fondo podríamos fijar sus posiciones separando la especificación de
posición de cada una de ellas como en est e ejemplo, (aunque algunos navegadores ant iguos pueden no
reconocer est a sint axis):

background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg), url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg);

background-repeat : no-repeat ;

background-posit ion: -10px -10px, right bot t om;

© aprenderaprogramar.com, 2006-2029
background-position, attachment, clip, size, origin CSS.

PROPIEDAD BACKGROUND-ATTACHM ENT

Est a propiedad nos permit e est ablecer si la imagen se comport a como una imagen normal, y se muest ra
en una posición concret a, o si se desplaza a medida que el usuario se desplaza por la página w eb
haciendo scroll de modo que aparece siempre fija como fondo de un element o det erminado (siempre
que ese element o est é visible en la pant alla).

El comport amient o normal se corresponde con la palabra clave scroll, mient ras que el aparecer siempre
fija como fondo cuando hay desplazamient o se corresponde con la palabra clave fixed . Hay ot ra nueva
palabra clave, sólo soport ada por las últ imas versiones de los navegadores, que es local, cuyo
significado es que si el element o dent ro del cual est á la imagen t iene una barra de desplazamient o o
scroll, la imagen permanece fija en ese element o mient ras se haga scroll en él.

La mejor forma de ent ender el comport amient o de background-at t achment es realizar una prueba.
Para ello vamos a ut ilizar el código HTM L de base que venimos empleando a lo largo del curso.

Define los siguient es est ilos css y visualiza el result ado en t u navegador:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {background-color: yellow ;
background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg);
background-repeat : no-repeat ;
background-at t achment : fixed;
}
h1 {height : 450px; w idt h: 2000px;}
h2 {height : 450px;}

Comprueba cómo la imagen se mant iene en la part e superior izquierda de la página w eb aunque t e
desplaces vert icalment e hacia abajo (hemos int roducido una alt ura y anchura desproporcionada para
los element os h1 y h2 simplement e para forzar que la página se expanda en la vert ical y en la horizont al
y poder comprobar mejor el efect o que se genera).

Un aspect o import ant e a t ener en cuent a es que si se est ablece background-at t achment : fixed; la
posición de la imagen de fondo que visualizaremos ya no es la esquina int erior superior izquierda del
element o, sino que es la esquina superior izquierda de la vent ana visible en el navegador. Est o puede
hacer que la imagen de fondo no se vea (por haberse desplazado hast a la esquina superior izquierda de
la vent ana del navegador, quedando fuera del área de fondo del element o), o que aparezca cort ada
aparent ando ser una visualización errónea. Por eso muchos programadores y diseñadores w eb ut ilizan
background-at t achment preferent ement e para poner imágenes de fondo al element o body (cuya área
de visualización coincide normalment e con la vent ana del navegador). Si se usa background-at t achment
con ot ros element os, hay que est ablecer la posición adecuadament e para que la visualización sea
correct a.

Podrían especificarse varias imágenes de fondo y varios comport amient os de est a propiedad, de la
misma forma que vimos para la propiedad background-posit ion.

© aprenderaprogramar.com, 2006-2029
background-position, attachment, clip, size, origin CSS.

PROPIEDAD CSS background-attachment

Función de la propiedad Permit e fijar una imagen de fondo fija aunque haya desplazamient os.

Valor por defecto scroll

Aplicable a Todos los element os.

¿Se hereda
No
directamente?

scroll (comport amient o normal)

fixed (la imagen se mant iene como fondo aún en desplazamient os)
Valores posibles para
local (la imagen se mant iene como fondo si el element o t iene barras de
esta propiedad
desplazamient o y el usuario se mueve dent ro del element o)

inherit (se heredan las caract eríst icas del element o padre).

body { background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg);


Ejemplos
background-repeat : no-repeat ;
aprenderaprogramar.com
background-at t achment : fixed; }

OTRAS PROPIEDADES DE FONDO

Además de las propiedades de fondo que hemos vist o, CSS cont empla ot ras menos comunes que son
las siguient es:

a) background-clip: det ermina la ubicación del área de fondo. Sus valores posibles son border-
box, lo cual sit ua el área de fondo en la esquina ext erior del borde en la part e superior
izquierda, padding-box, lo cual sit úa el área de fondo en la esquina int erior del borde en la
part e superior izquierda del borde, o content-box, lo cual sit ua el área de fondo en la esquina
superior izquierda del cont enido quedando excluida el área de padding. El valor de defect o es
border-box, lo que da lugar a que si hay un color de fondo se sit úe debajo del borde. La
propiedad background-clip afect a t ant o al color de fondo como a la imagen de fondo, sin
embargo hay que t ener en cuent a que la posición de la imagen de fondo es la que hemos
indicado al hablar de background-image y no se ve afect ada por border-clip. Es decir, la imagen
se mant iene en su posición a no ser que especifiquemos ot ra. Con border-clip la imagen podría
verse cort ada (si reducimos el área de fondo). Est a propiedad puede no funcionar
correct ament e en navegadores ant iguos.

b) background-origin: det ermina respect o a qué origen se ha de considerar la posición est ablecida
mediant e la propiedad background-posit ion. Sus valores posibles son border-box, padding-box
y content-box. Su valor de defect o es padding-box, de ahí que una imagen se sit úe en la
esquina int erior de la part e superior izquierda del borde. Si queremos sit uar la imagen en la
part e ext erior de la esquina (alineada con el borde) bast a est ablecer el background-origin:
border-box;

© aprenderaprogramar.com, 2006-2029
background-position, attachment, clip, size, origin CSS.

c) background-size : permit e est ablecer el t amaño de las imágenes de fondo. Se pueden ut ilizar las
palabras clave cover (indica que la imagen debe escalar su t amaño mant eniendo sus
proporciones hast a que encaje en una dimensión del fondo para cubrir complet ament e el área
de fondo; la imagen puede verse cort ada), auto (indica que la imagen se mant endrá 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
mant eniendo sus proporciones hast a alcanzar una de las dos dimensiones del área de fondo; la
imagen no se cort ará en ningún caso, pero el área de fondo puede quedar parcialment e
descubiert a). Est a propiedad puede no ser reconocida en navegadores ant iguos.

La propiedad background-size t ambién puede est ablecerse usando unidades de medida relat ivas o
absolut as y especificando dos medidas o solo una medida.

Si se especifica solo una medida como background-size: 30%; ó background-size: 4.5em ó background-
size: 50px, se ent iende que est a medida est ablece el ancho (w idt h) de la imagen. La alt ura
aut omát icament e se t rat a como si t uviera valor aut o.

Si se especifican dos medidas, la primera de ellas se considerará de aplicación a la dimensión horizont al


y la segunda a la dimensión vert ical. Por ejemplo en background-size: 4.5em 2.25em; la dimensión
horizont al se est ablece en 4.5em y la vert ical en 2.5em.

En el caso de usar porcent ajes, el % se calcula respect o a las dimensiones del área de fondo de la
imagen est ablecidas por background-origin. Por defect o coincide con el área de padding, pero puede
cambiarse si se cambia el valor de la propiedad background-origin. También genera una alt eración el
uso de background-at t achment : fixed; porque el área de fondo en est e caso es el área visible de la
vent ana del navegador.

PROPIEDAD SHORTAND BACKGROUND

Est a propiedad nos permit e est ablecer de forma conjunt a las diferent es propiedades de fondo.

La sint axis a emplear es del t ipo:

background: { valorColorDeFondo valorImagenDeFondo valorRepet iciónImagen valorPosiciónImagen


valorSizeImagen valorOriginPosición ValorClipFondo valorAt t achment Fondo } ;

No es necesario seguir un orden concret o para escribir las propiedades. Si se dejan algunos valores sin
especificar, el navegador aplicará los valores por defect o que t engan esas propiedades sin especificar.
Por ejemplo si escribimos: background: { blue url(img1.jpg) } ; los valores correspondient es a la
repet ición, at t achment , posición, et c. serán los valores por defect o para est as propiedades.

Un aspect o import ant e a t ener en cuent a si se usa la propiedad short and background, es que cualquier
propiedad no especificada se sobreescribe a su valor por defect o anulando los posibles valores
ant eriores que se hubieran especificado. Por ejemplo si escribimos:

.cont ent 43 {background-repeat : no-repeat ; background: url(ht t p:/ / i.imgur.com/ afC0L.jpg); } podríamos
pensar que la imagen no se a repet ir porque hay indicado un valor no-repeat . Sin embargo, la imagen sí

© aprenderaprogramar.com, 2006-2029
background-position, attachment, clip, size, origin CSS.

se repet irá porque aunque no lo hemos indicado específicament e, al incluir una propiedad short and
con post erioridad a la especificación inicial de background-repeat , el valor de repet ición se sobreescribe
pasando a ser su valor de defect o (que es repeat , de ahí que la imagen sí se repet irá). Es un aspect o con
el que conviene ser cuidadosos. En principio, si elegimos usar la propiedad short and, no debemos
realizar ot ras especificaciones independient es para no incurrir en cont radicciones.

© aprenderaprogramar.com, 2006-2029
background-position, attachment, clip, size, origin CSS.

El esquema ant erior resume las propiedades relacionadas con el fondo (background) CSS. Obviament e
no debemos pret ender recordar de memoria t odas las propiedades ni t odos sus valores posibles o
palabras clave asociadas. No obst ant e, debemos t ener conocimient o de las posibilidades que nos ofrece
CSS para el manejo de fondos y saber buscar información y aplicar nuest ro conocimient o de la lógica de
CSS cada vez que nos sea necesario. Para ello es convenient e realizar pruebas y escribir código en
nuest ro ordenador.

CAPAS DE VISUALIZACIÓN

Hemos vist o que en el box-model o modelo de cajas CSS int ervienen diferent es element os como un
cont enido, un borde, un relleno o padding, una imagen de fondo, un color de fondo y un margen.
Cuando varios element os se superponen unos t ienen que visualizarse encima de ot ros, y de ahí que
hablemos de modelo t ridimensional o modelo de capas para las cajas CSS. El orden en que se muest ran
los element os es:

a) El borde se superpone al rest o de element os (capa 1)


b) El cont enido y el padding se sit úan debajo del borde (capa 2)
c) La imagen de fondo se sit úa debajo del cont enido y el padding (capa 3)
d) El color de fondo y el margen se sit úan debajo de la imagen de fondo (capa 4)

EJERCICIO

Crea un document o HTM L con 4 elem ent os div de 400 píxeles de ancho y 400 píxeles de alt o, t odos
ellos con un margin de 40 píxeles en t odas direcciones y un padding de 40 píxeles en t odas direcciones.
En cada uno de los element os div crea un borde y coloca una imagen de fondo diferent e y un
background-color diferent e. Usa la propiedad background-posit ion para hacer que la imagen est é
cent rada t ant o vert ical como horizont alment e respect o al borde del div (por ejemplo, si una imagen
mide 100x100 píxeles, deberá exist ir la misma dist ancia hast a el borde del div en las cuat ro
direcciones). Para comprobar si t us respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01032D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Posicionam
miento CSS: posiition static, rela
ative, absolute
e, fixed.

POSICION
NAM IENTO CSS
C

Hast a aho
ora conocem
mos que los element
e os HT
TM L se divid
den en dos grandes t iposs: element os block que
t ienden a ocupar el esspacio dispo
onible a t odo
o lo ancho y en
e caso de exist
e ir varios se sit úan un
nos debajo
de ot ros y element oss inline que ocupan el espacio neces
sario dent ro
o de una líne
ea y en caso
o de exist ir
varios se sit
s úan uno ju
unt o a ot ro en
e la misma línea (siemp re que haya espacio).

Los princi pales element os HTM L t ipo block so n:

a) D
Divisores: divv
b) Pá
árrafos: p
c) ormularios: form
Fo
2, h3, h4, h5, h6.
d) Tíítulos: h1, h2
e) Liistas: ul, ol
f) e listas: li
Ellementos de
g) ablas: t able
Ta
h) Otros
O : cent er,, pre, t body, t d, t h, t r…

Los princi pales element os HTM L t ipo inline so


on:

a) Liinks: a
b) Divisores
D : spa
an
c) mágenes: im g (aunque est e element o t iene carac
Im ct eríst icas esspeciales)
ontroles de formulario: input , label
d) Co
e) Otros
O : st rong,, u, select …

Queda fu
uera de la clasificación
c el elementt o body, qu e engloba t odo el esp acio dispon ible en el
disposit ivo de visualización.

Cuando t enemos
e dist int os elemen
nt os t ipo blo
ock cada uno
o se coloca en
e una nueva
a línea dist in
nt a a la del
element o ant erior, ess decir, se co locan uno de
ebajo de ot ro
o:

Bloque1 t iene est e co


ont enido de t ext o

Bloque2 t iene est e co


ont enido de t ext o

Bloque3 t iene est e co


ont enido de t ext o …

Cuando t enemos
e dist int
i os elemen
nt os en línea
a se colocan uno
u junt o a ot
o ro:

Element oEnLínea1
o Ele
ement oEnLín
nea2 Elemen
nt oEnLínea3

© aprenderraprogramar.co
om, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

Además los element os en línea que est án dent ro de un bloque se insert an en la misma línea que el
cont enido del bloque. Por ejemplo:

Est e t ext o es un párrafo y esto es un link inline y aquí cont inúa el párrafo.

Recordar que las propiedades w idt h y height sólo son aplicables a element os t ipo block y element os
insert ados en una posición que son reemplazados por un objet o (ent re ellos img, input , t ext area, select ,
object ).

Ahora bien, cuando creamos páginas w eb necesit aremos que element os de dimensiones det erminadas
se sit úen en posiciones det erminadas. Por ejemplo podemos querer t ener t res element os con
dimensiones w idt h y height definidas (por t ant o bloques) sit uados en det erminadas posiciones como
vemos en est e esquema:

Bloque 1

Bloque 3

Bloque 2

Con el código simple que hemos vist o hast a ahora est o no sería posible, ya que unos element os se
sit uarían debajo de ot ros, sin cumplir nuest ro objet ivo de sit uarlos en posiciones específicas.

CSS t iene dist int as propiedades y posibilidades que nos van a permit ir gest ionar el posicionamient o de
element os para crear diseños at ract ivos y conforme a nuest ras necesidades. Comenzaremos el est udio
de est as posibilidades con la propiedad CSS posit ion.

PROPIEDAD POSITION

Est a propiedad nos permit e est ablecer la posición de un element o.

La sint axis a emplear es del t ipo:

select orElement o {posit ion: especificaciónDePosición; }

© aprenderaprogramar.com, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

PROPIEDAD CSS position

Función de la propiedad Permit e definir el t ipo de posición de un element o y su comport amient o.

Valor por defecto st at ic

Aplicable a Element os t ipo block y algunos element os inline especiales como img.

static (comport amient o normal o por defect o)

relative (permit e que un element o se desplace respect o a lo que hubiera sido


su posición normal; el rest o de element os cont inúan en su posición ignorando al
que se desplaza, lo que puede crear superposiciones; el espacio libre que deja el
element o queda libre).

absolute (permit e que un element o se desplace respect o al origen de


coordenadas del primer element o cont enedor posicionado ó respect o a la
Valores posibles para esquina superior izquierda de la vent ana de visualización; el rest o de element os
esta propiedad act úan como si el desplazado no exist iera, por lo que su espacio será ocupado
por ot ros element os; puede crear superposiciones)

fixed (permit e fijar un element o en una posición respect o al origen de


coordenadas del primer element o cont enedor posicionado ó respect o a la
esquina superior de la vent ana de visualización; el element o se mant endrá en la
vent ana de visualización o view port , siempre en una misma posición aunque el
usuario se desplace por la web haciendo scroll)

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {posit ion: relat ive; }


aprenderaprogramar.com .element oFijado {posit ion: fixed; }

La posición absolut a de un element o que no est á dent ro de ningún ot ro se det ermina respect o a la
part e superior izquierda del element o ht ml (part e superior izquierda de la vent ana donde se visualiza la
página w eb; normalment e coincide con la part e superior izquierda del element o body).

Si un element o est á dent ro de varios cont enedores (p.ej. dent ro de varios div) el origen de coordenadas
se est ablece respect o a la esquina superior izquierda del cont enedor que t enga un valor de posit ion
est ablecido y dist int o de st at ic o, en caso de no exist ir ningún element o cont enedor posicionado,
respect o a la esquina superior izquierda del element o ht ml (part e superior izquierda de la vent ana
donde se ve la página w eb). Est o se comprenderá con los ejemplos de código que veremos.

Los ejemplos de código sobre el uso de est a propiedad los veremos una vez hayamos est udiado algunas
propiedades que se usan habit ualment e junt o a ést a (t op, right , bot t om y left ).

Est a no es la única propiedad para est ablecer posiciones de element os. Hay ot ras propiedades
import ant es como float , que veremos más adelant e.

© aprenderaprogramar.com, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

PROPIEDADES TOP, RIGHT, BOTTOM Y LEFT

Est as propiedades nos permit en definir el desplazamient o de la posición de un element o respect o a un


origen de coordenadas y el origen de coordenadas que se t oma.

PROPIEDADES CSS top, right, bottom y left

Permit en definir el desplazamient o de un element o y el origen de


Función de la propiedad
coordenadas que se t omará para el mismo.

Valor por defecto Aut o

Aplicable a Element os que est án posicionados (no aplica si la posición es st at ic).

aut o (no hay desplazamient o especificado y como origen de coordenadas se


t oma la esquina superior izquierda del element o padre)
Valores posibles para Una unidad de medida relat iva (se admit en porcent ajes).
estas propiedades
Una unidad de medida absolut a.

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #menu1 { posit ion: relat ive; t op: 40px; left : 2em; }
aprenderaprogramar.com #moduloEGM { posit ion: absolut e; bot t om: 5%; left : 30px; }

Para element os con posición relat ive est as propiedes definen cuánt o se desplaza el element o respect o
a lo que sería su posición normal.

Para element os con posición absolut e o posición fixed est as propiedades definen cuánt o se desplaza el
element o respect o a las coordenadas de origen.

Se admit en valores de desplazamient os negat ivos.

En el caso de usar porcent ajes, ést e se calcula:

a) Respect o al valor de alt ura (height ) del element o si se aplican con t op ó bot t om.
b) Respect o al valor de anchura (w idt h) del element o si se aplican con right ó left .

No t iene sent ido ut ilizar t op y bot t om al mismo t iempo, porque sería decir que el element o sube y baja.
Hay que ut ilizar sólo una de est as dos propiedades. Lo mismo podemos decir para right y left .

EJEM PLOS DE POSICIONAM IENTO RELATIVO

A cont inuación veremos algunos ejemplos de uso de las propiedades ant eriorment e especificadas. Para
ello vamos a ut ilizar el código HTM L de base que venimos empleando a lo largo del curso.

Define los siguient es est ilos css y visualiza el result ado en t u navegador:

© aprenderaprogramar.com, 2006-2029
Posicionam
miento CSS: posiition static, rela
ative, absolute
e, fixed.

/ * Curso CSS est i los aprenderap


programar.com * /
* {ffont -family: ari al; }
bo
ody {w idt h: 600
0px;}
divv {border-st yle:: solid;}
divv div {border-stt yle: dashed; bo
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
d; border-color:: red; margin: 5px;}
5

Con est o lo único que


e hemos hech
ho es poner bordes y márgenes para visualizar las cajas que conforman
c
la página w eb. El resu lt ado debe ser
s similar a est e:

Vemos un
n div en colo r verde corr espondient e al menú (de
ent ro del cua
al hay ot ro d
div en color rojo
r con el
t ext o “ M enú”
e , una lín
nea generada
a por el <hr/ > y una list a ul con los it ems
e de menú
ú).

M L y est ablecce como id d e dicho div “ menu1” . El código HTM L de ese frag
Accede al código HTM gment o de
w eb qued
dará así:

<! -- menu -->


<d
div id=" menu1" >
<d
div>M enú</ div>
>
<h
hr/ >
<u
ul>
<lii><a href=" #" >Inicio</ a></ li>
<lii><a href=" libro
os.ht ml" >Libro s de programacción</ a> </ li>
<lii><a href=" curssos.ht ml" >Curssos de program ación</ a> </ li>
>
<lii> <a href=" hum
mor.ht ml" >Hum
mor informát ico
o</ a> </ li>
<// ul>
<// div>
<! -- fin menu -->

mos a modifficar la defin ición de est i los CSS para


Ahora vam a hacer lo sig
guient e: mod
dificaremos la
l posición
del eleme
ent o con id “ menu1” parra que se desplace 50 pix
xeles hacia abajo
a y 40 piixeles hacia la derecha
respect o a lo que deb
bía ser su po sición origin
nal. Además vamos
v egundo elem ent o de la
a haccer que el se

© aprenderraprogramar.co
om, 2006-2029
Posicionam
miento CSS: posiition static, rela
ative, absolute
e, fixed.

list a de itt ems de me


enú se despllace 150 pixxeles hacia la
a izquierda respect o a lo que debi era ser su
posición normal
n y el t ercer eleme
ent o de la lisst a 50 pixeles
s a la izquierrda respect o de lo que debiera
d ser
su posició
ón normal. Pa
ara ello usam
mos est e cód
digo y visualiz
zamos el ressult ado:

/ * Curso CSS est i los aprenderap


programar.com * /
* {ffont -family: ari al; }
bo
ody {w idt h: 600
0px;}
divv {border-st yle:: solid;}
divv div {border-stt yle: dashed; bo
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
d; border-color:: red; margin: 5px;}
5
#m
menu1 { posit io
on:relat ive; t op::50px; left : 40p x; }
li:n
nt h-child(2) {po
osit ion: relat ive
e; right : 150px;}}
li:n
nt h-child(3) {po
osit ion: relat ive
e; right : 50px;}

Comproba
amos que la caja del divv se ha despllazado (con t odo su contt enido). Igua
alment e los element
e os
de list a in
ndicados se han
h desplaza
ado. Compro
obamos algu nas cosas cu
uriosas: al de
esplazar la ca
aja del div,
e las dimenssiones del el ement o bod
ést a sale por fuera de dy y se ha su
uperpuesto c
con la caja que
q exist ía
debajo. Al
A desplazar el segundo element
e o de
e list a 150 px
p hacia la izzquierda, el e
element o ha
a quedado
cort ado y no se visu aliza part e de
d él (si el desplazamie a sido t odavvía mayor, n o se vería
ent o hubiera
ninguna part er element o de la list a
p e de est e it em de la list a aparentt ando haberr “ desaparecido” . El t erce
se ve desp
plazado pero
o no se ha sa
alido de la pa
ant alla.

Para desp
plazar hacia abajo usam os t op y parra desplazar hacia la derecha usamo
os left . Pued
de parecer
confuso porque
p left significa
s uierda, pero usar left no
izqu o significa “ desplazar
d ha
acia la izquie
erda” , sino
“ respect o a lo que sería la posición
p no rmal de su
u lat eral izq
quierdo, de
esplazar lo indicado” ,
correspon
ndiendo un valor
v posit ivo
o a “ desplaza
ar hacia la d erecha” y un
n valor negatt ivo a “ despllazar hacia
la izquierd
da” .

© aprenderraprogramar.co
om, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

EJEM PLOS DE POSICIONAM IENTO ABSOLUTO

Seguimos t rabajando sobre el HTM L y hoja de est ilos ant erior. Define los siguient es est ilos css y
visualiza el result ado en t u navegador:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 600px;}
div {border-st yle: solid;}
div div {border-st yle: dashed; border-color: green; margin: 5px;}
div div div {border-st yle: dashed; border-color: red; margin: 5px;}
#menu1 { posit ion:absolut e; }

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 600px;}
div {border-st yle: solid;}
div div {border-st yle: dashed; border-color: green; margin: 5px;}
div div div {border-st yle: dashed; border-color: red; margin: 5px;}
#menu1 { posit ion:absolut e; left:0; top:0; }

El código #menu1 { posit ion:absolut e; } equivale a #menu1 { posit ion:absolut e; left : aut o; t op: aut o; } lo
que supone que se t oma como origen de coordenadas el del element o padre. De ahí que en la imagen
de la izquierda se vea la caja en su posición nat ural, pero al est ar posicionada de forma absolut a es
ignorada por el rest o de element os y su espacio es ocupado como si no est uviera ahí.

El código #menu1 { posit ion:absolut e; left :0; t op:0; } significa que el origen de coordenadas será el del
primer cont enedor posicionado o, si no exist e, la esquina superior izquierda de la vent ana de
visualización. En est e caso se t oma la esquina superior izquierda de la vent ana como origen de
coordenadas.

Cuando se est ablece posit ion en absolut e o fixed el ancho del bloque se ajust a al cont enido (except o si
est á est ablecido específicament e mediant e la propiedad w idt h).

© aprenderaprogramar.com, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

Prueba a cambiar los valores de left y t op y comprueba sus result ados. Por ejemplo si est ableces valores
left : -50px; t op: -50px; verás cómo la caja “ se sale de la pant alla” por la esquina superior izquierda. Si
est ableces right :0; t op:0; verás que la caja se sit úa en la part e superior derecha de la pant alla.

Supón ahora que quieres usar como origen de coordenadas absolut as la esquina superior izquierda del
div cont enedor del que est amos usando como ejemplo. Ese div cont enedor t iene, apart e del menú,
varias cosas más como t ext o con imágenes y un formulario.

Para hacer que el div del menú t ome para origen de coordenadas el div cont enedor en lugar de la
esquina superior izquierda de la pant alla hemos de posicionar el cont enedor. Posicionarlo significa
darle un valor de position distinto del valor por defecto (static). Est o podemos hacerlo de varias
maneras. Por ejemplo podríamos poner un id al div cont enedor y aplicarle una regla nombreEscogido
{posit ion: relat ive; }. No es necesario est ablecer un desplazamient o ya que nosot ros ahora lo único que
queremos es que dicho element o se ident ifique como un element o posicionado, y para ello est ablecer
su propiedad posit ion como relat ive es suficient e.

También podemos hacerlo como vemos en est e código:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 600px; border-st yle:dot t ed;}
div {border-st yle: solid; position:relative;}
div div {border-st yle: dashed; border-color: green; margin: 5px;}
div div div {border-st yle: dashed; border-color: red; margin: 5px;}
#menu1 { posit ion:absolut e; left :150px; t op:30px; }

Hemos est ablecido para t odos los div su propiedad posit ion como relat ive. Al ir a realizar el
posicionamient o del element o con id menu1 el navegador busca el primer div cont enedor posicionado
y realiza el desplazamient o respect o a su esquina superior izquierda. Comprueba la diferencia al
mant ener t odos los div con posit ion:relat ive; y visuliza cómo cambia el result ado respect o a eliminar
ese posicionamient o para t odos los div: el origen de coordenadas que se t oma es dist int o.

EJEM PLOS DE POSICIONAM IENTO FIXED

Seguimos t rabajando sobre el HTM L y hoja de est ilos ant erior. Escribe y comprueba los result ados con
est e código:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 600px; height :2400px; border-st yle:dot t ed;}
div {border-st yle: solid;}
div div {border-st yle: dashed; border-color: green; margin: 5px;}
div div div {border-st yle: dashed; border-color: red; margin: 5px;}

#menu1 { posit ion:fixed; left :50; t op:0;}

Hemos est ablecido un valor de height para body aleat oriament e grande para forzar que aparezcan
barras de scroll vert ical en la página w eb.

© aprenderaprogramar.com, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.

Al hacer scroll, comprobarás que la caja del element o con id menu1 se mant iene fija en una posición de
la página aunque nos desplacemos con el scroll.

El comport amient o del origen de coordenadas con fixed es igual al que hemos explicado con absolut e.

EJERCICIO 1

Define un document o HTM L con un div padre (divPadre), dent ro del cual exist an ot ras 3 cajas
cont enedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles
de margin en t odas direcciones, 30 píxeles de padding en t odas direcciones y un background color
diferent e. Usando posicionamient o relat ivo genera un desplazamient o de los div de la siguient e
manera:

a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respect o a lo que sería
su posición normal.

b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respect o a lo que sería
su posición normal.

c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respect o a lo que sería
su posición normal.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

EJERCICIO 2

Define un document o HTM L con 3 cajas cont enedoras 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 t ercera con dimensiones 100x100px y background color azul. Usando
posicionamient o absolut o est ablece para el div2 y el div3 el mismo origen que para el div1, de modo
que el efect o generado sea ver un cuadrado amarillo dent ro del cual hay un cuadrado verde dent ro del
cual hay un cuadrado azul. Para comprobar si t us respuest as son correct as puedes consult ar en los
foros aprenderaprogramar.com.

EJERCICIO 3

Define un document o HTM L con varios div que cont engan suficient e t ext o como para que la página se
muest re con scroll (barras de desplazamient o). El primero de los div debe cont ener el t ext o <<Est a
página w eb ut iliza cookies. Si cont inúa navegando acept a el uso de cookies.>>, un valor height (alt ura)
de 100 píxeles y color de fondo amarillo. Usando posicionamient o fixed, fija est e div en la part e
superior de la página de modo que se cont inúe visualizando aún cuando hagamos scroll. Para
comprobar si t us respuest as son correct as puedes consult ar en los foros aprenderaprogramar.com.

Próxima entrega: CU01033D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedad display
d CSS.

DISPLAY CSS
C

Los eleme
ent os HTM L se dividen en
e dos grand es t ipos: element os blocck que t iende
en a ocupar el espacio
disponible
e a t odo lo ancho
a y en ca
aso de exist ir
i varios se sit
s úan unos debajo
d de ott ros y element os inline
que ocup an el espaci o necesario dent ro de una
u línea y en
e caso de exist
e ir varios se sit úan un
no junt o a
a misma línea (siempre que
ot ro en la q haya esp
pacio). La pr opiedad disp
play nos perrmit e alt erar el t ipo de
caja con que
q se muestt ra un eleme
ent o.

Sabemos que por ejem


mplo los elem
ment os t ipo t ít ulo como h1 son elem
ment os blockk, y por t ant o de forma
“ nat ural” t ienden a occupar t odo el or el cont rari o element oss como los li nks a o las
e ancho de l a página. Po
imágeness son elemen
nt os inline. Veamos cómo
o la propieda
ad display pe ar est as cuali dades.
ermit e alt era

AD DISPLAY
PROPIEDA

Est a prop
piedad nos permit
p e est ablecer
a el t ip
po de caja que
q el naveg
gador emple
eará para vis
sualizar un
element o,
o siendo los t ipos más co
omunes inlin e y block, au
unque exist en
n bast ant es ot ros.

La sint axiss a emplear es


e del t ipo:

select orElement o {disp lay: especific


caciónDeVisualización; }

PROP
PIEDAD CSS display
d

Función de la propie
edad Per mit e definir el t ipo de po
osición de ca
aja para visua
alizar un elem
ment o.

Dep
pende del element
e o (i nline para element os inline y bl ock para
Valor po
or defecto
ment os t ipo block)
elem

Aplicable a Tod
dos los eleme
ent os.

ne (el elementt o se muest ra


inlin a en una caja inline)
i

ck (el elementt o se muest ra en una caja block).


bloc b

ne (el elementt o no se muest ra; el efecto


non o es como si no exist iera, por lo que
su espacio
e será o cupado por o t ros elemento
os)

Valores posibles parra list--item (el elem


ment o se comp
port a como si fuera un elem
ment o li)

opiedad
esta pro ne-block (el element
inlin e o gene
era una caja block
b pero qu
ue se comportt a como si
fuerra inline admiit iendo ot ros element os en
n la misma lín
nea; el compo
ort amient o
se asemeja
a al de los element os
s img)

Ot ro
os que llevan a que el elem
ment o simule
e el comport a
amient o de ott ro (inline-
t abl e, t able, t abl e-capt ion, t ab
ble-cell, t able-column, t ablle-column-gro
oup, t able-
foott er-group, t ab
ble-header-gro
oup, t able-row
w , t able-row -g
group)

© aprenderraprogramar.co
om, 2006-2029
Propiedad display
d CSS.

PROP
PIEDAD CSS display
d

Ot ro
os avanzados (flex, inline-fl ex, grid, inline
e-grid, run-in))

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplo s #co nt ent 1 {displa


ay: inline;}
aprende
eraprograma
ar.com .element oM ont er {display: blo
ock;}

La propiedad display admit e num


merosos valo
ores, pero lo
os más usado
os son inline
e, block e in line-block.
Son est os
o t res valo
ores los q ue debemo
os aprenderr ahora. El rest o loss iremos co
onociendo
progresiva
ament e a medida
m que an result ar necesarios o cuando profundicem
e nos pueda mos en el
conocimie
ent o de CSS
S. Tener en cuent a t am
mbién que est
e as ot ras propiedades
p a que nos referimos
pueden n o ser recono
ocidas por m uchos naveg
gadores.

A cont inu ación verem


mos algunos ejemplos
e de uso de las propiedades
p nt e especificadas. Para
ant eriormen
os a ut ilizar el
ello vamo e código HTM
M L de base que
q venimos empleando a lo largo de
el curso.

Define loss siguient es est


e ilos css y visualiza
v el r esult ado en t u navegado
or:

/ * Curso CSS est i los aprenderap


programar.com * /
* {ffont -family: ari al;}
bo
ody {w idt h:600p
px;}
divv {border-st yle:: solid;}
divv div {border-stt yle: dashed; bo
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
d; border-color:: red; margin: 5px;}
5
h1
1 {border-st yle: dashed; borde
er-color: green;}
h2
2 {border-st yle: dashed; borde
er-color: red; }
li {border-st
{ yle: dot
d t ed; border-w idt h:t hin; borrder-color:brow
w n; margin: 3pxx;}

Con est o lo único que


e hemos hech
ho es poner bordes y márgenes para visualizar las cajas que conforman
c
la página w eb. El resu lt ado será siimilar a est e::

© aprenderraprogramar.co
om, 2006-2029
Propiedad display CSS.

Vemos un div en color verde correspondient e al menú (dent ro del cual hay ot ro div en color rojo con el
t ext o “ M enú” , una línea generada por el <hr/ > y una list a ul con los it ems de menú).

Accede al código HTM L y est ablece como id de dicho div “ menu1” .

EJERCICIO RESUELTO

Sin ejecut ar código, indica cuáles deberían ser los result ados obt enidos al añadir las líneas que se
indican en la t abla al archivo CSS. Complet a la t abla primero sin ejecut ar el código. Luego, compara t u
solución con la expuest a en la solución.

Fragmento de código añadido Resultado

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;}

© aprenderaprogramar.com, 2006-2029
Propiedad display CSS.

SOLUCIÓN

Prueba a visualizar los result ados en t u navegador al añadir est os fragment os de código y comprueba
que obt ienes los mismos result ados que se indican a cont inuación:

Fragmento de código añadido Resultado

Los element os de it em de menú que son li y que ocupaban cada


li {display: inline;} uno una línea, se ponen en la misma línea. Sólo cuando no caben
en una línea cont inuan en la siguient e.

Las imágenes que est aban en una sola línea unas junt o a ot ras se
img {display: block;} sit úan cada una en una línea comport ándose como element os
block

El menú (con sus cajas int eriores, it ems de menú, et c.)


#menu1 {display:none;} desaparece complet ament e y su espacio es ocupado por el t ext o
“ Aprender a programar es…”

h2 {margin-left:30px; display:list-item;} El t ít ulo h2 aparece con una viñet a como si fuera un element o li
de una list a

A diferencia de est ablecer sólo inline, si un element o salt a de


li {display: inline-block;} línea lo hace complet ament e por ser un bloque. Su t ext o no
puede cort arse ent re líneas como ocurriría si fuera inline.

ul {display: table; } Hace que la list a se comport e como una t abla donde cada it em

li {display: table-cell; padding:10px;} es una celda.

Hay una curiosidad. En la imagen donde vimos las cajas podemos observar que el element o h2 t iene un
espacio libre por arriba y por debajo, que corresponde a un margin-t op y margin-bot t om aut omát ico
que aplica el navegador por defect o para est e t ipo de element os. Si escribimos h2 {display: inline;}
comprobamos no sólo que la caja deja de ocupar t odo el ancho disponible sino que los márgenes
desparecen ¿Por qué? Porque en los element os inline no son aplicables (o se ignoran si est án
est ablecidas) ciert as propiedades como w idt h, height , margin y float . De est e modo, al cambiar el
format o de caja no sólo est amos afect ando a que los element os ocupen una línea a t odo lo ancho o no,
sino t ambién ot ras propiedades que pueden quedar desact ivadas cuando se cambia el t ipo de caja
usando la propiedad display. Tener en cuent a t ambién que los element os inline sólo pueden cont ener
ot ros element os inline o t ext o en su int erior.

Ot ra curiosidad. Posiblement e no obt engas nada coherent e, pero comprueba qué ocurre si como css
ut ilizas est a única declaración * {font -family: arial; display: inline-block;}

Si t e surgen dudas puedes consult ar en los foros aprenderaprogramar.com.

Próxima entrega: CU01034D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.

POSICION
NAM IENTO FLOTANTE
F

Aunque ya
y conocem os la propie
edad posit io
on, que nos permit e org
ganizar la p
posición de element
e os
dent ro de
e una página
a w eb, est a propiedad
p n o es lo sufic
cient ement e flexible com
mo para logr ar diseños
at ract ivoss y que se visualicen correct
c amen o t ipo de d isposit ivos. Vamos a est
nt e en t odo e udiar el
denomina
ado “ posicio namient o flo
ot ant e” , que
e amplía las posibilidades para organ
nizar los elem
ment os en
la w eb.

onamient o fl ot ant e pued


El posicio de result ar un
u poco des
sconcert ant e o confuso cuando se empieza
e a
t rabajar con
c él. Comp
prender su funcionamien
f nt o y posibi lidades requ
uiere t iempo
o y bast ant es
s horas de
est udio y ejercicio. Hay
H er paciencia y pract icar para llegar a compren derlo. Sin embargo, a
que t ene
medida q ue se conocce y se adqu iere experie
encia result ará fácil t raba
ajar con él y se compren
nderán las
vent ajas que
q supone, de ahí que sea
s la forma de posiciona
amient o máss ut ilizado.

Lo primerro que t rat aremos


a de abordar
a es la
a definición de “ flot ar” . El concept o de posicio
onamient o
flot ant e se
s creó inicialment e pa
ara lograr q ue el t ext o se sit uara alrededor d
de las imáge
enes y no
necesariament e debajo de ellas.

Crea un archivo HTM L con est e co


ont enido:

<h
ht ml>
<h
head>
<t it le>Port al w eb
b - aprenderaprrogramar.com<
</ t it le> <met a charset
c =" ut f-8" >
<liink rel=" st ylesh
heet " t ype=" t exxt/ css" href=" esst ilosCU01034D
DA.css" >
<// head>
<b
body>
<d
div>
<p
p>Aquí un párra
afo de t ext o sit uado
u ant es de la
l imagen, dentt ro de un div co
ont enedor</ p>
<im
mg src=" ht t p:/ / i.imgur.com/ affC0L.jpg" alt =" Not
N epad++" t it le="
l Not epad++
+, un út il edit or de t ext o" >
<p
p>Aquí ot ro párrrafo de t ext o. CSS
C es un lengu
uaje ut ilizado en
n la present ació
ón de documen
nt os HTM L.
Un
n document o HTM
H L viene siendo coloquialm
ment e “ una pág
gina w eb” . Así,, podemos deccir que el lengu
uaje
CS
SS sirve para do
ot ar de present ación
a y aspect o,
o de “ est ilo” , a una página w eb.
e
<// p>
<// div>
<// body>
<// ht ml>

Y un arch ivo de hoja de est ilos (n osot ros est amos


a usando
o el nombre de archivo e
est ilosCU010
034DA.css)
con est e código
c que nos
n permit e ver
v el borde de la caja co
ont enedora:

/ * Curso CSS est i los aprenderap


programar.com * /
* {ffont -family: ari al; }
bo
ody {w idt h: 410
0px; border-st yl e: dot t ed; }
divv {border-st yle:: solid; margin: 20px; padding: 5px; backgrou
und-color: yello w ;}
p {t
{ ext -align: justt ify; margin:15p
px;}
im
mg {margin:10pxx;}

© aprenderraprogramar.co
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.

Se llama “ flot ar” un element o a est ablecer un comport amient o especial para él definiendo un valor
para la propiedad CSS float .

La sint axis a emplear es del t ipo:

select orElement o {float : valorFloat ; }

La propiedad float sólo admit e 3 valores: none (el element o no flot a), right y left .

El valor none significa que el element o se comport ará de la forma habit ual dent ro del flujo del
document o HTM L, y es el valor por defect o. Un element o con float : none; decimos que no es flot ant e.

El valor right hará que el element o se desplace hacia la derecha. Se desplazará dent ro de su línea de
posición y dent ro de su cont enedor t ant o como sea posible, y que los element os que vienen a
cont inuación se sit uarán envolviéndolo (en est e caso lo rodearán por la izquierda, ya que el element o
est ará complet ament e a la derecha). Los element os ant eriores no cambian su comport amient o.

El valor left hará que el element o se desplace hacia la izquierda. Se desplazará dent ro de su línea de
posición y dent ro de su cont enedor t ant o como sea posible y que los element os que vienen a
cont inuación se sit uarán rodeándolo (en est e caso lo rodearán por la derecha, ya que el element o
est ará complet ament e a la izquierda). Los element os ant eriores no cambian su comport amient o.

La propiedad float no se puede usar para centrar elementos en una página web. No exist e un valor
cent er para est a propiedad. Unicament e sirve para “ arrast rar” element os hacia la derecha o hacia la
izquierda, t ant o como sea posible, generando un cambio en el flujo del document o HTM L.

Ahora visualiza el result ado modificando la regla css del código ant erior para element os img de las
siguient es maneras:

1) img {margin:10px; float :none;} / * Element o img no es flot ant e * /


2) img {margin:10px; float :right ;} / * Element o img es flot ant e * /
3) img {margin:10px; float :left ;} / * Element o img es flot ant e * /

Visualiza los result ados, que deberán ser similares a est os:

© aprenderaprogramar.com, 2006-2029
Propiedad float y posicionamiento flotante CSS.

Comprobamos cómo con float :none; para la imagen, el comport amient o es el normal. Con float : left ; el
párrafo ant erior a la imagen no cambia su comport amient o. Sin embargo, el párrafo post erior se sit úa
envolviendo (w rapping) al element o flot ant e. Con float : right ; ocurre lo mismo, pero en est e caso la
imagen est á lo más a la derecha posible dent ro de su cont enedor y el t ext o del párrafo que viene
debajo envuelve la imagen por su lado izquierdo.

Un aspect o import ant e es que la propiedad float sólo debe usarse con element os t ipo block, o quizás
sería preferible decir sobre element os que t engan una anchura definida (valor w idt h est ablecido. Un
valor w idt h est ablecido significa que lo habremos especificado a t ravés de código sobre un element o
block, o que el element o es un element o img sin w idt h especificado pero que t iene un valor w idt h
“ implícit o” , el ancho de la propia imagen).

Ahora bien, si decimos que sólo debe usarse con element os t ipo block ¿cómo es que hemos aplicado
con éxit o la propiedad a un element o img que es un element o inline? La explicación es que cuando se
aplica la propiedad float sobre un element o, ést e aut omát icament e pasa a comport arse como una caja
t ipo block. Dicho est o podríamos pensar que t ambién podríamos aplicarle la propiedad float a un
párrafo en el ejemplo ant erior. La respuest a es: no. No podemos, o al menos no debemos, porque los
párrafos del ejemplo ant erior aún siendo block no t ienen un ancho especificado. La propiedad float
sólo debe aplicarse a elementos con un ancho (width) definido explícita o implícitamente. Si se aplica
la propiedad float a un element o sin ancho especificado podemos t ener result ados impredecibles, o
diferent es según el navegador empleado. Por t ant o no debemos hacerlo.

CAJAS ENVOLVENTES EN TORNO A UN ELEM ENTO FLOTANTE

Hemos comprobado cómo un element o como un párrafo envuelve a un element o flot ant e como una
imagen. La pregunt a que nos plant eamos ahora es: ¿cuál es la caja del párrafo envolvent e? Lo podemos
visualizar si en el ant erior código CSS usamos est as reglas:

p {t ext -align: just ify; margin:15px; border-st yle:solid; border-color:grey;}


img {margin:10px; float :left ;}

En la imagen vemos la respuest a: el element o flot ant e ha salido del flujo normal del document o. La caja
del element o envolvent e t iene su forma normal y se encuent ra por debajo del element o flot ant e.

Los bordes, imágenes de fondo y colores de fondo de los elementos envolventes se sitúan debajo de
los elementos flotantes a los que envuelven.

© aprenderaprogramar.com, 2006-2029
Propiedad float y posicionamiento flotante CSS.

¿CUÁNTOS ELEM ENTOS ENVUELVEN A UN ELEM ENTO FLOTANTE?

En el ejemplo que venimos viendo un párrafo envuelve a la imagen que ha t omado posicionamient o
flot ant e. ¿Pero qué ocurriría si t enemos varios párrafos de pequeño t amaño? ¿El primero envuelve y los
demás siguen su flujo normal o t odos los siguient es element os van envolviendo?

Vamos a modificar el fragment o de código HTM L de la et iquet a body así:

<body>
<div>
<p>Aquí un párrafo de t ext o sit uado ant es de la imagen, dent ro de un div cont enedor</ p>
<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" alt =" Not epad++" t it le=" Not epad++, un út il edit or de t ext o" >
<p>Aquí primer párrafo t ras la imagen</ p> <p>Aquí segundo párrafo t ras la imagen</ p>
<p>Aquí t ercer párrafo t ras la imagen</ p> <p>Aquí cuart o párrafo t ras la imagen</ p>
<p>Aquí quint o párrafo t ras la imagen</ p>
</ div>
</ body>

Y el código CSS lo dejaremos así:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 510px; border-st yle: dot t ed; }
div {border-st yle: solid; margin: 15px; padding: 5px; background-color: yellow ;}
p {t ext -align: just ify; margin:15px; border-st yle:solid; border-color:grey;}
img {margin:10px; float :left ;}

Al comprobar el result ado, vemos que t odos los element os a cont inuación de un element o flot ant e
proceden a envolverlo por un lat eral mient ras haya espacio para ello. Podemos hacer que los
element os debajo de un element o flot ant e dejen de envolverlo a part ir de un element o dado usando la
propiedad clear, que explicaremos a cont inuación.

© aprenderaprogramar.com, 2006-2029
Propiedad float y posicionamiento flotante CSS.

EJERCICIO

Para cada una de las siguient es afirmaciones indica si es verdadera o falsa, y just ifica brevement e t u
respuest a:

a) La propiedad float puede t omar cuat ro valores: t op, right , bot t om y left .

b) float es una propiedad que nos permit e maquet ar páginas w eb (document os HTM L).

c) Usando float : cent er; podemos cent rar el cont enido de un element o respect o de su caja
cont enedora.

d) Un element o flot ant e sale del flujo normal de posicionamient o de element os en una página w eb.

e) Todos los element os a cont inuación de un element o flot ant e lo envuelven, a no ser que
especifiquemos lo cont rario usando la propiedad clear.

Para comprobar si t us respuest as son correct as puedes consult ar en los foros


aprenderaprogramar.com.

Próxima entrega: CU01035D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.

POSICION
NAM IENTO FLOTANTE
F

Hay varia
as cuest ione
es sobre el posicionami ent o flot antt e que aún debemos rresolver. Porr ejemplo,
do la propiedad clear po
veremos cómo usand odemos deffinir que un element o y aquellos qu
ue vengan
después de
d est e debe
en dejar de envolver al element o fl ot ant e. Tam
mbién verem os qué ocurrre cuando
varios element os conssecut ivos se flot an.

Recordare mer lugar la propiedad fl oat :


emos en prim

PRO
OPIEDAD CSS
S float

Per mit e est able


ecer un com port amient o especial pa
ara un eleme
ent o, que
Función de la propie
edad es desplazado
d t an a la derec a posible y admit e ser
cha o izquierrda como sea
envvuelt o por ott ros element os.

Valor po
or defecto non
ne

Aplicable a Elem
ment os con un ancho, es
specificado o implícit o co
omo en imág
genes.

ne (el elementt o t endrá com


non mport amient o normal)

ht (el elementt o se desplaza


righ a a la derecha
a t ant o como es posible y admit
a e ser
Valores posibles parra envuelt o).

opiedad
esta pro left (el element o se desplaza a la izquierda
a t ant o como es posible y admit
a e ser
envuelt o).

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplos #co nt ent 1 {float : left ;}


aprende
eraprograma
ar.com .element oM ont er {float : right ;}

En la ent rega
r ant erio r vimos cóm
mo si a un ele
ement o com
mo una image
en se le apli caba un valo
or de float
dist int o d e none, los element
e os a cont inuació n de él (en nuest
n ro ejem
mplo párrafoss) lo envolvía
an.

© aprenderraprogramar.co
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.

PROPIEDAD CLEAR

La propiedad clear indica si un element o y los que le siguen pueden envolver a un element o flot ant e
precedent e y cómo (por la izquierda, por la derecha o por ninguno de los dos lados).

La sint axis a emplear es del t ipo:

select orElement o {clear: valorAsignado; }

PROPIEDAD CSS clear

Permit e est ablecer si un element o y los que le siguen debe envolver


Función de la propiedad
(w rap) a un element o flot ant e precedent e y cómo.

Valor por defecto none

Aplicable a Element os t ipo block.

none (el element o y los que le siguen envolverá al element o flot ant e ant erior)

left (el element o y los que le siguen no envolverán a un element o flot ant e
ant erior cuya propiedad float sea left ; no habrá element os a la derecha del
flot ant e).

Valores posibles para right (el element o y los que le siguen no envolverán a un element o flot ant e
esta propiedad ant erior cuya propiedad float sea right ; no habrá element os a la izquierda del
flot ant e).

both (el element o y los que le siguen no envolverán a un element o flot ant e
ant erior por ninguno de los dos lados; reest ablece el flujo “ normal” )

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {clear: left ;}


aprenderaprogramar.com .element oM ont er {float : right ;}

Usaremos est e código para probar la propiedad:

<ht ml>
<head> <t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01035DA.css" >
</ head>
<body> <div>
<p>Aquí un párrafo de t ext o sit uado ant es de la imagen, dent ro de un div cont enedor</ p>
<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" alt =" Not epad++" t it le=" Not epad++, un út il edit or de t ext o" >
<p>Aquí primer párrafo t ras la imagen</ p> <p>Aquí segundo párrafo t ras la imagen</ p>
<p id=" t ercero" >Aquí t ercer párrafo t ras la imagen</ p>
<p>Aquí cuart o párrafo t ras la imagen</ p> <p>Aquí quint o párrafo t ras la imagen</ p>
</ div> </ body> </ ht ml>

Y el código CSS lo dejaremos así (pon el nombre adecuado al archivo css):

© aprenderaprogramar.com, 2006-2029
Propiedad float y posicionamiento flotante CSS.

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
body {w idt h: 510px; border-st yle: dot t ed; }
div {border-st yle: solid; margin: 15px; padding: 5px; background-color: yellow ;}
p {t ext -align: just ify; margin:15px; border-st yle:solid; border-color:grey;}
img {margin:10px; float :left ;}

Ahora probaremos a añadir est as reglas y comprobar el result ado:

a) #t ercero {clear: bot h;} : comprobaremos cómo el párrado con id=” t ercero” que corresponde al
párrafo cuyo t ext o es “ Aquí t ercer párrafo…” ya no flot a a la derecha de la imagen, sino que se
sit úa debajo de ella rest ableciendo el comport amient o normal.
b) #t ercero {clear: right ;} : comprobaremos cómo el párrafo con id=” t ercero” se mant iene
flot ando en t orno a la imagen. ¿Por qué? Porque clear: right ; da lugar a que los element os no
flot en a la izquierda de un element o con valor de float right . Como en est e caso no t enemos un
element o con valor de float right , est e código no genera ningún efect o.
c) #t ercero {clear: left ; } : comprobaremos cómo el párrado con id=” t ercero” que corresponde al
párrafo cuyo t ext o es “ Aquí t ercer párrafo…” ya no flot a a la derecha de la imagen, sino que se
sit úa debajo de ella. ¿Por qué? Porque clear: left ; da lugar a que un element o y los que le
siguen dejen de envolver a un element o ant erior cuyo valor de float sea left , como es el caso
que nos ocupa.

Es fácil int uir que clear es una propiedad que se usa en combinación con la propiedad float para crear
diseños at ract ivos.

¿QUÉ ENVUELVE A UN ELEM ENTO FLOTANTE Y CUÁNDO LO ENVUELVE?

El posicionamient o flot ant e t iene diversas peculiaridades que debemos ir conociendo poco a poco.

Vamos a emplear est e código HTM L:

<ht ml> <head>


<t it le>Port al web - aprenderaprogramar.com</ t it le>
<met a charset ="ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01035DB.css" >
</ head>
<body>
<div>
<p>Un t ext o antes de las cajas</ p>
<div id=" caja1" >Caja 1</ div>
<div id=" caja2" >Caja 2</ div>
<div id=" caja3" >Caja 3</ div>
<div id =" caja4" >Caja 4</ div>
<p>Un t ext o después de las cajas</ p>
<div class=" limpiador" ></ div>
</ div> </ body>
</ ht ml>

Y el siguient e código css de part ida (ponle el nombre de archivo adecuado):

© aprenderaprogramar.com, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.

/ * Cu
urso CSS est iloss aprenderapro gramar.com* /
* {fon
nt -family: arial; }
bodyy {w idt h:410px;; border-st yle: dot
d t ed;}
div {b
border-st yle: so
olid; margin:7p x; background--color: #FFEFD5
5; }
div div
d {padding: 5p
px; w idt h: 60px;;}
p {m argin:5px;}
.limp
piador{padding:0; border-st yle
e:none;}
#caja
a1{ border-colo
or:red; } #caja2{{ border-color:b
blue;} #caja3{ border-color:gre
b een;} #caja4{bo
order-color:oran
nge;}

La sit uació
ón de part id a es est a:

Ahora vam
mos a realiza
ar est e camb
bio en el códi go CSS: #caj a1{ border-ccolor:red; flo
oat :right ; }

ecer el valor de float righ t comprobam


Al est able mos que la caja
c 1 se va hacia
h la dereccha t ant o co
omo puede
saliendo del
d flujo norrmal del document o. La caja 2 se sit úa en la líne
ea en que se
e encont raba
a la caja 1,
o la posición “ nat ural” qu
ocupando ue le corresp
pondería si n o exist iera la hecho pasa algo similar
a caja 1, de h
a est o po rque la caja 1 ha salido del
d flujo norm
mal y la caja 2 “ ignora a la caja 1” . A
Ahora bien, la
a caja 2 no
se ve que envuelva a la caja 1 ¿Po
or qué? En re
ealidad la cajja 2 sí es envvolvent e de l a caja 1, lo que
q ocurre
es que no
o hay t ext o para aprecia
ar el efect o.. Alarga el t ext pondient e all div de la caja 2 para
e o corresp
comproba
ar el efect o. ¿Qué ocurr e? Que el t ext
e o se alarg
ga hacia abajjo t rat ándosse de adapt ar
a al w idt h
definido para la caja
a, con lo cu
ual t ampoco
o comprobamos que ha
aya comporrt amient o en
nvolvent e.
M odifica así el código
o: #caja2{ borrder-color:bllue; w idt h:39
90px;}

Ahora sí podemos co
omprobar qu
ue el t ext o de la caja 2 que llega a confluir ccon la caja 1 t iene un
comport amient
a o envo
olvent e.

© aprenderraprogramar.co
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.

Conclusión: el comport amient o envolvent e no se aprecia si no exist e t ext o y anchura suficient e para
que se pueda apreciar. En caso de no exist ir t ext o y anchura suficient e, el document o se muest ra como
si el flujo normal cont inuara ignorando al element o flot ant e.

A la pregunt a ¿Qué envuelve a un element o flot ant e? Podemos responder que lo que envuelve a un
elemento flotante es el texto de los element os que vengan a cont inuación de él. Repet imos: lo que
envuelve es el t ext o, no envuelven las cajas ni imágenes ni ot ro t ipo de element os, sólo t ext o.

¿Cuándo envuelve el t ext o de un element o post erior a un element o flot ant e? Cuando exist e ancho
(w idt h) suficient e para que el siguient e element o alcance el borde del element o flot ant e y cuando el
t ext o t iene longit ud suficient e como para poder apreciar el efect o.

¿QUÉ OCURRE SI NO HAY ESPACIO SUFIENTE PARA ENVOLVER?

Sobre el código inicial que habíamos plant eado, vamos ahora a realizar est e cambio en el código CSS:
#caja1{ border-color:red; float :left ; }

Observaremos algo ext raño: la caja 2 parece que no envuelve a la caja 1. El t ext o de la caja 2 aparece
debajo del t ext o de la caja 1. ¿Qué ocurre? Que el t ext o de la caja 2 para poder sit uarse a la derecha del
t ext o de la caja 1 necesit a disponer de un ancho suficient e. Si no dispone de ancho, pasa a la siguient e
línea (agrandando el t amaño de su caja). Bast a darle el ancho suficient e para que se vea cómo el t ext o
de la caja 2 envuelve al t ext o de la caja 1 por su derecha.

M odificaremos el código así: #caja2{ border-color:blue; w idt h:250px;}

Con ello comprobamos cómo el t ext o de la caja 2 envuelve a la caja 1.

M uchas veces un programador o diseñador w eb nos ha plant eado por qué el t ext o no envuelve a una
imagen HTM L u ot ro t ipo de element o. Aquí est á la respuest a. Cuando no hay espacio suficiente para
envolver el texto se sitúa debajo del elemento flotante.

© aprenderaprogramar.com, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.

¿QUÉ OCU
URRE SI APL
LICAM OS FLO
OAT A VARIO
OS ELEM ENT
TOS CONSECU
UTIVOS?

Si aplicam
mos float a varios elem
ment os conse
ecut ivos, los
s element oss se van arrrimando uno
os a ot ros
mient ras exist a espacio suficient e.
e Cuando ya no queda es
spacio, pasarrán a la sigui ent e línea.

M odifica el código in
nicial que he or:red; float : left ; } #caja2{ border-
emos usado así: #caja1{ border-colo
color:blue
e; float : left ;}} #caja3{ borrder-color:grreen; float : le border-color :orange; floa
eft ;} #caja4{b at : right ;}

El result ado lo int erp ret amos de la siguient e manera. La


a caja 1 se sit úa t an a la
a izquierda como
c le es
posible, es
e decir, pega
ada al límit e del cont ene
edor. La caja
a 2 t rat a de sit
s uarse t an a la izquierd
da como le
es posible
e, pero al encont
e rar un o no puede pegarse al borde del
n element o flot ant e ya posicionado
cont ened or, sino que se alinea ju nt o al eleme
ent o flot ant e que se ha encont
e rado. La caja 3 se comport a
igual. La caja
c 4, en cam
mbio, se sit ú a t an a la de
erecha como le es posible
e.

El párrafo
o “ Un t ext o después
d de las cajas” t ra
at a de envollver al últ imo
o element o flot ant e (la caja 4). Su
t ext o com
mienza en la vert ical línea que sería su posición nat ural si nin
nguna de lass 4 cajas exis
st ieran (ya
que han salido
s del flu
ujo normal) y en la horizo
ont al comien
nza desde q ue un eleme
ent o float de
eja espacio
suficient e para poderr insert arse. Trat a de avanzar para envolver
e a la
a caja 4, perro al no hab er espacio
disponible
e salt a a la siiguient e línea.

Elimina ah
hora los párrrafos “ Un t ext o ant es de
e las cajas” y “ Un t ext o después
d de la
as cajas” y comprueba
el result ad
do (mant ien do el posicio
onamient o f lot ant e de la
as cuat ro caj as, t res a la izquierda y la
l cuart a a
la derecha
a).

Te podráss encont rar con


c algo así:

¿Qué est á ocurriendo


o? Que al sal ir del flujo n ormal los ele
ement os flott ant es dejan
n de ocupar espacio
e en
su caja co
ont enedora de
d forma qu
ue el valor he
eight de la caja
c cont ene
edora puede llegar a hac
cerse nulo.
Est o en allguna ocasió
ón puede que
e ni siquiera lo not emos.. No obst ant e, en alguno
os casos com o aquellos
nemos un b orde, color de fondo o imagen de fondo
donde t en f para la
l caja cont e
enedora pue
ede ser un
problema
a.

¿Cómo evvit ar que la caja


c cont ene
edora no inccluya a las ca
ajas flot ant es
e hijas y haccer que se d ibujen sus
fondos co ent os flot antt es? Hay varrias maneras para hacer est
orrect ament e engloband o a los eleme e o.

ma de hacerl o es convertt ir en flot an


Una form nt e t ambién a la caja ma aja flot ant e amplía su
adre. Una ca
t amaño para
p incluir a sus cajas hijjas, de forma
a que declarrando a la m adre como fflot ant e ya se
e ampliará
aut omát iccament e. Si hacemos est
e a modificación: div {border-st
{ yle
e: solid; margin:7px; ba
ackground-
color: #FF
FEFD5; float : left ; } el resu
ult ado será similar a est e:

© aprenderraprogramar.co
om, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.

Vemos có
ómo el elem
ment o body aparece “ co
omprimido” sin
s alt ura en
n la part e su
uperior, por que al ser
t ant o la caja madre co
omo las hijass flot ant es, est
e án fuera del
d flujo del document
d o y el elementt o body no
adquiere alt ura. Tene
er en cuent a que en estt e caso est amos viendo el element o body porq
que hemos
aplicado la propieda
ad border-stt yle:dot t ed; pero est o lo hacemoss en el ma
arco de un curso de
aje, en la práct ica profesiional el elem
aprendiza ment o body no
n lleva bord e práct icame
ent e nunca.

Ahora vea
amos ot ra alt ernat iva d ist int a a con
nvert ir en flo
ot ant e a la caja
c madre. Vamos a de
ejar la caja
madre co mo div {bord
der-st yle: so lid; margin:7
7px; backgro
ound-color: #FFEFD5;}
# yp
por el cont ra
ario vamos
a hacer esst a modificacción: .limpiador{padding
g:0; border-stt yle:none; cl ear:bot h; }

El result ad
do será simillar a est e:

¿Por qué ocurre est o?


o Porque all incluir un element
e o, en est e caso un div, con valor clear::bot h; que
indica qu e debe most rarse sin flo
ot ar, la caja se comportt a como si debajo
d de lo
os element os
s flot ant es
est uviera el element o con flujo normal,
n de modo
m que se
e muest ra co
ont eniendo t ant o a los element
e os
flot ant es como a est e element o. Si el elemen
nt o “ limpiad or” est á vaccío realment e no se mue
est ra, pero
como el navegador
n in t erpret a que
e hay algo, adapt a las dim
mensiones d e la caja.

Hay más formas de l ograr un ressult ado simi lar a est e (p


por ejemplo aplicando la
a propiedad overflow :
hidden; a la caja madrre), pero no vamos a entt rar a explica
arlas ahora.

EJERCICIO
O

Define un
n document o HTM L dond
de a t ravés del
d uso de la
as propiedad
des float y cle
ear y de las ant eriores
propiedad
des que hem
mos vist o a lo largo del cu
urso crees un
n diseño con est e aspect o
o:

a) En prim
mer lugar se
e deben mosst rar 8 cajas div de 50x5
50 píxeles, con
c margin-rright de 5 pííxeles para
cada una de ellas, y cada una d e ellas con dist int o colo
or de fondo , alineadas en horizont al
a hacia la
izquierda gracias al usso de float le
eft .

undo lugar se
b) En segu e debe mostt rar un div co
on un t ext o y color de fo ndo amarillo
o, con marge
en superior
e inferior de 20 píxele
es, abarcando
o t odo el anccho disponib
ble.

c) En t erccer lugar se deben mostt rar 3 cajas div


d de 200x5
50 píxeles, con
c margin-rright de 5 pííxeles para
cada una de ellas, y cada una d e ellas con dist int o colo
or de fondo , alineadas en horizont al
a hacia la
derecha gracias
g o de float right .
al uso

© aprenderraprogramar.co
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.

d) En cuart o lugar un div de fondo de color #DEB887 que ocupe t odo el ancho disponible y cont enga el
t ext o <<Curso CSS aprenderaprogramar.com>>

Not a: si es necesario, usa los div cont enedores auxiliares que t e sean necesarios.

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01036D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Diseño web
b con dos, tres o más columna
as con float.

DISEÑO EN
E COLUM NA
AS

Uno de lo
os usos habitt uales de flo
oat y clear ess crear diseñ
ños donde las cajas t iene
en dist int os t amaños y
se crean una
u cabecerra de página w eb, una p art e cent ral,, una o varia
as columnas lat erales y un
u espacio
en la par t e inferior denominado
d pie o foot er.
e Veamos cómo
c podem
mos generarr est e t ipo de
d diseños
SS.
usando CS

Vamos a part
p ir de est e código HTM
M L:

<h
ht ml> <head>
<t it le>Port al web
b - aprenderaprrogramar.com<
</ t it le> <met a charset
c =" ut f-8" >
<liink rel=" st ylesh
heet " t ype=" t exxt/ css" href=" esst ilosCU01036D
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>
<// ht ml>

ent e código css


Y el siguie c de part id a (ponle el nombre
n de arrchivo adecu
uado):

/ * Cu
urso CSS est iloss aprenderapro gramar.com* /
* {fon
nt -family: arial; }
bodyy {w idt h:410px;; border-st yle: dot
d t ed; border--w idt h: 2px;}
div {b
border-st yle: so
olid; border-w id
dt h:2px; margin
n:7px; padding::7px; backgroun
nd-color: #FFEF
FD5; }
#caja
a1{ border-colo
or:red;}
#caja
a2{ border-colo
or:blue; }
#caja
a3{ border-colo
or:green;}
#caja
a4{border-colorr:orange;}

La sit uaci ón de part id


da es que sim
mplement e t enemos cua
at ro cajas (de
ent ro de las cuales se su
upone que
vamos a organizar
o los diferent es cont
c enidos de
d la página w eb):

© aprenderraprogramar.co
om, 2006-2029
Diseño web con dos, tres o más columnas con float.

ANCHURA Y ALTURA ESPECIFICADA Y TOTAL DE UN ELEM ENTO ¿W IDTH NO FUNCIONA?

¿Cuál es el valor de la propiedad w idt h de la caja 1? Viendo el dibujo y el código podríamos pensar que
el cálculo para obt ener est e ancho sería: 410 px t ot ales – 7px * 2 lados = 396 píxeles

Sin embargo, el valor de la propiedad w idt h se refiere al ancho del espacio que ocupa el cont enido del
element o excluido el margen, borde y padding. Est o nos lleva a que el w idt h de la caja 1 se calcule
como 410 px t ot ales – 7 px * 2 márgenes – 7 px * 2 paddings – 2px * 2 bordes = 378 píxeles ¿Por qué es
est o así?

Podemos pensar en dist int os t ipos de anchura (nos referiremos a anchura, aunque para alt ura es
igualment e válido lo que expondremos). La anchura “ declarada” es la anchura que especificamos al dar
un valor a la propiedad w idt h. La anchura “ aparent e en pant alla” es la anchura que aparent a t ener el
element o en la pant alla (hast a el borde visible, si exist e). La anchura t ot al asociada al element o se
obt iene como margin + border + padding + width (en horizont al para w idht , o de la misma forma en
vert ical para height )

Al declarar un valor w idt h para un element o hijo en porcent ajes, se t oma como valor de referencia el
valor de la propiedad w idt h de su element o padre. Est o puede generar efect os ext raños y hace que
mucha gent e piensa que “ w idt h en porcent ajes no funciona” . En realidad sí funciona, pero hay que
saber cómo. Escribe est e código y visualiza los result ados:

<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<st yle t ype=" t ext / css" >
* {margin:0; padding:0;}
div{ border-st yle:solid; border-w idt h:1px; height : 115px;}
#caja1{w idt h:410px; }
#caja2{w idt h:410px; margin-left :20px;}
#caja3{w idt h:410px; margin-left :20px; padding-left :20px;}
#caja4{w idt h:410px; margin-left :20px; padding-left :20px; border-left -w idt h:20px;}
.int erior {margin-t op: 25px; w idt h:100%; height :40px; background-color:pink;}
</ st yle>
</ head>
<body>
<div id=" caja1" >Caja 1 <div class=" int erior" >100% caja 1</ div></ div>
<div id=" caja2" >Caja 2 con w idt h 410 px y margin-left 20px<div class=" int erior" >100% caja 2</ div></ div>
<div id=" caja3" >Caja 3 con w idt h 410 px, margin-left 20 px y padding-left 20px<div class=" int erior" >100% caja 3</ div></ div>
<div id =" caja4" >Caja 4 con w idt h 410 px, margin-left 20 px,
padding-left 20px y border-left -w idt h 20 px<div class=" int erior" >100% caja 4</ div></ div>
</ body>
</ ht ml>

© aprenderaprogramar.com, 2006-2029
Diseño web con dos, tres o más columnas con float.

Observamos algunas cosas “ ext rañas” :

a) En la caja 1 vemos cómo la caja int erior en color rosado sobresale “ ligerament e” por el lado
derecho ¿Por qué? Est a caja rosada int erior se posiciona just o en la esquina int erior del borde
superior izquierdo de la caja cont enedora (caja 1). Luego es desplazada hacia abajo 25px debido
a la propiedad margin-t op que t iene est ablecida. A cont inuación se dibuja ocupando un espacio
de 1px como ancho del borde izquierdo + 410 px de cont enido + 1 px de borde derecho. El
ancho visible en pant alla (delimit ado por los bordes) es de 412 px, igual que el de su caja padre,
pero est á ligerament e desplazada hacia la derecha, de ahí que sobresalga ligerament e por la
derecha.

b) En la caja 3 vemos que la caja int erior con un ancho del 100% no t oma las dimensiones de la
caja 3, sino que es más pequeña. ¿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 pant alla” con un ancho
de (410 px de cont enido + 20 px de padding-left + 2 px de bordes) = 432 px. Sin embargo la caja
int erior t iene el 100 % del valor w idt h de su caja cont enedora, es decir, 410 px, más 2 px de
borde, con lo que se ve con un ancho de 412 px.

En resumen, hay que t ener siempre present e que los valores w idt h y height son los relat ivos al
cont enido de un element o excluido el padding, borde y margen. El ancho apreciable en pant alla de un
element o puede ser superior al est ablecido con w idt h debido al padding y al borde. El ancho t ot al
asociado a un element o puede ser superior al est ablecido con w idt h debido al padding, al borde y al
margin.

© aprenderaprogramar.com, 2006-2029
Diseño web
b con dos, tres o más columna
as con float.

CREAR UN
N DISEÑO

Ahora vam
mos a ut iliza
ar el código CSS
C para crear un diseño
o con cabece
era, una colu
umna lat eral izquierda,
un espaci o principal y un pie de pá
ágina o foot er.
e

Escribe el siguient e có
ódigo CSS y comprueba
c lo
os result ado s sobre el có
ódigo HTM L d
de las 4 cajas
s:

/ * Cu
urso CSS est iloss aprenderapro gramar.com* /
* {fon
nt -family: arial; }
bodyy {w idt h:410px;; border-st yle: dot
d t ed; border--w idt h: 2px;}
div {b
border-st yle: so
olid; border-w id
dt h:2px;
marg
gin:7px; paddin g:7px;
backkground-color: #FFEFD5; }
/ * La anchura del co
ont enido de la caja
c 1 es:
410 - 14 de margin - 4 de border - 14 de padding
g, result a 378 px
x* /
#caja
a1{ border-colo
or:red;}
#caja
a2{ margin:0 7p
px 7px 7px; bor der-color:blue;
widtt h:75px; float :le
eft ; height :200p
px; }
/ * An
ncho t ot al 410 px
p - 8px bordes - 21 px de marrgin - 28 de pad
dding -75px con
nt enido caja 2
obt enemos
e 278 px* /
#caja
a3{ margin:0 7p
px 7px 0px; bor der-color:green
n;
widtt h:278px; float : left ; height : 30
00px;}
#caja
a4{border-colorr:orange; clear::bot h; height :55
5px;}

Hemos ap
plicado unoss valores de height para poder visua
alizar el diseñ
ño. En una w eb real hei ght puede
quedar si n especificar, de modo que las cajass irán agran dando su t amaño en vert ical en fun
nción de la
cant idad de
d cont enido
o que alberg
guen.

© aprenderraprogramar.co
om, 2006-2029
Diseño web con dos, tres o más columnas con float.

EJERCICIO RESUELTO

Escribir el código CSS para crear un diseño similar al ant erior pero con cabecera, una columna lat eral
izquierda, un espacio principal y una columna lat eral derecha.

SOLUCIÓN

Añadiremos est a línea como últ ima línea del código HTM L, ant es del cierre de body, para rest ablecer el
flujo normal (realment e no t enemos element os debajo y no sería necesario hacerlo, pero podríamos
t enerlos):

<div class=" limpiador" ></ div>

El código CSS sería:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial;}
body {w idt h:410px; border-st yle: dot t ed; border-w idt h: 2px;}
div {border-st yle: solid; border-w idt h:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/ * La anchura del cont enido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, result a 378 px* /
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
w idt h:65px; float :left ; height :200px; }
/ * Ancho t ot al 410 px - 12px bordes - 28 px de margin - 42 de padding -65px cont enido caja 2
-65 px cont enido caja 4 obt enemos 198 px* /
#caja3{ margin:0 7px 7px 0px; border-color:green;
w idt h:198px; float : left ; height : 300px;}
#caja4{ margin:0; border-color:orange; float : left ; w idt h:65px; height :200px;}
.limpiador {clear:bot h; padding:0; border-st yle:none; }

Comprueba los result ados en t u navegador.

Ten en cuent a que est e es un posible código para obt ener un diseño como el propuest o. Quizás a t i se
t e haya ocurrido ot ro código y será igualment e válido (o incluso mejor que est e). Por ejemplo, no hay
por qué usar px para fijar las dimensiones, podríamos usar % ó em u ot ras unidades. Ten en cuent a que
CSS y el diseño w eb no son mat emát icas. Lo import ant e es obt ener el result ado deseado y generar un
código lo mejor posible, pero no el “ código perfect o” porque est e no exist e (o requeriría demasiado
t iempo t rabajar para conseguirlo, sin obt ener vent ajas a cambio).

© aprenderaprogramar.com, 2006-2029
Diseño web con dos, tres o más columnas con float.

EJERCICIO

Define un document o HTM L donde a t ravés del uso de la propiedad float y de las ant eriores
propiedades que hemos vist o a lo largo del curso crees un diseño con est e aspect o:

Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)

M enú Conoce las últ imas novedades del lenguaje


JavaScript . (color de fondo: #ADD8E6)
-Cursos Espacio reservado para
publicidad
-Humor Art ículo sobre Gimp, un programa de soft w are
libre para el diseño gráfico. (color de fondo:
-Divulgación #90EE90)

Cont act a con nosot ros (color de fondo: #DDA0DD) Aviso legal

Not a: los anchos de los element os serán del 100 % disponible si es t odo el ancho (por ejemplo
<<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<M enú>>) y del 50 % si es una
columna doble (por ejemplo <<Art ículo sobre Gimp>>).

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01037D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Concepto d e sprite CSS. ¿Q
Qué es y para qué
q sirve un sprite?

EFICIENCIIA Y VELOCID
DAD DE CARGA

Una págin
na w eb com pleja puede t ener que cargar
c decen
nas o cient oss de imágene
es, t ant o im ágenes de
fondo co mo imágene
es de cont enido. Hemo
os vist o que las imágen es de fondo
o se maneja
an con las
propiedad
des t ipo bacckground y que ent re est as propi edades t ene
emos alguna
as como ba
ackground-
posit ion que
q nos perm
mit en est able
ecer dónde debe
d sit uarse
e la imagen.

Uno de lo
os problemas con las qu e se enfrentt an las págin
nas w eb es que
q son cada
a vez más co
omplejas y
con frecu
uencia incluyyen un gran número de
e imágenes. Cargar una imagen con
nlleva una pet
p ición al
servidor, una respuest a del servvidor, carga en el naveg
gador, et c. e incluso si las imágen es son de
as est as pet i ciones consu
pequeño t amaño t oda umen t iempo
o y hacen qu
ue la página ccargue con le
ent it ud.

Gracias a las facilidad


des que ofre
ece CSS par a el manejo
o de imágen es de fondo
o podemos mejorar
m la
eficiencia del procesado de imáge
enes y la velo
ocidad de carrga de la pág
gina.

CONCEPT
TO DE SPRITE
E CSS

En progra
amación el co
oncept o de sprit
s e puede
e t ener dist in
nt os significa
ados. En CSS nos referim os a sprit e
para hace
er alusión a un
u conjunt o de imágene s agrupadas t odas ellas e
es diferent es en una mism
ma imagen.
Por ejemp
plo:

Est o que vemos es un


u ejemplo t ípico: diferrent es icono
os se agrupa
an en una i magen sigu iendo una
“ cuadrícu la” . La cuadrrícula es un element
e o qu
ue usan los diseñadores
d g
gráficos para
a saber que cada
c icono
ocupa exa
act ament e el
e mismo esp
pacio (por eje
emplo 64 pix
xeles de anccho y 64 pixe
eles de alt o),, pero una
vez t ermi nan de crear el diseño la
a imagen se suele guard ar sin cuadríícula (es deccir, no se ven
n líneas de
división ent re las dist int
i as imágen
nes). El fondo
o t ipo t ablero
o de ajedrezz en los progrramas de dis
seño como
Gimp ó Ph
hot oshop ind
dica que la im
magen es un a t ransparen ma part e de l a imagen en sí.
ncia, no form

© aprenderraprogramar.co
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 número de iconos puede llegar a ser muy grande,
en algunos casos pueden ser decenas o cient os.

En la imagen ant erior t enemos 7x7 iconos en una sola imagen. Supongamos que en cargar una imagen
en la página w eb se t ardara 0,1 segundos. Si cargáramos los 49 iconos por separado requeriría 4.9
segundos mient ras que cargando el sprit e únicament e necesit amos 0.1 segundos (est o es una
simplificación, pero nos vale como ejemplo). Est e es el mot ivo por el que se usan los sprit es en diseño
w eb y en CSS.

Hast a ahora hemos vist o las imágenes dent ro del sprit e como imágenes t odas iguales, cada uno en un
espacio de la cuadrícula, pero est o no t iene por qué ser así. Por ejemplo se puede usar algo de est e
t ipo:

Aquí vemos cómo las dist int as imágenes que componen el sprit e siguen una cuadrícula, pero cada
cuadro es de dist int as dimensiones. Por ejemplo, el icono de la est rella t iene dist int o t amaño que el
icono del pulpo o el icono del escáner.

También puede crearse el sprit e considerando que una imagen ocupa varios espacios de la cuadrícula
como vemos aquí:

© aprenderaprogramar.com, 2006-2029
Concepto de sprite CSS. ¿Qué es y para qué sirve un sprite?

En la imagen ant erior vemos algunos iconos que ocupan un cuadro complet o, ot ros de menor t amaño
que solo ocupan part e de un cuadro y por ot ro lado una imagen de una cabeza de pájaro de mayores
dimensiones que ocupa varios espacios de la cuadrícula.

Un sprit e no sólo puede cont ener iconos, t ambién puede t ener ot ro t ipo de imágenes como logos,
bot ones, imágenes que represent en bordes o esquinas de cont enedores, fondos, et c.

GENERAR O CREAR LOS SPRITES CSS

Normalment e se part e de las imágenes que componen un sprit e por separado para luego reunirlas en el
sprit e. Est o se puede hacer de varias maneras:

a) Usando un programa de diseño gráfico (como Phot oshop, Gimp, et c.).


b) Usando herramient as on-line (sprit e generat ors) que a t ravés de páginas w eb nos permit en
subir las imágenes y nos devuelven el sprit e creado.

No vamos a profundizar en la creación de sprit es porque no es nuest ro objet ivo ahora ent rar en est e
t ipo de det alles. Con t ener el concept o o idea general nos bast a.

CÓM O USAR LOS SPRITES CSS

En un sprit e reunimos dist int as imágenes que van a aparecer en la página w eb como si fueran imágenes
independient es, aunque realment e sean una sola imagen. ¿Cómo se consigue est o? Tendremos que
jugar con el área visible de un element o y con la posición de la imagen. Con lo que hemos vist o en
apart ados ant eriores del curso ya conocemos cómo funcionan los fondos CSS, cómo se det ermina su
área visible y cómo se puede jugar con la posición de las imágenes de fondo. Por ello ya debemos ser
capaces de aplicar est os concept os a la resolución de un ejercicio.

EJERCICIO RESUELTO

Usando el código HTM L de base que venimos empleando a lo largo del curso, y en concret o el
fragment o siguient e:

<! -- menu -->


<div>
<div>M enú</ div>
<hr/ >
<ul>
<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
</ div>
<! -- fin menu -->

© aprenderaprogramar.com, 2006-2029
Concepto d e sprite CSS. ¿Q
Qué es y para qué
q sirve un sprite?

Se desea realizar lo sig


guient e:

a) Reemplazar el
e element o <hr/ > con u n element o que t enga como
c fondo una imagen
n de 18x40
p ixeles de ancchoxalt o que
e se repita a lo largo de t odo el anch o disponible
e en la w eb, creando
c la
ap
pariencia de ser una barrra de separación.

La im agen a ut ilizzar debe ser la que pone


emos a cont i nuación (o cualquier
c ot rra con las dim
mensiones
indica
adas):

art iendo de un sprit e co


b) Pa onos, cada u no de los cu
on cuat ro ico uales ocupa 40x40 pixele
es, colocar
co
omo imagen
n de fondo en un elemen
nt o anexo a cada
c it em de
e menú cada
a uno de los iconos. La
magen a ut ili zar debe serr la que pone
im emos a cont inuación (o cualquier
c ot rra con las dim
mensiones
in
ndicadas):

Como cad ne 40 pixeless de ancho y 40 de alt o, el


da icono t ien o al del spritt e es de 160 pixeles de
e t amaño t ot
ancho po r 40 pixeles de alt o. Los 160 pixeles de ancho res
sult an de mu ancho de 40 pixeles de
ult iplicar el a
cada icon o por 4.

La idea a ut ilizar es l a siguient e: cada eleme


ent o anexo a un it em de drá un área visible de
e menú t end
40x40 pixxeles, de mod
do que al co locar el spritt e sólo se vea un icono (llos ot ros que
edarán ocultt os). En los
cuat ro ele
ement os ane
exos a los it em
e de menú
ú colocaremo
os la misma imagen, perro en dist intt a posición
según el element
e o, da
ando lugar a que en cad
da caso en el área visible
e se vea algo
o dist int o. La
a siguient e
imagen re
efleja la idea:

© aprenderraprogramar.co
om, 2006-2029
Concepto de sprite CSS. ¿Qué es y para qué sirve un sprite?

Hemos dejado como t ransparent ados los iconos que no deben aparecer en la w eb (aquí los most ramos
t ransparent ados para que se aprecie la idea de que siempre est amos ut ilizando la misma imagen, pero
colocándola de dist int a manera para que en el área visible aparezca just o el t rozo de imagen que a
nosot ros nos int erese).

Not a: eliminar las viñet as de la list a que conforma el menú usando est a propiedad: li {list -st yle-t ype:
none;}

SOLUCIÓN AL EJERCICIO

Para el apart ado a) modificaremos el código HTM L de la siguient e manera:

<!--<hr/ >-->

<div id=" barra" ></ div>

Hemos coment ado el hr (con lo cual lo eliminamos), y a cambio hemos int roducido un cont enedor div
sin t ext o y con id=” barra” .

En el archivo de est ilos css int roduciremos el siguient e código:

#barra {w idt h: aut o; height : 40px; background-image: url(" barra.png" )}

Donde barra.png es el nombre de archivo con la imagen, que debe est ar localizado en el mismo
direct orio que el archivo ht ml. También se podría usar una URL ext erna como
ht t ps:/ / lh3.googleusercont ent .com/ -_6GcdriGAEI/ UkkjeJoZlOI/ AAAAAAAAAb0/ 5B8NPiEqYsM / s40/ CU01037D_5.png

Para el apart ado b) crearemos cont enedores de división donde alojar las imágenes de fondo.

No podemos usar <span> para crear los cont enedores porque span es un element o inline y necesit amos
aplicar w idt h y height , y hay que recordar lo siguient e: “ w idt h y height son sólo aplicables a element os
t ipo block y element os insert ados en una posición que son reemplazados por un objet o (ent re ellos img,
input , t ext area, select , object )” . Usaremos por t ant o element os div para crear las divisiones.

<ul id=" it emsM enu" >


<li><div></ div><a href=" #" >Inicio</ a></ li>
<li><div></ div> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li><div></ div> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li><div></ div> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>

El código que proponemos como solución es el siguient e (t en en cuent a que t ú puedes haber creado
ot ro código diferent e. Lo import ant e es que el código est é bien const ruido y proporcione los result ados
deseados):

© aprenderaprogramar.com, 2006-2029
Concepto de sprite CSS. ¿Qué es y para qué sirve un sprite?

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; }
#barra {height : 40px; background-image: url(" barra.png" ); margin-bot t om:30px;}
li {list -st yle-t ype: none;}
#it emsM enu li {height : 45px; line-height :2em; margin-t op: 5px; }
#it emsM enu li div { height : 40px; w idt h:40px; margin-right :15px; background-image: url(cuat roIconos.png);
float :left ;}

#it emsM enu li:nt h-child(1) div {background-posit ion: 0px;}


#it emsM enu li:nt h-child(2) div {background-posit ion: 40px;}
#it emsM enu li:nt h-child(3) div {background-posit ion: 80px;}
#it emsM enu li:nt h-child(4) div {background-posit ion: 120px;}

Donde cuat roIconos.png es el nombre de archivo con la imagen, que debe est ar localizado en el mismo
direct orio que el archivo ht ml. También se podría usar una URL ext erna como
ht t ps:/ / lh6.googleusercont ent .com/ -KahySaHLhw w / UkkjeX4jh4I/ AAAAAAAAAcA/ iEIIJs6NvVw / s160/ CU01037D_6.png

Con los conocimient os que hemos adquirido a lo largo del curso debemos ser capaces de int erpret ar
est e código y sus result ados. Si t ienes dudas, consult a en los foros (aprenderaprogramar.com/ foros).

El result ado a obt ener será similar a est e:

Comprobamos cómo podemos usar una sola imagen y crear la apariencia de est ar usando cuat ro
imágenes jugando con el área visible y posición de la imagen.

Próxima entrega: CU01038D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedade
es visibility y ov
verflow

VISIBILITY
Y CSS

En apart ados
a ant erio res hemos vist
v o cómo a t ravés de la propiedad
d display po
odíamos hac
cer que un
element o “ desaparecciera” de un a página w eb
e est ableci endo su val or en “ none
e” (el eleme
ent o no se
muest ra; el efect o es como si no exist iera, po
or lo que su espacio es ocupado po r ot ros elem
ment os). La
d visibilit y permit
propiedad p e crear un efectt o similar, pero
p en estt e caso el element o permanece
p
o su espacio, aunque no se
ocupando s muest ra.

PROPIIEDAD CSS visibility

Per mit e ocult arr element os sin que su espacio sea ocupado po
or ot ros y
Función de la propie
edad
t am
mbién colapsa
ar filas o colu
umnas de un
na t abla.

Valor po
or defecto visi ble

Tod
dos los elem ent os (excep
pt o valor colllapse, sólo para filas o columnas
Aplicable a
de t ablas).

ble (el elemen


visib nt o es visible)

den (el element o es t ransp arent e, no es visible).


hidd
Valores posibles parra
apse (aplicablle a filas o col umnas de t ab
colla blas las colapsa haciendo qu
ue sean no
esta pro
opiedad
visib
bles).

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplo s #co nt ent 1 {visibillit y: hidden;}


aprende
eraprograma
ar.com t r.fi laColapsada { visibilit y: colla
apse;}

Un aspectt o import antt e a t ener en cuent a es que est a pr opiedad se hereda


h direcct ament e po
or part e de
t odas las cajas hijas de una dada, de mod guna caja hi ja se most rrará (except o si t iene
do que ning
da la prop iedad como
est ablecid o visible). Est o t iene ciert o int erés,
e pues nos permitt e ocult ar
complet ament e una part
p e de una página w eb except o algunos elemen
nt os específi cament e señ
ñalados.

emos pregun
Nos pode nt ar: ¿para qué
q vamos a querer t ener en nuesst ra w eb un
n element o que
q no se
muest ra? Pueden exi st ir varios mot
m ivos. Uno
o de ellos, q ue queramo
os reservar u
un espacio que
q no sea
ocupado por ningún
n ot ro elem
ment o. Ot ro
o mot ivo p uede ser q ue a t ravéss de un len
nguaje de
programa
ación como PHP,
P Javascriipt , et c. querramos alt era
ar el valor de
e la propieda
ad visibilit y para
p que el
element o en algunos casos se mu est re y en ott ros no.

El valor co
ollapse pued
de no respon der correct ament
a e en al gunos naveg
gadores.

Veremos código para aplicar est a propiedad después


d de explicar la pro
opiedad overflow .

© aprenderraprogramar.co
om, 2006-2029
Propiedades visibility y overflow

PROPIEDAD OVERFLOW CSS

Una caja dent ro del box-model de una página w eb puede t ener unas dimensiones limit adas y el
cont enido exceder esas dimensiones. A eso se le llama “ desbordamient o” (overflow en inglés). La
propiedad overflow sirve para cont rolar cómo debe act uar el navegador en caso de que el cont enido
(por ejemplo t ext o) de una caja exceda las dimensiones de la misma.

PROPIEDAD CSS overflow

Permit e definir cómo debe comport arse el navegador en caso de que el


Función de la propiedad
cont enido de una caja exceda su t amaño.

Valor por defecto visible

Aplicable a Element os t ipo block

visible (el cont enido no se cort a, se sale de su cont enedor y se superpone con
los element os adyacent os que puedan exist ir)

hidden (el cont enido que se muest ra es sólo el que cabe en la caja cont enedora
y el rest o queda no visible).

Valores posibles para scroll (el cont enido que se muest ra es sólo el que cabe en la caja cont enedora y
esta propiedad el navegador muest ra barras de scroll que permit en acceder al cont enido no
visible; el scroll se muest ra incluso si el cont enido no excede la caja).

auto (el comport amient o es el que est ablezca el navegador por defect o para
casos de desbordamient o, normalment e most rar scroll)

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {overflow : hidden;}


aprenderaprogramar.com .element oExpress {overflow : scroll;}

Crea un document o HTM L con est e cont enido:

<ht ml> <head>


<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01038DA.css" >
</ head>
<body>
<div id=" caja1" >Caja 1 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
El t ut orial css desde cero permit e aprender sin t ener conocimient os previos</ div>
<div id=" caja2" >Caja 2 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
El t ut orial css desde cero permit e aprender sin t ener conocimient os previos</ div>
<div id=" caja3" >Caja 3 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
El t ut orial css desde cero permit e aprender sin t ener conocimient os previos</ div>
<div id =" caja4" >Caja 4 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
El t ut orial css desde cero permit e aprender sin t ener conocimient os previos</ div>
<div class=" limpiador" ></ div>
</ body>
</ ht ml>

© aprenderaprogramar.com, 2006-2029
Propiedades visibility y overflow

Y un archivo de hoja de est ilos con est as reglas (pon el nombre de archivo adecuado) que nos
permit irán ver el result ado de aplicar los dist int os valores de overflow :

/ * Curso CSS est ilos aprenderaprogramar.com* /

* {font -family: arial;}


body {w idt h:507px; border-st yle: dot t ed; border-w idt h: 2px;}

div {border-st yle: solid; border-w idt h:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; w idt h: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 : aut o;}

.limpiador {clear:bot h; padding:0; w idt h:0; height :0; border-st yle:none; }

En la caja 1 con la propiedad overflow : visible; comprobamos cómo el cont enido se sale de la caja t ant o
hacia la derecha como hacia abajo. No obst ant e hay una diferencia: hacia la derecha el t ext o se
encuent ra ot ro element o y queda “ t apado” , mient ras que hacia abajo no encuent ra ot ros element os, y
a pesar de salirse de la caja cont enedora (incluso se sale del element o body) se muest ra.

Prueba ahora a est ablecer la propiedad visibilit y para dist int as cajas con dist int os valores, e incluso para
el element o body, y comprueba los result ados.

© aprenderaprogramar.com, 2006-2029
Propiedades visibility y overflow

PROPIEDADES OVERFLOW -X Y OVERFLOW -Y CSS

Las propiedades overflow-x y overflow-y son complet ament e análogas a la propiedad overflow , sólo
que en vez de cont rolar t ant o el desbordamient o horizont al como vert ical, únicament e cont rolan el
horizont al (overflow -x) o el vert ical (overflow -y). De est a manera, se pueden especificar dist int os
comport amient os en horizont al y en vert ical.

Est as propiedades pueden no funcionar correct ament e en algunos navegadores por lo que son menos
usadas que la propiedad overflow . También t ienen definidos algunos valores como no-display y no-
cont ent que no son reconocidos por algunos navegadores.

En algunos casos, al est ablecer valores visible o hidden para est as propiedades en sent ido horizont al o
vert ical el navegador int roduce barras de scroll en el ot ro sent ido, aún no habiéndose especificado nada
al respect o.

EJERCICIO

Crea un cont enedor div con las siguient es caract eríst icas definidas a t ravés de CSS: ancho y alt o 200
píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho t ipo sólido, un t ext o de t amaño
30 píxeles y con un largo suficient e para exceder la capacidad del div cont enedor, y mediant e la
propiedad overflow haz que aparezcan scrolls horizont al y vert ical que permit an visualizar t odo el t ext o.
Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01039D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedad z-index.
z Superp
posición de ele mentos.

PROPIEDA
AD Z-INDEX

Hast a ah ora hemos hablado de


el posiciona
amient o de element os en el plan
no de la pa
ant alla de
os direccion
visualización y en do nes: horizontt al (x) y vert ical (y). CSS permit e, aunque co
on algunas
limit acion
nes, gest iona n en la vert ical (eje z) de modo que dados
ar la posición d dos ele
ement os sup
perpuest os
arse encima y cuál debaj o.
se pueda indicar cuál debe most ra

PROP
PIEDAD CSS z-index
z

Función de la propie
edad Per mit e definir cómo se col ocan unos element os en
ncima de ot ro
os.

Valor po
or defecto aut o

Aplicable a Elem
ment os con posición est ablecida
a exp
plícit ament e.

o (no hay z-in dex especifica


auto ado)

Valores posibles parra Un número ente ro (el elemen


nt o est á más próximo
p al usuario cuant o mayor sea
esta pro
opiedad el va ndex; se admitt en números negat ivos).
alor de su z-in

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplo s #co nt ent 1 {z-inde


ez: 22;}
aprende
eraprograma
ar.com .element oJukeBo
ox {z-index:0;}

Es importt ant e dest acar que z-ind ex no vale para


p superpo
oner cont eniidos a nuest ro ant ojo, ya
a que sólo
funciona cuando
c se cu
umplen det erminadas
e co
ondiciones.

En el caso
o de un elem
ment o “ A” cuyyo cont enido
o (t ext o) se sale
s de su co
ont enedor y sse superpon e con ot ro
element o “ B” sit uado M L, el t ext o quedará po r debajo del element o
o con post er ioridad en el código HTM
“ B” debid
do al orden del
d código. La
L propiedad
d z-index no funcionará ya que ni siq
quiera se t ra
at a de una
superposiición ent re element
e os, siino del t ext o desbordado
o de uno con
n el cont ened
dor de ot ro.

En el caso
o de un elem
ment o “ A” po o posicionad o, no podrá est ablecerse el orden
osicionado y ot ro “ B” no
en el eje z usando z in
ndex ya que ambos
a elem ent os t endríían que est ar posicionad os para resp
ponder a z-
index.

En el caso
o de elemen
nt os sit uado
os dent ro de cajas cont enedoras,
e su
u valor de z--index se estt ablece en
relación a la caja con t enedora. Supongamos que una cajja “ A” t iene posición y zz-index 10 y dent ro de
ella hay u na caja “ B” con
c posición
n y z-index “ 20”
2 . Ot ra caja
a “ C” t iene posición
p y z-i ndex 15. Si l as cajas A,
B y C se superponen ¿En
¿ qué ord en se muestt ran? Se mos
st rará la caja ón superior (por t ener
a C en posició
z-index 15
5 frent e al valor
v 10 de l a ot ra caja en o nivel) y debajo la caja A (con la ca
e su mismo aja B en su
int erior). La caja B es hija de la cajja A por lo q ue su z-index es relat ivo
o a su padre, no puede co
ompararse
o est én en su
con ot ras cajas que no u mismo nive
el.

© aprenderraprogramar.co
om, 2006-2029
Propiedad z-index.
z Superp
posición de ele mentos.

Crea un d ocument o HTM


H L con estt e cont enido
o:

<ht ml>
<head>
<t it le>Portt al w eb - apren
nderaprogramar.com</ t it le> <met
< a charset ="" ut f-8" >
<link rel=" st ylesheet " t yp
pe=" t ext / css" h ref=" est ilosCU0
01039DA.css" >
</ head>
<body>
<div id=" ca
aja1" >Caja 1 Ap
prender</ div>
<div id=" ca
aja2" >Caja 2 a<
</ div>
<div id=" ca
aja3" >Caja 3 prrogramar</ div>
>
<div id =" caja4"
c >Caja 4 . com</
c div>
</ body>
</ ht ml>

hivo de hoj a de est iloss con est as reglas (pon


Y un arch n el nombre
e de archivo
o adecuado ) que nos
permit irán ver el resu lt ado ant es de
d aplicar z-index:

/ * Curso CSS
C est ilos aprenderaprograma
ar.com* /
* {font -fam
mily: arial;}
body {w idtt h:507px; bord er-st yle: dot t ed
d; border-w idt h:
h 2px;}
div {borde
er-st yle: solid; border-w
b idt h:2p
px;
padding:7 px; background
d-color: #FFEFD
D5; w idt h:150pxx; height :150px
x; posit ion:abso
olut e; }
#caja1{ bo
order-color:red;; t op: 55px; leftt : 50px; }
#caja2{ bo
order-color:blue
e; t op: 25px; lefft : 175px; }
#caja3{ bo
order-color:gree
en; t op: 70px; le
eft : 200px; }
#caja4{ bo
order-color:oran
nge; t op: 100pxx; left : 100px; }

Ahora aña
ade propieda
ades z-index de la siguien
nt e manera y compara lo
os result adoss de una form
ma y ot ra:

#caja1{ bo
order-color:rred; t op: 55p
px; left : 50pxx; z-index:40;; }
#caja2{ bo
order-color:bblue; t op: 25
5px; left : 1755px; z-index:1
10;}
#caja3{ bo
order-color:ggreen; t op: 70px;
7 left : 20
00px; z-indexx:20 }
#caja4{ bo
order-color:oorange; t op: 100px; left : 100px; z-ind dex:0;}

© aprenderraprogramar.co
om, 2006-2029
Propiedad z-index. Superposición de elementos.

Elimina la propiedad posit ion:absolut e; para t odos los div, mant eniendo el rest o del código igual. Si
visualizas el result ado comprobarás que las propiedades t op y left son ignoradas y que el
posicionamient o sigue el flujo nat ural de element os block en un document o. Declara ahora posición
absolut a únicament e para la caja 4 con #caja4{ border-color:orange; t op: 100px; left : 100px; z-index:0;
posit ion:absolut e;} El result ado será que la caja 4 se superpone con las ot ras cajas. Sin embargo, el
hecho de que la caja 4 t enga un z-index 0 y las ot ras cajas un z-index superior no lleva a que la caja 4 se
vaya al fondo. ¿Por qué? Porque z-index sólo funciona ent re element os con posición est ablecida. En
est e caso la caja 4 t iene una posición absolut a est ablecida y est á fuera del flujo normal del document o,
mient ras que las ot ras cajas no t ienen posición est ablecida y est án dent ro del flujo normal.

Las cajas con posición absolut a se sit úan por encima de las cajas dent ro del flujo normal del
document o, es como si est uvieran en dos planos dist int os, un plano superior para element os con
posición absolut a y un plano inferior para element os dent ro del flujo normal.

Con frecuencia se t rat a de aplicar z-index para element os no posicionados, o ent re element os
posicionados y no posicionados, y el result ado es que aparent ement e z-index “ no funciona” . z-index sí
funciona, pero de acuerdo con unas reglas y limit aciones que debemos conocer para no t ener
quebraderos de cabeza innecesarios.

EJERCICIO

Analiza el siguient e código, visualiza su result ado y responde a las pregunt as:

<ht ml>
<head>
<t it le>Ejemplo aprenderaprogramar.com</ t it le>
<met a charset =" ut f-8" >
<st yle t ype=" t ext / css" >
* {font -family: sans-serif;}
#cajaGris { w idt h: 225px; height : 225px; border: solid 1px #ccc; background: #ddd; margin-t op:20px; }
#cajaAzul {w idt h: 225px; height : 225px; border: solid 3px #4a7497;
background: #8daac3; margin-t op: -50px; margin-left : 50px;}
#cajaOcre { w idt h: 225px; height : 225px; border: solid 2px #8b6125;
background: #ba945d; margin-t op: -50px; margin-left : 100px; margin-bot t om: 20px;}
</ head>
</ st yle>
<body>
<div id =" cajaGris" >Caja gris</ div><div id =" cajaAzul" >Caja azul</ div><div id =" cajaOcre" >Caja ocre</ div>
</ body>
</ ht ml>

a) ¿Cuánt as cajas cont enedoras hay? ¿Est án ident ificadas por id o por class?

b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades est á expresado?

c) ¿Por qué se superponen unas cajas encima de ot ras? ¿En qué orden aparecen las cajas superpuest as
(es decir, cuál est á arriba, cuál est á en posición int ermedia y cuál est á en el fondo)? ¿Por qué aparecen
con ese orden y no ot ro?

© aprenderaprogramar.com, 2006-2029
Propiedad z-index. Superposición de elementos.

d) Queremos que la caja gris se sit úe por encima del rest o de cajas. ¿Qué modificaciones en el código
hemos de hacer para lograr est e objet ivo?

e) M odifica el código para que la caja ocre quede en el fondo, la caja azul en posición int ermedia y la
caja gris encima.

Para comprobar si tu código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01040D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedade
es para control del texto CSS.

PROPIEDA
ADES PARA CONTROL
C DE
EL TEXTO CS
SS

CSS dispo
one de una serie de prop
piedades que
e permit en cont
c rolar la forma
f en qu
ue se muest ra
r el t ext o.
Ent re ella
as vamos a est
e udiar algu
unas como t ext
e -align, co lor, t ext -deccorat ion, t exxt -indent , w hit
h e-space.
Algunas de
d ellas son muy usadas como t ext -a
align. Ot ras como w hit e-space,
e aún siendo men
nos usadas
t ienen un gran pot enccial.

AD TEXT-ALI GN
PROPIEDA

PROPIE
EDAD CSS te
ext-align

Función de la propie
edad Per mit e definir cómo se alin
nea una unid
dad de t ext o (párrafo o siimilar).

Valor po
or defecto left

Aplicable a Con
nt enido de element os t ip
po block y co nt enido de t ablas

Valores posibles parra left,, right, centerr, justify (el t ext


e o se alinea según se indiq
que)

esta pro
opiedad erit (se hereda
inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplos #co nt ent 1 {t ext -a


align: cent er;}
aprende
eraprograma
ar.com .element oJukeBo
ox {t ext -align: just ify;}

Los eleme
ent os inline dent ro del t ext o como
o imágenes o spans que
edan t ambié
én afect ados
s por est a
propiedad dad act úa siiempre en r elación a la alineación horizont
d. La propied h el t ext o. La alineación
al de
vert ical ha
abrá que rea
alizarla usand
do ot ras prop
piedades.

Alineación de
el t ext o left Al ineación del t extt o right Alin
neación del t ext o cent er Alin
neación del t extt o just ify el
t extt o queda alinead
do t ant o por
derecha como po r la izquierda
la d
med
diant e el ajust e del
d espacio.

Est a prop iedad se herreda direct am


ment e por pa
art e de los element os hijjos.

AD COLOR
PROPIEDA

Para est ablecer el collor de un t exxt o se usa la


a propiedad color. En realidad sería más razonable que se
llamara t ext -color, pe
ero por mo t ivos hist óriicos se ha mant
m enido la ación color. Ya hemos
a denomina
hablado de
d la forma
a de expresar colores y grados de
e t ransparen
ncia para co
olores usand
do CSS en
ant erioress apart ados del curso. Recordar q ue es posib
ble usar not ación
a RGB d
decimal o porcent
p ual,
not ación hexadecima
al o not acion
nes RGBA, HSL
H y HSLA. Ejemplo: co
ont ent JBox {ccolor: # FF0
0000;} Est a
d se hereda direct amen
propiedad nt e por partt e de los ele
ement os hij os con la ú nica excepción de los
enlaces <a
a> … </ a>, cu
uyo color t ie
ene que est ablecerse dire
ect ament e sii quiere ser ccambiado.

© aprenderraprogramar.co
om, 2006-2029
Propiedades para control del texto CSS.

PROPIEDAD TEXT-DECORATION

PROPIEDAD CSS text-decoration

Permit e definir algunos element os decorat ivos para t ext o como el


Función de la propiedad
subrayado o el efect o de t achado.

Valor por defecto none

Aplicable a Text os

none (no hay decoración), underline (subrayado normal), overline (subrayado


Valores posibles para por encima), line-through (efect o de t achado)
esta propiedad
inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {t ext -decorat ion: none;}


aprenderaprogramar.com .element oJukeBox {t ext -decorat ion: line-t rough;}

Est a propiedad sirve para evit ar el uso de las ant iguas et iquet as HTM L de subrayado <u> … </ u> y
t achado <st rike> … </ st rike>. ¿Por qué no deben usarse est as et iquet as HTM L? Porque como ya hemos
coment ado con ant erioridad en los desarrollos w eb act uales HTM L debe usarse exclusivament e para
definir la est ruct ura y cont enedores del document o, mient ras que los est ilos deben est ar definidos por
separado mediant e CSS.

Un valor adicional para est a propieadad era blink, que servía para indicar que el t ext o debía parpadear.
No obst ant e, est e valor se ha eliminado del est ándar por lo que no debe usarse.

El valor none puede usarse para anular el subrayado que por defect o int roducen los navegadores para
los links (element os a) si est ablecemos a {t ext -decorat ion: none;}.

Aunque t ext -decorat ion es una propiedad sencilla, t iene un aspect o que puede result ar bast ant e
problemát ico. Supongamos que queremos est ablecer que t odo el t ext o dent ro de un div vaya
subrayado, pero que en el element o con id=” cont ent M box” el t ext o no lleve subrayado. Podríamos
pensar en usar est e código:

div {t ext -decorat ion: underline;}


#cont ent M box {t ext -decorat ion: none;}

El result ado es que aún dent ro del element o para el que hemos especificado t ext -decorat ion:none; el
t ext o sigue est ando subrayado. ¿Por qué? Porque t ext -decorat ion es una propiedad un t ant o especial
que se dibuja acumulat ivament e t ransmit iéndose de padres a hijos sin ser anulable por los hijos. En
est e caso lo que ocurre es que a t odos los div se le aplica el subrayado y luego, acumulat ivament e, al
element o cont ent M box se le aplica t ext -decorat ion: none;. El result ado es underline + none =
underline, el t ext o aparece subrayado. Supongamos ahora que escribimos est o:

div {t ext -decorat ion: underline;}


#cont ent M box {t ext -decorat ion: overline;}

El t ext o dent ro del element o cont ent M box aparecerá con una línea por abajo (underline) y una línea
por arriba (overline) debido al caráct er acumulat ivo de est a propiedad.

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS.

PROPIEDAD TEXT-INDENT

PROPIEDAD CSS text-indent

Permit e definir el indent ado (desplazamient o hacia dent ro) de la


Función de la propiedad
primera línea de un párrafo de t ext o.

Valor por defecto 0

Aplicable a Text os

Valores posibles para Una unidad de medida absolut a o relat iva (incluido %) permit ida en CSS

esta propiedad inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {t ext -indent : 20px;}


aprenderaprogramar.com .element oJukeBox {t ext -indent : 0.6em;}

En el caso de ut ilizarse un valor en %, el porcent aje se calcula como porcent aje del valor w idt h del
element o padre.

PROPIEDAD W HITE-SPACE

PROPIEDAD CSS w hite-space

Det ermina el t rat amient o que le da el navegador a los espacios en


Función de la propiedad
blanco.

Valor por defecto normal

Aplicable a Todos los element os

normal (si aparece una secuencia de varios espacios en blanco dent ro de un


t ext o en el document o HTM L, el navegador los colapsa dejando un solo
espacio; el espacio en blanco se usa para generar salt os de línea si se excede el
t amaño del cont enedor. Los salt os de línea en el document o HTM L se ignoran)

now rap (el comport amient o es como el normal, pero el espacio en blanco no se usa
para generar salt os de línea, por lo que t odo el t ext o queda en una sola línea)

Valores posibles para esta pre (el t ext o se conserva t al y como est é en el document o HTM L, conservando
las secuencias de espacio y salt os de línea como est én allí definidos)
propiedad
pre-w rap (el comport amient o es como con w rap pero los espacios en blanco
se usan para generar nuevas líneas si no hay espacio sufient e disponible)

pre-line (se mant ienen los salt os de línea definidos en el document o HTM L, se
colapsan secuencias de espacios en blanco y se usan espacios en blanco para
generar nuevas líneas si no hay espacio suficient e disponible)

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {whit e-space: pre;}


aprenderaprogramar.com .element oJukeBox {w hit e-space: now rap;}

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS.

Est a propiedad evit a el uso de la et iquet a HTM L <pre> cuyo uso es no recomendado.

Puede result ar de gran int erés para realizar ciert as maquet aciones de ciert as part es de páginas w ebs
donde queremos que el t ext o se comport e de una manera específica en relación a los espacios en
blanco, t abuladores y salt os de línea.

Crea un document o HTM L con est e cont enido (respet ando los espacios y salt os de línea):

<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01040DA.css" >
</ head>
<body>
<div id=" caja1" >Caja 1 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más
</ div>
<div id=" caja2" >Caja 2 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más</ div>
<div id=" caja3" >Caja 3 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más</ div>
<div id =" caja4" >Caja 4 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más</ div>
<div id =" caja5" >Caja 5 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más</ div>
<div class=" limpiador" ></ div>
</ body>
</ ht ml>

Y un archivo de hoja de est ilos con est as reglas (pon el nombre de archivo adecuado) que nos
permit irán ver el result ado del uso de w hit e-space:

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial;}
body {w idt h:650px; border-st yle: dot t ed; border-w idt h: 2px;}
div {border-st yle: solid; border-w idt h:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; w idt h:290px; height :110px; }
#caja1{ border-color:red; w hit e-space:normal;}
#caja2{ border-color:blue; w hit e-space: now rap; font -size:12px;}
#caja3{ w idt h: 225px; border-color:green; w hit e-space: pre;}
#caja4{ w idt h: 225px; border-color:orange; w hit e-space: pre-w rap;}
#caja5{ w idt h: 225px; border-color:black; w hit e-space: pre-line}
.limpiador {clear:bot h; padding:0; w idt h:0; height :0; border-st yle:none; }

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS.

En la caja 1 vemos el comport amient o normal, según el cual varios espacios en blanco seguidos son
ignorados y el t ext o se va desarrollando sobre la caja y aprovechando un espacio en blanco para crear
el salt o de línea cuando es necesario debido a que el t amaño del cont enedor es insuficient e.

En la caja 2 vemos el comport amient o no-w rap. El t ext o no salt a de línea y se mant iene en una única
línea, excediendo el t amaño del cont endor sin adapt arse a él. Si quisiéramos evit ar que el t ext o salga
fuera del cont enedor podríamos usar la propiedad overflow .

En la caja 3 vemos el comport amient o con pre. El t ext o se mant iene t al cual ha sido definido en el
document o HTM L, incluyendo secuencias de espacios, t abuladores, salt os de línea, et c.

En la caja 4 vemos el comport amient o con pre-w rap. En est e caso se mant iene el t ext o t al cual ha sido
definido en el document o HTM L, pero allí donde no hay espacio suficient e el t ext o crea nuevas líneas
aprovechando espacios en blanco para hacerlo.

En la caja 5 vemos el comport amient o con pre-line. En est e caso se mant ienen los salt os de línea del
document o HTM L, pero los espacios en blanco se colapsan y se generan salt os de línea aut omát icos
cuando el cont enido excede el t amaño del cont enedor.

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS.

EJERCICIO

Crea un document o HTM L y un archivo con la hoja de est ilos CSS que cumpla con est os requisit os:

a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados en horizont al, cada uno con margin 20px
en t odas direcciones, relleno de 10 píxeles en t odas direcciones, ancho de 200 píxeles, alt ura de 400
píxeles y borde sólido de 4 píxeles de anchura.

b) El div 1 debe t ener alineación del t ext o cent rada, color de t ext o #FF6347. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras subrayadas y el primer párrafo indent ado un 10%.

c) El div 2 debe t ener alineación del t ext o a la derecha, color de t ext o #008080. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras subrayadas por encima y el primer párrafo indent ado en 50
píxeles. Est e div est ará definido en el HTM L como un t ext o con salt os de línea definidos en ciert os
punt os. Al most rarse por pant alla, deben usarse propiedades CSS para se mant engan los salt os de línea
definidos en el document o HTM L, se colapsen secuencias de espacios en blanco y se usen espacios en
blanco para generar nuevas líneas si es necesario

d) El div 3 debe t ener alineación del t ext o just ificada, color de t ext o #8B4513. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras t achadas, y el primer párrafo indent ado en un 20%.
Además el t ext o cont endrá una frase donde exist an 15 espacios en blanco seguidos, y dichos espacios
deben most rarse cuando se visualice el t ext o (si coincide con un borde del cont enedor deberán
cont inuar en una nueva línea).

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01041D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedade
es para control del texto CSS y efecto sombra
a.

CONTROL
L DEL TEXTO CSS

Ya conoce
emos alguna
as propiedad
des para dar format o a t ext os, como
o t ext -align, ccolor, t ext -d ecorat ion,
t ext -inden
nt , w hit e-spa
ace, et c. Vam
mos a cont in
nuar repasan
ndo propied ades que result an de in t erés para
darle form
mat o a t ext o s como t ext -overflow
- , lin
ne-height y t ext -shadow . Con t ext -sh
hadow podre
emos crear
sombras con
c dist int oss efect os lo cual
c nos resu
ult ará út il parra mejorar n uest ros diseños w eb.

PROPIEDA
AD TEXT-OV
VERFLOW

Ya conoce
emos la pro
opiedad overrflow , que permit
p e defi nir cómo de
ebe comportt arse el navegador en
nido de una caja exceda su t amaño, por ejemplo
caso de q ue el cont en o si el t ext o que excede el t amaño
a cont enedorra debe perm
de su caja manecer visib
ble, ocult o, o accesible mediant
m e barrras de scrolll.

La propiedad t ext -ove


erflow se con
ncibió para dar
d un mayo
or cont rol sob
bre cómo de
ebería comp ort arse un
t ext o que
e se sale de
e su cont ene ext o por un os punt os
edor, permitt iendo el reemplazo del final del t e
suspensivvos (ellipsis) o por una cadena definid
da por nosot ros, por ejem
mplo podría ser “ Leer má
ás…” .

Para apliccar est a prop


piedad t enem
mos que estt ablecer ant es
e la propied
dad overflow
w con valor hidden,
h ya
que si no lo hacemos no observarremos efect o alguno (pre
evalecerá lo indicado porr overflow ). Además
A lo
indicado se
s aplicará al
a t ext o que no quepa en
n sent ido ho rizont al pero
o en cualqui er punt o del t ext o, no
nal. Est o puede generar efect
sólo al fin e os ext ra emplo que u nos punt os ssuspensivos aparezcan
años (por eje
en un pun
nt o int ermed
dio, cuando realment e sólo deberían a evit ar est o habremos
n aparecer al final). Para
de forzar que el t ext o no haga salt
s os de líne
ea usando w hit e-space: now rap; gra
acias a lo qu
ue el t ext -
overflow se aplicará exact
e ament e a la part e fi nal del t ext o.
o

PROPIED
DAD CSS textt-overflow

Per mit e genera


ar un t rat am
mient o espe
ecífico para t ext o que excede
e el
Función de la propie
edad
t am
maño de su co
ont enedor.

Valor po
or defecto clip

Aplicable a Elem
ment os t ipo block con t ext
e o

clip (el t ext o se co


ort a al llegar al
a borde del cont enedor)

psis (la part e final del t ext


ellip e o se reem
mplaza con … ant es de salirse
s del
Valores posibles parra contt enedor)

esta pro
opiedad Una
a cadena, escrrit a ent re com
millas simples, por ejemplo ‘Leer más’ (no
o admit ido
por algunos nave
egadores)

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplos
#co nt ent 1 {overf low : hidden; whit
w e-space: now
n rap; t ext --overflow : elli psis;}
aprende
eraprograma
ar.com

© aprenderraprogramar.co
om, 2006-2029
Propiedades para control del texto CSS y efecto sombra.

Supongamos que | represent a el límit e del cont enedor. Supongamos est e t ext o:

aprenderaprogramar.com es una w | eb para aprender programación.

Los result ados que obt endríamos para los dist int os casos serían:

clip: aprenderaprogramar.com es una w |

ellipsis: aprenderaprogramar.com es una …|

‘...cont inúa’ : aprenderaprogramar.com …cont inúa |

Not a: debido a las limit aciones y problemas de compat ibilidad ent re navegadores no recomendamos el
uso de est a propiedad. Usa preferiblement e overflow en lugar de t ext -overflow .

PROPIEDAD LINE-HEIGHT

Est a propiedad es de amplio uso para est ablecer la separación ent re líneas cuando se muest ra un t ext o.

PROPIEDAD CSS line-height

Función de la propiedad Permit e fijar la alt ura ocupada por las líneas (int erlineado).

Valor por defecto normal

Aplicable a Todos los element os

normal (el int erlineado será el predet erminado por el navegador o el exist ent e
por herencia)

Valores posibles para Un número sin especificar unidades (el int erlineado será t ant as veces el
int erlineado normal como indique el número)
esta propiedad
Una unidad de medida relativa o absoluta (se admit en porcent ajes)

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {line-height : 1.3;}


aprenderaprogramar.com .element oJukeBox {line-height : 130%;}

Se recomienda no especificar unidades para line-height porque puede ent rar en conflict o con el t amaño
del t ext o. Por ejemplo si el t ext o es de 14px y especificamos line-height 10px el t ext o no cabría en la
línea y se generaría una superposición. Ot ro caso problemát ico sería t ener un element o h1 dent ro de
un div y aplicar line-height : 1.1em. Al hacer est o se fuerza al h1 a que t ome como int erlineado 1.1 veces
el t amaño de let ra definido para el div, lo que puede generar dist orsiones. En cambio especificando
simplement e 1.1 sin unidades t odos los element os t omarán como int erlineado 1.1 veces lo que sería su
int erlineado normal, lo cual proporciona un result ado más seguro que ot ra especificación basada en
unidades.

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS y efecto sombra.

PROPIEDAD TEXT-SHADOW

Est a propiedad sirve para añadir efect os de sombra a un t ext o, lo cual permit e generar diseños
at ract ivos.

La sint axis a emplear es la siguient e:

select orElement o {t ext -shadow : valorX valorY blurOpcional colorOpcional; }

Donde valorX indica el t amaño o desplazamient o de la sombra respect o al t ext o hacia la derecha
(valores posit ivos) o hacia la izquierda (valores negat ivos), expresado con una unidad de medida válida
en CSS.

ValorY indica el t amaño o desplazamient o de la sombra respect o al t ext o hacia abajo (valores posit ivos)
o hacia arriba (valores negat ivos), expresado con una unidad de medida válida en CSS.

blur es un parámet ro opcional que indica un efect o de desenfoque o difuminado de la sombra,


expresado con una unidad de medida válida en CSS. A mayor valor, la sombra t iene un mayor
difuminado y se vuelve más clara y brillant e.

El color es un parámet ro 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 t enga el t ext o.

PROPIEDAD CSS text-shadow

Función de la propiedad Permit e definir un efect o de sombra para el t ext o.

Valor por defecto none

Aplicable a Todos los element os

none (no hay efect o de sombra)

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


Valores posibles para
parámet ros especificados; se permit en especificar 2 ó más sombras, separando
esta propiedad
su especificación mediant e comas)

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 { text -shadow : 2px 2px red;}


aprenderaprogramar.com .element oJukeBox { t ext -shadow : -6px -6px 12px blue ;}

Est a propiedad est á disponible en t odos los navegadores recient es, pero algunos más ant iguos pueden
no reconocerla.

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS y efecto sombra.

Crea un document o HTM L con est e cont enido para probar est a propiedad y visualiza los result ados:

<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<st yle t ype=" t ext / css" >
* {font -family: arial;}
h1 {padding:10px 20px;}
</ st yle>
</ head>
<body>
<h1 st yle=" color: black; t ext -shadow : 2px 2px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 4px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red, -6px -6px blue ;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red, -6px -6px 12px blue ;" >aprenderaprogramar.com</ h1>
</ ht ml>

En la imagen ant erior observamos en primer lugar una sombra sólida de color rojo con desplazamient o
hacia la derecha y abajo. En segundo lugar t enemos esa misma sombra con un ligero difuminado (blur)
y en t ercer lugar la misma sobra con un mayor difuminado aún. En cuart o lugar t enemos dos sombras,
una hacia abajo a la derecha roja y difuminada y ot ra hacia arriba a la izquierda azul y sólida. En quint o
lugar la sombra azul ant erior se ha difuminado, con lo cual observamos el efect o de dos sombras
difuminadas, una roja hacia abajo a la derecha y ot ra azul hacia arriba a la izquierda.

© aprenderaprogramar.com, 2006-2029
Propiedades para control del texto CSS y efecto sombra.

EJERCICIO

Crea un document o HTM L y un archivo con la hoja de est ilos CSS que cumpla con est os requisit os:

a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados en horizont al, cada uno con margin 18px
en t odas direcciones, relleno de 8 píxeles en t odas direcciones, ancho de 240 píxeles, alt ura de 300
píxeles y borde sólido de 3 píxeles de anchura con color de borde azul.

b) El div 1 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor,
y el excedent e de t ext o no debe most rarse apareciendo en el punt o final unos punt os … . La alt ura de
línea debe ser un 5 % superior a lo normal. Un fragment o del t ext o (delimit arlo con span) debe t ener
t amaño de fuent e 18 píxeles y una sombra sólida de color rojo con desplazamient o hacia la derecha y
abajo.

c) El div 2 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor,
y el excedent e de t ext o no debe most rarse aunque rebase al cont enedor, y no deben aparecer punt os
en el lugar donde se cort e el t ext o. La alt ura de línea debe ser un 10 % superior a lo normal. Un
fragment o del t ext o (delimit arlo con span) debe t ener t amaño de fuent e 18 píxeles y una sombra sólida
de color azul con desplazamient o hacia la izquierda y abajo.

d) El div 3 debe t ener alineación del t ext o just ificada y color de t ext o #8B4513. Debe cont ener un t ext o
suficient ement e largo como para exceder el t amaño del cont enedor. La alt ura de línea debe ser un 20
% superior a lo normal. Un fragment o del t ext o (delimit arlo con span) debe t ener t amaño de fuent e 18
píxeles y una sombra con efect o de difuminado de color verde de modo que parezca que exist e vapor
verde det rás del t ext o.

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01042D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Propiedade
es para control del texto CSS.

M ÁS CON
NTROL DEL TEXTO CSS

Cont inuam
mos repasan
ndo propieda
ades que result an de in t erés para darle
d formatt o a t ext os como
c t ext -
t ransform
m, que nos pe
ermit irá ent re
r ot ras posiibilidades t ra
ansfomar un
n t ext o a mayyúsculas o minúsculas.
m
Además veremos
v com
mo w ord-sp acing y let t er-spacing
e nos
n permit en
n variar el e
espacio de separación
s
ent re pallabras o lett ras y w ord -w rap nos permit irá ro
omper palab
bras largas que no cab
ben en su
en espacios i nt ermedios que permit an
cont ened or y no t iene a crear salt os
o de línea.

PROPIEDA
AD TEXT-TRA
ANSFORM

PROPIEDA
AD CSS text--transform

Función de la propie
edad Per mit e t ransfo
ormar la aparriencia de un
n t ext o.

Valor po
or defecto non
ne

Aplicable a Tod
dos los eleme
ent os

ne (no hay t ran


non nsformación del
d t ext o)

percase (t ransforma el t ext o a mayúscula


upp as)
Valores posibles parra
wercase (t ransfforma el t ext o a minúsculas)
low
opiedad
esta pro
capiitalize (convie
ert e la primera
a let ra de cad a palabra en mayúsculas)

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplos
#co nt ent 1 {t ext -tt ransform: up percase;}
aprende
eraprograma
ar.com

mos que t ene


Supongam emos el t ext o: “ La mejorr w eb para APRENDER a programar”
p . Los efect os serían:

e : LA M EJOR
uppercase RA WEB PARA
A APRENDER
R A PROGRAM
M AR

e : la mejor w eb para aprrender a prog


low ercase gramar

e : La M ejor Web
capitalize W Para Aprrender A Pro
ogramar

Recordar que hay un


n select or q ue nos perm
mit e definir est ilos para
a la primera let ra de t ext o de un
párrafo o cont enedo
or que es firrst -let t er. Po mbinar est e select or con
odemos com n t ext -t ransfform para
poner la primera lett ra en un format
f o esp
pecial. Por ejemplo
e p::ffirst -let t er {ffont -size: 30
00%; t ext -
t ransform
m: uppercase
e;} nos perrmit e ponerr la primerra let ra en mayúsculass y con un
n format o
ext ragran de.

© aprenderraprogramar.co
om, 2006-2029
Propiedade
es para control del texto CSS.

PROPIEDA
ADES LETTER
R-SPACING Y W ORD-SPA
ACING

Se t rat a de
d dos propiiedades de uso
u no habitt ual que perrmit en est ab
blecer una se
eparación en
nt re let ras
específica
a o una separración ent re palabras esp
pecífica.

Su valor por
p defect o es normal y se est ableccen indicand
do una unida
ad de medid
da válida en CSS como
valores en
n píxeles o en em.

Ejemplos:: cont ent 1 { let


l t er-spacin
ng: 9px;}

#jukBox { w ord-spacin
ng: 1.3em;}

Se admit en
e valores ne
egat ivos, perro en alguno
os casos pueden generarr efect os ext raños indese
eados (por
ejemplo superposició
s n de palabra
as o let ras un
nas encima de
d ot ras).

PROPIEDA
AD W ORD-W
W RAP

Ya sabem
mos que a n o ser que hayamos
h esp
pecificado lo
o cont rario con
c la propi edad w hit e--space, las
palabras aprovechará
án espacios en blanco para
p sit uarse
e en una nu
ueva línea cu
uando el espacio a lo
ancho es insuficient e en el cont en
nedor. No o bst ant e, exis
st e el proble una palabra puede ser
ema de que u
t an larga que ocupe t odo el ancho disponib le y se salga nedor sin po sibilidad de crear una
a del cont en
nueva líne
ea por la faltt a de espacio o (est o se po dría denomi nar “ palabra
os en blanco a irrompible”” ). Usando
la propied
dad w ord-w rap cuyo valor por defe
ect o es norm
mal y cuyo único
ú posible es b reak-w ord
valor p
podemos especificar que la palab
bra deberá cont
c inuar en una nueva línea incluso
o cuando no
o exist a un
espacio en blanco parra generar el salt o de líne
ea.

Crea un d ocument o HTM


H o para probar est a propie
L con estt e cont enido edad y visualliza los resultt ados:

<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma


ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
h1 {margin
n: 20px; paddin
ng:10px 20px; border-st
b yle: so lid; border-colo
or: red; border--w idt h: t hin;}
</ st yle> <// head>
<body> <h
h1 st yle=" w idt h:210px;
h backgrround-color:yel low ;" >aprenderaprogramar.co
om</ h1>
<h1 st yle=
=" w idt h:210px; background-co
olor:yellow ; w o rd-w rap: break-w ord;" >apren deraprogramarr.com</ h1>
</ body><// ht ml>

© aprenderraprogramar.co
om, 2006-2029
Propiedades para control del texto CSS.

EJERCICIO

Crea un document o HTM L y un archivo con la hoja de est ilos CSS que cumpla con est os requisit os:

a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados en horizont al, cada uno con margin 33px
en t odas direcciones, sin relleno, ancho de 180 píxeles, alt ura de 300 píxeles y borde sólido de 6 píxeles
de anchura con color de borde rojo.

b) El div 1 debe cont ener un t ext o suficient ement e largo, con numerosos párrafos, como para exceder
el t amaño del cont enedor. El t ext o del ht ml debe t ransformarse complet ament e a mayúsculas
mediant e el uso de propiedades CSS. La separación ent re let ras debe ser un 5% superior a lo normal. La
primera let ra de cada párrafo debe t ener un t amaño un 250% lo normal.

c) El div 2 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor.
El t ext o del ht ml debe t ransformarse complet ament e a minúsculas mediant e el uso de propiedades
CSS. La separación ent re let ras debe ser un 10% superior a lo normal. Debe cont ener una palabra
(cadena de t ext o cualquiera) de gran longit ud, de modo que no quepa en el cont enedor, y “ romperse”
para no exceder la capacidad del cont enedor usando la propiedad w ord-w rap.

d) El div 3 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor.
El t ext o del ht ml debe t ransformarse para que t oda palabra comience con una let ra mayúscula
mediant e el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo
normal. Debe cont ener una palabra (cadena de t ext o cualquiera) de gran longit ud, de modo que no
quepa en el cont enedor, y no romperse.

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01043D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
vertical-alig
gn CSS. Alinear verticalmente elementos.

CENTRAD
DO VERTICAL
L DE ELEM EN
NTOS

Hemos visst o un núme


ero relat ivam
ment e amplio
o de propied
dades CSS qu
ue nos perm
mit en t rabajar aspect os
de alineacción en la h orizont al y, sin embargo
o, las posibil idades de t rabajo
r en la vert ical son menores.
Vamos a est udiar la propiedad
p ve
ert ical-align que permit e el posicion amient o y ce
ent rado de element
e os
en la vert ical, aunque su funcionamient o t iene
e ciert as com
mplicaciones.

PROPIEDA
AD VERTICAL-ALIGN

Es muy frrecuent e oir la expresión


n “ vert ical-allign no funciiona bien” a personas q ue est án co menzando
con CSS o que t ienen un conocim
mient o superfficial de CSS.. La realidad es que hay que conocer para qué
sirve est a propiedad y comprende
erla para pod
der valorar lo
os result adoss que se obt iienen con ellla.

opiedad que
Es una pro e al principio result a difícil de ent end er, vamos a t rat ar de haccerlo poco a poco.

PROPIED
DAD CSS verttical-align

Perm
mit e posicio nar elementt os inline en
n dist int as alineaciones vert icales
Función de la propie
edad resp
pect o a una
a línea. Tam
mbién permitt e alinear ve
ert icalment e cualquier
elem
ment o dent ro de una celda de una t abla..

Valor po
or defecto base
eline

Aplicable a Elem
ment os inline y element os dent
d ro de celd
das de t ablas

eline (el elem


base ment o se alinea
a como lo harría normalmen
nt e)

ddle (elementt os inline se alinean de modo


mid m que se cent ran vertt icalment e
resp
pect o a la líne
ea del elemen t o padre en l a que est án; e
element os en
n celdas de
t abl as se cent ran vert icalment e en la celda de
d la t abla)

top y bottom (ele


ement os inlin
ne se alinean de
d modo que se su part e superior
s se
ea con la línea en la que es
aline st án; elementt os en celdas de t ablas se colocan
c en
la pa
art e superior en la celda de
e la t abla)

bottom (elem
textt-top y text-b ment os inline se alinean d
de modo que
e su part e
Valores posibles parra
supe
erior se alinea
a con la part e superior de la
a línea del ele
ement o padre; su efect o
esta pro
opiedad
suelle ser muy sim
milar al de t op
p y bot t om)

sub y super (elem


ment os inline
e se alinean de
d modo que se su part e superior
s se
ea con las líne
aline eas de subínd ice o superínd
dice del eleme
ent o padre)

Una
a unidad de medida rellat iva o absolut a válida en CSS (se
e admit en
porccent ajes. Desplaza la línea de base del element o haccia arriba respect o a su
base
eline en la medida
m indicad e a baseline; si es % se
da. Si se indicca 0 equivale
calccula respect o al
a valor de line
e-height . Se admit
a en valore
es negat ivos.))

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

© aprenderraprogramar.co
om, 2006-2029
vertical-alig
gn CSS. Alinear verticalmente elementos.

PROPIED
DAD CSS verttical-align

Ejemplos
img {vert ical-align
n:middle;}
eraprograma
aprende ar.com

mos la prop
Como vem piedad vert iccal-align t ien
ne ciert a com
mplejidad, ent
e re ot ras ccosas porqu e muest ra
dist int o comport
c amie
ent o según se
s aplique a element os en cont ene
edores “ norm
males” o a element
e os
dent ro de
e celdas de t ablas.
a

Dent ro de
e una t abla el
e comport am
mient o de ve
ert ical-align podemos
p deccir que es el que espera la mayoría
de la gentt e: permit e cent
c rar vert iccalment e.

Crea un d ocument o HTM


H L con estt e cont enido
o para probarlo y visualiza los result ados:

<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma


ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" > * {font -family: arrial; } t able {ma
argin:20px; back
kground-color:yyellow ;}
t d {height : 100px; t ext -al ign:cent er; pad
dding:2px;}
</ st yle> </
< head>
<body>
<t able borrder=" 1" cellpad
dding=" 0" cellspacing=" 0" st ylle=" w idt h: 450p
px;" >
<t r> <t d stt yle=" vert ical-align:baseline;" ><p>Un text o<
</ p></ t d>
<t d st yle="" vert ical-align:tt op;" ><p>Un t ext
e o</ p></ t d>
<t d st yle="" vert ical-align:b
bot t om;" ><p>U
Un t ext o</ p><// t d>
<t d st yle="" vert ical-align:m
middle;" ><p>U
Un t ext o</ p></ t d>
</ t r> </ t ab
ble> </ body> </ ht ml>

Con las ce
eldas de una t abla el resu
ult ado es el esperado: co
on t op el t exxt o se coloca arriba, con bot t om se
coloca ab ajo y con mi ddle se cent ra vert icalm ent e.

mos a int entt ar emular est e comportt amient o con


Ahora vam n cont enedo
ores “ normal es” como di v. Crea un
documentt o HTM L con
n est e cont en
nido para pro
obarlo y visu
ualiza los result ados:

<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma


ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" > * {font -family: arrial; }
div {heightt : 100px; w idt h :112px; t ext -al ign:cent er; pad
dding:2px; float :left ; backgroun
nd-color:yellow
w ; border-st yle:solid;}
</ st yle> </
< head>
<body>
<div st yle=
=" vert ical-align::baseline;" ><p >Un t exto</ p><
</ div>
<div st yle=
=" vert ical-align::t op;" ><p>Un t ext o</ p></ divv>
<div st yle=
=" vert ical-align::bot t om ;" ><p>
>Un t ext o</ p><
</ div>
<div st yle=
=" vert ical-align::middle;" ><p>Un t ext o</ p><// div>
</ body> </
< ht ml>

© aprenderraprogramar.co
om, 2006-2029
vertical-alig
gn CSS. Alinear verticalmente elementos.

¿Por qué no se aline


ea el t ext o? Pues porque
e la propied
dad vert ical-align funcion
na de una manera
m en
t ablas y de
d ot ra man
nera fuera de
d las t ablass. Fuera de t ablas, est a propiedad no puede aplicarse
a a
element os n puede apl icarse a un cont
o t ipo block.. Por t ant o no c enedor esperando
e q
que lo que ha
aya dent ro
de él se cent re vert ica
alment e. El código
c ant errior no t iene sent ido (aun
nque mucha gent e int en
nt a realizar
alineacion
nes vert icales así, de ahí que se oiga con t ant a fre
ecuencia que
e “ no funcion
na” ).

Fuera de t ablas, est a propiedad se


e aplica a ele
ement os inlin
ne para centt rarlos respect o a la línea
a en la que
se insert an,
a no puede
e ser aplicad
da a un con t enedor parra que los element os de
ent ro de él se alineen
vert icalme mplet ament e dist int o en t ablas que fuera
ent e. El conccept o es com f de t abl as (lo cual es
s curioso y
ue pregunt arle a los cr eadores de CSS por qu
habría qu ué han hech
ho est o así).. Para comp
prender el
concept o de vert ical-align fuera de
d t ablas fíja
at e en est a imagen porq
que supone un resumen
n didáct ico
del uso de
e vert ical-alig
gn fuera de t ablas.

En el recuadro superrior izquierd o vemos lo que sería una


u línea dent ro de un cont enedor div en su
posición nat
n ural: se coloca
c en la part e super ior del div. En
E el recuad
dro inferior izzquierdo vem
mos cómo
aparecería la imagen si se insert a dent ro de u na línea sin especificar
e v ical-align (o lo que es lo mismo,
vert
aplicándo
ole vert ical-align: baselin e;). En el reccuadro superior derecho
o se ha aplica
ado vert ical--align: t op;
a la image
en y ést a lo que
q hace es poner su pa
art e superiorr alineada co
on la línea de
ent ro de la cual
c est á la
imagen. En
E el recuad gn: middle; a la imagen y ést a se
dro inferior derecho se ha aplicado vert ical-alig
cent ra vert icalment e respect o a la
a línea dent ro
r de la cual est á.

© aprenderraprogramar.co
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.

Podemos dest acar lo siguient e:

a) vert ical-align se aplica al element o inline para alinearlo respect o a la línea dent ro de la cual est á
(por el cont rario, t ext -align se aplica al cont enedor para alinear horizont alment e su cont enido,
lo cual es un concept o dist int o).
b) vert ical-align no alinea respect o al cont enedor, sino respect o a la línea.

M ost ramos ahora el código HTM L. Escríbelo, visualiza los result ados y t rat a de comprenderlo:

<ht ml> <head> <t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<st yle t ype=" t ext / css" >
* {font -family: arial; }
img { margin-left : 5px; margin-right :5px; }
div { w idt h: 360px; height : 210px; margin: 10px; padding:5px 20px; border-st yle: solid; border-color: red;
border-w idt h: t hin; background-color: yellow ; t ext -align: cent er;}
</ st yle> </ head>
<body>
<div st yle=" float :left ;" >Línea de text o sin una imagen</ div>
<div st yle=" float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:baseline;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div>
<div st yle=" clear:bot h; float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:t op;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div>
<div st yle=" float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:middle;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div> </ body> </ ht ml>

¿Y CÓM O ALINEAM OS ENTONCES VERTICALM ENTE?

Ya hemos vist o que vert ical-align no nos va a servir para realizar un cent rado vert ical de un element o
dent ro de un cont enedor, pero est o nos int eresará hacerlo con frecuencia. ¿Cómo hacerlo ent onces?

Est a es una cuest ión que suele generar problemas a los programadores y diseñadores w eb porque no
exist e un único mét odo, sino que hay varias maneras de hacerlo y cada una t iene sus vent ajas y sus
inconvenient es.

Exist en aproximadament e una docena de mét odos más o menos est ándar descrit os para cent rar
vert icalment e con CSS. Sin embargo, ninguno de ellos es la solución perfect a. Aquí vamos a poner un
ejemplo de un mét odo sin que est o signifique que sea el mejor ni que lo recomendemos. Simplement e
lo ponemos a modo de ejemplo.

En nuest ro caso vamos a t rat ar de cent rar vert icalment e un div int erior sit uado dent ro de un div
ext erior. A su vez el div int erior t iene un t ext o y vamos a t rat ar de cent rarlo vert icalment e.

La sit uación de part ida es est a:

© aprenderaprogramar.com, 2006-2029
vertical-alig
gn CSS. Alinear verticalmente elementos.

<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma


ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
img { marg
gin-left : 5px; m argin-right :5px; }
div { w idt h:
h 360px; heightt : 210px; margiin: 10px; paddin
ng:5px 20px; bo
order-st yle: sol id; border-colo
or: red;
border-w id
dt h: t hin; backg
ground-color: yellow
y ; t ext -alig
gn: cent er;}
</ st yle> </
< head>
<body>
<div st yle=
=" float :left ;" >Líínea de text o si n una imagen</ div>
<div st yle=
=" float :left ;" >
<p> Línea de t ext o<img st
s yle=" vert ical-a
align:baseline;" src=" ht t p:/ / i.im
mgur.com/ afC0
0L.jpg" >con una
a imagen</ p>
</ div>
<div st yle=
=" clear:bot h; flo
oat :left ;" >
<p> Línea de t ext o<img st
s yle=" vert ical-a
align:t op;" src=" ht t p:/ / i.imgur .com/ afC0L.jpg
g" >con una imagen</ p>
</ div>
<div st yle=
=" float :left ;" >
<p> Línea de t ext o<img st
s yle=" vert ical-a
align:middle;" src="
s ht t p:/ / i.im gur.com/ afC0L
L.jpg" >con una imagen</ p>
</ div> </ body>
b </ ht ml>

Y el códig
go que nos va a servir como soluciión, basado en posicion amient o abssolut o del div
d int erior
respect o al
a ext erior, es
e est e:

<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma


ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
div {w idt h : 300px; heightt : 300px; border-st yle:solid; ba
ackground-colo
or:#FED2FB; possit ion:relat ive;}
div div {w i dt h:100px; heig
ght : 100px; t exxt -align:cent er; background-color:yellow ; bo
order-st yle:dash
hed;
border-w id
dt h:2px; t op:50
0%; margin-t op :-52px; left : 50%
%; margin-left :-52px;
posit ion:absolut e; line-h eight :4em;}
div div p {ccolor:blue; }
</ st yle> </
< head>
<body>
<div> <divv ><p>Jump! </ p></
p div> </ div>
>
</ body> </
< ht ml>

© aprenderraprogramar.co
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.

Escribe ambos códigos, visualiza el result ado y compara una sit uación y ot ra. Trat a de comprender t odo
lo que hemos hecho (con los conocimient os adquiridos a lo largo del curso ya debemos ser capaces de
int erpret ar est e código). En un caso hemos posicionado el div int erior respect o al int erior y en el caso
del t ext o hemos aplicado line-height para forzar al t ext o a desplazarse vert icalment e. Si algo no t e
queda claro escribe una consult a en los foros (ht t p:/ / aprenderaprogramar.com/ foros).

A modo de resumen: no hay un mét odo universal para cent rar vert icalment e en CSS. Cada programador
o diseñador usa uno o varios mét odos y t rat a de buscar soluciones adapt adas a cada sit uación que se le
plant ea.

EJERCICIO

Analiza el siguient e código, visualiza su result ado y responde a las pregunt as:

<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<st yle t ype=" t ext / css" >
* {font -family: arial; }
div { w idt h: 360px; height : 210px; margin: 10px; padding:5px 20px;
border-st yle: solid; border-color: red; border-w idt h: t hin;
background-color: yellow ; t ext -align: cent er; float : left ;}
#vcent { display: t able; }
#vcent span { display: t able-cell; vert ical-align:middle;}
</ st yle>
</ head>
<body>
<div><span>Línea de t ext o cont enedor 1</ span></ div>
<div id=" vcent " ><span>Línea de t ext o cont enedor 2</ span></ div>
</ body>
</ ht ml>

a) ¿Cuánt as cajas cont enedoras hay? ¿Est án ident ificadas por id o por class o por ninguno de ellos?

b) Visualiza el result ado en al menos dos navegadores dist int os. ¿Quédiferencias observas ent re
ambos? ¿A qué crees que se deben?

c) ¿Por qué el t ext o <<Línea de t ext o cont enedor 2>> se muest ra cent rado vert icalment e?

e) M odifica el código para que el t ext o <<Línea de t ext o cont enedor 1>> se muest re cent rado
vert icalment e.

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01044D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Tipografía y fuentes CSS. Propiedades
P re
elacionadas.

TIPOGRAFÍA CSS

mos viendo posibilidades


Cont inuam p s que ofrece CSS en relac
ción a los t exxt os. Un aspe
ect o import ant
a e de los
t ext os es el t ipo de let ra que usan
u y cóm o se configura la let ra. Hay dist in t as propied ades para
configurar la t ipografíía, ent re ellas font -size, font
f -w eight y font -st yle.

PROPIEDA
AD FONT-SIZ
ZE

PROPI EDAD CSS fo


ont-size

Función de la propie
edad Per mit e est able
ecer el t amañ
ño de let ra.

Valor po
or defecto med
dium

Aplicable a Tod
dos los eleme
ent os

Una
a unidad de medida
m absolutt a o relat iva (iincluido %, en
n cuyo caso el cálculo se
hace
e respect o al t amaño de lett ra del element o padre) pe
ermit ida en CS
SS

Una
a palabra clavve: xx-small, x-small, sma
all, medium, large, x-large
e, xx-large
Valores posibles parra don de medium es el t amaño por
p defect o qu
ue aplica el na
avegador.
esta pro
opiedad
Una
a palabra clavve: larger ó sm
maller, que significa más g
grande o más
s pequeño
que el t amaño de
e let ra del elem
ment o padre.

erit (se hereda


inhe an las caract eríst
e icas del el ement o padre
e).

Ejemplos #co nt ent 1 {font -ssize: 20px;}


eraprograma
aprende ar.com .element oJukeBo
ox {font -size: small;}
s

Cuando se
e usan las un
nidades em y ex para fija
ar el t amaño de let ra, el cálculo
c de ésst e se hace respect
r o al
t amaño de
d let ra del element
e o pad
dre. En camb
bio cuando se
s usa em y ex en ot ro cont ext o, el t amaño de
let ra que se t oma com
mo referencia
a es el del prropio elemen
nt o.

Hay que t ener en cue


ent a que al aplicar fontt -size se pue
eden est ar modificando
m dimensiones de ot ros
o de la pági na w eb deb
element os bido a que hay
h unidades
s de medida
a como em y ex que t om
man como
referencia
a el t amaño de let ra.

Si est able
ecemos como
o t amaño de
e let ra en el element o body
b un valo r como 12 p
píxeles, ent o nces 1 em
serán 12 píxeles,
p m serán 24 p íxeles y así sucesivamen
2 em s t e. Si no se ha
h est ablecid
do un valor de
d t amaño
de let ra, ent onces 1 em correspo
onde al valo
or del t amañ
ño de let ra por
p defect o que use el navegador
n
malment e es de 16 píxele
(que norm es).

Usar t ama
años de let r a relat ivos basados
b en em
e ó en pala
abras clave puede
p ser in t eresant e, puest
p o que
nos perm it irán cambi ar la aparien e variando el t amaño d e fuent e de referencia
ncia de t oda la página w eb
a t ravés de
d su definici ón en el elem
ment o body.

© aprenderraprogramar.co
om, 2006-2029
Tipografía y fuentes CSS. Propiedades relacionadas.

Algunos programadores y diseñadores w eb usan una t écnica consist ent e en est ablecer el t amaño de
fuent e en body en el 62.5% (de 16 px) que son 10 px de modo que 1 em serán 10 px. En el rest o de
element os usan valores en em cuya correspondencia en píxeles es direct a, ya que 1 em serán 10px, 1.2
em serán 12px, 1.6em serán 16px y así sucesivament e.

Los t ít ulos suelen t ener una equivalencia similar a la que most ramos a cont inuación.

Tipo de título Palabra clave Píxeles em (* )

h1 xx-large 24 1.5

h2 x-large 22 1.375

h3 large 18 1.125

h4 medium 16 1

h5 small 12 0.75

h6 xx-small 10 0.625

(* ) Tener en cuent a que el valor de un em es cambiant e si se modifica el t amaño de fuent e de


referencia.

PROPIEDAD FONT-W EIGHT

PROPIEDAD CSS font-w eight

Función de la propiedad Permit e est ablecer el grosor de let ra.

Valor por defecto normal

Aplicable a Todos los element os

Un valor numérico múlt iplo de 100 comprendido ent re 100 y 900

Una palabra clave: normal (equivale a 400), bold (equivale a 700), bolder (indica
Valores posibles para
“ más grueso que el grosor de fuent e del element o padre” ), light er (indica
esta propiedad
“ menos grueso que el grosor de fuent e del element o padre” ).

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 {font -w eight : bold;}


aprenderaprogramar.com .element oJukeBox {font -w eight : 300;}

Algunas fuent es sólo permit en los valores normal y bold. En est e caso cualquier valor ent re 100 y 500 se
consideraría normal y cualquier valor ent re 600 y 900 se consideraría bold.

© aprenderaprogramar.com, 2006-2029
Tipografía y fuentes CSS. Propiedades relacionadas.

PROPIEDAD FONT-STYLE

Est a propiedad es una propiedad sencilla que permit e poner una fuent e en cursiva (it alic) o en oblícuo
(oblique), siempre que la fuent e que est é en uso lo permit a (no t odas las fuent es permit en la cursiva
por ejemplo).

La cursiva y la oblícua son muy similares, de hecho a veces ni se dist inguen. La diferencia ent re ambas
est á en que la cursiva usa caract eres parecidos a los de la fuent e original, pero dist int os, mient ras que
la oblícua ut iliza los mismos caract eres que la fuent e original pero ligerament e inclinados.

El valor por defect o para est a propiedad es ‘normal’ y sus valores posibles ‘normal’, ‘it alic’ y ‘oblique’.
Un ejemplo de aplicación sería est e: p.it alic { font -st yle:it alic }

EJERCICIO

Elige dos navegadores dist int os y rellena la siguient e t abla para cada uno de ellos.

Tipo de título Píxeles em

h1

h2

h3

h4

h5

h6

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01045D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
font-family,, font-variant, shortand
s font.

TIPOGRAFÍA CSS

mos viendo posibilidades


Cont inuam p s que ofrece CSS en relac
ción a los t exxt os. Un aspe
ect o import ant
a e de los
t ext os es el t ipo de let ra que usan
u y cóm o se configura la let ra. Hay dist in t as propied ades para
configurar la t ipografíía, ent re ellas font -familyy, font -varian
nt y la propie
edad short an
nd font .

PROPIEDA
AD FONT-FA
AM ILY

Fuent e (fo e let ra. Así, t amaño de fuent


ont ) suele u sarse como sinónimo de f e signiffica t amaño de let ra y
t ipo de f uent e signiffica t ipo de let ra. Hay t ipos de fue
ent es muy conocidos co
omo Arial, Times
T New
Roman, Calibri…
C pero la realidad es e cient os o miles de t ipo
e que exist en os de let ras.

Las fuentt es disponib


bles en un comput
c adorr se corresp
ponden con archivos do
onde se enc
cuent ra la
informaci ón de dicha fuent e. Porr ejemplo en
n Window s podemos
p usa
ar la fuent e arial porque
e exist e un
archivo d enominado arial.t t f en el
e sist ema. El
E t ipo (form
mat o o ext en
nsión) del ar chivo puede
e variar de
unos sist emas
e a ot ross: ext ensione
es habit ualess son t t f, w offf, svg, et c.

El t ipo de
e let ra que ussa una págin
na w eb ha si do hist óricament e un prroblema deb
bido a que lo
os int ent os
de usar det
d erminado s t ipos de fu
uent es choca ue los navegadores emp leaban fuen t es que el
aban con qu
usuario t uviera
u dispon
nible en su ordenador
o o disposit ivo de
d visualizaciión. Si el dise
eñador o pro
ogramador
creaba la página w eb pensando en
e un t ipo de
e fuent e “ X” y el usuario no disponía de dicha fue
ent e en su
ordenado
or, la página ualizaba t al y como se había prevvist o (y en m
a no se visu muchas ocasiones los
result ado s eran desasst rosos). La propiedad
p fo
ont -family t r at ó de defin ir una vía qu
ue evit ara es
st e t ipo de
problema
as y se ha usa
ado y sigue usando
u much
ho, aunque hoy
h día se co ot ras solucio nes (como
ombina con o
@font -facce, que vere e t rat an de ser la solucción definit ivva al problema de las
emos más adelant e) que
fuent es en los desarro
ollos w eb.

En desarr ollos w eb se
e usan los sig
guient es conccept os:

a) Liist a de prior idad: permitt e definir varrias posibilid


dades respecct o a las fuen
nt es a emple
ear en una
p ágina w eb, de
d modo que
e la fuent e que
q se usará
á es la primera en la list a de priorida
ad siempre
q ue est é disp onible. En ca
aso de no est ar disponib le la primera
a fuent e en l a list a de pr ioridad, se
p asaría a la se
egunda y así sucesivament e. Si no hu
ubiera dispon
nible ningun a fuent e den
nt ro de las
d efinidas en l a list a de pri oridad, se ussaría la fuentt e por defectt o.

b) Fa
amilia t ipográfica o fue
ent e concrett a: alude a una fuent e concret a y t odas sus variant es
(n
negrit a, cursiiva, et c.). Un
na familia t ip
pográfica es por ejemplo “ Times New
w Roman” , o t ra familia
t i pográfica ess “ Times” y ot
o ra familia t ipográfica es
e “ Arial” . Pa
ara escribir u
una familia t ipográfica
n CSS debem
en mos hacerlo
o ent re com illas simples
s o dobles siempre
s que
e el nombre cont enga
esspacios en b lanco.

© aprenderraprogramar.co
om, 2006-2029
font-family, font-variant, shortand font.

c) Familia genérica: alude a un grupo de fuent es de caract eríst icas similares y que se dist inguen
sólo por pequeñas variaciones ent re ellas. CSS permit e indicar familias genéricas como
mecanismo de seguridad para poder buscar alguna fuent e dent ro del sist ema del usuario que
t enga caract eríst icas parecidas a las que desea el diseñador o programador. Sirve por t ant o
como “ mecanismo de seguridad” para poder usar una fuent e lo más parecida posible a una
deseada. Hay 5 familias genéricas que se usan en CSS: serif (ejemplo: Times), sans-serif
(ejemplo: Arial), monospace (ejemplo: Courier) , cursive (ejemplo: Zapfino ) y fant asy (ejemplo:
Comic Sans M S).

Normalment e en una list a de prioridad se escriben primero las familias t ipográficas y en últ imo lugar las
familias genéricas. Ejemplo: Arial, Helvet ica, sans-serif; es una list a de prioridad donde los dos primeros
nombres aluden a t ipos de let ra concret os y el últ imo a una familia genérica a usar en caso de no est ar
disponible ninguna de los t ipos concret os indicados.

PROPIEDAD CSS font-family

Permit e indicar el t ipo de fuent e que se debe usar y est ablecer un orden
Función de la propiedad
de prioridad para el caso de no disponibilidad de algunas fuent es.

Valor por defecto No exist e un valor por defect o, depende del navegador

Aplicable a Todos los element os

Un t ipo de fuent e concret o

Una familia genérica de fuent es


Valores posibles para
Una list a de prioridad que puede incluir t ipos de fuent e concret as o familias
esta propiedad
genéricas, separadas por comas.

inherit (se heredan las caract eríst icas del element o padre).

Ejemplos #cont ent 1 { “ Trebuchet M S” , Helvet ica, sans-serif;}


aprenderaprogramar.com .element oJukeBox { font -family: 'Courier New ', Courier, monospace;}

Aunque se admit e especificar sólo un t ipo de fuent e específico, se recomienda indicar siempre un t ipo
de fuent e genérico para el caso de que no pueda cargarse la fuent e específica deseada.

Cuando se definen prioridades, el hecho de que sea posible aplicar el primer crit erio especificado no
significa que no se vaya a usar el segundo. Por ejemplo, podría exist ir un símbolo no disponible en la
fuent e deseada, y en ese caso se recurre a la segunda posibilidad en la list a de prioridades.

Para crear diseños con t ipos de let ra que no sean los más comunes habremos de recurrir a una regla
especial CSS, @font -face, que est udiaremos más adelant e.

© aprenderaprogramar.com, 2006-2029
font-family, font-variant, shortand font.

PROPIEDAD FONT-VARIANT

Est a propiedad es una propiedad sencilla que permit e poner una fuent e en un modo especial
denominado de “ pequeñas mayúsculas” , “ versales” o “ small-caps” . Si usamos t ext -t ransform:
uppercase; el t ext o se pondrá en mayúsculas normales. Si usamos font -variant : small-caps; el t ext o se
pondrá en una mayúscula condensada, de un t amaño inferior a la mayúscula normal correspondient e a
esa let ra.

El valor por defect o para est a propiedad es ‘normal’ y el único valor alt ernat ivo que admit e es ‘small-
caps’. Por ejemplo: p { font -variant :small-caps;}

PROPIEDAD SHORTAND FONT

Al igual que con ot ras propiedades, CSS permit e el uso de una propiedad short and denominada font
donde se pueden declarar abreviadament e dist int as propiedades relacionadas con las fuent es.

Recordar que hay que t ener una precaución con las propiedades short and: un valor no declarado en la
propiedad será sobreescrit o a su valor por defect o. Si no t enemos est o en cuent a, podemos est ar
sobreescribiendo una propiedad sin darnos cuent a.

La sint axis a emplear es la siguient e:

select orElement o {Valor-font -st yleOpcional Valor-font -variant Opcional Valor-font -w eight Opcional
ValorFont -sizeObligat orio/ ValorLine-height Opcional valoresList aPrioridad-font -family }

Ejemplo Significado

p { font: 12px/ 2em sans-serif } El t amaño de let ra se est ablece en 12 pixeles, el


int erlineado se est ablece en 2em y el t ipo de let ra
es la familia genérica sans-serif. El rest o de
propiedades implicadas quedan est ablecidas a sus
valores por defect o.

© aprenderaprogramar.com, 2006-2029
font-family, font-variant, shortand font.

Ejemplo Significado

#content1 { font: bold 1.3em "Trebuchet font -st yle será negrit a (bold), el t amaño de let ra
M S",Arial,Sans-Serif; } 1.3em y se usará priorit ariament e la fuent e
Trebuchet M S. Si no est uviera disponible se usaría
Arial. Si no est uviera disponible se usuaría
cualquier fuent e de t ipo Sans-Serif. El rest o de
propiedades implicadas quedan est ablecidas a sus
valores por defect o.

EJERCICIO

Crea un document o HTM L y un archivo con la hoja de est ilos CSS que cumpla con est os requisit os:

a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados uno debajo de ot ro, cada uno con margin
33px en t odas direcciones, con relleno 25 px en t odas direcciones, ancho 100% del disponible, y borde
sólido de 5 píxeles de anchura con color de borde rojo.

b) El div 1 debe cont ener un t ext o suficient ement e largo (varios párrafos), t ipo de fuent e genérica serif,
t amaño de fuent e 18 píxeles y al menos un párrafo de varias líneas con la fuent e est ablecida como
mayúscula condensada (small caps).

c) El div 2 debe cont ener un t ext o suficient ement e largo (varios párrafos), t ipo de fuent e genérica sans
serif, t amaño de fuent e 14 píxeles y color del t ext o #B22222.

d) El div 3 debe cont ener un t ext o suficient ement e largo (varios párrafos), y las propiedades de t ext o
est ablecidas con la propiedad CSS font (short and). El t ipo de fuent e será genérica fant asy y el t amaño
del t ext o 2 veces lo normal .

Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros
aprenderaprogramar.com.

Próxima entrega: CU01046D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
@font-face CSS. Especifica
ar nombre y rutta de fuente.

@FONT-F
FACE CSS

Hemos co
oment ado las dificult ade
es que hist órricament e ha
an exist ido en
e relación a
al uso de t ipo
os de let ra
en página
as w eb. Est o se debía pr incipalment e a que los navegadores
n s se venían b
basando en un
u archivo
de fuent e inst alada en el propio ordenador
o d usuario y no se podía
del a garant izar que el usuario t uviera
disponible
e la fuent e q ue especificaba el progr amador o dis
señador.

REGLA @ FONT-FACE

erar la limit ación de t ene


Para supe er que depender de las fuent
f ponibles por part e de cad
es disp da usuario
se creó la
a regla @fon t -face que permit
p e espe
ecificar un no ocalización (url) de un archivo con
ombre y la lo
la fuent e que se desea usar en un
na página w eb.
e De est a manera,
m cam bia el concep
pt o t radicion
nal, ya que
nt -face podre
con @fon emos usar fu
uent es que h emos definid
do y localizad
do nosot ros mismos, sin depender
de las fue
ent es de que
e disponga el
e usuario. Te
en en cuent a que @fontt -face est á d
disponible en
n t odos los
navegado
ores modern os, pero que
e versiones ant
a iguas de navegadoress no admit en el uso de est
e a regla,
de ahí qu e siempre de ecificar una familia t ipog
ebamos espe gráfica genérrica como altt ernat iva de seguridad
para el caso de que un
na fuent e especificada n o pueda carg
garse.

Una fuen t e es un arcchivo inform a informació n necesaria para que u n sist ema o perat ivo o
mát ico con la
programa o de let ra d et erminado . Por ejemp lo, en Wind
a puede mosst rar un t ipo dow s se disp
pone de la
fuent e “ Arial”
A ma de archi vos exist e u n archivo de
graciass a que dentt ro del sist em enominado arial.t
a t f. Si
borramoss ese archivo
o, la fuent e deja de estt ar disponib
ble. El t ipo (format o o e
ext ensión) del
d archivo
puede varriar de unos sist emas a ot
o ros: ext enssiones habit uales
u son t t f, ot f, w off, svvg, et c.

La ext ensión w off (W


Web Open Fo nt Format ) ha
h sido creada específica
ament e com
mo t ipo de fu
uent e para
os web y asp
desarrollo pira a conver t irse en un est
e ándar. Sin
n embargo, la
a realidad ess que no exis
st e t odavía
un formatt o de archivo
o est ándar q ue se haya im
mpuest o parra t odos los navegadores
n s.

El uso bássico de la re ace conlleva definir dos parámet ros: por un lad o, el “ alias” o nombre
egla @font -fa
e vamos a d esignar a la fuent e cuan do la empleemos en nu est ras reglass CSS. Por ott ro lado, la
con el que
rut a dond
de se localiza
a el archivo que
q cont iene
e la fuent e.

La sint axiss básica a em


mplear es de est e t ipo:

@
@font -face { font -family: " nombreDeFuent e" ; srrc: url(nomb reDeArchivo
o.ext ension); }

Con est a regla definiimos un nom


mbre de fue
ent e p.ej. “ burlesque”
b e indicamos una rut a del
d archivo
donde est á disponibl e esa fuent e p.ej. burle
esque.w off. En
E est e caso
o hemos ind
dicado simpl ement e el

© aprenderraprogramar.co
om, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.

nombre del archivo, por lo que la rut a debe ser la misma donde se ubique el archivo css de est ilos.
Ahora est e nombre de fuent e puede ut ilizarse como se haría normalment e con los nombres de fuent e
en la propiedad font -family, por ejemplo h1 {font -family: burlesque, sans-serif; }

También es posible definir rut as de archivos alojados ext ernament e indicando su url. Por ejemplo:

@font -face { font -family: " Bit st ream Vera Serif Bold" ;

src: url(ht t ps:/ / mdn.mozillademos.org/ files/ 2468/ VeraSeBd.t t f); }

Y est e nombre de fuent e se podría aplicar por ejemplo en body { font -family: " Bit st ream Vera Serif
Bold" , serif }

Tener en cuent a que siempre es recomendable dar al menos una familia genérica para indicar el t ipo de
fuent e que se debería usar en el caso de que no se pueda cargar la fuent e deseada.

Debido a que la regla @font -face se ha ido int roduciendo en los últ imos años y los diferent es
navegadores han ido admit iendo format os de fuent es dist int os poco a poco, un “ t ruco” al que recurren
muchos diseñadores y programadores para garant izar que la mayor part e de navegadores usen la
fuent e deseada es especificar las rut as de los archivos fuent e en dist int os format os, de modo que se
usará el primero en ser reconocido por el navegador. Por ejemplo:

@font -face { font -family: Sansat ;

src: url('Sansat ion_Light .w off'), url('Sansat ion_Light .t t f'), url('Sansat ion_Light .eot ') ; }

La regla @font -face permit e que se especifique si se debe buscar la fuent e primero en el ordenador del
usuario y usarla en caso de est ar disponible, ant es que usar una fuent e especificada mediant e un
archivo. Para ello se especifica el origen como local(“ nombreDeFuent eEnSist emaUsuario” ). Est o es lo
que se hace en est e ejemplo:

@font -face { font -family: Sansat ; src: local(“ Sansat ion Light ” ),
url('Sansat ion_Light .w off'), url('Sansat ion_Light .t t f'), url('Sansat ion_Light .eot ') ; }

Se podrían especificar varios nombres de fuent es locales separados por comas si se desea.

LAS M EJORES FUENTES W EB GRATUITAS

Exist en diferent es páginas w eb donde se ofrecen archivos de fuent es grat uit os. Es difícil decir cuál es la
página que ofrece las mejores fuent es, ent re ot ras cosas porque en est as páginas hay cambios
cont ínuos y se van incorporando nuevas fuent es y nuevos format os cont inuament e. A cont inuación

© aprenderaprogramar.com, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.

damos una relación de sit ios que permit en el uso de fuent es grat uit as, sin recomendar ninguno en
concret o. Pruébalos y usa el que más t e gust e.

Nombre URL Comentarios

Colección de fuent es no sólo para desarrollos


Font Squirrel ht t p:/ / w w w .font squirrel.com/
web. Archivos de descarga disponibles en
det erminados format os.

Da Font ht t p:/ / w w w .dafont .com/ Colección de fuent es con clasificación por


t emát icas.

Servicio de google que ofrece fuent es grat uit as.


Google fonts ht t p:/ / w w w .google.com/ font s Google ofrece una url que permit e enlazar al
archivo de fuent e alojado en sus servidores, o
t ambién la descarga de la fuent e.

CONVERTIDORES DE FUENTES ONLINE

M uchas veces las fuent es que t enemos disponibles para descarga est án en un solo format o como t t f y
para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios format os. Los
format os más usados son: WOFF, EOT, TTF, OTF y SVG.

En principio usando TTF y EOT nos garant izamos que nuest ra fuent e sea reconocida por la mayoría de
los navegadores, aunque si buscamos el máximo de seguridad convendría incluir los cinco format os.

Exist en dist int os convert idores on-line, ent re los cuales el de Font Squirrel es quizás el más usado y el
que mejores crít icas recibe.

Nombre URL Comentarios

Permit e subir un archivo en un format o


Font Squirrel ht t p:/ / w w w .font squirrel.com/ t ools/ w ebfont -
y descargar un archivo zip con la fuent e
converter generat or
en diferent es format os incluyendo w off,
eot , t t f y svg.

Online Font
ht t p:/ / onlinefont convert er.com/ Admit e la conversión ent re dist int os
Converter
format os.

ht t p:/ / w w w .files-conversion.com/ font -


Files conversion Admit e la conversión ent re dist int os
convert er.php
format os.

Font converter ht t p:/ / w w w .font convert er.org/ Admit e la conversión ent re dist int os
format os.

© aprenderaprogramar.com, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.

Ten en cuent a que al realizar la conversión la fuent e convert ida será muy similar a la original, pero
quizás no exact ament e igual (pueden aparecer pequeñas diferencias en el espacio ent re let ras por
ejemplo). Recomendación: no t rat es de cuadrar una página w eb “ al milímet ro” . Considera siempre que
puede ocurrir que la fuent e que se cargue no sea exact ament e la que t ú habías previst o.

PROBLEM AS CON @FONT-FACE

La regla @font -face se ha int roducido en los últ imos años y su est andarización t odavía no es suficient e,
aunque su uso es cada vez más amplio. Te podrás encont rar con sit uaciones como que:

a) Un det erminado navegador no reconozca la regla @font -face, con lo cual recurrirá a la fuent e
est ándar que hayas definido, o si no la has definido, a la fuent e por defect o.
b) Un det erminado navegador no reconozca el format o de la fuent e que hayas indicado.

c) Un det erminado navegador no responda bien a la sint axis que hemos descrit o y sea necesario
aplicar “ un parche” o código específico para ese navegador.

d) Algunas reglas CSS no se aplican bien con un det erminado format o de fuent e. Por ejemplo,
quizás t e encuent res que al aplicar t ext -t ransform: uppercase; con algunas fuent es no t e
funcione.

Para muchos de los problemas que genera font -face exist en soluciones específicas o parches de los que
no vamos a hablar porque supondría ent rar en det alles muy concret os y no es ese nuest ro objet ivo.
Recuerda que el objet ivo de est e curso es conocer la lógica de CSS y sus aspect os más import ant es, sin
ent rar en det alles relat ivos a navegadores concret os.

Algunos programadores o diseñadores t rabajan con fórmulas alt ernat ivas a font -face (normalment e
script s escrit os en algún lenguaje de programación) buscando evit ar los problemas que les surgen.

EJERCICIO EJEM PLO RESUELTO DE USO DE @FONT-FACE

Usando el código HTM L de base que venimos empleando a lo largo del curso, y usando la regla @font -
face, definir t res t ipos de let ra dist int os (obt enidos desde alguna de las fuent es w eb grat uit as que
hemos indicado) para las et iquet as h1, h2 y p. Para comprobar si t u código y respuest as son correct as
puedes consult ar en los foros aprenderaprogramar.com.

SOLUCIÓN

Nosot ros vamos a usar las siguient es fuent es:

Tít ulos h1: fuent e “ Bubblegum Sans” . Nos hemos descargado la fuent e en format o ot f (BubblegumSans-
Regular.ot f) desde font squirrel.com

© aprenderaprogramar.com, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.

Tít ulos h2: fuent e “ Just Got t a Smile” . Nos hemos descargado la fuent e en format o t t f (Just Got t a
Smile.t t f) desde dafont .com.

Párrafos p: fuent e “ Alef” . Nos hemos descargado la fuent e en format o t t f (Alef-Regular.t t f) desde
google.com/ font s

Si quieres usar ot ras fuent es no hay problema.

Junt o al archivo css de definición de est ilos debemos colocar los archivos de las fuent es (los t res
archivos que hemos cit ado, en nuest ro caso de ext ensión ot f, t t f y t t f). El código básico que resuelve el
ejercicio y el result ado a obt ener sería el siguient e (escribe el código y visualiza el result ado; si no
obt ienes el result ado previst o sigue leyendo):

/ * Curso CSS est ilos aprenderaprogramar.com* /


* {font -family: arial; background-color:yellow ;}
@font -face { font -family: " bubblegum" ; src: url('BubblegumSans-Regular.ot f'); }
@font -face { font -family: " Just Got t a Smile" ; src: url('Just Got t a Smile.t t f'); }
@font -face { font -family: " Alef-Regular" ; src: url('Alef-Regular.t t f'); }
h1 {font -family: " bubblegum" , arial; font -size: 42px; }
h2 {font -family: " Just Got t a Smile" , arial; font -size: 30px; }
p {font -family: " Alef-Regular" , arial; }
p a {font -family: " Alef-Regular" , arial;}

Not a: hemos puest o un fondo amarillo y let ra arial para los element os sin let ra definida; además hemos
dot ado de un t amaño de let ra adecuado a los element os h1 y h2. También hemos definido el t ipo de
let ra específicament e para los element os a (links) dent ro de párrafos porque ést os no heredan el t ipo
de let ra definido.

¿Qué problema más común nos podemos encont rar con est e código? Que algunos navegadores no
reconozcan el format o de la fuent e. Para t ener mayor seguridad en cuant o a que los navegadores
apliquen la fuent e deseada vamos a generar las fuent es en los format os más comunes.

© aprenderaprogramar.com, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.

En nuest ro caso accederemos a un servicio w eb grat uit o para convert ir fuent es, en concret o vamos a
usar ht t p:/ / w w w .font squirrel.com/ t ools/ w ebfont -generat or y subimos los ficheros fuent e que t enemos
(BubblegumSans-Regular.ot f, Just Got t a Smile.t t f y Alef-Regular.t t f) y nos descargamos el archivo zip
con las fuent es convert idas a dist int os format os.

Ahora para cada fuent e t endremos cuat ro archivos, cada uno de los cuales corresponde a una
ext ensión. Por ejemplo para BubblegumSans-Regular ahora t endremos cuat ro archivos como
bubblegumsans-regular-w ebfont .w off, bubblegumsans-regular-w ebfont .t t f, bubblegumsans-regular-
w ebfont .eot , bubblegumsans-regular-w ebfont .svg. Para las ot ras fuent es lo mismo, con lo cual en t ot al
t endremos 12 archivos.

Ahora escribimos el código indicando que en caso de no reconocerse un format o, se ut ilice el siguient e
disponible. Ten en cuent a que debes colocar los 12 archivos con las fuent es en la misma ubicación en la
que t engas el archivo css de est ilos. El código quedaría así:

/ * Curso CSS est ilos aprenderaprogramar.com* /

* {font -family: arial; background-color:yellow ;}

@font -face { font -family: " bubblegum" ; src: url('bubblegumsans-regular-w ebfont.w off'),
url('bubblegumsans-regular-w ebfont .t t f'), url('bubblegumsans-regular-w ebfont .eot '), url('bubblegumsans-regular-
w ebfont .svg'); }

@font -face { font -family: " Just Got t a Smile" ; src: url('just _got t a_smile-w ebfont .w off'),
url('just _got t a_smile-w ebfont .t t f'), url('just _got t a_smile-w ebfont .eot '), url('just _got t a_smile-w ebfont .svg'); }

@font -face { font -family: " Alef-Regular" ; src: url('alef-regular-webfont .woff'),


url('alef-regular-webfont .t t f'), url('alef-regular-webfont .eot '), url('alef-regular-webfont .svg'); }

h1 {font -family: " bubblegum" , arial; font -size: 42px; }

h2 {font -family: " Just Got t a Smile" , arial; font -size: 30px; }

p {font -family: " Alef-Regular" , arial; }

p a {font -family: " Alef-Regular" , arial;}

Con est e código t enemos mayores garant ías de que la visualización será correct a en la mayor part e de
los navegadores. Pero la garant ía no es del 100%, de ahí que siempre sea convenient e especificar qué
fuent e debe most rarse en caso de no poder cargar la deseada. En nuest ro caso hemos indicado “ arial” .

Próxima entrega: CU01047D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:


ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203

© aprenderaprogramar.com, 2006-2029
Pseudoclase
es CSS. Links. liink, visited, hov
ver, active.

PSEUDOC
CLASES PARA
A LINKS

Cuando hablamos
h de
e select oress nombramo
os las pseud
doclases CSS
S y dijimos que las pse
eudoclases
permit en ident ificar ciert
c os elem ent os o sit uaciones
u nt ro de una página w eb para aplicar un est ilo
den
o a dichos ellement os o sit
específico s uaciones. Por ejemplo
o, la pseudo clase :first -child permit e definir el
est ilo a ap
plicar al prim
mer element o de una seriie.

CSS defin e ot ra serie nados pseud oelement os que van prrecedidos de


e de select orres denomin e :: y cuya
función es
e análoga a la de las pseudoclases
p s. También hemos
h habla
ado de elloss ant eriorme
ent e en el
or ejemplo ::first -let t er nos permit e definir un est ilo para la primera let ra del t ext o de un
curso, po
element o.
o

Vamos a hablar ahora


a de cómo dot
d ar de est ilos a los lin
nks en CSS. Para
P ello es necesario re
eferirnos a
algunas p seudoclases que son las que permit en
e hacer est o.
o

Pseudocla
ase Aplic
cable a Signifficado

:link
k Los l inks Se usa para defin
nir est ilos pa
ara links qu e no han
sido pinchados
p po
or el usuario,, aunque si no
n est á en
el orrden adecua
ado puede sobreescrib
bir ot ros
est ilos
s de links

:visite
ed Sólo links que ya han sido
s Se usa
a para defin
nir est ilos para links que han sido
pinch
hados por el usuario ados por el usuario y assí dist inguirl os de los
pincha
no pin
nchados

:focus Cual quier element o que t ien


ne el sa para defiinir est ilos para element os que
Se us
foco por est ar se
eleccionado con n el foco. Un link puede t ener el foco
t ienen o.
el ratt ón o por uso del t abulad
dor

:hove
er Cual quier element o que t ien
ne el Se u sa para definir
d est ilo
os específic
cos para
puntt ero del rat ó n encima de
e él eleme
ent os por loss que el usua
ario pasa el rat ón por
ma, aún sin piinchar en ell os
encim

:active Cual quier elem


ment o en el Se usar para defiinir est ilos e
específicos para
p links
ment o de serr act ivado
mom <a> o bot ones <b
but t on> en e
el just o mom
ment o en
que so
on pulsados..

La sint axiss a emplear es


e la que ya conocemos: t ipoElemen t o:nombrePseudoclase { … }

© aprenderraprogramar.co
om, 2006-2029
Pseudoclases CSS. Links. link, visited, hover, active.

A la hora de aplicar est as pseudoclases es import ant e el orden en que se aplican, ya que si no se hace
correct ament e se pueden anular est ilos definidos. Por ejemplo:

a:hover {color: orange;}

a:link {t ext -decorat ion:none; font -weight : bold; color:blue;}

Podríamos pensar que los links sobre los que se sit uara el rat ón se most rarían naranjas, pero no va a ser
así. Se most rarán azules porque a:link sobreescribe lo definido en a:hover porque :link afect a a t odos
los links (incluso los que t ienen el rat ón encima de ellos) mient ras que :hover sólo afect a a
det erminados links. Por ello si sit uamos :link después de :hover est aremos anulando lo definido en
:hover.

Para evit ar est o se usa una regla mnemot écnica: LVHA (link-visit ed, hover, act ive; es convenient e
recordar y aplicar est e orden para evit ar sobreescribir indebidament e. Podemos usar una frase como
“ Llegamos vivos hast a amanecer” o “ Luego vuelvo hast a allí para acordarnos de est e orden.

La pseudoclase :focus se suele colocar just o ant es de :hover.

Veremos ejemplos de uso de est as propiedades a cont inuación.

PROPIEDAD OUTLINE CSS

La propiedad out line CSS es una propiedad short and análoga a la propiedad border. De hecho, lo que
hace es crear un cont orno similar a un borde, con la diferencia de que no ocupa espacio. Su uso suele
ser para marcar los cont ornos de un element o (muchas veces lo usan los diseñadores y programadores
para ver las cajas del modelo de cajas mient ras est án realizando el diseño).

Al igual que con los bordes exist en propiedades individuales que son: out line-st yle, out line-widht y
out line-color, pero en general será preferible usar la propiedad short and.

Dado que est a propiedad es complet ament e análoga a la propiedad border, t e remit imos a leer el
apart ado de bordes si quieres profundizar en su manejo. En el código del ejemplo que vemos a
cont inuación puedes ver un ejemplo de aplicación de est a propiedad.

EJEM PLO DE APLICACIÓN

Usando el código HTM L de base que venimos empleando a lo largo del curso, e