Micaela 5 de agosto de 2008 a las 16.00
   Imprimir artículo
elWebmaster.com

Uso avanzado de CSS con reglas “arroba”


Uso avanzado de CSS con reglas arrobaM√°s all√° de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en ingl√©s). Este tipo de reglas tienen usos muy diversos y algunas son espec√≠ficas de ciertos navegadores.

Las reglas @ comienzan siempre con el s√≠mbolo de la arroba y luego su nombre clave. Dependiendo de cual se trate podr√° necesitar un √ļnico argumento (la regla “import por ejemplo) o un bloque de c√≥digo (la regla “media“). Veamos bien cu√°les son.

Regla @import

Agrega los estilos CSS de otra hoja en la que lo usa.

Ejemplo:
@import url(addonstyles.css);

Regla @media

Aplica las reglas que contiene al tipo de medio específico que indica (para impresiones, uso normal por pantalla, para proyectores, etc.).

Por ejemplo:

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}

Los tipos de media que se pueden utilizar son:

  • all – Se aplica a todos los tipos.
  • aural – Para sintetizadores de voz.
  • handheld – Para dispositivos de mano (Palm, iPhone, etc).
  • print – Para impresoras.
  • projection – Para proyectores.
  • screen – Para pantallas de computadora.

Nota: Internet Explorer sólo soporta los tres primeros.

Regla @charset

Ajusta el tipo de codificación de caracteres basándose en los que utiliza otra hoja de estilo.

Por ejemplo:

@charset "ISO-8859-1";

Regla @font-face

Se utiliza para realizar una descripci√≥n detallada de una fuente y puede utilizarse tambi√©n para embeber una tipograf√≠a en tu sitio. Sin embargo este √ļltimo uso s√≥lo es soportado por IE y hay mucha controversia con el tema de los derechos de propiedad al distribuir las fuentes. No es recomendable experimentar con esto si no sabemos bien lo que estamos haciendo.

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}

Regla @page

Es utilizada para configuraciones avanzadas a la hora de imprimir un sitio, permite por ejemplo determinar el tama√Īo con el que se imprimir√° o con qu√© margen.

Por ejemplo:

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

Espero haberlos podido acercar un poco m√°s al conocimiento de estas, muchas veces desconocidas, reglas “arroba” de CSS.

Fuente: HtmlDog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder