Gua de Referencia CSS C

SELECTORES
Patrn * e e f e > f e + f e[miAtr] e[miAtr="v"] e[miAtr~="v"] e[lang|="es"] e.miClase e#miId a:link a:visited e:active e:hover e:focus e:lang(c) e:fist-line e:before e:after Cualquier elemento Elemento <e> Cualquier <f> que est incluido en <e> Cualquier <f> que es hijo de <e> <f> si est precedido inmediatamente por un <e> <e> si posee el atributo "miAtr" <e> si posee el atributo "miAtr" y este tiene el valor "v" Aplicado a: <e>

[ ASCADING STYLE

SHEETS]

2.1

Ejemplo N/D [N O DISPONIBLE] <e>...<d>...<f/>...</d>...</ e> <e>...<f>...</f>...</e> <f><e></e>...</f> ...</e> <f>...<f> <e miAtr="xxx".../> <e miAtr="v".../>

e:first-child <e> cuando es el primer hijo de su elemento padre

<e> si su atributo "miAtr" es una lista de valores separados por espacios y uno <e miAtr="x y z v".../> es "v" <e> si su atributo "lang" es una lista de valores separados por guiones y comienza con "es" <e> cuya clase es "miClase" <e> cuyo identificador es miId Enlaces no visitados Enlaces visitados <e> cuando se posiciona el cursor sobre l pero no se activa <e> cuando tiene el foco posicionado en l <e> si est marcado con el idioma c Primera lnea de <e> Aplica contenido antes de <e> Aplica contenido despus del elemento <e> <e lang="es-ES" .../> <e class="miClase".../> <e id="miId".../> N/D N/D N/D N/D N/D N/D N/D N/D N/D

<e> cuando es activado (tiempo entre que se pulsa un botn sobre l y se suelta) N/D

e:fist-letter Primera letra de <e>

NOTACIN
Patrn a b ( a b ) [ a | b ] [ a || b ] a? a* a+ a {n, m} Descripcin a seguido de b a y b agrupados aob a o b o ambos a es opcional 0 o varios a 1 o varios a a como mnimo n veces y como mximo m

TIPOS DE MEDIOS
Nombre all braille embossed handheld print projection screen speech tty tv Todos los dispositivos Dispositivos tctiles braille Impresoras braille Dispositivos de mano (pantallas pequeas, ancho de banda reducido, etc.) Para documentos paginados y mostrados en vista de impresin Dispositivos de proyeccin de presentaciones Pantallas a color de equipos informticos Para sintetizadores de voz. Similar a "aural" Dispositivos de visualizacin con capacidades limitadas Televisores Medio

SINTAXIS
@import "hoja.css" tipomedio; /* Comentarios */

UNIDADES
px Pxeles (relativo al dispositivo) em Tamao de la fuente actual ex Alto del caracter 'x' #RRGGBB Pulgadas (1pulgada = 2.54 cm in [C ENTMETROS] ) Color RGB [R ED GREEN BLUE] (6 Valores hexadecimales) % 0 Porcentaje No requiere unidad

@media tipo-medio { selector { propiedad: valor-es; } }

cm Centmetros mm Milmetros pt Puntos (1pt = 1/72pulgadas) pc Picas (1pica = 12 puntos)

#RGB rgb(R,G,B) rgb(R%,G% ,B%)

