Guia Refer en CIA Rapida CSS3

8/3/2019 Guia Refer en CIA Rapida CSS3

1/23

CompartirGua de Referencia Rpida de

CSS 3

Selectores de CSS 3

backgroundborderbox modelfonttextcolumncolor

template layouttablespeechlist & markersanimationstransitionsgrid positioningoutline3D/2D transformline boxhyperlinkpositioning

rubypaged media

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 numricos acompaados con la unidad de medidacorrespondiente, ejemplo: 2px, 2%, 2em. No todas las propiedades que se definen en esta gua de referencia son compatibles con todos los navegadores.Algunas de ellas estn en fase experimental y requieren de nomenclatura especial si se desea usarse en navegadorescomo Firefox, Safari o Chrome. Para ms aclaracin acerca de la compatibilidad del CSS 3 con los navegadoresconsulta este artculo.Ejemplo: para aplicar bordes redondeados en Firefox debemos escribir: -moz-border-radius: 5px, para Chrome: -

webkit-border-radius: 5px.

background

Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 15/10/2009

Propiedades Parmetros Ejemplo

background-image Especifica laimagen de fondo de un elementode bloque

url(..)none

background-image:url(../images/fondo.jpg);background-image: none;

background-position Especificala posicin de la imagen dentro

top left, top center, top right, center left, centercenter, center right, bottom left, bottom center,bottom right

background-position: top left;background-position: 50px 50px;


2/23

del elemento de bloque x-% y-% (ex. 50% 50%)x-pos y-pos (ex. 10px 20px)

background-position: 50% 50%;

background-size Establece eltamao de la imagen de fondo deun elemento de bloque.

longitud en pxelslongitud en %auto, cover, contain

background-size: 200px 50px;background-size: 100% 50%;

background-repeat Indica si laimagen de fondo se repite y si lohace en horizontal (repeat-x) o

vertical (repeat-y).

repeat, repeat-x, repeat-y, no-repeatbackground-repeat: none;background-repeat: repeat-x;

background-repeat: repeat-y;

background-attachment Establecesi la imagen de fondo de unelemento se mantiene fija o semueve con la pgina. Pordefecto, se mueve con la pgina.

scroll, fixedbackground-attachment: scroll;background-attachment: fixed;

background-origin Establece elpunto de origen a partir del cualempieza a verse la imagen defondo. sta puede partir delborde del elemento si lo tuviera,del padding o del contenido. Secombina con el selectorbackground-clip.

border-box, padding-box, content-boxbackground-origin: border-box;background-origin: padding-box;

background-origin: content-box;

background-clip Determina si laimagen de fondo se extiendehasta el borde o no. Se combinacon el selector background-origin.

longitud en pxelslongitud en %border-box, padding-box, content-box, no-clip

background-clip: border-box;background-clip: 10px 10px;background-clip: 20% 40%;

background-color Determina elcolor de fondo de un elemento

utilizando cualquiera de lasnomenclaturas especficas paraasignar un color.

cdigo de color

transparent

background-color: #333333;

background-color: transparent;background-color: rgb (255,0,0)

Subir

border



border-width Determina el anchodel borde.

border-top-widthborder-right-widthborder-bottom-widthborder-left-width

