Introduccion Css

Fase Desarrollo 2016 Introducción CSS
Introd u c c i ó n C S S
Desarrollo
INTRODUCCIÓN CSS
Introducción.
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
páginas de web profesionales, separar los contenidos y aspecto gráficos
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 visualización del mismo
documento en diferentes dispositivos como (pc, tablets, dispositivos móviles,
etc).
Para crear una página 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, distribución, etc).
En este OVA aprenderás los conceptos básicos de CSS con todos sus elementos,
estructuras y correcta aplicación junto a las novedades que permite la versión
CSS3.
Pag 2 Introducción 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 múltiples.
2.10 Opacity.
Glosario.
Bibliografía.
Actividades de Afianzamiento.

Mapa de Contenido.
CSS
Introducción a
Función de CSS en el diseño 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 Múñtiples.
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 diseño 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 página: encabezados, párrafos, textos, vínculos,
imágenes, 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, tamaño de fuente, justificación de texto, posición, etc.
El CSS fue publicado en 1996 por la W3C, actualmente se encuentra en la

versión 3.0 en la que se pueden generar animaciones, además de incluir más
propiedades para modificar.
1.1. Estructuración 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.
Declaración=Especifica la modificación
visual que se le hará al selector.
La declaración indica cual es la

modificación 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:
Unión de parejas Separación de pares
Selector { propiedad : valor ; }

Selector Declaración
Reglas CSS
Especificación de los términos de la gráfica.
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.
Declaración: Se compone en pareja propiedad: valor donde indica que se

modifica en el selector, una declaración puede contener más de una pareja
propiedad: valor separándose entre ellas por un punto y coma(;).
Propiedad: Es la característica a modificar en el selector ejemplo (color),

cuando una propiedad tiene un nombre con más de una palabra se separa por
guión (font-family).
Valor: Establece el nuevo valor de la propiedad modificada ejemplo (color:

verde).
Veamos la siguiente gráfica 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 Declaración
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 extensión

