HTML 5

HTML 5

¿Qué es el HTML5?

HTML5 será el nuevo estándar de HTML.

La versión anterior de HTML, HTML 4.01, se produjo en 1999. La web ha cambiado mucho desde entonces.

HTML5 es todavía un trabajo en progreso. Sin embargo, los principales navegadores apoyan muchos de los elementos de HTML5 y nuevas APIs.

¿Cómo resultó HTML5 empezar?

HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y la Red de hipertexto Aplicación de Tecnología 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 versión de HTML.

Algunas reglas para HTML5 se establecieron:

Las nuevas características se basa en HTML, CSS, DOM y JavaScript Reducir la necesidad de plugins externos (como Flash) Mejor manejo de errores Más marcado para reemplazar secuencias de comandos HTML5 debe ser independiente del dispositivo El proceso de desarrollo debe ser visible para el público

El HTML5 <! DOCTYPE>

En HTML5 hay una sola declaración, y es muy simple <Vendor!>:

<!DOCTYPE html>

Documento HTML5 mínima

A continuación se muestra un documento HTML5 simple, con el mínimo 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 características más interesantes de HTML5:

El elemento <canvas> para el dibujo 2D Los elementos <video> y <audio> para la reproducción de medios Soporte para almacenamiento local Nuevos elementos de contenido específico, como <article>, <footer>, <header>,

<NAV>, <section> Los nuevos controles de formulario, como el calendario, la fecha, hora, dirección de

correo electrónico, URL, búsqueda

Soporte del navegador para HTML5

HTML5 todavía no es un estándar oficial, y no los navegadores tienen soporte HTML5 completo.

Sin embargo, todos los principales navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer) continúan agregando nuevas características HTML5 a sus últimas versiones.

HTML5 Referencias

En W3Schools encontrará referencias completas acerca de las etiquetas, atributos globales, eventos estándar, y más.

Nuevos elementos en HTML5

El Internet ha cambiado mucho desde HTML 4.01 convirtió en un estándar en 1999.

Hoy en día, 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 comunicación.

Nuevos elementos semánticos / Estructural

HTML5 ofrece nuevos elementos para su estructura:

Etiqueta Descripción

<article> Define un artículo

<aside> Define el contenido aparte del contenido de la página

<bdi> Aísla una parte de texto que puede ser formateado en una dirección distinta de otro texto fuera de ella

<comando> Define un botón de comando que un usuario puede invocar

<details> Define los detalles adicionales que el usuario puede ver o esconder

<summary> Define un título para un elemento visible <details>

<figure> Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listados de código, etc

<figcaption> Define un título para un elemento <figure>

<footer> Define un pie de página de un documento o sección

<header> Define un encabezado de un documento o sección

<hgroup> Agrupa un conjunto de elementos para <h1> <h6> cuando un título tiene varios niveles

<mark> Define el texto marcado / resaltado

<meter> Define una medida escalar dentro de un rango conocido (a medida)

<nav> Define vínculos de exploración

<progress> Representa el progreso de una tarea

<ruby> Define una anotación ruby (para el Este de Asia tipografía)

<rt> Define una explicación / pronunciación de los caracteres (para el Este de Asia tipografía)

<rp> Define qué mostrar en navegadores que no soportan anotaciones ruby

<section> Define una sección de un documento

<hora> Define una fecha / hora

<wbr> Define un posible salto de línea

Nuevos Elementos de Medios

HTML5 ofrece nuevos elementos para el contenido de los medios de comunicación:


<audio> Define el contenido de sonido

<video> Define un vídeo o una película

<source> Define los recursos de medios múltiples para <video> y <audio>

<embed> Define un contenedor para una aplicación externa o contenido interactivo (plug-in)

<track> Define pistas de texto para <video> y <audio>

El elemento nuevo <canvas>


<canvas> Se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript)

Nuevos elementos de formulario

HTML5 ofrece nuevos elementos de formulario, para una mayor funcionalidad:


<datalist> Especifica una lista de opciones predefinidas para los controles de entrada

<keygen> Define un campo generador de par de claves (para formularios)

<output> Define el resultado de un cálculo

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 CanvasEl elemento <canvas> se utiliza para dibujar gráficos, sobre la marcha, en una página web.

Dibuje un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor, multicolor y un poco de texto en el lienzo:

¿Qué es el lienzo?

El elemento <canvas> HTML5 se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript).

El elemento <canvas> es sólo un contenedor para gráficos. Se debe utilizar una secuencia de comandos para dibujar en realidad los gráficos.

Canvas tiene varios métodos para rutas de dibujo, cajas, círculos, personajes e imágenes 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 página 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 tamaño de la tela.

Consejo: Usted puede tener múltiples elementos <canvas> en una página HTML.

Para añadir 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>


Ejemplo explicó:

En primer lugar, encontrar el elemento <canvas>:

var c=document.getElementById("myCanvas");

Luego, llame a su getContext () método (hay que pasar la cadena "2d" al getContext () método):

var ctx=c.getContext("2d");

El getContext ("2d") es un objeto incorporado en HTML5, con muchas propiedades y métodos para las rutas de dibujo, cuadros, círculos, texto, imágenes, y mucho más.

Las siguientes dos líneas se dibuja un rectángulo 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 método) dibuja un rectángulo 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 () método anterior tenía los parámetros (0,0,150,75).

Esto significa: Comienza en la esquina superior izquierda (0,0) y dibujar un rectángulo 150x75 píxeles.

Coordenadas Ejemplo

Pase el ratón sobre el rectángulo de abajo para ver sus coordenadas X e Y:

XY

Lienzo - Senderos

Para dibujar líneas rectas en un lienzo, vamos a utilizar los dos métodos siguientes:

moveTo ( x, y ) define el punto inicial de la línea lineTo ( x, y ) define el punto final de la línea

Para dibujar la línea en realidad, hay que utilizar uno de los métodos de "tinta", como accidente cerebrovascular ().

Ejemplo

Definir un punto de partida en la posición (0,0), y un punto final en la posición (200,100). A continuación, utilice el trazo de método () para dibujar en realidad la línea:

JavaScript:

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


Para dibujar un círculo en un lienzo, se utilizará el siguiente método:

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

Para dibujar el círculo en realidad, hay que utilizar uno de los métodos de "tinta", como accidente cerebrovascular () o rellenar ().

Ejemplo

Crear un círculo con el método 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();


Canvas - Texto

Para dibujar texto en un lienzo, la propiedad más importante y los métodos 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);


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


Lienzo - Degradados

Los gradientes se puede utilizar para rellenar rectángulos, círculos, líneas, texto, formas, etc en el lienzo no se limitan a los colores sólidos.

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 añadir dos o más escalas de color.

El addColorStop () método especifica las paradas de color, y su posición 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 rectángulo, texto, o una línea.

Uso de createLinearGradient ():

Ejemplo

Crear un degradado lineal. Rellene rectángulo con el gradiente:

JavaScript:

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);


Uso de createRadialGradient ():

Ejemplo

Crear un degradado radial / circular. Rellene rectángulo con el gradiente:

JavaScript:

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

// Create gradientvar grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);


Lienzo - Imágenes

Para dibujar una imagen en un lienzo, se utilizará el siguiente método:

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


Referencia HTML Canvas

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Canvas (con try-it ejemplos de cada propiedad y método), vaya a nuestro Referencia Canvas.

La etiqueta HTML <canvas>


<canvas> Se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript)

HTML5 Inline SVGHTML5 tiene soporte para Inline SVG.

¿Cuál es SVG?

SVG significa Scalable Vector Graphics SVG se utiliza para definir los vectores basados en gráficos para la Web SVG define los gráficos en formato XML Gráficos SVG no se pierde ninguna calidad si has cambiado de tamaño o Cada elemento y cada atributo en archivos SVG se pueden animar SVG es una recomendación del W3C

Ventajas SVG

Ventajas del uso de SVG a través de otros formatos de imagen (como JPEG y GIF) son:

Imágenes SVG se pueden crear y editar con cualquier editor de texto Imágenes SVG se pueden buscar, indexado, con guión y comprimido Imágenes SVG son escalables Imágenes SVG pueden ser impresos con alta calidad en cualquier resolución Imágenes SVG son zoomable (y la imagen se puede ampliar sin degradación)


Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyo en línea SVG.

Insertar SVG directamente en páginas HTML

En HTML5, puede incrustar elementos SVG directamente en su página 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>


Resultado:

Para obtener más información acerca de SVG, por favor, lea nuestro tutorial SVG .

Diferencias entre SVG y Canvas

SVG es un lenguaje para describir gráficos 2D en XML.

Lienzo dibuja gráficos 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 automáticamente se puede volver a hacer la forma.

Lienzo se representa pixel por pixel. En la lona, una vez que el gráfico se dibuja, se olvida por el navegador. Si su posición debe ser cambiado, toda la escena tiene que ser rediseñados, incluyendo los objetos que podrían haber sido incluidos en el gráfico.

Comparación de la lona y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:

Lienzo SVG

Resolución dependiente No hay soporte para controladores de

eventos Pobres capacidades de representación de

texto Puede guardar la imagen resultante como.

Gif o. Jpg Muy adecuado para juegos con gráficos

intensivos

Resolución independiente Apoyo a los controladores de eventos Especialmente indicados para aplicaciones

con grandes áreas de representación (Google Maps)

Representación lenta si complejo (cualquier cosa que utiliza el DOM mucho va a ser lento)

No adecuado para aplicaciones de juegos

HTML5 Drag and DropArrastrar y soltar es una parte del estándar HTML5.

Arrastre la imagen W3Schools en el rectángulo.

Arrastrar y soltar

Arrastrar y soltar es una característica muy común. Es cuando "agarrar" un objeto y arrastrarlo a una ubicación 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>


Puede parecer complicado, pero vamos a ir a través 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 continuación, especifique lo que debe suceder cuando el elemento se arrastra.

En el ejemplo anterior, el atributo ondragstart llama a una función, arrastre (evento), que especifica los datos para ser arrastrada.

El dataTransfer.setData () método 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").

Dónde 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 caída, hay que evitar que el tratamiento predeterminado del elemento.

Esto se hace llamando a la event.preventDefault () método para el evento ondragover:

event.preventDefault()

Haga lo Drop - ondrop

Cuando los datos arrastrado se coloca, se produce un evento de colocación.

En el ejemplo anterior, el atributo ondrop llama a una función, gota (evento):

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

Código explicó:

Llame a preventDefault () para evitar la manipulación 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") método. Este método devolverá todos los datos que se estableció al mismo tipo en el setData () método

Los datos arrastrando es el id del elemento arrastrado ("drag1") Añadir el elemento arrastrado en la caída de elemento

HTML5 GeolocationGeolocalización HTML5 se utiliza para localizar la posición de un usuario Pruébelo

Busque la posición del usuario

El HTML5 Geolocation API se utiliza para obtener la posición geográfica de un usuario.

Dado que esto puede comprometer la privacidad del usuario, la posición no está disponible a menos que el usuario lo apruebe.


Internet Explorer 9, Firefox, Chrome, Safari y Opera Geolocalización apoyo.

Nota: La Geolocalización es mucho más precisa para los dispositivos con GPS, como el iPhone.

HTML5 - Uso de Geolocalización

Utilice el método getCurrentPosition () para obtener la posición del usuario.

El ejemplo siguiente es un ejemplo sencillo Geolocalización devolver la latitud y longitud de la posición 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>


Ejemplo explicó:

Compruebe si se admite Geolocalización Si se admite, ejecute el getCurrentPosition () método. Si no, mostrar un mensaje al

usuario Si el getCurrentPosition () método tiene éxito, devuelve un objeto coordenadas a la

función especificada en el parámetro (ShowPosition) El ShowPosition () función obtiene la muestra la Latitud y Longitud

El ejemplo anterior es un script de Geolocalización muy básico, sin control de errores.

Controlar errores y rechazos

El segundo parámetro del método getCurrentPosition () se utiliza para controlar los errores. En él se especifica una función a ejecutar en caso de no obtener la ubicación 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; } }


Códigos de error:

Permiso denegado - el usuario no permitió Geolocalización Coloque disponible - No es posible obtener la ubicación actual Timeout - La operación ha agotado

Visualización 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+"'>";}


En el ejemplo anterior usamos la latitud regresó y datos de longitud para mostrar la ubicación en un mapa de Google (utilizando una imagen estática).

Google Map GuiónCómo utilizar una secuencia de comandos para mostrar un mapa interactivo con un marcador, el zoom y las opciones de arrastre.

Obtener información específica sobre

Esta página demuestra cómo mostrar la posición del usuario en un mapa. Sin embargo, Geolocation es también muy útil para la localización de información específica.

Ejemplos:

Hasta al día la información local Mostrando Puntos de interés cerca del usuario Turn-by-Turn Navigation (GPS)

Método El getCurrentPosition () - Devolver datos

El getCurrentPosition () devuelve un objeto si tiene éxito. Las propiedades de la latitud, longitud y precisión siempre se devuelven. Las demás propiedades se devuelven a continuación si está disponible.

Propiedad Descripción

coords.latitude La latitud como un número decimal

coords.longitude La longitud como un número decimal

coords.accuracy La precisión de posición

coords.altitude La altitud en metros sobre el nivel medio del mar

coords.altitudeAccuracy

La precisión de la posición de altitud

coords.heading La partida que grados respecto al norte

coords.speed La velocidad en metros por segundo

fecha y hora La fecha / hora de la respuesta

Objeto Geolocation - Otros métodos interesantes

watchPosition () - Devuelve la posición actual del usuario y continúa devolviendo posición actualizada a medida que el usuario (como el GPS en un coche).

clearWatch () - Detiene el watchPosition () método.

El siguiente ejemplo muestra el método 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>


HTML5 videoMuchos sitios web modernos mostrar videos. HTML5 proporciona un estándar para mostrarlos.

Comprueba si tu navegador soporta HTML5 vídeo

Check

Video en la Web

Hasta ahora, no ha sido un estándar para mostrar un vídeo / película en una página web.

Hoy en día, la mayoría de los vídeos se muestra a través de un plug-in (como flash). Sin embargo, los diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo / película en una página 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 - ¿Cómo funciona?

Para mostrar un vídeo 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>


El atributo de control añade controles de vídeo, como reproducción, pausa y volumen.

También 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 vídeo está reservada cuando la página está cargada. Sin embargo, sin estos atributos, el navegador no sabe el tamaño del vídeo, y no puede reservar el espacio adecuado para ello. El efecto será que el diseño de la página cambiará durante la carga (mientras se carga el vídeo).

También 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 vídeo diferentes. El navegador utiliza el primer formato reconocido.

Formatos de vídeo y Soporte del navegador

Actualmente, hay 3 formatos de vídeo con soporte para el elemento <video>: MP4, WebM y Ogg:

Navegador MP4 WebM Ogg

Internet Explorer 9 SI NO NO

Firefox 4.0 NO SI SI

Google Chrome 6 SI SI SI

Apple Safari 5 SI NO NO

Opera 10.6 NO SI SI

MP4 = MPEG 4 archivos con códec de vídeo H264 y AAC audio codec WebM WebM = archivos con códec de vídeo VP8 y el audio codec Vorbis Ogg = Ogg Theora archivos con códec de vídeo y audio codec Vorbis

HTML5 <video> - Métodos y propiedades DOM

HTML5 tiene métodos DOM, propiedades y eventos para la <video> y elementos <audio>.

Estos métodos, propiedades y eventos le permiten manipular elementos <video> y <audio> utilizando JavaScript.

Hay métodos para reproducir, pausar, y carga, por ejemplo, y hay propiedades (como la duración y el volumen). También hay eventos DOM que se le notifique cuando el elemento <video> comienza a jugar, está en pausa, se acabó, etc

El ejemplo a continuación ilustran, de una manera sencilla, la forma de abordar un elemento <video>, leer y establecer las propiedades y métodos de llamadas.

Ejemplo 1

Cree simple juego / pausa + controles de cambio de tamaño de un vídeo:

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

El ejemplo anterior llama a dos métodos: play () y pausa (). También utiliza dos propiedades: una pausa y anchura.


Para una referencia completa visite nuestra HTML5 Audio / Video Referencia DOM .

HTML5 Video Tags


<video> Define un vídeo o una película

<source> Define múltiples recursos multimedia para elementos multimedia, como <video> y <audio>

<track> Define pistas de texto en mediaplayers

HTML5 Audio

HTML5 proporciona un estándar para la reproducción de archivos de audio.

Audio en la Web

Hasta ahora, no ha sido un estándar para la reproducción de archivos de audio en una página web.

Hoy en día, la mayoría de archivos de audio se reproduce a través de un plug-in (como flash). Sin embargo, los diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para insertar un archivo de audio en una página 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 - ¿Cómo 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>


El atributo de control añade controles de audio, como reproducción, pausa y volumen.

También debe insertar el contenido del texto entre el <audio> y </ audio> etiquetas para los navegadores que no soportan el elemento <audio>.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

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 MP3 Wav Ogg

Internet Explorer 9 SI NO NO

Firefox 4.0 NO SI SI

Google Chrome 6 SI SI SI

Apple Safari 5 SI SI NO

Opera 10.6 NO SI SI

HTML5 Audio Tags


<audio> Define el contenido de sonido

<source> Define múltiples 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 características permiten un mejor control de entrada y validación.

Este capítulo trata de los nuevos tipos de entrada:

color fecha fecha y hora datetime-local email mes número alcance

http://www.w3schools.com/tags/tag_source.asp

http://www.w3schools.com/tags/tag_audio.asp

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 comportarán 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">


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


Tipo de entrada: fecha y hora

El tipo datetime permite al usuario seleccionar una fecha y hora (con zona horaria).

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_color

Ejemplo

Definir la fecha y hora de control (con zona horaria):

Birthday (date and time): <input type="datetime" name="bdaytime">


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


Tipo de entrada: email

El tipo de correo electrónico se utiliza para campos de entrada que debe contener una dirección de e-mail.

Ejemplo

Definir un campo para una dirección de e-mail (será valida automáticamente cuando se presente):

E-mail: <input type="email" name="usremail">


Consejo: Safari en el iPhone reconoce el tipo de correo electrónico, y cambia el teclado de la pantalla para que coincida (añade @ y opciones de com.).

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_email

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_datetime-local

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_datetime

Tipo de entrada: mes

El tipo meses permite al usuario seleccionar un mes y año.

Ejemplo

Definición de un mes y el año de control (sin zona horaria):

Birthday (month and year): <input type="month" name="bdaymonth">


Tipo de entrada: número

El tipo de número se utiliza para campos de entrada que debe contener un valor numérico.

También puede establecer restricciones sobre qué números son aceptadas:

Ejemplo

Definir un campo numérico (con restricciones):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">


Utilice los siguientes atributos para especificar restricciones:

max - especifica el valor máximo permitido min - especifica el valor mínimo permitido paso - especifica los intervalos de números legales valor - Especifica el valor predeterminado

Pruebe un ejemplo con todos los atributos de restricción: 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 números.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_form_number_adv

http://www.w3schools.com/tags/att_input_value.asp

http://www.w3schools.com/tags/att_input_step.asp

http://www.w3schools.com/tags/att_input_min.asp

http://www.w3schools.com/tags/att_input_max.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_month

También puede establecer restricciones sobre qué números son aceptadas.

Ejemplo

Definir un control para introducir un número cuyo valor exacto no es importante (como un control deslizante):

<input type="range" name="points" min="1" max="10">


Utilice los siguientes atributos para especificar restricciones:

max - especifica el valor máximo permitido min - especifica el valor mínimo permitido paso - especifica los intervalos de números legales valor - Especifica el valor predeterminado

Tipo de entrada: búsqueda

El tipo de búsqueda se utiliza para los campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).

Ejemplo

Definir un campo de búsqueda (como una búsqueda en el sitio, o búsqueda de Google):

Search Google: <input type="search" name="googlesearch">


Tipo de entrada: tel

Ejemplo

Definir un campo para introducir un número de teléfono:

Telephone: <input type="tel" name="usrtel">


http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_tel

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_search

http://www.w3schools.com/tags/att_input_value.asp

http://www.w3schools.com/tags/att_input_step.asp

http://www.w3schools.com/tags/att_input_min.asp

http://www.w3schools.com/tags/att_input_max.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range

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


Tipo de entrada: url

El tipo de URL se utiliza para los campos de entrada que debe contener una dirección URL.

El valor del campo URL se valida automáticamente cuando se envía el formulario.

Ejemplo

Definir un campo para introducir una URL:

Add your homepage: <input type="url" name="homepage">


Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado de la pantalla para que coincida (añade opción com.).

Tipo de entrada: la semana

El tipo semanas permite al usuario seleccionar una semana y año.

Ejemplo

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_url

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_time

Definir una semana y el control al año (sin zona de tiempo):

Select a week: <input type="week" name="week_year">


HTML5 <input> Tag


<input> 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 comportarán 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 función de los elementos <input>. Los usuarios podrán 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">

http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_week

<option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>


HTML5 <keygen> Element

El propósito 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 envía el formulario, dos claves se generan, uno público y otro privado.

La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría 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>


HTML5 <output> Element

El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).

Ejemplo

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_keygen

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_datalist

Realizar un cálculo 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>


Nuevos elementos de formulario HTML5


<datalist> Especifica una lista de opciones predefinidas para un elemento <input>

<keygen> Especifica un campo generador de par de claves en un formulario

<output> Representa el resultado de un cálculo

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 automático formulario formAction formenctype formmethod formnovalidate formtarget altura y el ancho lista min y max múltiple patrón (regexp) marcador de posición necesario paso

http://www.w3schools.com/tags/tag_output.asp

http://www.w3schools.com/tags/tag_keygen.asp

http://www.w3schools.com/tags/tag_datalist.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_output

<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 automáticamente 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 específicos, o viceversa.

Nota: El atributo autocomplete trabaja con <form> y los tipos <input> siguientes: texto, búsqueda, url, teléfono, correo electrónico, contraseña, 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>


Sugerencia: En algunos navegadores puede que tenga que activar la función 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>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autocomplete


<input> atributo autofocus

El atributo autofocus es un atributo booleano.

Cuando está presente, especifica que un elemento <input> automáticamente debe recibir el foco cuando se carga la página.

Ejemplo

Deje que el "Nombre" campo de entrada automáticamente obtendrá el foco cuando se carga la página:

First name:<input type="text" name="fname" autofocus="autofocus">


<input> de atributo

El atributo de forma especifica una o más formas de un elemento <input> pertenece.

Consejo: Para hacer referencia a más 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 todavía 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">


http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_form

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autofocus

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_form_novalidate

<input> atributo formAction

El atributo formAction especifica la dirección URL de un archivo que procesará el control de entrada cuando se envía 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 envío, 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>


<input> formenctype Atributo

El atributo formenctype especifica cómo se forman los datos deben ser codificados cuando se presenta al servidor (sólo 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

Envíe el formulario de datos que está codificado por omisión (el primer botón de envío), y codificado como "multipart / form-data" (el segundo botón de envío):

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

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formaction


<input> formmethod Atributo

El atributo formmethod define el método HTTP para enviar form-data a la URL de la acción.

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 botón de envío reemplaza el método 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>


<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 validación):

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formmethod

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formenctype

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


<input> atributo formtarget

El atributo formtarget especifica un nombre o una palabra clave que indica dónde se debe mostrar la respuesta que se recibe después 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 envío, 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>


<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 sólo se utilizan con <input type="image">.

Consejo: Siempre especifique la altura y anchura de los atributos de las imágenes. Si la altura y la anchura se establece, el espacio requerido para la imagen está reservada cuando la página está cargada. Sin embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen, y no puede reservar el espacio adecuado para ello. El efecto será que el diseño de la página cambiará durante la carga (mientras que la carga de imágenes).

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formtarget

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formnovalidate

Ejemplo

Definir una imagen como botón de enviar, con atributos height y width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">


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


<input> min y max Atributos

El mínimo y máximo de los atributos de especificar el valor mínimo y máximo para un elemento <input>.

Nota: los valores mínimo y máximo de los atributos trabaja con los siguientes tipos de entrada: número, rango, fecha, fecha y hora, fecha y hora local, mes, hora y semana.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_datalist

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_height_width

Ejemplo

<input> elementos con valores mínimos y máximos:

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


<input> múltiples atributos

El atributo múltiple es un atributo booleano.

Cuando está presente, especifica que el usuario puede introducir más de un valor en el elemento <input>.

Nota: El atributo multiple trabaja con los siguientes tipos de entrada: correo electrónico, y el archivo.

Ejemplo

Un campo de archivo de carga que acepta varios valores:

Select images: <input type="file" name="img" multiple="multiple">


<input> atributo patrón

El atributo de patrón especifica una expresión regular que el valor del elemento <input> se verifica en contra.

Nota: El atributo patrón funciona con los tipos de entrada siguientes: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Consejo: Utilice el mundial título atributo para describir el patrón para ayudar al usuario.

http://www.w3schools.com/tags/att_global_title.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_multiple

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min

Sugerencia: Más información sobre las expresiones regulares en nuestro tutorial JavaScript.

Ejemplo

Un campo de entrada que puede contener sólo tres letras (no hay números o caracteres especiales):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">


<input> atributo placeholder

El marcador de posición 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 descripción del formato de espera).

La pista se muestra en el campo de entrada cuando está vacío, y desaparece cuando el campo recibe el foco.

Nota: El atributo placeholder funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Ejemplo

Un campo de entrada con un marcador de posición de texto:

<input type="text" name="fname" placeholder="First name">


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.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern

http://www.w3schools.com/js/js_obj_regexp.asp

Nota: El atributo requerido trabaja con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico, contraseña, selectores de fecha, número, checkbox, radio y archivo.

Ejemplo

Un campo de entrada requerida:

Username: <input type="text" name="usrname" required="required">


<input> Atributo paso

El atributo de paso especifica los intervalos de números legales para un elemento <input>.

Ejemplo: si el paso = "3", números legales podría ser -3, 0, 3 6,, etc

Consejo: El atributo de paso se puede utilizar junto con el máximo y el mínimo de atributos para crear una gama de valores legales.

Nota: El atributo de paso funciona con los tipos de entrada siguientes: número, rango, fecha, fecha y hora, fecha y hora local, mes, hora y semana.

Ejemplo

Un campo de entrada con un intervalos de números legales que se indican:

<input type="number" name="points" step="3">


HTML5 <input> Tag


<form> Define un formulario HTML para entrada de usuario

<input> Define un control de entrada

http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/tags/tag_form.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_step

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required

HTML5 Web StorageHTML5 web de almacenamiento, un almacenamiento local mejor que las galletas.

¿Qué es el HTML5 Web Storage?

Con HTML5, las páginas web pueden almacenar información localmente en el navegador del usuario.

Anteriormente, esto se hizo con las cookies. Sin embargo, el almacenamiento en Web es más seguro y más rápido. Los datos no se incluye con cada petición del servidor, pero es usado solamente cuando se le pide. También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento del sitio web.

Los datos se almacenan en pares clave / valor, y una página web sólo 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 período 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 próximo día, semana o año.

Ejemplo

localStorage.lastname="Smith";document.getElementById("result").innerHTML="Last name: "+ localStorage.lastname;


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 =

"número"

Consejo: clave / valor siempre se almacenan como cadenas. Recuerde que debe convertir a otro formato cuando sea necesario.

El ejemplo siguiente se cuenta el número de veces que un usuario ha hecho clic en un botón. En este código de la cadena de valor se convierte a un número 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).";


El objeto sessionStorage

El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local

El ejemplo siguiente cuenta el número de veces que un usuario ha hecho clic en un botón, en la sesión 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.";


HTML5 memoria caché de aplicacionesCon HTML5 es fácil hacer una versión sin conexión de una aplicación web mediante la creación de un archivo de manifiesto de caché.

¿Qué es la memoria caché de aplicaciones?

HTML5 introduce caché de la aplicación, lo que significa que una aplicación web se almacena en caché y accesible sin conexión a internet.

Caché de la aplicación ofrece una aplicación de tres ventajas:

1. Navegación fuera de línea - los usuarios pueden utilizar la aplicación cuando está fuera de línea

2. Velocidad - recursos almacenados en caché se cargan más rápido3. Reducción de la carga del servidor - el único navegador se descargará recursos

actualizados / cambiado desde el servidor


Caché de la aplicación 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 conexión):

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_session

Ejemplo

<!DOCTYPE HTML><html manifest="demo.appcache">

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

</html>


Fundamentos de caché Manifest

Para habilitar la caché de la aplicación, incluya el atributo de manifiesto en la etiqueta <html> del documento:

<!DOCTYPE HTML><html manifest="demo.appcache">...</html>

Cada página con el atributo especificado manifiesto se almacenan en caché cuando el usuario lo visita. Si el atributo manifiesto no se especifica, la página no se almacenan en caché (a menos que la página se especifica directamente en el archivo de manifiesto).

La extensión 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é después de haber sido descargado por primera vez

RED - Los archivos que figuran en esta cabecera requieren una conexión con el servidor, y no se almacenan en caché

RÉPLICA - Los archivos que figuran en esta cabecera especifica las páginas de reserva si una página es inaccesible

CACHE MANIFEST

La primera línea, manifiesto de la caché, se requiere:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_html_manifest

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 raíz del sitio web. Entonces, siempre que el usuario no está conectado a Internet, los recursos todavía estará disponible.

