Bookmark and Share Compartir

Guía de Referencia Rápida de CSS 3

Selectores de CSS 3

Notas:

· Las propiedades escritas en texto normal equivalen a valores a usar tal y como se indican.
· Las propiedades escritas en texto cursiva equivalen a valores numéricos acompañados con la unidad de medida correspondiente, ejemplo: 2px, 2%, 2em.
· No todas las propiedades que se definen en esta guía de referencia son compatibles con todos los navegadores. Algunas de ellas están en fase experimental y requieren de nomenclatura especial si se desea usarse en navegadores como Firefox, Safari o Chrome. Para más aclaración acerca de la compatibilidad del CSS 3 con los navegadores consulta este artículo.
Ejemplo: para aplicar bordes redondeados en Firefox debemos escribir: -moz-border-radius: 5px, para Chrome: -webkit-border-radius: 5px.

background

Prioridad: Media | Última actualización realizada por el W3 Consortium: 15/10/2009

Propiedades Parámetros Ejemplo
background-image Especifica la imagen de fondo de un elemento de bloque url(..)
none
background-image: url(../images/fondo.jpg);
background-image: none;
background-position Especifica la posición de la imagen dentro del elemento de bloque top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
x-% y-% (ex. 50% 50%)
x-pos y-pos (ex. 10px 20px)
background-position: top left;
background-position: 50px 50px;
background-position: 50% 50%;
background-size Establece el tamaño de la imagen de fondo de un elemento de bloque. longitud en píxels
longitud en %

auto, cover, contain
background-size: 200px 50px;
background-size: 100% 50%;
background-repeat Indica si la imagen de fondo se repite y si lo hace en horizontal (repeat-x) o vertical (repeat-y). repeat, repeat-x, repeat-y, no-repeat background-repeat: none;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-attachment Establece si la imagen de fondo de un elemento se mantiene fija o se mueve con la página. Por defecto, se mueve con la página. scroll, fixed background-attachment: scroll;
background-attachment: fixed;
background-origin Establece el punto de origen a partir del cual empieza a verse la imagen de fondo. Ésta puede partir del borde del elemento si lo tuviera, del padding o del contenido. Se combina con el selector background-clip. border-box, padding-box, content-box background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-clip Determina si la imagen de fondo se extiende hasta el borde o no. Se combina con el selector background-origin. longitud en píxels
longitud en %

border-box, padding-box, content-box, no-clip
background-clip: border-box;
background-clip: 10px 10px;
background-clip: 20% 40%;
background-color Determina el color de fondo de un elemento utilizando cualquiera de las nomenclaturas específicas para asignar un color. código de color
transparent
background-color: #333333;
background-color: transparent;
background-color: rgb (255,0,0)
Subir

border

Prioridad: Media | Última actualización realizada por el W3 Consortium: 15/10/2009

Propiedades Parámetros Ejemplo
border-width Determina el ancho del borde.
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
thin, medium, thick
longitud en píxels (ex. 1px)
border-width: 5px;
border-top-width: 5px;
border-left-width: 5px;
border-bottom-width: 5px;
border-right-width: 5px;
border-style Determina el tipo de borde (punteado, sólido, con guiones, doble, etc...).
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-style: 1px solid #000000;
border-bottom-style: 1px solid #000000;
border-color Determina el color del borde.
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
código de color border-color:#000000;
border-top-color:#ffffff;
border-bottom-color:#999999;
border-left-color:#666666;
border-right-color:#cc0000;
border-radius Determina el radio de curvatura del borde. No es compatible con todos los navegadores.
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
longitud en píxels (ex. 5px) border-radius: 5px;
border-top-left-radius:10px;
box-shadow Determina la sombra de un elemento de bloque. Se indica la longitud, el grado de desenfoque y el color de la sombra. No es compatible con todos los navegadores. inset
( distancia_horizontal distancia_vertical desenfoque código_color )
box-shadow: 3px 3px 6px #888888;
Subir

font

Prioridad: Media | Última actualización realizada por el W3 Consortium: 18/06/2009

Propiedades Parámetros Ejemplo
font-family Especifica el nombre de la familia de la fuente. nombre de la familia de la fuente
nombre genérico de la familia

inherit
font-family: 'Arial', 'Times-New-Roman', sans-serif;
font-size Especifica el tamaño de la fuente. xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit
longitud en pixels
longitud en %
font-size: 1em;
font-size: 12px;
font-size: 105%;
font-size-adjust Especifica el tamaño de la fuente que debería utilizarse basándose en el tamaño de las minúsculas en lugar de las mayúsculas. none, inherit
número
font-size-adjust: 0.5;
font-size-adjust: none;
font-stretch Permite ensanchar o estrechar un texto determinado. normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit
font-stretch: expanded;
font-stretch: condensed;
font-style Determina el estilo de la fuente, si ésta es normal, cursiva, oblicua, etc.. normal, italic, oblique, inherit font-style: normal;
font-style: italic;
font-variant Determina si la fuente se muestra en mayúsculas normales o del tipo "small-caps" a menor tamaño. normal, small-caps, inherit font-variant: normal;
font-variant: small-caps;
font-weight Determina el grosor de la fuente. normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit font-weight: bold;
Subir