thin, medium, thicklongitud en pxels (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 deborde (punteado, slido, conguiones, doble, etc...).

border-top-styleborder-right-styleborder-bottom-style

none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset

border-style: 1px solid #000000;

border-bottom-style: 1px solid#000000;


3/23

border-left-style

border-color Determina el colordel borde.

border-top-colorborder-right-colorborder-bottom-colorborder-left-color

cdigo 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 radiode curvatura del borde. No escompatible con todos losnavegadores.

border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius

longitud en pxels (ex. 5px)border-radius: 5px;border-top-left-radius:10px;

box-shadow Determina lasombra de un elemento debloque. Se indica la longitud, elgrado de desenfoque y el colorde la sombra. No es compatiblecon todos los navegadores.

inset( distancia_horizontal distancia_vertical desenfoquecdigo_color )

box-shadow: 3px 3px 6px #888888;

Subir

font



font-family Especifica el nombrede la familia de la fuente.

nombre de la familia de la fuentenombre genrico de la familiainherit

font-family: 'Arial', 'Times-New-Roman', sans-serif;

font-size Especifica el tamao dela fuente.

xx-small, x-small, small, medium, large, x-large,xx-large, smaller, larger, inheritlongitud en pixelslongitud en %

font-size: 1em;font-size: 12px;font-size: 105%;

font-size-adjust Especifica el

tamao de la fuente que deberautilizarse basndose en el tamaode las minsculas en lugar de lasmaysculas.

none, inheritnmero

font-size-adjust: 0.5;font-size-adjust: none;

font-stretch Permite ensanchar oestrechar 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 lafuente, si sta es normal, cursiva,oblicua, etc..

normal, italic, oblique, inheritfont-style: normal;font-style: italic;

font-variant Determina si la fuentese muestra en maysculas font-variant: normal;


4/23

float:left;

float:right;

height: 100px;

height: 25%;

normales o del tipo "small-caps" amenor tamao.

normal, small-caps, inherit font-variant: small-caps;

font-weight Determina el grosorde la fuente.

normal, bold, bolder, lighter, 100, 200, 300, 400,500, 600, 700, 800, 900, inherit

font-weight: bold;

Subir

box model



clear Permite distribuir elementosde bloque como se necesiten en laestructura web. Clear: left;establece que no exista ningn otroelemento de bloque a la izquierdadel elemento al que se le asigna.

none, both, left, rightclear:both;clear:left;clear:right;

display Permite definir como debeser visualizado un elementoHTML. No todos los parmetrosson soportados por losnavegadores.

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 propiedadescompatibles con todos los navegadores:

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

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

display: blockdisplay: blockdisplay: inline

display: list-item;Ejemplo:display: blockdisplay: list-itemdisplay: list-item

float Establece la alineacin de unelemento dentro de otro.

left, right, none

float:none;Ejemplo:

float:none;

float:left;Ejemplo:

float:right;Ejemplo:

heightDetermina la altura de unelemento de bloque. max-heightymin-heightno son propiedadessoportadas por IE.

max-heightmin-height

autolongitud en pxels

longitud en %

height: 100px;Ejemplo:

height: 25%;Ejemplo:


5/23

width: 100px;

width:25%;

margin-top:20px;

margin-left:20px;

margin-right:20px;

margin-bottom:100px;

padding-top:

20px; padding-left:20px;

padding-right:20px;

padding-bottom: 100px;

widthDetermina el ancho de unelemento de bloque. max-width ymin-width no son propiedadessoportadas por IE.

max-widthmin-width

autolongitud en pxelslongitud en %

width: 100px;Ejemplo:

width: 25%;Ejemplo:

marginDetermina los mrgenes deun elemento con respecto a otro.

margin-topmargin-bottommargin-leftmargin-right


margin-top: 20px;Ejemplo:

margin-left: 20px;Ejemplo:

margin-right: 20px;Ejemplo:

margin-bottom:100px;Ejemplo:

paddingDetermina el espacio enblanco de un elemento conrespecto a otro.

padding-toppadding-bottompadding-leftpadding-right


padding-top: 20px;Ejemplo:

padding-left: 20px;

Ejemplo:

padding-right: 20px;Ejemplo:

padding-bottom:100px;Ejemplo:

marquee-directionDetermina ladireccin inicial en la que se

mueve el contenido de unamarquesina, esto es cuando elmarquee-effect es usado.

foward, reversed

marquee-direction:foward;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-direction:foward;overflow-style:marquee-line;overflow:auto;

marquee-direction:reversed;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible con


6/23

e c gomarquee-direction:reversed;overflow-style:marquee-line;overflow:auto;

marquee-play-count Especificacuantas veces se mueve elcontenido de una marquesina.

infinitentegro

marquee-play-count:infinite;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)

marquee-direction:foward;overflow-style:marquee-line;marquee-play-count:infinite;overflow:auto;

marquee-play-count:2;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-direction:foward;overflow-style:marquee-line;marquee-play-count:2;

overflow:auto;

marquee-speed Especifica lavelocidad con la que se mueve elcontenido de la marquesina.

slow, normal, fast

marquee-speed:slow;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-speed:slow;overflow-style:marquee-line;overflow:auto;

marquee-speed:fast;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-speed:fast;overflow-style:marquee-line;overflow:auto;

marquee-style Determina el tipo demovimiento de su contenido(movimiento de un lado a otro,scroll, aparece por un lado y separa una vez mostrado todo elcontenido, slide o movimientosalternativos, alternate).

scroll, slide, alternate

