Guía de Referencia
CSS 2.1
Contenidos
- Selectores
- Notación
- Tipos de medios
- Sintaxis
- Unidades
- Modelo de cajas
- 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
Selectores
Patrón | Aplicado a: | Ejemplo |
---|---|---|
* |
Cualquier elemento | N/D |
e |
Elemento <e> |
<e> |
e f |
Cualquier <f> que esté incluido en<e> |
<e>...<d>...<f/>...</d>...</e> |
e > f |
Cualquier <f> que es hijo de<e> |
<e>...<f>...</f>...</e> |
e:first-child |
<e> cuando es el primer hijo de su elementopadre |
<f><e></e>...</f> |
e + f |
<f> si está precedido inmediatamente por un<e> |
...</e> <f>...<f> |
e[miAtr] |
<e> si posee el atributo"miAtr" |
<e miAtr="xxx".../> |
e[miAtr="v"] |
<e> si posee el atributo "miAtr" yeste tiene el valor "v" |
<e miAtr="v".../> |
e[miAtr~="v"] |
<e> si su atributo "miAtr" es unalista de valores separados por espacios y uno es "v" |
<e miAtr="x y z v".../> |
e[lang|="es"] |
<e> si su atributo "lang" es unalista de valores separados por guiones y comienza con "es" |
<e lang="es-ES" .../> |
e.miClase |
<e> cuya clase es "miClase" |
<e class="miClase".../> |
e#miId |
<e> cuyo identificador es miId |
<e id="miId".../> |
a:link |
Enlaces no visitados | N/D |
a:visited |
Enlaces visitados | N/D |
e:active |
<e> cuando es activado (tiempo entre que sepulsa un botón sobre él y se suelta) |
N/D |
e:hover |
<e> cuando se posiciona el cursor sobre él perono se activa |
N/D |
e:focus |
<e> cuando tiene el foco posicionado en él |
N/D |
e:lang(c) |
<e> si está marcado con el idiomac |
N/D |
e:first-line |
Primera línea de <e> |
N/D |
e:first-letter |
Primera letra de <e> |
N/D |
e:before |
Aplica contenido antes de <e> |
N/D |
e:after |
Aplica contenido después del elemento <e> |
N/D |
e , f |
Aplica el mismo contenido a los elementos <e> y <f> |
N/D |
Notación
Patrón | Descripción |
---|---|
a b | a seguido de b |
( a b ) | a y b agrupados |
[ a | b ] | a o b |
[ a || b ] | a o b o ambos |
a? | a es opcional |
a* | 0 o varios a |
a+ | 1 o varios a |
a {n, m} | a como mínimo n veces y como máximo m |
Tipos de Medios
Nombre | Medio |
---|---|
all | Todos los dispositivos |
braille | Dispositivos táctiles braille |
embossed | Impresoras braille |
handheld | Dispositivos de mano (pantallas pequeñas, ancho de banda reducido, etc.) |
print | Para documentos paginados y mostrados en vista de impresión |
projection | Dispositivos de proyección de presentaciones |
screen | Pantallas a color de equipos informáticos |
speech | Para sintetizadores de voz. Similar a «aural» |
tty | Dispositivos de visualización con capacidades limitadas |
tv | Televisores |
Sintaxis
@import "hoja.css" tipo-medio;
/* Comentarios */
@media tipo-medio {
selector {
propiedad: valor-es;
}
}
Unidades
Unidad | Descripción |
---|---|
px | Píxeles (relativo al dispositivo) |
em | Tamaño de la fuente actual |
ex | Alto del caracter ‘x’ |
Unidad | Descripción |
---|---|
in | Pulgadas (1pulgada = 2.54 cm) |
cm | Centímetros |
mm | Milímetros |
pt | Puntos (1pt = 1/72pulgadas) |
pc | Picas (1pica = 12 puntos) |
Unidad | Descripción |
---|---|
% |
Porcentaje |
0 |
No requiere unidad |
Unidad | Descripción |
---|---|
#RRGGBB |
Color RGB (6 Valores hexadecimales) |
#RGB |
Notación simplificada (#RGB = #RRGGBB) |
rgb(R,G,B) |
Color RGB (3 valores de 0 a 255) |
rgb(R%,G%,B%) |
Color RGB (3 valores porcentuales) |
Modelo de Cajas
Márgenes
Propiedad | Descripción | Valores |
---|---|---|
margin-top margin-right margin-bottom
| Tamaño del margen superior, derecho, inferior e izquierdo | [ <longitud> | <porcentaje> | auto ] |
margin | Ancho para varios márgenes individuales | [ <longitud> | <porcentaje> | auto ]{1,4} |
Relleno
Propiedad | Descripción | Valores |
---|---|---|
padding-top padding-right padding-bottom
|
Ancho del relleno superior, derecho, inferior e izquierdo | [ <longitud> | <porcentaje> ] |
padding |
Tamaños para varios rellenos individuales | [ <longitud> | <porcentaje> ] {1,4} |
Bordes
Propiedad | Descripción | Valores |
---|---|---|
border-top-width border-right-width border-bottom-width
|
Anchura del borde superior, derecho, inferior o izquierdo | [ thin |medium | thick | <longitud> ] |
border-width |
Anchos de varios bordes individuales | [ thin | medium | thick |<longitud> ] {1,4} |
border-top-color border-right-color border-bottom-color
|
Color del borde superior, derecho, inferior o izquierdo |
[ <color> | transparent ] |
border-color |
Colores de varios bordes individuales | [ <color> |transparent ] {1,4} |
border-top-style border-right-style border-bottom-style
|
Estilo del borde superior, derecho, inferior o izquierdo | [ 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-top border-right border-bottom
|
Ancho, estilo y el color para el borde superior, derecho, inferior o izquierdo |
[ <border-top-width> || <border-top-style> || <border-top-color> ] |
border |
Ancho, el estilo y el color para los 4 bordes | [ <border-top-width> || <border-top-style> || <border-top-color> ] |
Modelo de formato visual
Propiedad | Descripción | 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 ] |
top right bottom
|
Desplazamiento de la caja (respecto al límite superior, derecho, inferior o izquierdo del contenedor) | [ <longitud> | <porcentaje> |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 |<entero_con_signo> ] |
direction |
Sentido direccional de la escritura | [ ltr |rtl ] |
unicode-bidi |
Sentido direccional de la escritura | [ normal |embed | bidi-override ] |
Detalles del modelo de formato visual
Propiedad | Descripción | Valores |
---|---|---|
width |
Ancho | [ <longitud> | <porcentaje> |auto ] |
min-width |
Ancho mínimo | [ <longitud> | <porcentaje> ] |
max-width |
Ancho máximo | [ <longitud> | <porcentaje> |none ] |
height |
Alto | [ <longitud> | <porcentaje> |auto ] |
min-height |
Alto mínimo | [ <longitud> | <porcentaje> ] |
max-height |
Alto máximo | [ <longitud> | <porcentaje> |none ] |
line-height |
Altura entre las bases del texto | [ normal |<número> | <longitud> | <porcentaje> ] |
vertical-align |
Alineación vertical del texto | [ baseline |sub | super | top |text-top | middle | bottom |text-bottom | <porcentaje> | <longitud> ] |
Efectos visuales
Propiedad | Descripción | Valores |
---|---|---|
overflow |
Comportamiento del contenido si se desborda en la caja | [ visible |hidden | scroll | auto ] |
clip |
Especifica la región visible del elemento | [ rect ( <longitud>, <longitud>, <longitud>, <longitud>) |auto ] |
visibility |
Visibilidad de las cajas | [ visible | hidden |collapse ] |
Contenido generado, numeración automática y
listas
Propiedad | Descripción | Valores |
---|---|---|
content |
Agregador de contenido para :after y:before |
[ normal |none | [ <texto> | <uri> | <contador>| attr(X) | open-quote |close-quote | no-open-quote |no-close-quote ]+ ] |
quotes |
Especifica las marcas para indicar las citas | [ [ <texto> <texto> ]+ |none ] |
counter-reset |
Inicializa un contador | [ [ <identificador> <entero>? ]+ |none ] |
counter-increment |
Incrementa un contador | [ [ <identificador> <entero>? ]+ |none ] |
list-style-type |
Estilo aplicable a los marcadores visuales de las 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 |
Posición dentro de la lista de los elementos marcadores de las listas |
[ inside |outside ] |
list-style |
Permite establecer el estilo de la lista, la imagen y/o la posición |
[ <list-style-type> || <list-style-position> || <list-style-image> ] |
Colores y Fondo
Propiedad | Descripción | Valores |
---|---|---|
color |
Color del primer plano
|
<color> |
background-color |
Color de fondo | [ <color> |transparent ] |
background-image |
Imagen de fondo | [ url( …) |none ] |
background-repeat |
Repetición de la imagen de fondo | [ repeat |repeat-x | repeat-y |no-repeat ] |
background-attachment |
Desplazamiento de la imagen de fondo | [ scroll |fixed ] |
background-position |
Posición de la imagen de fondo | [ [ <porcentaje> | <longitud> | left | center | right ] [<porcentaje> | <longitud> | top |center | bottom ]? ] | [ [ left | center | right ] || [ top |center | bottom ] ] |
background |
Propiedades individuales relacionadas con el fondo | [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] |
Medios paginados
Propiedad | Descripción | Valores |
---|---|---|
page-break-before | Gestionar saltos de página antes del elemento | [ auto |always | avoid | left |right ] |
page-break-after | Gestionar saltos de página posterior al elemento | [ auto |always | avoid | left |right ] |
page-break-inside | Evita los saltos de línea en el interior del elemento | [ avoid |auto ] |
orphans | 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> |
widows | 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> |
Fuentes
Propiedad | Descripción | Valores |
---|---|---|
font-family |
Familias de fuentes | [ [ <nombre-familia> | <familia-genérica> ] [, <nombre-familia> | <familia-genérica> ]* ] |
font-style |
Estilo de la fuente | [ normal |italic | oblique ] |
font-variant |
Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas |
[ normal |small-caps ] |
font-weight |
Intensidad de la fuente | [ normal |bold | bolder | lighter |100 | 200 | 300 |400 | 500 |600 | 700 | 800 |900 ] |
font-size |
Tamaño de la fuente | [ [ xx-small | x-small |small | medium |large | x-large | xx-large ] |[ larger | smaller ] | <longitud> | <porcentaje> ] |
font |
Atajo para establecer el resto de propiedades sobre las fuentes a la vez |
[ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption |icon | menu | message-box |small-caption | status-bar ] |
Texto
Propiedad | Descripción | Valores |
---|---|---|
text-indent |
Desplazamiento de la primera línea del texto | [ <longitud> | <porcentaje> ] |
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 | <longitud> ] |
word-spacing |
Espacio entre palabras | [ normal | <longitud> ] |
text-transform |
Transformaciones del texto a mayúsculas/minúsculas | [ capitalize | uppercase | lowercase | none ] |
white-space |
Comportamiento de los espacios dentro de los elementos | [ normal |pre | nowrap | pre-wrap |pre-line ] |
Tablas
Propiedad | Descripción | Valores |
---|---|---|
caption-side |
Posición del título de respecto la tabla | [ top |bottom ] |
table-layout |
Control del algoritmo usado para el formato de las celdas, filas y columnas |
[ auto |fixed ] |
border-collapse |
Selección del modelo de los bordes | [ collapse |separate ] |
border-spacing |
Espaciado entre los bordes de celdas adyacentes | <longitud> <longitud>? |
empty-cells |
Visibilidad de los bordes de celdas sin contenido | [ show |hide ] |
Interfaz de usuario
Propiedad | Descripción | 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 línea exterior | <border-width> |
outline-style |
Estilo de la línea exterior | <border-style> |
outline-color |
Color de la línea exterior | [ <color> |invert ] |
outline |
Propiedades individuales de la línea exterior. | [ <outline-color> || <outline-style> || <outline-width> ] |
speak-header |
(Aural) Indica si las cabeceras de la tabla se leen antes de cada celda |
[ once |always ] |
Ayuda a la impresión
Para la impresión ajustada de la guía en un formato DIN A4 se recomienda el uso de un navegador que soporte las hojas de estilo CSS 2.
En las opciones de impresión puede habilitarse el fondo para que aparezcan los colores. Además, para conseguir una correcta estructura del documento en 4 páginas,
deberían establecerse unos márgenes laterales (izquierdo y derecho) con el valor 0.
![Fundación CTIC](/img/ctic.png)
Webmaster · Última modificación:01/01/1970 01:00AM
Copyright © 1994-2014 W3C® (MIT, ERCIM,
Keio, Beihang), Todos los derechos reservados.
Son aplicables las reglas de responsabilidad,
marcas registradas,
utilización de documentos y licencias de software.
Las interacciones con este sitio están de acuerdo con nuestra declaración de privacidad de
usuarios
y miembros.