Cómo crear estilos con clase y selectores de ID en Dreamweaver

Cómo crear estilos con clase y selectores de ID en Dreamweaver - dummies

Los selectores de clase e ID en Dreamweaver tienen muchas similitudes y una diferencia clave. Los estilos de ID solo se pueden usar una vez por página, pero los estilos de clase se pueden usar tantas veces en la misma página como desee.

Los estilos de clase e ID tienen las siguientes similitudes:

Puede nombrar los estilos creados con la clase y los selectores de ID lo que quiera. No debe incluir espacios ni caracteres especiales en los nombres de estilo, aunque el guión bajo y el guión son correctos. El uso de todas las minúsculas es una práctica común pero no obligatoria.

Puede aplicar estilos de clase e ID a cualquier elemento de una página, pero generalmente se aplican a etiquetas de encabezado, etiquetas div, etiquetas de lista desordenadas, etiquetas de párrafo, etiquetas de imagen y el nuevo HTML5 etiquetas.

El uso de estilos creados con la clase y el selector de ID es un proceso de dos pasos. En primer lugar, crea un nuevo estilo con la clase o selector de ID y le da un nombre; luego aplica el estilo a un elemento en la página.

Para definir una nueva clase o estilo de ID, cree y guarde un nuevo documento o abra un archivo existente, y luego siga estos pasos:

1Si está definiendo un nuevo estilo que desea aplicar a un elemento existente, haga clic para colocar el cursor sobre el elemento que desea formatear con el nuevo estilo.

Aunque este paso no es necesario (puede crear estilos para elementos que aún no están en la página), Dreamweaver crea automáticamente nombres de selector en función del elemento de página que el cursor está seleccionando actualmente.

2En el panel Selectores del panel Diseñador de CSS, seleccione el nombre de la hoja de estilos a la que desea agregar el nuevo estilo.

Si desea orientar el estilo a un tipo de medio o tamaño de pantalla específico, defina una consulta de medios en el panel @Media.

Si no especifica una consulta de medios, Dreamweaver usará la propiedad Global y su estilo funcionará en todos los formatos de medios y tamaños de pantalla.

3En el panel Selectores, haga clic en el signo más (+).

Se agrega un nuevo selector al panel Selectores. Dreamweaver ha agregado un nombre de selector compuesto, que incluye todos los estilos ya aplicados al título donde estaba el cursor cuando comenzó a definir el estilo.

4Haga doble clic en el nombre del selector y edítelo o reemplácelo por el nombre que desee usar para su estilo.

Puede asignar un nombre a la clase y a los estilos de identificación que desee, siempre que no utilice espacios ni caracteres especiales que no sean el guión (-) o el guión bajo (_).

Si desea crear un estilo utilizando el selector de clase, debe comenzar el nombre del estilo con un punto o punto.Si desea usar el selector de ID, el nombre del estilo debe comenzar con un signo de número (#).

5En el panel Propiedades, especifique la configuración en su regla de estilo.

Los selectores de clase e ID son fáciles de aplicar al contenido después de crearlos porque Dreamweaver agrega estos estilos a las listas desplegables Clase e ID en el inspector de propiedades, ubicado en la parte inferior del espacio de trabajo.