CAPITULO 2

INTRODUCCION A CSS 3
Un Diseador web debe tener inspiracin. Es absolutamente necesario. Es totalmente indispensable. Es
vivir su trabajo de forma plena, creativa e innovadora. El arte del diseo web no es ciego. Es inteligente e
intuitivo.

2.1 Conociendo CSS3

De forma general hablar de CSS es referirse a estilo o ms bien dicho a la aplicacin de
estilos dentro de la estructura de nuestros documentos web. HTML5 y CSS3 son una
combinacin perfecta y representan dos poderosas herramientas que proveen al diseador o
desarrollador web de un arsenal completo para la elaboracin de proyectos avanzados,
innovadores, dinmicos, funcionales y estticamente atractivos.
CSS3 (Hojas de estilo en cascada nivel 3) es la ms reciente versin del lenguaje de
estilizado altamente utilizado en la web desde su surgimiento en diciembre de 1996 que a
diferencia de CSS2, la cual es una gran especificacin que define muchas funcionalidades,
CSS3 fue creada y dividida en varios documentos separados, conocidos como: mdulos.
Cada uno de los cuales aade novedosas funcionalidades a las definidas en CSS2, con la
finalidad de mantener y preservar las anteriores dando as un alto grado de compatibilidad.
CSS3 comenz a desarrollarse a la misma vez que se public la recomendacin oficial de
CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.
Debido a la modularizacin del CSS3, muchos de sus mdulos pueden encontrarse en
diferentes niveles de su desarrollo, por esa razn en noviembre de 2011,existan alrededor
de cincuenta mdulos publicados, de los cuales tres se convirtieron en recomendaciones
oficiales de la W3C (World Wide Web Consortium) en 2011: Selectores, Espacios de
nombres y Color.
Otros mdulos, como Fondos y colores, Consultas de medios o Diseos multicolumna
estn en fase de candidatos, y considerados como razonablemente estables hasta finales de
2011, y sus implementaciones en los diferentes navegadores son sealadas con los prefijos
del motor correspondiente a cada navegador.

55

2.2 Qu es una hoja de estilo?

Proyecto
web

Estilo
(CSS)
Estructura
(HMTL)

En las primeras versiones del HTML, el cdigo fuente de una pgina web contena tanto la
estructura como la forma de representarse (estilo o diseo). En la actualidad ambos
aspectos se tratan de manera totalmente separada. Un documento o pgina web slo debe
contener informacin incrustada en una buena estructura, mientras que el estilo visual o
diseo se debe presentar en las hojas de estilo. Las ventajas de utilizar hojas de estilo son
muchas, sobre todo porque permiten hacer un diseo consistente y fcil de modificar. Si
varias pginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de
un elemento de todas las pginas basta con hacer los cambios en un nico lugar, en la hoja
de estilo y el resultado se mostrara en todas las pginas que hagan referencia a la hoja de
estilo.
CSS3 presenta en comparacin con las versiones anteriores un buen nmero de novedades,
funcionalidades y ventajas entre las cuales podemos mencionar:

Un control centralizado de la presentacin visual de un sitio web completo con lo

que se aumenta el grado de agilidad de forma considerable al cargar y/o actualizar
un documento web.
Separacin de la estructura y la presentacin, lo que facilita al desarrollador,
diseador, usuario o dispositivo electrnico donde se muestre la pgina web, la
modificacin de la visualizacin del documento sin alterar el contenido del mismo,
slo modificando algunos parmetros y sus respectivos valores del CSS.
Mayor aprovechamiento del ancho de banda de la conexin a internet, ya que
pueden definirse los mismos estilos para muchos elementos con un slo selector; o
porque un mismo archivo CSS puede servir para una multitud de documentos web
dentro de un mismo proyecto.
Aumento en el grado de la accesibilidad del documento web, debido a que con el
uso del CSS se evitan antiguas prcticas necesarias para el control del diseo.
Colores transparentes en diferentes elementos del contenido.
56

Bordes redondeados en cajas e imgenes.

Sombras en textos y algunos otros e elementos.
Web fonts: visualizacin de nuevas tipografas aunque el cliente no las tenga
instaladas.
Fondos mltiples: utilizar varias imgenes de fondo en un mismo elemento.
Degradados.
Rotar textos, imgenes, cajas, entre otros en distintos ngulos.
Transiciones: nos permiten cambiar de un valor a otro marcando un tiempo y
creando movimiento.

2.3 Formas de aplicar CSS

Existen tres formas de utilizar CSS en nuestros proyectos web las cuales son:
1- Estilo en lnea de cdigo o como propiedad de una etiqueta HTML:
Consiste en la utilizacin de CSS mediante el atributo global style de todas las etiquetas
HTML de una pgina web.
Ejemplo:

Ejemplo 1: estilo1.html

Podemos ver dentro de la etiqueta <h1> el atributo style por medio del cual establecemos
las propiedades CSS que proporcionaran el estilo deseado, para el caso tenemos dos
propiedades para texto: color se utiliza para asignar color a segmentos de texto y text-align
que se usa para alinear un segmento de texto dentro de una pgina web.

57

Resultado:

2- Hoja de estilo interna:

Consiste en la aplicacin de estilo dentro de la misma pgina web utilizando la etiqueta
<style> dentro del encabezado.
Ejemplo:

Ejemplo 2: estilo2.html

A diferencia de los estilos en lnea de cdigo las hojas de estilo interna proporcionan un
mayor grado de orden en el cdigo interno, adems no se sobre saturan las etiquetas con
las propiedades CSS dentro del atributo style. Si vemos con detalle podemos ver en el
cdigo CSS dentro de la etiqueta <style> que los estilos fueron aplicados a tres elementos
del documento web: el body se le designo color de fondo RGBA (rojo, verde, azul y tono
alfa); header al cual se le asigno ancho width, alto height, color de fondo backgroundcolor, bordes border, alineacin de texto text-align, color de fuente color, redondeo de

58

bordes border-radius y una caja de sombra o luz box-shadow; y por ltimo el ttulo h1 al
cual se le dio un estilo de texto con sombra text-shadow.
Resultado:

3- Hoja de estilo externa:

Consiste en la creacin de un archivo CSS aparte que contendr los estilos aplicados a
nuestras pginas web, el cual es vinculado y relacionado a nuestros documentos web por
medio de la etiqueta <link>.
Ejemplo: HTML

Ejemplo 3.1: estilo3html.html

CSS:

59

Ejemplo 3.2: estiloexterno.css

Como podemos ver el ejemplo 3.1 solamente contiene el HTML y el contenido a mostrar,
para la aplicacin de estilos hacemos uso de la etiqueta <link href="estiloexterno.css"
type="text/css" rel="stylesheet"/> la cual permite asociar un archivo CSS externo ejemplo
3.2 llamado estiloexterno.css que contiene todos los estilos aplicados al cdigo HTML.
Resultado:

2.4 Sintaxis de CSS

La estructura sintctica de CSS funciona en base a reglas sencillas. Cada regla est
compuesta por dos elementos: un selector y su declaracin. La declaracin a su vez est
compuesta por otros dos elementos: una propiedad acompaada de dos puntos (:) y su valor
finalizado con punto y coma (;) ambos encerrados entre llaves {}.
Sintaxis selectores:
Selector{propiedad:valor;}
Dnde: Selector es una etiqueta HTML, propiedad es el elemento parte de la etiqueta que
se quiere modificar y valor es en concreto lo que se asigna a una propiedad y que define el
cambio a realizar.
Ahora un ejemplo donde el selector p (etiqueta de prrafo <p>) indica que todos los
elementos p del documento web sern afectados por la declaracin cuya propiedad es color
y su valor ser red.

60

p{color:red;}
Si el valor est compuesto por varias palabras, se deben colocar entre comillas.
p{font-family:"Times New Roman";}
Si se desea especificar ms de una propiedad, se deber separar cada una con su respectivo
valor con un punto y coma (;).
h1 {color: red; text-align: center;}
Es del todo recomendable que para definir estilos de forma ms clara y fcil de leer, se debe
escribir cada propiedad en diferentes lneas.

p
{
color:red;
text-align:justify;
}

Cuando se quiere designar una misma propiedad de estilo a varios selectores, solo deben
agruparse y separarlos con una coma (,)
p, h1, h2, h3
{
color:blue;
font-family:Arial, Verdana;
}
El selector class
Con el selector class se pueden asignar diferentes estilos para un mismo elemento HTML
pero que pertenecen a clases distintas designadas por su atributo class.
Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class
debe ir antepuesto por un punto (.) el cual representa una clase.
Sintaxis:
Selector.clase {propiedad: valor;} o .clase {propiedad: valor;}
Dnde: selector es la etiqueta HTML a la cual se le aplicara el estilo, .clase es la clase a la
cual pertenece la etiqueta y es designado por su atributo class, propiedad es el elemento
parte de la etiqueta que se quiere modificar y valor es en concreto lo que se asigna a una
propiedad y que define el cambio a realizar.

61

Ejemplo:

Ejemplo 4.1: selectorclase.html

Si vemos detalladamente nuestro ejemplo notaremos en el body un ttulo h3 pertenece a la

clase rojo y dos prrafos p pertenecientes uno a la clase azul y el otro a la clase rojo. En el
head se encuentra la etiqueta de estilo style en la cual designamos las propiedades y valores
a modificar en los elementos del body, podemos notar que para la clase azul designamos la
propiedad color y le damos el valor blue y para la clase rojo designamos la propiedad
color y le damos el valor red.
Resultado:

El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor nico en todo el
documento. Hacemos referencia a l anteponiendo el smbolo "#".
Sintaxis:
#id{propiedad:valor;}
Dnde: # smbolo que se antepone y que denota que el estilo se aplicara a un elemento
conocido y nico, id es una etiqueta HTML que posee un identificador nico designado en

62

su atributo id, propiedad es el elemento parte de la etiqueta que se quiere modificar y valor
es en concreto lo que se asigna a una propiedad y que define el cambio a realizar.
Ejemplo:

Ejemplo 4.2: selectorid.html

Dentro del body tenemos dos etiquetas de prrafos p pero solo una se le ha asignado un
identificador unico usando el atributo id. En el CSS contenido en la etiqueta style definimos
que los estilos se aplicaran solamente a la etiqueta p cuyo id sea igual a p1.
Resultado:

2.5 Listado de propiedades CSS

En CSS las propiedades son caractersticas o elemente pertenecientes a un selector o
etiqueta HTML o a un conjunto de ellas al cual se le puede asignar un determinado valor y
afectar o modificar de esa forma su estilo y/o aspecto visual o comportamiento.
En CSS existe una buena cantidad de propiedades clasificadas segn el tipo de elemento al
cual son aplicadas entre ellas tenemos:
63

1- Bordes:
Son lneas que limitan los cuatro puntos (izquierda, derecha, arriba y abajo) de un elemento
HTML.
Propiedad
border
border-top
border-right
border-bottom
border-left

Descripcin
Ancho, color y estilo para los 4 bordes.
Ancho, color y estilo para los bordes
superior, derecho, inferior, izquierdo.

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

Ancho de los 4 bordes.

Ancho del borde superior, derecho, inferior,
izquierdo.

Valores
thin
medium
thick
longitud
color
transparent
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
thin
medium
thick
longitud

Color de los 4 bordes.

Color del borde superior, derecho, inferior,
izquierdo.

color
transparent

Estilo de los 4 bordes.

Estilo del borde superior, derecho, inferior,
izquierdo.

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

64

Ejemplo:

Ejemplo 5: Bordes.html

En el presente ejemplo la colocacin de bordes la hemos realizado de dos formas distintas

la primera (para el header) una aplicacin general de los cuatro bordes que incluye el
grosor, el estilo y el color como parmetros de la propiedad border quedando de la
siguiente forma border:1px dashed black; y la segunda (para h1) aplicando los bordes
segn el lado por separado incluye el estilo y el color como parmetro de la propiedad
quedando de la siguiente forma borde superior border-top:double blue;, borde derecho
border-right:double green;, borde inferior border-bottom:double yellow;, borde
izquierdo border-left:double red; y por ltimo se aplica un grosor general a los 4 bordes
border-width:4px;.
Resultado:

65

Contenido generado y numeracin automtica:

Consiste en la visualizacin de contenidos por parte del usuario pero que estos no son parte
del documento fuente HTML.
Propiedad
content

Descripcin
Agregador de contenido para los pseudo
elementos ":after y :before".

quotes
counter-reset

Especifica cmo se procesan los smbolos

de marcas (comillas ).
Inicializa un contador.

counter-increment

Incrementa un contador.

Valores
normal
none
texto
URL
contador
attr(x)
open-quote
close-quote
no-open-quote
no-close-quote
texto
none
identificador entero
none
identificador entero
none

Ejemplo:

Ejemplo 6: Content.html

66

En este ejemplo la propiedad content asigna contenido a una etiqueta HTML h1 mediante
el pseudo elemento :before h1:before{content:"TITULO ";}, mantiene el contenido
normal sin agregar nada adicional en la etiqueta h1 cuya atributo class es normal
h1.normal:before{content:normal;} y no designa ningn agregado a la etiqueta h1 cuyo
atributo class es none h1.none:before{content:none;}.
Resultado:

3- Dimensiones:
Son las propiedades que se aplican en los elementos estructurales y de contenido para
asignar el tamao se ocupara dentro de una pgina web.
Propiedad

Descripcin

width

Ancho.

min-width

Ancho mnimo.

max-width

Ancho mximo.

height

Alto.

min-height

Alto mnimo.

max-height

Alto mximo.

line-height

Altura entre las bases del texto.

Valores
Longitud en pixeles
un porcentaje
auto
Longitud en pixeles
un porcentaje
Longitud en pixeles
un porcentaje
none
Longitud en pixeles
un porcentaje
Auto
Longitud en pixeles
un porcentaje
Longitud en pixeles
un porcentaje
none
Normal, nmero, longitud en
pixeles, un porcentaje.
67

Ejemplo:

Ejemplo 7: Dimensiones.html

En este ejemplo se aplican dimensiones a cada uno de los elementos estructurales y de

contenido del HTML. Al elemento estructural header se le asigna un ancho del 100% del
documento web, un alto de 120 pixeles y un borde de un pixel slido y de color negro
header{width:100%;height:120px;border:1px solid black;}. Por otra parte el elemento
estructural section se le aplica un ancho minimo del 70%, un ancho mximo del 90% de la
pgina, un alto minimo y mximo del 50% y 75% respectivamente, un borde de un pixel
slido y de color azul y un margen interno de tres pixeles section{min-width:70%;maxwidth:90%;min-height:50%;max-height:75%;border:1px solid blue;padding:3px;}. Para
finalizar los elementos de contenido p se les asigna un espacio interlineal de dos pixeles, un
borde de un pixel slido y de color rojo y un margen interno de tres pixeles p{lineheight:2;border:1px solid red;padding:3px;}.
Resultado:

68