(.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 guardándolo con

la extensión .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 funcionarán para ese documento
HTML en específico.
<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, sería casi que modificar etiqueta por etiqueta similar al HTML, se debe usar
el atributo style con el que cuenta la mayoría 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 márgenes y medidas que traen por defecto. Ejemplo:
*{
margin:0px;
padding:0px
}
Aunque utilizarlo es fácil, no es muy común usarlo ya que es poco probable que
una regla sea necesaria para todos los elementos.
1.3.2. Selector de Etiqueta.
Es el más común a utilizar ya que todas las etiquetas HTML pueden ser
seleccionadas para su modificación, la regla CSS se aplicará automáticamente
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 continuación se aclararán los términos 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 sólo indicamos el nombre de la etiqueta sin los
símbolos <>.

Luego en el documento HTML al usar la etiqueta <p> en cada párrafo ya estará
la modificación 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 podría resumir agrupando selectores separándolos 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 explícitamente 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 través del atributo class que contienen la
mayoría de las etiquetas.
<p class=“resaltado”> este párrafo a diferencia de los otros esta

resaltado</p>
<p>este párrafo vuelve a ser normal</p>
<p class=“resaltado”> este otro párrafo vuelve a estar
resaltado</p>

1.3.4. Selectores ID.
son reglas aplicables sólo 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 página a través 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 línea (inline).
Elementos Bloque: la principal característica es que son mostrados con un salto

de línea antes y después. También pueden tener anidados otros elementos de
bloque y/o elementos en línea.
Etiquetas Bloque más comunes: <p>, <ul>, <ol>, <h1-h6>, <fieldset>,

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

texto, los elementos en línea sólo deberían tener anidados otros elementos en
línea.
Etiquetas Inline más comunes: <a>, <br>, <span>, <img>, <tt>, <i> ,<b>
entre otras.
Nota: Esta diferencia no es tan marcada en HTML5.

Ejemplo de aplicación 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 tipografía.
FONT-VARIANT: Estilo alternativo de letra.
FONT-SIZE: Establece el tamaño de la fuente.
FONT-STYLE: Establece el estilo de la fuente.

COLOR: Modifica el color de texto.
TEXT-DECORATION: Implementa una decoración en el texto.
LINE-HEIGHT: Especifica el alto de línea.
TEXT-TRANSFORM: Controla la capitalización de texto.
FONT-FAMILY:
Especifica la tipografía 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 genérica.
Si el nombre de la fuente tiene más 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 más 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 tipografía según 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 tipografía que está en minúscula a mayúscula y si

estuviera en mayúscula la hace un poco más grande.
Ejemplo:
p{font-variant:small-caps;}
FONT-SIZE:
Establece el tamaño de la fuente

especificando el valor numérico 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 numéricos: A los valores

numéricos se les puede
especificar el tamaño de la
unidad (en Pixeles (px),
Porcentaje (%), puntos (pt) y
emes (em)).

Ejemplo:
p{font-size:9px;}
Muestras:
Nota: es ideal manejar los tamaños 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 presentación de la fuente sus posibles valores normal, italic,

oblique:
Normal: Valor por defecto.
Italic: Texto en itálica.
Oblique: Oblicuo, este es muy similar a la itálica.
Ejemplo:
p{font-style:italic;}
COLOR:
cambia el color de texto según el valor, los valores se pueden ingresar de tres
formas: Nombre en inglés, hexadecimal o los valores en rgb.

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

una línea superior y ninguna decoración.
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 línea de texto según el valor suministrado, el cual se puede

especificar con números, números y la medida en (px,pt,%,em).
Si se pone como valor “normal” regresa al alto de línea por defecto.
Ejemplo
p{line-height:30px;}
TEXT-TRANSFORM:
Modifica la capitulación del texto según el valor.
Los valores son:
· none: Valor por defecto.

· capitalize: Transforma la primera letra de cada palabra en mayúscula

· uppercase: Transforma todos los caracteres en mayúsculas.
· lowercase: Transforma tolos los caracteres a minúscula.
Ejemplo:
p{text-transform:lowercase;}
- EJERCICIO DE APLICACIÓN CSS.
Crear una clase por propiedad anteriormente vista y luego aplicarlas en

párrafos de texto.
Ejemplo de una aplicación.
<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 alineación vertical de un elemento.
TEXT-ALIGN: Especifica la alineación horizontal del texto en un elemento.
TEXT-INDENT: Especifica la sangría de la primera línea 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

según el valor que tenga.
El valor se especifica por medio de números 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 según el valor que tenga.
El valor se especifica por medio de números y sus unidades en (px,pt,cm,em).
Ejemplo:
p{letter-spacing:4em;}
VERTICAL-ALIGN:
Establece la alineación vertical de un

elemento según su valor tomando como
referencia el contenedor del elemento.
Sus posibles valores son:
· Longitud en números: números y sus

unidades en (px,%,cm,em).
· Baseline: Alinear la línea base del

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

el subíndice.

· Super: Alinea el elemento como lo fue el superíndice.
· Top: La parte superior del elemento se alinea con la parte superior del
elemento más alto en la línea.
· 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 justificación del texto según su valor.
Los posibles valores son: left, right, center y justify.
Ejemplo:
p{text-align:justify;}
TEXT-INDENT:
especifica la sangría de la primera línea en un texto de bloque según su valor en

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

WHITE-SPACE:
Controla los espacios en blanco de un texto según sus valores.
Los valores que maneja son estos.
· Normal: comportamiento por defecto.
· Pre: se respetan los espacios en blanco y las nuevas líneas. Si la línea es

muy larga, se sale del espacio asignado para ese contenido.
· Nowrap: elimina los espacios en blanco y las nuevas líneas. Si la línea es

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

ajustando cada línea al espacio asignado para ese contenido.
· Pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero
ajustando cada línea al espacio asignado para ese contenido.
Ejemplo:
p{white-space:pre-line;}
DISPLAY:
Cambia el comportamiento del elemento HTML, según lo indique el valor.
Entre sus valores más 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 APLICACIÓN CSS
Crear una clase por propiedad anteriormente vista y luego aplicarlas en

párrafos 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 viñeta.
LIST-STYLE-POSITION: especifica si la viñeta es interior o exterior de la

caja de contenido.
LIST-STYLE-TYPE:
Especifica el estilo de viñeta que tendrá la lista según el valor indicado.
Los posibles valores son:

· None: No muestra ninguna viñeta en la lista.
Valores gráficos:
· Disc: Muestra un círculo relleno, este es el valor por defecto del <ul>.
· Circle: Muestra un círculo sin relleno.
· Square: Muestra un pequeño cuadro.
Valores numéricos:
· Decimal: El marcador de viñeta es un número, es el valor por defecto del

<ol>.
· Decimal-leading-zero: El marcador de viñeta 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 numeración armenia.
· Georgian: El marcador es la numeración georgiana.
· Hebrew: El marcador es la numeración Hebrea.
· Hiragana: El marcador es la numeración Hiragana.
· Katakana: El marcador es la numeración Katana.
I, II, III, IV, V, VI, VII,

Valores alfanuméricos:
· Upper-latin: El marcador son caracteres latinos en mayúscula.
· Lower-alpha: El marcador son caracteres alfabéticos en minúscula.
· Lower-greek: El marcador son caracteres griegos.
· Lower-latin: El marcador son caracteres latinos en minúscula.
· Upper-alpha: El marcador son caracteres alfabéticos en mayúscula.
Ejemplo.
ol{list-style-type:lower-alpha;}
LIST-STYLE-IMAGE:
Permite reemplazar las viñetas 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 viñetas en la parte exterior o inferior según el valor indicado.
· Inside: Viñeta interior.
· Outside: Viñeta Exterior.

Outside: botón 1 Inside: botón 1
botón 2 botón 2
botón 3 botón 3
Ejemplo.
ul{list-style-position: inside;}
- EJERCICIO DE APLICACIÓN 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 repetición 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 posición de la imagen de fondo.
BACKGROUND-COLOR:
Define el color de fondo de la mayoría de los elementos HTML según el valor.
Las 3 formas más utilizadas para indicar el color son:

body{background-color:#006633;}/*hexadecimal*/
h3{background-color:red;}/*nombre en inglés*/
ul{background-color:rgb(13,255,0);}/*valor en rgb*/
Ejemplo:
p{background-color:#446633;}
BACKGROUND-IMAGE:
Establece una o varias imágenes de fondo en un elemento HTML.
El fondo de un elemento es el tamaño 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 más 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 más pequeña 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 repetición de la imagen de fondo según 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 repitiéndose 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 repitiéndose 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 estático, aunque se desplace el contenido de la

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

página.
Ejemplo:
body{
background-image:url(dracula.jpg);
background-attachment:fixed;
}
BACKGROUND-POSITION:
Controla la posición de la imagen de fondo, según 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 gráficos:
Left top. Left center. Left bottom.
Right top. Right center. Right bottom.
Center top. Center center. Center bottom.
También se pueden pasar los valores por coordenadas en (Pixeles “px” o

Porcentajes “%”) donde el primer valor será la posición horizontal y el segundo
valor la posición vertical.
Ejemplo:
body
{
background-image:url('bola.gif');
background-repeat:no-repeat;
background-position: 10px 200px;
}
Posición Horizontal (x). Posición 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 márgenes 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 automática.
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 automática.
Ejemplo:
p{height:300px;}
Ejemplo combinando width y height:

p{
width:100px; Este es un
height:100px; párrafo 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
También se puede especificar cuánto de margen se quiere en cada lado, dándole

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 según el valor en (Pixel,

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

Margin-bottom: Especifica la margen inferior del elemento según el valor en

Margin-left: Especifica la margen izquierda del elemento según 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
También se puede especificar cuánto de relleno se quiere en cada lado, dándole

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 según el valor en (Pixel,

Padding-right: Especifica el relleno derecha del elemento según el valor en

Padding-bottom: Especifica el relleno inferior del elemento según el valor en

Padding-left: Especifica el relleno del elemento según 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 especificándole el color, estilo y tamaño

del borde separados por un espacio, en caso que no especifique alguno de los
tres valores, CSS le dará un valor por defecto, el tamaño del borde aumenta el
alto y ancho del elemento HTML.
Ejemplo:
Grosor. Color. Estilo de Borde.
p{border:5px #006666 solid;}
Párrafo con borde.
Si no se declaran algunos de los valores, CSS lo pondrá por defecto.
En el siguiente ejemplo pondrá el valor de tamaño de manera automática.
Color. Estilo de Borde.
p{border:#FF0000 solid;}
Párrafo 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 ningún borde.
-Hidden: Esconde los bordes, su visualización en

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

recta continua.

-Double: Borde doble, formado por dos líneas 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 más
segmentada.
Border-style: Define el estilo de borde según el valor (none, solid, inset, ouset,
dotte, etc).
Border-color: Define el color del borde según el valor; se pueden pasar los
valores en: Ingles, valor RGB o Hexadecimal.
Border-widht: Define el ancho de borde según el valor, este se puede pasar en

medidas (px, em, pt, etc) o con valores predeterminados:
· Thin: línea delgada.

· Medium: línea mediana.
· Thick: línea 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 según 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 posición, 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 actualización de la versión del lenguaje CSS, que permite crear
diseños más dinámicos y elaborados, ofrece más soporte a diferentes
necesidades web.
EL CSS 3, trae nuevos mecanismos y propiedades que permiten un mayor

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

tales como:
· Fondos y bordes.
· Modelado de cajas.
· Aplicaciones de texto.
· Transformaciones 2d y 3d.
· Animaciones.
· Múltiples 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 actualización 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 rápida actualización de los navegadores, hace que estos prefijos no
sean necesarios, igual es recomendable manejarlos porque muchos usuarios no
cuentan con la última actualización 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 mayoría 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 imágenes de fondo en un mismo contenedor, a

través de la propiedad background o background-image, solo se tienen que
escribir los valores de las diferentes imágenes 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 utilizarán dos imágenes como fondo en el body.
Imagen 1 (avion.png) Imagen 2 (nubes_h.png)
Código CSS:
Imagen 1.
body{
background:url(avion.png) top right no-repeat,
url(nubes_h.png) repeat-x;
}
Imagen 2.
Resultado Navegador:
Nota: Las imágenes 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

imágenes 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 Código:
#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
máscara 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 tamaño de la imagen de fondo según el valor de la propiedad.
El valor del tamaño 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 tamaño necesario

para cubrir todo el contenedor donde se
está especificando el background-image.
CONTAIN:
Escala la imagen al tamaño 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 fácil 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 específicas 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 creación 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 están 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

repetición;
Ruta Imagen. Ancho Imagen.
border-image:url(border.jpg)30 30 repeat;
Desplazamiento interno de la imagen. Repetición.

-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 práctica 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 práctica entender bien el comportamiento, se recomienda usar como
valor el ancho de la imagen).
-Cuarto valor ouset (desbordamiento):
-Quinto valor repeat (repetición): establece la forma de repetición 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 repetición).
-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 tamaño para que se establezcan los mosaicos necesarios.
Ejemplo:
Imagen (florLis.png).
30px Ancho, 30px Alto.
Código:
#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 además cuenta con unas propiedades independientes para cada uno de
los valores del borde.(todavía 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 más alla del elemento.
-Border-image-repeat: Especifica el modo de repetición 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
posición;
Sombra Vertical. Difuminar. Posición sombra.
box-shadow:2px 10px 10px 10px #333 inset;
Sombra Horizontal. Desenfoque. Color.
-Primer valor (sombra horizontal) : Establece la posición de la sombra

horizontal en medidas web.
-Segundo valor (sombra vertical) : Establece la posición 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 inglés.
-Sexto valor (posición 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.
Código:
#DivCaja{ Vista código.

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 pasaría a verse más 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 títulos más no para bloques de texto. A
la fecha de la creación 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 posición de la sombra horizontal

en medidas web.
Segundo valor (sombra vertical) : Establece la posición 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 inglés.
Código:
h1{
text-shadow:2px 3px 1px rgb(255,0,0);
}

Vista navegador:
Conociendo más sobre CSS

Nota: si el nivel del blur es muy alto pasaría a verse más como un resplandor.
2.4.2. Word-wrap.
En ocasiones el texto de una página web contiene palabras muy largas que no
caben en su contenedor y se desbordan de manera horizontal o modificar el
tamaño de ancho de la caja.
Ejemplo: Si una persona

grita,
haaaaaaaaaaaaaaa!!!
Esto puede dañar la maquetación de la página.
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

renglón para no romper con la caja.
Ejemplo Código: 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 más 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 Código:
.claseRecorte{
width:150px;
border:#000000 1px solid;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2.4.4 @font-face.
Si la fuente tipográfica utilizada en el diseño 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 diseños tipográficos se limitaban a las fuentes estándar que
se encuentran en la mayoría de los computadores.
Con CSS3, los diseñadores Web pueden utilizar cualquier tipo de fuente que el
diseño 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
serán utilizadas en el documento,
permitiendo enriquecer el diseño y
funcionalidad.
Firefox, Chrome, Safari, Opera

permiten fuentes de extensión. .Ttf
(True Type Fonts) y .Otf (fuentes
OpenType).
Internet Explorer 9 sólo 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

continuación 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 través 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 diseñar 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 específico según los valores

otorgados a la izquierda (“X”) y superior (“Y”).
Código:
#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 representación de la vista del navegador se

mostrará el elemento original de forma opaca para hacer la comparación 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 según 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 abreviación de degrees

(grados en inglés).
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 tamaño del elemento según los valores especificados

(x,y).
El valor se especifica en números enteros, este número indica cuantas veces

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

Código:
#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 según los valores dados en el eje horizontal “X” y el eje
vertical “Y”.

Código:
#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 método matriz permite combinar varios de los valores de transform, se le

deben pasar 6 valores numéricos.
Los primeros valores son de modificación de escala y los últimos de posición.

(Practica modificando el css para ver diferentes resultados).
Los últimos dos valores requieren las medidas en pixeles, solo para firefox.
Código:
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 método transform también permite modificar el eje “Z” de la profundidad el

cual visualmente le agrega un efecto 3d.
Permite que la rotación 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 creación de este documento (2012), no funcionan

para OPERA y EXPLORER.
RotateX (numero+deg)
Rota al elemento en su propio eje “x”, según el valor especificado.

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”, según el valor especificado.

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
también se especifica el eje “z”.
Estos valores a la fecha de la creación de este documento (2012), no son

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

especifico según el valor otorgado en el eje “X”.
TranslateY (valor Y ): Traslada al elemento de su punto original al punto

especifico según el valor otorgado en el eje “Y”.

TranslateZ (valor Z ): Traslada al elemento de su punto original al punto
especifico según el valor otorgado en el eje “Z”.
Translate3d(valor X, valor Y, valor Z):Traslada al elemento de su punto original

al punto específico según los valores otorgados a la izquierda (“X”), superior
(“Y”) y profundidad (“Z”).
ScaleX(valor X): Aumenta o disminuye el tamaño del elemento según el valor

otorgado en ancho. (Eje “X”).
ScaleY(valor Y): Aumenta o disminuye el tamaño del elemento según el valor

otorgado en alto. (Eje “Y”).
ScaleZ(valor Z): Aumenta o disminuye el tamaño del elemento según el valor

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

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

especificado. Al valor se le debe agregar la palabra deg que es la abreviación de
degrees (grados en inglés).
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 sólo afecta a la
perspectiva 3D de elementos transformados.
La propiedad perspective a la fecha de la

creación de este documento (2012) solo es
compatible con CHROME y SAFARY a través
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 automáticos o desencadenados

por el usuario, es decir el evento de un click sobre un elemento puede
desencadenar una transición.
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 duración del efecto. (Si la duración no se especifica, la

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

ejemplo muy común de cambio de propiedad CSS sería cuando un usuario pasa
el ratón sobre un elemento (div:hover).
Ejemplo de uso:
Se crea un div y se especifica que la transición 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;
}
Simulación de transición.
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 transición.

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

aplicará una transición al momento del cambio.
Modo de uso
Transition: propiedad duración (estilo de efecto

“opcional”) (retardo “opcional”);
Se especifica la propiedad, la duración de la

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

cuenta con una propiedad específica 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

transición, si la propiedad no sufre ninguna modificación la transición nunca se
ejecutará.
transition-duration Especifica cuál será el tiempo de duración de la transición.

Es necesario que ambas propiedades transition-property y transition-duration
estén 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 transición.
Linear: El efecto de transición tiene Ease-out: El efecto de transición

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 transición
Ease: El efecto de transición tiene un tiene un comienzo y final lento
comienzo lento, luego rápido 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 transición tiene definir la curva de velocidad por
un comienzo lento (equivalente en parte del programador, con valores
cubic-bezier (0.42,0,1,1)). numéricos entre un rango de 0 y 1.
2.7.4 Transition-delay.
Específica el tiempo de espera para iniciar la transición una vez se ha

presentado el evento. Es decir retarda el inicio de la transición según el valor en
segundos.

Ejemplo:
#caja1{
width:100px;
height:100px;
background-color:green;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
}
La transición 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 animación en CSS es por fotogramas claves, es decir que en la

programación se indica el punto clave de la animación y el código completará la
secuencia automáticamente.
Ejemplo, se determina el punto inicial y punto final de la animación, el

navegador se encarga de completar la secuencia de transición.
Fotograma Fotograma
Clave. Clave.
Los fotogramas clave le indican a la animación qué cambios debe tener, en este
caso tenemos un fotograma clave que indica cómo se inicia y un fotograma
clave indicando como termina, como resultado se tiene un círculo que se
desplaza de un lado a otro cambiando de color.
Si indicamos más fotogramas claves la animación tendrá más movimientos y

transiciones y se hará más compleja.

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

claves, luego se implementan en algún selector para poder ejecutar la
animación.
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, también llevarán llaves
({}) interiores por lo que se debe tener mucho cuidado al abrir y cerrar llaves.

Su creación también 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 Animación.
@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

animación.
To: Es el fotograma final, las propiedades con las que termina la

animación.
Dado el caso que se necesiten más fotogramas, se especifican con el valor en

porcentaje.
El valor del porcentaje indica a partir de qué momento en la animación se

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

Animación.
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:red;}
}
En el código anterior indicamos en que porcentaje de la animación se presentan

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

También 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 animación en el

selector que se quiere implementar la propiedad animation.
2.8.2. Animation.
animation es la propiedad que define cual animación 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: nombreAnimación Duración (estilo de efecto “opcional”) (retardo

“opcional”) (repetición “opcional”) (flujo de Dirección “opcional”);
La duración se especifica con valores numéricos seguidos de letra (“s”) para

segundo o las letras (“ms”) para milisegundos.
Duración. Retardo. Flujo de Dirección.
animation:myFirst 5s linear 1s 3 alternate;
Nombre Animación. Estilo de efecto Repetición.
Como mínimo se tienen que declarar dos valores en animation, cual es la

animación y cuál es su duración.
Nota: si la propiedad animation no tiene una duración especificada, no se

reproducirá, porque el valor por defecto es 0.
Ejemplo:
/*Se crea la animación*/

@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 animación 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 animación será cambio de color y durara 4 segundos*/
}

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

elemento y animation-duration define cuántos segundos (s) o milisegundos
(ms) debe durar la animación al completar un ciclo.
Animation-duration: se le indica el valor en números 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 animación.

Linear: El efecto de transición tiene Ease-out: El efecto de transición

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 transición
Ease: El efecto de transición tiene un tiene un comienzo y final lento
comienzo lento, luego rápido 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 transición tiene definir la curva de velocidad por
un comienzo lento (equivalente en parte del programador, con valores
cubic-bezier (0.42,0,1,1)). numéricos 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.
Específica cuánto debe ser la espera para iniciar la animación, se le indica el

valor en números 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 animación comienza después de 4 segundos*/
}
#cuadro{
position:relative;
width:500px;
height:300px;
-moz-animation-delay:4s;

2.8.6. Animation-iteration-count.
Indica cuántas veces debe reproducirse la animación, tiene dos formas de

especificar la cantidad de repeticiones.
Valor numérico (2,3,4…etc): se indica el número de veces que se repite la

animación.
infinite: se repite infinitamente la animación.
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 animación se reproducirá dos veces */
}
2.8.7 Animation-direction.
Especifica si la animación debe revertirse. Tiene dos posibles valores.
normal: valor por defecto, la animación transcurre en su flujo normal.
alternate: la animación correrá en reversa en una vez terminada la animación

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

Inicial. de Animación. Final.

animation-direction:alternate;
Fotograma
Inicial. Mitad
de Animación.
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 animación debe

repetirse más de una vez.
2.8.8. Animation-play-state.
La propiedad de animación-play-state especifica si la animación está en

ejecución o en pausa, tiene dos valores:

Paused: la animación se detiene.
Running: la animación 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 múltiples.
En Css3 se puede crear texto de varias

columnas estilos periódicos sin tener
que recurrir a varios divs o tablas,
simplemente utilizando las propiedades
de manejo de columnas múltiples.
Propiedades de columnas múltiples:
· Column-count.
· Column-gap.
· Column-rule.
Las propiedades de columnas múltiples

a la fecha de la creación 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 número de columnas en el que debe ser dividido el texto, se puede

aplicar a párrafos desde una clase o a un elemento que contenga varios
párrafos.

Ejemplo código:
#caja{
-moz-column-count:3;
width:800px;
text-align:justify;
}
2.9.2. Column-gap.
La propiedad column-gap específica la separación entre las columnas, es decir

se puede modificar el tamaño del medianil.
Ejemplo código:
#caja{
-moz-column-gap:10px;
width:800px;
text-align:justify;
}
Vista en el navegador, en este caso la separación entre columnas es de 10

pixeles.

sdnajsdnlkasjndlkajsnfksna sdnajsdnlkasjndlkajsnfksna
dlfknasdlñkfsdnajsdnlkasjnd dlfknasdlñkfsdnajsdnlkasjnd
lkajsnfksnadlfknasdlñkfsdna lkajsnfksnadlfknasdlñkfsdna
2.9.3. Column-rule.
jsdnlkasjndlkajsnfksnadlfkn jsdnlkasjndlkajsnfksnadlfkn
asdlñkfsdnajsdnlkasjndlkajs asdlñkfsdnajsdnlkasjndlkajs
nfksnadlfknasdlñkfsdnajsdn nfksnadlfknasdlñkfsdnajsdn
lkasjndlkajsnfksnadlfknasdl lkasjndlkajsnfksnadlfknasdl
ñkfsdnajsdnlkasjndlkajsnfks ñkfsdnajsdnlkasjndlkajsnfks
nadlfknasdlñkfsdnajsdnlkasj nadlfknasdlñkfsdnajsdnlkasj
ndlkajsnfksnadlfknasdlñkfsd ndlkajsnfksnadlfknasdlñkfsd
najsdnlkasjndlkajsnfksnadlf najsdnlkasjndlkajsnfksnadlf
knasdlñkfsdnajsdnlkasjndlk knasdlñkfsdnajsdnlkasjndlk
ajsnfksnadlfknasdlñkfsdnajs ajsnfksnadlfknasdlñkfsdnajs
Esta es la manera rápida de
modificar el ancho, el estilo y
color del espacio que se
encuentra entre las columnas
(medianil).
Sintaxis:
column-rule: ancho estilo color;
Ejemplo código:
#caja{
-moz-column-rule:3px solid #ff0000; /* Firefox */
width:800px;
text-align:justify;
}

