Intro css

Introducci贸n CSS

2013

S S C n 贸 i c c u d o r t n I S S C i贸n

Introducc

S S C n 贸 i c c u d o r Int

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 1.2 1.3 1.4 1.5

Estructura CSS. Formas de insertar CSS en un documento HTML. Selectores.

Etiquetas de tipo BLOQUE e INLINE. Propiedades CSS.

2. Novedades CSS3.

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10

Compatibilidad de CSS3 con los navegadores.

Background CSS3.

Border.

Text.

Transform.

Perspectiva en CSS3.

Transiciones en CSS3.

Animaciones en CSS3.

Columnas múltiples.

Opacity.

Glosario.

Bibliografía.

Actividades de Afianzamiento.

Pag 3

Introducción CSS

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.

Estilo CSS incrustado.

Estilos CSS inline.

Selector Universal.

Selector de Etiqueta.

Selector Clase.

Selector ID.

Bloque Inline.

Tipo.

Bloque.

Lista.

Fondo.

Borde.

Compatibilidad.

Background CSS3.

Border.

Text.

Transform.

Perspectiva en CSS3.

Transiciones en CSS3.

Animaciones en CSS3.

Columnas Múñtiples.

Opacity.

Pag 4

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

Pag 5

Introducción CSS

Estructura de la regla CSS: Unión de parejas

Separación de pares

Selector { propiedad : valor ; } Declaración

Selector

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

Pag 6

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

Pag 7

Introducción CSS

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

Pag 8

Introducción CSS

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>

Pag 9

Introducción CSS

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.

Pag 10

Introducción CSS

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.

Pag 11

Introducci贸n CSS

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: font-family: font-family: font-family: font-family:

Pag 12

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

Introducción CSS

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:

colorHexadecimal{color:#0099CC;} colorIngles{color:red;} colorRgb{color:rgb(0,255,0);}

Establece el tamaño de la fuente especificando el valor numérico o el valor en texto: Valores texto: small, medium, large, x-large, xx-large, x-small, xx-small, larger, smaller.

Valores numéricos: A los numéricos se les especificar el tamaño unidad (en Pixeles Porcentaje (%), puntos emes (em)).

Pag 13

Introducción CSS

valores puede de la (px), (pt) y

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.

Pag 14

Introducción CSS

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 Pag 15

Introducción CSS

· ·

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

Pag 16

Introducción CSS

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.

Pag 17

Introducción CSS

·

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

Pag 18

Introducción CSS

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

Introducción CSS

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

Pag 20

Introducción CSS

·

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,

Pag 21

Introducción CSS

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.

Sus posibles valores son: ·

Inside: Viñeta interior.

·

Outside: Viñeta Exterior.

Pag 22

Introducción CSS

Outside:

Inside:

botón 1 botón 2 botón 3

botón 1 botón 2 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.

Ejemplo de una aplicación. <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

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

Pag 24

Introducción CSS

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.

Pag 25

Imagen Original.

Contenedor background-image: url(”imagen.jpg”);

Imagen Original.

Contenedor background-image: url(”imagen2.jpg”);

Introducción 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 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; } Pag 26

Introducción CSS

Imagen repitiéndose 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

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

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

Introducción CSS

·

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

Pag 29

Posición Vertical (y).

Introducción CSS

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:

Pag 30

Introducciรณn CSS

p{ width:100px; height:100px; background-color:#00CC33; }

Este es un párrafo con 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

Pag 31

Introducción CSS

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

Margin-bottom: Especifica la margen inferior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Margin-left: Especifica la margen izquierda del elemento según 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 sin Padding.

Elemento HTML 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

Introducción CSS

20px

{padding:20px;}

20px

20px

Elemento HTML con 20 px Padding.

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

Padding-right: Especifica el relleno derecha del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Padding-bottom: Especifica el relleno inferior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

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

Introducción CSS

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.

Pag 34

Introducción CSS

-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 elemento HTML solo en el lado izquierdo.

-Border-right: Define el borde del elemento HTML solo en el lado derecho.

-Border-top: Define el borde del elemento HTML solo en el lado superior.

-Border-bottom: Define el borde del elemento HTML solo en el lado inferior.

Pag 35

Introducción CSS

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

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

-Border-left-color: Define el color de borde solo en el lado izquierdo.

-Border-top-color: Define el color de borde solo en el lado superior.

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

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

-Border-right-style: Define el estilo de borde solo en el lado derecho.

-Border-bottom-style: Define el estilo de borde solo en el lado inferior.

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

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

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

-Border-bottom-width: Define el 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.

Pag 36

Introducci贸n CSS

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.

Pag 37

Introducci贸n CSS

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.

Pag 38

Introducción CSS

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

Pag 39

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

Pag 40

Introducciรณn CSS

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

Pag 41

Introducción CSS

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.

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

Introducción CSS

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.

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

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

Pag 44

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

Introducci贸n CSS

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 repetición;

desplazamientoImagen(#) ancho desbordamiento

Ruta Imagen.

Ancho Imagen.

border-image:url(border.jpg)30 30 repeat; Desplazamiento interno de la imagen.

Pag 46

Repetición.

Introducción 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 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*/ } Pag 47

Introducción CSS

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;

Pag 48

Introducción CSS

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{ width:300px; height:100px; background-color:#CCC; padding:5px; box-shadow:12px 12px 2px 2px #039; }

Vista código.

Nota: si el nivel del blur es muy alto pasaría a verse más como un resplandor.

Pag 49

Introducción 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 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); } Pag 50

Introducción CSS

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; height:100px; border:1px solid #000; word-wrap:break-word; }

Pag 51

Introducción CSS

Si una persona grita, haaaaaaaaaaaaa aa!!!

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.

Pag 52

Introducción CSS

@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: continuación de esto se selecciona el archivo.

MiFuente), a

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

Pag 53

Introducción 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 específico según los valores otorgados a la izquierda (“X”) y superior (“Y”).

Código: #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 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.

Pag 54

Introducción CSS

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

Pag 55

Introducción CSS

Código: #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 según 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 abreviación de degrees (grados en inglés).

Código: #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

Introducción CSS

Vista en el navegador:

Original.

Transformado.

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

Introducción CSS

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.

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

Introducción CSS

LRotateY (numero+deg).

Rota al elemento en su propio eje “y”, 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).

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

Pag 59

Introducción CSS

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.

Pag 60

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

Introducci贸n 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 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).

Pag 62

Introducci贸n 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 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; } Vista en el navegador: 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.

Pag 63

Introducción CSS

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:

Pag 64

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

Los posibles valores son: Linear: El efecto de transición tiene la misma velocidad de principio a fin (equivalente en cubic-bezier (0,0,1,1)).

Ease: El efecto de transición tiene un comienzo lento, luego rápido y termina lentamente (equivalente en cubic-bezier (0.25,0.1,0.25,1)).

Ease-in: El efecto de transición tiene un comienzo lento (equivalente en cubic-bezier (0.42,0,1,1)).

Ease-out: El efecto de transición tiene un final lento (equivalente en cubic-bezier (0,0,0.58,1)).

Ease-in-out: El efecto de transición tiene un comienzo y final lento (equivalente en cubic-bezier (0.42,0,0.58,1)).

Cubic-bezier(n,n,n,n): Permite definir la curva de velocidad por parte del programador, con valores 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.

Pag 65

Introducción CSS

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

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

Pag 66

Introducción CSS

Fotograma Clave.

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

Pag 67

Introducción CSS

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, animación.

las propiedades con las que inicia la

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 Animación.

@keyframes colorFondo{ 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.

Pag 68

Introducción CSS

También 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 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).

Pag 69

Introducción CSS

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

Pag 70

Introducción CSS

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.

Los posibles valores son: Linear: El efecto de transición tiene la misma velocidad de principio a fin (equivalente en cubic-bezier (0,0,1,1)).

Ease: El efecto de transición tiene un comienzo lento, luego rápido y termina lentamente (equivalente en cubic-bezier (0.25,0.1,0.25,1)).

Ease-in: El efecto de transición tiene un comienzo lento (equivalente en cubic-bezier (0.42,0,1,1)).

Pag 71

Ease-out: El efecto de transición tiene un final lento (equivalente en cubic-bezier (0,0,0.58,1)).