4- Efectos visuales:
Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos
(como los vern los usuarios) y tambin para establecer el comportamiento del contenedor
de los mismos.
Propiedad
overflow

Descripcin
Comportamiento del contenido si se
desborda en la caja contenedora.

clip

Especifica la regin visible del elemento.

Display

Comportamiento del contenedor.

visibility

Visibilidad de las cajas.

Valores
visible
hidden
scroll
auto
rect(valores:
superior, derecha,
inferior, izquierda)
auto
inline
block
box (o flex-box)
flex
inline-flex
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
visible
hidden
collapse

69

Ejemplo:

Ejemplo 8: efectosvisuales.html

Para este ejemplo aplicamos los siguientes efectos visuales: el elemento h2 lo ocultamos
con la propiedad visibility h2{visibility:hidden;}. Al elemento div le asignamos ancho y
alto de 300 y 300 pixeles respectivamente, le colocamos borde de un pixel punteado y de
color azul, margen interno de tres pixeles y barras de desplazamiento para que los
elementos contenidos no se desborden div{width:300px;height:300px;border:1px dashed
blue;padding:3px;overflow:scroll;}. A las imgenes se le colocaron bordes de doble lnea
de color rojo img{border:double red;}. Y para finalizar los prrafos p fueron unidos en
una solo lnea p{display:inline;}.
Resultado:

70

5- Fondos:
Los fondos (background) en CSS permiten controlar el color, imagen, ubicacin y las
veces que una imagen se repetir dentro de un elemento.
Propiedad
background
background-color

Descripcin
Fondo de manera general.
Color de fondo.

background-image

Imagen de fondo.

background-repeat

Repeticin de la imagen de fondo.

backgroundattachment
background-position

Desplazamiento de la imagen de fondo.

Posicin de la imagen de fondo.

Valores
Colores, url
color
transparent
URL
none
repeat
repeat-x
repeat-y
no repeat
scroll
fixed
porcentaje
longitud
left
center
right
top
bottom

Ejemplo:

Ejemplo 9: Fondos.html

71

En este ejemplo asignamos dentro del body de nuestra pgina dos tipos de fondos distintos
el primero un color rgba (rojo, verde, azul y alfa o transparencia) azul con un valor de
transparencia del 0.6 (el valor alfa de transparencia oscila entre 0 y 1 mientras ms cerca de
cero es el valor dado ms transparente ser) y el segundo fondo es una imagen incrustada
mediante el valor url dicha imagen no se repetir y aparecer centrada en el documento
web body{background: rgba(0,0,255,0.6) url('logocss3.png') no-repeat fixed center;}.
Resultado:

6- Fuentes:
Mejor conocidas como font es el conjunto de propiedades destinadas en CSS al manejo de
fuentes y controlan los diversos tipos, estilos, tamaos, variantes y grosor del texto en un
documento web.
Propiedad
@Font-face

Descripcin
Nueva regla CSS3 para incluir fuentes
propias.

Font

Propiedad principal para establecer el resto

de propiedades sobre las fuentes.

font-family

Especifica las familias de fuentes.

Valores
Font-family: nombre
de la fuente;
Src (ubicacin de la
fuente)
font-style
font-variant
font-weight
font-size
font-family
line height
caption
icon
menu
message-box
small-caption
status-bar
nombre-familia
familia-genrica

72

font-style

Especifica el estilo de la fuente.

font-variant

font-weight

Permite convertir las minsculas a

maysculas pero mantienen un tamao
inferior a las maysculas.
Intensidad de la fuente.

font-size

Tamao de la fuente.

normal
italic
oblique
normal
small-caps
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
longitud
porcentaje

Ejemplo:

73

Ejemplo 10: Fuentes.html

El ejemplo anterior lo podemos desglosar de la siguiente manera: primero establecemos un

tipo de letra propio con la regla @font-face de CSS3 esta regla se vale de su atributo src
para determinar la ruta donde tenemos guardada en nuestro servidor la tipografa a utilizar
@font-face{font-family:ubuntuBold src: url(fuentes/Ubuntu-B.ttf) format('truetype');},
segundo en el body establecemos un color de fondo azul con transparencia usando la
propiedad background y su valor rgba body{background: rgba(0,0,255,0.6);}, tercero la
tipografa definida con la regla @font-face debe ser aplicada en este ejemplo la definimos
para los ttulos h1 y h2 utilizando la propiedad font-family y le asignamos un color
h1,h2{font-family:ubuntuBold;color:LawnGreen;}; y cuarto a los prrafos p definimos
una familia de fuente del lado del sistema del cliente con la propiedad font-family y le
asignamos un estilo de letra oblicuo p{font-family:"Comic Sans MS";fontstyle:oblique;}.
Resultado:

7- Contornos:
Son propiedades que se aplican algunos elementos y que permiten asignar estilos visuales
en los contornos o lados de dicho elemento HTML.
74

Propiedad
Outline
outline-width

Descripcin
Propiedad general de aplicacin del
contorno.
Ancho del contorno.

outline-style

Estilo del contorno.

outline-color

Color del contorno.

Valores
Color, tamao y
estilo
thin
medium
thick
longitud
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color
invert

Ejemplo:

Ejemplo 11: Contornos.html

En este ejemplo podemos apreciar tres elementos HTML a los cuales les aplicamos
entornos (etiquetas h1, input y p): primero el ttulo h1 le designamos estilo de contorno
general con la propiedad outline color rojo, tamao mediano y estilo punteado de lnea
75

h1{outline:Red medium dashed;}. Segundo etiqueta input para la cual designamos un

estilo de contorno propiedad outline-style de lnea doble y un color de contorno verde claro
propiedad outline-color input{outline-style:double;outline-color:LightGreen;}. Y tercero
al elemento p le aplicamos un estilo de contorno punteado en crculos propiedad outlinestyle, color de contorno azul propiedad outline-color y ancho del contorno propiedad
outline-width p{outline-style:dotted;outline-color:blue;outline-width:thick;}.
Resultado:

8- Listas:
La propiedad list y sus derivados permiten manipular la apariencia de los elementos de
lista HTML.
Propiedad
list-style
list-style-type

Descripcin
Permite establecer el estilo de la lista, la
imagen y/o la posicin.
Estilo aplicable a los marcadores visuales de
las listas.

Valores
Estilo, posicin e
imagen.
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none

76

list-style-image
list-style-position

Imagen aplicable a los elementos de las

listas.
Posicin dentro de la lista de los elementos
marcadores de las listas.

URL
none
inside
outside

Ejemplo:

Ejemplo 12: Listas.html

En este ejemplo podemos ver dos listas a las que aplicamos CSS con la propiedad list-style:
primero la lista ul con atributo id=uno le asignamos una imagen como marcador de
elemento de lista propiedad list-style-image #uno{list-style-image:url("flecha.gif");}. Y
segundo la lista ul con el atributo id=dos le designamos un estilo general propiedad liststyle y le desinamos un estilo y una posicin #dos{list-style:square outside;}.
Resultado:

77

9- Mrgenes:
La propiedad margin y sus derivados permiten establecer mrgenes a los elementos
contenidos en una pgina web. Los mrgenes son medidos desde los bordes de la pgina
hasta donde inicia un elemento.
Propiedad
margin

Descripcin
Permite establecer el ancho para varios
mrgenes individuales.

margin-top
margin-right
margin-bottom
margin-left

Tamao del margen superior, derecho,

inferior e izquierdo.

Valores
longitud
porcentaje
auto
longitud
porcentaje
auto

Ejemplo:

Ejemplo 13: Margenes.html

En nuestro ejemplo de mrgenes podemos ver un elemento HTML una imagen a la cual
designamos mrgenes izquierdo y derecho de 50px y 25px respectivamente body{marginleft:50px;margin-top:25px;}, si observamos detenidamente la propiedad margin se aplica
al body para que se cree el espacio entre el borde la pgina y los elementos contenidos en
ella, adems colocamos un borde alrededor de la imagen de un pixel de grosor, estilo slido
y de color azul img{border:1px solid blue;}.
Resultado:

78

10- Ubicacin:
Las propiedades de ubicacin permiten manipular el espacio donde se posiciona un
elemento dentro de un documento web.
Propiedad
position

Descripcin
Especifica un esquema de posicionamiento.

top
right
bottom
left
float

Establece una posicin flotante.

Valores

static
relative
absolute
fixed
Especifican el desplazamiento de la caja
Longitud
(respecto al lmite superior, derecho, inferior Porcentaje
o izquierdo del contenedor).
auto

clear

Define un control de cajas adyacentes a los

float.

vertical-align

Establece una alineacin vertical del texto.

z-index

Permite el solapamiento de niveles de capas.

left
right
none
none
left
right
both
baseline
sub
super
top
text-top
middle
bottom
text-bottom
longitud
porcentaje
entero con signo
auto

Ejemplo:

79

Ejemplo 14: Ubicacin.html

En este ejemplo aplicamos diversas ubicaciones a la etiqueta p cuyo atributo class es igual
a posicin podemos notar que mediante la propiedad position ubicamos a el prrafo de
manera absoluta dentro de la pgina, le asignamos un margen superior de 120 pixeles
propiedad top, un margen izquierdo de 80 pixeles propiedad left y margen derecho de 20
pixeles propiedad right .posicion{position:absolute;top:120px;left:80px;right:20px;}.
Resultado:

11- Margen interno:

La propiedad padding y sus derivados permiten establecer mrgenes internos que se miden
a partir de los bordes del elemento contenedor
Propiedad
padding
padding-top
padding-right
padding-bottom
padding-left

Descripcin
Permite establecer mrgenes internos en un
elemento contenedor.
Especfica mrgenes superior, derecho,
inferior e izquierdo.

Valores
Longitud
Porcentaje
Longitud
Porcentaje

80

Ejemplo:

Ejemplo 15: Margeninterno.html

En este ejemplo primero colocamos un borde alrededor del elemento contenedor header
header{border:2px solid red;} esto servir para notar el margen interno aplicado y
segundo establecemos directamente en el elemento h2 el margen deseado con la propiedad
padding h2{padding:25px;} para el caso es de 25 pixeles respecto al borde del elemento
contenedor header.
Resultado:

12- Tablas:
Las propiedades CSS para estilo en tablas permiten manipular el estilizado para las tablas
contenidas en un documento web.

81

Propiedad
caption-side
table-layout

border-collapse
border-spacing
empty-cells

Descripcin
Establece la posicin del ttulo respecto de
la tabla.
Permite ejercer control del algoritmo usado
para el formato de las celdas, filas y
columnas.
Permite la seleccin del modelo de los
bordes.
Establece el espaciado entre los bordes de
celdas adyacentes.
Permite la visibilidad de los bordes de
celdas sin contenido.

Valores
top
bottom
auto
fixed
collapse
separate
Longitud
show
hide

Ejemplo:

Ejemplo 16: Tablas.html

En este ejemplo creamos una tabla y le aplicamos un estilo de bordes con espacio
propiedad border-spacing de 10 pixeles al lado izquierdo y derecho; y 20 pixeles arriba y
abajo, adems establecemos una separacin de bordes de las celdas de la tabla propiedad
border-collapse table{border-spacing: 10px 20px; border-collapse:separate;}.

82

Resultado:

13- Texto:
Para el manejo de texto CSS presenta un conjunto de propiedades que permiten manejar el
estilizado de este dentro de un documento web.
Propiedad
text-indent
text-align
text-decoration

text-transform

letter-spacing
word-spacing
white-space

Color
direction
unicode-bidi

Descripcin
Permite desplazar la primera lnea del texto
(sangra).
Especifica un modo de alineamiento del
texto.
Proporciona efectos de subrayado, tachado,
parpadeo.

Valores
Longitud
Porcentaje
Left, right, center y
justify
none
underline
overline
line-through
blink
Permite hacer transformaciones del texto a
capitalize
maysculas/minsculas.
uppercase
lowercase
none
Define el espacio entre caracteres.
normal
longitud
Establece la cantidad de espacio entre
normal
palabras.
longitud
Establece el comportamiento de los espacios normal
dentro de los elementos.
pre
nowrap
pre-wrap
pre-line
Permite definir un color del primer plano del Color
texto.
Aplica sentido direccional de la escritura.
ltr
rtl
Aplica sentido direccional de la escritura.
Normal, embed
bidi-override
83

Ejemplo:

Ejemplo 17: Textos.html

En este ejemplo vemos la aplicacin de las propiedades CSS de estilizado de textos veamos
ms detalladamente los tres elementos que estilizamos:
En primer lugar el ttulo h1 se le designo un tipo de letra algerian con la propiedad fontfamily, un espacio entre letras de 4 pixeles con la propiedad letter-spacing, el color de texto
azul con la propiedad color, una decoracin de texto que para el caso es un subrayado con
la propiedad text-decoration y un espacio entre palabras de 8 pixeles con la propiedad
word-spacing.
Segundo el ttulo h2 le asignamos el tipo de letra baskerville old face con la propiedad fontfamily, color de texto rojo con la propiedad color y una transformacin de texto a
mayscula con la propiedad text-transform.
Y tercero al prrafo p se le dio una sangra de 35 pixeles con la propiedad text-indent, color
de texto verde con la propiedad color y un tamao de fuente de 16 pixeles con la propiedad
font-size.

84

Resultado:

14- Pseudo clases:

Las pseudo-clases se encargan de clasificar diversos elementos con caractersticas distintas
del nombre, atributo o contenido. Las pseudo-clases pueden considerarse dinmicas, en el
sentido que un elemento puede adicionar o perder una pseudo clase cuando los usuarios
interacten con la pgina web.
Propiedad
:link
:visited
:active
:hover
:focus
:lang
:first-child
:first-letter
:first-line
:before
:after

Descripcin
Se utiliza para seleccionar los enlaces no visitados.
Se utiliza para seleccionar los enlaces visitados.
Se utiliza para seleccionar y estilizar el enlace activo.
Se utiliza para seleccionar los elementos al pasar el ratn sobre
ellos.
Se utiliza para seleccionar el elemento que tiene el foco.
Se utiliza para seleccionar los elementos con el atributo lang
partiendo de un valor especificado.
Se utiliza para seleccionar el selector especificado, slo si es el
primer hijo de un elemento superior.
Se utiliza para agregar un estilo a la primera letra del selector
especificado.
Se utiliza para agregar un estilo a la primera lnea del selector
especificado.
Inserta contenido antes del contenido del elemento seleccionado (s).
Inserta contenido despus del elemento seleccionado (s).

85

Ejemplo:

Ejemplo 18: pseudoclases.html