marquee-style:scroll;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-speed:slow;

overflow-style:marquee-line;overflow:auto;marquee-style:scroll;

marquee-style:slide;Ejemplo: (si no ves la marquesina, esque tu navegador no es compatible conel cdigo)marquee-speed:fast;overflow-style:marquee-line;overflow:auto;marquee-style:slide;


7/23

overflow Forma de delimitar uncontenido determinado de formaque parte del contenido sea visibley la otra parte sea invisible(hidden), se mueva con barras dedesplazamiento (scroll), etc...

overflow-xoverflow-y

visible, hidden, scroll, auto, no-display, no-content

overflow:hidden;Ejemplo:Parte del texto

overflow:scroll;Ejemplo:

rotation Determina el ngulo derotacin de un elemento de bloque.

ngulo de rotacinrotation:45deg; Todava nodesarrollado.

visibility Determina si el elementoen s es visible u oculto.

visible, hidden, collapsevisibility:visible;visibility:hidden;

Subir

text



direction Determina ladireccin en la que fluye eltexto.

ltr, rtl, inheritdirection:ltr;direction:rtl;

hanging-punctuation Estapropiedad determina si lasmarcas de puntuacin sonsituadas fuera de la lnea detexto o al final de la misma.

none, (inicio final esquina-final) Todava en fase de desarrollo.

letter-spacing Determina elespacio entre las letras.

normallongitud en pixelslongitud en em

letter-spacing:2px;Ejemplo:T e x t o c o n u n l e t te r - s p a c in g d e 2pxeles

letter-spacing:2em;Ejemplo:T e x t oc o n u nl e t t e r -s p a c i n gd e 2 e m

punctuation-trim Determina silos carcteres de puntuacincomo parntesis o corchetesdeben ser cortados en una lneao no.

none, (inicio fin adyacente) Todava en fase de desarrollo.

text-align Determina laalineacin de un bloque de

start, end, left, right, center, justify

text-align:left;Ejemplo:

Texto alineado a la izquierda

text-align:right;Ejemplo:


8/23

ex o en ro e e emen o quelo contiene.

ex o a nea o a a erec a

text-align:center;Ejemplo:

Texto alineado en el centro

text-decoration Determina si untexto est tachado, subrayadoinferior, suprayado superior oparpadeo.

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 paraescrituras asiticas, determina silos signos de puntuacin son

comas, puntos u otros smbolosy si stos se situan arriba oabajo de la lnea de texto.

none, (accent, dot, circle, disc) Slo para escrituras asiticas.

text-indent Determina laindentacin aplicada a laprimera lnea de un prrafo.

longitud en pxelslongitud en em

text-indent:20px;Ejemplo:

Texto indentado en 20 pxeles. Sloafectar a la primera lnea del prrafo dondese aplique.

text-indent:50%;

Ejemplo:

Texto indentado en unporcentaje del 50%. Slo afectar a la primeralnea del prrafo donde se aplique.

text-justify Determina lajustificacin de un prrafobasndose en los espacios en

auto, inter-word, inter-ideograph, inter-

text-justify:inter-word;Ejemplo:

Prrafo con justificacin inter-word. Prrafocon justificacin inter-word. Prrafo con

justificacin inter-word. Prrafo con

justificacin inter-word.


9/23

parmetro que se use., , , -

Ejemplo:

Prrafo con justificacin distribute. Prrafocon justificacin distribute. Prrafo con

justificacin distribute. Prrafo conjustificacin distribute.

text-outline Determina la lneaexterior de un texto, as comosu grosor y el color.

nonecolorlongitud en pxels

Todava en desarrollo

text-shadow Determina lasombra de un texto.

nonelongitud en pxels (distancia_verticaldistancia_horizontal desenfoque color)

text-shadow: 1px 1px 2px #666;Ejemplo:

Texto con sombra.Texto con sombra.

text-transform Determina si untexto se representa enmaysculas, minsculas o laprimera letra en maysculas yel resto en minsculas.

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 enla que un texto se parte de unalnea a otra

normal, none, unrestricted, suppress

text-wrap:normal;Ejemplo:

Las lneas de este prrafo se partiran deforma normal utilizando las reglas de rupturaentre lneas por defecto en el documentohtml.

text-wrap:none;Ejemplo:

Las lneas de este prrafo no se partirannunca, con lo que es posible que este texto sesalga del elemento que lo contiene.

text-wrap:unrestricted;Ejemplo:

Las lneas de este prrafo de texto se partiransin ninguna restriccin al respecto.

text-wrap:suppress;

Ejemplo:

Los saltos de lnea de este prrafo se


10/23

que interfiera.

unicode-bidiEn algunosidiomas el texto fluye dederecha a izquierda y en otros ala inversa, as pues estapropiedad del texto permitedeterminar en qu direccindebe de fluir un texto para sucorrecta lectura. Esta propiedadfunciona junto con la dedirection: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 deincrustacin. En caso de elementos en lnea,

la aplicacin del parmetro unicode se.aplicar a travs de todos los elementos

unicode-bidi:embed;Ejemplo:

Crea un nuevo nivel incrustado, con la

direccin del contenido especificado por el.parmetro direction

unicode-bidi:bidi-override;Ejemplo:

al noc lanoicida odatsurcni levin nu aerCOLS odacificepse odinetnoc led niccerid

rolav etsE .noitcerid dadeiporp al roprop nedro ed ameuqse le aluna etnemacitcrp

.otcefed

white-spacePropiedad quedeclara si el espacio en blancodentro del elemento se contraey cmo debe contraerse.

normal, pre, nowrap, prewrap, pre-line

white-space:normal;Ejemplo:

Colapsa losespacios enblanco y haceque el textofluya demanera normal.

white-space:pre;

Ejemplo:

Respeta los espacios en blanco y no aplica ningu

white-space:nowrap;Ejemplo:

Colapsa los espacios en blanco pero no aplica ni

white-space:pre-wrap;Ejemplo:

Mantiene los


11/23

blanco yestablece laseparacin deltexto de formanormal.

white-space:pre-line;Ejemplo:

Los espacios secolapsan, perolos saltos delnea serespetan.Y el texto fluyede formanormal.

white-space-collapsePropiedadque declara si los espacios en

blanco de un texto se contraeny de qu manera. Propiedad endesarrollo.

preserve, collapse, preserve-breaks, discard Todava en desarrollo.

word-breakPropiedad quecontrola el comportamiento delos saltos de lnea con respectoa las palabras. Es especialmentetil cuando se usan textos endiferentes idiomas dentro de unmismo elemento. Dependerdel 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 elespacio entre palabras.

nonelongitud en pxelslongitud en %

word-spacing:5px;Ejemplo:

Texto con un espaciado entre palabrasde 5 pxels.

Subir

column



-moz-column-count:2;Ejemplo: (propiedad en fase dedesarrollo)

Texto distribuido en dos columnas.Esta propiedad no funciona en todoslos navegadores. Texto distribuido endos columnas. Esta propiedad no

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


12/23

column-count Establece elnmero de columnas en las quese divide un prrafo.

autonmero entero

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

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

column-gap Determina el espacioen blanco entre columnas.

normallongitud en pxels

-moz-column-gap:10px;Ejemplo: (propiedad en fase dedesarrollo)

Texto con un espaciado entrecolumnas de 20 pxels. Texto con unespaciado entre columnas de 20pxels. Texto con un espaciado entrecolumnas de 20 pxels. Texto con unespaciado entre columnas de 20pxels. Texto con un espaciado entrecolumnas de 20 pxels. Texto con un

espaciado entre columnas de 20pxels. Texto con un espaciado entrecolumnas de 20 pxels.

column-rule Determina a travsde sus propiedades column-rule-

width, column-rule-color ycolumn-rule-style lascaractersticas de cada columna.

column-rule-widthcolumn-rule-colorcolumn-rule-style

Valores para cada sub-propiedad:

longitud en em o pxelscdigo del colormismos parmetros 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 dedesarrollo)

Ejemplo de columnas con elparmetro column-rule. Ejemplo decolumnas con el parmetro column-rule. Ejemplo de columnas con elparmetro column-rule. Ejemplo decolumnas con el parmetro column-rule. Ejemplo de columnas con elparmetro column-rule. Ejemplo decolumnas con el parmetro column-rule. Ejemplo de columnas con elparmetro column-rule. Ejemplo decolumnas con el parmetro column-

rule.

- - -


13/23

column-width Permite establecerel ancho de cada columna. autolongitud en pxels o em

Ejemplo: (propiedad en fase dedesarrollo)

Texto en columnas. Texto encolumnas. Texto en columnas. Textoen columnas. Texto en columnas.Texto en columnas. Texto encolumnas. Texto en columnas. Textoen columnas. Texto en columnas.

