NOTACINPatrn Descripcin

a b a seguido de b( a b ) a y b agrupados[ a | b ] a o b[ a || b ] a o b o ambosa? a es opcionala* 0 o varios aa+ 1 o varios aa {n, m} a como mnimo n veces y como mximo m

TIPOS DE MEDIOSNombre Medio

all Todos los dispositivosbraille Dispositivos tctiles brailleembossed Impresoras braillehandheld Dispositivos de mano (pantallas pequeas, ancho de banda reducido, etc.)print Para documentos paginados y mostrados en vista de impresinprojection Dispositivos de proyeccin de presentacionesscreen Pantallas a color de equipos informticosspeech Para sintetizadores de voz. Similar a "aural"tty Dispositivos de visualizacin con capacidades limitadastv Televisores

Gua de Referencia CSS [CASCADING STYLE SHEETS] 2.1

SELECTORESPatrn Aplicado a: Ejemplo

* Cualquier elemento N/D [NO DISPONIBLE]e Elemento e f Cualquier que est incluido en ............e > f Cualquier que es hijo de .........e:first-child cuando es el primer hijo de su elemento padre ...e + f si est precedido inmediatamente por un ... ...e[miAtr] si posee el atributo "miAtr" e[miAtr="v"] si posee el atributo "miAtr" y este tiene el valor "v" e[miAtr~="v"] si su atributo "miAtr" es una lista de valores separados por espacios y uno es "v" e[lang|="es"] si su atributo "lang" es una lista de valores separados por guiones y comienza con "es" e.miClase cuya clase es "miClase" e#miId cuyo identificador es miId a:link Enlaces no visitados N/Da:visited Enlaces visitados N/De:active cuando es activado (tiempo entre que se pulsa un botn sobre l y se suelta) N/De:hover cuando se posiciona el cursor sobre l pero no se activa N/De:focus cuando tiene el foco posicionado en l N/De:lang(c) si est marcado con el idioma c N/De:first-line Primera lnea de N/De:first-letter Primera letra de N/D

e:before Aplica contenido antes de N/De:after Aplica contenido despus del elemento N/De , f Aplica el mismo contenido a los elementos y N/D

SINTAXIS

@import "hoja.css" tipo-medio;

/* Comentarios */

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

px Pxeles (relativo al dispositivo)em Tamao de la fuente actualex Alto del caracter 'x'

in Pulgadas (1pulgada = 2.54 cm [CENTMETROS] )cm Centmetrosmm Milmetrospt Puntos (1pt = 1/72pulgadas)pc Picas (1pica = 12 puntos)

UNIDADES% Porcentaje0 No requiere unidad

#RRGGBB Color RGB [RED GREEN BLUE] (6 Valores hexadecimales)#RGB Notacin simplificada (#RGB = #RRGGBB)rgb(R,G,B) Color RGB (3 valores de 0 a 255)rgb(R%,G%,B%) Color RGB (3 valores porcentuales)

MRGENESPropiedad Descripcin Valores

margin-topmargin-rightmargin-bottommargin-left

Tamao del margensuperior, derecho, inferiore izquierdo

[ | | auto ]

margin Ancho para variosmrgenes individuales [ | | auto ]{1,4}

MODELO DE CAJAS

RELLENOPropiedad Descripcin Valores

padding-toppadding-rightpadding-bottompadding-left

Ancho del relleno superior, derecho, inferior eizquierdo [ | ]

padding Tamaos para varios rellenos individuales [ | ] {1,4}BORDES

Propiedad Descripcin Valoresborder-top-widthborder-right-widthborder-bottom-widthborder-left-width

Anchura del borde superior, derecho, inferior oizquierdo [ thin | medium | thick | ]

border-width Anchos de varios bordes individuales [ thin | medium | thick | ] {1,4}border-top-colorborder-right-colorborder-bottom-colorborder-left-color

Color del borde superior, derecho, inferior oizquierdo [ | transparent ]

border-color Colores de varios bordes individuales [ | transparent ] {1,4}border-top-styleborder-right-styleborder-bottom-styleborder-left-style

Estilo del borde superior, derecho, inferior oizquierdo [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]

border-style Estilos de varios bordes individuales [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}border-topborder-rightborder-bottomborder-left

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

border Ancho, el estilo y el color para los 4 bordes [ || || ]

MODELO DE FORMATO VISUALPropiedad Descripcin Valores

display Comportamiento del contenedor[ inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption |none ]

position Esquema de posicionamiento [ static | relative | absolute | fixed ]toprightbottomleft

Desplazamiento de la caja (respecto al lmitesuperior, derecho, inferior o izquierdo delcontenedor)

[ | | auto ]

float Posicionamiento flotante [ left | right | none ]clear Control de cajas adyacentes a los float [ none | left | right | both ]z-index Solapamiento de niveles de capas [ auto | ]direction Sentido direccional de la escritura [ ltr | rtl ]unicode-bidi Sentido direccional de la escritura [ normal | embed | bidi-override ]

DETALLES DEL MODELO DE FORMATO VISUALPropiedad Descripcin Valores

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