En el ejemplo anterior utilizamos las pseudo-clases para estilizar los elementos contenidos
dentro del body de nuestro documento web en primer lugar estilizamos la primer letra de
cada elemento de prrafo p con la pseudo-clase ;first-letter establecindole un tamao de
200% mayor al tamao por defecto con la propiedad ;font-size y le dimos un color azul con
la propiedad color. Luego aplicamos estilo al prrafo p que posee el atributo id=dos con
la pseudo-clase first-line le aplicamos un color de fondo amarillo a la primer lnea de texto
de dicho prrafo con la propiedad background-color. Posteriormente utilizando la pseudoclase :hover la cual se activara al pasar el puntero sobre el elemento definimos un color de
texto verde claro con la propiedad color para el hipervnculo colocado con la etiqueta a y
eliminamos el subrayado que por defecto tienen los link con la propiedad text-decoration.
Por ultimo aplicamos la pseudo-clase :focus (el cual se activa cuando un elemento tiene el
foco) al elemento input de la pgina el cual definir un color de fondo celeste con la
propiedad background-color.
Como podemos ver las pseudo-clases se valen de propiedades y proporcionan cierto
dinamismo a la hora de interactuar con el contenido de nuestras pginas web.
Resultado:

86

2.6 Las novedades de CSS3

CSS3 tiene un claro objetivo y es facilitar el trabajo del desarrollador dejando de lado la
utilizacin de herramientas externas que hasta ahora aportaban ese toque extra que dotaba
de un aspecto ms moderno a los sitios web, pero que a la vez hacia mucho ms engorroso
y complicado el cdigo fuente de una pgina.
Esta nueva versin CSS ofrece una nueva gama de propiedades para el tratamiento de los
elementos que hasta hace poco era necesario trabajarlos con herramientas externas y
muchas veces complicadas, a parte de las nuevas propiedades ofrece una total
compatibilidades con los estndares CSS anteriores y todos sus elementos.

CSS 1

CSS3
CSS
2.1

CSS 2

La combinacin y compatibilidad con los elementos de las versiones anteriores de CSS

aunado a las extraordinarias novedades hacen de CSS3 una poderosa fuente de diseo
dinmico, visualmente adaptado y nativo tanto para los desarrolladores como para los
usuarios. Las potenciales aplicaciones dentro del desarrollo web son muchas y los
resultados totalmente nativos y orientados al internet moderno y creciente.
Ahora veamos ms a fondo esas novedades.
2.6.1 Fondos
En CSS3 hay varias propiedades que permiten un mayor control sobre este valioso
elemento esttico y visual de toda pgina web.
Propiedad
backgroundclip
backgroundorigin
backgroundsize

Descripcin
Especifica el rea de pintura de las
imgenes de fondo.
Especifica la zona de
posicionamiento de las imgenes de
fondo.
Especifica el tamao de las
imgenes de fondo.

Valores
border-box, padding-box, contentbox
padding-box, border-box, contentbox
Longitud y/o porcentaje

87

Ejemplo background-clip:

Ejemplo 19: css3fondos.html

En este ejemplo podemos ver tres elementos div a los cuales aplicamos la propiedad
background-clip con sus diferentes valores para apreciar sus diferencias visuales.
Primero la div con el identificador igual a uno le asignamos un borde punteado de lnea
color azul con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, un color de fondo amarillo con la propiedad background-color y especificamos
que el color de fondo se muestre en una caja de acuerdo al contenido con la propiedad
background-clip y su atributo content-box.
Segundo la div con el identificador igual a dos le asignamos un borde punteado de lnea
color rojo con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, un color de fondo gris con la propiedad background-color y especificamos que el
color de fondo se muestre en una caja que iniciara justo en el margen interno con la
propiedad background-clip y su atributo padding-box.
Tercero la div con el identificador igual a tres le asignamos un borde punteado de lnea
color verde con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, un color de fondo celeste con la propiedad background-color y especificamos que
el color de fondo se muestre en una caja que iniciara sobre el borde de nuestra div con la
propiedad background-clip y su atributo border-box.

88

Resultado:

Ejemplo background-origin y background-size:

Ejemplo 20: css3fondos2.html

89

En este ejemplo podemos ver tres elementos div a los cuales aplicamos la propiedad
background-origin y background-size con sus diferentes valores para apreciar sus
diferencias visuales.
Primero la div con el identificador igual a uno le asignamos un borde punteado de lnea
color azul con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, una imagen de fondo con la propiedad background-image, especificamos que la
imagen de fondo se muestre en una caja que iniciara justo en el margen interno con la
propiedad background-origin y su atributo padding-box y especificamos un tamao de
fondo para este caso de la imagen de un 80% con la propiedad background-size.
Segundo la div con el identificador igual a dos le asignamos un borde punteado de lnea
color rojo con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, una imagen de fondo con la propiedad background-image, especificamos que la
imagen de fondo se muestre en una caja de acuerdo al contenido con la propiedad
background-origin y su atributo content-box y especificamos un tamao de la imagen de
fondo de un 20% con la propiedad background-size.
Tercero la div con el identificador igual a tres le asignamos un borde punteado de lnea
color verde con la propiedad border, un margen interno de 5 pixeles con la propiedad
padding, una imagen de fondo con la propiedad background-image, especificamos que la
imagen de fondo se muestre en una caja que iniciara sobre el borde de nuestra div con la
propiedad background-origin y su atributo border-box y luego le asignamos un tamao a
la imagen de fondo de 60%.
Resultado:

De los dos ejemplos anteriores (ejemplos 19 y 20) podemos destacar que las nuevas
propiedades de fondos aunadas a las ya existentes de las versiones anteriores de CSS
proporcionan grandes beneficios a la hora de trabajar con esta parte tan fundamental en el
estilizado de sitios web.
90

2.6.2 Efectos de texto

Sin lugar a dudas el texto es un elemento sumamente importante dentro de un sitio web ya
que representa la base fundamental del contenido que presentamos por esa razn CSS3
ofrece nuevas propiedades que permiten estilizarlo de mejor forma de acurdo a las
necesidades que se tengan.
Propiedades
hangingpunctuation
punctuationtrim
text-alignlast
textemphasis
text-justify

text-outline
textoverflow
text-shadow

text-wrap
word-break
word-wrap

Descripcin
Especifica si un carcter de puntuacin puede
ser colocado fuera de la caja de lnea.
Especifica si un carcter de puntuacin debe ser
recortado.
Describe cmo se alinea la ltima lnea de un
bloque o una lnea justo antes de un salto de
lnea forzado cuando text-align es "justificar".
Aplica marcas de nfasis, y el color de primer
plano de las marcas de nfasis, al texto del
elemento.
Especifica el mtodo de justificacin utilizado
en text-align.

Valor
none, first, last, allow-end, forceend
none, start, end, allow-end,
adjacent

text-emphasis-style textemphasis-color

auto,inter-word,interideograph,intercluster,distribute,kashida,trim
Especifica un esquema de texto.
Thickness, blur, color
Especifica lo que debe ocurrir cuando el texto clip,ellipsis, string*
se desborda en el elemento contenedor.
Aade sombra al texto.
Valor horizontal, valor vertical,
difuminacin y color de la
sombra. *
Especifica reglas rotura de lnea del texto.
normal,none,unrestricted,suppress
Especifica las reglas de salto de lnea para normal,break-all,hyphenate *
alfabetos.
Permite establecer longitudes en palabras que normal,break-word *
se rompen y pasan a la siguiente lnea.

*Son las propiedades soportadas por los navegadores hasta la fechas las otras sus resultados an no pueden ser vistos en
ningn navegador

Ejemplo:

91

Ejemplo 21: Efectosdetexto.html

En este ejemplo aplicamos los siguientes efectos de texto:

A la etiqueta h1 le colocamos una sombra de 15 pixeles en horizontal y vertical
respectivamente, una difuminacin de la sombra de 5 pixeles (a menor cantidad de pixeles
ms slida es la sombra) y un color de sombra gris todo con la propiedad tex-.shadow.
Luego a las etiquetas div le designamos un ancho y un alto de 100 pixeles con las
propiedades width y height, definimos que el texto incluido dentro de las div se muestre en
negrita con la propiedad font-weight y aplicamos un borde punteado en crculos de color
azul con la propiedad border.
Posteriormente al prrafo p con el identificador texto1 le ocultamos el desbordamiento de
elementos con la propiedad overflow y su atributo de oculto hidden y para el
desbordamiento de texto le aplicamos un estilo de elipse que oculta el texto desbordado y lo
deja en estado de continuacin con la propiedad text-overflow y su atributo ellipsis.
Despus al prrafo p con el identificador texto2 le designamos un ajuste de lnea para que
el texto que se desborda no siga una lnea horizontal sino en vertical con la propiedad wordwrap y su atributo break-word.
Y para finalizar el ejemplo al prrafo p con el identificador texto3 lo establecemos en una
lnea horizontal con la propiedad display y su atributo inline y le definimos una sombra de
texto de menos 4 pixeles en horizontal y vertical respectivamente (los valores negativos
hacen que se muestre la sombra en la parte superior), una difuminacin de la sombra de 1
pixel y un color gris para la sombra todo con la propiedad text-shadow.

92

Resultado:

2.6.3 Fuentes
Antes de CSS3, los diseadores y/o desarrolladores de pginas web tenan que utilizar
fuentes que ya estaban instalados en el ordenador del usuario. Con CSS3, se vuelve posible
usar cualquier fuente siempre y cuando sea adecuada y fcil de leer. La definicin de
fuentes propias se realiza mediante la regla: @ font-face.
@ font-face se vale de todas las propiedad de fuente vista anteriormente y permite incluir
nuestro propio estilo de fuente desde el servidor donde se tenga alojada la pgina web.
Propiedades
Valor
Complementarias
font-family
name
src
URL
font-stretch

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Descripcin
Define el nombre de una fuente.
Especifica la direccin de donde se extrae la
fuente.
Opcional. Define cmo se debe mostrar la fuente.
El valor predeterminado es "normal".

93

font-style

font-weight

unicode-range

normal
italic
oblique
normal
bold
100
200
300
400
500
600
700
800
900
Valor unicode

Opcional. Define cmo debe ser de estilo de la

fuente. El valor predeterminado es "normal".
Opcional. Define el grosor de la fuente. El valor
predeterminado es "normal"

Opcional. Define el rango de caracteres Unicode

admitidos por la fuente. El valor predeterminado
es "U 0-10 FFFF".

Ejemplo:

Ejemplo 22: misfuentes.html

En este ejemplo integramos a nuestra pgina tres tipos de fuente (ubuntuRegular,

ubuntuBold y ubuntuItalic) con la nueva regla @ font-face, con el atributo src
especificamos la ruta donde tenemos guardadas las fuentes y luego especificamos el
94

formato con el valor format (en el presente ejemplo se utilizan fuentes con extensin ttf son
las ms adecuadas para los navegadores Mozilla, Opera, Chrome y Safari).
Luego de haber definidos las fuentes propias a utilizar solo debemos llamas desde los
elementos las fuentes veamos como: h1 para este tipo de ttulo aplicamos el tipo de fuente
ubuntuBold utilizando la propiedad font-family dndole como valor el nombre de la fuente,
h2 le designamos el tipo de fuente ubuntuItalic mediante la propiedad font-family y la
etiqueta h3 le definimos el tipo de fuente ubuntuRegular utilizando la misma propiedad.
Resultado:

2.6.4 Transformaciones 2D
Una transformacin es un efecto que permite que un elemento cambie de forma, tamao y
posicin. Con CSS3 podemos realizar diversos tipos de transformaciones como: trasladar,
rotar, escalar, girar en ngulo y/o combinar todas las trasformaciones.
Para realizar este trabajo CSS3 cuenta con la propiedad transform y transform-origin junto
a una serie de mtodos que permiten implementarlas.
Navegadores compatibles: Mozilla y Opera. Chrome y Safari se necesita agregar prefijo
de navegador.
Propiedades
Propiedades
transform
transform-origin

Descripcin
Permite implementar una transformacin en 2D o 3D de un
elemento.
Le permite cambiar la posicin de los elementos
transformados.

Mtodos 2D para propiedad Transform

Mtodo
matrix(
n1,n2,n3,n4,n5,n6 )

translate( x, y )

Descripcin
Define una transformacin 2D usando de una matriz de seis
valores. Donde n1= escala horizontal, n2=giro en un eje X, n3=
giro en eje inverso Y, n4= escala vertical, n5= traslado
horizontal en pixeles y n6= traslado en vertical en pixeles.
Define un traslado en 2D moviendo los elementos a lo largo de
los ejes X - Y.
95

translateX( n )
translateY( n )
scale( x, y )
scaleX( n )
scaleY( n )
rotate( ngulo en grados
)
skew( x-ngulo, yngulo )
skewX( ngulo)
skewY( ngulo )

Define un traslado en 2D moviendo el elemento a lo largo del

eje X.
Define un traslado en 2D moviendo el elemento a lo largo del
eje Y.
Define una transformacin de escala 2D, cambiando el ancho y
el alto del elemento.
Define una transformacin de escala 2D cambiando el ancho
del elemento
Define una transformacin de escala 2D cambiando la altura
del elemento.
Define una rotacin 2D de acuerdo al ngulo especificado en el
parmetro.
Define una transformacin de giro 2D a lo largo del eje X o el
eje Y.
Define una transformacin de giro 2D a lo largo del eje X
Define una transformacin de giro 2D a lo largo del eje Y

Ejemplo rotate, translate y scale:

Ejemplo 23: transformaciones1.html

En este ejemplo comenzamos aplicando estilos de forma general a las div contenidas en el
body del documento web. Definimos ancho y alto de 100 pixeles cada uno respectivamente
(propiedades width y height), asignamos un borde doble de color verde.

96

Luego a la div con el identificador uno aplicamos una transformacin de rotacin de 35

grados (con la propiedad transform y su mtodo rotate) y un margen respecto al borde de
la pgina de 20 pixeles, a la div con identificador dos aplicamos una transformacin de
traslado de posicion (con la propiedad transform y su mtodo translate) de 200 pixeles en
horizontal y 20 pixeles en vertical y en ltima instancia la div con identificador tres
aplicamos una transformacin de escala (con la propiedad transform y su mtodo scale)
aumentando su tamao en escala de 1.5 en horizontal (el 1 representa el tamao dado con
las propiedades width y height y el 0.5 el agregado es decir la mitad de su tamao normal el
50%) y dejamos el tamao 1 o normal en vertical y aplicamos un margen de 20 pixeles con
respecto al borde de la pgina.
IMPORTANTE: En el estilizado de las tres div la propiedad transform y su mtodo se
repite con la diferencia de que se antepone el prefijo -webkit- antes de la propiedad esto se
realiza con el objetivo de lograr compatibilidad con los navegadores Chrome y safari que
hasta la fecha no son compatibles
Resultado:

Ejemplo skew y matrix:

Ejemplo 24: transformaciones2.html

97