RED

La sección de la red a continuación especifica que el archivo "login.asp" nunca debe ser almacenado en caché, y no estarán disponibles sin conexión:

NETWORK:login.asp

Un asterisco puede ser utilizado para indicar que todos los demás recursos / archivos requieren una conexión a Internet:

NETWORK:*

RÉPLICA

La sección FALLBACK abajo se especifica que "offline.html" se sirve en lugar de todos los archivos del html / / catálogo, en caso de una conexión 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 actualización del caché

Una vez que la aplicación 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 aplicación mediante programación 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 líneas que empiezan con un "#" son líneas de comentario, pero también puede servir a otro propósito. Caché de una aplicación sólo se actualiza cuando cambia su archivo de manifiesto. Si edita una imagen o cambiar una función de JavaScript, los cambios no serán re-caché.Actualización de la fecha y la versión en línea 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 versión 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 límites de tamaño para los datos almacenados en caché (algunos navegadores tienen un límite de 5 MB por sitio).

HTML5 Web WorkersUn trabajador de web es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

¿Qué es un Trabajador Web?

Al ejecutar secuencias de comandos en una página HTML, la página deja de responder hasta que el guión 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 página. 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 números de recuento en el fondo:

Ejemplo

Count numbers:

Start Worker Stop Worker


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 continuación, 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 código anterior es la postMessage () método - que se utiliza para los mensajes de un mensaje de vuelta a la página HTML.

Nota: Normalmente, los trabajadores web no se utilizan para estos scripts sencillos, pero para tareas más intensivas de CPU.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webworker

Crear un objeto Web Worker

Ahora que ya tenemos el archivo de trabajador web, tenemos que llamarlo desde una página HTML.

Las siguientes líneas comprueba si el trabajador ya existe, si no - se crea un objeto nuevo trabajador web y se ejecuta el código en "demo_workers.js":

if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }

Entonces podemos enviar y recibir mensajes de la trabajadora web.

Añada 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 código 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 después 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 () método:

w.terminate();

Trabajador Completo Web Ejemplo de código

Ya hemos visto el código de los trabajadores en el archivo. Js. A continuación se muestra el código de la página 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>


Web Workers y el DOM

Dado que los trabajadores web están 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 EventsEventos HTML5 Server-Sent permitir que una página web para obtener actualizaciones desde un servidor.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webworker

Eventos enviados del servidor - One Way Mensajería

Un evento en el servidor envía es cuando una página web se actualiza automáticamente desde un servidor.

Esto también fue posible antes, pero la página web tendría que preguntar si hay actualizaciones disponibles. Con servidores enviados por los acontecimientos, las actualizaciones vienen automáticamente.

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


Ejemplo explicó:

Crear un nuevo objeto EventSource y especifique la dirección URL de la página de envío de las actualizaciones (en este ejemplo "demo_sse.php")

Cada vez que se recibe una actualización, el evento se produce onmessage Cuando un evento ocurre onmessage, poner los datos recibidos en el elemento con id

= "número"

Compruebe Server-Sent Events Support

En el ejemplo anterior tryit había algunas líneas adicionales de código para comprobar la compatibilidad del explorador para eventos enviados del servidor:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse

if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... }else { // Sorry! No server-sent events support.. }

Server-Side Ejemplo de código

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.

Código en PHP (demo_sse.php):

<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');

$time = date('r');echo "data: The server time is: {$time}\n\n";flush();?>

Código en ASP (VB) (demo_sse.asp):

<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>

Código explicó:

Ajuste el "Content-Type" de encabezado a "text / event-stream" Especifique que la página 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 página web

El objeto EventSource

En los ejemplos anteriores hemos utilizado el evento onmessage recibir los mensajes. Sin embargo, otros acontecimientos también están disponibles:

Eventos Descripción

OnOpen Cuando una conexión con el servidor se abre

onmessage Cuando se recibe un mensaje

onerror Cuando se produce un error

TUTORIAL DE CSS

Introducción

Lo que usted debe saber ya

Antes de continuar, debe tener un conocimiento básico de los siguientes:

HTML / XHTML

Si quieres estudiar estos temas en primer lugar, encontrar los tutoriales en nuestro página de Inicio.

¿Qué es CSS?

CSS es sinónimo de C ascading S tyle S heets Los estilos definen la forma de mostrar los elementos HTML Estilos se añadieron a 4,0 HTML para resolver un problema Hojas de estilo externas puede ahorrar un montón de trabajo Hojas de estilo externas se almacenan en los archivos CSS

CSS demo

http://www.w3schools.com/default.asp

http://www.w3schools.com/default.asp

Un documento HTML se pueden visualizar con diferentes estilos: Vea cómo 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 párrafo. </ p>

Cuando las etiquetas gusta <font> y atributos de color se han añadido a la especificación HTML 3.2, comenzó una pesadilla para los desarrolladores web. Desarrollo de sitios web de gran tamaño, donde las fuentes y la información de color se agregaron a cada página, 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 podría ser eliminado del documento HTML, y se almacena en un archivo CSS.

Todos los navegadores soportan CSS hoy.

CSS ahorra mucho trabajo!

CSS define cómo 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 diseño de todas las páginas 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 más:

http://www.w3schools.com/css/tryit.asp?filename=ex2

http://www.w3schools.com/css/tryit.asp?filename=ex1

http://www.w3schools.com/css/demo_default.htm

El selector es normalmente el elemento HTML que desee estilo.

Cada declaración 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 declaración CSS siempre termina con un punto y coma, y los grupos de la declaración están rodeadas por llaves:

p {color:red;text-align:center;}

Para hacer más legible la CSS, usted puede poner una declaración en cada línea, así:

Ejemplo

p{color:red;text-align:center;}


CSS Comentarios

Los comentarios se utilizan para explicar su código, y puede ayudarte a la hora de editar el código 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;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1

Id y Clase

Los selectores id y class

Además 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 continuación se aplica en el elemento con id = "para1":

Ejemplo

#para1{text-align:center;color:red;}


No NO iniciar un nombre de identificación con un número! 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 más 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;}


También puede especificar que sólo determinados elementos HTML debería verse afectada por una clase.

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id

En el ejemplo de abajo, con todos los elementos p class = "center" será alineado al centro:

Ejemplo

p.center {text-align:center;}


No NO iniciar un nombre de clase con un número! Esto sólo es compatible con Internet Explorer.

Cómo ...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 línea

Hoja de estilos externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada página debe enlazar a la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la sección 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 extensión. Css. Un ejemplo de un archivo de hoja de estilo se muestra a continuación:

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

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class

Una hoja de estilo interna debe ser usado cuando un documento único que tiene un estilo único.Para definir estilos internos en la sección de cabecera de una página 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 línea

Un estilo en línea pierden muchas de las ventajas de hojas de estilo por el contenido de la mezcla con la presentación. Utilice este método con moderación!

Para utilizar estilos en línea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Múltiples 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 más específico.

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 página con la hoja de estilo interna también 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 alineación del texto y el tamaño de fuente se sustituye por la hoja de estilo interna.

Múltiples estilos en cascada en Uno

Los estilos pueden ser especificados:

dentro de un elemento HTML dentro de la sección de la cabeza de una página 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 más de un estilo especificado para un elemento HTML?

En términos generales podemos decir que todos los estilos voluntad "en cascada" en una nueva hoja "virtual" de estilo a las reglas siguientes, en el número cuatro tiene la más alta prioridad:

1. Navegador predeterminado2. Hoja de estilos externa3. Hoja de estilo interna (en la sección de la cabeza)4. Estilo en línea (dentro de un elemento HTML)

Por lo tanto, un estilo en línea (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 después 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 página se define en el selector de cuerpo:

Ejemplo

body {background-color:#b0c4de;}


Con CSS, un color se especifica con mayor frecuencia a través 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;}


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 página se puede establecer la siguiente manera:

Ejemplo

body {background-image:url('paper.gif');}


A continuación se muestra un ejemplo de una mala combinación de texto y la imagen de fondo. El texto es casi ilegible:

Ejemplo

body {background-image:url('bgdesert.jpg');}


http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_bad

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements

http://www.w3schools.com/cssref/css_colors_legal.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body

Imagen de fondo - Repite horizontal o vertical

De manera predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente.

Algunas de las imágenes se debe repetir sólo en horizontal o vertical, para que no parezca extraño, así:

Ejemplo

body{background-image:url('gradient2.png');}


Si la imagen es repetida sólo horizontalmente (repeat-x), el fondo se vea mejor:

Ejemplo

body{background-image:url('gradient2.png');background-repeat:repeat-x;}


Imagen de fondo - Ajustar la posición y no repetir-

Cuando se utiliza una imagen de fondo, utilice una imagen que no perturbe el texto.

Mostrando la imagen sólo una vez que se especifica mediante la propiedad background-repeat:

Ejemplo

body{background-image:url('img_tree.png');background-repeat:no-repeat;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient2

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1


En el ejemplo anterior, la imagen de fondo se muestra en el mismo lugar que el texto. Queremos cambiar la posición de la imagen, de manera que no perturbe el texto demasiado.

La posición 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;}


Antecedentes - Abreviación 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 código, también es posible especificar todas las propiedades en una sola propiedad.Esto se llama una propiedad resumida.

La propiedad abreviada para el fondo no es más que "de fondo":

Ejemplo

body {background:#ffffff url('img_tree.png') no-repeat right top;}


Cuando se utiliza la propiedad rápida 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 están presentes son en este orden.

Este ejemplo usa CSS más avanzado. Eche un vistazo: ejemplo Avanzada

http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand2

http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_norepeat

Más ejemplos

Cómo establecer una imagen de fondo fijaeste ejemplo se muestra cómo establecer una imagen de fondo fija. La imagen no se desplazará con el resto de la página.

Todas las Propiedades de fondo CSS


fondo Establece todas las propiedades de fondo en una declaración

background-attachment Establece si una imagen de fondo se fija o se desplaza con el resto de la página

background-color Establece el color de fondo de un elemento

background-image Ajusta la imagen de fondo de un elemento

background-position Establece la posición inicial de una imagen de fondo

background-repeat Establece una imagen de fondo se repetirá

TextEL FORMATO DE TEXTO

E s t e t e x t o e s d e e s t i l o c o n a l g u n a s d e l a s p r o p i e d a d e s d e f o r m a t o d e t e x t o . E l t í t u l o u t i l i z a e l t e x t o - a l i g n , t r a n s f o r m a r t e x t o , y l a s p r o p i e d a d e s d e l c o l o r . E l p á r r a f o t i e n e s a n g r í a , a l i n e a d o , y e l e s p a c i o e n t r e c a r a c t e r e s e s p e c i f i c a d o . E l s u b r a y a d o e s r e t i r a d o d e l " T r y i t y o u r s e l f " e n l a c e .

Color del texto

La propiedad color se utiliza para establecer el color del texto.

Con CSS, un color se especifica con mayor frecuencia a través 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 página se define en el selector de cuerpo.

Ejemplo

http://www.w3schools.com/cssref/css_colors_legal.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_text

http://www.w3schools.com/cssref/pr_background-repeat.asp

http://www.w3schools.com/cssref/pr_background-position.asp

http://www.w3schools.com/cssref/pr_background-image.asp

http://www.w3schools.com/cssref/pr_background-color.asp

http://www.w3schools.com/cssref/pr_background-attachment.asp

http://www.w3schools.com/cssref/css3_pr_background.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}


Para W3C CSS compatible: Si define la propiedad de color, también debe definir la propiedad background-color.

Alineación del texto

La propiedad text-align se utiliza para establecer la alineación 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 línea se estira para que cada línea tiene la misma anchura y los márgenes izquierdo y derecho son rectos (como en revistas y periódicos).

Ejemplo

h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}


Texto Decoración

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 propósitos de diseño:

Ejemplo

a {text-decoration:none;}


También se puede utilizar para decorar texto:

Ejemplo

h1 {text-decoration:overline;}h2 {text-decoration:line-through;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration_link

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all

http://www.w3schools.com/css/tryit.asp?filename=trycss_color

h3 {text-decoration:underline;}h4 {text-decoration:blink;}


No se recomienda para subrayar el texto que no es un enlace, ya que a menudo confunde a los usuarios.

Texto Transformación

La propiedad text-transform se utiliza para especificar las letras mayúsculas y minúsculas en un texto.

Se puede utilizar para convertir todo en letras mayúsculas o minúsculas, o mayúscula la primera letra de cada palabra.

Ejemplo

p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}


Texto Sangría

La propiedad text-indentación se utiliza para especificar la sangría de la primera línea de un texto.

Ejemplo

p {text-indent:50px;}


Más ejemplos

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-transform

http://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration

Especificar el espacio entre caracteresEste ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres.

Especifique el espacio entre las líneas deeste ejemplo se muestra cómo especificar el espacio entre las líneas de un párrafo.

Ajuste la dirección del texto de un elementoEn este ejemplo se muestra cómo cambiar la dirección del texto de un elemento.

Aumentar el espacio en blanco entre las palabrasEn este ejemplo se muestra cómo aumentar el espacio en blanco entre las palabras en un párrafo.

Desactive el ajuste de texto dentro de un elementoEn este ejemplo se muestra cómo deshabilitar el ajuste de texto dentro de un elemento.

La alineación vertical de una imagenEn este ejemplo se muestra cómo establecer la vertical de alinear una imagen en un texto.

Todas las propiedades del texto CSS


color Establece el color del texto

dirección Especifica la dirección del texto / escritura dirección

letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto

line-height Ajusta la altura de la línea

text-align Especifica la alineación horizontal del texto

text-decoration Especifica la decoración añadida al texto

text-indent Especifica la sangría de la primera línea de un bloque de texto

text-shadow Especifica el efecto de sombra añadido al texto

text-transform Controla la capitalización del texto

unicode-bidi

vertical-align Establece la alineación vertical de un elemento

espacio en blanco Especifica cómo un espacio en blanco dentro de un elemento se maneja

word-spacing Aumenta o disminuye el espacio entre las palabras de un texto

http://www.w3schools.com/cssref/pr_text_word-spacing.asp

http://www.w3schools.com/cssref/pr_text_white-space.asp

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

http://www.w3schools.com/cssref/pr_text_text-transform.asp

http://www.w3schools.com/cssref/pr_text_text-indent.asp

http://www.w3schools.com/cssref/pr_text_text-decoration.asp

http://www.w3schools.com/cssref/pr_text_text-align.asp

http://www.w3schools.com/cssref/pr_dim_line-height.asp

http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

http://www.w3schools.com/cssref/pr_text_direction.asp

http://www.w3schools.com/cssref/pr_text_color.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

http://www.w3schools.com/css/tryit.asp?filename=trycss_text_white-space

http://www.w3schools.com/css/tryit.asp?filename=trycss_text_word-spacing

http://www.w3schools.com/css/tryit.asp?filename=trycss_text_direction

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

http://www.w3schools.com/css/tryit.asp?filename=trycss_letter-spacing

FuenteCSS propiedades de fuente definir la familia de fuentes, la audacia, el tamaño y el estilo de un texto.

Diferencia entre Serif y fuentes Sans-serif

En las pantallas de ordenador, sans-serif se consideran más fáciles de leer que las fuentes serif.

Familias de fuentes CSS

En CSS, hay dos tipos de nombres de familias de fuentes:

genérico familia - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Monospace")

Familia tipográfica - una familia de fuentes específicas (como "Times New Roman" o "Arial")

Familia genérica Familia de fuentes Descripción

Serif Times New Roman Georgia

Las fuentes serif tienen pequeñas líneas en los extremos de algunos personajes

Sans-serif Arial Verdana

"Sans" significa sin - estas fuentes no tienen las líneas en los extremos de los personajes

Monospace Courier New Lucida Console

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 debería 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 genérica, para que el navegador elegir un tipo de letra similar en la familia genérica, si no hay otras fuentes disponibles.

Nota : Si el nombre de una familia de fuentes es más que una palabra, debe estar entre comillas, como font-family: "Times New Roman".

Más de una familia de la fuente se especifica en una lista separada por comas:

Ejemplo

p{font-family:"Times New Roman", Times, serif;}


Para las combinaciones de fuentes más comúnmente 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;}


