INTRODUCCION CSS3 es completamente compatible con versiones anteriores, por lo que no tendr que modificar los diseos existentes.

Los navegadores siempre apoyar CSS2.

MDULOS DE CSS3 CSS3 se divide en "mdulos". La especificacin de edad, ha sido dividida en pedazos ms pequeos, y otros nuevos se aaden tambin. Algunos de los ms importantes CSS3 mdulos son: Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseo de columna mltiple Interfaz de usuario

RECOMENDACIN CSS3 La especificacin CSS3 est todava en desarrollo por el W3C. Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos.

CSS3

CSS3 FRONTERAS CSS3 FRONTERAS Con CSS3, se puede crear bordes redondeados, aadir sombra a las cajas, y utilizar una imagen como una frontera - sin necesidad de utilizar un programa de diseo, como Photoshop. En este captulo usted aprender acerca de las propiedades de borde siguientes: border-radius box-shadow border-image

SOPORTE DEL NAVEGADOR Internet Explorer 9 es compatible con dos de las propiedades de borde nuevos. Firefox requiere el prefijo-moz-border-image de. Chrome y Safari requiere el prefijo-webkit-border-image de. Opera requiere que el prefijo-o-de border-image. Opera soporta las propiedades de borde nuevos.

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

CSS3

CSS3 SHADOW BOX En CSS3, la propiedad box-shadow se utiliza para aadir sombra a las cajas:

Ejemplo: Aadir 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 que usted puede utilizar una imagen para crear un borde: La propiedad border-image permite especificar una imagen como una frontera! La imagen original utilizada para crear el borde anterior: Ejemplo: Usar 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 */ }

CSS3

PROPIEDADES NUEVAS FRONTERAS Propiedad border-image Descripcin Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades Una propiedad abreviada para establecer las cuatro border-radius * propiedades Se conecta uno o ms cada de las sombras a la caja CSS 3

border-radius

box-shadow

PROPIEDADES NUEVAS FRONTERAS Propiedad border-image Descripcin CSS

Una propiedad abreviada para establecer las fronteras 3 de la imagen de * propiedades Una propiedad abreviada para establecer las cuatro 3 border-radius * propiedades Se conecta uno o ms cada de las sombras a la caja 3

border-radius

box-shadow

CSS3

CSS3 FONDOS CSS3 FONDOS CSS3 contiene varias propiedades de fondo nuevos, que permiten un mayor control del elemento de fondo. En este captulo usted aprender acerca de las propiedades de fondo siguientes: fondo de tamao de fondo de origen

Tambin aprenders cmo utilizar mltiples imgenes de fondo. SOPORTE DEL NAVEGADOR Firefox 3.6 y versiones anteriores no es compatible con la propiedad backgroundorigen, y requiere el prefijo-moz-para apoyar la propiedad background-size. Safari 4 requiere el prefijo-webkit-para apoyar a las propiedades de fondo nuevos. Internet Explorer 9, Firefox 4, Chrome, Safari 5 y Opera apoyar a las propiedades de fondo nuevos. CSS3 LA PROPIEDAD BACKGROUND-SIZE La propiedad de fondo de tamao especifica el tamao de la imagen de fondo. Antes de CSS3, el tamao de la imagen de fondo se determin por el tamao real de la imagen. En CSS3 es posible especificar el tamao de la imagen de fondo, lo que nos permite volver a utilizar imgenes de fondo en diferentes contextos. Usted puede especificar el tamao en pxeles o en porcentajes. Si se especifica el tamao como un porcentaje, el tamao es relativo a la anchura y la altura del elemento primario. Ejemplo 1: Cambiar el tamao de una imagen de fondo: div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 */ background-size:80px 60px; background-repeat:no-repeat; }

CSS3

Ejemplo 2: Estira la imagen de fondo para llenar completamente el area 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 La propiedad background-origen especifica el rea de posicionamiento de las imgenes de fondo. La imagen de fondo se puede colocar dentro del contenido de la caja, el relleno de caja, o zona fronteriza de la caja.

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

CSS3 MLTIPLES IMGENES DE FONDO

CSS3 permite el uso de varias imgenes de fondo para un elemento Ejemplo: Establecer dos imgenes de fondo para el elemento del cuerpo:

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

Nuevas Propiedades de fondo Propiedad de fondo-clip de fondo de origen Descripcin Especifica el rea de la pintura de las imgenes de fondo CSS 3

Especifica el rea de posicionamiento de las imgenes de 3 fondo Especifica el tamao de las imgenes de fondo 3

fondo de tamao

CSS3

CSS3 EFECTOS DE TEXTO EFECTOS DE TEXTO CSS3 CSS3 contiene varias caractersticas nuevas de texto. En este captulo usted aprender acerca de las propiedades de texto siguientes: text-shadow word-wrap

SOPORTE DEL NAVEGADOR

Internet Explorer no es compatible an con la propiedad text-shadow. De Firefox, Chrome, Safari y Opera, compatible con la propiedad text-shadow. Todos los principales navegadores admiten la propiedad word-wrap.
CSS3 TEXT SHADOW En CSS3, la propiedad text-shadow se aplica sombra al texto.

Se especifica la sombra horizontal, la sombra vertical, la distancia borroso, y el color de la sombra: Ejemplo: Agregar una sombra a un encabezdo: h1 { text-shadow: 5px 5px 5px #FF0000; } CSS3 AJUSTE DE PALABRAS Si una palabra es demasiado larga para caber dentro de un rea, se expande fuera: Este prrafo contiene una palabra muy larga: thisisaveryveryveryveryveryverylongword La palabra siempre se romper y pase a la siguiente lnea.

CSS3

En CSS3, la propiedad word-wrap le permite forzar el texto se ajuste - incluso si esto significa la divisin en el medio de una palabra:

El cdigo CSS es como sigue: Ejemplo: Deje que las palabras largas para poder romper y envolver en la siguiente lnea: p {word-wrap:break-word;}

NUEVAS PROPIEDADES DE TEXTO Propiedad ahorcamientopuntuacion puntuacion-trim Descripcin CSS

Especifica si un personaje puntuacion puede ser colocado 3 fuera de la caja de lnea Especifica si un personaje puntuacion debe ser recortado Describe cmo la ltima lnea de un bloque o una lnea justo antes de un salto de lnea forzado est alineado al text-align es "justificar" Aplica marcas de nfasis, y el color de primer plano de las marcas de nfasis, al texto del elemento 3

text-align-ltima

texto-nfasis

justificar el texto

Especifica el mtodo utilizado cuando la justificacin text3 align es "justificar" Especifica un esquema de texto Especifica lo que debe ocurrir cuando el texto se desborda el elemento contenedor Agrega sombra al texto Especifica las reglas de divisin de lneas de texto 3

texto-resumen texto de desbordamiento text-shadow ajuste del texto

3 3

palabra-break

Especifica las reglas de salto de lnea por falta de guiones 3 CJK

CSS3

word-wrap

Permite palabras largas e irrompibles que se rompen y pasan a la siguiente lnea

CSS3

CSS3 TRANSICIONES LAS TRANSICIONES CSS3 Con CSS3, podemos aadir un efecto al cambiar de un estilo a otro, sin el uso de animaciones Flash o JavaScripts. SOPORTE DEL NAVEGADOR Internet Explorer no es compatible an con la propiedad de transicin. Firefox 4 requiere el prefijo-moz-. Chrome y Safari requiere el prefijo-webkit-. Opera requiere que el prefijo-o-. CMO FUNCIONA? CSS3 transiciones son efectos que le permiten un elemento poco a poco cambiar de un estilo a otro. Para ello, debe especificar dos cosas: Especifique la propiedad CSS que desea agregar un efecto a Especificar la duracin del efecto.

Ejemplo: Efecto de transicin de la propiedad de ancho, duracin 2 segundos: div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ }

Nota: Si la duracin no se especifica, la transicin no tendr ningn efecto, porque el valor predeterminado es 0. El efecto se iniciar cuando la propiedad especificada CSS cambios de valor. Un tpico cambio de propiedad CSS sera cuando un usuario del ratn sobre un elemento:

CSS3

Ejemplo: Especificar: pase para los elementos clave: div:hover { width:300px; }

Nota: Cuando el cursor del ratn sobre el elemento, que cambia gradualmente de nuevo a su estilo original. MLTIPLES CAMBIOS Para agregar un efecto de transicin de ms de un estilo, aadir ms propiedades, separados por comas: Ejemplo: Agregar efector sobre ka anchura, altura , y la transformacin: div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } PROPIEDADES DE LA TRANSICIN La siguiente tabla muestra todas las propiedades de transicin: Propiedad transicin Descripcin CSS

Una propiedad abreviada para establecer las propiedades 3 de transicin de cuatro en una sola propiedad de la Especifica el nombre de la propiedad CSS para el cual se 3 aplica la transicin Define la longitud de tiempo que tarda una transicin. 3 Por defecto 0

transicin propiedad

transicin de duracin

tiempo

de

transicin Describe cmo la velocidad durante una transicin se 3

CSS3

de funciones transicin de retardo

puede calcular. Por defecto "facilidad" Define cuando la transicin se iniciar. Por defecto 0 3

Los dos ejemplos siguientes conjuntos de todas las propiedades de transicin: Ejemplo: Utilice todas las propiedades de transicin en un ejemplo: div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }

CSS3

Ejemplo: Los efectos de transicin igual al anterior, utilizando abreviada: 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; la propiedad de transicin

CSS3

CSS3 ANIMACIONES ANIMACIONES CSS3 Con CSS3, podemos crear animaciones, que pueden sustituir a las imgenes animadas, animaciones Flash, y JavaScripts en muchas pginas web. CSS3 Animacin CSS3 @ FOTOGRAMAS CLAVE REGLA Para crear animaciones en CSS3, usted tendr que aprender acerca de la regla de los fotogramas clave @. La regla @ fotogramas clave es que la animacin se ha creado. Especifique un estilo CSS dentro de la regla @ fotogramas clave y la animacin poco a poco va a cambiar el estilo actual al nuevo estilo. SOPORTE DEL NAVEGADOR Internet Explorer y Opera no es compatible an con la regla de los fotogramas clave @ o la propiedad de animacin. Firefox requiere el prefijo-moz-, mientras que Chrome y Safari requieren el prefijowebkit-. 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;} }

CSS3

CSS3 ANIMACIN Cuando la animacin se crea en el @ fotograma clave, que se unen a un selector, de lo contrario la animacin no tendr ningn efecto. Enlazar la animacin a un selector mediante la especificacin de por lo menos estas dos propiedades de CSS3 animacin: Especifique el nombre de la animacin Especificar la duracin de la animacin

Ejemplo: Enlazar el mi primer animacin a un elemento div, duracin: 5 segundos: div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari and Chrome */ }

Nota: Debe definir el nombre y la duracin de la animacin. Si la duracin se omite, la animacin no funciona, porque el valor predeterminado es 0. CULES SON LAS ANIMACIONES EN CSS3? Una animacin es un efecto que permite que un elemento de cambiar gradualmente de un estilo a otro. Usted puede cambiar todos los estilos que quieras, las veces que desee. Especifique cuando el cambio se producir en tanto por ciento, o las palabras clave "desde" y "a", que es lo mismo que 0% y 100%. 0% es el comienzo de la animacin, 100% es cuando la animacin es completa. Para soporte mejor navegador, siempre debe definir tanto el 0% y 100% de los selectores.

CSS3

Ejemplo: Cambiar el colorde fondo cuando la animacin es de 25%, 50% , y de nuevo cuando la animacin es completa al 100%: @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;} }

CSS3

Ejemplo: Cambiar el color de fondo y la posicion: @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;} } CSS3 ANIMACIN PROPIEDADES La siguiente tabla muestra la regla de los fotogramas clave @ y todas las propiedades de la animacin: Propiedad @ Fotogramas clave animacin Descripcin Especifica la animacin CSS 3

Una propiedad de una abreviacin para todos los las 3 propiedades de animacin, con excepcin de la propiedad de animacin-juego-Estado de Especifica el nombre de la animacin de fotogramas clave 3

la

animacin

CSS3

nombre la animacin de duracin animacin-tiempofuncin la animacin de retardo animacin iteracin recuento

@ Especifica cuntos segundos o milisegundos una animacin tarda en completar un ciclo. Por defecto 0 Describe cmo la animacin progresar ms de un ciclo de su duracin. Por defecto "facilidad" Especifica cuando la animacin se iniciar. Por defecto 0 3

Especifica el nmero de veces que se juega una animacin. Por defecto 1

animacin de direccin Especifica si la animacin se reproduzca a la inversa de los ciclos alternos. Por defecto "normal" animacin-juegoestado Especifica si la animacin se est ejecutando o est en pausa. Por defecto "en ejecucin"

Los dos ejemplos siguientes conjuntos de todas las propiedades de la animacin: Ejemplo: Ejecutar una animacin llamada mi primer , con toda la animacin 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;

CSS3