Notacin simplificada (#RGB = # RRGGBB) Color RGB (3 valores de 0 a 255) Color RGB (3 valores porcentuales)

MODELO DE CAJAS

MRGENES
Propiedad margin-top margin-right margin-bottom margin-left margin Descripcin Tamao del margen superior, derecho, inferior e izquierdo Valores [ <longitud> | <porcentaje> | auto ] [ <longitud> | <porcentaje> | auto ] {1,4}

Ancho para varios mrgenes individuales

RELLENO
Propiedad padding-top padding-right padding-bottom padding-left padding Descripcin Ancho del relleno superior, derecho, inferior e izquierdo Tamaos para varios rellenos individuales Valores

[ <longitud> | <porcentaje> ]

[ <longitud> | <porcentaje> ] {1,4}

BORDES
Propiedad Descripcin Valores border-top-width border-right-width Anchura del borde superior, derecho, inferior o border-bottom-width izquierdo border-left-width border-width Anchos de varios bordes individuales

[ thin | medium | thick | <longitud> ]

[ thin | medium | thick | <longitud> ] {1,4}

border-top-color border-right-color Color del borde superior, derecho, inferior o izquierdo [ <color> | transparent ] border-bottom-color border-left-color border-color Colores de varios bordes individuales [ <color> | transparent ] {1,4} border-top-style border-right-style [ none | hidden | dotted | dashed | solid | Estilo del borde superior, derecho, inferior o izquierdo border-bottom-style double | groove | ridge | inset | outset ] border-left-style border-style border-top border-right border-bottom border-left border Estilos de varios bordes individuales [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4} [ <border-top-width> || <border-top-style> || <border-top-color> ] [ <border-top-width> || <border-top-style> || <border-top-color> ]

Ancho, estilo y el color para el borde superior, derecho, inferior o izquierdo

Ancho, el estilo y el color para los 4 bordes

MODELO DE FORMATO VISUAL

Propiedad Descripcin Valores [ inline | block | list-item | run-in | inline-block | table | inline-table | tablerow-group | table-header-group | tablefooter-group | table-row | table-columngroup | table-column | table-cell | tablecaption | none ] [ static | relative | absolute | fixed ]

display

Comportamiento del contenedor

position top right bottom left float clear z-index direction unicode-bidi

Esquema de posicionamiento Desplazamiento de la caja (respecto al lmite superior, derecho, inferior o izquierdo del contenedor) Posicionamiento flotante Control de cajas adyacentes a los float Solapamiento de niveles de capas Sentido direccional de la escritura Sentido direccional de la escritura

[ <longitud> | <porcentaje> | auto ]

[ left | right | none ] [ none | left | right | both ] [ auto | <entero_con_signo> ] [ ltr | rtl ] [ normal | embed | bidi-override ]

DETALLES DEL MODELO DE FORMATO VISUAL

Propiedad width min-width max-width height min-height max-height line-height vertical-align Ancho Ancho mnimo Ancho mximo Alto Alto mnimo Alto mximo Altura entre las bases del texto Alineacin vertical del texto Descripcin Valores [ <longitud> | <porcentaje> | auto ] [ <longitud> | <porcentaje> ] [ <longitud> | <porcentaje> | none ] [ <longitud> | <porcentaje> | auto ] [ <longitud> | <porcentaje> ] [ <longitud> | <porcentaje> | none ] [ normal | <nmero> | <longitud> | <porcentaje> ] [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <longitud> ]

EFECTOS VISUALES
Propiedad overflow clip visibility Descripcin Valores Comportamiento del contenido si se desborda en [ visible | hidden | scroll | auto ] la caja Especifica la regin visible del elemento Visibilidad de las cajas [ rect (<longitud> <longitud> <longitud> <longitud>) | auto ] [ visible | hidden | collapse ]

CONTENIDO GENERADO, NUMERACIN AUTOMTICA Y LISTAS

Propiedad content quotes counter-reset counter-increment Descripcin Agregador de contenido para :after y :before Especifica las marcas para indicar las citas Inicializa un contador Incrementa un contador Valores [ normal | none | [ <texto> | <uri> | <contador> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ ] [ [ <texto> <texto> ]+ | none ] [ [ <identificador> <entero>? ]+ | none ] [ [ <identificador> <entero>? ]+ | none ]

list-style-type

[ disc | circle | square | decimal | decimalleading-zero | lower-roman | upper-roman | Estilo aplicable a los marcadores visuales de las lower-greek | lower-latin | upper-latin | listas armenian | georgian | lower-alpha | upper-alpha | none ] Imagen aplicable a los elementos de las listas [ url("http://...") | none ] [ inside | outside ]

list-style-image

Posicin dentro de la lista de los elementos list-style-position marcadores de las listas list-style

Permite establecer el estilo de la lista, la imagen [ <list-style-type> || <list-style-position> || <list-style-image> ] y/o la posicin

COLORES Y FONDO
Propiedad color background-color background-image background-repeat backgroundattachment Color de fondo Imagen de fondo Repeticin de la imagen de fondo Desplazamiento de la imagen de fondo Descripcin Color del primer plano <color> [ <color> | transparent ] [ url(...) | none ] [ 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 ] ] Valores

background-position

Posicin de la imagen de fondo

background

[ <background-color> || <background-image> || Propiedades individuales relacionadas con el <background-repeat> || <background-attachment> || fondo <background-position> ]

MEDIOS PAGINADOS
Propiedad page-break-before page-break-after page-break-inside orphans widows Descripcin Gestionar saltos de pgina antes del elemento Gestionar saltos de pgina posterior al elemento Evita los saltos de lnea en el interior del elemento Mnimo nmero de lneas de un prrafo que deben ser dejadas como mnimo al final de una pgina Mnimo nmero de lneas de un prrafo que deben ser dejadas como mnimo al principio de una pgina Valores [ auto | always | avoid | left | right ] [ auto | always | avoid | left | right ] [ avoid | auto ] <entero> <entero>

FUENTES
Propiedad font-family font-style font-variant Familias de fuentes Estilo de la fuente Convierte las minsculas a maysculas pero mantienen un tamao inferior a las maysculas Intensidad de la fuente Descripcin Valores [ [ <nombre-familia> | <familia-genrica> ] [, <nombre-familia> | <familia-genrica> ] * ] [ normal | italic | oblique ] [ normal | small-caps ] [ 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-weight

font-size

Tamao de la fuente

font

[ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <lineAtajo para establecer el resto de propiedades sobre height> ]? <font-family> ] | caption | icon las fuentes a la vez | menu | message-box | small-caption | status-bar ]