Tamaño de la Fuente

La propiedad font-size establece el tamaño del texto.

Ser capaz de manejar el tamaño del texto es importante en el diseño web. Sin embargo, usted no debe usar ajustes de tamaño de la fuente para hacer parecer párrafos encabezados o títulos parecen párrafos.

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-style

http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-family

Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los títulos y <p> de párrafos.

El valor de font-size puede ser un tamaño absoluto o relativo.

Tamaño absoluto:

Establece el texto a un tamaño especificado No permite al usuario cambiar el tamaño de texto en todos los navegadores (malo

por razones de accesibilidad) El tamaño absoluto es útil cuando el tamaño físico de la salida se conoce

Tamaño relativo:

Establece el tamaño en relación con los elementos del entorno Permite al usuario cambiar el tamaño del texto en los navegadores

Si no se especifica un tamaño de fuente, el tamaño predeterminado para el texto normal, como párrafos, es 16px (16px = 1em).

Establecer Tamaño de fuente con píxeles

Ajustar el tamaño del texto con píxeles que ofrece un control total sobre el tamaño del texto:

Ejemplo

h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}


El ejemplo anterior permite que Internet Explorer 9, Firefox, Chrome, Opera y Safari para cambiar el tamaño del texto.

Nota: El ejemplo anterior no funciona en la versión de IE, antes 9.

El texto se puede cambiar el tamaño de todos los navegadores que utilizan la herramienta de zoom (sin embargo, esto cambia el tamaño de la página entera, no sólo el texto).

Establecer tamaño de fuente con Em

Para evitar el problema de cambio de tamaño con las versiones anteriores de Internet Explorer, muchos desarrolladores em usar en lugar de píxeles.

El tamaño de la unidad em es recomendado por el W3C.

1em es igual al tamaño de la fuente de corriente. El tamaño de texto por defecto en los navegadores es 16px. Por lo tanto, el tamaño predeterminado de 1em es 16px.

El tamaño se puede calcular a partir de píxeles a em utilizando esta fórmula: pixeles / 16 = em

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size_px

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


En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en píxeles.Sin embargo, con el tamaño de la EM, es posible ajustar el tamaño del texto en todos los navegadores.

Por desgracia, todavía hay un problema con las versiones anteriores de IE. El texto se hace más grande de lo que debería cuando se hace más grande y más pequeño de lo que debería cuando hace más pequeño.

Use una combinación de porcentaje y Em

La solución que funciona en todos los navegadores, es establecer una fuente predeterminada de tamaño 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;}


Nuestro código ahora funciona muy bien! Se muestra el tamaño del texto mismo en todos los navegadores, y permite que todos los navegadores para hacer zoom o cambiar el tamaño del texto!

Más ejemplos

Establezca la audacia de la fuentede este ejemplo se muestra cómo establecer la audacia de una fuente.

Establezca la variante de la fuentede este ejemplo se muestra cómo establecer la variante de una fuente.

Todas las propiedades de la fuente en una declaracióneste ejemplo se muestra cómo utilizar la propiedad abreviada para establecer todas las propiedades de la fuente en una declaración.

http://www.w3schools.com/css/tryit.asp?filename=trycss_font

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-variant

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size_percent_em

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size_em

Todas las propiedades de fuente CSS


fuente Establece todas las propiedades de la fuente en una declaración

font-family Especifica la familia de fuentes para el texto

font-size Especifica el tamaño de fuente del texto

font-style Especifica el estilo de fuente para el texto

font-variant Especifica si el texto debe aparecer en una fuente small-caps

font-weight Especifica el peso de una fuente

LinksLos enlaces pueden ser de estilo de diferentes maneras.

Styling Links

Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color, font-family, fondo, etc.)

Especial para los enlaces son que pueden ser de estilo de forma diferente dependiendo del estado en que están adentro

Los cuatro estados enlaces son los siguientes:

a: link - un enlace normal, no visitado a: visited - un enlace que el usuario ha visitado a: hover - un enlace cuando el usuario mouses sobre ella a: 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 */


Al configurar el estilo de varios estados de los enlaces, hay algunas reglas de orden:

a: hover debe ir después a: link y: visited a: active debe venir después de un: hover

http://www.w3schools.com/css/tryit.asp?filename=trycss_link

http://www.w3schools.com/cssref/pr_font_weight.asp

http://www.w3schools.com/cssref/pr_font_font-variant.asp

http://www.w3schools.com/cssref/pr_font_font-style.asp

http://www.w3schools.com/cssref/pr_font_font-size.asp

http://www.w3schools.com/cssref/pr_font_font-family.asp

http://www.w3schools.com/cssref/pr_font_font.asp

Estilos comunes de enlace

En el ejemplo anterior, el color del enlace cambia en función del estado en que está adentro

Vamos a ir a través de algunas de las formas comunes a otros enlaces de estilo:

Texto Decoración

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


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


Más ejemplos

Añadir estilos a hipervínculosEn este ejemplo se muestra cómo agregar otros estilos a hipervínculos.

Avanzado - Crear cuadros de enlaceEste ejemplo demuestra un ejemplo más avanzado en el que se combinan varias propiedades CSS para mostrar los enlaces como cuadros.

listasLas propiedades de la lista de CSS permiten:

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_background

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_decoration

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 están marcados con balas listas ordenadas - los elementos de la lista están marcados con números o letras

Con CSS, las listas pueden ser de estilo adicional, y las imágenes 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;}


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 list-style-image:

Ejemplo

ul{list-style-image: url('sqpurple.gif');}


El ejemplo anterior no se muestra igual en todos los navegadores. IE y Opera mostrará la imagen de posición un poco más alta que Firefox, Chrome y Safari.

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

Si desea que la imagen de marca que se coloca por igual en todos los navegadores, una solución crossbrowser se explica a continuación.

Solución 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; }


Ejemplo explicó:

Por ul:o Ajuste el list-style-type a nadie para quitar el marcador de elemento de la

listao Establezca el relleno y el margen para 0px (para la compatibilidad cross-

browser) Para todos los li ul en:

o Establezca la URL de la imagen, y mostrar sólo 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

También 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");}


http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image_crossbrow

Cuando se utiliza la propiedad resumida, el orden de los valores son:

list-style-type list-style-position (para una descripción, consulte la tabla de propiedades CSS a

continuación) list-style-image

No importa si uno de los valores anteriores se han perdido, mientras que el resto están en el orden especificado.

Más ejemplos

Todos los diferentes elementos de lista para las listas de marcadoresEste ejemplo muestra todos los diferentes elementos de lista-marcadores en CSS.

Todas las propiedades de la lista de CSS


list-style Establece todas las propiedades de una lista en una declaración

list-style-image Especifica una imagen como marcador de ítems de lista

list-style-position Especifica si los marcadores list-item debe aparecer dentro o fuera del flujo de contenido

list-style-type Especifica el tipo de marcador de ítems de lista

TablasEl aspecto de una tabla HTML puede ser mejorado con CSS:

Empresa Contacto País

Alfreds Futterkiste Maria Anders Alemania

Berglunds snabbköp Christina Berglund Suecia

Centro comercial Moctezuma Francisco Chang México

Ernst Handel Roland Mendel Austria

Isla Trading Helen Bennett Reino Unido

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://www.w3schools.com/cssref/pr_list-style-position.asp

http://www.w3schools.com/cssref/pr_list-style-image.asp

http://www.w3schools.com/cssref/pr_list-style.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_all

Königlich Essen Philip Cramer Alemania

Riendo Winecellars Bacchus Yoshi Tannamuri Canadá

Magazzini Alimentari Riuniti Giovanni Rovelli Italia

Norte / Sur Simon Crowther Reino Unido

París spécialités Marie Bertrand Francia

The Big Cheese Liz Nixon EE.UU.

Vaffeljernet Palle Ibsen 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;}


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

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border


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


Tabla Alineación del texto

El texto de una tabla está alineada con las propiedades alinear el texto-y vertical-align.

La propiedad text-align establece la alineación horizontal, como izquierda, derecha o centro:

Ejemplo

td{text-align:right;}


La propiedad vertical-align establece la alineación vertical, como arriba, abajo o en medio:

Ejemplo

td{height:50px;

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_align

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_width

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse

vertical-align:bottom;}


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


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


http://www.w3schools.com/css/tryit.asp?filename=trycss_table_color

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_padding

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align

Más ejemplos

Haz una tabla de fantasíaEn este ejemplo se muestra cómo crear una tabla de lujo.

Ajuste la posición de la leyenda de la tablaEste ejemplo muestra cómo colocar el título de la tabla.

Box Model

El modelo de caja CSS

Todos los elementos HTML pueden ser considerados como cajas. En CSS, el término "modelo de caja" se usa cuando se habla de diseño y diagramación.

El modelo de caja CSS es esencialmente una caja que envuelve elementos HTML, y se compone de: los márgenes, 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 función de otros elementos.

La siguiente imagen ilustra el modelo de caja:

Explicación 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 imágenes aparecen

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_caption-side

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

Con el fin de establecer el ancho y el alto de un elemento correctamente en todos los navegadores, lo que necesita saber cómo 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 tamaño total de un elemento, también debe agregar el relleno, bordes y márgenes.

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 matemáticas: 250px (anchura) + 20px (relleno izquierdo y derecho) + 10px (borde izquierdo y derecho) + 20px (margen izquierdo y derecho) = 300px

Suponga que sólo tenía 250 píxeles de espacio. Hagamos un elemento con un ancho total de 250px:

Ejemplo

width:220px;padding:10px;border:5px solid gray;margin:0px;


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 página HTML.

http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width

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á ningún efecto a menos que el border-stylepropiedad se establece!

border-style valores:

none: Define ninguna frontera

puntos: Define un borde de puntos

discontinua: Define un borde discontinuo

sólido: Define un borde sólido

doble: define dos fronteras. La anchura de las dos fronteras son el mismo que el valor límite 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

Pruébelo usted mismo: Establece el estilo de la frontera

Border Ancho

La propiedad border-width se usa para ajustar el ancho de la frontera.

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style

El ancho se establece en píxeles, 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 opción "border-style" propiedad para establecer las fronteras primero.

Ejemplo

p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}


Límite 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"

También puede configurar el color del borde de "transparente".

Nota: El "border-color" propiedad no funciona si se utiliza solo. Utilice la opción "border-style" propiedad para establecer las fronteras primero.

Ejemplo

p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}


http://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

Border - partes individuales

En CSS es posible especificar límites diferentes para partes diferentes:

Ejemplo

p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}


El ejemplo anterior también se puede ajustar con una sola propiedad:

Ejemplo

border-style:dotted solid;


La propiedad estilo de borde puede tener de uno a cuatro valores.

border-style: double sólida discontinua de trazos;o borde superior está salpicadoo borde derecho es sólidoo borde inferior es el dobleo borde izquierdo es discontinua

border-style: double sólidos puntos;o borde superior está salpicadoo bordes derecho e izquierdo son sólidaso borde inferior es el doble

border-style: puntos sólidos;o bordes superior e inferior están salpicadaso bordes derecho e izquierdo son sólidas

border-style: puntos;o los cuatro bordes están salpicadas

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-side2

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-side

La propiedad estilo de borde se utiliza en el ejemplo anterior. Sin embargo, también funciona con border-width y borde de color.

Border - Abreviación 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 código, también 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;


Más ejemplos

Todas las propiedades de borde superior en una declaracióneste ejemplo se muestra una propiedad abreviada para establecer todas las propiedades para el borde superior en una declaración.

Establezca el estilo del borde inferiorEste ejemplo muestra cómo establecer el estilo del borde inferior.

Ajuste el ancho del borde izquierdoEste ejemplo muestra cómo establecer el ancho del borde izquierdo.

Ajuste el color de los cuatro bordesEste ejemplo muestra cómo establecer el color de los cuatro bordes. Se puede tener de uno a cuatro colores.

Ajuste el color del borde derechoEste ejemplo muestra cómo establecer el color del borde derecho.

Todas las propiedades de borde CSS

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-right-color

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-color

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-left-width

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-bottom-style

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-top

http://www.w3schools.com/css/tryit.asp?filename=trycss_border


frontera Establece todas las propiedades de borde en una declaración

border-bottom Establece todas las propiedades del borde de fondo en una declaración

border-bottom-color Establece el color del borde inferior

border-bottom-estilo Establece el estilo del borde inferior

border-bottom-ancho Establece el ancho del borde inferior

border-color Establece el color de los cuatro bordes

border-left Establece todas las propiedades del borde izquierdo en una declaración

border-left-color Establece el color del borde izquierdo

border-left-estilo Establece el estilo del borde izquierdo

border-left-ancho Establece el ancho del borde izquierdo

border-right Establece todas las propiedades del borde derecho en una declaración

border-right-color Establece el color del borde derecho

border-right-estilo Establece el estilo del borde derecho

border-right-ancho Establece el ancho del borde derecho

border-style Establece el estilo de los cuatro bordes

border-top Establece todas las propiedades de borde superior en una declaración

border-top-color Establece el color del borde superior

border-top-estilo Establece el estilo del borde superior

border-top-ancho Establece el ancho del borde superior

border-width Establece el ancho de los cuatro bordes

CSS OutlinesUn esquema es una línea 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.

http://www.w3schools.com/cssref/pr_border-width.asp

http://www.w3schools.com/cssref/pr_border-top_width.asp