2.9.4. Column-rule-width.
Específica 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
montaría en el texto.
Sintaxis
column-rule-width: valor|thin|medium|thick;
Valor: se especifica el valor en medidas web.
Thin: Define una línea delgada.
Medium: Define una línea de grosor medio.
Thick: Define una línea 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 ningún -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.
visualización 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 línea recta continua.
-Outset: Borde saliente, hacer
-Double: Borde doble, formado por parecer al elemento que tiene el
dos líneas 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 inglés, 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 cuántas 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 título del artículo.
La propiedad column-span a la fecha de la creación 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 código:
#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

número 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 automática el navegador (valor por

defecto).
Ejemplo código:
#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 Código:
Se harán tres divs con las mismas características 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 símbolo de "llave de
apertura" ({), otra parte denominada "declaración" y por último, un símbolo de
"llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaración: especifica los estilos que se aplican a los elementos. Está

compuesta por una o más propiedades CSS.
Propiedad: característica que se modifica en el elemento seleccionado, como

por ejemplo su tamaño de letra, su color de fondo, etc.
Valor: establece el nuevo valor de la característica modificada en el elemento.

Bibliografía.
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 Diseño 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, Formación para desarrolladores, recuperado el 15 de

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

Actividades de Afianzamiento.
Luego de haber estudiado detenidamente la información de este objeto de

