Unidad 4. Avanzado: El panel Estilos CSS (I)

Veamos cómo funciona el panel Estilos CSS Panel Estilos CSS.

El panel Estilos CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rápida y sencilla, los estilos creados de esta manera se pueden guardar en nuestro documento, pero también podemos utilizar estilos que se encuentren en hojas externas al documento. Esta particularidad es muy útil cuando diseñamos un sitio web con varias páginas ya que permite definir una sola hoja de estilos que utilizarán todas las páginas del sitio y así facilitar el diseño.

Vamos a ver cómo funcionan las hojas de estilo a través del panel CSS que puede abrirse a través del menú Ventana, opción Estilos CSS. Existen otras alternativas para abrir este panel, una es pulsando Mayús + F11, o puedes hacer clic en el botón Panel CSS que aparece en el Inspector de Propiedades CSS.

El panel tiene dos modos de visualización, representados por dos botones bajo el nombre del panel. Veámoslos:

• El modo Actual.

Este modo nos ofrece información sobre qué estilos están afectando a la selección.

Se divide en tres secciones:

  • En Resumen de la selección, se muestran las propiedades aplicadas sobre la selección, aunque estas provengan de distintas reglas. Por ejemplo, a un texto le pueden afectar las reglas generales de la página, las del párrafo, etc.
  • La parte central muestra la sección Reglas / Acerca de, pudiendo cambiar entre ellas con los botones Reclas / Acerca de.
  • La vista Reglas muestra las reglas que afectan a la selección.
  • La vista Acerca de nos dice dónde está definida la propiedad seleccionada.
  • La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aquí podemos editarlas.

Una opción muy interesante del panel es que nos permite activar/desactivar propiedades solo con hacer clic a la izquierda de su nombre.

Esto nos permite comprobar rápidamente cómo afectan los estilos a nuestra página.

• El modo Todo.

En este modo obtenemos información sobre los estilos disponibles en el documento actual, independientemente de la selección.

Tenemos dos secciones:

  • En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento o en hojas de estilo enlazadas.
  • En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas.

En ambos modos, en la parte inferior encontramos las mismas opciones.

Desde los botones Botones propiedades de estilo podrás ordenar las propiedades de diferentes maneras. Con el primer botón mostrarás todas las propiedades ordenadas por categorías (Fuente, Fondo, Bloque, Borde, etc.); también puedes mostrarlas ordenadas de la A a la Z con el segundo botón.

En la esquina inferior derecha encontramos los controles que nos permiten gestionar las reglas: De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de estilo, crear una regla, editar la regla seleccionada o borrarla.

   Inicio  Adelante