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;
float:left;
float:right;
|
|
heightDetermina la altura de un elemento de bloque. max-height y min-height no son propiedades soportadas por IE.
|
auto
longitud en píxels
longitud en % |
height: 100px;
height: 25%;
|
|
widthDetermina el ancho de un elemento de bloque. max-width y min-width no son propiedades soportadas por IE.
|
auto
longitud en píxels
longitud en % |
width: 100px;
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...
|
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;
text-decoration:overline;
Ejemplo:
Texto subrayado superiormente
text-decoration:line-through;
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
Subir
color
Prioridad: Media | Última actualización realizada por el W3 Consortium: 21/07/2008
Subir
template layout
Prioridad: Media | Última actualización realizada por el W3 Consortium: 09/08/2007
Esta 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
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)*
* 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: "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.
|
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
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
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.
Subir
grid positioning
Prioridad: Media | Última actualización realizada por el W3 Consortium: 05/09/2007
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.
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
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:
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:
| 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
hyperlink
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.
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
Compartir