1

Guía de Referencia CSS 2.1
CONTENIDOS
     

          

Selectores Notación Tipos de medios Sintaxis Unidades Modelo de cajas o Márgenes o Relleno o Bordes Modelo de formato visual Detalles del modelo de formato visual Efectos visuales Contenido generado, numeración automática y listas Colores y fondo Medios paginados Fuentes Texto Tablas Interfaz de usuario Referencias

2 SELECTORES Patrón * Listado de selectores Aplicado a: N/D <e> Ejemplo Cualquier elemento e Elemento <e> e f Cualquier <f> que esté incluido en <e> e > f Cualquier <f> que es hijo de <e> e:first-child <e> cuando es el primer hijo de su elemento padre e + f <f> si está precedido inmediatamente por un <e> e[miAtr] <e> si posee el atributo "miAtr" e[miAtr="v"] <e> si posee el atributo "miAtr" y este tiene el valor "v" e[miAtr~="v"] <e> si su atributo "miAtr" es una lista de valores separados por espacios y uno es "v" e[lang|="es"] <e> si su atributo "lang" es una lista de valores separados por guiones y comienza con "es" e.</d>.<f>../> <e miAtr="v"...../> <e lang="es-ES" .miClase <e> cuya clase es "miClase" e#miId <e> cuyo identificador es miId a:link Enlaces no visitados a:visited Enlaces visitados e:active <e> cuando es activado (tiempo entre que se pulsa un botón sobre él y se suelta) e:hover <e> cuando se posiciona el cursor sobre él pero no se activa e:focus <e> cuando tiene el foco posicionado en él e:lang(c) <e> si está marcado con el idioma c e:first-line Primera línea de <e> e:first-letter Primera letra de <e> e:before Aplica contenido antes de <e> e:after Aplica contenido después del elemento <e> e ....</f> .../> <e class="miClase"../> <e miAtr="x y z v"......<f/>.....<d>.</e> <f><e></e>...</e> <f>.<f> <e miAtr="xxx"./> N/D N/D N/D N/D N/D N/D N/D N/D N/D N/D N/D Aplica el mismo contenido a los elementos <e> y <f> ...</e> <e>..../> <e id="miId"...</f>... f <e>..