En este ejemplo comenzamos aplicando estilos de forma general a las div contenidas en el
body del documento web al igual que en el ejemplo anterior (Ejemplo 23). Definimos
ancho y alto de 100 pixeles cada uno respectivamente (propiedades width y height),
asignamos un borde doble de color verde.
Tenemos una div con identificador uno a la cual aplicamos una transformacin en giro en
los ejes X Y de 20 y 30 grados respectivamente (con la propiedad transform y su mtodo
skew) y asignamos un margen de 35 pixeles respecto al margen de la pgina. Tambin
tenemos una div con identificador dos a la cual establecemos una transformacin multiple
con una matriz de seis valores (con la propiedad transform y su atributo matrix) los cuales
son: 1.3 representa el valor de escala horizontal ,0.3 es el valor de giro en el eje X, 0.6 es el
giro en el eje Y, 1.4 representa el valor en escala vertical, 20 representa el traslado
horizontal en pixeles y 20 representa el traslado vertical en pixeles y para finalizar
aplicamos un margen de 20 pixeles respecto al borde de la pgina.
Resultado:

IMPORTANTE: Al igual que el ejemplo 23 en el estilizado de las dos div la propiedad

transform y su mtodo se repite con la diferencia de que se antepone el prefijo -webkitantes de la propiedad esto se realiza con el objetivo de lograr compatibilidad con los
navegadores Chrome y safari que hasta la fecha no son compatibles.

Propiedad transform-origin
La propiedad transform-origen le permite cambiar la posicin de los elementos
transformados. El elemento 2D puede transformar los ejes X - Y. Elemento transformado
3D tambin puede cambiar el eje Z.

98

Propiedad/Valor Descripcin
Eje X
Define donde se coloca la vista en el eje x. Los valores posibles:

Eje Y

Define donde se coloca la vista en el eje y. Valores posibles:

Eje Z

left
center
right
longitud
porcentaje

top
center
bottom
longitud
porcentaje

Define donde se coloca la vista en el eje z. Los valores posibles son:

longitud

Ejemplo:

Ejemplo 25: transformacionesdeorigen.html

En este ejemplo primero aplicamos estilizado al div asignndole un ancho y un alto de 100
y 100 pixeles respectivamente (propiedades width y height), colocamos un borde externo

99

punteado de lneas de color azul (propiedad border) y alineamos el texto en el centro de la

div (propiedad text-align).
Luego movemos la div con identificador uno 10% en el eje X y 80% en el eje Y
(propiedad transform-origin) y rotamos el elemento div 45 grados en el sentido de las
agujas del reloj (propiedad transform y su mtodo rotate).
IMPORTANTE: Al igual que el ejemplo 24 en el estilizado de la div la propiedad
transform y su mtodo se repite con la diferencia de que se antepone el prefijo -webkitantes de la propiedad esto se realiza con el objetivo de lograr compatibilidad con los
navegadores Chrome y safari que hasta la fecha no son compatibles.
Resultado:

2.6.5 Transformaciones 3D
CSS3 permite dar formato a sus elementos usando transformaciones 3D apoyndose de una
serie de mtodos predefinidos que permiten estilizar elementos en 3 dimensiones.
Propiedades
Transform
transform-origin
transform-style
Perspective
perspective-origin
backface-visibility

Descripcin
Aplica una transformacin 2D o3D a un elemento.
Permite desplazar o mover de posicin un elemento al que
se le aplicado una transformacin.
Especifica como un elemento es renderizado por el
navegador en un espacio 3D. valores: flat o preserve-3d
Permite establecer una perspectiva de cmo se ver un
elemento 3D.
Especifica la posicin inferior de elementos 3D.
Define si un elemento debe ser visible cuando no est frente
a la pantalla.

Mtodos de transformaciones 3D
Mtodo
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translate3d(x, y, z)

Descripcin
Define una transformacin 3D usando una matriz de 4x4
de 16 valores.
Permite realizar el traslado de un elemento en 3D.
100

translateX(x)
translateY(y)
translateZ(z)
scale3d(x, y, z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x, y, z, ngulo)
rotateX(ngulo)
rotateY(ngulo)
rotateZ(ngulo)
perspective(n)

Define un traslado en 3D usando solamente como

parmetro un valor para el eje X.
Define un traslado en 3D usando solamente como
parmetro un valor para el eje Y.
Define un traslado en 3D usando solamente como
parmetro un valor para el eje Z.
Define una transformacin de escala en 3D.
Define una transformacin de escala en 3D usando
solamente un valor para el parametro del eje X.
Define una transformacin de escala en 3D usando
solamente un valor para el parametro del eje Y.
Define una transformacin de escala en 3D usando
solamente un valor para el parametro del eje Z.
Define una rotacin en 3D.
Define una rotacin en 3D a lo largo del eje X.
Define una rotacin en 3D a lo largo del eje Y.
Define una rotacin en 3D a lo largo del eje Z.
Permite establecer una perspectiva de cmo se ver un
elemento 3D.

Ejemplo:

Ejemplo 26: Transformacion3D1.html

En este ejemplo aplicamos estilizado general a las div dndoles un ancho y un alto de 100 y
100 pixeles a cada uno, designamos un borde punteado de lnea color azul y una alineacin
de texto hacia el centro.
101

La div con identificador uno le designamos una transformacin de rotacin de 55 grados

en el eje X (propiedad transform y su mtodo rotateX). Se repite la propiedad y se
antepone el prefijo -webkit- para hacer el ejemplo compatible con los navegadores Chrome
y Safari.
Luego la div con identificador dos aplicamos un traslado de posicin en el eje X de 45
pixeles (propiedad transform y su mtodo translateX). Se repite la propiedad y se antepone
el prefijo -webkit- para hacer el ejemplo compatible con los navegadores Chrome y Safari.
Para finalizar la div con identificador tres establecemos una transformacin de escala 3d
o cambio de tamao (propiedad transform y su mtodo scale3d) donde 1.5 es el valor de
escala en el eje X, 1.5 es el valor de escala en el eje Y; y 1 es el valor de escala para el eje
Z. Se repite la propiedad y se antepone el prefijo -webkit- para hacer el ejemplo compatible
con los navegadores Chrome y Safari.
Resultado:

Propiedad perspective y perspective-origin

La propiedad perspective define a cuntos pxeles se coloca un elemento 3D del punto de
visin del usuario. Esta propiedad le permite cambiar la perspectiva de cmo son vistos los
elementos 3D. La propiedad perspective-origin permite cambiar la posicin en los ejes X Y de elementos 3D.
Compatibilidad con los navegadores: Chrome y Safari
Valor propiedad
perspective
Numero
None

Descripcin
Cantidad de pixeles del punto de vista del usuario.
Valor por defecto. Igual a 0. El punto de visin no est
configurado.
102

Valor propiedad
perspective-origin
Eje X

Descripcin
Definicin de donde se coloca el punto de visin en el eje x
Los valores posibles:

Eje Y

left
center
right
longitud en pixeles
porcentaje

Valor por defecto: 50%

Definicin de donde se coloca el punto de visin en el eje y
Los valores posibles:

top
center
bottom
longitud en pixeles
porcentaje

Valor por defecto: 50%

Ejemplo:

Ejemplo 27: Perspective.html

103

En este ejemplo nos valemos de JavaScript para demostrar dinmicamente el uso de la

propiedad perspective. Veamos cada segmento del cdigo y analicemos sus partes.
Estilizado:
La div con identificador uno la establecemos en una posicin relativa (propiedad position
valor relative), asignamos un alto y un ancho de 200 y 200 pixeles cada uno (propiedades
height y width), le aplicamos un margen de 50 pixeles respecto al borde de la pgina
(propiedad margin), establecemos un margen interno de 10 pixeles (propiedad padding) y
colocamos un borde de 1 pixel slido y de color negro (propiedad border).
La div con identificador dos le asignamos un margen interno de 50 pixeles (propiedad
padding), la establecemos en una posicin absoluta (propiedad position valor absolute), le
aplicamos un borde de 1 pixel slido y de color negro (propiedad border), rellenamos con
un color de fondo rojo (propiedad background-color) y aplicamos una transformacin de
rotacin 3D en el eje X de 45 grados (propiedad transform mtodo rotateX) esta propiedad
y su mtodo la volvemos a repetir con la diferencia que le anteponemos el prefijo -webkitpara hacerlo compatible con los navegadores Chrome y Safari.
Script:
Creamos una funcin llamada cambiarPerspectiva y le definimos un parametro
denominado value function cambiarPerspectiva (value) { }. Dentro de la funcin que se
ha creado hacemos referencia al documento web document, dentro del documento web
aun elemento definido por su atributo id getElementById('uno') y al elemento
predefinido con su id le aplicamos el mtodo style (permite agregar estilos CSS desde
JavaScript) de este mtodo utilizamos la funcin webkitPerspective la cual permite asignar
el efecto de perspectiva para los navegadores Chrome y Safari, como valor de esta funcin
designamos el parametro value que proviene del atributo value del input type=range ya
unificados
estos
elementos
se
ver
as
document.getElementById('uno').style.webkitPerspective=value;. En la segunda parte
del script realizamos un envi de valor a la etiqueta span para mostrar el valor actual de
perspectiva document.getElementById('valor').innerHTML=value;}.
Resultado:

104

IMPORTANTE: Recuerde que la propiedad perspective y perspective-origin solo se

pueden aplicar a elementos transformados con mtodos 3D.

Propiedad backface-visibility
Esta propiedad define si un elemento debe ser visible cuando no est frente a la pantalla.
Esta propiedad es til cuando un elemento se gira y no se desea mostrar la parte de atrs de
dicho elemento.
Compatible con los navegadores: Mozilla, Chrome, Safari e Internet Explorer 10 o
superior (utilizando con todos ellos el prefijo de navegacin correspondiente).
Valor
visible
hidden

Descripcin
Define si la parte de atrs de un elemento es visible.
Define si la parte de atrs de un elemento no es
visible.

Ejemplo:

Ejemplo 28: backface-visibility.html

105

En el presente ejemplo se aplica animacin al elemento div contenido en el body de nuestro

documento web con la finalidad de poder apreciar perfectamente el efecto proporcionado
por la propiedad backface-visibility. Este ejemplo ha sido segmentado en cuatro partes las
cuales explicaremos a continuacin:
Parte 1: en este segmento del cdigo CSS definimos el tamao del elemento div (ancho
width y alto height), color de fondo un tono de verde claro (propiedad background),
establecemos una posicin relativa para el elemento (propiedad position y su atributo
relative) y asignamos un borde (propiedad border) de 1 pixel slido y de color negro.
Parte 2: en esta parte del cdigo CSS definimos con la propiedad backface-visibility y su
atributo de ocultar hidden para que el elemento div al realizar un giro sobre cualquiera de
sus ejes la parte de atrs del elemento se ocultara para no ser mostrada al usuario (si se
cambia el valor hidden por visible se muestra la parte de atrs del elemento) y repetimos
dos veces ms la propiedad y su valor anteponiendo el prefijo -moz- para compatibilidad
con el navegador Mozilla y el prefijo -webkit- para compatibilidad con el navegador
Chrome.
Parte 3: en este segmento del cdigo CSS definimos dos cosas primero animation:mover
3s infinite. Donde se asigna la propiedad animation la cual permite especificar un
elemento al que se le aplicara una animacin como valores tiene mover y es el nombre que
se le asigna a la animacin en especfico de un elemento dado (puede ser cualquier
nombre), 3s es el tiempo en segundos que durara el efecto de animacin cuando la pgina
este cargada y el atributo infinite el cual define la duracin mientras el usuario este en la
pgina y significa que la animacin seguir ejecutando hasta que el usuario salga de la
pgina web.
Segundo animation-timing-function: linear;. Donde la propiedad animation-timingfunction: especifica la curva de velocidad de la animacin; y su valor linear: determina que
la animacin tiene la misma velocidad de principio a fin.
Parte 4: en esta seccin del CSS utilizamos la nueva regla @keyframes la cual permite
crear una animacin a partir de una especificacin realizada con la propiedad animation
como parmetros posee: primero el nombre de la animacin dado en la propiedad
animation para el caso es mover, segundo el atributo from este determina el inicio de la
animacin est compuesto por una propiedad seguida de un mtodo transform:
rotateY(0deg); segn lo dicho la animacin iniciara con una rotacin o giro en el eje Y
comenzando en 0 grados; y el atributo to este determina el final de la animacin y est
compuesto para este ejemplo por
una propiedad seguida de un mtodo
transform:rotateY(360deg); la animacin terminara en una rotacin completa de 360
grados. Luego repetimos anteponiendo los prefijos para la compatibilidad con Mozilla y
Chrome.
IMPORTANTE: tanto la propiedad animation y sus derivados como la regla @keyframes
se trataran con ms detalle en prximos apartados

106

Resultado:

2.6.6 Transiciones
Las transiciones son efectos que provocan cambios donde el elemento al cual se le aplica la
transicin puede modificar gradualmente dimensiones, colores, posicin, sombras o brillos,
etc. Con CSS3 podemos aadir un efecto al pasar de un estilo a otro, sin el uso de
animaciones Flash o JavaScript.
Compatibilidad con navegadores: Mozilla, Opera, Chrome, Safari (con prefijo -webkit-)
e Internet Explorer 10 o superior
Nota: Si no se especifica la duracin o tiempo, la transicin no tendr ningn efecto, ya que
el valor por defecto es 0 y que para implementar una transicin debe llamarse desde una
pseudo-clase tpicamente :hover la cual se activa al pasar el puntero sobre el elemento
designado.

Propiedad
Transition

Descripcin
Permite establecer las cuatro propiedades
de transicin en una sola propiedad.

transitionEspecifica el nombre de la propiedad CSS

property
al que se aplica la transicin.
transition-duration Define el tiempo que tarda una transicin.
Por defecto es 0.
transition-timing- Describe cmo se calcular la velocidad
function
durante una transicin. Valor por defecto
"ease".

Valor
Propiedades, duracin,
velocidad y punto de
inicio
None, all, propiedad
Tiempo en segundos
Linear (la misma
velocidad de principio a
fin), ease (un comienzo
lento, luego rpido,
entonces termina
lentamente), ease-in
(Especifica el efecto de
transicin con un
comienzo lento), easeout (Especifica el efecto
de transicin con un final
107

transition-delay

Define cuando la transicin se iniciar.

Por defecto 0.

lento),
ease-in-out (Especifica el
efecto de transicin con
un lento comienzo y fin)
y cubic-bezier(n,n,n,n):
Defina sus propios
valores en la funcin
cbica bezier. Los
valores posibles son los
valores numricos de 0 a
1
Tiempo en segundos o
milisegundos.

Ejemplo:

Ejemplo 29: Transiciones.html

Como ya habamos mencionado una transicin permite establecer cambios de estilo

gradualmente durante un tiempo designado. En este ejemplo se ha segmentado el cdigo
para facilitar su explicacin y entendimiento ahora veamos ms de cerca cada parte:
Parte 1: Contiene un estilizado general el cual se apreciara al momento de cargar la pgina.
Podemos ver que designamos las dimensiones del elemento div (ancho width y alto height),
color de fondo del elemento div (propiedad background), un borde doble de color azul
108

