View
92
Download
0
Category
Preview:
Citation preview
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
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!
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
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
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
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
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
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.
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;}
CSS3 TRANSICIONES
LAS TRANSICIONES CSS3
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
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
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
/* 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
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
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
}
@-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
}
@-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
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
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
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
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
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
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).
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
: 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
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
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
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
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
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
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
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
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
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
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
# 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
# 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
# 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
# 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
marquesina de velocidad
carpa de estilo
movimiento al
de navegación hacia abajo 11,5
nav-índice de 11,5
de navegación a la izquierda 11,5
navegación derecha 11,5
nav-up 11,5
opacidad 9 2 4 4 10
resumen de compensación de 11
desbordamiento de estilo
overflow-x 9 2
el desbordamiento de Y 9 2
página
página de la política
perspectiva 5
punto de vista de origen
fonemas
puntuacion-trim
representación-la intención
cambiar el tamaño de 4
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
text-shadow 3 4 4 10
ajuste del texto
transformar 9 3.6
transformar-origen 9 3.6
transformar estilo 5
transición 4
transición de la propiedad 4
transición de duración 4
tiempo de transición de funciones 4
transición de retardo 4
palabra-break 5 8 3
word-wrap 5 3.6
la voz de balance
voz-duración
la voz de tono
-la voz de pitch-range
voz-tasa
de la voz
voz-volumen
EXPLICACIONES DE ICONOS
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
Recommended