Sie sind auf Seite 1von 89

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.

Pag 3 Introduccin CSS


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.

Pag 4 Introduccin CSS


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.

Pag 5 Introduccin CSS


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

Pag 6 Introduccin 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>

Pag 7 Introduccin CSS


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 <>.

Pag 8 Introduccin CSS


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>

Pag 9 Introduccin CSS


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.

Pag 10 Introduccin CSS


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.

Pag 11 Introduccin CSS


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;

Pag 12 Introduccin CSS


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)).

Pag 13 Introduccin CSS


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.

Pag 14 Introduccin CSS


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

Pag 15 Introduccin CSS


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>
<style type="text/css">
.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.

Pag 16 Introduccin CSS


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.

Pag 17 Introduccin CSS


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;}

Pag 18 Introduccin CSS


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;}

Pag 19 Introduccin CSS


- 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>Texto en CSS </title>
<style type="text/css">
.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:

Pag 20 Introduccin CSS


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,

Pag 21 Introduccin CSS


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.

Sus posibles valores son:

Inside: Vieta interior.

Outside: Vieta Exterior.

Pag 22 Introduccin CSS


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.

Ejemplo de una aplicacin.

<html>
<head>
<title>listas en CSS </title>
<style type="text/css">
.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>

Pag 23 Introduccin CSS


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.

Pag 24 Introduccin CSS


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);

Pag 25 Introduccin CSS


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;
}

Pag 26 Introduccin CSS


Imagen repitindose en Y en el contenedor.

Imagen Original. Contenedor la imagen se repite en X

body{
background-image:url(nube.jpg);
background-repeat:repeat-y;
}

Imagen no-repeat
Imagen Original. Contenedor la imagen se repite en X

body{
background-image:url(nube.jpg);
background-repeat: no-repeat;
}

Ejemplo:

body{background-repeat: repeat-x;}

Pag 27 Introduccin CSS


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.

Sus posibles valores son:

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.

Pag 28 Introduccin CSS


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).

Pag 29 Introduccin CSS


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:

Pag 30 Introduccin CSS


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

Pag 31 Introduccin CSS


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


(Pixel, Picas, Porcentaje, Emes, Equis, etc).

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


(Pixel, Picas, Porcentaje, Emes, Equis, etc).

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


(Pixel, Picas, Porcentaje, Emes, Equis, etc).

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,
Picas, Porcentaje, Emes, Equis, etc).

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.

Pag 32 Introduccin CSS


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,


Picas, Porcentaje, Emes, Equis, etc).

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


(Pixel, Picas, Porcentaje, Emes, Equis, etc).

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


(Pixel, Picas, Porcentaje, Emes, Equis, etc).

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;
}

Pag 33 Introduccin CSS


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.

Pag 34 Introduccin CSS


-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.

Pag 35 Introduccin CSS


-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.

Pag 36 Introduccin CSS


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.

Pag 37 Introduccin CSS


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.

Pag 38 Introduccin CSS


-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(,).

Pag 39 Introduccin CSS


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.

Pag 40 Introduccin CSS


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);
background-repeat:no-repeat;
border:10px dotted #000;
background-origin:content-box;
}

Pag 41 Introduccin CSS


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.

Sus posibles valores son:

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;
background-color:#999999;
padding:30px;
background-image:url(escenario.jpg);
background-repeat:no-repeat;
border:10px dotted #000;
background-clip:content-box;
background-origin:border-box;
}

Pag 42 Introduccin CSS


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.

Sus posibles valores son:

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).

Pag 43 Introduccin CSS


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.

Pag 44 Introduccin CSS


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 */
background-color:#006666;
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;
background-color:#990000;
padding:5px;
color:#FFFFFF;
}

Vista navegador:

Pag 45 Introduccin CSS


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.

Pag 46 Introduccin CSS


-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*/
}

Pag 47 Introduccin CSS


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;

Pag 48 Introduccin CSS


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.

Pag 49 Introduccin CSS


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);
}

Pag 50 Introduccin CSS


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;
}

Pag 51 Introduccin CSS


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.

Pag 52 Introduccin CSS


@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.

Pag 53 Introduccin CSS


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;
background-color:#906;
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.

Pag 54 Introduccin CSS


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;
background-color:#906;
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.

Pag 55 Introduccin CSS


Cdigo:

#caja{
width:100px;
height:100px;
background-color:#906;
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.

Al valor se le debe agregar la palabra deg que es la abreviacin de degrees


(grados en ingls).

Cdigo:

#caja{
width:100px;
height:100px;
background-color:#906;
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*/
}

Pag 56 Introduccin CSS


Vista en el navegador:

Original. Transformado.

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;
background-color:#906;
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*/
}

Vista en el navegador:

Original. Transformado.

Original.

Pag 57 Introduccin CSS


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.

Al valor se le debe agregar la palabra deg que es la abreviacin de degrees


(grados en ingls).

Ejemplo:

#caja{
width:100px;
height:100px;
background-color:#906;
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);/* Safari y Chrome */
-moz-transform:rotateX(120deg); /*Firefox */
}

Vista en el Navegador:

Original. Transformado.
Transformado.

Original.

Pag 58 Introduccin CSS


LRotateY (numero+deg).

Rota al elemento en su propio eje y, segn el valor especificado.

Al valor se le debe agregar la palabra deg que es la abreviacin de degrees


(grados en ingls).

Ejemplo:

#caja{
width:100px;
height:100px;
background-color:#906;
transform:rotateX(60deg);
-webkit-transform:rotateX(60deg);/* Safari y Chrome */
-moz-transform:rotateX(60deg); /*Firefox */
}

Vista en el Navegador:

Transformado.
Original. 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.

Pag 59 Introduccin CSS


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.

Pag 60 Introduccin CSS


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;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg);/* Safari y Chrome */
}

Vista en el Navegador:

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 :

Pag 61 Introduccin CSS


#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
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;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg);/* Safari y Chrome */
}

Vista en el Navegador:

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).

Pag 62 Introduccin CSS


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;
}

Vista en el navegador:
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.

Pag 63 Introduccin CSS


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:

Pag 64 Introduccin CSS


#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.

Los posibles valores son:

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.

Pag 65 Introduccin CSS


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.

Pag 66 Introduccin CSS


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.

Pag 67 Introduccin CSS


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.

Pag 68 Introduccin CSS


Tambin se puede declarar los @keyframes mezclando los porcentajes y el
(from, to).

Ejemplo:

@keyframes miAnimacion{
from {background:red;}
30% {background:yellow;}
73% {background:blue;}
to {background:red;}
}
@-moz-keyframes miAnimacion {
from {background:red;}
30% {background:yellow;}
73% {background:blue;}
to {background:red;}
}
@-webkit-keyframes miAnimacion {
from {background:red;}
25% {background:yellow;}
50% {background:blue;}
to {background:red;}
}
@-o-keyframes miAnimacion {
from {background:red;}
25% {background:yellow;}
50% {background:blue;}
to {background:red;}
}

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).

Pag 69 Introduccin CSS


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*/
}

Pag 70 Introduccin CSS


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.


Los posibles valores son:

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.

Pag 71 Introduccin CSS


Ejemplo:

#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-name:myanimation;
-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-name:myanimation;
-moz-animation-duration:6s;
-moz-animation-timing-function:ease-in;
-moz-animation-delay:4s;
/*la animacin comienza despus de 4 segundos*/
}

#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-name:myanimation;
-moz-animation-duration:6s;
-moz-animation-timing-function:ease-in;
-moz-animation-delay:4s;

Pag 72 Introduccin CSS


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.

Pag 73 Introduccin CSS


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:

Pag 74 Introduccin CSS


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.

Pag 75 Introduccin CSS


Ejemplo cdigo:

#caja{
-moz-column-count:3;
width:800px;
text-align:justify;
}

Vista en el navegador:

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-count:3;
-moz-column-gap:10px;
width:800px;
text-align:justify;
}

Vista en el navegador, en este caso la separacin entre columnas es de 10


pixeles.

Pag 76 Introduccin CSS


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-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #ff0000; /* Firefox */
width:800px;
text-align:justify;
}

Pag 77 Introduccin CSS


Vista en el navegador:

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.

Pag 78 Introduccin CSS


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:

Pag 79 Introduccin CSS


#caja{
-moz-column-count:3;
-moz-column-gap:20px;
-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;
}

Pag 80 Introduccin CSS


Vista en el navegador:

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;
}

Pag 81 Introduccin CSS


Vista en el navegador:

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.

Pag 82 Introduccin CSS


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

Vista en el navegador:

Pag 83 Introduccin CSS


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.

Pag 84 Introduccin CSS


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/

Pag 85 Introduccin CSS


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>.

Pag 86 Introduccin CSS


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).

Pag 87 Introduccin CSS


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.

Pag 88 Introduccin CSS


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