http://www.w3schools.com/cssref/pr_border-top_style.asp

http://www.w3schools.com/cssref/pr_border-top_color.asp

http://www.w3schools.com/cssref/pr_border-top.asp

http://www.w3schools.com/cssref/pr_border-style.asp

http://www.w3schools.com/cssref/pr_border-right_width.asp

http://www.w3schools.com/cssref/pr_border-right_style.asp

http://www.w3schools.com/cssref/pr_border-right_color.asp

http://www.w3schools.com/cssref/pr_border-right.asp

http://www.w3schools.com/cssref/pr_border-left_width.asp

http://www.w3schools.com/cssref/pr_border-left_style.asp

http://www.w3schools.com/cssref/pr_border-left_color.asp

http://www.w3schools.com/cssref/pr_border-left.asp

http://www.w3schools.com/cssref/pr_border-color.asp

http://www.w3schools.com/cssref/pr_border-bottom_width.asp

http://www.w3schools.com/cssref/pr_border-bottom_style.asp

http://www.w3schools.com/cssref/pr_border-bottom_color.asp

http://www.w3schools.com/cssref/pr_border-bottom.asp

http://www.w3schools.com/cssref/pr_border.asp

Ejemplos

Trace una línea alrededor de un elemento (contorno)En este ejemplo se muestra cómo dibujar una línea alrededor de un elemento, fuera del borde fronterizo.

Defina el estilo de un esquemaEn este ejemplo se muestra cómo establecer el estilo de un esquema.

Establecer el color de un esquemaEn este ejemplo se muestra cómo establecer el color de un esquema.

Establecer el ancho de un esquemaEn este ejemplo se muestra cómo establecer el ancho de un esquema.

Esquema CSS

Un esquema es una línea 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 número en el "CSS" en la columna indica qué versión de CSS se define la propiedad (o CSS1 CSS2).

Propiedad Descripción Valores CSS

http://www.w3schools.com/css/tryit.asp?filename=trycss_outline-width

http://www.w3schools.com/css/tryit.asp?filename=trycss_outline-color

http://www.w3schools.com/css/tryit.asp?filename=trycss_outline-style

http://www.w3schools.com/css/tryit.asp?filename=trycss_outline

perfilar Establece todas las propiedades de esquema en una declaración

outline-color contorno de estilo contorno ancho deheredar

2

outline-color Establece el color de un esquema color_name hex_number rgb_numberinvertido heredar

2

esbozo de estilo Establece el estilo de un esquema ninguno de puntos de trazos sólidos de doble ranura cresta recuadro principio heredar

2

contorno de ancho

Establece el ancho de un esquema fino a medio espesor longitudheredar

2

CSS MargenLas propiedades de los márgenes 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 taquigrafía también se puede utilizar, para cambiar todos los márgenes a la vez.

Valores posibles

Valor Descripción

auto El navegador calcula un margen

longitud Especifica un margen en px, pt, cm, valor por defecto es 0px etc

http://www.w3schools.com/cssref/pr_outline-width.asp

http://www.w3schools.com/cssref/pr_outline-width.asp

http://www.w3schools.com/cssref/pr_outline-style.asp

http://www.w3schools.com/cssref/pr_outline-color.asp

http://www.w3schools.com/cssref/pr_outline.asp

% Especifica un margen en porcentaje de la anchura del elemento que contiene

heredar 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 márgenes por diversos lados:

Ejemplo

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;


Margen - Abreviación de las propiedades

Para acortar el código, 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;


La propiedad de margen puede tener de uno a cuatro valores.

margen: 25px 50px 75px 100px;o margen superior es de 25pxo margen derecho es 50pxo margen inferior es de 75pxo margen izquierdo es de 100px

margen: 25px 50px 75px;o margen superior es de 25pxo márgenes derecho e izquierdo son 50pxo margen inferior es de 75px

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_shorthand

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides

margen: 50px 25px;o márgenes superior e inferior son 25pxo márgenes derecho e izquierdo son 50px

margen: 25px;o los cuatro márgenes son 25px

Más ejemplos

Establece el margen superior de un texto con un valor cmEste ejemplo muestra cómo se establece el margen superior de un texto con un valor cm.

Establece el margen inferior de un texto usando un valor de porcentaje deeste ejemplo se muestra cómo se establece el margen inferior en porcentaje, respecto a la anchura del elemento que contiene.

Todas las propiedades de los márgenes CSS


margen Una propiedad abreviada para establecer las propiedades de los márgenes en una declaración

margin-bottom Establece el margen inferior de un elemento

margin-left Establece el margen izquierdo de un elemento

margin-right Establece el margen derecho de un elemento

margin-top Establece el margen superior de un elemento

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

http://www.w3schools.com/cssref/pr_margin-top.asp

http://www.w3schools.com/cssref/pr_margin-right.asp

http://www.w3schools.com/cssref/pr_margin-left.asp

http://www.w3schools.com/cssref/pr_margin-bottom.asp

http://www.w3schools.com/cssref/pr_margin.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin-bottom_percent

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin-top

El relleno superior, derecho, inferior e izquierdo se pueden cambiar independientemente el uso de propiedades separadas. Una propiedad de acolchado taquigrafía también se puede utilizar, para cambiar todos los rellenos a la vez.

Valores posibles

Valor Descripción

longitud Define un relleno fijo (en píxeles, 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;


Relleno - Abreviación de las propiedades

Para acortar el código, 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;


La propiedad padding puede tener de uno a cuatro valores.

padding: 25px 50px 75px 100px;o acolchado superior es 25pxo relleno derecho es 50pxo acolchado inferior es 75pxo margen izquierdo es 100px

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides

padding: 25px 50px 75px;o acolchado superior es 25pxo rellenos derecha e izquierda son 50pxo acolchado inferior es 75px

padding: 25px 50px;o acolchados superior e inferior son 25pxo rellenos derecha e izquierda son 50px

padding: 25px;o los cuatro rellenos son 25px

Más ejemplos

Todas las propiedades de relleno en una declaracióneste ejemplo se demuestra una propiedad abreviada para establecer todas las propiedades de relleno en una declaración, pueden tener de uno a cuatro valores.

Ajuste el margen izquierdoEn este ejemplo se muestra cómo establecer el margen izquierdo del elemento PA.

Ajuste el margen derechode este ejemplo se muestra cómo establecer el margen derecho del elemento ap.

Establezca el relleno superiorEn este ejemplo se muestra cómo establecer el relleno superior de elemento PA.

Ajuste el margen inferiorEste ejemplo muestra cómo establecer el margen inferior del elemento ap.

Todas las propiedades de relleno de CSS


relleno Una propiedad abreviada para establecer las propiedades de relleno en una declaración

padding-bottom Establece el margen inferior de un elemento

padding-left Establece el margen izquierdo de un elemento

padding-right Establece el margen derecho de un elemento

http://www.w3schools.com/cssref/pr_padding-right.asp

http://www.w3schools.com/cssref/pr_padding-left.asp

http://www.w3schools.com/cssref/pr_padding-bottom.asp

http://www.w3schools.com/cssref/pr_padding.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-bottom

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-top

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-right

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-left

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding

padding-top Define el relleno superior de un elemento

CSS Agrupación y jerarquización Selectors

Selectores Agrupación

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 mínimo el código, puede selectores de grupo.

Separe cada selector con una coma.

En el siguiente ejemplo hemos agrupado los selectores en el código anterior:

Ejemplo

h1,h2,p{color:green;}


Selectores de anidación

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 sólo para elementos p dentro de los elementos con class = "marcados":

Ejemplo

p{color:blue;

http://www.w3schools.com/css/tryit.asp?filename=trycss_grouping

http://www.w3schools.com/cssref/pr_padding-top.asp

text-align:center;}.marked{background-color:red;}.marked p{color:white;}


CSS DimensionLas propiedades de la dimensión de CSS permite controlar la altura y la anchura de un elemento.

Inténtelo usted mismo - Ejemplos

Ajuste la altura de los elementos deeste ejemplo se muestra cómo establecer la altura de los diferentes elementos.

Ajuste la altura de una imagen utilizando por cientoeste ejemplo se muestra cómo establecer el alto de un elemento con un valor porcentual.

Ajuste el ancho de un elemento con un valor de píxelesEste ejemplo muestra cómo establecer el ancho de un elemento con un valor de píxel.

Ajuste de la altura máxima de un elemento deeste ejemplo se muestra cómo establecer la altura máxima de un elemento.

Ajuste la anchura máxima de un elemento utilizando por cientoeste ejemplo se muestra cómo establecer la anchura máxima de un elemento mediante un valor porcentual.

Ajuste la altura mínima de un elementoEn este ejemplo se muestra cómo establecer la altura mínima de un elemento.

Ajuste el ancho mínimo de un elemento con un valor de píxelesEste ejemplo muestra cómo establecer la anchura mínima de un elemento con un valor de píxel.

Todas las propiedades de dimensiones CSS


http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_min-width

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_min-height

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-width_percent

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-height

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_width

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height

http://www.w3schools.com/css/tryit.asp?filename=trycss_nesting


altura Establece el alto de un elemento auto longitud %heredar

1

max-height Establece la altura máxima de un elemento ninguno longitud% heredar 2

max-width Define la anchura máxima de un elemento ninguno longitud% heredar 2

min-height Establece la altura mínima de un elemento longitud %heredar

2

min-width Establece el ancho mínimo de un elemento longitud %heredar

2

ancho Establece el ancho de un elemento auto longitud %heredar

1

CSS Display y VisibilidadLa 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

http://www.w3schools.com/cssref/pr_dim_width.asp

http://www.w3schools.com/cssref/pr_dim_min-width.asp

http://www.w3schools.com/cssref/pr_dim_min-height.asp

http://www.w3schools.com/cssref/pr_dim_max-width.asp

http://www.w3schools.com/cssref/pr_dim_max-height.asp

http://www.w3schools.com/cssref/pr_dim_height.asp

Cómo ocultar un elemento - display: none o visibility: hidden

Cómo 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 métodos producen resultados diferentes:

visibilidad: Oculta un elemento, pero todavía ocupan el mismo espacio que antes. El elemento se oculta, pero todavía afectan al diseño.

Ejemplo

h1.hidden {visibility:hidden;}


display: none esconde un elemento, y no ocupa espacio. El elemento se oculta, y la página se mostrará como si el elemento no está ahí:

Ejemplo

h1.hidden {display:none;}


CSS Display - Block y elementos en línea

Un elemento de bloque es un elemento que ocupa todo el ancho disponible completo, y tiene un salto de línea antes y después de ella.

Ejemplos de elementos de bloque:

<h1> <p> <div>

Un elemento en línea sólo ocupa el mismo ancho que sea necesario, y no forzar saltos de línea.

Ejemplos de elementos en línea:

<span> <a>

Cambiar la forma de un elemento se muestra

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

http://www.w3schools.com/css/tryit.asp?filename=trycss_visibility_hidden

Cambio de un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer la página se vea de una manera específica, y todavía siguen los estándares web.

El ejemplo siguiente muestra los elementos de lista como elementos en línea:

Ejemplo

li {display:inline;}


El siguiente ejemplo muestra abarcan elementos como elementos de bloque:

Ejemplo

span {display:block;}


Nota: No cambiar el tipo de visualización de un elemento cambia sólo cómo el elemento en la pantalla, el tipo de elemento que es. Por ejemplo: Un elemento en línea establecida en display: block no se le permite tener un elemento de bloque anidado dentro de él.

Más ejemplos

Cómo mostrar un elemento como un elemento en línea.Este ejemplo muestra cómo mostrar un elemento como un elemento en línea.

Cómo mostrar un elemento como un elemento de bloqueEn este ejemplo se muestra cómo mostrar un elemento como un elemento de bloque.

Cómo hacer que un colapso del elemento de tablaEste ejemplo muestra cómo 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. También se puede colocar un elemento detrás de otro, y especificar qué debe ocurrir cuando el contenido de un elemento es demasiado grande.

http://www.w3schools.com/css/tryit.asp?filename=trycss_visibility_collapse

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_block

http://www.w3schools.com/css/tryit.asp?filename=trycss_display

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_block2

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list

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. También funcionan de forma diferente dependiendo del método de posicionamiento.

Hay cuatro métodos de posicionamiento diferentes.

Posicionamiento estático

Elementos HTML estático se colocan de forma predeterminada. Un elemento estático posicionado siempre se coloca de acuerdo con el flujo normal de la página.

Estáticas elementos posicionados no se ven afectados por la parte superior, inferior, izquierdo y propiedades adecuadas.

Posicionamiento fijo

Un elemento con posición fija está situado con relación a la ventana del navegador.

No se moverá incluso si la ventana se desplaza:

Ejemplo

p.pos_fixed{position:fixed;top:30px;right:5px;}


Nota: IE7 e IE8 compatible con el valor fijo sólo 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 relación a su posición normal.

Ejemplo

h2.pos_left{position:relative;left:-20px;

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

}h2.pos_right{position:relative;left:20px;}


El contenido de elementos en posición relativa puede ser movido y se superponen otros elementos, pero el espacio reservado para el elemento se conserva aún en el flujo normal.

Ejemplo

h2.pos_top{position:relative;top:-50px;}


Elementos en posición relativa a menudo se utilizan como bloques de contenedores para los elementos con posición absoluta.

Posicionamiento absoluto

Un elemento posición absoluta está situado con relación al elemento padre primero que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contención es <html>:

Ejemplo

h2{position:absolute;left:100px;top:150px;}


Elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como el elemento con posición absoluta no existe.

Elementos con posición absoluta se pueden superponer otros elementos.

Elementos superpuestos

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative2

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

Cuando los elementos están 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 detrás 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;}


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 código HTML se mostrará en la parte superior.

Más ejemplos

Establecer la forma de un elementoEn este ejemplo se muestra cómo establecer la forma de un elemento. El elemento está recortado en esta forma, y se muestra.

¿Cómo mostrar desbordamiento en un elemento mediante desplazamientoEn este ejemplo se muestra cómo 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.

Cómo configurar el navegador para manejar automáticamente desbordamientoEste ejemplo muestra cómo configurar el navegador para manejar automáticamente desbordamiento.

Cambiar el cursorEn este ejemplo se muestra cómo cambiar el cursor.

Todas las propiedades de posición CSS


http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor

http://www.w3schools.com/css/tryit.asp?filename=trycss_pos_overflow_auto

http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow

http://www.w3schools.com/css/tryit.asp?filename=trycss_clip

http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex


fondo Define el borde del margen inferior de una caja posicionada

auto longitud % heredar 2

cortar Clips de un elemento con posición absoluta formaautomática heredar

2

cursor Especifica el tipo de cursor que se mostrará urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp

2

izquierda Establece el margen izquierdo de una caja posicionada