Texto en columnas. Texto encolumnas. Texto en columnas. Textoen columnas. Texto en columnas.Texto en columnas. Texto encolumnas. Texto en columnas. Textoen columnas. Texto en columnas.Texto en columnas. Texto encolumnas. Texto en columnas. Textoen columnas. Texto en columnas.Texto en columnas. Texto encolumnas.

Ejemplo:

Texto con un espaciado entrepalabras de 5 pxels.

Ejemplo:


Ejemplo:


Ejemplo:


Subir

color



color Determina el color delelemento sobre el que se aplica.

inheritcdigo de color

color:#cc0000;Ejemplo:

Texto de color rojo escrito con cdigo decolor hexadecimal

opacity:0.5;filter:alpha(opacity=50); /* para IE */E em lo:


14/23

opacity Establece el grado detransparencia de un elemento.

n ergrado de transparencia en nmero (valor del 0 al1)

Subir

template layout


Esta especificacin se encuentra en fase de desarrollo, ms concretamente en modo "borrador" segn elWWW Consortium.Se sabe que depender de otros mdulos para su elaboracin como el box module, text module,

positioning module, etc...El objeto de esta especificacin ser el de establecer una plantilla invisible que nos sevir para maquetarel contenido de una pgina web. Su uso ser ideal en caso de pginas web muy complejas y/oformularios complicados.

Subir

table

Segn el W3 Consortium el modelo de tablas ser el mismo que el estipulado para CSS2 salvo algunos desarrollos ms que notienen establecido fecha de revisin por el momento.

Las tablas son una forma ms que permite mostrar contenido de forma ordenada y estructurada a travs de filas y columnas.El modelo de tablas para CSS3 parece que ser igual que el actual en CSS2 pero abarcando ms detalles. A da de hoy estaespeficiacin se encuentra en fase "borrador" y con prioridad baja, no se conoce fecha de prxima revisin en el WWWConsortium.A modo de recordatorio se exponen las propiedades actuales de table

Propiedades actuales para table en CSS2 Parmetros

table-layout Determina el modo en el que una tablase visualiza.

auto, fixed, inherit

border-collapse Determina el estilo del borde de latabla.

collapse, separate, inherit

border-spacing Determina la distancia que separa losbordes de las celdas.

inheritlongitud longitud

caption-side Determina la alineacin del contenidoen la tabla.

top, bottom, inherit

empty-cells Determina si la celda que posee estapropiedad se muestra o no.

show, hide, inherit

Subir

speech


Esta especificacin contiene propiedades que permiten que un documento sea interpretado por un sintetizador y reproducido enforma de audio. Ya exista un mdulo en CSS2. Las propiedades implementadas en CSS3 son las mismas que en CSS2 pero condiferentes valores.

Muy usado para usuarios con discapacidad visual.

Pro iedades Parmetros E em lo


15/23

cue Existen elementos auditivosque se emplean para separarcontenidos diferentes dentro de lalectura del documento. Estossonidos se ejecutan antes odespus del siguiente contenidopara delimitarlo. Existendiferentes valores a aplicar en

cada caso.

cue-beforecue-after

(cue-before cue-after)*

* Cada uno de estos parmetros puede adquirir estos valores ydeber ser expresado con esta estructura:url (ruta_archivo_audio ( nmero | % | silent | x-soft | soft | medium| loud | x-loud | none | inherit ))donde:nmero, equivale a un valor entre 0 y 100 que indica el volumencon 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 sonidosilent | x-soft | soft | medium | loud | x-loud, son valores establecidosde secuencias montonas y no d ecrecientes en volumen d e sonidosdonde silentes 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 permiteestablecer marcas o puntosespecficos en la cadena desonido. No son efectos audibles.Suelen ser etiquetas de texto quepermiten orientarnos en eldesarrollo de la interlocucin.

mark-beforemark-after

(mark-before mark-after)mark-before: "start";mark-after: "end";mark: "start" "end";

pause Especifica la duracin de lapausa prosdica entre elementos.

pause-beforepause-afterphonemes

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 descansoprosdico entre elementos.

rest-beforerest-after

none, x-weak, weak, medium, strong, x-strong,inherittiempo (en segundos o milisegundos)

rest: 2s 1s; /*[rest-before rest-after]*/

