LibrosWeb.es

Además de las hojas de estilos definidas por los diseñadores, los navegadores aplican a cada página otras dos hojas de estilos: la del navegador y la del usuario.

La hoja de estilos del navegador es la primera que se aplica y se utiliza para establecer el estilo inicial por defecto a todos los elementos HTML (tamaños de letra iniciales, decoración del texto, márgenes entre elementos, etc.)

Además de la hoja de estilos del navegador, cada usuario puede crear su propia hoja de estilos y aplicarla automáticamente a todas las páginas que visite con su navegador. Se trata de una opción muy útil para personas discapacitadas visualmente, ya que pueden aumentar el contraste y el tamaño del texto de todas las páginas para facilitar su lectura.

La forma en la que se indica la hoja de estilo del usuario es diferente en cada navegador:

• Internet Explorer:
  1. Pincha sobre el menú Herramientas y después sobre la opción Opciones de Internet
  2. En la pestaña General que se muestra, pulsa sobre el botón Accesibilidad que se encuentra dentro de la sección Apariencia
  3. En la nueva ventana que aparece, activa la opción Formatear los documentos con mi hoja de estilos y selecciónala pulsando sobre el botón Examinar...
  4. Pulsa Aceptar hasta volver al navegador
• Firefox:
  1. Guarda tu hoja de estilos en un archivo llamado userContent.css
  2. Entra en el directorio de tu perfil de usuario de Firefox. En los sistemas operativos Windows este directorio se encuentra normalmente en C:\Documents and Settings\[tu_usuario_de_windows]\Datos de programa\Mozilla\Firefox\Profiles\[cadena_aleatoria_de_letras_y_numeros].default
  3. Copia la hoja de estilos userContent.css en el directorio chrome de tu perfil
  4. Reinicia el navegador para que se apliquen los cambios
• Safari:
  1. Pincha sobre el menú Editar y después sobre la opción Preferencias
  2. Selecciona la sección Avanzado
  3. Pincha sobre la lista desplegable llamada Hoja de estilos y selecciona la opción Otra...
  4. En la ventana que aparece, selecciona tu hoja de estilos
• Opera:
  1. Pincha sobre el menú Herramientas y después sobre la opción Preferencias
  2. Selecciona la pestaña Avanzado y pulsa sobre el botón Opciones de estilo...
  3. Pulsa sobre el botón Seleccionar... para seleccionar la hoja de estilos
  4. Pulsa Aceptar hasta volver al navegador

El orden normal en el que se aplican las hojas de estilo es el siguiente:

Figura 13.28. Orden en el que se aplican las diferentes hojas de estilos

Por tanto, las reglas que menos prioridad tienen son las del CSS por defecto de los navegadores, ya que son las primeras que se aplican. A continuación se aplican las reglas definidas por los usuarios y por último se aplican las reglas CSS definidas por el diseñador, que por tanto son las que más prioridad tienen.

Además de estas hojas de estilos, CSS define la palabra reservada !important para controlar la prioridad de las declaraciones de las diferentes hojas de estilos.

Si a una declaración CSS se le añade la palabra reservada !important, se aumenta su prioridad. El siguiente ejemplo muestra el uso de !important:

p {
  color: red !important;
  color: blue;
}

Si la primera declaración no tuviera añadido el valor !important, el color de los párrafos sería azul, ya que en el caso de declaraciones de la misma importancia, prevalece la indicada en último lugar.

Sin embargo, como la primera declaración se ha marcado como de alta prioridad (gracias al valor !important), el color de los párrafos será el rojo.

El valor !important no sólo afecta a las declaraciones simples, sino que varía la prioridad de las hojas de estilo. Cuando se indican declaraciones de alta prioridad, el orden en el que se aplican las hojas de estilo es el siguiente:

Figura 13.29. Orden en el que se aplican las diferentes hojas de estilos cuando se utiliza la palabra resevada important

Los estilos del usuario marcados como !important tienen más prioridad que los estilos marcados como !important en la hoja de estilos del diseñador. De esta forma, ninguna página web puede sobreescribir o redefinir ninguna propiedad de alta prioridad establecida por el usuario.