introduccion css3

93
INTRODUCCION CSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. Los navegadores siempre apoyará CSS2. MÓDULOS DE CSS3 CSS3 se divide en "módulos". La especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también. Algunos de los más importantes CSS3 módulos son: Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseño de columna múltiple Interfaz de usuario RECOMENDACIÓN CSS3 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

Upload: noe-palma

Post on 05-Aug-2015

98 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: INTRODUCCION  CSS3

INTRODUCCION

CSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. Los navegadores siempre apoyará CSS2.

MÓDULOS DE CSS3

CSS3 se divide en "módulos". La especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también.

Algunos de los más importantes CSS3 módulos son:

Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseño de columna múltiple Interfaz de usuario

RECOMENDACIÓN CSS3

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

Page 2: INTRODUCCION  CSS3

CSS3 FRONTERAS

Con CSS3, se puede crear bordes redondeados, añadir sombra a las cajas, y utilizar una imagen como una frontera - sin necesidad de utilizar un programa de diseño, como Photoshop.

En este capítulo 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

Adición de esquinas redondeadas en CSS2 fue difícil. Tuvimos que usar imágenes diferentes para cada esquina.

En CSS3, crear las esquinas redondeadas es fácil.

En CSS3, la propiedad border-radius se utiliza para crear 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 SHADOW BOX

CSS3

Esta caja tiene las esquinas redondeadas!

Page 3: INTRODUCCION  CSS3

En CSS3, la propiedad box-shadow se utiliza para añadir 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 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 */}

PROPIEDADES NUEVAS FRONTERAS

Propiedad Descripción CS

CSS3

Page 4: INTRODUCCION  CSS3

S

border-image Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades

3

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

3

box-shadow Se conecta uno o más caída de las sombras a la caja 3

PROPIEDADES NUEVAS FRONTERAS

Propiedad Descripción CSS

border-image Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades

3

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

3

box-shadow Se conecta uno o más caída de las sombras a la caja 3

CSS3

Page 5: INTRODUCCION  CSS3

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á acerca de las propiedades de fondo siguientes:

fondo de tamaño de fondo de origen

También aprenderás cómo utilizar múltiples imágenes de fondo.

SOPORTE DEL NAVEGADOR

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 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 tamaño especifica el tamaño de la imagen de fondo.

Antes de CSS3, el tamaño de la imagen de fondo se determinó 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 utilizar imágenes de fondo en diferentes contextos.

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

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:

CSS3

Page 6: INTRODUCCION  CSS3

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 imágenes 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 MÚLTIPLES IMÁGENES DE FONDO

CSS3

Page 7: INTRODUCCION  CSS3

CSS3 permite el uso de varias imágenes de fondo para un elemento

Ejemplo:

Establecer dos imágenes de fondo para el elemento del cuerpo:

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

Nuevas Propiedades de fondo

Propiedad Descripción CSS

de fondo-clip Especifica el área de la pintura de las imágenes de fondo 3

de fondo de origen Especifica el área de posicionamiento de las imágenes de fondo

3

fondo de tamaño Especifica el tamaño de las imágenes de fondo 3

CSS3

Page 8: INTRODUCCION  CSS3

CSS3 EFECTOS DE TEXTO

EFECTOS DE TEXTO CSS3

CSS3 contiene varias características nuevas de texto.

En este capítulo usted aprenderá acerca de las propiedades de texto siguientes:

text-shadow word-wrap

SOPORTE DEL NAVEGADOR

Internet Explorer no es compatible aún 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:

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

CSS3

Este párrafo contiene una palabra muy larga:

thisisaveryveryveryveryveryverylongword

La palabra siempre se romperá y pase a la siguiente línea.

Page 9: INTRODUCCION  CSS3

El código CSS es como sigue:

Ejemplo:

Deje que las palabras largas para poder romper y envolver en la siguiente línea:

NUEVAS PROPIEDADES DE TEXTO

Propiedad Descripción CSS

ahorcamiento-puntuacion

Especifica si un personaje puntuacion puede ser colocado fuera de la caja de línea

3

puntuacion-trim Especifica si un personaje puntuacion debe ser recortado 3

text-align-últimaDescribe cómo la última línea de un bloque o una línea justo antes de un salto de línea forzado está alineado al text-align es "justificar"

3

texto-énfasisAplica marcas de énfasis, y el color de primer plano de las marcas de énfasis, al texto del elemento

3

justificar el textoEspecifica el método utilizado cuando la justificación text-align es "justificar"

3

texto-resumen Especifica un esquema de texto 3

texto de desbordamiento

Especifica lo que debe ocurrir cuando el texto se desborda el elemento contenedor

3

text-shadow Agrega sombra al texto 3

ajuste del texto Especifica las reglas de división de líneas de texto 3

palabra-breakEspecifica las reglas de salto de línea por falta de guiones CJK

3

word-wrapPermite palabras largas e irrompibles que se rompen y pasan a la siguiente línea

3

CSS3

p {word-wrap:break-word;}

Page 10: INTRODUCCION  CSS3

CSS3 TRANSICIONES

LAS TRANSICIONES CSS3

CSS3

Page 11: INTRODUCCION  CSS3

Con CSS3, podemos añadir 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 aún con la propiedad de transición.

Firefox 4 requiere el prefijo-moz-.

Chrome y Safari requiere el prefijo-webkit-.

Opera requiere que el prefijo-o-.

¿CÓMO 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 duración del efecto.

Ejemplo:

Efecto de transición de 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, porque 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:

Especificar: pase para los elementos clave:

div:hover{

CSS3

Page 12: INTRODUCCION  CSS3

width:300px;}

Nota: Cuando el cursor del ratón sobre el elemento, que cambia gradualmente de nuevo a su estilo original.

MÚLTIPLES CAMBIOS

Para agregar un efecto de transición de más de un estilo, añadir más propiedades, separados por comas:

Ejemplo:

Agregar efector sobre ka anchura, 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

La siguiente tabla muestra todas las propiedades de transición:

Propiedad Descripción CSS

transición Una propiedad abreviada para establecer las propiedades de transición de cuatro en una sola propiedad

3

transición de la propiedad

Especifica el nombre de la propiedad CSS para el cual se aplica la transición

3

transición de duración Define la longitud de tiempo que tarda una transición. Por defecto 0

3

tiempo de transición de funciones

Describe cómo la velocidad durante una transición se puede calcular. Por defecto "facilidad"

3

transición de retardo Define cuando la transición se iniciará. Por defecto 0 3

CSS3

Page 13: INTRODUCCION  CSS3

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;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 al anterior, utilizando la propiedad de transición abreviada:

div{transition: width 1s linear 2s;

CSS3

Page 14: INTRODUCCION  CSS3

/* 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 pueden sustituir a las imágenes animadas, animaciones Flash, y JavaScripts en muchas páginas web.

CSS3 Animación

CSS3

Page 15: INTRODUCCION  CSS3

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 animación se ha creado. Especifique un estilo CSS dentro de la regla @ fotogramas clave y la animación poco a poco va a cambiar el estilo actual al nuevo estilo.

SOPORTE DEL NAVEGADOR

Internet Explorer y Opera no es compatible aún con la regla de los fotogramas clave @ o la propiedad de animación.

Firefox requiere el prefijo-moz-, mientras que Chrome y Safari requieren el prefijo-webkit-.

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

Enlazar la animación a un selector mediante la especificación de por lo menos estas dos propiedades de CSS3 animación:

Especifique el nombre de la animación Especificar la duración de la animación

CSS3

Page 16: INTRODUCCION  CSS3

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

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 LAS ANIMACIONES EN CSS3?

Una animación 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 animación, 100% es cuando la animación es completa.

Para soporte mejor navegador, siempre debe definir tanto el 0% y 100% de los selectores.

Ejemplo:

Cambiar el colorde fondo cuando la animación es de 25%, 50% , y de nuevo cuando la animación es completa al 100%:

@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}

CSS3

Page 17: INTRODUCCION  CSS3

}

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

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

CSS3

Page 18: INTRODUCCION  CSS3

}

@-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 ANIMACIÓN PROPIEDADES

La siguiente tabla muestra la regla de los fotogramas clave @ y todas las propiedades de la animación:

Propiedad Descripción CSS

@ Fotogramas clave Especifica la animación 3

animación Una propiedad de una abreviación para todos los las propiedades de animación, con excepción de la propiedad de animación-juego-Estado

3

la animación de nombre

Especifica el nombre de la animación de fotogramas clave @

3

la animación de duración

Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo. Por defecto 0

3

animación-tiempo-función

Describe cómo la animación progresará más de un ciclo de su duración. Por defecto "facilidad"

3

la animación de retardo

Especifica cuando la animación se iniciará. Por defecto 0 3

CSS3

Page 19: INTRODUCCION  CSS3

animación iteración recuento

Especifica el número de veces que se juega una animación. Por defecto 1

3

animación de dirección

Especifica si la animación se reproduzca a la inversa de los ciclos alternos. Por defecto "normal"

3

animación-juego-estado

Especifica si la animación se está ejecutando o está en pausa. Por defecto "en ejecución"

3

Los dos ejemplos siguientes conjuntos de todas las propiedades de la animación:

Ejemplo:

Ejecutar una animación llamada mi primer , con toda la animación conjunto de propiedades:

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

Ejemplo:

La misma animación que el anterior, utilizando la propiedad de animación abreviada:

CSS3

Page 20: INTRODUCCION  CSS3

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

CSS3 VARIAS COLUMNAS

Con CSS3, puede crear varias columnas para el tendido de texto - como en los periódicos!

En este capítulo usted aprenderá acerca de las múltiples propiedades de columna siguientes:

columna de recuento la columna de diferencia la columna de la regla

SOPORTE DEL NAVEGADOR

CSS3

Page 21: INTRODUCCION  CSS3

Internet Explorer no es compatible aún 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 número 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 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

CSS3

Page 22: INTRODUCCION  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 Descripción CSS

columna de recuento Especifica el número de columnas de un elemento se debe dividir en

3

columna-llenar Especifica cómo llenar las columnas 3

la columna de diferencia

Especifica el espacio entre las columnas 3

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

3

columna de la regla de color

Especifica el color de la regla entre las columnas 3

la columna de la regla de estilo

Especifica el estilo de la regla entre las columnas 3

la columna de la regla de ancho

Especifica el ancho de la regla entre las columnas 3

columna-span Especifica el número de columnas que 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 3

CSS3

Page 23: INTRODUCCION  CSS3

columna y la columna de conteo

CSS3 INTERFAZ DE USUARIO

CSS3 INTERFAZ DE USUARIO

En CSS3, algunas de las características nueva interfaz de usuario son elementos de tamaño caja de cambio de tamaño, y que describen.

En este capítulo usted aprenderá acerca de las propiedades de la interfaz de usuario siguientes:

cambiar el tamaño de caja de tamaño resumen de compensación de

SOPORTE DEL NAVEGADOR

La propiedad de cambio de tamaño es compatible con Firefox 4 +, Chrome y Safari.

CSS3

Page 24: INTRODUCCION  CSS3

La caja de tamaño 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 TAMAÑO DE CSS3

En CSS3, cambiar el tamaño de la propiedad 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 como sigue:

Ejemplo

Especifica que un elemento div puede cambiar el tamaño por el usuario:

div{resize:both;overflow:auto;}

CSS3 CAJA DE MEDICIÓN

La propiedad de tamaño de caja le permite definir ciertos elementos para adaptarse a un área de una manera determinada:

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

CSS3

Este elemento div es de tamaño variable por el usuario (en Firefox 4 +, Chrome y Safari).

Page 25: INTRODUCCION  CSS3

float:left;}

CSS3 ESQUEMA DE COMPENSACIÓN

El esquema de compensación de las compensaciones de un esquema de propiedad, y lo dibuja más 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 CÓDIGO CSS ES COMO SIGUE:

Ejemplo

div{border:2px solid black;outline:2px solid red;outline-offset:15px;}

Puede especificar una 15px esquema fuera del límite del borde:

Nueva interfaz de usuario-Propiedades

Propiedad Descripción CSS

apariencia Le permite hacer una mirada elemento como un elemento de interfaz de usuario estándar

3

caja de tamaño Permite definir ciertos elementos para adaptarse a una zona de cierta manera

3

icono Proporciona el autor la posibilidad de estilo de un elemento con un equivalente icónica

3

CSS3

Page 26: INTRODUCCION  CSS3

de navegación hacia abajo

Especifica que para navegar cuando se utiliza la tecla de flecha hacia abajo de navegación

3

nav-índice de Especifica el orden de tabulación para un elemento 3

de navegación a la izquierda

Especifica que para navegar cuando se utiliza la tecla de flecha a la izquierda de navegación

3

navegación derecha Especifica que para navegar cuando se utiliza la flecha derecha tecla de navegación

3

nav-up Especifica que para navegar cuando se utiliza la flecha hacia arriba la tecla de navegación

3

resumen de compensación de

Compensaciones de un esquema, y lo dibuja más allá del borde fronterizo

3

cambiar el tamaño de Especifica si un elemento puede cambiar el tamaño por el usuario

3

CSS3 REFERENCIAS

CSS3 TUTORIAL

PROPIEDADES DE CSS

CSS Grupos de Propiedad Animación Fondo Frontera y el esquema Caja Color Contenido de Medios

paginados Dimensión 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 Transición Interfaz de usuario

CSS3

Page 27: INTRODUCCION  CSS3

El "CSS" columna indica en qué versión de CSS la propiedad se define (CSS1, CSS2, CSS3 o).

LAS PROPIEDADES DE ANIMACIÓN

Propiedad Descripción CSS

@ Fotogramas clave Especifica la animación 3

animación Una propiedad resumida para todas las propiedades de animación de abajo, excepto la propiedad de animación-juego-Estado

3

la animación de nombre

Especifica un nombre para la animación de fotogramas clave @

3

la animación de duración

Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo

3

animación-tiempo-función

Especifica la curva de velocidad de la animación 3

la animación de retardo

Especifica cuando la animación se iniciará 3

animación iteración recuento

Especifica el número de veces que debe ser una animación jugado

3

animación de dirección

Especifica si la animación se reproduzca a la inversa de los ciclos alternos

3

animación-juego-estado

Especifica si la animación se está ejecutando o está en pausa

3

PROPIEDADES DE FONDO

Propiedad Descripción CSS

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

1

CSS3

Page 28: INTRODUCCION  CSS3

background-attachment

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

1

background-color Establece el color de fondo de un elemento 1

background-image Establece la imagen de fondo de un elemento 1

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

background-repeat Define la forma en una imagen de fondo se repetirá 1

de fondo-clip Especifica el área de la pintura del fondo 3

de fondo de origen Especifica el área de posicionamiento de las imágenes de fondo

3

fondo de tamaño Especifica el tamaño de las imágenes de fondo 3

ESQUEMA DE FRONTERAS Y PROPIEDADES

Propiedad Descripción CSS

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

1

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

1

border-bottom-color Establece el color del borde inferior 1

border-bottom-style Define el estilo del borde inferior 1

border-bottom-width Establece el ancho del borde inferior 1

CSS3

Page 29: INTRODUCCION  CSS3

border-color Establece el color de los cuatro bordes 1

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

1

border-left-color Establece el color del borde izquierdo 1

border-left-style Define el estilo del borde izquierdo 1

border-left-width Establece el ancho del borde izquierdo 1

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

1

border-right-color Establece el color del borde derecho 1

border-right-style Define el estilo del borde derecho 1

border-right-width Establece el ancho del borde derecho 1

border-style Establece el estilo de los cuatro bordes 1

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

1

border-top-color Establece el color del borde superior 1

border-top-style Define el estilo del borde superior 1

border-top-width Establece el ancho del borde superior 1

border-width Establece el ancho de los cuatro bordes 1

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

2

esquema de color Establece el color de un esquema 2

esquema de estilo Establece el estilo de un esquema 2

CSS3

Page 30: INTRODUCCION  CSS3

esquema de ancho Establece el ancho de un esquema 2

border-bottom-izquierda-radio

Define la forma del borde de la esquina inferior izquierda 3

border-bottom-derecha-radio

Define la forma del borde de la esquina inferior derecha 3

border-image Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades

3

border-image-inicio Especifica la cantidad por la cual el área de la imagen se extiende más allá de las fronteras de la caja de la frontera

3

border-image-repeat Especifica si la imagen de la frontera se debe repetir, redondeado o se estira

3

border-image-slice Especifica los desplazamientos internos de la imagen de la frontera

3

border-image-fuente Especifica una imagen para ser utilizado como un borde 3

frontera-imagen-anchura

Especifica el ancho de la imagen de la frontera 3

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

3

border-top-izquierda-radio

Define la forma del borde de la esquina superior izquierda

3

border-top-derecha-radio

Define la forma del borde de la esquina superior derecha 3

Caja de decoración-break

3

box-shadow Se conecta uno o más caída de las sombras a la caja 3

PROPIEDADES DE LAS CAJAS

Propiedad Descripción CS

CSS3

Page 31: INTRODUCCION  CSS3

S

overflow-x Especifica si debe o no recortar los bordes izquierdo / derecho de los contenidos, si se desborda el área del elemento de contenido

3

el desbordamiento de Y

Especifica si debe o no recortar los bordes superior / inferior del contenido, si se desborda el área del elemento de contenido

3

desbordamiento de estilo

Especifica el método de desplazamiento preferido de los elementos que se desbordan

3

rotación Gira un elemento alrededor de un punto dado, definido por la propiedad de rotación de punto

3

la rotación de punto Define un punto como un desplazamiento desde el límite del borde superior izquierdo

3

PROPIEDADES DE COLOR

Propiedad Descripción CSS

color perfil Permite la especificación de un perfil de color de origen no sea el predeterminado

3

opacidad Ajusta el nivel de opacidad de un elemento 3

representación-la intención

Permite la especificación de un objetivo de rendimiento de color perfil distinto al predeterminado

3

CONTENIDO DE LAS PROPIEDADES DE MEDIOS PAGINADOS

CSS3

Page 32: INTRODUCCION  CSS3

Propiedad Descripción CSS

marcador de etiqueta Especifica la etiqueta del marcador 3

marcador de nivel Especifica el nivel del marcador 3

favorito-blanco Especifica el destino del vínculo de marcador 3

flotan-offset Se empuja elementos flotantes en la dirección opuesta de la donde han sido flotaba con flotador

3

guiones, después de Especifica el número mínimo de caracteres en una palabra con guión después de que el carácter de separación de sílabas

3

guiones, antes de Especifica el número mínimo de caracteres en una palabra con guión antes de que el carácter de separación de sílabas

3

guiones caracteres Especifica una cadena que se muestra cuando un guiones de rotura se produce

3

de Separar líneas Indica el número máximo de sucesivas líneas de guiones en un elemento

3

guiones de los recursos

Especifica una lista separada por comas de los recursos externos que pueden ayudar al explorador determinar los puntos de separación de sílabas

3

Guiones Establece la forma de dividir las palabras para mejorar el diseño de los párrafos

3

imagen-resolución Especifica la resolución correcta de las imágenes 3

Marcas Suma cultivo y / o marcas de cruces al documento 3

conjunto de cadenas 3

PROPIEDADES DE LA DIMENSIÓN

Propiedad Descripción CSS

CSS3

Page 33: INTRODUCCION  CSS3

altura Establece la altura de un elemento 1

max-height Establece la altura máxima de un elemento 2

max-width Ajusta la anchura máxima de un elemento 2

min-height Establece la altura mínima de un elemento 2

min-width Establece el ancho mínimo de un elemento 2

ancho Establece el ancho de un elemento 1

PROPIEDADES FLEXIBLES CAJA

Propiedad Descripción CSS

caja-align Especifica la forma de alinear los elementos secundarios de una caja

3

cuadro de dirección Especifica en qué dirección los hijos de un cuadro se muestran

3

caja-flex Especifica si los hijos de una caja es flexible o inflexible en el tamaño

3

caja-flex-grupo Asigna elementos flexibles para flexionar los grupos 3

caja de las líneas de Especifica si las columnas irá en una nueva línea cada vez que se queda sin espacio en el cuadro de los padres

3

caja ordinal grupo Especifica el orden de visualización de los elementos secundarios de una caja

3

caja-oriente Especifica si los hijos de una caja deben establecerse en forma horizontal o vertical

3

BOX-PACK Especifica la posición horizontal en cajas horizontales y la posición vertical en cajas verticales

3

PROPIEDADES DE FUENTE

Propiedad Descripción CS

CSS3

Page 34: INTRODUCCION  CSS3

S

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

1

font-family Especifica la familia de fuentes para el texto 1

font-size Especifica el tamaño del texto 1

font-style Especifica el estilo de fuente para el texto 1

font-variant Especifica si un texto se debe mostrar en un tipo de letra small-caps

1

font-weight Especifica el peso de una fuente 1

@ Font-face Una regla que permite a los sitios web para descargar y utilizar fuentes que no sean los "seguros para la Web" Fuentes

3

font-size-adjust Conserva la legibilidad del texto, cuando se produce la reserva de fuentes

3

font-stretch Selecciona una cara normal, condensado o expandido de una familia de fuentes

3

GENERADOS PROPIEDADES DE CONTENIDO

Propiedad Descripción CSS

contenido Se utiliza con el: before y: after Los pseudo-elementos, para insertar contenido generado

2

counter-increment Incrementos de uno o varios contadores 2

counter-reset Crea o restaura uno o más contadores 2

comillas Establece el tipo de comillas para las citas incrustadas 2

CSS3

Page 35: INTRODUCCION  CSS3

cosecha Permite un elemento sustituye a ser sólo un área rectangular de un objeto, en lugar de todo el objeto

3

movimiento al Provoca un elemento que se elimina del flujo y se reinsertan en un momento posterior en el documento

3

página de la política Determina qué página basado ocurrencia de un elemento dado se aplica a un contador o valor de la cadena

3

PROPIEDADES DE LA CUADRÍCULA

Propiedad Descripción CSS

la red de columnas Especifica el ancho de cada columna en una cuadrícula 3

la red de filas Especifica la altura de cada columna en una cuadrícula 3

PROPIEDADES DE HIPERVÍNCULO

Propiedad Descripción CSS

objetivo Una propiedad rápida para establecer el nombre de destino, el objetivo de nuevo, y las propiedades de posición de destino-

3

nombre de destino Especifica dónde abrir enlaces (punto de destino) 3

meta-nueva Especifica si los vínculos nuevos destinos se abrirán en una nueva ventana o en una nueva pestaña de una ventana existente

3

diana posición Especifica que los enlaces nuevos de destino se debe colocar

3

LINEBOX PROPIEDADES

Propiedad Descripción CSS

la alineación de ajuste Permite la alineación más precisa de los elementos 3

CSS3

Page 36: INTRODUCCION  CSS3

alineación de la línea base

Especifica cómo un elemento en línea de nivel está alineado con respecto a su matriz

3

línea de base del turno Permite el reposicionamiento de la relación dominante-línea de base a la dominante línea de base

3

dominante-línea de base

Especifica una escala-de referencia-tabla 3

gota-inicial-después de ajuste

Establece el punto de alineación de la caída inicial para el punto de conexión principal

3

caída inicial, después de alinear

Establece que la alineación de líneas dentro de la caja de línea inicial se utiliza en el punto de conexión principal con el cuadro de la letra inicial

3

caída inicial, antes de ajustar

Establece el punto de alineación de la caída inicial para el punto de conexión secundaria

3

gota-inicial-antes de-align

Establece que la alineación de líneas dentro de la caja de línea inicial se utiliza en el punto de conexión secundaria con el cuadro de la letra inicial

3

caída inicial de tamaño

Controla el hundimiento parcial de la letra inicial 3

caída de valor inicial Activa el efecto de la gota-inicial 3

inline-box-align Establece que la línea de un bloque en línea de varias líneas se alinean con los elementos en línea anterior y siguiente dentro de una línea

3

la línea de apilamiento Una propiedad abreviada para establecer la línea de apilamiento, la estrategia, la línea de apilamiento de rubí, y las propiedades de la línea de apilamiento de turnos

3

la línea de apilamiento-ruby

Establece el método de la línea de apilamiento de los elementos de bloque que contienen elementos de rubí de anotación

3

la línea de apilamiento Establece el método de la línea de apilamiento de los 3

CSS3

Page 37: INTRODUCCION  CSS3

de desplazamiento elementos de bloque que contienen elementos con base de desplazamiento

la línea de la estrategia de apilamiento

Establece la estrategia de la línea de apilamiento de las cajas de línea apiladas dentro de un elemento de bloque de contención

3

el texto de la altura Establece la dimensión de bloque de la progresión del área de contenido de texto de una caja de línea

3

PROPIEDADES DE LA LISTA

Propiedad Descripción CSS

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

1

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

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

1

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

PROPIEDADES DE LOS MÁRGENES

Propiedad Descripción CSS

margen Establece todas las propiedades de los márgenes en una declaración

1

margin-bottom Establece el margen inferior de un elemento 1

CSS3

Page 38: INTRODUCCION  CSS3

margin-left Establece el margen izquierdo de un elemento 1

margin-right Establece el margen derecho de un elemento 1

margin-top Establece el margen superior de un elemento 1

PROPIEDADES DE MARQUESINA

Propiedad Descripción CSS

marquesina de dirección

Establece la dirección del contenido móvil 3

carpa-juego-cuenta Establece el número de veces que el movimiento de contenido

3

marquesina de velocidad

Establece la rapidez con la se desplaza el contenido 3

carpa de estilo Define el estilo del contenido móvil 3

MULTI-COLUMNA PROPIEDADES

Propiedad Descripción CSS

columna de recuento Especifica el número de columnas de un elemento se debe dividir en

3

columna-llenar Especifica cómo llenar las columnas 3

la columna de diferencia

Especifica el espacio entre las columnas 3

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

3

columna de la regla de color

Especifica el color de la regla entre las columnas 3

la columna de la regla Especifica el estilo de la regla entre las columnas 3

CSS3

Page 39: INTRODUCCION  CSS3

de estilo

la columna de la regla de ancho

Especifica el ancho de la regla entre las columnas 3

columna-span Especifica el número de columnas que 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 la columna de conteo

3

PROPIEDADES DE RELLENO

Propiedad Descripción CSS

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

1

padding-bottom Define el relleno inferior de un elemento 1

padding-left Establece el margen izquierdo de un elemento 1

padding-right Establece el margen derecho de un elemento 1

padding-top Define el relleno superior de un elemento 1

PROPIEDADES DE LOS MEDIOS PAGINADOS

Propiedad Descripción CSS

ajuste Da una idea de cómo escalar un elemento reemplazado 3

CSS3

Page 40: INTRODUCCION  CSS3

si ni su anchura ni su altura es de propiedad de automóviles

ajuste de posición Determina la alineación del objeto dentro de la caja 3

imagen-orientación Especifica una rotación en la dirección derecha o hacia la derecha que un agente de usuario se aplica a una imagen

3

página Especifica un tipo particular de página en la que debe ser un elemento aparece

3

tamaño Especifica el tamaño y la orientación de la caja que contiene la página de contenido

3

PROPIEDADES DE POSICIONAMIENTO

Propiedad Descripción CSS

fondo Especifica la posición inferior de un elemento posicionado

2

claro Especifica qué lados de un elemento que otros elementos flotantes no se les permite

1

recortar Clips de un elemento absolutamente posicionado 2

cursor Especifica el tipo de cursor que se mostrará 2

mostrar Especifica cómo un elemento HTML que se debe mostrar cierta

1

flotar Especifica si una caja debe flotar 1

a la izquierda Especifica la posición de la izquierda de un elemento posicionado

2

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

2

posición Especifica el tipo de método utilizado para la colocación de un elemento (estática, relativa, absoluta o fija)

2

CSS3

Page 41: INTRODUCCION  CSS3

derecho Especifica la posición correcta de un elemento posicionado

2

superior Especifica la posición de la parte superior de un elemento posicionado

2

visibilidad Especifica si un elemento es visible 2

índice z Establece el orden de apilamiento de un elemento posicionado

2

PROPIEDADES DE IMPRESIÓN

Propiedad Descripción CSS

los huérfanos Establece el número mínimo de líneas que se deben a la izquierda en la parte inferior de una página cuando se produce un salto de página dentro de un elemento

2

page-break-after Establece el comportamiento de la página sin precedentes después de un elemento

2

page-break-before Establece el comportamiento de la página sin precedentes antes de un elemento

2

page-break-inside Establece el comportamiento de la página sin precedentes dentro de un elemento

2

las viudas Establece el número mínimo de líneas que se deben a la izquierda en la parte superior de una página cuando se produce un salto de página dentro de un elemento

2

PROPIEDADES DE RUBY

Propiedad Descripción CS

CSS3

Page 42: INTRODUCCION  CSS3

S

ruby-align Controla la alineación del texto del texto rubí y el contenido de rubí de base respecto a la otra

3

rubí saliente Determina si, y en qué lado, el texto rubí se deja parcialmente voladizo cualquier texto adyacente, además de su propia base, cuando el texto ruby es más ancha que la base de rubí

3

rubí posición Controla la posición del texto rubí con respecto a su base 3

ruby-span Controla el comportamiento de la división de los elementos de anotación

3

PROPIEDADES DE VOZ

Propiedad Descripción CSS

marcar Una propiedad abreviada para establecer las propiedades antes de la marca y la marca después de la

3

la marca, después de Permite marcadores con nombre para ser conectado a la corriente de audio

3

marca, antes de Permite marcadores con nombre para ser conectado a la corriente de audio

3

fonemas Especifica una pronunciación fonética para el texto contenido en el elemento correspondiente

3

resto Una propiedad abreviada para establecer las propiedades antes de reposo y descanso después de la

3

de descanso después de la

Especifica un descanso o límite prosódico que se observa después de hablar del contenido del elemento

3

de descanso antes de Especifica un descanso o límite prosódico a observar antes de hablar del contenido del elemento

3

la voz de balance Especifica el balance entre los canales izquierdo y derecho

3

CSS3

Page 43: INTRODUCCION  CSS3

voz-duración Especifica el tiempo que debe tomar para hacer que el contenido del elemento seleccionado

3

la voz de tono Especifica la distancia promedio entre (a) frecuencia de la voz que habla

3

-la voz de pitch-range Especifica la variación en la distancia promedio entre 3

voz-tasa Controla la velocidad de la voz 3

de la voz Indica la fuerza de énfasis que debe aplicarse 3

voz-volumen Se refiere a la amplitud de la onda de salida por los sintetiza habla

3

PROPIEDADES DE LA TABLA

Propiedad Descripción CSS

border-collapse Especifica si o no bordes de la tabla debe ser derrumbado

2

border-spacing Especifica la distancia entre los bordes de celdas adyacentes

2

caption-side Especifica la colocación de un título de la tabla 2

vacías las células Especifica si se mostrará o no las fronteras y de fondo en las celdas vacías en una tabla

2

table-layout Establece el algoritmo de disposición para ser utilizado para una tabla

2

PROPIEDADES DEL TEXTO

CSS3

Page 44: INTRODUCCION  CSS3

Propiedad Descripción CSS

color Establece el color del texto 1

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

2

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

1

line-height Establece la altura de la línea 1

text-align Especifica la alineación horizontal del texto 1

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

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

1

text-transform Controles de la capitalización del texto 1

unicode-bidi 2

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

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

1

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

1

ahorcamiento-puntuacion

Especifica si un personaje puntuacion puede ser colocado fuera de la caja de línea

3

puntuacion-trim Especifica si un personaje puntuacion debe ser recortado 3

text-align-última Describe cómo la última línea de un bloque o una línea justo antes de un salto de línea forzado está alineado al text-align es "justificar"

3

justificar el texto Especifica el método utilizado cuando la justificación text-align es "justificar"

3

CSS3

Page 45: INTRODUCCION  CSS3

texto-resumen Especifica un esquema de texto 3

texto de desbordamiento

Especifica lo que debe ocurrir cuando el texto se desborda el elemento contenedor

3

text-shadow Agrega sombra al texto 3

ajuste del texto Especifica las reglas de división de líneas de texto 3

palabra-break Especifica las reglas de salto de línea por falta de guiones CJK

3

word-wrap Permite palabras largas e irrompibles que se rompen y pasan a la siguiente línea

3

2D/3D PROPIEDADES DE TRANSFORMACIÓN

Propiedad Descripción CSS

transformar Aplica una transformación de 2D o 3D a un elemento 3

transformar-origen Le permite cambiar la posición de elementos transformados

3

transformar estilo Especifica cómo se representan los elementos anidados en el espacio 3D

3

perspectiva Especifica el punto de vista sobre cómo los elementos en 3D se ven

3

punto de vista de origen

Especifica la posición inferior de los elementos en 3D 3

cara trasera, la visibilidad

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

3

PROPIEDADES DE LA TRANSICIÓN

CSS3

Page 46: INTRODUCCION  CSS3

Propiedad Descripción CSS

transición Una propiedad abreviada para establecer las propiedades de transición de cuatro

3

transición de la propiedad

Especifica el nombre de la propiedad CSS es el efecto de transición para la

3

transición de duración Especifica cuántos segundos o milisegundos un efecto de transición necesario para completar

3

tiempo de transición de funciones

Especifica la curva de velocidad del efecto de transición 3

transición de retardo Especifica que el efecto de transición se iniciará 3

PROPIEDADES DE LA INTERFAZ DE USUARIO

Propiedad Descripción CSS

apariencia Le permite hacer una mirada elemento como un elemento de interfaz de usuario estándar

3

caja de tamaño Permite definir ciertos elementos para adaptarse a una zona de cierta manera

3

icono Proporciona el autor la posibilidad de estilo de un elemento con un equivalente icónica

3

de navegación hacia abajo

Especifica que para navegar cuando se utiliza la tecla de flecha hacia abajo de navegación

3

nav-índice de Especifica el orden de tabulación para un elemento 3

de navegación a la izquierda

Especifica que para navegar cuando se utiliza la tecla de flecha a la izquierda de navegación

3

navegación derecha Especifica que para navegar cuando se utiliza la flecha derecha tecla de navegación

3

nav-up Especifica que para navegar cuando se utiliza la flecha 3

CSS3

Page 47: INTRODUCCION  CSS3

hacia arriba la tecla de navegación

resumen de compensación de

Compensaciones de un esquema, y lo dibuja más allá del borde fronterizo

3

cambiar el tamaño de Especifica si un elemento puede cambiar el tamaño por el usuario

3

CSS SELECTOR DE REFERENCIA

CSS3

Page 48: INTRODUCCION  CSS3

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é versión de CSS la propiedad se define (CSS1, CSS2, CSS3 o).

Selector Ejemplo Ejemplo de descripción CSS

. de clase .intro Selecciona todos los elementos con class = "intro"

1

# ID #firstname Selecciona el elemento con id = "nombre" 1

* * Selecciona todos los elementos 2

elemento p Selecciona todos los elementos <p> 1

elemento, el elemento

div,p Selecciona todos los elementos clave y todos los elementos <p>

1

elemento de elemento de

div p Selecciona todos los elementos dentro de los elementos clave <p>

1

elemento > elemento

div>p Selecciona todos los elementos <p> donde el padre es un elemento <div>

2

elementos + elemento

div+p Selecciona todos los elementos que se colocan <p> inmediatamente después de los elementos clave

2

[ atributo ] [target] Selecciona todos los elementos con un atributo de destino

2

[ atributo = valor ]

[target=_blank] Selecciona todos los elementos con target = "_blank"

2

[ atributo ~ = valor ]

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

2

[ atributo | = valor ]

[lang|=en] Selecciona todos los elementos con un valor del atributo lang que empiezan por "in"

2

CSS3

Page 49: INTRODUCCION  CSS3

: Link a:link Selecciona todos los enlaces no visitados 1

: Visited a:visited Selecciona todos los enlaces visitados 1

: Activa a:active Selecciona el enlace activo 1

: Hover a:hover Selecciona en el puntero del ratón sobre los enlaces

1

: Centrarse input:focus Selecciona el elemento de entrada que tiene el foco

2

: Primera letra p:first-letter Selecciona la primera letra de cada elemento <p>

1

: First-line p:first-line Selecciona la primera línea de cada elemento <p>

1

: First-child p:first-child Selecciona todos los elementos <p> que es el primer hijo de su padre

2

: Antes de p:before Inserte el contenido antes de que el contenido de cada elemento <p>

2

: Después p:after Insertar el contenido después de cada elemento <p>

2

: Lang ( idioma ) p:lang(it) Selecciona todos los elementos <p> con un valor de atributo lang comenzando con "eso"

2

element1 ~ element2

p ~ ul Selecciona todos los elementos que se <ul> precedido por un elemento <p>

3

[ atributo ^ = valor ]

un [src = ^ "https"]

Selecciona todos los elementos cuyo atributo src <a> valor comienza con "https"

3

[ atribuyen $ = valor ]

un [src = $ ". pdf"]

Selecciona todos los elementos cuyo atributo src <a> valor termina con ". Pdf"

3

[ atributo * = valor ]

un [src = "* w3schools"]

Selecciona todos los elementos cuyo atributo src <a> valor contiene la subcadena "w3schools"

3

: La primera de p: en primer Selecciona todos los elementos <p> que es el 3

CSS3

Page 50: INTRODUCCION  CSS3

tipo lugar de tipo elemento <p> primero de su padre

: El último de los de tipo

p: el último de los de tipo

Selecciona todos los elementos <p> que es el elemento <p> pasado de su padre

3

: Sólo de tipo p: sólo de tipo Selecciona todos los elementos <p> que es el elemento <p> sólo de su padre

3

: Un solo hijo p: un solo hijo Selecciona todos los elementos <p> que es el único hijo de su padre

3

: Nth-infantil ( n )

p: nth-infantil (2)

Selecciona todos los elementos <p> que es el segundo hijo de su padre

3

: Nth-última-infantil ( n )

p: nth-última-infantil (2)

Selecciona todos los elementos <p> que es el segundo hijo de su padre, a contar desde el último niño

3

: Nth-de-tipo ( N )

t: n-ésimo de tipo (2)

Selecciona todos los elementos <p> que es el elemento <p> segundo de su padre

3

: Nth-última-de-tipo ( N )

p: nth-última-del tipo (2)

Selecciona todos los elementos <p> que es el elemento <p> segundo de su padre, a contar desde el último niño

3

: El último niño p: el último niño

Selecciona todos los elementos <p> que es el último hijo de su padre

3

: Root : Root Selecciona el elemento del documento raíz 3

: Vacío p: vacío Selecciona todos los elementos <p> que no tiene hijos (incluidos los nodos de texto)

3

: El objetivo # Noticias: el objetivo

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

3

: Habilitado entrada: activado

Selecciona todos los elementos <input> habilitado

3

: Desactivado entrada: desactivado

Selecciona todos los elementos <input> discapacitados

3

: Activada entrada: Selecciona todos los elementos <input> 3

CSS3

Page 51: INTRODUCCION  CSS3

comprueba revisadas

: No ( selección ) : No (p) Selecciona cada elemento que no es un elemento <p>

3

Selección :: Selección :: Selecciona la porción de un elemento que es seleccionado por un usuario

3

CSS AURAL DE REFERENCIA

HOJAS DE ESTILO AUDITIVAS

Hojas de estilo auditivas utilizar una combinación de síntesis de voz y efectos de sonido para hacer que el usuario escuche a la información, en lugar de leer la información.

Presentación auditiva se puede utilizar:

CSS3

Page 52: INTRODUCCION  CSS3

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 impresión con deficiencias de las comunidades

La presentación 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 continuación, hablar de los títulos con una voz masculina muy rico.

CSS AURAL DE REFERENCIA

El "CSS" columna indica en qué versión de CSS la propiedad se define (CSS1 o CSS2).

Propiedad Descripción Valores CSS

azimut Establece que el sonido debe provenir de

angleleft-sidefar-leftleftcenter-leftcentercenter-right

2

CSS3

Page 53: INTRODUCCION  CSS3

rightfar-rightright-sidebehindleftwardsrightwards

señal Establece las propiedades de referencia en una declaración de

cue-before cue-after

2

cue-after Especifica un sonido que se reproducirá después de hablar del contenido del elemento

ninguna url 2

cue-before Especifica un sonido que se reproducirá antes de hablar del contenido del elemento

ninguna url 2

elevación Establece que el sonido debe provenir de

ángulo por debajo de nivel superior más alta baja

2

romper Establece las propiedades de pausa en una declaración

pausa antes- pausa-después

2

pausa-después Especifica una pausa después de hablar del contenido del elemento

tiempo %

2

pausa-antes Especifica una pausa antes de hablar del contenido del elemento

tiempo %

2

campo Especifica el tono de voz frecuencia dex-bajo bajo medio alto x alto

2

pitch-range Especifica la variación en el tono de voz. (Tono de voz o de voz animado?)

número 2

CSS3

Page 54: INTRODUCCION  CSS3

play-during Especifica un sonido a reproducir mientras se habla del contenido del elemento

Auto ninguna url mezcla de repetición

2

riqueza Especifica la riqueza de la voz al hablar. (Voz enriquecido o hilo de voz?)

número 2

hablar Especifica si el contenido hará que fonéticamente

normal, no hechizo de salida

2

speak-header Especifica cómo manejar los encabezados de la tabla. En caso de las cabeceras se habla antes de cada célula, o sólo antes de una célula con una cabecera diferente que la celda anterior

siempre , una vez

2

speak-numeral Especifica cómo hablan los números dígitos continuos

2

hablan-puntuacion Especifica cómo hablan los caracteres de puntuación

ninguno de código

2

speech-rate Especifica la velocidad del habla número dex-lento lento a medio rápido x-rápido más rápido más lento

2

estrés Especifica el "estrés" en la voz que habla

número 2

voz-familia Especifica la familia de la voz del que habla

específica-la voz genérica de voz

2

volumen Especifica el volumen del habla número %en silencio x-soft

2

CSS3

Page 55: INTRODUCCION  CSS3

suave a medio alto x alto

CSS WEB COMBINACIONES DE FUENTES SEGURAS

Comúnmente utilizados combinaciones de fuentes

La propiedad font-family debe mantener los nombres de varias fuentes como una "reserva" del sistema, para asegurar la máxima 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 genérica, para permitir que el navegador de escoger una fuente similar en la familia genérica, si no hay otras fuentes disponibles:

Ejemplo:

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

CSS3

Page 56: INTRODUCCION  CSS3

A continuación se presentan algunas combinaciones de fuentes de uso común, organizados por familia genérica.

SERIF FUENTES

font-family Ejemplo de texto

Georgia, serif Esta es una partida

Este es un párrafo

"Palatino Linotype", "Book Antiqua", Palatino, serif

Esta es una partida

Este es un párrafo

"Times New Roman", Times, serif Esta es una partida

Este es un párrafo

SANS-SERIF

font-family Ejemplo de texto

Arial, Helvetica, sans-serif Esta es una partida

Este es un párrafo

Arial Negro, Gadget, sans-serif Esta es una partida

Este es un párrafo

"Comic Sans MS", cursiva, sans-serif Esta es una partida

Este es un párrafo

Impacto, carbón, sans-serif Esta es una partida

Este es un párrafo

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Esta es una partida

CSS3

Page 57: INTRODUCCION  CSS3

Este es un párrafo

Tahoma, Ginebra, sans-serif Esta es una partida

Este es un párrafo

"Trebuchet MS", Helvetica, sans-serif Esta es una partida

Este es un párrafo

Verdana, Geneva, sans-serif Esta es una partida

Este es un párrafo

MONOSPACE FUENTES

font-family Ejemplo de texto

"Courier New", Courier, monospace Esta es una partida

Este es un párrafo

"Lucida Console", Mónaco, monospace Esta es una partida

Este es un párrafo

CSS UNIDADES

LOS VALORES DE MEDICIÓN

Unidad Descripción

% porcentaje

en pulgada

cm centímetro

CSS3

Page 58: INTRODUCCION  CSS3

mm milímetro

en 1em es igual al tamaño de la fuente actual. 2em significa 2 veces el tamaño 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 automáticamente a la fuente que utiliza el lector

ex un ex es la altura x de la fuente (altura x es por lo general alrededor de la mitad el tamaño de fuente)

en el punto (1 punto es igual a 1/72 pulgadas)

PC pica (1 unidad es la misma que 12 puntos)

px píxeles (un punto en la pantalla del ordenador)

CSS COLORES

Los colores se muestra la combinación de rojo, verde y azul.

LOS VALORES DE COLOR

CSS colores se definen mediante un valor hexadecimal (hex) notación para la combinación de rojo, verde, y los valores de color azul (RGB). El valor más bajo que se puede dar a una de las fuentes de luz es 0 (hexadecimal 00). El valor más alto es 255 (FF hex).

Los valores hexadecimales se escriben como números de 3 dígitos dobles, comenzando con un signo #.

CSS3

Page 59: INTRODUCCION  CSS3

Ejemplos de colores:

Color Color de HEX Color RGB

# 000000 rgb (0,0,0)

# FF0000 rgb (255,0,0)

# 00FF00 rgb (0,255,0)

# 0000FF rgb (0,0,255)

# FFFF00 rgb (255,255,0)

# 00FFFF rgb (0,255,255)

# FF00FF rgb (255,0,255)

# C0C0C0 rgb (192,192,192)

# FFFFFF rgb (255,255,255)

16 millones de colores diferentes

La combinación de valores Rojo, Verde y Azul 0-255 da un total de más de 16 millones de colores diferentes para jugar (256 x 256 x 256).

Mayoría de los monitores modernos son capaces de mostrar al menos 16.384 colores diferentes.

Si nos fijamos en la tabla de colores a continuación, podrás ver el resultado de la variación 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 varía de 0 a 255, haga clic en uno de los valores RGB o hexadecimal a continuación.

Luz roja HEX RGB

# 000000 rgb (0,0,0)

# 080000 rgb (8,0,0)

# 100000 RGB (16,0,0)

CSS3

Page 60: INTRODUCCION  CSS3

# 180000 RGB (24,0,0)

# 200000 RGB (32,0,0)

# 280000 RGB (40,0,0)

# 300000 RGB (48,0,0)

# 380000 RGB (56,0,0)

# 400000 RGB (64,0,0)

# 480000 RGB (72,0,0)

# 500000 RGB (80,0,0)

# 580000 RGB (88,0,0)

# 600000 RGB (96,0,0)

# 680000 rgb (104,0,0)

# 700000 rgb (112,0,0)

# 780000 rgb (120,0,0)

# 800000 rgb (128,0,0)

# 880000 rgb (136,0,0)

# 900000 rgb (144,0,0)

# 980000 rgb (152,0,0)

# A00000 rgb (160,0,0)

# A80000 rgb (168,0,0)

# B00000 rgb (176,0,0)

# B80000 rgb (184,0,0)

CSS3

Page 61: INTRODUCCION  CSS3

# C00000 rgb (192,0,0)

# C80000 rgb (200,0,0)

# D00000 rgb (208,0,0)

# D80000 rgb (216,0,0)

# E00000 rgb (224,0,0)

# E80000 rgb (232,0,0)

# F00000 rgb (240,0,0)

# F80000 rgb (248,0,0)

# FF0000 rgb (255,0,0)

SHADES OF GRAY

Colores grises se muestran usando una cantidad igual de energía a todas las fuentes de luz. Para hacerlo más fácil para que usted pueda seleccionar el color gris a la derecha, hemos compilado una tabla de tonos de gris para usted:

Gray Shades HEX RGB

# 000000 rgb (0,0,0)

# 080808 rgb (8,8,8)

# 101010 rgb (16,16,16)

# 181818 rgb (24,24,24)

# 202020 rgb (32,32,32)

# 282828 rgb (40,40,40)

# 303030 rgb (48,48,48)

CSS3

Page 62: INTRODUCCION  CSS3

# 383838 rgb (56,56,56)

# 404040 rgb (64,64,64)

# 484848 rgb (72,72,72)

# 505050 rgb (80,80,80)

# 585858 rgb (88,88,88)

# 606060 rgb (96,96,96)

# 686868 rgb (104,104,104)

# 707070 rgb (112,112,112)

# 787878 rgb (120,120,120)

# 808080 rgb (128,128,128)

# 888888 rgb (136,136,136)

# 909090 rgb (144,144,144)

# 989898 rgb (152,152,152)

# A0A0A0 rgb (160,160,160)

# A8A8A8 rgb (168,168,168)

# B0B0B0 rgb (176,176,176)

# B8B8B8 rgb (184,184,184)

# C0C0C0 rgb (192,192,192)

# C8C8C8 rgb (200,200,200)

# D0D0D0 rgb (208,208,208)

# D8D8D8 rgb (216,216,216)

CSS3

Page 63: INTRODUCCION  CSS3

# E0E0E0 rgb (224,224,224)

# E8E8E8 rgb (232,232,232)

# F0f0f0 rgb (240,240,240)

# F8F8F8 rgb (248,248,248)

# FFFFFF rgb (255,255,255)

WEB SAFE COLORS?

Hace algunos años, cuando las computadoras máxima admitida 256 colores diferentes, una lista de 216 "colores para la web" se propuso como un estándar Web, reservándose 40 colores del sistema fijo.

Esto no es importante ahora, ya que la mayoría de los ordenadores pueden mostrar millones de colores diferentes, pero la elección 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:

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

CSS3

Page 64: INTRODUCCION  CSS3

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

CSS3

Page 65: INTRODUCCION  CSS3

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CSS VALORES DE COLOR LEGALES

COLORES CSS

Los colores en CSS se puede especificar los siguientes métodos:

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.

CSS3

Page 66: INTRODUCCION  CSS3

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 más alto (ss) y los demás 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 parámetro (rojo, verde y azul) define la intensidad del color y puede ser un número 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 parámetro de color azul se establece en su valor más alto (255) y los demás se ponen a 0.

Además, los valores siguientes se define el mismo color: rgb (0,0,255) y RGB (0%, 0%, 100%).

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 extensión 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 parámetro alfa es un número entre 0.0 (completamente transparente) y 1,0 (totalmente opaco).

Ejemplo

CSS3

Page 67: INTRODUCCION  CSS3

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, saturación y luminosidad - y representa una representación coordenada cilíndrica de colores.

Un valor de color HSL se especifica con: HSL (matiz, saturación, 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 saturación es un valor porcentual, 0% significa un tono de gris y el 100% es el color. La ligereza es también un porcentaje; 0% es negro, 100% es de color blanco.

Ejemplo

p{background-color:hsl(120,65%,75%);}

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 extensión 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, saturación, luminosidad, alfa), donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0.0 (completamente transparente) y 1,0 (totalmente opaco).

Ejemplo

p{background-color:hsla(120,65%,75%,0.3);}

CSS3

Page 68: INTRODUCCION  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 especificación (17 colores estándar, además de más 130). La siguiente tabla muestra a todos ellos, junto con sus valores hexadecimales.

Consejo: Los 17 colores estándar son: aqua, negro, azul, fucsia, gris, gris, verde, lima, marrón, azul marino, oliva, púrpura, 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 HEX Color Sombra Mezcla

CSS3

Page 69: INTRODUCCION  CSS3

s r

AliceBlue # F0F8FF Sombras Mezclar

AntiqueWhite # FAEBD7

Sombras Mezclar

Agua # 00FFFF Sombras Mezclar

Aguamarina # 7FFFD4

Sombras Mezclar

Azul celeste # F0FFFF Sombras Mezclar

Beige # F5F5DC

Sombras Mezclar

Sopa de mariscos # FFE4C4

Sombras Mezclar

Negro # 000000

Sombras Mezclar

BlanchedAlmond # FFEBCD

Sombras Mezclar

Azul # 0000FF Sombras Mezclar

BlueViolet # 8A2BE2

Sombras Mezclar

Marrón # A52A2A

Sombras Mezclar

BurlyWood # DEB887

Sombras Mezclar

CadetBlue # 5F9EA0

Sombras Mezclar

Chartreuse # 7FFF00 Sombras Mezclar

Chocolate # Sombras Mezclar

CSS3

Page 70: INTRODUCCION  CSS3

D2691E

Coral # FF7F50 Sombras Mezclar

CornflowerBlue # 6495ED

Sombras Mezclar

Barba de Maíz # FFF8DC

Sombras Mezclar

Carmesí # DC143C

Sombras Mezclar

Cyan # 00FFFF Sombras Mezclar

DarkBlue # 00008B

Sombras Mezclar

DarkCyan # 008B8B

Sombras Mezclar

DarkGoldenRod # B8860B

Sombras Mezclar

Gris_oscuro # A9A9A9

Sombras Mezclar

Gris oscuro # A9A9A9

Sombras Mezclar

Verde oscuro # 006400

Sombras Mezclar

DarkKhaki # BDB76B

Sombras Mezclar

DarkMagenta # 8B008B

Sombras Mezclar

DarkOliveGreen # 556B2F

Sombras Mezclar

Darkorange # Sombras Mezclar

CSS3

Page 71: INTRODUCCION  CSS3

FF8C00

DarkOrchid # 9932CC

Sombras Mezclar

Darkred # 8B0000

Sombras Mezclar

DarkSalmon # E9967A

Sombras Mezclar

DarkSeaGreen # 8FBC8F

Sombras Mezclar

DarkSlateBlue # 483D8B

Sombras Mezclar

DarkSlateGray # 2F4F4F Sombras Mezclar

DarkSlateGrey # 2F4F4F Sombras Mezclar

DarkTurquoise # 00CED1

Sombras Mezclar

DarkViolet # 9400D3

Sombras Mezclar

Fuera de la iglesia # FF1493 Sombras Mezclar

DeepSkyBlue # 00BFFF Sombras Mezclar

DimGray # 696969

Sombras Mezclar

DimGrey # 696969

Sombras Mezclar

DodgerBlue # 1E90FF Sombras Mezclar

Ladrillo refractario # B22222

Sombras Mezclar

FloralWhite # FFFAF0 Sombras Mezclar

CSS3

Page 72: INTRODUCCION  CSS3

ForestGreen # 228B22

Sombras Mezclar

Fucsia # FF00FF Sombras Mezclar

Gainsboro # DCDCDC

Sombras Mezclar

GhostWhite # F8F8FF Sombras Mezclar

Oro # FFD700

Sombras Mezclar

La vara de oro # DAA520

Sombras Mezclar

Gris # 808080

Sombras Mezclar

Gris # 808080

Sombras Mezclar

Verde # 008000

Sombras Mezclar

VerdeAmarillo # ADFF2F

Sombras Mezclar

Honeydew # F0FFF0 Sombras Mezclar

Hotpink # FF69B4

Sombras Mezclar

IndianRed # CD5C5C

Sombras Mezclar

Índigo # 4b0082

Sombras Mezclar

Marfil # FFFFF0 Sombras Mezclar

Caqui # F0E68C

Sombras Mezclar

CSS3

Page 73: INTRODUCCION  CSS3

Lavanda # E6E6FA

Sombras Mezclar

LavenderBlush # FFF0F5 Sombras Mezclar

LawnGreen # 7CFC00

Sombras Mezclar

LemonChiffon # FFFACD

Sombras Mezclar

Lightblue # ADD8E6

Sombras Mezclar

LightCoral # F08080

Sombras Mezclar

LightCyan # E0FFFF Sombras Mezclar

LightGoldenRodYellow

# FAFAD2

Sombras Mezclar

Gris_claro # D3D3D3

Sombras Mezclar

Gris claro # D3D3D3

Sombras Mezclar

Verde claro # 90EE90

Sombras Mezclar

LightPink # FFB6C1

Sombras Mezclar

LightSalmon # FFA07A

Sombras Mezclar

LightSeaGreen # 20B2AA

Sombras Mezclar

LightSkyBlue # 87CEFA

Sombras Mezclar

CSS3

Page 74: INTRODUCCION  CSS3

LightSlateGray # 778899

Sombras Mezclar

LightSlateGrey # 778899

Sombras Mezclar

LightSteelBlue # B0C4DE

Sombras Mezclar

LightYellow # FFFFE0 Sombras Mezclar

Cal # 00FF00 Sombras Mezclar

Verde lima # 32CD32

Sombras Mezclar

Ropa de cama # FAF0E6

Sombras Mezclar

Magenta # FF00FF Sombras Mezclar

Granate # 800000

Sombras Mezclar

MediumAquaMarine # 66CDAA

Sombras Mezclar

Mediumblue # 0000CD

Sombras Mezclar

MediumOrchid # BA55D3

Sombras Mezclar

MediumPurple # 9370D8

Sombras Mezclar

MediumSeaGreen # 3CB371

Sombras Mezclar

MediumSlateBlue # 7B68EE

Sombras Mezclar

MediumSpringGreen # Sombras Mezclar

CSS3

Page 75: INTRODUCCION  CSS3

00FA9A

MediumTurquoise # 48D1CC

Sombras Mezclar

MediumVioletRed # C71585

Sombras Mezclar

Midnightblue # 191970

Sombras Mezclar

MintCream # F5FFFA Sombras Mezclar

MistyRose # FFE4E1 Sombras Mezclar

Mocasín # FFE4B5

Sombras Mezclar

NavajoWhite # FFDEAD

Sombras Mezclar

Marina de guerra # 000080

Sombras Mezclar

OldLace # FDF5E6

Sombras Mezclar

Oliva # 808000

Sombras Mezclar

Olivedrab # 6B8E23

Sombras Mezclar

Naranja # FFA500

Sombras Mezclar

OrangeRed # FF4500 Sombras Mezclar

Orquídea # DA70D6

Sombras Mezclar

PaleGoldenRod # EEE8AA

Sombras Mezclar

CSS3

Page 76: INTRODUCCION  CSS3

PaleGreen # 98FB98

Sombras Mezclar

PaleTurquoise # AFEEEE

Sombras Mezclar

PaleVioletRed # D87093

Sombras Mezclar

PapayaWhip # FFEFD5

Sombras Mezclar

PeachPuff # FFDAB9

Sombras Mezclar

Perú # CD853F

Sombras Mezclar

Rosa # FFC0CB

Sombras Mezclar

Ciruela # DDA0DD

Sombras Mezclar

Powderblue # B0E0E6

Sombras Mezclar

Púrpura # 800080

Sombras Mezclar

Rojo # FF0000 Sombras Mezclar

RosyBrown # BC8F8F

Sombras Mezclar

Royal # 4169E1

Sombras Mezclar

SaddleBrown # 8B4513

Sombras Mezclar

Salmón # FA8072

Sombras Mezclar

CSS3

Page 77: INTRODUCCION  CSS3

Sandybrown # F4A460

Sombras Mezclar

SeaGreen # 2E8B57

Sombras Mezclar

SeaShell # FFF5EE Sombras Mezclar

Sienna # A0522D

Sombras Mezclar

Plata # C0C0C0

Sombras Mezclar

SkyBlue # 87CEEB

Sombras Mezclar

SlateBlue # 6A5ACD

Sombras Mezclar

SlateGray # 708090

Sombras Mezclar

SlateGrey # 708090

Sombras Mezclar

Nieve # FFFAFA Sombras Mezclar

SpringGreen # 00FF7F Sombras Mezclar

Steelblue # 4682B4

Sombras Mezclar

Bronceado # D2B48C

Sombras Mezclar

Teal # 008080

Sombras Mezclar

Cardo # D8BFD8

Sombras Mezclar

Tomate # FF6347 Sombras Mezclar

CSS3

Page 78: INTRODUCCION  CSS3

Turquesa # 40E0D0

Sombras Mezclar

Violeta # EE82EE

Sombras Mezclar

Trigo # F5DEB3

Sombras Mezclar

Color blanco # FFFFFF Sombras Mezclar

WhiteSmoke # F5F5F5 Sombras Mezclar

Amarillo # FFFF00 Sombras Mezclar

AmarilloVerde # 9ACD32

Sombras Mezclar

CSS3 NAVEGADOR DE REFERENCIA DE APOYO

COMPATIBILIDAD CON NAVEGADORES

CSS3 no es todavía un estándar del W3C, pero todos los principales navegadores ya están apoyando muchas de las nuevas características. A continuación se muestra una referencia de todas las nuevas propiedades de CSS3 y su compatibilidad con navegadores:

Propiedad IE Firefox Cromo Safari Ópera

la alineación de ajuste

alineación de la línea base

animación 5

la animación de nombre 5

la animación de duración 5

animación-tiempo-función 5

la animación de retardo 5

CSS3

Page 79: INTRODUCCION  CSS3

animación iteración recuento 5

animación de dirección 5

animación-juego-estado 5

apariencia 3

cara trasera, la visibilidad

de fondo-clip 9 4 10 5 10,5

de fondo de origen 9 4 4 5 10,5

fondo de tamaño 9 4 4 5 10,5

línea de base del turno

marcador de etiqueta

marcador de nivel

favorito-blanco

border-bottom-izquierda-radio 9 4 5 5 10,5

border-bottom-derecha-radio 9 4 5 5 10,5

border-image 3

border-image-inicio

border-image-repeat

border-image-slice

border-image-fuente

frontera-imagen-anchura

border-radius 9 4 5 5 10,5

CSS3

Page 80: INTRODUCCION  CSS3

border-top-izquierda-radio 9 4 5 5 10,5

border-top-derecha-radio 9 4 5 5 10,5

Caja de decoración-break

caja-align

cuadro de dirección

caja-flex

caja-flex-grupo

caja de las líneas de

caja ordinal grupo

caja-oriente

BOX-PACK

box-shadow 9 4 10 10,5

caja de tamaño 8 9

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

CSS3

Page 81: INTRODUCCION  CSS3

columna de ancho

columnas

columna de recuento

cosecha

dominante-línea de base

gota-inicial-después de ajuste

caída inicial, después de alinear

caída inicial, antes de ajustar

gota-inicial-antes de-align

caída inicial de tamaño

caída de valor inicial

ajuste

ajuste de posición

flotan-offset

@ Font-face 9 3.6 4 3 10

font-size-adjust 2

font-stretch

la red de columnas

la red de filas

ahorcamiento-puntuacion

guiones, después de

CSS3

Page 82: INTRODUCCION  CSS3

guiones, antes de

de Separar los caracteres

de Separar líneas

guiones de los recursos

guiones

icono

imagen-orientación

imagen-resolución

@ Fotogramas clave 4

inline-box-align

la línea de apilamiento

la línea de apilamiento-ruby

la línea de apilamiento de desplazamiento

la línea de la estrategia de apilamiento

marcar

la marca, después de

marca, antes de

marcas

marquesina de dirección

carpa-juego-cuenta

CSS3

Page 84: INTRODUCCION  CSS3

resto

de descanso después de la

de descanso antes de

rotación

la rotación de punto

ruby-align

rubí saliente

rubí posición

ruby-span

tamaño

conjunto de cadenas

objetivo

nombre de destino

meta-nueva

diana posición

text-align-última

texto-énfasis

el texto de la altura

justificar el texto 5

texto-resumen

texto de desbordamiento 5 7 4 4 10,6

CSS3

Page 86: INTRODUCCION  CSS3

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

Con el apoyo de Google Chrome con el prefijo -webkit-

Con el apoyo de Safari con el prefijo -webkit-

Con el apoyo de la Ópera con el prefijo -o-

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

Para algunas propiedades que vea el icono del navegador y un número:

9 4 4 5 10,5

El número indica la versión del navegador en el que la propiedad fue apoyado en primer lugar.

CSS3