desbordarse Establece lo que sucede si se desborda contenido de cuadros de un elemento

auto oculto desplazamiento visible heredar

2

posición Especifica el tipo de posicionamiento para un elemento

absoluto fijo con relación estática heredar

2

derecho Establece el borde del margen derecho de una caja posicionada


top Define el borde del margen superior de una caja posicionada


z-index Establece el orden de apilamiento de un elemento

númerode automóviles heredar

2

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://www.w3schools.com/cssref/pr_pos_top.asp

http://www.w3schools.com/cssref/pr_pos_right.asp

http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/cssref/pr_pos_overflow.asp

http://www.w3schools.com/cssref/pr_pos_left.asp

http://www.w3schools.com/cssref/pr_class_cursor.asp

http://www.w3schools.com/cssref/pr_pos_clip.asp

http://www.w3schools.com/cssref/pr_pos_bottom.asp

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 imágenes, pero también es útil cuando se trabaja con diseños.

¿Qué elementos de flotación

Los elementos están flotando en horizontal, esto significa que un elemento sólo 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 después 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;}


Elementos flotantes lado de la otra

Si coloca varios elementos flotantes después de la otra, que flotará lado de la otra si hay espacio.

Aquí hemos hecho una galería de imágenes utilizando la propiedad float:

Ejemplo

.thumbnail {float:left;width:110px;height:90px;margin:5px;}


Desactivación Float - Uso Clear

Elementos después 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 demás elementos no están permitidos.

Agregar una línea de texto en la galería de imágenes, utilizando la propiedad claros:

Ejemplo

.text_line{clear:both;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

http://www.w3schools.com/css/tryit.asp?filename=trycss_float


Más ejemplos

Una imagen con la frontera y los márgenes que flota a la derecha de un párrafoDeje un flotador de la imagen a la derecha de un párrafo. Añadir a la frontera y los márgenes de la imagen.

Una imagen con un pie de foto que flota a la derechaDeje una imagen con un flotador de texto a la derecha.

Deje que la primera letra de un flotador párrafo a la izquierdaVamos a la primera letra de un flotador párrafo a la izquierda y el estilo de la letra.

Creación de un menú horizontaldel flotador uso con una lista de hipervínculos para crear un menú horizontal.

Creación de una página web sin tablasUtilice flotador para crear una página web con un encabezado, pie de página de contenido, la izquierda y la página principal.

Todas las propiedades CSS Float



claro Especifica los lados de un elemento donde otros elementos flotantes no están permitidos

izquierda derecha ambos ninguno heredar

1

flotar Especifica si una caja debe flotar izquierda derecha no heredar

1

http://www.w3schools.com/cssref/pr_class_float.asp

http://www.w3schools.com/cssref/pr_class_clear.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_float6





http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

CSS Horizontal Alinear

En CSS, varias propiedades se utilizan para alinear elementos horizontalmente.

Alineación de elementos de bloque

Un elemento de bloque es un elemento que ocupa todo el ancho disponible completo, y tiene un salto de línea antes y después de ella.

Ejemplos de elementos de bloque:

<h1> <p> <div>

Para alinear texto, véase el texto CSS capítulo.

En este capítulo le mostraremos cómo alinear horizontalmente los elementos de bloque para fines de diseño.

Centro de Alineación Utilizar la propiedad margen

Los elementos de bloque se pueden alinear ajustando los márgenes 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 márgenes 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;}


Consejo: Alinear no tiene efecto si el ancho es de 100%.

Nota: En IE5 hay un error de manipulación margen para elementos de bloque. Para que el ejemplo anterior trabajo en IE5, añadir algo de código adicional. Inténtelo usted mismo

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container_ie5

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

http://www.w3schools.com/css/css_text.asp

Izquierda y Derecha Alinear Utilizar la propiedad posición

Un método para alinear elementos es utilizar el posicionamiento absoluto:

Ejemplo

.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}


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 declaración! DOCTYPE falta, versiones de IE8 y anteriores se añadirá un margen 17px a la derecha.Este parece ser el espacio reservado para una barra de desplazamiento. Coloque siempre la declaración 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;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_pos


Izquierda y Derecha Alinear Utilizar la propiedad float

Un método para alinear elementos es utilizar la propiedad float:

Ejemplo

.right{float:right;width:300px;background-color:#b0e0e6;}


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 declaración! DOCTYPE falta, IE8 versiones anteriores y se añade un margen de 17px en el lado derecho. Este parece ser el espacio reservado para una barra de desplazamiento. Coloque siempre la declaración DOCTYPE al utilizar la propiedad float:

Ejemplo

body{margin:0;padding:0;}.right{float:right;width:300px;background-color:#b0e0e6;}


http://www.w3schools.com/css/tryit.asp?filename=trycss_align_float_crossbrowser

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_float

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_pos_crossbrowser

CSS pseudo-clasesCSS pseudo-clases se utilizan para añadir efectos especiales a algunos selectores.

Sintaxis

La sintaxis de pseudo-clases:

selector:pseudo-class {property:value;}

Clases CSS también 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 */


Nota: a: hover debe ir después a: link y: visited en la definición CSS con el fin de ser eficaces!

Nota: a: active debe venir después de un: hover en la definición CSS con el fin de ser eficaces!

Nota: Pseudo-clase nombres no distinguen entre mayúsculas y minúsculas.

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.

http://www.w3schools.com/css/tryit.asp?filename=trycss_link

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>


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>

http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1

http://www.w3schools.com/tags/tag_doctype.asp

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


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>


CSS - The: lang Pseudo-clase

El: lang pseudo-clase permite definir reglas especiales para diferentes idiomas.

Nota: IE8 soporta el: lang pseudo-clase sólo si <DOCTYPE!> se especifica.

En el siguiente ejemplo, el: lang clase define las comillas para los elementos de Q con lang = "no":

Ejemplo

http://www.w3schools.com/tags/tag_doctype.asp



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


Más ejemplos

Añadir estilos a hipervínculosEn este ejemplo se muestra cómo agregar otros estilos a hipervínculos.

Uso de: centrarseEste ejemplo muestra cómo utilizar el: enfoque pseudo-clase.

Todas las pseudo-clases CSS / elementos

Selector Ejemplo Ejemplo de descripción

: Link a:link Selecciona todos los enlaces no visitados

: Visited a:visited Selecciona todos los enlaces visitados

: Activo a:active Selecciona el enlace activo

: Hover a:hover Selecciona enlaces ratón sobre

: Centrarse input:focus Selecciona el elemento que tiene el foco de entrada

: First-letter p:first-letter Selecciona la primera letra de cada elemento <p>

: First-line p:first-line Selecciona la primera línea de cada elemento <p>

: First-child p:first-child Selecciona cada <p> elementos que es el primer hijo de su

http://www.w3schools.com/cssref/sel_firstchild.asp

http://www.w3schools.com/cssref/sel_firstline.asp

http://www.w3schools.com/cssref/sel_firstletter.asp

http://www.w3schools.com/cssref/sel_focus.asp

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/sel_active.asp

http://www.w3schools.com/cssref/sel_visited.asp

http://www.w3schools.com/cssref/sel_link.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_focus

http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

http://www.w3schools.com/css/tryit.asp?filename=trycss_lang

padre

: Antes p:before Insertar contenido antes de cada elemento <p>

: Después de p:after Insertar contenido después de cada elemento <p>

: Lang ( idioma ) p:lang(it) Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso"

CSS pseudo-elementosCSS pseudo-elementos se utilizan para añadir efectos especiales a algunos selectores.

Sintaxis

La sintaxis de los pseudo-elementos:

selector:pseudo-element {property:value;}

Clases CSS también se puede utilizar con los pseudo-elementos:

selector.class:pseudo-element {property:value;}

: First-line Pseudo-elementos

La "primera línea" pseudo-elemento se utiliza para agregar un estilo especial a la primera línea de un texto.

En el siguiente ejemplo el navegador formatos de la primera línea de texto en un elemento de AP de acuerdo con el estilo de la "primera línea" pseudo-elemento (donde el navegador rompe la línea, depende del tamaño de la ventana del navegador):

Ejemplo

p:first-line {color:#ff0000;font-variant:small-caps;}


Nota: La "primera línea" pseudo-elemento sólo se puede utilizar con los elementos a nivel de bloque.

Nota: Las siguientes propiedades se aplican a la "primera línea" pseudo-elemento:

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline

http://www.w3schools.com/cssref/sel_lang.asp

http://www.w3schools.com/cssref/sel_after.asp

http://www.w3schools.com/cssref/sel_before.asp

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


Nota: La "primera carta" pseudo-elemento sólo 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 márgenes propiedades de relleno propiedades de borde text-decoration vertical-align (sólo 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>

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstletter

El ejemplo anterior muestra la primera letra de todos los párrafos con class = "artículo", en rojo.

Múltiples pseudo-elementos

Varios pseudo-elementos también se pueden combinar.

En el siguiente ejemplo, la primera letra de un párrafo será de color rojo, en un tamaño de letra extra grande. El resto de la primera línea será de color azul, y en pequeñas cápsulas. El resto del párrafo será el tamaño 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;}


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


CSS - The: después de pseudo-elemento

http://www.w3schools.com/css/tryit.asp?filename=trycss_before

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline_letter

El ": después de" pseudo-elemento se puede utilizar para insertar un cierto contenido después de que el contenido de un elemento.

El ejemplo siguiente inserta una imagen después de cada elemento h1:

Ejemplo

h1:after{content:url(smiley.gif);}


Todas las pseudo-clases CSS / elementos

Selector Ejemplo Ejemplo de descripción

: Link a:link Selecciona todos los enlaces no visitados

: Visited a:visited Selecciona todos los enlaces visitados

: Activo a:active Selecciona el enlace activo

: Hover a:hover Selecciona enlaces ratón sobre

: Centrarse input:focus Selecciona el elemento que tiene el foco de entrada

: First-letter p:first-letter Selecciona la primera letra de cada elemento <p>

: First-line p:first-line Selecciona la primera línea de cada elemento <p>

: First-child p:first-child Selecciona cada <p> elementos que es el primer hijo de su padre

: Antes p:before Insertar contenido antes de cada elemento <p>

: Después de p:after Insertar contenido después de cada elemento <p>

: Lang ( idioma ) p:lang(it) Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso"

Navigation Bar

Demostración: Navigation Bar

CASA NOTICIAS

http://www.w3schools.com/css/css_navbar.asp


http://www.w3schools.com/cssref/sel_lang.asp

http://www.w3schools.com/cssref/sel_after.asp

http://www.w3schools.com/cssref/sel_before.asp

http://www.w3schools.com/cssref/sel_firstchild.asp

http://www.w3schools.com/cssref/sel_firstline.asp

http://www.w3schools.com/cssref/sel_firstletter.asp

http://www.w3schools.com/cssref/sel_focus.asp

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/sel_active.asp

http://www.w3schools.com/cssref/sel_visited.asp

http://www.w3schools.com/cssref/sel_link.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_after

ARTÍCULOS FORO CONTACTO SOBRE

Barras de navegación

Tener fácil de utilizar la navegación es importante para cualquier sitio web.

Con CSS se puede transformar aburridos menús HTML en barras de navegación guapos.

Navigation Bar = Lista de Enlaces

Una barra de navegación necesita HTML estándar como base.

En nuestro ejemplo vamos a construir la barra de navegación de una lista HTML estándar.

Una barra de navegación es básicamente una lista de enlaces, así que usar el <ul> y elementos <li> tiene mucho sentido:

Ejemplo

<ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a></li><li><a href="contact.asp">Contact</a></li><li><a href="about.asp">About</a></li></ul>


Ahora vamos a quitar las balas y los márgenes y el relleno de la lista:

Ejemplo

ul{list-style-type:none;margin:0;padding:0;}


Ejemplo explicó:

list-style-type: none - Elimina las balas. Una barra de navegación no necesita marcadores de lista

Ajuste de márgenes y el relleno a 0 para eliminar la configuración del navegador por defecto

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_css

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_html





El código en el ejemplo anterior es el código estándar que se utiliza en las dos barras de navegación vertical y horizontal.

Vertical barra de navegación

Para crear una barra de navegación vertical, sólo tenemos que el estilo de los elementos <a>, además del código anterior:

Ejemplo

a{display:block;width:60px;}


Ejemplo explicó:

display: block - Visualización de los enlaces como elementos de bloque hace que el área entera vínculo clickable (no sólo 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 píxeles

Sugerencia: También echa un vistazo a nuestro estilo completamente ejemplo una barra vertical de navegación .

Nota: Especifique siempre el ancho de los elementos <a> en una barra de navegación vertical. Si se omite el ancho, IE6 puede producir resultados inesperados.

Horizontal Barra de Navegación

Hay dos formas de crear una barra de navegación horizontal. El uso en línea o flotante elementos de la lista.

Ambos métodos funcionan muy bien, pero si quieres que los enlaces sean del mismo tamaño, usted tiene que utilizar el método de flotación.

Artículos Inline Lista

Una forma de crear una barra de navegación horizontal es especificar los elementos <li> como en línea, además de la "norma" el código de seguridad:

Ejemplo

li{display:inline;}

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical


Ejemplo explicó:

display: inline; - De forma predeterminada, los elementos <li> son elementos de bloque. En este sentido, eliminar los saltos de línea antes y después de cada elemento de la lista, para mostrar en una sola línea

Sugerencia: También echa un vistazo a nuestro estilo completamente ejemplo barra de navegación horizontal .

Elementos flotantes Lista

En el ejemplo anterior los enlaces tienen anchuras diferentes.

Para todos los vínculos 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;}


Ejemplo explicó:

float: left - el uso del flotador para obtener los elementos de bloque se deslice al lado del otro

display: block - Visualización de los enlaces como elementos de bloque hace que el área entera vínculo clickable (no sólo 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: También echa un vistazo a nuestro estilo completamente ejemplo barra de navegación horizontal .

CSS Galería de imágenesCSS se puede utilizar para crear una galería de imágenes.

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_advanced

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal

Añada una descripción de la imagen aquí




Galería de imágenes

La galería de imágenes 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 {

http://www.w3schools.com/css/klematis_big.htm

http://www.w3schools.com/css/klematis2_big.htm



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>


http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery

CSS Image Opacidad / TransparenciaCreación de imágenes transparentes con CSS es fácil.

Nota: La propiedad de opacidad CSS es una parte de la recomendación W3C CSS 3.

Inténtelo usted mismo - Ejemplos

Creación de imágenes transparentes - Pase efecto

Creación de una caja transparente con el texto en una imagen de fondo

Ejemplo 1 - Creación de una imagen transparente

La propiedad CSS3 de transparencia es la opacidad .

Primero le mostraremos cómo 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 */}

http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

http://www.w3schools.com/css/tryit.asp?filename=trycss_image_transparency

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 más bajo hace que el elemento más transparente.

IE8 y anteriores usan filtro: alfa (opacidad = x) . La x puede tomar un valor entre 0 - 100. Un valor más bajo hace que el elemento más transparente.

Ejemplo 2 - Transparencia de imagen - Efecto Hover

Pase el ratón sobre las imágenes:

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 código en el Ejemplo 1. Además, hemos añadido lo que debería ocurrir cuando un usuario coloque el cursor sobre una de las imágenes. 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 ratón 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 código 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 is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</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 más pequeño (class = "transbox") dentro del elemento div en primer lugar. El "transbox" div tiene un ancho fijo, un color de fondo, y una frontera - y es transparente. En el interior del div transparente, añadimos un poco de texto dentro del elemento PA.

CSS Sprites Imagen

Sprites de imagen

Un sprite de imagen es una colección de imágenes puestas en una sola imagen.

Una página web con muchas imágenes puede tardar mucho tiempo para cargar y genera múltiples peticiones del servidor.

Uso de sprites imagen se reducirá el número de solicitudes de servidor y ahorrar ancho de banda.

Sprites Imagen - Ejemplo simple

En lugar de utilizar tres imágenes diferentes, utilizamos esta sola imagen ("img_navsprites.gif"):

Con CSS, podemos mostrar sólo 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;}


Ejemplo explicó:

<img class="home" src="img_trans.gif" /> - Sólo define una pequeña imagen transparente porque el atributo src no puede estar vacío. 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 posición

(izquierda 0px, top 0px)

Esta es la forma más fácil de usar sprites imagen, ahora queremos ampliar mediante el uso de enlaces y se ciernen efectos.

Sprites de imagen - Crear una lista de navegación

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img

Queremos utilizar la imagen de sprite ("img_navsprites.gif") para crear una lista de navegación.

Vamos a utilizar una lista de HTML, ya que puede ser un enlace y también es compatible con una imagen de fondo:

Ejemplo

#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style: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;}


Ejemplo explicó:

# Navlist {position: relative;} - posición se ajusta en relación 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 están posicionados absoluta

# Navlist li, # navlist un {height: 44px; display: block;} - la altura de todas las imágenes son 44px

Ahora empieza a la posición y el estilo para cada parte específica:

# 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 posición (izquierda 0px, top 0px)

# Prev {left: 63px; anchura: 43px;} - Posicionado 63px a la derecha (# casa 46px ancho + algo más 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 línea de 1 píxel)

# Próximo {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.

# Próximo {background: url ('img_navsprites.gif') no-repeat-91px 0;} - Define la imagen de fondo 91px a la derecha (# casa 46px ancho + divisor de línea 1px + # prev ancho 43px + divisor de línea de 1 píxel)

Sprites de imagen - Efecto Hover

Ahora queremos añadir un efecto hover en nuestra lista de navegación.

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y las imágenes de tres a utilizar para efectos hover:

Como se trata de una sola imagen, y no seis archivos separados, no habrá ningún retardo en la carga cuando un usuario pasa sobre la imagen.

Sólo añadir tres líneas de código 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;}


Ejemplo explicó:

Dado que el elemento de la lista contiene un enlace, podemos usar el: hover pseudo-clase

# La casa de un: hover {background: url transparente (img_navsprites_hover.gif) 0-45px;} - Para las tres imágenes libración se especifica la posición del fondo mismo, sólo que más abajo 45px

CSS Tipos de MediosCon los tipos de medios de comunicación una página puede tener un diseño de pantalla, uno para la impresión, una para dispositivos de mano, etc

Tipos de Medios

Algunas propiedades CSS sólo están diseñados para un medio de comunicación determinados. Por ejemplo, el "voice-family" propiedad está diseñada para aplicaciones de usuario auditivas. Algunas otras propiedades se pueden utilizar para diferentes tipos de medios. Por ejemplo, el "tamaño de fuente" propiedad se puede utilizar tanto para la pantalla y los medios impresos, pero quizás con diferentes valores. Un documento que por lo general tiene un mayor tamaño de letra en una pantalla que en papel, y sans-serif son más fáciles de leer en la pantalla, mientras que las fuentes serif son más fáciles de leer en papel.

La regla @ media

La regla @ media permite diferentes reglas de estilo para los medios de comunicación diferentes en la misma hoja de estilo.

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

El estilo en el ejemplo a continuación le indica al navegador que muestre un tipo de letra Verdana 14 píxeles en la pantalla. Pero si la página 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>

Véalo usted mismo! Imprimir esta página (o Vista preliminar abierta), y se verá que el párrafo bajo "Tipos de soportes" en la pantalla de otra fuente, y tienen un tamaño de letra más pequeño que el resto del texto.

Otros tipos de medios

Nota: Los nombres de los tipos de medios no distinguen entre mayúsculas y minúsculas.

Tipo de soporte Descripción

todos Se utiliza para todos los dispositivos de tipo de medios de comunicación

auditivo Se utiliza para voz y sintetizadores de sonido

braille Se utiliza para dispositivos táctiles en Braille

relieve Se utiliza para impresoras braille paginados

handheld Se utiliza para pequeños dispositivos de mano o

imprimir Se utiliza para impresoras

proyección Usado para presentaciones como diapositivas proyectadas,

pantalla Se utiliza para pantallas de ordenador

tty Se utiliza para los medios de comunicación utilizando una cuadrícula de caracteres de ancho fijo, como teletipos y terminales

TV Se utiliza para dispositivos tipo televisión

CSS atributo selectores

Estilo elementos HTML con atributos específicos

Es posible estilo elementos HTML con atributos específicos, no sólo de clase e id.

Nota: IE7 y IE8 selectores de atributos de apoyo sólo si se especifica un DOCTYPE!. Selección de atributos se NO se admite en IE6 e inferiores.

Características del Selector

En el ejemplo de abajo estilos todos los elementos con un atributo title:

Ejemplo

[title]{color:blue;}


Atributo y Valor Selector

En el ejemplo de abajo estilos todos los elementos con W3Schools title = "":

Ejemplo

[title=W3Schools]{border:5px solid green;}


Selector de atributo y valor - Varios Valores

En el ejemplo de abajo estilos todos los elementos con un atributo de título que contiene un valor especificado. Esto funciona incluso si el atributo tiene valores separados por espacios:

Ejemplo

[title~=hello] { color:blue; }


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 guión (-) valores separados:

http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_valuelist_space

http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value

http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_att

Ejemplo

[lang|=en] { color:blue; }


Formas de peluquería

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


Usted ha aprendido CSS, ¿y ahora qué?

CSS Resumen

Este tutorial te ha enseñado cómo crear hojas de estilo para controlar el estilo y el diseño de sitios web múltiples a la vez.

Ha aprendido a utilizar CSS para agregar fondos, textos, añadir formato y bordes formato y especificar el relleno y los márgenes de los elementos.

También ha aprendido cómo colocar un elemento, controlar la visibilidad y el tamaño de un elemento, establecer la forma de un elemento, coloque un elemento detrás de otro, y para añadir efectos especiales a algunos selectores, como enlaces.

Para obtener más información acerca de CSS, por favor vaya a ejemplos de CSS , CSS referencia ytutoriales CSS3 .

http://www.w3schools.com/css3/default.asp

http://www.w3schools.com/cssref/default.asp

http://www.w3schools.com/cssref/default.asp

http://www.w3schools.com/css/css_examples.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_form

http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_valuelist_hyphen

CSS3 IntroducciónCSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que cambiar los diseños existentes. Los navegadores siempre apoyará CSS2.

Módulos de CSS3

CSS3 se divide en "módulos". La especificación anterior se ha dividido en partes más pequeñas, y los nuevos se añaden también.

Algunos de los más importantes módulos de CSS3 son:

Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseño de columna múltiple Interfaz de usuario

CSS3 Recomendación

La especificación CSS3 está todavía 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, añadir sombra a las cajas, y utilizar una imagen como frontera - sin necesidad de utilizar un programa de diseño, como Photoshop.

En este capítulo usted aprenderá sobre las propiedades de borde siguientes:

border-radius box-shadow border-image


Propiedad


border-radius

box-shadow

border-image

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

Adición de esquinas redondeadas en CSS2 era difícil. Tuvimos que usar diferentes imágenes para cada esquina.

En CSS3, crear esquinas redondeadas es fácil.

En CSS3, la propiedad border-radius se utiliza para crear las esquinas redondeadas:

Esta caja tiene las esquinas redondeadas!

Ejemplo

Añadir esquinas redondeadas a un elemento div:

div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}


CSS3 Shadow Box

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-radius

En CSS3, la propiedad box-shadow se utiliza para agregar sombra a las cajas:

Ejemplo

Añadir un box-shadow a un elemento div:

div{box-shadow: 10px 10px 5px #888888;}


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


http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-image

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_box-shadow

Nuevas propiedades Frontera

Propiedad Descripción CSS

border-image Una propiedad abreviada para establecer todas las imágenes de fronteras-* propiedades

3

border-radius Una propiedad abreviada para establecer las cuatro border-radius *-propiedades

3

box-shadow Se conecta una o más de abandono sombras a la caja 3

CSS3 Fondos

CSS3 Fondos

CSS3 contiene varias propiedades de fondo nuevos, que permiten un mayor control del elemento de fondo.

En este capítulo usted aprenderá sobre las propiedades siguientes antecedentes:

background-size fondo de origen

Usted también aprenderá cómo utilizar varias imágenes de fondo.


Propiedad Compatibilidad con exploradores

background-size

fondo de origen

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.

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

http://www.w3schools.com/cssref/css3_pr_border-image.asp

CSS3 La propiedad background-size

La propiedad background-size especifica el tamaño de la imagen de fondo.

Antes de CSS3, el tamaño de la imagen de fondo se determina por el tamaño real de la imagen. En CSS3 es posible especificar el tamaño de la imagen de fondo, lo que nos permite volver a usar imágenes de fondo en diferentes contextos.

Se puede especificar el tamaño en píxeles o en porcentajes. Si se especifica el tamaño como un porcentaje, el tamaño es relativo a la anchura y la altura del elemento padre.

Ejemplo 1

Cambiar el tamaño 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;}


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


CSS3 La propiedad background-origen

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-size2

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-size

La propiedad background-origen especifica el área de posicionamiento de las imágenes 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;}


