Está en la página 1de 8

Guía de Referencia Rápida CSS 2.

Guía de Referencia CSS [C ASCADING S TYLE S HEETS]

2 . 1

SELECTORES
Patrón Aplicado a: Ejemplo
* C u a lq ui e r e le m e n to N /D [NO DISPONIBLE]
e E le m e n to <e> <e>
<e>...<d>...<f/>...
e f C u a lq u i e r <f> q u e e s té i n c lu i d o e n <e>
</d>...</e>
e > f C u a lq u i e r <f> q u e e s h i jo d e <e> <e>...<f>...</f>...</e>
e:first-child <e> c u a n d o e s e l p r i m e r h i jo d e s u e le m e n to p a d r e <f><e></e>...</f>
e + f <f> s i e s tá p r e c e d i d o i n m e d i a t a m e n te p o r u n <e> ...</e> <f>...<f>
e[miAtr] <e> s i p o s e e e l a tr i b u to "miAtr" <e miAtr="xxx".../>
e[miAtr="v"] <e> s i p o s e e e l a tr i b u to "miAtr" y e s te t i e n e e l v a lo r "v" <e miAtr="v".../>
<e> s i s u a tr i b u t o "miAtr" e s u n a li s t a d e v a lo r e s s e p a r a d o s p o r e s p a c i o s y
e[miAtr~="v"] <e miAtr="x y z v".../>
uno e s "v"
<e> s i s u a tr i b u t o"lang" e s u n a li s ta d e v a lo r e s s e p a r a d o s p o r g u i o n e s y
e[lang|="es"] <e lang="es-ES" .../>
c o m ie n za c o n "es"
e.miClase <e> c u y a c la s e e s "miClase" <e class="miClase".../>
e#miId <e> c u y o i d e n ti f i c a d o r e s miId <e id="miId".../>
a:link E n la c e s n o v i s i ta d o s N /D

a:visited E n la c e s v i s i t a d o s N /D

e:active <e> c u a n d o e s a c ti v a d o ( t i e m p o e n tr e q u e s e p u ls a u n b o tó n s o b r e é l y s e s u e lta ) N /D

e:hover <e> c u a n d o s e p o s i c i o n a e l c u r s o r s o b r e é l p e r o n o s e a c ti v a N /D

e:focus <e> c u a n d o ti e n e e l f o c o p o s i c i o n a d o e n é l N /D

e:lang(c) <e> s i e s tá m a r c a d o c o n e l i d i o m a c N /D

e:first-line P r i m e r a lín e a d e <e> N /D

e:first-
P r i m e r a le t r a d e <e> N /D
letter
e:before A p li c a c o n t e n i d o a n te s d e <e> N /D

e:after A p li c a c o n t e n i d o d e s p u é s d e l e le m e n to <e> N /D

e , f A p li c a e l m i s m o c o n te n i d o a lo s e le m e n t o s <e> y <f> N /D

NOTACIÓN TIPOS DE MEDIOS


Patrón Descripción Nombre Medio
a b a seguido de b all Todos los dispositivos
( a b ) a y b agrupados braille Dispositivos táctiles braille
[ a | b ] aob embossed Impresoras braille
[ a || b ] a o b o ambos Dispositivos de mano (pantallas pequeñas, ancho de banda reducido,
handheld
a? a es opcional etc.)

a* 0 o varios a print Para documentos paginados y mostrados en vista de impresión

a+ 1 o varios a projection Dispositivos de proyección de presentaciones

a como mínimo n veces y como screen Pantallas a color de equipos informáticos


a {n, m}
máximo m speech Para sintetizadores de voz. Similar a "aural"
tty Dispositivos de visualización con capacidades limitadas
tv Televisores

SINTAXIS UNIDADES
px Píxeles (relativo al dispositivo) % Porcentaje
em Tamaño de la fuente actual 0 No requiere unidad
@import "hoja.css" tipo-medio;
ex Alto del caracter 'x'
/* Comentarios */

1 de 8
Guía de Referencia Rápida CSS 2.1