EFECTOS VISUALESPropiedad Descripcin Valores

overflow Comportamiento del contenido si se desbordaen la caja [ visible | hidden | scroll | auto ]

clip Especifica la regin visible del elemento [ rect (, , , ) | auto ]visibility Visibilidad de las cajas [ visible | hidden | collapse ]

CONTENIDO GENERADO, NUMERACIN AUTOMTICA Y LISTASPropiedad Descripcin Valores

contentAgregador de contenido para :after y:before

[ normal | none | [ | | | attr(X) | open-quote | close-quote | no-open-quote |no-close-quote]+ ]

quotes Especifica las marcas para indicar las citas [ [ ]+ | none ]counter-reset Inicializa un contador [ [ ? ]+ | none ]counter-increment Incrementa un contador [ [ ? ]+ | none ]list-style-type Estilo aplicable a los marcadores visuales delas listas

[ disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek |lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none ]

list-style-image Imagen aplicable a los elementos de las listas [ url("http://...") | none ]list-style-position Posicin dentro de la lista de los elementos

marcadores de las listas [ inside | outside ]

list-style Permite establecer el estilo de la lista, laimagen y/o la posicin [ || || ]

COLORES Y FONDOPropiedad Descripcin Valores

color Color del primer plano background-color Color de fondo [ | transparent ]background-image Imagen de fondo [ url(...) | none ]background-repeat Repeticin de la imagen de fondo [ repeat | repeat-x | repeat-y | no-repeat ]background-attachment Desplazamiento de la imagen de fondo [ scroll | fixed ]

background-position Posicin de la imagen de fondo [ [ | | left | center | right ] [ | | top | center | bottom]? ]| [ [ left | center | right ] || [ top | center | bottom ] ]background Propiedades individuales relacionadas con elfondo

[ || || || || ]

MEDIOS PAGINADOS

Propiedad Descripcin Valorespage-break-before Gestionar saltos de pgina antes del elemento [ auto | always | avoid | left | right ]page-break-after Gestionar saltos de pgina posterior al elemento [ auto | always | avoid | left | right ]page-break-inside Evita los saltos de lnea en el interior del elemento [ avoid | auto ]orphans Mnimo nmero de lneas de un prrafo que deben serdejadas como mnimo al final de una pgina

widows Mnimo nmero de lneas de un prrafo que deben serdejadas como mnimo al principio de una pgina

FUENTESPropiedad Descripcin Valores

font-family Familias de fuentes [ [ | ] [, | ]* ]font-style Estilo de la fuente [ normal | italic | oblique ]font-variant Convierte las minsculas a maysculas pero

mantienen un tamao inferior a las maysculas [ normal | small-caps ]font-weight Intensidad de la fuente [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]font-size Tamao de la fuente [ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | |

]

font Atajo para establecer el resto de propiedadessobre las fuentes a la vez

[ [ [ || || ]? [ / ]? ] |caption | icon | menu | message-box | small-caption | status-bar ]

TEXTOPropiedad Descripcin Valores

text-indent Desplazamiento de la primera lnea del texto [ | ]text-align Alineamiento del texto [ left | right | center | justify ]text-decoration Efectos de subrayado, tachado, parpadeo [ none | [ underline || overline || line-through || blink ] ]letter-spacing Espacio entre caracteres [ normal | ]word-spacing Espacio entre palabras [ normal | ]text-transform Transformaciones del texto a

maysculas/minsculas [ capitalize | uppercase | lowercase | none ]

white-space Comportamiento de los espacios dentro delos elementos [ normal | pre | nowrap | pre-wrap | pre-line ]

TABLASPropiedad Descripcin Valores

caption-side Posicin del ttulo de respecto la tabla [ top | bottom ]table-layout Control del algoritmo usado para el formato delas celdas, filas y columnas [ auto | fixed ]border-collapse Seleccin del modelo de los bordes [ collapse | separate ]border-spacing Espaciado entre los bordes de celdas

adyacentes ?

empty-cells Visibilidad de los bordes de celdas sincontenido [ show | hide ]

INTERFAZ DE USUARIOPropiedad Descripcin Valores

cursor Especifica el cursor [ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | 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 lnea exterior outline-style Estilo de la lnea exterior outline-color Color de la lnea exterior [ | invert ]outline Propiedades individuales de la lnea exterior. [ || || ]speak-header (Aural) Indica si las cabeceras de la tabla seleen antes de cada celda [ once | always ]

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

Copyright 1994-2014 W3C [WORLD WIDE WEB CONSORTIUM] (MIT [MASSACHUSETTS INSTITUTE OF TECHNOLOGY] , ERCIM [EUROPEAN RESEARCH CONSORTIUM FOR INFORMATICS AND MATHEMATICS] , Keio, Beihang), Todos los derechos reservados. Son aplicables las reglas de responsabilidad, marcas registradas,utilizacin de documentos y licencias de softw are. Las interacciones con este sitio estn de acuerdo con nuestra declaracin de privacidad de usuarios y miembros.