HTML 5

HTML 5
Qu es el HTML5?
HTML5 ser el nuevo estndar de HTML. La versin anterior de HTML, HTML 4.01, se produjo en 1999. La web ha cambiado mucho desde entonces. HTML5 es todava un trabajo en progreso. Sin embargo, los principales navegadores apoyan muchos de los elementos de HTML5 y nuevas APIs.
Cmo result HTML5 empezar?

HTML5 es una colaboracin entre el Consorcio World Wide Web (W3C) y la Red de hipertexto Aplicacin de Tecnologa del Grupo de Trabajo (WHATWG). WHATWG estaba trabajando con los formularios web y aplicaciones, y estaba trabajando con W3C XHTML 2.0. En 2006, decidieron cooperar y crear una nueva versin de HTML. Algunas reglas para HTML5 se establecieron:
Las nuevas caractersticas se basa en HTML, CSS, DOM y JavaScript Reducir la necesidad de plugins externos (como Flash) Mejor manejo de errores Ms marcado para reemplazar secuencias de comandos HTML5 debe ser independiente del dispositivo El proceso de desarrollo debe ser visible para el pblico
El HTML5 <! DOCTYPE>

En HTML5 hay una sola declaracin, y es muy simple <Vendor!>:
<!DOCTYPE html>
Documento HTML5 mnima

A continuacin se muestra un documento HTML5 simple, con el mnimo de etiquetas necesarias:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>
<body> The content of the document...... </body> </html>
HTML5 - Nuevas funciones

Algunas de las nuevas caractersticas ms interesantes de HTML5:
El elemento <canvas> para el dibujo 2D Los elementos <video> y <audio> para la reproduccin de medios Soporte para almacenamiento local Nuevos elementos de contenido especfico, como <article>, <footer>, <header>, <NAV>, <section> Los nuevos controles de formulario, como el calendario, la fecha, hora, direccin de correo electrnico, URL, bsqueda
Soporte del navegador para HTML5

HTML5 todava no es un estndar oficial, y no los navegadores tienen soporte HTML5 completo. Sin embargo, todos los principales navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer) continan agregando nuevas caractersticas HTML5 a sus ltimas versiones.
HTML5 Referencias
En W3Schools encontrar referencias completas acerca de las etiquetas, atributos globales, eventos estndar, y ms.
Nuevos elementos en HTML5

El Internet ha cambiado mucho desde HTML 4.01 convirti en un estndar en 1999. Hoy en da, algunos elementos de HTML 4.01 han quedado obsoletos, nunca utilizados, o no se usa la forma en que se pretende. Estos elementos se han eliminado o re-escrito en HTML5. Para manejar mejor el uso actual de Internet, HTML5 incluye nuevos elementos para una mejor estructura, un mejor manejo de formularios, el dibujo y el contenido de los medios de comunicacin.
Nuevos elementos semnticos / Estructural

HTML5 ofrece nuevos elementos para su estructura:
Etiqueta <article> <aside> <bdi> <comando> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <hora> <wbr>
Descripcin Define un artculo Define el contenido aparte del contenido de la pgina Asla una parte de texto que puede ser formateado en una direccin distinta de otro texto fuera de ella Define un botn de comando que un usuario puede invocar Define los detalles adicionales que el usuario puede ver o esconder Define un ttulo para un elemento visible <details> Especifica autnomo de contenido, como ilustraciones, diagramas, fotos, listados de cdigo, etc Define un ttulo para un elemento <figure> Define un pie de pgina de un documento o seccin Define un encabezado de un documento o seccin Agrupa un conjunto de elementos para <h1> <h6> cuando un ttulo tiene varios niveles Define el texto marcado / resaltado Define una medida escalar dentro de un rango conocido (a medida) Define vnculos de exploracin Representa el progreso de una tarea Define una anotacin ruby (para el Este de Asia tipografa) Define una explicacin / pronunciacin de los caracteres (para el Este de Asia tipografa) Define qu mostrar en navegadores que no soportan anotaciones ruby Define una seccin de un documento Define una fecha / hora Define un posible salto de lnea
Nuevos Elementos de Medios

HTML5 ofrece nuevos elementos para el contenido de los medios de comunicacin: Etiqueta <audio> <video> <source> <embed> <track> Descripcin Define el contenido de sonido Define un vdeo o una pelcula Define los recursos de medios mltiples para <video> y <audio> Define un contenedor para una aplicacin externa o contenido interactivo (plug-in) Define pistas de texto para <video> y <audio>
El elemento nuevo <canvas>

Etiqueta <canvas> Descripcin Se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript)
Nuevos elementos de formulario

HTML5 ofrece nuevos elementos de formulario, para una mayor funcionalidad: Etiqueta <datalist> <keygen> <output> Descripcin Especifica una lista de opciones predefinidas para los controles de entrada Define un campo generador de par de claves (para formularios) Define el resultado de un clculo
Elementos eliminados
Los siguientes elementos HTML 4.01 se quitan de HTML5:
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <NOFRAMES> <strike> <tt>
HTML5 Canvas
El elemento <canvas> se utiliza para dibujar grficos, sobre la marcha, en una pgina web. Dibuje un rectngulo rojo, un rectngulo degradado, un rectngulo multicolor, multicolor y un poco de texto en el lienzo:
Qu es el lienzo?
El elemento <canvas> HTML5 se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript). El elemento <canvas> es slo un contenedor para grficos. Se debe utilizar una secuencia de comandos para dibujar en realidad los grficos. Canvas tiene varios mtodos para rutas de dibujo, cajas, crculos, personajes e imgenes agregando.
Compatibilidad con exploradores
Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyar el elemento <canvas>. Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <canvas>.
Crear un lienzo
Un lienzo es un rea rectangular en una pgina HTML, y se especifica con el elemento <canvas>. Nota: De forma predeterminada, el elemento <canvas> no tiene borde y el contenido no. El marcado es el siguiente:
<canvas id="myCanvas" width="200" height="100"></canvas>

Nota: Siempre especifique un atributo id (que se denominar en una secuencia de comandos), y un atributo de anchura y altura para definir el tamao de la tela. Consejo: Usted puede tener mltiples elementos <canvas> en una pgina HTML. Para aadir un borde, utilice el atributo de estilo:
Ejemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Pruebe usted mismo
Dibuja en la tela con JavaScript

Todos los dibujos en el lienzo se debe hacer dentro de un JavaScript:
Ejemplo
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
Pruebe usted mismo
Ejemplo explic: En primer lugar, encontrar el elemento <canvas>:
var c=document.getElementById("myCanvas");
Luego, llame a su getContext () mtodo (hay que pasar la cadena "2d" al getContext () mtodo):
var ctx=c.getContext("2d");
El getContext ("2d") es un objeto incorporado en HTML5, con muchas propiedades y mtodos para las rutas de dibujo, cuadros, crculos, texto, imgenes, y mucho ms. Las siguientes dos lneas se dibuja un rectngulo rojo:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
La propiedad fillStyle puede ser un color CSS, un degradado o un motivo. El fillStyle predeterminado es # 000000 (negro). El fillRect ( x, y, ancho, altura mtodo) dibuja un rectngulo relleno con el estilo de relleno actual.
Coordenadas lienzo
La tela es una rejilla de dos dimensiones. En la esquina superior izquierda del lienzo tiene coordenadas (0,0) As, la fillRect () mtodo anterior tena los parmetros (0,0,150,75). Esto significa: Comienza en la esquina superior izquierda (0,0) y dibujar un rectngulo 150x75 pxeles. Coordenadas Ejemplo Pase el ratn sobre el rectngulo de abajo para ver sus coordenadas X e Y: X Y
Lienzo - Senderos
Para dibujar lneas rectas en un lienzo, vamos a utilizar los dos mtodos siguientes:
moveTo ( x, y ) define el punto inicial de la lnea lineTo ( x, y ) define el punto final de la lnea
Para dibujar la lnea en realidad, hay que utilizar uno de los mtodos de "tinta", como accidente cerebrovascular ().
Ejemplo
Definir un punto de partida en la posicin (0,0), y un punto final en la posicin (200,100). A continuacin, utilice el trazo de mtodo () para dibujar en realidad la lnea: JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke();

Pruebe usted mismo
Para dibujar un crculo en un lienzo, se utilizar el siguiente mtodo:
arco (x, y, r, start, stop)
Para dibujar el crculo en realidad, hay que utilizar uno de los mtodos de "tinta", como accidente cerebrovascular () o rellenar ().
Ejemplo
Crear un crculo con el mtodo de arco (): JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Pruebe usted mismo
Canvas - Texto
Para dibujar texto en un lienzo, la propiedad ms importante y los mtodos son los siguientes:
font - define las propiedades de fuente para el texto fillText ( texto, x, y ) - Dibuja "lleno" de texto en el lienzo strokeText ( texto, x, y ) - Dibuja el texto en el lienzo (sin relleno)
Uso de fillText ():
Ejemplo
Escribir un texto 30px alto lleno en el lienzo, utilizando el tipo de letra "Arial": JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);

Pruebe usted mismo
Uso de strokeText ():
Ejemplo
Escribir un texto 30px de alto (sin relleno) en el lienzo, utilizando el tipo de letra "Arial": JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

Pruebe usted mismo
Lienzo - Degradados
Los gradientes se puede utilizar para rellenar rectngulos, crculos, lneas, texto, formas, etc en el lienzo no se limitan a los colores slidos. Hay dos tipos diferentes de gradientes:
createLinearGradient ( x, y, x1, y1 ) - Crea un degradado lineal createRadialGradient ( x, y, r, x1, y1, r1 ) - Crea un degradado radial / circular
Una vez que tenemos un objeto degradado, hay que aadir dos o ms escalas de color. El addColorStop () mtodo especifica las paradas de color, y su posicin a lo largo del gradiente.Posiciones de gradiente puede estar en cualquier lugar entre 0 y 1. Para usar el degradado, establezca la propiedad fillStyle o strokeStyle al degradado, y luego dibujar la forma, como un rectngulo, texto, o una lnea. Uso de createLinearGradient ():
Ejemplo
Crear un degradado lineal. Rellene rectngulo con el gradiente: JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red");
grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

Pruebe usted mismo
Uso de createRadialGradient ():
Ejemplo
Crear un degradado radial / circular. Rellene rectngulo con el gradiente: JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Pruebe usted mismo
Lienzo - Imgenes
Para dibujar una imagen en un lienzo, se utilizar el siguiente mtodo:
drawImage ( imagen, x, y )
Imagen de empleo:
Ejemplo
Dibuja la imagen en el lienzo: JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

Pruebe usted mismo
Referencia HTML Canvas

Para una referencia completa de todas las propiedades y mtodos que se pueden utilizar con el objeto Canvas (con try-it ejemplos de cada propiedad y mtodo), vaya a nuestro Referencia Canvas.
La etiqueta HTML <canvas>

Etiqueta <canvas> Descripcin Se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript)
HTML5 Inline SVG

HTML5 tiene soporte para Inline SVG.
Cul es SVG?

SVG significa Scalable Vector Graphics SVG se utiliza para definir los vectores basados en grficos para la Web
SVG define los grficos en formato XML Grficos SVG no se pierde ninguna calidad si has cambiado de tamao o Cada elemento y cada atributo en archivos SVG se pueden animar SVG es una recomendacin del W3C
Ventajas SVG
Ventajas del uso de SVG a travs de otros formatos de imagen (como JPEG y GIF) son:
Imgenes Imgenes Imgenes Imgenes Imgenes
SVG SVG SVG SVG SVG
se pueden crear y editar con cualquier editor de texto se pueden buscar, indexado, con guin y comprimido son escalables pueden ser impresos con alta calidad en cualquier resolucin son zoomable (y la imagen se puede ampliar sin degradacin)
Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyo en lnea SVG.
Insertar SVG directamente en pginas HTML

En HTML5, puede incrustar elementos SVG directamente en su pgina HTML:
Ejemplo
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
Pruebe usted mismo
Resultado: Para obtener ms informacin acerca de SVG, por favor, lea nuestro tutorial SVG .
Diferencias entre SVG y Canvas
SVG es un lenguaje para describir grficos 2D en XML. Lienzo dibuja grficos 2D, sobre la marcha (con un JavaScript). SVG es basado en XML, lo que significa que cada elemento est disponible dentro del DOM SVG.Puede asociar controladores de eventos de JavaScript para un elemento. En SVG, cada figura dibujada es recordado como un objeto. Si los atributos de un objeto SVG se cambian, el navegador automticamente se puede volver a hacer la forma. Lienzo se representa pixel por pixel. En la lona, una vez que el grfico se dibuja, se olvida por el navegador. Si su posicin debe ser cambiado, toda la escena tiene que ser rediseados, incluyendo los objetos que podran haber sido incluidos en el grfico.
Comparacin de la lona y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG: Lienzo SVG Resolucin dependiente No hay soporte para controladores de eventos Pobres capacidades de representacin de texto Puede guardar la imagen resultante como. Gif o. Jpg Muy adecuado para juegos con grficos intensivos
Resolucin independiente Apoyo a los controladores de eventos Especialmente indicados para aplicaciones con grandes reas de representacin (Google Maps) Representacin lenta si complejo (cualquier cosa que utiliza el DOM mucho va a ser lento) No adecuado para aplicaciones de juegos
HTML5 Drag and Drop

Arrastrar y soltar es una parte del estndar HTML5.
Arrastre la imagen W3Schools en el rectngulo.
Arrastrar y soltar
Arrastrar y soltar es una caracterstica muy comn. Es cuando "agarrar" un objeto y arrastrarlo a una ubicacin diferente. En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede arrastrarse.
Internet Explorer 9, Firefox, Opera 12, Chrome, Safari 5 y arrastrar y soltar apoyo. Nota: Arrastrar y soltar no funciona en Safari 5.1.2.
HTML5 Drag and Drop Ejemplo

El siguiente ejemplo es un simple arrastrar y soltar ejemplo:
Ejemplo
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
Pruebe usted mismo
Puede parecer complicado, pero vamos a ir a travs de todas las diferentes partes de un evento de arrastrar y soltar.
Hacer una arrastrable Element

En primer lugar: Para hacer una arrastrable elemento, establezca el atributo arrastrarse en true:
<img draggable="true">
Qu Arrastre - ondragstart y setData ()

A continuacin, especifique lo que debe suceder cuando el elemento se arrastra. En el ejemplo anterior, el atributo ondragstart llama a una funcin, arrastre (evento), que especifica los datos para ser arrastrada. El dataTransfer.setData () mtodo establece el tipo de datos y el valor de los datos arrastrados:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }

En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("drag1").
Dnde Drop - onDragOver

El evento ondragover especifica que los datos arrastrados se pueden quitar. De forma predeterminada, los datos / elementos no pueden ser dejados en otros elementos. Para permitir una cada, hay que evitar que el tratamiento predeterminado del elemento. Esto se hace llamando a la event.preventDefault () mtodo para el evento ondragover:
event.preventDefault()
Haga lo Drop - ondrop

Cuando los datos arrastrado se coloca, se produce un evento de colocacin. En el ejemplo anterior, el atributo ondrop llama a una funcin, gota (evento):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }

Cdigo explic:
Llame a preventDefault () para evitar la manipulacin por defecto del navegador de los datos (por defecto es abierto como enlace en la gota)
Obtener los datos arrastrados con el dataTransfer.getData ("Texto") mtodo. Este mtodo devolver todos los datos que se estableci al mismo tipo en el setData () mtodo Los datos arrastrando es el id del elemento arrastrado ("drag1") Aadir el elemento arrastrado en la cada de elemento
HTML5 Geolocation
Geolocalizacin HTML5 se utiliza para localizar la posicin de un usuario Prubelo
Busque la posicin del usuario

El HTML5 Geolocation API se utiliza para obtener la posicin geogrfica de un usuario. Dado que esto puede comprometer la privacidad del usuario, la posicin no est disponible a menos que el usuario lo apruebe.
Internet Explorer 9, Firefox, Chrome, Safari y Opera Geolocalizacin apoyo. Nota: La Geolocalizacin es mucho ms precisa para los dispositivos con GPS, como el iPhone.
HTML5 - Uso de Geolocalizacin

Utilice el mtodo getCurrentPosition () para obtener la posicin del usuario. El ejemplo siguiente es un ejemplo sencillo Geolocalizacin devolver la latitud y longitud de la posicin del usuario:
Ejemplo
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
} </script>
Pruebe usted mismo
Ejemplo explic:
Compruebe si se admite Geolocalizacin Si se admite, ejecute el getCurrentPosition () mtodo. Si no, mostrar un mensaje al usuario Si el getCurrentPosition () mtodo tiene xito, devuelve un objeto coordenadas a la funcin especificada en el parmetro (ShowPosition) El ShowPosition () funcin obtiene la muestra la Latitud y Longitud
El ejemplo anterior es un script de Geolocalizacin muy bsico, sin control de errores.
Controlar errores y rechazos

El segundo parmetro del mtodo getCurrentPosition () se utiliza para controlar los errores. En l se especifica una funcin a ejecutar en caso de no obtener la ubicacin del usuario:
Ejemplo
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
Pruebe usted mismo
Cdigos de error:
Permiso denegado - el usuario no permiti Geolocalizacin Coloque disponible - No es posible obtener la ubicacin actual Timeout - La operacin ha agotado
Visualizacin del resultado en un mapa
Para mostrar el resultado en un mapa, usted necesita el acceso a un servicio de mapas que se pueden utilizar latitud y longitud, como Google Maps:
Ejemplo
function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
Pruebe usted mismo
En el ejemplo anterior usamos la latitud regres y datos de longitud para mostrar la ubicacin en un mapa de Google (utilizando una imagen esttica). Google Map Guin Cmo utilizar una secuencia de comandos para mostrar un mapa interactivo con un marcador, el zoom y las opciones de arrastre.
Obtener informacin especfica sobre

Esta pgina demuestra cmo mostrar la posicin del usuario en un mapa. Sin embargo, Geolocation es tambin muy til para la localizacin de informacin especfica. Ejemplos:
Hasta al da la informacin local Mostrando Puntos de inters cerca del usuario Turn-by-Turn Navigation (GPS)
Mtodo El getCurrentPosition () - Devolver datos

El getCurrentPosition () devuelve un objeto si tiene xito. Las propiedades de la latitud, longitud y precisin siempre se devuelven. Las dems propiedades se devuelven a continuacin si est disponible. Propiedad coords.latitude coords.longitude coords.accuracy coords.altitude coords.heading coords.speed Descripcin La latitud como un nmero decimal La longitud como un nmero decimal La precisin de posicin La altitud en metros sobre el nivel medio del mar La partida que grados respecto al norte La velocidad en metros por segundo
coords.altitudeAccuracy La precisin de la posicin de altitud
fecha y hora
La fecha / hora de la respuesta
Objeto Geolocation - Otros mtodos interesantes

watchPosition () - Devuelve la posicin actual del usuario y contina devolviendo posicin actualizada a medida que el usuario (como el GPS en un coche). clearWatch () - Detiene el watchPosition () mtodo. El siguiente ejemplo muestra el mtodo watchPosition (). Usted necesita un dispositivo GPS preciso para probar esto (como el iPhone):
Ejemplo
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
Pruebe usted mismo
HTML5 video
Muchos sitios web modernos mostrar videos. HTML5 proporciona un estndar para mostrarlos. Comprueba si tu navegador soporta HTML5 vdeo
Check
Video en la Web
Hasta ahora, no ha sido un estndar para mostrar un vdeo / pelcula en una pgina web. Hoy en da, la mayora de los vdeos se muestra a travs de un plug-in (como flash). Sin embargo, los diferentes navegadores pueden tener diferentes plug-ins. HTML5 define un nuevo elemento que especifica un mtodo estndar para incrustar un vdeo / pelcula en una pgina web: el elemento <video>.
Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyar el elemento <video>. Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <video>.
HTML5 Video - Cmo funciona?

Para mostrar un vdeo en HTML5, esto es todo lo que necesita:
Ejemplo
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Pruebe usted mismo
El atributo de control aade controles de vdeo, como reproduccin, pausa y volumen. Tambin es una buena idea incluir siempre los atributos de anchura y altura. Si la altura y la anchura se establece, el espacio requerido para el vdeo est reservada cuando la pgina est cargada. Sin embargo, sin estos atributos, el navegador no sabe el tamao del vdeo, y no puede reservar el espacio adecuado para ello. El efecto ser que el diseo de la pgina cambiar durante la carga (mientras se carga el vdeo). Tambin debe insertar el contenido del texto entre el <video> y </ video> etiquetas para los navegadores que no soportan el elemento <video>. El elemento <video> permite que varios elementos <source>. elementos <source> puede vincular a los archivos de vdeo diferentes. El navegador utiliza el primer formato reconocido.
Formatos de vdeo y Soporte del navegador

Actualmente, hay 3 formatos de vdeo con soporte para el elemento <video>: MP4, WebM y Ogg: Navegador Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6 MP4 SI NO SI SI NO WebM NO SI SI NO SI Ogg NO SI SI NO SI
MP4 = MPEG 4 archivos con cdec de vdeo H264 y AAC audio codec WebM WebM = archivos con cdec de vdeo VP8 y el audio codec Vorbis Ogg = Ogg Theora archivos con cdec de vdeo y audio codec Vorbis
HTML5 <video> - Mtodos y propiedades DOM

HTML5 tiene mtodos DOM, propiedades y eventos para la <video> y elementos <audio>. Estos mtodos, propiedades y eventos le permiten manipular elementos <video> y <audio> utilizando JavaScript. Hay mtodos para reproducir, pausar, y carga, por ejemplo, y hay propiedades (como la duracin y el volumen). Tambin hay eventos DOM que se le notifique cuando el elemento <video> comienza a jugar, est en pausa, se acab, etc El ejemplo a continuacin ilustran, de una manera sencilla, la forma de abordar un elemento <video>, leer y establecer las propiedades y mtodos de llamadas.
Ejemplo 1
Cree simple juego / pausa + controles de cambio de tamao de un vdeo:
Play/Pause Big Small Normal
Video courtesy of Big Buck Bunny.

El ejemplo anterior llama a dos mtodos: play () y pausa (). Tambin utiliza dos propiedades: una pausa y anchura.
Pruebe usted mismo
Para una referencia completa visite nuestra HTML5 Audio / Video Referencia DOM .
HTML5 Video Tags

Etiqueta <video> <source> <track> Descripcin Define un vdeo o una pelcula Define mltiples recursos multimedia para elementos multimedia, como <video> y <audio> Define pistas de texto en mediaplayers
HTML5 Audio
HTML5 proporciona un estndar para la reproduccin de archivos de audio.
Audio en la Web
Hasta ahora, no ha sido un estndar para la reproduccin de archivos de audio en una pgina web. Hoy en da, la mayora de archivos de audio se reproduce a travs de un plug-in (como flash). Sin embargo, los diferentes navegadores pueden tener diferentes plug-ins. HTML5 define un nuevo elemento que especifica un mtodo estndar para insertar un archivo de audio en una pgina web: el elemento <audio>.
Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyar el elemento <audio>. Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <audio>.
HTML5 Audio - Cmo funciona?

Para reproducir un archivo de audio en HTML5, esto es todo lo que necesita:
Ejemplo
<audio controls="controls"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Pruebe usted mismo
El atributo de control aade controles de audio, como reproduccin, pausa y volumen. Tambin debe insertar el contenido del texto entre el <audio> y </ audio> etiquetas para los navegadores que no soportan el elemento <audio>. El elemento <audio> permite que varios elementos <source>. elementos <source> puede vincular a los distintos archivos de audio. El navegador utiliza el primer formato reconocido.
Y formatos de audio Soporte del navegador
Actualmente, hay 3 formatos de archivo admitidos para el elemento <audio>: MP3, WAV y OGG: Navegador Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6 MP3 SI NO SI SI NO Wav NO SI SI SI SI Ogg NO SI SI NO SI
HTML5 Audio Tags

Etiqueta <audio> <source> Descripcin Define el contenido de sonido Define mltiples recursos multimedia para elementos multimedia, como <video> y <audio>
HTML5 Tipos de entrada

HTML5 Nuevos Tipos de entrada
HTML5 tiene varios tipos de entrada de nuevas formas. Estas nuevas caractersticas permiten un mejor control de entrada y validacin. Este captulo trata de los nuevos tipos de entrada:
color fecha fecha y hora datetime-local email mes nmero alcance buscar tel tiempo url semana
Nota: No todos los principales navegadores soporta todos los tipos de entrada nuevos. Sin embargo, ya se puede empezar a usarlas, y si no son compatibles, se comportarn como campos de texto normales.
Tipo de entrada: Color

El tipo de color se utiliza para campos de entrada que deben contener un color.
Ejemplo
Seleccione un color en el selector de colores:
Select your favorite color: <input type="color" name="favcolor">
Pruebe usted mismo
Tipo de entrada: Fecha

El tipo de fecha permite al usuario seleccionar una fecha.
Ejemplo
Definir un control de fecha:
Birthday: <input type="date" name="bday">
Pruebe usted mismo
Tipo de entrada: fecha y hora

El tipo datetime permite al usuario seleccionar una fecha y hora (con zona horaria).
Ejemplo
Definir la fecha y hora de control (con zona horaria):
Birthday (date and time): <input type="datetime" name="bdaytime">
Pruebe usted mismo
Tipo de entrada: fecha y hora local

El tipo datetime-local permite al usuario seleccionar una fecha y hora (sin zona horaria).
Ejemplo
Definir un control de fecha y hora (sin zona horaria):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Pruebe usted mismo
Tipo de entrada: email

El tipo de correo electrnico se utiliza para campos de entrada que debe contener una direccin de e-mail.
Ejemplo
Definir un campo para una direccin de e-mail (ser valida automticamente cuando se presente):
E-mail: <input type="email" name="usremail">
Pruebe usted mismo
Consejo: Safari en el iPhone reconoce el tipo de correo electrnico, y cambia el teclado de la pantalla para que coincida (aade @ y opciones de com.).
Tipo de entrada: mes
El tipo meses permite al usuario seleccionar un mes y ao.
Ejemplo
Definicin de un mes y el ao de control (sin zona horaria):
Birthday (month and year): <input type="month" name="bdaymonth">
Pruebe usted mismo
Tipo de entrada: nmero

El tipo de nmero se utiliza para campos de entrada que debe contener un valor numrico. Tambin puede establecer restricciones sobre qu nmeros son aceptadas:
Ejemplo
Definir un campo numrico (con restricciones):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Pruebe usted mismo
Utilice los siguientes atributos para especificar restricciones:
max - especifica el valor mximo permitido min - especifica el valor mnimo permitido paso - especifica los intervalos de nmeros legales valor - Especifica el valor predeterminado
Pruebe un ejemplo con todos los atributos de restriccin: Pruebe usted mismo
Tipo de entrada: Rango

El tipo de cocina se utiliza para campos de entrada que deben contener un valor de un rango de nmeros. Tambin puede establecer restricciones sobre qu nmeros son aceptadas.
Ejemplo
Definir un control para introducir un nmero cuyo valor exacto no es importante (como un control deslizante):
<input type="range" name="points" min="1" max="10">
Pruebe usted mismo
Utilice los siguientes atributos para especificar restricciones:
max - especifica el valor mximo permitido min - especifica el valor mnimo permitido paso - especifica los intervalos de nmeros legales valor - Especifica el valor predeterminado
Tipo de entrada: bsqueda

El tipo de bsqueda se utiliza para los campos de bsqueda (un campo de bsqueda se comporta como un campo de texto normal).
Ejemplo
Definir un campo de bsqueda (como una bsqueda en el sitio, o bsqueda de Google):
Search Google: <input type="search" name="googlesearch">
Pruebe usted mismo
Tipo de entrada: tel

Ejemplo
Definir un campo para introducir un nmero de telfono:
Telephone: <input type="tel" name="usrtel">
Pruebe usted mismo
Tipo de entrada: tiempo

El tipo de tiempo permite al usuario seleccionar una hora.
Ejemplo
Definir un control para entrar en un tiempo (sin zona horaria):
Select a time: <input type="time" name="usr_time">
Pruebe usted mismo
Tipo de entrada: url

El tipo de URL se utiliza para los campos de entrada que debe contener una direccin URL. El valor del campo URL se valida automticamente cuando se enva el formulario.
Ejemplo
Definir un campo para introducir una URL:
Add your homepage: <input type="url" name="homepage">
Pruebe usted mismo
Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado de la pantalla para que coincida (aade opcin com.).
Tipo de entrada: la semana

El tipo semanas permite al usuario seleccionar una semana y ao.
Ejemplo
Definir una semana y el control al ao (sin zona de tiempo):
Select a week: <input type="week" name="week_year">
Pruebe usted mismo
HTML5 <input> Tag

Etiqueta <input> Descripcin Define un control de entrada
HTML5 elementos de formulario

Nuevos elementos de formulario HTML5
HTML5 tiene los siguientes nuevos elementos de formulario:
<datalist> <keygen> <output>
Nota: No todos los principales navegadores apoyar a todos los elementos de formulario nuevos. Sin embargo, ya se puede empezar a usarlas, y si no son compatibles, se comportarn como campos de texto normales.
HTML5 <datalist> Element

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>. El elemento <datalist> se utiliza para proporcionar una "autocompletar" en funcin de los elementos <input>. Los usuarios podrn ver una lista desplegable de opciones predefinidas como entrada de datos. Utilice el atributo <input> elemento de lista a la unen con un elemento <datalist>.
Ejemplo
Un elemento <input> con valores predefinidos en un <datalist>:
<input list="browsers">
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Pruebe usted mismo
HTML5 <keygen> Element

El propsito del elemento <keygen> es proporcionar una forma segura para autenticar usuarios. La etiqueta <keygen> especifica un campo generador de par de claves en un formulario. Cuando se enva el formulario, dos claves se generan, uno pblico y otro privado. La clave privada se almacena localmente, y la clave pblica se enva al servidor. La clave pblica se podra utilizar para generar un certificado de cliente para autenticar al usuario en el futuro.
Ejemplo
Un formulario con un campo keygen:
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
Pruebe usted mismo
HTML5 <output> Element

El elemento <output> representa el resultado de un clculo (como uno realizado por un script).
Ejemplo
Realizar un clculo y mostrar el resultado en un elemento <output>:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50">100 + <input type="number" name="b" value="50">= <output name="x" for="a b"></output> </form>
Pruebe usted mismo
Nuevos elementos de formulario HTML5

Etiqueta <datalist> <keygen> <output> Descripcin Especifica una lista de opciones predefinidas para un elemento <input> Especifica un campo generador de par de claves en un formulario Representa el resultado de un clculo
HTML5 atributos forman

HTML5 Nuevos atributos forman
HTML5 tiene varios atributos nuevos para <form> y <input>. Los nuevos atributos para <form>:
autocomplete novalidate
Los nuevos atributos para <input>:
autocomplete enfoque automtico formulario formAction formenctype formmethod formnovalidate formtarget altura y el ancho lista min y max
mltiple patrn (regexp) marcador de posicin necesario paso
<form> / <input> atributo autocomplete

El atributo autocomplete especifica si un campo de formulario o de entrada debe tener autocomplete encendido o apagado. Cuando autocompletado est activado, el navegador automticamente los valores completos basados en los valores que el usuario ha introducido antes. Sugerencia: Es posible tener autocomplete "on" para el formulario, y "off" para campos de entrada especficos, o viceversa. Nota: El atributo autocomplete trabaja con <form> y los tipos <input> siguientes: texto, bsqueda, url, telfono, correo electrnico, contrasea, datepickers, variedad y color.
Ejemplo
Un formulario HTML con autocompletado en (y fuera de un campo de entrada):
<form action="demo_form.asp" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
Pruebe usted mismo
Sugerencia: En algunos navegadores puede que tenga que activar la funcin de autocompletar para que esto funcione.
<form> novalidate Atributo

El atributo novalidate es un atributo booleano. Cuando est presente, especifica que la forma de datos (entrada) no debe ser validado cuando se presenten.
Ejemplo
Indica que el formulario no debe ser validado en presentar:
<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
Pruebe usted mismo
<input> atributo autofocus

El atributo autofocus es un atributo booleano. Cuando est presente, especifica que un elemento <input> automticamente debe recibir el foco cuando se carga la pgina.
Ejemplo
Deje que el "Nombre" campo de entrada automticamente obtendr el foco cuando se carga la pgina:
First name:<input type="text" name="fname" autofocus="autofocus">
Pruebe usted mismo
<input> de atributo
El atributo de forma especifica una o ms formas de un elemento <input> pertenece. Consejo: Para hacer referencia a ms de una forma, utilice una lista separada por espacios de identificadores de formulario.
Ejemplo
Un campo de entrada situado fuera de la forma HTML (pero todava una parte de la forma):
<form action="demo_form.asp" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form>
Last name: <input type="text" name="lname" form="form1">
Pruebe usted mismo
<input> atributo formAction

El atributo formAction especifica la direccin URL de un archivo que procesar el control de entrada cuando se enva el formulario. El atributo formAction reemplaza el atributo action del elemento <form>. Nota: El atributo formAction se utiliza con type = "submit" y type = "image".
Ejemplo
Un formulario HTML con dos botones de envo, con diferentes acciones:
<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form>
Pruebe usted mismo
<input> formenctype Atributo

El atributo formenctype especifica cmo se forman los datos deben ser codificados cuando se presenta al servidor (slo para formularios con method = "post") El atributo formenctype reemplaza el atributo enctype del elemento <form>. Nota: El atributo formenctype se utiliza con type = "submit" y tipo "imagen" =.
Ejemplo
Enve el formulario de datos que est codificado por omisin (el primer botn de envo), y codificado como "multipart / form-data" (el segundo botn de envo):
<form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>
Pruebe usted mismo
<input> formmethod Atributo

El atributo formmethod define el mtodo HTTP para enviar form-data a la URL de la accin. El atributo formmethod reemplaza el atributo method del elemento <form>. Nota: El atributo formmethod se puede utilizar con type = "submit" y tipo "imagen" =.
Ejemplo
El segundo botn de envo reemplaza el mtodo HTTP de la forma:
<form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"> </form>
Pruebe usted mismo
<input> formnovalidate Atributo

El atributo novalidate es un atributo booleano. Cuando est presente, especifica que el elemento <input> no debe ser validado cuando se presenten. El atributo formnovalidate reemplaza el atributo del elemento novalidate <form>.
Nota: El atributo formnovalidate se puede utilizar con type = "submit".
Ejemplo
Un formulario con dos botones submit (con y sin validacin):
<form action="demo_form.asp"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> </form>
Pruebe usted mismo
<input> atributo formtarget

El atributo formtarget especifica un nombre o una palabra clave que indica dnde se debe mostrar la respuesta que se recibe despus de enviar el formulario. El atributo formtarget reemplaza el atributo target del elemento <form>. Nota: El atributo formtarget se puede utilizar con type = "submit" y type = "image".
Ejemplo
Un formulario con dos botones de envo, con ventanas de destino diferentes:
<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form>
Pruebe usted mismo
<input> atributos HEIGHT y WIDTH
Los atributos de altura y anchura especificar la altura y el ancho de un elemento <input>. Nota: La altura y la anchura de los atributos slo se utilizan con <input type="image">. Consejo: Siempre especifique la altura y anchura de los atributos de las imgenes. Si la altura y la anchura se establece, el espacio requerido para la imagen est reservada cuando la pgina est cargada. Sin embargo, sin estos atributos, el navegador no sabe el tamao de la imagen, y no puede reservar el espacio adecuado para ello. El efecto ser que el diseo de la pgina cambiar durante la carga (mientras que la carga de imgenes).
Ejemplo
Definir una imagen como botn de enviar, con atributos height y width:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Pruebe usted mismo
<input> atributo de lista

El atributo de lista se refiere a un elemento de <datalist> que contiene opciones predefinidas para un elemento <input>.
Ejemplo
Un elemento <input> con valores predefinidos en un <datalist>:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Pruebe usted mismo
<input> min y max Atributos

El mnimo y mximo de los atributos de especificar el valor mnimo y mximo para un elemento <input>. Nota: los valores mnimo y mximo de los atributos trabaja con los siguientes tipos de entrada: nmero, rango, fecha, fecha y hora, fecha y hora local, mes, hora y semana.
Ejemplo
<input> elementos con valores mnimos y mximos:
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Pruebe usted mismo
<input> mltiples atributos

El atributo mltiple es un atributo booleano. Cuando est presente, especifica que el usuario puede introducir ms de un valor en el elemento <input>. Nota: El atributo multiple trabaja con los siguientes tipos de entrada: correo electrnico, y el archivo.
Ejemplo
Un campo de archivo de carga que acepta varios valores:
Select images: <input type="file" name="img" multiple="multiple">
Pruebe usted mismo
<input> atributo patrn

El atributo de patrn especifica una expresin regular que el valor del elemento <input> se verifica en contra. Nota: El atributo patrn funciona con los tipos de entrada siguientes: texto, bsqueda, url, telfono, correo electrnico y contrasea. Consejo: Utilice el mundial ttulo atributo para describir el patrn para ayudar al usuario. Sugerencia: Ms informacin sobre las expresiones regulares en nuestro tutorial JavaScript.
Ejemplo
Un campo de entrada que puede contener slo tres letras (no hay nmeros o caracteres especiales):
Country code: <input type="text" name="country_code" pattern="[A-Zaz]{3}" title="Three letter country code">
Pruebe usted mismo
<input> atributo placeholder

El marcador de posicin atributo especifica una sugerencia corto que describe el valor esperado de un campo de entrada (por ejemplo, un valor de la muestra o una breve descripcin del formato de espera). La pista se muestra en el campo de entrada cuando est vaco, y desaparece cuando el campo recibe el foco. Nota: El atributo placeholder funciona con los siguientes tipos de entrada: texto, bsqueda, url, telfono, correo electrnico y contrasea.
Ejemplo
Un campo de entrada con un marcador de posicin de texto:
<input type="text" name="fname" placeholder="First name">
Pruebe usted mismo
Atributo requerido <input>

El atributo requerido es un atributo booleano. Cuando est presente, especifica que un campo de entrada debe ser completado antes de enviar el formulario. Nota: El atributo requerido trabaja con los siguientes tipos de entrada: texto, bsqueda, url, telfono, correo electrnico, contrasea, selectores de fecha, nmero, checkbox, radio y archivo.
Ejemplo
Un campo de entrada requerida:
Username: <input type="text" name="usrname" required="required">
Pruebe usted mismo
<input> Atributo paso

El atributo de paso especifica los intervalos de nmeros legales para un elemento <input>. Ejemplo: si el paso = "3", nmeros legales podra ser -3, 0, 3 6,, etc Consejo: El atributo de paso se puede utilizar junto con el mximo y el mnimo de atributos para crear una gama de valores legales. Nota: El atributo de paso funciona con los tipos de entrada siguientes: nmero, rango, fecha, fecha y hora, fecha y hora local, mes, hora y semana.
Ejemplo
Un campo de entrada con un intervalos de nmeros legales que se indican:
<input type="number" name="points" step="3">
Pruebe usted mismo
HTML5 <input> Tag

Etiqueta <form> <input> Descripcin Define un formulario HTML para entrada de usuario Define un control de entrada
HTML5 Web Storage

HTML5 web de almacenamiento, un almacenamiento local mejor que las galletas.
Qu es el HTML5 Web Storage?

