Estilos CSS II

Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, pulsamos el botón CSS Designer, que abre el panel Diseñador de CSS.

 

 

El Diseñador de CSS se divide en cuatro subpaneles. El primero de ellos nos permite definir la Fuente del nuevo estilo que vamos a crear. Es decir, si el estilo estará en un archivo .css adjunto o bien en la propia página. Para añadir una nueva fuente para nuestro estilo pulsamos el botón con el signo más que está en la esquina superior derecha del panel, lo que nos dará las opciones de la siguiente imagen:

Si seleccionamos Crear en un nuevo archivo CSS, se creará el archivos de estilos con extensión .css asociado a la página. En este caso podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

El Diseñador de CSS también nos permite adjuntar archivos de estilos existentes.

Si elegimos Definir en página, la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

El segundo subpanel @Medios, permite crear líneas de código que obligarán al navegador a informar qué resolución de pantalla tiene el usuario. Es decir, se crea una "Consulta de medios", la cual, en función del tipo de pantalla, utilizará estilos CSS apropiados. No te preocupes si esto parece por ahora algo confuso, le dedicaremos un apartado más adelante. Por lo pronto, podemos pasar del subpanel Fuentes al de Selectores sin usar el subpanel @Medios.

Independientemente de la fuente de estilos a utilizar (archivo .css o regla definida en página), pasamos al subpanel Selectores, en donde podemos definir el tipo de selector. El tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo. En función del lugar donde esté el punto de inserción en nuestra página, o de lo que tengamos seleccionado, el Diseñador de CSS va a sugerir el tipo de selector, pero también podemos escribirlo directamente en la caja de texto que se abre al pulsar el botón  del subpanel.

 

Podemos elegir entre cuatro tipos de selector:

• Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.
  El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
• ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.
• Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
• Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Dependiendo de lo que escribamos o seleccionemos en la caja de texto, será el tipo de selector de la regla de estilo, la cual, a su vez, se añadirá a la fuente indicada en el primer subpanel.