etc. Similar a "aural" Dispositivos de visualización con capacidades limitadas Televisores . m} a seguido de b a y b agrupados aob a o b o ambos a es opcional Descripción 0 o varios a 1 o varios a a como mínimo n veces y como máximo m TIPOS DE MEDIOS Nombre all braille embossed handheld print projection screen speech tty tv Tipos de medios o dispositivos soportados Medio Todos los dispositivos Dispositivos táctiles braille Impresoras braille Dispositivos de mano (pantallas pequeñas.3 NOTACIÓN Notación Patrón a b ( a b ) [ a | b ] [ a || b ] a? a* a+ a {n.) Para documentos paginados y mostrados en vista de impresión Dispositivos de proyección de presentaciones Pantallas a color de equipos informáticos Para sintetizadores de voz. ancho de banda reducido.

/* Comentarios */ @media tipo-medio { selector { propiedad: valor-es.G.B) rgb(R%.4 SINTAXIS @import "hoja.B%) Píxeles (relativo al dispositivo) Tamaño de la fuente actual Alto del caracter 'x' Longitudes absolutas Pulgadas (1pulgada = 2. } } UNIDADES Longitudes relativas px em ex in cm mm pt pc % 0 #RRGGBB #RGB rgb(R.css" tipo-medio.G%.54 cm) Centímetros Milímetros Puntos (1pt = 1/72pulgadas) Picas (1pica = 12 puntos) Porcentaje Porcentaje No requiere unidad Representación de los colores Color RGB (6 Valores hexadecimales) Notación simplificada (#RGB = #RRGGBB) Color RGB (3 valores de 0 a 255) Color RGB (3 valores porcentuales) .

4} RELLENO Propiedades de relleno Propiedad padding-top padding-right padding-bottom padding-left padding Descripción Ancho del relleno superior.4} . derecho. inferior e izquierdo Tamaños para varios rellenos individuales Valores [ <longitud> | <porcentaje> ] [ <longitud> | <porcentaje> ] {1. derecho. inferior e izquierdo Ancho para varios márgenes individuales Valores [ <longitud> | <porcentaje> | auto ] [ <longitud> | <porcentaje> | auto ]{1.5 MODELO DE CAJAS MÁRGENES Propiedades de márgenes Propiedad margin-top margin-right margin-bottom margin-left margin Descripción Tamaño del margen superior.

inferior o izquierdo borderbottom-style border-leftstyle border-style [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] Estilos de varios bordes individuales [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1.6 BORDES Propiedades de los bordes Propiedad Descripción Valores border-topwidth border-rightwidth Anchura del borde superior.4} [ <color> | transparent ] Colores de varios bordes individuales [ <color> | transparent ] {1. inferior o izquierdo borderbottom-width border-leftwidth border-width Anchos de varios bordes individuales border-topcolor border-rightcolor Color del borde superior. derecho. derecho.4} border-top [ <border-top-width> || <border-top-style> || border-right border-bottom Ancho. estilo y el color para el borde superior. derecho. derecho. inferior o izquierdo borderbottom-color border-leftcolor border-color [ thin | medium | thick | <longitud> ] [ thin | medium | thick | <longitud> ] {1. el estilo y el color para los 4 bordes [ <border-top-width> || <border-top-style> || <border-top-color> ] .4} border-topstyle border-rightstyle Estilo del borde superior. inferior o izquierdo <border-top-color> ] border-left border Ancho.

7 MODELO DE FORMATO VISUAL Propiedad Propiedades de formato visual Descripción Valores [ inline | block | list-item | runin | inline-block | table | inlinetable | table-row-group | tableheader-group | table-footer-group | table-row | table-column-group | table-column | table-cell | tablecaption | none ] [ static | relative | absolute | fixed ] display Comportamiento del contenedor position top right bottom left float Esquema de posicionamiento [ <longitud> | <porcentaje> | auto Desplazamiento de la caja (respecto al límite superior. derecho. inferior o izquierdo del contenedor) ] [ [ [ [ left | right | none ] none | left | right | both ] auto | <entero_con_signo> ] ltr | rtl ] Posicionamiento flotante clear Control de cajas adyacentes a los float z-index Solapamiento de niveles de capas direction Sentido direccional de la escritura unicodebidi Sentido direccional de la escritura [ normal | embed | bidi-override ] DETALLES DEL MODELO DE FORMATO VISUAL Propiedades de los detalles formato visual Propiedad width Descripción [ [ [ [ [ [ [ Ancho min-width Ancho mínimo max-width Ancho máximo height Alto min-height Alto mínimo max-height Alto máximo line-height Altura entre las bases del texto Valores <longitud> | <porcentaje> | auto <longitud> | <porcentaje> ] <longitud> | <porcentaje> | none <longitud> | <porcentaje> | auto <longitud> | <porcentaje> ] <longitud> | <porcentaje> | none normal | <número> | <longitud> | ] ] ] ] <porcentaje> ] .

la imagen y/o la posición [ <list-style-type> || <list-style-position> || <liststyle-image> ] . NUMERACIÓN AUTOMÁTICA Y LISTAS Propiedades para contenido generado.. <longitud>..8 Propiedades de los detalles formato visual Propiedad verticalalign Descripción Alineación vertical del texto Valores [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <longitud> ] EFECTOS VISUALES Propiedades para efectos visuales Descripción Valores overflow [ visible | hidden | scroll | auto ] Comportamiento del contenido si se desborda en la caja [ rect (<longitud>. numeración automática y listas Propiedad Descripción Valores [ normal | none | [ <texto> | <uri> | <contador> | content attr(X) | open-quote | close-quote | no-open-quote | noAgregador de contenido para :after y :before close-quote]+ ] quotes [ [ <texto> <texto> ]+ | none ] Especifica las marcas para indicar las citas counterreset counterincrement Inicializa un contador Incrementa un contador [ [ <identificador> <entero>? ]+ | none ] [ [ <identificador> <entero>? ]+ | none ] [ disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upperalpha | none ] list-styleEstilo aplicable a los marcadores visuales de las listas type list-style[ url("http://.") | none ] Imagen aplicable a los elementos de las listas image list-stylePosición dentro de la lista de los elementos marcadores de las listas [ inside | outside ] position list-style Permite establecer el estilo de la lista. <longitud>) | auto clip Especifica la región visible del elemento ] visibility Visibilidad de las cajas [ visible | hidden | collapse ] Propiedad CONTENIDO GENERADO. <longitud>.

.) | none ] Valores [ repeat | repeat-x | repeat-y | no-repeat ] [ scroll | fixed ] [ [ <porcentaje> | <longitud> | left | center | right ] [ <porcentaje> | <longitud> | top | center | bottom]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] Propiedades individuales relacionadas con el fondo MEDIOS PAGINADOS Propiedad page-breakbefore page-breakafter page-breakinside orphans widows Propiedades para medios paginados Descripción Gestionar saltos de página antes del elemento Gestionar saltos de página posterior al elemento Evita los saltos de línea en el interior del elemento [ auto left | [ auto left | Valores | always | avoid | right ] | always | avoid | right ] [ avoid | auto ] Mínimo número de líneas de un párrafo que deben ser dejadas como mínimo al final de una página <entero> Mínimo número de líneas de un párrafo que deben ser dejadas como mínimo al principio de una página <entero> .9 COLORES Y FONDO Propiedades para gestión de colores y fondo Propiedad color backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition background Descripción Color del primer plano Color de fondo Imagen de fondo Repetición de la imagen de fondo Desplazamiento de la imagen de fondo Posición de la imagen de fondo <color> [ <color> | transparent ] [ url(..

tachado.10 FUENTES Propiedad fontfamily fontstyle fontvariant fontweight Propiedades para gestión de fuentes tipográficas Descripción Familias de fuentes Estilo de la fuente Valores [ [ <nombre-familia> | <familiagenérica> ] [. <nombre-familia> | <familia-genérica> ]* ] [ normal | italic | oblique ] Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas [ normal | small-caps ] Intensidad de la fuente [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] [ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | <longitud> | <porcentaje> ] [ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar ] font-size Tamaño de la fuente font Atajo para establecer el resto de propiedades sobre las fuentes a la vez TEXTO Propiedades para el texto Propiedad text-indent text-align textdecoration Descripción Desplazamiento de la primera línea del texto Alineamiento del texto Efectos de subrayado. parpadeo letter-spacing Espacio entre caracteres word-spacing Espacio entre palabras text-transform Transformaciones del texto a mayúsculas/minúsculas white-space Comportamiento de los espacios dentro de los elementos Valores [ <longitud> | <porcentaje> ] [ left | right | center | justify ] [ none | [ underline || overline || line-through || blink ] ] [ normal | <longitud> ] [ normal | <longitud> ] [ capitalize | uppercase | lowercase | none ] [ normal | pre | nowrap | pre-wrap | pre-line ] .

.11 TABLAS Propiedad caption-side table-layout border-collapse border-spacing empty-cells Propiedades para el texto Descripción Valores [ top | bottom ] Posición del título de respecto la tabla Control del algoritmo usado para el formato de las celdas.1 Oficina Española W3C . filas y columnas [ auto | fixed ] [ collapse | separate ] Selección del modelo de los bordes <longitud> <longitud>? Espaciado entre los bordes de celdas adyacentes [ show | hide ] Visibilidad de los bordes de celdas sin contenido INTERFAZ DE USUARIO Propiedades para el interfaz con el usuario Propiedad cursor outlinewidth outlinestyle outlinecolor outline speakheader Descripción Especifica el cursor Valores [ [http://./cursor.ico.]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | nresize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] <border-width> <border-style> [ <color> | invert ] [ <outline-color> || <outline-style> || <outline-width> ] Ancho de la línea exterior Estilo de la línea exterior Color de la línea exterior Propiedades individuales de la línea exterior.. (Aural) Indica si las cabeceras de la tabla se leen antes de cada celda [ once | always ]   Especificación de CSS2.

Sign up to vote on this title
UsefulNot useful