Con HTML5, las pginas web pueden almacenar informacin localmente en el navegador del usuario. Anteriormente, esto se hizo con las cookies. Sin embargo, el almacenamiento en Web es ms seguro y ms rpido. Los datos no se incluye con cada peticin del servidor, pero es usado solamente cuando se le pide. Tambin es posible almacenar grandes cantidades de datos, sin afectar el rendimiento del sitio web. Los datos se almacenan en pares clave / valor, y una pgina web slo pueden acceder a los datos almacenados por s mismo.
Almacenamiento Web compatible con Internet Explorer 8 +, Firefox, Opera, Chrome y Safari. Nota: Internet Explorer 7 y versiones anteriores, no soportan el almacenamiento web.
localStorage y sessionStorage
Hay dos nuevos objetos para el almacenamiento de datos en el cliente:
localStorage - almacena los datos sin fecha de caducidad sessionStorage - almacena los datos para un perodo de sesiones
Antes de utilizar el almacenamiento web, compruebe la compatibilidad con exploradores para localStorage y sessionStorage:
if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
El objeto localStorage
El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminan cuando el navegador se cierra, y estar disponible el prximo da, semana o ao.
Ejemplo
localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
Pruebe usted mismo
Ejemplo explic:
Crear un localStorage par clave / valor con la tecla = "apellido" y el valor = "Smith" Recuperar el valor de la "apellido" clave y la inserta en el elemento con id = "nmero"
Consejo: clave / valor siempre se almacenan como cadenas. Recuerde que debe convertir a otro formato cuando sea necesario. El ejemplo siguiente se cuenta el nmero de veces que un usuario ha hecho clic en un botn. En este cdigo de la cadena de valor se convierte a un nmero para ser capaz de aumentar el contador:
Ejemplo
if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
Pruebe usted mismo
El objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesin. Los datos se eliminan cuando el usuario cierra la ventana del navegador. El ejemplo siguiente cuenta el nmero de veces que un usuario ha hecho clic en un botn, en la sesin actual:
Ejemplo
if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
Pruebe usted mismo
HTML5 memoria cach de aplicaciones

Con HTML5 es fcil hacer una versin sin conexin de una aplicacin web mediante la creacin de un archivo de manifiesto de cach.
Qu es la memoria cach de aplicaciones?

HTML5 introduce cach de la aplicacin, lo que significa que una aplicacin web se almacena en cach y accesible sin conexin a internet. Cach de la aplicacin ofrece una aplicacin de tres ventajas: 1. Navegacin fuera de lnea - los usuarios pueden utilizar la aplicacin cuando est fuera de lnea 2. Velocidad - recursos almacenados en cach se cargan ms rpido 3. Reduccin de la carga del servidor - el nico navegador se descargar recursos actualizados / cambiado desde el servidor
Cach de la aplicacin es compatible con todos los principales navegadores, excepto Internet Explorer.
Cach HTML5 Manifiesto Ejemplo

El siguiente ejemplo muestra un documento HTML con un manifiesto de cach (para navegar sin conexin):
Ejemplo
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
Pruebe usted mismo
Fundamentos de cach Manifest

Para habilitar la cach de la aplicacin, incluya el atributo de manifiesto en la etiqueta <html> del documento:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

Cada pgina con el atributo especificado manifiesto se almacenan en cach cuando el usuario lo visita. Si el atributo manifiesto no se especifica, la pgina no se almacenan en cach (a menos que la pgina se especifica directamente en el archivo de manifiesto). La extensin de archivo recomendada para los archivos de manifiesto es: "AppCache". Un archivo de manifiesto debe ser servido con el tipo MIME correcto , que es "text / cache-manifiesto". Se debe configurar en el servidor web.
El archivo de manifiesto
El archivo de manifiesto es un archivo de texto simple, que le dice al navegador qu almacenar en cach (y que nunca cach). El archivo de manifiesto consta de tres secciones:
MANIFIESTO CACHE - Los archivos que figuran en esta cabecera se almacenan en cach despus de haber sido descargado por primera vez RED - Los archivos que figuran en esta cabecera requieren una conexin con el servidor, y no se almacenan en cach RPLICA - Los archivos que figuran en esta cabecera especifica las pginas de reserva si una pgina es inaccesible
CACHE MANIFEST
La primera lnea, manifiesto de la cach, se requiere:
CACHE MANIFEST /theme.css /logo.gif /main.js

El archivo de manifiesto anteriormente enumera tres recursos: un archivo CSS, una imagen GIF, y un archivo JavaScript. Cuando el archivo de manifiesto se carga, el navegador descargar los tres archivos del directorio raz del sitio web. Entonces, siempre que el usuario no est conectado a Internet, los recursos todava estar disponible.
RED
La seccin de la red a continuacin especifica que el archivo "login.asp" nunca debe ser almacenado en cach, y no estarn disponibles sin conexin:
NETWORK: login.asp
Un asterisco puede ser utilizado para indicar que todos los dems recursos / archivos requieren una conexin a Internet:
NETWORK: *
RPLICA
La seccin FALLBACK abajo se especifica que "offline.html" se sirve en lugar de todos los archivos del html / / catlogo, en caso de una conexin a Internet no se puede establecer:
FALLBACK: /html/ /offline.html

Nota: El primero es el URI de recursos, la segunda es la de reserva.
La actualizacin del cach

Una vez que la aplicacin se almacena en cach, se mantiene en cach hasta que uno de los casos siguientes:
El usuario borra la cach del navegador El archivo de manifiesto es modificado (ver siguiente consejo) El cach de la aplicacin mediante programacin actualizado
Ejemplo - Archivo Completo Manifiesto cach

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
Consejo: Las lneas que empiezan con un "#" son lneas de comentario, pero tambin puede servir a otro propsito. Cach de una aplicacin slo se actualiza cuando cambia su archivo de manifiesto. Si edita una imagen o cambiar una funcin de JavaScript, los cambios no sern re-cach.Actualizacin de la fecha y la versin en lnea de comentario es una manera de hacer que el navegador re-cach de sus archivos.
Notas sobre la memoria cach de aplicaciones

Tenga cuidado con lo que te cache. Una vez que el archivo se almacena en cach, el navegador seguir mostrando la versin en cach, incluso si cambia el archivo en el servidor. Para asegurarse de que las actualizaciones del navegador la cach, es necesario cambiar el archivo de manifiesto. Nota: Los navegadores pueden tener diferentes lmites de tamao para los datos almacenados en cach (algunos navegadores tienen un lmite de 5 MB por sitio).
HTML5 Web Workers

Un trabajador de web es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la pgina.
Qu es un Trabajador Web?
Al ejecutar secuencias de comandos en una pgina HTML, la pgina deja de responder hasta que el guin est terminado.
Un trabajador de web es un JavaScript que se ejecuta en segundo plano, de forma independiente de otras secuencias de comandos, sin afectar el rendimiento de la pgina. Usted puede seguir haciendo lo que quieras: hacer clic, seleccionar las cosas, etc, mientras que el trabajador web se ejecuta en segundo plano.
Trabajadores Web son compatibles con todos los principales navegadores, excepto Internet Explorer.
HTML5 Web Workers Ejemplo

El ejemplo siguiente crea un trabajador web simple que los nmeros de recuento en el fondo:
Ejemplo
Count numbers: Start Worker Stop Worker
Pruebe usted mismo
Compruebe Web Support Worker

Antes de crear un trabajador web, comprobar si el navegador del usuario soporta:
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
Crear un archivo de Web Worker
Ahora, vamos a crear nuestra web en un trabajador JavaScript externo. A continuacin, creamos un script que cuenta. La secuencia de comandos se almacena en el "demo_workers.js" file:
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();

La parte importante del cdigo anterior es la postMessage () mtodo - que se utiliza para los mensajes de un mensaje de vuelta a la pgina HTML. Nota: Normalmente, los trabajadores web no se utilizan para estos scripts sencillos, pero para tareas ms intensivas de CPU.
Crear un objeto Web Worker

Ahora que ya tenemos el archivo de trabajador web, tenemos que llamarlo desde una pgina HTML. Las siguientes lneas comprueba si el trabajador ya existe, si no - se crea un objeto nuevo trabajador web y se ejecuta el cdigo en "demo_workers.js":
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }

Entonces podemos enviar y recibir mensajes de la trabajadora web. Aada un "onmessage" detector de eventos para el trabajador web.
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };
Cuando los puestos de trabajo web un mensaje, el cdigo dentro del detector de eventos se ejecuta. Los datos del trabajador Web se almacena en event.data.
Despedir a un trabajador Web

Cuando un objeto se crea trabajador web, continuar para escuchar los mensajes (incluso despus de que el script externo ha terminado) hasta que se termina.
Para despedir a un trabajador web, y liberar recursos del navegador / ordenador, utilice el terminate () mtodo:
w.terminate();
Trabajador Completo Web Ejemplo de cdigo

Ya hemos visto el cdigo de los trabajadores en el archivo. Js. A continuacin se muestra el cdigo de la pgina HTML:
Ejemplo
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
</body> </html>
Pruebe usted mismo
Web Workers y el DOM

Dado que los trabajadores web estn en archivos externos, no tienen acceso a los siguientes objetos JavaScript:
El objeto de la ventana El objeto del documento El objeto principal
HTML5 Server-Sent Events

Eventos HTML5 Server-Sent permitir que una pgina web para obtener actualizaciones desde un servidor.
Eventos enviados del servidor - One Way Mensajera

Un evento en el servidor enva es cuando una pgina web se actualiza automticamente desde un servidor. Esto tambin fue posible antes, pero la pgina web tendra que preguntar si hay actualizaciones disponibles. Con servidores enviados por los acontecimientos, las actualizaciones vienen automticamente. Ejemplos: Facebook / Twitter actualizaciones, actualizaciones de precios de acciones, noticias, resultados deportivos, etc
Eventos enviados del servidor son compatibles con todos los principales navegadores, excepto Internet Explorer.
Recibe Server-Sent notificaciones de eventos
El objeto EventSource se utiliza para recibir notificaciones enviadas por el servidor de eventos:
Ejemplo
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; };
Pruebe usted mismo
Ejemplo explic:
Crear un nuevo objeto EventSource y especifique la direccin URL de la pgina de envo de las actualizaciones (en este ejemplo "demo_sse.php") Cada vez que se recibe una actualizacin, el evento se produce onmessage Cuando un evento ocurre onmessage, poner los datos recibidos en el elemento con id = "nmero"
Compruebe Server-Sent Events Support

En el ejemplo anterior tryit haba algunas lneas adicionales de cdigo para comprobar la compatibilidad del explorador para eventos enviados del servidor:
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
Server-Side Ejemplo de cdigo

Para el ejemplo de arriba para trabajar, se necesita un servidor capaz de enviar actualizaciones de datos (como PHP o ASP). La sintaxis de eventos del lado del servidor corriente es simple. Ajuste el "Content-Type" de encabezado a "text / event-stream". Ahora usted puede comenzar a enviar flujos de eventos. Cdigo en PHP (demo_sse.php):
<?php header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
Cdigo en ASP (VB) (demo_sse.asp):
<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>

Cdigo explic:
Ajuste el "Content-Type" de encabezado a "text / event-stream" Especifique que la pgina no se debe almacenar en cach Salida de los datos a enviar ( siempre comenzar con "data:") Vaciar los datos de salida de nuevo a la pgina web
El objeto EventSource
En los ejemplos anteriores hemos utilizado el evento onmessage recibir los mensajes. Sin embargo, otros acontecimientos tambin estn disponibles: Eventos OnOpen onmessage onerror Descripcin Cuando una conexin con el servidor se abre Cuando se recibe un mensaje Cuando se produce un error
TUTORIAL DE CSS
Introduccin
Lo que usted debe saber ya
Antes de continuar, debe tener un conocimiento bsico de los siguientes:
HTML / XHTML
Si quieres estudiar estos temas en primer lugar, encontrar los tutoriales en nuestro pgina de Inicio.
Qu es CSS?

CSS es sinnimo de C ascading S tyle S heets Los estilos definen la forma de mostrar los elementos HTML Estilos se aadieron a 4,0 HTML para resolver un problema Hojas de estilo externas puede ahorrar un montn de trabajo Hojas de estilo externas se almacenan en los archivos CSS
CSS demo
Un documento HTML se pueden visualizar con diferentes estilos: Vea cmo funciona
Estilos resuelto un gran problema

HTML nunca fue pensado para contener las etiquetas para dar formato a un documento. HTML fue pensado para definir el contenido de un documento, como: <h1> Este es un encabezado </ h1> <p> Este es un prrafo. </ p> Cuando las etiquetas gusta <font> y atributos de color se han aadido a la especificacin HTML 3.2, comenz una pesadilla para los desarrolladores web. Desarrollo de sitios web de gran tamao, donde las fuentes y la informacin de color se agregaron a cada pgina, se convirti en un proceso largo y costoso. Para resolver este problema, el Consorcio World Wide Web (W3C) creado CSS. En HTML 4.0, todo el formato podra ser eliminado del documento HTML, y se almacena en un archivo CSS.
Todos los navegadores soportan CSS hoy.
CSS ahorra mucho trabajo!

CSS define cmo los elementos HTML se van a mostrar. Los estilos se guardan normalmente en archivos CSS externos.. Hojas de estilo externas le permiten cambiar el aspecto y el diseo de todas las pginas de un sitio Web, simplemente editando un solo archivo!
Sintaxis
Ejemplos

Mira el ejemplo 1 Mira el ejemplo 2
CSS Sintaxis
Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno o ms:
El selector es normalmente el elemento HTML que desee estilo. Cada declaracin consta de una propiedad y un valor. La propiedad es el atributo de estilo que desea cambiar. Cada propiedad tiene un valor.
Ejemplo CSS
Una declaracin CSS siempre termina con un punto y coma, y los grupos de la declaracin estn rodeadas por llaves:
p {color:red;text-align:center;}
Para hacer ms legible la CSS, usted puede poner una declaracin en cada lnea, as:
Ejemplo
p { color:red; text-align:center; }
Pruebe usted mismo
CSS Comentarios
Los comentarios se utilizan para explicar su cdigo, y puede ayudarte a la hora de editar el cdigo fuente en una fecha posterior. Los comentarios son ignorados por los navegadores. Un comentario CSS comienza con "/ *" y finaliza con "* /", as:
/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
Id y Clase
Los selectores id y class
Adems de establecer un estilo para un elemento HTML, CSS le permite especificar sus propios selectores llamado "id" y "clase".
El selector de id
El selector de id se utiliza para especificar un estilo para un elemento individual, nico. El selector de ID utiliza el atributo id del elemento HTML, y se define con un "#". La regla de estilo a continuacin se aplica en el elemento con id = "para1":
Ejemplo
#para1 { text-align:center; color:red; }
Pruebe usted mismo
No NO iniciar un nombre de identificacin con un nmero! No funciona en Mozilla / Firefox.
El selector de clase
El selector de clase se utiliza para especificar un estilo para un grupo de elementos. A diferencia del selector de id, el selector de clase es la ms utilizada en varios elementos. Esto le permite definir un estilo particular para muchos elementos HTML con la misma clase. El selector de clase utiliza el atributo de clase HTML, y se define con un "." En el siguiente ejemplo, todos los elementos HTML con class = "centro" estar alineado al centro:
Ejemplo
.center {text-align:center;}
Pruebe usted mismo
Tambin puede especificar que slo determinados elementos HTML debera verse afectada por una clase. En el ejemplo de abajo, con todos los elementos p class = "center" ser alineado al centro:
Ejemplo
p.center {text-align:center;}
Pruebe usted mismo
No NO iniciar un nombre de clase con un nmero! Esto slo es compatible con Internet Explorer.
Cmo ...
Cuando un navegador lee una hoja de estilo, se dar formato al documento de acuerdo con ella.
Tres formas de insertar CSS

Hay tres formas de insertar una hoja de estilo:
Hoja de estilos externa
Hoja de estilo interna Estilo en lnea
Hoja de estilos externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas pginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada pgina debe enlazar a la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la seccin de la cabeza:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. Su hoja de estilo debe ser guardado con una extensin. Css. Un ejemplo de un archivo de hoja de estilo se muestra a continuacin:
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

No agregue un espacio entre el valor de la propiedad y de la unidad (como margin-left: 20 px). La forma correcta es: margin-left: 20px
Hoja de estilo interna

Una hoja de estilo interna debe ser usado cuando un documento nico que tiene un estilo nico.Para definir estilos internos en la seccin de cabecera de una pgina HTML, utilizando la etiqueta <style>, as:
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
Estilos en lnea
Un estilo en lnea pierden muchas de las ventajas de hojas de estilo por el contenido de la mezcla con la presentacin. Utilice este mtodo con moderacin! Para utilizar estilos en lnea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener cualquier propiedad CSS. El ejemplo muestra cmo cambiar el color y el margen izquierdo de un prrafo:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Mltiples hojas de estilo

Si algunas propiedades se han establecido para el mismo selector en diferentes hojas de estilo, los valores se heredar de la hoja de estilo ms especfico. Por ejemplo, una hoja de estilo externa tiene estas propiedades para el selector h3:
h3 { color:red; text-align:left; font-size:8pt; }

Y una hoja de estilo interna consta de las siguientes propiedades para el selector h3:
h3 { text-align:right; font-size:20pt; }
Si la pgina con la hoja de estilo interna tambin se vincula a la hoja de estilos externa las propiedades h3 ser:
color:red; text-align:right; font-size:20pt;

El color se hereda de la hoja de estilos externa y la alineacin del texto y el tamao de fuente se sustituye por la hoja de estilo interna.
Mltiples estilos en cascada en Uno

Los estilos pueden ser especificados:
dentro de un elemento HTML dentro de la seccin de la cabeza de una pgina HTML en un archivo CSS externo
Consejo: Incluso varias hojas de estilo externas se puede hacer referencia en un documento HTML.
Orden en cascada
Qu estilo se utiliza cuando hay ms de un estilo especificado para un elemento HTML?
En trminos generales podemos decir que todos los estilos voluntad "en cascada" en una nueva hoja "virtual" de estilo a las reglas siguientes, en el nmero cuatro tiene la ms alta prioridad: 1. 2. 3. 4. Navegador predeterminado Hoja de estilos externa Hoja de estilo interna (en la seccin de la cabeza) Estilo en lnea (dentro de un elemento HTML)
Por lo tanto, un estilo en lnea (dentro de un elemento HTML) tiene la mayor prioridad, lo que significa que va a reemplazar un estilo definido dentro de la etiqueta head, o en una hoja de estilos externa, o en un navegador (el valor predeterminado). Nota: Si el enlace a la hoja de estilos externa se coloca despus de la hoja de estilo interna en <head> HTML, la hoja de estilos externa anular la hoja de estilo interna!
Antecedentes
Propiedades de CSS de fondo se utilizan para definir los efectos de fondo de un elemento. CSS propiedades utilizadas para efectos de fondo:
background-color background-image background-repeat background-attachment background-position
Color de fondo
La propiedad background-color especifica el color de fondo de un elemento. El color de fondo de una pgina se define en el selector de cuerpo:
Ejemplo
body {background-color:#b0c4de;}
Pruebe usted mismo
Con CSS, un color se especifica con mayor frecuencia a travs de:
un valor HEX - como "# ff0000" un valor RGB - como "rgb (255,0,0)" un nombre de color - como "rojo"
Mira Valores de Color de CSS para una lista completa de los valores de color posibles. En el ejemplo siguiente, el h1, p, y elementos div tienen diferentes colores de fondo:
Ejemplo
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}
Pruebe usted mismo
Imagen de fondo
La propiedad background-image especifica una imagen para usar como fondo de un elemento. Por defecto, la imagen se repite por lo que cubre todo el elemento. La imagen de fondo de una pgina se puede establecer la siguiente manera:
Ejemplo
body {background-image:url('paper.gif');}
Pruebe usted mismo
A continuacin se muestra un ejemplo de una mala combinacin de texto y la imagen de fondo. El texto es casi ilegible:
Ejemplo
body {background-image:url('bgdesert.jpg');}
Pruebe usted mismo
Imagen de fondo - Repite horizontal o vertical

De manera predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente. Algunas de las imgenes se debe repetir slo en horizontal o vertical, para que no parezca extrao, as:
Ejemplo
body { background-image:url('gradient2.png'); }
Pruebe usted mismo
Si la imagen es repetida slo horizontalmente (repeat-x), el fondo se vea mejor:
Ejemplo
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
Pruebe usted mismo
Imagen de fondo - Ajustar la posicin y no repetirCuando se utiliza una imagen de fondo, utilice una imagen que no perturbe el texto. Mostrando la imagen slo una vez que se especifica mediante la propiedad backgroundrepeat:
Ejemplo
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
Pruebe usted mismo
En el ejemplo anterior, la imagen de fondo se muestra en el mismo lugar que el texto. Queremos cambiar la posicin de la imagen, de manera que no perturbe el texto demasiado. La posicin de la imagen se especifica mediante la propiedad background-position:
Ejemplo
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
Pruebe usted mismo
Antecedentes - Abreviacin de las propiedades

Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se trata de fondos. Para acortar el cdigo, tambin es posible especificar todas las propiedades en una sola propiedad.Esto se llama una propiedad resumida. La propiedad abreviada para el fondo no es ms que "de fondo":
Ejemplo
body {background:#ffffff url('img_tree.png') no-repeat right top;}
Pruebe usted mismo
Cuando se utiliza la propiedad rpida el orden de los valores de la propiedad es:
background-color background-image background-repeat background-attachment background-position
No importa si uno de los valores de la propiedad est ausente, siempre que los que estn presentes son en este orden. Este ejemplo usa CSS ms avanzado. Eche un vistazo: ejemplo Avanzada
Ms ejemplos
Cmo establecer una imagen de fondo fija este ejemplo se muestra cmo establecer una imagen de fondo fija. La imagen no se desplazar con el resto de la pgina.
Todas las Propiedades de fondo CSS

Propiedad Descripcin
fondo background-attachment
Establece todas las propiedades de fondo en una declaracin Establece si una imagen de fondo se fija o se desplaza con el resto de la pgina Establece el color de fondo de un elemento Ajusta la imagen de fondo de un elemento Establece la posicin inicial de una imagen de fondo Establece una imagen de fondo se repetir
background-color background-image background-position background-repeat
Text EL FORMATO DE TEXTO

Este texto es de estilo con algunas de las propiedades de formato de texto. El ttulo utiliza el texto-align, transformar texto, y las propiedades del color. El prrafo tiene sangra, alineado, y el espacio entre caracteres especificado. El subrayado es retirado del "Try it yourself" enlace.
Color del texto

La propiedad color se utiliza para establecer el color del texto. Con CSS, un color se especifica con mayor frecuencia a travs de:
un valor HEX - como "# ff0000" un valor RGB - como "rgb (255,0,0)" un nombre de color - como "rojo"
Mira Valores de Color de CSS para una lista completa de los valores de color posibles. El color por defecto para una pgina se define en el selector de cuerpo.
Ejemplo
body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
Pruebe usted mismo
Para W3C CSS compatible: Si define la propiedad de color, tambin debe definir la propiedad background-color.
Alineacin del texto
La propiedad text-align se utiliza para establecer la alineacin horizontal del texto. El texto puede ser centrado o alineado a la izquierda oa la derecha, o justificado. Cuando text-align se ajusta a "justificar", cada lnea se estira para que cada lnea tiene la misma anchura y los mrgenes izquierdo y derecho son rectos (como en revistas y peridicos).
Ejemplo
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
Pruebe usted mismo
Texto Decoracin
La propiedad text-decoration se utiliza para establecer o quitar las decoraciones de texto. La propiedad text-decoration se utiliza sobre todo para eliminar subraya de enlaces para propsitos de diseo:
Ejemplo
a {text-decoration:none;}
Pruebe usted mismo
Tambin se puede utilizar para decorar texto:
Ejemplo
h1 h2 h3 h4 {text-decoration:overline;} {text-decoration:line-through;} {text-decoration:underline;} {text-decoration:blink;}
Pruebe usted mismo
No se recomienda para subrayar el texto que no es un enlace, ya que a menudo confunde a los usuarios.
Texto Transformacin
La propiedad text-transform se utiliza para especificar las letras maysculas y minsculas en un texto. Se puede utilizar para convertir todo en letras maysculas o minsculas, o mayscula la primera letra de cada palabra.
Ejemplo
p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
Pruebe usted mismo
Texto Sangra
La propiedad text-indentacin se utiliza para especificar la sangra de la primera lnea de un texto.
Ejemplo
p {text-indent:50px;}
Pruebe usted mismo
Ms ejemplos
Especificar el espacio entre caracteres Este ejemplo demuestra cmo aumentar o disminuir el espacio entre caracteres. Especifique el espacio entre las lneas de este ejemplo se muestra cmo especificar el espacio entre las lneas de un prrafo. Ajuste la direccin del texto de un elemento En este ejemplo se muestra cmo cambiar la direccin del texto de un elemento. Aumentar el espacio en blanco entre las palabras En este ejemplo se muestra cmo aumentar el espacio en blanco entre las palabras en un prrafo. Desactive el ajuste de texto dentro de un elemento En este ejemplo se muestra cmo deshabilitar el ajuste de texto dentro de un elemento.
La alineacin vertical de una imagen En este ejemplo se muestra cmo establecer la vertical de alinear una imagen en un texto.
Todas las propiedades del texto CSS

Propiedad color direccin letter-spacing line-height text-align text-decoration text-indent text-shadow text-transform unicode-bidi vertical-align espacio en blanco word-spacing Establece la alineacin vertical de un elemento Especifica cmo un espacio en blanco dentro de un elemento se maneja Aumenta o disminuye el espacio entre las palabras de un texto Descripcin Establece el color del texto Especifica la direccin del texto / escritura direccin Aumenta o disminuye el espacio entre caracteres en un texto Ajusta la altura de la lnea Especifica la alineacin horizontal del texto Especifica la decoracin aadida al texto Especifica la sangra de la primera lnea de un bloque de texto Especifica el efecto de sombra aadido al texto Controla la capitalizacin del texto
Fuente
CSS propiedades de fuente definir la familia de fuentes, la audacia, el tamao y el estilo de un texto.
Diferencia entre Serif y fuentes Sans-serif
En las pantallas de ordenador, sans-serif se consideran ms fciles de leer que las fuentes serif.
Familias de fuentes CSS

En CSS, hay dos tipos de nombres de familias de fuentes:
genrico familia - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Monospace") Familia tipogrfica - una familia de fuentes especficas (como "Times New Roman" o "Arial") Familia de fuentes Descripcin Las fuentes serif tienen pequeas lneas en los extremos de algunos personajes
Familia genrica Serif
Times New Roman Georgia Arial Verdana Courier New Lucida Console
Sans-serif
"Sans" significa sin - estas fuentes no tienen las lneas en los extremos de los personajes
Monospace
Todos los caracteres de espacio sencillo tienen el mismo ancho
Font Family
La familia de fuentes de un texto se establece con la propiedad font-family. La propiedad font-family debera celebrar varios nombres de fuentes como un "retroceso" del sistema. Si el navegador no es compatible con la primera fuente, se trata de la siguiente fuente. Comience con la fuente que desee, y terminar con una familia genrica, para que el navegador elegir un tipo de letra similar en la familia genrica, si no hay otras fuentes disponibles. Nota : Si el nombre de una familia de fuentes es ms que una palabra, debe estar entre comillas, como font-family: "Times New Roman".
Ms de una familia de la fuente se especifica en una lista separada por comas:
Ejemplo
p{font-family:"Times New Roman", Times, serif;}
Pruebe usted mismo
Para las combinaciones de fuentes ms comnmente utilizadas, visita nuestra web Combinaciones de fuentes seguras .
Font Style
La propiedad font-style se utiliza sobre todo para especificar texto en cursiva. Esta propiedad tiene tres valores:
normal - El texto se muestra normalmente cursiva - El texto se muestra en cursiva oblicuo - El texto se "inclina" (oblicua es muy similar a la cursiva, pero apoy menos)
Ejemplo
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
Pruebe usted mismo
Tamao de la Fuente
La propiedad font-size establece el tamao del texto. Ser capaz de manejar el tamao del texto es importante en el diseo web. Sin embargo, usted no debe usar ajustes de tamao de la fuente para hacer parecer prrafos encabezados o ttulos parecen prrafos. Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los ttulos y <p> de prrafos. El valor de font-size puede ser un tamao absoluto o relativo. Tamao absoluto:
Establece el texto a un tamao especificado No permite al usuario cambiar el tamao de texto en todos los navegadores (malo por razones de accesibilidad)
El tamao absoluto es til cuando el tamao fsico de la salida se conoce
Tamao relativo:
Establece el tamao en relacin con los elementos del entorno Permite al usuario cambiar el tamao del texto en los navegadores
Si no se especifica un tamao de fuente, el tamao predeterminado para el texto normal, como prrafos, es 16px (16px = 1em).
Establecer Tamao de fuente con pxeles

Ajustar el tamao del texto con pxeles que ofrece un control total sobre el tamao del texto:
Ejemplo
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
Pruebe usted mismo
El ejemplo anterior permite que Internet Explorer 9, Firefox, Chrome, Opera y Safari para cambiar el tamao del texto. Nota: El ejemplo anterior no funciona en la versin de IE, antes 9. El texto se puede cambiar el tamao de todos los navegadores que utilizan la herramienta de zoom (sin embargo, esto cambia el tamao de la pgina entera, no slo el texto).
Establecer tamao de fuente con Em

Para evitar el problema de cambio de tamao con las versiones anteriores de Internet Explorer, muchos desarrolladores em usar en lugar de pxeles. El tamao de la unidad em es recomendado por el W3C. 1em es igual al tamao de la fuente de corriente. El tamao de texto por defecto en los navegadores es 16px. Por lo tanto, el tamao predeterminado de 1em es 16px. El tamao se puede calcular a partir de pxeles a em utilizando esta frmula: pixeles / 16 = em
Ejemplo
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */
Pruebe usted mismo
En el ejemplo anterior, el tamao del texto en em es el mismo que el ejemplo anterior en pxeles.Sin embargo, con el tamao de la EM, es posible ajustar el tamao del texto en todos los navegadores. Por desgracia, todava hay un problema con las versiones anteriores de IE. El texto se hace ms grande de lo que debera cuando se hace ms grande y ms pequeo de lo que debera cuando hace ms pequeo.
Use una combinacin de porcentaje y Em

La solucin que funciona en todos los navegadores, es establecer una fuente predeterminada de tamao en porcentaje para el elemento <body>:
Ejemplo
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}
Pruebe usted mismo
Nuestro cdigo ahora funciona muy bien! Se muestra el tamao del texto mismo en todos los navegadores, y permite que todos los navegadores para hacer zoom o cambiar el tamao del texto!
Ms ejemplos
Establezca la audacia de la fuente de este ejemplo se muestra cmo establecer la audacia de una fuente. Establezca la variante de la fuente de este ejemplo se muestra cmo establecer la variante de una fuente. Todas las propiedades de la fuente en una declaracin este ejemplo se muestra cmo utilizar la propiedad abreviada para establecer todas las propiedades de la fuente en una declaracin.
Todas las propiedades de fuente CSS
Propiedad fuente font-family font-size font-style font-variant font-weight
Descripcin Establece todas las propiedades de la fuente en una declaracin Especifica la familia de fuentes para el texto Especifica el tamao de fuente del texto Especifica el estilo de fuente para el texto Especifica si el texto debe aparecer en una fuente small-caps Especifica el peso de una fuente
Links
Los enlaces pueden ser de estilo de diferentes maneras.
Styling Links
Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color, fontfamily, fondo, etc.) Especial para los enlaces son que pueden ser de estilo de forma diferente dependiendo del estado en que estn adentro Los cuatro estados enlaces son los siguientes:
a: a: a: a:
link - un enlace normal, no visitado visited - un enlace que el usuario ha visitado hover - un enlace cuando el usuario mouses sobre ella active - un enlace el momento en que se hace clic en
Ejemplo
a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
Pruebe usted mismo
Al configurar el estilo de varios estados de los enlaces, hay algunas reglas de orden:
a: hover debe ir despus a: link y: visited a: active debe venir despus de un: hover
Estilos comunes de enlace

En el ejemplo anterior, el color del enlace cambia en funcin del estado en que est adentro Vamos a ir a travs de algunas de las formas comunes a otros enlaces de estilo:
Texto Decoracin
La propiedad text-decoration se utiliza sobre todo para eliminar subraya de enlaces:
Ejemplo
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}
Pruebe usted mismo
Color de fondo
La propiedad background-color especifica el color de fondo en los enlaces:
Ejemplo
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
Pruebe usted mismo
Ms ejemplos
Aadir estilos a hipervnculos En este ejemplo se muestra cmo agregar otros estilos a hipervnculos. Avanzado - Crear cuadros de enlace Este ejemplo demuestra un ejemplo ms avanzado en el que se combinan varias propiedades CSS para mostrar los enlaces como cuadros.
listas
Las propiedades de la lista de CSS permiten:
Establecer diferentes marcadores de elementos de lista para las listas ordenadas Establecer diferentes marcadores de elementos de lista para listas desordenadas Establecer una imagen como marcador de elemento de la lista
Lista
En HTML, hay dos tipos de listas:
listas desordenadas - los elementos de la lista estn marcados con balas listas ordenadas - los elementos de la lista estn marcados con nmeros o letras
Con CSS, las listas pueden ser de estilo adicional, y las imgenes se puede utilizar como marcador elemento de la lista.
Diferentes marcadores de elemento de lista

El tipo de marcador de elemento de lista se especifica con la propiedad list-style-type:
Ejemplo
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
Pruebe usted mismo
Algunos de los valores son para listas desordenadas, y algunos para listas ordenadas.
Una imagen como marcador de elemento de lista

Para especificar una imagen como marcador de elemento de la lista, utilice la propiedad liststyle-image:
Ejemplo
ul { list-style-image: url('sqpurple.gif'); }
Pruebe usted mismo
El ejemplo anterior no se muestra igual en todos los navegadores. IE y Opera mostrar la imagen de posicin un poco ms alta que Firefox, Chrome y Safari. Si desea que la imagen de marca que se coloca por igual en todos los navegadores, una solucin crossbrowser se explica a continuacin.
Solucin Crossbrowser
El siguiente ejemplo muestra la imagen del marcador por igual en todos los navegadores:
Ejemplo
ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
Pruebe usted mismo
Ejemplo explic:
Por ul: Ajuste el list-style-type a nadie para quitar el marcador de elemento de la lista o Establezca el relleno y el margen para 0px (para la compatibilidad crossbrowser) Para todos los li ul en: o Establezca la URL de la imagen, y mostrar slo una vez (no-repeat) o Coloque la imagen donde desee (izquierda y abajo 0px 5px) o Coloque el texto en la lista con padding-left
Lista - propiedad abreviada

Tambin es posible especificar todas las propiedades de lista en una, sola propiedad. Esto se llama una propiedad resumida. La propiedad abreviada utilizada para las listas, es la propiedad list-style:
Ejemplo
ul { list-style: square url("sqpurple.gif"); }
Pruebe usted mismo
Cuando se utiliza la propiedad resumida, el orden de los valores son:
list-style-type list-style-position (para una descripcin, consulte la tabla de propiedades CSS a continuacin) list-style-image
No importa si uno de los valores anteriores se han perdido, mientras que el resto estn en el orden especificado.
Ms ejemplos
Todos los diferentes elementos de lista para las listas de marcadores Este ejemplo muestra todos los diferentes elementos de lista-marcadores en CSS.
Todas las propiedades de la lista de CSS

Propiedad list-style list-style-image list-style-position Descripcin Establece todas las propiedades de una lista en una declaracin Especifica una imagen como marcador de tems de lista Especifica si los marcadores list-item debe aparecer dentro o fuera del flujo de contenido Especifica el tipo de marcador de tems de lista
list-style-type
Tablas
El aspecto de una tabla HTML puede ser mejorado con CSS:
Empresa
Alfreds Futterkiste Berglunds snabbkp Centro comercial Moctezuma
Contacto
Maria Anders Christina Berglund Francisco Chang
Pas
Alemania Suecia Mxico
Ernst Handel Isla Trading Kniglich Essen Riendo Winecellars Bacchus Magazzini Alimentari Riuniti Norte / Sur Pars spcialits The Big Cheese Vaffeljernet
Roland Mendel Helen Bennett Philip Cramer Yoshi Tannamuri Giovanni Rovelli Simon Crowther Marie Bertrand Liz Nixon Palle Ibsen
Austria Reino Unido Alemania Canad Italia Reino Unido Francia EE.UU. Dinamarca
Bordes de tabla
Para especificar bordes de la tabla en CSS, utilice la propiedad border. El ejemplo siguiente especifica un borde negro para la tabla, th y td elementos:
Ejemplo
table, th, td { border: 1px solid black; }
Pruebe usted mismo
Observe que la tabla del ejemplo anterior tiene bordes dobles. Esto se debe a que la tabla y los elementos th / td tienen bordes separados. Para mostrar un borde sencillo para la tabla, utilice la propiedad border-collapse.
Fronteras Collapse
La propiedad border-collapse establece si los bordes de la tabla se derrumb en un solo borde o separados:
Ejemplo
table { border-collapse:collapse;
} table,th, td { border: 1px solid black; }
Pruebe usted mismo
Cuadro Ancho y Alto

La anchura y altura de una tabla est definida por la anchura y la altura de propiedades. El ejemplo siguiente establece el ancho de la tabla a 100%, y la altura de los elementos th a 50px:
Ejemplo
table { width:100%; } th { height:50px; }
Pruebe usted mismo
Tabla Alineacin del texto

El texto de una tabla est alineada con las propiedades alinear el texto-y vertical-align. La propiedad text-align establece la alineacin horizontal, como izquierda, derecha o centro:
Ejemplo
td { text-align:right; }
Pruebe usted mismo
La propiedad vertical-align establece la alineacin vertical, como arriba, abajo o en medio:
Ejemplo
td { height:50px; vertical-align:bottom; }
Pruebe usted mismo
Cuadro Relleno
Para controlar el espacio entre el borde y el contenido de una tabla, utilice la propiedad de relleno en elementos th y td:
Ejemplo
td { padding:15px; }
Pruebe usted mismo
Tabla de colores
En el ejemplo siguiente se especifica el color de los bordes y el color del texto y del fondo de los elementos th:
Ejemplo
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
Pruebe usted mismo
Ms ejemplos
Haz una tabla de fantasa En este ejemplo se muestra cmo crear una tabla de lujo. Ajuste la posicin de la leyenda de la tabla Este ejemplo muestra cmo colocar el ttulo de la tabla.
Box Model
El modelo de caja CSS
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el trmino "modelo de caja" se usa cuando se habla de diseo y diagramacin. El modelo de caja CSS es esencialmente una caja que envuelve elementos HTML, y se compone de: los mrgenes, bordes, el relleno y el contenido real. El modelo de caja que nos permite colocar un borde alrededor de los elementos y los elementos espaciales en funcin de otros elementos. La siguiente imagen ilustra el modelo de caja:
Explicacin de las diferentes partes:
Margen - Borra un rea alrededor de la frontera. El margen no tiene un color de fondo, que es completamente transparente
Frontera - Un borde que va alrededor del relleno y contenido. El borde se ve afectado por el color de fondo de la caja Relleno - Borra un rea alrededor del contenido. El relleno se ve afectado por el color de fondo de la caja Contenido - El contenido de la caja, donde el texto y las imgenes aparecen
Con el fin de establecer el ancho y el alto de un elemento correctamente en todos los navegadores, lo que necesita saber cmo funciona el modelo de caja.
Anchura y altura de un elemento