speak Especifica si el texto debeser renderizado fonticamente yde qu manera (deletreado,enumerado, incluyendo signos depuntuacin, etc...).

none, normal, spell-out, digits, literal-punctuation,no-punctuation, inherit

speak:normal;speak:spell-out;

voice-balance Se refiere albalance entre el canal izquierdo yel derecho de audio.

left, center, right, leftwards, rightwards, inheritnmero (entre -100 (left) y 100 (right))

voice-balance:left;voice-balance:90;

voice-duration Especifica eltiempo que se tarda en interpretarun elemento.

tiempo (en segundos o milisegundos) voice-duration: 3s;

voice-family El valor separadopor comas especifica lascaractersticas de la voz.

(specific-voice, age, generic-voice, number)*

* donde:specific-voice son valores especficos de u na vo z (ej. "comedian")age tiene como po sibles valores child, young y oldgeneric-voice son valores de familias de voces, tiene como valoresposible male, female y neutral

number especifica la variante preferida dentro de u n conjunto devoces caractersticos. Su valor debe ser un nmero entero positivo

inherit

voice-family: announcer, old male;voice-family: romeo, young male;voice-family: juliet, female;

voice-family: male 3;


16/23

voice-rate Determina el rango devoz del interlocutor.

x-slow, slow, medium, x-fast, fast, inherit% (un 50% significa la mitad del rango de unavoz)

voice-rate:fast;voice-rate:60%;

voice-pitch Determina el campode frecuencia en el que seinterpretar el documento. Parahombres el valor comn es de120Hz y para la mujer de 210Hz.

x-low, low, medium, high, x-high, inheritnmero entero no negativo (de Hercios)%

voice-pitch:medium;voice-pitch: 210hz;

voice-pitch-range Determina elrango del campo de frecuencia enel que se interpretar eldocumento. Para hombres el valorcomn es de 120Hz y para lamujer de 210Hz.

x-low, low, medium, high, x-high, inheritnmero entero no negativo (de Hercios)%

voice-pitch-range:medium;voice-pitch-range: 210hz;

voice-stress Indica la fuerzaaplicada en el nfasis.

strong, moderate, none, reduced, inherit voice-stress:strong;

voice-volume Determina elvolumen, o amplitud de onda, dela interpretacin del documentoweb.

silent, x-soft, soft, medium, loud, x-loud, inheritporcentaje %

voice-volume:medium;voice-volume: 50%;

Subir

list & markers

Prioridad: Baja | ltima actualizacin realizada por el W3 Consortium: 07/11/2002


list-style Propiedad que permite

determinar el aspecto de una listatanto ordenada, ol comodesodenada, ul.

list-style-imagelist-style-positionlist-style-type

none, urlinside, outsidenone, normal, box, check, circle, square,diamond, disc, hyphen

list-style: none inside circle;

Ejemplo:Esta es una lista no-ordenandade tems:tem nmero 1tem nmero 2tem nmero 3tem nmero 4

::marker Es un pseudo-elementoque permite establecer comomarcado de una lista un elementopersonalizado. Slo funcionar siel valor de la propiedad "content"no es inhibit. Al ser un pseudo-elemento su nomenclaturacorrecta es ::marker.

Como pseudo-elemento de bloque puede adoptartodas las propiedades normales de un elemento debloque como display. Propiedad en fase dedesarrollo.

Ejemplo de marker aplicado a unelemento p

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

Subir


17/23

animation


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


animationAnimaciones deelementos controladaspor CSS

animation-delayanimation-directionanimation-durationanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function

Valores para cadapropiedad:

tiemponormal, alternatetiempoinherit, infinitetiemponone, IDENTrunning, pausedease, linear, ease-in,ease-out, cubic-Bezier(nmero nmeronmero nmero)

Ejemplo de cdigode una animacin:

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


Este comportamiento se encuentra en fase de desarrollo. Las transicionesson efectos de presentacin en los que un elemento concreto cambia suspropiedades de CSS de un valor a otro. Slo propiedades animables pueden serutilizadas para crear estos efectos de transicin.


transition Efectoproducido al cambiaren el tiempo laspropiedades de loselementos a travs de

CSS.transition-delay

transition-

Valores para cadapropiedad:tiempo

tiemponone, all

ease, linear, ease-in,

Ejemplo de cdigo

de una transicin:


18/23

directiontransition-durationtransition-property

ease-out, cubic-Bezier(nmero nmeronmero nmero)

