Introducción A HTML

Introduccin CSS
o d u c c i n C S S
in C S S - I n t r
Introducc
2013
ro d u c c i n C S S
Int
INTRODUCCIN CSS
Introduccin.
CSS Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de

hojas de estilo creado para controlar el aspecto de los documentos, es la mejor
forma de separar los contenidos de su aspecto, es imprescindible para crear
pginas de web profesionales, separar los contenidos y aspecto grficos
presenta muchas ventajas ya que obliga a crear documentos HTML bien
definidos y con significado completo permitiendo as, mejor accesibilidad,
reduce complejidad de su mantenimiento y permite la visualizacin del mismo
documento en diferentes dispositivos como (pc, tablets, dispositivos mviles,
etc).
Para crear una pgina web lo primero que se hace es en HTML marcar el
contenido y definir su funcionalidad, una vez listo el documento HTML se utiliza
CSS para definir el aspecto visual (colores, fuentes, distribucin, etc).
En este OVA aprenders los conceptos bsicos de CSS con todos sus elementos,
estructuras y correcta aplicacin junto a las novedades que permite la versin
CSS3.
Pag 2 Introduccin CSS

Estructura de contenidos.
Mapa de Contenido.
Desarrollo de Contenidos.
1. CSS.
1.1 Estructura CSS.

1.2 Formas de insertar CSS en un documento HTML.
1.3 Selectores.
1.4 Etiquetas de tipo BLOQUE e INLINE.
1.5 Propiedades CSS.
2. Novedades CSS3.
2.1 Compatibilidad de CSS3 con los navegadores.

2.2 Background CSS3.
2.3 Border.
2.4 Text.
2.5 Transform.
2.6 Perspectiva en CSS3.
2.7 Transiciones en CSS3.
2.8 Animaciones en CSS3.
2.9 Columnas mltiples.
2.10 Opacity.
Glosario.
Bibliografa.
Actividades de Afianzamiento.

Mapa de Contenido.
CSS
Introduccin a
Funcin de CSS en el diseo web
Comprender
Estructura CSS Integrador CSS con HTML Selectores Etiquetas Propiedades Novedades CSS3
con como tipo de como
Hojas de estilo CSS externa. Selector Universal. Bloque Inline. Tipo. Compatibilidad.
Estilo CSS incrustado. Selector de Etiqueta. Bloque. Background CSS3.
Estilos CSS inline. Selector Clase. Lista. Border.
Selector ID. Fondo. Text.
Borde. Transform.
Perspectiva en CSS3.
Transiciones en CSS3.
Animaciones en CSS3.
Columnas Mtiples.
Opacity.

Desarrollo de Contenidos.
1. CSS.
Cascading Style Sheets (Hojas de Estilo en Cascada).
Es la sigla de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un

mecanismo simple para dar estilo y diseo a los contenidos web como el tipo de
letra, color de fondo etc.
Al estructurar un sitio web, se utiliza en primer lugar el HTML para etiquetar

todo contenido dentro de la pgina: encabezados, prrafos, textos, vnculos,
imgenes, listas, etc.
Luego de tener todo el contenido debidamente estructurado y maquetado en
HTML se crea el CSS para definir las propiedades de aspecto de cada elemento
como el color, tamao de fuente, justificacin de texto, posicin, etc.
El CSS fue publicado en 1996 por la W3C, actualmente se encuentra en la

versin 3.0 en la que se pueden generar animaciones, adems de incluir ms
propiedades para modificar.
1.1. Estructuracin del CSS.
El CSS se trabaja por medio de reglas

las cuales se dividen en dos partes:
Selector= Determina a que parte del

documento HTML se le aplicar la regla.
Declaracin=Especifica la modificacin
visual que se le har al selector.
La declaracin indica cual es la

modificacin y el selector dice a quien
se le debe hacer.
En un documento HTML pueden existir
infinitas reglas CSS y la misma regla se
le puede aplicar a varios selectores y el
mismo selector puede modificarse con
diferentes reglas.

Estructura de la regla CSS:
Unin de parejas Separacin de pares
Selector { propiedad : valor ; }

Selector Declaracin
Reglas CSS
Especificacin de los trminos de la grfica.
Regla CSS: Varias reglas CSS componen una hoja de estilos CSS, las reglas se
componen por el selector y las declaraciones entre {} llaves.
Selector: indica a que elemento se le aplica la regla CSS.
Declaracin: Se compone en pareja propiedad: valor donde indica que se

modifica en el selector, una declaracin puede contener ms de una pareja
propiedad: valor separndose entre ellas por un punto y coma(;).
Propiedad: Es la caracterstica a modificar en el selector ejemplo (color),

cuando una propiedad tiene un nombre con ms de una palabra se separa por
guin (font-family).
Valor: Establece el nuevo valor de la propiedad modificada ejemplo (color:

verde).
Veamos la siguiente grfica donde se aplica una regla CSS, para aclarar
conceptos. Modificaremos en la etiqueta <p> del documento el color y la
fuente.
Propiedad Valor Propiedad Valor
p { color : #ff0000 ; font-family : Arial ; }

Selector Declaracin
Reglas CSS

1.2. Formas de insertar CSS en un documento HTML.
Existen tres maneras de utilizar el CSS en un documento Html

External style sheet(Hojas de estilos externas)
Internal style sheet(Hojas de estilos incrustadas en el HEAD)
Inline style (Estilos se definen en la etiqueta)
1.2.1. Hojas de estilos CSS externa.
Todas las reglas CSS se determinan en un archivo guardado con extensin

(.CSS), para luego ser vinculada mediante la etiqueta HTML <link>.
Un archivo CSS se puede vincular a cuantos HTML se quiera y un HTML puede
contener cuantos archivos CSS sean necesarios.
<HTML> CSS <HTML> + CSS
Los archivos CSS se vinculan en el <HEAD> del HTML de la siguiente manera:
<head>
<link rel="stylesheet" type="text/css" href="miArchivo.css" />
</head>
El archivo CSS se puede hacer en cualquier editor de texto guardndolo con

la extensin .CSS.
1.2.2. Estilos CSS Incrustados en el <head>.
Se incrustan en el <head> usando la etiqueta <style> con el atributo

type=text/css. Pero esos estilos solo funcionarn para ese documento
HTML en especfico.
<head>
<style type=text/css>
/*estilos incrustados*/
</style>
</head>

1.2.3. Estilos CSS Inline.
El estilo inline es de los menos utilizados ya que pierde muchas ventajas del
CSS, sera casi que modificar etiqueta por etiqueta similar al HTML, se debe usar
el atributo style con el que cuenta la mayora de las etiquetas y con el que se
puede hacer CSS
<p style="color:#0000ff;margin-left:20px">Este es el parrafo.</p>
1.3. Selectores.
1.3.1 Selector Universal.
El selector universal es representado por el asterisco (*), este permite crear

una regla global para todo el documento, es usado generalmente para
formatear las mrgenes y medidas que traen por defecto. Ejemplo:
*{
margin:0px;
padding:0px
}
Aunque utilizarlo es fcil, no es muy comn usarlo ya que es poco probable que
una regla sea necesaria para todos los elementos.
1.3.2. Selector de Etiqueta.
Es el ms comn a utilizar ya que todas las etiquetas HTML pueden ser

seleccionadas para su modificacin, la regla CSS se aplicar automticamente
al crear la etiqueta en el HTML.
Para aplicar este selector, solamente es necesario indicar el nombre de una

etiqueta HTML (sin los caracteres < y >).
A continuacin se aclararn los trminos con el siguiente ejemplo:
CSS Modificamos el color de la etiqueta <p>.

p {color:#FF0000;}
Nota:recordemos que en CSS al utilizar una etiqueta de
selector slo indicamos el nombre de la etiqueta sin los
smbolos <>.

Luego en el documento HTML al usar la etiqueta <p> en cada prrafo ya estar
la modificacin del color que se aplic en la regla CSS.
Los selectores se pueden agrupar en el caso de que se quiera aplicar la misma

regla a varios elementos.
h1{color:#0000ff;}
h2{color:#0000ff;}
h3{color:#0000ff;}
h4{color:#0000ff;}
Lo anterior se podra resumir agrupando selectores separndolos con una

coma(,)
h1,h2,h3,h4{color:#0000ff;}
1.3.3. Selectores de clase.
permite crear una regla con el nombre que se quiera (teniendo en cuenta de no
utilizar , tildes, caracteres especiales o dejar espacio entre palabras), la clase
debe ser aplicada explcitamente en una etiqueta.
La especialidad de las clases es que se puede aplicar solo a un elemento o a

varios si es necesario.
Para crear una clase se utiliza como prefijo el punto (.)
.resaltado { color:#FF0000; }
Luego para aplicarla se llama a travs del atributo class que contienen la
mayora de las etiquetas.
<p class=resaltado> este prrafo a diferencia de los otros esta

resaltado</p>
<p>este prrafo vuelve a ser normal</p>
<p class=resaltado> este otro prrafo vuelve a estar
resaltado</p>

1.3.4. Selectores ID.
son reglas aplicables slo a un elemento del HTML, que se aplican a un elemento
que tenga el identificador (ID).
El selector de ID permite seleccionar un elemento de la pgina a travs del valor

de su atributo id; el valor del id es el nombre que usted le da; en un
documento HTML no pueden existir etiquetas con el mismo nombre de ID.
La forma de crear un Selector ID es similar a las clases, solo que el prefijo es el

numeral (#) en vez del punto (.)
Para crearlo es as
#cuadro { widht : 200px; }
Para usarla:
<p id=cuadro> Hola </p>
1.4. Etiquetas de tipo Block e Inline.
En HTML existen dos formas de identificar ciertas etiquetas los elementos de

bloque (block) y los elementos en lnea (inline).
Elementos Bloque: la principal caracterstica es que son mostrados con un salto

de lnea antes y despus. Tambin pueden tener anidados otros elementos de
bloque y/o elementos en lnea.
Etiquetas Bloque ms comunes: <p>, <ul>, <ol>, <h1-h6>, <fieldset>,

<hr>, <div> entre otras.
Elementos en Lnea: son mostrados en el lugar que aparecen en el flujo del

texto, los elementos en lnea slo deberan tener anidados otros elementos en
lnea.
Etiquetas Inline ms comunes: <a>, <br>, <span>, <img>, <tt>, <i> ,<b>
entre otras.
Nota: Esta diferencia no es tan marcada en HTML5.

Ejemplo de aplicacin HTML Y CSS.
Vamos a aplicar un estilo CSS incrustado con cada uno de los selectores.
<html>
<head>
<title>Mi primer CSS</title>
<style type="text/css">
h1{color:#F00;}
p{color:#006600;}
.textoAzul{color:#0033CC;font-family:Arial;}
#textoNaranja{color:#FF6600;}
</style>
</head>
<body>
<h1>Este encabezado es de color Rojo</h1>
<p>El color de este texto es verde</p>
<p class="textoAzul">yo soy de color azul y fuente Arial que
provienen de una clase</p>
<p id="textoNaranja">yo tengo el texto naranja por una regla de
un selector ID</p>
</body>
</html>
1.5. Propiedades CSS.
Propiedades de texto CSS cuenta con una gran cantidad de propiedades para
modificar la apariencia del texto, se pueden dividir en dos, de tipo y bloque.
1.5.1 Propiedades de tipo.
FONT-FAMILY: Modifica el tipo de letra.
FONT-WEIGHT: Establece el grosor de la tipografa.
FONT-VARIANT: Estilo alternativo de letra.
FONT-SIZE: Establece el tamao de la fuente.
FONT-STYLE: Establece el estilo de la fuente.

COLOR: Modifica el color de texto.
TEXT-DECORATION: Implementa una decoracin en el texto.
LINE-HEIGHT: Especifica el alto de lnea.
TEXT-TRANSFORM: Controla la capitalizacin de texto.
FONT-FAMILY:
Especifica la tipografa a utilizar por el documento.
La propiedad font-family puede tener varios valores como una especie de

reserva por si el navegador no identifica la primera fuente, cambiar el texto por
la segunda fuente, el nombre de la fuente se separa por comas (,).
Es recomendable empezar como valor la fuente deseada y al final dejar una

fuente genrica.
Si el nombre de la fuente tiene ms de dos palabras esta se escribe entre

comillas.
Ejemplo:
p{font-family:Georgia,"Times New Roman", Times, serif;}
Si el navegador no interpreta a Georgia la fuente cambiar a Times New Roman

e ir pasando hasta la fuente final.
Esta es la lista de las fuentes ms utilizadas.
font-family: Arial, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;

FONT-WEIGHT:
Establece el grosor de la tipografa segn los siguientes valores: normal, bold,

bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit.
Ejemplo:
p{font-weight:800;}
FONT-VARIANT:
esta propiedad tiene dos valores normal y small-caps.
Normal: es el valor que trae por defecto.
Small-caps: Convierte la tipografa que est en minscula a mayscula y si

estuviera en mayscula la hace un poco ms grande.
Ejemplo:
p{font-variant:small-caps;}
FONT-SIZE:
Establece el tamao de la fuente

especificando el valor numrico o
colorHexadecimal{color:#0099CC;}
colorIngles{color:red;}
colorRgb{color:rgb(0,255,0);}
el valor en texto:
Valores texto: small, medium,

large, x-large, xx-large, x-small,
xx-small, larger, smaller.
Valores numricos: A los valores

numricos se les puede
especificar el tamao de la
unidad (en Pixeles (px),
Porcentaje (%), puntos (pt) y
emes (em)).

Ejemplo:
p{font-size:9px;}
Muestras:
Nota: es ideal manejar los tamaos de importancia de texto con la ayuda de las
etiquetas <h1-6> y <p>antes de entrar a modificar el font-size.
FONT-STYLE:
Modifica el estilo de presentacin de la fuente sus posibles valores normal, italic,

oblique:
Normal: Valor por defecto.
Italic: Texto en itlica.
Oblique: Oblicuo, este es muy similar a la itlica.
Ejemplo:
p{font-style:italic;}
COLOR:
cambia el color de texto segn el valor, los valores se pueden ingresar de tres
formas: Nombre en ingls, hexadecimal o los valores en rgb.

Ejemplo:
colorHexadecimal{color:#0099CC;}
colorIngles{color:red;}
colorRgb{color:rgb(0,255,0);}
TEXT-DECORATION:
Establece la decoracin del texto ya sea subrayado, tachado, parpadeante, con

una lnea superior y ninguna decoracin.
Los valores son los siguientes: none, underline, overline, line-through, blink.
Ejemplo:
p{text-decoration:blink;}
a{text-decoration:none;}
LINE-HEIGHT:
Modifica el alto de lnea de texto segn el valor suministrado, el cual se puede

especificar con nmeros, nmeros y la medida en (px,pt,%,em).
Si se pone como valor normal regresa al alto de lnea por defecto.
Ejemplo
p{line-height:30px;}
TEXT-TRANSFORM:
Modifica la capitulacin del texto segn el valor.
Los valores son:
none: Valor por defecto.

capitalize: Transforma la primera letra de cada palabra en mayscula

uppercase: Transforma todos los caracteres en maysculas.
lowercase: Transforma tolos los caracteres a minscula.
Ejemplo:
p{text-transform:lowercase;}
- EJERCICIO DE APLICACIN CSS.
Crear una clase por propiedad anteriormente vista y luego aplicarlas en

prrafos de texto.
Ejemplo de una aplicacin.
<html>
<head>
<title>Ejecicio de tipos</title>
.textoTachado{text-decoration:line-through;}
</style>
</head>
<body>
<p class="textoTachado">este texto esta tachado</p>
</body>
</html>
1.5.2. Propiedades de Bloque.
WORD-SPACING: Especifica el espacio en blanco entre palabras.
LETTER-SPACING: Especifica el espacio en blanco entre letras.
VERTICAL-ALIGN: Establece la alineacin vertical de un elemento.
TEXT-ALIGN: Especifica la alineacin horizontal del texto en un elemento.
TEXT-INDENT: Especifica la sangra de la primera lnea en un texto de

bloque.
DISPLAY: Define como cierto elemento de HTML que se debe mostrar.

WORD-SPACING:
Esta propiedad aumenta o disminuye el espacio en blanco entre las palabras

segn el valor que tenga.
El valor se especifica por medio de nmeros y sus unidades en (px,pt,cm,em).
Ejemplo:
p{word-spacing:10px;}
LETTER-SPACING:
La propiedad letter-spacing aumenta o disminuye el espacio en blanco entre las

letras segn el valor que tenga.
El valor se especifica por medio de nmeros y sus unidades en (px,pt,cm,em).
Ejemplo:
p{letter-spacing:4em;}
VERTICAL-ALIGN:
Establece la alineacin vertical de un

elemento segn su valor tomando como
referencia el contenedor del elemento.
Sus posibles valores son:
Longitud en nmeros: nmeros y sus

unidades en (px,%,cm,em).
Baseline: Alinear la lnea base del

elemento con la base del elemento
padre.
Sub: Alinea el elemento como lo fue

el subndice.

Super: Alinea el elemento como lo fue el superndice.
Top: La parte superior del elemento se alinea con la parte superior del
elemento ms alto en la lnea.
Text-top: La parte superior del elemento se alinea con la parte superior de

la fuente del elemento padre.
Middle: El elemento se pone en el centro del elemento primario.
Bottom: La parte inferior del elemento est alineado con la parte inferior
de la fuente del elemento padre.
Text-bottom: La parte inferior del elemento est alineado con la parte

inferior de la fuente del elemento padre.
Ejemplo:
p{vertical-align:30px;}
TEXT-ALIGN:
Define la justificacin del texto segn su valor.
Los posibles valores son: left, right, center y justify.
Ejemplo:
p{text-align:justify;}
TEXT-INDENT:
especifica la sangra de la primera lnea en un texto de bloque segn su valor en

nmeros y sus unidades en (px,%,cm,em,pt).
Ejemplo
p{text-indent:50px;}

WHITE-SPACE:
Controla los espacios en blanco de un texto segn sus valores.
Los valores que maneja son estos.
Normal: comportamiento por defecto.
Pre: se respetan los espacios en blanco y las nuevas lneas. Si la lnea es

muy larga, se sale del espacio asignado para ese contenido.
Nowrap: elimina los espacios en blanco y las nuevas lneas. Si la lnea es

muy larga, se sale del espacio asignado para ese contenido.
Pre-wrap: se respetan los espacios en blanco y las nuevas lneas, pero

ajustando cada lnea al espacio asignado para ese contenido.
Pre-line: elimina los espacios en blanco y respeta las nuevas lneas, pero
ajustando cada lnea al espacio asignado para ese contenido.
Ejemplo:
p{white-space:pre-line;}
DISPLAY:
Cambia el comportamiento del elemento HTML, segn lo indique el valor.
Entre sus valores ms utilizados son:
inline: El elemento se comporta como uno de tipo Inline.
block: El elemento se comporta como uno de tipo bloque.
list-item: Se muestra el elemento como un tem de lista.
none: El elemento Html no se muestra en pantalla.
Ejemplo
p{display:none;}

- EJERCICIO DE APLICACIN CSS
Crear una clase por propiedad anteriormente vista y luego aplicarlas en

prrafos de texto.
<html>
<head>
<title>Texto en CSS </title>
.separaLetras{letter-spacing:15px;}
.separaPalabras{word-spacing:30px;}
</style>
</head>
<body>
<p class="separaLetras">Las letras estan separadas en este
parrafo</p>
<p class="separaPalabras">en este parrafo las palabras estan
separadas</p>
</body>
</html>
1.5.3. Propiedades de lista.
LIST-STYLE-TYPE: especifica el tipo de marcador de tems de lista en una

lista.
LIST-STYLE-IMAGE: especifica la imagen de vieta.
LIST-STYLE-POSITION: especifica si la vieta es interior o exterior de la

caja de contenido.
LIST-STYLE-TYPE:
Especifica el estilo de vieta que tendr la lista segn el valor indicado.
Los posibles valores son:

None: No muestra ninguna vieta en la lista.
Valores grficos:
Disc: Muestra un crculo relleno, este es el valor por defecto del <ul>.
Circle: Muestra un crculo sin relleno.
Square: Muestra un pequeo cuadro.
Valores numricos:
Decimal: El marcador de vieta es un nmero, es el valor por defecto del

<ol>.
Decimal-leading-zero: El marcador de vieta es un numero con un cero a

la izquierda (01,02,03,etc).
Lower-roman: El marcador es la menor romana (i, ii, iii, iv, v, etc.).
Upper-roman: El marcador es la mayor romana (I, II, III, IV, V, etc.).
Armenian: EL marcador es la numeracin armenia.
Georgian: El marcador es la numeracin georgiana.
Hebrew: El marcador es la numeracin Hebrea.
Hiragana: El marcador es la numeracin Hiragana.
Katakana: El marcador es la numeracin Katana.
I, II, III, IV, V, VI, VII,

Valores alfanumricos:
Upper-latin: El marcador son caracteres latinos en mayscula.
Lower-alpha: El marcador son caracteres alfabticos en minscula.
Lower-greek: El marcador son caracteres griegos.
Lower-latin: El marcador son caracteres latinos en minscula.
Upper-alpha: El marcador son caracteres alfabticos en mayscula.
Ejemplo.
ol{list-style-type:lower-alpha;}
LIST-STYLE-IMAGE:
Permite reemplazar las vietas estandarizadas por una imagen personalizada,

indicando como valor la ruta de la imagen.
Item 1
Item 2
Item 3
Ejemplo:
ol{list-style-image:url(estrella.gif);}
LIST-STYLE-POSITION:
Muestra las vietas en la parte exterior o inferior segn el valor indicado.
Inside: Vieta interior.
Outside: Vieta Exterior.

Outside: botn 1 Inside: botn 1
botn 2 botn 2
botn 3 botn 3
Ejemplo.
ul{list-style-position: inside;}
- EJERCICIO DE APLICACIN CSS
Crear una clase por propiedad anteriormente vista y luego aplicarlas en listas
diferentes.
<html>
<head>
<title>listas en CSS </title>
.armenia{list-style-type:armenian;}
.katana{list-style-type:katakana;}
</style>
</head>
<body>
<h3>lista armenia </h3>
<ul class="armenia">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h3>lista Katana</h3>
<ul class="katana">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</body>
</html>

1.5.4. Propiedades de Fondo.
BACKGROUND-COLOR: Define el color de fondo de un elemento HTML.
BACKGROUND-IMAGE: Define la imagen de fondo de un elemento

HTML.
BACKGROUND-REPEAT: Controla el tipo de repeticin de la imagen de

fondo.
BACKGROUND-ATTACHMENT: Controla si la imagen de fondo se mueve

o permanece fija cuando se hace scroll en la ventana del navegador.
BACKGROUND-POSITION: Controla la posicin de la imagen de fondo.
BACKGROUND-COLOR:
Define el color de fondo de la mayora de los elementos HTML segn el valor.
Las 3 formas ms utilizadas para indicar el color son:

body{background-color:#006633;}/*hexadecimal*/
h3{background-color:red;}/*nombre en ingls*/
ul{background-color:rgb(13,255,0);}/*valor en rgb*/
Ejemplo:
p{background-color:#446633;}
BACKGROUND-IMAGE:
Establece una o varias imgenes de fondo en un elemento HTML.
El fondo de un elemento es el tamao total del elemento, incluido el relleno y el

borde (pero no la margen) Ver Modelo de Cajas.
Por defecto, una imagen de fondo se ubica en la esquina superior izquierda de

un elemento, y se repite tanto vertical como horizontalmente.
Ejemplo: Si la imagen de fondo es ms grande que el contenedor.

Imagen Original. Contenedor background-image: url(imagen.jpg);
Imagen Original. Contenedor background-image: url(imagen2.jpg);
Ejemplo: Si la imagen es ms pequea que el contenedor.

Imagen Original. Contenedor background-image: url(imagen.jpg);
Imagen Original. Contenedor background-image: url(imagen2.jpg);

background-image utiliza como valor la url del sitio donde se encuentra la
imagen.
Ejemplo:
body{background-image:url(foto.png);}
BACKGROUND-REPEAT:
Controla el tipo de repeticin de la imagen de fondo segn el valor, solo se puede

determinar uno de los siguientes valores.
repeat: Valor por defecto, repite la imagen en X y Y.
repeat-x: Repite la imagen solo en el eje X.
repeat-y: Repite la imagen solo en el eje Y.
no-repeat: No repite la imagen ni en x o en y .
Ejemplo de uso:
Imagen repitindose en x en el contenedor.
Imagen Original. Contenedor la imagen se repite en X
body{
background-image:url(nube.jpg);
background-repeat: repeat-x;
}

Imagen repitindose en Y en el contenedor.
body{
background-repeat:repeat-y;
}
Imagen no-repeat
body{
background-repeat: no-repeat;
}
Ejemplo:
body{background-repeat: repeat-x;}

BACKGROUND-ATTACHMENT:
Controla si la imagen de fondo se mueve o permanece fija cuando se hace scroll

en la ventana del navegador.
Sus valores son.
Fixed: El fondo permanece esttico, aunque se desplace el contenido de la

pagina.
Scroll: Valor por defecto, la imagen de fondo se desplaza con el scroll de la

pgina.
Ejemplo:
body{
background-image:url(dracula.jpg);
background-attachment:fixed;
}
BACKGROUND-POSITION:
Controla la posicin de la imagen de fondo, segn el valor.
Left top: posiciona la imagen en la parte superior izquierda.
Left center: posiciona la imagen en la parte izquierda y al medio.
Left bottom: posiciona la imagen en la parte inferior izquierda.
Right top: posiciona la imagen en la parte superior derecha.
Right center: posiciona la imagen en la parte derecha y al medio.
Right bottom: posiciona la imagen en la parte inferior derecha.
Center top: posiciona la imagen en la parte central superior.
Center center: posiciona la imagen en la parte central en el medio.

Center bottom: posiciona la imagen en la parte central inferior.
Ejemplos grficos:
Left top. Left center. Left bottom.
Right top. Right center. Right bottom.
Center top. Center center. Center bottom.
Tambin se pueden pasar los valores por coordenadas en (Pixeles px o

Porcentajes %) donde el primer valor ser la posicin horizontal y el segundo
valor la posicin vertical.
Ejemplo:
body
{
background-image:url('bola.gif');
background-repeat:no-repeat;
background-position: 10px 200px;
}
Posicin Horizontal (x). Posicin Vertical (y).

1.5.5. Propiedades de Cuadro.
WIDTH: Define el ancho del elemento HTML.
HEIGHT: Define el alto del elemento HTML.
MARGIN: Especifica las mrgenes del elemento HTML.
PADDING: Especifica el relleno del elemento HTML.
BORDER: Especifica el borde del elemento HTML.
FLOAT: Posiciona un elemento HTML de forma flotante.
CLEAR: No reconoce elementos flotantes.
WIDTH:
Define el ancho de los elementos html tomando como valor la media en (Pixel,
Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo
calcula de manera automtica.
Ejemplo:
p{width:300px;}
HEIGHT:
Define el alto de los elementos html tomando como valor la media en (Pixel,
Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo
calcula de manera automtica.
Ejemplo:
p{height:300px;}
Ejemplo combinando width y height:

p{
width:100px; Este es un
height:100px; prrafo con
background-color:#00CC33; ancho y alto.
}
MARGIN:
Define la margen de los elementos HTML tomando como valor la media en

(Pixel, Picas, Porcentaje, Emes, Equis, etc).
La margen se puede especificar de diferentes formas, si coloca un solo valor la

margen es global, es decir para todos los lados del elemento.
{margin:100px;} 100px
100px Elemento HTML 100px
100px
Tambin se puede especificar cunto de margen se quiere en cada lado, dndole

los valores en el orden de las manecillas del reloj, empezando desde las 12
(arriba, derecha, inferior, izquierda).
40px
{margin:40px 50px 70px 30px;}
Elemento HTML
Superior. Derecha. Inferior. Izquierda. 30px 50px
70px

Existen otras propiedades para modificar la margen del elemento HTML.
Margin-top: Especifica la margen superior del elemento segn el valor en (Pixel,

Picas, Porcentaje, Emes, Equis, etc).
Margin-right: Especifica la margen derecha del elemento segn el valor en

Margin-bottom: Especifica la margen inferior del elemento segn el valor en

Margin-left: Especifica la margen izquierda del elemento segn el valor en

Ejemplo:
p{
margin-left:30px;
margin-right:45px;
margin-bottom:50px;
margin-top:90px;
}
PADDING:
Define el relleno de los elementos HTML tomando como valor la media en (Pixel,
Elemento HTML Elemento HTML

sin Padding. con Padding.
El padding aumenta el ancho y el alto del elemento HTML.
El padding (relleno) se puede especificar de diferentes formas, si coloca un solo

valor el relleno ser global, es decir para todos los lados del elemento.

20px
{padding:20px;} Elemento HTML
con 20 px Padding.
20px
20px
20px
Tambin se puede especificar cunto de relleno se quiere en cada lado, dndole

los valores en el orden de las manecillas del reloj empezando desde las 12
(arriba, derecha, inferior, izquierda).
10px
{padding:10px 40px 30px 70px;} Elemento HTML
con Padding.
70px 40px
30px
Existen otras propiedades para modificar el padding del elemento HTML.
Padding-top: Especifica el relleno superior del elemento segn el valor en (Pixel,

Padding-right: Especifica el relleno derecha del elemento segn el valor en

Padding-bottom: Especifica el relleno inferior del elemento segn el valor en

Padding-left: Especifica el relleno del elemento segn el valor en (Pixel, Picas,

Porcentaje, Emes, Equis, etc).
Ejemplo:
.caja{
padding-top:10px;
padding-left:45px;
padding-right:33px;
padding-bottom:50px;
}

BORDER :
Define el borde de un elemento HTML especificndole el color, estilo y tamao

del borde separados por un espacio, en caso que no especifique alguno de los
tres valores, CSS le dar un valor por defecto, el tamao del borde aumenta el
alto y ancho del elemento HTML.
Ejemplo:
Grosor. Color. Estilo de Borde.
p{border:5px #006666 solid;}
Prrafo con borde.
Si no se declaran algunos de los valores, CSS lo pondr por defecto.
En el siguiente ejemplo pondr el valor de tamao de manera automtica.
Color. Estilo de Borde.
p{border:#FF0000 solid;}
Prrafo con borde.
El valor por defecto de color es el negro y el del

estilo de borde es none.
Valores de estilo de borde:
-None: No se muestra ningn borde.
-Hidden: Esconde los bordes, su visualizacin en

el navegador es muy parecida al none.
-Dotted: Borde punteado alrededor del cuadro.
-Dashed: Borde discontinuo.
-Solid: Borde continuo, formado por una lnea

recta continua.

-Double: Borde doble, formado por dos lneas rectas continuas separadas entre
s por un espacio en blanco.
-Groove: Borde hundido, en la interfaz de usuario parece que se encuentra por

debajo del nivel de la superficie de la pantalla.
-Ridge: Borde saliente, en la interfaz de usuario parece saldr del nivel de la

pantalla.
-Inset: Borde hundido, hacer parecer al elemento que tiene el borde como si
estuviera por debajo del nivel normal de la pantalla.
-Outset: Borde saliente, hacer parecer al elemento que tiene el borde como si
estuviera por encima del nivel normal de la pantalla.
CSS tiene otras propiedades que permiten modificar el borde de manera ms

segmentada.
Border-style: Define el estilo de borde segn el valor (none, solid, inset, ouset,
dotte, etc).
Border-color: Define el color del borde segn el valor; se pueden pasar los
valores en: Ingles, valor RGB o Hexadecimal.
Border-widht: Define el ancho de borde segn el valor, este se puede pasar en

medidas (px, em, pt, etc) o con valores predeterminados:
Thin: lnea delgada.

Medium: lnea mediana.
Thick: lnea gruesa.
Otras propiedades de borde en CSS.
-Border-left: Define el borde del -Border-right: Define el borde del

elemento HTML solo en el lado elemento HTML solo en el lado
izquierdo. derecho.
-Border-top: Define el borde del -Border-bottom: Define el borde del

elemento HTML solo en el lado elemento HTML solo en el lado
superior. inferior.

-Border-left-style: Define el estilo de -Border-top-style: Define el estilo de
borde solo en el lado izquierdo. borde solo en el lado superior.
-Border-left-color: Define el color de -Border-top-color: Define el color de

borde solo en el lado izquierdo. borde solo en el lado superior.
-Border-left-width: Define el ancho -Border-top-width: Define el ancho

de borde solo en el lado izquierdo. de borde solo en el lado superior.
-Border-right-style: Define el estilo -Border-bottom-style: Define el

de borde solo en el lado derecho. estilo de borde solo en el lado inferior.
-Border-right-color: Define el color -Border-bottom-color: Define el color

de borde solo en el lado derecho. de borde solo en el lado inferior.
-Border-right-width: Define el ancho -Border-bottom-width: Define el

de borde solo en el lado derecho. ancho de borde solo en el lado
inferior.
FLOAT:
En Html los elementos se van presentado en un mismo flujo uno tras otro, lo que
hace la propiedad float es sacarlo de este flujo y ponerlo a flotar segn el valor
especificado.
Valores float:
Left: Flota el elemento HTML a la izquierda.
Right: Flota el elemento HTML a la derecha.
None: No flota el elemento HTML.
Ejemplo float.
Float.

Al decirle al elemento amarillo que flote, sale del flujo normal y el azul pasa a
ocupar su posicin, no se alcanza a ver porque el amarillo queda sobre el.
Supongamos que se mira desde otro punto de vista.
Vista lateral.
Float.
CLEAR:
Cuando un elemento esta flotando el siguiente en el flujo pasa a ocupar su lugar,

el clear no permite que esto ocurra. Tiene los siguientes valores:
Left: no ocupa el lugar de otro elemento que este flotando a la izquierda.
Right: no ocupa el lugar de otro elemento que este flotando a la derecha.
Both: no ocupa el lugar de otro elemento sin importar para donde este flotando.
Float.
Clear. Clear.

2. Novedades CSS 3.
CSS 3 es una actualizacin de la versin del lenguaje CSS, que permite crear
diseos ms dinmicos y elaborados, ofrece ms soporte a diferentes
necesidades web.
EL CSS 3, trae nuevos mecanismos y propiedades que permiten un mayor

control de la parte grfica por parte del programador, sin tener que utilizar
Hacks o trucos.
Con CSS3, se pueden crear bordes redondeados, aadir sombra a los diferentes
elementos, utilizar una imagen como borde, etc.
En este documento se vern las nuevas propiedades y herramientas de CSS

tales como:
Fondos y bordes.
Modelado de cajas.
Aplicaciones de texto.
Transformaciones 2d y 3d.
Animaciones.
Mltiples capas.
Interfaz de Usuario.
Selectores.
Nota: La forma de aplicar el CSS sobre el HTML no cambia en absoluto, el CSS3

tan solo es una actualizacin del lenguaje CSS.
2.1. Compatibilidad de CSS3 con los navegadores.
Cuando el CSS3 se estableci muchas de sus propiedades no eran compatibles

con los navegadores, para solucionar esto se crearon unos prefijos para ayudar
al navegador a soportar las nuevas propiedades.

-moz- para Mozilla.
-webkit- para Chrome y Safari.
-o- para Opera.
-ms- Microsoft Explorer.
Claro que la rpida actualizacin de los navegadores, hace que estos prefijos no
sean necesarios, igual es recomendable manejarlos porque muchos usuarios no
cuentan con la ltima actualizacin de los navegadores.
Ejemplo de uso del prefijo.
border-radius:25px;
-moz-border-radius:25px
Simplemente se especifica la propiedad y luego se vuelve a especificar pero esta

vez con el prefijo del navegador al que le quiero dar soporte.
En la actualidad los ltimos navegadores soportan la gran mayora de las

propiedades CSS3.
2.2. Background CSS3.
Nuevas propiedades de manejo de fondos.
Multiples fondos en CSS.
Background-origin.
Background-clip.
Background-size.
2.2.1. Multiples fondos en CSS.
CSS3 permite poner varias imgenes de fondo en un mismo contenedor, a

travs de la propiedad background o background-image, solo se tienen que
escribir los valores de las diferentes imgenes y luego separarla por comas(,).

Es decir se llama una imagen y se especifica su comportamiento, luego
separamos con una coma (,) y se llama la otra imagen.
Ejemplo : se utilizarn dos imgenes como fondo en el body.
Imagen 1 (avion.png) Imagen 2 (nubes_h.png)
Cdigo CSS:
Imagen 1.
body{
background:url(avion.png) top right no-repeat,
url(nubes_h.png) repeat-x;
}
Imagen 2.
Resultado Navegador:
Nota: Las imgenes que se van vinculando se ubican de modo que la primera
aparece sobre las siguientes, por eso la imagen de la paloma esta sobre las
nubes.

2.2.2. Background-origin.
La propiedad background-origen especifica el rea de posicionamiento de las

imgenes de fondo.
La imagen de fondo puede ser ubicada dentro del contenido, el padding, o el

border del elemento contenedor.
Border.
Padding.
Contenido.
Sus posibles valores son
Border-box : La imagen se ubica desde el borde.
Padding-box : La imagen se ubica desde el padding de la pagina.
Content-box: La imagen se ubica desde el contenido.
Ejemplo Cdigo:
#caja{
width:245px;
height:164px;
background-color:#999999;
padding:30px;
background-image:url(escenario.jpg);
border:10px dotted #000;
background-origin:content-box;
}

VISTA EN EL NAVEGADOR.
2.2.2. Background-clip.
Especifica el rea de pintura del contenedor creando una algo similar a una
mscara sobre l, la nica parte del elemento que no se recorta es el borde.
Border-box : el color de fondo se pinta desde el borde.
Padding-box : el color de fondo se pinta desde el padding.
Content-box: el color de fondo se pinta desde el contenido.
Nota: Si se tiene una imagen con origen posicionada en el borde y se hace un

clip al contenido, la imagen se recortar.
Ejemplo:
#caja{
width:245px;
height:164px;
padding:30px;
background-image:url(escenario.jpg);
border:10px dotted #000;
background-clip:content-box;
background-origin:border-box;
}

VISTA EN EL NAVEGADOR.
2.2.3. Background-size.
Background-size: Medida / porcentaje / cover / contain;

Especifica el tamao de la imagen de fondo segn el valor de la propiedad.
El valor del tamao se puede especificar con las medida web, porcentajes o los
valores predeterminados de background-size como son el cover y el contain.
MEDIDAS WEB.
PORCENTAJES.
COVER.
CONTAIN.
MEDIDAS WEB Y PORCENTAJES:
se pueden especificar las medidas de dos maneras:
Background-size:50px; si se especifica un solo valor este se tomara para ambos

(Ancho y Alto).

Background-size:50px 200px; Si se
especifican dos valores, el primer valor
es el Ancho de la imagen y el segundo
valor es el Alto.
Los porcentajes se aplican de igual

manera, solo debemos tener en cuenta
que el porcentaje ser tomado con base
en el contenedor del background-image.
COVER:
Escala la imagen al tamao necesario

para cubrir todo el contenedor donde se
est especificando el background-image.
CONTAIN:
Escala la imagen al tamao necesario

para que pueda verse completa en el
contenedor que se est especificando el
background-image.
2.3. Border.
Nuevas propiedades de manejo de borde.
Border-radius.
Border-image.
Box-shadow.
2.3.1. Border-radius.
border-radius: medida| porcentaje;
El border-radius permite crear elementos de bordes redondeados, su forma de

uso es fcil solo se debe poner como valor de la propiedad una medida o
porcentaje.

Los valores de border-radius se pueden determinar de dos formas:
Si se especifica un solo valor, este ser equivalente a los 4 lados. border-

radius:10px;
Ejemplo:
#div{
width:150px;
height:100px;
border-radius:10px; /*esto crea un radio de borde de 10px para
todos los lados */
padding:5px;
color:#FFFFFF;
}
Vista navegador:
El div tiene bordes redondos.
Especificar el valor de radio lado por lado, estos valores se dan en el siguiente
orden (superior izquierda, superior derecha) luego (inferior izquierda, inferior
derecha).
border-radius:10px 5px 35px 60px;

ejemplo
#div{
width:150px;
height:100px;
border-radius:10px 5px 35px 60px;
padding:5px;
color:#FFFFFF;
}
Vista navegador:

El div tiene bordes redondos diferentes.
Propiedades especficas para modificar el de border-radius.
border-top-left-radius: Modifica el borde superior izquierdo.
border-top-right-radius: Modifica el borde superior derecho.
border-bottom-right-radius: Modifica el borde inferior derecho.
border-bottom-left-radius: Modifica el borde inferior izquierdo.
2.3.2. Border-image.
Define una imagen como borde del elemento, a la fecha de la creacin de este
documento (2012), solo el navegador GOOGLE CHROME es compatible para el
uso de esta propiedad.
MOZILLA, SAFARI Y OPERA, necesitan el prefijo para ser compatible.
EXPLORER, no soporta el border-image.
Nota: los navegadores estn en constantes actualizaciones, revise s ya la

propiedad esta soportada en su navegador.
El border-image necesita varios valores para funcionar correctamente.
border-image: source slice width outset repeat;
border-image: Imagen desplazamientoImagen(#) ancho desbordamiento

repeticin;
Ruta Imagen. Ancho Imagen.
border-image:url(border.jpg)30 30 repeat;
Desplazamiento interno de la imagen. Repeticin.

-Primer valor source (imagen): Se establece la ruta de la imagen.
-Segundo valor slice (desplazamiento): Indica la forma de desplazar la imagen

del borde hacia a dentro.(Requiere un poco de prctica entender bien el
comportamiento, se recomienda usar como valor el alto de la imagen).
-Tercer valor width (Ancho): El ancho de la imagen en el borde.(Requiere un

poco de prctica entender bien el comportamiento, se recomienda usar como
valor el ancho de la imagen).
-Cuarto valor ouset (desbordamiento):
-Quinto valor repeat (repeticin): establece la forma de repeticin de la

imagen, tiene tres posibles valores.
-Stretch: La imagen se expande para rellenar el rea.
-Repeat: La imagen se repite en mosaico para rellenar el rea (en ocasiones la

imagen queda recortada en medio de la repeticin).
-Round: La imagen se dispone en un mosaico repetido para rellenar el rea. A

diferencia de repeat, Este calcula cuantas veces se puede repetir acomodando
el tamao para que se establezcan los mosaicos necesarios.
Ejemplo:
Imagen (florLis.png).
30px Ancho, 30px Alto.
Cdigo:
#DivCaja{
width:300px;
height:100px;
background-color:#CCC;
padding:5px;
border-width:30px;
border-image:url(border.jpg)30 30 round;
-moz-border-image:url(borde.png)30 30 round;/*firefox*/
-webkit-border-image:url(borde.png)30 30 round;/*safari*/
-o-border-image:url(borde.png)30 30 round;/*opera*/
}

Vista navegador:
CSS3 adems cuenta con unas propiedades independientes para cada uno de
los valores del borde.(todava no son compatibles con varios navegadores).
-Border-image-source: Para indicar la URL de la imagen.
-Border-image-slice: Indica el espacio de la imagen que ser visible como

borde.
-Border-image-width: Especifica el ancho del borde.
-Border-image-outset: Especifica el rea de donde hasta donde se expande la

imagen ms alla del elemento.
-Border-image-repeat: Especifica el modo de repeticin de la imagen.
2.3.3. Box-shadow.
Propiamente no es un borde de la caja, genera una sombra alrededor del

elemento.
Nota : en algunos navegadores necesita el prefijo para funcionar.
Box-shadow necesita varios valores para poder funcionar correctamente:
box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: sombraHorizontal sombraVertical Desenfoque Difuminar color
posicin;
Sombra Vertical. Difuminar. Posicin sombra.
box-shadow:2px 10px 10px 10px #333 inset;
Sombra Horizontal. Desenfoque. Color.
-Primer valor (sombra horizontal) : Establece la posicin de la sombra

horizontal en medidas web.
-Segundo valor (sombra vertical) : Establece la posicin de la sombra vertical

en medidas web.
-Tercer valor (desenfoque) : Establece el desenfoque de la sombra en medidas

web.
-Cuarto valor (Difuminado): Establece el desenfoque de la sombra en medidas

web.
-Quinto valor (color): indica el color de la sombra en valores Hexadecimal, RGB

y el nombre del color en ingls.
-Sexto valor (posicin de sombra). Es opcional, tiene el valor intset que

establece la parte interior de la caja, si el valor no se declara la sombra estar en
el exterior de la caja.
Cdigo:
#DivCaja{ Vista cdigo.

width:300px;
height:100px;
background-color:#CCC;
padding:5px;
box-shadow:12px 12px 2px 2px #039;
}
Nota: si el nivel del blur es muy alto pasara a verse ms como un resplandor.

2.4. Text.
Nuevas propiedades de manejo de texto:
Text-shadow
Word-wrap
Text-overflow
@font-face
2.4.1. Text-shadow.
Especifica una sombra sobre el texto, es ideal

para ttulos ms no para bloques de texto. A
la fecha de la creacin del documento (2012),
Internet Explorer no soporta el text-shadow.
Esta propiedad necesita varios valores para

funcionar
Text-shadow: h-shadow v-shadow blur color;

Text-shadow: sombraHorizontal sombraVertical desenfoque color;
Primer valor (sombra Horizontal): Establece la posicin de la sombra horizontal

en medidas web.
Segundo valor (sombra vertical) : Establece la posicin de la sombra vertical en

medidas web.
Tercer valor (desenfoque) : Establece el desenfoque de la sombra en medidas

web.
Cuarto valor (color): indica el color de la sombra en valores Hexadecimal, RGB y

el nombre del color en ingls.
Cdigo:
h1{
text-shadow:2px 3px 1px rgb(255,0,0);
}

Vista navegador:
Conociendo ms sobre CSS

Nota: si el nivel del blur es muy alto pasara a verse ms como un resplandor.
2.4.2. Word-wrap.
En ocasiones el texto de una pgina web contiene palabras muy largas que no
caben en su contenedor y se desbordan de manera horizontal o modificar el
tamao de ancho de la caja.
Ejemplo: Si una persona

grita,
haaaaaaaaaaaaaaa!!!
Esto puede daar la maquetacin de la pgina.
La propiedad word-wrap evitar que esto pase.
Cuenta con los siguientes valores:
normal: valor por defecto, deja el comportamiento normal de la caja.
break-word: Permite a las palabras demasiado largas romperse y bajar a otro

rengln para no romper con la caja.
Ejemplo Cdigo: Vista Navegador:
.cuadro{
width:100px; Si una persona
grita,
height:100px;
haaaaaaaaaaaaa
border:1px solid #000; aa!!!
word-wrap:break-word;
}

2.4.3 Text-Overflow.
Especifica lo que debe pasar cuando un texto se desborda de su elemento

contenedor.
Text-overflow: clip|ellipsis|string;
Estos son sus dos valores ms utilizados.
Clip: Corta el texto donde termina el recuadro. Este texto supera el tama
Ellipsis: Corta y representa el texto cortado con puntos suspensivos().

Este texto supera el ta...
Ejemplo Cdigo:
.claseRecorte{
width:150px;
border:#000000 1px solid;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2.4.4 @font-face.
Si la fuente tipogrfica utilizada en el diseo no est instalada en el computador

del usuario, esta no se visualizar en el navegador y ser reemplazada por otra
que el computador crea pertinente.
Antes del CSS3 los diseos tipogrficos se limitaban a las fuentes estndar que
se encuentran en la mayora de los computadores.
Con CSS3, los diseadores Web pueden utilizar cualquier tipo de fuente que el
diseo requiera.
@font-face permite vincular una fuente que se encuentre en un servidor, para

luego ser descargada en el navegador del usuario, cuando sea necesaria.

@font-face define las fuentes que
sern utilizadas en el documento,
permitiendo enriquecer el diseo y
funcionalidad.
Firefox, Chrome, Safari, Opera

permiten fuentes de extensin. .Ttf
(True Type Fonts) y .Otf (fuentes
OpenType).
Internet Explorer 9 slo es

compatible con fuentes de tipo. EOT
(Embedded OpenType).
El modo de implementar @font-face
es la siguiente.
Primero se define un nombre de la fuente (Por Ejemplo: MiFuente), a

continuacin de esto se selecciona el archivo.
@font-face
{
font-family: MiFuente;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
Luego para utilizar la fuente en un elemento HTML la llamamos a travs del font-
family.
div{
font-family:MiFuente;
}
Nota: Recuerde que algunas fuentes tienen archivos independientes para

(italic, bold).
2.5. Transform.
CSS3 permite transformar las cajas y su contenido, para disear nuevos efectos
visuales, con el uso de la propiedad transform.

Los valores de la propiedad transform son:
Translate(valorX , valorY).
Rotate(numerodeg).
Scale(valorX , valorY).
Skew(value).
Matrix(value).
2.5.1. Translate.
Traslada al elemento de su punto original al punto especfico segn los valores

otorgados a la izquierda (X) y superior (Y).
Cdigo:
#caja{
width:100px;
height:100px;
transform:translate(50px,50px);
-ms-transform:translate(50px,50px); /* IE 9 */
-webkit-transform:translate(50px,50px);/*Safari y Chrome */
-o-transform: translate(50px,50px); /* Opera */
-moz-transform: translate(50px,50px); /* Firefox */
/*el elemento se mover 50 pixeles a la izquierda y 50
pixeles abajo del top*/
}
Nota: En este documento la representacin de la vista del navegador se

mostrar el elemento original de forma opaca para hacer la comparacin del
cambio y comprenderlo mejor.
Vista en el navegador:
Original.
Transformado.

2.5.2. Rotate
Se rota al elemento en el sentido de las manecillas del reloj segn el valor

especificado, si se especifica un valor negativo rotar en sentido contrario a las
manecillas del reloj.
Al valor se le debe agregar la palabra deg que es la abreviacin de degrees

(grados en ingls).
Ejemplo:
#caja{
width:100px;
height:100px;
transform: rotate(40deg);
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Safari y Chrome */
-o-transform: rotate(40deg); /* Opera */
-moz-transform: rotate(40deg); /* Firefox */
}
Vista Navegador:
Original. Transformado.
Original.
2.5.3. Scale(x,y).
Aumenta o disminuye el tamao del elemento segn los valores especificados

(x,y).
El valor se especifica en nmeros enteros, este nmero indica cuantas veces

aumenta o disminuye el tamao que ya est establecido en el elemento.
Ejemplo: si el valor es 2, el elemento aumentar dos veces su tamao.

Cdigo:
#caja{
width:100px;
height:100px;
transform:scale(3,2);
-ms-transform:scale(3,2); /* IE 9 */
-webkit-transform:scale(3,2); /* Safari y Chrome */
-o-transform:scale(3,2); /* Opera */
-moz-transform:scale(3,2); /* Firefox */
}
Vista del Navegador:
Transformado.
2.5.4. Skew(ejeX, ejeY).
El elemento se inclina segn los valores dados en el eje horizontal X y el eje

vertical Y.

(grados en ingls).
Cdigo:
#caja{
width:100px;
height:100px;
transform:skew(40deg,30deg);
-ms-transform: skew(40deg,30deg);/*IE9 */
-webkit-transform: skew(40deg,30deg);/*Safari y Chrome*/
-o-transform: skew(40deg,30deg);/*Opera*/
-moz-transform: skew(40deg,30deg);/*Firefox*/
}

Original.
2.5.5. Matriz. (1,2,3,4,5,6).
El mtodo matriz permite combinar varios de los valores de transform, se le

deben pasar 6 valores numricos.
Los primeros valores son de modificacin de escala y los ltimos de posicin.

(Practica modificando el css para ver diferentes resultados).
Los ltimos dos valores requieren las medidas en pixeles, solo para firefox.
Cdigo:
Ejemplo
#caja{
width:100px;
height:100px;
transform:matrix(0.8,0.5,-0.5,0.8,3,3));
-ms-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*IE9 */
-webkit-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*Safari y
Chrome*/
-o-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*Opera*/-
moz-transform:matrix(0.8,0.5,-0.5,0.8,3px,3px);/*Firefox*/
}
Original.

2.5.6. Transform 3D.
El mtodo transform tambin permite modificar el eje Z de la profundidad el

cual visualmente le agrega un efecto 3d.
Permite que la rotacin se realice sobre el propio eje del elemento generando un
efecto visual de 3d.
Valores 3d de transform especiales para esto son:
RotateX ()
RotateY ()
Estos valores a la fecha de la creacin de este documento (2012), no funcionan

para OPERA y EXPLORER.
RotateX (numero+deg)
Rota al elemento en su propio eje x, segn el valor especificado.

(grados en ingls).
Ejemplo:
#caja{
width:100px;
height:100px;
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);/* Safari y Chrome */
-moz-transform:rotateX(120deg); /*Firefox */
}
Vista en el Navegador:
Transformado.
Original.

LRotateY (numero+deg).
Rota al elemento en su propio eje y, segn el valor especificado.

(grados en ingls).
Ejemplo:
#caja{
width:100px;
height:100px;
transform:rotateX(60deg);
-webkit-transform:rotateX(60deg);/* Safari y Chrome */
-moz-transform:rotateX(60deg); /*Firefox */
}
Transformado.
Original.
Valores 3d del transform
La propiedad transform cuenta con otros valores para el manejo del 3d, su
manejo es similar a las anteriormente vistas, solo que en estas propiedades
tambin se especifica el eje z.
Estos valores a la fecha de la creacin de este documento (2012), no son

validos en algunos Navegadores.
TranslateX (valor X ): Traslada al elemento de su punto original al punto

especifico segn el valor otorgado en el eje X.
TranslateY (valor Y ): Traslada al elemento de su punto original al punto

especifico segn el valor otorgado en el eje Y.

TranslateZ (valor Z ): Traslada al elemento de su punto original al punto
especifico segn el valor otorgado en el eje Z.
Translate3d(valor X, valor Y, valor Z):Traslada al elemento de su punto original

al punto especfico segn los valores otorgados a la izquierda (X), superior
(Y) y profundidad (Z).
ScaleX(valor X): Aumenta o disminuye el tamao del elemento segn el valor

otorgado en ancho. (Eje X).
ScaleY(valor Y): Aumenta o disminuye el tamao del elemento segn el valor

otorgado en alto. (Eje Y).
ScaleZ(valor Z): Aumenta o disminuye el tamao del elemento segn el valor

otorgado en la profundidad. (Eje Z).
Scale3d(valor X, valor Y, valor Z): Aumenta o disminuye el tamao del elemento

segn los valores otorgados en, X, Y y Z.
RotateZ (numero+deg) : Rota al elemento en su propio eje Z, segn el valor

especificado. Al valor se le debe agregar la palabra deg que es la abreviacin de
degrees (grados en ingls).
2.6. Perspectiva.
2.6.1. Perspective(valor).
La propiedad perspectiva cambia el punto de

vista de los elementos modificando su
perspectiva.
Nota: La propiedad slo afecta a la
perspectiva 3D de elementos transformados.
La propiedad perspective a la fecha de la

creacin de este documento (2012) solo es
compatible con CHROME y SAFARY a travs
del prefijo webkit-.
Al definir la propiedad perspectiva de un

elemento, son los elementos anidados en el
los que reciben la vista en perspectiva, no el
propio elemento.

Elemplo: se tiene un div1 contendor de un div2, al aplicar la propiedad al div 1
esta se ver reflejada en el div 2.
#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150;/* Safari y Chrome */
}
#div2{
padding:50px;
background-color: red;
-webkit-transform: rotateX(45deg);/* Safari y Chrome */
}
Div 1 sin perspectiva. Div 1 sin perspectiva.
Div 2 Perspectiva.
2.6.2. Perspective-origin(x, y).
Esta propiedad cambia el punto fuga del elemento cambiado el origen de la

perspectiva.
Este punto se define con las coordenadas de los ejes (x , y).
Ejemplo :

#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
perspective:150;
perspective-origin: 2% 80%; /* Safari y Chrome */
-webkit-perspective:150;/* Safari y Chrome */
-webkit-perspective-origin: 2% 80%; /* Safari y Chrome */
}
#div2{
padding:50px;
background-color: red;
-webkit-transform: rotateX(45deg);/* Safari y Chrome */
}
Div 1 sin perspectiva. Div 1 sin perspectiva.
Div 2 Perspectiva.
2.7. Transiciones en CSS3.
Las transiciones en CSS3 son efectos que permiten a un elemento poco a poco
cambiar de un estilo a otro.
Ciertas transiciones son respuesta a eventos automticos o desencadenados

por el usuario, es decir el evento de un click sobre un elemento puede
desencadenar una transicin.
Estas transiciones no son compatibles con las ltimas versiones de internet

Explorer (7 y 8).

Para los otros navegadores es necesario el uso del prefijo.
Para aplicar las transiciones en CSS se deben declarar dos cosas:
Especificar la propiedad CSS a la que se le desea agregar un efecto.
Especificar la duracin del efecto. (Si la duracin no se especifica, la

transicin no se ejecuta, ya que el valor predeterminado es 0).
La transicin se iniciar cuando la propiedad especificada cambie de valor. Un

ejemplo muy comn de cambio de propiedad CSS sera cuando un usuario pasa
el ratn sobre un elemento (div:hover).
Ejemplo de uso:
Se crea un div y se especifica que la transicin comenzar cuando el ancho del

documento cambie.
#caja1{
width:100px;
height:100px;
background-color:green;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
Luego se aplica al div la pseudoclase: hover en la que se modificar el ancho del

div.
#caja1:hover{
width:200px;
}
Simulacin de transicin.
A. B. C. D.
Nota: Se recomienda ejecutar cada ejemplo en el navegador, ya que es la mejor

forma de ver las animaciones de la transicin.

2.7.1. Transition.
Indica a que propiedad del elemento se le

aplicar una transicin al momento del cambio.
Modo de uso
Transition: propiedad duracin (estilo de efecto

opcional) (retardo opcional);
Se especifica la propiedad, la duracin de la

transicin, que estilo de efecto tendr y en
cuanto tiempo se ejecutar una vez realizado el
evento, los dos ltimos son opcionales.
Duracin. Retardo.
transition:width 2s ease-in 3s
Propiedad. Efecto.
La propiedad transition es la forma corta de declarar una transicin, ya que CSS

cuenta con una propiedad especfica que declara cada uno de estos valores
anteriormente vistos.
2.7.2 Transition-property - transition-duration.
transition-property Especifica a que propiedad del elemento se le aplicar la

transicin, si la propiedad no sufre ninguna modificacin la transicin nunca se
ejecutar.
transition-duration Especifica cul ser el tiempo de duracin de la transicin.

Es necesario que ambas propiedades transition-property y transition-duration
estn declaradas para su correcto funcionamiento.
Ejemplo:

#caja1{
width:100px;
height:100px;
background:red;
transition-property: width;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari y Chrome */
-webkit-transition-duration: 2s; /* Safari y Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
2.7.3. Transition-timing-function.
Especifica qu tipo de velocidad tendr el efecto que tiene la transicin.
Linear: El efecto de transicin tiene Ease-out: El efecto de transicin

la misma velocidad de principio a fin tiene un final lento (equivalente en
(equivalente en cubic-bezier cubic-bezier (0,0,0.58,1)).
(0,0,1,1)).
Ease-in-out: El efecto de transicin
Ease: El efecto de transicin tiene un tiene un comienzo y final lento
comienzo lento, luego rpido y (equivalente en cubic-bezier
termina lentamente (equivalente en (0.42,0,0.58,1)).
cubic-bezier (0.25,0.1,0.25,1)).
Cubic-bezier(n,n,n,n): Permite
Ease-in: El efecto de transicin tiene definir la curva de velocidad por
un comienzo lento (equivalente en parte del programador, con valores
cubic-bezier (0.42,0,1,1)). numricos entre un rango de 0 y 1.
2.7.4 Transition-delay.
Especfica el tiempo de espera para iniciar la transicin una vez se ha

presentado el evento. Es decir retarda el inicio de la transicin segn el valor en
segundos.

Ejemplo:
#caja1{
width:100px;
height:100px;
background-color:green;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
}
La transicin esperar dos segundos para iniciar.
2.8. Animaciones en CSS.
Css3 trae una nueva forma de hacer animaciones web, sin tener que recurrir a
lenguajes complementarios como JAVASCRIPT.
La base de la animacin en CSS es por fotogramas claves, es decir que en la

programacin se indica el punto clave de la animacin y el cdigo completar la
secuencia automticamente.
Ejemplo, se determina el punto inicial y punto final de la animacin, el

navegador se encarga de completar la secuencia de transicin.
Fotograma Fotograma
Clave. Clave.
Los fotogramas clave le indican a la animacin qu cambios debe tener, en este

caso tenemos un fotograma clave que indica cmo se inicia y un fotograma
clave indicando como termina, como resultado se tiene un crculo que se
desplaza de un lado a otro cambiando de color.
Si indicamos ms fotogramas claves la animacin tendr ms movimientos y

transiciones y se har ms compleja.

Fotograma Fotograma
Clave. Clave.
Fotograma
Clave.
Para crear animaciones en CSS primero se deben especificar los fotogramas

claves, luego se implementan en algn selector para poder ejecutar la
animacin.
Esto significa que se pueden utilizar los mismos fotogramas claves para mover
diferentes elementos.
Nota: Para entender bien los conceptos es necesario ejecutar los ejemplos en el
navegador.
2.8.1. Fotogramas Clave.
Los fotogramas clave cambian en cierta forma al momento de crearse ya que no

se declaran con un selector sino a unas palabras clave, tambin llevarn llaves
({}) interiores por lo que se debe tener mucho cuidado al abrir y cerrar llaves.

Su creacin tambin necesita prefijo para los diferentes navegadores.
Esta propiedad no es compatible con las ltimas versiones de internet Explorer

(7 y 8).
Su sintaxis es la siguiente.
Fotogramas Claves. Nombre Animacin.
@keyframes miAnimacion {
Propiedad Inicial.
from {background-color:#FF0000;}
to {background-color:#0000FF;}
Propiedad Final.
Propiedades a Animar.
CSS cuenta con dos palabras clave a la hora de crear @keyframes.
From: Es el primer fotograma, las propiedades con las que inicia la

animacin.
To: Es el fotograma final, las propiedades con las que termina la

animacin.
Dado el caso que se necesiten ms fotogramas, se especifican con el valor en

porcentaje.
El valor del porcentaje indica a partir de qu momento en la animacin se

presentar el cambio del fotograma, teniendo como el principio el 0% y el final
100%.
Porcentaje de la @keyframes colorFondo{

Animacin.
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:red;}
}
En el cdigo anterior indicamos en que porcentaje de la animacin se presentan

los cambios, es decir que al 25% el color de fondo estar amarillo.

Tambin se puede declarar los @keyframes mezclando los porcentajes y el
(from, to).
Ejemplo:
@keyframes miAnimacion{
from {background:red;}
to {background:red;}
}
@-moz-keyframes miAnimacion {
}
@-webkit-keyframes miAnimacion {
}
@-o-keyframes miAnimacion {
}
Luego de tener los fotogramas claves definidos, se llama la animacin en el

selector que se quiere implementar la propiedad animation.
2.8.2. Animation.
animation es la propiedad que define cual animacin que se va a ejecutar y en

que selector.
Para su uso es necesario el prefijo de los diferentes navegadores.
Esta propiedad no es compatible con las ltimas versiones de internet Explorer

(7 y 8).

Su sintaxis es:
animation: nombreAnimacin Duracin (estilo de efecto opcional) (retardo

opcional) (repeticin opcional) (flujo de Direccin opcional);
La duracin se especifica con valores numricos seguidos de letra (s) para

segundo o las letras (ms) para milisegundos.
Duracin. Retardo. Flujo de Direccin.
animation:myFirst 5s linear 1s 3 alternate;
Nombre Animacin. Estilo de efecto Repeticin.
Como mnimo se tienen que declarar dos valores en animation, cual es la

animacin y cul es su duracin.
Nota: si la propiedad animation no tiene una duracin especificada, no se

reproducir, porque el valor por defecto es 0.
Ejemplo:
/*Se crea la animacin*/

@keyframes cambioColor{
from {background-color:red; left:0px}
30% {background-color:yellow; left:30px }
73% {background-color:blue; left:60px }
to {background-color:red; left:0px }
}
/*Se implementa la animacin en un div de id cuadro*/
#cuadro{
width:50px;
height:50px;
background-color:red;
position:absolute;
animation:cambioColor 4s;
/*Recuerde el uso de los prefijos para los navegadores*/
/*La animacin ser cambio de color y durara 4 segundos*/
}

2.8.3. Animation-name y animation-duration.
animation-name llama a la animacin @keyFrame que debe ser usada en el

elemento y animation-duration define cuntos segundos (s) o milisegundos
(ms) debe durar la animacin al completar un ciclo.
Animation-duration: se le indica el valor en nmeros seguidos de letra (s) para

segundo o las letras (ms) para milisegundos.
Las dos propiedades requieren el uso de prefijos para los navegadores.
Ejemplo:
#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-name:myanimation;
-moz-animation-duration:125ms;
}
2.8.4. Animation-timing-function.
Especifica qu tipo de velocidad tendr el efecto que tiene la animacin.

Linear: El efecto de transicin tiene Ease-out: El efecto de transicin

la misma velocidad de principio a fin tiene un final lento (equivalente en
(equivalente en cubic-bezier cubic-bezier (0,0,0.58,1)).
(0,0,1,1)).
Ease-in-out: El efecto de transicin
Ease: El efecto de transicin tiene un tiene un comienzo y final lento
comienzo lento, luego rpido y (equivalente en cubic-bezier
termina lentamente (equivalente en (0.42,0,0.58,1)).
cubic-bezier (0.25,0.1,0.25,1)).
Cubic-bezier(n,n,n,n): Permite
Ease-in: El efecto de transicin tiene definir la curva de velocidad por
un comienzo lento (equivalente en parte del programador, con valores
cubic-bezier (0.42,0,1,1)). numricos entre un rango de 0 y 1.

Ejemplo:
#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-duration:5s;
-moz-animation-timing-function:ease-in;
}
2.8.5. Animation-delay.
Especfica cunto debe ser la espera para iniciar la animacin, se le indica el

valor en nmeros seguidos de letra (s) para segundos o las letras (ms) para
milisegundos.
Ejemplo:
#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-delay:4s;
/*la animacin comienza despus de 4 segundos*/
}
#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-delay:4s;

2.8.6. Animation-iteration-count.
Indica cuntas veces debe reproducirse la animacin, tiene dos formas de

especificar la cantidad de repeticiones.
Valor numrico (2,3,4etc): se indica el nmero de veces que se repite la

animacin.
infinite: se repite infinitamente la animacin.
Ejemplo:
#cuadro{
width:5%;
height:5%;
top:0px;
left:0px;
position:absolute;
background-color:#00FF00;
-webkit-animation:cuadritoLoco;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
/* la animacin se reproducir dos veces */
}
2.8.7 Animation-direction.
Especifica si la animacin debe revertirse. Tiene dos posibles valores.
normal: valor por defecto, la animacin transcurre en su flujo normal.
alternate: la animacin correr en reversa en una vez terminada la animacin

en su flujo normal.
animation-direction:alternate;
Fotograma Mitad Fotograma

Inicial. de Animacin. Final.

animation-direction:alternate;
Fotograma
Inicial. Mitad
de Animacin.
Fotograma
Final.
Ejemplo:
@-webkit-keyframes cuadritoLoco{
from{top:0%; left:0%;}
25%{top:95%; left:0%;}
50%{top:95%; left:95%;}
75%{top:0%; left:95%;}
to{top:0%; left:0%;}
}
#cuadro{
width:5%;
height:5%;
top:0px;
left:0px;
position:absolute;
background-color:#00FF00;
-webkit-animation:cuadritoLoco;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
Nota: para que funcione la propiedad animation-direction, la animacin debe

repetirse ms de una vez.
2.8.8. Animation-play-state.
La propiedad de animacin-play-state especifica si la animacin est en

ejecucin o en pausa, tiene dos valores:

Paused: la animacin se detiene.
Running: la animacin se reproduce normalmente.
Nota: Esta propiedad funciona realmente bien con ayuda de javaScript, ya que
se puede cambiar el valor de la propiedad desde el navegador.
(object.style.animationPlayState="paused").
2.9. Columnas mltiples.
En Css3 se puede crear texto de varias

columnas estilos peridicos sin tener
que recurrir a varios divs o tablas,
simplemente utilizando las propiedades
de manejo de columnas mltiples.
Propiedades de columnas mltiples:
Column-count.
Column-gap.
Column-rule.
Las propiedades de columnas mltiples

a la fecha de la creacin de este
documento (2012) requieren prefijos
para los diferentes navegadores y no es
compatible con las versiones de
internet Explorer (7 y 8).
2.9.1. Column-count.
Especifica el nmero de columnas en el que debe ser dividido el texto, se puede

aplicar a prrafos desde una clase o a un elemento que contenga varios
prrafos.

Ejemplo cdigo:
#caja{
-moz-column-count:3;
width:800px;
text-align:justify;
}
2.9.2. Column-gap.
La propiedad column-gap especfica la separacin entre las columnas, es decir

se puede modificar el tamao del medianil.
Ejemplo cdigo:
#caja{
-moz-column-gap:10px;
width:800px;
text-align:justify;
}
Vista en el navegador, en este caso la separacin entre columnas es de 10

pixeles.

sdnajsdnlkasjndlkajsnfksna sdnajsdnlkasjndlkajsnfksna
dlfknasdlkfsdnajsdnlkasjnd dlfknasdlkfsdnajsdnlkasjnd
lkajsnfksnadlfknasdlkfsdna lkajsnfksnadlfknasdlkfsdna
2.9.3. Column-rule.
jsdnlkasjndlkajsnfksnadlfkn jsdnlkasjndlkajsnfksnadlfkn
asdlkfsdnajsdnlkasjndlkajs asdlkfsdnajsdnlkasjndlkajs
nfksnadlfknasdlkfsdnajsdn nfksnadlfknasdlkfsdnajsdn
lkasjndlkajsnfksnadlfknasdl lkasjndlkajsnfksnadlfknasdl
kfsdnajsdnlkasjndlkajsnfks kfsdnajsdnlkasjndlkajsnfks
nadlfknasdlkfsdnajsdnlkasj nadlfknasdlkfsdnajsdnlkasj
ndlkajsnfksnadlfknasdlkfsd ndlkajsnfksnadlfknasdlkfsd
najsdnlkasjndlkajsnfksnadlf najsdnlkasjndlkajsnfksnadlf
knasdlkfsdnajsdnlkasjndlk knasdlkfsdnajsdnlkasjndlk
ajsnfksnadlfknasdlkfsdnajs ajsnfksnadlfknasdlkfsdnajs
Esta es la manera rpida de
modificar el ancho, el estilo y
color del espacio que se
encuentra entre las columnas
(medianil).
Sintaxis:
column-rule: ancho estilo color;
Ejemplo cdigo:
#caja{
-moz-column-rule:3px solid #ff0000; /* Firefox */
width:800px;
text-align:justify;
}

2.9.4. Column-rule-width.
Especfica el ancho de regla que se dibuja entre las dos columnas (medianil), se
debe procurar no sobrepasar el ancho del column-gap ya que el divisor se
montara en el texto.
Sintaxis
column-rule-width: valor|thin|medium|thick;
Valor: se especifica el valor en medidas web.
Thin: Define una lnea delgada.
Medium: Define una lnea de grosor medio.
Thick: Define una lnea de grosor ancho.
para poder visualizar la propiedad column-rule-width se debe especificar la

propiedad column-rule-style.
2.9.5. Column-rule-style.
Especifica el estilo de la regla que se dibuja entre las dos columnas (medianil),
sus posibles valores son similares a los de border.

Sintaxis:
column-rule-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
-None: No se muestra ningn -Groove: Borde hundido, en la

borde. interfaz de usuario parece que se
encuentra por debajo del nivel de la
-Hidden: Esconde los bordes, su superficie de la pantalla.
visualizacin en el navegador es
muy parecida al none. -Ridge: Borde saliente, en la interfaz
de usuario parece saldr del nivel de
-Dotted: Borde punteado alrededor la pantalla.
del cuadro.
-Inset: Borde hundido, hacer
-Dashed: Borde discontinuo. parecer al elemento que tiene el
borde como si estuviera por debajo
-Solid: Borde continuo, formado por del nivel normal de la pantalla.
una lnea recta continua.
-Outset: Borde saliente, hacer
-Double: Borde doble, formado por parecer al elemento que tiene el
dos lneas rectas continuas borde como si estuviera por encima
separadas entre s por un espacio en del nivel normal de la pantalla.
blanco.
2.9.6. Column-rule-color.
Especifica el color de la regla que se dibuja entre las dos columnas (medianil).
Sintaxis:
Column-rule-color: valor;
Valor: el valor se puede especificar con el nombre de color en ingls, el valor