Importante: Al configurar el ancho y height de un elemento con CSS, que acaba de establecer la anchura y la altura del rea de contenido . Para calcular el tamao total de un elemento, tambin debe agregar el relleno, bordes y mrgenes. La anchura total del elemento en el siguiente ejemplo es 300px:
width:250px; padding:10px; border:5px solid gray; margin:10px;

Vamos a hacer las matemticas: 250px (anchura) + 20px (relleno izquierdo y derecho) + 10px (borde izquierdo y derecho) + 20px (margen izquierdo y derecho) = 300px Suponga que slo tena 250 pxeles de espacio. Hagamos un elemento con un ancho total de 250px:
Ejemplo
width:220px; padding:10px; border:5px solid gray; margin:0px;
Pruebe usted mismo
La anchura total de un elemento debe calcularse as: Ancho = ancho total del elemento + relleno izquierdo + derecho + acolchado borde izquierdo + derecho + frontera margen izquierdo + margen derecho La altura total de un elemento se calcula de este modo: Altura total del elemento height = padding + top + relleno inferior + superior + frontera + borde inferior del margen superior + inferior margen
Navegadores problema de compatibilidad

Versiones de IE8 y versiones anteriores de IE, incluido el relleno y el borde de la propiedad de ancho. Para solucionar este problema, agregue un <! DOCTYPE html> en la pgina HTML.
BORDER
CSS Border Propiedades

Las propiedades de borde CSS permiten especificar el estilo y el color del borde de un elemento.
Border Style
La propiedad border-style especifica el tipo de borde que desea mostrar. Ninguna de las propiedades de borde tendr ningn efecto a menos que el borderstylepropiedad se establece!
border-style valores:
none: Define ninguna frontera puntos: Define un borde de puntos discontinua: Define un borde discontinuo slido: Define un borde slido doble: define dos fronteras. La anchura de las dos fronteras son el mismo que el valor lmite de ancho
groove: Define un borde acanalado 3D. El efecto depende del valor de border-color
cresta: Define un borde estriado 3D. El efecto depende del valor de border-color
Recuadro: Define un borde inset 3D. El efecto depende del valor de border-color
inicio: define una frontera comienzo 3D. El efecto depende del valor de border-color Prubelo usted mismo: Establece el estilo de la frontera
Border Ancho
La propiedad border-width se usa para ajustar el ancho de la frontera. El ancho se establece en pxeles, o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso. Nota: El "border-width" propiedad no funciona si se utiliza solo. Utilice la opcin "borderstyle" propiedad para establecer las fronteras primero.
Ejemplo
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
Pruebe usted mismo
Lmite Color
La propiedad border-color se utiliza para establecer el color de la frontera. El color se puede ajustar por:
Nombre - indique el nombre del color, como "rojo" RGB - RGB especifica un valor, como "rgb (255,0,0)" Hex - indique un valor hexadecimal, como "# ff0000"
Tambin puede configurar el color del borde de "transparente". Nota: El "border-color" propiedad no funciona si se utiliza solo. Utilice la opcin "borderstyle" propiedad para establecer las fronteras primero.
Ejemplo
p.one { border-style:solid; border-color:red; } p.two {
border-style:solid; border-color:#98bf21; }
Pruebe usted mismo
Border - partes individuales

En CSS es posible especificar lmites diferentes para partes diferentes:
Ejemplo
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
Pruebe usted mismo
El ejemplo anterior tambin se puede ajustar con una sola propiedad:
Ejemplo
border-style:dotted solid;
Pruebe usted mismo
La propiedad estilo de borde puede tener de uno a cuatro valores.
border-style: double slida discontinua de trazos; o borde superior est salpicado o borde derecho es slido o borde inferior es el doble o borde izquierdo es discontinua
border-style: double slidos puntos; o borde superior est salpicado o bordes derecho e izquierdo son slidas o borde inferior es el doble
border-style: puntos slidos;
o o
bordes superior e inferior estn salpicadas bordes derecho e izquierdo son slidas
border-style: puntos; o los cuatro bordes estn salpicadas
La propiedad estilo de borde se utiliza en el ejemplo anterior. Sin embargo, tambin funciona con border-width y borde de color.
Border - Abreviacin de las propiedades

Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se trata de las fronteras. Para acortar el cdigo, tambin es posible especificar todas las propiedades de bordes individuales en una propiedad. Esto se llama una propiedad resumida. La propiedad border es una forma abreviada de las propiedades de bordes individuales siguientes:
border-width border-style (requerido) border-color
Ejemplo
border:5px solid red;
Pruebe usted mismo
Ms ejemplos
Todas las propiedades de borde superior en una declaracin este ejemplo se muestra una propiedad abreviada para establecer todas las propiedades para el borde superior en una declaracin. Establezca el estilo del borde inferior Este ejemplo muestra cmo establecer el estilo del borde inferior. Ajuste el ancho del borde izquierdo Este ejemplo muestra cmo establecer el ancho del borde izquierdo.
Ajuste el color de los cuatro bordes Este ejemplo muestra cmo establecer el color de los cuatro bordes. Se puede tener de uno a cuatro colores. Ajuste el color del borde derecho Este ejemplo muestra cmo establecer el color del borde derecho.
Todas las propiedades de borde CSS

Propiedad frontera border-bottom border-bottom-color border-bottom-estilo border-bottom-ancho border-color border-left border-left-color border-left-estilo border-left-ancho border-right border-right-color border-right-estilo border-right-ancho border-style border-top border-top-color border-top-estilo border-top-ancho Descripcin Establece todas las propiedades de borde en una declaracin Establece todas las propiedades del borde de fondo en una declaracin Establece el color del borde inferior Establece el estilo del borde inferior Establece el ancho del borde inferior Establece el color de los cuatro bordes Establece todas las propiedades del borde izquierdo en una declaracin Establece el color del borde izquierdo Establece el estilo del borde izquierdo Establece el ancho del borde izquierdo Establece todas las propiedades del borde derecho en una declaracin Establece el color del borde derecho Establece el estilo del borde derecho Establece el ancho del borde derecho Establece el estilo de los cuatro bordes Establece todas las propiedades de borde superior en una declaracin Establece el color del borde superior Establece el estilo del borde superior Establece el ancho del borde superior
border-width
Establece el ancho de los cuatro bordes
CSS Outlines
Un esquema es una lnea que se dibuja en torno a los elementos (fuera de las fronteras) para que el elemento "se salga". Las propiedades del esquema especificar el estilo, el color y el ancho de un esquema.
Ejemplos
Trace una lnea alrededor de un elemento (contorno) En este ejemplo se muestra cmo dibujar una lnea alrededor de un elemento, fuera del borde fronterizo. Defina el estilo de un esquema En este ejemplo se muestra cmo establecer el estilo de un esquema. Establecer el color de un esquema En este ejemplo se muestra cmo establecer el color de un esquema. Establecer el ancho de un esquema En este ejemplo se muestra cmo establecer el ancho de un esquema.
Esquema CSS
Un esquema es una lnea que se dibuja en torno a los elementos (fuera de las fronteras) para que el elemento "se salga". Sin embargo, la propiedad contorno es diferente de la propiedad frontera. El esquema no es una pieza de dimensiones de un elemento; anchura total del elemento y la altura no se ve afectada por el ancho del contorno.
Todas las Propiedades del esquema CSS

El nmero en el "CSS" en la columna indica qu versin de CSS se define la propiedad (o CSS1 CSS2). Propiedad perfilar Descripcin Valores CSS 2
Establece todas las propiedades de esquema en una outline-color contorno de estilo declaracin contorno ancho de heredar Establece el color de un esquema color_name hex_number rgb_number invertido heredar ninguno de puntos de trazos slidos de doble ranura cresta recuadro principio heredar
outline-color
esbozo de estilo
Establece el estilo de un esquema
contorno de ancho
Establece el ancho de un esquema
fino 2 a medio espesor longitudheredar
CSS Margen
Las propiedades de los mrgenes CSS definen el espacio alrededor de los elementos.
Margen
El margen despeja un rea alrededor de un elemento (fuera de la frontera). El margen no tiene un color de fondo, y es completamente transparente. El margen superior, derecho, inferior e izquierdo se pueden cambiar independientemente el uso de propiedades separadas. Una propiedad margen taquigrafa tambin se puede utilizar, para cambiar todos los mrgenes a la vez.
Valores posibles
Valor auto longitud % heredar Descripcin El navegador calcula un margen Especifica un margen en px, pt, cm, valor por defecto es 0px etc Especifica un margen en porcentaje de la anchura del elemento que contiene Especifica que el margen se hereda del elemento padre
Es posible utilizar valores negativos, para solapar contenido.
Margen - partes individuales

En CSS, es posible especificar diferentes mrgenes por diversos lados:
Ejemplo
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
Pruebe usted mismo
Margen - Abreviacin de las propiedades
Para acortar el cdigo, es posible especificar todas las propiedades de margen en una propiedad.Esto se llama una propiedad resumida. La propiedad abreviada para todas las propiedades de margen es "margen":
Ejemplo
margin:100px 50px;
Pruebe usted mismo
La propiedad de margen puede tener de uno a cuatro valores.
margen: 25px o margen o margen o margen o margen
50px 75px 100px; superior es de 25px derecho es 50px inferior es de 75px izquierdo es de 100px
margen: 25px 50px 75px; o margen superior es de 25px o mrgenes derecho e izquierdo son 50px o margen inferior es de 75px
margen: 50px 25px; o mrgenes superior e inferior son 25px o mrgenes derecho e izquierdo son 50px
margen: 25px; o los cuatro mrgenes son 25px
Ms ejemplos
Establece el margen superior de un texto con un valor cm Este ejemplo muestra cmo se establece el margen superior de un texto con un valor cm. Establece el margen inferior de un texto usando un valor de porcentaje de este ejemplo se muestra cmo se establece el margen inferior en porcentaje, respecto a la anchura del elemento que contiene.
Todas las propiedades de los mrgenes CSS
Propiedad margen
Descripcin Una propiedad abreviada para establecer las propiedades de los mrgenes en una declaracin Establece el margen inferior de un elemento Establece el margen izquierdo de un elemento Establece el margen derecho de un elemento Establece el margen superior de un elemento
margin-bottom margin-left margin-right margin-top
CSS Relleno
Las propiedades de relleno CSS definen el espacio entre el borde del elemento y el contenido del elemento.
Relleno
El relleno de borra un rea alrededor del contenido (dentro del borde) de un elemento. El relleno se ve afectado por el color de fondo del elemento. El relleno superior, derecho, inferior e izquierdo se pueden cambiar independientemente el uso de propiedades separadas. Una propiedad de acolchado taquigrafa tambin se puede utilizar, para cambiar todos los rellenos a la vez.
Valores posibles
Valor longitud % Descripcin Define un relleno fijo (en pxeles, pt, em, etc) Define un relleno en% del elemento contenedor
Relleno - lados individuales

En CSS, es posible especificar el relleno diferente para partes diferentes:
Ejemplo
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
Pruebe usted mismo
Relleno - Abreviacin de las propiedades

Para acortar el cdigo, es posible especificar todas las propiedades de relleno en una propiedad.Esto se llama una propiedad resumida. La propiedad abreviada para todas las propiedades de relleno es "relleno":
Ejemplo
padding:25px 50px;
Pruebe usted mismo
La propiedad padding puede tener de uno a cuatro valores.
padding: 25px 50px 75px 100px; o acolchado superior es 25px o relleno derecho es 50px o acolchado inferior es 75px o margen izquierdo es 100px
padding: 25px 50px 75px; o acolchado superior es 25px o rellenos derecha e izquierda son 50px o acolchado inferior es 75px
padding: 25px 50px; o acolchados superior e inferior son 25px o rellenos derecha e izquierda son 50px
padding: 25px; o los cuatro rellenos son 25px
Ms ejemplos
Todas las propiedades de relleno en una declaracin este ejemplo se demuestra una propiedad abreviada para establecer todas las propiedades de relleno en una declaracin, pueden tener de uno a cuatro valores. Ajuste el margen izquierdo En este ejemplo se muestra cmo establecer el margen izquierdo del elemento PA. Ajuste el margen derecho de este ejemplo se muestra cmo establecer el margen derecho del elemento ap. Establezca el relleno superior En este ejemplo se muestra cmo establecer el relleno superior de elemento PA. Ajuste el margen inferior Este ejemplo muestra cmo establecer el margen inferior del elemento ap.
Todas las propiedades de relleno de CSS

Propiedad relleno Descripcin Una propiedad abreviada para establecer las propiedades de relleno en una declaracin Establece el margen inferior de un elemento Establece el margen izquierdo de un elemento Establece el margen derecho de un elemento Define el relleno superior de un elemento
padding-bottom padding-left padding-right padding-top
CSS Agrupacin y jerarquizacin Selectors

Selectores Agrupacin
En las hojas de estilo a menudo existen elementos con el mismo estilo.
h1 { color:green; } h2 { color:green; } p { color:green; }

Para reducir al mnimo el cdigo, puede selectores de grupo.
Separe cada selector con una coma. En el siguiente ejemplo hemos agrupado los selectores en el cdigo anterior:
Ejemplo
h1,h2,p { color:green; }
Pruebe usted mismo
Selectores de anidacin
Es posible aplicar un estilo para un selector dentro de un selector. En el siguiente ejemplo, un estilo especificado para todos los elementos p, un estilo especificado para todos los elementos con class = "marcados", y un tercer estilo se especifica slo para elementos p dentro de los elementos con class = "marcados":
Ejemplo
p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; }
Pruebe usted mismo
CSS Dimension
Las propiedades de la dimensin de CSS permite controlar la altura y la anchura de un elemento.
Intntelo usted mismo - Ejemplos

Ajuste la altura de los elementos de este ejemplo se muestra cmo establecer la altura de los diferentes elementos. Ajuste la altura de una imagen utilizando por ciento este ejemplo se muestra cmo establecer el alto de un elemento con un valor porcentual. Ajuste el ancho de un elemento con un valor de pxeles Este ejemplo muestra cmo establecer el ancho de un elemento con un valor de pxel. Ajuste de la altura mxima de un elemento de este ejemplo se muestra cmo establecer la altura mxima de un elemento. Ajuste la anchura mxima de un elemento utilizando por ciento este ejemplo se muestra cmo establecer la anchura mxima de un elemento mediante un valor porcentual. Ajuste la altura mnima de un elemento En este ejemplo se muestra cmo establecer la altura mnima de un elemento. Ajuste el ancho mnimo de un elemento con un valor de pxeles Este ejemplo muestra cmo establecer la anchura mnima de un elemento con un valor de pxel.
Todas las propiedades de dimensiones CSS

El nmero en el "CSS" en la columna indica qu versin de CSS se define la propiedad (o CSS1 CSS2). Propiedad altura Descripcin Establece el alto de un elemento Valores auto longitud % heredar CSS 1
max-height
Establece la altura mxima de un elemento
ninguno longitud% heredar 2
max-width
Define la anchura mxima de un elemento
ninguno longitud% heredar 2
min-height
Establece la altura mnima de un elemento
longitud % heredar
min-width
Establece el ancho mnimo de un elemento
longitud % heredar auto longitud % heredar
ancho
Establece el ancho de un elemento
CSS Display y Visibilidad

La propiedad display especifica si / como un elemento en la pantalla, y la propiedad de visibilidad especifica si un elemento debe ser visible u oculto.
Recuadro 1
Recuadro 2
Recuadro 3
Cmo ocultar un elemento - display: none o visibility: hidden

Cmo ocultar un elemento se puede hacer mediante el establecimiento de la propiedad display a "ninguno" o la propiedad de visibilidad de "oculto". Sin embargo, note que estos dos mtodos producen resultados diferentes: visibilidad: Oculta un elemento, pero todava ocupan el mismo espacio que antes. El elemento se oculta, pero todava afectan al diseo.
Ejemplo
h1.hidden {visibility:hidden;}
Pruebe usted mismo
display: none esconde un elemento, y no ocupa espacio. El elemento se oculta, y la pgina se mostrar como si el elemento no est ah:
Ejemplo
h1.hidden {display:none;}
Pruebe usted mismo
CSS Display - Block y elementos en lnea

Un elemento de bloque es un elemento que ocupa todo el ancho disponible completo, y tiene un salto de lnea antes y despus de ella. Ejemplos de elementos de bloque:
<h1> <p> <div>
Un elemento en lnea slo ocupa el mismo ancho que sea necesario, y no forzar saltos de lnea. Ejemplos de elementos en lnea:
<span> <a>
Cambiar la forma de un elemento se muestra

Cambio de un elemento en lnea a un elemento de bloque, o viceversa, puede ser til para hacer la pgina se vea de una manera especfica, y todava siguen los estndares web. El ejemplo siguiente muestra los elementos de lista como elementos en lnea:
Ejemplo
li {display:inline;}
Pruebe usted mismo
El siguiente ejemplo muestra abarcan elementos como elementos de bloque:
Ejemplo
span {display:block;}
Pruebe usted mismo
Nota: No cambiar el tipo de visualizacin de un elemento cambia slo cmo el elemento en la pantalla, el tipo de elemento que es. Por ejemplo: Un elemento en lnea establecida en display: block no se le permite tener un elemento de bloque anidado dentro de l.
Ms ejemplos
Cmo mostrar un elemento como un elemento en lnea. Este ejemplo muestra cmo mostrar un elemento como un elemento en lnea. Cmo mostrar un elemento como un elemento de bloque En este ejemplo se muestra cmo mostrar un elemento como un elemento de bloque. Cmo hacer que un colapso del elemento de tabla Este ejemplo muestra cmo crear un colapso elemento de tabla.
CSS Posicionamiento
Decidir qu elemento va a mostrar en frente! Los elementos pueden superponerse! Posicionamiento
Las propiedades de posicionamiento CSS permiten colocar un elemento. Tambin se puede colocar un elemento detrs de otro, y especificar qu debe ocurrir cuando el contenido de un elemento es demasiado grande. Los elementos se pueden colocar usando la parte superior, inferior, izquierda y propiedades adecuadas. Sin embargo, estas propiedades no funcionar a menos que la propiedad position se establece en primer lugar. Tambin funcionan de forma diferente dependiendo del mtodo de posicionamiento. Hay cuatro mtodos de posicionamiento diferentes.
Posicionamiento esttico
Elementos HTML esttico se colocan de forma predeterminada. Un elemento esttico posicionado siempre se coloca de acuerdo con el flujo normal de la pgina. Estticas elementos posicionados no se ven afectados por la parte superior, inferior, izquierdo y propiedades adecuadas.
Posicionamiento fijo
Un elemento con posicin fija est situado con relacin a la ventana del navegador. No se mover incluso si la ventana se desplaza:
Ejemplo
p.pos_fixed { position:fixed; top:30px; right:5px; }
Pruebe usted mismo
Nota: IE7 e IE8 compatible con el valor fijo slo si se especifica un DOCTYPE!. Fijos los elementos posicionados se elimina del flujo normal. El documento y otros elementos se comportan como el elemento fijo colocado no existe. Fijos los elementos posicionados pueden superponerse otros elementos.
Posicionamiento relativo
Un elemento posicionado relativo est situado con relacin a su posicin normal.
Ejemplo
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
Pruebe usted mismo
El contenido de elementos en posicin relativa puede ser movido y se superponen otros elementos, pero el espacio reservado para el elemento se conserva an en el flujo normal.
Ejemplo
h2.pos_top { position:relative; top:-50px; }
Pruebe usted mismo
Elementos en posicin relativa a menudo se utilizan como bloques de contenedores para los elementos con posicin absoluta.
Posicionamiento absoluto
Un elemento posicin absoluta est situado con relacin al elemento padre primero que tiene una posicin que no sea esttica. Si no se encuentra dicho elemento, el bloque de contencin es <html>:
Ejemplo
h2 { position:absolute; left:100px; top:150px; }
Pruebe usted mismo
Elementos con posicin absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como el elemento con posicin absoluta no existe. Elementos con posicin absoluta se pueden superponer otros elementos.
Elementos superpuestos
Cuando los elementos estn posicionados fuera del flujo normal, pueden superponerse otros elementos. La propiedad z-index especifica el orden de apilamiento de un elemento (elemento que debe ser colocado en frente de o detrs de los otros). Un elemento puede tener una orden de apilamiento positivo o negativo:
Ejemplo
img { position:absolute; left:0px;
top:0px; z-index:-1; }
Pruebe usted mismo
Un elemento con mayor orden de la pila siempre est en frente de un elemento con una orden de pila baja. Nota: Si dos elementos posicionados se superponen, sin un z-index especifica, el ltimo elemento posicionado en el cdigo HTML se mostrar en la parte superior.
Ms ejemplos
Establecer la forma de un elemento En este ejemplo se muestra cmo establecer la forma de un elemento. El elemento est recortado en esta forma, y se muestra. Cmo mostrar desbordamiento en un elemento mediante desplazamiento En este ejemplo se muestra cmo establecer la propiedad de desbordamiento para crear una barra de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un rea especifica. Cmo configurar el navegador para manejar automticamente desbordamiento Este ejemplo muestra cmo configurar el navegador para manejar automticamente desbordamiento. Cambiar el cursor En este ejemplo se muestra cmo cambiar el cursor.
Todas las propiedades de posicin CSS

El nmero en el "CSS" en la columna indica qu versin de CSS se define la propiedad (o CSS1 CSS2). Propiedad fondo Descripcin Define el borde del margen inferior de una caja posicionada Valores auto longitud % heredar CSS 2
cortar
Clips de un elemento con posicin absoluta forma automtica heredar
cursor
Especifica el tipo de cursor que se mostrar url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help Establece el margen izquierdo de una caja posicionada Establece lo que sucede si se desborda contenido de cuadros de un elemento auto longitud % heredar
izquierda
desbordarse
auto oculto desplazamiento visible heredar absoluto fijo con relacin esttica heredar auto longitud % heredar
posicin
Especifica el tipo de posicionamiento para un elemento
derecho
Establece el borde del margen derecho de una caja posicionada
top
Define el borde del margen superior de una auto longitud % heredar caja posicionada Establece el orden de apilamiento de un elemento nmero de automviles heredar
z-index
CSS Float
Qu es Float CSS?
Con flotador CSS, un elemento puede ser empujado hacia la izquierda o hacia la derecha, permitiendo que otros elementos para envolver alrededor de ella. Float se utiliza a menudo para las imgenes, pero tambin es til cuando se trabaja con diseos.
Qu elementos de flotacin
Los elementos estn flotando en horizontal, esto significa que un elemento slo se puede hacer flotar hacia la izquierda o la derecha, no hacia arriba o hacia abajo. Un elemento flotante se mover hacia la izquierda o hacia la derecha como pueda. Normalmente esto significa que todo el camino a la izquierda o derecha del elemento contenedor. Los elementos despus de que el elemento flotante fluir alrededor del mismo. Los elementos antes del elemento flotante no se ver afectado. Si una imagen es flotado a la derecha, un texto siguiente fluye alrededor de ella, a la izquierda:
Ejemplo
img {
float:right; }
Pruebe usted mismo
Elementos flotantes lado de la otra

Si coloca varios elementos flotantes despus de la otra, que flotar lado de la otra si hay espacio. Aqu hemos hecho una galera de imgenes utilizando la propiedad float:
Ejemplo
.thumbnail { float:left; width:110px; height:90px; margin:5px; }
Pruebe usted mismo
Desactivacin Float - Uso Clear

Elementos despus de que el elemento flotante fluir alrededor del mismo. Para evitar esto, utilice la propiedad claros. La propiedad clear especifica los lados de un elemento flotante dems elementos no estn permitidos. Agregar una lnea de texto en la galera de imgenes, utilizando la propiedad claros:
Ejemplo
.text_line { clear:both; }
Pruebe usted mismo
Ms ejemplos
Una imagen con la frontera y los mrgenes que flota a la derecha de un prrafo Deje un flotador de la imagen a la derecha de un prrafo. Aadir a la frontera y los mrgenes de la imagen. Una imagen con un pie de foto que flota a la derecha Deje una imagen con un flotador de texto a la derecha. Deje que la primera letra de un flotador prrafo a la izquierda Vamos a la primera letra de un flotador prrafo a la izquierda y el estilo de la letra. Creacin de un men horizontal del flotador uso con una lista de hipervnculos para crear un men horizontal. Creacin de una pgina web sin tablas Utilice flotador para crear una pgina web con un encabezado, pie de pgina de contenido, la izquierda y la pgina principal.
Todas las propiedades CSS Float

El nmero en el "CSS" en la columna indica qu versin de CSS se define la propiedad (o CSS1 CSS2). Propiedad claro Descripcin Especifica los lados de un elemento donde otros elementos flotantes no estn permitidos Valores izquierda derecha ambos ninguno heredar izquierda derecha no heredar CSS 1
flotar
Especifica si una caja debe flotar
CSS Horizontal Alinear

En CSS, varias propiedades se utilizan para alinear elementos horizontalmente. Alineacin de elementos de bloque
Un elemento de bloque es un elemento que ocupa todo el ancho disponible completo, y tiene un salto de lnea antes y despus de ella. Ejemplos de elementos de bloque:
<h1> <p> <div>
Para alinear texto, vase el texto CSS captulo. En este captulo le mostraremos cmo alinear horizontalmente los elementos de bloque para fines de diseo.
Centro de Alineacin Utilizar la propiedad margen

Los elementos de bloque se pueden alinear ajustando los mrgenes izquierdo y derecho de "auto". Nota: El uso margin: auto no funciona en Internet Explorer 8 y versiones anteriores, a menos que se declare un DOCTYPE!. Ajuste de los mrgenes izquierdo y derecho de auto especifica que se debe dividir el margen disponible por igual. El resultado es un elemento de centrado:
Ejemplo
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
Pruebe usted mismo
Consejo: Alinear no tiene efecto si el ancho es de 100%. Nota: En IE5 hay un error de manipulacin margen para elementos de bloque. Para que el ejemplo anterior trabajo en IE5, aadir algo de cdigo adicional. Intntelo usted mismo
Izquierda y Derecha Alinear Utilizar la propiedad posicin

Un mtodo para alinear elementos es utilizar el posicionamiento absoluto:
Ejemplo
.right {
position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
Pruebe usted mismo
Nota: los elementos posicionados absolutos se eliminan del flujo normal, y se pueden solapar elementos.
Cuestiones de Compatibilidad crossbrowser

Al alinear los elementos de este tipo, siempre es una buena idea para predefinir margen y el relleno para el elemento <body>. Esto es para evitar diferencias visuales en diferentes navegadores. Hay un problema con IE8 y anteriores, cuando se utiliza la propiedad position. Si un elemento contenedor (en nuestro caso <div class="container">) tiene una anchura especificada, y la declaracin! DOCTYPE falta, versiones de IE8 y anteriores se aadir un margen 17px a la derecha.Este parece ser el espacio reservado para una barra de desplazamiento. Coloque siempre la declaracin DOCTYPE al utilizar la propiedad position:
Ejemplo
body { margin:0; padding:0; } .container { position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
Pruebe usted mismo
Izquierda y Derecha Alinear Utilizar la propiedad float
Un mtodo para alinear elementos es utilizar la propiedad float:
Ejemplo
.right { float:right; width:300px; background-color:#b0e0e6; }
Pruebe usted mismo
Cuestiones de Compatibilidad crossbrowser

Al alinear los elementos de este tipo, siempre es una buena idea para predefinir margen y el relleno para el elemento <body>. Esto es para evitar diferencias visuales en diferentes navegadores. Hay un problema con IE8 y cuando antes mediante la propiedad float. Si la declaracin! DOCTYPE falta, IE8 versiones anteriores y se aade un margen de 17px en el lado derecho. Este parece ser el espacio reservado para una barra de desplazamiento. Coloque siempre la declaracin DOCTYPE al utilizar la propiedad float:
Ejemplo
body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; }
Pruebe usted mismo
CSS pseudo-clases
CSS pseudo-clases se utilizan para aadir efectos especiales a algunos selectores.
Sintaxis
La sintaxis de pseudo-clases:
selector:pseudo-class {property:value;}
Clases CSS tambin se puede utilizar con pseudo-clases:
selector.class:pseudo-class {property:value;}
Anchor Las pseudo-clases

Los enlaces pueden aparecer de forma diferente en un navegador CSS-apoyo:
Ejemplo
a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
Pruebe usted mismo
Nota: a: hover debe ir despus a: link y: visited en la definicin CSS con el fin de ser eficaces! Nota: a: active debe venir despus de un: hover en la definicin CSS con el fin de ser eficaces! Nota: Pseudo-clase nombres no distinguen entre maysculas y minsculas.
Las pseudo-clases y clases CSS

Las pseudo-clases pueden ser combinados con clases CSS:
a.red:visited {color:#FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a>

Si el enlace en el ejemplo anterior se ha visitado, se muestran en rojo.
CSS - The: first-child pseudo-clase

El: first-child pseudo-clase coincide con un elemento determinado, que es el primer hijo de otro elemento.
Nota: Para: En primer hijo a trabajar en IE8 y anteriores, un <DOCTYPE!> deben ser declarados.
Haga coincidir el elemento <p> primera

En el ejemplo siguiente, el selector equivale a cualquier elemento <p> que es el primer hijo de cualquier elemento:
Ejemplo
<html> <head> <style> p:first-child { color:blue; } </style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html>
Pruebe usted mismo
Haga coincidir el elemento <i> por primera vez en todos los elementos <p>
En el ejemplo siguiente, el selector coincide con el elemento <i> primero en todos los elementos <p>:
Ejemplo
<html> <head> <style> p > i:first-child { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>
Pruebe usted mismo
Coincidir todos los elementos <i> en todos los elementos <p> primer hijo
En el ejemplo siguiente, el selector equivale a todos los elementos <i> en <p> elementos que son el primer hijo de otro elemento:
Ejemplo
<html> <head> <style> p:first-child i { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>
Pruebe usted mismo
CSS - The: lang Pseudo-clase

El: lang pseudo-clase permite definir reglas especiales para diferentes idiomas. Nota: IE8 soporta el: lang pseudo-clase slo si <DOCTYPE!> se especifica. En el siguiente ejemplo, el: lang clase define las comillas para los elementos de Q con lang = "no":
Ejemplo
<html> <head> <style> q:lang(no) {quotes: "~" "~";} </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body> </html>
Pruebe usted mismo
Ms ejemplos
Aadir estilos a hipervnculos En este ejemplo se muestra cmo agregar otros estilos a hipervnculos. Uso de: centrarse Este ejemplo muestra cmo utilizar el: enfoque pseudo-clase.
Todas las pseudo-clases CSS / elementos

Selector : Link : Visited : Activo : Hover : Centrarse : First-letter : First-line : First-child Ejemplo a:link a:visited a:active a:hover input:focus p:first-letter p:first-line p:first-child Ejemplo de descripcin Selecciona todos los enlaces no visitados Selecciona todos los enlaces visitados Selecciona el enlace activo Selecciona enlaces ratn sobre Selecciona el elemento que tiene el foco de entrada Selecciona la primera letra de cada elemento <p> Selecciona la primera lnea de cada elemento <p> Selecciona cada <p> elementos que es el primer hijo de su padre Insertar contenido antes de cada elemento <p> Insertar contenido despus de cada elemento <p> Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso"
: Antes : Despus de : Lang ( idioma )
p:before p:after p:lang(it)
CSS pseudo-elementos
CSS pseudo-elementos se utilizan para aadir efectos especiales a algunos selectores.
Sintaxis
La sintaxis de los pseudo-elementos:
selector:pseudo-element {property:value;}
Clases CSS tambin se puede utilizar con los pseudo-elementos:
selector.class:pseudo-element {property:value;}
: First-line Pseudo-elementos
La "primera lnea" pseudo-elemento se utiliza para agregar un estilo especial a la primera lnea de un texto. En el siguiente ejemplo el navegador formatos de la primera lnea de texto en un elemento de AP de acuerdo con el estilo de la "primera lnea" pseudo-elemento (donde el navegador rompe la lnea, depende del tamao de la ventana del navegador):
Ejemplo
p:first-line { color:#ff0000; font-variant:small-caps; }
Pruebe usted mismo
Nota: La "primera lnea" pseudo-elemento slo se puede utilizar con los elementos a nivel de bloque. Nota: Las siguientes propiedades se aplican a la "primera lnea" pseudo-elemento:
propiedades de la fuente propiedades de color propiedades de fondo word-spacing letter-spacing text-decoration vertical-align text-transform
line-height claro
: First-letter pseudo-elemento
La "primera carta" pseudo-elemento se utiliza para agregar un estilo especial a la primera letra de un texto:
Ejemplo
p:first-letter { color:#ff0000; font-size:xx-large; }
Pruebe usted mismo
Nota: La "primera carta" pseudo-elemento slo se puede utilizar con los elementos a nivel de bloque. Nota: Las siguientes propiedades se aplican a la "primera carta" pseudo-elemento:
propiedades de la fuente propiedades de color propiedades de fondo propiedades de los mrgenes propiedades de relleno propiedades de borde text-decoration vertical-align (slo si "float" es "ninguno") text-transform line-height flotar claro
Los pseudo-elementos y clases CSS

Los pseudo-elementos se pueden combinar con clases CSS:
p.article:first-letter {color:#ff0000;} <p class="article">A paragraph in an article</p>

El ejemplo anterior muestra la primera letra de todos los prrafos con class = "artculo", en rojo.
Mltiples pseudo-elementos
Varios pseudo-elementos tambin se pueden combinar. En el siguiente ejemplo, la primera letra de un prrafo ser de color rojo, en un tamao de letra extra grande. El resto de la primera lnea ser de color azul, y en pequeas cpsulas. El resto del prrafo ser el tamao de la fuente y el color predeterminados:
Ejemplo
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
Pruebe usted mismo
CSS - The: antes de pseudo-elemento

El ": antes de" pseudo-elemento se puede utilizar para insertar un cierto contenido antes de que el contenido de un elemento. El ejemplo siguiente inserta una imagen antes de cada elemento h1:
Ejemplo
h1:before { content:url(smiley.gif); }
Pruebe usted mismo
CSS - The: despus de pseudo-elemento

El ": despus de" pseudo-elemento se puede utilizar para insertar un cierto contenido despus de que el contenido de un elemento. El ejemplo siguiente inserta una imagen despus de cada elemento h1:
Ejemplo
h1:after { content:url(smiley.gif); }
Pruebe usted mismo
Todas las pseudo-clases CSS / elementos

Selector : Link : Visited : Activo : Hover : Centrarse : First-letter : First-line : First-child Ejemplo a:link a:visited a:active a:hover input:focus p:first-letter p:first-line p:first-child Ejemplo de descripcin Selecciona todos los enlaces no visitados Selecciona todos los enlaces visitados Selecciona el enlace activo Selecciona enlaces ratn sobre Selecciona el elemento que tiene el foco de entrada Selecciona la primera letra de cada elemento <p> Selecciona la primera lnea de cada elemento <p> Selecciona cada <p> elementos que es el primer hijo de su padre Insertar contenido antes de cada elemento <p> Insertar contenido despus de cada elemento <p> Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso"
: Antes : Despus de : Lang ( idioma )
p:before p:after p:lang(it)
Navigation Bar
Demostracin: Navigation Bar

CASA NOTICIAS ARTCULOS FORO CONTACTO SOBRE
Barras de navegacin
Tener fcil de utilizar la navegacin es importante para cualquier sitio web. Con CSS se puede transformar aburridos mens HTML en barras de navegacin guapos.
Navigation Bar = Lista de Enlaces

Una barra de navegacin necesita HTML estndar como base. En nuestro ejemplo vamos a construir la barra de navegacin de una lista HTML estndar. Una barra de navegacin es bsicamente una lista de enlaces, as que usar el <ul> y elementos <li> tiene mucho sentido:
Ejemplo
<ul> <li><a <li><a <li><a <li><a </ul> href="default.asp">Home</a></li> href="news.asp">News</a></li> href="contact.asp">Contact</a></li> href="about.asp">About</a></li>
Pruebe usted mismo
Ahora vamos a quitar las balas y los mrgenes y el relleno de la lista:
Ejemplo
ul { list-style-type:none; margin:0; padding:0; }
Pruebe usted mismo
Ejemplo explic:
list-style-type: none - Elimina las balas. Una barra de navegacin no necesita marcadores de lista Ajuste de mrgenes y el relleno a 0 para eliminar la configuracin del navegador por defecto
El cdigo en el ejemplo anterior es el cdigo estndar que se utiliza en las dos barras de navegacin vertical y horizontal.
Vertical barra de navegacin

Para crear una barra de navegacin vertical, slo tenemos que el estilo de los elementos <a>, adems del cdigo anterior:
Ejemplo
a { display:block; width:60px; }
Pruebe usted mismo
Ejemplo explic:
display: block - Visualizacin de los enlaces como elementos de bloque hace que el rea entera vnculo clickable (no slo el texto), y que nos permite especificar la anchura Ancho: 60px - Los elementos de bloque ocupar todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 pxeles
Sugerencia: Tambin echa un vistazo a nuestro estilo completamente ejemplo una barra vertical de navegacin . Nota: Especifique siempre el ancho de los elementos <a> en una barra de navegacin vertical. Si se omite el ancho, IE6 puede producir resultados inesperados.
Horizontal Barra de Navegacin

Hay dos formas de crear una barra de navegacin horizontal. El uso en lnea o flotante elementos de la lista. Ambos mtodos funcionan muy bien, pero si quieres que los enlaces sean del mismo tamao, usted tiene que utilizar el mtodo de flotacin.
Artculos Inline Lista

Una forma de crear una barra de navegacin horizontal es especificar los elementos <li> como en lnea, adems de la "norma" el cdigo de seguridad:
Ejemplo
li { display:inline; }
Pruebe usted mismo
Ejemplo explic:
display: inline; - De forma predeterminada, los elementos <li> son elementos de bloque. En este sentido, eliminar los saltos de lnea antes y despus de cada elemento de la lista, para mostrar en una sola lnea
Sugerencia: Tambin echa un vistazo a nuestro estilo completamente ejemplo barra de navegacin horizontal .
Elementos flotantes Lista

En el ejemplo anterior los enlaces tienen anchuras diferentes. Para todos los vnculos tener un ancho igual, flotan los elementos <li> y especificar el ancho de los elementos <a>:
Ejemplo
li { float:left; } a { display:block; width:60px; }
Pruebe usted mismo
Ejemplo explic:
float: left - el uso del flotador para obtener los elementos de bloque se deslice al lado del otro display: block - Visualizacin de los enlaces como elementos de bloque hace que el rea entera vnculo clickable (no slo el texto), y que nos permite especificar la anchura anchura: 60px - Dado que los elementos de bloque tomar hasta el ancho completo disponible, no pueden flotar junto a la otra. Se especifica el ancho de los enlaces a 60px
Sugerencia: Tambin echa un vistazo a nuestro estilo completamente ejemplo barra de navegacin horizontal .
CSS Galera de imgenes

CSS se puede utilizar para crear una galera de imgenes.
Aada una descripcin de la imagen aqu
Galera de imgenes
La galera de imgenes siguiente se crea con CSS:
Ejemplo
<html> <head> <style> div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img {
display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html>
Pruebe usted mismo
CSS Image Opacidad / Transparencia

Creacin de imgenes transparentes con CSS es fcil. Nota: La propiedad de opacidad CSS es una parte de la recomendacin W3C CSS 3.
Intntelo usted mismo - Ejemplos

Creacin de imgenes transparentes - Pase efecto Creacin de una caja transparente con el texto en una imagen de fondo
Ejemplo 1 - Creacin de una imagen transparente

La propiedad CSS3 de transparencia es la opacidad . Primero le mostraremos cmo crear una imagen transparente con CSS. Imagen normal:
La misma imagen con transparencia:
Mira el siguiente CSS:
img { opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */ }

IE9, Firefox, Chrome, Opera, Safari y utilizar la propiedad opacidad a la transparencia. La propiedad de opacidad puede tomar un valor comprendido entre 0,0 - 1.0. Un valor ms bajo hace que el elemento ms transparente. IE8 y anteriores usan filtro: alfa (opacidad = x) . La x puede tomar un valor entre 0 100. Un valor ms bajo hace que el elemento ms transparente.
Ejemplo 2 - Transparencia de imagen - Efecto Hover

Pase el ratn sobre las imgenes:
El CSS es el siguiente:
img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
El primer bloque de CSS es similar al cdigo en el Ejemplo 1. Adems, hemos aadido lo que debera ocurrir cuando un usuario coloque el cursor sobre una de las imgenes. En este caso se desea que la imagen no sea transparente cuando el usuario coloque el cursor sobre ella. El CSS para esto es: opacidad = 1 . IE8 y anteriores: filtro: alfa (opacidad = 100) . Cuando el puntero del ratn se mueve fuera de la imagen, la imagen ser transparente de nuevo.
Ejemplo 3 - Texto en la casilla Transparente

Este es un texto que se coloca en la caja transparente. Este es un texto que se coloca en la caja transparente. Este es un texto que se coloca en
la caja transparente. Este es un texto que se coloca en la caja transparente. Este es un texto que se coloca en la caja transparente. El cdigo fuente es el siguiente:
<html> <head> <style> div.background { width:500px; height:250px; background:url(klematis.jpg) repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>This is some text that This is some text that is This is some text that is This is some text that is This is some text that is </p> </div> </div> </body> </html>
En primer lugar, se crea un elemento div (class = "background") con una altura fija y anchura, una imagen de fondo y un borde. Luego creamos un div ms pequeo (class = "transbox") dentro del elemento div en primer lugar. El "transbox" div tiene un ancho fijo, un
is placed placed in placed in placed in placed in
in the transparent box. the transparent box. the transparent box. the transparent box. the transparent box.
color de fondo, y una frontera - y es transparente. En el interior del div transparente, aadimos un poco de texto dentro del elemento PA.
CSS Sprites Imagen

Sprites de imagen
Un sprite de imagen es una coleccin de imgenes puestas en una sola imagen. Una pgina web con muchas imgenes puede tardar mucho tiempo para cargar y genera mltiples peticiones del servidor. Uso de sprites imagen se reducir el nmero de solicitudes de servidor y ahorrar ancho de banda.
Sprites Imagen - Ejemplo simple

En lugar de utilizar tres imgenes diferentes, utilizamos esta sola imagen ("img_navsprites.gif"):
Con CSS, podemos mostrar slo la parte de la imagen que necesitamos. En el ejemplo siguiente, el CSS especifica qu parte de la "img_navsprites.gif" imagen para mostrar:
Ejemplo
img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }
Pruebe usted mismo
Ejemplo explic:
<img class="home" src="img_trans.gif" /> - Slo define una pequea imagen transparente porque el atributo src no puede estar vaco. La imagen que aparecer ser la imagen de fondo se especifica en CSS Ancho: 46px; altura: 44px; - Define la parte de la imagen que desea utilizar background: url (img_navsprites.gif) 0 0, - Define la imagen de fondo y su posicin (izquierda 0px, top 0px)
Esta es la forma ms fcil de usar sprites imagen, ahora queremos ampliar mediante el uso de enlaces y se ciernen efectos.
Sprites de imagen - Crear una lista de navegacin

Queremos utilizar la imagen de sprite ("img_navsprites.gif") para crear una lista de navegacin. Vamos a utilizar una lista de HTML, ya que puede ser un enlace y tambin es compatible con una imagen de fondo:
Ejemplo
#navlist{position:relative;} #navlist li{margin:0;padding:0;liststyle:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;}
Pruebe usted mismo
Ejemplo explic:
# Navlist {position: relative;} - posicin se ajusta en relacin a permitir el posicionamiento absoluto en su interior # Navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} margen y el relleno se establece en 0, list-style se retira, y todos los elementos de la lista estn posicionados absoluta # Navlist li, # navlist un {height: 44px; display: block;} - la altura de todas las imgenes son 44px
Ahora empieza a la posicin y el estilo para cada parte especfica:
# Home {left: 0px; anchura: 46px;} - Posicionado todo el camino a la izquierda, y la anchura de la imagen es 46px # Home {background: url (img_navsprites.gif) 0 0;} - Define la imagen de fondo y su posicin (izquierda 0px, top 0px) # Prev {left: 63px; anchura: 43px;} - Posicionado 63px a la derecha (# casa 46px ancho + algo ms de espacio entre tems) y el ancho es de 43px. # Prev {background: url ('img_navsprites.gif')-47px 0;} - Define la imagen de fondo 47px a la derecha (# casa 46px ancho + divisor de lnea de 1 pxel) # Prximo {left: 129px; anchura: 43px;} - 129px Situado a la derecha (inicio de la # anterior es 63px + # prev ancho 43px + extra espacio), y el ancho es de 43px. # Prximo {background: url ('img_navsprites.gif') no-repeat-91px 0;} - Define la imagen de fondo 91px a la derecha (# casa 46px ancho + divisor de lnea 1px + # prev ancho 43px + divisor de lnea de 1 pxel)
Sprites de imagen - Efecto Hover

Ahora queremos aadir un efecto hover en nuestra lista de navegacin. Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imgenes de navegacin y las imgenes de tres a utilizar para efectos hover:
Como se trata de una sola imagen, y no seis archivos separados, no habr ningn retardo en la carga cuando un usuario pasa sobre la imagen. Slo aadir tres lneas de cdigo para agregar el efecto hover:
Ejemplo
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px 45px;} #next a:hover{background: url('img_navsprites_hover.gif') -91px 45px;}
Pruebe usted mismo
Ejemplo explic:
Dado que el elemento de la lista contiene un enlace, podemos usar el: hover pseudoclase # La casa de un: hover {background: url transparente (img_navsprites_hover.gif) 045px;} - Para las tres imgenes libracin se especifica la posicin del fondo mismo, slo que ms abajo 45px
CSS Tipos de Medios

Con los tipos de medios de comunicacin una pgina puede tener un diseo de pantalla, uno para la impresin, una para dispositivos de mano, etc
Tipos de Medios
Algunas propiedades CSS slo estn diseados para un medio de comunicacin determinados. Por ejemplo, el "voice-family" propiedad est diseada para aplicaciones de usuario auditivas. Algunas otras propiedades se pueden utilizar para diferentes tipos de medios. Por ejemplo, el "tamao de fuente" propiedad se puede utilizar tanto para la pantalla y los medios impresos, pero quizs con diferentes valores. Un documento que por lo general tiene un mayor tamao de letra en una pantalla que en papel, y sans-serif son ms fciles de leer en la pantalla, mientras que las fuentes serif son ms fciles de leer en papel.
La regla @ media
La regla @ media permite diferentes reglas de estilo para los medios de comunicacin diferentes en la misma hoja de estilo. El estilo en el ejemplo a continuacin le indica al navegador que muestre un tipo de letra Verdana 14 pxeles en la pantalla. Pero si la pgina se imprime, ser en un tipo de letra Times 10 pixeles.Observe que el font-weight se establece en negrita, tanto en pantalla como en papel:
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html>
Valo usted mismo! Imprimir esta pgina (o Vista preliminar abierta), y se ver que el prrafo bajo "Tipos de soportes" en la pantalla de otra fuente, y tienen un tamao de letra ms pequeo que el resto del texto.
Otros tipos de medios

Nota: Los nombres de los tipos de medios no distinguen entre maysculas y minsculas. Tipo de soporte todos auditivo braille relieve handheld imprimir proyeccin pantalla tty Descripcin Se utiliza para todos los dispositivos de tipo de medios de comunicacin Se utiliza para voz y sintetizadores de sonido Se utiliza para dispositivos tctiles en Braille Se utiliza para impresoras braille paginados Se utiliza para pequeos dispositivos de mano o Se utiliza para impresoras Usado para presentaciones como diapositivas proyectadas, Se utiliza para pantallas de ordenador Se utiliza para los medios de comunicacin utilizando una cuadrcula de caracteres de ancho fijo, como teletipos y terminales
TV
Se utiliza para dispositivos tipo televisin
CSS atributo selectores

Estilo elementos HTML con atributos especficos
Es posible estilo elementos HTML con atributos especficos, no slo de clase e id. Nota: IE7 y IE8 selectores de atributos de apoyo slo si se especifica un DOCTYPE!. Seleccin de atributos se NO se admite en IE6 e inferiores.
Caractersticas del Selector

En el ejemplo de abajo estilos todos los elementos con un atributo title:
Ejemplo
[title] { color:blue; }
Pruebe usted mismo
Atributo y Valor Selector

En el ejemplo de abajo estilos todos los elementos con W3Schools title = "":
Ejemplo
[title=W3Schools] { border:5px solid green; }
Pruebe usted mismo
Selector de atributo y valor - Varios Valores

En el ejemplo de abajo estilos todos los elementos con un atributo de ttulo que contiene un valor especificado. Esto funciona incluso si el atributo tiene valores separados por espacios:
Ejemplo
[title~=hello] { color:blue; }
Pruebe usted mismo
En el ejemplo de abajo estilos todos los elementos con un atributo lang que contiene un valor especificado. Esto funciona incluso si el atributo tiene un guin (-) valores separados:
Ejemplo
[lang|=en] { color:blue; }
Pruebe usted mismo
Formas de peluquera
Los selectores de atributos son particularmente tiles para labrar formas sin clase o ID:
Ejemplo
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }
Pruebe usted mismo
Usted ha aprendido CSS, y ahora qu?

CSS Resumen
Este tutorial te ha enseado cmo crear hojas de estilo para controlar el estilo y el diseo de sitios web mltiples a la vez. Ha aprendido a utilizar CSS para agregar fondos, textos, aadir formato y bordes formato y especificar el relleno y los mrgenes de los elementos.
Tambin ha aprendido cmo colocar un elemento, controlar la visibilidad y el tamao de un elemento, establecer la forma de un elemento, coloque un elemento detrs de otro, y para aadir efectos especiales a algunos selectores, como enlaces. Para obtener ms informacin acerca de CSS, por favor vaya a ejemplos de CSS , CSS referencia ytutoriales CSS3 .
CSS3 Introduccin
CSS3 es completamente compatible con versiones anteriores, por lo que no tendr que cambiar los diseos existentes. Los navegadores siempre apoyar CSS2.
Mdulos de CSS3
CSS3 se divide en "mdulos". La especificacin anterior se ha dividido en partes ms pequeas, y los nuevos se aaden tambin. Algunos de los ms importantes mdulos de CSS3 son:
Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseo de columna mltiple Interfaz de usuario
CSS3 Recomendacin
La especificacin CSS3 est todava en desarrollo por el W3C. Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos.
CSS3 Fronteras
CSS3 Fronteras
Con CSS3, puede crear bordes redondeados, aadir sombra a las cajas, y utilizar una imagen como frontera - sin necesidad de utilizar un programa de diseo, como Photoshop. En este captulo usted aprender sobre las propiedades de borde siguientes:
border-radius box-shadow border-image

Propiedad borderradius boxshadow borderimage Compatibilidad con exploradores
Internet Explorer 9 es compatible con dos de las propiedades de borde nuevos. Firefox requiere el prefijo-moz-border-image para. Chrome y Safari requiere el prefijo-webkit-border-image para. Opera requiere el prefijo-o-para border-image. Opera soporta las propiedades de borde nuevos.
CSS3 esquinas redondeadas

Adicin de esquinas redondeadas en CSS2 era difcil. Tuvimos que usar diferentes imgenes para cada esquina. En CSS3, crear esquinas redondeadas es fcil. En CSS3, la propiedad border-radius se utiliza para crear las esquinas redondeadas: Esta caja tiene las esquinas redondeadas!
Ejemplo
Aadir esquinas redondeadas a un elemento div:
div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ }
Pruebe usted mismo
CSS3 Shadow Box

En CSS3, la propiedad box-shadow se utiliza para agregar sombra a las cajas:
Ejemplo
Aadir un box-shadow a un elemento div:
div { box-shadow: 10px 10px 5px #888888; }
Pruebe usted mismo
CSS3 borde de la imagen

Con el CSS3 border-image propiedad se puede utilizar una imagen para crear un borde: La propiedad border-image permite especificar una imagen como una frontera! La imagen original utilizado para crear el borde de arriba:
Ejemplo
Usa una imagen para crear un borde alrededor de un elemento div:
div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
Pruebe usted mismo
Nuevas propiedades Frontera

Propiedad border-image Descripcin Una propiedad abreviada para establecer todas las imgenes de fronteras-* propiedades Una propiedad abreviada para establecer las cuatro border-radius *-propiedades Se conecta una o ms de abandono sombras a la caja CSS 3
border-radius
box-shadow
CSS3 Fondos
CSS3 Fondos
CSS3 contiene varias propiedades de fondo nuevos, que permiten un mayor control del elemento de fondo. En este captulo usted aprender sobre las propiedades siguientes antecedentes:
background-size fondo de origen
Usted tambin aprender cmo utilizar varias imgenes de fondo.

Propiedad backgroundsize fondo de origen Compatibilidad con exploradores
Firefox 3.6 y versiones anteriores no es compatible con la propiedad background-origen, y requiere el prefijo-moz-para apoyar la propiedad background-size.
Safari 4 requiere el prefijo-webkit-para apoyar a las nuevas propiedades de fondo. Internet Explorer 9, Firefox 4, Chrome, Safari 5 y Opera apoyar a las propiedades de fondo nuevos.
CSS3 La propiedad background-size

La propiedad background-size especifica el tamao de la imagen de fondo. Antes de CSS3, el tamao de la imagen de fondo se determina por el tamao real de la imagen. En CSS3 es posible especificar el tamao de la imagen de fondo, lo que nos permite volver a usar imgenes de fondo en diferentes contextos. Se puede especificar el tamao en pxeles o en porcentajes. Si se especifica el tamao como un porcentaje, el tamao es relativo a la anchura y la altura del elemento padre.
Ejemplo 1
Cambiar el tamao de una imagen de fondo:
div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 */ background-size:80px 60px; background-repeat:no-repeat; }
Pruebe usted mismo
Ejemplo 2
Extiende la imagen de fondo para llenar completamente el rea de contenido:
div { background:url(img_flwr.gif); -moz-background-size:100% 100%; /* Firefox 3.6 */ background-size:100% 100%; background-repeat:no-repeat; }
Pruebe usted mismo
CSS3 La propiedad background-origen

La propiedad background-origen especifica el rea de posicionamiento de las imgenes de fondo. La imagen de fondo puede ser colocado dentro del contenido de la caja, el acolchado de caja, o zona de la frontera de la caja.
Ejemplo
Coloque la imagen de fondo en el contenido de la caja:
div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }
Pruebe usted mismo
CSS3 mltiples imgenes de fondo

CSS3 permite el uso de varias imgenes de fondo de un elemento.
Ejemplo
Coloque dos imgenes de fondo para el elemento de cuerpo:
body { background-image:url(img_flwr.gif),url(img_tree.gif); }
Pruebe usted mismo
Nuevas Propiedades de fondo

Propiedad fondo-clip fondo de origen background-size Descripcin Especifica el rea de la pintura de las imgenes de fondo Especifica el rea de posicionamiento de las imgenes de fondo Especifica el tamao de las imgenes de fondo CSS 3 3 3
CSS3 Text Effects

Efectos de texto CSS3
CSS3 contiene varias funciones de texto nuevos.
En este captulo usted aprender acerca de las propiedades de texto siguientes:
text-shadow word-wrap Compatibilidad con exploradores

Internet Explorer does not yet support the text-shadow property. Firefox, Chrome, Safari, and Opera support the text-shadow property. All major browsers support the word-wrap property.
CSS3 Text Shadow
In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
Example
Add a shadow to a header:
h1 { text-shadow: 5px 5px 5px #FF0000; }
Try it yourself
CSS3 Word Wrapping

If a word is too long to fit within an area, it expands outside: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The CSS code is as follows:
Example
Allow long words to be able to break and wrap onto the next line:
p {word-wrap:break-word;}
Try it yourself
New Text Properties

Property hanging-punctuation Description Specifies whether a punctuation character may be placed outside the line box Specifies whether a punctuation character should be trimmed Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text Specifies the justification method used when text-align is "justify" Specifies a text outline Specifies what should happen when text overflows the containing element Adds shadow to text Specifies line breaking rules for text Specifies line breaking rules for non-CJK scripts Allows long, unbreakable words to be broken and wrap to the next line CSS 3
punctuation-trim text-align-last
3 3
text-emphasis
text-justify text-outline text-overflow
3 3 3
text-shadow text-wrap word-break word-wrap
3 3 3 3
CSS3 Fuentes
El CSS3 @ font-face Regla

Antes de CSS3, diseadores de pginas web que usar fuentes que ya estaban instalados en el ordenador del usuario. Con CSS3, los diseadores Web pueden utilizar cualquier tipo de letra que l / ella le gusta. Cuando haya encontrado / comprado en la fuente que desea utilizar, incluir el archivo de fuente en el servidor web, y se descargar automticamente al usuario cuando sea necesario.
Sus "propias" fuentes estn definidas en el CSS3 @ font-face regla.

Propiedad @ Fontface Compatibilidad con exploradores
Firefox, Chrome fuentes, Safari, Opera y de apoyo de tipo. Ttf (True Type Fonts) y. Otf (fuentes OpenType). Internet Explorer 9 + soporta el nuevo @ font-face regla, pero slo es compatible con fuentes de tipo. EOT (Embedded OpenType). Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el nuevo @ font-face regla.
Usando la fuente que desea

En el nuevo @ font-face regla que primero debe definir el nombre de la fuente (por ejemplo myFirstFont), a continuacin, seleccione el archivo de fuente. Para utilizar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a travs de la propiedad font-family:
Ejemplo
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>
Pruebe usted mismo
Cmo utilizar texto en negrita

Debe aadir otro @ font-face regla que contiene descriptores para el texto en negrita:
Ejemplo
@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
Pruebe usted mismo
El archivo "Sansation_Bold.ttf" es otro archivo de fuente, que contiene los caracteres en negrita para la fuente Sansation. Navegadores a utilizar esto cuando un trozo de texto con la fuente de la familia "myFirstFont" debe hacer en negrita. De esta manera usted puede tener muchos @ font-face para el mismo tipo de letra.
CSS3 descriptores de fuentes

En la siguiente tabla se enumeran todos los descriptores de las fuentes que se pueden definir dentro del @ font-face regla: Descriptor font-family src font-stretch Valores nombre URL normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded Descripcin Obligatorio. Define un nombre para la fuente Obligatorio. Define la direccin URL del archivo de la fuente Opcional. Define el tipo de letra debe ser estirado. El valor predeterminado es "normal"
font-style
normal, cursiva oblicua normal, negrita 100 200 300 400 500 600 700 800 900 unicode-range
Opcional. Define el tipo de letra debe ser de estilo. El valor predeterminado es "normal"
font-weight
Opcional. Define la audacia de la fuente. El valor predeterminado es "normal"
unicode-range
Opcional. Define el rango de caracteres UNICODE la fuente soporta. El valor predeterminado es "U 0-10 FFFF"
CSS3 2D Transforma
CSS3 Transforms
Con CSS3 transformacin, podemos mover, escalar, girar, girar, y los elementos elsticos.
Cmo funciona?
Una transformacin es un efecto que permite un cambio de elemento de forma, tamao y posicin. Usted puede transformar sus elementos mediante la transformacin 2D o 3D.

Propiedad transformar Compatibilidad con exploradores
Internet Explorer 9 requiere el prefijo-ms-. Firefox requiere el prefijo-moz-.
Chrome y Safari requiere el prefijo-webkit-. Opera requiere el prefijo-o-.
Transforma 2D
En este captulo usted aprender acerca de los mtodos de transformacin 2D:
translate () rotate () scale () skew () matriz ()
Usted aprender acerca de las transformaciones 3D en el prximo captulo.
Ejemplo
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
Pruebe usted mismo
El mtodo translate ()
Con el mtodo translate (), se mueve el elemento a partir de su posicin actual, en funcin de los parmetros dados por la izquierda (eje X) y la posicin superior (eje Y):
Ejemplo
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
Pruebe usted mismo
El valor translate (50px, 100px) mueve el elemento 50 pxeles desde la izquierda, y 100 pxeles desde la parte superior.
El mtodo rotate ()
Con el mtodo rotate (), el elemento gira en sentido horario en un grado determinado. Los valores negativos se permite y hace girar el elemento hacia la izquierda.
Ejemplo
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
Pruebe usted mismo
El valor rotate (30deg) hace girar el elemento hacia la derecha 30 grados.
El mtodo scale ()
Con el mtodo de escala (), el elemento aumenta o disminuye el tamao, en funcin de los parmetros dados para la anchura (eje X) y la altura (eje Y):
Ejemplo
div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
Pruebe usted mismo
La escala de valor (2,4) transforma el ancho a ser el doble de su tamao original, y la altura de 4 veces su tamao original.
El mtodo skew ()
Con el mtodo de inclinacin (), el elemento se convierte en un ngulo dado, en funcin de los parmetros dados por la horizontal (eje X) y el eje vertical (eje y) lneas:
Ejemplo
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }
Pruebe usted mismo
El valor de sesgo (30deg, 20deg) gira el elemento 30 grados alrededor del eje X, y 20 grados alrededor del eje Y.
La matriz () Mtodo
La matriz () mtodo combina todos los mtodos de transformacin 2D en una sola. El mtodo matricial tomar seis parmetros, que contiene funciones matemticas, lo que le permite: rotar, escalar, mover (trasladar), y elementos de inclinacin.
Ejemplo
Cmo rotar un elemento div 30 grados, utilizando el mtodo de la matriz:
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }
Pruebe usted mismo
Nuevas propiedades de transformacin

En la tabla siguiente se enumeran todas las propiedades de transformacin:
Propiedad transformar transformar de origen
Descripcin Aplica una transformacin 2D o 3D a un elemento Le permite cambiar la posicin de los elementos transformados
CSS 3 3
Transformar los mtodos 2D

Funcin matriz ( n, n, n, n, n, n) traducir ( x, y ) translateX ( n ) TranslateY ( n ) escala ( x, y ) Descripcin Define una transformacin 2D, utilizando una matriz de seis valores
Define una traduccin 2D, mover el elemento a lo largo de la X y el eje Y Define una traduccin 2D, mover el elemento a lo largo del eje X Define una traduccin 2D, mover el elemento a lo largo del eje Y Define una transformacin de escala en 2D, cambiando el ancho y la altura de los elementos Define una transformacin de escala en 2D, el cambio de ancho del elemento Define una transformacin de escala en 2D, el cambio de la altura del elemento Define una rotacin 2D, el ngulo se especifica en el parmetro Define una transformacin 2D de inclinacin a lo largo de la X y el eje Y
scaleX ( n ) scaleY ( n )
rotar ( ngulo ) de inclinacin ( xngulo, y-ngulo ) skewX ( ngulo ) skewY ( ngulo )
Define una transformacin 2D sesgado a lo largo del eje X Define una transformacin 2D sesgado a lo largo del eje Y
CSS3 3D transforma
Transforma 3D
CSS3 le permite dar formato a los elementos mediante transformaciones 3D. En este captulo usted aprender sobre algunos de los mtodos de transformacin 3D:
RotateX () rotateY ()
Haga clic en los elementos de abajo, para ver la diferencia entre una transformacin 2D y transformar a 3D:
2D rotate 3D rotate

Propiedad transformar Compatibilidad con exploradores
Internet Explorer y Opera an no soporta transformaciones 3D (Se admiten slo las transformaciones 2D ). Firefox requiere el prefijo-moz-. Chrome y Safari requiere el prefijo-webkit-.
El RotateX () Mtodo
Con el mtodo de RotateX (), el elemento gira alrededor de su eje X en un grado determinado.
Ejemplo
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ }
Pruebe usted mismo
El rotateY () Mtodo
Con el mtodo de rotateY (), el elemento gira alrededor de su eje en un grado dado.
Ejemplo
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari and Chrome */ -moz-transform: rotateY(130deg); /* Firefox */ }
Pruebe usted mismo
Transformar Propiedades
En la tabla siguiente se enumeran todas las propiedades de transformacin: Propiedad transformar transformar de origen transformar al estilo Descripcin Aplica una transformacin 2D o 3D a un elemento Le permite cambiar la posicin de los elementos transformados Especifica cmo se representan los elementos anidados en el espacio 3D Especifica la perspectiva de cmo son vistos los elementos 3D Especifica la posicin inferior de elementos 3D Define si un elemento debe ser visible sin estar frente a la pantalla CSS 3 3 3
perspectiva perspectiva de origen cara trasera visibilidad
3 3 3
Transformacin 3D Mtodos
Funcin Matrix3D ( n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, Descripcin Define una transformacin 3D, usando una matriz de 4x4 de 16 valores
n) translate3d ( x, y, z ) Define una traduccin 3D translateX ( x ) TranslateY ( Y ) translateZ ( z ) scale3d ( x, y, z ) scaleX ( x ) scaleY ( Y ) scaleZ ( z ) Rotar3D ( x, y, z, el ngulo ) RotateX ( ngulo ) rotateY ( ngulo ) RotateZ ( ngulo ) perspectiva ( n ) Define una traduccin en 3D, utilizando nicamente el valor para el eje X Define una traduccin 3D, usando solamente el valor para el eje Y Define una traduccin 3D, usando solamente el valor para el eje Z Define una transformacin de escala 3D Define una transformacin de escala 3D, dando un valor para el eje X Define una transformacin de escala 3D, dando un valor para el eje Y Define una transformacin de escala 3D, dando un valor para el eje Z Define una rotacin 3D
Define una rotacin 3D a lo largo del eje X Define una rotacin 3D a lo largo del eje Y Define una rotacin 3D a lo largo del eje Z Define una vista en perspectiva de un elemento 3D transforma
CSS3 transiciones
Transiciones CSS3
Con CSS3, podemos aadir un efecto al pasar de un estilo a otro, sin el uso de animaciones Flash o JavaScripts.
Pase el ratn sobre el elemento a continuacin:
CSS3Transicin

Propiedad transicin Compatibilidad con exploradores
Internet Explorer no es compatible an con la propiedad de transicin. Firefox 4 requiere el prefijo-moz-. Chrome y Safari requiere el prefijo-webkit-. Opera requiere el prefijo-o-.
Cmo funciona?
CSS3 transiciones son efectos que permiten un elemento poco a poco cambiar de un estilo a otro. Para ello, debe especificar dos cosas:
Especifique la propiedad CSS que desea agregar un efecto a Especificar la duracin del efecto.
Ejemplo
Efecto de transicin en la propiedad de ancho, duracin: 2 segundos:
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ }
Nota: Si la duracin no se especifica, la transicin no tendr ningn efecto, ya que el valor predeterminado es 0. El efecto se iniciar cuando la propiedad especificada CSS cambios de valor. Un tpico cambio de propiedad CSS sera cuando un usuario del ratn sobre un elemento:
Ejemplo
Especifique: hover para los elementos <div>:
div:hover { width:300px; }
Pruebe usted mismo
Nota: Cuando el cursor del ratn sobre el elemento, cambia gradualmente de nuevo a su estilo original.
Mltiples cambios
Para aadir un efecto de transicin para ms de un estilo, aadir ms propiedades, separados por comas:
Ejemplo
Agregar efectos sobre la anchura, la altura y la transformacin:
div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
Pruebe usted mismo
Propiedades de la transicin
En la tabla siguiente se enumeran todas las propiedades de transicin: Propiedad transicin Descripcin Una propiedad abreviada para establecer las propiedades de transicin de cuatro en una sola propiedad Especifica el nombre de la propiedad CSS al que se aplica la transicin Define la longitud de tiempo que se produce una transicin.Predeterminado 0 Describe cmo la velocidad durante una transicin se calcular.Default "facilidad" Define cuando la transicin se iniciar. Predeterminado 0 CSS 3
transicin de propiedad
transicin de duracin
transicin-timing-funcin
transicin de retardo
Los dos ejemplos siguientes conjuntos de todas las propiedades de transicin:
Ejemplo
Utilice todas las propiedades de transicin en un ejemplo:
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }
Pruebe usted mismo
Ejemplo
Los efectos de transicin Igual que el anterior, utilizando la propiedad transicin taquigrafa:
div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; }
Pruebe usted mismo
CSS3 Animaciones
Animaciones CSS3
Con CSS3, podemos crear animaciones, que puede reemplazar imgenes animadas, animaciones Flash, y JavaScripts en muchas pginas web.
CSS3Animacin
CSS3 @ fotogramas clave de regla