Subir

grid positioning


Este mdulo se encuentra en fase de desarrollo. Este mdulo aade lacapacidad de adaptar en tamao y posicin los elementos de un documento weben base a un sistema de rejilla creado con CSS que sirve como gua.


grid Propiedad quepermite establecer unsistema de rejilla debase para lamaquetacin de undocumento web.

grid-columnsgrid-rows

none, inherit(longitud porcentajelongitud_relativa)

Ejemplo de grid paraun documento web:

body {grid-columns: * *(0.5in * *)[2];grid-rows: 20% *;columns:3;column-gap:0.5in;}

Subir

outline



outline Esta propiedad ha sidoextendida en CSS3 para incluir suparmetro offsetque permite crearun espacio alrededor de unelemento a partir de la esquinams externa del mismo. Funcionacon Opera, Safari y Firefox.

outline-coloroutline-offsetoutline-styleoutline-width

Los posibles valores para cada parmetroson:invert, cdigo de colorinherit, longitudnone, dotted, dashed, solid, double, groove,

ridge, inset, ousetthin, medium, thick o longitud

outline-offset:20px;Ejemplo:

Bloque con texto y grado detransparencia del 50%

Subir

3D/2D transform

Este mdulo se encuentra en fase de desarrollo. La propiedad transform permite modificar el estado de un elemento ya sea portraslacin, rotacin, escalado o perspectiva en cualquier de los ejes de coordenadas espaciales (x,y,z).


Propiedades Parmetros


19/23

transform Una transformacinbidimensional es aplicada a unelemento usando esta propiedad y atravs de las funciones que a ellacorresponden. La transformacinfinal se obtiene del resultado de unamatriz que contiene todos los

valores de cada funcinespecificada.

transformtransform-origintransform-styleperspectiveperspective-originbackface-visibility

Los posibles valores para cada parmetro son:

transform

none, matrix, matrix3d, translate3d, translateX, translateY, translateZ, scale,scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew,skewX, skewY, perspective cdigo de colortransform-origin

