En el ejemplo mostramos cómo el mismo documento cambia de apariencia dependiendo de si se está mostrando en pantalla o si va a ser imprimido, utilizando para ello el atributo media en la etiqueta link:

Descargar archivo de ejemplo

Un problema muy habitual es no conseguir que un determinado elemento no se ajuste exactamente a la posición que deseamos, y la causa más habitual es que no hemos definido alguno de los atributos (sobre todo margin y padding), por lo que el navegador asigna los suyos propios que no tienen por qué coincidir con los que nosotros esperemos que sean.

Descargar Ejemplo de valores por defecto

(Nota: los ejemplos que vayamos subiendo serán “autoejecutables”: no necesitarás definir un sitio en DW para poder seguirlos)

Aplicamos ahora una capa de maquillaje que lo deje irreconocible
div.upload {
position: relative;
width: 80px;
height: 24px;
overflow:hidden;
background:url(btn_upload.png) left top no-repeat;
clip:rect(0px, 80px, 24px, 0px );
}

div.upload input {
position: absolute;
left: auto;
right: 0px;
top: 0px;
margin:0;
padding:0;
filter: Alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
}
Qué es lo que hemos hecho ? Simplemente hacer transparente el input_file, y mediante la propiedad css “clip” evitamos que el control se salga de los límites del div.

Y para que su aspecto sea más profesional todavía, le añadimos al div una imagen como esta

[ demo ] [ descargar ]

habitualmente, creamos la hojas de estilos y las enlazamos en nuestro documento asignando el atributo media según corresponda:

Lo que puede suceder es que los archivos sean tan pequeños que se necesite más tiempo para procesar la petición al servidor que en su descarga…

Sin embargo, existe la posibilidad de combnar ambos tipos en un sólo css, gracias a la regla @media. La sintaxis es muy sencilla:

@media tipoDeMedia{
   ... aqui van nuestras reglas...
}

Gracias a ello, podemos utilizar un solo archivo y escribir:

/*estilos.css*/
@media screen{
   #menu{
      float:left;
      width: 120px;
   }
}

@media print{
   #menu{
     display:none;
   }
}

Como siempre, todo depende de las necesidades: Puede ser una buena idea para archivos pequeños, pero puede complicar la edición de hojas de estilos demasiado grandes.

Mediante este método (el uso del atributo media=”print”) es sencillo aplicar un formato más amigable al documento a la hora de imprimirlo (ocultando menus, imágenes no deseadas…). Sin embargo, existe un pequeño problema: ¿Qué sucede con los enlaces?

En un documento impreso es imposible (por razones obvias) hacer click en un enlace para visitarlo: ¿Cómo podemos mostrar en la hoja impresa la URL del mismo? Una vez más, CSS tiene la respuesta.

Lamentablemente, IE6 no soporta el código que vamos a explicar pero, como mal menor, lo ignora sin provocar errores. En cambio, Mozilla Firefox la soporta sin problemas (y esperemos que IE7 haga lo mismo).

Los pseudoelementos
Hasta ahora casi todos conocíamos 4 pseudoclases: link, hover, active y visited. Son la herramienta perfecta para la famosa pregunta de cambiar los colores de los enlaces.

Pero aparte de las pseudoclases, CSS también posee pseudoelementos. Sin entrar en cuestiones teóricas (lo importante aquí es saber utilizarlos), simplemente comentaremos que los pseudoelementos nos permiten tener acceso al contenido del arbol de elementos del documento (por ejemplo, los atributos de una etiqueta) y las pseudoclases nos permiten acceder a aquellas partes que no son visibles directamente en el código (por ejemplo, el estado del ratón sobre un elemento del documento).

:before y :after
Dentro de los pseudoelementos encontramos a nuestros protagonistas, que nos permitirán generar contenido delante o detrás del elemento al que se apliquen. Su compañero más habitrual es el atributo ‘content’ y su uso es casi tan sencillo como el de las pseudoclases:

Si tenemos un documento como éste:

  

  
  

Hola Mundo

  

Podemos añadir texto por delante del mismo utilizando el pseudoelemento :before y el atributo content:

  


  
  