/* Safari and Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; }

Ejemplo: La misma animacin que el anterior, utilizando la propiedad de animacin abreviada: div { animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; }

CSS3

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

SOPORTE DEL NAVEGADOR Internet Explorer no es compatible an con las propiedades de varias columnas. Firefox requiere el prefijo-moz-. Chrome y Safari requieren el prefijo-webkit-.

CSS3 CREAR VARIAS COLUMNAS La propiedad de la columna de recuento especifica el nmero de columnas un elemento debe ser dividido en: Ejemplo: Divide el texto en un elemnto div en tres columnas: div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }

CSS3

CSS3 ESPECIFICAR LA DISTANCIA ENTRE COLUMNAS La propiedad de la columna de diferencia especifica la distancia entre las columnas: Ejemplo: Especifique un hueco de 40 pixeles entre las columnas: div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } REGLAS DE COLUMNAS DE CSS3 La propiedad de la columna de la regla establece el ancho, el estilo y el color de la regla entre las columnas. Ejemplo Especificar el ancho, estilo y color de la regla entre las 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 Propiedad columna de recuento Descripcin Especifica el nmero de columnas de un elemento se debe dividir en Especifica cmo llenar las columnas Especifica el espacio entre las columnas CSS 3

columna-llenar la columna de diferencia la columna de la regla

3 3

Una propiedad abreviada para establecer todas las reglas 3 de la columna-de * propiedades

CSS3

columna de la regla de Especifica el color de la regla entre las columnas color la columna de la regla de estilo la columna de la regla de ancho columna-span Especifica el estilo de la regla entre las columnas

Especifica el ancho de la regla entre las columnas

Especifica el nmero de columnas que un elemento debe extenderse a lo largo Especifica el ancho de las columnas Una propiedad abreviada para establecer la anchura de columna y la columna de conteo

columna de ancho columnas

CSS3

CSS3 INTERFAZ DE USUARIO CSS3 INTERFAZ DE USUARIO En CSS3, algunas de las caractersticas nueva interfaz de usuario son elementos de tamao caja de cambio de tamao, y que describen. En este captulo usted aprender acerca de las propiedades de la interfaz de usuario siguientes: cambiar el tamao de caja de tamao resumen de compensacin de

SOPORTE DEL NAVEGADOR La propiedad de cambio de tamao es compatible con Firefox 4 +, Chrome y Safari. La caja de tamao es compatible con Internet Explorer, Chrome y Opera. Firefox requiere el prefijo-moz-. Safari requiere el prefijo-webkit-. La propiedad esquema es compatible con todos los principales navegadores, excepto Internet Explorer.

CAMBIAR EL TAMAO DE CSS3 En CSS3, cambiar el tamao de la propiedad especifica si un elemento puede cambiar el tamao del usuario. Este elemento div es de tamao variable por el usuario (en Firefox 4 +, Chrome y Safari). El cdigo CSS es como sigue: Ejemplo Especifica que un elemento div puede cambiar el tamao por el usuario: div { resize:both; overflow:auto; }

CSS3

CSS3 CAJA DE MEDICIN La propiedad de tamao de caja le permite definir ciertos elementos para adaptarse a un rea de una manera determinada: Este elemento div es de tamao variable por el usuario (en Firefox 4 +, Chrome y Safari).

Ejemplo: Especifique dos lados cajas con borde 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; } CSS3 ESQUEMA DE COMPENSACIN El esquema de compensacin de las compensaciones de un esquema de propiedad, y lo dibuja ms all del borde fronterizo. Los contornos se diferencian de las fronteras de dos maneras: Los contornos no ocupan espacio Los contornos pueden ser no rectangular

Este div tiene un esquema 15px fuera del borde de la frontera. EL CDIGO CSS ES COMO SIGUE: Ejemplo div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

CSS3

Puede especificar una 15px esquema fuera del lmite del borde: Nueva interfaz de usuario-Propiedades Propiedad apariencia Descripcin Le permite hacer una mirada elemento como un elemento de interfaz de usuario estndar Permite definir ciertos elementos para adaptarse a una zona de cierta manera Proporciona el autor la posibilidad de estilo de un elemento con un equivalente icnica Especifica que para navegar cuando se utiliza la tecla de flecha hacia abajo de navegacin Especifica el orden de tabulacin para un elemento Especifica que para navegar cuando se utiliza la tecla de flecha a la izquierda de navegacin Especifica que para navegar cuando se utiliza la flecha derecha tecla de navegacin Especifica que para navegar cuando se utiliza la flecha hacia arriba la tecla de navegacin CSS 3

caja de tamao

icono

de navegacin hacia abajo nav-ndice de de navegacin a la izquierda navegacin derecha

3 3

nav-up

resumen de compensacin de cambiar el tamao de

Compensaciones de un esquema, y lo dibuja ms all del 3 borde fronterizo Especifica si un elemento puede cambiar el tamao por el 3 usuario

CSS3

CSS3 REFERENCIAS CSS3 TUTORIAL PROPIEDADES DE CSS CSS Grupos de Propiedad Animacin Fondo Frontera y el esquema Caja Color Contenido de Medios paginados Dimensin Caja flexible Son El contenido generado Red Hiperenlace Linebox Lista Margen Marquesina Multi-columna Relleno Medios paginados Posicionamiento Imprimir Rub Discurso Mesa Texto Transformar 2D/3D Transicin Interfaz de usuario

El "CSS" columna indica en qu versin de CSS la propiedad se define (CSS1, CSS2, CSS3 o). LAS PROPIEDADES DE ANIMACIN Propiedad @ Fotogramas clave animacin Descripcin Especifica la animacin Una propiedad resumida para todas las propiedades de animacin de abajo, excepto la propiedad de animacinjuego-Estado Especifica un nombre para la animacin de fotogramas clave @ Especifica cuntos segundos o milisegundos una animacin tarda en completar un ciclo Especifica la curva de velocidad de la animacin CSS 3 3

la animacin de nombre la animacin de duracin animacin-tiempofuncin la animacin de retardo animacin iteracin

Especifica cuando la animacin se iniciar

Especifica el nmero de veces que debe ser una

CSS3

recuento

animacin jugado 3

animacin de direccin Especifica si la animacin se reproduzca a la inversa de los ciclos alternos animacin-juegoestado Especifica si la animacin se est ejecutando o est en pausa

PROPIEDADES DE FONDO Propiedad fondo Descripcin Establece todas las propiedades de fondo en una declaracin Establece si una imagen de fondo se fija o se desplaza con el resto de la pgina Establece el color de fondo de un elemento Establece la imagen de fondo de un elemento Establece la posicin de partida de una imagen de fondo Define la forma en una imagen de fondo se repetir Especifica el rea de la pintura del fondo CSS 1

backgroundattachment background-color background-image background-position background-repeat de fondo-clip de fondo de origen

1 1 1 1 3

Especifica el rea de posicionamiento de las imgenes de 3 fondo Especifica el tamao de las imgenes de fondo 3

fondo de tamao

CSS3

ESQUEMA DE FRONTERAS Y PROPIEDADES Propiedad frontera Descripcin Establece todas las propiedades de borde en una declaracin Establece todas las propiedades de borde de fondo en una declaracin de Establece el color del borde inferior Define el estilo del borde inferior Establece el ancho del borde inferior Establece el color de los cuatro bordes Establece todas las propiedades del borde izquierdo de una declaracin de Establece el color del borde izquierdo Define el estilo del borde izquierdo Establece el ancho del borde izquierdo Establece todas las propiedades del borde derecho de una declaracin de Establece el color del borde derecho Define el estilo del borde derecho Establece el ancho del borde derecho Establece el estilo de los cuatro bordes CSS 1

border-bottom

border-bottom-color border-bottom-style border-bottom-width border-color border-left

1 1 1 1 1

border-left-color border-left-style border-left-width border-right

1 1 1 1

border-right-color border-right-style border-right-width border-style border-top

1 1 1 1

Establece todas las propiedades de borde superior de una 1 declaracin de Establece el color del borde superior 1

border-top-color

CSS3

border-top-style border-top-width border-width perfilar

Define el estilo del borde superior Establece el ancho del borde superior Establece el ancho de los cuatro bordes Establece todas las propiedades de contorno en una declaracin Establece el color de un esquema Establece el estilo de un esquema Establece el ancho de un esquema Define la forma del borde de la esquina inferior izquierda

1 1 1 2

esquema de color esquema de estilo esquema de ancho border-bottomizquierda-radio border-bottomderecha-radio border-image

2 2 2 3

Define la forma del borde de la esquina inferior derecha

Una propiedad abreviada para establecer las fronteras de 3 la imagen de * propiedades Especifica la cantidad por la cual el rea de la imagen se extiende ms all de las fronteras de la caja de la frontera Especifica si la imagen de la frontera se debe repetir, redondeado o se estira Especifica los desplazamientos internos de la imagen de la frontera Especifica una imagen para ser utilizado como un borde Especifica el ancho de la imagen de la frontera 3

border-image-inicio

border-image-repeat

border-image-slice

border-image-fuente frontera-imagenanchura border-radius

3 3

Una propiedad abreviada para establecer las cuatro border-radius * propiedades

CSS3

border-top-izquierdaradio border-top-derecharadio Caja de decoracinbreak box-shadow

Define la forma del borde de la esquina superior izquierda Define la forma del borde de la esquina superior derecha

Se conecta uno o ms cada de las sombras a la caja

PROPIEDADES DE LAS CAJAS Propiedad overflow-x Descripcin Especifica si debe o no recortar los bordes izquierdo / derecho de los contenidos, si se desborda el rea del elemento de contenido Especifica si debe o no recortar los bordes superior / inferior del contenido, si se desborda el rea del elemento de contenido Especifica el mtodo de desplazamiento preferido de los elementos que se desbordan Gira un elemento alrededor de un punto dado, definido por la propiedad de rotacin de punto Define un punto como un desplazamiento desde el lmite del borde superior izquierdo CSS 3

el desbordamiento de Y

desbordamiento de estilo rotacin

la rotacin de punto

CSS3

PROPIEDADES DE COLOR Propiedad color perfil Descripcin Permite la especificacin de un perfil de color de origen no sea el predeterminado Ajusta el nivel de opacidad de un elemento Permite la especificacin de un objetivo de rendimiento de color perfil distinto al predeterminado CSS 3

opacidad representacin-la intencin

3 3

CONTENIDO DE LAS PROPIEDADES DE MEDIOS PAGINADOS Propiedad marcador de etiqueta marcador de nivel favorito-blanco flotan-offset Descripcin Especifica la etiqueta del marcador Especifica el nivel del marcador Especifica el destino del vnculo de marcador CSS 3 3 3

Se empuja elementos flotantes en la direccin opuesta de 3 la donde han sido flotaba con flotador Especifica el nmero mnimo de caracteres en una palabra con guin despus de que el carcter de separacin de slabas 3

guiones, despus de

guiones, antes de

Especifica el nmero mnimo de caracteres en una 3 palabra con guin antes de que el carcter de separacin de slabas Especifica una cadena que se muestra cuando un guiones 3 de rotura se produce Indica el nmero mximo de sucesivas lneas de guiones en un elemento 3

guiones caracteres

de Separar lneas

guiones de los recursos

Especifica una lista separada por comas de los recursos 3 externos que pueden ayudar al explorador determinar los puntos de separacin de slabas

CSS3

Guiones

Establece la forma de dividir las palabras para mejorar el 3 diseo de los prrafos Especifica la resolucin correcta de las imgenes Suma cultivo y / o marcas de cruces al documento 3 3 3

imagen-resolucin Marcas conjunto de cadenas

PROPIEDADES DE LA DIMENSIN Propiedad altura max-height max-width min-height min-width ancho Descripcin Establece la altura de un elemento Establece la altura mxima de un elemento Ajusta la anchura mxima de un elemento Establece la altura mnima de un elemento Establece el ancho mnimo de un elemento Establece el ancho de un elemento CSS 1 2 2 2 2 1

PROPIEDADES FLEXIBLES CAJA Propiedad caja-align Descripcin Especifica la forma de alinear los elementos secundarios de una caja Especifica en qu direccin los hijos de un cuadro se muestran Especifica si los hijos de una caja es flexible o inflexible en el tamao Asigna elementos flexibles para flexionar los grupos Especifica si las columnas ir en una nueva lnea cada CSS 3

cuadro de direccin

caja-flex

caja-flex-grupo caja de las lneas de

3 3

CSS3

vez que se queda sin espacio en el cuadro de los padres caja ordinal grupo Especifica el orden de visualizacin de los elementos secundarios de una caja Especifica si los hijos de una caja deben establecerse en forma horizontal o vertical 3

caja-oriente

BOX-PACK

Especifica la posicin horizontal en cajas horizontales y la 3 posicin vertical en cajas verticales

PROPIEDADES DE FUENTE Propiedad son Descripcin Establece todas las propiedades de la fuente en una declaracin Especifica la familia de fuentes para el texto Especifica el tamao del texto Especifica el estilo de fuente para el texto CSS 1

font-family font-size font-style font-variant

1 1 1

Especifica si un texto se debe mostrar en un tipo de letra 1 small-caps Especifica el peso de una fuente Una regla que permite a los sitios web para descargar y utilizar fuentes que no sean los "seguros para la Web" Fuentes Conserva la legibilidad del texto, cuando se produce la reserva de fuentes Selecciona una cara normal, condensado o expandido de una familia de fuentes 1 3

font-weight @ Font-face

font-size-adjust

font-stretch

CSS3

GENERADOS PROPIEDADES DE CONTENIDO Propiedad contenido Descripcin Se utiliza con el: before y: after Los pseudo-elementos, para insertar contenido generado Incrementos de uno o varios contadores Crea o restaura uno o ms contadores Establece el tipo de comillas para las citas incrustadas Permite un elemento sustituye a ser slo un rea rectangular de un objeto, en lugar de todo el objeto Provoca un elemento que se elimina del flujo y se reinsertan en un momento posterior en el documento CSS 2

counter-increment counter-reset comillas cosecha

2 2 2 3

movimiento al

pgina de la poltica

Determina qu pgina basado ocurrencia de un elemento 3 dado se aplica a un contador o valor de la cadena

PROPIEDADES DE LA CUADRCULA Propiedad la red de columnas la red de filas Descripcin Especifica el ancho de cada columna en una cuadrcula Especifica la altura de cada columna en una cuadrcula CSS 3 3

PROPIEDADES DE HIPERVNCULO Propiedad objetivo Descripcin Una propiedad rpida para establecer el nombre de destino, el objetivo de nuevo, y las propiedades de posicin de destinoEspecifica dnde abrir enlaces (punto de destino) Especifica si los vnculos nuevos destinos se abrirn en una nueva ventana o en una nueva pestaa de una CSS 3

nombre de destino meta-nueva

3 3

CSS3

ventana existente diana posicin Especifica que los enlaces nuevos de destino se debe colocar 3

LINEBOX PROPIEDADES Propiedad la alineacin de ajuste alineacin de la lnea base Descripcin Permite la alineacin ms precisa de los elementos Especifica cmo un elemento en lnea de nivel est alineado con respecto a su matriz CSS 3 3

lnea de base del turno Permite el reposicionamiento de la relacin dominantelnea de base a la dominante lnea de base dominante-lnea de base Especifica una escala-de referencia-tabla

gota-inicial-despus de Establece el punto de alineacin de la cada inicial para el 3 ajuste punto de conexin principal cada inicial, despus de alinear Establece que la alineacin de lneas dentro de la caja de 3 lnea inicial se utiliza en el punto de conexin principal con el cuadro de la letra inicial Establece el punto de alineacin de la cada inicial para el 3 punto de conexin secundaria Establece que la alineacin de lneas dentro de la caja de 3 lnea inicial se utiliza en el punto de conexin secundaria con el cuadro de la letra inicial 3 3 3

cada inicial, antes de ajustar gota-inicial-antes dealign

cada inicial de tamao Controla el hundimiento parcial de la letra inicial cada de valor inicial inline-box-align Activa el efecto de la gota-inicial Establece que la lnea de un bloque en lnea de varias lneas se alinean con los elementos en lnea anterior y siguiente dentro de una lnea

CSS3

la lnea de apilamiento Una propiedad abreviada para establecer la lnea de 3 apilamiento, la estrategia, la lnea de apilamiento de rub, y las propiedades de la lnea de apilamiento de turnos la lnea de apilamiento-ruby Establece el mtodo de la lnea de apilamiento de los 3 elementos de bloque que contienen elementos de rub de anotacin 3

la lnea de apilamiento Establece el mtodo de la lnea de apilamiento de los de desplazamiento elementos de bloque que contienen elementos con base de desplazamiento la lnea de la estrategia de apilamiento el texto de la altura Establece la estrategia de la lnea de apilamiento de las cajas de lnea apiladas dentro de un elemento de bloque de contencin Establece la dimensin de bloque de la progresin del rea de contenido de texto de una caja de lnea

PROPIEDADES DE LA LISTA Propiedad list-style Descripcin Establece todas las propiedades de una lista en una declaracin de Especifica una imagen como marcador de tems de lista Especifica si los marcadores list-item debe aparecer dentro o fuera del flujo de contenido Especifica el tipo de marcador de tems de lista CSS 1

list-style-image list-style-position

1 1

list-style-type

CSS3

PROPIEDADES DE LOS MRGENES Propiedad margen Descripcin Establece todas las propiedades de los mrgenes en una declaracin Establece el margen inferior de un elemento Establece el margen izquierdo de un elemento Establece el margen derecho de un elemento Establece el margen superior de un elemento CSS 1

margin-bottom margin-left margin-right margin-top

1 1 1 1

PROPIEDADES DE MARQUESINA Propiedad marquesina de direccin carpa-juego-cuenta Descripcin Establece la direccin del contenido mvil CSS 3

Establece el nmero de veces que el movimiento de contenido Establece la rapidez con la se desplaza el contenido

marquesina de velocidad carpa de estilo

Define el estilo del contenido mvil

MULTI-COLUMNA PROPIEDADES Propiedad columna de recuento Descripcin Especifica el nmero de columnas de un elemento se debe dividir en Especifica cmo llenar las columnas Especifica el espacio entre las columnas CSS 3

columna-llenar la columna de diferencia

3 3

CSS3

la columna de la regla

Una propiedad abreviada para establecer todas las reglas 3 de la columna-de * propiedades 3

columna de la regla de Especifica el color de la regla entre las columnas color la columna de la regla de estilo la columna de la regla de ancho columna-span Especifica el estilo de la regla entre las columnas

Especifica el ancho de la regla entre las columnas

Especifica el nmero de columnas que un elemento debe extenderse a lo largo Especifica el ancho de las columnas Una propiedad abreviada para establecer la anchura de columna y la columna de conteo

columna de ancho columnas

3 3

PROPIEDADES DE RELLENO Propiedad relleno Descripcin Establece todas las propiedades de relleno en una declaracin Define el relleno inferior de un elemento Establece el margen izquierdo de un elemento Establece el margen derecho de un elemento Define el relleno superior de un elemento CSS 1

padding-bottom padding-left padding-right padding-top

1 1 1 1

CSS3

PROPIEDADES DE LOS MEDIOS PAGINADOS Propiedad ajuste Descripcin CSS

Da una idea de cmo escalar un elemento reemplazado si 3 ni su anchura ni su altura es de propiedad de automviles Determina la alineacin del objeto dentro de la caja 3

ajuste de posicin imagen-orientacin

Especifica una rotacin en la direccin derecha o hacia la 3 derecha que un agente de usuario se aplica a una imagen Especifica un tipo particular de pgina en la que debe ser 3 un elemento aparece Especifica el tamao y la orientacin de la caja que contiene la pgina de contenido 3

pgina

tamao

PROPIEDADES DE POSICIONAMIENTO Propiedad fondo claro Descripcin CSS

Especifica la posicin inferior de un elemento posicionado 2 Especifica qu lados de un elemento que otros elementos 1 flotantes no se les permite Clips de un elemento absolutamente posicionado Especifica el tipo de cursor que se mostrar Especifica cmo un elemento HTML que se debe mostrar cierta Especifica si una caja debe flotar Especifica la posicin de la izquierda de un elemento posicionado 2 2 1

recortar cursor mostrar

flotar a la izquierda

1 2

desbordamiento

Especifica qu sucede si se desborda contenido de la caja 2 de un elemento

CSS3

posicin

Especifica el tipo de mtodo utilizado para la colocacin de un elemento (esttica, relativa, absoluta o fija) Especifica la posicin correcta de un elemento posicionado

derecho

superior

Especifica la posicin de la parte superior de un elemento 2 posicionado Especifica si un elemento es visible Establece el orden de apilamiento de un elemento posicionado 2 2

visibilidad ndice z

PROPIEDADES DE IMPRESIN Propiedad los hurfanos Descripcin Establece el nmero mnimo de lneas que se deben a la izquierda en la parte inferior de una pgina cuando se produce un salto de pgina dentro de un elemento Establece el comportamiento de la pgina sin precedentes despus de un elemento Establece el comportamiento de la pgina sin precedentes antes de un elemento Establece el comportamiento de la pgina sin precedentes dentro de un elemento Establece el nmero mnimo de lneas que se deben a la izquierda en la parte superior de una pgina cuando se produce un salto de pgina dentro de un elemento CSS 2

page-break-after

page-break-before

page-break-inside

las viudas

CSS3

PROPIEDADES DE RUBY Propiedad ruby-align Descripcin Controla la alineacin del texto del texto rub y el contenido de rub de base respecto a la otra CSS 3

rub saliente

Determina si, y en qu lado, el texto rub se deja 3 parcialmente voladizo cualquier texto adyacente, adems de su propia base, cuando el texto ruby es ms ancha que la base de rub Controla la posicin del texto rub con respecto a su base 3 Controla el comportamiento de la divisin de los elementos de anotacin 3

rub posicin ruby-span

PROPIEDADES DE VOZ Propiedad marcar Descripcin CSS

Una propiedad abreviada para establecer las propiedades 3 antes de la marca y la marca despus de la Permite marcadores con nombre para ser conectado a la corriente de audio Permite marcadores con nombre para ser conectado a la corriente de audio Especifica una pronunciacin fontica para el texto contenido en el elemento correspondiente 3

la marca, despus de

marca, antes de

fonemas

resto

Una propiedad abreviada para establecer las propiedades 3 antes de reposo y descanso despus de la Especifica un descanso o lmite prosdico que se observa despus de hablar del contenido del elemento Especifica un descanso o lmite prosdico a observar antes de hablar del contenido del elemento 3

de descanso despus de la de descanso antes de

CSS3

la voz de balance

Especifica el balance entre los canales izquierdo y derecho Especifica el tiempo que debe tomar para hacer que el contenido del elemento seleccionado

voz-duracin

la voz de tono

Especifica la distancia promedio entre (a) frecuencia de la 3 voz que habla Especifica la variacin en la distancia promedio entre Controla la velocidad de la voz Indica la fuerza de nfasis que debe aplicarse Se refiere a la amplitud de la onda de salida por los sintetiza habla 3 3 3 3

-la voz de pitch-range voz-tasa de la voz voz-volumen

PROPIEDADES DE LA TABLA Propiedad border-collapse border-spacing Descripcin CSS

Especifica si o no bordes de la tabla debe ser derrumbado 2 Especifica la distancia entre los bordes de celdas adyacentes Especifica la colocacin de un ttulo de la tabla 2

caption-side vacas las clulas

Especifica si se mostrar o no las fronteras y de fondo en 2 las celdas vacas en una tabla Establece el algoritmo de disposicin para ser utilizado para una tabla 2

table-layout

CSS3

PROPIEDADES DEL TEXTO Propiedad color direccin letter-spacing Descripcin Establece el color del texto CSS 1

Especifica la direccin del texto / escritura de la direccin 2 Aumenta o disminuye el espacio entre caracteres en un texto Establece la altura de la lnea Especifica la alineacin horizontal del texto Especifica la decoracin aadida al texto Especifica la sangra de la primera lnea en un texto de bloque Controles de la capitalizacin del texto 1

line-height text-align text-decoration text-indent

1 1 1 1

text-transform unicode-bidi vertical-align espacio en blanco

1 2

Establece la alineacin vertical de un elemento Especifica cmo un espacio en blanco dentro de un elemento se maneja

1 1

word-spacing

Aumenta o disminuye el espacio entre las palabras en un 1 texto Especifica si un personaje puntuacion puede ser colocado 3 fuera de la caja de lnea Especifica si un personaje puntuacion debe ser recortado Describe cmo la ltima lnea de un bloque o una lnea justo antes de un salto de lnea forzado est alineado al text-align es "justificar" 3 3

ahorcamientopuntuacion puntuacion-trim text-align-ltima

justificar el texto

Especifica el mtodo utilizado cuando la justificacin text- 3

CSS3

align es "justificar" texto-resumen texto de desbordamiento text-shadow ajuste del texto palabra-break Especifica un esquema de texto Especifica lo que debe ocurrir cuando el texto se desborda el elemento contenedor Agrega sombra al texto Especifica las reglas de divisin de lneas de texto 3 3

3 3

Especifica las reglas de salto de lnea por falta de guiones 3 CJK Permite palabras largas e irrompibles que se rompen y pasan a la siguiente lnea 3

word-wrap

2D/3D PROPIEDADES DE TRANSFORMACIN Propiedad transformar transformar-origen Descripcin Aplica una transformacin de 2D o 3D a un elemento Le permite cambiar la posicin de elementos transformados Especifica cmo se representan los elementos anidados en el espacio 3D Especifica el punto de vista sobre cmo los elementos en 3D se ven Especifica la posicin inferior de los elementos en 3D CSS 3 3

transformar estilo

perspectiva

punto de vista de origen cara trasera, la visibilidad

Define si un elemento debe ser visible sin estar frente a la pantalla

CSS3

PROPIEDADES DE LA TRANSICIN Propiedad transicin Descripcin CSS

Una propiedad abreviada para establecer las propiedades 3 de transicin de cuatro Especifica el nombre de la propiedad CSS es el efecto de transicin para la Especifica cuntos segundos o milisegundos un efecto de transicin necesario para completar Especifica la curva de velocidad del efecto de transicin 3

transicin de la propiedad transicin de duracin

tiempo de transicin de funciones transicin de retardo

Especifica que el efecto de transicin se iniciar

PROPIEDADES DE LA INTERFAZ DE USUARIO Propiedad apariencia Descripcin Le permite hacer una mirada elemento como un elemento de interfaz de usuario estndar Permite definir ciertos elementos para adaptarse a una zona de cierta manera Proporciona el autor la posibilidad de estilo de un elemento con un equivalente icnica Especifica que para navegar cuando se utiliza la tecla de flecha hacia abajo de navegacin Especifica el orden de tabulacin para un elemento Especifica que para navegar cuando se utiliza la tecla de flecha a la izquierda de navegacin Especifica que para navegar cuando se utiliza la flecha derecha tecla de navegacin CSS 3

caja de tamao

icono

de navegacin hacia abajo nav-ndice de de navegacin a la izquierda navegacin derecha

3 3

CSS3

nav-up

Especifica que para navegar cuando se utiliza la flecha hacia arriba la tecla de navegacin

resumen de compensacin de cambiar el tamao de

Compensaciones de un esquema, y lo dibuja ms all del 3 borde fronterizo Especifica si un elemento puede cambiar el tamao por el 3 usuario

CSS3

CSS SELECTOR DE REFERENCIA SELECTORES DE CSS En CSS, los selectores son patrones que se utilizan para seleccionar el elemento (s) que desea aplicar un estilo. El "CSS" columna indica en qu versin de CSS la propiedad se define (CSS1, CSS2, CSS3 o). Selector . de clase Ejemplo .intro Ejemplo de descripcin Selecciona todos los elementos con class = "intro" Selecciona el elemento con id = "nombre" Selecciona todos los elementos Selecciona todos los elementos <p> Selecciona todos los elementos clave y todos los elementos <p> Selecciona todos los elementos dentro de los elementos clave <p> Selecciona todos los elementos <p> donde el padre es un elemento <div> CSS 1

# ID * elemento elemento, el elemento elemento de elemento de elemento > elemento elementos + elemento

#firstname * p div,p

1 2 1 1

div p

div>p

div+p

Selecciona todos los elementos que se colocan 2 <p> inmediatamente despus de los elementos clave Selecciona todos los elementos con un atributo de destino 2

[ atributo ]

[target]

[ atributo = valor ] [ atributo ~ = valor ]

[target=_blank] Selecciona todos los elementos con target = "_blank" [title~=flower] Selecciona todos los elementos con un atributo title que contiene la palabra "flor"

CSS3

[ atributo | = valor ] : Link : Visited : Activa : Hover

[lang|=en]

Selecciona todos los elementos con un valor del atributo lang que empiezan por "in" Selecciona todos los enlaces no visitados Selecciona todos los enlaces visitados Selecciona el enlace activo Selecciona en el puntero del ratn sobre los enlaces

a:link a:visited a:active a:hover

1 1 1 1

: Centrarse

input:focus

Selecciona el elemento de entrada que tiene el 2 foco Selecciona la primera letra de cada elemento <p> Selecciona la primera lnea de cada elemento <p> Selecciona todos los elementos <p> que es el primer hijo de su padre 1

: Primera letra

p:first-letter

: First-line

p:first-line

: First-child

p:first-child

: Antes de

p:before

Inserte el contenido antes de que el contenido 2 de cada elemento <p> Insertar el contenido despus de cada elemento <p> Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso" Selecciona todos los elementos que se <ul> precedido por un elemento <p> Selecciona todos los elementos cuyo atributo src <a> valor comienza con "https" Selecciona todos los elementos cuyo atributo src <a> valor termina con ". Pdf" 2

: Despus

p:after

: Lang ( idioma ) p:lang(it)

element1 ~ element2 [ atributo ^ = valor ] [ atribuyen $ = valor ]

p ~ ul

un [src = ^ "https"] un [src = $ ". pdf"]

CSS3

[ atributo * = valor ]

un [src = "* w3schools"]

Selecciona todos los elementos cuyo atributo src <a> valor contiene la subcadena "w3schools" Selecciona todos los elementos <p> que es el elemento <p> primero de su padre Selecciona todos los elementos <p> que es el elemento <p> pasado de su padre Selecciona todos los elementos <p> que es el elemento <p> slo de su padre Selecciona todos los elementos <p> que es el nico hijo de su padre Selecciona todos los elementos <p> que es el segundo hijo de su padre Selecciona todos los elementos <p> que es el segundo hijo de su padre, a contar desde el ltimo nio Selecciona todos los elementos <p> que es el elemento <p> segundo de su padre Selecciona todos los elementos <p> que es el elemento <p> segundo de su padre, a contar desde el ltimo nio Selecciona todos los elementos <p> que es el ltimo hijo de su padre Selecciona el elemento del documento raz Selecciona todos los elementos <p> que no tiene hijos (incluidos los nodos de texto)

: La primera de tipo

p: en primer lugar de tipo

: El ltimo de los p: el ltimo de de tipo los de tipo : Slo de tipo p: slo de tipo

: Un solo hijo

p: un solo hijo

: Nth-infantil ( n p: nth-infantil ) (2) : Nth-ltimainfantil ( n ) p: nth-ltimainfantil (2)

: Nth-de-tipo ( N t: n-simo de ) tipo (2) : Nth-ltima-de- p: nth-ltimatipo ( N ) del tipo (2)

: El ltimo nio

p: el ltimo nio : Root p: vaco

: Root : Vaco

3 3

: El objetivo

# Noticias: el objetivo

Selecciona el elemento activo actual # noticias 3 (hace clic en una URL que contiene ese nombre de anclaje)

CSS3

: Habilitado

entrada: activado entrada: desactivado entrada: comprueba : No (p)

Selecciona todos los elementos <input> habilitado Selecciona todos los elementos <input> discapacitados Selecciona todos los elementos <input> revisadas Selecciona cada elemento que no es un elemento <p> Selecciona la porcin de un elemento que es seleccionado por un usuario

: Desactivado

: Activada

: No ( seleccin ) Seleccin ::

Seleccin ::

CSS3

CSS AURAL DE REFERENCIA HOJAS DE ESTILO AUDITIVAS Hojas de estilo auditivas utilizar una combinacin de sntesis de voz y efectos de sonido para hacer que el usuario escuche a la informacin, en lugar de leer la informacin. Presentacin auditiva se puede utilizar: por las personas ciegas para ayudar a los usuarios que aprenden a leer para ayudar a los usuarios que tienen problemas de lectura para el entretenimiento en el hogar en el coche por la impresin con deficiencias de las comunidades

La presentacin auditiva convierte el documento en texto sin formato y con ello alimentan a un lector de pantalla (un programa que lee todos los caracteres en la pantalla). Un ejemplo de una hoja de estilo auditiva: h1,h2,h3,h4 { voice-family:male; richness:80; cue-before:url("beep.au") }

El ejemplo anterior har que el sintetizador de voz que reproduzca un sonido, a continuacin, hablar de los ttulos con una voz masculina muy rico.

CSS AURAL DE REFERENCIA El "CSS" columna indica en qu versin de CSS la propiedad se define (CSS1 o CSS2).

CSS3

Propiedad azimut

Descripcin Establece que el sonido debe provenir de

Valores angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards cue-before cue-after ninguna url

CSS 2

seal

Establece las propiedades de referencia en una declaracin de Especifica un sonido que se reproducir despus de hablar del contenido del elemento Especifica un sonido que se reproducir antes de hablar del contenido del elemento Establece que el sonido debe provenir de

cue-after

cue-before

ninguna url

elevacin

ngulo por debajo de nivel superior ms alta baja pausa antespausa-despus tiempo % tiempo %

romper

Establece las propiedades de pausa en una declaracin Especifica una pausa despus de hablar del contenido del elemento Especifica una pausa antes de hablar del contenido del elemento

pausa-despus

pausa-antes

CSS3

campo

Especifica el tono de voz

frecuencia de x-bajo bajo medio alto x alto nmero

pitch-range

Especifica la variacin en el tono de voz. (Tono de voz o de voz animado?) Especifica un sonido a reproducir mientras se habla del contenido del elemento

play-during

Auto 2 ninguna url mezcla de repeticin

riqueza

Especifica la riqueza de la voz al hablar. (Voz enriquecido o hilo de voz?) Especifica si el contenido har que fonticamente

nmero

hablar

normal, no hechizo de salida

speak-header

Especifica cmo manejar los siempre encabezados de la tabla. En caso de , una vez las cabeceras se habla antes de cada clula, o slo antes de una clula con una cabecera diferente que la celda anterior Especifica cmo hablan los nmeros dgitos continuos Especifica cmo hablan los caracteres de puntuacin Especifica la velocidad del habla ninguno de cdigo nmero de x-lento lento a medio rpido x-rpido ms rpido

speak-numeral

hablan-puntuacion

speech-rate

CSS3

ms lento estrs Especifica el "estrs" en la voz que habla Especifica la familia de la voz del que habla Especifica el volumen del habla nmero 2

voz-familia

especfica-la voz genrica de voz nmero % en silencio x-soft suave a medio alto x alto

volumen

CSS3

CSS WEB COMBINACIONES DE FUENTES SEGURAS Comnmente utilizados combinaciones de fuentes La propiedad font-family debe mantener los nombres de varias fuentes como una "reserva" del sistema, para asegurar la mxima compatibilidad entre navegadores y sistemas operativos. Si el navegador no es compatible con la primera fuente, se trata de la siguiente fuente. Comience con la fuente que desee, y al final con una familia genrica, para permitir que el navegador de escoger una fuente similar en la familia genrica, si no hay otras fuentes disponibles: Ejemplo: p{font-family:"Times New Roman", Times, serif} A continuacin se presentan algunas combinaciones de fuentes de uso comn, organizados por familia genrica.

SERIF FUENTES font-family Georgia, serif Ejemplo de texto Esta es una partida Este es un prrafo "Palatino Linotype", "Book Antiqua", Palatino, serif Esta es una partida Este es un prrafo "Times New Roman", Times, serif Esta es una partida Este es un prrafo

SANS-SERIF font-family Arial, Helvetica, sans-serif Ejemplo de texto Esta es una partida Este es un prrafo

CSS3

Arial Negro, Gadget, sans-serif

Esta es una partida Este es un prrafo

"Comic Sans MS", cursiva, sans-serif

Esta es una partida Este es un prrafo

Impacto, carbn, sans-serif

Esta es una partida Este es un prrafo

"Lucida Sans Unicode", "Lucida Grande", sansserif

Esta es una partida Este es un prrafo

Tahoma, Ginebra, sans-serif

Esta es una partida Este es un prrafo

"Trebuchet MS", Helvetica, sans-serif

Esta es una partida Este es un prrafo

Verdana, Geneva, sans-serif

Esta es una partida Este es un prrafo

MONOSPACE FUENTES font-family "Courier New", Courier, monospace Ejemplo de texto Esta es una partida Este es un prrafo "Lucida Console", Mnaco, monospace Esta es una partida Este es un prrafo

CSS3

CSS UNIDADES LOS VALORES DE MEDICIN

Unidad % en cm mm en porcentaje pulgada centmetro milmetro

Descripcin

1em es igual al tamao de la fuente actual. 2em significa 2 veces el tamao de la fuente actual. Por ejemplo, si un elemento se muestra con una fuente de 12 puntos, entonces '2 em 'es 24 puntos. El 'em' es una unidad muy til en la CSS, ya que puede adaptarse automticamente a la fuente que utiliza el lector un ex es la altura x de la fuente (altura x es por lo general alrededor de la mitad el tamao de fuente) el punto (1 punto es igual a 1/72 pulgadas) pica (1 unidad es la misma que 12 puntos) pxeles (un punto en la pantalla del ordenador)

ex

en PC px

CSS3

CSS COLORES Los colores se muestra la combinacin de rojo, verde y azul. LOS VALORES DE COLOR CSS colores se definen mediante un valor hexadecimal (hex) notacin para la combinacin de rojo, verde, y los valores de color azul (RGB). El valor ms bajo que se puede dar a una de las fuentes de luz es 0 (hexadecimal 00). El valor ms alto es 255 (FF hex). Los valores hexadecimales se escriben como nmeros de 3 dgitos dobles, comenzando con un signo #. Ejemplos de colores: Color Color de HEX # 000000 # FF0000 # 00FF00 # 0000FF # FFFF00 # 00FFFF # FF00FF # C0C0C0 # FFFFFF Color RGB rgb (0,0,0) rgb (255,0,0) rgb (0,255,0) rgb (0,0,255) rgb (255,255,0) rgb (0,255,255) rgb (255,0,255) rgb (192,192,192) rgb (255,255,255)

16 millones de colores diferentes La combinacin de valores Rojo, Verde y Azul 0-255 da un total de ms de 16 millones de colores diferentes para jugar (256 x 256 x 256). Mayora de los monitores modernos son capaces de mostrar al menos 16.384 colores diferentes.

CSS3

Si nos fijamos en la tabla de colores a continuacin, podrs ver el resultado de la variacin de la luz roja de 0 a 255, mientras se mantiene la luz verde y azul en cero. Para ver una lista llena de color se mezcla cuando la luz roja vara de 0 a 255, haga clic en uno de los valores RGB o hexadecimal a continuacin. Luz roja HEX # 000000 # 080000 # 100000 # 180000 # 200000 # 280000 # 300000 # 380000 # 400000 # 480000 # 500000 # 580000 # 600000 # 680000 # 700000 # 780000 # 800000 RGB rgb (0,0,0) rgb (8,0,0) RGB (16,0,0) RGB (24,0,0) RGB (32,0,0) RGB (40,0,0) RGB (48,0,0) RGB (56,0,0) RGB (64,0,0) RGB (72,0,0) RGB (80,0,0) RGB (88,0,0) RGB (96,0,0) rgb (104,0,0) rgb (112,0,0) rgb (120,0,0) rgb (128,0,0)

CSS3

# 880000 # 900000 # 980000 # A00000 # A80000 # B00000 # B80000 # C00000 # C80000 # D00000 # D80000 # E00000 # E80000 # F00000 # F80000 # FF0000

rgb (136,0,0) rgb (144,0,0) rgb (152,0,0) rgb (160,0,0) rgb (168,0,0) rgb (176,0,0) rgb (184,0,0) rgb (192,0,0) rgb (200,0,0) rgb (208,0,0) rgb (216,0,0) rgb (224,0,0) rgb (232,0,0) rgb (240,0,0) rgb (248,0,0) rgb (255,0,0)

SHADES OF GRAY Colores grises se muestran usando una cantidad igual de energa a todas las fuentes de luz. Para hacerlo ms fcil para que usted pueda seleccionar el color gris a la derecha, hemos compilado una tabla de tonos de gris para usted:

CSS3

Gray Shades

HEX # 000000 # 080808 # 101010 # 181818 # 202020 # 282828 # 303030 # 383838 # 404040 # 484848 # 505050 # 585858 # 606060 # 686868 # 707070 # 787878 # 808080 # 888888 # 909090 # 989898

RGB rgb (0,0,0) rgb (8,8,8) rgb (16,16,16) rgb (24,24,24) rgb (32,32,32) rgb (40,40,40) rgb (48,48,48) rgb (56,56,56) rgb (64,64,64) rgb (72,72,72) rgb (80,80,80) rgb (88,88,88) rgb (96,96,96) rgb (104,104,104) rgb (112,112,112) rgb (120,120,120) rgb (128,128,128) rgb (136,136,136) rgb (144,144,144) rgb (152,152,152)

CSS3

# A0A0A0 # A8A8A8 # B0B0B0 # B8B8B8 # C0C0C0 # C8C8C8 # D0D0D0 # D8D8D8 # E0E0E0 # E8E8E8 # F0f0f0 # F8F8F8 # FFFFFF

rgb (160,160,160) rgb (168,168,168) rgb (176,176,176) rgb (184,184,184) rgb (192,192,192) rgb (200,200,200) rgb (208,208,208) rgb (216,216,216) rgb (224,224,224) rgb (232,232,232) rgb (240,240,240) rgb (248,248,248) rgb (255,255,255)

WEB SAFE COLORS? Hace algunos aos, cuando las computadoras mxima admitida 256 colores diferentes, una lista de 216 "colores para la web" se propuso como un estndar Web, reservndose 40 colores del sistema fijo. Esto no es importante ahora, ya que la mayora de los ordenadores pueden mostrar millones de colores diferentes, pero la eleccin se deja a usted. El 216 cross-browser paleta de colores fue creado para asegurar que todos los equipos se mostraban correctamente los colores cuando se ejecuta una paleta de 256 colores:

CSS3

000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600

000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 990033 993333 996633

000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 990066 993366 996666

000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 990099 993399 996699

0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC

0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF

CSS3

999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

CSS3

CSS VALORES DE COLOR LEGALES COLORES CSS Los colores en CSS se puede especificar los siguientes mtodos: Colores hexadecimales Colores RGB RGBA colores Colores HSL HSLA colores Predefinidos o Cross-browser nombres de los colores

COLORES HEXADECIMALES Los valores hexadecimales de color son compatibles con todos los principales navegadores. Un color hexadecimal se especifica con: # RRGGBB, donde el RR (rojo), GG (verde) y BB (azul) enteros hexadecimales especificar los componentes del color. Todos los valores deben estar entre 0 y FF. Por ejemplo, el valor # 0000FF se representa como azul, debido a que el componente azul se establece en su valor ms alto (ss) y los dems se ponen a 0. Ejemplo p { background-color:#ff0000; }

COLORES RGB Valores de color RGB son compatibles con todos los principales navegadores. Un valor de color RGB se especifica con: RGB (rojo, verde, azul). Cada parmetro (rojo, verde y azul) define la intensidad del color y puede ser un nmero entero entre 0 y 255 o un valor de porcentaje (de 0% a 100%). Por ejemplo, el rgb (0,0,255) el valor se representa en color azul, debido a que el parmetro de color azul se establece en su valor ms alto (255) y los dems se ponen a 0. Adems, los valores siguientes se define el mismo color: rgb (0,0,255) y RGB (0%, 0%, 100%).

CSS3

Ejemplo: p { background-color:rgb(255,0,0); } LOS COLORES RGBA Valores RGBA de color son compatibles con IE9 +, Firefox 3 +, Chrome, Safari, Opera y en 10 +. Los valores de color RGBA son una extensin de los valores de color RGB con un canal alfa - que especifica la opacidad del objeto. Un valor de color RGBA se especifica con: rgb (rojo, verde, azul, alfa). El parmetro alfa es un nmero entre 0.0 (completamente transparente) y 1,0 (totalmente opaco). Ejemplo p { background-color:rgba(255,0,0,0.5); } COLORES HSL Los valores de color HSL son compatibles con IE9 +, Firefox, Chrome, Safari y Opera 10 +. HSL significa matiz, saturacin y luminosidad - y representa una representacin coordenada cilndrica de colores. Un valor de color HSL se especifica con: HSL (matiz, saturacin, luminosidad). El tono es un grado en la rueda de color (de 0 a 360) - 0 (o 360) es de color rojo, 120 es de color verde, 240 es de color azul. La saturacin es un valor porcentual, 0% significa un tono de gris y el 100% es el color. La ligereza es tambin un porcentaje; 0% es negro, 100% es de color blanco. Ejemplo p { background-color:hsl(120,65%,75%); }

CSS3

HSLA COLORES Los valores de HSLA de color son compatibles con IE9 +, Firefox 3 +, Chrome, Safari, Opera y en 10 +. Los valores de color HSLA son una extensin de los valores de color HSL con un canal alfa - que especifica la opacidad del objeto. Un valor de color HSLA se especifica con: HSLA (matiz, saturacin, luminosidad, alfa), donde el parmetro alfa define la opacidad. El parmetro alfa es un nmero entre 0.0 (completamente transparente) y 1,0 (totalmente opaco). Ejemplo p { background-color:hsla(120,65%,75%,0.3); }

CSS3

CSS NOMBRES DE COLORES LOS NOMBRES DE COLOR COMPATIBLES CON TODOS LOS NAVEGADORES 147 nombres de los colores se definen en el HTML y CSS de color especificacin (17 colores estndar, adems de ms 130). La siguiente tabla muestra a todos ellos, junto con sus valores hexadecimales. Consejo: Los 17 colores estndar son: aqua, negro, azul, fucsia, gris, gris, verde, lima, marrn, azul marino, oliva, prpura, rojo, plata, azul, blanco y amarillo. Haga clic en un nombre de color (o un valor hexadecimal) para ver el color que el fondo de color, junto con los colores de texto diferentes:

ORDENADO POR NOMBRE DEL COLOR Misma lista ordenada por valores hexadecimales Nombre Color AliceBlue AntiqueWhite HEX # F0F8FF # FAEBD7 # 00FFFF # 7FFFD4 # F0FFFF # F5F5DC # FFE4C4 # 000000 # FFEBCD Color Sombras Mezclar Sombras Sombras Mezclar Mezclar

Agua Aguamarina

Sombras Sombras

Mezclar Mezclar

Azul celeste Beige

Sombras Sombras

Mezclar Mezclar

Sopa de mariscos Negro

Sombras Sombras

Mezclar Mezclar

BlanchedAlmond

Sombras

Mezclar

CSS3

Azul BlueViolet

# 0000FF # 8A2BE2 # A52A2A # DEB887 # 5F9EA0 # 7FFF00 # D2691E # FF7F50 # 6495ED # FFF8DC # DC143C # 00FFFF # 00008B # 008B8B # B8860B #

Sombras Sombras

Mezclar Mezclar

Marrn

Sombras

Mezclar

BurlyWood

Sombras

Mezclar

CadetBlue

Sombras

Mezclar

Chartreuse Chocolate

Sombras Sombras

Mezclar Mezclar

Coral CornflowerBlue

Sombras Sombras

Mezclar Mezclar

Barba de Maz

Sombras

Mezclar

Carmes

Sombras

Mezclar

Cyan DarkBlue

Sombras Sombras

Mezclar Mezclar

DarkCyan

Sombras

Mezclar

DarkGoldenRod

Sombras

Mezclar

Gris_oscuro

Sombras

Mezclar

CSS3

A9A9A9 Gris oscuro # A9A9A9 # 006400 # BDB76B # 8B008B # 556B2F # FF8C00 # 9932CC # 8B0000 # E9967A # 8FBC8F # 483D8B # 2F4F4F # 2F4F4F # 00CED1 # Sombras Mezclar

Verde oscuro

Sombras

Mezclar

DarkKhaki

Sombras

Mezclar

DarkMagenta

Sombras

Mezclar

DarkOliveGreen

Sombras

Mezclar

Darkorange DarkOrchid

Sombras Sombras

Mezclar Mezclar

Darkred

Sombras

Mezclar

DarkSalmon

Sombras

Mezclar

DarkSeaGreen

Sombras

Mezclar

DarkSlateBlue

Sombras

Mezclar

DarkSlateGray DarkSlateGrey DarkTurquoise

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

DarkViolet

Sombras

Mezclar

CSS3

9400D3 Fuera de la iglesia DeepSkyBlue DimGray # FF1493 # 00BFFF # 696969 # 696969 # 1E90FF # B22222 # FFFAF0 # 228B22 # FF00FF # DCDCDC # F8F8FF # FFD700 # DAA520 # 808080 # 808080 Sombras Sombras Sombras Mezclar Mezclar Mezclar

DimGrey

Sombras

Mezclar

DodgerBlue Ladrillo refractario

Sombras Sombras

Mezclar Mezclar

FloralWhite ForestGreen

Sombras Sombras

Mezclar Mezclar

Fucsia Gainsboro

Sombras Sombras

Mezclar Mezclar

GhostWhite Oro

Sombras Sombras

Mezclar Mezclar

La vara de oro

Sombras

Mezclar

Gris

Sombras

Mezclar

Gris

Sombras

Mezclar

CSS3

Verde

# 008000 # ADFF2F # F0FFF0 # FF69B4 # CD5C5C # 4b0082 # FFFFF0 # F0E68C # E6E6FA # FFF0F5 # 7CFC00 # FFFACD # ADD8E6 # F08080 # E0FFFF

Sombras

Mezclar

VerdeAmarillo

Sombras

Mezclar

Honeydew Hotpink IndianRed

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

ndigo

Sombras

Mezclar

Marfil Caqui

Sombras Sombras

Mezclar Mezclar

Lavanda

Sombras

Mezclar

LavenderBlush LawnGreen

Sombras Sombras

Mezclar Mezclar

LemonChiffon

Sombras

Mezclar

Lightblue

Sombras

Mezclar

LightCoral LightCyan

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

LightGoldenRodYellow # FAFAD2

CSS3

Gris_claro

# D3D3D3 # D3D3D3 # 90EE90 # FFB6C1 # FFA07A # 20B2AA # 87CEFA # 778899 # 778899 # B0C4DE # FFFFE0 # 00FF00 # 32CD32 # FAF0E6 # FF00FF #

Sombras

Mezclar

Gris claro

Sombras

Mezclar

Verde claro

Sombras

Mezclar

LightPink

Sombras

Mezclar

LightSalmon

Sombras

Mezclar

LightSeaGreen

Sombras

Mezclar

LightSkyBlue

Sombras

Mezclar

LightSlateGray

Sombras

Mezclar

LightSlateGrey

Sombras

Mezclar

LightSteelBlue

Sombras

Mezclar

LightYellow Cal Verde lima

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

Ropa de cama Magenta Granate

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

CSS3

800000 MediumAquaMarine # 66CDAA # 0000CD # BA55D3 # 9370D8 # 3CB371 # 7B68EE # 00FA9A # 48D1CC # C71585 # 191970 # F5FFFA # FFE4E1 # FFE4B5 # FFDEAD # Sombras Mezclar

Mediumblue

Sombras

Mezclar

MediumOrchid

Sombras

Mezclar

MediumPurple

Sombras

Mezclar

MediumSeaGreen

Sombras

Mezclar

MediumSlateBlue

Sombras

Mezclar

MediumSpringGreen

Sombras

Mezclar

MediumTurquoise

Sombras

Mezclar

MediumVioletRed

Sombras

Mezclar

Midnightblue

Sombras

Mezclar

MintCream MistyRose Mocasn NavajoWhite

Sombras Sombras Sombras Sombras

Mezclar Mezclar Mezclar Mezclar

Marina de guerra

Sombras

Mezclar

CSS3

000080 OldLace # FDF5E6 # 808000 # 6B8E23 # FFA500 # FF4500 # DA70D6 # EEE8AA # 98FB98 # AFEEEE # D87093 # FFEFD5 # FFDAB9 # CD853F # FFC0CB # Sombras Mezclar

Oliva

Sombras

Mezclar

Olivedrab

Sombras

Mezclar

Naranja OrangeRed Orqudea

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

PaleGoldenRod

Sombras

Mezclar

PaleGreen

Sombras

Mezclar

PaleTurquoise

Sombras

Mezclar

PaleVioletRed

Sombras

Mezclar

PapayaWhip PeachPuff

Sombras Sombras

Mezclar Mezclar

Per

Sombras

Mezclar

Rosa

Sombras

Mezclar

Ciruela

Sombras

Mezclar

CSS3

DDA0DD Powderblue # B0E0E6 # 800080 # FF0000 # BC8F8F # 4169E1 # 8B4513 # FA8072 # F4A460 # 2E8B57 # FFF5EE # A0522D # C0C0C0 # 87CEEB # 6A5ACD Sombras Mezclar

Prpura

Sombras

Mezclar

Rojo RosyBrown

Sombras Sombras

Mezclar Mezclar

Royal

Sombras

Mezclar

SaddleBrown

Sombras

Mezclar

Salmn

Sombras

Mezclar

Sandybrown

Sombras

Mezclar

SeaGreen

Sombras

Mezclar

SeaShell Sienna

Sombras Sombras

Mezclar Mezclar

Plata

Sombras

Mezclar

SkyBlue

Sombras

Mezclar

SlateBlue

Sombras

Mezclar

CSS3

SlateGray

# 708090 # 708090 # FFFAFA # 00FF7F # 4682B4 # D2B48C # 008080 # D8BFD8 # FF6347 # 40E0D0 # EE82EE # F5DEB3 # FFFFFF # F5F5F5 # FFFF00 # 9ACD32

Sombras

Mezclar

SlateGrey

Sombras

Mezclar

Nieve SpringGreen Steelblue

Sombras Sombras Sombras

Mezclar Mezclar Mezclar

Bronceado

Sombras

Mezclar

Teal

Sombras

Mezclar

Cardo

Sombras

Mezclar

Tomate Turquesa

Sombras Sombras

Mezclar Mezclar

Violeta

Sombras

Mezclar

Trigo

Sombras

Mezclar

Color blanco WhiteSmoke Amarillo AmarilloVerde

Sombras Sombras Sombras Sombras

Mezclar Mezclar Mezclar Mezclar

CSS3

CSS3 NAVEGADOR DE REFERENCIA DE APOYO COMPATIBILIDAD CON NAVEGADORES CSS3 no es todava un estndar del W3C, pero todos los principales navegadores ya estn apoyando muchas de las nuevas caractersticas. A continuacin se muestra una referencia de todas las nuevas propiedades de CSS3 y su compatibilidad con navegadores: Propiedad la alineacin de ajuste alineacin de la lnea base animacin la animacin de nombre la animacin de duracin animacin-tiempo-funcin la animacin de retardo animacin iteracin recuento animacin de direccin animacin-juego-estado apariencia cara trasera, la visibilidad de fondo-clip de fondo de origen fondo de tamao lnea de base del turno 9 9 9 4 4 4 10 4 4 5 5 5 10,5 10,5 10,5 5 5 5 5 5 5 5 5 3 IE Firefox Cromo Safari pera

CSS3

marcador de etiqueta marcador de nivel favorito-blanco border-bottom-izquierda-radio border-bottom-derecha-radio border-image border-image-inicio border-image-repeat border-image-slice border-image-fuente frontera-imagen-anchura border-radius border-top-izquierda-radio border-top-derecha-radio Caja de decoracin-break caja-align cuadro de direccin caja-flex caja-flex-grupo caja de las lneas de caja ordinal grupo 9 9 9 4 4 4 5 5 5 5 5 5 10,5 10,5 10,5 9 9 4 4 5 5 5 5 3 10,5 10,5

CSS3

caja-oriente BOX-PACK box-shadow caja de tamao color perfil columna-llenar la columna de diferencia la columna de la regla columna de la regla de color la columna de la regla de estilo la columna de la regla de ancho columna-span columna de ancho columnas columna de recuento cosecha dominante-lnea de base gota-inicial-despus de ajuste cada inicial, despus de alinear cada inicial, antes de ajustar gota-inicial-antes de-align 9 8 4 10 9 10,5

CSS3

cada inicial de tamao cada de valor inicial ajuste ajuste de posicin flotan-offset @ Font-face font-size-adjust font-stretch la red de columnas la red de filas ahorcamiento-puntuacion guiones, despus de guiones, antes de de Separar los caracteres de Separar lneas guiones de los recursos guiones icono imagen-orientacin imagen-resolucin @ Fotogramas clave 4 9 3.6 2 4 3 10

CSS3

inline-box-align la lnea de apilamiento la lnea de apilamiento-ruby la lnea de apilamiento de desplazamiento la lnea de la estrategia de apilamiento marcar la marca, despus de marca, antes de marcas marquesina de direccin carpa-juego-cuenta marquesina de velocidad carpa de estilo movimiento al de navegacin hacia abajo nav-ndice de de navegacin a la izquierda navegacin derecha nav-up opacidad resumen de compensacin de 9 2 4 4 11,5 11,5 11,5 11,5 11,5 10 11

CSS3

desbordamiento de estilo overflow-x el desbordamiento de Y pgina pgina de la poltica perspectiva punto de vista de origen fonemas puntuacion-trim representacin-la intencin cambiar el tamao de resto de descanso despus de la de descanso antes de rotacin la rotacin de punto ruby-align rub saliente rub posicin ruby-span tamao 4 5 9 9 2 2

CSS3

conjunto de cadenas objetivo nombre de destino meta-nueva diana posicin text-align-ltima texto-nfasis el texto de la altura justificar el texto texto-resumen texto de desbordamiento text-shadow ajuste del texto transformar transformar-origen transformar estilo transicin transicin de la propiedad transicin de duracin tiempo de transicin de funciones transicin de retardo 4 4 4 4 4 9 9 3.6 3.6 5 5 7 3 4 4 4 4 10,6 10 5

CSS3

palabra-break word-wrap la voz de balance voz-duracin la voz de tono -la voz de pitch-range voz-tasa de la voz voz-volumen

5 5 3.6

EXPLICACIONES DE ICONOS Con el apoyo de Internet Explorer Con el apoyo de Firefox Con el apoyo de Google Chrome Con el apoyo de Safari Con el apoyo de la pera

Con el apoyo de Internet Explorer con el prefijo -ms Con el apoyo de Firefox con el prefijo -mozCon el apoyo de Google Chrome con el prefijo -webkitCon el apoyo de Safari con el prefijo -webkit-

CSS3

Con el apoyo de la pera con el prefijo -oCon el apoyo de la pera con el prefijo -xv-

Para algunas propiedades que vea el icono del navegador y un nmero: 9 4 4 5 10,5

El nmero indica la versin del navegador en el que la propiedad fue apoyado en primer lugar.

CSS3