3(7*

Sobre este libro...

*.
*)/ )$*.

./
'$-*
./6)
%*
0)
'$ )$
- /$1
*((*).
 *)*$($ )/*
A
*
*( -$'
A
$)
-
 -$1
V@S
K#//+?II- /$1 *((*).@*-"I'$ ). .I4A)A)I
V@SI @ .L

Esta versi—n impresa se cre— el 2 de enero de 2009 y todav’a est‡ incompleta@


1 -.$:)
(6.
/0'$5

'*.
*)/ )$*.

./
'$-*
.
+0 
)*)/--
)
#//+?II222@'$-*.2 @ .I..O1)5*

$
,0$ - .
+*-/-
.0" - )$.=
*( )/-$*.=
-8/$.
*
$)!*-(-
.*-
--*- .=
+0  .

)1$-)*.
0)
( ).%
 contacto@librosweb.es

444;&".*/4;/ 2

3(7* 
3(7*

Cap’tulo 1. TŽcnicas imprescindibles .......................................................................................................... 5 Cap’tulo 6. TŽcnicas avanzadas................................................................................................................130

C;C;
.*,"/
/!*.0!( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; G H;C;

' (/
'"/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CEB
C;D;

,.*,"
!/6*10


(0.(0
5,&*.. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; I H;D;
,/

"' ( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CED
C;E;
"',".
&*0/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; K H;E;
."&/
(
&/
!*$/

/0"&*/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CEI
C;F;
&'(0*/

&
'"/'
&01. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CE H;F;
/0"&*/
&0.(0"3*/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CFD
C;G;
*'./ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CG H;G;
*'(0."*/
*(""*(&/8
"&0.*/
6
!%/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CFG
C;H;
.(/,.("/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CK H;H;
&0*.

(3 *.;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CFK
C;I;
1/0"01"+(

050*
,*.
"' (/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; DC
C;J;
1/0"01"+(

050*
,*.
&/! ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; DF
C;K;
/-1"(/
.*(/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; DI
C;CB;
*&&*3./
6
/,."0/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; EC
C;CC;
50*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; EJ
Cap’tulo 2. Buenas pr‡cticas......................................................................................................................42
D;C;

(""&"7.
&*/
/0"&*/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; FD
D;D;
*',.*.
&
"/)*
(
3."*/
(3 *./ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; FG
D;E;
$*.
,.* ./"3 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; FI
D;F;
,1."+( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; GC
D;G;
*$/

/0"&*/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; GI
D;H;
("'"(0* ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HD
D;I;
1./*/
"',./"("&/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HE
Cap’tulo 3. Selectores................................................................................................................................65
E;C;
&0*.

!"$*/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HG
E;D;
&0*.
6(0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HH
E;E;
&0*.

0."10*/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HI
E;F;
/1*=&// ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; HJ
E;G;
/1*=&'(0*/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; IC
E;H;
&0*./


E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; IE
Cap’tulo 4. Propiedades avanzadas ...........................................................................................................76
F;C;
.*,"
4!"0=/, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; IH
F;D;
.*,"
"/,&6 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; JB
F;E;
.*,"
*10&"( ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; JJ
F;F;
.*,"
-1*0/ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; KC
F;G;
.*,"
*1(0.=./0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; KG
F;H;
.*,"
*1(0.="(.'(0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CBB
F;I;
.*,"
*(0(0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CBF
Cap’tulo 5. Frameworks...........................................................................................................................111
G;C;
&
.'4*.%

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CCC
G;D;
."'.*/
,/*/
*(
&
.'4*.%

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CCD
G;E;

(""&"7(*
/0"&*/
*(
&
.'4*.%

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CCG
G;F;
50*
*(
&
.'4*.%

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CCI
G;G;
6*10/
*(
&
.'4*.%

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CCK
G;H;
0.*/
.'4*.%/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; CDK

444;&".*/4;/ 3 444;&".*/4;/ 4

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

margin . (

Cap’tulo 1. TŽcnicas imprescindibles Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit

**/
&*/
&'(0*/
/&3*
& 1(*/
/*/
/,"&/

&'(0*/
'*/0.*/
*'*
' ./6)-  U@T $)'04 (6.  TSS +-*+$  .  /** /$+* +- $. 9- ' .+ /*  '. Se aplica a
0&/
+6"$).  @ * *./)/ = '*. $. 9*. 2  (6. /0' . (0 ./-) - 0-.*. "-6!$*. ,0 )* .
Valor inicial =
+0  ) - '$5- *) = *(* .*(-.= /-).+- )$.= .,0$). - *) . 4 /$+*"-!8
1)5@ *- . (*/$1*= . +- $.* ,0 '*. $. 9*- . 2  +-*! .$*)' . *)*5) '. Descripci—n /0&

*.'
".0
0**/
&*/
'. (/

1(
&'(0*
/7)$.
$(+- .$)$' .
+-
- -
$. 9*.
2 
1)5*.@
padding &&(*
)
'.
+-:3$(.
. $*) .
.
(0 ./-)
'.
.$"0$ )/ .
/7)$.
$(+- .$)$' .?

-*+$  . shorthand +-
- -
#*%.

./$'*.
*)$..@ Valores ( <medida> | <porcentaje> ){1, 4} | inherit
**/
&*/
&'(0*/
5,0*
& 1(*/
&'(0*/

0&/
*'*
.1,*/

./
6


+-*+$  hasLayout 

)/ -) /
3+'*- -=
$(+- .$)$'
+-
.*'0$*)-
(0#*. Se aplica a
.1,*/

,"/

0&
--*- .

.
)1 "*-@
Valor inicial =

Limpiar floats=
+-
/-%-
*-- /( )/
*)
'*.
' ( )/*.
+*.$$*)*.

!*-(
Descripci—n /0&

*.'
".0
0**/
&*/
.&&(*/

&*/
&'(0*/
!'*/)/ @

:(*
- -
' ( )/*.

'
($.(
'/0-=
$(+- .$)$'
+-
' layout *
./-0/0-

'.
border /0"&*
*',&0*

0**/
&*/
*./
+6"$).@
Valores ( <border-width> || <border-color> || <border-style> ) | inherit

*(-.=
/-).+- )$.
4
.,0$).
- *) .=
,0
)*
.
+0  )
- -
*)  U@T@
Se aplica a **/
&*/
&'(0*/

0./$/0$:)

/ 3/*
+*-
$(6" ) .
4
+*-
'.#=
+-
0/$'$5-
0',0$ -
/$+*"-!8
)
'
$. 9*

'.
+6"$).@ Valor inicial =
Descripci—n /0&
&
/0"&*
*',&0*

0**/
&*/
*./

&*/
&'(0*/

*''*1 -.
4 sprites CSS +-
( %*--
'
/$ (+*

- .+0 ./

'.
+6"$).@

7)$.
+-
/-%-
*)
'
/ 3/*
4
'
/$+*"-!8@
background *(*

1(
&'(0*

1.1. Propiedades shorthand ( <background-color> || <background-image> ||

Valores <background-repeat> || <background-attachment> ||
'"0). +-*+$  .  ' ./6)-  U@T .*) .+ $' .= 4 ,0 + -($/ ) ./'  - <background-position> ) | inherit
.$(0'/6) ( )/ ' 1'*-  1-$. +-*+$  . $! - )/ .@ ./ /$+*  +-*+$  . . Se aplica a **/
&*/
&'(0*/
 )*($)) "propiedades shorthand" 4
/**.
'*.
$. 9*- .
2 
+-*! .$*)' .
'.
0/$'$5)@
Valor inicial =
 "-) 1 )/%  '. propiedades shorthand . ,0 + -($/ ) - - #*%.  ./$'*. (0#* (6. Descripci—n /0&
0*/
&/
,.*,"/
&
*(*

1(
&'(0*
*)$.. 4 +*- /)/*= (0#* (6. !6$' .  ' -@  *)/$)0$:) . $)'04  (**  - ! - )$
'
 !$)$$:)
!*-('

'.
. $. propiedades shorthand $.+*)$' .
)
'
./6)-  U@T@
list-style /0"&*

1(
&"/0

font ",* .# ( <list-style-type> || <list-style-position> ||

Valores
<list-style-image> ) | inherit
( ( <font-style> || <font-variant> || <font-weight> )?
Valores <font-size> ( / <line-height> )? <font-family> ) | caption | Se aplica a &'(0*/

1(
&"/0
icon | menu | message-box | small-caption | status-bar | inherit Valor inicial =
Se aplica a **/
&*/
&'(0*/ Descripci—n .*,"
-1
,.'"0
/0&.

*.'
/"'1&0(
0*/
&/
*,"*(/

1(
&"/0
Valor inicial =
$
.
*).$ -
'
.$"0$ )/
#*%

./$'*.?
Descripci—n .'"0
"(".

*.'
".0
0*/
&/
,.*,"/

&
0",* .#

1(
050*

444;&".*/4;/ 5 444;&".*/4;/ 6

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

p {  (4*-8  ' ( )/*.  0) +6"$) .*)  ' +-$( - /$+*= 4 ,0 .0. ' ( )/*. *)/ ) *- .
font-style: normal;
K)*-('( )/ ' ' ( )/* <body>L  / -($)) .0 /(9* 4 +*.$$:)@ *. ' ( )/*.  '
font-variant: small-caps;
font-weight: bold; . "0)*
/$+*
.*)
'*.
,0

)/ -) /
3+'*- -
*).$ -
,0
/$ ) )
0) layout@
font-size: 1.5em;
line-height: 1.5;
*.
' ( )/*.  ,0
+*-
 ! /*
/$ ) )
0) layout )

)/ -) /
3+'*- -
.*)?
font-family: Arial, sans-serif;

<html>= <body>
}
div {
<table>= <tr>= <th>= <td>
margin-top: 5px;
margin-right: 10px;
<img>
margin-bottom: 5px;
margin-left: 10px;
<hr>
padding-top: 3px;

<input>= <button>= <select>= <textarea>= <fieldset>= <legend>
padding-right: 5px;
padding-bottom: 10px;
<iframe>= <embed>= <object>= <applet>
padding-left: 7px;
}
<marquee>
h1 {
background-color: #FFFFFF; * *./)/ = '"0). +-*+$  .  +-*1*) ,0 ' ' ( )/* / )" 0) layout 4 +*- /)/*=
background-image: url("imagenes/icono.png"); /$1) ' +-*+$  hasLayout@  .$"0$ )/ /' (0 ./- /*. '. +-*+$  .  4 1'*- .
background-repeat: no-repeat;
,0
# )
,0
0)
' ( )/*
/ )"
0) layout?
background-position: 10px 5px;
}
Propiedad Valores que activan la propiedad hasLayout Comentarios
/$'$5)* '. propiedades shorthand . +*.$' *)1 -/$- '. UW '8) . ,0 *0+ ' #*%  position absolute8 fixed fixed /+&*
(

(0.(0
5,&*..
I
./$'*.
)/ -$*-
)
.:'*
TS
'8) .=
()/ )$ )*
'*.
($.(*.
./$'*.?
float left8 right
p {
font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
display inline-block
} width 1&-1".
3&*.
-1
(*
/ auto
div {
margin: 5px 10px; min-width 1&-1".
3&*. +&*
(

(0.(0
5,&*..
I
padding: 3px 5px 10px 7px; max-width 1&-1".
3&*. +&*
(

(0.(0
5,&*..
I
}
h1 { height 1&-1".
3&*.
-1
(*
/ auto
background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
min-height 1&-1".
3&*. +&*
(

(0.(0
5,&*..
I
}
max-height 1&-1".
3&*. +&*
(

(0.(0
5,&*..
I
1.2. La propiedad hasLayout de Internet Explorer zoom 1&-1".
3&*.
-1
(*
/ normal
writing-mode tb-rl
' )1 "*-
)/ -) / 3+'*- - Z 4 .0. 1 -.$*) . )/ -$*- . $)'04 )   ).  --*- .
- '$*)*. *) @  (4*-8  .*. --*- . . +0  ) .*'0$*)- *) /-0*. 4 /7)$. ,0 overflow hidden8 scroll8 auto +&*
(

(0.(0
5,&*..
I
+-*1 #) */-*. --*- . * -/ -8./$.  ' )1 "*-@  (6.= (0#*. --*- . .
.*'0$*))
"-$.

'
+-*+$  hasLayout 

)/ -) /
3+'*- -@ . +-*+$  . zoom 4 writing-mode )* .  !$) ) ) )$)";) ./6)-   +*-,0 .*)
+-*+$ /-$.  ' )1 "*-
)/ -) / 3+'*- -@ $ . 0/$'$5) ./. *. +-*+$  .= ' #*% 
) ! /*= (0#. .*'0$*) .  '*. --*- . 
)/ -) / 3+'*- - *).$./ ) ) "forzar a un ./$'*.
)*
+.
./$.!/*-$( )/
'
+-* .*

1'$$:)@
elemento a que tenga un layout"@ ' (*/$1* . ,0 +- (*./-- '*. ' ( )/*.  0) +6"$)= '
)1 "*-

)/ -) /
3+'*- -
$1$

/**.
'*.
' ( )/*.
)
*.
"-0+*.? - ,0$/- ' layout  0) ' ( )/*= . )  .-$* ./'  - ' 1'*- +*-  ! /*  /*. '.
+-*+$  .

'
/'
)/ -$*-
,0
#4)
.$*
(*$!$.?

*.
' ( )/*.
04*
/(9*
4
+*.$$:)
 + ) )

.0
' ( )/*
*)/ ) *-@

width: auto= height: auto

*.
' ( )/*.
,0
./'  )
.0
+-*+$*
/(9*
4
+*.$$:)@

max-width: auto= min-width: auto

444;&".*/4;/ 7 444;&".*/4;/ 8

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

position: static  .$"0$ )/ $(" ) (0 ./- 0) ' ( )/* *)/ ) *- ,0 )$ --  *. ' ( )/*.  / 3/*@
*(* '*. ' ( )/*. $)/ -$*- . ./6) +*.$$*)*.  !*-( !'*/)/ 4 ' ' ( )/* *)/ ) *-

float: none
)*
$.+*)

(6.
*)/ )$*.=
'
- .0'/*
.
'
.$"0$ )/ ?

overflow: visible

zoom: normal

writing-mode: lr-tb

/$'$5)* '"0)  '. +-*+$  .  )/ -$*- . . #) $ * )0( -*.. .*'0$*) . +-
forzar a que un elemento tenga un layout@ )*  '*. /-0*. (6. *)*$*.  . # (0#*.
9*. . ' !(*.* Holly hack K#//+?II222@*((0)$/4(3@*(I*)/ )/I
-/$' @!(C+" ^U<$^VZSL ,0 .*'0$*) 0) +-*' ( *) 0) ' ( )/* +*.$$*)* 
!*-(
!'*/)/
+'$)*
'
.$"0$ )/
- "'?
.selector { " 1.
C;C;
*/
&'(0*/
,*/""*(*/

*.'
&*0(0
/
/&(

/1
&'(0*
*(0(*.
height: 1%;
} '
:$"*  4   '
% (+'*
)/ -$*-
.
(0 ./-

*)/$)0$:)?
<div id="contenedor">
) ' )1 "*-
)/ -) / 3+'*- - Y . +0  0/$'$5- ' /-0*  ' "0$:) %* 4 ' +-*+$  <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
height +-
!*-5-

0)
' ( )/*

,0
/ )" layout? molestie turpis vitae ante.</div>
<div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
.selector {
bibendum mi non lacus.</div>
_height: 1%;
</div>
}
#contenedor {
border: thick solid #000;
)
)/ -) / 3+'*- - Z . +0  0/$'$5- ' +-*+$  min-height 0/$'$5)* 0',0$ - 1'*-=
}
$)'0.*
' 0?
#izquierda {
.selector {
float: left;
min-height: 0;
width: 40%;
}
}
/- +-*+$  (04 0/$'$5 )
)/ -) / 3+'*- - Z . zoom= 0),0 )* . 0) +-*+$ 
#derecha {
./6)-
 ?
float: right;
.selector { width: 40%;
zoom: 1; }
}
 .*'0$:) /-$$*)'  ./ +-*' ( *).$./ ) 9$- 0) ' ( )/* $)1$.$'  .+07. 
) '. +-:3$(. . $*) . . +- . )/) '"0). /7)$. ,0 - ,0$ - ) !*-5-  ,0 0) ' ( )/* /**. '*. ' ( )/*. +*.$$*)*.  !*-( !'*/)/ +- !*-5-  ,0 ' ' ( )/* *)/ ) *-
/ )" layout )
)/ -) / 3+'*- -@ $ ,0$ - .   -    ).  /7)$. ,0 # ) 0.*  ' / )"
'
'/0-
.0!$$ )/ @
*.
' ( )/*.
$)1$.$' .
(6.
0/$'$5*.
.*) <div>= <br> 4 <p>@
+-*+$  hasLayout= +0  . *).0'/- ' -/80'* On having layout K#//+?II222@./5)./5@ I
 ./ !*-(= .$ . 9 0) ' ( )/* <div> $)1$.$' *) ' +-*+$  clear   ) '
..I*)#1$)"'4*0/@#/('L @ $-*.*!/ /($7) # +0'$* 0) -/80'* ''(* HasLayout
% (+'*
)/ -$*-?
Overview K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4IUXSW[TK@[XL@.+3L ,0 3+'$ '
+-*+$  hasLayout 4
.0.
$(+'$$*) .
)
'
$. 9*

.$/$*.
2 @ <div id="contenedor">
<div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
molestie turpis vitae ante.</div>
1.3. Limpiar floats <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
bibendum mi non lacus.</div>
 +-$)$+' -/ -8./$  '*. ' ( )/*. +*.$$*)*.  !*-( !'*/)/ ( $)/ ' <div style="clear: both"></div>
+-*+$  float . ,0  .+-  )  ' !'0%* )*-('  ' *0( )/*@  ./ !*-(= . +*.$' </div>
,0
'"0)*.
*
/**.
'*.
' ( )/*.
!'*/)/ .
.
.'")

.0
' ( )/*
*)/ ) *-@

444;&".*/4;/ 9 444;&".*/4;/ 10

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

#*- ' ' ( )/* *)/ ) *- . 1$.0'$5 *-- /( )/ +*-,0 )$ --  /**. .0. /* Funciona correctamente con cualquier navegador */
#contenedor {
' ( )/*.?
border: thick solid #000;
overflow: hidden;
width: 100%;
}

/* Funciona correctamente con cualquier navegador */

#contenedor {
border: thick solid #000;
overflow: hidden;
height: 1%;
}

/* La propiedad zoom no es parte del est‡ndar CSS, por lo

que esta hoja de estilos no validar’a */
#contenedor {
" 1.
C;D;
*&1"+(
0.""*(&
&
,.*&'

&*/
&'(0*/
,*/""*(*/

*.'
&*0(0 border: thick solid #000;
overflow: hidden;
 /7)$  *-- "$- '*. +-*' (. *.$*)*. +*- '*. ' ( )/*. +*.$$*)*.  !*-( zoom: 1;
!'*/)/
.
.0 '
 )*($)- "limpiar los float"@ }

0),0 9$- 0) ' ( )/* $)1$.$' *--$" *-- /( )/ ' +-*' (= . /-/  0) /* El truco del gui—n bajo delante de las propiedades CSS no
.*'0$:) +** ' ")/ $)*-- /  . ' +0)/*  1$./ . (6)/$*@ * /$ ) )$)";) . )/$* lo interpreta correctamente la versi—n 7 de Internet Explorer */
9$- 0) ' ( )/* 18* ) ' :$"*  = .*- /** .$ . ' ( )/* . 0/$'$5 #contenedor {
border: thick solid #000;
3'0.$1( )/
+-
*-- "$-
'
.+ /*

'*.
*)/ )$*.@
overflow: hidden;
_height: 1%;
!*-/0)( )/ = 3$./ 0) .*'0$:) '/ -)/$1 +- limpiar los float ,0 )* *'$"  9$-
}
)0 1*. ' ( )/*.  4 ,0  (6. . ' ")/ 4 (04 . )$''@  .*'0$:) *).$./ )
0/$'$5- ' +-*+$  overflow   .*- ' ' ( )/* *)/ ) *-@ ' 0/*-  ' .*'0$:) . '  /*. '. .*'0$*) . )/ -$*- .= ' (6. 0/$'$5 . ' ,0 ./'  ' +-*+$  height: 1%=
$. 9*- 0' P-$ ) K#//+?II+(*@*@0&IL 4 . +0'$: +*- +-$( - 1 5 ) ' -/80'* Simple 4 ,0 )*-('( )/ . ' ,0 ( )*. ! / ' .+ /*  ' ' ( )/* *)/ ) *-@ *).$ -)*
Clearing of Floats K#//+?II222@.$/ +*$)/@*(I'*".IUSSXISUIUYI.$(+' A' -$)"A*!A!'*/.IL @ /** '* )/ -$*-=  *)/$)0$:) . (0 ./- ' .*'0$:)  !$)$/$1 +- limpiar los floats= ,0 .
*(+/$'
*)
/**.
'*.
)1 "*- .
4
,0
#
,0
'
#*%

./$'*.
. 
16'$?
$
.
(*$!$
'
:$"*  )/ -$*-
4
.
$)'04
'
.$"0$ )/
- "'?
#contenedor {
#contenedor {
border: thick solid #000;
border: thick solid #000;
overflow: hidden;
overflow: hidden;
height: 1%;
}
}

#*-= ' *)/ ) *- )$ -- *-- /( )/  '*. *. ' ( )/*. <div> $)/ -$*- . 4 )* .
#izquierda {
)  .-$* 9$- )$)";) ' ( )/* $$*)' ) ' :$"*  @  (6.  ' 1'*- hidden= float: left;
/($7)
.
+*.$'
0/$'$5-
'
1'*- auto */ )$ )*
'
($.(*
- .0'/*@ width: 40%;
}
./ .*'0$:) !0)$*) *-- /( )/ ) /*. '. 1 -.$*) . - $ )/ .  '*. )1 "*- .=
$)'04 )*
)/ -) / 3+'*- - Z 4 [@ * *./)/ = ) '. 1 -.$*) . )/ -$*- . 
)/ -) / 3+'*- - #derecha {
float: right;
. )  .-$* 9$- 0',0$ - +-*+$   ,0 *'$"0 ' )1 "*-  *).$ -- ,0 '
width: 40%;
' ( )/*
*)/ ) *-
*0+
.$/$*
)
'
+6"$)@ }

7)$( )/ = ./ ./-/ "$ . *)* *(* forzar a que Internet Explorer active la propiedad
hasLayout sobre el elemento@  *)/$)0$:) . (0 ./-) '"0). /7)$. . )$''. +-
*). "0$-'*?

444;&".*/4;/ 11 444;&".*/4;/ 12

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

1.4. Elementos de la misma altura  .*'0$:)  '. *'0(). !'.. *).$./ ) ./'  - 0) $(" )  !*)* - + /$
1 -/$'( )/ ) ' ' ( )/* *)/ ) *-@ *(* ' *)/ ) *- . /) '/* *(* ' *'0() (6.
./ # 0)*. 9*.= ' ./-0/0-  '. +6"$). 2  *(+' %. . -  ( $)/ /'. '/=
.0
$(" )

!*)*

'
. ).$:)

,0
/*.
'.
*'0().
.*)

'
($.(
'/0-@
 @ 0),0 ./ .*'0$:) +- . )/ (0#*. $)*)1 )$ )/ .= .0 +-$)$+' 1 )/% . ,0 /*.
'.
*'0().
,0
!*-()
'
+6"$)
.*)

'
($.(
'/0-@

*-('( )/ = 0)* . -  ' ./-0/0-  0) +6"$) *(+' %= .  .  ,0 /*. '.
*'0(). ,0 ' !*-() / )") ' ($.( '/0-@  # #*= 0)* '"0). * /*. '. *'0().
/$ ) ) $(6" ) . * *'*- .  !*)*= ./ -/ -8./$ . $(+- .$)$' +- */ ) - 0) $. 9*
*-- /*@

$) (-"*= *(* ' *)/ )$*   *'0() .0 ' . - 1-$' = )* . +*.$'  / -($)- '
'/0-  ' *'0() (6. '/ 4 +*- /)/*= )* . +*.$' # - ,0 /*. '. *'0(). / )") '
($.(
'/0-
$- /( )/
*)
'
+-*+$  height@

0)* . 0/$'$5 0) /' +- - - ' ./-0/0-  ' +6"$)= ./ +-*' ( )* 3$./ +*-,0
 *'0()  ' ./-0/0- . *-- .+*) *) 0)  '  /*.  ' /'@ $) (-"*=
0)* . $. 9 ' ./-0/0-  ' +6"$) 0/$'$5)* .:'* = ' +-*' ( )* . /) !6$' 
.*'0$*)-@ !*-/0)( )/ = 3$./ ) 1-$. .*'0$*) . +- . "0-- ,0 *. ' ( )/*. / )")
'
($.(
'/0-@ " 1.
C;E;
/
*&1'(/
,.(

&
'"/'
&01.
,*.-1
&
&'(0*
*(0(*.
'1/0.
1(
"' (

*(*
.,0"
3.0"&'(0
 +-$( - .*'0$:) . ' (6. . )$'' 4 ' +0'$: ' $. 9*- ' 3 *$).*) ) .0 -/80'*
Equal Height Columns - revisited K#//+?II222@+*.$/$*)$. 1 -4/#$)"@) /I-/$' .I*) /-0 '4*0/I ' +-$)$+' $)*)1 )$ )/  ./ /7)$ . ,0 .:'* . +0  (+' - 0)* ' ./-0/0- 
,0'# $"#/L @ ' /-0* *).$./ ) 9$- 0) .+$*  - '' )* $)! -$*- Kpadding-bottomL (04 ' +6"$) .  )#0- !$%= .  $-= 0)* .0 $. 9* )* . '8,0$* 4 )* . +/  ' )#0-
"-)  /*. '. *'0(). 4  .+07. 9$-' . 0) (-" ) $)! -$*- ) "/$1* Kmargin-bottomL 
'
1 )/)
 '
)1 "*-@
 '
($.(*
/(9*@ $ ' !*)*  '. *'0(). . .$(+' ( )/ 0) *'*- 4 )* 0) $(" )= . +0  0/$'$5- 0)
#contenedor { .*'0$:) '/ -)/$1 +')/  +*- ' $. 9*- *0"'. $1$)"./*) ) .0 /7)$ Bordered
overflow: hidden; Colors K#//+?II222@- ( '*)@) /I/./( IV*'.UIL 4 ,0 . . ) ' 0.*  '. +-*+$  .
} border-left 4 border-right .*- ' *'0()  )/-'  ' ./-0/0-  ' +6"$)@ ) 1 -.$:)

#columna1, #columna2, #columna3 {

'/ -)/$1 4 ( %*-  ' /7)$ *-$"$)' . +0  )*)/-- ) Ordered Borders Layout
padding-bottom: 32767px; K#//+?II222@+*.$/$*)$. 1 -4/#$)"@) /I*- - A*- -.A )/ -@#/('L @
margin-bottom: -32767px;
} . *. .*'0$*) . +')/ . #./ ' (*( )/* *).$./ ) ) /-0*. +- )"9-  '*.
)1 "*- . 4  '*. 0.0-$*.@  *)/$)0$:) . +- . )/ ' ;)$ .*'0$:) /7)$( )/ *-- /
' 1'*- 0/$'$5* ) ' .+$*  - '' )* 4 ) ' (-" ) $)! -$*-  '. *'0().   . - /) +-
!*-5-

,0
*.
' ( )/*.
(0 ./- )
'
($.(
'/0-@
"-) *(* ' '/0- .+ - +- ' *'0() (6. '/@ - 1$/- ,0 -. *-/*= .
- *($ )
0/$'$5-
1'*- .

+-/$-
 10.000 +83 ' .@  .*'0$:) !0 +-*+0 ./ +*- ' $. 9*- *" - *#)..*) ) .0 -/80'* Equal height boxes
with CSS K#//+?II222@WXY - ./- /@*(I-#$1 IUSSWSXI ,0'O# $"#/O*3 .O2$/#O..IL 4
*.
*.
+-$)$+' .
+-*' (.
,0
+- . )/
./
.*'0$:)
.*)
'*.
.$"0$ )/ .? .
.
)
'
0.*
1)5*

'
+-*+$  display  @


+0  )
+-*0$-
--*- .
'
$(+-$($-
'
+6"$)
*)
'
)1 "*-

)/ -) /
3+'*- -@ ) +-$( - '0"-= . )  .-$* 9$- 0) ' ( )/* $$*)' K<div id="contenidos">L ) '

$
.
0/$'$5)
)' .

/$+*
)'
)
0',0$ -
*'0()=
'
+0'.-
.*-
'
)'
'. :$"*  
'
+6"$)?
*'0().
.
 .+'5)

!*-(
. ) )/
4 desaparecen 
'
+6"$)@ <div id="contenedor">
<div id="contenidos">
/- .*'0$:) ' +-*' (  '*. ' ( )/*.  ' ($.( '/0- . ' ,0 +- . )/: ' $. 9*- <div id="columna1"></div>
)   -#*'( ) .0 7' - -/80'* Faux Columns K#//+?II222@'$./+-/@*(I-/$' .I <div id="columna2"></div>
!03*'0().IL @ $ ' .*'0$:) )/ -$*- *).$/8 ) enga–ar ' )1 "*-= ./ . "0) .*'0$:) <div id="columna3"></div>
.
.
) enga–ar '
*%*
 '
0.0-$*@ </div>
</div>

444;&".*/4;/ 13 444;&".*/4;/ 14

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

 *)/$)0$:)= . 0/$'$5 ' +-*+$  display   +- (*./-- '*. ' ( )/*. <div>

+-$( -
( $
.
*'$"/*-$

$)$
'
 .+'5($ )/*
#*-$5*)/'

'
.*(-@
$
'
)/ -$*- .
*(*
.$
!0 -)
 '.

0)
/'

/*.? 1'*-
.
+*.$/$1*=
'
.*(-
.
 .+'5
#$
'
 - #
4
.$
.
) "/$1*=
.
 .+'5
#$
'
$5,0$ -@
#contenedor {
display: table;

. "0)
( $
/($7)
.
*'$"/*-$

$)$
'
 .+'5($ )/*
1 -/$'

'
}
.*(-@
$
'
1'*-
.
+*.$/$1*=
'
.*(-
.
 .+'5
#$
%*
4
.$
.
) "/$1*=
.
#contenidos {  .+'5
#$
--$@
display: table-row;


/ - -
( $
.
*+$*)'

$)$
'
-$*
0/$'$5*
+-
$!0($)-
'
.*(-@
0)/*
}
(6.
"-)
. 
.0
1'*-=
(6.
*--*.
+- 
'
.*(-@
$
.
0/$'$5
'
1'*- 0=
'
.*(-
#columna1, #columna2, #columna3 { .
(0 ./-
*(*
0)
*'*-
.:'$*@
display: table-cell;
}


0-/
( $
/($7)
.
*+$*)'

$)$
'
-$*
*)
'
,0
.
3+)
'
.*(-@
$
.
./' 
0)
1'*-
+*.$/$1*=
'
.*(-
.
3+)
)
/*.
$- $*) .@
$
.
0/$'$5
0)
-$.  ' +-*+$  display  = 0',0$ - ' ( )/* . +0  *(+*-/- *(* 0) /'= 1'*-
) "/$1*=
'
.*(-
.
*(+-$( @
0)
!$'

/'
*
0)
 '

/'=
$) + )$ )/ ( )/
 '
/$+*

' ( )/*
,0
.
/-/ @

'
*'*-
$)$*
.
$- /( )/
'
*'*-

'
.*(-
,0
.
(0 ./-@
 ./ !*-(= '*. ' ( )/*. <div> ,0 !*-() '. *'0().  ' +6"$) ) - '$ .

.$"0$ )/
- "'  (0 ./-
0)
.*(-
)
'*.
)1 "*- .
$- !*3
4
!-$?
*(+*-/) *(*  '.  /'= '* ,0 + -($/ ,0 ' )1 "*- '. (0 ./- *) ' ($.(
'/0-@ .elemento {
-webkit-box-shadow: 2px 2px 5px #999;
' ;)$* $)*)1 )$ )/  ' .*'0$:) )/ -$*- . ,0 ' )1 "*-
)/ -) / 3+'*- - Z 4 .0. -moz-box-shadow: 2px 2px 5px #999;
}
1 -.$*) . )/ -$*- . )* .*) + .  () %- '*. 1'*- . (6. 1)5*.  ' +-*+$ 
display=
+*-
'*
,0
)
.*.
)1 "*- .
'
+6"$)
)*
(0 ./-
*-- /( )/
.0
./-0/0-@ *- .0 +-/ = ' )1 "*-
)/ -) / 3+'*- - $.+*)  .0 +-*+$* ( )$.(* +- - -
.*(-.@  .*'0$:) . . ) ' 0.*  '*. !$'/-*.= 0) ( )$.(* ,0 )* !*-( +-/  '
1.5. Sombras ./6)-   4 ,0 + -($/ ) +'$- *+ -$*) . *(+' %.  '*. ' ( )/*.  ' +6"$)@
)/- '*. !$'/-*. 
)/ -) / 3+'*- - K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4I
)  '. - )$.  ' ./6)-  U@T (6.  (). +*- '*. $. 9*- . . ' +*.$$'$ (.XVU[XVK@[XL@.+3L = . )0 )/- ' !$'/-* .#*2 K#//+?II(.)@($-*.*!/@*(I )A0.I
 (*./-- .*(-. /$+* "drop shadow" .*- 0',0$ - ' ( )/*  ' +6"$)@ *- ./ (*/$1*= '$--4I(.XVVS[YK@[XL@.+3L =
,0
+ -($/
(*./--
0)
.*(-
)
0)
' ( )/*

'
+6"$)@
' !0/0- 1 -.$:)  V $)'0$-6 0) +-*+$  ''( box-shadow +- - - ./ /$+* 
.*(-.@ . *+$*) .  ' !$'/-* shadow .*) (0#* (6. '$($/. ,0 '.  ' +-*+$  box-shadow@ 0
.$)/3$.
.
'
#$/0'

'*.
!$'/-*.


)/ -) /
3+'*- -
4
'.
*+$*) .
.*)?
 *)/$)0$:) . (0 ./- ' - "'  V )  .-$ +- - - 0) .*(- "-$. (04 $!0($) 4
,0
.
1$.0'$
)
'
.,0$)
$)! -$*-
 - #

0)
' ( )/*?
color=
./' $*
( $)/
'
!*-(/*
# 3 $('
K % (+'*? #CC0000L@

.elemento {
direction=
$- $:)
#$
'
,0
.
 .+'5
'
.*(-@
0
1'*-
.
$)$
)
"-*.
4
.:'*

box-shadow: 2px 2px 5px #999; .
+ -($/ )
'*.
1'*- . 0= 45= 90= 135= 180= 225= 270 4 315@
}

strength=
$./)$
)
+83 ' .
#./
'
,0
.
3/$ )
'
.*(-@
 .!*-/0)( )/ = ./ +-*+$  .:'* ./6 $.+*)$' ) '*. )1 "*- . ,0 (6. .
+- *0+) +*- '*. ./6)- .@ ' )1 "*- !-$ V $)'04 ' +-*+$  *) ' )*(-  *)/$)0$:) . (*$!$ ' - "'  )/ -$*- +- $)'0$- ' !$'/-* 
)/ -) / 3+'*- - ,0
-webkit-box-shadow 4
$- !*3
V@T
'
$)'04
*)
'
)*(- -moz-box-shadow@ (0 ./-
0)
.*(-
.$($'-?
.elemento {
 .$)/3$. *(+' /  ' +-*+$  box-shadow . (04 *(+' % 4 .  !$) ) ' *--*- 
-webkit-box-shadow: 2px 2px 5px #999;
/-%*  ' (:0'*  !*)*. 4 *- .  V K#//+?II 1@2V@*-"I..2"I..VA&"-*0)I -moz-box-shadow: 2px 2px 5px #999;
R/# A*3A.#*2L @

*)/$)0$:)
.
(0 ./-
.0
.$)/3$.
.$(+'$!$
#$/0'? filter: shadow(color=#999999, direction=135, strength=2);
}
box-shadow: <medida> <medida> <medida>? <medida>? <color>
( )/' ( )/ = #./ ,0 /**. '*. )1 "*- . (6. 0/$'$5*. )* $)'04) ' +-*+$ 
box-shadow= ' ;)$ !*-(  (*./-- 0) .*(- .*- 0) ' ( )/*  ' +6"$) *).$./ )
0/$'$5-
$(6" ) .
,0
.$(0')
0)
.*(-@

444;&".*/4;/ 15 444;&".*/4;/ 16

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

 *)/$)0$:) .  /'') '*. +.*. )  .-$*. +- (*./-- 0) .*(- . )$'' .*- 0)
$(" )?

T@ 
- 
0)
$(" )
 '
($.(*
/(9*
,0
'
$(" )
*-$"$)'
4
04*
.+ /*
. 
'

'

.*(-
,0
.
,0$ -
(*./--@
U@ 
9
0)
.+$*

- '' )*

'
$(" )
*-$"$)'
)
'
+*.$$:)
)
'
,0
.
,0$ -
(*./--
'
.*(-@
$
+*-
% (+'*
.
,0$ -
(*./--
0)
.*(-
)
'
.,0$)
$)! -$*-
 - #=
.
9 padding-right 4 padding-bottom@
V@ /$'$5)*
'
+-*+$  background=
.
9
'
$(" )

'
.*(-
*(*
$(" )
 " 1.
C;G;
/
"' (/

/*'.
'16
.(
,.*1(
*./
'/
*/
!*)*

'
$(" )
*-$"$)'@

$(" )

!*)*
.
*'*
)
'
+*.$$:)
)
'
,0
.
,0$ -
(*./--
'
.*(-@
)
'
.*

'
.*(-
$)! -$*-
 - #=
'
+*.$$:)

'  .*'0$:) *(+' / +- - - .*(-.  0',0$ - /(9* 4 *) *- . *-- /*. $(+'$ '
$(" )

!*)*
. bottom right@ 0.*

(6.
$(6" ) .@
*.
.$"0$ )/ .
- 0-.*.
(0 ./-)
:(*
- -
.
/$+*

.*(-.?


.$"0$ )/
$(" )
(0 ./-
'
- .0'/*
!$)'
4
'.
$(6" ) .
0/$'$5.
)
'
+-* .*?
I
(" I 3(+' @#/('L ?
0/$'$5
/- .
$(6" ) .
4
/- .
' ( )/*. <div> +-

Shadowed Image K#//+?II222@.. .$")+// -).@*(I#+/ -]USTW]USA]US
#*2 ]US

$(" )@

CSS Drop Shadows II: Fuzzy Shadows K#//+?II222@'$./+-/@*(I-/$' .I..-*+UIL ?
0/$'$5
*.
$(6" ) .
4
*.
' ( )/*. <div> +-

$(" )@

My contribution to the CSS shadow kerfuffle K#//+?II/# .#+ *!4.@*(IUSSXITTIU\I

(4A*)/-$0/$*)A/*A/# A..A.#*2A& -!0!!' @#/('L ?
'
- .0'/*
.
$7)/$*
'
*/ )$*
( $)/
' drop shadow 
#*/*.#*+=
+ -*
- ,0$ -
$)*
$(6" ) .
4
$)*
' ( )/*.
<div> +-

$(" )@

$ . ,0$ - (*./-- 0) .*(- .*- ' ( )/*. ,0 )* .  $(6" ) .= ' .*'0$:) *).$./ )
" 1.
C;F;
,&"(*
1(
/*'.

1(
"' ( ) --- '*. *)/ )$*. *) *. ' ( )/*. <div> 4 +'$- ' $(" )  .*(- .*- ' +-$( -*

''*.?
'
:$"*  )  .-$*
+-
*). "0$-
./
! /*
.
(0 ./-

*)/$)0$:)?
#sombra {
img { background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;
background: url("imagenes/sombra.png") no-repeat bottom right; padding-right: 15px;
padding-right: 10px; padding-bottom: 15px;
padding-bottom: 10px; width: 200px;
} }

' +-$)$+' $)*)1 )$ )/  ./ /7)$ . )$'' . ,0 .   ) - - /)/. $(6" ) .  #sombra div {
.*(- *(* /(9*. $! - )/ .  $(6" ) . #4 ) ' .$/$* 2 @  .*'0$:)  ./ +-*' ( background: #FFF;
*).$./ ) - - 0) $(" )  .*(- (04 "-) 4 +'$-'  /*. '. $(6" ) .@ ./ )0 1 width: 200px;
}
.*(-   / ) - 0) /(9* ' ( )*. /) "-) *(* ' $(" ) (6. "-) ,0 . 14 
0/$'$5-@ <div id="sombra">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut diam metus,
' +-*' (  0/$'$5- 0) $(" )  .*(- (04 "-) . ,0 '*. *- .  ' .*(- )*
venenatis ullamcorper, consequat sit amet, volutpat at, nulla. Nulla sollicitudin
,0 ) /) $ ) *(* 0)* . 0/$'$5 0) $(" )  .*(-  ' ($.(* /(9* ,0 ' $(" ) metus.</div>
*-$"$)'? </div>

. .*'0$*) . .. ) $(6" ) . /$ ) ) ' 1 )/%  ,0 !0)$*)) *-- /( )/ )

0',0$ - )1 "*-@ $) (-"*= *(+'$) $))  .-$( )/ ' :$"*   ' +6"$) 4
/$ ) ) '$($/$*) . *(* '  / ) - ,0 - - 0) )0 1 $(" )  1 5 ,0 . ,0$ - ($-
'
*'*-

'
.*(-@

444;&".*/4;/ 17 444;&".*/4;/ 18

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

1.6. Transparencias
' ./6)-   U@T )* $)'04 )$)"0) +-*+$  +- *)/-*'- ' *+$  '*. ' ( )/*.
 ' +6"$)@ $) (-"*= ' !0/0- 1 -.$:)  V $)'04 0) +-*+$  ''( opacity=
 !$)$ ) ' (:0'*  *'*- .   V K#//+?II222@2V@*-"II..VA*'*-IL 4 ,0 + -($/
$)'0$-
/-).+- )$.
)
'
$. 9*

'
+6"$)@

 + .-  ,0 !'/ (0#* /$ (+* #./ ,0 . +0'$,0 ' 1 -.$:)  !$)$/$1  ' ./6)-  V=
'*. )1 "*- . ,0 (6. . .!0 -5) ) 0(+'$- '*. ./6)- . K$- !*3= !-$ 4 + -L 4
$)'04 )
'
+-*+$  opacity )
.0.
;'/$(.
1 -.$*) .@

' 1'*-  ' +-*+$  opacity . ./'  ( $)/ 0) );( -*  $(' *(+- )$* )/-
0.0 4 1.0@  $)/ -+- /$:)  ' 1'*- )0(7-$* . /' ,0 ' 1'*- 0.0 . ' (63$(
" 1.
C;H;
.(*
&'(0*/
/'"0.(/,.(0/
*(
&
,.*,"
*,"06
/-).+- )$ K ' ' ( )/* . $)1$.$' L 4 ' 1'*- 1.0 . *-- .+*) *) ' (63$( *+$
K ' ' ( )/* . *(+' /( )/ 1$.$' L@  ./ !*-(= ' 1'*- 0.5 *-- .+*)  0) ' ( )/*  .!*-/0)( )/ = ' .*'0$:) )/ -$*- )* !0)$*) ) ' )1 "*-
)/ -) / 3+'*- - Z 4 .0.
. ($/-).+- )/
4
.8
.0 .$1( )/ @ 1 -.$*) . )/ -$*- . +*-,0 )* .*+*-/) ' +-*+$  opacity@ * *./)/ = ' )1 "*-

)/ -) / 3+'*- - $)'04 0) ( )$.(* ''(* !$'/-*.= ,0 )* !*-() +-/  )$)";)
) ' .$"0$ )/ % (+'*= . ./'  ' +-*+$  opacity *) 0) 1'*-  0.5 +- *). "0$-
./6)-
  + -*
,0
+ -($/ )
.*'0$*)-
./
'$($/$:)@
0)
/-).+- )$
 ' 50% .*-
*.

'*.
' ( )/*. <div>?
*. !$'/-*. + -($/ ) +'$- *+ -$*) . *(+' %.  '*. ' ( )/*.  ' +6"$)@ *. !$'/-*. 
#segundo, #tercero {
opacity: 0.5;
)/ -) / 3+'*- - K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4I(.XVU[XVK@[XL@.+3L .
} $1$ ) ) ./6/$*. 4  /-).$$:)@ *. !$'/-*. ./6/$*. K#//+?II(.)@($-*.*!/@*(I )A0.I
'$--4I(.YZVXV\K@[XL@.+3L . 0/$'$5) 6.$( )/ +- - - ! /*. "-6!$*. .*- '*.
#primero { ' ( )/*.= )*-('( )/ $(6" ) .@ )/- '*. !$'/-*. ./6/$*. . )0 )/- ' !$'/-* '+#
background-color: blue;
K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4I(.XVU\YZ@.+3L = ,0 + -($/ *)/-*'- ' *+$
}

0)
' ( )/*

'
+6"$)@
#segundo {
background-color: red;
 .$)/3$. *(+' /  ' !$'/-* '+# . (04 *(+' % +*-,0 .0. +*.$$'$ . .*) )0( -*..@
} * *./)/ = ' .$)/3$. )  .-$ +- ./'  - .*'( )/ ' )$1 '  /-).+- )$  0)
' ( )/*
.
(04
. )$''?
#tercero {
background-color: green; #segundo, #tercero {
} filter: alpha(opacity=50);
}
$ . 1$.0'$5 ' % (+'* )/ -$*- ) ' )1 "*- $- !*3= !-$ 0 + -= '*. ' ( )/*. <div>
' 1'*-  ' *+$:) opacity  ' !$'/-* alpha . ./'  ( $)/ 0) );( -* )/ -*
-*%*
4
1 -
+-  )
. ($/-).+- )/ .=
/'
4
*(*
.
(0 ./-
)
'
.$"0$ )/
$(" )?
*(+- )$* )/- 0 K ' ' ( )/* . $)1$.$' L 4 100 K ' ' ( )/* . *(+' /( )/ *+*L@ '
1'*- 50  '
% (+'*
)/ -$*-
#
,0
'
' ( )/*
. 
. ($/-).+- )/ @

 *)/$)0$:) . (0 ./- ' .*'0$:) *(+/$' *) /**. '*. )1 "*- . +- ,0 0)
' ( )/*

'
+6"$)
. 
. ($/-).+- )/ ?
selector {
opacity: 0.5;
filter: alpha(opacity=50);
}

*- ;'/$(*= - 0 - ,0 ' +-*+$  filter . +-*+$ /-$ 

)/ -) / 3+'*- - 4 )* !*-(
+-/  )$)";) ./6)-  = +*- '* ,0 - "' )/ -$*- )* +. ./$.!/*-$( )/ ' +-* .*

1'$$:) @

444;&".*/4;/ 19 444;&".*/4;/ 20

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

1.7. Sustituci—n de texto por im‡genes h1 {

font-family: "Fuente muy rara", sans-serif;
 '$($/$:) (6. !-0./-)/ +- '*. $. 9*- . 2  ,0 0$) .+ $'( )/ ' /$+*"-!8  }
.0. +6"$). . ' $(+*.$$'$  0/$'$5- 0',0$ - /$+*  ' /- +- (*./-- '*. *)/ )$*. 
/ 3/*@ *(* . . = '. !0 )/ . ,0 0/$'$5 0) +6"$)   ) ./- $)./'. ) ' *- )*- *  $- /$1 @font-face /($7) + -($/  !$)$- */-. +-*+$  .  ' !0 )/ = *(* .0
$.+*.$/$1*
 '
0.0-$*
+-
,0
'
)1 "*-
+0 
(*./--'.@ !*-(/*=
"-*.*-
4
./$'*@

*)/$)0$:)
.
(0 ./-)
*/-*.
% (+'*.?
@font-face {
*- '* /)/*= .$ ' $. 9*- 0/$'$5 ) ' +6"$) 0) !0 )/ .+ $' +** *(;) )/- '*.
font-family: Fontinsans;
0.0-$*. )*-(' .= ' )1 "*- )* )0 )/- . !0 )/ 4 ' .0./$/04 +*- 0) !0 )/ +*- src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");
 ! /*@ ' - .0'/* . ,0 ' +6"$) ,0 1 ' 0.0-$* 4 ' ,0 1 ' $. 9*- . $! - )$) font-weight: bold;
*(+' /( )/
)
.0
/$+*"-!8@ font-style: italic;
}
 *). 0 )$ $- /  ./ '$($/$:) . ,0 /**. '*. $. 9*- . . '$($/)  0/$'$5- '.
+*.
!0 )/ .
,0
/$ ) )
.$
/**.
'*.
0.0-$*.
 '
(0)*? @font-face {
font-family: Tagesschrift;

$./ (.
*+ -/$1*.
/$+*
$)*2.? Arial= Verdana= Tahoma= Courier New= Times New src: url("fonts/YanoneTagesschrift.ttf") format("truetype");
}
Roman= Georgia@
($7)
./6
$.+*)$'
0) '$./
*)
/*.
'.
!0 )/ .
,0
$)'04
+*-
 ! /*

1 -.$:)

$)*2. K#//+?II222@(+.*!/@) /I2  .$")A'I *. % (+'*. )/ -$*- . #) .$* 3/-8*.  ' +6"$) 10 Great Free Fonts for @font-face
2$)*2.A!*)/.A4A1 -.$*)@#/('L @ embedding K#//+?II*+ )/4+ @$)!*I (*I2 !*)/ (*@#/('L @ - 1 - ' ! /*  ' $- /$1

$./ (.
*+ -/$1*.
/$+*
? Arial= Helvetica= Verdana= Monaco= Times@ @font-face=
  .
  -

.
+6"$)
0/$'$5)*
0)
)1 "*-
*(*
!-$@

$/ (.
*+ -/$1*.
/$+*
$)03?
$)'04 )
  ).

!0 )/ .=
(0#.

''.
1 -.$*) . 1.7.2. Soluciones FIR
'$- .

'.
!0 )/ .
*( -$' .@
($7)
.
+*.$'
$)./'-
'.
!0 )/ .
(6.
+*+0'- .

$)*2.
( $)/
'
+,0 / *-
*)/ K#//+?II*- !*)/.@.*0- !*-" @) /IL @ . .$"'. 
 KFahrner Image ReplacementL -)   ).  /7)$. .$($'- . ,0 /-/) 
- .*'1 - ' +-*' (  0/$'$5- 0',0$ - /$+*  ' /- ) 0) +6"$) 2 @ ' +-*+:.$/*  ./.
 $*  ' +- . )$ (4*-$/-$  '*. .$./ (. *+ -/$1*. $)*2. 4 ' $.+*)$$'$ 
/7)$. . .0./$/0$- ' / 3/* )*-(' +*- 0) $(" ) ,0 *)/ )" ' ($.(* / 3/* .-$/* *) '
(0#.  .0. !0 )/ . ) */-*. .$./ (. *+ -/$1*.= ' (4*-8  $. 9*- . 0/$'$5)
/$+*"-!8  . @  +-$( - /7)$ . +- . )/: ) ' -/80'* Using Background-Image to
3'0.$1( )/
'.
!0 )/ .
(6.
+*+0'- .

$)*2.@
Replace Text K#//+?II222@./*+ .$")@*(I-/$' .I- +' O/ 3/IL @
!*-/0)( )/ = 3$./ ) 1-$. /7)$. ,0 + -($/ ) 0/$'$5- 0',0$ - /$+*  ' /- ) '
$ . $.+*)  0) /8/0'*  . $:) <h1> ,0 . ,0$ - (*./-- *) 0) /$+*"-!8 (04 .+ $'=
$. 9*

0)
+6"$)
*)
'
. "0-$

,0
/**.
'*.
0.0-$*.
'
1 -6)
*-- /( )/ @
.
+0 
0/$'$5-
'
.$"0$ )/
:$"*  4  +-
.0./$/0$-'*
+*-
0)
$(" )?
1.7.1. La directiva @font-face <h1><span>Lorem ipsum dolor sit amet</span></h1>

 ;)$ .*'0$:) /7)$( )/ *-- /  . ' +0)/*  1$./   . ' 0.*  ' $- /$1 h1 {
width: 450px;
@font-face@ ./ $- /$1 .  !$)$: ) ' ./6)-  U= + -*  .+- $: ) ' ./6)- 
height: 100px;
U@T ,0 0/$'$5) /**. '*. )1 "*- .  #*4 ) 8@  !0/0- 1 -.$:)   V 1*'1 -6  $)'0$- background: #FFF url("/imagenes/titular.png") no-repeat top left;
' $- /$1 @font-face ) ' (:0'* ''(* Web Fonts K#//+?II222@2V@*-"II }
..VA2 !*)/.IL @
h1 span {
 $- /$1 @font-face + -($/  .-$$- '. !0 )/ . ,0 0/$'$5 0) +6"$) 2 @ *(* +-/  display: none;
'  .-$+$:) . +0  $)$- ' $- $:) *   . ' ,0 ' )1 "*- . +0   .-"- }

' !0 )/ 0/$'$5 .$ ' 0.0-$* )* $.+*)  ''@  *)/$)0$:) . (0 ./- 0) % (+'*  0.* ' :$"* )/ -$*- (0 ./- *(* $(" )  !*)*  ' ' ( )/* <h1> ' $(" ) ,0 *)/$ ) '

'
$- /$1 @font-face? /$/0'- .-$/* *) ' /$+*"-!8  . @ - .0./$/0$- ' / 3/* +*- ' $(" )= .$(+' ( )/ .
@font-face { *0'/
'
/ 3/*
( $)/
'
+-*+$  display: none@
font-family: "Fuente muy rara";
src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf");
}

444;&".*/4;/ 21 444;&".*/4;/ 22

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

0),0 . /-/  0)  '. /7)$. 

 (6. . )$''.= .0 +-$)$+' +-*' ( . ,0 ' / 3/* 1.7.3. Soluciones avanzadas
*0'/* ( $)/ display )* '* ' ) *-- /( )/ '*. $.+*.$/$1*. ' /*- .  +6"$). ,0
0/$'$5)
'.
+ -.*).
*)
$.+$ .
1$.0' .@ . .*'0$*) . .. 3'0.$1( )/ )  .0 ' ) +- . )/- +-*' (. *) '*. ' /*- . 
+6"$). ,0 0/$'$5) '. + -.*). $.+$/. +- )1 "-@ *- . (*/$1* . #) $ *
 1*'0$:)  ' /7)$ )/ -$*- *).$./ ) - (+'5- ' +-*+$  display +*- */-.
.*'0$*) .
..
)
$! - )/ .
' )"0% .

+-*"-($:)@
text-indent?
' +-*"-(*-  / -A0' *# # - * 0) .*'0$:) . ) 1-$+/ 4 ,0 3+'$ ) .0
<h1>Lorem ipsum dolor sit amet</h1>
-/80'* Image Replacement K#//+?II222@,0$-&.(* @*-"I*(I!$-@#/('L @ ./ .*'0$:)
h1 {
(0 ./- '. $(6" ) . ) /**. ,0 ''*. )1 "*- . ,0 '. .*+*-/ ) 4 (0 ./- .:'* ' / 3/* )
width: 450px; 0',0$ - */-* .*@  ./ !*-(= ' / 3/* *-$"$)' )* . *0'/  )$)"0) () - ,0 +0 
height: 100px; $(+ $-

'*.
' /*- .

+6"$).
  -

'*.
*)/ )$*.@
background: #FFF url("/imagenes/titular.png") no-repeat top left;
text-indent: -5000px; /-. .*'0$*) . + -($/ ) - -  !*-( $)6($ '. $(6" ) . ,0 .0./$/04 ) ' / 3/*@ '
} +-* .* . (04 *(+' %* +*-,0 #4 ,0 *).$ -- .+ /*. *(* ' .+$* (63$(* ,0
+0  *0+- ' $(" ) 4 '*. +*.$' . .'/*.  '8)  ) ' / 3/*@ 3$./ ) (0'/$/0  .*'0$*) .
/$'$5)* 0) 1'*- ) "/$1* (04 "-) ) ' +-*+$  text-indent  ' ' ( )/* ,0 .
 ./ /$+* +- $! - )/ . ' )"0% .  +-*"-($:)= *(* +*- % (+'* ' +-*4 /* +/-
,0$ - - (+'5-= ' / 3/* )* . *0'/ + -* .  .+'5 !0 -  ' +)/''@ *. )1 "*- .
K#//+?II* @"**"' @*(I+I+/-IL +-  @
)*-(' . )* (0 ./-) ' / 3/* 4 '*. ' /*- .  +6"$). '* ' ) *-- /( )/ +*-,0 ' / 3/* )*
./6
*0'/*@
1.8. Sustituci—n de texto por Flash
' +-*' (  ' .*'0$:) )/ -$*- . ,0 .$ ' )1 "*- /$ ) /$1*  4  ./$1 '
-"  '. $(6" ) .= )* . (0 ./- )@  .*'0$:) *).$./ ) 1*'1 -  0/$'$5- */-* *(* . 3+'$ ) ' . $:) )/ -$*-= '. .*'0$*) . .. )  +- .0./$/0$- ' / 3/* +*-
' ( )/* <span>  )/-*
 '
' ( )/*
,0
.
,0$ -
- (+'5-? $(6" ) . +- . )/) +-*' (. /7)$*. )* - .0 '/*.? '*. ' /*- .  +6"$). +0  ) )* ' - '
/ 3/*
4
'*.
)1 "*- .
)*-(' .
/$ ) )
+-*' (.
0)*
)*
.
+0  )
-"-
'.
$(6" ) .@
<h1><span></span>Lorem ipsum dolor sit amet</h1>
 (6.= ./. .*'0$*) . .. )  .$ (+- /$ ) ) ' $)*)1 )$ )/  ,0 .   ) - -
h1 {
/*. '. $(6" ) . ,0 .0./$/04 ) ' / 3/*@ $ '. $(6" ) . . - )  ()*= ' +-* .* . / $*.*
width: 450px;
height: 100px;
4 +** !' 3$' @ $ '. $(6" ) . . " ) -) $)6($( )/ = ' +'$$:) 2  +0  .0!-$- 0)
position: relative; + )'$5$:)
+- $'
)
.0
- )$($ )/*@
}
 .*'0$:)  !$)$/$1  /**. '*. +-*' (.  '. .*'0$*) . .. )  . ' /7)$ .

h1 span { K#//+?II222@($& $)0./-$ .@*(I'*"I.$!-IL KScalable Inman Flash ReplacementL= ,0 *($)
background: #FFF url("/imagenes/titular.png") no-repeat top left; = 1-$+/ 4 '.# +- (*./-- *-- /( )/ 0',0$ - / 3/* *) 0',0$ - /$+*"-!8
position: absolute;
 . @
width: 100%;
height: 100%;  1 -.$:)  .
 - *( ) +- .0 0.* ) .$/$*. 2  . ' 1 -.$:) .
 U
}
K#//+?II222@($& $)0./-$ .@*(I'*"I.$!-IL = 4 ,0 ' 1 -.$:) .
 V
) ./ .*'0$:)= ' $(" ) . (0 ./- +*-  ')/  ' / 3/*= +*- '* ,0 0),0 ' / 3/* )* . K#//+?II2$&$@)*1 ( -*-)@) /I.$!-VL /*18
.
)0 )/-
)
+ -8**

+-0 .@
*0'/ )$ .  .+'5= ' 0.0-$* )* +0  1 -'*@ ' +-$)$+' +-*' (  ./ /7)$ . ,0 )*  *)/$)0$:) . (0 ./-) '*. +.*. ,0 #4 ,0 . "0$- +- .0./$/0$- ' / 3/* *) ' /7)$
.
+0  )
0/$'$5-
$(6" ) .
*)
/-).+- )$.@ .
?
' -/80'* Revised Image Replacement K#//+?II222@( 55*'0 @*(I/ ./.I TL  .-" ' ;'/$( 1 -.$:) $.+*)$'  '*. -#$1*.  .
@ /0'( )/ = ' 1 -.$:) ./'
- 1$. A$(" A- +' ( )/IL +- . )/
*/-.
/7)$.


4
$.0/
.0.
+-*' (.
4
'$($/$*) .@ . U@S@U 4 . +0   .-"- ( $)/ ' -#$1* *(+-$($* .
U@S@U@5$+

) + )$ )/ ( )/  '*. +-*' (. /7)$*. - '$*)*. *)  4 '*. )1 "*- .= ' K#//+?II222@($& $)0./-$ .@*(I'*"I!$' .I.$!-IU@SI.
U@S@U@5$+L @  .*(+-$( ./ -#$1*
+-$)$+' +-*' (  '. /7)$. 
 )/ -$*- . . ,0 .   ) - - /)/. $(6" ) . *(* )
0',0$ -
-+ /
 '
.$./ (@
' ( )/*. . ,0$ -) - (+'5-@ 0),0 ' +-* .*  - $:)  $(6" ) . .  0/*(6/$*= . UL ' . "0)* +.* *).$./ ) - - 0) -#$1* '.# ,0 $)'04 ' !0 )/ ,0 . 1  0/$'$5- )
0)
+-* .*
+ .*
0)*
.
,0$ -
(*$!$-
+*-
% (+'*
'
/(9*
*
/$+*

' /-
0/$'$5*@ ' .0./$/0$:)@ - ' -#$1* sifr.fla *) 0) $/*-  -#$1*.  /$+* '.# K*(* +*-
% (+'* ' +-*"-( '.# -*! ..$*)' K#//+?II222@* @*(I .I+-*0/.I!'.#IL L@ $ )*

444;&".*/4;/ 23 444;&".*/4;/ 24

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

$.+*) .  )$)";) $/*-  -#$1*. '.#= (6.  ')/ . (0 ./-) 1-$. # --($ )/. 4  .0./$/0$:) - ,0$ - ,0 ) ' !0)$:) replaceElement() . $)$,0 ' . ' /*-   '*.
0/$'$ .
,0$1' )/ .@ ' ( )/*. ,0 . 1)  .0./$/0$- 4 0) . -$  *+$*) . ,0 .   ) / ) - ) 0 )/ ) '
.0./$/0$:)@  ;)$ *+$:) *'$"/*-$ .  )*($) sFlashSrc $)$ ' -0/ *(+' / #./
0)* . - ' -#$1* sifr.fla= .:'* . 1 0) - /6)"0'* ')*@ $)# *. 1  . .*- .
'
-#$1* .swf ,0
*)/$ )
'
/$+*"-!8
 . @
- /6)"0'*  !*-( ,0 . (0 ./- 0) / 3/*@  ' $*) ' / 3/*= (*$!$ .0 !0 )/ +*- '
/$+*"-!8
,0
,0$ - .
0/$'$5-
)
'
$. 9*

/0
+6"$)
4
"0-
'*.
($*.@ 
*)/$)0$:)
.
(0 ./-
0)
/'
*)
/*.
'.
+-*+$  .

.
?
$ ' / 3/* ,0 1.  .0./$/0$- *)/$ ) -/ - . especiales * -/ - . +-*+$*.  '"0)*. Opci—n Descripci—n
$$*(.=
  .
9$-
/**.
.*.
-/ - .
( $)/
'
+' /
 Propiedades  '
/ 3/*@
&
/&0*.
&
&'(0*
*
&'(0*/
-1
/
-1".(
.',&7.;

,1
"(".
VL 3+*-/ ' -#$1* '.# ( $)/ ' *+$:) File ` Export ` Export Movie K* Archivo ` '"(0
/0
*,"+(
*
*'*
,."'.
. 1'(0*

&
1("+( replaceElement();

sSelector
,1(
"(".
3."*/
/&0*./
/,.(*&*/
,*.
*'/;
*/
/&0*./
/*,*.0*/
/*(
ExportarL@ ) 0 ) - *( )$:) *).$./ ) "0-- ' -#$1* *) ' ($.(* )*(-  '
&*/

0"-108
&/8
"
6
&
/&0*.

!"$*/;
/$+*  ' /- ,0 $)'04 Karial.swf= verdana.swf= /@L@ ) 1 5 - * ' -#$1*= "06-'* )
10
*',&0
!/0
&
.!"3* .swf -1
*(0"(
&
1(0
10"&"7;
"
"("/
&
.10
0) $- /*-$*  ' . -1$*- ) ' ,0 "0- . /*. '. !0 )/ .  .
 K+0  . ''(-  ./ sFlashSrc

*.'
.&0"38
&
*." (
/
&
,.*,"
, "(  ;
$- /*-$* fuentes/ +*-
% (+'*L@
*&*.
&
050*
"("*
(
*.'0*
!5"'&8
*'*
,*.
$',&* #000000 *
sColor
WL .
 )  .$/ 1-$*. -#$1*.  4 1-$+/ +- !0)$*)-@ *+$ ' -#$1* sifr.js ) ' #CC0000
-+ /  -#$1*. 1-$+/  /0 . -1$*- 2  K)*-('( )/ ./ $- /*-$* . ''( js/L@ sLinkColor *&*.

&*/
(&/
-1
,1
*(0(.
&
050*
*+$ '*. -#$1*.  sIFR-screen.css 4 sIFR-print.css ) ' -+ /  -#$1*.   /0
sHoverColor *&*.
&
/0* :hover 
&*/
(&/
-1
,1
*(0(.
&
050*
. -1$*-
2 
K)*-('( )/
./
$- /*-$*
.
''( css/L@
sBgColor *&*.

*(*
&
050*
"("*
(
*.'0*
!5"'&
XL *. '. +6"$). ) '. ,0 . .0./$/04 ' / 3/* +*- '.#   ) $)'0$- '*. -#$1*.
nPaddingTop
1-$+/
4 @
-
''*=
9
'*
.$"0$ )/
 )/-*

'
. $:) <head> 
'
+6"$)? nPaddingRight
&&(*
/1,."*.8
"7-1".*8
"(."*.

"7-1".*
&
050*
<head> nPaddingBottom
... nPaddingLeft
<script src="js/sifr.js" type="text/javascript"></script>
.(/*.'"+(
&
050*;
&
3&*. upper 0.(/*.'
&
050*

'62/1&/9
&
3&*.
... sCase
lower &*
0.(/*.'

'"(2/1&/
<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" /> /0
*,"+(
1/
,.*&'/
(
& 1(/
3./"*(/

& 1(*/
(3 *./8
,*.
&*
-1
... (*
/
.*'"(
/1
1/*;
"
/
&
/" (
&
3&*. transparent8
&
&/!
-1
/1/0"016
&
sWmode
</head> 050*
0"(
1(
*(*
0.(/,.(0;
"
/
',&
&
3&*. opaque8
&
&/!
0"(
1(
*&*.

*(*
/+&"*;
' 1'*-  '*. /-$0/*. src 4 href   *)/ ) - ' -0/ *(+' / K.*'0/ * - '/$1L #./ '*.
."&/
""*(&/
-1
,1(
'*"".
&
/,0*
&
050*
/1/0"01"*;
-#$1*.
1-$+/
4  - .+ /$1( )/ @
textalign=center (0.
&
050*

*.'
!*."7*(0&
($7) . +*.$' 9$- '. - "'.  '*. -#$1*.   .
 ) '*. -#$1*.  +-*+$*.  sFlashVars offsetleft=5 /,&7
&
050*
!"
&
.!
&*/
,#5&/
"("*/
,*.
&
(2'.*
offsetTop=5 /,&7
&
050*
!"
$*
&*/
,#5&/
"("*/
,*.
&
(2'.*
'
+6"$)
4
.8
)*
/ ) -
,0
)'5-
*/-*.
*.
-#$1*.  )

+6"$)@
underline=true '1/0.
&*/
(&/
/1.6*/
(
&
/0* :hover
YL  +-/$-  ./ (*( )/* 4 . +*.$' .0./$/0$- 0',0$ - / 3/* +*- '.# 0/$'$5)*
$)./-0$*) . 1-$+/ . )$''.@  *)/$)0$:) . (0 ./- ' :$"* 1-$+/ )  .-$* +- ' .$"0$ )/ % (+'* (0 ./- '*. /$/0'- .  . $:) <h1>= <h2> 4 <h3> *) ' ($.(* /$+*  ' /-
(*./--
/**.
'*.
/$/0'- .

'
+6"$)
*)
0)
/$+*"-!8
+-*+$? 4 *'*- ) "-*= ($ )/-. ,0 .0. +*.$' . )' . . (0 ./-)  *'*- 50' ,0 ($  -*%*
0)*
.
+.
'
-/:)
+*-
)$(
 '
/ 3/*?
if(typeof sIFR == "function"){
sIFR.replaceElement("h1", named({sFlashSrc: "../fuentes/mifuente.swf"})); if(typeof sIFR == "function"){
}; sIFR.replaceElement("h1, h2, h3", named({sFlashSrc: "./sifr/vandenkeere.swf", sColor:
"#000", sLinkColor: "#336699", sHoverColor: "#CC0000"}));
' :$"* 1-$+/ )/ -$*- '* +0  . *'*- ) 0',0$ - +-/  ' +6"$)@ '"0)*. };
$. 9*- . +- !$ - ) *'*-'* ) ' . $:) <head> *) . )0 )/-) ' - ./*  ' ( )/*.
 .
 4 */-*. $. 9*- . +- !$ - ) *'*-'* %0./* )/ .  ' /$,0 / </body>  $ --  ' ' +-$)$+' $)*)1 )$ )/  ' /7)$ .
 . ' - $:)  ' -#$1* .swf *) ' !0 )/ ,0 .
+6"$)@ ,0$ - (*./--@  (6.  . - 0) +-* .* ()0'= . )  .-$* $.+*) -  0) $/*- 

444;&".*/4;/ 25 444;&".*/4;/ 26

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

-#$1*. '.#@ !*-/0)( )/ =  $*  ' +*+0'-$  .

= . #) +0'$* )0( -*.. !*-/0)( )/ = '. .,0$). - *) . .*) 0)*  '*. - 0-.*. (6. .*'$$/*. +*- '*.
# --($ )/.
+-
- -
'*.
-#$1*. .swf )  .-$*.? $. 9*- . 2  4 +*- .* . #)  !$)$*   ).  /7)$. +- (*./--'.@ . /7)$. .
'.$!$)
)?

.

 ) -/*- K#//+?II222@.$!-" ) -/*-@*(I2$5-@#/('L ?
+'$$:)
2 
,0
" ) -

!*-(
-6+$
4
. )$''
'
-#$1* .swf 
+-/$-

0)
!0 )/

/$+*
-0 4+
*'0$*) .
..
)  4
,0
)*
0/$'$5)
$(6" ) .@
K 3/ ).$:) .ttfL@
*'0$*) .
..
)  4
,0
0/$'$5)
$(6" ) .@

.

*)/
(  - K#//+?II$"$/'- /-*"- @*(I-*% /.I.$!-*)/(  -IL ?
*'0$*) .
..
)
1-$+/@
+'$$:)

.-$/*-$*
,0
" ) -
'
-#$1* .swf 
+-/$-

'
!0 )/
. ' $*)@
 -($/
9$-
!6$'( )/
/**.
'*.
-/ - .
.+ $' .
 . *.@
 ,0$ -
'
0.*

0) . .*'0$*) . .. 3'0.$1( )/ )  4 ,0 )* 0/$'$5) $(6" ) . *($))  4 
+-*"-(
3/ -)*
''(* swfmill 4
 '
!-( 2*-&
@
1 -.$:)
U@S@ +- enga–ar '
*%*
 '
0.0-$*
4
# -'
- -
,0
'
.,0$)
.
- *) @

3/ ).$:)
+-
$)/ "--
.


)
- ( 1 - K#//+?II222@/ )*-(@*-"I ' /-0* *).$./ ) 9$- 1-$*. ' ( )/*. 04 '*)"$/0 $.($)04 +-*"- .$1( )/ +-
*0( )/@+#+C$O*^ZSL ?
3/ ).$:)
+-
'
*)*$*
)/*-)*

 .--*''*

.$/$*. - - 0) + -!$' 0-1*@  .$"0$ )/ $(" ) (0 ./- ' - .0'/* !$)'  ./ /7)$ K$5,0$ -L=
2 
- (2 1 -@
 -($/
*)!$"0--
/*.
'.
*+$*) .

.


!*-(
1$.0'
4
-  ' );( -*  ' ( )/*. )  .-$*. +- *). "0$-'* K )/-*L 4 0)  /'' (+'$*  0)
0/*(6/$( )/
'*.
)' .

'*.
-#$1*.  4
1-$+/
)  .-$*.@ .,0$)
K - #L?

1.9. Esquinas redondeadas

' /0' ./6)-  U@T *'$"  ,0 /**. '*. *- .  '*. ' ( )/*. . ) - /)"0'- .@
./ '$($/$:) . 0)  '. (6. -$/$. +*- '*. $. 9*- .= 4 ,0 ' . $(+$ - - *- .
0-1*.
*
- *) *.
,0
.
+/ )
( %*-

.0.
$. 9*.@

 !0/0- 1 -.$:)  V $)'04 1-$. +-*+$  . +-  !$)$- *- . - *) *.@ 
+-*+$  border-radius ./'  ' ($.( 0-1/0- ) /*. '. .,0$). 4 /($7) .
 !$) ) '. +-*+$  . border-top-right-radius= border-bottom-right-radius=
border-bottom-left-radius= border-top-left-radius +- ./'  - ' 0-1/0-  
.,0$)@

)  +-*+$  .   $)$- *'$"/*-$( )/ 0) ( $ 4 . +0  $)$- " 1.
C;I;
/-1"(/
.*(/
./
*(

6
/"(
"' (/
>./1&0*
"(&
6
0&&

+'*
*+$*)'( )/ 0) . "0) ( $@ 0)* . $)$ 0) .*' ( $= ' .,0$) . $-0'- 4 /
*(/" 1?
.0 -$* . $"0'  ' ( $ $)$@ 0)* . $)$) *. ( $.= ' .,0$) . '8+/$=
.$ )*
'
+-$( -
( $
'
-$*
#*-$5*)/'

'
'$+.
4
'
. "0)
( $
.0
-$*
1 -/$'@  *)/$)0$:) . (0 ./- ' :$"*  4  )  .-$*. +- - - .,0$). - *) .
*)  4
.$)
$(6" ) .?
0),0 !'/) (0#*. 9*. #./ ,0 . +0'$,0 ' 1 -.$:)  !$)$/$1   V= '*. )1 "*- .
<div id="contenedor">
,0 (6. . +- *0+)  '*. ./6)- . 4 $)'04 ) .*+*-/ +- - - .,0$). - *) .@
<b class="esquinas_superiores">
' .$"0$ )/ % (+'* (0 ./- :(* - - .,0$). - *) . *) '*. )1 "*- . !-$ 4 <b class="r1"></b>
$- !*3? <b class="r2"></b>
<b class="r3"></b>
div {
<b class="r4"></b>
-webkit-border-radius: 5px 10px; /* Safari */
</b>
-moz-border-radius: 5px 10px; /* Firefox */
}
<!-- Aqu’ se incluyen los contenidos -->
 .*'0$:) . )  V . ' (6. . )$'' 4 ' ( %*- /7)$( )/ = + -* #./ ,0 /**. '*.
<b class="esquinas_inferiores">
)1 "*- . )* $)'04) .*+*-/ +-  V= )* . +*.$' 0/$'$5- ./ /7)$ +- - - <b class="r4"></b>
.,0$).
- *) .@ <b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>

444;&".*/4;/ 27 444;&".*/4;/ 28

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

</b> <b class="spiffy1"><b></b></b></b>

</div> </div>
.esquinas_superiores, .esquinas_inferiores { .spiffy{display:block}
display: block; .spiffy *{
} display:block;
.esquinas_superiores *, .esquinas_inferiores * { height:1px;
display: block; overflow:hidden;
height: 1px; font-size:.01em;
overflow: hidden; background:#000000}
} .spiffy1{
.r1 { margin: 0 5px; } margin-left:3px;
.r2 { margin: 0 3px; } margin-right:3px;
.r3 { margin: 0 2px; } padding-left:1px;
.r4 { margin: 0 1px; height: 2px; } padding-right:1px;
border-left:1px solid #919191;
- - - 0) .,0$) - *)  *) ./ /7)$ . )  .-$* $)'0$- (0#*. ' ( )/*. border-right:1px solid #919191;
 $$*)' .@ *- . (*/$1* . 0/$'$5 ' /$,0 / <b>= ,0 # ,0 ' :$"*  .$" background:#3f3f3f}
.spiffy2{
.$ )* 16'$* 4 .0 )*(- .:'* /$ ) 0) ' /-= +*- '* ,0 0( )/ '* (8)$(* +*.$' ' /(9*
margin-left:1px;
 '
:$"*  @ margin-right:1px;
padding-right:1px;
. - "'.  )/ -$*- . # ) ,0 '*. ' ( )/*. <b> / )") .:'* 1px  '/0- 4 ,0  1 5
padding-left:1px;
. #") (6. *-/*.= 4 ,0 0( )/) .0. (6-" ) . '/ -' .  !*-( +-*"- .$1@ *$!$)* border-left:1px solid #e5e5e5;
'$" -( )/ '*. margin   ' ( )/* . +0  ) - - .,0$). *) (6. * ( )*. -$*  border-right:1px solid #e5e5e5;
01/0-@
 (6.=
/($7)
.
+0  )
- -
0-1.
.:'*
)
0)

'.
.,0$).@ background:#303030}
.spiffy3{
' +-$)$+' +-*' (  ./ /7)$ . ,0 )* . . )$''* ($- ' !*-(  ' .,0$) margin-left:1px;
margin-right:1px;
- *) 
4
,0
'
0-1
.
/)
.'*)
,0
'*.
0.0-$*.
+0  )
+- $-'*@
border-left:1px solid #303030;
 .*'0$:) ' . "0)* +-*' ( *).$./ ) - - 0-1. ,0 0/$'$ ) ' /7)$  ' anti-aliasing border-right:1px solid #303030;}
.spiffy4{
+- .01$5- .0. *- .@ ./ /7)$ )* . . )$''= 4 ,0 .   / ) - ) 0 )/ ' -$* 
border-left:1px solid #919191;
0-1/0-=
'
*'*-

'
0-1
4
'
*'*-

!*)*
 '
' ( )/*
*)/ ) *-@ border-right:1px solid #919191}
.spiffy5{
'"0). +'$$*) . 2  " ) -) 0/*(6/$( )/ ' :$"*  4  )  .-$*.  +-/$- 
border-left:1px solid #3f3f3f;
'*. *'*- . 4 ' -$*  0-1/0-  . *@  *)/$)0$:) . (0 ./- ' :$"*  4  border-right:1px solid #3f3f3f}
" ) -*.
+*-
'
/7)$ +$!!4
*-) -. K#//+?II222@.+$!!4*-) -.@*(IL ? .spiffyfg{
background:#000000}
<div>
<b class="spiffy"> *0) *-)- K#//+?II222@-*0) *-)-@*(IL . */- +'$$:) 2  ,0 + -($/ " ) --
<b class="spiffy1"><b></b></b>
0/*(6/$( )/
'
:$"*  4  )  .-$*.
+-
- -
.,0$).
- *) .
1)5.@
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
 (6.  '. .,0$). - *) . . )$''.= (0#*. $. 9*- . ,0$ - ) 0/$'$5- ) .0.
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
/-%*. .,0$). *(+' %. - .  +-/$-  $(6" ) .@ ) 1 5 (6.= ' !0/0- 1 -.$:)  V
$)'0$-6 0) +-*+$  ''( border-image +- 0/$'$5- 0',0$ - $(" ) *(* *-  0)
<div class="spiffyfg"> ' ( )/*@
<!-- Aqu’ se incluyen los contenidos -->
</div> ./ ,0 '*. )1 "*- . )* .*+*-/ )  V= ' .*'0$:) *).$./ ) +'$- '. $(6" ) .
( $)/  4
'"0)*.
' ( )/*.  .+ $'( )/
+- +-*.@
<b class="spiffy">
<b class="spiffy5"></b> ./ /7)$ - ,0$ - ) +-$( - '0"- - - '. $(6" ) .   0)  '. 0/-* .,0$).  '
<b class="spiffy4"></b> ' ( )/*@ ) 1 5 - . '. $(6" ) .= . 9 ) ' ( )/*. ) ' :$"*  @ /$'$5)*
<b class="spiffy3"></b>
=
.
(0 ./-)
'.
.,0$).
- *) .
*(*
$(6" ) .

!*)*

.*.
' ( )/*.  @
<b class="spiffy2"><b></b></b>

444;&".*/4;/ 29 444;&".*/4;/ 30

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

*. ' ( )/*.  ,0 . 9 ) +0  ) 1-$-  0) .*'0$:)  */-= + -* ) " ) -' .  (6.= ) ' (4*-8  +6"$). 2  normales= ' (4*- +-/  . [S]  ' /$ (+* .
9 )
' ( )/*. <b> +*-,0
.
0)
/$,0 /

0)
.*'
' /-?  $  '  .-"  '. $(6" ) .@ *- /)/*= 0),0 '*. (4*- . .!0 -5*. .$ (+- .
 )/-) ) - 0$- ' /$ (+*  " ) -$:) $)6($  '. +6"$).= . *).$"0 (6. 4 *)
<div id="contenedor">
<b class="superior"> ( )*.
.!0 -5*
( %*-)*
'
 .-"

'.
$(6" ) .@
<b></b>
</b>
 $  +- ( %*-- ' - )$($ )/*  0) +6"$) ,0  .-" +*- % (+'* TX $(6" ) .
<!-- Aqu’ se incluyen los contenidos --> *).$./ ) - - 0) ;)$ $(" ) "-) ,0 $)'04 '. TX $(6" ) . $)$1$0' . 4 0/$'$5- '.
<b class="inferior"> +-*+$  .   '. $(6" ) .  !*)* +- (*./--  $(" )@ ./ /7)$ . +- . )/:
<b></b> ) ' -/80'* CSS Sprites: Image SlicingÕs Kiss of Death K#//+?II222@'$./+-/@*(I-/$' .I
</b>
.+-$/ .L 4
 .
)/*) .
.
*)*
*)
'
)*(-
 sprites CSS@
</div>
' .$"0$ )/ % (+'* 3+'$ ' 0.*  '*. sprites CSS ) 0) .$/$* 2  ,0 (0 ./- ' +- 1$.$:)
*) ' :$"*  )/ -$*-= '. - "'.  )  .-$. +- (*./-- '. $(6" ) .  
( / *-*':"$

1-$.
'*'$ .
0/$'$5)*
$*)*.?
.,0$)
.*)
(04
. )$''.?
b.superior { background:url("imagenes/esquina_superior_izquierda.png") no-repeat; }
b.superior b { background:url("imagenes/esquina_superior_derecha.png") no-repeat; }

b.inferior { background:url("imagenes/esquina_inferior_izquierda.png") no-repeat; }

b.inferior b { background:url("imagenes/esquina_inferior_derecha.png") no-repeat; }

*- ;'/$(*= 0)* '. .,0$). - *) . )* 0/$'$5) $(6" ) .= . (6. *)1 )$ )/ 0/$'$5-
.*'0$*) . .. ) 1-$+/@  +-$)$+' 1 )/%  ./ /7)$ . ,0 )* . )  .-$*
ensuciar  !*-( + -() )/ ' :$"*  *)   ).  ' ( )/*.  /$+* <div> * <b>@
0)* ' 0.0-$* -" ' +6"$)= ' :$"* 1-$+/ -  ) . (*( )/* /**. '*. ' ( )/*.
)  .-$*.
4
'*.
9

!*-(
$)6($
'
:$"*  
'
+6"$)@

 (6.= ' */- "-) 1 )/%  '. .*'0$*) . .. ) 1-$+/ . ,0 9 )   ). 
' ( )/*. +- - - *- . - *) *. /) + -! /*. ,0 .*) $)$./$)"0$' .  '*. ,0 .
+0  )
- -
*)
$(6" ) .@

'"0).  '. .*'0$*) . .. ) 1-$+/ (6. *)*$. .*) jQuery Corner
K#//+?II( /#1$)@*(I%,0 -4I%,A*-) -@#/('L = jQuery Curvy Corners K#//+?II'0 A)1$'@*(I " 1.
C;J;
/,0*

&
,.3"/"+(
'0*.*&+ "
'*/0.
*(
"*(*/
-#$1 .I)/$A'$. A-*0) A*-) -.A2$/#A%,0 -4L = jQuery Corners K#//+?II222@/'.@*(I
 .*'0$:) /-$$*)' +- - - ' +6"$) )/ -$*- *).$./ ) 0/$'$5- 0/-* ' ( )/*. <img>
%,0 -4@*-) -.@#/('L 4 Nifty Corners Cube K#//+?II222@#/('@$/I-/$*'$I)$!/40 I$) 3@#/('L @
)
'
:$"*  4
$.+*) -

0/-*
$(6" ) .
*-- .+*)$ )/ .

'*.
0/-*
$*)*.?
' -/80'* CSS Rounded Corners Roundup K#//+?II222@.($' 4/@*(I($*2I-#$1 .I <h3>Previsiones meteorol—gicas</h3>
SSSSWW@+#+L *(+-   ).  /7)$. +- - - .,0$). - *) . .. )  4 <p id="localidad1"><img src="imagenes/sol.png" /> Localidad 1: soleado, m‡x: 35¼, m’n:
1-$+/@ 23¼</p>
<p id="localidad2"><img src="imagenes/sol_nubes.png" /> Localidad 2: nublado, m‡x: 25¼,
m’n: 13¼</p>
1.10. Rollovers y sprites <p id="localidad3"><img src="imagenes/nubes.png" /> Localidad 3: muy nublado, m‡x: 22¼,
m’n: 10¼</p>
 ";) 1-$*. ./0$*. - '$5*. +*- #**B= #./ ' [S]  ' ( %*- ) ' - )$($ )/*  ' <p id="localidad4"><img src="imagenes/tormentas.png" /> Localidad 4: tormentas, m‡x:
 .-"  +6"$). 2   + )  ' +-/  ' '$ )/ @ ) ' -/80'* Performance Research, 23¼, m’n: 11¼</p>
Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests K#//+?II40$'*"@*(I'*"I
0),0 . 0) .*'0$:) . )$'' 4 ,0 !0)$*) (04 $ )= . /-/  0) .*'0$:)
USSYITTIU[I+ -!*-() A- . -#A+-/ATIL #**B 3+'$ ,0 " ) -- $)6($( )/ '
*(+' /( )/ $) !$$ )/ @ ' )1 "*-    .-"- 0/-* $(6" ) . $! - )/ . +-
:$"*   ' +6"$) 4 . -1$-' *0+ ' US]  ' /$ (+* /*/'   .-"  ' +6"$)@ '
(*./--
'
+6"$)=
+*-
'*
,0
 
- '$5-
0/-*
+ /$$*) .
'
. -1$*-@
[S]  ' /$ (+* - ./)/ '*. )1 "*- .  .-") '. $(6" ) .= -#$1*. 1-$+/= #*%. 
./$'*.
4
0',0$ -
*/-*
/$+*

-#$1*
)'5*@  .+07.  ' /(9*  '*. -#$1*.  .-"*.= ' );( -*  + /$$*) . - '$5. ' . -1$*-
. ' !/*- ,0 (6. + )'$5 ' - )$($ )/* ) '  .-"  +6"$). 2 @ /$'$5)* ' /7)$

444;&".*/4;/ 31 444;&".*/4;/ 32

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

 '*. sprites CSS . 1  - # - ' % (+'* )/ -$*- +- *). "0$- ' ($.(* ! /* *) 0) .*' }
#localidad4 {
$(" )
4
+*-
/)/*=
0)
.*'
+ /$$:)
'
. -1$*-@
background-position: 0 -96px;
' +-$( - +.* *).$./ ) - - 0) $(" ) "-) ,0 $)'04 '. 0/-* $(6" ) . }

$)$1$0' .@ *(* '*. $*)*. .*) 0-*.  /(9* 32px= . -  0) $(" )  32px 3 
.$"0$ )/
$(" )
(0 ./-
'*
,0
.0 
*)
'
. "0)*
+6--!*?
128px?

" 1.
C;CB;
1("*('"(0*

&
0("

&*/
/,."0/

" 1.
C;K;
.(*
1(
/,."0



,.0".

3."/
"' (/
"("3"1&/
' +6--!* /$ ) ./' $ 0) '/0-  32px= $7)/$ ' /(9*  '*. $*)*.@  .+07. 
- !$'$/- ' 0.*  ./ /7)$= /*. '. $(6" ) . $)$1$0' . *0+) ' ($.(* .$/$*  )/-* 9$- 0) padding-left ' +6--!*= . 9 ' $(" )  !*)* ( $)/ background-image@
 ' $(" ) "-) @  ./ !*-(= '*. 6'0'*. )  .-$*. +-  .+'5- ' $(" )  !*)* . - ($-  0) $(" )  */-= .:'* . )  .-$*  .+'5-  !*-( . ) )/ *
.$(+'$!$)
'
(63$(*@  . ) )/
'
$(" )
"-) @
'
.$"0$ )/
+.*
*).$./
)
.$(+'$!$-
'
:$"*  ? $ . ,0$ - (*./-- ' . "0) $(" )= .  .+'5  !*-( . ) )/ ' $(" ) "-) @ -
<h3>Previsiones meteorol—gicas</h3>  .+'5-' ) . . )/$*= . 0/$'$5) 1'*- . ) "/$1*. ) ' 1'*- $)$* ) ' +-*+$ 
<p id="localidad1">Localidad 1: soleado, m‡x: 35¼, m’n: 23¼</p> background-position@ *- ;'/$(*= *(* ' $(" ) "-) # .$* .+ $'( )/ +- +-= .
<p id="localidad2">Localidad 2: nublado, m‡x: 25¼, m’n: 13¼</p>
. ,0 '  .+'5($ )/* )  .-$* .*) 32 +83 '= +*- '* ,0 ' - "'   ./ . "0)*
<p id="localidad3">Localidad 3: muy nublado, m‡x: 22¼, m’n: 10¼</p>
<p id="localidad4">Localidad 4: tormentas, m‡x: 23¼, m’n: 11¼</p> ' ( )/*
- .0'/
)?
#localidad2 {
 '1  ' /7)$  '*. sprites CSS *).$./ ) (*./-- '. $(6" ) . ( $)/ ' +-*+$ 
padding-left: 38px;
background-image@ - (*./--  1 5 0) $(" ) $! - )/ = . 0/$'$5 ' +-*+$  height: 32px;
background-position ,0  .+'5 ' $(" )  !*)* / )$ )* ) 0 )/ ' +*.$$:)   line-height: 32px;
$(" )
$)$1$0'
 )/-*

'
$(" )
"-) ? background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
#localidad1, #localidad2, #localidad3, #localidad4 { background-position: 0 -32px;
padding-left: 38px; }
height: 32px;
line-height: 32px;  .*'0$:) *-$"$)' 0/$'$5 0/-* $(6" ) . 4 - '$5 0/-* + /$$*) . ' . -1$*-@ 
background-image: url("imagenes/sprite.png"); .*'0$:) . ) sprites CSS .:'* - '$5 0) *) 3$:) +-  .-"- 0) .*' $(" )@
background-repeat: no-repeat;
 (6.= '*. $*)*.  ' +-*4 /* )"* K#//+?II/)"*@!-  .&/*+@*-"IL ,0 . #) 0/$'$5* )
}
./ % (+'* *0+) Z@WWT 4/ . 0)* . .0() '*. /(9*.  '*. 0/-* $*)*. +*-
#localidad1 { . +-*@
*-
.0
+-/ =
'
$(" )
"-)
,0
*)/$ )
'*.
0/-*
$*)*.
.:'*
*0+
U@UV[
4/ .@
background-position: 0 0;
} *. sprites ,0 $)'04 ) /*. .0. $(6" ) . 1 -/$'( )/ .*) '*. (6. !6$' .  () %-@ $ )
#localidad2 { '
% (+'*
)/ -$*-
.
(+' 
0) sprite *)
'.
$(6" ) .
$.+0 ./.
/($7)
#*-$5*)/'( )/ ?
background-position: 0 -32px;
}
#localidad3 {
background-position: 0 -64px;

444;&".*/4;/ 33 444;&".*/4;/ 34

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

" 1.
C;CC;
,."0
*',&$*
-1
"/,*(
&/
"' (/

*.'
3.0"&
6
!*."7*(0&

+- )/ ( )/ = 0/$'$5- ./ )0 1* sprite .:'* $(+'$ ,0 ' $(" )  !*)* .    .+'5-

/($7)
#*-$5*)/'( )/ ?
#localidad1, #localidad2, #localidad3, #localidad4 {
padding-left: 38px;
height: 32px; " 1.
C;CD;
..*./
,.*1"*/
,*.
10"&"7.
1(
/,."0
*',&$*
line-height: 32px;
background-image: url("imagenes/sprite.png"); 
.*'0$:)

./
+-*' (
.
. )$''=
0),0
- ,0$ -
'";)
($*
)
'
:$"*  ?
background-repeat: no-repeat; <h3>Previsiones meteorol—gicas</h3>
} <p id="localidad1"><img src="imagenes/pixel.gif" /> Localidad 1: soleado, m‡x: 35¼,
m’n: 23¼</p>
#localidad1 { <p id="localidad2"><img src="imagenes/pixel.gif" /> Localidad 2: nublado, m‡x: 25¼,
background-position: 0 0; m’n: 13¼</p>
} <p id="localidad3"><img src="imagenes/pixel.gif" /> Localidad 3: muy nublado, m‡x: 22¼,
#localidad2 { m’n: 10¼</p>
background-position: -32px 0; <p id="localidad4"><img src="imagenes/pixel.gif" /> Localidad 4: tormentas, m‡x: 23¼,
} m’n: 11¼</p>
#localidad3 {
background-position: 0 -32px; ' :$"* )/ -$*- (0 ./- 0)*  '*. /-0*. #$/0' . +- () %- sprites *(+' %*.@ )
}
+-$( - '0"- . 9 0) $(" ) /-).+- )/  1px 3 1px  /**. '*. ' ( )/*. ( $)/ 0)
#localidad4 {
background-position: -32px -32px; /$,0 / <img>@  *)/$)0$:)=  .  . ./'  0) $(" )  !*)*   ' ( )/*
} <img> 4
.
'$($/
.0
/(9*
+-
,0
)*
 %
1 -
'.
$(6" ) .
,0
.
)0 )/-)
 -?

' +-*' (  ' sprite )/ -$*- . ,0 0)* 0) $(" ) /$ )  .0  - # *  .0 $5,0$ - #localidad1 img, #localidad2 img, #localidad3 img, #localidad4 img {
height: 32px;
*/-.
$(6" ) .=
./.
/($7)
.
1 )?
width: 32px;
background-image: url("imagenes/sprite2.png");
background-repeat: no-repeat;
vertical-align: middle;
}

#localidad1 img {
background-position: 0 0;
}
#localidad2 img {
background-position: -32px 0;
}
#localidad3 img {
background-position: 0 -32px;
}
#localidad4 img {

444;&".*/4;/ 35 444;&".*/4;/ 36

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

background-position: -32px -32px;
*. +-$)$+' . $)*)1 )$ )/ .  '*. sprites CSS .*) ' +* !' 3$$'$ ,0 *!-  K9$- *
}
(*$!$-
0)
$(" )
$)$1$0'
)*
.
$)( $/*L
4
'
.!0 -5*
)  .-$*
+-
- -
' sprite@
/$'$5- sprites CSS . 0)  '. /7)$. (6. !$ . +- ( %*-- '*. /$ (+*.   .-" 
!*-/0)( )/ = 3$./ ) +'$$*) . 2  *(* CSS Sprite Generator
'. +6"$). 2  *(+' %.@
 .$"0$ )/ $(" ) (0 ./- 0) sprite *(+' %* ,0 $)'04 UWT
K#//+?II.+-$/ " )@2 .$/ A+ -!*-() @*-"IL ,0 " ) -) ' sprite  +-/$-  0) -#$1*
$*)*.
 ' +-*4 /*
)"* K#//+?II/)"*@!-  .&/*+@*-"IL 4
.:'*
*0+
WU
?

*)
/*.
'.
$(6" ) .
$)$1$0' .@
 - *( )$:) (6. $(+*-/)/ 0)* . /-% *) '. +-*+$  . /$+*"-6!$.  
 +-*+$  font-size + -($/ 0/$'$5- 0',0$ -
 .$"0$ )/ 1 -.$:)  ' *0( )/* KTechniques for WCAG 2.0 K#//+?II222@2V@*-"II
IL L ;) . )0 )/- ) +-* .*  '*-$:)= + -* .0 *--*-  /-%*
" 1.
C;CE;
,."0
*',&$*
-1
"(&16
DCB
"*(*/
(
1(
/*&
"' (
 (4*-8  .$/$*. 2  +-*! .$*)' . 0/$'$5) sprites +- (*./-- .0. $(6" ) .  *-)*@
  (6.  ( %*-- '  .$$'$  '*. *)/ )$*.  / 3/*= '. 0)$ .  ( $ - '/$1.
.$"0$ )/
$(" )
(0 ./-
' sprite  '
.$/$*
2 
*00 ?
 1 )/%  ./'  - ' /(9*  ' /-  ' <body>  . !*-( . ,0 #*- . +0  )
" 1.
C;CF;
,."0
10"&"7*
,*.
&
/"0"*
4

*11
444;&".*/4;/
*(+-$($*
)
!*-(/*

1.11. Texto
1.11.1. Tama–o de letra
./6 - '$*) *) ' /(9*  ' ' /-@
 '. )0 1 0)$ .  ( $  !$)$. +*-  +- ./'  - ' /(9*  ' ' /-@ $)
(-"*=
'
- *( )$:)
.
0/$'$5-
;)$( )/
'.
0)$ .
- '/$1. % 4 em@
 # #*= ' *0( )/* CSS Techniques for Web Content Accessibility Guidelines 1.0
K#//+?II222@2V@*-"IITSAA IL '*-* +*- ' *-")$.(* V - *($ )
0/$'$5- .$ (+- .. 0)$ .  ( $ +- ( %*-- '  .$$'$  '*. *)/ )$*. 2 @
USA
- *"
3/( )/
'.
($.(.
- *( )$*) .
)
'*
,0
.
- !$ -
'
/ 3/*@
% 4 em # ) ,0 '. +6"$). . ) (6. !' 3$' . 4 . +/ )  0',0$ - ( $* 4 $.+*.$/$1* .$)
+ ). / ) - ,0 - '$5- (*$!$$*) .@  (6.= .$ . 0/$'$5) '. 0)$ .  ( $ - '/$1.
.
+*.$'
(*$!$-
/**.
'*.
/(9*.

' /-
 '
.$/$*

!*-(
*).$./ )/

$)( $/@
0),0 /**. '*. $. 9*- . 2  +-*! .$*)' . *)* ) ./ - *( )$:) 4 0/$'$5) .:'* '.
0)$ . % 4 em +- ./'  - /**. .0. /(9*.  ' /-= '*. $. 9*- . ,0 *($ )5) 
/-%- *)  )0 )/-) $!$0'/ . +- *(+- ) - ./. 0)$ . 4 +- !$ - ) 0/$'$5- '
0)$ px@
$ /$ ) . $!$0'/ . +- *(+- ) - ' 0)$ em 4 +- !$ - . ./'  - '*. /(9*.  ' /-
( $)/ +83 ' .= +0  . 0/$'$5- ' .$"0$ )/ /-0*@ *(* /**. '*. )1 "*- . ./'  ) 0)
/(9*

' /-
+*-
 ! /*
,0$1' )/
 16px=
.$
.
0/$'$5
'
.$"0$ )/
- "' ?
body {
font-size: 62.5%;
}
' /(9*  ' /-  ' ' ( )/* <body>= 4 +*- /)/* ' /(9*  ' /- .  ' - ./* 
' ( )/*.  ' +6"$)= . ./'  *(* ' 62.5%  ' /(9* +*-  ! /*@ $ . '0' '
- .0'/*
 16px 3 62.5% .
*/$ ) ) 10px@
0/$'$5- em ($ )/-. . +$ ). ) px@ ) ! /*= '. .$"0$ )/ . - "'. (0 ./-) ' /-0* ) '
+-6/$?
37 444;&".*/4;/ 38

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
C;
("/
"',./"("&/

body { zoom: 1; /* necesario para activar la propiedad hasLayout */

font-size: 62.5%; }
}
1.11.2.2. Texto con relleno gradiente o degradado
h1 {
font-size: 2em; /* 2em = 2 x 10px = 20px */ *($))* ' / 3/* *) $(6" ) . . ($/-).+- )/ .= . +0  ) '*"-- !6$'( )/ ! /*.
}
"-6!$*. +-*+$*.  '*. +-*"-(.  $. 9*@  *)/$)0$:) .  /'' :(* - - 0) / 3/* ,0
p {
font-size: 1.4em; /* 1.4em x 10px = 14px */
(0 ./-
.0
*'*-
)
!*-(

 "-*
*
"-$ )/ @
}
' /-0* *).$./ ) (*./-- +*- )$(  ' / 3/* 0) $(" ) . ($/-).+- )/ ,0 .$(0' '
*(* ' /(9* . .*) 10px= 0',0$ - 1'*-  em 04 - ! - )$ .  ' ' ( )/* <body> ! /*
 "-*@

.$"0$ )/
$(" )
(0 ./-
'
.,0 (

'
.*'0$:)?
 
(0'/$+'$-.
+*- 10=
+*-
'*
,0
.
+0 
/-%-
*) em ($ )/-.
.
+$ ).
) px@

1.11.2. Efectos gr‡ficos

1.11.2.1. Texto con sombra

*./-- / 3/* *) .*(- . */-  '. '$($/$*) .   ,0 (6. $--$/)  '*. $. 9*- .@ )
- '$= ' 1 -.$:)  U $)'08 0) +-*+$  ''( text-shadow +- (*./-- / 3/*. *)
.*(-@  1 -.$:)  U@T ,0 0/$'$5) /**. '*. )1 "*- .  #*4 ) 8 '$($) ./
" 1.
C;CG;
*/0.(*
050*
3(7*
."/

1(
"' (
/'"0.(/,.(0
+-*+$ =
0),0
.
10 '1

- 0+ --
)
'
!0/0-
1 -.$:)  V@
) ' .,0 ( )/ -$*-= ' $(" ) . ($/-).+- )/ . (0 ./- ) ' $)/ -$*-  0) 0-* 
) '*. )1 "*- . ,0 (6. . +- *0+) +*- '*. ./6)- . 4 . +*.$' 0/$'$5- ' +-*+$ 
*'*-
) "-*
+-
+* -
1$.0'$5-
*-- /( )/
.0
.+ /*
- '@
text-shadow   V?
$ . $.+*) +*- % (+'*  0) /$/0'-  . $:) <h1>= ' +-$( - +.* *).$./ ) 9$- 0)
h1 {
color: #000; ' ( )/*  $$*)'
K)*-('( )/
0) <span>L
+-
(*./--
'
$(" )
. ($/-).+- )/ ?
text-shadow: #555 2px 2px 3px;
<!-- Elemento original -->
}
<h1>Lorem Ipsum</h1>
 .$)/3$.  ' +-*+$  text-shadow *'$"  $)$- *. ( $. 4 + -($/ ./'  - 
<!-- Elemento preparado para mostrar texto avanzado -->
!*-( *+$*)' 0) / - - ( $ 4 0) *'*-@ . *. ( $. *'$"/*-$. .*) <h1><span></span>Lorem Ipsum</h1>
- .+ /$1( )/ '  .+'5($ )/* #*-$5*)/' 4 1 -/$'  ' .*(- - .+ /*  ' / 3/*@ 
/ - - ( $ *+$*)' $)$ '* )8/$* * *--*.* ,0 . 1 ' .*(- 4 ' *'*- ./'  ) 1 5 +- +-* ' :$"*  = ' /-0* *).$./ ) (*./-- ' $(" ) . ($/-).+- )/
$- /( )/
'
*'*-

'
.*(-@ *(* $(" )  !*)*  ' ' ( )/* <span>@  (6.= . ' ( )/* <span> . (0 ./- +*-
 ')/
 '
*)/ )$*

/ 3/*
 '
' ( )/* <h1> 4
*0+)*
/*
.0
'*)"$/0?
. ;'/$(. 1 -.$*) .  '*. )1 "*- . $- !*3= !-$ 4 + - 4 .*+*-/) ' +-*+$ 
text-shadow=
0),0
)*
.$ (+-

!*-(
!$ '

'
 .-$+$:)
 '
!0/0-*
./6)-  V@ h1 {
position: relative;
*- */- +-/ = ' )1 "*-
)/ -) / 3+'*- - )* $)'04 ' +-*+$  text-shadow= + -* }

$)'04 0) ( )$.(* +-*+$* ,0 . +0  0/$'$5- +- - - 0) ! /* +- $*@ ) 1 5 (6.=
h1 span {
' .*'0$:) . . ) ' 0.*  '*. !$'/-*. 
)/ -) / 3+'*- - K#//+?II(.)@($-*.*!/@*(I position: absolute;
)A0.I'$--4I(.XVU[XVK@[XL@.+3L @ *)- /( )/ = ' !$'/-* .#*2 display: block;
K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4I(.XVVS[YK@[XL@.+3L . +0  (+' - +- background: url("imagenes/gradiente.png") repeat-x;
width: 100%;
- -
0)
.*(-
.*-
0',0$ -
' ( )/*=
+*-
% (+'*
0)
*)/ )$*

/ 3/*@
height: 31px;
 .$"0$ )/ - "'  (0 ./- ' !$'/-* )  .-$* +- - - 0) ! /* .$($'- '  ' % (+'* }

)/ -$*-? - *). "0$- $! - )/ . *. ) '  "-*  ' / 3/*= . (*$!$ ' +*.$$:)  '
h1 { $(" )

!*)*
( $)/
'.
+-*+$  . background * background-position@
filter: shadow(color=#555555, direction=135, strength=2);

444;&".*/4;/ 39 444;&".*/4;/ 40

3(7* ,#01&*
C;
("/
"',./"("&/ 
3(7* ,#01&*
D;
1(/
,.0"/

/$'$5)* ./ ($.(* /-0* + -* *) */-. $(6" ) .= . +0  ) *). "0$- ! /*. /)
.+ /0'- . *(* '*. ,0 . +0  ) 1 - ) '*. % (+'*.  ' -/80'* CSS Gradient Text
K#//+?II222@2  .$") -2''@*(I (*I..A"-$ )/A/ 3/IL @
Cap’tulo 2. Buenas pr‡cticas
2.1. Inicializar los estilos
0)* '*. )1 "*- . (0 ./-) 0) +6"$) 2 =  (6.  +'$- '. #*%.  ./$'*  '*.
$. 9*- .=
.$ (+-
+'$)
*/-.
*.
#*%.

./$'*.?
'
 '
)1 "*-
4
'
 '
0.0-$*@

 #*%  ./$'*.  ' )1 "*- . 0/$'$5 +- ./'  - ' ./$'* $)$$' +*-  ! /*  /**. '*.
' ( )/*.  ? /(9*.  ' /-=  *-$:)  ' / 3/*= (6-" ) .= /@ ./ #*%  ./$'*.
.$ (+- . +'$  /*. '. +6"$). 2 = +*- '* ,0 0)* 0) +6"$) )* $)'04 )$)"0) #*%
 ./$'*. +-*+$= ' .+ /* *) ' ,0 . (0 ./- ) ' )1 "*- .    ./ #*%  ./$'*.
 '
)1 "*-@

*- .0 +-/ = ' #*%  ./$'*.  ' 0.0-$* . ' ,0 +0  +'$- ' 0.0-$* ( $)/ .0
)1 "*-@ 0),0 ' $)( ). (4*-8  0.0-$*. )* 0/$'$5 ./ -/ -8./$= ) / *-8 .
+*.$' ,0 '*. 0.0-$*. ./' 5) ' /$+*  ' /-= *'*- 4 /(9*  '*. / 3/*. 4 0',0$ - */-
+-*+$   
'*.
' ( )/*.

'
+6"$)
,0
(0 ./-
'
)1 "*-@

'
*- )
)
'
,0
.
+'$)
'.
#*%.

./$'*
.
'
.$"0$ )/ ?

" 1.
D;C;
.(
(
&
-1
/
,&"(
&/
".(0/
!*$/

/0"&*/

*- /)/*= '. - "'. ,0 ( )*. +-$*-$ /$ ) ) .*) '.  '   '*. )1 "*- .= 4 ,0 .*)
'. +-$( -. ,0 . +'$)@  *)/$)0$:) . +'$) '. - "'.  !$)$. +*- '*. 0.0-$*. 4 +*-
;'/$(* . +'$) '. - "'.   !$)$. +*- ' $. 9*-= ,0 +*- /)/* .*) '. ,0 (6.
+-$*-$
/$ ) )@

Nota
 "(
&
,&.
./.3 !important ,.
*(0.*&.
&
,."*."

&/
&."*(/

&/
".(0/
!*$/

/0"&*/;
/
. &/  -1
"(&16(
&
,&. !important 0"((
,."*."
/*.
&
./0*

&/
. &/ 8
"(,("(0'(0
&
*.(
(
&
-1
/
"(&16(
*
"((
&/
. &/;

( /*  " 1&8 &/ . &/ !important  &*/ 1/1."*/ /*( '/ "',*.0(0/ -1 &/ . &/
!important & "/)*.; ."/  /0 .0.#/0"8 /" 1( 1/1."* /1. ""("/ 3"/1&/8 ,1
.. 1( !*$  /0"&*/  *( . &/  0",* !important *( & / 1."  -1 & (3 *. /"',.
,&".
//
. &/
,*.
("'

1&-1".
*0.
. &
"("
,*.
&*/
"/)*./;

' +-$)$+' +-*' (  '. #*%.  ./$'*  '*. )1 "*- . . ,0 '*. 1'*- . ,0 +'$) +*-
 ! /* .*) $! - )/ . )  )1 "*-@ 0),0 /**. '*. )1 "*- . *$)$ ) ) '"0)*.
1'*- . $(+*-/)/ . K/$+*  ' /- serif= *'*-  ' /- ) "-*= /@L +- . )/) $! - )$. )
1'*- . /) $(+*-/)/ . *(* '*. (6-" ) . 1 -/$' . Kmargin-bottom 4 margin-topL  '*.

444;&".*/4;/ 41 444;&".*/4;/ 42

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

/8/0'*.  . $:) K<h1>= @@@ <h6>L= ' /0'$:) $5,0$ -  '*. ' ( )/*.  '. '$./. +- $' .@  .*'0$:)  ./ +-*' ( . (04 . )$'' 4 *).$./ ) *--- * resetear '*.
Kmargin-left * padding-left . ";)
'
)1 "*-L
4
'
/(9*

'8) 
 '
/ 3/*
Kline-heightL@ ./$'*.
,0
+'$)
+*-
 ! /*
'*.
)1 "*- .@

 *)/$)0$:) . (0 ./- ' :$"*   0) +6"$)  % (+'* 4 . "0$( )/ = 0) )  '. !*-(. (6. . )$''.  ) 0/-'$5- '"0)*.  '*. ./$'*.  '*. )1 "*- . *).$./
$(" )
,0
(0 ./-
:(*
'
1$.0'$5)
'*.
)1 "*- .

)/ -) /
3+'*- -
4
$- !*3? ) '$($)- ' (-" ) 4 - '' )*  /**. '*. ' ( )/*.  ' +6"$) +- ./'  -'*.
+*./ -$*-( )/

!*-(
$)$1$0'?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> * {
<html xmlns="http://www.w3.org/1999/xhtml"> margin: 0;
<head> padding: 0;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> }
<title>Reset</title>
</head> 0),0 ' - "'  )/ -$*- . # 0/$'$5*  . # (0#*. 9*.= . /-/  0) .*'0$:)
(04 -0$( )/-$ 4 '$($/@  .*'0$:) *(+' / *).$./ ) - - 0) #*%  ./$'*.  ,0
<body>
) 0/-'$ /**. '*. ./$'*. ,0 +'$) +*-  ! /* '*. )1 "*- . 4 ,0 +0  ) ! /- '
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Consectetuer adipiscing elit</h2>
.+ /*
1$.0'

'.
+6"$).@
./
/$+*

#*%.

./$'*.
.
.0 ' )
''(- "reset CSS"@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
 *)/$)0$:) . (0 ./- ' #*%  ./$'*. reset.css +-*+0 ./ +*- ' $. 9*- -$  4 -
euismod tincidunt ut consectetuer adipiscing elit</p>
<ul> K#//+?II( 4 -2 @*(IL ?
<li>Elemento 1</li>
/* v1.0 | 20080212 */
<li>Elemento 2</li>
<li>Elemento 3</li>
html, body, div, span, applet, object, iframe,
</ul>
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
<table summary="Lorem Ipsum">
a, abbr, acronym, address, big, cite, code,
<caption>Lorem Ipsum</caption>
del, dfn, em, font, img, ins, kbd, q, s, samp,
<tr>
small, strike, strong, sub, sup, tt, var,
<th>Celda 1-1</th>
b, u, i, center,
<th>Celda 1-2</th>
dl, dt, dd, ol, ul, li,
</tr>
fieldset, form, label, legend,
<tr>
table, caption, tbody, tfoot, thead, tr, th, td {
<td>Celda 2-1</td>
margin: 0;
<td>Celda 2-2</td>
padding: 0;
</tr>
border: 0;
</table>
outline: 0;
</body>
font-size: 100%;
</html>
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
" 1.
D;D;
"/1&"7"+(

1(
'"/'
, "(
(
&*/
(3 *./

(0.(0
5,&*..
6
".*5 q:before, q:after {
content: '';
*(* /*. '. #*%.  ./$'*  '*. )1 "*- . .*) $! - )/ .= 0)* 0) $. 9*- +-0  content: none;
.0. ./$'*. .*- $! - )/ . )1 "*- .= . *(;) )*)/--. *) $! - )$. 1$.0' . }

444;&".*/4;/ 43 444;&".*/4;/ 44

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

/* No olvides definir estilos para focus */
+ - K#//+?II222@*+ -@*(I*2)'*IL ?
$.+*)$'
+-
.$./ (.
*+ -/$1*.
:focus {
$)*2.=
=
$)03
4
)
(;'/$+' .
$$*(.@
outline: 0;
}
!-$ K#//+?II222@++' @*(I .I.!-$IL ?
$.+*)$'
.*'( )/
+-
.$./ (.
*+ -/$1*.
$)*2.
4
@
/* No olvides resaltar de alguna manera el texto insertado/borrado */
ins {  .+ /* ' )1 "*-
)/ -) / 3+'*- -= ' (4*-8  $. 9*- . /-%) ) )/*-)*.
text-decoration: none;
$)*2. ) '*. ,0 4 ./6 $)./'* +*-  ! /*@ $ /$ ) . ' !*-/0)  /-%- *) 0) .$./ (
}
del { *+ -/$1* /$+* $)03= +0  . $)./'- 1-$. 1 -.$*) . 
)/ -) / 3+'*- - ( $)/ '
text-decoration: line-through; +'$$:)
.W $)03 K#//+?II222@//)&@*(@-I$ .W'$)03I+" I$)O" L @ ($7) .
} +*.$' $)./'- 1-$. 1 -.$*) . 
)/ -) / 3+'*- - ) '*. .$./ (. *+ -/$1*.   
"-$.

'
+'$$:) $ .W*.3 K#//+?II222@&-*) ) -"@*-"I$ .W*.3IL @
/* En el c—digo HTML es necesario a–adir cellspacing="0" */
table {
border-collapse: collapse; 2.2.2. Probar el dise–o en todos los navegadores
border-spacing: 0;
} ) '"0). *.$*) . )* . .0!$$ )/ *) +-*- '*. $. 9*. ) '*. )1 "*- . (6. 0/$'$5*.=
4 ,0 ' '$ )/ ,0$ - ,0 .0 .$/$* * +'$$:) 2  . 1  *-- /( )/ ) (0#*. */-*.
' +-*+$* -$  4 - - 0 - ,0 ' #*%  ./$'*. )/ -$*- . .:'* 0) +0)/*  +-/$ ,0 )1 "*- .@  (6.= ) */-. *.$*) . ' $. 9*- )$ .$,0$ - $.+*)  '*. )1 "*- .
  . - +/* +*-  $. 9*- #./ */ ) - '*. - .0'/*.  . *.@ /$'$5- 0) #*% (6.
0/$'$5*.
+*-
'*.
0.0-$*.=

!*-(
,0
)*
+0 
+-*-
*-- /( )/
.0.
$. 9*.@
 ./$'*.  /$+* reset . 0)  '. 0 ). +-6/$. $(+- .$)$' . +- '*. $. 9*- . 2 
+-*! .$*)' .@ !*-/0)( )/ = 3$./ 0) +'$$:) 2  "-/0$/ ,0 + -($/ .*'0$*)- /**. ./*.
+-*' (.@  +'$$:) -*2. -.#*/. K#//+?II-*2. -.#*/.@*-"L +-0  ' +6"$) $)$ )
2.2. Comprobar el dise–o en varios navegadores 1-$. 1 -.$*) . $! - )/ .   )1 "*-= -  0) $(" )  :(* . 1 ' +6"$) ) 
0)*

''*.
4
)*.
(0 ./-
.
$(" )@

2.2.1. Principales navegadores 0),0 ' +-* .* . ' )/* 4 (0#* ( )*. !' 3$' ,0 +-*- ' +6"$) - '( )/ ) 
)1 "*-= ' - .0'/* + -($/ ' $. 9*- *(+-*- .$ .0 /-%* . 1 *-- /( )/ )
)  '. +-6/$. $(+- .$)$' .  '*. $. 9*- . 2  +-*! .$*)' . *).$./ ) +-*- .0
(0'/$/0  )1 "*- . 4 .$./ (. *+ -/$1*.@ ) ' /0'$= -*2. -.#*/. *(+-0  '
/-%* ) 1-$*. )1 "*- . $! - )/ .@  ./ !*-(= ' $. 9*- +0   .0-$- '*.
.+ /*

'.
+6"$).
)
W
.$./ (.
*+ -/$1*.
4
ZU
)1 "*- .
$! - )/ .@
--*- .

.0
/-%*
4
/($7)
'*.
--*- .
0.*.
+*-
'*.
+-*+$*.
)1 "*- .@

' );( -*  )1 "*- . 4 1 -.$*) . $! - )/ . ,0 .   ) +-*-  + )   2.2.3. Integrar Internet Explorer en Firefox
$. 9*-@ ) ' .* $ '= ' $. 9*- *)* ./8./$.  0.*  '*. )1 "*- . ,0
'"0)*. $. 9*- . +-0 ) *)/$)0( )/ .0. $. 9*. ) '*. )1 "*- .
)/ -) / 3+'*- -
0/$'$5) '*. 0.0-$*. +-   - ' .$/$* * +'$$:) 2  ,0 ./6 $. 9)*@ ) 0 )
4 $- !*3 4  .+07. '*. *(+-0 ) ) ' - ./*  )1 "*- . +- *-- "$- '*. ;'/$(*. --*- .@
+-6/$ *).$./ ) +-*- '*. $. 9*. ) ,0 ''*. )1 "*- . 4 1 -.$*) . ,0 .0( ) 0) \S]
$
./
.
/0
.*=
+0  .
( %*--
/0
+-*0/$1$
"-$.

0)
3/ ).$:)

$- !*3@

0*/

( -*@

  K#//+.?II*).@(*5$''@*-"I .AI!$- !*3I*)ITWT\L . 0) 3/ ).$:) ,0 . $)./'
0)* )* . $.+*)  ./8./$.  0.* * ' $. 9* . +- 0) .$/$* 2  *(+' /( )/
) ' )1 "*- $- !*3 4 # ,0
)/ -) / 3+'*- - . $)/ "- ) $- !*3@ ) 1 5 $)./'=
)0 1*= .   +-*- ' $. 9* ) '*. )1 "*- . (6. 0/$'$5*. +*- '*. 0.0-$*. ) " ) -'@
./
3/ ).$:)
+ -($/
1 -
'.
+6"$).
*)

)/ -) /
3+'*- -
 )/-*

$- !*3@
0),0 )* 3$./ )$)"0) ./8./$ *(+' /( )/ !$' 4 '*. - .0'/*. 1-8) (0#*  0)
+8.  */-*= ) " ) -' '*. .$"0$ )/ . )1 "*- . 4 1 -.$*) . .0() (6.  ' \S]  0*/  0),0 - .0'/ .*-+- ) )/ =
  # ,0 '. +6"$). ) $- !*3 . +0 ) 1 - ( $)/
( -*?

)/ -) /
3+'*- -
Y=

)/ -) /
3+'*- -
Z=
$- !*3
U=
$- !*3
V=
!-$
V
4
+ -
\@
)/ -) / 3+'*- -=  !*-( ,0 '*. $. 9*- . )* /$ ) ) ,0 ($- *)./)/ ( )/ 
)1 "*-
4
+*-
/)/*
0( )/
*).$ -' ( )/
.0
+-*0/$1$@
) +-$( - '0"-= '*. $. 9*- . 2  +-*! .$*)' . $.+*) )  /**. '*. )1 "*- .
+-$)$+' . $)./'*. ) .0. ,0$+*.  /-%*@ *- '* /)/*= .$ )* '* #. # #* 4=  .-" 2.2.4. Diferentes versiones de Internet Explorer
$)./'
'*.
.$"0$ )/ .
)1 "*- .?
' +-$)$+' +-*' (  '*. $. 9*- . 2  ,0 ,0$ - ) +-*- .0 /-%* ) $! - )/ .

$- !*3 K#//+?II222@(*5$''@*(I )AI!$- !*3I''@#/('L ?
$.+*)$'
+-
.$./ (.
)1 "*- . 4 1 -.$*) . . ' $(+*.$$'$  $)./'- 1-$. 1 -.$*) .  ' )1 "*-
)/ -) /
*+ -/$1*.
$)*2.=
=
$)03
4
)
(6.

WX
$$*(.@
3+'*- -
)
'
($.(*
.$./ (
*+ -/$1*@

444;&".*/4;/ 45 444;&".*/4;/ 46

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

0),0 ' (+- . $-*.*!/= - *- 

)/ -) / 3+'*- -= .$"0 .$) - .*'1 - ./ +-*' (=
'1$-.
*(+' /( )/

)1 "*- .
'$($/*.
*(*

)/ -) /
3+'*- -
Y
4
Z=
. #) +0'$* .*'0$*) . )* *!$$' . +- $.+*) -  1-$. 1 -.$*) . 
)/ -) / 3+'*- - $. 9)*
'*.
.$/$*.
2 
.:'*
+-
'*.
)1 "*- .
(6.
(* -)*.@
)
'
($.(*
.$./ (
*+ -/$1*@
 *)/$)0$:) . (0 ./- ' ( %*- +-*"- .$1 ) ' +-6/$ ( $)/ 0) % (+'* +0'$* )
 +-$( - .*'0$:) +-*+0 ./ !0 ' Browser Archive K#//+?II-*2. -.@ 1*'/@*-"IL = 0) ' -/80'* Progressive Enhancement with CSS 3: A better experience for modern browsers
- +*.$/*-$*  )1 "*- .  . ' ,0 . +0  )  .-"- 1 -.$*) . )/$"0.    ).  K#//+?II 1@*+ -@*(I-/$' .I1$ 2I+-*"- ..$1 A )#) ( )/A2$/#A..AVAA IL @
)1 "*- . $! - )/ .= )/- ''*.
)/ -) / 3+'*- -@ ( )/' ( )/ # (0#* /$ (+* ,0
' +-*+:.$/*  ' % (+'* . - - 0) ( );  )1 "$:) ,0 . 1 (6. *)$/* 0)/* (6.
)* . 9 ) )0 1. 1 -.$*) .= +*- '* ,0 ' ;'/$( 1 -.$:) $.+*)$' 
)/ -) / 3+'*- - ) '
(* -)* .  /0 )1 "*-@ *(* . #$/0'= ' :$"*   ' ( ); . . ) 0) '$./ 
Y@
/$+* <ul>?
6. - $ )/ ( )/ . # +- . )/*
 ./ - K#//+?II222@(4A 0"-@*(I2$&$I
 ./ -I
<ul>
*( " L = 0) +'$$:)  .-"' "-/0$/( )/ 4 ,0 + -($/ $.+*) - 
)/ -) / <li><a href="">Lorem Ipsum</a></li>
3+'*- - X@X= Y= Z 4 [ ) 0) ($.(* .$./ ( *+ -/$1*@  ./ !*-(=
 ./ - . 0)  '. <li><a href="">Lorem Ipsum</a></li>
# --($ )/.
$(+- .$)$' .

'*.
$. 9*- .
2 
+-*! .$*)' .@ <li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
2.3. Mejora progresiva </ul>

 ( %*- +-*"- .$1 K"progressive enhancement"L . 0)*  '*. *) +/*. (6. $(+*-/)/ .  ' ' +-$( - +.* *).$./ ) +'$- '*. ./$'*.  6.$*. ,0 $)/ -+- /) *-- /( )/ /*.
$. 9* 2  4  ' 1 5 0)*  '*. (6.  .*)*$*.@ 0 *-$" ) +-*1$ )  .0 *) +/* *)/--$*= '. 1 -.$*) .  /**. '*. )1 "*- .@ 0),0 ./*. ./$'*. # ) ,0 ' ( ); / )" 0)
'
 "-$:)
;/$'
* "graceful degradation"@ .+ /*
(04
6.$*=
+ -($/ )
'
 .*
*-- /*

/**.
'*.
*)/ )$*.@

  "-$:) ;/$' . 0) *) +/* +-*+0 ./* # 7. +*- ' +.$:'*"* $)"'7. 1$ ul {
background-color: blue;
*0-/ )4 --@ +'$ ' $. 9* 2 = '  "-$:) ;/$' .$")$!$ ,0 0) .$/$* 2  .$"0
border-bottom: 1px dotted #999;
!0)$*))* *-- /( )/ 0)* ' 0.0-$*   *) 0) )1 "*- '$($/* * )/$"0* ) ' list-style: none;
,0
)*
!0)$*))
'.
-/ -8./$.
(6.
1)5.@ margin: 15px;
width: 150px;
 ( %*- +-*"- .$1 /*( . *) +/* 4 '* +'$  !*-( $)1 -.@  ./ !*-(= +'$ ' padding-left: 0;
$. 9* 2  ' ( %*- +-*"- .$1 .$")$!$ ,0 ' .$/$* 2  $.+*)  -/ -8./$. (6. }
1)5.
0)/*
(6.
1)5*
. 
'
)1 "*-
*)
'
,0
 
'
0.0-$*@
li {
0#*. $. 9*- . 2  4 (0#*.  .0. '$ )/ . ./6) *. .$*)*. *) ,0 .0. $. 9*. . background-color: #FFF;
1 ) 3/( )/ $"0' ) 0',0$ - 1 -.$:)  0',0$ - )1 "*-@ 0),0 - .0'/ border: 1px dotted #999;
border-bottom-width: 0;
+-6/$( )/ $(+*.$' *). "0$-'*= ./ /$+*  $. 9*- . +- !$ - .-$!$- 0',0$ -
font: 1.2em/1.333 Verdana, Arial, sans-serif;
-/ -8./$ $)/ - .)/    () - ,0 '. +6"$). . 1 ) $"0' ) 0',0$ - }
)1 "*-@
li a {
 $  +-*+0 ./ +*- ' /7)$  ' ( %*- +-*"- .$1 *).$./ ) ,0 ' $. 9* 2  + -($/ color: #000;
'  .* *(+' /* 4 *-- /*  /* ' $)!*-($:)  ' +6"$) $) + )$ )/ ( )/  ' /$+*  display: block;
)1 "*- 0/$'$5* +*- ' 0.0-$*@  (6.= +-*+*) 0/$'$5- '. -/ -8./$. (6. (* -). height: 100%;
padding: 0.25em 0;
  U $)'0.*   V= 0),0 .:'* '*. 0.0-$*. *) )1 "*- . (6. (* -)*. . )
text-align: center;
+ .

$.!-0/-'.@ text-decoration: none;
}
 /7)$  ' ( %*- +-*"- .$1 . (0#* ( %*- ,0 '. .*'0$*) . '/ -)/$1. ,0 0/$'$5)
'"0)*.
$. 9*- .? li a:hover { background-color: #EFEFEF; }

/$'$5-
.:'*
'.
-/ -8./$.
  ,0
.*+*-/
*-- /( )/
'
)1 "*-
*.*' /* . - "'.  )/ -$*- . # ) ,0 ' ( );  )1 "$:) / )" ' .$"0$ )/ .+ /* ) 

)/ -) /
3+'*- -
Y=
+*-,0
0)
"-)
);( -*

0.0-$*.
.$"0 )
0/$'$56)*'*@ )1 "*-?

/$'$5-
.:'*
'.
-/ -8./$.
  ,0
.*+*-/ )
*-- /( )/
)1 "*- .
'$($/*.
*(*

)/ -) /
3+'*- -
Z=
4
,0
.
'
)1 "*-
(6.
0/$'$5*
+*-
'*.
0.0-$*.@

444;&".*/4;/ 47 444;&".*/4;/ 48

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

 *)/$)0$:) . (*$!$ ' *+$  '*. ' ( )/*.  ' ( );=  !*-( ,0 ' ' ( )/*
. ' $*)*
.
1 
(6.
'-( )/ ?
li { opacity: 0.9; }

li:hover{ opacity: 1; }

) ./ *.$:)= ' )1 "*- ,0 . ,0  /-6. .

)/ -) / 3+'*- - Z= 4 ,0 )* $)'04
.*+*-/ +- . +-*+$   @ ) ' - ./*  )1 "*- . . (0 ./- *-- /( )/ '
" 1.
D;E;
/,0*
&
'(2
(
&*/
(3 *./

(0.(0
5,&*..
H
6
I8
".*5
E8
."
E
6
,.
K ! /*?

*(* . 1 ) ' $(" ) )/ -$*-= $)'0.* *) 0)*. ./$'*.  /) 6.$*. . +-*0 )
$! - )$. 1$.0' . )/- '*. )1 "*- .@ ' (*/$1* . ,0
)/ -) / 3+'*- - Y )* . +5 
(*./--
0)
*-
+0)/ *
 1px 
)#0-
4
'*
.0./$/04
+*-
0)
*-
$.*)/$)0*@

' .$"0$ )/ +.* *).$./ ) 0/$'$5- ' . ' /*-  #$%*. K0)*  '*. . ' /*- . 1)5*. 
L
+-
9$-
)0 1*.
./$'*.?
body > ul { border-width: 0; }

ul > li { " 1.
D;G;
/,0*
&
'(2
(
&*/
(3 *./

(0.(0
5,&*..
H
6
I8
".*5
E8
."
E
6
,.
K
border: 1px solid #FFF;
border-width: 1px 0 0 0; /- +*.$' ( %*-  ' ( ); *).$./ ) 9$- 0) .*(- ' / 3/*  ' ' ( )/* . ' $*)*
} ( $)/
'
+-*+$  text-shadow  ?

li > a { li a:hover { text-shadow: 2px 2px 4px #333; }

background-color: #666;
color: white;
*'( )/ '*. )1 "*- . !-$ 4 + - .*+*-/) ' +-*+$  text-shadow= +*- '* ,0 '
font-weight: bold; )1 "*-
$- !*3
.
,0 
/-6.
4
)*
(0 ./-
./
( %*-?
}

li:first-child a { color: yellow; }

li > a:hover{ background-color: #999; }

#*- ' +-$( - ' ( )/*  ' ( );  )1 "$:) . (0 ./- *) */-* ./$'* 4 0)* '
0.0-$*
+.
.0
-/:)
+*-
)$(

0)
' ( )/*
.
(0 ./-
 ./*?

" 1.
D;H;
/,0*
&
'(2
(
&*/
(3 *./

(0.(0
5,&*..
H
6
I8
".*5
E8
."
E
6
,.
K

*- ;'/$(*= 0/$'$5)* '*. . ' /*- .   V . 1  '/ -)- ' *'*-  !*)*  '*. ' ( )/*.
 '
( );
+-
( %*--
.0
1$.0'$5$:)?
li:nth-child(2n+1) a {
background-color: #333;
}

" 1.
D;F;
/,0*
&
'(2
(
&*/
(3 *./

(0.(0
5,&*..
H
6
I8
".*5
E8
."
E
6
,.
K
li:nth-child(n) a:hover {
background-color: #AAA;
' )1 "*-
)/ -) / 3+'*- - Y . ,0  /-6. 4 .$"0 (*./-)* ' ( ); *) ' ($.(*
color: #000;
.+ /*= 4 ,0 )* . +5  )/ ) - ' . ' /*-  #$%*.@  ( %*- +-*"- .$1 + -($/ ,0 }
'*. 0.0-$*. 
)/ -) / 3+'*- - Y .$")  $ )*  /**. '*. *)/ )$*. 4 ,0 ' - ./* 
0.0-$*.
1 )
0)
( );
(6.
1)5*@ li:first-child > a:hover{ color: yellow; }

444;&".*/4;/ 49 444;&".*/4;/ 50

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

*'( )/ '*. )1 "*- . + - 4 !-$ $)'04 ) /**. '*. . ' /*- .   V= +*- '* ,0 ' ./6 +'$)*@ *) - /** ' / 3/*  ' ' ( )/* ) ) "-$/= 0( )/- (0#* .0 /(9*  ' /-
- .0'/*
!$)'
 '
( );
)

)1 "*-
.
'
,0
(0 ./-
'
.$"0$ )/
$(" )? 4 ($- ' *'*-  !*)* -) '"0).  '. ./-/ "$. #$/0' .@ 0)* '* )/ -$*- )*
- .0'/= . 0/$'$5 $- /( )/ ' +'- - . -1 !important +- 0( )/- ' +-$*-$

.
+-*+$  @

/-*  '*. +-*' (. #$/0' . ) ' $. 9* 2  ./6 - '$*)* *) ' .+$* ,0 *0+
 ' ( )/* ) +)/''@ *(* '*. ' ( )/*. +*-  ! /* )* (0 ./-) )$)";) *- 4 .0 *'*-
 !*)* . /-).+- )/ = )* . +*.$' *)* -  .$(+' 1$./ ' .+$* ,0 *0+ 
' ( )/*@ *- '* /)/*= 0)* . +*.$$*)) ' ( )/*.  !*-( !'*/)/ * 0)* . ./'  )
(6-" ) .= - '' )*.= '/0-. 4 )#0-. (63$(.I(8)$(.= )* . +*.$' 1$.0'$5- .$ '
)1 "*-
./6
(*./-)*
*-- /( )/
/**.
'*.
' ( )/*.@
" 1.
D;I;
/,0*
&
'(2
(
&*/
(3 *./

(0.(0
5,&*..
H
6
I8
".*5
E8
."
E
6
,.
K
- .*'0$*)- ./ +-*' ( ' /7)$ #$/0' *).$./8 ) 9$- 0) *- 1$.$'  '*.
*(* . # 1$./* ) ./ % (+'*= ' ( %*- +-*"- .$1 + -($/ +-*1 #- /*. '. ' ( )/*.@ *(* '*. *- . 1$.$' . *0+) .$/$* ) +)/''= ' +-*' (  ./ .*'0$:) .
+*.$$'$ .   .$) + -%0$-  '*. )1 "*- . *.*' /*. * '$($/*.@ *. 0.0-$*.  ,0 (*$!$ ' +-*+$* $. 9*@  '/ -)/$1 *).$./8 ) 9$- 0) *'*-  !*)* $! - )/ +-

)/ -) / 3+'*- - Y 1$.0'$5) 0) ( ); (04 6.$*  0* +- 0) )1 "*- *.*' /*= + -*  ' ( )/*@ /- +*.$' '/ -)/$1 . ' 0.*  ' +-*+$  outline  = ,0 9 0)
,0 ' . + -($/ '  .*  /**. '*. *)/ )$*.@ *. 0.0-$*. 
)/ -) / 3+'*- - Z 1$.0'$5)
+ -!$' ) ' *)/*-)*  0) ' ( )/* + -* )* *0+ .$/$* 4 +*- /)/* )* (*$!$ ' $. 9*  '
0) ( ); )*-('  0*  '. '$($/$*) .  .0 )1 "*- + -* ,0 /($7) + -($/ '
+6"$)@
 .*  /**. '*. *)/ )$*.@ *- ;'/$(*= '*. 0.0-$*.  '*. )1 "*- . (6. 1)5*.
K+ - 4 !-$L 1$.0'$5) 0) ( ); 1)5* ,0 +-*1 # /*. '. -/ -8./$. *. )1 "*- . (* -)*. *(* !-$= + - 4 $- !*3 $)'04 ) ' .*+*-/  ' +-*+$ 
$.+*)$' .
) @ outline= ($ )/-. ,0 ' )1 "*-
)/ -) / 3+'*- - Z )* . +5  (*./-- + -!$' . ) '*.
' ( )/*.  ' +6"$)@ ' $. 9*- #-$. " # +0'$* 0) -/80'* ''(* A Handy CSS
2.4. Depuraci—n Debugging Snippet K#//+?II#*( +" @(@*(I#-$.+" I$'*"IWUXTTV[TI
USSYS[SYS\XSVSI$) 3@#/('L ) ' ,0 (0 ./- 0). - "'.  ,0 # ) 0.*  outline 4

) 1$/' ( )/ = /**. '*. $. 9*- . 2  *( / ) --*- . ) '*. /-%*. ,0 - '$5)@ ) ' + -($/ )
 +0--
!6$'( )/
0',0$ -
$. 9*
.$)
0/$'$5-
# --($ )/.
1)5.?
(4*-8  '. *.$*) .= '*. --*- . .  .0- ) ' +-*- ' $. 9* ) $! - )/ .
* { outline: 2px dotted red }
)1 "*- .@  (6.  (*./-- '*. --*- .= '*. +-$)$+' . )1 "*- . $.+*) )  * * { outline: 2px dotted green }
# --($ )/.
,0
+ -($/ )
 .0-$-

!*-(
. )$''
'
0.
*)- /
 '
--*-@ * * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
)/ .  ,0 3$./$ -) ./. # --($ )/. 1)5.= ' /-%*  ' $. 9*- - (0#* (6. * * * * * { outline: 1px solid red }
*(+'$*=
4
,0
)*
-
!6$'
 .0-$-
'
0.
3/
 '
--*-
)/-
/*.
'.
+*.$' .? * * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }

'
. ' /*-
./6
('
.-$/*@ * * * * * * * * { outline: 1px solid blue }

.
+-*+$  .
./6)
('
.-$/.
*
/$ ) )
1'*- .
)*
+ -($/$*.@

2.4.1. Firebug

/-*.
. ' /*- .
/$ ) )
(6.
+-$*-$
4
./6)
.*- .-$$ )*
0)
+-*+$ 
4I*
1'*-@
' (-" )  .*'0$*) . ()0' . 4 /7)$. (6. * ( )*. $)" )$*..= '*. $. 9*- . 2 

.
- "'.
4
1'*- .
./6)
$ )
.-$/*.=
+ -*
'*.
' ( )/*.
)*
*0+)
'
.+$*
,0

+-*! .$*)' .  #*4 ) 8 0/$'$5) # --($ )/. 1)5. +- 1 -$"0- *) +- $.$:) '
.$(+'
1$./
+- 
,0
./6)
*0+)*
)
'
+)/''@
0.  '*. --*- .  $. 9*@  /*. '. # --($ )/. $.+*)$' .= ' ( %*- *) (0#

'
)1 "*-
/$ )
0)
--*-
,0
$(+$
(*./--
*-- /( )/
'
+6"$)@ $! - )$ . $- 0" K#//+.?II*).@(*5$''@*-"I .AI!$- !*3I*)IT[WVL = 0) 3/ ).$:)
*. $. 9*- . 2  $ -*) # (0#* /$ (+* .*'0$*) . $)" )$*.. +-  0)*  '*.  '
)1 "*-
$- !*3@
+-*' (. )/ -$*- .@ ) +-$( - '0"-= 0)* )* . ./6 . "0-*  .$ /*. '. - "'.  ./6) $- 0" $.+*)  /*. '. 0/$'$ . ,0 )  .$/) '*. $. 9*- . 4 +-*"-(*- . 2  )
$ ) .-$/.= '* ( %*- . 1'$- ' #*%  ./$'*. 0/$'$5)* ' 1'$*-   ' V .0 /-%*@ $- 0" . 0) # --($ )/ "-/0$/= *(+' /= !6$'  0/$'$5- 4 +- ' ,0 .
K#//+?II%$".2@2V@*-"I..A1'$/*-IL @ +0'$)
)0 1.
1 -.$*) .

!*-(
*)/$)0@
) 1 5  .-/* ' --*-  .$)/3$.= ' .$"0$ )/ +-*' (  - .*'1 - . +*- ,07 0) - "'
 )* . +'$ *-- /( )/  0) ' ( )/*@ ) ./-/ "$ (04 0/$'$5 *).$./8 ) 9$-
'"0) +-*+$  ,0 .  1$.0'( )/ .$")$!$/$1 +- *(+-*- .$ - '( )/ ' . ' /*- .

444;&".*/4;/ 51 444;&".*/4;/ 52

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

 .+07.  $)./'- $- 0"= ) ' .,0$) $)! -$*-  - #  ' )1 "*- $- !*3 +-  0) $ . +0'. .*- ' *)/ )$*  0) ' ( )/* ) ' +-/ $5,0$ -  ' +) '  = . +0 
)0 1* $*)*@ - -$- $- 0"= .*'( )/ #4 ,0 +$)#- *) ' -/:) .*- . $*)* * +0'.- (*$!$- .0 1'*- 4 1 - ' - .0'/* ) /$ (+* - ' .*- ' +-*+$ +6"$) 2 @  . ./
$- /( )/
'
/ ' F12  .+07.

-"-
'
+6"$)
,0
.
,0$ -
 +0--@ ($.(*
+) '
/($7)
.
+*.$'
'$($)-
'
' ( )/*

'
+6"$)@

$- 0"
(0 ./-
.0
$)!*-($:)
$1$$
)
'*.
.$"0$ )/ .
+) ' .?  +-/  - #  ' +) '  . ' (6. ;/$'= 4 ,0 .$ (+- (0 ./- /*. '. - "'.  ,0
. +'$)  0) ' ( )/*  ' +6"$)@ -$.  ./ $)!*-($:) . $(+*.$' 0- .$ 0)

*).*'?
(0 ./-
( ).% .

--*-=
)*/$!$$*) .
4
*/-*.
/$+*.

( ).% .@
*
.
(04
. ' /*-
./6
$ )
.-$/*
*
.$
0)
- "'  - '( )/
.
./6
+'$)*

0)
' ( )/*@
;/$'
+-
'*.
$. 9*- .
2 @
 (6.= *(* )*-('( )/ 1-$. - "'.  $! - )/ . +'$) 1'*- . $! - )/ .  '. ($.(.

 ?
(0 ./-
'
:$"*  
'
+6"$)
4
+ -($/
. ' $*)-
'*.
' ( )/*.=
+-*+$  .  0) ($.(* ' ( )/*= $- 0" (0 ./- /#. /*. '. +-*+$  . ,0 )
(*$!$-
.0.
*)/ )$*.
4
1 -
'.
- "'.  ,0
.
'
./6)
+'$)*@
/ *-8 .   ) +'$- ' ' ( )/* + -* ,0 )* '* # ) +*-,0 3$./ ) */-. - "'.  *)

?
(0 ./-
/*.
'.
#*%.

./$'*.
$)'0$.
)
'
+6"$)
4
+ -($/
(*$!$-
.0. (6.
+-$*-$@
1'*- .@
 +-/  - #  ' +) '  $)'04 */-. 0/$'$ . $)/ - .)/ . *(* 0)* . +. '

0$:)
4 ?
+) ' .
- '$*)*.
*)
'
+-*"-($:)
1-$+/@
*
.*)
(04
;/$' . -/:) +*- )$(  0) *'*-  !$)$* ) !*-(/* # 3 $(' 4 ,0 # ,0 . 1  - '( )/
+-
'*.
$. 9*- .
2 @ 06' . ' *'*-@
"0'( )/ = ' +.- ' -/:) +*- )$(  0) url() 0/$'$5 +- $)'0$- 0)

 ?
(0 ./-
/*
'
$)!*-($:)

/**.
'*.
' ( )/*.
 .-"*.
+*-
'
+6"$) $(" )= $- 0" (0 ./-  ,07 $(" ) . /-/@ . - "'.  ,0 . (0 ./-) ) ' +-/
K  =
1-$+/= =
$(6" ) .L@  - #  ' +) '  /($7) . +0  ) (*$!$-= '$($)- 4 '*,0 - / (+*-'( )/ @
($7)
.
+*.$'
9$-
)0 1.
+-*+$  .

0',0$ -
- "' @
'
+-$( -*

'*.
+) ' .
$(+*-/)/ .
+-
'*.
$. 9*- .
2 
.
'
+) '  ?
$- 0" (0 ./- +*-  ! /* ' 1'*-  '. - "'.  /' 4 *(* . #) ./' $* ) '. #*%.
 ./$'*.@ $) (-"*= (0#. 1  . ./*. 1'*- . *-$"$)' . )* .*) +-6/$*.@ D06' . '
/(9*  ' /-  0) ' ( )/* *) font-size: 1emC $) (6. $)!*-($:) . $(+*.$' . -'*@
D06' . ' )#0- ) +83 ' .  0) ' ( )/* *) ' +-*+$  width: 60%C
(+*.$' . -'*
.$)
*)* -
'.
)#0-.

.0.
' ( )/*.
*)/ ) *- .@

*- /** ''*= $- 0" + -($/ (*./-- '*. 1'*- . ,0 - '( )/ 0/$'$5 $- !*3 +- $0%-
 ' ( )/* ) +)/''@ 0'.)* .*- ' / 3/* Opciones  ' +-/  - #  ' +) '
 =
.
+0 
/$1-
'
*+$:) Show Computed Style?

" 1.
D;J;
(&
 

".1

' +) '  . ' (6. 0/$'$5* +*- '*. $. 9*- . 2 = 4 ,0 (0 ./- /* ' $)!*-($:)
 ' +6"$) - '$*) *)  4 @ ) ' +-/ $5,0$ -  ' +) ' . (0 ./- ' :$"*
 
'
+6"$)
4
)
'
+-/
 - #
'
$)!*-($:) @

$ . +0'. ' */:) Q

).+ $*)-Q  ' +-/ .0+ -$*-  $- 0"= . +*.$' . ' $*)- *) '
-/:) 0) ' ( )/*  ' +6"$) 2 @  .+07.  +$)#- .*- 0',0$ - ' ( )/*= ) ' +-/
$5,0$ - . (0 ./- ' :$"*   . ' ( )/* 4 ) ' +-/  - # /*. '. - "'. 
,0
.
'
+'$)@
" 1.
D;K;
(&
 

".1
*(
&
*,"+(
!*4
*',10
06&

444;&".*/4;/ 53 444;&".*/4;/ 54

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

 .+07.  /$1- ./ *+$:)= '*. /(9*.  ' /- 4 )#0-. . (0 ./-) ) +83 ' . 4 .
(0 ./- ' 1'*-  /*. '. +-*+$  .   ' ' ( )/*= $) + )$ )/ ( )/  .$ . #)
./' $*

!*-(
3+'8$/
*

.$
.
/-/

'*.
1'*- .
+*-
 ! /*
,0
+'$
'
)1 "*-@

/-  '. 0/$'$ . (6. $)/ - .)/ .  ' +) '  . ' $)!*-($:) .*- ' (,0 /$:)
 ' ' ( )/*= ,0 . +0  (*./-- +$)#)* .*- ' + ./9 Maquetaci—n  ' +-/  - #
 '
+) '?

" 1.
D;CC;
(&


".1

*- ;'/$(*= ' +) '    $- 0" + -($/ 1 - /* ' $)!*-($:) .*- /**. '*. ' ( )/*.
,0
.
 .-"
'
)1 "*-
+-
(*./--
'
+6"$)?

" 1.
D;CB;
/0)
-10"+(
&
,(&
 

".1

 *+$:) Maquetaci—n (0 ./- ' $)!*-($:) *(+' /  ' "box model" * (* '*  %. 
0)
' ( )/*?
)#0-=
'/0-=
- '' )*.=
*- .
4
(6-" ) .@

' */-* +) ' (6. 0/$'$5* +*- '*. $. 9*- . 2  . ' +) ' = ,0 (0 ./- ' *)/ )$* 
/*. '. #*%.  ./$'*. ,0 . ./6) +'$)* ) ' +6"$) 4 + -($/ - '$5- 0',0$ -
(*$!$$:)
.*-
0',0$ -
- "'  1$ )*
'
- .0'/*
)
/$ (+*
- '
)
'
+-*+$
+6"$)?

" 1.
D;CD;
(&


".1

 . ' +0)/*  1$./  ' $. 9*-= ./ +) ' . +0  0/$'$5- +- ( %*-- ' - )$($ )/*
 ' +6"$) - 0$ )* ' );( -*  -#$1*. = - 0$ )* ' );( -*  $(6" ) . 
*-)* ( $)/ '*. sprites CSS= - 0$ )* ' );( -*  + /$$*) .  - '$5. '
. -1$*-
4
- 0$ )*
'
/(9*

'*.
-#$1*.@

2.4.2. Otras herramientas de depuraci—n

$- 0" . ' ( %*- # --($ )/ +-  +0-- ' $. 9*  '*. .$/$*. 2 = + -* .:'* ./6
$.+*)$' +- ' )1 "*- $- !*3@ *(* ' (4*-8  --*- . ) ' $. 9* 2  .:'* .
+-*0 )
)
'*.
)1 "*- .

'
!($'$

)/ -) /
3+'*- -=
$- 0"
)*
.
+0 
0/$'$5-@

444;&".*/4;/ 55 444;&".*/4;/ 56

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

!*-/0)( )/ = '*. - *- .  $- 0" #) +0'$* 0) 1 -.$:) - 0$ 4 .$(+'$!$ propiedad2: valor2;
}
 $- 0" *(+/$' *) ' - ./*  )1 "*- .@  1 -.$:) - 0$ .  )*($) $- 0"
$/ K#//+?II" /!$- 0"@*(I'$/ @#/('L 4 - ,0$ - ' 0.*  1-$+/@ 0),0 . +0  *- ;'/$(*= 3$./ 0) (* '* *(+/* ,0 )* -  )0 1. '8) . +- '. ''1 .@ 0),0 .
 .-"- $- 0" $/ +- 0/$'$5-'*  . )0 ./-*. +-*+$*. . -1$*- .= ' !*-( (6. . )$'' (0#*
(6.
*(+/*=
)*-('( )/
.
(6.
$!8$'

' -?

+-*-'
.
9$-
'
.$"0$ )/
:$"*
)
'
+6"$)
,0
.
,0$ -
 +0--?
selector {
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/ propiedad1: valor1;
firebug-lite-compressed.js"></script> propiedad2: valor2; }

' :$"* )/ -$*- . +0  *'*- ) 0',0$ - 5*)  ' +6"$)= 0),0 )*-('( )/ . 2.5.2. Tabulaciones
$)'04
 )/-*

'
. $:) <head>@
0'- ' :$"* !$'$/ .$")$!$/$1( )/ .0 ' /0-= +*- '* ,0 /0'- '. +-*+$  .  .
*- ;'/$(*= *(* '. (+- .. ,0  .--*'') '*. )1 "*- . *).$ -) ,0 $- 0" .
0)  '. ( %*- . +-6/$.  '*. $. 9*- . 2  +-*! .$*)' .@ *(* *)* ) ' (4*-8 
$).0+ -' =  . # 0) /$ (+* .  $)  *+$- /*. .0. -/ -8./$.@
)/ -) /
+-*"-(*- .= )* . - *( )' $). -/- /0'*- . ) ' :$"*= .$)* ,0 .   )
3+'*- - [= !-$ V 4 + - \ $.+*) )  # --($ )/.   +0-$:) ,0 .*) 0) -7+'$ 
(+' -
U
*
W
.+$*.
)
')*@
$- 0"@
/* Propiedades sin tabular */

)/ -) / 3+'*- - [ #  )*($)*  .0 # --($ )/ Developer Tools selector {

K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4I[W[[\WK@[XL@.+3L = ($ )/-. ,0 + - ' # propiedad1: valor1;
propiedad2: valor2;
 )*($)* Dragonfly K#//+?II222@*+ -@*(I+-*0/.I-"*)!'4IL 4 ) !-$ ./6
}
$.+*)$'
 .
'
( ); Desarrollo@
/* Propiedades tabuladas con 2 espacios */
2.5. Hojas de estilos selector {
propiedad1: valor1;
propiedad2: valor2;
. #*%.  ./$'*. - ' .  '*. .$/$*. 2  +-*! .$*)' . .0 ' ) *)/ ) - $ )/*.  - "'. 4
}
*0+) ($' .  '8) .@ *- ./ (*/$1*= . $(+- .$)$' . "0$- 0). 0 ). +-6/$. ' - -
'. #*%.  ./$'*. +- ( %*-- ' +-*0$/$1 4 - 0$- '*. +*.$' . --*- .@  *)/$)0$:) 3/ )$ )* ' +-6/$  /0'- '. +-*+$  .= '"0)*. $. 9*- . - *($ )) /0'-
. (0 ./-) '"0).  '. - *( )$*) . (6. ;/$' . +- - - #*%.  ./$'*. /($7) '. - "'.  - '$*).@ ' .$"0$ )/ % (+'* (0 ./- /- . - "'.  - '$*).
+-*! .$*)' .@ )/-
.8?
ul {
2.5.1. Llaves margin: 1em 0;
padding: 0;
)*  '*. ' ( )/*. 6.$*. ,0 '*. $. 9*- . 2    ) *-- . ' /$+*  ''1 . ,0 . }
0/$'$5) +- ) --- '  '-$:)   - "' @ 0),0 . 0/$'$5) (0#*. (* '*. ul li {
$! - )/ .=

*)/$)0$:)
.
(0 ./-)
'*.
(6.
+*+0'- .@ list-style-type: square;
}
'1  + -/0- ) ' ($.( '8)   ' . ' /*- 4 ''1  $ -- ) 0) )0 1 '8)  +- . +-- ul li ul {
0).
- "'.

*/-.? font-style: italic;
list-style-type: disc;
selector { }
propiedad1: valor1;
propiedad2: valor2;  - *( )$:) *).$./ ) /0'- '. - "'.  ,0 ./6) - '$*). +*-,0 .0.
} . ' /*- . ./6) )$*.@ *- /)/*= ' - "' 04* . ' /*- . ul li   -8 ./- /0'
) 1-$)/  ' (* '* )/ -$*- *).$./ ) (*./--  ''1 ) .0 +-*+$ '8) = +- . +-- - .+ /*  ' - "' ul 4  ' ($.( !*-( ' - "' 04* . ' /*- . ul li ul   -8 ./-
;) (6. ' . ' /*-  .0  '-$:)@ ./ (* '* '* 0/$'$5) )*-('( )/ '*. +-*"-(*- . /0'
- .+ /*
 ul li?
2 ? ul {
margin: 1em 0;
selector
padding: 0;
{
}
propiedad1: valor1;

444;&".*/4;/ 57 444;&".*/4;/ 58

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

ul li {
2.5.4. Selectores
list-style-type: square;
}
*. . ' /*- .   ) . -  .-$+/$1*. +- !$'$/- ' ' /0-  ' #*%  ./$'*.= +*- '* ,0 #4
ul li ul {
font-style: italic; ,0 +*) - .+ $' 0$* ) ' "$- ' )*(-  '*. /-$0/*. id 4 class@  (6.= 0),0
list-style-type: disc; 0( )/ ' /(9* /*/'  ' #*%  ./$'*.= . - *($ ) 0/$'$5- . ' /*- . '* (6.
} .+ 8!$*.
+*.$'
+-
!$'$/-
'
()/ )$($ )/*

'
#*%

./$'*.?
p.especial { ... } /* poco espec’fico */
2.5.3. Propiedades #contenedor #principal p.especial { ... } /* muy espec’fico */

0)* . ./'  ' ($.( +-*+$  ) 1-$*. . ' /*- . $! - )/ . + -* - '$*)*.= . *- */- +-/ = 0)* 0) - "'  /$ ) 1-$*. . ' /*- . '-"*.= . ( %*- *'*- 
- *($ )
.-$$-
'.
- "'.  )
0)
;)$
'8) =
+-
!$'$/-
.0
' /0-? . ' /*-
)
.0
+-*+$
'8) ?
#contenedor #principal h1 { font-size: 2em; } #contenedor h1,
#contenedor #principal h2 { font-size: 1.8em; } #contenedor #principal h2,
#contenedor #principal h3 { font-size: 1.6em; } #contenedor #lateral blockquote {
color: #000;
0)* ) ' .* )/ -$*- '. +-*+$  . 4I* . ' /*- . )* *0+) ' ($.(* .$/$*= . +0  ) font-family: arial, sans-serif;
0/$'$5-
.+$*.
)
')*
+-
- -
0)
./-0/0-
.$($'-

'.
*'0().

0)
/'? }

h1 { color: #000; text-align: center; }

#principal h2 { color: #C0C0C0; font-size: 1.8em; } 2.5.5. Organizaci—n
#lateral blockquote { font-size: 0.9em; text-align: justify; }
0)* 0) #*%  ./$'*. /$ ) $ )/*.  - "'.= . - *( )' $1$$-' ) . $*) . +-
 .+ /* ' *- ) ) ' ,0 . $)$) '. +-*+$  . ) '  '-$:)= '"0)*. $. 9*- . !$'$/- .0 ()/ )$($ )/*@ 0),0 )* 3$./ )$)"0) *-")$5$:) . "0$ +*- /**. '*.
- *($ ))
"-0+-'.
+*-
.0
!0)$*)'$? $. 9*- .=
)
" ) -'
.
0/$'$5)
'.
.$"0$ )/ .
. $*) .?
selector {

./$'*.
6.$*.
K ./$'*.
 <body>=
/$+*

' /-
+*-
 ! /*=
(6-" ) .
 <ul>= <ol> 4 <li>=
position: absolute; /* propiedades de posicionamiento */
right: 0; ./$'*.

'*.
)' .=
/@L
bottom: 10px;

./$'*.

'
./-0/0-
* layout K)#0-=
'/0-
4
+*.$$:)

'
  -=
+$

+6"$)=
width: 300px; /* propiedades de tama–o */ 5*).

*)/ )$*.=
( );.

)1 "$:)=
/@L
height: 250px;

./$'*.
 '
( );

)1 "$:)
color: #000; /* propiedades tipogr‡ficas */
./$'*.


0)

'.
5*).
K ' ( )/*.

'
  -=
/$/0'- .
4
/ 3/*

'
5*)

font-size: 2em;
*)/ )$*.=
)' .=
'$./.

$(6" ) .

'.
5*).
'/ -' .=
/@L
}
$ ' #*%  ./$'*. /$ ) (0#. . $*) .= '"0)*. $. 9*- . $)'04 ) 0) 8)$ * /' 
/-*. $. 9*- . - *($ )) *- )- '!7/$( )/ '. +-*+$+  . +- !$'$/- .0
*)/ )$*. ' +-$)$+$*  ' /**@ ) ' #*%  ./$'*.  ' .$/$* 2  (*5$''@*-"
;.,0 
4
1$/-
0+'$$ .?
K#//+?II222@(*5$''@*-"I..I. I*)/ )/@..L 0/$'$5)
'
.$"0$ )/
/'

*)/ )$*.?
selector {
/* TOC:
bottom: 10px;
Random HTML Styles
color: #000;
Forms
font-size: 2em;
General Structure
height: 250px;
Navigation
position: absolute;
Quotations
right: 0;
Comments and Other Asides
width: 300px;
Emphasis
}
Computers - General
Code
Examples and Figures
Q and A (FAQ)
Tables

444;&".*/4;/ 59 444;&".*/4;/ 60

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

Headers /* Buscador
Meta - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Specific to Products Pages #cabecera #buscador {
*/ ...
}
/- - *( )$:) - '$*) *) ' *-")$5$:)  '. #*%.  ./$'*. . '  0/$'$5-
.$ (+- '*. ($.(*. )*(- . +- '*. ($.(*. ' ( )/*.@ $ *. -1. '. #*%.  ./$'*.  '*.
2.6. Rendimiento
$. 9*- . +-*! .$*)' .= 1 -6. ,0 .$ (+- ''() #cabecera * #header * #hd  '   - 
'
+6"$)= #contenidos * #principal 
'
5*)
+-$)$+'

*)/ )$*.
4
.8
.0 .$1( )/ @ )/ .  .0 3+'$$:)  /''= . (0 ./-  *)/$)0$:) ' '$./  ./-/ "$. ;/$' . +-
( %*--
'
- )$($ )/*

'
+-/
  
'.
+6"$).
2 ?
'"0)*.  '*. /-$0/*. id (6. 0/$'$5*. ) '*. $. 9*. 2  .*)? cabecera= cuerpo= pie=
contenidos= principal= secundario= lateral= buscador= contacto= logo@
/$'$5- sprites CSS +-
- 0$-
'
);( -*

$(6" ) .

*-)*

0)
;)$
$(" )@

*
0/$'$5-
3+- .$*) .
Kexpression()L
)
'.
#*%.

./$'*.@
'
)1 "*-

)/ -) /
2.5.6. Comentarios
3+'*- -
- 1';
*)/$)0( )/
'
1'*-

'.
3+- .$*) .
4
+0 
+ )'$5-
'
 +-- '. . $*) .  ' #*%  ./$'*. 4 */-*. '*,0 . $(+*-/)/ . . (0#* (6. !6$' - )$($ )/*

'
+6"$)@
0)* . $)'04 ) *( )/-$*.@ *- ./ (*/$1* . #)  !$)$*   ).  /$+*. $! - )/ . 
*
0/$'$5-
'*.
!$'/-*.


)/ -) /
3+'*- -=
4
,0
'"0)*.
!$'/-*.
*(* AlphaImageLoader
*( )/-$*.
. +-*- .@ '*,0 )
'
-"

'
+6"$)
#./
,0
)*
.
 .-"
'
$(" )
0/$'$5
+*-
'
!$'/-*@
'
(* '*
6.$*
.:'*
9
0)
*( )/-$*
 ./*
+-
'
$)$$*


. $:)
$(+*-/)/ ?
)'5-
#*%.

./$'*.
3/ -).
)
1 5

$)'0$-
'*.
./$'*.
)
'
+-*+$
+6"$)@
/* ---------------------------------------*/
)'5-
'.
#*%.

./$'*.
( $)/ <link> )
1 5
 @import K )

)/ -) /
3+'*- -
'.
/* ---------->>> CONTENEDOR <<<-----------*/
- "'. @import /$ ) )
'
($.(*
! /*
,0
)'5-
'*.
-#$1*.  '
!$)'

'
+6"$)L@
/* ---------------------------------------*/

 0$-
'
);( -*

-#$1*.  
'
+6"$)@
/-*. $. 9*- . (+' ) $! - )/ . *( )/-$*. +- $)$- ' *($ )5*  '. . $*) . 4 '

'.
+-/ .
$(+*-/)/ .
 )/-*

0)
. $:)?
*($)-
.$
.
+*.$'
/**.
'*.
-#$1*.  $)$1$0' .
)
0)
;)$*
-#$1* @
/* -------------------------------------------------------------
 0$-
'
/(9*

'.
#*%.

./$'*.
*(+-$($ )*
'*.
-#$1*.
*)
'.
# --($ )/.
CABECERA $.+*)$' .
K $4=


*(+- ..*-L@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

*(+-$($-
'*.
-#$1*.  )
'
. -1$*-
2 
)/ .

)1$-'*.
'
0.0-$*@
/* Logotipo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */  ";) '*. ./0$*. - '$5*. +*- #**B 4 +0'$*. ) ' -/80'* Performance Research, Part
1: What the 80/20 Rule Tells Us about Reducing HTTP Requests K#//+?II40$'*"@*(I'*"IUSSYI
/* Buscador TTIU[I+ -!*-() A- . -#A+-/ATIL =  ' /$ (+* /*/' ,0 ' 0.0-$* .+ - #./ ,0 '
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+6"$) .*'$$/ . -" *(+' /( )/ = ' US]  ' /$ (+* *-- .+*)  ' +-/  ' . -1$*-
*($))* '*. *( )/-$*. 4 ' /0'$:)  - "'.= ' ./-0/0-  ' #*%  ./$'*. ./6 K)*-('( )/ " ) -- ' +6"$)   !*-( $)6($ 0/$'$5* $)!*-($:)  0) . 
*(+' /( )/
*- )? /*.L 4 ' [S] - ./)/ *-- .+*)  ' +-/  ' '$ )/ K)*-('( )/  .-"- #*%. 
./$'*. =
-#$1*.
1-$+/

$(6" ) .L@
/* -------------------------------------------------------------
CABECERA  ./ !*-(= . (0#* (6. !6$' ( %*-- ' /$ (+*  - .+0 ./  ' +6"$) ( %*-)* '
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
- )$($ )/*  ' +-/  ' '$ )/ @ *(* 0)*  '*. +-$)$+' . ' ( )/*.  ' +-/  ' '$ )/
#cabecera {
... ./6 !*-(* +*- '. #*%.  ./$'*. =  *)/$)0$:) . $)$) '"0).  '. /7)$. +-
} ( %*--
.0
- )$($ )/*@

/* Logotipo ) +-$( - '0"-= ) '*. ./0$*. - '$5*. +*- #**B .  (0 ./- ,0 +-*3$(( )/ '
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ US]  '. +6"$). 1$./.  0) .$/$* 2  )* $.+*) )  .0. ' ( )/*. "0-*. ) ' #
#cabecera #logo {  ' )1 "*-  ' 0.0-$*@ ./* .0+*) ,0 ) ' US]  '. +6"$). 1$./.= '*. )1 "*- . 
...
'*. 0.0-$*. .  .-") /**. .0. ' ( )/*.? $(6" ) .= -#$1*. 1-$+/ 4 #*%.  ./$'*.
}
@

444;&".*/4;/ 61 444;&".*/4;/ 62

3(7* ,#01&*
D;
1(/
,.0"/ 
3(7* ,#01&*
D;
1(/
,.0"/

 *)'0.$:)  '* )/ -$*- . ,0 - .0'/ (0#* ( %*- - 0$- ' );( -*  -#$1*. )1 "*- .@  (6.= '*. $. 9*- . /($7) ./6) 3+0 ./*.  '*. --*- . ,0 *( / 
$! - )/ . 4 )* - 0$- ' /(9*   -#$1* $)$1$0'@ ' *% /$1* . - 0$- ' );( -*  1 -.$:)


)1 "*-@
+ /$$*) .  ,0
'
+6"$)
- '$5
'
. -1$*-
+-
 .-"-
/**.
'*.
*)/ )$*.@
 ./ !*-(= . $(+- .$)$' $.+*) -  - 0-.*. +- *)* - '. '$($/$*) . 4 --*- . 
*. )1 "*- . '$($/) ' );( -*  + /$$*) .  .$(0'/6) . ,0 . +0  ) - '$5-  0)  )1 "*-@  *)/$)0$:) . $)$ ' '*'$5$:)  ' *0( )/$:) /7)$ *!$$' 
($.(* . -1$*-@ 0),0 ' );( -* (63$(*  + /$$*) . 1-8  0) )1 "*-  */-*= ' '8($/ 
)1 "*-@
. )0 )/- )/- U 4 [@ *- /)/*= .$ ' '8($/  ' )1 "*- .*) U + /$$*) .  .$(0'/6) .=

)!*-($:)
/7)$
" ) -'
+-
$. 9*- .
4
+-*"-(*- .
2 ?
0)* ' )1 "*- - '$ U + /$$*) .= '  .-"  ' +6"$) . '*,0  #./ ,0 '"0)

'.
+ /$$*) .
*)'04@

)/ -) /
3+'*- - K#//+?II(.)@($-*.*!/@*(I )A0.I$ I !0'/@.+3L

*(*  (0 ./-) '*. ./0$*. - '$5*. +*- #**B= '  .-"  '. +6"$). 2  . - '$5 a
$- !*3 K#//+?II 1 '*+ -@(*5$''@*-"I )I$)O" L
saltos=  .-")*  1 5 U= W * Y ' ( )/*.  ' +6"$)@ *- ./ (*/$1* . !0)( )/'
!-$ K#//+?II 1 '*+ -@++' @*(I$)/ -) /I.!-$IL
- 0$- ' );( -*  ' ( )/*.  ' +6"$)= )/- ''*. ' );( -*  #*%.  ./$'*. = +-
- 0$-
'
);( -*

+ /$$*) .  )  .-$.@
+ - K#//+?II222@*+ -@*(I*.I.+ .IL

 - *( )$:)  - 0$- ' );( -*  #*%.  ./$'*.  )/- ) *)!'$/* *) '
)!*-($:)
/7)$
.+ 8!$
 ?
- *( )$:)  (*0'-$5- ' $. 9*   ' .$/$* 2  . +-)*  !*-( ':"$ /**. .0.

)/ -) /
3+'*- - K#//+?II(.)@($-*.*!/@*(I )A0.I'$--4IVXTSUWK@[XL@.+3L
./$'*.
)
1-$*.
-#$1*.
$)$1$0' .@

$- !*3 K#//+?II 1 '*+ -@(*5$''@*-"I )IO ! - ) L
 .*'0$:) *).$./ ) *($)- /**. '*. -#$1*.  $)$1$0' . ) 0) ;)$* -#$1* @

!-$ K#//+?II 1 '*+ -@++' @*(I$)/ -) /I.!-$I.!-$O..@#/('L
0),0 ' #*%  ./$'*. - .0'/)/ /$ ) 0) /(9* (04 "-) = ' );( -*  + /$$*) . 
- ,0 -$.
+-
'
+-/
  .
- 0
'
(8)$(*
+*.$' @
+ - K#//+?II222@*+ -@*(I*.I.+ .I..IL

' .$"0$ )/ +.* *).$./ ) - 0$- ' /(9*  . ;)$ #*%  ./$'*. "-) @ *(* '*. ' (-" )  '. - ! - )$. *!$$' .= 3$./ ) .$/$*. *(* #//+?II+*.$/$*)$. 1 -4/#$)"@) /I ,0
-#$1*.  )*-(' . $)'04 ) (0#*. .+$*. ) ')*= )0 1. '8) .= *( )/-$*. 4 +0'$)
-/80'*.
/7)$*.
.*-
'*.
--*- .
(6.
*)*$*.


)1 "*-@
+-*+$  . )* *+/$($5.= . (04 . )$''* - 0$- .0 /(9*  !*-( *).$ -'
'$($))*
/**.
'*.
' ( )/*.
.*-)/ .@

#**B #  .--*''* 0) # --($ )/ ''( YUI compressor K#//+?II 1 '*+ -@4#**@*(I
40$I*(+- ..*-IL ,0 + -($/ - 0$-  !*-( . "0- ' /(9*  '*. -#$1*. 1-$+/ 4
@ 0 0.* )* . (04 :(** +- '*. $. 9*- . 2 = 4 ,0 - ,0$ - ' 0.*  1 4 ' '8) 

*()*.@

/- # --($ )/ .$($'-  ' )/ -$*- . CSSTidy K#//+?II../$4@.*0- !*-" @) /IL = ,0 + -($/
- 0$- ' /(9*  '*. -#$1*.  '$($))* '*. ' ( )/*. .*-)/ . K*( )/-$*.=
.+$*. ) ')*= )0 1. '8) .L 4 *+/$($5)* '. - "'.  K.0./$/0$- +-*+$  .
$)$1$0' . +*- +-*+$  . shorthand= 0/$'$5- ' )*/$:) - 1$  );( -*. 4 *'*- .=
/@L CSS Tidy . 0) # --($ )/ "-/0$/ $.+*)$' +- /**. '*. .$/ (. *+ -/$1*.= . +0 
0/$'$5- ( $)/ ' '8)   *()*. 4 /($7) . +0  $)/ "-- *) ' ' )"0% 
+-*"-($:)  @

 (6.  '. # --($ )/.  .-"' .= 3$./ ) +'$$*) . *)'$) ,0 + -($/ ) - 0$-
!6$'( )/ ' /(9*  ' :$"*  $)$*@ )  '. +'$$*) . (6. *)*$. . Clean
CSS K#//+?II222@' )..@*(IL =
,0
0/$'$5
$)/ -)( )/ CSS Tidy@

2.7. Recursos imprescindibles

' /-%*  '*. $. 9*- . 2  . 1$.0'$5  /-17.  0) )1 "*- 2  ' (4*-8  '.
*.$*) .@ *- ./ (*/$1*= '*. $. 9*- . .$ (+- ./6) '$($/*. +*- '. +$ .  '*.

444;&".*/4;/ 63 444;&".*/4;/ 64

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
E;
&0*./

<p>
Cap’tulo 3. Selectores <a href="#">Enlace1</a>
</p>

*)* - 4 *($)- /**. '*. . ' /*- .   . $(+- .$)$' +- - - $. 9*. 2  <p>
+-*! .$*)' .@ ' ./6)-   U@T $)'04 0) * )  /$+*. $! - )/ .  . ' /*- .= ,0 <span>
+ -($/ ) . ' $*)-  !*-( (04 +- $. ' ( )/*. $)$1$0' . * *)%0)/*.  ' ( )/*. <a href="#">Enlace2</a>
</span>
 )/-*

0)
+6"$)
2 @
</p>
/$'$5)* .*'( )/ '*. $)* . ' /*- . 6.$*.   U@T K0)$1 -.'=  /$+*=  . ) )/ = 
' +-$( - . ' /*- .  /$+*  . ) )/ Kp aL 4 +*- /)/* . +'$  /**. '*. ' ( )/*. <a>
'. 4  $L . +*.$' $. 9- 0',0$ - +6"$) 2 @ * *./)/ = '*. . ' /*- . 1)5*. 
,0 . )0 )/-)  )/-*  ' ( )/*. <p>@ ) ./ .*= '*. ./$'*.  ./ . ' /*- . +'$) 
 U@T
+ -($/ )
.$(+'$!$-
'.
- "'.  4
/($7)
'
:$"*  @
'*.
*.
)' .@
 .!*-/0)( )/ = '*. )1 "*- . *.*' /*. *(*
)/ -) / 3+'*- - Y 4 .0. 1 -.$*) .
' . "0)* . ' /*- .  #$%*. Kp > aL +*- '* ,0 *'$"  ,0 ' ' ( )/* <a> .  #$%* $- /*
)/ -$*- . )* .*+*-/) ./ /$+*  . ' /*- . 1)5*.= +*- '* ,0 .0 0.* )* - *(;) #./
# +** /$ (+*@ *4 ) 8= /**. '*. )1 "*- . (6. 0/$'$5*. .*+*-/) '*. . ' /*- .  0) ' ( )/* <p>@ *- /)/*= '*. ./$'*.  ' . ' /*- p > a )* . +'$) ' . "0)* )'  '
1)5*.   U@T 4 '"0)*.  ''*. /($7) .*+*-/) ' (4*-8 * /**. '*. . ' /*- . % (+'*
)/ -$*-@
+-*+0 ./*.
+*-
'
!0/0-
1 -.$:)  V@
3.2. Selector adyacente
3.1. Selector de hijos ' . ' /*- 4 )/ . (+'  +- . ' $*)- ' ( )/*. ,0 .*) hermanos K.0 ' ( )/*
 /-/  0) . ' /*- .$($'- ' . ' /*-  . ) )/ = + -* (04 $! - )/ ) .0 !0)$*)($ )/*@ +- . ' ($.(*L 4 ./6) . "0$*. ) ' :$"*  @ ./ . ' /*- (+'  ) .0 .$)/3$. '
 0/$'$5 +- . ' $*)- 0) ' ( )/* ,0 . hijo  */-* ' ( )/* 4 . $)$ ( $)/ ' .8(*'* +@
$
.
*).$ -
'
.$"0$ )/
% (+'*?
"signo de mayor que" K>L@ h1 + h2 { color: red }

$ )/-. ,0 ) ' . ' /*-  . ) )/ .:'* $(+*-/ ,0 0) ' ( )/* ./7  )/-*  */-*= <body>
$) + )$ )/ ( )/  '* +-*!0)* ,0 . )0 )/- = ) ' . ' /*-  #$%*. ' ' ( )/*   <h1>Titulo1</h1>
. - hijo directo 
*/-*
' ( )/*@
<h2>Subt’tulo</h2>
p > span { color: blue; } ...

<p> <h2>Otro subt’tulo</h2>

<span>Texto1</span> ...
</p> </body>

<p> *. ./$'*.  ' . ' /*- h1 + h2 . +'$) ' +-$( - ' ( )/* <h2>  ' +6"$)= + -* )* '
<a href="#"> . "0)* <h2>=
4
,0 ?
<span>Texto2</span>
</a>
'
' ( )/*
+-
 <h1> . <body>=
'
($.(*
+-
,0
'

'*.
*.
' ( )/*. <h2>@
</p>
.8=
'*.
*.
' ( )/*. <h2> 0(+' )
'
+-$( -
*)$$:)
 '
. ' /*-
4 )/ @
) ' % (+'* )/ -$*-= ' . ' /*- p > span . $)/ -+- / *(* "cualquier elemento <span> que

'
+-$( -
' ( )/* <h2> +- 
)
'
:$"*  %0./*
 .+07.
 '
' ( )/* <h1>=
+*-
sea hijo directo de un elemento <p>"= +*- '* ,0 ' +-$( - ' ( )/* <span> 0(+' ' *)$$:)
'*
,0
./
' ( )/* <h2> /($7)
0(+'
'
. "0)
*)$$:)
 '
. ' /*-
4 )/ @
 ' . ' /*-@ $) (-"*= ' . "0)* ' ( )/* <span> )* ' 0(+' +*-,0 .  . )$ )/
+ -*
)*
.
#$%*
$- /*

0)
' ( )/* <p>@
*-
'
*)/--$*=
'
. "0)*
' ( )/* <h2> )*
+- 
%0./*
 .+07.
 '
' ( )/* <h1>=
+*-
'*
,0
)*
0(+'
'
. "0)
*)$$:)
 '
. ' /*-
4 )/
4
+*-
/)/*
)*
.
'
/$'$5)* ' ($.(* % (+'* )/ -$*- . +0  ) *(+-- '. $! - )$. )/- ' . ' /*- +'$)
'*.
./$'*.
 h1 + h2@
 . ) )/
4
'
. ' /*-

#$%*.?
'
.$"0$ )/
% (+'*
+0 
. -
;/$'
+-
'*.
/ 3/*.
,0
.
(0 ./-)
*(*
'$-*.?
p a { color: red; }
p > a { color: red; } p + p { text-indent: 1.5em; }

444;&".*/4;/ 65 444;&".*/4;/ 66

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
E;
&0*./

) (0#*. '$-*. . #$/0' ,0 ' +-$( - '8)   /**. '*. +6--!*. ./7 $) )/= .'1* ' /* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
+-$( - '8)   ' +-$( - +6--!*@ ' . ' /*- p + p . ' $*) /**. '*. +6--!*. ,0 ./6)
a[class] { color: blue; }
 )/-*  0) ($.(* ' ( )/* +- 4 ,0 ./7) +-  $*. +*- */-* +6--!*@ ) */-. +'-.=
'
. ' /*- p + p . ' $*)
/**.
'*.
+6--!*.

0)
' ( )/*
.'1*
'
+-$( -
+6--!*@ /* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
' . ' /*- 4 )/ - ,0$ - ,0 '*. *. ' ( )/*. . ) hermanos= +*- '* ,0 .0 ' ( )/* a[class="externo"] { color: blue; }
padre  
. -
'
($.(*@
$
.
*).$ -
'
.$"0$ )/
% (+'*?
/* Se muestran de color azul todos los enlaces que apunten
p + p { color: red; } al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p> /* Se muestran de color azul todos los enlaces que tengan
<div> un atributo "class" en el que al menos uno de sus valores
<p>Lorem ipsum dolor sit amet...</p> sea "externo" */
</div> a[class~="externo"] { color: blue; }

)
'
% (+'*
)/ -$*-=
.*'( )/
'
. "0)*
+6--!*
.
1

*'*-
-*%*=
4
,0 ? /* Selecciona todos los elementos de la p‡gina cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglŽs */

'
+-$( -
+6--!*
)*
1
+-  $*

)$)";)
*/-*
+6--!*=
+*-
'*
,0
)*
0(+'
0)

'.
*[lang=en] { ... }
*)$$*) .
 p + p
/* Selecciona todos los elementos de la p‡gina cuyo atributo

'
. "0)*
+6--!*
1
+-  $*

*/-*
+6--!*
4
'*.
*.
*(+-/ )
'
($.(*
+- =
+*-
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
'*
,0
.
0(+' )
'.
*.
*)$$*) .
 '
. ' /*- p + p 4
'
+6--!*
(0 ./-
.0
/ 3/*
 *[lang|="es"] { color : red }
*'*-
-*%*@

'
/ - -
+6--!*
.
)0 )/-
 )/-*

0)
' ( )/* <div>=
+*-
'*
,0
)*
.
0(+' 3.4. Pseudo-clases
)$)"0)
*)$$:)
 '
. ' /*- p + p 4
,0
)$
1
+-  $*

0)
+6--!*
)$
*(+-/
+-
*)
)$)";)
*/-*
+6--!*@ 3.4.1. La pseudo-clase :first-child
 +. 0*A'. :first-child . ' $*) ' +-$( - ' ( )/* #$%*  0) ' ( )/*@ $ .
3.3. Selector de atributos
*).$ -
'
.$"0$ )/
% (+'*?
' ;'/$(* /$+*  . ' /*- . 1)5*. '* !*-() '*. . ' /*- .  /-$0/*.= ,0 + -($/ ) p em:first-child {
. ' $*)-
' ( )/*.  )
!0)$:)

.0.
/-$0/*.
4I*
1'*- .

.*.
/-$0/*.@ color: red;
}
*.
0/-*
/$+*.

. ' /*- .

/-$0/*.
.*)?
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit.

[nombre_atributo]=
. ' $*)
'*.
' ( )/*.
,0
/$ ) )
./' $*
'
/-$0/*
''(* Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim. Praesent nulla
nombre_atributo=
$) + )$ )/ ( )/

.0
1'*-@ ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p>

[nombre_atributo=valor]=
. ' $*)
'*.
' ( )/*.
,0
/$ ) )
./' $*
0)
/-$0/* ' . ' /*- p em:first-child . ' $*) ' +-$( - ' ( )/* <em> ,0 .  #$%*  0) ' ( )/* 4
''(* nombre_atributo *)
0)
1'*-
$"0'
 valor@ ,0 . )0 )/-  )/-*  0) ' ( )/* <p>@ *- /)/*= ) ' % (+'* )/ -$*- .:'* ' +-$( -
<em> .
1

*'*-
-*%*@

[nombre_atributo~=valor]=
. ' $*)
'*.
' ( )/*.
,0
/$ ) )
./' $*
0)
/-$0/*
''(* nombre_atributo 4
04*
1'*-
.
0)
'$./

+'-.
. +-.
+*-
.+$*.
)  +. 0*A'. :first-child /($7) . +0  0/$'$5- ) '*. . ' /*- . .$(+' .= *(* .
')*
)
'
,0
'
( )*.
0)

''.
.
3/( )/
$"0'
 valor@ (0 ./-

*)/$)0$:)?

[nombre_atributo|=valor]=
. ' $*)
'*.
' ( )/*.
,0
/$ ) )
./' $*
0)
/-$0/* p:first-child { ... }
''(* nombre_atributo 4
04*
1'*-
.
0)
. -$

+'-.
. +-.
*)
"0$*) .=
 - "'  )/ -$*- +'$ .0. ./$'*. ' +-$( - +6--!*  0',0$ - ' ( )/*@ $ . (*$!$ '
+ -*
,0
*($ )5
*) valor@
./
/$+*

. ' /*-
.:'*
.
;/$'
+-
'*.
/-$0/*.

/$+*
% (+'*
)/ -$*-
4
.
0/$'$5
0)
. ' /*-
*(+0 ./*?
lang ,0
$)$)
'
$$*(
 '
*)/ )$*
 '
' ( )/*@
p:first-child em {

*)/$)0$:)
.
(0 ./-)
'"0)*.
% (+'*.

./*.
/$+*.

. ' /*- .? color: red;

444;&".*/4;/ 67 444;&".*/4;/ 68

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
E;
&0*./

} :visited ,0 .:'* . +0  ) +'$-  '*. )' .= ./. +. 0*A'. . . +0  ) +'$- 

0',0$ -
' ( )/*@
<body>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit.

*)/$)0$:)
.
$)$)
'.
$*) .
 '
0.0-$*
,0
/$1)

+. 0*A'. ?
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>

:hover=
.
/$1
0)*
'
0.0-$*
+.
'
-/:)
*
0',0$ -
*/-*
' ( )/*
+0)/*-
+*-
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit.
)$(

0)
' ( )/*@
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>

:active=
.
/$1
0)*
'
0.0-$*
/$1
0)
' ( )/*=
+*-
% (+'*
0)*
+0'.
*)
'
<div>
-/:)
.*-
0)
' ( )/*@
'
./$'*
.
+'$
0-)/
0)
.+$*

/$ (+*
+-6/$( )/
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit.
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p> $(+ - +/$' =
4
,0
.:'*
0-
 .
,0
'
0.0-$*
+0'.
'
*/:)
 '
-/:)
#./
,0
'*
</div> .0 '/@
</body>

:focus=
.
/$1
0)*
'
' ( )/*
/$ )
'
!**
 '
)1 "*-=
.
 $-=
0)*
'
' . ' /*- p:first-child em . ' $*) /**. ,0 ''*. ' ( )/*. <em> ,0 . )0 )/- ) ' ( )/*
./6
. ' $*)*@
*-('( )/
.
+'$

'*.
' ( )/*. <input> 
'*.
 )/-*

0)
' ( )/* <p> ,0
. 
'
+-$( -
#$%*

0',0$ -
*/-*
' ( )/*@ !*-(0'-$*.
0)*
./6)
/$1*.
4
+*-
/)/*=
.
+0 
.-$$-
$- /( )/
)
.*.
(+*.@
' +-$( - +6--!*  ' % (+'* )/ -$*- . ' +-$( - #$%*  <body>= +*- '* ,0 .0. <em> . 1 ) 
*'*- -*%*@ ' . "0)* +6--!*  ' +6"$) )* . ' +-$( - #$%*  )$)";) ' ( )/*= +*- '* ,0  '.  !$)$$*) . )/ -$*- . .  .+- ) ,0 0) ($.(* ' ( )/* +0  1 -. ! /* +*-
.0. ' ( )/*. <em> $)/ -$*- . )* . 1 ) ! /*.@ *- ;'/$(*= ' / - - +6--!*  ' +6"$) . ' 1-$. +. 0*A'. . $! - )/ .  !*-( .$(0'/6) @ 0)* . +0'. +*- % (+'* 0) )' ,0
+-$( - #$%*  ' ' ( )/* <div>= +*- '* ,0 .0. ' ( )/*. <em> . 1 )  ' ($.( !*-( ,0 '*. !0
1$.$/*
+- 1$( )/ =
'
)'
'
! /)
'.
+. 0*A'. . :visited= :hover 4 :active@
 '
+-$( -
+6--!*@
 $*  ./ -/ -8./$ 4 ' *(+*-/($ )/* ) .  '*. ./$'*. = . $(+*-/)/
0$- ' *- ) ) ' ,0 . ./'  ) '. $! - )/ . +. 0*A'. .@ ' .$"0$ )/ % (+'*
3.4.2. Las pseudo-clases :link y :visited
(0 ./- ' ;)$* *- ) *-- /* +- ./'  - '. 0/-* +. 0*A'. . +-$)$+' . ) 0)
. +. 0*A'. . :link 4 :visited . +0  ) 0/$'$5- +- +'$- $! - )/ . ./$'*.  '*. )' ?
)' .

0)
($.(
+6"$)? a:link { ... }
a:visited { ... }


+. 0*A'. :link .
+'$

/**.
'*.
)' .
,0
/*18
)*
#)
.$*
1$.$/*.
+*- a:hover { ... }
'
0.0-$*@ a:active { ... }


+. 0*A'. :visited .
+'$

/**.
'*.
)' .
,0
#)
.$*
1$.$/*.
'
( )*.
0) *. )1 "*- . *.*' /*. *(*
)/ -) / 3+'*- - Y 4 .0. 1 -.$*) . )/ -$*- . )* .*) + .
1 5
+*-
'
0.0-$*@ 
+'$-
./.
+. 0*A'. .

'*.
' ( )/*.
,0
)*
. )
)' .@

' )1 "*- " ./$*)  !*-( 0/*(6/$ ' ($*  )' )* 1$.$/*  )' 1$.$/*@ *- ;'/$(*= /($7) . +*.$' +'$- ./$'*. *($))* 1-$. +. 0*A'. . *(+/$' .
0),0 ' 0.0-$* +0  *--- ' # 4 ' #$./*-$'  )1 "$:)  !*-( 3+'8$/= '*. )/- .8@  .$"0$ )/ - "'  +*- % (+'* .:'* . +'$  ,0 ''*. )' . ,0 ./6)
)1 "*- .
/($7)
*--)

!*-(
+ -$:$
'
'$./

)' .
1$.$/*.@ . ' $*)*.
4
)
'*.
,0
'
0.0-$*
+.
'
-/:)
+*-
)$(?

*- .0 +-*+$  !$)$$:)= '. +. 0*A'. . :link 4 :visited .*) (0/0( )/ 3'04 )/ .=  a:focus:hover { ... }

!*-(
,0
0)
($.(*
)'
)*
+0 
./-
)
'*.
*.
./*.

!*-(
.$(0'/6) @

3.4.4. La pseudo-clase :lang
*(* '*. )1 "*- . (0 ./-) +*-  ! /* '*. )' .  *'*- 50' 4 '*. )' . 1$.$/*. 
*'*-
(*-*=
.
#$/0'
(*$!$-
'*.
./$'*.
+-
+/-'*.

'
"08

./$'*
 '
.$/$*
2 ?  +. 0*A'. :lang . (+'  +- . ' $*)- ' ( )/*. ) !0)$:)  .0 $$*(@ *.
)1 "*- . 0/$'$5) '*. /-$0/*. lang= '. /$,0 /. <meta> 4 ' $)!*-($:)  ' - .+0 ./  '
a:link { color: red; }
a:visited { color: green; } . -1$*-
+-
 / -($)-
'
$$*(


' ( )/*@

$
.
*).$ -
'
.$"0$ )/
% (+'*?

3.4.3. Las pseudo-clases :hover, :active y :focus
p { color: blue; }
. +. 0*A'. . :hover= :active 4 :focus + -($/ ) ' $. 9*- 2  1-$- '*. ./$'*.  0) p:lang(es) { color: red; }
' ( )/* ) - .+0 ./  '. $*) .  ' 0.0-$*@ ' *)/--$* ,0 '. +. 0*A'. . :link 4

444;&".*/4;/ 69 444;&".*/4;/ 70

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
E;
&0*./

*. +6--!*.  ' % (+'* )/ -$*- . 1 )  *'*- 50'= .'1* '*. +6--!*. 04* *)/ )$* ./7 3.5.1. El pseudo-elemento :first-line
.-$/*
)
.+9*'=
,0
.
1 )

*'*-
-*%*@
' +. 0*A ' ( )/* :first-line + -($/ . ' $*)- ' +-$( - '8)   / 3/*  0) ' ( )/*@
*(* '*. )1 "*- . /0' . )* .*) + .  $)! -$- ' $$*(  0) ' ( )/*  +-/$-  .0 .8=
'
.$"0$ )/
- "'  (0 ./-
)
(4;.0'.
'
+-$( -
'8) 


+6--!*?
*)/ )$*= ' 0.*  ./ '. ./6 (04 '$($/* .'1* ,0 ' +6"$) 0/$'$  !*-( 3+'8$/ '*.
p:first-line { text-transform: uppercase; }
/-$0/*. lang?
<p lang="en">Lorem ipsum dolor sit amet...</p> ./ +. 0*A ' ( )/* .:'* . +0  0/$'$5- *) '*. ' ( )/*.  '*,0 4 '.  '.  /*. 
<div lang="fr"> '.
/'.@
<p>Lorem ipsum dolor sit amet...</p>
<p lang="es_ES">Lorem ipsum dolor sit amet...</p>  +0  ) *($)- 1-$*. +. 0*A ' ( )/*.  /$+* :first-line +- - - ! /*.
</div> 1)5*.?
<p lang="en">Lorem ipsum dolor sit amet...</p>
<ul> div:first-line { color: red; }
<li lang="fr">Lorem ipsum dolor sit amet...</li> p:first-line { text-transform: uppercase; }
</ul>
<div>
 +. 0*A'. :lang(xx) . (04 $! - )/ ' . ' /*-  /-$0/*. [lang|=xx]= /' 4 *(* <p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
(0 ./-)
'.
.$"0$ )/ .
- "'.?
<p>Lorem ipsum dolor sit amet...</p>
*[lang|=es] { ... } /* selector de atributo */ </div>
*:lang(es) { ... } /* pseudo-clase */
) ' % (+'* )/ -$*-= ' +-$( - '8)   ' +-$( - +6--!* /($7) . ' +-$( - '8)   '
<body lang="es"> ' ( )/* <div>= +*- '* ,0 . ' +'$) '. *. - "'.  4 .0 / 3/* . 1 ) (4;.0'. 4 
<p>Lorem ipsum dolor sit amet...</p>
*'*-
-*%*@
</body>

' . ' /*- *[lang|=es] . ' $*) /**. '*. ' ( )/*.  ' +6"$) ,0 / )") 0) /-$0/* 3.5.2. El pseudo-elemento :first-letter
''(* lang 04* 1'*- (+$  +*- es@ ) ' % (+'* )/ -$*-= .*'( )/ ' ' ( )/* <body>
' +. 0*A ' ( )/* :first-letter + -($/ . ' $*)- ' +-$( - ' /-  ' +-$( - '8)  
0(+'
*)
'
*)$$:)
 '
. ' /*-@
/ 3/*  0) ' ( )/*@  ./ !*-(= ' .$"0$ )/ - "'  (0 ./- ) (4;.0'. ' +-$( -
*- */- +-/ = ' . ' /*- *:lang(es) . ' $*) /**. '*. ' ( )/*.  ' +6"$) 04* $$*( ' /-
 '
/ 3/*


+6--!*?
.  ' .+9*'= .$) / ) - ) 0 )/ ' (7/** (+' * +*- ' )1 "*- +- 1 -$"0- ' p:first-letter { text-transform: uppercase; }
$$*(   ' ( )/*@ ) ./ .*= /)/* ' ' ( )/* <body> *(* ' ' ( )/* <p> 0(+' )
./
*)$$:)@ *. .$")*.  +0)/0$:) 4 '*. -/ - . *(* '. *($''. ,0 . )0 )/-) )/ . 4  .+07.

'
+-$( -
' /-
/($7)
.
1 )
! /*.
+*-
./
+. 0*A ' ( )/*@
3.5. Pseudo-elementos ./ +. 0*A ' ( )/* .:'* . +0  0/$'$5- *) '*. ' ( )/*.  '*,0 4 '.  '.  /*. 
'.
/'.@
*. . ' /*- .  = '. +. 0*A'. . 4 /**. '*. ' ( )/*.  )* .*) .0!$$ )/ . +-
+* - +'$- ./$'*.  '"0)*. ' ( )/*. .+ $' .@ $ .  .  +*- % (+'* ($- ' ./$'*  3.5.3. Los pseudo-elementos :before y :after
'
+-$( -
'8) 

/ 3/*

0)
' ( )/*=
)*
.
+*.$'
# -'*
*)
'.
0/$'$ .
)/ -$*- .@
*. +. 0*A ' ( )/*. :before 4 :after . 0/$'$5) ) *($)$:) *) ' +-*+$  content 
 +-$( - '8)   ' / 3/* )*-('( )/ . 1-$' +*-,0 ' 0.0-$* +0  0( )/- 4
 +-
9$-
*)/ )$*.
)/ .
*
 .+07.
 '
*)/ )$*
*-$"$)'

0)
' ( )/*@
$.($)0$- ' 1 )/)  ' )1 "*-= +0  $.+*) -  (6. * ( )*. - .*'0$:) ) .0 (*)$/*- 4
/($7)
+0 
0( )/-
*
$.($)0$-
'
/(9*

' /-
 '
/ 3/*@ . .$"0$ )/ . - "'.  9 ) ' / 3/* Cap’tulo -  ')/   /8/0'*  . $:) <h1> 4 '
-6/ - .  /-6.


+6--!*

'
+6"$)?
 ;)$ !*-(  +* - . ' $*)- ./*. ' ( )/*. .+ $' . . ( $)/ '*.
+. 0*A ' ( )/*.
 !$)$*.
+*-  +-
./
+-*+:.$/*@ h1:before { content: "Cap’tulo - "; }
p:after { content: "."; }

' *)/ )$* $). -/* ( $)/ '*. +. 0*A ' ( )/*. :before 4 :after . /$ ) ) 0 )/ )
'*.
*/-*.
+. 0*A ' ( )/*. :first-line 4 :first-letter@

444;&".*/4;/ 71 444;&".*/4;/ 72

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
E;
&0*./

3.6. Selectores de CSS 3 *. +. 0*A ' ( )/*.   U@T . ()/$ ) ) )  V= + -* ($ .0 .$)/3$. 4 #*- .
0/$'$5) :: )
1 5
 :  ')/
 '
)*(-


+. 0*A ' ( )/*?
 !0/0- 1 -.$:)  V $)'04 /**. '*. . ' /*- .   U@T 4 9 */-.   ). 

::first-line=
. ' $*)
'
+-$( -
'8) 
 '
/ 3/*

0)
' ( )/*@
. ' /*- .= +. 0*A'. . 4 +. 0*A ' ( )/*.@  '$./ +-*1$.$*)'  )*1  . 4 .0 3+'$$:)
 /'' . +0  )*)/-- ) ' (:0'*  . ' /*- .   V K#//+?II222@2V@*-"II
::first-letter=
. ' $*)
'
+-$( -
' /-
 '
/ 3/*

0)
' ( )/*@
..VA. ' /*-.IL @

::before=
. ' $*)
'
+-/
)/ -$*-
'
*)/ )$*

0)
' ( )/*
+-
$). -/-
)0 1*
)
+-$( -
'0"-=  V
9
/- .
)0 1*.
. ' /*- .

/-$0/*.? *)/ )$*
" ) -*@

elemento[atributo^="valor"]=
. ' $*)
/**.
'*.
' ( )/*.
,0
$.+*) )

.
::after=
. ' $*)
'
+-/
+*./ -$*-
'
*)/ )$*

0)
' ( )/*
+-
$). -/-
)0 1*
/-$0/*
4
04*
1'*-
*($ )5
3/( )/
+*-
'
 )

/ 3/*
$)$@ *)/ )$*
" ) -*@

elemento[atributo$="valor"]=
. ' $*)
/**.
'*.
' ( )/*.
,0
$.+*) )

.  V
9
 (6.
0)
)0 1*
+. 0*A ' ( )/*?
/-$0/*
4
04*
1'*-
/ -($)
3/( )/
+*-
'
 )

/ 3/*
$)$@

::selecion=
. ' $*)
'
/ 3/*
,0
#
. ' $*)*
0)
0.0-$*
*)
.0
-/:)
*
/ '*@

elemento[atributo*="valor"]=
. ' $*)
/**.
'*.
' ( )/*.
,0
$.+*) )

.
. (4*- . )*1  .   V . +-*0 ) ) '. +. 0*A'. .= 4 ,0 . 9 ) TU )0 1.=
/-$0/*
4
04*
1'*-
*)/$ )
'
 )

/ 3/*
$)$@
)/-
'.
0' .
.
)0 )/-)?

./
!*-(=
.
+0  )
- -
- "'.  /)
15.
*(*
'.
.$"0$ )/ .?

elemento:nth-child(numero)=
. ' $*)
'
' ( )/*
$)$*
+ -*
*)
'
*)$$:)

/* Selecciona todos los enlaces que apuntan a una direcci—n de correo electr—nico */ ,0
. 
'
#$%*
)7.$(*

.0
+- @
./
. ' /*-
.
;/$'
+-
. ' $*)-
'
. "0)*
a[href^="mailto:"] { ... }
+6--!*

0)
' ( )/*=
'
,0$)/*
' ( )/*

0)
'$./=
/@
/* Selecciona todos los enlaces que apuntan a una p‡gina HTML */
elemento:nth-last-child(numero)=
$7)/$*
'
)/ -$*-
+ -*
'
);( -*
$)$*
.
a[href$=".html"] { ... }
(+$ 5

*)/-
 .
'
;'/$(*
#$%*@
/* Selecciona todos los t’tulos h1 cuyo atributo title contenga la palabra "cap’tulo" */
elemento:empty=
. ' $*)
'
' ( )/*
$)$*
+ -*
*)
'
*)$$:)

,0
)*
/ )"
h1[title*="cap’tulo"] { ... }
)$)";)
#$%*@

*)$$:)
$(+'$
,0
/(+**
+0 
/ ) -
)$)";)
*)/ )$*

/ 3/*@
/-*  '*. )0 1*. . ' /*- .   V . ' "selector general de elementos hermanos"= ,0
elemento:first-child 4 elemento:last-child=
. ' $*))
'*.
' ( )/*.
$)$*.
+ -*
" ) -'$5 ' . ' /*- 4 )/   U@T@ 0 .$)/3$. . elemento1 ~ elemento2 4 . ' $*) *)
'
*)$$:)

,0
. )
- .+ /$1( )/
'*.
+-$( -*.
*
;'/$(*.
#$%*.

.0
' ( )/*
' elemento2 ,0 . # -()*  elemento1 4 . )0 )/-  /-6. ) ' :$"*  @ ) ' +- @
. ' /*- 4 )/ ' *)$$:) $$*)' - ,0 '*. *. ' ( )/*.  8) ./- 0)*  /-6. 

elemento:nth-of-type(numero)=
. ' $*)
'
' ( )/*
$)$*
+ -*
*)
'
*)$$:)

*/-*
)
'
:$"*  =
($ )/-.
,0
#*-
'
;)$
*)$$:)
.
,0
0)*
./7
 /-6.

*/-*@
,0
. 
'
)7.$(*
' ( )/*
# -()*

.
/$+*@
$
.
*).$ -
'
.$"0$ )/
% (+'*?

elemento:nth-last-of-type(numero)=
$7)/$*
'
)/ -$*-
+ -*
'
);( -*
$)$*
.
h1 + h2 { ... } /* selector adyacente */
(+$ 5

*)/-
 .
'
;'/$(*
#$%*@
h1 ~ h2 { ... } /* selector general de hermanos */
'"0). +. 0*A'. . *(* :nth-child(numero) + -($/ ) ' 0.*  3+- .$*) . *(+' %.
<h1>...</h1>
+-
- '$5-
. ' $*) .
1)5.?
<h2>...</h2>
<p>...</p> li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una lista */
<div> li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una lista */
<h2>...</h2>
</div> /* Las siguientes reglas alternan cuatro estilos diferentes para los p‡rrafos */
<h2>...</h2> p:nth-child(4n+1) { ... }
p:nth-child(4n+2) { ... }
' +-$( - . ' /*- Kh1 + h2L .:'* . ' $*) ' +-$( - ' ( )/* <h2>  ' +6"$)= 4 ,0 . ' p:nth-child(4n+3) { ... }
;)$* ,0 0(+' ,0 . # -()*  <h1> 4 . )0 )/- %0./*  /-6. ) ' :$"*  @ *- .0 p:nth-child(4n+4) { ... }
+-/ = ' . "0)* . ' /*- Kh1 ~ h2L . ' $*) /**. '*. ' ( )/*. <h2>  ' +6"$) .'1* '
(+' )* ' +. 0*A'. :nth-of-type(numero) . +0  ) - - - "'.  ,0 '/ -) ) '
. "0)*@ 0),0 ' . "0)* <h2> . )0 )/-  /-6.  <h1> ) ' :$"*  = )* .*)
+*.$$:)

'.
$(6" ) .
)
!0)$:)

'
+*.$$:)

'
$(" )
)/ -$*-?
' ( )/*.
# -()*.
+*-,0
)*
/$ ) )
'
($.(*
' ( )/*
+- @

444;&".*/4;/ 73 444;&".*/4;/ 74

3(7* ,#01&*
E;
&0*./ 
3(7* ,#01&*
F;
.*,"/
3(7/

img:nth-of-type(2n+1) { float: right; }

img:nth-of-type(2n) { float: left; }

/-*  '*. )0 1*. . ' /*- . ,0 $)'0$-6  V . :not()= ,0 . +0  0/$'$5- +- . ' $*)-
Cap’tulo 4. Propiedades avanzadas
/**.
'*.
' ( )/*.
,0
)*
0(+' )
*)
'
*)$$:)

0)
. ' /*-?
' ./6)-  U@T $)'04 TTX +-*+$  . ,0 -) ' (* '*  %. Kbox modelL= '
:not(p) { ... } /* selecciona todos los elementos de la p‡gina que no sean p‡rrafos */ /$+*"-!8= '. /'.= '. '$./.= ' +*.$$*)($ )/*  '*. ' ( )/*.= ' " ) -$:)  *)/ )$*.
:not(#especial) { ... } /* selecciona cualquier elemento cuyo atributo id no sea
4
'*.
( $*.
$(+- .*.
4
0$/$1*.@
"especial" */
0),0 ' (4*-8  $. 9*- . 2  *)* ) 4 0/$'$5) .$ /*. '. +-*+$  .   U@T=
0),0 /*18 !'/) (0#*. 9*. #./ ,0 ' 1 -.$:)  V .0./$/04  ' /0' 1 -.$:) 
)* .$ (+- # ) 0.*  /*. .0. +*.$$'$ .@ '"0). +-*+$  .   U@T #) .$*
U@T= '*. )1 "*- . ,0 (6. . +- *0+) +*- '*. ./6)- . K+ -= !-$ 4 $- !*3L $)'04 )
$)!-0/$'$5.
#./
#
+**
/$ (+*
+*-,0
'*.
)1 "*- .
)*
'.
.*+*-/)@
.*+*-/
+-
1-$*.
*
.$
/**.
'*.
. ' /*- .
  V@
!*-/0)( )/ = '*. )1 "*- . ,0 (6. . +- *0+) +*- '*. ./6)- . K$- !*3= !-$ 4
3$./ 0) # --($ )/ ''(   ' /*-. / ./ K#//+?II222@..V@$)!*I. ' /*-.A/ ./IL ,0
+ -L 4 $)'04 ) .*+*-/ *(+' /*  .$ /*. '. +-*+$  .   U@T= *) ' ;)$
+ -($/
*(+-*-
'*.
. ' /*- .
,0
.*+*-/
'
)1 "*-
*)
'
,0
.
#
'
+-0 @
3 +$:)  '. +-*+$  . - '$*). *) '*. ( $*. 0$/$1*.@ *- .0 +-/ =
)/ -) /
3+'*- -
[
+-*( /
,0
$)'0$-6
.*+*-/
*(+' /*

/*.
'.
+-*+$  .
  U@T@

4.1. Propiedad white-space

Definici—n /0&
&
0.0'"(0*

&*/
/,"*/
(
&(*
(*
6
/+&*
1(*

&*/
/" 1"(0/
3&*./:
Valores
(*.'&
,.
(*4.,
permitidos

,.=4.,
,.=&"(
"(!."0

Valor inicial (*.'&

Se aplica a **/
&*/
&'(0*/
V‡lida en '"*/
3"/1&/
Se hereda /"
Definici—n en
!00,:<<444;4E;*. <<DC<050;!0'&A,.*,=4!"0=/,
el est‡ndar

' /-/($ )/*  '*. .+$*. ) ')* ) ' :$"*  . 0)  '. -/ -8./$. (6.
 .*) -/)/ . +- '*. $. 9*- . 2  ,0 *($ )5)  - - +6"$).@  *)/$)0$:) .
(0 ./-
:(*
1$.0'$5)
'*.
)1 "*- .
*.
+6--!*.

% (+'*?

*- ( $+.0( *'*- .$/ ( /= *). / /0 - $+$.$)" '$/@   )*) . ( ,0$. / ''0. 10'+0//
'**-/$.@ $1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( /$)$0)/ +  = / ')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@

*- ( $+.0( *'*- .$/ ( /= *). / /0 - $+$.$)" '$/@   )*) . ( ,0$. / ''0. 10'+0//
'**-/$.@ $1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( /$)$0)/ +  = / ')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@

444;&".*/4;/ 75 444;&".*/4;/ 76

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

0),0 '*. *. +6--!*. )/ -$*- . . 1$.0'$5)  ' ($.( !*-(= ) - '$ .0 :$"* 
pre-wrap?
.
*(+*-/
$"0'
,0 pre=
+ -*
.
$)/-*0 )
'*.
.'/*.

'8) 
,0
. )
.
*(+' /( )/
$! - )/ ? )  .-$*.
+-
,0
'*.
*)/ )$*.

/ 3/*
)0)
.
.'")

.0
' ( )/*
*)/ ) *-@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus
pre-line?
.
'$($))
'*.
.+$*.
)
')*
.*-)/ .=
+ -*
.
- .+ /)
'*.
.'/*.

vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum
'8) 
*-$"$)' .
4
.
- )
/)/*.
.'/*.

'8) 
*(*
. )
)  .-$*.
+-
,0
'
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec mollis
nunc in leo.</p> *)/ )$*

/ 3/*
)*
.
.'"

.0
' ( )/*
*)/ ) *-@

*(* '. 3+'$$*) . $)'08. ) ' ./6)-  U@T +0  ) '' "-  . - *)!0..= ' .$"0$ )/
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor /'
- .0(
'
*(+*-/($ )/*


1'*-?
id ornare ultrices, ligula ipsum tincidunt pede, et blandit
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</p> Valor Respeta espacios en blanco Respeta saltos de l’nea Ajusta las l’neas
normal (* (* /"
' . "0)* +6--!* *)/$ ) )0( -*.*. .+$*. ) ')* 4 .'/*.  '8) @ $) (-"*= *(*
'*. )1 "*- . '$($)) 0/*(6/$( )/ /**. '*. .+$*. ) ')* .*-)/ .= '*. *. pre /" /" (*
+6--!*.
.
1 )
3/( )/
$"0'@ nowrap (* (* (*

) ' ./6)-  0) "espacio en blanco" +0  . - 0) .'/*  '8) = 0) /0'*- 4 0) pre-wrap /" /" /"
.+$* ) ')* )*-('@ *. )1 "*- . '$($))  !*-( 0/*(6/$ /**. '*. .+$*. ) pre-line (* /" /"
')*
.*-)/ .
.'1*
'
.+$*
)
')*
,0
. +-
'.
+'-.
 '
/ 3/*@

 ;)$ 3 +$:)  ./ *(+*-/($ )/* . ' /$,0 / <pre>   = 0/$'$5 +-  *)/$)0$:) . (0 ./- ' ! /*   (* '*  /-/($ )/*  .+$*. ) ')* .*-
0) ($.(* +6--!* ,0 *)/$ ) .+$*. ) ')* 4 .'/*.  '8)  4 ,0 . )0 )/-  )/-* 
(*./-- / 3/* ,0 4 /$ ) !*-(/* K.0 )*(- 1$ )  preformateadoL 4 ,0 +*- /)/* - .+ /
0)
' ( )/*
*)/ ) *-

)#0-
'$($/?
/**.
'*.
.+$*.
)
')*
4
/**.
'*.
.'/*.

'8) ?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor [white-space: normal] *- ( $+.0( *'*- .$/
id ornare ultrices, ligula ipsum tincidunt pede, et blandit ( /= *). / /0 - $+$.$)" '$/@  ./$0'0(
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.
$/0(@ '.. +/ )/ /$/$ .*$*.,0  '$/*-
/*-,0 )/ + - *)0$ )*./-= + - $) +/*.
#4( ) *.@
'
:$"*   '
% (+'*
)/ -$*-
.?
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor [white-space: pre] *- (
$+.0(
*'*-
.$/
( /=





*). / /0 -
$+$.$)"
'$/@
id ornare ultrices, ligula ipsum tincidunt pede, et blandit  ./$0'0(




$/0(@
'..
+/ )/
/$/$








.*$*.,0

'$/*-



/*-,0 )/
+ -
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</pre>
*)0$




)*./-=
+ -
$) +/*.





#4( ) *.@
 +-*+$  white-space + -($/ 1-$- ' *(+*-/($ )/*  '*. .+$*. ) ')*@ '
./6)-  U@T
 !$)
$)*
(* '*.
$! - )/ .

/-/($ )/*

.+$*.
)
')*?
[white-space: pre-wrap] *- ( $+.0( *'*-

normal?
'*.
.+$*.
)
')*
.*-)/ .
4
'*.
.'/*.

'8) 
.
'$($))@
*
*./)/ =
' .$/
( /=





*). / /0 -
$+$.$)"
'$/@
/ 3/*
.
(0 ./-
)
/)/.
'8) .
*(*
. 
)  .-$*
+-
,0
.0.
*)/ )$*.
)*
.
.'")  ./$0'0( $/0(@ '.. +/ )/ /$/$
 '
' ( )/*
*)/ ) *-@ .*$*.,0

'$/*-



/*-,0 )/
+ -
*)0$




)*./-=
+ -
$) +/*.





#4( ) *.@

pre?
)*
.
'$($))
'*.
.+$*.
)
')*
.*-)/ .
4
.:'*
.
(0 ./-)
'*.
.'/*.

'8) 
$)'0$*.
)
'
/ 3/*
*-$"$)'@
./
*(+*-/($ )/*
+0 
+-*1*-
,0
'*.
*)/ )$*.

/ 3/*
.
.'")

.0
' ( )/*
*)/ ) *-@ [white-space: nowrap] *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 ./$0'0(
$/0(@
'..
+

nowrap?
.
*(+*-/
$"0'
,0 normal )
'*.
.+$*.
)
')*=
+ -*
)*
9
.'/*.

'8) 
)
'
/ 3/*
*-$"$)'=
+*-
'*
,0
'*.
*)/ )$*.
.
+0  )
.'$-

.0
' ( )/*
*)/ ) *-@

444;&".*/4;/ 77 444;&".*/4;/ 78

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

4.2. Propiedad display

[white-space: pre-line] *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@ Definici—n /0&
&
0",*

$
(.
,*.
1(
&'(0*
 ./$0'0(
$/0(@
'..
+/ )/
/$/$
.*$*.,0 (*
6
/+&*
1(*

&*/
/" 1"(0/
3&*./:

'$/*-
/*-,0 )/
+ -
"(&"(
&*%
&"/0="0'
*)0$
)*./-=
+ -
$) +/*.
#4( ) *.@

.1(="(
"(&"(=&*%
0&

Valores
"(&"(=0&
0&=.*4= .*1,
0&=!.= .*1,

*. 1'*- . (6. 0/$'$5*. .*) normal= pre 4 pre-wrap@ ' 1'*- normal . +0  (+' - +*- permitidos
% (+'*
)
0)
' ( )/* <pre> ,0
.
,0$ -
(*./--
*(*
.$
!0 -
0)
+6--!*?
0&=**0.= .*1,
0&=.*4
0&=*&1'(= .*1,

0&=*&1'(
0&=&&
0&=,0"*(

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor
(*(
"(!."0
id ornare ultrices, ligula ipsum tincidunt pede, et blandit
Valor inicial "(&"(
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</pre>
Se aplica a **/
&*/
&'(0*/

<pre style="white-space: normal">Lorem ipsum dolor sit amet, consectetuer V‡lida en &&
adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus Se hereda (*
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit
Definici—n en
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in !00,:<<444;4E;*. <<DC<3"/1.(;!0'&A,.*,="/,&6
el est‡ndar
leo.</pre>
 +-*+$  display . 0)  '. +-*+$  .  (6. $)!-0/$'$5.@ 0),0 /**. '*.
 ' ($.( !*-(= ' 1'*- pre . +0  (+' - ) 0) +6--!*  / 3/* ,0 . ,0$ - (*./-- $. 9*- . *)* ) ./ +-*+$  4 0/$'$5) .0. 1'*- . inline= block 4 none= '.
*(*
.$
!0 -
0)
' ( )/* <pre>? +*.$$'$ .
 display .*)
(0#*
(6.
1)5.@

 # #*= ' +-*+$  display . 0)  '. (6. *(+' %.   U@T= 4 ,0 ./'  ' /$+*
_+` *- ( $+.0( *'*- .$/ ( /= *). / /0 - $+$.$)" '$/@   )*) . ( ,0$. / ''0.  ' % ,0 " ) -  ' ( )/*@  +-*+$  display . /) *(+' % ,0 .$ )$)";)
10'+0// '**-/$.@ $1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( /$)$0)/ +  = )1 "*-
.
+5

(*./--
*-- /( )/
/**.
.0.
1'*- .@
/
')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@_I+`
' 1'*- (6. . )$''*  display . none ,0 # ,0 ' ' ( )/* )* " ) - )$)"0) %@ '
- .0'/* . ,0 ' ' ( )/*  .+-  +*- *(+' /*  ' +6"$) 4 )* *0+ .$/$*= +*- '* ,0
'*. ' ( )/*. 4 )/ . *0+) .0 '0"-@ $ . 0/$'$5 ' +-*+$  display: none .*- 0)
_+
./4' ^Q2#$/ A.+ ?
+- Q` *- (
$+.0(



*'*-



.$/
( /=


*). / /0 -
$+$.$)"




'$/@
' ( )/*=
/**.
.0.
 . )$ )/ .
/($7)
 .+-  )
+*-
*(+' /*

'
+6"$)@
 
)*)
. (


,0$.
/ ''0.
10'+0//






'**-/$.@
$1(0.
! -( )/0(=
/*-/*-
$
*-)-



0'/-$ .=
'$"0'
$+.0(
/$)$0)/






+  =
/
')$/ $ . ,0$ - # - 0) ' ( )/* $)1$.$' = .  $-= ,0 )* . 1  + -* ,0 .$" *0+)* '
. (
+ 
.0.$+$/




+  @
0''
0-.0.



+*-/
. (@
*) 
(*''$.
)0)
$)
' *@_I+` ($.(* .$/$*= .   0/$'$5- ' +-*+$  visibility@  +-*+$  display: none . 0/$'$5
#$/0'( )/ ) +'$$*) . 2  $)6($. - . *) 1-$+/ 4 ,0 (0 ./-)I*0'/)
*)/ )$*.
0)*
'
0.0-$*
- '$5
'"0)
$:)
*(*
+0'.-
0)
*/:)
*
0)
)' @
*- ;'/$(*= ' 1'*- pre-wrap . (04 ;/$' 0)* . ,0$ - (*./-- 0) / 3/*  ' !*-( (6. !$ '
+*.$'  .0 !*-(/* *-$"$)' K- .+ /)* .+$*. ) ')* 4 .'/*.  '8) L + -* .$) ,0 ' *. */-*. *. 1'*- . (6. 0/$'$5*. .*) block inline ,0 # ) ,0 ' %  0) ' ( )/*
*)/ )$*

/ 3/*
.
.'"

.0
' ( )/*
*)/ ) *-@ .   '*,0 * ) '8)  - .+ /$1( )/ @ ' .$"0$ )/ % (+'* (0 ./- 0) +6--!* 4 1-$*.
)' .

'*.
,0
.
' .
#
9$*
0)
*-
+-
(*./--
'
.+$*
*0+*
+*-

%?

444;&".*/4;/ 79 444;&".*/4;/ 80

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

)*  '*. 1'*- . (6. 0-$*.*.  display . inline-block= ,0 -  %. ,0 .*)  '*,0 4
*- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@ ) '8)   !*-( .$(0'/6) @ ) %  /$+* inline-block . *(+*-/ *(* .$ !0 - 
'*,0 =
+ -*
- .+ /*

'*.
' ( )/*.
,0
'
-* )
.
0)
%
)
'8) @
*- (
$+.0( KRL *) 
(*''$.
)0)
$)
' * KRL $1(0.
! -( )/0( KRL
' )'  ' .$"0$ )/ % (+'* .  /$+* inline-block= '* ,0 + -($/ +*- % (+'* ./'  -'
*(* ' +6--!* . +*-  ! /* 0) ' ( )/*  '*,0 K"block element"L= *0+ /** ' .+$* 0)
/(9*
( $)/
'
+-*+$  width?
$.+*)$' #./ ' !$)'  .0 '8) = 0),0 .0. *)/ )$*. )* *0+ ) /** ' .$/$*@ *- .0 +-/ =
'*. )' . +*-  ! /* .*) ' ( )/*. ) '8)  K"inline element"L= +*- '* ,0 .0 % .:'* *0+ '
*- ( $+.0( *'*- .$/ ( /= *). / /0 - $+$.$)" '$/@   )*) . ( ,0$. / ''0. 10'+0//
.+$*
)  .-$*
+-
(*./--
.0.
*)/ )$*.@
'**-/$.@ $1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( /$)$0)/ +  = /
$ . +'$ ' +-*+$  display: inline ' +6--!*  ' % (+'* )/ -$*-= .0 % . *)1$ -/ ')$/ . ( +  .0.$+$/ +  @ 0'' 0-.0. +*-/ . (@ *)  (*''$. )0) $) ' *@
) 0) ' ( )/* ) '8)  4 +*- /)/* .:'* *0+ ' .+$* )  .-$* +- (*./-- .0.
[display:
*)/ )$*.?
inline-block, width:
25%] 0$.,0 . (+ -=
[display: inline] *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@ *- (
$+.0(
(") .  +#- /-
KRL *) 
(*''$.
)0)
$)
' * KRL $1(0.
! -( )/0( KRL
/$)$0)/= ,0( 0-)
+$0. *'*-= 
- 1$.0'$5- (6. '-( )/ ' ($* ) ' /$+*  %= ' .$"0$ )/ % (+'* (0 ./- 0)
$")$..$( . ( ) ,0
($.(*
+6--!*
'-"*
*) display: block 4 display: inline?
$ +0-0.@ /$( '0/0.
1$1 --
)$.$@ KRL
)/ " - '**-/$. 0(.) ! '$.@ -. 1 ) )/$.@ *-$ 0-.0.=

[display: block] *- ( $+.0( *'*- .$/ ( /= *). / /0 - $+$.$)" '$/@   )*) . ( ,0$. / ''0. 1$/ $0'$. +0'1$)-= /0-+$. )$# +*.0 - )$.'= .  1 #$0' (.. *-$ / 0$@ *-$
/ ''0. 10'+0// '**-/$.@ $1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( +  $+.0(= +*-/ ,0$.= 1 ) )/$. /= 0''(*-+ - $)= ( /0.@ 0'' !$'$.$@ 0$.,0 '*- /
/$)$0)/ +  = / ')$/ . ( +  .0.$+$/ +  @ 0'' 0-.0. +*-/ . (@ *)  (*''$. )0) (*' ./$
($@
/
(*''$.
'$/
" /
0-)@
$)
' *@

[display: inline] *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 
)*)
. (
,0$. $ /0 )1 "*- .*+*-/ ' 1'*- inline-block= ' % (+'* )/ -$*- .   1$.0'$5- /' 4 *(*
/ ''0.
10'+0//
'**-/$.@
$1(0.
! -( )/0(=
/*-/*-
$
*-)-
0'/-$ .=
'$"0'
$+.0(
/$)$0)/ (0 ./-
'
.$"0$ )/
$(" )?
+  =
/
')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@

 ' ($.( !*-(= .$ ) '*. )' .  ' % (+'* )/ -$*- . (+'  ' +-*+$  display:
block . /-).!*-() ) ' ( )/*.  '*,0 = +*- '* ,0 .$ (+- (+$ 5) ) 0) )0 1 '8) 
4 .$ (+- *0+) /** ' .+$* $.+*)$' ) ' '8) = 0),0 .0. *)/ )$*. )* *0+ ) /**
'
.$/$*?

*- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@

[display: block] *- (
$+.0( KRL

[display: block] *) 
(*''$.
)0)
$)
' * KRL

[display: block] $1(0.
! -( )/0( KRL

" 1.
F;C;
$',&*
&
3&*.
"(&"(=&*%

&
,.*,"
"/,&6

444;&".*/4;/ 81 444;&".*/4;/ 82

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

/-*  '*. 1'*- .  !$)$*. +*- ' +-*+$  display . list-item= ,0 # ,0 0',0$ - <p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong>
Lorem ipsum</p>
' ( )/*  0',0$ - /$+* . (0 ./- *(* .$ !0 - 0) ' ( )/*  0) '$./ K ' ( )/* <li>L@
<p style="display: block; border: 2px solid #000;"><strong>[display: block]</strong>
' .$"0$ )/ % (+'* (0 ./- /- . +6--!*. ,0 0/$'$5) ' +-*+$  display: list-item +- dolor sit amet, consectetuer adipiscing elit.</p>
.$(0'-
,0
.*)
0)
'$./

' ( )/*.

/$+* <ul>?
<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong>
Lorem ipsum</p>
<p style="display: inline; border: 2px solid #000;"><strong>[display: inline]</strong>
J *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
dolor sit amet, consectetuer adipiscing elit.</p>
J 
)*)
. (
,0$.
/ ''0.
10'+0//
'**-/$.@
) ' /0'$ .:'* ' ;'/$( 1 -.$:)  ' )1 "*- + - . +5  (*./-- *-- /( )/
J$1(0. ! -( )/0(= /*-/*- $ *-)- 0'/-$ .= '$"0' $+.0( /$)$0)/ +  = / ')$/ . ( '
% (+'*
)/ -$*-=
/'
4
*(*
(0 ./-
'
.$"0$ )/
$(" )?
+ 
.0.$+$/
+  @


*)/$)0$:)
.
(0 ./-
'
:$"*   '
% (+'*
)/ -$*-?

<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus vulputate
" 1.
F;D;
$',&*
&
3&*.
.1(="(

&
,.*,"
"/,&6
lobortis.</p>
<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id ornare ' ./6)-  U@T $)'04 0) % (+'*  ' +*.$' 0.*  ' 1'*- run-in@ ) ./ % (+'*= 0)
ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.</p>
/8/0'*  . $:) <h3> -  0) % run-in=  !*-( ,0 0)* 1 . "0$*  0) +6--!*= '
*. ' ( )/*. *) ' +-*+$  display: list-item .*) 3/( )/ $"0' . ,0 '*. /$/0'- se mete  )/-*
 '
+6--!*?
' ( )/*. <li>  ! /*.  .0 1$.0'$5$:)= +*- '* ,0 . +0  ) 0/$'$5- '. +-*+$  .  <h3 style="display: run-in">Lorem ipsum dolor sit amet</h3>
'$./.
*(* list-style-type= list-style-image= list-style-position 4 list-style@ <p>Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare
ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus
)*  '*. 1'*- . (6. 0-$*.*.  ' +-*+$  display . run-in= ,0 " ) - 0) %  porta sem. Donec mollis nunc in leo. Integer lobortis accumsan felis.</p>
'*,0 * 0) % ) '8)   + )$ )*  ' *)/ 3/*= .  $-=  + )$ )*  .0. ' ( )/*.
' - ./*  1'*- .  ' +-*+$  display ./6) - '$*)*. *) '. /'. 4 # ) ,0 0)
4 )/ .@
'
*(+*-/($ )/*

'.
%.

/$+* run-in .
-$"
+*-
'.
.$"0$ )/ .
- "'.?
' ( )/* . (0 ./- *(* .$ !0 - 0) +-/  0) /'? !$'= *'0()=  ' * "-0+*.  !$'.I

$
'
% run-in *)/$ )
0)
%

'*,0 =
'
% run-in .
*)1$ -/
)
0)
%
 *'0().@ *. 1'*- .  !$)$*. +*- ' +-*+$  display .*) inline-table= table-row-group=
'*,0 @ table-header-group= table-footer-group= table-row= table-column-group= table-column=

$
 .+07.

'
% run-in .
)0 )/-
0)
%

'*,0
K,0
)*
./7
+*.$$*)
 table-cell= table-caption@

!*-(
.*'0/
4
/(+**
./7
+*.$$*)

!*-(
!'*/)/ L=
'
% run-in .
*)1$ -/ 0),0 '*. 1'*- . - '$*)*. *) '. /'. .*) '*. (6. 1)5*.= /($7) .*) '*. ,0 + *-
)
0)
%
)
'8) 
)
'
$)/ -$*-

'
%

'*,0 @ .*+*-/) '*. )1 "*- .@  *)/$)0$:) . (0 ./- 0) % (+'* *) /- . +6--!*.  / 3/* ,0

)
0',0$ -
*/-*
.*=
'
% run-in .
*)1$ -/
)
0)
%

'*,0 @ ./'  )
'
+-*+$  display: table-cell?

' .$"0$ )/ % (+'* (0 ./- 0) ($.( %  /$+* run-in ,0 . 1$.0'$5  !*-( (04
[display: table-cell] [display: table-cell]
) [display: table-cell] *-$ .  )$.'
$! - )/
)
!0)$:)
 '
/$+*

%
,0
3$./

*)/$)0$:)?
*- ( $+.0( *'*- .$/ (*' ./$ .0.$+$/ '$ -*@ .  0$ *). ,0/ .*' .@ $1(0.
( /= *). / /0 - -. . (@ 0) )*) / ''0. *-)- ! '$. )  ./@ #. ''0. (..
[display: run-in] *- ( $+.0( [display: block] *'*- .$/ ( /= *). / /0 - $+$.$)" $+$.$)" '$/@   ). / 0-) (//$. / (+*-@ %0./*= *-)- . = (' .0 =
'$/@ )*) /*-/*-@  ./$0'0( 0'' )  / ''0.  ,0( $")$..$( = )$#@  ./$0'0( 1$/
)/ $+.0( +-$($. $) # )- -$/ 1 ) )/$.@ )0) / ' /0. 0$.(* ! 0"$/@ 0''(
[display: run-in] *- (
$+.0( [display: inline] *'*-
.$/
( /=
*). / /0 -
$+$.$)" !0$0. *-$ '0/0. / 0.+ )$.. + '' )/ .,0 ' $! )@ '.. +/ )/ /$/$ .*$*.,0
'$/@ 0'/-$ . +*.0 - 0$'$ *$* / ./@ *-$ .  )$.'  '$/*- /*-,0 )/ + - *)0$ )*./-=
0- >   ! -( )/0( .  0$ *). ,0/ + -
$) +/*.
#$( ) *.@

)
0/
$+.0(@
'
:$"*  4   '
% (+'*
)/ -$*-
.
(0 ./-

*)/$)0$:)? '*- (

1 '$/@ .*' .@

444;&".*/4;/ 83 444;&".*/4;/ 84

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

 +-*+$  display: table-cell # ,0 0',0$ - ' ( )/* . (0 ./- *(* .$ !0 - 0) <div id="lateral">
Nam erat massa...
 '  0) /'@ *(* ) ' % (+'* )/ -$*- '*. /- . ' ( )/*. <p> 0/$'$5) ' +-*+$ 
</div>
display: table-cell= ' - .0'/* . 1$.0'( )/ $7)/$*  0/$'$5- 0) /' 4 /- . ' ( )/*. </div>
<td>@ </div>
...
$ 0/$'$5. 0) )1 "*- *) .*+*-/ *(+' /*   U@T= ' % (+'* )/ -$*- . 1$.0'$5 /' 4
*(*
(0 ./-
'
.$"0$ )/
$(" )? /$'$5)* '. .$"0$ )/ . - "'.  4 ' +-*+$  display . +*.$' # - ,0 '*. ' ( )/*.
<div> )/ -$*- .
.
*(+*-/ )
*(*
.$
!0 -)
' ( )/*. <tr> 4 <td>?

#contenedor {
display: table;
border-spacing: 5px;
}
#contenidos {
display: table-row;
}
#principal, #secundario, #lateral {
display: table-cell;
}
#principal {
" 1.
F;E;
$',&*
&
3&*.
0&=&&

&
,.*,"
"/,&6
width: 60%;
}
*(* '*. 1'*- . - '$*)*. *) '. /'. # ) ,0 0',0$ - ' ( )/* ,0 )* .  0) /'
#secundario, #lateral {
. (0 ./- 4 *(+*-/ *(* .$ '* !0 -= . +0  ) 0/$'$5- +- - - '*. layouts  '. +6"$).@ width: 20%;
 9*.= ' ./-0/0-  '. +6"$). .  !$)8 ( $)/ /'.= !$'. 4 *'0().@ ./ .*'0$:) }
/$ ) $))0( -' .  .1 )/%. 4 +*- .* /**. '*. $. 9*- . 2  +-*! .$*)' . - ) '
./-0/0-

.0.
+6"$).
( $)/  4
' ( )/*. <div>@ ' ' ( )/* #contenedor . 1$.0'$5 *(* 0) /' +*-,0 . ' +'$ ' +-*+$  display:
table@  ./ !*-(= . +0  ) +'$- ' ' ( )/* #contenedor +-*+$  . 3'0.$1.  '.
* *./)/ = '. /'. /$ ) ) '"0). 1 )/%. ) .0 *(+*-/($ )/* - .+ /*  '*. ' ( )/*. /'. *(* border-spacing@ ' ' ( )/* #contenidos . 1$.0'$5 *(* .$ !0 . 0) !$' 
<div> +*.$$*)*.  !*-( .*'0/ * !'*/)/ @  +-$)$+' 1 )/% . ,0 /*. '.  '.  /' K /$,0 / <tr>L@ ) .0 $)/ -$*- . )0 )/-) '. /- . *'0().  ' +6"$) ,0 .
0) !$' .$ (+- /$ ) ) ' ($.( '/0-= +*- '* ,0 .$ . 0/$'$5) /'. )* . .0!- ' +-*' (  1$.0'$5)
*(*
.$
!0 -)
/- .
' ( )/*. <td> "-$.

'
+-*+$  display: table-cell@
'.
*'0().

+6"$)
*)
$! - )/
'/0-@
 *)/$)0$:) . (0 ./- ' - .0'/* */ )$* ' +'$- ./. - "'.  ' :$"* 
 (6.= ' ./-0/0- -  *) 0) /' )0) . -*(+ = 4 ,0 '.  '.  /*. )0) . )/ -$*-?
1$.0'$5) 0)  %*  */- 0)* ' 1 )/)  ' )1 "*- . # (04 + ,0 9@ $)
(-"*= 0)* .  !$) ' ./-0/0- ( $)/ ' ( )/*. <div> +*.$$*)*. . +*.$' ,0
'
+6"$)
.
-*(+
4
'"0)
*'0()
.
(0 ./-
 %*

*/-*.
*)/ )$*.@
0-$/0- *- (
$+.0(
*'*-
.$/
( /=
*). / /0 - (
-/
/$'$5)* ' +-*+$  display  !*-( 1)5 . +*.$' - - 0) ./-0/0-  +6"$) -0/-0(
-*. $+$.$)"
'$/@
  ).
)*)
/*-/*-@ (..=
,0 .  . (6)/$( )/ *-- /= ./7 $. 9 3'0.$1( )/ *)  4 ,0 . *(+*-/ 
-$.0.@
0(  ./$0'0(
)/
$+.0(
+-$($.
$)
!0$0.
*-$ ')$/
$)=
3/( )/
$"0'
,0
*(*
'*
# )
'.
/'.@ .*$$. '0/0.
/
0'/-$ .
+*.0 -
0$'$
0- >
  +$0.
.$/
)/*,0 ! -( )/0(
'*- (

1 '$/@
*- (
$+.0(
*'*- ( /=
'
.$"0$ )/
:$"*  *-- .+*)

'
./-0/0-

0)
+6"$)
*)
/- .
*'0().?
+ )/$0.
/ .$/
( /=
*). / /0 -
$+$.$)"
'$/@
-*$) 1 ./$0'0(
... (")$.
$. .*' .=
)$(
$)
1*'0/+/
1 #$0'=
' *
/0-+$. /=
0"0 @
<div id="contenedor">
+-/0-$ )/ 1 #$0'
(")=
0/
-0/-0(
-0
'*- (
 0.+ )$..
<div id="contenidos">
<div id="secundario">
(*)/ .= +  @
0-$/0-
-0/-0(
-*.

-$.0.@
0( 
-$.0.@
Curabitur rutrum... ). /0- .*$$.
)/*,0
+ )/$0.
/
(")$.
$.
</div> -$$0'0. +-/0-$ )/
(*)/ .=
). /0-
-$$0'0.
(0.@

)
<div id="principal"> (0.@

) (*' ./$
.0.$+$/
'$ -*@
-.
. (@
0)
)*)
Lorem ipsum dolor sit amet...
</div>

444;&".*/4;/ 85 444;&".*/4;/ 86

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

4.3. Propiedad outline

(*' ./$ / ''0.
/
0-)
(//$.
/ (+*-@
0''
) 
/ ''0.

Definici—n /0&
& 1(/
*
0*/
&/
,.*,"/

0**/
&*/
,."&/

&*/
&'(0*/
.0.$+$/ ,0(
# )- -$/
1 ) )/$.@
0.+ )$..
'$ -*@
-. + '' )/ .,0
*$*
/
./@
*-$
. 
)$.'
.  & 1(*
*
0**/
&*/
/" 1"(0/
3&*./
6
(
1&-1".
*.(:
. (@
0) 0$
*). ,0/
.*' .@
*) 
+*-/
+*-/
*&*.

,."& >;<*10&"(=*&*.;!0'&?
Valores
)*)
/ ''0.
/ '$"0'@
(
-/
(..=
')$/
$)=
+$0.
.$/
permitidos
/0"&*

,."& >;<*10&"(=/06&;!0'&?
0-)
(//$. ( /=
1 ./$0'0(
/=
0"0 @
0.+ )$..


(!1.

,."& >;<*10&"(=4"0!;!0'&?
/ (+*-@ -$.0.@
0$.
. (+ -
!-$)"$''
. (@
- . )/
0''
)  0"0
-0=
. ' -$.,0
) =
*-)- Valor inicial 
,.*,"
"(
/1
,.*,"*
3&*.
,*.
0*
/ ''0.

,0( (' .0=
+*.0 -
=
) ,0 @
0''(
)0''
Se aplica a **/
&*/
&'(0*/
# )- -$/ )$.$=
0'/-$ .
,0$.=
$+$.$)"
)*)=
1-$0.
0/=
1 ) )/$.@ 0$@
0''
1$1 --
+ '' )/ .,0
. (@ V‡lida en '"*/
3"/1&/8 '"*/
"(0.0"3*/ >;<'"*/;!0'&?
0.+ )$.. Se hereda (*
+ '' )/ .,0
Definici—n en
*$*
/
./@ !00,:<<444;4E;*. <<DC<1";!0'&A,.*,=*10&"(
el est‡ndar

 +-*+$  outline . 0)  '. "propiedades shorthand" ,0  !$)  4 ,0 . 0/$'$5)
 ./-0/0-  ' +6"$)  ' % (+'* )/ -$*- ./6 $. 9 3'0.$1( )/ *)  + -* . +- ./'  -  !*-( - 1$ ' 1'*-  0) * (6. +-*+$  . $)$1$0' .@ ) ./ .*=
*(+*-/ *(* .$ !0 - 0) /'@ *. '. *'0().  ' +6"$) /$ ) ) ' ($.( '/0- .$) . 0/$'$5 +- ./'  - ' ($.(* "-*.*-= ./$'* 4I* )#0-  /**. '*. + -!$' .  0)
)  .$  - 0--$-  )$)";) /-0* 4 ' +6"$) )0) . -*(+ +*- (04 + ,0 9 ,0 . #" ' ( )/*@
'
1 )/)
 '
)1 "*-@
0),0 . $ -/* ,0 "0- (0#. .$($'$/0 . *) ' +-*+$  border= ) - '$ .
$ 1$.0'$5. ./ +6"$) *) 0) )1 "*- ,0 .*+*-/ *-- /( )/ ' +-*+$  display  $! - )$)
)
'"0)*.
.+ /*.
(04
$(+*-/)/ .?
 U@T=
'
% (+'*
)/ -$*-
.
1
/'
4
*(*
(0 ./-
'
.$"0$ )/
$(" )?
T@ *.
+ -!$' .
)*
*0+)
.+$*=
($ )/-.
,0
'*.
*- .
)*-(' .
.8@
U@ *.
+ -!$' .
+0  )
/ ) -
!*-(.
)*
- /)"0'- .@

 . ' +0)/*  1$./  ' $. 9*= ' +-$( - -/ -8./$ . ' (6. $(+*-/)/ @ *. + -!$' . 0
outline .$ (+- . $0%) Q+*- )$(  ' ' ( )/*Q= +*- '* ,0 )* (*$!$) ' +*.$$:) * '
/(9*
/*/'

'*.
' ( )/*.@

) ' .$"0$ )/ % (+'* . (0 ./-) *. %.> ' +-$( - (0 ./- 0) *- (04 "-0 .* 4 '
. "0)
(0 ./-
0)
+ -!$'

'
($.(
)#0-?

$1
M
*- -?
X+3
.*'$
RVY\>
N

$1
M
*0/'$) ?
X+3
.*'$
RVY\>
N

" 1.
F;F;
$',&*

&*/
3&*./
0&8
0&=.*4
6
0&=&&

&
,.*,"
"/,&6
*- ;'/$(*= 0),0 ' ./6)-  U@T ./'  ,0 ' 1'*- +*-  ! /*  ' +-*+$ 
 . "0) -/ -8./$ $(+*-/)/  '*. + -!$' . +0  ) / ) - !*-(. )* - /)"0'- .@ ) '
display . inline= /**. '*. )1 "*- . *1$) ./ - *( )$:) 4 .$")) +*-  ! /* '
1'*- block 
'*.
' ( )/*.

'*,0
4
'
1'*- inline 
'*.
' ( )/*.
)
'8) @
' + -!$'  ' . "0) % . $0% %0./* +*- ' 3/ -$*-  .0 *- @ 0),0 1$.0'( )/ )* '*
+-  = ' + -!$' 4 ' *- )* . )0 )/-) ) ' ($.(* +')*@  ./ !*-(= ' + -!$' )* .
/$ ) ) 0 )/ +- '0'- ' )#0- /*/'  0) ' ( )/* 4 )* $)!'04 ) ' - ./* 
' ( )/*.
 -)*.@
.$"0$ )/ % (+'* . (0 ./- 0) / 3/* (04 '-"* ) --* ) 0) % (04 ./- #= '* ,0
+-*1*
,0
'
/ 3/*
.
(0 ./-
)
1-$.
'8) .?

444;&".*/4;/ 87 444;&".*/4;/ 88

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

.+)
M
*- -? ) ' .$"0$ )/ % (+'* . *($/ ' "-*.*-  ' + -!$'= +*- '* ,0 ' )1 "*- ' .$")
U+3
.*'$ 0/*(6/$( )/
'
1'*- medium?
RVY\>
N
% (+'*
 $1
M
*0/'$) ?
.*'$
'0 >
N
/ 3/*
'-"*
,0
*0+
1-$. * *./)/ = *(* ' 1'*- +*-  ! /*  ' ./$'*  0) + -!$' . none= .$ )* . $)$
'8) . 3+'8$/( )/
'
./$'*
 '
+ -!$'=
'
- .0'/*
.
,0
'
)1 "*-
)*
(0 ./-
.
+ -!$'?

.+)
M
*0/'$) ? $1
M
*0/'$) ?
U+3
'0 >
N

U+3
.*'$
RVY\>
N
% (+'*
 ' "-*.*-  ' + -!$' . +0  ./'  -  0',0$ -  '. $! - )/ . !*-(.  $)$- 0)
/ 3/*
'-"*
,0 ( $ ) @ ' *'*- /($7) . +0  ./'  -  '"0)  '. $! - )/ . !*-(. 
*0+
1-$. $)$- 0) *'*- ) = *) ' +-/$0'-$  ' 1'*- invert ,0 . ' $*) ' *'*- ,0 / )"
'8) . (6. *)/-./ *) ' *'*-  !*)*@ *- ;'/$(*= ' ./$'*  ' + -!$' . ./'  *) '*. ($.(*.
1'*- .
,0
'*.
,0
.
0/$'$5)
)
'
+-*+$  border-style@
' +-$( - / 3/* . )$ -- *) 0) *- ,0 +-*0 0) - .0'/* ./7/$* +** !*-/0)*@
0),0 ' +-*+$  outline . $)!$)$/( )/ ( )*. 0/$'$5 ,0 ' +-*+$  border= ' #.
 '8)  (0 ./- 0) *- .0+ -$*- $)! -$*-= 0),0 .:'* ' +-$( - 4 ;'/$( '8) . $ --)
'
*-
'/ -'( )/ @ 1$./* (0#. (6. 1  .  '. ,0 - .@ $ +0'.. - + /$( )/ ' / '  ' /0'*- ) 0)
+6"$) 2 = ' )1 "*- 1 . ' $*))*  !*-( . 0 )$' /**. '*. ' ( )/*. pinchables *
$ )/-. /)/*= ' . "0)* / 3/* . )$ -- *) 0) + -!$'@ *(* $)$ .0 )*(- = ' +-*+$  seleccionables?
)' .=
*/*) .=
*)/-*' .

!*-(0'-$*=
/@
outline + -!$' '*. *)/ )$*.  ' ' ( )/* 4 '*. )$ -- *) 0) !*-( )* - /)"0'-@ *
- $)$- ' ' ( )/* ,0 ./6 . ' $*)*= ' )1 "*- (0 ./- 0) + -!$' (04 !$)*  1px
*./)/ = .$ 1$.0'$5. ./ ($.( +6"$) ) $! - )/ . )1 "*- .= 1 -6. ,0 /**. '*.
)1 "*- .
$0%)
'
+ -!$'

!*-(
$! - )/ =
'
*)/--$*

'*
,0
.0 
*)
'
*- @  )#*=  ./$'* +0)/ * 4  ' *'*- ,0 (6. *)/-./ *) ' *'*-  !*)*  ' +6"$)@ )
' (4*-8  '. +6"$). 2 = ' + -!$' ,0 . (0 ./- +*-  ! /* . outline: 1px dotted
*- ./ (*/$1*= ' *)/--$* ,0 '*. *- .= )* 3$./ ' *) +/*  perfil izquierdo * perfil #000@
superior@ ' + -!$'  0) ' ( )/* . ;)$* 4 .0. +-*+$  . .*) $7)/$. +-  0)*  '*.
0/-*
'*.@ *. )1 "*- . (6. 1)5*. $)'04 ) 0) pseudo-clase ''( :focus ,0 + -($/
./'  - ' ./$'*  '*. ' ( )/*. . ' $*)*.@ /$'$5)* ' +-*+$  outline %0)/* *)
*(* .0  *) (0#. +-*+$  .  /$+* shorthand= ' *- ) ) ' ,0 . $)$) '*.
:focus .
+0 
(*$!$-
'
./$'*
+*-
 ! /*
 '
)1 "*-?
1'*- .

'
+-*+$  outline .
$)$! - )/ ?
<style type="text/css">
:focus { outline: 2px solid red; }
$1
M
*0/'$) ?
T+3
.*'$
RSS>
N </style>
$1
M
*0/'$) ?
.*'$
T+3
RSS>
N
$1
M
*0/'$) ?
RSS
T+3
.*'$>
N $ +-0 .  +0'.- - + /$( )/ ' / ' Tabulador ) 0) +6"$) ,0 $)'04 ' - "' 
$1
M
*0/'$) ?
RSS
.*'$
T+3>
N )/ -$*-= 1 -6. ,0 ' )1 "*- . ' $*) . 0 )$'( )/ '*. )' .  ' +6"$) 4 (0 ./-
0) + -!$' *)/$)0*  *'*- -*%* +- $)$- ' ' ( )/* ,0 ./6 . ' $*)* ) 
 +-*+$  outline )* - ,0$ - ,0 . $)$,0 ) '. /- . +-*+$  . ,0  !$) ) ' ./$'*  (*( )/*@
'*. + -!$' .@ $ )* . $)$ '"0) +-*+$ = .0 1'*- . */$ ) ( $)/ ' 1'*- +*-  ! /*  # #*= . ";) ' ./6)- *!$$'= . . ' +-*+:.$/* +- ' ,0 . - -*) '*. + -!$' .? $)$-

.
+-*+$ @  !*-( '- ' ' ( )/* K*/:)= )' = */-*. *)/-*' .  !*-(0'-$*L ,0 ./6 . ' $*)*
) ' .$"0$ )/ % (+'* .:'* . $)$ ' ./$'*  ' + -!$'= +*- '* ,0 ' )1 "*- .$") )

(*( )/*@
0/*(6/$( )/ ' 1'*- medium  .0 "-*.*- 4 ' *'*- . .*" +- ,0 / )" ' (63$(*
*)/-./
*)
'
!*)*

'
+6"$)?

$1
M
*0/'$) ?
.*'$>
N

444;&".*/4;/ 89 444;&".*/4;/ 90

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

4.4. Propiedad quotes  $(" ) )/ -$*- *-- .+*) ' )1 "*- $- !*3@ *(* ' ./6)-  U@T )* $)$ '.
*($''. ,0 .   ) 0/$'$5- +*-  ! /*= . +0  ) +-*0$- $! - )$. 1$.0' . ) 
Definici—n /0&
&*/
.0./
10"&"7*/
,.
'*/0..
&/
*'"&&/ )1 "*-@

(*
6
/+&*
1(*

&*/
/" 1"(0/
3&*./:  +-*+$  quotes . 0/$'$5 +- ./'  -  !*-( 3+'8$/ '. *($''. ,0   0/$'$5- '

(
(2'.*
,.

(/

050* )1 "*- 4 +*- /)/*= ) 0/-'$5 '. +*.$' . $! - )$. )/- )1 "*- .@ . *($''.
Valores
.$ (+- . $)$) +*- +- .= .$ )* ' +-$( - ' *($''  + -/0- 4 ' . "0) ' *($'' 
permitidos
(*(
$ -- @

"(!."0
'
.$"0$ )/
% (+'*
(*$!$
'
)/ -$*-
+-
0/$'$5-
'.
*($''.
G
4
H?
Valor inicial ,(


(3 *.
blockquote {
Se aplica a **/
&*/
&'(0*/ quotes: "Ç" "È";
}
V‡lida en '"*/
3"/1&/
blockquote:before { content: open-quote; }
Se hereda /" blockquote:after { content: close-quote; }

Definici—n en <blockquote>Lorem ipsum dolor sit amet...</blockquote>

!00,:<<444;4E;*. <<DC< (.0;!0'&A,.*,=-1*0/
el est‡ndar
#*-=
'
)1 "*-
(0 ./-
'
% (+'*
)/ -$*-

'
.$"0$ )/
!*-(?
 +-*+$  quotes .:'* /$ ) . )/$* 0)* . 0/$'$5 %0)/* *) ' +-*+$  content 4 '*.
pseudo-elementos :after 4 :before@  +-*+$  quote . +0  (+' - +- ./'  - '*.
-/ - .
,0
.
0/$'$5)
'
(*./--
'.
*($''.
)
0)
' ( )/*@ E *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 
)*)
. (
,0$.
/ ''0.
10'+0//
'**-/$.@
$1(0.
! -( )/0(=
/*-/*-
$
*-)-
0'/-$ .=
'$"0'
$+.0(
*-  ! /*= 0)* . 0/$'$5 ' +-*+$  content %0)/* *) '*. 1'*- . open-quote 4 /$)$0)/
+  =
/
')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*) 
close-quote= ' )1 "*- (0 ./- 0).  / -($). *($''.@ *- /)/*= .$ . *).$ - ' (*''$.
)0)
$)
' *@F
.$"0$ )/
:$"*  4 ?
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; } $ . 1$.0'$5 ./ +6"$) *) 0) )1 "*- ,0 .*+*-/ ' +-*+$  quotes= ' % (+'*
)/ -$*-
.
1$.0'$5
*(*
(0 ./-
'
.$"0$ )/
$(" )?
<blockquote>Lorem ipsum dolor sit amet...</blockquote>

'
)1 "*-
(0 ./-
'
% (+'*
)/ -$*-

'
.$"0$ )/
!*-(?

E *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 
)*)
. (
,0$.
/ ''0. " 1.
F;H;
$',&*

&
,.*,"
-1*0/

10'+0//
'**-/$.@
$1(0.
! -( )/0(=
/*-/*-
$
*-)-
0'/-$ .=
'$"0'
$+.0(
 +-*+$  quotes + -($/ $)$- 0) );( -* $'$($/*  +- .  *($''.@ 0)* .:'* .
/$)$0)/
+  =
/
')$/
. (
+ 
.0.$+$/
+  @
0''
0-.0.
+*-/
. (@
*)   !$) 0) +-= . (0 ./-) .$ (+- ,0 . 0/$'$ open-quote 4 close-quote@ 0)* .  !$) )
(*''$.
)0)
$)
' *@F
$ 0/$'$5. 0) )1 "*- (* -)* *) .*+*-/  ' +-*+$  quotes= ' % (+'* )/ -$*- .
1$.0'$5
*(*
(0 ./-
'
.$"0$ )/
$(" )?
" 1.
F;G;
$',&*

&
,.*,"
-1*0/
1-$*. +- .= . 1) '/ -))*  1 5 ,0 . (0 ./-) 0). *($''.  )/-*  */-* ' ( )/*
,0 4 /$ ) *($''.@  *($'' . . +-  '.  (6. ( $)/ 0) .+$* ) ')*= +*- '*
,0
)*
 
0/$'$5-.
0)
*(
*
0',0$ -
*/-*
-/ -

. +-$:)@
' .$"0$ )/ % (+'*  !$) *. +- .  *($''. )  ' ( )/*  (** ,0 . '/ -)) '.
*($''.  1 5 ,0 0) ' ( )/* . )0 )/-  )/-*  */-* ' ( )/* ,0 /($7) (0 ./-
*($''.?
blockquote, span {
quotes: "Ç" "È" '"' '"';
}

blockquote:before, span:before {

444;&".*/4;/ 91 444;&".*/4;/ 92

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

content: open-quote; *(* '. *($''. . $)$) ( $)/  ).  / 3/*= )* ./6) '$($/.  0) .*'* -6/ -@
}
)
'
.$"0$ )/
% (+'*
.
0/$'$5)
0).
*($''.
+**
#$/0' .
!*-(.
+*-
1-$*.
-/ - .?
blockquote:after, span:after {
content: close-quote; blockquote, span {
} quotes: "ÇÇÇ" "ÈÈÈ" "--" "--";
}
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis
tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, blockquote:before, span:before {
ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla content: open-quote;
cursus porta sem. Donec mollis nunc in leo.</blockquote> }
blockquote:after, span:after {
. - "'.  )/ -$*- . $)$) ,0 ' )1 "*-   0/$'$5- $! - )/ . *($''. 0)* ' content: close-quote;
)$1 '

)$($ )/*
. 
$! - )/ ? }

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis
tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices,
E *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 
)*)
. (
,0$.
/ ''0.
ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla
10'+0//
'**-/$.@ $1(0.
! -( )/0(=
/*-/*-
$
*-)-
0'/-$ .=
'$"0'
$+.0( cursus porta sem. Donec mollis nunc in leo.</blockquote>
/$)$0)/
+  =
/
')$/ . (
+ 
.0.$+$/
+  @ 0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@F .
- "'.  )/ -$*- .
+-*0 )
'
.$"0$ )/
- .0'/*
)
'
)1 "*-?

) ' % (+'* )/ -$*-= /)/* <blockquote> *(* <abbr> ./'  ) *. +- .  *($''.@ E *- (
$+.0(
*'*-
.$/
( /=
*). / /0 -
$+$.$)"
'$/@
 
)*)
. (
,0$.
/ ''0.
0)* 0)*  ./*. *. ' ( )/*. . )0 )/-  )/-*  */-* ' ( )/* ,0 4 (0 ./- 10'+0//
'**-/$.@ $1(0.
! -( )/0(=
/*-/*-
$
*-)-
0'/-$ .=
'$"0'
$+.0(
*($''.= ' +-*+$  quotes $)$ ,0 .   0/$'$5- ' . "0)* +-  *($''. ) 1 5  ' /$)$0)/
+  =
/
')$/ . (
+ 
.0.$+$/
+  @ 0''
0-.0.
+*-/
. (@
*) 
(*''$.
)0)
$)
' *@F
+-$( -*@ *- '* /)/*= .$ 0/$'$5. 0) )1 "*- ,0 .*+*-/ ' +-*+$  quotes= ' % (+'*
)/ -$*-
.
1$.0'$5

'
.$"0$ )/
!*-(?

) 0) )1 "*- *) .*+*-/  ' +-*+$  quotes= ' % (+'* )/ -$*- . 1$.0'$5  '
.$"0$ )/
!*-(?

" 1.
F;I;
$',&*

&
,.*,"
-1*0/

*. 1'*- .  ' +-*+$  quotes . $)$) ( $)/  ).  / 3/*@ )  )  / 3/* .
0) *)%0)/*  0)* * (6. -/ - . ) --*. +*- '. *($''. *' . K"L * '. *($''. " 1.
F;J;
$',&*

&
,.*,"
-1*0/
.$(+' . KPL@ $ '  ) *)/$ ) *($''. *' .= . )$ -- *) '. *($''. .$(+' . 4
/$'$5)* ' pseudo-selector :lang() . +*.$' $)'0.*  !$)$- $! - )/ . /$+*.  *($''. )
1$ 1 -.@ $ 0)  )  / 3/* /$ ) /)/* *($''. .$(+' . *(* *' .= '. *($''.
!0)$:)
 '
$$*(
 '
*)/ )$*?
+-*' (6/$.
.
(*$!$)
4
.
' .
9
'
--
$)1 -/$ \ +*-
 ')/ ?
blockquote:lang(en) { quotes: '"' '"' "'" "'" } /* comillas para inglŽs */
/* Comillas simples encerradas por comillas dobles */ blockquote:lang(es) { quotes: "Ç" "È" '"' '"' } /* comillas para espa–ol */
.selector { quotes: "'" "'"; }
 +-*+$  quotes  !$) */-* 1'*- ''(* none ,0 # ,0 )* . (0 ./- )$)"0) *($''
/* Comillas dobles encerradas por comillas simples */
0)*
.
0/$'$5
'
1'*- open-quote 4 close-quote 
'
+-*+$  content@
.selector { quotes: '"' '"'; }
*- ;'/$(*= ' ./6)-   U@T - *($ ) 0/$'$5- $- /( )/ '*. :$"*.  !$)$*. ) '
/* Comillas simples y dobles encerradas por comillas dobles */
./6)-
 TSYWY
+-
$)$-
'
*($''
,0
.
,0$ -
0/$'$5-@
.selector { quotes: "\"" "\"" "'" "'"; }

./
!*-(=
'.
*.
.$"0$ )/ .
- "'.  .*)
,0$1' )/ .?
/* Comillas simples y dobles encerradas por comillas simples */
.selector { quotes: '"' '"' '\'' '\''; } blockquote, abbr {
quotes: "Ç" "È" "'" "'";
}

444;&".*/4;/ 93 444;&".*/4;/ 94

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

' !0)$*)($ )/* 6.$*  ' +-*+$  counter-reset . . )$''*= + -* .0 !' 3$$'$ 4 '
blockquote, abbr {
*($)$:) *) */-. +-*+$  . 4 !0)$*) .   +0  ) *(+'$- (0#* .0
quotes: "\00AB" "\00BB" "\0027" "\0027";
} $)/ -+- /$:)@


.$"0$ )/
/'
- *"
'.
*($''.
(6.
0/$'$5.
4
.0.
:$"*.
*-- .+*)$ )/ .? ) ' .* (6. . )$''*= ' +-*+$  counter-reset $)$ ' )*(-  0) *)/*- . "0$*
*+$*)'( )/
+*-
0)
);( -*
)/ -*
,0
$)$
'
1'*-
'
,0
.
$)$$'$5
'
*)/*-?
Car‡cter tipogr‡fico de la comilla C—mo la muestran los navegadores C—digo ISO 10646
body {
" " 0022 counter-reset: numero_capitulo 0;
}
@ @ 0027
Ü < 2039  - "'  )/ -$*- # ,0 . $)$$'$  0 0) *)/*- ''(* numero_capitulo 0)* '
)1 "*- )0 )/- ' ' ( )/* <body>@ $ ' *)/*- )* 3$./8= ' ./6)-  U@T $)$ ,0
Ý > 203A
.
- 
0)*
.
)0 )/-
'
+-$( -
' ( )/* <body>=
.
 $-=
'
+-$)$+$*

'
+6"$)@
Ç Ç 00AB
 - "'  )/ -$*- . +0  (+' - +- - - ' *)/*- ,0 . 0/$'$5 +*./ -$*-( )/ )
È È 00BB
'.
+-*+$  . counter-increment 4 content?
Ô ` 2018
body {
Õ @ 2019 counter-reset: numero_capitulo 0;
Ò `` 201C }
h1:before {
Ó '' 201D content: "Cap’tulo " counter(numero_capitulo);
counter-increment: numero_capitulo 1;
ã ,, 201E
}

0)* . $)$$'$5 4 . /0'$5 ' 1'*-  0) *)/*- ) 0) ($.(* ' ( )/*= +-$( -* .
4.5. Propiedad counter-reset
$)$$'$5
.0
1'*-
4
 .+07.
.
/0'$5
. ";)
'
+-*+$  counter-increment@
Definici—n
(""&"7
&
3&*.

1(*
*
'/
*(0*./ $ )* . $)$ ' );( -* )/ -* *+$*)'= '*. )1 "*- . .0+*) ) ,0 1' 0= +*- '* ,0 '.
(*
6
/+&*
1(*

&*/
/" 1"(0/
3&*./: .$"0$ )/ .
- "'.  .*)
,0$1' )/ .

'.
)/ -$*- .?

(*
*
'/
(*'./

*(0*./
/ 1"*/
*,"*(&'(0
,*.
1(
(2'.*
(0.*
 body {
Valores 1(* counter-reset: numero_capitulo;
permitidos }

(*(
h1:before {

"(!."0 content: "Cap’tulo " counter(numero_capitulo);
counter-increment: numero_capitulo 1;
Valor inicial (*( }

Se aplica a **/
&*/
&'(0*/  +-*+$  counter-reset /($7) 0(+' *) ' *(+*-/($ )/* ) .  '.
V‡lida en && +-*+$  . =
+*-
'*
,0
)
'
.$"0$ )/
% (+'*?
Se hereda (* p {
counter-reset: parrafos;
Definici—n
}
en !00,:<<444;4E;*. <<DC< (.0;!0'&A,.*,=*1(0.=./0
...
el est‡ndar
p {
counter-reset: elementos;
 +-*+$  counter-reset . (+'  +- *)/-*'- ' )0( -$:) 0/*(6/$   U@T ,0 }
.
0/$'$5
)
'.
!0)$*) . counter() 4 counters() 
'
+-*+$  content@
. - "'.  )/ -$*- . +-*1*) 0) *'$.$:) ) ' 1'*-  ' +-*+$  counter-reset@  ";)
'. )*-(.  - .*'0$:)  *'$.$*) .= ) ./ .* ") ' ;'/$( - "' 4 '*. ' ( )/*.  /$+*
<p> .:'*
$)$$'$5)
'
1'*-
 '
*)/*- elementos@

444;&".*/4;/ 95 444;&".*/4;/ 96

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

 (6.  $)$$'$5- ' 1'*-  '*. *)/*- .  0= /($7) . +*.$' $)$$'$5-'*.  0',0$ -  +-*+$  counter-reset -  * $)$$'$5 ' 1'*-  ' *)/*- numero_parrafo  1 5 ,0
*/-*
1'*-
)/ -*
+*.$/$1*
*
) "/$1*=
/'
4
*(*
(0 ./-
'
.$"0$ )/
% (+'*? )0 )/- 0) ' ( )/* <div>@  ./ !*-(= .$ ' - "'  )/ -$*- . +'$ ' .$"0$ )/ :$"*
body {  ?
counter-reset: numero_capitulo -1; <div>
} <p>Lorem ipsum dolor sit amet</p>
h1:before { <p>Lorem ipsum dolor sit amet</p>
content: "Cap’tulo " counter(numero_capitulo); <p>Lorem ipsum dolor sit amet</p>
counter-increment: numero_capitulo; <div>
counter-reset: numero_seccion -1; <p>Lorem ipsum dolor sit amet</p>
} <p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
 +-*+$  counter-reset /($7) + -($/ $)$- 1-$*. *)/*- . +- $)$$'$5-'*.  <div>
!*-(
.$(0'/6) ? <p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
h1 {
<p>Lorem ipsum dolor sit amet</p>
counter-reset: numero_seccion numero_tabla numero_imagen;
</div>
}
</div>
</div>
 - "'  )/ -$*- $)$$'$5  0 '*. *)/*- . numero_seccion= numero_tabla 4
numero_imagen  1 5 ,0 . )0 )/- 0) ' ( )/* <h1> ) ' +6"$)@ ($7) . +*.$' ) ' % (+'* )/ -$*-= ' )1 "*- -  0/*(6/$( )/ /- . *)/*- . $! - )/ . + -* *)
$)$-
$! - )/ .
1'*- .
$)$$' .
+-

*)/*-? ' ($.(* )*(- Knumero_parrafoL@  1 5 ,0 . )0 )/- 0) ' ( )/* <div>= '
h1 { )1 "*- -  * $)$$'$5 0) *)/*- ''(* numero_parrafo= +*- '* ,0 /**. '*. +6--!*.
counter-reset: numero_seccion 0 numero_tabla -1 numero_imagen -1;  '
% (+'*
)/ -$*-
$.+*) )

'
($.(
)0( -$:)
K1= 2 4 3L@
}
$ . 1$.0'$5 ' % (+'* )/ -$*- *) 0) )1 "*- ,0 .*+*-/ *(+' /( )/ '. +-*+$  .
 (6.= /($7) . +*.$' $)$- ' ($.(* *)/*- (6.  0) 1 5 ) ' +-*+$  counter-reset= counter-increment 4 content= ' - .0'/* . ' ,0 (0 ./- ' .$"0$ )/
counter-reset@
)
./
.*=
.
- '$5)
/*.
'.
$)$$'$5$*) .
)
'
*- )
$)$*?
$(" )?
p {
counter-reset: parrafos parrafos -1 parrafos 3;
}

p {
counter-reset: parrafos parrafos -1 parrafos 3 parrafos;
}

 +-$( - - "'  ' % (+'* )/ -$*- $)$$'$5 ' 1'*-  ' *)/*- parrafos  3= ($ )/-. ,0
' . "0) - "' $)$$'$5 ' *)/*- parrafos  0@ *(* ' )1 "*- +-* . '.
$)$$'$5$*) .
)
'
($.(*
*- )
$)$*=
'
;)$
,0
.
/$ )
)
0 )/
.
'
;'/$(@

*. *)/*- . /$ ) ) ) 0 )/ ' )$($ )/*  '*. ' ( )/*.  @ $ . *).$ -) '.
.$"0$ )/ .
- "'. ?
div {
counter-reset: numero_parrafo;
}
div p:before {
content: "Parrafo " counter(numero_parrafo) " ";
counter-increment: numero_parrafo;
}

444;&".*/4;/ 97 444;&".*/4;/ 98

3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

4.6. Propiedad counter-increment

Definici—n 01&"7
&
3&*.

1(*
*
'/
*(0*./
(*
6
/+&*
1(*

&*/
/" 1"(0/
3&*./:

(*
*
'/
(*'./

*(0*./
/ 1"*/
*,"*(&'(0
,*.
1(
(2'.*
(0.*

Valores 1(*
permitidos

(*(

"(!."0

Valor inicial (*(

Se aplica a **/
&*/
&'(0*/
V‡lida en &&
Se hereda (*
Definici—n
en !00,:<<444;4E;*. <<DC< (.0;!0'&A,.*,=*1(0.="(.'(0
el est‡ndar

 +-*+$  counter-increment . (+'  +- *)/-*'- ' )0( -$:) 0/*(6/$   U@T
,0
.
0/$'$5
)
'.
!0)$*) . counter() 4 counters() 
'
+-*+$  content@

' !0)$*)($ )/* 6.$*  ' +-*+$  counter-increment . . )$''*= + -* .0 !' 3$$'$ 4
' *($)$:) *) */-. +-*+$  . 4 !0)$*) .   +0  ) *(+'$- (0#* .0
$)/ -+- /$:)@

) ' .* (6. . )$''*= ' +-*+$  counter-increment $)$ ' )*(-  0) *)/*-
" 1.
F;K;
$',&*

&/
,.*,"/
*1(0.=./08
*1(0.="(.'(0
6
*(0(0 . "0$*
*+$*)'( )/
+*-
0)
);( -*
)/ -*
,0
$)$
'
)/$
)
'
,0
.
$)- ( )/?
*. ' ( )/*. *0'/*. ( $)/ ' +-*+$  display Kdisplay: noneL )* +0  ) (*$!$- ' h1 {
counter-increment: numero_capitulo 1;
1'*-  '*. *)/*- .= ($ )/-. ,0 '*. ' ( )/*. *0'/*. ( $)/ ' +-*+$  visibility
}
Kvisibility: hiddenL
.$
,0
'*.
/0'$5)?
 - "'  )/ -$*- # ,0 . $)- ( )/ ) 0) 0)$ ' 1'*-  0) *)/*- ''(*
p.oculto {
display: none; numero_capitulo  1 5 ,0 ' +6"$) $)'04 0) ' ( )/* <h1>@ $ ' *)/*- )* 3$./8= '
counter-reset: parrafos; /* No se inicializa porque el elemento ./6)-  U@T $)$ ,0 0)* . )0 )/- ' +-$( - ' ( )/* <h1>= . -  ' *)/*-= .
se ha ocultado mediante display: none */ $)$$'$5 ' 1'*- 0 4 +*./ -$*-( )/ . /0'$5 .0 1'*- . ";) ' +-*+$ 
}
counter-increment $)$@
p.invisible {
./ *)/*- 6.$* . +0  (+' - +- 9$- 0) )0( -$:) 0/*(6/$  '*. ' ( )/*.
visibility: hidden;
counter-reset: parrafos; /* Se inicializa a 0 porque el elemento <h1> 
'
+6"$)?
se ha hecho invisible con visibility: hidden */
h1:before {
}
content: "Cap’tulo " counter(numero_capitulo);
counter-increment: numero_capitulo 1;
}

0)* . /0'$5 4 . 0/$'$5 ' 1'*-  0) *)/*- ) 0) ($.(* ' ( )/*= +-$( -* .
/0'$5
.0
1'*-
4
 .+07.
.
0/$'$5
)
'
+-*+$  content@

444;&".*/4;/ 99 444;&".*/4;/ 100


3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

$ )* . $)$ ' );( -* )/ -* *+$*)'= '*. )1 "*- . .0+*) ) ,0 1' 1= +*- '* ,0 ' counter-increment: numero_parrafo;
}
.$"0$ )/
- "'  .
,0$1' )/

'
)/ -$*-?
h1:before {  +-*+$  counter-reset -  * $)$$'$5 ' 1'*-  ' *)/*- numero_parrafo  1 5 ,0
content: "Cap’tulo " counter(numero_capitulo); )0 )/- 0) ' ( )/* <div>@  ./ !*-(= .$ ' - "'  )/ -$*- . +'$ ' .$"0$ )/ :$"*
counter-increment: numero_capitulo;  ?
}
<div>
 (6.  $)- ( )/- ' 1'*-  '*. *)/*- .= /($7) . +*.$'  - ( )/-'* * )* <p>Lorem ipsum dolor sit amet</p>
(*$!$-'*@ ' .$"0$ )/ % (+'* (+'8 ' )/ -$*- +- )* $)- ( )/- ' 1'*-  ' *)/*- ) <p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
'"0)*.
' ( )/*. <h1> .+ $' .?
<div>
h1:before { <p>Lorem ipsum dolor sit amet</p>
content: "Cap’tulo " counter(numero_capitulo); <p>Lorem ipsum dolor sit amet</p>
counter-increment: numero_capitulo; <p>Lorem ipsum dolor sit amet</p>
} <div>
h1.especial { <p>Lorem ipsum dolor sit amet</p>
counter-increment: numero_capitulo 0; <p>Lorem ipsum dolor sit amet</p>
} <p>Lorem ipsum dolor sit amet</p>
</div>
* *./)/ = .$ . ,0$ - $)$$'$5- 0) *)/*- +- ,0 10 '1  1' - 0 * 0',0$ - */-* 1'*- </div>
)0(7-$*=
.
+- $.*
0/$'$5-
'
+-*+$  counter-reset@ </div>

 +-*+$  counter-increment /($7) + -($/ $)$- 1-$*. *)/*- . +- /0'$5-'*.

!*-(
.$(0'/6) ?
p {
counter-increment: elementos parrafos especial 2;
}
 - "'  )/ -$*- $)- ( )/ ) 0) 0)$ ' 1'*-  '*. *)/*- . elementos 4 parrafos
 1 5 ,0 . )0 )/- 0) ' ( )/* <p> ) ' +6"$)@  (6.= $)- ( )/ ) 2 0)$ . '
1'*-

*/-*
*)/*-
''(* especial 
1 5
,0
)0 )/-
0)
' ( )/* <p>@
) ' % (+'* )/ -$*-= ' )1 "*- -  0/*(6/$( )/ /- . *)/*- . $! - )/ . + -* *)
' ($.(* )*(- Knumero_parrafoL@  1 5 ,0 . )0 )/- 0) ' ( )/* <div>= '
)1 "*- -  * $)$$'$5 0) *)/*- ''(* numero_parrafo= +*- '* ,0 /**. '*. +6--!*.
 '
% (+'*
)/ -$*-
$.+*) )

'
($.(
)0( -$:)
K1= 2 4 3L@
$ . 1$.0'$5 ' % (+'* )/ -$*- *) 0) )1 "*- ,0 .*+*-/ *(+' /( )/ '. +-*+$  .
counter-increment= counter-reset 4 content= ' - .0'/* . ' ,0 (0 ./- ' .$"0$ )/
$(" )?

($7) . +*.$' $)$- ' ($.(* *)/*- (6.  0) 1 5 ) ' +-*+$ 
counter-increment?

p {
counter-increment: elementos parrafos especial 2 parrafos elementos 3;
}

) ' % (+'* )/ -$*-=  1 5 ,0 . )0 )/- 0) ' ( )/* <p> ) ' +6"$) . $)- ( )/ 4
0)$ . ' 1'*-  ' *)/*- elementos= 2 0)$ . ' 1'*-  ' *)/*- parrafos 4 2
0)$ .
'
1'*-
 '
*)/*- especial@

*. *)/*- . /$ ) ) ) 0 )/ ' )$($ )/*  '*. ' ( )/*.  @ $ . *).$ -) '.
.$"0$ )/ .
- "'. ?
div {
counter-reset: numero_parrafo;
}
div p:before {
content: "Parrafo " counter(numero_parrafo) " ";

444;&".*/4;/ 101 444;&".*/4;/ 102


3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

4.7. Propiedad content

Definici—n (.
*(0("*

*.'
"('"
5"/0(
10.*
*,"*(/
".(0/
,.
/0&.
&
3&*.
*
3&*./

/0
,.*,":
C; (*
*
'/

&*/
/" 1"(0/
3&*./:

(

050*

*(0*.

Valores
3&*.

1(
0."10*
*,(=-1*0
&*/=-1*0

permitidos

(*=*,(=-1*0
(*=&*/=-1*0
D; (*.'&
E; (*(
F; "(!."0
Valor inicial (*.'&
Se aplica a *&'(0

&*/
,/1*=&'(0*/
:*.
6
:0.
V‡lida en &&
Se hereda (*
Definici—n en
!00,:<<444;4E;*. <<DC< (.0;!0'&A,.*,=*(0(0
el est‡ndar

 +-*+$  content . 0)  '. +-*+$  .  (6. +* -*.. 4  ' 1 5 (6.
*)/-*1 -/$.@  +-*+$  content . (+'  +- " ) -- )0 1* *)/ )$*  !*-(
$)6($ $). -/-'* ) ' +6"$)  @ *(*  . 0) ' )"0%  #*%.  ./$'*. 04* ;)$*
+-*+:.$/* . *)/-*'- ' .+ /* * +- . )/$:)  '*. *)/ )$*.= '"0)*. $. 9*- .
 !$ ) )
,0
)*
.
*-- /*
" ) --
)0 1*.
*)/ )$*.
( $)/ @
" 1.
F;CB;
$',&*

&/
,.*,"/
*1(0.="(.'(08
*1(0.=./0
6
*(0(0
) +-$( - '0"-= ' ./6)-  U@T $)$ ,0 ' +-*+$  content .:'* +0  0/$'$5-. ) '*.
*. ' ( )/*. *0'/*. ( $)/ ' +-*+$  display Kdisplay: noneL )* (*$!$) ' 1'*- 
pseudo-elementos :before 4 :after@ *(* .0 +-*+$* )*(- $)$= ./*. pseudo-elementos
'*. *)/*- .= ($ )/-. ,0 '*. ' ( )/*. *0'/*. ( $)/ ' +-*+$  visibility
+ -($/ ) . ' $*)- K4 +*- /)/* (*$!$-L ' +-/ )/ -$*- * +*./ -$*-  0) ' ( )/*  '
Kvisibility: hiddenL
.$
,0
'*.
/0'$5)?
+6"$)@
p.oculto {
display: none; ' .$"0$ )/ % (+'* (0 ./- :(* 9$- ' +'- Cap’tulo  ')/  ' *)/ )$*  
counter-increment: parrafos; /* No se actualiza porque el elemento /8/0'*

. $:) <h1>?
se ha ocultado mediante display: none */
} h1:before {
content: "Cap’tulo ";
p.invisible { }
visibility: hidden;
*. pseudo-elementos :before 4 :after . +0  ) 0/$'$5- .*- 0',0$ - ' ( )/*  '
counter-increment: parrafos; /* Se actualiza porque el elemento
se ha hecho invisible con visibility: hidden */ +6"$)@ ' .$"0$ )/ % (+'* 9 ' +'- Nota:  ')/   +6--!* 04 '.  . 
} nota?

p.nota:before {
content: "Nota: ";
}

444;&".*/4;/ 103 444;&".*/4;/ 104


3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

*($))* '. +-*+$  . content 4 quotes *) '*. pseudo-elementos :before 4 :after= . content: open-quote;
}
+0  ) 9$-  !*-( $)6($ *($''.  + -/0- 4  $ --  /**. '*. ' ( )/*.
blockquote:after {
<blockquote> 
'
+6"$)? content: close-quote;
}
blockquote:before {
content: open-quote;
*. 1'*- . no-open-quote 4 no-close-quote . 0/$'$5) +- )* (*./-- )$)"0) *($'' ) .
}
blockquote:after { ' ( )/*= + -* $)- ( )/)* ' )$1 '  )$($ )/*  '. *($''.@  ./ !*-( . +0 
content: close-quote; 1$/- (*./-- 0) *($'' ) 0)  / -($)* ' ( )/* ($ )/-. . ()/$ ) ' % --,08 
} *($''.
./' $
+*-
'
+-*+$  quotes@
blockquote {
quotes: "Ç" "È"; )*  '*. 1'*- . (6. 1)5*.  ' +-*+$  content . attr()= ,0 + -($/ */ ) - '
}
1'*-  0) /-$0/*  ' ' ( )/* .*- ' ,0 . 0/$'$5 ' +-*+$  content@ ) ' .$"0$ )/
*. *)/ )$*. $). -/*. $)6($( )/ ) 0) ' ( )/* .*)  /**. '*. ! /*. +-/  . % (+'*= . (*$!$) '*. ' ( )/*. <abbr> 4 <acronym> +- ,0 (0 ./- ) )/- +-7)/ .$. '
($.(*
' ( )/*=
+*-
'*
,0
# - )
'
1'*-

/*.
.0.
+-*+$  . @ 1'*-

.0.
/-$0/*. title?

*. *. 1'*- . (6. . )$''*.  ' +-*+$  content .*) none 4 normal@ ) ' +-6/$= ./*. abbr:after, acronym:after {
content: " (" attr(title) ")"
*.
1'*- .
/$ ) )
'
($.(*
! /*
4
,0
# )
,0
' pseudo-elemento )*
.
" ) - @ }

' .$"0$ )/ 1'*- ,0 . +0  $)$- ) ' +-*+$  content . 0)  )  / 3/*@ ) ' '
1'*-

'
+-*+$  content )/ -$*-
)
- '$
.
'
*($)$:)

/- .
1'*- .?
./6)-  U@T= 0)  )  / 3/* . 0) *)%0)/*  0)* * (6. -/ - . ) --*. +*- '.
*($''. *' . K"L * '. *($''. .$(+' . KPL@ $ '  ) *)/$ ) *($''. *' .= . )$ --
 )

/ 3/* " ("=
,0
.
'
+-7)/ .$.

+ -/0-
/-.
'
0'
.
(0 ./-
'
1'*-
 '
*) '. *($''. .$(+' . 4 1$ 1 -.@ $ 0)  )  / 3/* /$ ) /)/* *($''. .$(+' . *(* /-$0/* title@
*' .=
'.
*($''.
+-*' (6/$.
.
(*$!$)
4
.
' .
9
'
--
$)1 -/$ \ +*-
 ')/ ?
/-$0/* title  '
' ( )/*
*/ )$*
( $)/ attr(title)
p:before {

 )

/ 3/* ")"=
,0
.
'
+-7)/ .$.

$ --
,0
.
(0 ./-
 /-6.
 '
1'*-
 '
content: "Contenido generado \"din‡micamente\" mediante CSS. ";
} /-$0/* title@
#ultimo:after {
content: " Fin de los 'contenidos' de la p‡gina."; $ ' ' ( )/* )* $.+*)  ' /-$0/* .*'$$/*= ' !0)$:) attr(nombre_del_atributo)
}  10 '1 0)  )  / 3/* 18@ /$'$5)* attr() .*'( )/ . +0  */ ) - ' 1'*- 
'*.
/-$0/*.
 '
' ( )/*
'
,0
.
+'$
'
+-*+$  content@
.  ).  / 3/* .:'* + -($/ ) $)'0$- / 3/* 6.$*@ $ . $)'04 '"0) /$,0 /  ) '
 )  / 3/*= ' )1 "*- (0 ./- ' /$,0 / /' 4 *(* ./6 .-$/= 4 ,0 )* '.  !0)$:) attr() . (04 ;/$' +*- % (+'* +- (*./-- ' $- $:)  ' ,0 +0)/) '*. )' .
$)/ -+- /@ - $)'0$- 0) .'/*  '8)  ) ' *)/ )$* " ) -*= . 0/$'$5 ' -/ - .+ $' 
'
+6"$)?
\A
a:after {
content: " (" attr(href) ")";
' .$"0$ )/ 1'*-  +/* +*- ' +-*+$  content . 0)  = ,0 .0 ' 0/$'$5-. +-
}
$)$- '   0) $(" ) ,0 . ,0$ - 9$-  !*-( $)6($ ' *)/ )$*@  .$)/3$. .
$7)/$
'
- ./*
  ,0
.
+0  )
$)$-
)
*/-.
+-*+$  . ? *. ;'/$(*. 1'*- . ,0 . +0  ) $)$- ) ' +-*+$  content .*) '*. *)/*- . - *.
span.especial:after { *) '. +-*+$  . counter-increment 4 counter-reset@ *. *)/*- . (6. . )$''*. .
content: url("imagenes/imagen.png"); (0 ./-) *) ' !0)$:) counter(nombre_del_contador)@ ' .$"0$ )/ % (+'* -  *.
} *)/*- .
''(* capitulo 4 seccion +-
0/$'$5-'*.
*)
'*.
' ( )/*. <h1> 4 <h2>?
/-*. 1'*- . ,0 . +0  ) $)$- ) ' +-*+$  content .*) open-quote= close-quote= body {
no-open-quote 4 no-close-quote@ *. *. +-$( -*. $)$) ,0 .   (*./- 0) *($''  counter-reset: capitulo;
}
+ -/0- *  $ -- - .+ /$1( )/ @ . *($''. 0/$'$5. . ./'  ) ( $)/ '
h1 {
+-*+$  quotes? counter-reset: seccion;
}
blockquote { quotes: "Ç" "È" '"' '"' }
h1:before {
blockquote:before {

444;&".*/4;/ 105 444;&".*/4;/ 106


3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

content: "Cap’tulo " counter(capitulo) ". "; }

counter-increment: capitulo; #especial p:before {
} content: counter(parrafos, none);
h2:before { }
content: counter(capitulo) "." counter(seccion) " ";
counter-increment: seccion; 0),0 ' 1'*-  '*. *)/*- . .$ (+- . );( -$*= /($7) . +0  ) (+' - ./$'*.
} "-6!$*.
*(* square= disc * circle?

) ' % (+'* )/ -$*-= . -  $)$$'$5 .0 1'*-  0 0) *)/*- ''(* capitulo 0)* . h2 {
counter-increment: seccion;
)0 )/- ' ' ( )/* <body>= .  $-= ' *($ )5*  ' +6"$)@  (6.= . -  $)$$'$5 .0
}
1'*-  0 */-* *)/*- ''(* seccion  1 5 ,0 . )0 )/- 0) ' ( )/* <h1> ) ' h2:before {
+6"$)@ content: counter(seccion, disc);
}
*./ -$*-( )/ = . 9  !*-( $)6($  '*. ' ( )/*. <h1> 4 <h2> ' *)/ )$* " ) -*
( $)/ '*. *)/*- .@ *. ' ( )/*. <h1> 0/$'$5) ' *)/*- capitulo 4 '* $)- ( )/) )  !0)$:) counter() .*'( )/ (0 ./- ' 1'*-  0) *)/*-@ *- .0 +-/ = ' !0)$:)
0) 0)$  1 5 ,0 '* 0/$'$5)@ *. ' ( )/*. <h2> 0/$'$5) '*. *. *)/*- . +- " ) -- counters() . 0/$'$5 +- (*./--  !*-( .$(0'/6)  ' 1'*-  /**. '*. *)/*- .
0) *)/ )$* ,0 (0 ./- .0 )0( -$:) *(+' /@  (6.= '*. ' ( )/*. <h2> /0'$5) ' .*$*. *) ' ' ( )/*@ *(* . 3+'$ ) '  .-$+$:)  '. +-*+$  .
1'*-
 '
*)/*- seccion@ counter-increment 4 counter-reset= '*. *)/*- . . +0  ) )$- 4 0) ($.(* ' ( )/*
+0 
/ ) -
.*$*.
1-$*.
*)/*- .
$! - )/ .
*)
'
($.(*
)*(- @
0)* 0) ($.(* ' ( )/* $)$$'$5I/0'$5 0) *)/*- 4 '* 0/$'$5 ) ' +-*+$  content=
) +-$( - '0"- . $)$$'$5I/0'$5 4  .+07.= ' 1'*- /0'$5* . ' ,0 . 0/$'$5 ' .$"0$ )/ % (+'* (0 ./- 0). - "'.  ,0 - ) 0) *)/*- +- '*. ' ( )/*.  0)
( $)/ counter()@ '$./ <ol>?
ol {
 (6.  (*./-- ' 1'*-  0) *)/*- 6.$*= ' !0)$:) counter() + -($/ $)$- ' ./$'* counter-reset: elemento;
*) ' ,0 . (0 ./- ' 1'*-  ' *)/*-@  '$./  ./$'*. + -($/$*. .*) '*. ($.(*. ,0 '*. list-style-type: none;

'
+-*+$  list-style-type@ }
li:before {
' .$"0$ )/ % (+'* (*$!$ ' )/ -$*- +- (*./-- ' 1'*-  '*. *)/*- . ) );( -*. content: counter(elemento) ". ";
-*()*.? counter-increment: elemento;
}
body {
counter-reset: capitulo; $
.
*).$ -
'
.$"0$ )/
:$"*  ?
}
<ol>
h1 {
<li>Elemento</li>
counter-reset: seccion;
<li>Elemento</li>
}
<li>Elemento
h1:before {
<ol>
content: "Cap’tulo " counter(capitulo, upper-roman) ". ";
<li>Elemento</li>
counter-increment: capitulo;
<li>Elemento
}
<ol>
h2:before {
<li>Elemento</li>
content: counter(capitulo, upper-roman) "." counter(seccion, upper-roman) " ";
<li>Elemento</li>
counter-increment: seccion;
<li>Elemento</li>
}
</ol>
*. ./$'*.  '*. *)/*- . /($7) . +0  ) (+' - +- )* (*./-- ' 1'*-  '*. </li>
<li>Elemento</li>
*)/*- .
)
'"0)*.
' ( )/*.?
</ol>
p { </li>
counter-increment: parrafos; <li>Elemento</li>
} </ol>
p:before {
content: counter(parrafos);

444;&".*/4;/ 107 444;&".*/4;/ 108


3(7* ,#01&*
F;
.*,"/
3(7/ 
3(7* ,#01&*
F;
.*,"/
3(7/

$ . +'$) '. - "'.  ' :$"*  )/ -$*-= . - ) /- . *)/*- . $! - )/ . *) ' ) ' % (+'* )/ -$*-=  1 5 ,0 . )0 )/- 0) ' ( )/* <ol> . -  0) *)/*- ''(*
($.(*
)*(-
KelementoL
4
'
- .0'/*
.
'
,0
(0 ./-
'
.$"0$ )/
$(" )? elemento@ *- ./ (*/$1*= '*. ' ( )/*. <li> )$*. . 1 ) ! /*. +*- 1-$*. *)/*- .
''(*. elemento@  !0)$:) counter() .:'* (0 ./- ' 1'*-  ' *)/*- ,0 ! / (6.
$- /( )/ ' ' ( )/*= ($ )/-. ,0 ' !0)$:) counters() (0 ./- /**. '*. *)/*- .
(+ 5)*
 .
'
(6.
3/ -)*
#./
'' "-
'
(6.
$)/ -)*@

' . "0)* -"0( )/*  ' !0)$:) counters() . 0)  )  / 3/* ,0 . (+'  +-
. +-- '*. 1'*- .  '*. $! - )/ . *)/*- .@  U@T )* + -($/ 0/$'$5- $! - )/ .
. +-*- .
+-

)$1 '
% -6-,0$*@

*- ;'/$(*= ' !0)$:) counters() /($7) + -($/ $)$- ' ./$'* *) ' ,0 . (0 ./- '
1'*-  '*. *)/*- .@  ./ !*-(= ' .$"0$ )/ % (+'* (*$!$ ' )/ -$*- +- (*./-- '
1'*-

/**.
'*.
*)/*- .
)
);( -*.
-*()*.?
ol {
counter-reset: elemento;
list-style-type: none;
}
li:before {
" 1.
F;CC;
$',&*

&
,.*,"
*(0(0 content: counters(elemento, '. ', upper-roman) ". ";
counter-increment: elemento;
$)
(-"*=
.$
.
0/$'$5
'
!0)$:) counters() )
'.
- "'.  )/ -$*- .? }

ol {
counter-reset: elemento;
list-style-type: none;
}
li:before {
content: counters(elemento, '. ') ". ";
counter-increment: elemento;
}

#*-=
'
.+ /*
,0
(0 ./-
'
'$./

' ( )/*.
.
'

'
.$"0$ )/
$(" )?

" 1.
F;CD;
$',&*

&
,.*,"
*(0(0

444;&".*/4;/ 109 444;&".*/4;/ 110


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

* ( %*-  
. ,0 0 )/ *) ' - .+'*  #**B= ,0 0/$'$5 .0 '$- -8 ) (0#.  .0.
($' .  ($''*) .  +6"$). 1$./. $-$.@  (6.= 
0 )/ *) 0) "-) *0( )/$:)
Cap’tulo 5. Frameworks ,0
$)'04
$ )/*.

% (+'*.

0.*@

*. frameworks . 0/$'$5) ) ' 6($/*  ' +-*"-($:)  +'$$*) .  . # 7.@ 

. % 0/ *-- /( )/ ) /**. '*. )1 "*- . (* -)*. $)'0.* ) '";) )1 "*-
 $ )/ ( )/ #) *( )5*  0/$'$5-. +- - - +'$$*) . 2  4 4 #) +- $* *.*' /*@ ' .*+*-/  '*. )1 "*- . . +0  *).0'/- ) ' '$./  '*. )1 "*- .
  ).
 frameworks +- @ .*+*-/*. +*- 
K#//+?II 1 '*+ -@4#**@*(I40$I-/$' .I".IL = ,0 . /0'$5
+ -$:$( )/ @  *)/$)0$:) . (0 ./- ' '$./  )1 "*- . .*+*-/*. )  .$./ (
 )7-$( )/ = 0) framework . 0) *)%0)/*  # --($ )/.= '$- -8.= *)1 )$*) . 4 0 ). *+ -/$1*?
+-6/$. ,0 +- / ) ) )+.0'- '. /- . - + /$/$1. ) (:0'*. " )7-$*. !6$'( )/
- 0/$'$5' .@
$)*2.
?
$- !*3
U
4
V=

)/ -) /
3+'*- -
Y
4
Z=
+ -
\@X

 ' ($.( !*-(= 0) framework  . 0) *)%0)/*  # --($ )/.= #*%.  ./$'*. 4 0 ).
$)*2.
$./?
$- !*3
V=

)/ -) /
3+'*- -
Z
+-6/$. ,0 + -($/ ) ' $. 9*- 2  *'1$-.  '. /- . - + /$/$1. +-  )/--. ) '*.
  
TS@X?
$- !*3
U
4
V=
+ -
\@X=
!-$
V@T
' ( )/*.
;)$*.


$. 9*
)
'*.
,0
+0 
+*-/-
1'*-@

D07 +*-/  0) $. 9*-  .0-$- )  $. 9* ,0   ) 0/-'$5- '*. ./$'*. +*-  ! /* 5.2. Primeros pasos con el framework YUI
,0 +'$) '*. )1 "*- .C D07 +*-/ 0) $. 9*- ,0 .  $ *)/$)0( )/  - .*'1 -
- (+ 5-  /-%- *) 
= '* +-$( -* ,0   . # - .  .-"- ' '$- -8 *(+' /@
'*. ($.(*. +-*' (. ,0 . +-*0 ) ' - - layouts *(+' %*.C D*- ,07 ' $. 9*- .
 . ' +6"$) +-$)$+'  
K#//+?II 1 '*+ -@4#**@*(I40$IL . +0  +0'.-
 $

/- .
4
+-*' (.
,0
#)
.$*
- .0 '/*.
./$.!/*-$( )/
#
(0#*
/$ (+*C
$- /( )/ .*- ' */:) Download YUI +- ,0 )*. - $-$% 0/*(6/$( )/ #./ '
*. frameworks  (6. *(+' /*. $)'04 ) 0/$'$ . +- ,0 ' $. 9*- )* / )" ,0 +6"$)   .-"@  1 -.$:)  
,0 . 0/$'$5 /0'( )/ . ' U= 0),0 ' 1 -.$:) )
/-%- ) )$)";) .+ /* " )7-$*  ' $. 9* 2 @ *- ./ (*/$1*= . #$/0' ,0 '*. ( %*- . +-0 .  
V 4 . # +0'$*@ 
U .  .-" ( $)/ 0) -#$1* *(+-$($* ,0
frameworks  $)'04)
# --($ )/.
+-? *0+
0)*.
\ @

 0/-'$5-
'*.
./$'*.
+*-
 ! /*
,0
+'$)
'*.
)1 "*- .@

/-/

'
#$/0'
#*% ) 1 5  .-"*=  .*(+-$( ' -#$1* ) 0',0$ - $- /*-$*  ' .$./ ( 4 1 -6. ,0

./$'*. reset.css ,0
/**.
'*.
$. 9*- .
+-*! .$*)' .
0/$'$5)@ $)'04 1-$*. $- /*-$*.@  /**. ''*.= '*. (6. $(+*-/)/ . +- ' +-*"-(*- 4 $. 9*-
.*)
'*.
.$"0$ )/ .?

) %-
*-- /( )/
'
/ 3/*=

!*-(
,0
.
/**.
'*.
*)/ )$*.
.
1 )
3/( )/
$"0'
)
/**.
'*.
)1 "*- .
4
,0
. )
+/' .
+-
( %*--
.0
 .$$'$
4
docs/?
$)'04
(6.

VSS
+6"$).

*0( )/$:)
4
40
.*-
/**.
'*.
+ -($/$-
.0
 .*
)
0',0$ -
( $*
4I*
$.+*.$/$1*@ *(+*) )/ .



- -
0',0$ -
./-0/0-
*(+' %
* layout 
!*-(
. )$''=
*)
'
. "0-$

,0
examples/?
$)'04
.$
VSS
% (+'*.

0.*

/**.
4

0)*

'*.
*(+*) )/ .

!0)$*)
*-- /( )/
)
0',0$ -
1 -.$:)

0',0$ -
)1 "*-@ 

/0'( )/ 3$./ )   ).  frameworks = /' 4 *(* . - *" ) ' +6"$) List of CSS
build/?
$)'04
/**.
'*.
-#$1*.
1-$+/
4  ,0
.
  )
$)'0$-
)
'.
+6"$).
,0
frameworks K#//+?II )@2$&$+ $@*-"I2$&$I $./O*!OO!-( 2*-&.L  ' $&$+ $@ ) '. 0/$'$5)


.$"0$ )/ .
. $*) .
.
3+'$
 /''( )/
' framework 

- *
+*-
#**B
5.2.1. Componentes CSS del framework YUI
5.1. El framework YUI
 '$- -8 
$)'04 '*. .$"0$ )/ . 0/-* *(+*) )/ .   ,0 . +0  ) 0/$'$5-  !*-(
' framework * '$- -8 
K#//+?II 1 '*+ -@4#**@*(I40$IL KYahoo! User InterfaceL . 0) . +-=
*)%0)/
*
*($)

0',0$ -
!*-(?
*)%0)/*  0/$'$ . 4 *)/-*' . .-$/*. ) 1-$+/ ,0 . 0/$'$5) +- - - +'$$*) .
reset.css?
*)%0)/*

./$'*.
,0
'$($))
4
) 0/-'$5)
/*.
'.
$)*).$./ )$.
)
'
2  $)6($. *(+' %.@  (6.= ' '$- -8 
$)'04 1-$. 0/$'$ . - '$*). *) =
./$'*
+*-
 ! /*
,0
+'$)
'*.
)1 "*- .

'*.
' ( )/*.  @
+*-
'*
,0
/($7)
.
*).$ -
0) framework @

base.css?
*)%0)/*

./$'*.
,0
.
+0  )
+'$-
 .+07.

) 0/-'$5-
'*.
./$'*.
+*-
#**B $./-$04 "-/0$/( )/ ' '$- -8 
) !*-(  .*!/2- '$- 4 %* ' '$ )$   ! /*
 '
)1 "*-
4
,0
(0 ./-)

' ( )/*  
!*-(
 0@
K#//+?II 1 '*+ -@4#**@*(I40$I'$ ). @#/('L = ,0 + -($/ 0/$'$5- 
+- +-*4 /*. 
0',0$ -
/$+*=
$)'0.*
*( -$' .@
fonts.css?
*)%0)/*

./$'*.
,0
+ -($/ )
(*./--
'
/ 3/*
*)
0)
/(9*
*).$./ )/
)
0',0$ -
)1 "*-@

444;&".*/4;/ 111 444;&".*/4;/ 112


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

grids.css?
*)%0)/*

./$'*.
,0
+ -($/ )
- -
$ )/*.
 layouts *
./-0/0-.
 $ . 0/$'$5) 1-$*. *(+*) )/ .   
= . .$"0 ' ($.(* -5*)($ )/* +- )'5- /*.
+6"$).
*(0) .@ '. #*%.  ./$'*.@ ' .$"0$ )/ % (+'* (0 ./- ' .* ) ' ,0 . 0/$'$5) '. #*%.  ./$'*.
reset.css= fonts.css 4 grids.css?
*. *(+*) )/ .   
!0)$*)) /)/* ) ' (** quirks *(* ) ' (** standards 
'*. )1 "*- .@ * *./)/ = 
- *($ ) /$1- ' (** standards 0/$'$5)* ' .$"0$ )/ <link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/fonts-min.css">

)
'.
+6"$).?
<link rel="stylesheet" type="text/css" href="css/grids-min.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd"> *(* . (04 #$/0' )'5- 1-$. #*%.  ./$'*.  ' 1 5= 
+-*+*-$*) 0) (7/**
'/ -)/$1* +- # -'*  !*-( (0#* (6. !$$ )/ @ ) *)- /*= 
+-*+*-$*) '. #*%.
5.2.2. Enlazando los archivos del framework YUI  ./$'*. reset-fonts.css 4 reset-fonts-grids.css +*- . - '. *($)$*) .  #*%. 
./$'*. (6. #$/0' .@  ./ !*-(= ' % (+'* )/ -$*- . +0  - # - 0/$'$5)* 0) .*'
*. '. +6"$). ,0 # ) 0.*  '*. *(+*) )/ .  ' '$- -8 
  ) )'5- .0. /$,0 / <link>?
-#$1*.@  -,0$/ /0-  
. /) (*0'- ,0 + -($/ )'5- ;)$( ) '*. -#$1*. ,0
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">
)  .$/  +6"$) 4 )* /**. '*. -#$1*.  ' '$- -8= '* ,0 ( %*- ' - )$($ )/*  '
+'$$:)@  #*%  ./$'*. reset-fonts-grids.css *($) '. 1 -.$*) . *(+-$($.  '. /- . #*%.
$ .:'* ,0$ - . 0/$'$5- 0)*  '*. *(+*) )/ .   
= .*'( )/   . )'5- 0) #*%   ./$'*. $)$1$0' .@  (6.  ' - 0$:) ) ' /(9* /*/'  ' -#$1*= ' "-) 1 )/% .
./$'*. ( $)/ ' /$,0 / <link>@ $ +*- % (+'* .:'* . ,0$ - 0/$'$5- ' *(+*) )/ ,0 .:'* . - '$5 0) + /$$:) ' . -1$*-= ) 1 5  '. /- . + /$$*) . )  .-$. ) ' % (+'*
reset.css +- $)$$'$5- /**. '*. ./$'*.  ' )1 "*-= '*. +.*. )  .-$*. .*) '*. )/ -$*-@
.$"0$ )/ .? *- ;'/$(*= 3$./ */- !*-( ;) (6. !$$ )/  )'5- '*. *(+*) )/ .  )  .-$*.@
 . # 0)*. ( . .= #**B *!-  ' +*.$$'$  )'5- "-/0$/( )/ '. #*%. 
TL *+$ ' -#$1* reset.css ,0 . )0 )/- ) ' $- /*-$* build/reset ' $- /*-$* ) '
./$'*.   . .0. +-*+$*. . -1$*- .@ ) ! /*= )0 ./-. +6"$). +0  )  .-"- '*.
,0
"0-.
/*.
/0.
#*%.

./$'*. @
-#$1*.  
$- /( )/  . '*. . -1$*- .  #**B 4  !*-( *(+' /( )/
UL
)'5
'
#*%

./$'*. reset.css )
/0.
+6"$).
0/$'$5)*
'
.$"0$ )/
/$,0 / <link>? "-/0$/@
<link rel="stylesheet" type="text/css" href="css/reset.css">  *)/$)0$:) . (0 ./- ' /$,0 / <link> )  .-$ +-  .-"- '. ($.(. #*%. 
' 1'*-  ' /-$0/* href   *)/ ) - ' -0/ *(+' / K.*'0/ * - '/$1L #./ ' -#$1* ./$'*.
 '
% (+'*
)/ -$*-
$- /( )/
 .
'*.
. -1$*- .

#**B?
 )'5*@ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/
reset-fonts-grids/reset-fonts-grids.css">
0),0 ./ !*-(  )'5- '*. - 0-.*.   
. ' (6. . )$''= /($7) . ' (6.
$) !$$ )/ @ ' (*/$1* . ,0 '*. -#$1*.  *-$"$)' . $)'04 ) *( )/-$*.= .+$*. ) $ .:'* . (+' ) +*- % (+'* '*. *(+*) )/ . reset.css 4 base.css= '. /$,0 /. )  .-$.
')*= .'/*.  '8)  4 */-*. ' ( )/*. ,0 0( )/) $))  .-$( )/ ' /(9*  '*. .
(0 ./-)

*)/$)0$:)?
-#$1*.@ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/
reset-min.css">
*- ./ (*/$1*= .:'* . - *($ ) ' 0.*  '*. -#$1*.  normales 0)* ' $. 9*- . <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/
)0 )/- $. 9)* ' +6"$) 4 +0  )  .$/- *).0'/- ' *)/ )$*  '*. -#$1*.   base-min.css">

@ 0)* ' +6"$) . )0 )/- / -($)= ' - *( )$:) . 0/$'$5- '*. -#$1*. 
*(+-$($*.
,0
+-*+*-$*)

@ 0),0  0$- '. $- $*) . *(+' /.   *(+*) )/  . /-$1$'= 
+-*+*-$*)
0) # --($ )/ "-6!$ ''( YUI: Configuration and Hosting K#//+?II 1 '*+ -@4#**@*(I
*. -#$1*. *(+-$($*. . )0 )/-) ) '*. ($.(*. $- /*-$*. ,0 '*. -#$1*.  40$I-/$' .I#*./$)"IL ,0 " ) - 0/*(6/$( )/ '. /$,0 /. <link>  '*. *(+*) )/ .
normales@  ;)$ $! - )$ . ,0 '*. -#$1*. *(+-$($*. 9 ) ' +- !$%* -min ) .0  . ' $*)*.@
)*(- =
$)$)*
,0
.
/-/

0)
1 -.$:)
($)$($5

'*.
-#$1*.  normales@
. 1 )/%.  0/$'$5- '*. +-*+$*. . -1$*- .  #**B +- . -1$- '*. -#$1*.  
.*)
$"0$ )* *) ' % (+'* )/ -$*-= +- )'5- ' 1 -.$:) *(+-$($  ' #*%  ./$'*. )0( -*..?
reset.css .
 
0/$'$5-
'
.$"0$ )/
/$,0 / <link>?

#**B
$.+*)

($' .

. -1$*- .
- +-/$*.
+*-
/**
'
(0)*
4
'
 .-"
.
<link rel="stylesheet" type="text/css" href="css/reset-min.css">
- '$5
.$ (+-
 .
'
. -1$*-
(6.
 -)*
'
0.0-$*@

# #*=
'*.
. -1$*- .
,0
+-*+*-$*)
#**B
.*)
3/( )/
'*.
($.(*.
,0
0/$'$5
#**B
)
.0.
+'$$*) .@

444;&".*/4;/ 113 444;&".*/4;/ 114


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

#**B
.$-1
/**.
.0.
-#$1*.
*(+-$($*.
( $)/
'
. -1$*-
2 
4
*)
' . #*%.  ./$'* reset.css  */-*. !-( 2*-&. ) 0/-'$5) '*. ./$'*. +*-  ! /* 4  +07.
$)!*-($:)
+- $.
+-
,0
'
)1 "*-
'*.
'( )
)
.0
#
'*'@

*(+- .$:) +'$) 0)*. ./$'*.  0*. +- +* - (*./-- *-- /( )/ '. +6"$).?  /8/0'* 
- 0
'
/(9*

'*.
-#$1*.  #./
0)
YS]
4
'
*)/-*'

'
#
1$/
,0
' . $:) /$ ) 0) /(9* (4*- ,0 ' .$"0$ )/ = '*. ' ( )/*. <strong> . 1 ) ) ) "-$/= '*.
0.0-$*
/ )"
,0
 .-"-
- + /$( )/
'
($.(*
-#$1*@ (6-" ) .
.*)
 0*.
+-
. +--
'*.
*)/ )$*.

/ 3/*=
/@

*.
. -1$*- .

#**B
.*)
$)!$)$/( )/
(6.
+*/ )/ .
4
!$' .
,0
0',0$ -
. -1$*- 
$.+*)  */-* *(+*) )/  ''(* base.css +- +'$- 0)*. ./$'*.  0*.  '.
2 
+-*+$*@
 (6.=
'
1 '*$

/-).($.$:)

'*.
-#$1*.
/($7)
.
$)!$)$/( )/ +6"$). ,0 #) .$* ) 0/-'$5. ( $)/ reset.css@ *- '* /)/*= 0) +6"$)  ' ,0 . '
(6.
-6+$
,0
'
*). "0$
*)
0',0$ -
*) 3$:)

- 
+-*+$@
+'$) '. #*%.  ./$'*. reset.css 4 base.css 4 ./6) '$./. +- (*./--.  '*. 0.0-$*.= 

'
. -1$$*
.
*(+' /( )/
"-/0$/*
4
+ -($/
)'5-
0',0$ -
1 -.$:)
/0'
*
+. !'/

'
+ -.*)'$5$:)
 '
.+ /*
,0
- '$
+*./ -$*-( )/
'
$. 9*-@

'
'$- -8

@
'
*)/ )$*

'
#*%

./$'*. base.css 


.
(0 ./-

*)/$)0$:)?

5.3. Inicializando estilos con el framework YUI /*

Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
' +-$( - *(+*) )/   
. reset.css= 0) #*%  ./$'*. 0/$'$5 +- ) 0/-'$5- '*.
http://developer.yahoo.net/yui/license.txt
./$'*.
,0
+'$)
+*-
 ! /*
'*.
)1 "*- .

/**.
'*.
' ( )/*.  @ version: 2.5.2
*/

*)/$)0$:)
.
(0 ./-
'
*)/ )$*
*(+' /*
 reset.css?
/* base.css, part of YUI's CSS Foundation */
/* h1 {
Copyright (c) 2008, Yahoo! Inc. All rights reserved. font-size:138.5%;
Code licensed under the BSD License: }
http://developer.yahoo.net/yui/license.txt h2 {
version: 2.5.2 font-size:123.1%;
*/ }
html{color:#000;background:#FFF;} h3 {
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote font-size:108%;
table{border-collapse:collapse;border-spacing:0;} }
fieldset,img{border:0;} h1,h2,h3 {
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} margin:1em 0;
li{list-style:none;} }
caption,th{text-align:left;} h1,h2,h3,h4,h5,h6,strong {
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} font-weight:bold;
q:before,q:after{content:'';} }
abbr,acronym {border:0;font-variant:normal;} abbr,acronym {
/* to preserve line-height and selector appearance */ border-bottom:1px dotted #000;
sup {vertical-align:text-top;} cursor:help;
sub {vertical-align:text-bottom;} }
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} em {
/*to enable resizing for IE*/ font-style:italic;
input,textarea,select{*font-size:100%;} }
/*because legend doesn't inherit in IE */ blockquote,ul,ol,dl {
legend{color:#000;} margin:1em;
}
' *)/--$* ,0 '. #*%.  ./$'*  /$+* reset  */-. '$- -8. 4 !-( 2*-&.= ' -#$1* ol,ul,dl {
reset.css .*'( )/ ) 0/-'$5 '*. ./$'*. ,0 +'$ +*-  ! /* ' )1 "*-@ ' ($* (6. margin-left:2em;
}
1$ )/ ,0 +-*1* ' reset.css  
. ,0 ' / 3/*  /**. '*. ' ( )/*. . (0 ./- *) ol li {
' ($.(* .+ /*@ * $(+*-/ .$ . /-/  0) +6--!* <p>= 0) /$,0 / <strong> * 0) /8/0'*  list-style: decimal outside;
. $:) <h1>= 4 ,0 ' reset.css )/ -$*- # ,0 /**. . 1 ) $"0'@ *- /)/*= '. +6"$).  }
ul li {
'. ,0 .:'* . +'$ ' #*%  ./$'*. reset.css )* ./6) +- +-. +- (*./--'.  '*.
list-style: disc outside;
0.0-$*.@ }
dl dd {

444;&".*/4;/ 115 444;&".*/4;/ 116


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

margin-left:1em; Code licensed under the BSD License:

} http://developer.yahoo.net/yui/license.txt
th,td { version: 2.5.2
border:1px solid #000; */
padding:.5em; body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
} table {font-size:inherit;font:100%;}
th { pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}
font-weight:bold;
text-align:center;  .+07.  +'$- reset.css= base.css 4 fonts.css= '. +6"$). (0 ./-) ' / 3/* )*-(' *)
} 0) /(9*  ' /-  13px 4 0) $)/ -'$) *  16px@ *. /8/0'*. <h1> . (0 ./-) *) 0)
caption {
/(9*  18px= '*. /8/0'*. <h2> *) 0) /(9*  16px 4 '*. /8/0'*. <h3> *) 0) /(9*  14px@
margin-bottom:.5em;
text-align:center;  (6.= /**. '*. ' ( )/*.  / 3/* . (0 ./-) *) ' /$+*  ' /- Arial * .$($'-= .'1* '*.
} ' ( )/*. <code> 4 <pre> ,0
.
(0 ./-)
*)
0)
!0 )/

)#*
!$%*@
p,fieldset,table,pre {
margin-bottom:1em; 
- *($ ) ./'  - /**. '*. /(9*.  ' /- 0/$'$5)* ' +*- )/% *(* 0)$ 
} ( $= +*-,0 . "0- ,0 ' / 3/* . (0 ./-  !*-( (6. *).$./ )/ ,0 ' 0/$'$5- '
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}
0)$ em@ *(* ' /(9*  ' /- . ./' $* +*- fonts.css . 13px= ./ ( $ . '
 .+07.  +'$- reset.css /**. '*. *)/ )$*.  / 3/*  ' +6"$) . (0 ./-) *) 0) ,0 *-- .+*) ' 1'*- 100%@ /$'$5)* 0) . )$'' *+ -$:) . +0  */ ) - ' +*- )/%
/(9*  ' /-  16px@  #*%  ./$'*. base.css # ,0 '*. /8/0'*.  . $:) <h1>= <h2> 4 *-- .+*)$ )/  0',0$ - /(9* ) +83 ' .@  .$"0$ )/ /' (0 ./- '"0)*.  '*.
<h3> . (0 ./- ) (6. "-) . ,0 ' - ./*  / 3/* 4 /($7) # ,0 . (0 ./- ) ) ) "-$/@ 1'*- .
(6.
*(0) .?
/-*.  '*. ./$'*. *(0) . ,0 ./'  base.css .*) '*. (-*- . ,0 (0 ./-) '*.
Para obtener este tama–o en p’xeles... ...utiliza el siguiente valor de porcentaje
' ( )/*.  '. '$./.= '*. *- .  '.  '.  /' 4 '*. (6-" ) . 1 -/$' . 4 '/ -' . 
'*.
' ( )/*.@ 10px 77%
11px 85%
 (4*-8  +6"$). - . *) '*. *(+*) )/ .   
0/$'$5) reset.css 4 base.css=
+*-
'*
,0
.
*(;)
,0
$)'04)
'.
.$"0$ )/ .
/$,0 /. <link>? 12px 93%
13px 100%
<link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/base-min.css"> 14px 108%

 0 - ,0 /($7) +0  . )'5- ./. ($.(. #*%.  ./$'*. $- /( )/  . '*. 15px 116%
. -1$*- .

#**B? 16px 123.1%
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/ 17px 131%
reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/ 18px 138.5%
base-min.css"> 19px 146.5%
20px 153.9%
5.4. Texto con el framework YUI
21px 161.6%
' () %*  ' / 3/* . 0)  '. "-) . 1 )/%. +*-/. +*- ' 0.*  ' !-( 2*-&@  !$)$- 22px 167%
'. +-*+$  .  ' / 3/*  ' !*-( ,0 $)$ 
. "0- ,0 /0. +6"$). . 1 ) 3/( )/
23px 174%
$"0' ) 0',0$ - 1 -.$:)  0',0$ - )1 "*-@  (6.= "-)/$5 ,0 '. +-*+$  .  '
/ 3/*  /0. +6"$). . -6) *).$./ )/ . 4 ,0 '*. *)/ )$*.  / 3/* . +/) + -! /( )/  24px 182%
0',0$ -
( $*
4I*
$.+*.$/$1*@ 25px 189%

) +-$( - '0"-= ' / - - *(+*) )/   

. fonts.css= 0) #*%  ./$'*. /) . )$'' 26px 197%
*(*
.
(0 ./-

*)/$)0$:)?
*- '* /)/*= .$ . ,0$ - (*$!$- +*- % (+'* ' /(9*  ' /-  '*. +6--!*. 4  '*. /8/0'*.
/*

. $:) <h1> 4 <h2>=
  .
0/$'$5-
'.
.$"0$ )/ .
- "'.
)
/0
#*%

./$'*.
+-*+$?
Copyright (c) 2008, Yahoo! Inc. All rights reserved.

444;&".*/4;/ 117 444;&".*/4;/ 118


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

p {
5.5.1. Primeros pasos
font-size: 123.1%; /* equivale a 16px */
}

- *($ ) 0/$'$5- 0)  ,0 . "0- ,0 ' )1 "*- (0 ./- .0. *)/ )$*. )
h1 {
font-size: 182%; /* equivale a 24px */ ' (** standards ) 1 5  ' (** quirks@  # #*= #**B 0/$'$5 ' .$"0$ )/  )
} /**.
'*.
.$/$*.
$. 9*.
*)

?
h2 {
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
font-size: 167%; /* equivale a 22px */
"http://www.w3.org/TR/html4/strict.dtd">
}
h3 {
* *./)/ = / ) ) 0 )/ ,0 '  )/ -$*- *-- .+*)  0) +6"$)  4 +*-
font-size: 153.9%; /* equivale a 20px */
}
/)/*= )* . 16'$* .$ 0/$'$5.   ) /0. +6"$).@ $ . ,0$ - (+' - 
) +6"$).  
+0  .
0/$'$5-
0)*

'*.
*.
.$"0$ )/ .
?
 ' ($.( !*-(= /($7) . +*.$' (*$!$- ' /$+*  ' /-  0',0$ - ' ( )/*  '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+6"$)@ . .$"0$ )/ . - "'. # ) ,0 '*. +6--!*. . (0 ./- ) *) 0) /$+*  ' /- Georgia * "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
.$($'-
4
'*.
/8/0'*.

. $:)
*)
0)
/$+*

' /- Verdana *
.$($'-?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
p { "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
font-family: Georgia, "Times New Roman", Times, serif;
} )/ .

- - layouts *)
'
*(+*) )/ grids.css=
.
)  .-$*
)'5-
.0
#*%

./$'*.?
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica, sans-serif; <link rel="stylesheet" type="text/css" href="css/grids-min.css">
}

#*%

./$'*.
/($7)
.
+0 
)'5-
$- /( )/
 .
'*.
. -1$*- .

#**B?
- # - 0.*  '*. ./$'*. +-*+*-$*)*. +*- ' *(+*) )/ fonts.css . )  .-$* ,0 '.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/grids/
+6"$).
)' )
.
#*%

./$'*.? grids-min.css">
<link rel="stylesheet" type="text/css" href="css/fonts-min.css">
' *(+*) )/ grids.css  + )  '*. 1'*- . $)$$' . ./' $*. +*- ' *(+*) )/
 0 - ,0 /($7) +0  . )'5- ./ ($.( #*%  ./$'*. $- /( )/  . '*. fonts.css= +*- '* ,0 /($7) . )  .-$* )'5- ./ ;'/$(*@ *(* '. +6"$). $. 9. *)
. -1$*- .

#**B? 
/($7) 0/$'$5) ' *(+*) )/ reset.css= . #$/0' 0/$'$5- ' #*%  ./$'*. "'*' ,0
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/ $)'04
./*.
/- .
*(+*) )/ .
$)$1$0' .?
fonts-min.css"> <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

*- ;'/$(*= *(* . (04 *(;) 0/$'$5- /**. '*. *(+*) )/ .   !*-( .$(0'/6) = 
- */ ) - ' (63$(* - )$($ )/* /($7) . +*.$' )'5- ./ #*%  ./$'*. *(+' /
$)'04 0) #*%  ./$'*. ,0 *($) /*. '. #*%.  ./$'*. $)$1$0' .@  (6.  $- /( )/
 .
'*.
. -1$*- .

#**B?
- 0$- ' /(9* /*/'  '*. -#$1*.= $.+*) -  0) .*' #*%  ./$'*. - 0 ' );( -* 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/
+ /$$*) . - '$5. ' . -1$*-@ - 0/$'$5- ' #*%  ./$'*. *(+' / .:'* . )  .-$* reset-fonts-grids/reset-fonts-grids.css">
0/$'$5-
'
.$"0$ )/
/$,0 / <link>?
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css"> 5.5.2. P‡gina, plantilla y rejilla
 #*%  ./$'*. *(+' / /($7) . +0  )'5- $- /( )/  . '*. . -1$*- .  

- *($ )
0/$'$5-
'
.$"0$ )/
./-0/0-
" ) -'
)
'.
+6"$).?
#**B? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/ strict.dtd">
reset-fonts-grids/reset-fonts-grids.css"> <html>
<head>
<title>P‡gina dise–ada con YUI</title>
5.5. Layouts con el framework YUI <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
' ;'/$(* *(+*) )/   
. grids.css= 0) #*%  ./$'*. . )$'' ,0 + -($/ - - <body>
(6.  T@SSS layouts $! - )/ .@ $. 9- layouts *) 
. (04 . )$''* 4 /$ ) ' 1 )/%  ,0 <div id="doc">
<div id="hd">
/**.
'*.
$. 9*.
.
1 )
3/( )/
$"0'
)
0',0$ -
1 -.$:)

0',0$ -
)1 "*-@
<!-- contenidos de la cabecera -->

444;&".*/4;/ 119 444;&".*/4;/ 120


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

</div>
6"$)?
./' 
'
)#0-
/*/'

'
+6"$)
4
.0
*(+*-/($ )/*
K)#0-
!$%
*

<div id="bd">
1-$' L@
/$'$5
'*.
. ' /*- . #doc= #doc2= #doc3 4 #doc4@
<!-- contenidos principales de la p‡gina -->
</div>
')/$''?
./' 
'
$1$.$:)
)
*'0().
 '
0 -+*

'
+6"$)@
/$'$5
'*.
. ' /*- .
<div id="ft">
.yui-b= .yui-t1= .yui-t2= .yui-t3= .yui-t4= .yui-t5 4 .yui-t6@
<!-- contenidos del pie de p‡gina -->
</div>
 %$''?
./' 
'.
$1$.$*) .
$)/ -).


*'0()@
/$'$5
'*.
. ' /*- . .yui-u=
</div>
.yui-g= .yui-gb= .yui-gc= .yui-gd= .yui-ge= .yui-gf@
</body>
</html>
5.5.3. P‡gina

+6"$)
.
$1$
)
/- .
+-/ .?
 +-$( - +-/  ' ./-0/0-  ' +6"$) . ' +-*+$ +6"$)= *)- /( )/ .0 )#0- 4

  -
K#hdL?
5*)
)
'
,0
.
$)'04 )
)*-('( )/
'*.
' ( )/*.
$)1-$)/ .

'
.0 *(+*-/($ )/*@ 
$)'04 +*-  ! /* 0/-* /$+*.  +6"$). ,0 *-- .+*) )  '*.
+6"$)
/' .
*(*
'
'*"*/$+*=
'
0.*-
4
'
( );
+-$)$+'

)1 "$:)@ $. 9*.
(6.
0/$'$5*.
#*4
)
8?

0 -+*
K#bdL?
5*)
)
'
,0
.
$)'04 )
/**.
'*.
*)/ )$*.
.+ 8!$*.

'
+6"$)@

Selector Caracter’sticas de la p‡gina Recomendada para
/-/

'
5*)
(6.
$(+*-/)/
4
'
,0
.0 '
/ ) -
0)
./-0/0-
(6.
*(+' %@
#doc (0.8
(!1. 750px /*&1"+(
 800x600 *
/1,."*.

$
K#ftL?
5*)
)
'
,0
.
$)'04 )
*/-*.
' ( )/*.
$)1-$)/ .

'
+6"$)
,0
.*)

( )*-
$(+*-/)$=
/' .
*(*
'
1$.*

*+4-$"#/=
)' .

'.
. $*) .

*)//*= #doc2 (0.8
(!1. 950px /*&1"+(
 1024x768 *
/1,."*.

+-$1$=
/7-($)*.
4
*)$$*) .
4
*/-*.
' ( )/*.
,0
 + ) )
 '
/$+*

+6"$)@ #doc3 (!1. 100% 1&-1".
./*&1"+(

 $1$.$:) )/ -$*-  ' +6"$) )* . *'$"/*-$ 4 

+ -($/ - - layouts .$) 0/$'$5- . #doc4 (0.8
(!1. 974px /*&1"+(
 1024x768 *
/1,."*.
./-0/0-@ * *./)/ = . /-/  0) ./-0/0- (04 - *( )' +*-,0 . 16'$ +- '
$)( ).
(4*-8

.$/$*.
2 
4
40

./-0/0--
'*.
*)/ )$*.

'
+6"$)

!*-(
':"$@ Nota
&
"/)* #doc3 (
.&"
(*
*1,
&
CBBL

&
, "(8
6
-1
"(&16 10px 
'. (
"7-1".*
6
*. )*(- . 0/$'$5*. *(* $ )/$!$*- K#hd  header *   -= #bd  body * 0 -+* 4 *0.*/ 10px 
'. (
.!*;

/0
*.'
/
3"0
-1
&*/
*(0("*/

&
, "(
,1(
&& .

#ft  footer * +$ L /(+** .*) *'$"/*-$*.= 0),0 .0 0.* ./6 (04 3/ )$* )/- '*. "(3".
&
/,"*
*1,*
,*.
&
,.*,"*
(3 *.;
*
*/0(08
/"
-1"./
&"'"(.
/0*/
'. (/
&0.&/
0(
/+&*
/
)".
&
/" 1"(0
. &  (
&
!*$

/0"&*/
,.*,"

&
, "(: #doc3 {
$. 9*- .
+-*! .$*)' .
4
'
. -
/)
*-/*.
+ -($/ )
# -
- "'.  (6.
*)$..@
margin: auto; }
)/ .  $. 9- layouts *) 
. )  .-$* *(+- ) - '. +-/ . ) '. ,0 
$1$ '
./-0/0-

0)
+6"$)? - 0/$'$5- 0) 0 */- +6"$)= .:'* . )  .-$* ($- ' /-$0/* id  ' ' ( )/* <div> ,0
)$ -- /**. '*. *)/ )$*.@ ' % (+'* (*./-* )/ -$*-( )/ 0/$'$5 ' . ' /*- #doc=
*-- .+*)$ )/

0)
+6"$)

)#0-
!$%
 750px?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>P‡gina dise–ada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc"> <!-- 750px, centrada -->
...
</div>
</body>
</html>
" 1.
G;C;
 "(8
,&(0"&&
6
.$"&&
(
&*/
&6*10/



$ . ,0$ - (*$!$- ' +6"$) )/ -$*- +- ,0 .0 )#0- .   ' 100%= .:'* . )  .-$*


$1$
'
./-0/0-

0)
+6"$)
)
/- .
+-/ .?
(*$!$-
'$" -( )/
'
. ' /*-
 '
' ( )/* <div> ,0
)$ --

/**.
'*.
*)/ )$*.?

444;&".*/4;/ 121 444;&".*/4;/ 122


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

5.5.4. Plantilla
strict.dtd">
<html>
' .$"0$ )/ )$1 ' ) ' ,0 $1$ 
' ./-0/0-  0) +6"$) . ' +')/$''= ,0 ./6
<head>
<title>P‡gina dise–ada con YUI</title> !*-( +*- '. *'0().  *)/ )$*.  ' +6"$)@ *-('( )/ = '. +6"$). $.+*) ) 
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 0)
5*)
 )/-'

*)/ )$*.
4
*/-
5*)
'/ -'
*)
*/-*.
*)/ )$*.
. 0)-$*.@
</head>
<body> 
+ -($/ - - ./-0/0-.  +6"$). *) *. *'0().  $! - )/ . )#0-. 4 )
<div id="doc3"> <!-- 100% --> $! - )/ . +*.$$*) . K$5,0$ - *  - #L@ ) +-$( - '0"- .  !$) ) '. *'0().  '
... +6"$) ( $)/ '* ,0 
''( bloques@  '*,0 . -  ( $)/ 0) ' ( )/* <div> *)
</div>
' '. yui-b@ ) ' .$"0$ )/ % (+'* . .0+*) ,0 ' +6"$) ./6 !*-( +*- *. *'0().=
</body>
</html> +*-
'*
,0
.
- )
*.
'*,0 .
 )/-*
 '
0 -+*

'
+6"$)?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
0),0 '*. 0/-* /$+*.  +6"$) $)'08*. ) 
*-- .+*) )  '*. $. 9*. (6. 0/$'$5*.=
strict.dtd">
/($7) . +*.$' - - 0) )#0-  +6"$) *(+' /( )/ + -.*)'$5@ *(* '. <html>
)#0-.  +6"$) ) 
. ./'  ) ( $)/ ' 0)$  ( $ em= ' +-* .* - ,0$ - <head>
- '$5-
'"0)
*+ -$:)
(/ (6/$@ <title>P‡gina dise–ada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
- */ ) - ' )#0- ) em= $1$ ' )#0-  .  ) +83 ' . +*- 13@ - ' )1 "*- </head>
<body>

)/ -) / 3+'*- - . +- $.* $1$$- ' )#0- ) +83 ' . +*- 13.3333@ $ +*- % (+'* . ,0$ -
<div id="doc">
./'  -
0)
)#0-

+6"$)
 1300px=
'
6'0'*
,0
.
 
- '$5-
.
'
.$"0$ )/ ? <div id="hd"><!-- cabecera --></div>
<div id="bd">

1 "*-

)/ -) /
3+'*- -? 1300 I 13.3333 ^ 97.50@
*-
/)/*=
'
)#0-

+6"$)
. <!-- cuerpo -->
97.50em@ <div class="yui-b">...</div>
<div class="yui-b">...</div>

 ./*

)1 "*- .? 1300 I 13 ^ 100@
*-
/)/*=
'
)#0-

+6"$)
. 100em@ </div>
<div id="ft"><!-- pie --></div>
) 1 5 '0' ' )#0- ) em= . 0/$'$5 ' .$"0$ )/ - "'  +- - - ' /(9*  </div>
+6"$)
+-*+$*? </body>
</html>
#doc-propio {
text-align:left; /* obligatorio */

)$- ,0 ' +6"$) /$ ) *. '*,0 . )* . .0!$$ )/ = 4 ,0 /($7) . )  .-$* $)$- 06'
margin:auto; /* para centrar la p‡gina */
width: 100em; /* resto de navegadores */
 '*. *. '*,0 . . ' +-$)$+'@ - ''*= . )$ -- ' '*,0 +-$)$+' *) */-* ' ( )/*
*width: 97.50em; /* navegador Internet Explorer */ <div> 04* id . yui-main?
min-width: 1300px; /* opcional, pero recomendada */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
}
strict.dtd">
<html>
 +-*+$  text-align: left . *'$"/*-$ +- (*./-- ' / 3/* '$) *  ' $5,0$ -= 4
<head>
,0 ) ' #*%  ./$'*. grids.css ' ' ( )/* <body> ./'  ' +-*+$  text-align: <title>P‡gina dise–ada con YUI</title>
center;@  +-*+$  margin: auto .:'* . )  .-$ .$ . ,0$ -  )/-- ' +6"$) - .+ /*  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
'
1 )/)
 '
)1 "*-@ </head>
<body>
 )#0-  /**. '*. )1 "*- . ( )*.
)/ -) / 3+'*- - . ./'  $- /( )/ <div id="doc">
( $)/ ' +-*+$  width@ ) ' .* 
)/ -) / 3+'*- -= .0 )#0- . ./'  ( $)/ <div id="hd"><!-- cabecera --></div>
<div id="bd">
0) hack (04 *)*$* ,0 # ,0 .:'*
)/ -) / 3+'*- - $)/ -+- / ' +-*+$  *width@ ./ <!-- cuerpo -->
+-*+$  *width .$ (+-
.
 
$)'0$-
 .+07.

'
+-*+$  width@ <div id="yui-main">
<div class="yui-b">
*- ;'/$(*= ' +-*+$  min-width . *+$*)'= + -* . - *($ ) ./'  -' *) ' ($.(* <!-- bloque principal -->
1'*-  ' )#0- ) +83 ' .@ 0 !0)$:) . 1$/- ,0 ' ./-0/0-  ' +6"$) . -*(+ </div>
</div>
0)*
'
1 )/)
 '
)1 "*-
- 0
.0
/(9*@
<div class="yui-b">

444;&".*/4;/ 123 444;&".*/4;/ 124


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

<!-- bloque secundario --> <!-- cuerpo -->

</div> <div id="yui-main">
</div> <div class="yui-b">
<div id="ft"><!-- pie --></div> <!-- bloque principal -->
</div> </div>
</body> </div>
</html> <div class="yui-b">
<!-- bloque secundario -->
</div>
Nota
</div>

*.'
(
&
-1
/0
"/)*


,.'"0
-1
&
*.(
(
&
-1
/
"((
/1/
&*-1/
(
&
+" *
<div id="ft"><!-- pie --></div>
  /
"(,("(0

/1
3"/1&"7"+(;
& 1(*/
"/)*./
,.".(
*&*.
&
&0.&
/1(."*
&*
</div>
(0/
,*/"&
(0.*
&
+" *  8
6
-1
/1&
"(&1".
&
'(2

(3 "+(
6
,*.
.7*(/

</body>
/""&"
6


/
.*'(&
-1
,.7
&*
(0/
,*/"&;
*(


/
,*/"&
"(&1".
&
&*-1
</html>
/1(."*
(
,."'.
&1 .
(
&
+" *   *(
&
/ 1."

-1
/
3"/1&"7.
*..0'(0
(
&
,*/""+(
/0&";  *)/$)0$:) . (*$!$ ' +6"$) )/ -$*- +- 0/$'$5- ' +')/$'' ,0 (0 ./- ' '/ -'  '
 - #
4
*)
0)
)#0-
 300px?
 .+07.  - - '*. '*,0 .  ' +6"$) 4  .+07.  $)$- 06' . ' '*,0 +-$)$+'= '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
.$"0$ )/ +.* *).$./ ) 0/$'$5- ' +')/$''  0 +- ./'  - '. )#0-.   strict.dtd">
'*,0 4 .0 +*.$$:)@ 
$)'04 +*-  ! /* . $. /$+*.  +')/$''.= ,0 *-- .+*) )  '*. <html>
$. 9*. (6. *(0) . 4 ./6) +- +-*. +- (*./-- '*. !*-(/*. +0'$$/-$*. (6. <head>
0/$'$5*.? <title>P‡gina dise–ada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
Selector Caracter’sticas de los bloques </head>
<body>
.yui-t1 0.&
 160px 
&
"7-1". <div id="doc" class="yui-t6"> <!-- plantilla con el lateral derecho de 300px -->
<div id="hd"><!-- cabecera --></div>
.yui-t2 0.&
 180px 
&
"7-1".
<div id="bd">
.yui-t3 0.&
 300px 
&
"7-1". <!-- cuerpo -->
<div id="yui-main">
.yui-t4 0.&
 180px 
&
.! <div class="yui-b">
.yui-t5 0.&
 240px 
&
.! <!-- bloque principal -->
</div>
.yui-t6 0.&
 300px 
&
.! </div>
<div class="yui-b">
<!-- bloque secundario -->
Nota
</div>
5"/0
1(
/,0"'
,&(0"&&
/,"&
-1
10"&"7
&
/&0*. .yui-t7 6
-1
/
,1
',&.
(
&/
, "(/
</div>
-1
(*
/0(
"3""/
(
*&1'(/
*
&*-1/;
<div id="ft"><!-- pie --></div>
</div>
$ ' +6"$) 4 #  !$)$* .0. '*,0 .= 0/$'$5- 0) +')/$'' 0 */- . /) . )$''* *(* </body>
(*$!$-
'
1'*-

'
'.
 '
' ( )/* <div> ,0
)$ --

/**.
'*.
*)/ )$*.? </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ . +')/$''. *!- $. +*- 
.*) '. (6. 0/$'$5. ) ' $. 9* 2 = + -* ) (0#.
strict.dtd"> *.$*) . '. +6"$). +- . )/) */-. ./-0/0-. (6. *(+' %.@ 0)* ' ./-0/0- ./6
<html>
$1$$ ) (6. *'0().= )* . 0/$'$5) '. +')/$''.= .$)* ,0 .  !$) $- /( )/ 0)
<head>
<title>P‡gina dise–ada con YUI</title>
- %$''@
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head> 5.5.5. Rejilla
<body>
<div id="doc" class="yui-t"> <!-- plantilla con el lateral izquierdo de 160px --> ' / - - ' ( )/* ,0 !*-( ' ./-0/0-  '. +6"$). ) 
. ' - %$''= ,0 + -($/
<div id="hd"><!-- cabecera --></div> - '$5- $. 9*. (0#* (6. *(+' %*. ,0 '*. ,0 . - '$5) ;)( )/ *) '. +')/$''.@ 
<div id="bd">
./-0/0-
)
- %$''
.
+0 
0/$'$5-
%0)/*
*)
'.
+')/$''.
*

!*-(
$) + )$ )/ @

444;&".*/4;/ 125 444;&".*/4;/ 126


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
G;
.'4*.%/

.
- %$''.
+ -($/ )
- -
$1$.$*) .
(04
*(+' %.
4
.
 !$) )
( $)/
*.
' ( )/*.? <div class="yui-b"><!-- bloque principal -->
<!-- rejilla 1/2, 1/2 -->
T@ '
*)/ ) *-

'
- %$''
./' 
'
/$+*

$1$.$:)@ <div class="yui-g">
U@ .
0)$ .
.*)
'*.
' ( )/*.
$)$1$0' .
)
'*.
,0
./6
$1$$
'
- %$''@ <div class="yui-u first"></div>
<div class="yui-u"></div>
 - %$'' (6. 0/$'$5 4 (6. . )$'' . .yui.g= ,0 $1$ 0) ' ( )/* ) *. +-/ . $"0' .@ ' </div>

:$"*  )  .-$*
.
'
.$"0$ )/ ?

<!-- rejilla 1/3, 1/3, 1/3 -->
<div class="yui-g"> <div class="yui-gb">
<div class="yui-u"></div> <div class="yui-u first"></div>
<div class="yui-u"></div> <div class="yui-u"></div>
</div> <div class="yui-u"></div>
</div>
' ' ( )/* <div class="yui-g"> -  0) )0 1 $1$.$:) * - %$''@ *(* . /-/  0) </div>
$1$.$:) ) *. +-/ . $"0' .= ) .0 $)/ -$*- .   )  !$)$- *. 0)$ . ( $)/ <div </div>
<div class="yui-b"><!-- bloque secundario -->
class="yui-u"></div>@  (6.= 
*'$"  $)$- 3+'8$/( )/ 06'  '. *. 0)$ . .
</div>
' +-$( - ( $)/ ' '. first@  ./ !*-(= ' :$"* *-- /*  ' % (+'* )/ -$*- . </div>
(0 ./-

*)/$)0$:)? <div id="ft"><!-- pie --></div>
</div>
<div class="yui-g"> </body>
<div class="yui-u first"></div> </html>
<div class="yui-u"></div>
</div> *($))* '. - %$''. 6.$. . +0  ) */ ) - */-* /$+*  - %$''. (04 0/$'$5.@  - %$''
TIW=
TIW=
TIW=
TIW
.
+0 
*/ ) -
*($))*
*.
- %$''.
TIU=
TIU?

.$"0$ )/
/'
(0 ./-
'.
. $.
- %$''.
$)'0$.
+*-
 ! /*
)


4
.0.
-/ -8./$.?
...
Selector Tipo de divisi—n <div id="bd">
<!-- cuerpo -->
.yui.g D
1("/

,.0/
" 1&/
>C<D8
C<D?
<div id="yui-main">
.yui.gb E
1("/

,.0/
" 1&/
>C<E8
C<E8
C<E? <div class="yui-b"><!-- bloque principal -->
<!-- rejilla 1/2, 1/2 -->
.yui.gc D
1("/
>D<E8
C<E? <div class="yui-g">
.yui.gd D
1("/
>C<E8
D<E? <div class="yui-u first">

.yui.ge D
1("/
>E<F8
C<F? <!-- rejilla 1/2, 1/2 -->

<div class="yui-g">
.yui.gf D
1("/
>C<F8
E<F?
<div class="yui-u first"></div>
<div class="yui-u"></div>
/$'$5)* 1-$.  '. - %$''. +-  !$)$. . +*.$' - - ./-0/0-.  +6"$) (04 </div>
*(+' %.@ ' .$"0$ )/ % (+'* (0 ./- ' :$"*  0) +6"$) 04* 0 -+* ./6 $1$$* )
*.
*'0().
)
.0
+-/
.0+ -$*-
4
)
/- .
*'0().
)
.0
+-/
$)! -$*-? </div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ <div class="yui-u">

strict.dtd">
<html> <!-- rejilla 1/2, 1/2 -->
<head> <div class="yui-g">
<title>P‡gina dise–ada con YUI</title> <div class="yui-u first"></div>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> <div class="yui-u"></div>
</head> </div>
<body>
<div id="doc" class="yui-t7"> </div>
<div id="hd"><!-- cabecera --></div> </div>
<div id="bd">
<!-- cuerpo --> </div>
<div id="yui-main">

444;&".*/4;/ 127 444;&".*/4;/ 128


3(7* ,#01&*
G;
.'4*.%/ 
3(7* ,#01&*
H;
("/
3(7/

</div>
<div class="yui-b"><!-- bloque secundario -->
</div>
</div>
Cap’tulo 6. TŽcnicas avanzadas
...
</div>
...
6.1. Im‡genes embebidas
- - ./-0/0-. *(+' %. *) 
. - '( )/ . )$''* 0),0 - ,0$ -  0) + -8**   ";) '*. ./0$*. - '$5*. +*- #**B ' /$ (+*  -"  0) +6"$) ( $  + ) ) 0)
+- )$5% @ *- . (*/$1*= +- '*. $. 9*- . ,0 ./6) (+ 5)* +0  . -  0/$'$ ' [S]  ' +-/  ' '$ )/ 4 ) 0) US]  ' +-/  ' . -1$*-@ *. )1 "*- .  '*. 0.0-$*.
# --($ )/ YUI: CSS Grid Builder K#//+?II 1 '*+ -@4#**@*(I40$I"-$.I0$' -IL ,0  $) ' (4*- +-/  ' /$ (+*   .-"- $(6" ) .= -#$1*. 1-$+/= #*%.  ./$'*.
+ -($/
*)!$"0--
'
./-0/0-

'
+6"$)

!*-(
"-6!$@  4
*/-*.
- 0-.*.
3/ -)*.@

*- ./ (*/$1*= '. ( %*-. ) ' +-/  ' '$ )/ " ) -) (0#*. (6.  ) !$$*. ,0 '.
5.6. Otros frameworks ( %*-. ) ' +-/  ' . -1$*-@  /**. '*. ' ( )/*.  ' +-/  ' '$ )/ = '. $(6" ) . .*)
)*-('( )/ '. ,0 (6. + )'$5) ' - )$($ )/*@  (6.  ' + .*   $(" )= '

K#//+?II 1 '*+ -@4#**@*(I40$IL )* . ' ;)$* framework  $.+*)$' = + -* .$ . '
- )$($ )/* . - .$ )/ +*-,0  $(" ) - ,0$ - - '$5- 0) + /$$:) ' . -1$*-@ *(* '*.
(6. *(+' /*@ ' (*/$1* . ,0 
)$ .$,0$ - . 0) framework = .$)* ,0 . 0) *(+' /
)1 "*- . /$ ) ) 0) '8($/  *) 3$*) . .$(0'/6) . *) ' . -1$*- K )/- U 4 [L= '
'$- -8  *(+*) )/ . '$./*. +- - - +'$$*) . 2  $)6($.@ 
$)'04   ). 
 .-"

0)
+6"$)
*)
(0#.
$(6" ) .
.
'*,0 
*)/$)0( )/ @
0/$'$ .  /** /$+* +- !$'$/- ' +-*"-($:) *) 1.-$+/= $)'04 *(+*) )/ .
+- $. 9*. '$./*. +- 0/$'$5-= # --($ )/. +- *(+-$($- ' :$"* 1-$+/ 4 ' :$"* *(* 4 . 3+'$: ) '. . $*) . )/ -$*- .= ' .*'0$:) +- ( %*-- ' - )$($ )/*  '.
= *(+*) )/ . +- !$'$/- ' $. 9* 2  *)  4 */-*. (0#*. *(+*) )/ .  /** $(6" ) . *).$./ ) *($)-'. ) 0) $(" ) "-) ''( sprite CSS 4 0/$'$5- '
/$+*@ +-*+$  background-image )

' ( )/*  @

 (6.  
= 3$./ ) (0#*. */-*. frameworks ,0 !$'$/) ' $. 9*  +6"$). 2  *) @  (6.  '*. sprites CSS 3$./ */- /7)$ ,0 + -($/ embeber * $)'0$- '. $(6" ) . ) '
0),0 )* .*) /) *(+' /*. *(* 
= 0 )/) *) ' 1 )/%  ,0 .:'* .*) frameworks = +-*+$ +6"$)  0 #*%  ./$'*. @  /7)$ . .0 '  )*($)- "im‡genes embebidas" *
+*-
'*
,0
./6)
(0#*
(6.
.+ $'$5*.@ "im‡genes en l’nea"@


*)/$)0$:)
.
$)$)
'*.
/- .
!-( 2*-&.
(6.
+*+0'- .
'
(-" )



? *-('( )/ = ) '. #*%.  ./$'*. 4 +6"$).  .:'* . $)$ '   ' $(" ) ,0
   .-"- ' )1 "*-@ ) ' /7)$  '. $(6" ) . (  $. )* . $)$ '  =

\YS
-$
4./ ( K#//+?II\YS@".IL ?
.0
)*(-
+-*1$ )
 960px=
,0
.
'
)#0-
+-
'
.$)* ,0 . $)'04 ) $- /( )/ '*. 4/ .  ' $(" )= +- ,0 ' )1 "*- +0 
,0
*+/$($5
'
$. 9*

'*.
'4*0/.@
./
!-( 2*-&
$1$
'*. 960px 
)#0-

'
(*./--'

!*-(
$)( $/@
+6"$)
) 12 * 16 *'0().
 60px 4 40px 
)#0-
- .+ /$1( )/
4
' .
9
0)
(-" )
$5,0$ -*
4
 - #*
 20px 

*'0()@
'
-#$1*
*(+-$($*
 ' *. /*.  ' $(" ) . $)'04 ) ( $)/ 0) esquema .+ $' ''(* data:=  ' ($.(
!-( 2*-&
/($7)
$)'04
0)
+')/$''

++ '
)
!*-(/*  4
+')/$''.
+-
'*. !*-( ,0 '.  . $)$) ( $)/ ' .,0 ( http:= '. $- $*) .  *-- * ' /-:)$*
+-*"-(.
$- 2*-&.=
()$-!!' =
#*/*.#*+
4
$.$*@ ( $)/ ' .,0 ( mailto:= /@ ' .,0 ( data: .  !$) ) ' ./6)-  UV\Z
K#//+?II222@$ /!@*-"I-!I-!UV\Z@/3/L 4
.0
.$)/3$.
.
'
.$"0$ )/ ?

 K#//+?II222@4('@ IL ?
.0
)*(-
+-*1$ )
 "Yet Another Multicolumn Layout"
4
.
0)*

'*.
!-( 2*-&.
(6.
*(+' /*.@
*+*-/
/*.
'.
1 -.$*) .

/**.
'*. data:[<mediatype>][;base64],<data>
)1 "*- .=
$)'04 )*
)1 "*- .
/)
*.*' /*.
*(*

)/ -) /
3+'*- -
X@

' /-$0/* <mediatype> *-- .+*) ' /$+*  *)/ )$*  '*. 4/ . ,0 . $)'04 )@ *. /$+*.
*0( )/$:)


./6
!*-(
+*-
0)
'$-*
)
!*-(/*  
(6.

TTS
 *)/ )$* ./6) ./)-$5*. 4 '*. ,0 0/$'$5) #$/0'( )/ '. $(6" ) . .*)? image/
+6"$).@
'
$"0'
,0

=
'
!-( 2*-&

/($7)
$.+*)

0)
# --($ )/
gif= image/jpeg 4 image/png@ $ )* . $)$ ' /$+*  !*-( 3+'8$/= ' )1 "*- .0+*) ,0
''( 
0$' - K#//+?II0$' -@4('@ IL ,0
+ -($/
*)!$"0--
"-6!$( )/
'
. text/plain=
.
 $-=
/ 3/*
)*-('
4
*--$ )/ @
./-0/0-

'
+6"$)@

'0 +-$)/ K#//+?II'0 +-$)/..@*-"IL ?
!-( 2*-&
(04
.$($'-
)
*) +/*
 960 Grid ' 1'*- base64 . *+$*)' $)$ ,0 '*. /*.  ' $(" ) . #) *$!$* . ";) '
System=
4
,0
+*-
 ! /*
'
+6"$)
/$ )
0)
)#0-
 950px $1$$
) 24 *'0(). !*-(/* base64@ $ )* . $)$ ./ 1'*-= ' )1 "*- .0+*) ,0 '*. 4/ .  ' $(" ) )*
 30px 
)#*
4 10px 
(6-" ) .
'/ -' .@ ./6)
*$!$*.@

 *)/$)0$:) . (0 ./- ' % (+'*  0) $(" )  K<img>L ,0 )* . $)$ ( $)/

0)  .$)*
,0
.
$)'04 )
.0.
4/ .
$- /( )/
)
'
+6"$)?

444;&".*/4;/ 129 444;&".*/4;/ 130


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

<!-- Imagen externa que el navegador debe descargar desde el servidor --> # '. #*%.  ./$'*. *(+' /.= +*- '* ,0 ' 0( )/* ) .0 /(9* )* + )'$5 ) 3 .*
<img alt="Icono de un libro" width="16" height="16" src="/imagenes/icono_libro.png" />
'
- )$($ )/*
"'*'

'
 .-"

+6"$).@
<!-- Imagen embebida que el navegador puede mostrar directamente porque ya dispone de ' +-* .*  *$!$$:)  '*. 4/ .  '. $(6" ) . . ";) ' !*-(/* . YW . 0) /- 
sus bytes -->
(6. +-*+$  +-*"-(*- . 2  ,0  $. 9*- . 2 @ $ *)* . +*- % (+'* ' ' )"0%
<img alt="Icono de un libro" width="16" height="16" src="data:image/png;base64,iV
BORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHd 
+-*"-($:)   +0  .
0/$'$5-
'
.$"0$ )/
$)./-0$:)?
hcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC
$bytesCodificados = base64_encode(file_get_contents("/ruta/hasta/la/imagen.png"));
4AsoPoGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA
3FZCAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYP $ )* $.+*) .  *)*$($ )/*.  +-*"-($:)= +0  . 0/$'$5- '"0)  '. # --($ )/.
HkGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzpw
*)'$)
,0
*$!$)
$- /( )/
'*.
*)/ )$*.
 '
-#$1*
$)$*?
4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV3VI
4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acCoJhjn
. YW
)* -I * - K#//+?II222@(*/*$/@*(I0/$'I. YWA * -A )* -@.+L
ZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkhkcywZqQ
QlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035mxIkLq0dhD
$)-4
$'
/*
. YW
)* -
I
-).'/*- K#//+?II222@"- 4241 -)@*(I* I+#+I
w5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII=" /> $)-4U. YWL
' /-$0/* src  ' $(" )  ' % (+'* )/ -$*- 0/$'$5 ' .,0 ( data: +- $)'0$- ) ' .
+-$)$+' .
1 )/%.

'
/7)$

'.
$(6" ) .
( $.
.*)
'.
.$"0$ )/ .?
+6"$) '*. 4/ .  ' $(" )@ ' 1'*- image/png $)$ ,0 '*. /*. *-- .+*) )  0)

 0
-6./$( )/
'
);( -*

+ /$$*) . =
'*
,0
( %*-
)*/' ( )/
'
$(" ) ) !*-(/* PNG@ ' 1'*- base64 $)$ ,0 '*. /*. $)'0$*. ./6) *$!$*. . ";) '
- )$($ )/*@
!*-(/*
. YW@

 -($/
"0--
0)
+6"$)  *(+' /
)
0)
;)$*
-#$1*  K ( $ )*
0),0 ' % (+'* )/ -$*- !0)$*) *-- /( )/ = *(* /**. '*. /*. . $)'04 ) ) '
/*.
.0.
$(6" ) .
)
.0
#*%

./$'*.
*
)
'
+-*+$*
:$"*  L@
+-*+$* :$"*  = ' )1 "*- )* +0  # - 0.*  ' #7 +- - 0/$'$5-'*.
+*./ -$*-( )/ @ ' - .0'/* . ,0 ' );( -*  + /$$*) .  . - 0 -6./$( )/ =
 %*-
'
- )$($ )/*

'.
+ /$$*) .

)
'.
,0
'.
$(6" ) .
)*
.
"0-)
)
'
+ -*
0( )/
.$")$!$/$1( )/
'
/(9*

/*.
'.
+6"$).  @ # @

' .$"0$ )/ +.* *).$./ ) 0/$'$5- '. $(6" ) . ( $. ) '. #*%.  ./$'*. =  *-
*)/-=
.0.
 .1 )/%.
.*)
*).$ -' .?
!*-( ,0 . ()/ )") '. 1 )/%.  ' % (+'* )/ -$*- 4 . .*'0$*) ) /*. .0.  .1 )/%.@
'
.,0 ( data: .:'*
!0)$*)
)
'*.
)1 "*- .
(* -)*.
,0
.
+- *0+)

'*.
- (  - '. $(6" ) . )  . .$"0 ' ($.( ./-/ "$ ,0 )  = 4 ,0 .:'* .
./6)- .
K$- !*3=
!-$
4
+ -L@

)/ -) /
3+'*- -
Y
4
Z
)*
.*)
+ .

+-* .-
'
)  .-$*
.0./$/0$-
'  +*-
'
.,0 ( data:=
/'
4
*(*
(0 ./-
'
.$"0$ )/
% (+'*?
.,0 ( data:@

)/ -) /
3+'*- -
[
. "0-
,0
+ -($/$-6
0/$'$5- data:=
+ -*
.*'( )/
/* Imagen externa que el navegador debe descargar desde el servidor */ +-
(  -
$(6" ) .
) @
ul#menu li { background: #FFF no-repeat center center url("/imagenes/icono_libro.png");
}
'
+-* .*
*(+' /*
.
' )/*
4
+**
!' 3$' =
4
,0
.
)  .-$*
*$!$-
'.
$(6" ) .
)
. YW
4
- *$!$-'.

1 5
,0
.
,0$ - )
(*$!$-@
/* Imagen embebida que el navegador puede mostrar directamente porque ya dispone de sus
bytes */
.
$(6" ) .
( $.
0( )/)
*).$ -' ( )/
'
/(9*

'
#*%

./$'*. @
ul#menu li {  (6.=
'
*$!$$:)
. YW
/($7)
0( )/
(0#*
'
/(9*

'*.
/*.

'
background: #FFF no-repeat center center url("data:image/png;base64,iVBORw0KGgo $(" )
- .+ /*

.0.
4/ .
*-$"$)' .@
AAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQW
RvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC4AsoP
*.
)1 "*- .
'$($/)
'
/(9*
(63$(*

'*.
/*.
,0
.
+0  )
(  -
( $)/
oGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA3FZ data:@
'"0)*.
)1 "*- .
*(*
+ -
+ -($/ )
0)*.
W@SSS
4/ .

/*.=
($ )/-.
CAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYPH
,0
'
)1 "*-
$- !*3
+ -($/
#./
TSS@SSS
4/ .
+*-
 data:@
kGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzp
w4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV
3VI4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acC 6.2. Mapas de imagen
oJhjnZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkh
kcywZqQQlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035m *. (+.  $(" ) . '' 1) 0/$'$5)*  . '*. *-8" ) .   @ *($))* '.
xIkLq0dhDw5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII="); /$,0 /. <map> 4 <area> %0)/* *) ' /-$0/* usemap  ' /$,0 / <img> . +*.$'  !$)$-
}
$! - )/ .
5*).
+$)#' .
 )/-*

0)
($.(
$(" )@
 1 )/%  0/$'$5- '. $(6" ) . ( $. )  . ,0 .:'* 0( )/ ' /(9*  '. #*%.
 ./$'*. 4 )* '  /*. '. +6"$).   ' .$/$*@  (6.= '*. )1 "*- . "0-) ) .0

444;&".*/4;/ 131 444;&".*/4;/ 132


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

*4 ) 8 '*. (+.  $(" )  #) .$* .0./$/0$*. +*- */-. .*'0$*) . *(* '.#= ,0
.*) (6. !6$' .  0/$'$5- 4 $.+*) )  (6. +*.$$'$ .@ * *./)/ = - $ )/ ( )/ #
.0-"$*
0)
)0 1*
/$+*

(+

$(" )
- *
.:'*
*) @

./*. (+.  $(" )  )* .0 ' ) 0/$'$5-. +-  !$)$- 5*). +$)#' .  )/-*  0)
$(" )= .$)* ,0 . (+' ) +- (*./-- $)!*-($:) $$*)' 4 *( )/-$*. .*- '.
$! - )/ . 5*).  0) $(" )@ ' .$/$*  !*/*"-!8 '$&- K#//+?II222@!'$&-@*(IL 0/$'$5 '*.
(+.  $(" ) +- (*./-- )*/. 4 *( )/-$*.  '*. 0.0-$*.@ /-*. .$/$*. 2  *(*
 **& K#//+?II222@! **&@*(IL 0/$'$5) '*. (+.  $(" ) +- ,0 '*. 0.0-$*.
/$,0 / )
'.
!*/*"-!8.
$)$)*
'
)*(-

'.
+ -.*).
,0
+-  )
)

0)@

 *)/$)0$:) . 3+'$) '*. +.*. )  .-$*. +- - - 0) (+  $(" ) 3'0.$1( )/

*)  .$($'-

'*.

'$&-
4
 **&@

) +-$( - '0"-= . ' $*) ' $(" ) ) ' ,0 . 1)  (*./-- '. )*/.@ ) ./ % (+'* .
0/$'$5 0) $(" )  ' !*/:"-! 1$.0'+)$ K#//+?II222@!'$&-@*(I+#*/*.I1$.0'+)$IL ,0
. +0  0/$'$5- '$- ( )/ 4 ,0 ./6 $.+*)$' ) '$&- K#//+?II222@!'$&-@*(I+#*/*.I
1$.0'+)$IUVVXS[YTWIL ?

" 1.
H;D;
1("*('"(0*
&
',

"' (
.*
*(


 $(" ) +*-  ! /* )* (0 ./- )$)"0) 5*) /$1@ 0)* ' 0.0-$* +. ' -/:) +*-
)$(  0',0$ - +-/  ' $(" )= . (0 ./- ' - 0-*  /*. '. 5*). /$1.
$.+*)$' .@  (6.= 0)* ' 0.0-$* +. ' -/:) +*- )$(  0) 5*) /$1= . (0 ./-
'
*( )/-$*
.*$*@

' :$"*   ' (+  $(" ) - * *)  1-8 (0#* ) !0)$:)  ' .*'0$:)
0/$'$5@ 0),0 '"0). .*'0$*) . - ) 1-$*. <div> 4 /'. +*-  )*/I*( )/-$*= )
./ % (+'* . .$(+'$!$ ' (63$(* ' :$"*  4 .:'* . 0/$'$5 0) ' ( )/* <div> 4 0)
'$./ <ul>?
<div class="mapa_imagen">
<img src="imagenes/mar.jpg" />

<ul class="notas">
<li id="nota1"><p>Todo el mar es suyo :)</p></li>
<li id="nota2"><p>ÁMe encanta este color azul!</p></li>
<li id="nota3"><p>Dan ganas de tirarse...</p></li>
</ul>
" 1.
H;C;

' (
*." "(&
(
&
-1
/
3

'*/0..
&
',

"' ( </div>

' !0)$*)($ )/*  ' (+  $(" ) / -($)* . ' ,0 (0 ./- ' .$"0$ )/ . 0 )$  ' ' ( )/* <div class="mapa_imagen"> )$ -- /**. '*. ' ( )/*. ,0 !*-() ' (+ 
$(6" ) .? $(" ) K' $(" ) *-$"$)' 4 '. )*/.I*( )/-$*.L@ *. *( )/-$*. . $)'04 ) ( $)/ 0)
'$./
)*
*- ) <ul>=
)
'
,0

' ( )/* <li> .
0)
*( )/-$*@

444;&".*/4;/ 133 444;&".*/4;/ 134


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

' ' ( )/* <div> 4 ' '$./ <ul>   ) 0/$'$5- ' /-$0/* class 4 )* id +*-,0 ) 0) ($.( display: block;
}
+6"$) +0  # - 1-$*. (+.  $(" )@ *- .0 +-/ = '*. ' ( )/*. <li>  
*( )/-$*   ) 0/$'$5- /-$0/*. id= 4 ,0  *( )/-$* . (0 ./- ) 0) +*.$$:) YL
./'  -
'
+*.$$:)
4
$( ).$*) .


)*/?
;)$
4
/$ )
0).
$( ).$*) .
;)$.

)#0-
4
'/0-@ ul.notas li#nota1 {
width: 140px; height: 110px; top: 130px; left: 345px;
 '1  '*. (+.  $(" )  *).$./ ) +*.$$*)-  <li>  !*-( .*'0/
}
- .+ /*  ' $(" ) 4 .$")-' . 0) )#0-I'/0-  0.@ *./ -$*-( )/ = . (+'  ' ul.notas li#nota2 {
+. 0*A'. :hover +- (*./--I*0'/- ' ( )/*. 0)* ' 0.0-$* +. ' -/:) +*- width: 30px; height: 200px; top: 10px; left: 10px;
)$(@ }
ul.notas li#nota3 {
TL
*.$$*)-

!*-(
.*'0/

)*/? width: 60px; height: 60px; top: 200px; left: 150px;
}
div.mapa_imagen {
position: relative +'$)* '. - "'.  )/ -$*- . ' (+  $(" )  4 !0)$*) *-- /( )/ ) '*.
} )1 "*- . $- !*3 4 !-$@  .!*-/0)( )/ = '*. )1 "*- .
)/ -) / 3+'*- - 4 + -
ul.notas li {
position: absolute;
/$ ) ) --*- . ,0 $(+$ ) ,0 ' % (+'* !0)$*) *-- /( )/ @ ' +-*' ( - .$ ) ,0
} '*. ' ( )/*. <li> /$ ) ) 0) !*)* /-).+- )/ 4 /)/*
)/ -) / 3+'*- - *(* + - /$ ) )
+-*' (.
*)
'
+. 0*A'. :hover .*-
./*.
' ( )/*.@
UL
+'$-
'*.
./$'*.
6.$*.

'.
)*/.
K*-
')*
4
.$)
*-)*.

'$./L?
 .*'0$:) *).$./ ) 9$- 0) !*)* K*'*- * $(" )L .*- '*. ' ( )/*. <li>@ *(* '*
ul.notas li {
border: medium solid #FFF; ;)$* $(+*-/)/ . 9$- 0) !*)*= $) + )$ )/ ( )/  .$ ' !*)* . - ' * )*= ' .$"0$ )/
list-style: none; - "'  .
.0!$$ )/ ?
}
ul.notas li {
VL
0'/-
+*-
 ! /*
'.
)*/.
4
(*./--'.
0)*
.
+.
'
-/:)
+*-
)$(

'
$(" )? background: url("esta_imagen_no_existe");
}
ul.notas li {
display: none; ' :$"*  *(+' /*  ' (+  $(" ) ,0 !0)$*) ) /**. '*. )1 "*- . . '
} .$"0$ )/ ?
div.mapa_imagen:hover ul.notas li {
display: block; div.mapa_imagen {
} position: relative
}
WL
+'$-
'*.
./$'*.
6.$*.
'
/ 3/*

'.
)*/.
4
+*.$$*)-'*
 %*


)*/? ul.notas li {
list-style: none;
ul.notas li p {
display: none;
position: absolute;
position: absolute;
top: 100%;
border: medium solid white;
background: url("esta_imagen_no_existe");
background: #FFF;
}
opacity: 0.65;
div.mapa_imagen:hover ul.notas li {
display: block;
margin: 10px 0 0 0;
}
padding: 0.3em;
ul.notas li p {
}
margin: 10px 0 0 0;
padding: .3em;
XL 0'/- +*-  ! /* ' / 3/*  '. )*/. 4 (*./--'* 0)* . +. ' -/:) +*- )$(  '
display: none;
)*/? background: #FFF;
ul.notas li p { opacity: 0.65;
display: none; position: absolute;
} top: 100%;
ul.notas li:hover p { }
ul.notas li:hover p {

444;&".*/4;/ 135 444;&".*/4;/ 136


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

display: block; #contenidos h1, #contenidos h2 {

} color: #369;
}
ul.notas li#nota1 { a {
width: 140px; height: 110px; top: 130px; left: 345px; color: #557E29;
} }
ul.notas li#nota2 { span {
width: 30px; height: 200px; top: 10px; left: 10px; background-color: #557E29;
} }
ul.notas li#nota3 {
width: 60px; height: 60px; top: 200px; left: 150px; *. 0 )*. $. 9*- . 0/$'$5) ) .0. /-%*. 0) );( -* (04 - 0$*  *'*- . ,0
} *($)) )/- .8 +- $. 9-  ' ( )/*  ' +6"$)@  ./ !*-(= ) '. #*%.  ./$'*.
+-*! .$*)' . . - +$/ ) 0) 4 */- 1 5 '*. ($.(*. 1'*- .@ * *./)/ =  )* + -($/  !$)$-
'
- .0'/*
!$)'
.
'
,0
(0 ./-
'
.$"0$ )/
$(" )?
1-$' .
+-
'( )-
'*.
1'*- .
,0
.
0/$'$5)
*)./)/ ( )/ @

$ ' $. 9*- ,0$ - (*$!$- ' *'*- 1 - #557E29  ' #*%  ./$'*. )/ -$*-= D:(*
($ /*. '. +-$$*) .  . *'*- 1 - ) ' #*%  ./$'*.C *$!$- . *'*- 
!*-( ()0' . 0) +-* .* / $*.* 4  (.$* ' )/*@ !*-/0)( )/ = '*. $/*- .  / 3/*
$.+*) )  # --($ )/. +- .0./$/0$- 0) 1'*- +*- */-*= 0),0 /(+** . 0) .*'0$:)
:+/$(@

*- */- +-/ = /($7) . *(;) $. 9- .$/$*. 2  $7)/$*. * (04 .$($'- . ) '*. ,0 .:'*
($ .0 .+ /*  !$)$* *) @ ) ./ .*= . #$/0' ,0 0) .$/$* 2  . $! - )$ 
*/-* .*'( )/ ) '"0)*. +**. 1'*- .  .0 #*%  ./$'*. @  .*'0$:) *).$./
)0 1( )/ ) (*$!$- /**. '*. 1'*- .  *'*- . 4 /$+*.  ' /- +- (*$!$- ' .+ /*
 '
.$/$*
2 @

*. +-*' (. )/ -$*- . . +*-8) - .*'1 - !6$'( )/ .$  + -($/$ -  !$)$- 1-$' .
*(*
)
'
.$"0$ )/
#*%

./$'*.?
$colorAzul = #369;
$colorVerde = #557E29;

#cabecera {
background-color: $colorAzul;
color: #FFF;
}
#contenidos h1, #contenidos h2 {
color: $colorAzul;
}
" 1.
H;E;
,

"' (
*(
0*/
/1/
7*(/
0"3/ a {
color: $colorVerde;
}
6.3. Variables en las hojas de estilos span {
background-color: $colorVerde;
 (4*-8  $. 9*- . 2  +-*! .$*)' . - ) ,0  -   0) ( )$.(* }
!0)( )/' +- !$'$/- .0 /-%*? '. 1-$' . ) '. #*%.  ./$'*.@ 0)* .  !$) 0)
) ' #*%  ./$'*. )/ -$*-= ' $. 9*- +0  ($- ' /*)*  1 - *  50' #$ )* 0)
#*%

./$'*.
*(*
'
.$"0$ )/ ?
.*'* ($* ) ' #*%  ./$'*. 4 *) ' . "0-$ .*'0/  ,0 . (*$!$) /**. '*.
#cabecera { ' ( )/*.

'
+6"$)
4
)*
.
*( /
)$)";)
--*-@
background-color: #369;
color: #FFF;
}

444;&".*/4;/ 137 444;&".*/4;/ 138


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

* *./)/ = .$ ' #*%  ./$'*. )/ -$*- . ,0$ - - 0/$'$5- +- */-*. $. 9*. *) *'*- . $"0$ )* *) ' #*%  ./$'*.  '*. % (+'*. )/ -$*- .= ' - .0'/* . ' ,0 . (0 ./- 
*(+' /( )/ $! - )/ .= ' )*(-  '. 1-$' . )/ -$*- . )* . -8 *-- /*@ *- ''*= '* *)/$)0$:)?
(6.
*-- /*
. -8
- -
1-$' .
04*
)*(-
)*
$)'04
$)!*-($:)
.*-
.0
.+ /*? <!--#set var="colorPrincipal" value="#369" -->
$colorPrincipal = #369; <!--#set var="colorSecundario" value="#557E29" -->
$colorSecundario = #557E29;
#cabecera {
#cabecera { background-color: <!--#echo var="colorPrincipal" -->;
background-color: $colorPrincipal; color: #FFF;
color: #FFF; }
} #contenidos h1, #contenidos h2 {
#contenidos h1, #contenidos h2 { color: <!--#echo var="colorPrincipal" -->;
color: $colorPrincipal; }
} a {
a { color: <!--#echo var="colorSecundario" -->;
color: $colorSecundario; }
} span {
span { background-color: <!--#echo var="colorSecundario" -->;
background-color: $colorSecundario; }
}
$ )* . ,0$ - 0/$'$5- */- 3/ ).$:) +- '*. -#$1*.  +-* .*. +*- ' . -1$*-= .
( )/' ( )/ =  )* + -($/ 0/$'$5- 1-$' . ) '. #*%.  ./$'*.@ *- ./ (*/$1* . +*.$' # - 0.*  ' $- /$1 XBitHack= /' 4 *(* . 3+'$ ) ' *0( )/$:) *!$$' 
#)  .--*''* 1-$. .*'0$*) . ,0 # ) 0.*  ' . -1$*- 2  4  '*. ' )"0% .  +#
U@U
.*-

K#//+?II#//+@+# @*-"I*.IU@UI#*2/*I..$@#/('L @
+-*"-($:)

. -1$*-
+-
$)'0$-
1-$' .
)
'.
#*%.

./$'*. @
6.3.1. Lenguajes de programaci—n de servidor
 .*'0$:) (6. . )$'' *).$./ ) 0/$'$5- ' ( )$.(* 
KServer Side IncludesL  '*.
. -1$*- . 2  +# 4 $-*.*!/

@  *)/$)0$:) . (0 ./- ' +-* .* *(+' /* +- '  .*'0$:) '/ -)/$1 ' 0.*  '. $- /$1. 
 ' . -1$*- 2  *).$./ ) (+' - 0)
. -1$*-
2 
+#
U@U? ' )"0%  +-*"-($:)  . -1$*-@ 0),0 . /-/  0) /7)$ $! - )/ = /($7) . .
)
+-* .-
'.
#*%.

./$'*.
)
'
. -1$*-
)/ .

)1$-'.
'
0.0-$*@
TL *$!$- ' -#$1*  *)!$"0-$:)  +# ?  + )$ )*  /0 $)./'$:) +0  . - '
-#$1*
" ) -'

*)!$"0-$:) httpd.conf *
'
-#$1*

*)!$"0-$:) .htaccess *.  /'' . /7)$*.  ' .*'0$:)  + ) )  ' ' )"0%  +-*"-($:) 0/$'$5*= + -* '
( )$.(* ,0 . 0/$'$5 . $7)/$* ) /**. '*. .*.@  *)/$)0$:) . (0 ./- 0) % (+'*
)
0',0$ -
.*=
.
)  .-$*
9$-
'.
.$"0$ )/ .
*+$*) .

*)!$"0-$:)?
,0
#
0.*
 '
' )"0%

+-*"-($:)  @
Options +Includes
AddType text/css .scss - $)'0$- 1-$' . ) '. #*%.  ./$'*. = . -  0) -#$1* *) 3/ ).$:) .php 4 .
AddOutputFilter INCLUDES .scss 0/$'$5
'
.$)/3$.
,0
.
(0 ./-
)
'
.$"0$ )/
% (+'*?
 *)!$"0-$:) )/ -$*- ' $)$ ' . -1$*- 2  ,0 '*. -#$1*. 04 3/ ).$:) .  .scss <?php
header('content-type:text/css');
.*)
-#$1*.  
. -1$*-
4
,0
+*-
/)/*=
.
  )
+-* .-
)/ .

)1$-'*.
'
0.0-$*@

-
,0
'*.
($*.
)
'
*)!$"0-$:)
. )
! /$1*.=
)*
*'1$ .
- $)$$-
'
. -1$*-
2 @ $nombre_variable1 = 'valor_variable1';
$nombre_variable2 = 'valor_variable2';
UL
- -
'
#*%

./$'*.
4
"0--
'
-#$1*
*)
3/ ).$:) .scss
echo <<<FINCSS
VL
9$-
'.
1-$' .

'
#*%

./$'*.
0/$'$5)*
'
.$"0$ )/
.$)/3$.? selector {
propiedad1: $nombre_variable1;
-
 !$)$-
'
1-$' ? propiedad2: $nombre_variable2;
}
<!--#set var="nombre_de_la_variable" value="valor_de_la_variable" -->
FINCSS;
?>
-
0/$'$5-
'
1-$'
<!--#echo var="nombre_de_la_variable" --> $"0$ )* *) ' #*%  ./$'*.  '*. % (+'*. )/ -$*- .= ' -#$1*   *(+' /* . '
.$"0$ )/ ?

444;&".*/4;/ 139 444;&".*/4;/ 140


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

<?php font-size: 110%;

header('content-type:text/css'); }

$colorPrincipal = '#369'; h1 {
$colorSecundario = '#557E29'; based-on: base(tipografia_basica);
font-size: 200%;
echo <<<FINCSS }
#cabecera {
background-color: $colorPrincipal; CSS Cacheer . /) 1)5* ,0 + -($/ $)'0.* )$- . ' /*- . *(* . (0 ./- ) '
color: #FFF; .$"0$ )/
% (+'*?
}
#contenidos h1, #contenidos h2 { ul {
color: $colorPrincipal; propiedad1: valor1;
}
a { li {
color: $colorSecundario; propiedad2: valor2;
} }
span { }
background-color: $colorSecundario;
}
$
.
+-* .)
'.
- "'.  )/ -$*- .
*) CSS Cacheer=
'
- .0'/*
.
'
.$"0$ )/ ?
FINCSS; ul {
?> propiedad1: valor1;
}
*- ;'/$(*= 0)* )' . ' #*%  ./$'*. " ) - *) ./ (7/**= )* *'1$ . 0/$'$5- '
3/ ).$:) .php )
'
)*(-
 '
-#$1*

'
#*%

./$'*.? ul li {
propiedad2: valor2;
<link type="text/css" rel="stylesheet" href="/css/estilos.php" />
}

6.3.2. CSS como lenguaje de programaci—n

6.4. Estilos alternativos
. .*'0$*) . ,0 + -($/ ) 0/$'$5- 1-$' . ) '. #*%.  ./$'*. #) 1*'0$*)*  /'
 (4*-8  .$/$*. 2  $.+*) )  0) * 1-$. #*%.  ./$'*.  ,0 . +'$)
() - ,0 '"0)  ''. + -($/ 0/$'$5-  *(* .$ !0 - 0) ' )"0%  +-*"-($:)@ )
0/*(6/$( )/ ' -"-  +6"$) ) ' )1 "*-@ ) - '$= ' ./6)-  I 
 ./. .*'0$*) . . CSS Cacheer K#//+?II222@.#0)$)()@*(I-#$1 IUSS[ISXIVSI
+ -($/
 !$)$-
1-$.
#*%.

./$'*.  '/ -)/$1.
)
0)
($.(
+6"$)@
# &O*0/O..O# -L =
$ 
+*-
'
$. 9*-
#0)

)()@
 ./ !*-(= ' 0.0-$* +0  . ' $*)- ' ./$'* *) ' ,0 . (0 ./- ' +6"$) )/- 0)
) +-$( - '0"-= CSS Cacheer + -($/ 0/$'$5- 1-$' . ) '. #*%.  ./$'*.= 0),0 ) ./
. -$  ./$'*.  !$)$*. +*- ' $. 9*- 2 @ ) *.$*) . '*. ./$'*. '/ -)/$1*. . (+' )
.*'0$:)
.
 )*($))
Q*)./)/ .Q?
+*- +0- ./7/$= +*- % (+'* +- *!-  - temas 4 .,0 (.  *'*- . $! - )/ . ) 0) .$/$*
@constants {
2 @ $) (-"*= ' 0.* (6.  0*  '*. ./$'*. '/ -)/$1*. . ' ( %*-  '  .$$'$
nombre_de_la_constante: valor_de_la_constante;
}
*!- $ )* #*%.  ./$'*. ,0 !$'$/ ) '  .*  '*. *)/ )$*. +- '. + -.*).
$.+$/.@
selector {
propiedad: const(nombre_de_la_constante); . #*%.  ./$'*.  ,0 . )'5) ) 0) +6"$)  ( $)/ ' /$,0 / <link> +0  )
} . -

/- .
/$+*.?

CSS Cacheer /($7)
+ -($/
 !$)$-
0)*.
./$'*.
.
,0
.
- 0/$'$5)
)
$! - )/ .
' ( )/*.?
 -() )/ .
K"persistent"L?
'.
#*%.

./$'*.
,0
.
+'$)
.$ (+- @
@base(tipografia_basica) {
- ! - )/ .
K"preferred"L?
'.
#*%.

./$'*.
'/ -)/$1.
,0
.
+'$)
+*-
 ! /*@
font-family: Arial, sans-serif;
line-height: 1.5;
'/ -)/$1.
K"alternate"L?
'.
#*%.

./$'*.
'/ -)/$1.
,0
'
0.0-$*
+0 
} . ' $*)-@

p { . #*%.  ./$'*. + -() )/ . . +'$) .$ (+- $) + )$ )/ ( )/  ' - ./*  #*%. 
based-on: base(tipografia_basica); ./$'*.  !$)$. *  ' #*%  ./$'* '/ -)/$1 0/$'$5 +*- ' 0.0-$*@ - $)$- ,0 0)

444;&".*/4;/ 141 444;&".*/4;/ 142


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

#*%  ./$'*.  . + -() )/ = . 0/$'$5 ' /-$0/* rel="stylesheet" 4 )* .
 #*%  ./$'*.  ' % (+'* )/ -$*- )* . +'$ ) ' +6"$)  ( )*. ,0 ' 0.0-$* '
/-$0/* title )
'
/$,0 / <link>?
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<link rel="stylesheet" type="text/css" href="css/otros_estilos.css" />
./'  '
. ' $*) )/- /*. '. #*%.  ./$'*. '/ -)/$1.@ ./ -/ -8./$ )* ./6 $.+*)$' )
/**. '*. )1 "*- .= +*- '* ,0 '*. $. 9*- . )*   ) .0+*) - ,0 ' 0.0-$* +*-6
0/$'$5-'@

) ' % (+'* )/ -$*-= '. *. #*%.  ./$'*.  . +'$) .$ (+- $) + )$ )/ ( )/  ' ) '*. )1 "*- . *(* $- !*3 4 + -= 0)* 0) +6"$) $.+*)  1-$. #*%.  ./$'*.
( $*
4

*/-.
+*.$' .
#*%.

./$'*.
 !$)$.
+*-
'
+6"$)@ '/ -)/$1.= ' 0.0-$* +0    -  /*. ''. 4 . ' $*)- ' ,0  .  /-17.  ' ( );
Ver > Estilo * Ver > Estilo de p‡gina@
. #*%.  ./$'*. +- ! - )/ . .*) '. #*%.  ./$'*. '/ -)/$1. ,0 . +'$) +*-  ! /*@
*- '* /)/*= .$ ' 0.0-$* )* . ' $*) 3+'8$/( )/ */-  '/ -)/$1= ) ' +6"$) /($7) $
.
*).$ -
0)
+6"$)  ,0
)'5
'.
.$ /
#*%.

./$'*.
.$"0$ )/ .?
. +'$) '. #*%.  ./$'*. +- ! - )/ .@ - $)$- ,0 0) #*%  ./$'*.  . +- ! - )/ = <link rel="stylesheet" type="text/css" href="css/estilos1.css" />
.
0/$'$5
'
/-$0/* rel="stylesheet" 4
.
./' 
'
/-$0/* title )
'
/$,0 / <link>? <link rel="stylesheet" type="text/css" href="css/estilos2.css" />
<link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/ estilos3.css" />
estilos.css" /> <link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/
estilos4.css" />
 #*%  ./$'*. )'5 ) ' % (+'* )/ -$*- . +'$ ) ' +6"$) .$ (+- ,0 ' 0.0-$* <link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/
)* . ' $*) */- #*%  ./$'*. '/ -)/$1@ ' ./6)-  I  + -($/ - - "-0+*.  estilos5.css" />
#*%.  ./$'*. +- ! - )/ .@ $ *. * (6. #*%.  ./$'*. )'5. /$ ) ) ' ($.(* /8/0'*= ' <link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/
)1 "*-
*).$ -
,0
!*-()
+-/

0)
"-0+*
4
'.
+'$

!*-(
*)%0)/? estilos6.css" />
<link rel="stylesheet" title="Estilo alternativo 3" type="text/css" href="css/
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/ estilos7.css" />
estilos1.css" />
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/
)$$'( )/ =
'.
#*%.

./$'*.
,0
.
+'$)
)
'
+6"$)
.*)?
estilos2.css" />

.
*.
+-$( -.
#*%.

./$'*.
Kestilos1.css 4 estilos2.cssL
+*-
. -

/$+*
. /$,0 /. <link>  ' % (+'* )/ -$*- )'5) *. #*%.  ./$'*. $! - )/ . *) ' ($.(* + -() )/
4
,0
+*-
/)/*=
.
+'$)
%*
0',0$ -
$-0)./)$@
1'*- ) .0 /-$0/* title= +*- '* ,0 ' )1 "*- *).$ - ,0 !*-() 0) "-0+*@ *(* .

.
*.
.$"0$ )/ .
#*%.

./$'*.
Kestilos3.css 4 estilos4.cssL
+*-
. -

/$+*
/-/  #*%.  ./$'*. +- ! - )/ . K+*-,0 /$ ) ) 0) /-$0/* rel="stylesheet" 4 0) /-$0/*
+- ! - )/
4
,0
+*-
/)/*=
.
+'$)
.$ (+-
,0
'
0.0-$*
)*
. ' $*)
3+'8$/( )/
title )* 18*L ' )1 "*- +'$ /*. '. #*%.  ./$'*.  ' "-0+*  )* . - ,0 ' 0.0-$*
*/-*
/$+*

#*%

./$'*.
'/ -)/$1@
. ' $*)
3+'8$/( )/
*/-
#*%

./$'*.
'/ -)/$1@
$ ' 0.0-$* 0/$'$5 0) )1 "*- 1)5* K$- !*3= + -L 4 +0'. .*- ' ( ); Ver >
'
.$"0$ )/
% (+'*
$)'04
#*%.

./$'*.
+ -() )/ .
4
+- ! - )/ .?
Estilo=
.
(0 ./-)
'.
.$"0$ )/ .
*+$*) .?
<link rel="stylesheet" type="text/css" href="css/estilos1.css" />
<link rel="stylesheet" type="text/css" href="css/estilos2.css" />
Estilo alternativo 1=
. ' $*)*
+*-
 ! /*
4
,0
#
,0
.
+'$,0 )
'.
#*%.

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/ ./$'*. estilos3.css 4 estilos4.css 4
.
 % )

+'$-
'
- ./*

#*%.

./$'*.
estilos3.css" />
'/ -)/$1.@
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/
estilos4.css" />
Estilo alternativo 2=
,0
#
,0
.
+'$,0 )
'.
#*%.

./$'*. estilos5.css 4
estilos6.css 4
.
 % )

+'$-
'
- ./*

#*%.

./$'*.
'/ -)/$1.=
$)'04 )*
'.
. *. +-$( -. #*%.  ./$'*.  ' % (+'* )/ -$*- .*)  /$+* + -() )/ = +*- '* ,0 '
)1 "*- '. +'$ .$ (+- @ . */-. *. #*%.  ./$'*. .*)  /$+* +- ! - )/ = +*- '* ,0 ' #*%.

./$'*.
+- ! - )/ . estilos3.css 4 estilos4.css@
)1 "*- /($7) '. +'$  ( )*. ,0 ' 0.0-$* . ' $*) */-. #*%.  ./$'*
Estilo alternativo 3=
,0
#
,0
.
+'$,0
'
#*%

./$'*. estilos7.css 4
.
 % )
'/ -)/$1.@ 
+'$-
'
- ./*

#*%.

./$'*.
'/ -)/$1.=
$)'04 )*
'.
#*%.

./$'*.
' ;'/$(* /$+*  #*%.  ./$'*. .*) '. '/ -)/$1.= ,0 .:'* . +'$) .$ ' 0.0-$* '. +- ! - )/ . estilos3.css 4 estilos4.css@
. ' $*) 3+'8$/( )/ @ - $)$- ,0 0) #*%  ./$'*.  . '/ -)/$1= . 0/$'$5 ' *- ;'/$(*= - 0 - ,0 $) + )$ )/ ( )/  ' /$+*  #*%  ./$'*. )'5= '*.
/-$0/* rel="alternate stylesheet" 4
.
./' 
'
/-$0/* title )
'
/$,0 / <link>? )1 "*- . /($7) /$ ) ) ) 0 )/ '*. ( $*. K/-$0/* mediaL ' +'$-  #*%  ./$'*.
<link rel="alternate stylesheet" title="Estilo alternativo" type="text/css" href="css/ )

$.+*.$/$1*
*)
'
,0
 
'
0.0-$*@
estilos.css" />

444;&".*/4;/ 143 444;&".*/4;/ 144


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

<!--[if lt IE 7]>
6.5. Comentarios condicionales, filtros y hacks Este navegador es cualquier versi—n anterior a Internet Explorer 7
<![endif]-->
6.5.1. Comentarios condicionales
<!--[if lte IE 6]>
) *.$*) .= 0)* . $. 9 0) .$/$* 2 = . +- $.* +'$- $! - )/ . - "'. 4 ./$'*. ) Este navegador es Internet Explorer 6 o cualquier versi—n anterior
<![endif]-->
!0)$:)  ' )1 "*-@  ./ !*-(= . +0  ) *-- "$- '*. --*- . 4 '$($/$*) .  0)
)1 "*-
.$)
! /-
'
- ./*

)1 "*- .@ <!--[if gt IE 7]>
Este navegador es cualquier versi—n m‡s reciente que Internet Explorer 7
$-*.*!/ $)/-*0%* ) .0 )1 "*-
)/ -) / 3+'*- - X 0) ( )$.(* ''(* "comentarios <![endif]-->
condicionales"= ,0 /*18 $)'04 ) '. 1 -.$*) . (6. - $ )/ . *(*
)/ -) / 3+'*- - [= 4 ,0
+ -($/
+'$-
$! - )/ .
./$'*.  . ";)
'
1 -.$:)
 '
)1 "*-@ <!--[if gte IE 8]>
Este navegador es Internet Explorer 8 o cualquier versi—n m‡s reciente

.$)/3$.

'*.
*( )/-$*.
*)$$*)' .
.
.
)
'

'*.
*( )/-$*. normales   ? <![endif]-->

<!-- Comentario normal de HTML -->

*- ;'/$(*= /($7) . +0  ) 0/$'$5- */-*. *+ -*- . (6. *(+' %*. .$($'- .  '*. ,0 .
<!--[if expresion]> Comentario condicional <![endif]-->
+0  ) )*)/-- ) '*. ' )"0% .  +-*"-($:)@ ' *+ -*-  K&L *($) *.
3+- .$*) . +- - - 0) *)$$:) ,0 .:'* . 0(+' .$ . 0(+' ) '. *. 3+- .$*) .@ '
 .$)/3$.  '*. *( )/-$*. *)$$*)' . + -($/ ,0 .0 *)/ )$* . $")*- ) 0',0$ - *+ -*-  K|L /($7) *($) *. 3+- .$*) . 4 -  *)$$*) . ,0 . 0(+' ) 0)* '
)1 "*-
,0
)*
. 

'
!($'$

)/ -) /
3+'*- -@ ( )*. 0)  '. *. 3+- .$*) . . 0(+' @ ($7) . +0  ) 0/$'$5- +-7)/ .$. +- - -
. 3+- .$*) . . - ) *($))* $ )/$!$*- .= *+ -*- . 4 1'*- .@ ' ;)$* 3+- .$*) .
1)5.?
$ )/$!$*-
 !$)$*
. IE=
,0
+ -($/
- -
'
*( )/-$*
*)$$*)'
(6.
.$(+' ? <!--[if !(IE 7)]>
Este navegador es cualquier versi—n diferente a Internet Explorer 7
<!--[if IE]>
<![endif]-->
Este navegador es cualquier versi—n de Internet Explorer
<![endif]-->
<!--[if (IE 7) | (IE 8)]>
Este navegador es Internet Explorer 7 o Internet Explorer 8
' *+ -*- (6. . )$''*  !$)$* +*- '*. *( )/-$*. *)$$*)' . . ' *+ -*-  ) "$:)
<![endif]-->
K!L=
,0
.
$)$
 ')/

0)
3+- .$:)
+-
*/ ) -
'
- .0'/*
*)/--$*?
<!--[if (gt IE 5) & !(IE 8)]>
<!--[if !IE]>
Este navegador es cualquier versi—n m‡s reciente que Internet Explorer 5 pero que no
Este navegador es cualquiera salvo Internet Explorer
sea Internet Explorer 8
<![endif]-->
<![endif]-->
$ . ,0$ - - ./-$)"$- ' ')  ' *( )/-$* *)$$*)'  0) ;)$ 1 -.$:) 
)/ -) /
<!--[if (gte IE 5) & (lt IE 8)]>
3+'*- -=
.
+0 
$)$-
$- /( )/
'
);( -*

'
1 -.$:)?
Este navegador es Internet Explorer 5 o cualquier versi—n m‡s reciente que sea
<!--[if IE 5.5]> anterior a Internet Explorer 8
Este navegador es Internet Explorer 5.5 <![endif]-->
<![endif]-->
.
+-$)$+' .
1 )/%.

'*.
*( )/-$*.
*)$$*)' .
.*)?
<!--[if IE 6]>
Este navegador es Internet Explorer 6

*(+/$$'$
*)
0',0$ -
)1 "*-=
4
,0
'
- ./*

)1 "*- .
*).$ -)
,0
<![endif]--> '*.
*( )/-$*.
*)$$*)' .
.*)
*( )/-$*.
)*-(' .
 
$")*-)
.0
*)/ )$*@

*
- ,0$ -
'
0.*

' )"0% .

+-*"-($:)
*(*
1-$+/=
0),0
.
+0 
<!--[if IE 8]>
Este navegador es Internet Explorer 8 *($)-
*)
./
/$+*

/7)$.
+-
 / /-
$)6($( )/
'
/$+*
4
1 -.$:)

<![endif]--> )1 "*-@

 (6.  '. 1 -.$*) . .+ 8!$.= /($7) . +*.$' - ./-$)"$- '*. *( )/-$*. *)$$*)' .
Nota
 0) "-0+*  1 -.$*) . 
)/ -) / 3+'*- - ( $)/ '*. *+ -*- . "menor que" KltL= "mayor /(*/
(
&
"

&*/
*'(0."*/
*(""*(&/8
/
!
/..*&&*
1(
0("
-1
,.'"0
..
que" KgtL= "menor o igual que" KlteL= "mayor o igual que" KgteL@ !*$/

/0"&*/
*(""*(&/
-1
,&"(
".(0/
,.*,"/
(
1("+(

&
3./"+(
&
(3 *.;

444;&".*/4;/ 145 444;&".*/4;/ 146


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

/0
0("
/
(*'"( Conditional CSS >!00,:<<444;*("0"*(&=//;*'<? 6
.-1".
,.*/.
&/
!*$/

html > body #elemento {

/0"&*/
(
&
/.3"*.
(0/

/.3".&/

&*/
1/1."*/;
*/
&( 1$/

,.* .'"+(

/.3"*.
width: 250px;
/*,*.0*/
/*(  8

6
MM;
}

' - .0'/* !$)'  ' #& )/ -$*- . ,0

)/ -) / 3+'*- - XIX@X +'$ 0) 1'*-  300px  '
6.5.2. Filtros y hacks
+-*+$  width 4 ' - ./*  )1 "*- . +'$) 0) 1'*-  250px@ $ . /$ ) ) ) 0 )/ '*.
*. !$'/-*. 4 #&. . */-  '. /7)$. $.+*)$' . +- +'$- $! - )/ . ./$'*. 4 - "'.  (6-" ) .= *- . 4 - '' )*.= ' ' ( )/* . (0 ./- *) ' ($.(* .+ /* ) 0',0$ -
) !0)$:)  ' )1 "*- ,0 1$.0'$5 '*. *)/ )$*.@ ' *)/--$* ,0 '*. *( )/-$*. )1 "*-@
*)$$*)' .= '*. !$'/-*. 4 #&. *)./$/04 ) 0) !*-( +** ' ")/ 4 /7)$  .*'0$*)-
'"0)*. !$'/-*. 4 #&. .*) (0#* (6. . )$''*. ,0 ' (*./-* )/ -$*-( )/ @  # #*=
./
+-*' (@
3$./ ) /- . !$'/-*. (04 .$(+' . ,0 . 0/$'$5) +- +'$- $! - )/ . ./$'*.   1 -.$:) 
 $   '*. !$'/-*. 4 #&. *).$./ ) +-*1 #- '*. --*- . 4 - )$.  '*. )1 "*- .
)/ -) / 3+'*- -@ ' +-$( - !$'/-* . * html= ,0 +'$ '. - "'.   '. 1 -.$*) . 
)/ -) /
+- *0'/- '*. ./$'*.  ,0 )* .   ) +'$- ) . )1 "*-@ ' .$"0$ )/ % (+'* 3+'*- -
)/ -$*- .

'
Z?
(0 ./- 0)*  '*. #&. (6. )/$"0*. 4 *)*$*. ,0 +-*1 # 0) --*- ) '. 1 -.$*) .
p {
*.*' /.


)/ -) /
3+'*- -? color: red;
#elemento { }
width: 300px; * html p {
voice-family: "\"}\""; color: blue;
voice-family: inherit; }
width: 250px;
}
$ . 9 * html  ')/  ' . ' /*-  0',0$ - - "' = . - "' .:'* . +'$  '*.
)1 "*- .  ' !($'$
)/ -) / 3+'*- - )/ -$*- .  ' 1 -.$:) Z@  ./ !*-(= ) '
html > body #elemento { % (+'* )/ -$*- '*. +6--!*.  ' +6"$) . (0 ./-)  *'*- 50' ) '*. )1 "*- .
)/ -) /
width: 300px; 3+'*- -
X=
X@X
4
Y=
($ )/-.
,0
.
(0 ./-)

*'*-
-*%*
)
'
- ./*

)1 "*- .@
}
/-*  '*. #&. (6. 0/$'$5*. . _ K"0$:) %*L ,0 # ,0 0) +-*+$  .:'* . +'$,0 

)/ -) / 3+'*- - X 4 X@X )* $)/ -+- /) *-- /( )/ ' (* '*  %.  = +*- '* ,0 )*
'*.
)1 "*- .

'
!($'$

)/ -) /
3+'*- -
)/ -$*- .

'
1 -.$:)
Z?
(0 ./-) '*. ' ( )/*. *) ' ($.( )#0- ,0 ' - ./*  )1 "*- .@ $ . ,0$ - - '$5-
0) $. 9* *) ' ($.(* .+ /* ) 0',0$ - )1 "*-= . +- $.* 0/$'$5- +-*+$  . p {
color: red;
$! - )/ .
+-

)/ -) /
3+'*- -
XIX@X
4
'
- ./*

)1 "*- .@
_color: blue;
)/- '*. (0#*. --*- . 
)/ -) / 3+'*- - XIX@X . )0 )/- ' $(+*.$$'$  +-* .- }

*-- /( )/ '  '-$:) voice-family: "\"}\"";@ *- /)/*= '. - "'.  )/ -$*- . .  - "'  )/ -$*- (0 ./- '*. +6--!*.  ' +6"$)  *'*- -*%* ) 0',0$ - )1 "*-
$)/ -+- /)

'
.$"0$ )/
!*-(
)

)1 "*-? .'1*
)
'*.
)1 "*- .

)/ -) /
3+'*- -
X=
X@X
4
Y=
*)
.
(0 ./-)

*'*-
50'@
/* Internet Explorer 5/5.5 */
*- ;'/$(*= /($7) 3$./ ' #& * K./ -$.*L ,0 # ,0 0) +-*+$  .:'* . +'$,0 )
#elemento {
width: 300px; '*.
)1 "*- .

'
!($'$

)/ -) /
3+'*- -
)/ -$*- .

'
1 -.$:)
[?
}
p {
color: red;
/* Internet Explorer 6 */
*color: blue;
#elemento {
}
width: 300px;
width: 250px; ) ' % (+'* )/ -$*-= '*. +6--!*.  ' +6"$) . (0 ./-)  *'*- 50' ) 0',0$ -
}
)1 "*-  ' !($'$
)/ -) / 3+'*- - 04 1 -.$:) .  )/ -$*-  ' [ 4 . (0 ./-)  *'*-
/* Resto de navegadores */ -*%*
)
0',0$ -
*/-*
)1 "*-@
#elemento {
width: 300px;
 +0  *).0'/- ' '$./ *(+' /  !$'/-*. 4 #&. +-  )1 "*- 4  1 -.$:) ) '
width: 250px; .$/$*
2  #//+?II )/-$' @*(I- !I..I!$'/ -.I
}

444;&".*/4;/ 147 444;&".*/4;/ 148


3(7* ,#01&*
H;
("/
3(7/ 
3(7* ,#01&*
H;
("/
3(7/

' 0.*  '*. !$'/-*. 4 #&. .$ (+-   *).$ --. *(* ' ;'/$(* - 0-.* +- *). "0$- h=document.getElementsByTagName('html')[0],
b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/
,0 '*. $. 9*. / )") ' ($.(* .+ /* ) 0',0$ - )1 "*-@ *(* '*. !$'/-*. 4 #&. .
2')?'gecko ff2':is('firefox/3')?'gecko ff3':is('gecko/')?'gecko':is('opera/9')?'opera
.) ) +-*1 #- --*- .  '*. )1 "*- .= .0 +-$)$+' +-*' ( . ,0 )* "-)/$5) .0 opera9':/opera (\d)/.test(ua)?'opera
!0)$*)($ )/* *) '. 1 -.$*) . (6. (* -).  '*. )1 "*- .@  (6.= '*. !$'/-*. 4 #&. opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit
*(+'$)
'
:$"*  4
'*
# )
(6.
$!8$'

' -
4

()/ ) -@ safari':is('mozilla/')?'gecko':'',
os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
 ( %*- '/ -)/$1  '*. !$'/-*. 4 #&. . ' 0.*  *( )/-$*. *)$$*)' .@ $ )* . +*.$' var c=b+os+' js'; h.className += h.className?' '+c:c;
' 0.*  *( )/-$*. *)$$*)' .= . +- ! -$' ,0 ' $. 9*  ' +6"$) (0 ./- '$" -. }();
</script>
$! - )$.
1$.0' .
)

)1 "*-@
...
!*-/0)( )/ = ' $(+*-/)$  '*. !$'/-*. 4 #&. .  1 5 ( )*-= 4 ,0 /**. '*. </head>

)1 "*- . (* -)*. .*'0$*)) '*. "-1 . --*- .  .0. 1 -.$*) . )/ -$*- . $)/-*0 ) ) 1 5 9$* ' :$"* )/ -$*-=  1 5 ,0 0) 0.0-$*    ' +6"$) . 9 0)
( )*.
--*- .
)0 1*.@ '.
'
' ( )/* <html> ,0
$)$
'
)1 "*-
4
.$./ (
*+ -/$1*
0/$'$5*.?
/* navegador Firefox3, sistema operativo Windows, JavaScript habilitado */
6.6. Selector de navegador <html class="gecko ff3 win js" ...>

*. . ' /*- .  )1 "*- + -($/ ) +'$- - "'.   )1 "*- . .+ 8!$*.@ 0),0 . /* navegador Internet Explorer, sistema operativo Windows, JavaScript habilitado */
/-/  0) $  .$($'-  '*. *( )/-$*. *)$$*)' .= .0 "-) 1 )/% . ,0 !0)$*)) ) <html class="ie ie8 win js" ...>
0',0$ -
)1 "*-
4
,0
)*
.
'$($/)

. ' $*)-
.*'( )/
'
)1 "*-@
/* navegador Firefox 3, sistema operativo Linux, JavaScript habilitado */
' .$"0$ )/ % (+'* (0 ./- :(* +'$- $! - )/ . - "'.  ) !0)$:)  ' )1 "*- <html class="gecko ff3 linux js" ...>
0/$'$5)*
'*.
. ' /*- .

)1 "*-?
. .$"0$ )/ . /'. (0 ./-) '. '. . ,0 9 CSS Browser Selector ) !0)$:)  '
.ie p { ... } /* estilos de los p‡rrafos en Internet Explorer */ )1 "*-
4
.$./ (
*+ -/$1*?
.ie6 p { ... } /* estilos de los p‡rrafos en Internet Explorer 6 */
.ff3 p { ... } /* estilos de los p‡rrafos en Firefox 3 */
Clase Sistema Operativo
*(*  )* $)'04 +*-  ! /* '*. . ' /*- .  )1 "*-= .   - 0--$-  .*'0$*) . win 1&-1".
3./"+(

"(*4/
.. ) ' ' )"0%  +-*"-($:) 1-$+/@ )  ./. .*'0$*) . # .$* -  +*- '
linux 1&-1".
3./"+(
6<*
"/0."1"+(

"(15
$. 9*- ! ' $( 4 .  )*($) CSS Browser Selector K#//+?II-! '@(@-I
mac 1&-1".
3./"+(

 
..O-*2. -O. ' /*-IL @

 .*'0$:)  CSS Browser Selector *).$./ ) % 0/- 0) + ,0 9* :$"* 1-$+/ 0)* . Clase Navegador
-" ' +6"$)  !*-( ,0 . 9 0) '. ) ' ' ( )/* <html> ) !0)$:)  ' )1 "*-
ie 1&-1".
3./"+(


(0.(0
5,&*..
0/$'$5*
+*-
'
0.0-$*@
ie5
(0.(0
5,&*..
G
' +-$( - +.* *).$./ ) 9$- ' .$"0$ )/ :$"* 1-$+/ ) ' . $:) <head>  '
ie6
(0.(0
5,&*..
H
+6"$)?
ie7
(0.(0
5,&*..
I
<head>
... ie8
(0.(0
5,&*..
J
<script type="text/javascript"> gecko 1&-1".
3./"+(

*7"&&8
".*5
6
'"(*
/*
CSS Browser Selector v0.2.7 ff2 ".*5
D
Rafael Lima (http://rafael.adm.br)
ff3 ".*5
E
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/ opera 1&-1".
3./"+(

,.
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
opera8 ,.
J
var css_browser_selector = function() { opera9 ,.
K
var ua=navigator.userAgent.toLowerCase(),
is=function(t){return ua.indexOf(t) != -1;}, konqueror 1&-1".
3./"+(

*(-1.*.

444;&".*/4;/ 149 444;&".*/4;/ 150


3(7* ,#01&*
H;
("/
3(7/

webkit
1&-1".
3./"+(

."
6
!"".
safari

 (6.= /($7) . 9 ' '. js 0)* ' )1 "*- /$ ) /$1* ' .*+*-/ 
1-$+/@

*(* /**. '*. 1'*- . )/ -$*- . . 9 ) *(* '.  <html>= ) '*. )1 "*- . ,0
.*+*-/) *-- /( )/ '*. ./6)- . . +*.$' *($)- 1-$. '. . +- - ./-$)"$- ;)
(6.
'
')
 '
. ' /*-?
/* estilos de los p‡rrafos en Firefox 3 de Windows */
.ff3.win p { ... }
/* estilos de los p‡rrafos en Firefox 3 de Linux */
.ff3.linux p { ... }
/* estilos de los p‡rrafos en Firefox 3 de Mac OS */
.ff3.mac p { ... }

 1 -.$:) (6. - $ )/  CSS Browser Selector . +0  */ ) -  /-17.  ' - +*.$/*-$*

#//+?II"$/#0@*(I-! '+I..O-*2. -O. ' /*-I *) /($7) . )0 )/- 0) 1 -.$:)
*(+-$($
+-
( %*--
'$" -( )/
'
- )$($ )/*@

444;&".*/4;/ 151