Selector Etiqueta

La primera cosa que voy a discutir es acerca del selector Etiqueta.

Tengo un nuevo sitio para esas lecciones, el sitio Bonzai_01. Cuando los bajes puedes ver los distintos pasos.

Primero veamos lo que tenemos.
En la parte superior, encontramos un título de bienvenida que usa un encabezado H1.
A la derecha, tenemos un logo. Y abajo tenemos un menu de navegación.
Después tenemos texto, con un título que usa un encabezado H2 arriba a la derecha.
Y al final tenemos algunos vínculos en la derecha.
Esta página está vinculada al estilo CSS externo “mystyle.css”, encontrado en la carpeta “CSS_Styles”.
La única cosa que contiene es un estilo para a: link, a: visited, a: hover and a: active.

Añadiremos una etiqueta de estilo para el color de fondo, texto y después
para un encabezado1 y encabezado 2.
Sólo haz click en el botón “Nueva Regla CSS” en la parte baja del panel “CSS”.

Esto abre una ventana de diálogo llamada “Nueva Regla CSS”.
Selecciono un selector “Etiqueta”. La primer regla que añadiré es el color de fondo.
Haz click en la flecha que apunta hacia abajo a un lado de la caja “Etiqueta” y escoger “body” en el menu desplegable.
En “Definir en” escojo un archivo CSS existente “mystyle.css”, porque quiero añadir una nueva línea del archivo css existente.
Hacer click en Aceptar.

Esto abre una ventana de diálogo “Definición de regla CSS…”.
En “Tipo”, ajusto tipo de letra, tamaño de letra y color de letra.

En “fondo”, selecciono un color haciendo click en la paleta de colores y cuando el puntero del mouse cambie a otra figura, colócalo sobre el color de fondo del logo, porque yo quiero el color de fondo de mi página para ser la misma que el fondo de mi logo y hacer click.

 

Esto automaticamente llenará el código color en el “Color de Fondo”.
Esto es la única cosa que cambia sólo haz click en el botón Aceptar.

Como puedes ver la página que está vinculada al estilo CSS es actualizada inmediatamente.
Pero como puedes ver en la parte superior de las pestañas de varios documentos, sólo haz click en el archivo modificado, no en la página vinculada.

Puedes ver por el signo * a la derecha del nombre del archivo. Cuando eso aparece, ésto significa que el documento fue modificado pero no guardado.
Selecciona el archivo CSS y guárdalo cuando estés satisfecho.

Las páginas vinculadas están visualmente cambiadas pero nada cambia en el código. Se encuentra aún vinculado sólo al archivo mystyle.css.

Bueno, la segunda cuestion que vamos a cambiar es el encabezado 1 y el encabezado 2.
Para trabajar un poco más rápido, coloca el cursor en tu documento en el texto donde es aplicado el encabezado 1.
Haz click en el botón de “Nueva Regla CSS” en la parte inferior del panel “CSS”.

Esto abre una nueva ventana de diálogo de “Nueva Regla CSS”.
Comp uedes ver en la imagen de abajo, Dreamweaver ha llenado automáticamente la caja con la etiqueta h1, ésto es para Encabezado 1.

Dreamweaver lo llena automáticamente para nosotros, porque habíamos puesto el cursor en el texto que fue proveído con el formato del encabezado 1.
Si por alguna razón no ha sido llenado, puedes aún seleccionar la etiqueta haciendo click en el botón de la flecha que apunta hacia abajo.

En la caja “Define en” escoge el archivo CSS que quieras añadir una línea extra.
Haz click en el botón Aceptar.

Esto abre una ventana de diálogo de “Definición de regla CSS …”.
En “Tipo”, damos un color diferente al texto. En este ejemplo voy por un khaki más oscuro.
Esto no es una imagen, pero pienso que ya lo sabes.

Repetimos éste proceso para el encabezado 2.
Coloca el cursor en tu documento en una área de texto donde estén siendo usadas.
Haz click en el botón “Nueva Regla CSS” en la parte inferior del panel “CSS”.
En la ventana de diálogo que aparece, se ha completado la etiqueta h2.
La caja “Define en” es ajustada a “mystyle.css”, el cual es bueno.
Entonces, haz click en el botón Aceptar.
En este ejemplo doy un color más claro para ésta etiqueta (h2) y hago click en el botón Aceptar.

Inmediatamente la página con el estilo adjuntado CSS cambia apropiadamente.

Ambas líneas son también añadidas al archivo CSS, donde obviamente necesitas guardarlas en el panel de Estilos CSS.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats