Ir directamente al contenido de esta página

codexexempla.org

Relación de propiedades de CSS 2.1 para medios visuales: Introducción

Tabla de contenidos

  1. Introducción
  2. Propiedades de conjunto
  3. Medidas
  4. Colores
  5. Soporte en los navegadores
  6. Listas

Introducción

Como hice con los elementos de XHTML 1.1, recojo en las siguientes listas las propiedades de CSS 2.1. Sólo quiero dar antes unas notas.

Propiedades de conjunto

Algunas de las propiedades en las listas aparecen marcadas como propiedad de conjunto, lo que significa que se pueden emplear como anotación abreviada de varias declaraciones. Por ejemplo una regla como ésta


    #resumen{
        background-color:#E8E8E8;
        background-image:url(marca_agua_resumen.png);
        background-position:right bottom;
        background-repeat:no-repeat;
    }        
            

se puede resumir así:


    #resumen{
        background:#E8E8E8 url(marca_agua_resumen.png) right bottom no-repeat;
    }        
            

En general, el orden de los valores de las propiedades es irrelevante, por lo que la regla anterior es equivalente a ésta:


    #resumen{
        background: url(marca_agua_resumen.png) #E8E8E8 no-repeat right bottom;
    }        
            

No obstante, cuando haya un orden estricto, se indicará en la descripción.

Por último, hay que tener en cuenta que al emplear una propiedad de conjunto, los valores de propiedades no especificados se restablecen a su valor por defecto. ¿Qué significa esto? Pongamos un ejemplo. Supongamos que tenemos una hoja de estilo como ésta:


    div{
        color:#000;
        background-color:#E8E8E8;
    }
    
    div#resumen{
        background:url(marca_de_agua_resumen.png) bottom right no-repeat;
    }        
            

Intuitivamente, uno pensaría que el div con id="resumen" va a heredar el gris pálido de fondo —puesto que no deja de ser el mismo elemento—, pero que además va a contar con una imagen en su esquina inferior derecha. Sin embargo no es así: con la propiedad de conjunto, al no especificar color de fondo, lo hemos restablecido a su valor por defecto, así que heredará el del elemento padre. Ver el ejemplo de rigor.

Saber esto último ahorra muchos dolores de cabeza.

Medidas

Cuando en los valores de las propiedades hablo de medidas, indico si estas son absolutas, relativas o porcentuales, pero en todo caso es necesario indicar las unidades con su abreviatura correspondiente, y sin espacio en blanco entre ésta y el valor; 1em sería correcto, 1 em no.

Las unidades absolutas son:

Las unidades relativas, a diferencia de las anteriores, dependen de variables como el tamaño de fuente por defecto del agente de usuario o la resolución de pantalla:

Por último, los porcentajes son eso, porcentajes.

Los detalles excepcionales se explicarán en la descripción de la propiedad correspondiente.

Colores

Acerca de los colores, hay que indicar que existen cuatro formas de especificar sus valores.

Se supone que además de todo esto, se podrían elegir colores de sistema (inglés), que serían los colores empleados por el usuario en la interfaz de su sistema operativo. No obstante, no los incluyo aquí porque su soporte es escaso, y además en la propia especificación se indica que en el módulo de color de CSS 3 se considerarán depreciados.

Soporte de las propiedades en los navegadores

El soporte de las propiedades en los navegadores es algo inconsistente, aunque la tendencia actual por parte de los desarrolladores de los mismos es ajustarse cada vez más a las especificaciones del W3C. Podría incluir notas sobre este soporte, pero no lo voy a hacer mejor de lo que lo hace Peter-Paul Koch en su lista de compatibilidad de CSS (inglés), así que compruébelo allí; sólo hay que tener en cuenta únicamente que incluye algunas propiedades que son de CSS 3, y algunas que son código propietario.

O mejor, experimente.

Listas

Y ahora sí, sólo queda dar las listas:

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA