Introducción CSS. Introducción CSS - Introducción CSS

Transcripción

1 2013 -

2 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

3 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 CSS Compatibilidad de CSS3 con los navegadores. 2.2 Background CSS Border. 2.4 Text. 2.5 Transform. 2.6 Perspectiva en CSS Transiciones en CSS Animaciones en CSS Columnas múltiples Opacity. Glosario. Bibliografía. Actividades de Afianzamiento. Pag 3

4 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

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

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

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

8 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 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 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 p {color:#ff0000; Modificamos el color de la etiqueta <p>. 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

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

10 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

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

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

13 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; c o l o r I n g l e s { c o l o r : r e d ; 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 valores n u m é r i c o s s e l e s p u e d e especificar el tamaño de la unidad (en Pixeles (px), Porcentaje (%), puntos (pt) y emes (em)). Pag 13

14 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

15 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

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

17 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

18 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

19 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

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

21 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

22 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. Ejemplo: Item 1 Item 2 Item 3 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

23 Outside: botón 1 botón 2 botón 3 Inside: 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

24 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

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

26 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

27 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

28 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

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

30 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

31 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). {margin:40px 50px 70px 30px; 40px Superior. Derecha. Inferior. Izquierda. 30px Elemento HTML 50px 70px Pag 31

32 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

33 {padding:20px; 20px Elemento HTML con 20 px Padding. 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). 20px {padding:10px 40px 30px 70px; 10px 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

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

35 -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-top: Define el borde del elemento HTML solo en el lado superior. -Border-right: Define el borde del elemento HTML solo en el lado derecho. -Border-bottom: Define el borde del elemento HTML solo en el lado inferior. Pag 35

36 -Border-left-style: Define el estilo de borde solo en el lado izquierdo. -Border-left-color: Define el color de borde solo en el lado izquierdo. -Border-left-width: Define el ancho de borde solo en el lado izquierdo. -Border-right-style: Define el estilo de borde solo en el lado derecho. -Border-right-color: Define el color de borde solo en el lado derecho. -Border-right-width: Define el ancho de borde solo en el lado derecho. -Border-top-style: Define el estilo de borde solo en el lado superior. -Border-top-color: Define el color de borde solo en el lado superior. -Border-top-width: Define el ancho de borde solo en el lado superior. -Border-bottom-style: Define el estilo de borde solo en el lado inferior. -Border-bottom-color: Define el color de borde solo en el lado inferior. -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

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

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

39 -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 CSS Background CSS3. Nuevas propiedades de manejo de fondos. Multiples fondos en CSS. Background-origin. Background-clip. Background-size 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

40 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

41 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

42 VISTA EN EL NAVEGADOR 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

43 VISTA EN EL NAVEGADOR 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

44 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 Border. Nuevas propiedades de manejo de borde. Border-radius. Border-image. Box-shadow 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

45 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

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

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

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

49 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

50 2.4. Text. Nuevas propiedades de manejo de texto: Text-shadow Word-wrap 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

51 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 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:.cuadro{ width:100px; height:100px; border:1px solid #000; word-wrap:break-word; Vista Navegador: Si una persona grita, haaaaaaaaaaaaa aa!!! Pag 51

52 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:# px solid; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 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 permite vincular una fuente que se encuentre en un servidor, para luego ser descargada en el navegador del usuario, cuando sea necesaria. Pag 52

53 @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 es la siguiente. Primero se define un nombre de la fuente (Por Ejemplo: continuación de esto se selecciona el archivo. MiFuente), { 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) Transform. CSS3 permite transformar las cajas y su contenido, para diseñar nuevos efectos visuales, con el uso de la propiedad transform. Pag 53

54 Los valores de la propiedad transform son: Translate(valorX, valory). Rotate(numerodeg). Scale(valorX, valory). Skew(value). Matrix(value) 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

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

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

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

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

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

60 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) Perspectiva 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

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

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

63 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

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

65 #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 */ 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 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

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

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

68 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. Propiedad mianimacion { from {background-color:#ff0000; to {background-color:#0000ff; Propiedad Final. Propiedades a Animar. CSS cuenta con dos palabras clave a la hora de 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 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

69 También se puede declarar mezclando los porcentajes y el (from, to). mianimacion{ from {background:red; 30% {background:yellow; 73% {background:blue; to mianimacion { from {background:red; 30% {background:yellow; 73% {background:blue; to mianimacion { from {background:red; 25% {background:yellow; 50% {background:blue; to 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 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

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

71 Animation-name y animation-duration. animation-name llama a la 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; 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)). 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. Pag 71

72 Ejemplo: #cuadro{ position:relative; width:500px; height:300px; -moz-animation-name:myanimation; -moz-animation-duration:5s; -moz-animation-timing-function:ease-in; 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

73 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 */ 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. Mitad de Animación. Fotograma Final. Pag 73

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

75 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") 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) 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

76 Ejemplo código: #caja{ -moz-column-count:3; width:800px; text-align:justify; Vista en el navegador: 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

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

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

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

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

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

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

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

84 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

85 Bibliografía. CSS Tutorial, En w3school, Escuela de desarrollo, Recuperado el 15 de junio de 2013, Dionible: Curso CSS3, En Cristalab, Recursos de Diseño Web, Recuperado el 15 de junio de 2013, Dionible: Manual de CSS3, En Desarrollo Web, Comunidad de desarrollo, Recuperado el 15 de junio de 2013, Dionible: CSS3, en Programandola, Formación para desarrolladores, recuperado el 15 de junio de Dionible: Pag 85

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

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

88 Control De Documento. Construcción Objeto De Aprendizaje. INTRODUCCIÓN CSS. Experto Temático: Asesor Pedagógico: Producción Multimedia: Programador: Líder Experto Temático: Líder línea de producción: Jesualdo Morantes Meza. Luis Antonio Suárez Martínez. Maria Teresa Camargo Serrano. Oscar Ivan Uribe Ortiz. Roberto Chajin Ortiz. Tatiana Acosta Patiño. Santiago Lozada Garcés. Pag 88