[ [ porcentaje | longitud | left | center | right ] [ porcentaje | longitud | top | center |bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]transform-style

flat, preserve-3dperspective

none, nmeroperspective-origin

[ [ porcentaje | longitud | left | center | right ] [ porcentaje | longitud | top | center |bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]backface-visibility

visible, hidden

Subir

line box


La mayora de las propiedades de este modelo estn en borrador y no son soportadas por los navegadores.

Esta especificacin controla los aspectos visuales de los elementos de bloque. Es una propiedad nueva de CSS3. Por norma generalel contenido de un elemento de bloque suele empezar en la esquina superior izquierda de este mismo bloque, as pues, laspropiedades de line-box pretenden establecer nuevos aspectos.

Permite crear inicios de lnea como los que se muestran en elas siguientes imgenes:

Para entender los selectores que se describen a continuacin es necesario conocer los distintos tipos de lnea base o baseline que se

pueden establecer:

Propiedades Parmetros

alignment-adjust Permite alinear los

elementos de forma mucho masprecisa. Con esta propiedad, laalineacin de la lnea base vienedefinida por el parmetro

auto, baseline, before-edge, text-before-edge, middle, central, after-edge, text-after-edge,ideo-graphic, alphabetic, hang-ing, mathematicallongitud%


20/23

alignment-baseline

alignment-baseline Especificacomo un elemento de bloquecontenido en otro es alineado conrespecto 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 laposicin de la lnea base relativa ala lnea dominante. Esto ocurre con

elementos subndices osuperndices que tienen lneas basediferentes a la genrica.

baseline, sub, super

longitud%

dominant-baseline Esta propiedadse usa para redefinir la lnea basede 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 laalineacin dentro de un elementode bloque, que se usa derivada delparmetro drop-initial-value comopunto de conexin con la letrainicial de la caja de texto.

Mismos valores que alignment-baseline

drop-initial-after-adjust Determinael punto de alineamiento inicialrelacionando el elemento de bloquecon la lnea base especificada.

central, middle, after-edge, text-after-edge, ideographic, alphabetic, mathematicallongitud%

drop-initial-value Es la propiedadbsica y principal que activa elefecto drop-initial quevisualemente hace que el textofluya de forma no habitual en

determinados momentos.

initialnmero

drop-initial-size Controla el gradode inmersin de la letra inicial conrespecto a la lnea base.

autonmero%lnea

inline-box-align Determina qulnea dentro de un elemento demuchas lneas utiliza para alinearun elemento de bloque en lnea.

initial, lastnmero

line-height Establece la altura y

posicin de la lnea base, as comoel espacio que se aade antes ydespus de cada bloque correlativo.

normal

nmerolongitud%

line-stacking Mecanismo por el quela lnea base se ajusta en funcindel contenido del elemento debloque que lo contiene. Vienedefinido por los parmetrosdefinidos en la tabla.

line-stacking-strategyline-stacking-ruby

line-stacking-shift

Valores para cada caso:

inline-line-height, block-line-height, max-height, grid-heightexclude-ruby, include-rubyconsider-shifts, disregard-shifts

text-height Determina la altura de


21/23

un texto contenido en un elementode bloque "inline".

auto, font-size, text-size, max-size

vertical-align Determina laalineacin vertical del contenido deuna elemento de bloque.

baseline, sub, super, top, text-top, middle, bottom, text-bottomlongitud%

Subir

hyperlink

Prioridad: Baja | ltima actualizacin realizada por el W3 Consortium: 24/02/2004

Este mdulo proporcionar diferentes propiedades visuales relacionadas con el comportamiento de los enlaces.


target Define las caractersticas deltarget destino, tanto su nombre,como su posicin como el tipo depresentacin de deber tener. Esdecir, el comportamiento de unenlace cuando ya se ha hechoclick sobre l. Es una ampliacinde los parmetros ya conocidos detarget, como son _blank, _parent,

_selfy _top

target-nametarget-newtarget-position

Valores en cada caso:

current, root, parent, new, modal, cadenawindow, tab, noneabove, behind, front, back

target-new: tab ! important;

Subir

positioning

Prioridad: Baja | ltima actualizacin realizada por el W3 Consortium: no hay fecha publicada

Este mdulo propiedades que indican como deben fluir en el documento web los elementos. No existe en estos momentosdesarrollo en CSS3 de sus propiedades, las que existen son las ya indicadas en CSS2.


bottom Indica la distancia del

elemento con respecto al lmiteinferior del elemento que locontiene o de la pgina.

auto%longitud

{ position: absolute; bottom: 0px; }/* Localizara al elemento siempre a una

distancia de 0px con respecto al lmiteinferior de la pgina.*/

clip Propiedad que permite crearuna mscara sobre otroelemento. Muy til cuandoqueremos mostrar slo una partede una imagen y no toda.

autoshape

img { position:absolute; clip:rect(0px,60px,200px,0px); }/* Creara una mscara rectangular con lasdimensiones indicadas entre parntesis ycon una posicin absoluta */

left Indica la distancia delelemento con respecto al lmite

izquierdo del elemento que lo

auto

%

{ position: absolute; left: 0px; }

/* Localizara al elemento siempre a unadistancia de 0px con respecto al lmite

izquierdo de la pgina.*/


22/23

contiene o de la pgina. longitud

position Determina la forma enla que el elemento debe fluir enel documento y por tanto suposicin con respecto a losdems elementos.

static, relative, absolute, fixedposition: relative;position: absolute;

right Indica la distancia delelemento con respecto al lmitederecho del elemento que locontiene o de la pgina.

auto%longitud

{ position: absolute; right: 0px; }/* Localizara al elemento siempre a unadistancia de 0px con respecto al lmitederecho de la pgina.*/

top Indica la distancia delelemento con respecto al lmitesuperior del elemento que locontiene o de la pgina.

auto%longitud

{ position: absolute; top: 0px; }/* Localizara al elemento siempre a unadistancia de 0px con respecto al lmitesuperior de la pgina.*/

z-index Esta propiedadespecifica el orden devisualizacin de un elementocon respecto a otro como si stosfueran capas superpuestas. Esimprescindible haber definido lapropiedad position. A mayornmero del z-index ms adelanteestar el elemento con respectoal resto.

autonmero

{ position:relative; z-index:4 }

Subir

ruby


Este mdulo describe las propiedades CSS necesarias para manipular la posicin del "ruby", que son pequeas anotaciones en loalto de algunas palabras o cerca de ellas que se usan habitualmente para dar una explicacin adicional de aquello que se mencionaen el texto. Es especialmente utilizado en idiomas como el chino o el japons.

Documents

Guia Refer en CIA Rapida CSS3