hexadecimal o en rgb().
Ejemplo:

#caja{
-moz-column-rule-width:3px; /* Firefox */
-moz-column-rule-style:double;
-moz-column-rule-color:#ff0000;
width:800px;
text-align:justify;
}
2.9.7. Column-span.
Especifica cuntas columnas debe extenderse el elemento HTML a lo largo de

las diferentes columnas, esta propiedad se declara en un elemento HTML
complementario por ejemplo el ttulo del artculo.
La propiedad column-span a la fecha de la creacin de este documento (2012)

solo funciona para GOOGLE CHROME y OPERA con ayuda del prefijo.
Sintaxis:
column-span: 1|all;
1: el elemento HTML se ubica en la primera columna (valor por defecto).
all: el elemento HTML se extiende por todas las columnas.
Ejemplo cdigo:
#caja{
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule-width:3px; /* CHORME */
-webkit-column-rule-style:double;
-webkit-column-rule-color:#ff0000;
width:800px;
text-align:justify;
}
#caja h1{
-webkit-column-span:all;
}

2.9.8. Column-width.
Especifica el ancho de las columnas con base en su elemento contenedor, el

nmero de columnas depender del ancho del elemento contenedor y el ancho
que se especifica en la columna.
Sintaxis:
Column-width: valor | auto;
Valor: se especifica el valor en medidas web.
Auto: el valor lo especifica de manera automtica el navegador (valor por

defecto).
Ejemplo cdigo:
#caja{
-webkit-column-width:100px;
width:800px;
}

2.10. Opacity.
La propiedad opacity especifica una transparencia en el elemento al que se le

aplica.
El valor de la opacidad va desde 0 (total transparencia) y 1 (Sin

transparencia).
Ejemplo Cdigo:
Se harn tres divs con las mismas caractersticas solo se modificar la

propiedad opacity.

#caja{
width:100px;
height:100px;
opacity:0.8;
}
#caja2{
width:100px;
height:100px;
opacity:0.6;
}
#caja3{
width:100px;
height:100px;
opacity:0.3;
}

Glosario.
Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada
regla est compuesta de una parte de "selectores", un smbolo de "llave de
apertura" ({), otra parte denominada "declaracin" y por ltimo, un smbolo de
"llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los elementos. Est

compuesta por una o ms propiedades CSS.
Propiedad: caracterstica que se modifica en el elemento seleccionado, como

por ejemplo su tamao de letra, su color de fondo, etc.
Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

Bibliografa.
CSS Tutorial, En w3school, Escuela de desarrollo, Recuperado el 15 de junio de

2013, Dionible: http://www.w3schools.com/css3/
Curso CSS3, En Cristalab, Recursos de Diseo Web, Recuperado el 15 de junio

de 2013, Dionible: http://www.cristalab.com/css3/
Manual de CSS3, En Desarrollo Web, Comunidad de desarrollo, Recuperado el

15 de junio de 2013,
Dionible: http://www.desarrolloweb.com/manuales/css3.html
CSS3, en Programandola, Formacin para desarrolladores, recuperado el 15 de

junio de 2013.
Dionible: http://programando.la/

Actividades de Afianzamiento.
Luego de haber estudiado detenidamente la informacin de este objeto de

aprendizaje, lea cuidadosamente y resuelva las siguientes preguntas de
seleccin mltiple con nica respuesta.
1. @font-face se utiliza para
a. Incluir imgenes por medio de CSS.

b. Para definir la estructura del documento CSS.
c. Para vincular fuentes desde el servidor al cliente.
d. Ninguna de la anteriores.
2. El prefijo ms- que se usa para compatibilidad con el navegador
a. Google Crhome.
b. Mozilla Firefox.
c. Interene Explorer.
d. Safari.
3. La estructura correcta de una sentencia CSS es
a. Selector { propiedad:valor;}.
b. Propiedad{selecator:valor;}.
c. Selector { propiedad:valor}.
d. { Selector = propiedad:valor;}.
4. Para hacer relacionar un documento CSS desde HTML se una la

etiqueta
a. <file>.
b. <css>.
c. <src>.
d. <link>.

5. El siguiente codigo CSS
body{ color:red; bgcolor:#000;}
nos muestra como resultado
a. El cuerpo del docuemnto color rojo y el texto color negro.

b. El cuerpo del documento color azul y el texto rojo.
c. El cuerpo del docuemnto color negro y el texto rojo.
d. El codigo CSS esta mas escrito.
6. Si quiero centrar el texto de mi etiqueta <p> debo en CSS utilizar la

siguiente linea de cdigo
a. <p>center.
b. p{ text-align: center;}.
c. p{ center: true;}.
d. Ninguna de la anteriores.
Respuestas: 1 (c). 2 (c). 3(a). 4(d). 5(c). 6(b).

Control De Documento.
Construccin Objeto De Aprendizaje.
INTRODUCCIN CSS.
Experto Temtico: Jesualdo Morantes Meza.
Asesor Pedaggico: Luis Antonio Surez Martnez.

Maria Teresa Camargo Serrano.
Produccin Multimedia: Oscar Ivan Uribe Ortiz.
Programador: Roberto Chajin Ortiz.
Lder Experto Temtico: Tatiana Acosta Patio.
Lder lnea de produccin: Santiago Lozada Garcs.

CSS Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de
hojas de estilo creado para controlar el aspecto de los documentos, es la mejor
forma de separar los contenidos de su aspecto, es imprescindible para crear
pginas de web profesionales, separar los contenidos y aspecto grficos
presenta muchas ventajas ya que obliga a crear documentos HTML bien
definidos y con significado completo permitiendo as, mejor accesibilidad,
reduce complejidad de su mantenimiento y permite la visualizacin del mismo
documento en diferentes dispositivos como (pc, tablets, dispositivos mviles,
etc).
En este OVA aprenders los conceptos bsicos de CSS con todos sus elementos,
estructuras y correcta aplicacin junto a las novedades que permite la versin
CSS3.
2013
Introduccin CSS

Introducción A HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introducción A HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Introduccin CSS

CSS Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de

Pag 2 Introduccin CSS

1.1 Estructura CSS.

2.1 Compatibilidad de CSS3 con los navegadores.

Pag 3 Introduccin CSS

Funcin de CSS en el diseo web

con como tipo de como

Pag 4 Introduccin CSS

Es la sigla de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un

Al estructurar un sitio web, se utiliza en primer lugar el HTML para etiquetar

El CSS fue publicado en 1996 por la W3C, actualmente se encuentra en la

1.1. Estructuracin del CSS.

El CSS se trabaja por medio de reglas

Selector= Determina a que parte del

La declaracin indica cual es la

Pag 5 Introduccin CSS

Unin de parejas Separacin de pares

Selector { propiedad : valor ; }

Especificacin de los trminos de la grfica.

Selector: indica a que elemento se le aplica la regla CSS.

Declaracin: Se compone en pareja propiedad: valor donde indica que se

Propiedad: Es la caracterstica a modificar en el selector ejemplo (color),

Valor: Establece el nuevo valor de la propiedad modificada ejemplo (color:

Propiedad Valor Propiedad Valor

p { color : #ff0000 ; font-family : Arial ; }

Pag 6 Introduccin CSS

Existen tres maneras de utilizar el CSS en un documento Html

1.2.1. Hojas de estilos CSS externa.

Todas las reglas CSS se determinan en un archivo guardado con extensin

<HTML> CSS <HTML> + CSS

Los archivos CSS se vinculan en el <HEAD> del HTML de la siguiente manera:

El archivo CSS se puede hacer en cualquier editor de texto guardndolo con

1.2.2. Estilos CSS Incrustados en el <head>.

Se incrustan en el <head> usando la etiqueta <style> con el atributo

Pag 7 Introduccin CSS

<p style="color:#0000ff;margin-left:20px">Este es el parrafo.</p>

1.3.1 Selector Universal.

El selector universal es representado por el asterisco (*), este permite crear

1.3.2. Selector de Etiqueta.

Es el ms comn a utilizar ya que todas las etiquetas HTML pueden ser

Para aplicar este selector, solamente es necesario indicar el nombre de una

CSS Modificamos el color de la etiqueta <p>.

Pag 8 Introduccin CSS

Los selectores se pueden agrupar en el caso de que se quiera aplicar la misma

Lo anterior se podra resumir agrupando selectores separndolos con una

1.3.3. Selectores de clase.

La especialidad de las clases es que se puede aplicar solo a un elemento o a

Para crear una clase se utiliza como prefijo el punto (.)

<p class=resaltado> este prrafo a diferencia de los otros esta

Pag 9 Introduccin CSS

El selector de ID permite seleccionar un elemento de la pgina a travs del valor

La forma de crear un Selector ID es similar a las clases, solo que el prefijo es el

#cuadro { widht : 200px; }

<p id=cuadro> Hola </p>

1.4. Etiquetas de tipo Block e Inline.

En HTML existen dos formas de identificar ciertas etiquetas los elementos de

Elementos Bloque: la principal caracterstica es que son mostrados con un salto

Etiquetas Bloque ms comunes: <p>, <ul>, <ol>, <h1-h6>, <fieldset>,

Elementos en Lnea: son mostrados en el lugar que aparecen en el flujo del

Nota: Esta diferencia no es tan marcada en HTML5.

Pag 10 Introduccin CSS

1.5. Propiedades CSS.