box model

Prioridad: Media | Última actualización realizada por el W3 Consortium: 09/08/2007

Propiedades Parámetros Ejemplo
clear Permite distribuir elementos de bloque como se necesiten en la estructura web. Clear: left; establece que no exista ningún otro elemento de bloque a la izquierda del elemento al que se le asigna. none, both, left, right clear:both;
clear:left;
clear:right;
display Permite definir como debe ser visualizado un elemento HTML. No todos los parámetros son soportados por los navegadores. none, inline, block, inline-block, list-item, run-in, compact, table, inline-table, table-row-group, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group

Ejemplos de las propiedades compatibles con todos los navegadores:

display: block;
Ejemplo:
first {display: block}
second {display: block}
third {display: block}

display: inline;
Ejemplo:
display: block
display: inline
display: block
display: block
display: block
display: inline

display: list-item;
Ejemplo:
display: block
display: list-item
display: list-item
float Establece la alineación de un elemento dentro de otro. left, right, none float:none;
Ejemplo:
float:none;

float:left;
Ejemplo:
float:left;

float:right;
Ejemplo:
float:right;

heightDetermina la altura de un elemento de bloque. max-height y min-height no son propiedades soportadas por IE.
  • max-height
  • min-height
auto
longitud en píxels
longitud en %
height: 100px;
Ejemplo:
height: 100px;

height: 25%;
Ejemplo:
height: 25%;

widthDetermina el ancho de un elemento de bloque. max-width y min-width no son propiedades soportadas por IE.
  • max-width
  • min-width
auto
longitud en píxels
longitud en %
width: 100px;
Ejemplo:
width: 100px;

width: 25%;
Ejemplo:
width: 25%;

marginDetermina los márgenes de un elemento con respecto a otro.
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
auto
longitud en píxels
longitud en %
margin-top: 20px;
Ejemplo:
margin-top: 20px;

margin-left: 20px;
Ejemplo:
margin-left: 20px;

margin-right: 20px;
Ejemplo:
margin-right: 20px;

margin-bottom: 100px;
Ejemplo:
margin-bottom: 100px;

paddingDetermina el espacio en blanco de un elemento con respecto a otro.
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
auto
longitud en píxels
longitud en %
padding-top: 20px;
Ejemplo:
padding-top: 20px;

padding-left: 20px;
Ejemplo:
padding-left: 20px;

padding-right: 20px;
Ejemplo:
padding-right: 20px;

padding-bottom: 100px;
Ejemplo:
padding-bottom: 100px;

marquee-directionDetermina la dirección inicial en la que se mueve el contenido de una marquesina, esto es cuando el marquee-effect es usado. foward, reversed marquee-direction:foward;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-direction:foward;
overflow-style:marquee-line;
overflow:auto;

marquee-direction:reversed;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-direction:reversed;
overflow-style:marquee-line;
overflow:auto;

marquee-play-count Especifica cuantas veces se mueve el contenido de una marquesina. infinite
íntegro
marquee-play-count:infinite;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-direction:foward;
overflow-style:marquee-line;
marquee-play-count:infinite;
overflow:auto;

marquee-play-count:2;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-direction:foward;
overflow-style:marquee-line;
marquee-play-count:2;
overflow:auto;

marquee-speed Especifica la velocidad con la que se mueve el contenido de la marquesina. slow, normal, fast marquee-speed:slow;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-speed:slow;
overflow-style:marquee-line;
overflow:auto;

marquee-speed:fast;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-speed:fast;
overflow-style:marquee-line;
overflow:auto;

marquee-style Determina el tipo de movimiento de su contenido (movimiento de un lado a otro, scroll, aparece por un lado y se para una vez mostrado todo el contenido, slide o movimientos alternativos, alternate). scroll, slide, alternate marquee-style:scroll;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-speed:slow;
overflow-style:marquee-line;
overflow:auto;
marquee-style:scroll;

marquee-style:slide;
Ejemplo: (si no ves la marquesina, es que tu navegador no es compatible con el código)
marquee-speed:fast;
overflow-style:marquee-line;
overflow:auto;
marquee-style:slide;

overflow Forma de delimitar un contenido determinado de forma que parte del contenido sea visible y la otra parte sea invisible (hidden), se mueva con barras de desplazamiento (scroll), etc...
  • overflow-x
  • overflow-y
visible, hidden, scroll, auto, no-display, no-content overflow:hidden;
Ejemplo:
Parte del texto no se leerá porque no cabe.

overflow:scroll;
Ejemplo:
Aparecerá una barra de desplazamiento porque el contenido es más grande que la caja que lo contiene.

rotation Determina el ángulo de rotación de un elemento de bloque. ángulo de rotación rotation:45deg; Todavía no desarrollado.
visibility Determina si el elemento en sí es visible u oculto. visible, hidden, collapse visibility:visible;
visibility:hidden;
Subir