aprendizaje, lea cuidadosamente y resuelva las siguientes preguntas de
selección múltiple con única respuesta.
1. @font-face se utiliza para
a. Incluir imágenes 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 código
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.
Construcción Objeto De Aprendizaje.
INTRODUCCIÓN CSS.
Experto Temático: Jesualdo Morantes Meza.
Asesor Pedagógico: Luis Antonio Suárez Martínez.

Maria Teresa Camargo Serrano.
Producción Multimedia: Oscar Ivan Uribe Ortiz.
Programador: Roberto Chajin Ortiz.
Líder Experto Temático: Tatiana Acosta Patiño.
Líder línea de producción: Santiago Lozada Garcés.

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
páginas de web profesionales, separar los contenidos y aspecto gráficos
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 visualización del mismo
documento en diferentes dispositivos como (pc, tablets, dispositivos móviles,
etc).
En este OVA aprenderás los conceptos básicos de CSS con todos sus elementos,
estructuras y correcta aplicación junto a las novedades que permite la versión
CSS3.
2013
Introducción CSS

Introduccion Css

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion Css

Cargado por

Copyright:

Formatos disponibles

Fase Desarrollo 2016 Introducción CSS

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

Pag 2 Introducción CSS

1.1 Estructura CSS.

2.1 Compatibilidad de CSS3 con los navegadores.

