Upload
sergio-eu-ca
View
233
Download
0
Embed Size (px)
Citation preview
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;
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 15/10/2009
Propiedades Parmetros Ejemplo
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;
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 18/06/2009
Propiedades Parmetros Ejemplo
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;
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 09/08/2007
Propiedades Parmetros Ejemplo
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:
8/3/2019 Guia Refer en CIA Rapida CSS3
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
autolongitud en pxelslongitud en %
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
autolongitud en pxelslongitud en %
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
8/3/2019 Guia Refer en CIA Rapida CSS3
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;
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 06/03/2007
Propiedades Parmetros Ejemplo
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/3/2019 Guia Refer en CIA Rapida CSS3
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.
8/3/2019 Guia Refer en CIA Rapida CSS3
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
8/3/2019 Guia Refer en CIA Rapida CSS3
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
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 30/06/2009
Propiedades Parmetros Ejemplo
-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
8/3/2019 Guia Refer en CIA Rapida CSS3
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.
- - -
8/3/2019 Guia Refer en CIA Rapida CSS3
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:
Texto con un espaciado entrepalabras de 5 pxels.
Ejemplo:
Texto con un espaciado entrepalabras de 5 pxels.
Ejemplo:
Texto con un espaciado entrepalabras de 5 pxels.
Subir
color
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 21/07/2008
Propiedades Parmetros Ejemplo
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:
8/3/2019 Guia Refer en CIA Rapida CSS3
14/23
opacity Establece el grado detransparencia de un elemento.
n ergrado de transparencia en nmero (valor del 0 al1)
Subir
template layout
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 09/08/2007
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 16/12/2004
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
8/3/2019 Guia Refer en CIA Rapida CSS3
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;
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Propiedades Parmetros Ejemplo
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
8/3/2019 Guia Refer en CIA Rapida CSS3
17/23
animation
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 20/03/2009
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).
Propiedades Parmetros Ejemplo
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 01/12/2009
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.
Propiedades Parmetros Ejemplo
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:
8/3/2019 Guia Refer en CIA Rapida CSS3
18/23
directiontransition-durationtransition-property
ease-out, cubic-Bezier(nmero nmeronmero nmero)
Subir
grid positioning
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 05/09/2007
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.
Propiedades Parmetros Ejemplo
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 11/05/2004
Propiedades Parmetros Ejemplo
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).
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 01/12/2009
Propiedades Parmetros
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 15/05/2002
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%
8/3/2019 Guia Refer en CIA Rapida CSS3
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
8/3/2019 Guia Refer en CIA Rapida CSS3
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.
Propiedades Parmetros Ejemplo
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.
Propiedades Parmetros Ejemplo
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.*/
8/3/2019 Guia Refer en CIA Rapida CSS3
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
Prioridad: Media | ltima actualizacin realizada por el W3 Consortium: 14/05/2003
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.