Ease-in-out: El efecto de transición tiene un comienzo y final lento (equivalente en cubic-bezier (0.42,0,0.58,1)).

Cubic-bezier(n,n,n,n): Permite definir la curva de velocidad por parte del programador, con valores numéricos entre un rango de 0 y 1.

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

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-name:myanimation; -moz-animation-duration:6s; -moz-animation-timing-function:ease-in; -moz-animation-delay:4s; /*la animación comienza después 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

Introducción CSS

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

Pag 73

Mitad de Animación.

Introducción CSS

Fotograma 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: Pag 74

Introducción CSS

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.

Pag 75

Introducción CSS

Ejemplo código: #caja{ -moz-column-count:3; width:800px; text-align:justify; } Vista en el navegador:

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-count:3; -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.

Pag 76

Introducción CSS

sdnajsdnlkasjndlkajsnfksna dlfknasdlñkfsdnajsdnlkasjnd lkajsnfksnadlfknasdlñkfsdna jsdnlkasjndlkajsnfksnadlfkn asdlñkfsdnajsdnlkasjndlkajs nfksnadlfknasdlñkfsdnajsdn lkasjndlkajsnfksnadlfknasdl ñkfsdnajsdnlkasjndlkajsnfks nadlfknasdlñkfsdnajsdnlkasj ndlkajsnfksnadlfknasdlñkfsd najsdnlkasjndlkajsnfksnadlf knasdlñkfsdnajsdnlkasjndlk ajsnfksnadlfknasdlñkfsdnajs

sdnajsdnlkasjndlkajsnfksna dlfknasdlñkfsdnajsdnlkasjnd lkajsnfksnadlfknasdlñkfsdna jsdnlkasjndlkajsnfksnadlfkn asdlñkfsdnajsdnlkasjndlkajs nfksnadlfknasdlñkfsdnajsdn lkasjndlkajsnfksnadlfknasdl ñkfsdnajsdnlkasjndlkajsnfks nadlfknasdlñkfsdnajsdnlkasj ndlkajsnfksnadlfknasdlñkfsd najsdnlkasjndlkajsnfksnadlf knasdlñkfsdnajsdnlkasjndlk ajsnfksnadlfknasdlñkfsdnajs

2.9.3. Column-rule.

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

Pag 77

Introducción CSS

Vista en el navegador:

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.

Pag 78

Introducción CSS

Sintaxis: column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

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

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:

Pag 79

Introducción 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 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; } Pag 80

Introducción CSS

*/

Vista en el navegador:

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

Pag 81

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

va desde “0 “(total transparencia) y “1” (Sin

Ejemplo Código: Se harán tres divs con las mismas características solo se modificará la propiedad opacity.

Pag 82

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

Introducci贸n 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 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.

Pag 84

Introducción CSS

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/

Pag 85

Introducci贸n CSS

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. b. c. d.

Incluir imágenes por medio de CSS. Para definir la estructura del documento CSS. Para vincular fuentes desde el servidor al cliente.

Ninguna de la anteriores.

2. El prefijo –ms- que se usa para compatibilidad con el navegador a. b. c. d.

Google Crhome.

Mozilla Firefox.

Interene Explorer.

Safari.

3. La estructura correcta de una sentencia CSS es a. b. c. d.

Selector { propiedad:valor;}.

Propiedad{selecator:valor;}.

Selector { propiedad:valor}. { Selector = propiedad:valor;}.

4. Para hacer relacionar un documento CSS desde HTML se una la etiqueta a. b. c. d.

<file>. <css>. <src>. <link>.

Pag 86

Introducción CSS

5. El siguiente codigo CSS body{ color:red; bgcolor:#000;} nos muestra como resultado a. b. c. d.

El cuerpo del docuemnto color rojo y el texto color negro.

El cuerpo del documento color azul y el texto rojo.

El cuerpo del docuemnto color negro y el texto rojo.

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 <p>center. p{ text-align: center;}. p{ center: true;}.

Ninguna de la anteriores.

Respuestas: 1 (c). 2 (c). 3(a). 4(d). 5(c). 6(b).

a. b. c. d.

Pag 87

Introducci贸n CSS

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.

Pag 88

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