Pag 3 Introducción CSS

Función de CSS en el diseño web

con como tipo de como

Pag 4 Introducción 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. Estructuración del CSS.

El CSS se trabaja por medio de reglas

Selector= Determina a que parte del

La declaración indica cual es la

Pag 5 Introducción CSS

Unión de parejas Separación de pares

Selector { propiedad : valor ; }

Especificación de los términos de la gráfica.

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

Declaración: Se compone en pareja propiedad: valor donde indica que se

Propiedad: Es la característica 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 Introducción 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 extensión

<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 guardándolo con

1.2.2. Estilos CSS Incrustados en el <head>.

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

Pag 7 Introducción 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.

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

CSS Modificamos el color de la etiqueta <p>.

Pag 8 Introducción CSS

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

Lo anterior se podría resumir agrupando selectores separándolos 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 párrafo a diferencia de los otros esta

Pag 9 Introducción CSS

El selector de ID permite seleccionar un elemento de la página a través del valor

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

Para crearlo es así

#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 característica es que son mostrados con un salto

Etiquetas Bloque más comunes: <p>, <ul>, <ol>, <h1-h6>, <fieldset>,

Elementos en Línea: son mostrados en el lugar que aparecen en el flujo del

Nota: Esta diferencia no es tan marcada en HTML5.

Pag 10 Introducción CSS

1.5. Propiedades CSS.