CSS3 múltiples imágenes de fondoCSS3 permite el uso de varias imágenes de fondo de un elemento.

Ejemplo

Coloque dos imágenes de fondo para el elemento de cuerpo:

body{ background-image:url(img_flwr.gif),url(img_tree.gif);}

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-origin


Nuevas Propiedades de fondo


fondo-clip Especifica el área de la pintura de las imágenes de fondo 3

fondo de origen Especifica el área de posicionamiento de las imágenes de fondo 3

background-size Especifica el tamaño de las imágenes de fondo 3

CSS3 Text EffectsEfectos de texto CSS3

CSS3 contiene varias funciones de texto nuevos.

En este capítulo usted aprenderá acerca de las propiedades de texto siguientes:

text-shadow

word-wrap


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.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

http://www.w3schools.com/cssref/css3_pr_background-origin.asp

http://www.w3schools.com/cssref/css3_pr_background-clip.asp

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background_multiple

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 Description CS

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_word-wrap

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_text-shadow_tut

S

hanging-punctuation Specifies whether a punctuation character may be placed outside the line box

3

punctuation-trim Specifies whether a punctuation character should be trimmed 3

text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

3

text-emphasis Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text

3

text-justify Specifies the justification method used when text-align is "justify" 3

text-outline Specifies a text outline 3

text-overflow Specifies what should happen when text overflows the containing element

3

text-shadow Adds shadow to text 3

text-wrap Specifies line breaking rules for text 3

word-break Specifies line breaking rules for non-CJK scripts 3

word-wrap Allows long, unbreakable words to be broken and wrap to the next line

3

CSS3 Fuentes

El CSS3 @ font-face Regla

Antes de CSS3, diseñadores de páginas web que usar fuentes que ya estaban instalados en el ordenador del usuario.

Con CSS3, los diseñadores 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á automáticamente al usuario cuando sea necesario.

Sus "propias" fuentes están definidas en el CSS3 @ font-face regla.

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

http://www.w3schools.com/cssref/css3_pr_word-break.asp

http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

http://www.w3schools.com/cssref/css3_pr_text-outline.asp

http://www.w3schools.com/cssref/css3_pr_text-justify.asp

http://www.w3schools.com/cssref/css3_pr_text-emphasis.asp

http://www.w3schools.com/cssref/css3_pr_punctuation-trim.asp

http://www.w3schools.com/cssref/css3_pr_hanging-punctuation.asp


Propiedad


@ Font-face

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 sólo 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 continuación, seleccione el archivo de fuente.

Para utilizar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través 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>


Cómo utilizar texto en negrita

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_font-face_rule

Debe añadir 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;}


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 Valores Descripción

font-family nombre Obligatorio. Define un nombre para la fuente

src URL Obligatorio. Define la dirección URL del archivo de la fuente

font-stretch normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded

Opcional. Define el tipo de letra debe ser estirado. El valor predeterminado es "normal"

font-style normal, cursiva oblicua

Opcional. Define el tipo de letra debe ser de estilo. El valor predeterminado es "normal"

font-weight normal, Opcional. Define la audacia de la fuente. El valor

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_font-face_rule_bold

negrita 100 200 300 400 500 600 700 800 900

predeterminado es "normal"

unicode-range 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 transformación, podemos mover, escalar, girar, girar, y los elementos elásticos.

¿Cómo funciona?

Una transformación es un efecto que permite un cambio de elemento de forma, tamaño y posición.

Usted puede transformar sus elementos mediante la transformación 2D o 3D.



transformar

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 capítulo usted aprenderá acerca de los métodos de transformación 2D:

translate () rotate () scale () skew () matriz ()

Usted aprenderá acerca de las transformaciones 3D en el próximo capítulo.

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


El método translate ()

Con el método translate (), se mueve el elemento a partir de su posición actual, en función de los parámetros dados por la izquierda (eje X) y la posición 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 */

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform1

-moz-transform: translate(50px,100px); /* Firefox */}


El valor translate (50px, 100px) mueve el elemento 50 píxeles desde la izquierda, y 100 píxeles desde la parte superior.

El método rotate ()

Con el método 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 */}


El valor rotate (30deg) hace girar el elemento hacia la derecha 30 grados.

El método scale ()

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_rotate

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_translate

Con el método de escala (), el elemento aumenta o disminuye el tamaño, en función de los parámetros 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 */}


La escala de valor (2,4) transforma el ancho a ser el doble de su tamaño original, y la altura de 4 veces su tamaño original.

El método skew ()

Con el método de inclinación (), el elemento se convierte en un ángulo dado, en función de los parámetros dados por la horizontal (eje X) y el eje vertical (eje y) líneas:

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