text

Prioridad: Media | Última actualización realizada por el W3 Consortium: 06/03/2007

Propiedades Parámetros Ejemplo
direction Determina la dirección en la que fluye el texto. ltr, rtl, inherit direction:ltr;
direction:rtl;
hanging-punctuation Esta propiedad determina si las marcas de puntuación son situadas fuera de la línea de texto o al final de la misma. none, (inicio final esquina-final) Todavía en fase de desarrollo.
letter-spacing Determina el espacio entre las letras. normal
longitud en pixels
longitud en em
letter-spacing:2px;
Ejemplo:
Texto con un letter-spacing de 2 píxeles

letter-spacing:2em;
Ejemplo:
Texto con un letter-spacing de 2 em
punctuation-trim Determina si los carácteres de puntuación como paréntesis o corchetes deben ser cortados en una línea o no. none, (inicio fin adyacente) Todavía en fase de desarrollo.
text-align Determina la alineación de un bloque de texto dentro del elemento que lo contiene. start, end, left, right, center, justify text-align:left;
Ejemplo:

Texto alineado a la izquierda


text-align:right;
Ejemplo:

Texto alineado a la derecha


text-align:center;
Ejemplo:

Texto alineado en el centro


text-decoration Determina si un texto está tachado, subrayado inferior, suprayado superior o parpadeo. none, underline, overline, line-through, blink text-decoration:underline;
Ejemplo:

Texto subrayado


text-decoration:overline;
Ejemplo:

Texto subrayado superiormente


text-decoration:line-through;
Ejemplo:

Texto tachado


text-decoration:blink;
Ejemplo:

Texto parpadeante

text-emphasis Utilizado para escrituras asiáticas, determina si los signos de puntuación son comas, puntos u otros símbolos y si éstos se situan arriba o abajo de la línea de texto. none, (accent, dot, circle, disc) Sólo para escrituras asiáticas.
text-indent Determina la indentación aplicada a la primera línea de un párrafo. longitud en píxels
longitud en em
text-indent:20px;
Ejemplo:

Texto indentado en 20 píxeles. Sólo afectará a la primera línea del párrafo donde se aplique.


text-indent:50%;
Ejemplo:

Texto indentado en un porcentaje del 50%. Sólo afectará a la primera línea del párrafo donde se aplique.

text-justify Determina la justificación de un párrafo basándose en los espacios en blanco en función del parámetro que se use. auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida, tibetan text-justify:inter-word;
Ejemplo:

Párrafo con justificación inter-word. Párrafo con justificación inter-word. Párrafo con justificación inter-word. Párrafo con justificación inter-word.


text-justify:distribute;
Ejemplo:

Párrafo con justificación distribute. Párrafo con justificación distribute. Párrafo con justificación distribute. Párrafo con justificación distribute.

text-outline Determina la línea exterior de un texto, así como su grosor y el color. none
color
longitud en píxels
Todavía en desarrollo
text-shadow Determina la sombra de un texto. none
longitud en píxels (distancia_vertical distancia_horizontal desenfoque color)
text-shadow: 1px 1px 2px #666;
Ejemplo:

Texto con sombra.

text-transform Determina si un texto se representa en mayúsculas, minúsculas o la primera letra en mayúsculas y el resto en minúsculas. none, capitalize, uppercase, lowercase text-transform: uppercase;
Ejemplo:

Texto en uppercase.


text-transform: capitalize;
Ejemplo:

Texto en capitalize.


text-transform: lowercase;
Ejemplo:

Texto en lowercase.

text-wrapEspecifica la forma en la que un texto se parte de una línea a otra normal, none, unrestricted, suppress text-wrap:normal;
Ejemplo:

Las líneas de este párrafo se partirían de forma normal utilizando las reglas de ruptura entre líneas por defecto en el documento html.


text-wrap:none;
Ejemplo:

Las líneas de este párrafo no se partirían nunca, con lo que es posible que este texto se salga del elemento que lo contiene.


text-wrap:unrestricted;
Ejemplo:

Las líneas de este párrafo de texto se partirían sin ninguna restricción al respecto.


text-wrap:suppress;
Ejemplo:

Los saltos de línea de este párrafo se producirían respetando la forma del elemento que interfiera.

unicode-bidiEn algunos idiomas el texto fluye de derecha a izquierda y en otros a la inversa, así pues esta propiedad del texto permite determinar en qué dirección debe de fluir un texto para su correcta lectura. Esta propiedad funciona junto con la de direction:rtl. inherit, normal, embed, bidioverride unicode-bidi:inherit;
Ejemplo:

Establece por defecto los valores o los hereda del elemento padre.


unicode-bidi:normal;
Ejemplo:

El elemento no abrirá otro nivel de incrustación. En caso de elementos en línea, la aplicación del parámetro unicode se aplicará a través de todos los elementos.


unicode-bidi:embed;
Ejemplo:

Crea un nuevo nivel incrustado, con la dirección del contenido especificado por el parámetro direction.


unicode-bidi:bidi-override;
Ejemplo:

Crea un nivel incrustado adicional con la dirección del contenido especificado SÓLO por la propiedad direction. Este valor prácticamente anula el esquema de orden por defecto.

white-spacePropiedad que declara si el espacio en blanco dentro del elemento se contrae y cómo debe contraerse. normal, pre, nowrap, prewrap, pre-line white-space:normal;
Ejemplo:

Colapsa los espacios en blanco y hace que el texto fluya de manera normal.


white-space:pre;
Ejemplo:

Respeta los espacios en blanco y no aplica ninguna separación al texto.


white-space:nowrap;
Ejemplo:

Colapsa los espacios en blanco pero no aplica ninguna separación al texto.


white-space:pre-wrap;
Ejemplo:

Mantiene los espacio en blanco y establece la separación del texto de forma normal.


white-space:pre-line;
Ejemplo:

Los espacios se colapsan, pero los saltos de línea se respetan.
Y el texto fluye de forma normal.


white-space-collapsePropiedad que declara si los espacios en blanco de un texto se contraen y de qué manera. Propiedad en desarrollo. preserve, collapse, preserve-breaks, discard Todavía en desarrollo.
word-breakPropiedad que controla el comportamiento de los saltos de línea con respecto a las palabras. Es especialmente útil cuando se usan textos en diferentes idiomas dentro de un mismo elemento. Dependerá del idioma saber aplicar uno u otro. normal, keep-all, loose, break-strict, break-all word-break:normal;
word-break:keep-all;
word-break:loose;
word-break:break-strict;
word-break:all;
word-spacingEspecifica el espacio entre palabras. none
longitud en píxels
longitud en %
word-spacing:5px;
Ejemplo:

Texto con un espaciado entre palabras de 5 píxels.

Subir

column

Prioridad: Media | Última actualización realizada por el W3 Consortium: 30/06/2009

Propiedades Parámetros Ejemplo
column-count Establece el número de columnas en las que se divide un párrafo. auto
número entero
-moz-column-count:2;
Ejemplo: (propiedad en fase de desarrollo)

Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores. Texto distribuido en dos columnas. Esta propiedad no funciona en todos los navegadores.

column-gap Determina el espacio en blanco entre columnas. normal
longitud en píxels
-moz-column-gap:10px;
Ejemplo: (propiedad en fase de desarrollo)

Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels. Texto con un espaciado entre columnas de 20 píxels.

column-rule Determina a través de sus propiedades column-rule-width, column-rule-color y column-rule-style las características de cada columna.
  • column-rule-width
  • column-rule-color
  • column-rule-style
Valores para cada sub-propiedad:
  • longitud en em o píxels
  • código del color
  • mismos parámetros que border-style
-moz-column-count:2;
-moz-column-gap: 20px;
-moz-column-rule-width: 40px;
-moz-column-rule: 4px solid #cc0000;
-moz-column-rule-color: black;
Ejemplo: (propiedad en fase de desarrollo)

Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule. Ejemplo de columnas con el parámetro column-rule.

column-width Permite establecer el ancho de cada columna. auto
longitud en píxels o em
-moz-column-width:10px;
Ejemplo: (propiedad en fase de desarrollo)

Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas. Texto en columnas.

Ejemplo:

Texto con un espaciado entre palabras de 5 píxels.

Ejemplo:

Texto con un espaciado entre palabras de 5 píxels.

Ejemplo:

Texto con un espaciado entre palabras de 5 píxels.

Ejemplo:

Texto con un espaciado entre palabras de 5 píxels.

Subir

color

Prioridad: Media | Última actualización realizada por el W3 Consortium: 21/07/2008

Propiedades Parámetros Ejemplo
color Determina el color del elemento sobre el que se aplica. inherit
código de color
color:#cc0000;
Ejemplo:

Texto de color rojo escrito con código de color hexadecimal

opacity Establece el grado de transparencia de un elemento. inherit
grado de transparencia en número (valor del 0 al 1)
opacity:0.5;
filter:alpha(opacity=50); /* para IE */
Ejemplo:

Bloque con texto y grado de transparencia del 50%

Subir

template layout

Prioridad: Media | Última actualización realizada por el W3 Consortium: 09/08/2007

Template Layout en CSS3Esta especificación se encuentra en fase de desarrollo, más concretamente en modo "borrador" según el WWW Consortium.
Se sabe que dependerá de otros módulos para su elaboración como el box module, text module, positioning module, etc...
El objeto de esta especificación será el de establecer una plantilla invisible que nos sevirá para maquetar el contenido de una página web. Su uso será ideal en caso de páginas web muy complejas y/o formularios complicados.

Subir

table

Según el W3 Consortium el modelo de tablas será el mismo que el estipulado para CSS2 salvo algunos desarrollos más que no tienen establecido fecha de revisión por el momento.

