Cómo crear estilos con los selectores de clase e id en dreamweaver
selectores de clase y la identificación de Dreamweaver tienen muchas similitudes y una diferencia clave. estilos de identificación sólo se pueden usar una vez por página, pero los estilos de clase se pueden utilizar tantas veces en la misma página como desee.
Los estilos de clase y de identificación tienen las siguientes similitudes:
Se puede nombrar a estilos creados con la clase y selectores de ID lo que quiera. No debe incluir espacios o caracteres especiales en los nombres de estilo, aunque el guión y el guión están bien. El uso de minúsculas es una práctica común, pero no es necesario.
Se puede aplicar de clase y estilos de identificación a cualquier elemento de una página, pero se aplican con mayor frecuencia a la cabecera etiquetas, etiquetas div, etiquetas de lista sin ordenar, las etiquetas de párrafo, las etiquetas de imagen, y las nuevas etiquetas HTML5.
Utilización de estilos creados con el selector de clase y el ID es un proceso de dos pasos. En primer lugar, se crea un nuevo estilo con el selector de clase o ID y darle un nombre- y luego aplicar el estilo a un elemento de la página.
Para definir un nuevo estilo de clase o ID, crear y guardar un documento nuevo o abrir 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 dar formato con el nuevo estilo
Aunque no se requiere este paso (se puede crear estilos para elementos que aún no están en la página), Dreamweaver crea automáticamente los nombres de selector basado en el elemento de página que el cursor está seleccionando actualmente.
Video: Diferencia entre ID y CLASS de HTML5 y CSS
2En el panel de selectores del panel Diseñador de CSS, seleccione el nombre de la hoja de estilo a la que desea añadir el nuevo estilo
Si desea orientar el estilo a un tipo de soporte o una pantalla de tamaño específico, definir una consulta de medios en el panel @media.
Video: 03 Tutorial de BlueGriffon. Crear hoja de estilos externa y selectores de tipo
Si no se especifica una consulta de medios, Dreamweaver utilizará la propiedad global y su estilo funcionará en todos los formatos y tamaños de pantalla.
3En el panel de selectores, haga clic en el signo más (+)
Un nuevo selector se añade al panel de selectores. Dreamweaver ha añadido un nombre de selección compuesto, que incluye todos los estilos ya aplicadas a la titular, donde el cursor estaba descansando cuando comenzó a definir el estilo.
4Haga doble clic en el nombre del selector, y editar o sustituirla por el nombre que desea utilizar para su estilo
Se puede nombrar a estilos de identificación de clase y cualquier cosa que desee, siempre y cuando no se utilice espacios ni caracteres especiales que no sean el guión (-) o un guión bajo (_).
Si desea crear un estilo utilizando el selector de clase, debe comenzar el nombre del estilo con un punto, o período. Si desea utilizar el selector de ID, el nombre del estilo debe comenzar con un signo de número (#).
5En el panel Propiedades, especifique la configuración de su regla de estilo
selectores de clase y de identificación son fáciles de aplicar al contenido después de crearlos porque Dreamweaver añade estos estilos a las listas desplegables de clase y de identificación del inspector de propiedades, ubicadas en la parte inferior del espacio de trabajo.