in
Pulgadas (1pulgada = 2.54 cm #RRGGBB
Color RGB [REDGREENBLUE] (6 Valores
[CENTÍMETROS] ) hexadecimales)
cm Centímetros Notación simplificada (#RGB =
#RGB
mm Milímetros #RRGGBB)
pt Puntos (1pt = 1/72pulgadas) rgb(R,G,B) Color RGB (3 valores de 0 a 255)
pc Picas (1pica = 12 puntos) rgb(R%,G%,B%) Color RGB (3 valores porcentuales)

2 de 8
G uía de R eferencia R ápida C SS 2.1

M ODELO DE CAJAS

ÁRGENES
Propiedad Descripción Valores
margin-top
Tamaño del margen
margin-right [ <longitud> |
superior, derecho, inferior
margin-bottom <porcentaje> | auto ]
e izquierdo
margin-left
[ <longitud> |
Ancho para varios
margin <porcentaje> | auto
márgenes individuales ]{1,4}

RELLENO
Propiedad Descripción Valores
padding-top
padding-right Ancho del relleno superior, derecho, inferior e
[ <longitud> | <porcentaje> ]
padding-bottom izquierdo
padding-left
padding Tamaños para varios rellenos individuales [ <longitud> | <porcentaje> ] {1,4}

BORDES
Propiedad Descripción Valores
border-top-width
border-right-width Anchura del borde superior, derecho, inferior o
[ thin | medium | thick | <longitud> ]
border-bottom-width izquierdo
border-left-width
border-width Anchos de varios bordes individuales [ thin | medium | thick | <longitud> ] {1,4}
border-top-color
border-right-color C olordelborde superior,derecho,inferioro
[ <color> | transparent ]
border-bottom-color izquierdo
border-left-color
border-color C olores de varios bordes individuales [ <color> | transparent ] {1,4}
border-top-style
border-right-style Estilo delborde superior,derecho,inferioro [ none | hidden | dotted | dashed | solid |
border-bottom-style izquierdo double | groove | ridge | inset | outset ]
border-left-style
[ none | hidden | dotted | dashed | solid |
border-style Estilos de varios bordes individuales double | groove | ridge | inset | outset ]
{1,4}
border-top
border-right Ancho,estilo y elcolorpara elborde superior, [ <border-top-width> || <border-top-style> ||
border-bottom derecho,inferioro izquierdo <border-top-color> ]
border-left
[ <border-top-width> || <border-top-style> ||
border Ancho,elestilo y elcolorpara los 4 bordes
<border-top-color> ]

M ODELO DE FORMATO VISUAL


Propiedad Descripción Valores
[ inline | block | list-item | run-in |
inline-block | table | inline-table | table-
row-group | table-header-group | table-
display C om portam iento delcontenedor
footer-group | table-row | table-column-group
| table-column | table-cell | table-caption |
none ]
position Esquem a de posicionam iento [ static | relative | absolute | fixed ]

3 de 8
G uía de R eferencia R ápida C SS 2.1

Propiedad Descripción Valores


top
D esplazam iento de la caja (respecto allím ite
right
superior,derecho,inferioro izquierdo del [ <longitud> | <porcentaje> | auto ]
bottom
contenedor)
left
float Posicionam iento flotante [ left | right | none ]
clear C ontrolde cajas adyacentes a los float [ none | left | right | both ]
z-index Solapam iento de niveles de capas [ auto | <entero_con_signo> ]
direction Sentido direccionalde la escritura [ ltr | rtl ]
unicode-bidi Sentido direccionalde la escritura [ normal | embed | bidi-override ]

4 de 8
G uía de R eferencia R ápida C SS 2.1

DETALLES DEL MODELO DE FORMATO VISUAL


Propiedad Descripción Valores
width Ancho [ <longitud> | <porcentaje> | auto ]
min-width Ancho m ínim o [ <longitud> | <porcentaje> ]
max-width Ancho m áxim o [ <longitud> | <porcentaje> | none ]
height Alto [ <longitud> | <porcentaje> | auto ]
min-height Alto m ínim o [ <longitud> | <porcentaje> ]
max-height Alto m áxim o [ <longitud> | <porcentaje> | none ]
[ normal | <número> | <longitud> |
line-height Altura entre las bases deltexto
<porcentaje> ]
[ baseline | sub | super | top | text-top |
vertical-align Alineación verticaldeltexto middle | bottom | text-bottom | <porcentaje>
| <longitud> ]

EFECTOS VISUALES
Propiedad Descripción Valores
C om portam iento delcontenido sise desborda
overflow [ visible | hidden | scroll | auto ]
en la caja
[ rect (<longitud>, <longitud>, <longitud>,
clip Especifica la región visible delelem ento <longitud>) | auto ]
visibility Visibilidad de las cajas [ visible | hidden | collapse ]

CONTENIDO GENERADO, NUMERACIÓN AUTOMÁTICA Y LISTAS


Propiedad Descripción Valores
[ normal | none | [ <texto> | <uri> |
Agregadorde contenido para :after y <contador> | attr(X) | open-quote |
content
:before close-quote | no-open-quote | no-close-
quote]+ ]
quotes Especifica las m arcas para indicarlas citas [ [ <texto> <texto> ]+ | none ]
counter-reset Inicializa un contador [ [ <identificador> <entero>? ]+ | none ]
counter-increment Increm enta un contador [ [ <identificador> <entero>? ]+ | none ]
[ disc | circle | square | decimal | decimal-
leading-zero | lower-roman | upper-roman |
Estilo aplicable a los m arcadores visuales de
list-style-type lower-greek | lower-latin | upper-latin |
las listas
armenian | georgian | lower-alpha |
upper-alpha | none ]
list-style-image Im agen aplicable a los elem entos de las listas [ url("http://...") | none ]
Posición dentro de la lista de los elem entos
list-style-position [ inside | outside ]
m arcadores de las listas
Perm ite establecerelestilo de la lista,la [ <list-style-type> || <list-style-position>
list-style
im agen y/o la posición || <list-style-image> ]

COLORES Y FONDO
Propiedad Descripción Valores
color C olordelprim erplano <color>
background-color C olorde fondo [ <color> | transparent ]
background-image Im agen de fondo [ url(...) | none ]
background-repeat Repetición de la im agen de fondo [ repeat | repeat-x | repeat-y | no-repeat ]
background-
D esplazam iento de la im agen de fondo [ scroll | fixed ]
attachment
[ [ <porcentaje> | <longitud> | left | center
| right ] [ <porcentaje> | <longitud> | top |
background-position Posición de la im agen de fondo
center | bottom]? ] | [ [ left | center |
right ] || [ top | center | bottom ] ]
[ <background-color> || <background-image> ||
Propiedades individuales relacionadas con el
background <background-repeat> || <background-
fondo attachment> || <background-position> ]

5 de 8
G uía de R eferencia R ápida C SS 2.1

M EDIOS PAGINADOS
Propiedad Descripción Valores
[ auto | always | avoid | left |
page-break-before G estionarsaltos de página antes delelem ento
right ]
[ auto | always | avoid | left |
page-break-after G estionarsaltos de página posterioralelem ento
right ]
page-break-inside Evita los saltos de línea en elinteriordelelem ento [ avoid | auto ]
M ínim o núm ero de líneas de un párrafo que deben ser
orphans <entero>
dejadas com o m ínim o alfinalde una página
M ínim o núm ero de líneas de un párrafo que deben ser
widows <entero>
dejadas com o m ínim o alprincipio de una página

6 de 8
G uía de R eferencia R ápida C SS 2.1

FUENTES
Propiedad Descripción Valores
[ [ <nombre-familia> | <familia-genérica> ]
font-family Fam ilias de fuentes [, <nombre-familia> | <familia-genérica> ]* ]
font-style Estilo de la fuente [ normal | italic | oblique ]
C onvierte las m inúsculas a m ayúsculas pero [ normal | small-caps ]
font-variant
m antienen un tam año inferiora las m ayúsculas
[ normal | bold | bolder | lighter | 100 |
font-weight Intensidad de la fuente 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
]
[ [ xx-small | x-small | small | medium |
font-size Tam año de la fuente large | x-large | xx-large] | [larger |
smaller] | <longitud> | <porcentaje> ]
[ [ [ <font-style> || <font-variant> ||
<font-weight> ]? <font-size> [ / <line-
Atajo para establecerelresto de propiedades
font height> ]? <font-family> ] | caption | icon |
sobre las fuentes a la vez menu | message-box | small-caption |
status-bar ]

TEXTO
Propiedad Descripción Valores
text-indent D esplazam iento de la prim era línea deltexto [ <longitud> | <porcentaje> ]
text-align Alineam iento deltexto [ left | right | center | justify ]
[ none | [ underline || overline ||
text-decoration Efectos de subrayado,tachado,parpadeo
line-through || blink ] ]
letter-spacing Espacio entre caracteres [ normal | <longitud> ]
word-spacing Espacio entre palabras [ normal | <longitud> ]
Transform aciones deltexto a [ capitalize | uppercase | lowercase | none ]
text-transform
m ayúsculas/m inúsculas
C om portam iento de los espacios dentro de [ normal | pre | nowrap | pre-wrap | pre-line
white-space
los elem entos ]

TABLAS
Propiedad Descripción Valores
caption-side Posición deltítulo de respecto la tabla [ top | bottom ]
C ontroldelalgoritm o usado para elform ato de
table-layout [ auto | fixed ]
las celdas,filas y colum nas
border-collapse Selección delm odelo de los bordes [ collapse | separate ]
Espaciado entre los bordes de celdas
border-spacing <longitud> <longitud>?
adyacentes
Visibilidad de los bordes de celdas sin [ show | hide ]
empty-cells
contenido

INTERFAZ DE USUARIO
Propiedad Descripción Valores
[ [http://.../cursor.ico,]* [ auto |
crosshair | default | pointer | move |
cursor Especifica elcursor e-resize | ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-resize |
text | wait | help | progress ] ]
outline-width Ancho de la línea exterior <border-width>
outline-style Estilo de la línea exterior <border-style>
outline-color C olorde la línea exterior [ <color> | invert ]
[ <outline-color> || <outline-style> ||
outline Propiedades individuales de la línea exterior.
<outline-width> ]
(Aural)Indica silas cabeceras de la tabla se
speak-header [ once | always ]
leen antes de cada celda

7 de 8
G u ía d e R ef e r e n c i a R á p i d a C S S 2 .1

Especificación de C SS2.1:[http://www.w3.org/TR/C SS21]


O ficina Española W 3C :[http://www.w3c.es]

Copyright© 1994-2009W3C [W ORLD W IDE W EB CONSORTIUM]® (MIT [ M ASSA CHUSETTS INSTITUTE OF T ECHNOLOGY ] , ERCIM [ E UROPEA N R ESEA RCH C ONSORTIUM FOR INFORMA TICS A ND
M A THEMATICS] , Keio), Todos los derec hos res erv ados . Son aplicables las reglas de responsabilidad, marc as registradas , utiliz ac ión de documentos y licenc ias de s of tw are. Las interacc iones c on es te
sitio es tán de ac uerdo c on nues tra dec larac ión de priv ac idad de usuarios y miembros.

8 d e 8