Hola Mundo

  

Lo que nos devuelve en pantalla:

el navegador dice: Hola mundo

Como se puede ver hasta ahora, su uso es realmente sencillo (lástima que IE6 no lo soporte).

Aprovechando la jerarquía de estilos en CSS y conociendo cómo funciona, podremos evitar conflictos que nos pueden parecer un error e incluso evitar valores aplicables por herencia. Veamos algunos ejemplos de reglas.

En una situacion normal, podemos tener un codigo CSS como este:

Esto es un texto del parrafo

Lógicamente, el texto se mostrará simplemente en color negro y 12 pixeles.

Vamos a añadir algo más:

Esto es un texto del parrafo

Veremos el parrafo en negro y 12 pixeles, ya que el estilo .parrafo tiene preferencia sobre ‘p’ (aunque parezca una obviedad, en seguida veremos la explicación teórica de por qué es así). El resultado es:

Pero hagamos un pequeño cambio:

Esto es un parrafo
Esto es otro parrafo

Curiosamente, en esta ocasión también veremos el segundo parrafo en rojo y a un tamaño de 20 pixeles (pese a aplicarle class=”parrafo”):

?Dónde está el problema? Básicamente en el concepto de jerarquía a la hora de resolver conflictos. Esta jerarquía depende de 2 ideas:

• Especifidad
• Lugar y orden de definición.

La especifidad implica que cuando un elemento se vea afectado por dos o más reglas y exista conflicto entre sus declaraciones tendrán preferencia las de la regla más específica.

Esta especifidad conlleva una jerarquia en los tipos de regla utilizada:

1. Los id tienen preferencia sobre las clases y las etiquetas
2. Las clases tienen preferencia sobre las etiquetas
3. En cualquier caso, los estilos definidos dentro de la etiqueta me diante el atributo “style” (inline) tienen preferencia sobre las reglas declaradas en el encabezado del documemto (embedded) y éstas sobre las definidas en un archivo css externo (linked, enlazado con @import)
4. En caso de empate, tiene preferncia la última regla definida

Si recordamos el segundo ejemplo:

Veremos que la clase sobreescribe la etiqueta (a causa del punto 2: ).

El ejemplo 3 (‘#contenido p’ frente a ‘.parrafo’) puede ser un poco menos evidente, pero existe una forma sencilla de calcular, en caso de conflicto, qué regla tiene preferencia sobre otra (no es 100% eficaz, pero sí lo es al 99%):

La formula es la siguiente:
(Numero de id’s en el selector x 100)+(numero de clases en el selector x 10)+(numero de etiquetas en el selector)

Por tanto, en el tercer ejemplo, la operacion resultante es:

• #contenido p = 101
• .parrafo = 10

Y por ello la primera regla tiene preferencia. Recordando de nuevo el ejemplo 2:

• p=1
• .parrafo=10

¿Como podemos superarlo? Si hubieramos definido las reglas como:

El resultado del cálculo será:

• #contenido p= 101
• #contenido p.parrafo = 111

Conseguir?amos para #contenido p.parrafo un peso de 111, por lo que adquiere preferencia sobre #parrafo a secas (peso=100), utilizando por tanto el color negro y 12 px.El resto del bloque div conservar?a el estilo de #parrafo p.

Es decir, a trav??s de una mayor especifidad podemos evitar problemas

Aparte de utilizar una mayor especifidad para resolver este tipo de conflictos, existe otra solución, no tan recomendable, pero sí eficaz: El valor !important, que tiene preferencia sobre cualquier regla existente (por eso conviene utilizarla con precaución).:

Con !important escrito detr?s de un valor podemos sobreescribir cualquier otro que en principio tendr?a preferencia:

texto

El resultado es:

Y por último, un ejemplo de cómo el lugar donde se defina la regla influye en su jerarquía (punto 3): Hemos definido una clase .parrafo, la hemos aplicado a una etiqueta

y hemos añadido a ésta un estilo interno (inline):

texto

El resultado es éste (style sobreescribe a la clase para el conflicto en el tamaño de fuente):