Las tablas son una forma más que permite mostrar contenido de forma ordenada y estructurada a través de filas y columnas.
El modelo de tablas para CSS3 parece que será igual que el actual en CSS2 pero abarcando más detalles. A día de hoy esta espeficiación se encuentra en fase "borrador" y con prioridad baja, no se conoce fecha de próxima revisión en el WWW Consortium.
A modo de recordatorio se exponen las propiedades actuales de table

Propiedades actuales para table en CSS2 Parámetros
table-layout Determina el modo en el que una tabla se visualiza. auto, fixed, inherit
border-collapse Determina el estilo del borde de la tabla. collapse, separate, inherit
border-spacing Determina la distancia que separa los bordes de las celdas. inherit
longitud longitud
caption-side Determina la alineación del contenido en la tabla. top, bottom, inherit
empty-cells Determina si la celda que posee esta propiedad se muestra o no. show, hide, inherit
Subir

speech

Prioridad: Media | Última actualización realizada por el W3 Consortium: 16/12/2004

Esta especificación contiene propiedades que permiten que un documento sea interpretado por un sintetizador y reproducido en forma de audio. Ya existía un módulo en CSS2. Las propiedades implementadas en CSS3 son las mismas que en CSS2 pero con diferentes valores.
Muy usado para usuarios con discapacidad visual.

Propiedades Parámetros Ejemplo
cue Existen elementos auditivos que se emplean para separar contenidos diferentes dentro de la lectura del documento. Estos sonidos se ejecutan antes o después del siguiente contenido para delimitarlo. Existen diferentes valores a aplicar en cada caso.
  • cue-before
  • cue-after
(cue-before cue-after)*

* Cada uno de estos parámetros puede adquirir estos valores y deberá ser expresado con esta estructura:
url (ruta_archivo_audio ( número | % | silent | x-soft | soft | medium | loud | x-loud | none | inherit ))
donde:
número, equivale a un valor entre 0 y 100 que indica el volumen con el que se reproducirá el sonido
%, equivale a un valor entre 0 y 100 que igualmente indica el volumen con el que se reproducirá el sonido
silent | x-soft | soft | medium | loud | x-loud, son valores establecidos de secuencias monótonas y no decrecientes en volumen de sonidos donde silent es 0 y x-loud es 100.

cue-before: url(bell.aiff); cue-after: url(dong.wav); cue-before: url(pop.au) 80; cue-after: url(pop.au) 50%; cue: url(pop.au);
mark Esta propiedad permite establecer marcas o puntos específicos en la cadena de sonido. No son efectos audibles. Suelen ser etiquetas de texto que permiten orientarnos en el desarrollo de la interlocución.
  • mark-before
  • mark-after
(mark-before mark-after) mark-before: "start";
mark-after: "end";
mark: "start" "end";
pause Especifica la duración de la pausa prosódica entre elementos.
  • pause-before
  • pause-after
  • phonemes
inherit, (pause-before pause-after) pause: 20ms; /* pause-before: 20ms; pause-after: 20ms */
pause: 30ms 40ms; /* pause-before: 30ms; pause-after: 40ms */
pause-after: 10ms; /* pause-before: unspecified; pause-after: 10ms */
rest Especifica el descanso prosódico entre elementos.
  • rest-before
  • rest-after
none, x-weak, weak, medium, strong, x-strong, inherit
tiempo (en segundos o milisegundos)
rest: 2s 1s; /*[rest-before rest-after]*/
speak Especifica si el texto debe ser renderizado fonéticamente y de qué manera (deletreado, enumerado, incluyendo signos de puntuación, etc...). none, normal, spell-out, digits, literal-punctuation, no-punctuation, inherit speak:normal;
speak:spell-out;
voice-balance Se refiere al balance entre el canal izquierdo y el derecho de audio. left, center, right, leftwards, rightwards, inherit
número (entre -100 (left) y 100 (right))
voice-balance:left;
voice-balance:90;
voice-duration Especifica el tiempo que se tarda en interpretar un elemento. tiempo (en segundos o milisegundos) voice-duration: 3s;
voice-family El valor separado por comas especifica las características de la voz. (specific-voice, age, generic-voice, number)*
* donde:
specific-voice son valores específicos de una voz (ej. "comedian")
age tiene como posibles valores child, young y old
generic-voice son valores de familias de voces, tiene como valores posible male, female y neutral
number especifica la variante preferida dentro de un conjunto de voces característicos. Su valor debe ser un número entero positivo
inherit
voice-family: announcer, old male;
voice-family: romeo, young male;
voice-family: juliet, female;
voice-family: male 3;
voice-rate Determina el rango de voz del interlocutor. x-slow, slow, medium, x-fast, fast, inherit
% (un 50% significa la mitad del rango de una voz)
voice-rate:fast;
voice-rate:60%;
voice-pitch Determina el campo de frecuencia en el que se interpretará el documento. Para hombres el valor común es de 120Hz y para la mujer de 210Hz. x-low, low, medium, high, x-high, inherit
número entero no negativo (de Hercios)
%
voice-pitch:medium;
voice-pitch: 210hz;
voice-pitch-range Determina el rango del campo de frecuencia en el que se interpretará el documento. Para hombres el valor común es de 120Hz y para la mujer de 210Hz. x-low, low, medium, high, x-high, inherit
número entero no negativo (de Hercios)
%
voice-pitch-range:medium;
voice-pitch-range: 210hz;
voice-stress Indica la fuerza aplicada en el énfasis. strong, moderate, none, reduced, inherit voice-stress:strong;
voice-volume Determina el volumen, o amplitud de onda, de la interpretación del documento web. silent, x-soft, soft, medium, loud, x-loud, inherit
porcentaje %
voice-volume:medium;
voice-volume: 50%;
Subir

list & markers

Prioridad: Baja | Última actualización realizada por el W3 Consortium: 07/11/2002

Propiedades Parámetros Ejemplo
list-style Propiedad que permite determinar el aspecto de una lista tanto ordenada, ol como desodenada, ul.
  • list-style-image
  • list-style-position
  • list-style-type

  • none, url
  • inside, outside
  • none, normal, box, check, circle, square, diamond, disc, hyphen
list-style: none inside circle;
Ejemplo:
    Esta es una lista no-ordenanda de ítems:
  • Ítem número 1
  • Ítem número 2
  • Ítem número 3
  • Ítem número 4
::marker Es un pseudo-elemento que permite establecer como marcado de una lista un elemento personalizado. Sólo funcionará si el valor de la propiedad "content" no es inhibit. Al ser un pseudo-elemento su nomenclatura correcta es ::marker. Como pseudo-elemento de bloque puede adoptar todas las propiedades normales de un elemento de bloque como display. Propiedad en fase de desarrollo. Ejemplo de marker aplicado a un elemento p

CSS:
<STYLE type="text/css">
P { margin-left: 12 em; }
P.Note::marker {
content: url("note.gif") "Note " counter(note-counter) ":";
text-align: left;
width: 10em;
}
P.Note {
display: list-item;
counter-increment: note-counter;
}
</STYLE>

Subir

animation

Prioridad: Media | Última actualización realizada por el W3 Consortium: 20/03/2009

animation con css

Este comportamiento se encuentra en fase de desarrollo. Las animaciones son transiciones que cambian los valores de CSS con respecto al tiempo. Estos valores son especificados con el uso de keyframes (puntos concretos de la animación en la que se producen cambios en los valores CSS).

Propiedades Parámetros Ejemplo
animation Animaciones de elementos controladas por CSS
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
    Valores para cada propiedad:
  • tiempo
  • normal, alternate
  • tiempo
  • inherit, infinitetiempo
  • none, IDENT
  • running, paused
  • ease, linear, ease-in, ease-out, cubic-Bezier (número número número número)
Ejemplo de código de una animación:

div {
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes 'diagonal-slide' {

from {
left: 0;
top: 0;
}

to {
left: 100px;
top: 100px;
}

}
Subir

transition

Prioridad: Media | Última actualización realizada por el W3 Consortium: 01/12/2009

transiciones con css

Este comportamiento se encuentra en fase de desarrollo. Las transiciones son efectos de presentación en los que un elemento concreto cambia sus propiedades de CSS de un valor a otro. Sólo propiedades animables pueden ser utilizadas para crear estos efectos de transición.

Propiedades Parámetros Ejemplo
transition Efecto producido al cambiar en el tiempo las propiedades de los elementos a través de CSS.
  • transition-delay
  • transition-direction
  • transition-duration
  • transition-property
    Valores para cada propiedad:
  • tiempo
  • tiempo
  • none, all
  • ease, linear, ease-in, ease-out, cubic-Bezier (número número número número)
Ejemplo de código de una transición:
Subir

grid positioning

Prioridad: Media | Última actualización realizada por el W3 Consortium: 05/09/2007

guías para posicionar elementos con css

Este módulo se encuentra en fase de desarrollo. Este módulo añade la capacidad de adaptar en tamaño y posición los elementos de un documento web en base a un sistema de rejilla creado con CSS que sirve como guía.

Propiedades Parámetros Ejemplo
grid Propiedad que permite establecer un sistema de rejilla de base para la maquetación de un documento web.
  • grid-columns
  • grid-rows
none, inherit
(longitud porcentaje longitud_relativa)
Ejemplo de grid para un documento web:
body {
grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns:3;
column-gap:0.5in;
}
Subir

outline

Prioridad: Media | Última actualización realizada por el W3 Consortium: 11/05/2004

Propiedades Parámetros Ejemplo
outline Esta propiedad ha sido extendida en CSS3 para incluir su parámetro offset que permite crear un espacio alrededor de un elemento a partir de la esquina más externa del mismo. Funciona con Opera, Safari y Firefox.
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
    Los posibles valores para cada parámetro son:
  • invert, código de color
  • inherit, longitud
  • none, dotted, dashed, solid, double, groove, ridge, inset, ouset
  • thin, medium, thick o longitud
outline-offset:20px;
Ejemplo:

Bloque con texto y grado de transparencia del 50%

Subir

3D/2D transform

Este módulo se encuentra en fase de desarrollo. La propiedad transform permite modificar el estado de un elemento ya sea por traslación, rotación, escalado o perspectiva en cualquier de los ejes de coordenadas espaciales (x,y,z).

Prioridad: Media | Última actualización realizada por el W3 Consortium: 01/12/2009

Propiedades Parámetros
transform Una transformación bidimensional es aplicada a un elemento usando esta propiedad y a través de las funciones que a ella corresponden. La transformación final se obtiene del resultado de una matriz que contiene todos los valores de cada función especificada.
  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility

Los posibles valores para cada parámetro son:

  • transform
    none, matrix, matrix3d, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective código de color
  • transform-origin
    [ [ porcentaje | longitud | left | center | right ] [ porcentaje | longitud | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
  • transform-style
    flat, preserve-3d
  • perspective
    none, número
  • perspective-origin
    [ [ porcentaje | longitud | left | center | right ] [ porcentaje | longitud | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
  • backface-visibility
    visible, hidden
Subir

line box

Prioridad: Media | Última actualización realizada por el W3 Consortium: 15/05/2002

La mayoría de las propiedades de este modelo están en borrador y no son soportadas por los navegadores.

Esta especificación controla los aspectos visuales de los elementos de bloque. Es una propiedad nueva de CSS3. Por norma general el contenido de un elemento de bloque suele empezar en la esquina superior izquierda de este mismo bloque, así pues, las propiedades de line-box pretenden establecer nuevos aspectos.

Permite crear inicios de línea como los que se muestran en elas siguientes imágenes:

alineación dentro de elementos de bloque alineación dentro de elementos de bloque
alineación dentro de elementos de bloque alineación dentro de elementos de bloque

Para entender los selectores que se describen a continuación es necesario conocer los distintos tipos de línea base o baseline que se pueden establecer: Tipos de baselines

Propiedades Parámetros
alignment-adjust Permite alinear los elementos de forma mucho mas precisa. Con esta propiedad, la alineación de la línea base viene definida por el parámetro alignment-baseline auto, baseline, before-edge, text-before-edge, middle, central, after-edge, text-after-edge, ideo-graphic, alphabetic, hang-ing, mathematical
longitud
%
alignment-baseline Especifica como un elemento de bloque contenido en otro es alineado con respecto al bloque que lo contiene. baseline, use-script, before-edge, text-before-edge, after-edge, text-after-edge, central, middle, ideographic, alphabetic, hanging, mathematical
baseline-shift Permite reubicar la posición de la línea base relativa a la línea dominante. Esto ocurre con elementos subíndices o superíndices que tienen líneas base diferentes a la genérica. baseline, sub, super
longitud
%
dominant-baseline Esta propiedad se usa para redefinir la línea base de una tabla. auto, use-script, no-change, reset-size, alphabetic, hanging, ideographic, mathematical, central, middle, text-after-edge, text-before-edge
drop-initial-after-align Determina la alineación dentro de un elemento de bloque, que se usa derivada del parámetro drop-initial-value como punto de conexión con la letra inicial de la caja de texto. Mismos valores que alignment-baseline
drop-initial-after-adjust Determina el punto de alineamiento inicial relacionando el elemento de bloque con la línea base especificada. central, middle, after-edge, text-after-edge, ideographic, alphabetic, mathematical
longitud
%
drop-initial-value Es la propiedad básica y principal que activa el efecto drop-initial que visualemente hace que el texto fluya de forma no habitual en determinados momentos. initial
número
drop-initial-size Controla el grado de inmersión de la letra inicial con respecto a la línea base. auto
número
%
línea
inline-box-align Determina qué línea dentro de un elemento de muchas líneas utiliza para alinear un elemento de bloque en línea. initial, last
número
line-height Establece la altura y posición de la línea base, así como el espacio que se añade antes y después de cada bloque correlativo. normal
número
longitud
%
line-stacking Mecanismo por el que la línea base se ajusta en función del contenido del elemento de bloque que lo contiene. Viene definido por los parámetros definidos en la tabla.
  • line-stacking-strategy
  • line-stacking-ruby
  • line-stacking-shift
Valores para cada caso:
  • inline-line-height, block-line-height, max-height, grid-height
  • exclude-ruby, include-ruby
  • consider-shifts, disregard-shifts
text-height Determina la altura de un texto contenido en un elemento de bloque "inline". auto, font-size, text-size, max-size
vertical-align Determina la alineación vertical del contenido de una elemento de bloque. baseline, sub, super, top, text-top, middle, bottom, text-bottom
longitud
%
Subir

Prioridad: Baja | Última actualización realizada por el W3 Consortium: 24/02/2004

Este módulo proporcionará diferentes propiedades visuales relacionadas con el comportamiento de los enlaces.

Propiedades Parámetros Ejemplo
target Define las características del target destino, tanto su nombre, como su posición como el tipo de presentación de deberá tener. Es decir, el comportamiento de un enlace cuando ya se ha hecho click sobre él. Es una ampliación de los parámetros ya conocidos de target, como son _blank, _parent, _self y _top
  • target-name
  • target-new
  • target-position
Valores en cada caso:
  • current, root, parent, new, modal, cadena
  • window, tab, none
  • above, behind, front, back
target-new: tab ! important;
Subir

positioning

Prioridad: Baja | Última actualización realizada por el W3 Consortium: no hay fecha publicada

Este módulo propiedades que indican como deben fluir en el documento web los elementos. No existe en estos momentos desarrollo en CSS3 de sus propiedades, las que existen son las ya indicadas en CSS2.

Propiedades Parámetros Ejemplo
bottom Indica la distancia del elemento con respecto al límite inferior del elemento que lo contiene o de la página. auto
%
longitud
{ position: absolute; bottom: 0px; }
/* Localizaría al elemento siempre a una distancia de 0px con respecto al límite inferior de la página.*/
clip Propiedad que permite crear una máscara sobre otro elemento. Muy útil cuando queremos mostrar sólo una parte de una imagen y no toda. auto
shape
img { position:absolute; clip:rect (0px,60px,200px,0px); }
/* Crearía una máscara rectangular con las dimensiones indicadas entre paréntesis y con una posición absoluta */
left Indica la distancia del elemento con respecto al límite izquierdo del elemento que lo contiene o de la página. auto
%
longitud
{ position: absolute; left: 0px; }
/* Localizaría al elemento siempre a una distancia de 0px con respecto al límite izquierdo de la página.*/
position Determina la forma en la que el elemento debe fluir en el documento y por tanto su posición con respecto a los demás elementos. static, relative, absolute, fixed
position: relative;
position: absolute;
right Indica la distancia del elemento con respecto al límite derecho del elemento que lo contiene o de la página. auto
%
longitud
{ position: absolute; right: 0px; }
/* Localizaría al elemento siempre a una distancia de 0px con respecto al límite derecho de la página.*/
top Indica la distancia del elemento con respecto al límite superior del elemento que lo contiene o de la página. auto
%
longitud
{ position: absolute; top: 0px; }
/* Localizaría al elemento siempre a una distancia de 0px con respecto al límite superior de la página.*/
z-index Esta propiedad especifica el orden de visualización de un elemento con respecto a otro como si éstos fueran capas superpuestas. Es imprescindible haber definido la propiedad position. A mayor número del z-index más adelante estará el elemento con respecto al resto. auto
número
{ position:relative; z-index:4 }
Subir

ruby

Prioridad: Media | Última actualización realizada por el W3 Consortium: 14/05/2003

Este módulo describe las propiedades CSS necesarias para manipular la posición del "ruby", que son pequeñas anotaciones en lo alto de algunas palabras o cerca de ellas que se usan habitualmente para dar una explicación adicional de aquello que se menciona en el texto. Es especialmente utilizado en idiomas como el chino o el japonés.

<
Propiedades Parámetros
ruby-align auto, start, left, center, end, right, distribute-letter, distribute-space, line-edge
ruby-overhang auto, start, end, none
ruby-position before, after, right, inline
ruby-span attr[x], none
Subir

paged media

Prioridad: Media | Última actualización realizada por el W3 Consortium: 10/10/2006

Este módulo permite ajustar los estilos de un documento web para ser visualizados con proyectores u otros dispositivos generales. Ya existían propiedades al respecto en CSS2 que se han desarrollado mas para CSS3, permite establecer cabeceras, pies de página, saltos de página, contadores de página, etc.

A modo de referencia se citan sus propiedades a continuación.

Propiedades Parámetros
fit Permite escalar un elemento cuando su ancho o su alto no están definidas como auto. No todos los elementos son escalables, normalmente se aplica a imágenes. fill, hidden, meet, slice
fit-position Determina la posición del elemento escalado dentro del elemento de bloque. [ top | center | bottom ], [ left | center | right ]
longitud
%
image-orientation Especifica el grado de rotación de la imagen. [ top | center | bottom ], [ left | center | right ]
longitud
%
orphans Especifica el número mínimo de líneas que un párrafo debe tener para que deba ser situado al final de la página, todo ello con el objeto de controlar los saltos de página en el documento o presentación. número
page Propiedad que puede ser utilizada para especificar el tipo de página en la que se debe visualizar un documento determinado. auto
identificador
page-break-after Controla cómo deben de producirse los saltos de página. auto, always, avoid, left, right
page-break-before Controla cómo deben de producirse los saltos de página. auto, always, avoid, left, right
page-break-inside Controla cómo deben de producirse los saltos de página. auto, avoid
size Especifica el tamaño y la orientación de la caja que contiene el contenido de la página. auto, landscape, portrait
número
windows Especifica el número mínimo de líneas que un párrafo debe tener para que deba ser situado al principio de la página, todo ello con el objeto de controlar los saltos de página en el documento o presentación. número
Subir