Para crear animaciones en CSS3, usted tendr que aprender acerca de la regla @ fotogramas clave. La regla @ fotogramas clave es donde la animacin se crea. Especifique un estilo CSS dentro de la regla @ fotogramas clave y la animacin poco a poco va a cambiar el estilo vigente al nuevo estilo.

Propiedad @ Fotogramas clave animacin Compatibilidad con exploradores
Internet Explorer no es compatible an con la regla @ fotogramas clave o la propiedad de animacin. Firefox requiere el prefijo-moz-, Chrome y Safari requieren el prefijo-webkit-y Opera requieren el prefijo-o-.
Ejemplo
@keyframes myfirst { from {background: red;}
to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }
CSS3 animacin
Cuando la animacin se crea en el @ fotograma clave, que se unen a un selector, de lo contrario la animacin no tendr ningn efecto. Enlace la animacin a un selector especificando al menos estas dos propiedades de CSS3 animacin:
Especifique el nombre de la animacin Especifique la duracin de la animacin
Ejemplo
Enlazar el "mi primer" animacin a un elemento div, duracin: 5 segundos:
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari and Chrome */ -o-animation: myfirst 5s; /* Opera */ }
Pruebe usted mismo
Nota: Debe definir el nombre y la duracin de la animacin. Si la duracin se omite, la animacin no funciona, porque el valor predeterminado es 0.
Cules son animaciones en CSS3?

Una animacin es un efecto que permite a un elemento poco a poco cambiar de un estilo a otro. Puede cambiar tantos estilos que desee, cuantas veces desee. Especifique cundo se producir el cambio en porcentaje, o las palabras clave "desde" y "hasta", lo que es lo mismo que 0% y 100%. 0% es el comienzo de la animacin, 100% es cuando la animacin se ha completado. Para mejor soporte de navegador, siempre se debe definir tanto el 0% y el 100% de los selectores.
Ejemplo
Cambiar el color de fondo cuando la animacin es 25%, 50%, y de nuevo cuando la animacin es 100% completa:
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;}
100% {background: green;} }
Pruebe usted mismo
Ejemplo
Cambiar el color de fondo y cargo:
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
Pruebe usted mismo
CSS3 Animacin Propiedades

La siguiente tabla muestra la regla @ fotogramas clave y todas las propiedades de la animacin: Propiedad @ Fotogramas clave animacin Descripcin Especifica la animacin CSS 3
Una propiedad resumida de todos los las propiedades de animacin, 3 excepto la propiedad de animacin-play-estado Especifica el nombre de la animacin de fotogramas clave @ 3
animacin de nombre animacin de duracin
Especifica cuntos segundos o milisegundos una animacin tarda en 3 completar un ciclo. Predeterminado 0 Describe cmo la animacin progresar ms de un ciclo de su duracin. Default "facilidad" Especifica cuando la animacin se iniciar. Predeterminado 0 Especifica el nmero de veces que se reproduce una animacin.Predeterminado 1 Especifica si la animacin debe jugar a la inversa en ciclos alternos. Por defecto "normal" Especifica si la animacin est en ejecucin o en pausa. Default "en ejecucin" 3
animation-timing-funcin
animacin de retardo animacin iteracin de conteo animacin direccin
3 3
animacin-play-estado
Los dos ejemplos a continuacin establece todas las propiedades de animacin:
Ejemplo
Ejecutar una animacin llamada MyFirst, con toda la animacin de conjunto de propiedades:
div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate;
animation-play-state: running; /* Firefox: */ -moz-animation-name: myfirst; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Safari and Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Opera: */ -o-animation-name: myfirst; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; }
Pruebe usted mismo
Ejemplo
La animacin mismo que el anterior, utilizando la propiedad de animacin abreviada:
div { animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; }
Pruebe usted mismo
CSS3 varias columnas

CSS3 varias columnas
Con CSS3, puede crear varias columnas para el tendido de texto - al igual que en los peridicos! En este captulo usted aprender sobre las mltiples propiedades de la columna siguientes:
columna de recuento columna de diferencia columna de la regla

Propiedad columna de recuento columna de diferencia columna de la regla Compatibilidad con exploradores
Internet Explorer no es compatible an con las propiedades de columnas mltiples. Firefox requiere el prefijo-moz-. Chrome y Safari requieren el prefijo-webkit-.
CSS3 crear varias columnas

La propiedad de la columna-count especifica el nmero de columnas de un elemento debe ser dividida en:
Ejemplo
Divide el texto en un elemento div en tres columnas:
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */
column-count:3; }
Pruebe usted mismo
CSS3 Especifique la distancia entre columnas

La propiedad de columna especifica el espacio vaco entre las columnas:
Ejemplo
Especifique un espacio de 40 pxeles entre las columnas:
div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; }
Pruebe usted mismo
Reglas de columnas CSS3

La propiedad de columna norma establece el ancho, estilo y color de la regla entre columnas.
Ejemplo
Especifique el ancho, estilo y color de la regla entre columnas:
div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }
Pruebe usted mismo
Nuevas propiedades de varias columnas

Propiedad columna de recuento Descripcin Especifica el nmero de columnas de un elemento debe estar dividido en Especifica cmo llenar columnas Especifica el espacio entre las columnas Una propiedad abreviada para establecer las reglas de columna-* propiedades Especifica el color de la regla entre columnas Especifica el estilo de la regla entre columnas CSS 3
columna de relleno de columna de diferencia columna de la regla
3 3 3
columna-rule-color columna de la regla de estilo columna de la regla de ancho columna-span
3 3
Especifica el ancho de la regla entre columnas
Especifica el nmero de columnas de un elemento debe extenderse a lo largo Especifica el ancho de las columnas Una propiedad abreviada para establecer la anchura de columna y columna de recuento
columna de ancho columnas
3 3
CSS3 Interfaz de usuario

CSS3 Interfaz de usuario
En CSS3, algunas de las caractersticas de la interfaz de usuario nuevas, son elementos de cambio de tamao, calibrado caja y Esquema. En este captulo usted aprender acerca de las propiedades de la interfaz de usuario siguientes:
cambiar el tamao de box-dimensionamiento esbozar-offset
Propiedad cambiar el tamao de boxdimensionamiento esbozar-offset
La propiedad resize es compatible con Firefox 4 +, Chrome y Safari. El cuadro de dimensionamiento es compatible con Internet Explorer, Chrome y Opera. Firefox requiere el prefijo-moz-. Safari requiere el prefijo-webkit-. La propiedad esquema es compatible con todos los principales navegadores, excepto Internet Explorer.
Cambiar el tamao de CSS3

En CSS3, la propiedad resize especifica si un elemento puede cambiar el tamao del usuario. Este elemento div es de tamao variable por el usuario (en Firefox 4 +, Chrome, y Safari). El cdigo CSS es la siguiente:
Ejemplo
Especifica que un elemento div puede cambiar el tamao por el usuario:
div { resize:both; overflow:auto; }
Pruebe usted mismo
CSS3 Cuadro de tallas

La propiedad box-sizing le permite definir ciertos elementos para adaptarse a una superficie de una determinada manera:
Ejemplo
Especifique dos cajas con borde lateral al lado del otro:
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }
Pruebe usted mismo
CSS3 Esquema Offset

El esquema de compensacin de las compensaciones de propiedad de un esquema, y lo dibuja ms all del borde fronterizo. Los esquemas difieren de las fronteras de dos maneras:
Los contornos no ocupan espacio Los esquemas pueden ser no rectangular
Este div tiene una 15px contorno exterior del borde fronterizo. El cdigo CSS es la siguiente:
Ejemplo
Puede especificar una 15px contorno exterior del borde fronterizo:
div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
Pruebe usted mismo
Nueva interfaz de usuario Propiedades

Propiedad apariencia Descripcin Le permite hacer una mirada elemento como un elemento de interfaz de usuario estndar Permite definir ciertos elementos para adaptarse a una zona de cierta manera Proporciona al autor la posibilidad de estilo de un elemento con un equivalente icnico Especifica dnde se navega utilizando la tecla de flecha hacia abajo de navegacin Especifica el orden de tabulacin de un elemento Especifica dnde se navega utilizando la tecla de flecha a la izquierda de navegacin Especifica dnde se navega cuando se utiliza la flecha derecha tecla de navegacin CSS 3
box-dimensionamiento
icono
nav-down
nav-ndice nav-left
3 3
nav-derecha
nav-up
Especifica dnde se navega cuando se utiliza la flecha hacia arriba la 3 tecla de navegacin Compensaciones de un esquema, y seala que ms all del borde fronterizo Especifica si un elemento es de tamao variable por el usuario 3
esbozar-offset
cambiar el tamao de

HTML 5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML 5

Hochgeladen von

Copyright:

Verfügbare Formate

HTML 5

Cmo result HTML5 empezar?

El HTML5 <! DOCTYPE>

Documento HTML5 mnima

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>

<body> The content of the document...... </body> </html>

HTML5 - Nuevas funciones

Soporte del navegador para HTML5

Nuevos elementos en HTML5

Nuevos elementos semnticos / Estructural

Nuevos Elementos de Medios

El elemento nuevo <canvas>

Nuevos elementos de formulario

Compatibilidad con exploradores

<canvas id="myCanvas" width="200" height="100"></canvas>

Dibuja en la tela con JavaScript

Ejemplo explic: En primer lugar, encontrar el elemento <canvas>:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke();

Para dibujar un crculo en un lienzo, se utilizar el siguiente mtodo:

arco (x, y, r, start, stop)

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Uso de fillText ():

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);

Uso de strokeText ():

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red");

grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

Uso de createRadialGradient ():

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

Referencia HTML Canvas

La etiqueta HTML <canvas>

HTML5 Inline SVG

Imgenes Imgenes Imgenes Imgenes Imgenes

SVG SVG SVG SVG SVG

Compatibilidad con exploradores

Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyo en lnea SVG.

Insertar SVG directamente en pginas HTML

Diferencias entre SVG y Canvas

Comparacin de la lona y SVG

HTML5 Drag and Drop

Arrastre la imagen W3Schools en el rectngulo.

Compatibilidad con exploradores

HTML5 Drag and Drop Ejemplo

Hacer una arrastrable Element

Qu Arrastre - ondragstart y setData ()

function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }

Dnde Drop - onDragOver

Haga lo Drop - ondrop

function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }

Busque la posicin del usuario

Compatibilidad con exploradores

HTML5 - Uso de Geolocalizacin

El ejemplo anterior es un script de Geolocalizacin muy bsico, sin control de errores.

Controlar errores y rechazos

Visualizacin del resultado en un mapa

Obtener informacin especfica sobre

Mtodo El getCurrentPosition () - Devolver datos

coords.altitudeAccuracy La precisin de la posicin de altitud

La fecha / hora de la respuesta

Objeto Geolocation - Otros mtodos interesantes

Compatibilidad con exploradores

HTML5 Video - Cmo funciona?

Formatos de vdeo y Soporte del navegador

HTML5 <video> - Mtodos y propiedades DOM