El valor de sesgo (30deg, 20deg) gira el elemento 30 grados alrededor del eje X, y 20 grados alrededor del eje Y.

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_skew

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_scale

La matriz () Método

La matriz () método combina todos los métodos de transformación 2D en una sola.

El método matricial tomar seis parámetros, que contiene funciones matemáticas, lo que le permite: rotar, escalar, mover (trasladar), y elementos de inclinación.

Ejemplo

Cómo rotar un elemento div 30 grados, utilizando el método 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 */}


Nuevas propiedades de transformación

En la tabla siguiente se enumeran todas las propiedades de transformación:


transformar Aplica una transformación 2D o 3D a un elemento 3

transformar de origen Le permite cambiar la posición de los elementos transformados 3

Transformar los métodos 2D

http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

http://www.w3schools.com/cssref/css3_pr_transform.asp

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_matrix1

Función Descripción

matriz ( n, n, n, n, n, n )

Define una transformación 2D, utilizando una matriz de seis valores

traducir ( x, y ) Define una traducción 2D, mover el elemento a lo largo de la X y el eje Y

translateX ( n ) Define una traducción 2D, mover el elemento a lo largo del eje X

TranslateY ( n ) Define una traducción 2D, mover el elemento a lo largo del eje Y

escala ( x, y ) Define una transformación de escala en 2D, cambiando el ancho y la altura de los elementos

scaleX ( n ) Define una transformación de escala en 2D, el cambio de ancho del elemento

scaleY ( n ) Define una transformación de escala en 2D, el cambio de la altura del elemento

rotar ( ángulo ) Define una rotación 2D, el ángulo se especifica en el parámetro

de inclinación ( x-ángulo, y-ángulo )

Define una transformación 2D de inclinación a lo largo de la X y el eje Y

skewX ( ángulo ) Define una transformación 2D sesgado a lo largo del eje X

skewY ( ángulo ) Define una transformación 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 capítulo usted aprenderá sobre algunos de los métodos de transformación 3D:

RotateX () rotateY ()

Haga clic en los elementos de abajo, para ver la diferencia entre una transformación 2D y transformar a 3D:

2D rotate

3D rotate



transformar

Internet Explorer y Opera aún no soporta transformaciones 3D (Se admiten sólo las transformaciones 2D ).



El RotateX () Método

Con el método 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 */}


El rotateY () Método

Con el método de rotateY (), el elemento gira alrededor de su eje en un grado dado.

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_rotateX

http://www.w3schools.com/css3/css3_2dtransforms.asp

http://www.w3schools.com/css3/css3_2dtransforms.asp

Ejemplo

div{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */-moz-transform: rotateY(130deg); /* Firefox */}


Transformar Propiedades

En la tabla siguiente se enumeran todas las propiedades de transformación:


transformar Aplica una transformación 2D o 3D a un elemento 3

transformar de origen Le permite cambiar la posición de los elementos transformados 3

transformar al estilo Especifica cómo se representan los elementos anidados en el espacio 3D

3

perspectiva Especifica la perspectiva de cómo son vistos los elementos 3D 3

perspectiva de origen Especifica la posición inferior de elementos 3D 3

cara trasera visibilidad Define si un elemento debe ser visible sin estar frente a la pantalla 3

Transformación 3D Métodos

Función Descripción

Matrix3D ( n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n )

Define una transformación 3D, usando una matriz de 4x4 de 16 valores

translate3d ( x, y, z ) Define una traducción 3D

translateX ( x ) Define una traducción en 3D, utilizando únicamente el valor para el eje X

TranslateY ( Y ) Define una traducción 3D, usando solamente el valor para el eje Y

translateZ ( z ) Define una traducción 3D, usando solamente el valor para el eje Z

http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

http://www.w3schools.com/cssref/css3_pr_perspective-origin.asp

http://www.w3schools.com/cssref/css3_pr_perspective.asp

http://www.w3schools.com/cssref/css3_pr_transform-style.asp

http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

http://www.w3schools.com/cssref/css3_pr_transform.asp

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_rotateY

scale3d ( x, y, z ) Define una transformación de escala 3D

scaleX ( x ) Define una transformación de escala 3D, dando un valor para el eje X

scaleY ( Y ) Define una transformación de escala 3D, dando un valor para el eje Y

scaleZ ( z ) Define una transformación de escala 3D, dando un valor para el eje Z

Rotar3D ( x, y, z, el ángulo )

Define una rotación 3D

RotateX ( ángulo ) Define una rotación 3D a lo largo del eje X

rotateY ( ángulo ) Define una rotación 3D a lo largo del eje Y

RotateZ ( ángulo ) Define una rotación 3D a lo largo del eje Z

perspectiva ( n ) Define una vista en perspectiva de un elemento 3D transforma

CSS3 transiciones

Transiciones CSS3

Con CSS3, podemos añadir un efecto al pasar de un estilo a otro, sin el uso de animaciones Flash o JavaScripts.

Pase el ratón sobre el elemento a continuación:

CSS3Transición



transición

Internet Explorer no es compatible aún con la propiedad de transición.

Firefox 4 requiere el prefijo-moz-.


Opera requiere el prefijo-o-.

¿Cómo 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 duración del efecto.

Ejemplo

Efecto de transición en la propiedad de ancho, duración: 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 duración no se especifica, la transición no tendrá ningún efecto, ya que el valor predeterminado es 0.

El efecto se iniciará cuando la propiedad especificada CSS cambios de valor. Un típico cambio de propiedad CSS sería cuando un usuario del ratón sobre un elemento:

Ejemplo

Especifique: hover para los elementos <div>:

div:hover{width:300px;}


Nota: Cuando el cursor del ratón sobre el elemento, cambia gradualmente de nuevo a su estilo original.

Múltiples cambios

Para añadir un efecto de transición para más de un estilo, añadir más propiedades, separados por comas:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1

Ejemplo

Agregar efectos sobre la anchura, la altura y la transformación:

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


Propiedades de la transición

En la tabla siguiente se enumeran todas las propiedades de transición:


transición Una propiedad abreviada para establecer las propiedades de transición de cuatro en una sola propiedad

3

transición de propiedad Especifica el nombre de la propiedad CSS al que se aplica la transición

3

transición de duración Define la longitud de tiempo que se produce una transición.Predeterminado 0

3

transición-timing-función Describe cómo la velocidad durante una transición se calculará.Default "facilidad"

3

transición de retardo Define cuando la transición se iniciará. Predeterminado 0 3

Los dos ejemplos siguientes conjuntos de todas las propiedades de transición:

Ejemplo

Utilice todas las propiedades de transición en un ejemplo:

div{transition-property: width;transition-duration: 1s;

http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

http://www.w3schools.com/cssref/css3_pr_transition-property.asp

http://www.w3schools.com/cssref/css3_pr_transition.asp


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


Ejemplo

Los efectos de transición Igual que el anterior, utilizando la propiedad transición taquigrafía:

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


CSS3 Animaciones

Animaciones CSS3

Con CSS3, podemos crear animaciones, que puede reemplazar imágenes animadas, animaciones Flash, y JavaScripts en muchas páginas web.



CSS3Animación

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 animación se crea. Especifique un estilo CSS dentro de la regla @ fotogramas clave y la animación poco a poco va a cambiar el estilo vigente al nuevo estilo.



@ Fotogramas clave

animación

Internet Explorer no es compatible aún con la regla @ fotogramas clave o la propiedad de animación.

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

Cuando la animación se crea en el @ fotograma clave, que se unen a un selector, de lo contrario la animación no tendrá ningún efecto.

Enlace la animación a un selector especificando al menos estas dos propiedades de CSS3 animación:

Especifique el nombre de la animación Especifique la duración de la animación

Ejemplo

Enlazar el "mi primer" animación a un elemento div, duración: 5 segundos:

div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari and Chrome */-o-animation: myfirst 5s; /* Opera */}


Nota: Debe definir el nombre y la duración de la animación. Si la duración se omite, la animación no funciona, porque el valor predeterminado es 0.

¿Cuáles son animaciones en CSS3?

Una animación 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 cuándo 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 animación, 100% es cuando la animación se ha completado.

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1

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 animación es 25%, 50%, y de nuevo cuando la animación 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;}}


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


CSS3 Animación Propiedades

La siguiente tabla muestra la regla @ fotogramas clave y todas las propiedades de la animación:


@ Fotogramas clave Especifica la animación 3

http://www.w3schools.com/cssref/css3_pr_keyframes.asp


animación Una propiedad resumida de todos los las propiedades de animación, excepto la propiedad de animación-play-estado

3

animación de nombre Especifica el nombre de la animación de fotogramas clave @ 3

animación de duración Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo. Predeterminado 0

3

animation-timing-función Describe cómo la animación progresará más de un ciclo de su duración. Default "facilidad"

3

animación de retardo Especifica cuando la animación se iniciará. Predeterminado 0 3

animación iteración de conteo

Especifica el número de veces que se reproduce una animación.Predeterminado 1

3

animación dirección Especifica si la animación debe jugar a la inversa en ciclos alternos. Por defecto "normal"

3

animación-play-estado Especifica si la animación está en ejecución o en pausa. Default "en ejecución"

3

Los dos ejemplos a continuación establece todas las propiedades de animación:

Ejemplo

Ejecutar una animación llamada MyFirst, con toda la animación 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;

http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

http://www.w3schools.com/cssref/css3_pr_animation-direction.asp

http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

http://www.w3schools.com/cssref/css3_pr_animation-duration.asp

http://www.w3schools.com/cssref/css3_pr_animation-name.asp

http://www.w3schools.com/cssref/css3_pr_animation.asp

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


Ejemplo

La animación mismo que el anterior, utilizando la propiedad de animación 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;}


CSS3 varias columnas

CSS3 varias columnas

Con CSS3, puede crear varias columnas para el tendido de texto - al igual que en los periódicos!

En este capítulo usted aprenderá sobre las múltiples propiedades de la columna siguientes:

columna de recuento columna de diferencia columna de la regla





columna de recuento

columna de diferencia

columna de la regla

Internet Explorer no es compatible aún con las propiedades de columnas múltiples.


Chrome y Safari requieren el prefijo-webkit-.

CSS3 crear varias columnas

La propiedad de la columna-count especifica el número 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;}


CSS3 Especifique la distancia entre columnas

La propiedad de columna especifica el espacio vacío entre las columnas:

Ejemplo

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_column-count

Especifique un espacio de 40 píxeles entre las columnas:

div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;}


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


Nuevas propiedades de varias columnas


columna de recuento Especifica el número de columnas de un elemento debe estar dividido en

3

columna de relleno de Especifica cómo llenar columnas 3

columna de diferencia Especifica el espacio entre las columnas 3

columna de la regla Una propiedad abreviada para establecer las reglas de columna-* 3

http://www.w3schools.com/cssref/css3_pr_column-rule.asp

http://www.w3schools.com/cssref/css3_pr_column-gap.asp

http://www.w3schools.com/cssref/css3_pr_column-fill.asp

http://www.w3schools.com/cssref/css3_pr_column-count.asp

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_column-rule

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_column-gap

propiedades

columna-rule-color Especifica el color de la regla entre columnas 3

columna de la regla de estilo

Especifica el estilo de la regla entre columnas 3

columna de la regla de ancho

Especifica el ancho de la regla entre columnas 3

columna-span Especifica el número de columnas de un elemento debe extenderse a lo largo

3

columna de ancho Especifica el ancho de las columnas 3

columnas Una propiedad abreviada para establecer la anchura de columna y columna de recuento

3

CSS3 Interfaz de usuario

CSS3 Interfaz de usuario

En CSS3, algunas de las características de la interfaz de usuario nuevas, son elementos de cambio de tamaño, calibrado caja y Esquema.

En este capítulo usted aprenderá acerca de las propiedades de la interfaz de usuario siguientes:

cambiar el tamaño de box-dimensionamiento esbozar-offset



cambiar el tamaño de

box-dimensionamiento

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.

http://www.w3schools.com/cssref/css3_pr_columns.asp

http://www.w3schools.com/cssref/css3_pr_column-width.asp

http://www.w3schools.com/cssref/css3_pr_column-span.asp

http://www.w3schools.com/cssref/css3_pr_column-rule-width.asp

http://www.w3schools.com/cssref/css3_pr_column-rule-width.asp

http://www.w3schools.com/cssref/css3_pr_column-rule-style.asp

http://www.w3schools.com/cssref/css3_pr_column-rule-style.asp

http://www.w3schools.com/cssref/css3_pr_column-rule-color.asp

Cambiar el tamaño de CSS3

En CSS3, la propiedad resize especifica si un elemento puede cambiar el tamaño del usuario.

Este elemento div es de tamaño variable por el usuario (en Firefox 4 +, Chrome, y Safari).

El código CSS es la siguiente:

Ejemplo

Especifica que un elemento div puede cambiar el tamaño por el usuario:

div{resize:both;overflow:auto;}


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


http://www.w3schools.com/css3/tryit.asp?filename=trycss3_box-sizing

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_resize

CSS3 Esquema Offset

El esquema de compensación de las compensaciones de propiedad de un esquema, y lo dibuja más 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 código 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;}


Nueva interfaz de usuario Propiedades


apariencia Le permite hacer una mirada elemento como un elemento de interfaz de usuario estándar

3

box-dimensionamiento Permite definir ciertos elementos para adaptarse a una zona de cierta manera

3

icono Proporciona al autor la posibilidad de estilo de un elemento con un equivalente icónico

3

nav-down Especifica dónde se navega utilizando la tecla de flecha hacia abajo de navegación

3

nav-índice Especifica el orden de tabulación de un elemento 3

http://www.w3schools.com/cssref/css3_pr_nav-index.asp

http://www.w3schools.com/cssref/css3_pr_nav-down.asp

http://www.w3schools.com/cssref/css3_pr_icon.asp

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

http://www.w3schools.com/cssref/css3_pr_appearance.asp

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_outline-offset

nav-left Especifica dónde se navega utilizando la tecla de flecha a la izquierda de navegación

3

nav-derecha Especifica dónde se navega cuando se utiliza la flecha derecha tecla de navegación

3

nav-up Especifica dónde se navega cuando se utiliza la flecha hacia arriba la tecla de navegación

3

esbozar-offset Compensaciones de un esquema, y señala que más allá del borde fronterizo

3

cambiar el tamaño de Especifica si un elemento es de tamaño variable por el usuario 3

http://www.w3schools.com/cssref/css3_pr_resize.asp

http://www.w3schools.com/cssref/css3_pr_outline-offset.asp

http://www.w3schools.com/cssref/css3_pr_nav-up.asp

http://www.w3schools.com/cssref/css3_pr_nav-right.asp

http://www.w3schools.com/cssref/css3_pr_nav-left.asp

HTML 5

Documents

Transcript of HTML 5