(propiedad border), definimos que el texto contenido dentro del div se mostrara en negrita
(propiedad font-weight), tamao de letra de 15 pixeles (propiedad font-size) y un margen
de 30 pixeles respecto al borde de la pgina (propiedad margin).
Parte 2: este segmento del cdigo contiene las propiedades a las que se les aplicaran los
cambios o transiciones (propiedad transition-property) podemos apreciar que los efectos
sern aplicados a las dimensiones del elemento div (width y height), a una transformacin
que permitir dar movimiento en alguno de los ejes del elemento (transform), al color de
fondo del div (background), tamao de la fuente (font-size) y a la opacidad o transparencia
del elemento (opacity). Luego se asigna el tiempo que durara la transicin de cada
propiedad definida en la lista de transition-property para el caso son seis propiedades y a
cada una se le asigna un tiempo de 2 segundos (propiedad transition-duration). Despus
establecemos la velocidad en con la cual se desarrollara la transition (propiedad transitiontiming-function), designamos tambin un borde redondeado de 10 pixeles (propiedad
border-radius) y una transparencia inicial de 0.2 (propiedad opacity).
Parte 3: en esta parte del cdigo definimos el evento en el cual se ejecutara la transicin
(:hover al pasar el puntero del mouse). Dentro del :hover definimos una transformacin de
rotacin del elemento div de 360 grados (transform: rotate(360deg);), una opacidad de
1(opacity:1;), color de fondo (background:#1ec7e6;), dimensiones del elemento div
(width:110px;height:110px;), tamao de fuente (font-size:20px;) y una alineacin de texto
centrado (text-align:center;).
Resultado:

2.6.7 Animaciones
Una animacin de manera similar a una transicin es un efecto que permite que un
elemento cambie gradualmente de un estilo a otro. Con CSS3 podemos crear animaciones
que pueden reemplazar a las imgenes animadas, animaciones Flash y/o JavaScript en
nuestros proyectos web. La diferencia principal entre transicin y animacin radica en que
las animaciones (animation) se vale de la regla @keyframes para implementar la
animacin dentro de un documento web.
Compatibilidad con los navegadores: Mozilla, Opera, Internet Explorer 10 o superior,
Chrome y Safari (a estos dos ltimos se debe utilizar el prefijo de navegador para permitir
compatibilidad -webkit-).

109

Propiedad
@keyframes

Animation

Descripcin
Especifica la ejecucin de una animacin.
Ejemplo:
@keyframes mianimacion
{
from {background: red;}
to {background: yellow;}
}
Una propiedad resumida de todos los las
propiedades de animacin, excepto la
propiedad de animacin-play-estate.
Ejemplo:
div{animation: mianimacione 5s infinite;}

animation-name

Especifica el nombre de la animacin a

utilizar en el @keyframes.

animation-duration

Especifica cuntos segundos o

milisegundos una animacin tarda en
completar un ciclo. Por defecto 0. Ejemplo:
div
{
animation-duration:10s;
}
Describe cmo la animacin progresara
durante un ciclo de duracin. Por defecto
su valor es "ease".

animation-timingfunction

Valor
Nombre de la
animacin, from o
porcentaje, to o
porcentaje,
propiedades.

Nombre de
animacin,
duracin, velocidad
o progreso, veces a
ejecutar y la
direccin de la
animacin.
Nombre de la
animacin (deber
ser el mismo del
@keyframes).
Tiempo en
segundos o en
milisegundos
ejemplos: 5s cinco
segundos o 20ms
veinte
milisegundos
Linear (la misma
velocidad de
principio a fin),
ease (un comienzo
lento, luego rpido,
entonces termina
lentamente), easein (Especifica el
efecto de
animacin con un
comienzo lento),
ease-out
(Especifica el
efecto de
animacin con un
final lento),
ease-in-out
(Especifica el
efecto de
animacin con un
110

animation-delay

Especifica cuando la animacin se iniciar.

Por defecto 0.

animation-iterationcount

Especifica el nmero de veces que una

animacin se ejecuta. Por defecto es 1.

animation-direction

Especifica si la animacin se reproducir a

la inversa en ciclos alternos. Por defecto su
valor es "normal".
Especifica si la animacin se est
ejecutando o est en pausa. Por defecto su
valor es "running".

animation-play-state

lento comienzo y
fin) y cubicbezier(n,n,n,n):
Defina sus propios
valores en la
funcin cbica
bezier. Los valores
posibles son los
valores numricos
de 0 a 1
Tiempo en
segundos o
milisegundos.
Un nmero que
representa las veces
que se ejecutara la
animacin y/o
infinite
Normal o alternate

Paused o running

Ejemplo:

111

Ejemplo 30: Animaciones.html

Parte 1: en esta parte del cdigo de estilo definimos las dimensiones (ancho width y alto
height) de nuestro elemento div, un color de fondo en un tono de verde (propiedad
background), color de texto blanco (propiedad color), posicion del elemento (propiedad
position), grosor de la fuente (propiedad font-weight), tamao de la fuente de 20 pixeles
(propiedad font-size), margen interno de 10 pixeles (propiedad padding), bordes
redondeados en 5 pixeles (propiedad border-radius), margen externo de 40 pixeles respecto
al borde de la pgina web (propiedad margin) y por ultimo definimos la animacin
(propiedad animation) donde: animacion1 es el nombre de la animacin, 5s es el tiempo
que durara la animacin, ease-in es la velocidad o progreso de la animacin la cual tendr
un inicio lento e infinite son las veces que la animacin se ejecutara una vez se cargue la
pgina web que para el caso no dejara de ejecutarse hasta cerrar la pgina.
Parte 2: en esta parte del cdigo CSS implementamos la animacin utilizando la regla
@keyframes seguido del nombre de la animacin asignado en la propiedad animation.
Como podemos apreciar la ejecucin de la animacin se da en porcentajes que van de la
siguiente manera:
-

0% {transform: rotate(0deg);left:0px;}: define el inicio de la animacin y

establece una transformacin de rotacin de cero grados y un espacio desde
el borde izquierdo de la pgina de cero pixeles.

25% {transform: rotate(90deg);left:200px;background:#90EE90;}: define

un 25% de nuestra animacin estableciendo una transformacin de rotacin
del elemento div de 90 grados, un espacio de separacin desde el borde
izquierdo de la pgina de 200 pixeles y un color de fondo.

50%
{transform:
rotate(180deg);left:300px;background:#00FA9A;}:
define un 50% de nuestra animacin estableciendo una transformacin de
rotacin del elemento div de 180 grados, un espacio de separacin desde el
borde izquierdo de la pgina de 300 pixeles y un color de fondo.

55% {transform: rotate(270deg);left:400px;background:#AFEEEE;}:

define un 55% de nuestra animacin estableciendo una transformacin de
112

rotacin del elemento div de 270 grados, un espacio de separacin desde el

borde izquierdo de la pgina de 400 pixeles y un color de fondo.
-

70% {transform: rotate(360deg);left:500px;background:#1ec7e6;}: define

un 70% de nuestra animacin estableciendo una transformacin de rotacin
del elemento div de 360 grados, un espacio de separacin desde el borde
izquierdo de la pgina de 500 pixeles y un color de fondo.

100% {transform: rotate(-360deg);left:0px;}: define un 100% de nuestra

animacin estableciendo una transformacin de rotacin de -360 grados y un
espacio desde el borde izquierdo de la pgina de cero pixeles, esto significa
que el elemento div regresa a su estado inicial para continuar ejecutando la
animacin.

Resultado:

Ahora podr apreciar como el elemento div se mueve rotando de izquierda a derecha y
vice-versa cambiando de color tal como se especific en el cdigo CSS.

2.6.8 Multiples columnas

CSS3 incluye un conjunto de propiedades que le permiten al desarrollador o diseador web
crear columnas de texto al igual que un peridico o revista.
Compatibilidad con navegadores: Opera, Internet Explorer 10 o superior, Mozilla (con
prefijo de compatibilidad -moz-), Chrome (con prefijo de compatibilidad -webkit-) y Safari
(con prefijo de compatibilidad -webkit-).
Propiedad
column-count

Descripcin
Especifica el nmero de columnas en las
que se divide un elemento.

Valor
Una cantidad
auto (el nmero de
columnas es
determinado por otras
propiedades)
113

column-fill

Especifica cmo llenar columnas.

column-gap

Especifica el espacio entre las columnas.

column-rule

Una propiedad abreviada para establecer

todas las propiedades de reglas de
columnas.
Especifica el color de la regla entre
columnas.
Especifica el estilo de la regla entre
columnas.

column-rule-color
column-rule-style

column-rule-width

Especifica el ancho de la regla entre

columnas.

column-span

Especfica el nmero de columnas en que

se mostrara un elemento ttulo.

column-width

Especifica la anchura de las columnas.

columns

Una propiedad abreviada para establecer

la anchura de las columnas y la cantidad
de columnas.

Balance
auto (actualmente esta
propiedad no es
soportada por ningn
navegador)
Una longitud en pixeles
normal
Ancho, estilo y color

Un color
None (sin estilo)
Hidden (oculto)
Dotted (punteado en
crculos)
Dashed (punteado en
lneas)
Solid (solido)
Double (doble lnea)
Groove (acanalado en
3D)
Ridge (cresta)
Inset (grabado)
Outset
Grosor en pixeles
Thin (delgado)
Medium (grosor medio)
Thick (Grueso)
1 (una columna)
All(todas las columnas )
Esta propiedad
actualmente no es
compatible con Mozilla
Firefox.
Longitud en pixeles
Auto
Ancho de columnas en
pixeles.
Cantidad de columnas.

114

Ejemplo:

Ejemplo 31: MultiplesColumnas.html

En este ejemplo vemos como segmentamos en tres columnas el texto que se encuentra
dentro del elemento article (propiedad column-count), establecemos un estilo solido a las
lneas o reglas de las columnas (propiedad column-rule-style), designamos un acho de lnea
de tres pixeles (propiedad column-rule-width) y un color de lnea azul (propiedad columnrule-color). Luego al ttulo h1 especificamos que se muestre sobre todas las columnas
(propiedad column-span) y especificamos que el titulo se muestre centrado (propiedad
text-align).
IMPORTANTE: recuerde que si desea apreciar el resultado de este ejemplo en Mozilla
deber repetir todo el cdigo anteponiendo el prefijo -moz- a cada propiedad en lugar del
prefijo -webkit-.

115

Resultado:

2.6.9 Interfaz de Usuario

CSS3 ofrece nuevas caractersticas que permiten trabajar con la interfaz de usuario de
nuestros proyectos web. Estas nuevas propiedades nos permiten manipular cambios de
tamaos, cuadros redimensionables y delineaciones entre otras.
Propiedades
appearance

Descripcin
Le permite visualizar un elemento como un
elemento de interfaz de usuario estndar.
Soporte en navegadores: Mozilla (con prefijo moz-), Chrome y Safari (ambos con prefijo
webkit-).

Valor
Normal
Icon
Window
Button
Menu
Field

box-sizing

Le permite definir elementos para adaptarse a una

zona de cierta manera.
Soporte en navegadores: Mozilla (con prefijo moz-), Chrome, Safari Opera e Internet Explorer
10 o superior.
Proporciona al autor la posibilidad de estilo de un
elemento
con
un
equivalente
icnico.
Actualmente no es soportada por ningn
navegador.

Content-box
Border-box
Inherit

icon

nav-down

Auto
URL
Inherit

Especifica dnde navegar utilizando la tecla de Auto

flecha hacia abajo de navegacin. Actualmente Id
116

solo es soportada en el navegador Opera.

nav-index

Especifica el orden de tabulacin para un

elemento. Actualmente solo es soportada en el
navegador Opera.

nav-left

Especifica dnde navegar utilizando la tecla de

navegacin flecha izquierda. Actualmente solo es
soportada en el navegador Opera.

nav-right

Especifica dnde navegar utilizando la tecla de

navegacin flecha derecha. Actualmente solo es
soportada en el navegador Opera.

nav-up

Especifica dnde navegar utilizando la tecla de

navegacin flecha arriba. Actualmente solo es
soportada en el navegador Opera.

outline-offset Compensa un perfilado y dibuja ms all del

borde. Actualmente soportada en los
navegadores: Mozilla, Chrome, Opera y Safari.
resize
Especifica si un elemento
podr ser
redimensionado por el usuario. Actualmente
soportada en los navegadores: Mozilla, Chrome
y Safari.

Target-name
Inherit
Auto
Un valor numrico
entero
Inherit
Auto
Id
Target-name
Inherit
Auto
Id
Target-name
Inherit
Auto
Id
Target-name
Inherit
Longitud en pixeles
Inherit
None
Both
Horizontal
Vertical

Ejemplo:

117

Ejemplo 32: Interfaces.html

El presente ejemplo demuestra la utilizacin de las tres propiedades principales de

interfaces de usuario (resize, box-sizing y outline-offset) aplicados a los elementos del div
ubicados en el body del documento web.
#uno: este elemento div contiene los siguientes estilos
-

Dimensiones de 100 y 100 pixeles (ancho width y alto height).

Le designamos un estilo redimensionable (resize: both;) en ambos sentidos

ancho y alto.

Designamos un desbordamiento auto (overflow: auto;) por si acaso el

contenido es ms grande que la div en alguno de los sentidos ancho o alto.

Y aplicamos un borde de 3 pixeles de tipo slido y de color rojo (border:

3px solid red;).

#dos: este elemento div contiene los siguientes estilos

-

Dimensiones de 100 y 100 pixeles (ancho width y alto height).

Aplicamos un borde de 2 pixeles de tipo slido y de color azul (border: 2px

solid blue;).

Un estilo de zona adaptado a la caja de contenido (box-sizing: border-box;

-moz-box-sizing: content-box;).

#tres: este elemento div contiene los siguientes estilos

-

Dimensiones de 100 y 100 pixeles (ancho width y alto height).

Aplicamos un borde de 1 pixel de tipo slido y de color verde (border: 1px

solid green;).

Establecemos una caja externa con un borde de 2 pixeles de tipo slido y de

color rojo (outline: 2px solid red;).

Designamos un espacio entre los bordes del elemento div y la caja externa
de 15 pixeles (outline-offset: 15px;).

Y definimos un margen de 30 pixeles respecto al borde la pgina web

(margin: 30px;).
118

Resultado:

Ejemplo appearance:

Ejemplo 33: Interfaces2.html

En este ejemplo cambiamos la apariencia del elemento div y le aplicamos un estilo de botn
el cual ser visualizado al cargar la pgina.

119

Resultado:

2.6.10 El Modelo de Cajas Flexibles

El nuevo modelo de caja se basa bsicamente en un sistema de elementos contenedores
flexibles que afecta todos los elementos HTML con posicionamiento no absoluto que sean
directamente hijos de uno de estos contenedores. En otras palabras, este modelo debe
declararse en algunos elementos de bloque del HTML; pero al declarar cualquier elemento
con este modelo a quien realmente afectaremos ser a todos sus elementos hijos (pero solo
al primer nivel de estos).
As pues hay dos tipos de elemento a tener en cuenta al usar este modelo de caja:
- El contenedor que se comportar como si fuese un elemento con display: block.
- Y sus hijos inmediatos que entrarn en este nuevo mundo del modelo de caja flexible.
Hay que tener en cuenta dos cosas importantes:
1- Este modelo no se va a comportar bien con elementos "float", por lo que al
usarlo debemos evitar usar estas propiedades en todos los elementos hijos.
Por otro lado, gracias a este nuevo modelo, los float van a carecer de sentido
en nuestras webs.
2- Esto solo va a afectar a los elementos hijos inmediatos sin posicionamiento
absoluto. Esto significa que los elementos dentro de estos elementos hijos no
se vern afectados y que si posicionamos algn elemento en "position:
absolute" este elemento ni ser afectado por el modelo de caja flexible ni se
tendr en cuenta para calcular cmo se comportan el resto de sus elementos
hermanos. Esto que en un principio puede parecer rebuscado, en realidad
nos da la oportunidad de jugar mucho con este sistema.

120

Propiedad
Display
box-orient

box-align

box-direction

box-flex

Descripcin
Esta propiedad define cmo se debe mostrar
un elemento HTML.
Esta propiedad indica en que eje se van a
repartir las cajas flexibles hijas de un
contenedor.
Si
usamos
"box-orient:
horizontal", estas se distribuirn en el eje X si
indicamos "box-orient: vertical" lo harn en el
"Y". Soporte en los navegadores: Mozilla
(con prefijo de compatibilidad -moz-), Opera
(con prefijo de compatibilidad -o-), Chrome y
Safari (con prefijo de compatibilidad -webkit)
Es la propiedad complementaria de box-orient
y se encarga de definir como ocuparn es
espacio disponible en el eje contrario al
definido a box-orient. Es decir, si se indica un
"box-orient: horizontal", al estar los
elementos hijos distribuidos por el eje X, boxalign definir como se colocan estos en el eje
Y.
Esta propiedad permite cambiar el orden en el
que se colocan las cajas hijas en el eje
indicado por la propiedad "box-orient".
Bsicamente podemos colocarlas segn el
orden de lectura del html ("normal") o al
revs de como aparecen en el orden de lectura
del html ("reverse"). Soporte en los
navegadores: Internet explorer 10 (con
prefijo de compatibilidad -ms-flex-direction)
Mozilla (con prefijo de compatibilidad -moz), Opera (con prefijo de compatibilidad -o-),
Chrome y Safari (con prefijo de
compatibilidad -webkit-).
Especifica si los elementos secundarios de
una caja son flexibles o inflexibles en cuanto
a su tamao. Los elementos que son flexibles
pueden encogerse o crecer y cuando la caja se
encoge y crece. Cada vez que hay espacio
extra en una caja, elementos flexibles se
expanden para llenar ese espacio. Soporte en
los navegadores: Internet explorer 10 (prefijo
de compatibilidad -ms-flex-) Mozilla (con
prefijo de compatibilidad -moz-), Opera (con
prefijo de compatibilidad -o-), Chrome y
Safari (con prefijo de compatibilidad -webkit-

Valor
Box
Horizontal
Vertical
Inline-axis
Block-axis

Start
End
Center
Baseline
Stretch

Normal
Reverse
Inherit

Un valor numrico
Ejemplo: 1,2,3..etc.

121

box-flex-group

box-lines

box-ordinal-group

box-pack

box-sizing

).
La propiedad box-flex-group se utiliza para
asignar grupos de elementos flexibles. Los
elementos que son flexibles pueden encogerse
o crecer. Actualmente no tiene soporte en
ningn navegador.
La propiedad box-lines especifica si las
columnas se destinarn a una nueva lnea cada
vez que se queda sin espacio en el cuadro
principal. Por defecto, una caja horizontal
expondr sus hijos en una sola fila y una caja
vertical expondr sus hijos en una sola
columna. Actualmente no tiene soporte en
ningn navegador.
La propiedad box-ordinal-grupo especifica el
orden de presentacin de los elementos
secundarios
de
una
caja.
Los elementos con un valor ms bajo se
muestran antes de los que tienen un valor ms
alto. El orden de presentacin de los
elementos con el mismo valor de grupo
depende de su orden de origen. Soporte en
los navegadores: Internet explorer 10 (prefijo
de compatibilidad -ms-flex-order) Mozilla
(con prefijo de compatibilidad -moz-),
Chrome y Safari (con prefijo de
compatibilidad -webkit-).
La propiedad box-pack especfica que los
elementos secundarios de una caja se colocan
cuando la caja principal es ms grande que el
tamao
de
los
elementos
hijos.
Esta propiedad especifica la posicin
horizontal en cajas horizontales, y la posicin
vertical en cajas verticales. Soporte en los
navegadores: Internet explorer 10 (prefijo de
compatibilidad -ms-flex-pack) Mozilla (con
prefijo de compatibilidad -moz-), Opera (con
prefijo de compatibilidad -o-), Chrome y
Safari (con prefijo de compatibilidad -webkit).
La propiedad box-dimensionamiento permite
definir ciertos elementos para adaptarse a una
superficie de una determinada manera.
Soporte en los navegadores: Mozilla (con
prefijo de compatibilidad -moz-), Opera,
Chrome, Safari e Internet explorer 10.

Un valor numrico
entero
ejemplo:
1,2,3etc.

Single
Multiple

Un valor numrico
entero ejemplo: 1, 2,
3etc.

Start
End
Center
Justify

Content-box
Border-box
Inherit

122

box-shadow

Esta propiedad permite establecer sombras a de Valor horizontal,

cajas. Soportada por todos los navegadores.
valor
vertical,
difuminacin de la
sombra
(valor
opcional), tamao
de
la
sombra
(valor opcional),
color de la sombra
(valor opcional) y
posicion
interna
(valor opcional).

Ejemplo:

Ejemplo 34:modelodecajas.html

En este ejemplo aplicamos el uso de algunas de las propiedades del nuevo modelo de cajas
flexibles de CSS3, analicemos cada una de las partes:
Parte 1: cmo podemos apreciar en este segmento del cdigo se aplica el estilizado general
a la div principal identificada como padre. Aplicamos dimensiones (ancho width y alto
height), por regla del nuevo modelo de cajas flexibles debemos asignar una posicion no
absoluta para el caso es una posicion de tipo relativa (propiedad position) al elemento
123

padre o elemento contenedor principal y definimos un borde de un pixel slido y de color

negro (propiedad border).
Parte 2: en este segmento definimos primero el tipo de visualizacin de los elementos hijos
en formato de cajas (propiedad display y su valor box), esto se realiza para 5 navegadores
distintos Opera, Chrome y Safari (display:-webkit-box;); Mozilla (display:-moz-box;) e
Internet Explorer 10 (display:-ms-flexbox;). Segundo establecemos la direccin u orden
(propiedad box-direction y su valor normal que especifica un orden ascendente) que
tomaran los elementos hijos dentro del contenedor padre, esto se realiza para 5
navegadores distintos Opera, Chrome y Safari (-webkit-box-direction: normal;); Mozilla
(-moz-box-direction: normal;) e Internet Explorer 10 (-ms-flex-direction: row-reverse;).
Parte 3: en esta parte del cdigo establecemos primero la posicin (propiedad box-pack) de
los elementos hijos dentro del elemento contenedor principal padre, esto se realiza para 5
navegadores distintos Opera, Chrome y Safari (-webkit-box-pack: center;); Mozilla
(-moz-box-pack: center;) e Internet Explorer 10 (-ms-flex-pack: center;). Segundo
definimos como los elementos hijos se alinearan (propiedad box-align) en el espacio
disponible dentro de su contenedor principal, esto se realiza para 5 navegadores distintos
Opera, Chrome y Safari (-webkit-box-align: center;); Mozilla (-moz-box-align: center;) e
Internet Explorer 10 (-ms-flex-align: center;).
Parte 4: definimos una sombra de caja para el elemento padre (propiedad box-shadow),
donde 10px es el valor horizontal, 10px es el valor vertical, 50px es la difuminacin de la
sombra (valor opcional), 20px es el tamao de la sombra (valor opcional), pink (rosado) es
el color de la sombra (valor opcional) e inset define una posicion interna de la sombra
(valor opcional).
Parte 5: en esta parte del cdigo podemos ver la aplicacin de estilo a cada una de las cajas
hijas de la siguiente forma
-

Hijo 1: color de fondo rojo y dimensiones de 50px por 50px

(style="background:red;width:50px;height:50px;").

Hijo 2: color de fondo azul y dimensiones de 100px por 100px

(style="background:blue;width:100px;height:100px;").

Hijo 1: color de fondo amarillo y dimensiones de 200px por 200px

(style="background:yellow;width:200px;height:200px;").

Resultado:

124

2.7 Otras propiedades Importantes y Nuevas

CSS3 cuenta con una serie de propiedades totalmente nuevas que mejoran el tratamiento de
elementos dentro de nuestras pginas web.
Propiedades CSS3 para bordes
Propiedades
border-bottomleft-radius
border-bottomright-radius
border-image

border-imageoutset

border-imagerepeat

border-imageslice

border-imagesource

border-imagewidth
border-radius

border-top-leftradius

Descripcin
Define la forma del borde de la esquina
inferior izquierda. Soporte en todos los
navegadores.
Define la forma del borde de la esquina
inferior derecha. Soporte en todos los
navegadores
Una propiedad abreviada para establecer los
bordes de una imagen. Soporte en los
navegadores Mozilla, Opera con prefijo
-o-, Safari con prefijo -webkit- y Chrome.

Valor
Longitud o
Un porcentaje
Longitud o
Un porcentaje

Origen|desplazamiento
interior|ancho de la
imagen de
borde|cantidad de rea
de la imagen
extendida|repeticin,
redondeo o estreches
de la imagen de borde.
Especifica la cantidad del rea de la imagen Un valor numrico
que se extiende ms all de los bordes.
Actualmente no soportada por ningn
navegador.
Especifica si la imagen de borde se debe Stretch
repetir,
redondear
o
estrecharse. Repeat
Actualmente no soportada por ningn Round
navegador.
Especifica los desplazamientos hacia el Un valor numrico
interior de la imagen respecto al lmite de la Un porcentaje
pgina. Actualmente no soportada por Fill
ningn navegador.
Especifica la ruta origen de una imagen que None
se utilizar como una imagen de borde. La ruta de la imagen a
Actualmente no soportada por ningn utilizar como borde.
navegador.
Especifica el ancho de la imagen de borde. Un valor numrico
Actualmente no soportada por ningn Un porcentaje
navegador.
Auto
Una propiedad abreviada para redondear los De 1 a 4 valores
cuatro bordes de una caja. Soportada en De 1 a 4 porcentajes
todos los navegadores.
Define la forma del borde de la esquina Un valor o longitud
superior izquierda. Soportada en todos los Un porcentaje
navegadores.
125

border-top-rightradius

Define la forma del borde de la esquina Un valor o longitud

superior derecha. Soportada en todos los Un porcentaje
navegadores.

Ejemplo border-image:

Ejemplo 35: CSS3Bordes.html

En este ejemplo vemos la aplicacin de bordes de imagen donde primero definimos un

borde comn de 15 pixeles de tipo slido y transparente, segundo establecemos las
dimensiones ancho y alto del elemento body al cual aplicamos los bordes y tercero
designamos una imagen de borde con la propiedad border-image cuyos valores definidos
son: url(border.png) es la ruta origen de la imagen a utilizar como borde, 30 es el ancho del
borde de los extremos izquierdo y derecho, 30 es el ancho del borde en los extremos
superior e inferior y stretch es la forma en que se muestra la imagen este valor podra
sustituirse por round o repeat y se mostrara de forma distinta.
IMPORTANTE: este ejemplo es compatible con los navegadores Mozilla y Chrome. Si
desea visualizarlo en Opera y Safari repita la propiedad border-image con sus valores
respectivos dos veces y anteponga los prefijos de compatibilidad -o- para Opera y webkitpara Safari.
Resultado:

126

Ejemplo border-radius:

Ejemplo 36: CSS3BorderRadius.html

En este ejemplo primero colocamos las dimensiones ancho y alto del elemento div, segundo
definimos un borde de 3 pixeles de tipo slido y de color negro y tercero redondeamos las
esquinas (propiedad border-radius) en el siguiente orden: esquina superior izquierda 5
pixeles, esquina superior derecha 5 pixeles, esquina inferior derecha 10 pixeles y esquina
inferior izquierda 10 pixeles.
Resultado:

127

Otras Propiedades de Cajas en CSS3

Propiedades
overflow-x

Descripcin
Especifica si se recortaran o no los bordes izquierdo
/ derecho del contenido si se desborda el rea de
contenido del elemento. Soportada por todos los
navegadores.

overflow-y

Especifica si se recortaran o no los bordes superior /

inferior del contenido si se desborda el rea de
contenido del elemento. Soportada por todos los
navegadores.

overflow-style

Especifica el mtodo de recorte preferido para los

elementos que se desbordan. Actualmente no
soportada por ningn navegador.

rotation

Determina el giro de un elemento en torno a un

punto determinado definido por la propiedad de
rotation-point. Actualmente no soportada por
ningn navegador.

rotation-point

Define un punto de rotacin como un

desplazamiento del borde superior izquierdo.
Actualmente no soportada por ningn
navegador.

Valor
Visible
Hidden
Scroll
Auto
No-display
No-content
Visible
Hidden
Scroll
Auto
No-display
No-content
Auto
Scrollbar
Panner
Move
Marquee
Un ngulo en
grados de 0deg a
360deg

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
porcentaje para
el eje X y
porcentaje para
el eje Y

128

Ejemplo:

Ejemplo 37: CSS3overflow.html

En el presente ejemplo comenzamos definiendo las dimensiones del elemento contenedor

div 100 pixeles de ancho y 100 pixeles de alto, luego establecemos un borde de 4 pixeles de
tipo slido y de color rojo, despus establecemos las propiedades de desbordamiento de
contenido primero en eje X y definimos que el contenido desbordado se ocultara pero podr
verse usando una barra de desplazamiento horizontal y segundo en el eje Y ocultamos por
completo el contenido desbordado, y al final aplicamos la propiedad opacity=0.9 a la
imagen incrustada dentro del elemento contenedor div para que si quitamos las propiedades
overflow-x y overflow-y se podr apreciar bajo la imagen el borde del elemento div y notar
as como la imagen es ms grande que su elemento contenedor.
Resultado:

129

Propiedades de Color CSS3

Propiedades
color-profile

opacity

rendering-intent

Descripcin
Valor
Permite la especificacin de un perfil de color de origen
distinto al predeterminado. Actualmente no existe
soporte en ningn navegador.
Ajusta el nivel de opacidad de un elemento. Soportada Un valor
numrico
en todos los navegadores
entre 0 y 1
Permite la especificacin de un perfil de color rendering
intention distinta de la predeterminada. Actualmente no
existe soporte en ningn navegador.

Ejemplo:

Ejemplo 38: Opacity.html

El elemento div con identificador uno le aplicamos los siguientes estilos: borde de 1 pixel
de tipo slido y de color negro, color de fondo amarillo, ancho de 200 pixeles y alto de 100
pixeles, posicin relativa, un espacio con respecto al borde superior de la pgina de 80
pixeles y un espacio con respecto al borde izquierdo de la pgina de 20 pixeles y un margen
interno o de relleno de 5 pixeles.

130

El elemento div con identificador dos le aplicamos los siguientes estilos: color de fondo
celeste, ancho de 200 pixeles y alto de 100 pixeles, opacidad o transparencia de 0.8, borde
de 1 pixel de tipo slido y de color negro, posicin relativa, espacio de 50 pixeles respecto
al borde izquierdo de la pgina y margen interno o de relleno de 5 pixeles.
Resultado:

Propiedades para Contenido de Medios Paginados en CSS3

Propiedades*
bookmark-label
bookmark-level
bookmark-target
float-offset
hyphenate-after
hyphenate-before
hyphenate-character
hyphenate-lines
hyphenate-resource

hyphens
image-resolution
marks
string-set

Descripcin
Especifica la etiqueta del marcador.
Especifica el nivel del marcador
Especifica el destino del enlace del marcador.
Empuja elementos flotantes en la direccin opuesta a la
que han estado ubicados de forma flotante.
Especifica el nmero mnimo de caracteres en un guion
de palabras despus de la separacin de caracteres.
Especifica el nmero mnimo de caracteres en un guion
de palabras antes de la separacin de caracteres.
Especifica una cadena que se muestra cuando se produce
una separacin silbica.
Indica el nmero mximo de lneas con guiones sucesivos
en un elemento.
Especifica una lista separada por comas de los recursos
externos que pueden ayudar al navegador determinar
puntos de separacin.
Establece cmo dividir palabras para mejorar el diseo de
los prrafos.
Especifica la resolucin correcta de las imgenes
utilizadas.
Aade las marcas transversales al documento.
-----------------------------------------------------------------

Valor*
----------------------------------------------------------------

-----------------------------

131

Propiedades Generadoras de Contenido en CSS3

Propiedades*
Descripcin
crop
Permite que un elemento reemplazado lo sea solo en un rea
rectangular de un objeto, en vez de todo el objeto.
move-to
Permite que un elemento sea removido de un flujo y reinsertado
en un punto posterior en el documento.
page-policy
Determina que ocurrencia de pgina de base de un elemento dado
se aplica a un contador o valor de cadena.

Valor*
----------------------

IMPORTANTE (*): actualmente no existe mayor documentacin de estas propiedades la

W3C an no ha finalizado de incluir el modulo correspondiente, por lo tanto solo las
mencionamos como parte del nuevo CSS3 pero an no son propiedades funcionales.
Propiedades de Grid o Cuadricula en CSS3
Propiedades
grid-columns

grid-rows

Descripcin
Especifica el ancho de cada columna en una cuadrcula.
Actualmente no soportada en ningn navegador.
Ejemplo:
div
{
grid-columns:50%
*
*
200px;
}
Establece el ancho de una columna en la cuadrcula en
el centro del elemento div, otra de 200 pxeles desde la
derecha, y otro en el centro del espacio restante.
Especifica el alto de cada columna en una cuadrcula.
Actualmente no soportada en ningn navegador.
Ejemplo:
div
{
grid-rows:100px
(30px
60px);
}
Define una cabecera de 100 pxeles y aade tantas filas
como sea necesario con alturas de 30 y 60 pxeles
alternas.

Valor
Longitud
Porcentaje
None

Longitud
Porcentaje
None

132

Propiedades de Hipervnculos en CSS3

Propiedades
target

target-name

target-new

target-position

Descripcin
Una propiedad abreviada para establecer todas las
propiedades target CSS3. Actualmente no soportada
en ningn navegador.
Ejemplo:
a
{
target:
new
front;
}
Abre todos los hipervnculos en una ventana nueva, y
coloque la nueva ventana por encima de todas las dems
pestaas / ventanas.
Especifica dnde abrir enlaces (punto de destino).
Actualmente no soportada en ningn navegador.
Ejemplo:
a
{
target-name:
new;
}
Abre todos los hipervnculos en una nueva ventana.
Especifica si los nuevos vnculos de destino deben abrir
en una nueva ventana o en una nueva pestaa de una
ventana existente. Actualmente no soportada en
ningn navegador.
Ejemplo:
a
{
target-name:
new;
target-new:
tab;
}
Abre los enlaces como nuevas ventanas en lugar de
nuevas pestanas de una ventana nueva.
Especifica la posicin que ocuparan los nuevos enlaces
de destino. Actualmente no soportada en ningn
navegador.
Ejemplo:
a
{
target-name:
new;
target-position:
front;
}
Abre todos los hipervnculos en una ventana nueva, y
coloque la nueva ventana por encima de todas las dems
pestaas / ventanas.

Valor
Target-name,
Target-new y
target position

Current
Root
Parent
New
Modal
Name

Window
Tab
None

Above
Behind
Front
Back

133

Propiedades Linebox o Lneas de Caja en CSS3

Propiedades*
alignment-adjust
alignment-baseline
baseline-shift
dominant-baseline
drop-initial-afteradjust
drop-initial-afteralign
drop-initial-beforeadjust
drop-initial-beforealign
drop-initial-size
drop-initial-value
inline-box-align
line-stacking

line-stacking-ruby
line-stacking-shift
line-stackingstrategy
text-height

Descripcin
Permite la alineacin ms precisa de los elementos.
Especifica que un elemento se alinea con respecto a su
padre contenedor.
Permite el reposicionamiento de la relacin dominante a la
lnea de base dominante.
Especifica una lnea base de escala.
Establece el punto de la cada inicial para el punto de
conexin principal de alineacin.
Establece que la alineacin dentro de la caja de lnea inicial
se utiliza en el punto de conexin principal con el cuadro
de la letra inicial.
Establece el punto de la cada inicial para el punto de
conexin secundaria de alineacin.
Establece que la alineacin dentro de la caja de lnea inicial
se utiliza en el punto de conexin secundaria con el cuadro
de la letra inicial.
Controla el hundimiento parcial de la letra inicial.
Activa un efecto de drop-initial (soltado inicial)
Establece que la lnea de un bloque multilneas se alinean
con los elementos en lnea anterior y siguiente.
Una propiedad abreviada para establecer la estrategia de
line-stacking-strategy,
line-stacking-ruby
y las
propiedades de line-stacking-shift.
Establece el mtodo de apilamiento de lnea para elementos
de bloque que contienen elementos de anotacin Ruby.
Establece el mtodo de apilamiento de lnea para elementos
de bloque que contienen elementos con base de cambio.
Establece la estrategia de apilamiento de lnea de cajas
apiladas dentro de un elemento de bloque de contencin.
Define la dimensin del bloque de progreso del rea de
contenido de texto de una caja de lnea.

Valor*
-------------------------------------------------

-----------------

---------------------------------

---------------------------------

IMPORTANTE (*): actualmente no existe mayor documentacin de estas propiedades la

W3C an no ha finalizado de incluir el modulo correspondiente, por lo tanto solo las
mencionamos como parte del nuevo CSS3 pero an no son propiedades funcionales.

134

Propiedades de Marquesina en CSS3

Propiedades*
marquee-direction
marquee-play-count
marquee-speed
marquee-style

Descripcin
Establece la direccin del movimiento de los contenidos
en la marquesina.
Establece el nmero de veces que el contenido de la
marquesina estar en movimiento.
Ajusta la velocidad de movimiento del contenido en la
marquesina.
Establece el estilo del contenido mvil dentro de la
marquesina.

Valor*
-----------------------------------------

Propiedades para Medios Paginados

Propiedades*
fit
fit-position
image-orientation
page
size

Descripcin
Permite escalar un elemento reemplazado si su ancho y su
alto es auto.
Determina la alineacin del objeto dentro de la caja.
Especifica una rotacin en la direccin correcta o las
agujas del reloj que un agente usuario aplica a una imagen.
Especifica un tipo de pgina en la que se debe mostrar un
elemento.
Especifica el tamao y la orientacin de la caja que
contiene para el contenido de la pgina.

Valor*
-----------------------------------------

Propiedades Ruby
Propiedades*
ruby-align
ruby-overhang

ruby-position
ruby-span

Descripcin
Controla la alineacin del texto Ruby y sus contenidos
bsicos.
Determina si y de qu lado el texto rub permite
parcialmente cualquier texto adyacente, adems de su
propia base, cuando el texto ruby es ms ancha que la base
ruby.
Controla la posicin del texto rub con respecto a su base.
Controla el comportamiento de la divisin de los
elementos de anotacin.

Valor*
---------------

---------------

135

Propiedades de Voz
Propiedades*
mark
mark-after
mark-before
phonemes
Rest
rest-after
rest-before
voice-balance
voice-duration
voice-pitch
voice-pitchrange
voice-rate
voice-stress
voice-volume

Descripcin
Una propiedad abreviada para establecer las marcas el antes y
el marcas despus de las propiedades.
Permite unir marcadores con nombre despus de la secuencia
de audio.
Permite unir marcadores con nombre antes de la secuencia de
audio.
Especifica una pronunciacin fontica para el texto que
contiene el elemento correspondiente.
Una propiedad abreviada para establecer las propiedades restbefore y rest-after.
Especifica un descanso o lmite prosdico que se puede
observar despus de hablar el contenido de un elemento.
Especifica un descanso o lmite prosdico que se observa antes
de hablar el contenido de un elemento.
Especifica el balance entre los canales izquierdo y derecho.
Especifica cunto tiempo debe tomar para reproducir el
contenido del elemento seleccionado.
Especifica el tono promedio (una frecuencia) de la voz que
habla.
Especifica la variacin en el tono medio.

Valor*
------------------------------------------------------------------------------

Controla la velocidad de la voz.

-------Indica la fuerza de nfasis a ser aplicada.
-------Se refiere a la amplitud de la salida de forma de onda por la voz -------sintetiza que habla.

IMPORTANTE (*): actualmente no existe mayor documentacin de estas propiedades la

W3C an no ha finalizado de incluir el modulo correspondiente, por lo tanto solo las
mencionamos como parte del nuevo CSS3 pero an no son propiedades funcionales.

136

2.8 Selectores en CSS 1, 2 y 3

En CSS los selectores son patrones utilizados para seleccionar los elementos a los cuales se
desea aplicar un estilo homogneo.
Selector
.clase

Ejemplo
.intro

#id

#miid

Elemento

elemento, elemento

div, p

elemento elemento

div p

Descripcin del ejemplo

Selecciona todos los elementos con
atributo class="intro". Procedimiento
soportado en todos los navegadores.
.intro
{
background-color: yellow;
}
Selecciona todos los elementos con
atributo id="miid". Procedimiento
soportado en todos los navegadores.
#miid
{
background-color: yellow;
}
Selecciona todos los elementos.
Procedimiento soportado en todos los
navegadores.
*
{
background-color: yellow;
}
Selecciona todos los elementos <p>.
Procedimiento soportado en todos los
navegadores.
p
{
background-color: yellow;
}
Selecciona todos los elementos <div> y
todos los elementos <p>. Procedimiento
soportado en todos los navegadores.
div, p
{
background-color: yellow;
}
Selecciona todos los elementos <p> dentro
de los elementos <div>. Procedimiento
soportado en todos los navegadores.
div p
{background-color: yellow;}

CSS
1

137

elemento>elemento

elemento+elemento

[atributo]

[atributo=valor]

[atributo ~=valor]

[atributo |=valor]

div>p

Selecciona todos los elementos <p> donde

el padre o contenedor es un elemento
<div>. Procedimiento soportado en
todos los navegadores.
div>p
{
background-color: yellow;
}
div+p
Selecciona todos los elementos <p> que se
colocan inmediatamente despus de los
elementos <div>. Procedimiento
soportado en todos los navegadores.
div+p
{
background-color: yellow;
}
[target]
Selecciona todos los elementos con un
atributo de destino. Procedimiento
soportado en todos los navegadores.
a[target]
{
background-color: yellow;
}
[target=_blank Selecciona todos los elementos con target
]
= "_blank". Procedimiento soportado en
todos los navegadores.
a[target=_blank]
{
background-color: yellow;
}
[title~=Diseo] Selecciona todos los elementos con un
atributo de ttulo contiene la palabra
"Diseo". Procedimiento soportado en
todos los navegadores.
[title~=Diseo]
{
background-color: yellow;
}
[lang|=en]
Selecciona todos los elementos con un
valor del atributo lang comenzando con
"en". Procedimiento soportado en todos
los navegadores.
[lang|=en]{background-color: yellow;}
Nota: El valor tiene que ser una palabra
completa como lang = "es", o seguido de
un guin (-), como lang = "en-us".

138

:link

a:link

:visited

a:visited

:active

a:active

:hover

a:hover

:focus

input: focus

:first-letter

p:first-letter

Selecciona todos los enlaces no visitados.

Procedimiento soportado en todos los
navegadores.
a:link
{
background-color: yellow;
}
Selecciona todos los enlaces visitados.
Procedimiento soportado en todos los
navegadores.
a:visited
{
background-color: yellow;
}
Selecciona el enlace activo.
Procedimiento soportado en todos los
navegadores.
a:active
{
background-color: yellow;
}
Selecciona el enlace que tiene encima el
puntero del ratn. Procedimiento
soportado en todos los navegadores.
a:hover
{
background-color: yellow;
}
Selecciona el elemento de entrada que
tiene el enfoque.Procedimiento soportado
en todos los navegadores.
input: focus
{
background-color: yellow;
}
Selecciona la primera letra de cada
elemento <p>. Procedimiento soportado
en todos los navegadores.
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Nota: Las siguientes propiedades se
pueden utilizar con :first-letter:

139

:first-line

p:first-line

:first-child

ul>:first-child

:before

p:before

propiedades de fuente
propiedades de color
propiedades de fondo
propiedades de los mrgenes
propiedades de relleno
propiedades de borde
text-decoration
vertical-align (slo si es float=none)
texto-transform
line-height
float
clear
Selecciona la primera lnea de cada
elemento <p>. Procedimiento soportado
en todos los navegadores.
p:first-line
{
background-color: yellow;
color: blue;
font-size: 24px;
}
Nota: Las siguientes propiedades se
pueden utilizar con :first-line:
propiedades de fuente
propiedades de color
propiedades de fondo
word-spacing
letter-spacing
text-decoration
vertical-align
texto-transformar
line-height
clear
En este ejemplo Seleccionamos y
estilizamos el primer elemento secundario
de cada elemento <ul>. Procedimiento
soportado en todos los navegadores.
ul>: first-child
{
background: LawnGreen;
border: 1px solid black;
}
Insertar contenido antes del contenido de
cada elemento <p>. Procedimiento
soportado en todos los navegadores.
p:before{content: Texto Agregado;}

140

:after

p:after

:lang(lenguaje)

p:lang(it)

elemento1~elemento2

p~ul

[atributo ^=valor]

a[src^="https"]

[atributo $=valor]

a[src$=".pdf"]

[atributo *=valor]

a[src*="videos
"]

Insertar el contenido despus de cada

elemento <p>. Procedimiento soportado
en todos los navegadores.
p:after
{
content:"Texto Agregado";
}
Selecciona todos los elementos <p> con un
atributo lang igual a "it" (italiano).
Procedimiento soportado en todos los
navegadores.
p:lang(it)
{
background: pink;
font-size: 14px;
}
Selecciona todos los elementos <ul> que
estn precedidos por un elemento <p>.
Procedimiento soportado en todos los
navegadores.
p~ul
{
background: LightBlue;
}
Selecciona todos los elementos <a> cuyo
valor del atributo src comienza con "https".
Procedimiento soportado en todos los
navegadores.
a[src^="https"]
{
border: 1px solid black;
}
Selecciona todos los elementos <a> cuyo
valor del atributo src termina con". pdf".
Procedimiento soportado en todos los
navegadores.
a[src$=".pdf"]
{
background: Red;
font-size: 14px;
border: 1px solid Blue;
}

Selecciona todos los elementos <a> cuyo

3
valor del atributo src contiene la subcadena
"videos". Procedimiento soportado en
141

:first-of-type

p:first-of-type

:last-of-type

p:last-of-type

:only-of-type

p:only-of-type

:only-child

p:only-child

:nth-child(n)

p:nth-child(2)

todos los navegadores.

a[src*="videos"]
{
background:#ffff00;
font-weight: bold;
}
Selecciona todos los elementos <p> que
son el primer elemento <p> de su
contenedor principal. Procedimiento
soportado en todos los navegadores.
p:first-of-type
{
background: rgb(245,245,220);/*color
Beige*/
}
Selecciona todos los elementos <p> que
son el ltimo elemento <p> de su
contenedor principal. Procedimiento
soportado en todos los navegadores.
p:last-of-type
{
border: 1px solid Green;
}
Selecciona todos los elementos <p> que es
el nico elemento <p> de su contenedor
principal. Procedimiento soportado en
todos los navegadores.
p:only-of-type
{
font-size: 16px;
border: double black;
}
Selecciona todos los elementos <p> que
son el nico hijo de su contenedor
principal. Procedimiento soportado en
todos los navegadores.
p:only-child
{
background: rgba(0,0,0,0.5);
color: white;
font-weight: bold;
font-size: 14px;
}
Selecciona todos los elementos <p> que
son el segundo hijo de su contenedor
principal. Procedimiento soportado en

142

:nth-last-child(n)

p:nth-lastchild(2)

:nth-of-type(n)

p:nth-oftype(2)

:nth-last-of-type(n)

p:nth-last-oftype(2)

:last-child

p:last-child

todos los navegadores.

p:nth-child(2)
{
background: Green;
font-size: 14px;
color: white;
}
Selecciona todos los elementos <p> que
son el segundo hijo de su contenedor
principal, contando desde el ltimo hacia el
primero. Procedimiento soportado en
todos los navegadores.
p:nth-last-child(2)
{
background: Green;
font-size: 14px;
color: white;
}
Selecciona todos los elementos <p> que
son el segundo elemento <p> de su
contenedor principal. Procedimiento
soportado en todos los navegadores.
p:nth-of-type(2)
{
font-size: 14px;
color: blue;
}
Selecciona todos los elementos <p> que
son el segundo elemento <p> de su
contenedor principal, contando desde el
ltimo hasta el primer elemento <p>
contenido. Procedimiento soportado en
todos los navegadores.
p:nth-last-of-type(2)
{
border: 1px solid black;
border-radius: 5px;
}
Selecciona todos los elementos <p> que
son el ltimo hijo de su contenedor
primario. Procedimiento soportado en
todos los navegadores.
p:last-child
{background: black;
font-size: 14px;
color: white;}

143

:root

:root

:empty

p:empty

:target

: target

:enabled

input: enabled

:disabled

input: disabled

Selecciona el elemento raz del documento.

Procedimiento soportado en todos los
navegadores.
:root
{
background: LightBlue;
}
Selecciona todos los elementos <p> vacos.
Procedimiento soportado en todos los
navegadores.
p:empty
{
width:100px;
height:20px;
background: blue;
}
Selecciona el elemento activo cuando es
clickeado y aplica un estilizado.
Procedimiento soportado en todos los
navegadores.
:target
{
border: 2px solid yellow;
background-color: green;
}
Selecciona todos los elementos <input>
habilitados. Procedimiento soportado en
todos los navegadores.
input: enabled
{
background:#ffff00;
}
Otro ejemplo
input[type="text"]:enabled
{
background:#ffff00;
}
En este ltimo caso estiliza solamente los
elementos input de tipo text (seleccin
basada en un atributo).
Selecciona todos los elementos <input>
deshabilitados. Procedimiento soportado
en todos los navegadores.
input: disabled
{
background:#ffff00;}

144

:checked

input: checked

:not(selector)

:not(p)

::selection

::selection

Otro ejemplo
input[type="text"]: disabled
{
background:#ffff00;
}
En este ltimo caso estiliza solamente los
elementos input de tipo text (seleccin
basada en un atributo).
Selecciona todos los elementos <input>
chequeados. Procedimiento soportado de
momento en el navegador Opera
nicamente.
input: checked
{
background: LightBlue;
}
Selecciona cada elemento que no es un
elemento <p>. Procedimiento soportado
en todos los navegadores.
:not(p)
{
background:#ff0000;
font-family: Arial, Verdana;
color: green;
}
Selecciona la porcin de un elemento que
es seleccionado por un usuario.
Procedimiento soportado en todos los
navegadores (solo en Mozilla se
antepone prefijo de compatibilidad moz-).
::selection
{
color:#ff0000;
background: blue;
}
::-moz-selection
{
color:#ff0000;
background: blue;
}

145

2.9 Fuentes y Colores de Uso Seguro en la Web

Las fuentes y los colores son ampliamente utilizados en todos los proyectos web por esa
razn los desarrolladores deben tomar en cuenta la utilizacin de fuentes y colores seguros
o compatibles con todos los sistemas.
A continuacin se presentan algunas combinaciones de fuentes de uso comn, organizado
por la familia genrica.

Fuentes Serif
font-family
Georgia, serif

Ejemplo
Este es un encabezado
Este es un prrafo

"Palatino Linotype", "Book Antiqua", Palatino,

serif

Este es un encabezado
Este es un prrafo

"Times New Roman", Times, serif

Este es un encabezado
Este es un prrafo

Fuentes Sans-Serif
font-family
Arial, Helvetica, sans-serif

Ejemplo

Este es un
encabezado
Este es un prrafo

"Arial Black", Gadget, sans-serif

Este es un
encabezado

Este es un prrafo

"Comic Sans MS", cursive, sans-serif

Este es un
encabezado
Este es un prrafo

146

Impact, Charcoal, sans-serif

Este es un encabezado
Este es un prrafo

"Lucida Sans Unicode", "Lucida Grande",

sans-serif

Este es un
encabezado
Este es un prrafo

Tahoma, Geneva, sans-serif

Este es un
ancabezado
Este es un prrafo

"Trebuchet MS", Helvetica, sans-serif

Este es un
ancabezado
Este es un prrafo

Verdana, Geneva, sans-serif

Este es un
ancabezado
Este es un prrafo

Fuentes Monospace
font-family
"Courier New", Courier, monospace

Ejemplo

Este es un
encabezado
Este es un prrafo

"Lucida Console", Monaco, monospace

Este es un
ancabezado
Este es un prrafo

147

Colores
Los colores en CSS pueden definirse utilizando un valor hexadecimal (Hex) donde los
valores mnimos y mximos son 00 y FF respectivamente, mediante una notacin RGB o
RGBA (combinacin de rojo, verde y azul, alfa su valor esta ente 0 y 1) donde los valores
pueden ir desde 0 hasta un mximo de 255 para cada color, usando una notacin HSL o
HSLA (HSL es sinnimo de matiz, saturacin y luminosidad, alfa cuyo valor est
comprendido entre 0 y 1 y representan una figura cilndrica de coordenadas de colores) sus
valores van: en matiz (H) un valor en grados desde 0 hasta 360 donde 360 es rojo, 120 es
verde y 240 es azul; la saturacin (S) es un porcentaje comprendido entro 0% y 100%
donde 0% es un tono de gris y 100% un color total; y la luminosidad (L) tambin es un
porcentaje entre 0% y 100% donde 0% es negro y 100% es blanco

A continuacin se muestra una lista de 147 colores soportados por todos los navegadores.
Color
AliceBlue
AntiqueWhite

HEX

Muestra

F0F8FF 240,248,255
FAEBD7 250,235,215

Aqua

00FFFF

Aquamarine

7FFFD4 127,255,212

Azure

F0FFFF 240,255,255

Beige

F5F5DC 245,245,220

Bisque

FFE4C4 255,228,196

Black
BlanchedAlmond
Blue

000000

0,255,255

0,0,0

FFEBCD 255,235,205
0000FF

0,0,255

BlueViolet

8A2BE2 138,43,226

Brown

A52A2A

BurlyWood

DEB887 222,184,135

165,42,42

148

CadetBlue

5F9EA0 95,158,160

Chartreuse

7FFF00

Chocolate

D2691E 210,105,30

Coral

FF7F50 255,127,80

CornflowerBlue

6495ED 100,149,237

127,255,0

Cornsilk

FFF8DC 255,248,220

Crimson

DC143C

220,20,60

Cyan

00FFFF

0,255,255

DarkBlue

00008B

0,0,139

DarkCyan

008B8B

0,139,139

DarkGoldenRod

B8860B 184,134,11

DarkGray
DarkGreen
DarkKhaki

A9A9A9 169,169,169
006400

0,100,0

BDB76B 189,183,107

DarkMagenta

8B008B

139,0,139

DarkOliveGreen

556B2F

85,107,47

Darkorange

FF8C00

255,140,0

DarkOrchid

9932CC 153,50,204

DarkRed

8B0000

DarkSalmon

E9967A 233,150,122

DarkSeaGreen

8FBC8F 143,188,143

DarkSlateBlue

483D8B

139,0,0

72,61,139

149

DarkSlateGray

2F4F4F

47,79,79

DarkTurquoise

00CED1

0,206,209

DarkViolet

9400D3

148,0,211

DeepPink

FF1493 255,20,147

DeepSkyBlue

00BFFF

0,191,255

DimGray

696969 105,105,105

DimGrey

696969 105,105,105

DodgerBlue

1E90FF 30,144,255

FireBrick

B22222

FloralWhite

178,34,34

FFFAF0 255,250,240

ForestGreen

228B22

34,139,34

Fuchsia

FF00FF

255,0,255

Gainsboro

DCDCDC 220,220,220

GhostWhite

F8F8FF 248,248,255

Gold

FFD700

GoldenRod

DAA520 218,165,32

255,215,0

Gray

808080 128,128,128

Green

008000

GreenYellow

0,128,0

ADFF2F 173,255,47

HoneyDew

F0FFF0 240,255,240

HotPink

FF69B4 255,105,180

IndianRed

CD5C5C

205,92,92

150

Indigo

4B0082

75,0,130

Ivory

FFFFF0 255,255,240

Khaki

F0E68C 240,230,140

Lavender

E6E6FA 230,230,250

LavenderBlush

FFF0F5 255,240,245

LawnGreen

7CFC00

124,252,0

LemonChiffon

FFFACD 255,250,205

LightBlue

ADD8E6 173,216,230

LightCoral

F08080 240,128,128

LightCyan

E0FFFF 224,255,255

LightGoldenRodYellow

FAFAD2 250,250,210

LightGray

D3D3D3 211,211,211

LightGreen

90EE90 144,238,144

LightPink

FFB6C1 255,182,193

LightSalmon

FFA07A 255,160,122

LightSeaGreen

20B2AA 32,178,170

LightSkyBlue

87CEFA 135,206,250

LightSlateGray

778899 119,136,153

LightSteelBlue

B0C4DE 176,196,222

LightYellow

FFFFE0 255,255,224

Lime

00FF00

0,255,0

LimeGreen

32CD32

50,205,50

151

Linen

FAF0E6 250,240,230

Magenta

FF00FF

255,0,255

Maroon

800000

128,0,0

MediumAquaMarine

66CDAA 102,205,170

MediumBlue

0000CD

0,0,205

MediumOrchid

BA55D3 186,85,211

MediumPurple

9370DB 147,112,219

MediumSeaGreen

3CB371 60,179,113

MediumSlateBlue

7B68EE 123,104,238

MediumSpringGreen

00FA9A

MediumTurquoise

48D1CC 72,209,204

MediumVioletRed

C71585 199,21,133

MidnightBlue

191970

0,250,154

25,25,112

MintCream

F5FFFA 245,255,250

MistyRose

FFE4E1 255,228,225

Moccasin

FFE4B5 255,228,181

NavajoWhite
Navy
OldLace
Olive

FFDEAD 255,222,173
000080

0,0,128

FDF5E6 253,245,230
808000

128,128,0

OliveDrab

6B8E23 107,142,35

Orange

FFA500

255,165,0

152

OrangeRed

FF4500

255,69,0

Orchid

DA70D6 218,112,214

PaleGoldenRod

EEE8AA 238,232,170

PaleGreen

98FB98 152,251,152

PaleTurquoise

AFEEEE 175,238,238

PaleVioletRed

DB7093 219,112,147

PapayaWhip

FFEFD5 255,239,213

PeachPuff

FFDAB9 255,218,185

Peru

CD853F 205,133,63

Pink

FFC0CB 255,192,203

Plum

DDA0DD 221,160,221

PowderBlue

B0E0E6 176,224,230

Purple

800080

128,0,128

Red

FF0000

255,0,0

RosyBrown

BC8F8F 188,143,143

RoyalBlue

4169E1 65,105,225

SaddleBrown

8B4513

Salmon

FA8072 250,128,114

SandyBrown

F4A460 244,164,96

SeaGreen

2E8B57

139,69,19

46,139,87

SeaShell

FFF5EE 255,245,238

Sienna

A0522D

160,82,45

153

Silver

C0C0C0 192,192,192

SkyBlue

87CEEB 135,206,235

SlateBlue

6A5ACD 106,90,205

SlateGray

708090 112,128,144

Snow

FFFAFA 255,250,250

SpringGreen

00FF7F

SteelBlue

4682B4 70,130,180

Tan
Teal
Thistle

0,255,127

D2B48C 210,180,140
008080

0,128,128

D8BFD8 216,191,216

Tomato

FF6347

255,99,71

Turquoise

40E0D0 64,224,208

Violet

EE82EE 238,130,238

Wheat

F5DEB3 245,222,179

White

FFFFFF 255,255,255

WhiteSmoke

F5F5F5 245,245,245

Yellow

FFFF00

YellowGreen

9ACD32 154,205,50

255,255,0

154