TEXTO
Propiedad text-indent text-align text-decoration letter-spacing word-spacing text-transform white-space Descripcin Desplazamiento de la primera lnea del texto Alineamiento del texto Efectos de subrrallado, tachado, parpadeo Espacio entre caracteres Espacio entre palabras Transformaciones del texto a maysculas/ minsculas Comportamiento de los espacios dentro de los elementos Valores [ <longitud> | <porcentaje> ] [ left | right | center | justify ] [ none | [ underline || overline || linethrough || blink ] ] [ normal | <longitud> ] [ normal | <longitud> ] [ capitalize | uppercase | lowercase | none ] [ normal | pre | nowrap | pre-wrap | preline ]

TABLAS
Propiedad caption-side table-layout border-collapse border-spacing empty-cells Descripcin Posicin del ttulo de respecto la tabla Valores [ top | bottom ]

Control del algoritmo usado para el formato de las celdas, filas y [ auto | fixed ] columnas Seleccin del modelo de los bordes Espaciado entre los bordes de celdas adyacentes Visibilidad de los bordes de celdas sin contenido [ collapse | separate ] <longitud> <longitud>? [ show | hide ]

INTERFAZ DE USUARIO
Propiedad Descripcin Valores [ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize | text | wait | help | progress ] ] <border-width> <border-style> [ <color> | invert ] [ <outline-color> || <outline-style> || <outline-width> ]

cursor

Especifica el cursor

outline-width outline-style outline-color outline speak-header

Ancho de la lnea exterior Estilo de la lnea exterior Color de la lnea exterior Propiedades individuales de la lnea exterior.

(Aural) Indica si las cabeceras de la tabla se leen [ once | always ] antes de cada celda

Especificacin de CSS2.1: [http://www.w3.org/TR/CSS21] Oficina Espaola W3C: [http://www.w3c.es]

Copyright 1994-2007 W 3C [W ORLD W IDE W EB C ONSORTIUM] (MIT [MASSACHUSETTS I NSTITUTE OF TECHNOLOGY ] , ERCIM [EUROPEAN R ESEARCH C ONSORTIUM FOR I NFORMATICS MATHEMATICS ] , Keio), Todos los derechos reservados. Son aplicables las reglas de responsabilidad , marcas registradas, utilizacin de documentos y licencias de software. Las interacciones con este sitio estn de acuerdo con nuestra declaracin de privacidad de usuarios y miembros.
AND