Cómo definir estilos con el selector de etiquetas en Dreamweaver

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo definir estilos con el selector de etiquetas en Dreamweaver

Libro Relacionado

Dreamweaver CC para tontos

Por Janine Warner

Puede crear estilos completamente nuevos en Dreamweaver utilizando los selectores de llamada o ID, pero también puede crear estilos que cambien el formato de las etiquetas HTML existentes. Estos estilos se crean utilizando el selector de etiquetas, también conocido como selector de elementos. Cuando se define un estilo utilizando el selector de etiquetas, se puede alterar la apariencia, posición y otras características de cualquier etiqueta HTML existente.

Muchas etiquetas HTML ya incluyen opciones de formato. Por ejemplo, las etiquetas de encabezado incluyen el formateo para dar estilo al texto usando una fuente grande en negrita. Cuando se crea un estilo con un selector de etiquetas, hay que tener en cuenta las opciones de formato ya asociadas a esa etiqueta. Cualquier opción que defina se agregará al formato existente o anulará el formato.

Puede que te preguntes: «¿Por qué redefiniría la

etiqueta en lugar de crear un nuevo estilo de titular utilizando el selector de clase o ID? Aunque puede definir un nuevo estilo de clase en lugar de redefinir un tag HTML, a veces es mejor usar un tag HTML existente.

Los estilos de encabezado son especialmente importantes en la web porque el texto formateado en una

etiqueta es bien reconocido como el texto más importante de una página. Entre otras cosas, el texto formateado en una

etiqueta

puede recibir una consideración especial de los motores de búsqueda.

Para crear un estilo que redefina una etiqueta HTML (como la

etiqueta ) con el selector de etiquetas, primero cree un archivo o abra uno existente y siga estos pasos:

1En el panel Selectores del panel CSS Designer, seleccione la hoja de estilo a la que desea añadir el nuevo estilo.

Cuando se crea un estilo para una etiqueta HTML existente, no es necesario aplicar el estilo en sí de la misma manera que se hace con los estilos de clase e ID. Dondequiera que haya utilizado el tag HTML, se aplican los ajustes de definición de estilo.

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

El uso de consultas multimedia con estilos es opcional. Si no especifica una consulta de medios, Dreamweaver utilizará la propiedad Global y su estilo funcionará en todos los formatos de medios y tamaños de pantalla.

3Haga clic en el signo más (+) en el panel de selectores.

Se agrega un nuevo selector al panel de selectores.

Cuando hace clic en el signo más (+) para crear un nuevo selector, pueden suceder algunas cosas, dependiendo de lo que ya está en la página abierta en Dreamweaver. La primera vez que crea un estilo en una página web en blanco, Dreamweaver introduce el cuerpo en el panel de selectores.

Si está trabajando en una página con texto u otro contenido formateado con etiquetas HTML o estilos, Dreamweaver puede añadir un selector compuesto basado en los elementos que rodean a lo que haya seleccionado con el cursor.

4En el panel Selectores, haga doble clic en el nombre del selector. Comience a introducir el nombre de la etiqueta HTML y, a continuación, seleccione la etiqueta en la lista desplegable que aparece.

Puede introducir el nombre de cualquier etiqueta HTML para crear un estilo utilizando el selector de etiquetas. A medida que escribe una etiqueta HTML, aparece una lista desplegable con etiquetas que comienzan con la misma letra que ha escrito. Seleccionar la etiqueta deseada de la lista en lugar de escribir el nombre completo de la etiqueta usted mismo es una buena práctica porque evita los errores tipográficos.

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

La fuente y el color se aplican inmediatamente al texto en la página formateada con la

etiqueta

.

Si desea poder utilizar la misma etiqueta HTML con diferentes formatos en diferentes partes de la misma página, puede crear estilos compuestos. Los estilos compuestos son útiles, por ejemplo, si desea que el texto formateado con la

etiqueta tenga un aspecto diferente en la parte principal de la página que en una barra lateral.

Deja un comentario