Selector ID

Bajo los tipos avanzados de “Selectores”, tenemos dos posibilidades.
Tenemos el ID y tenemos un selector pseudo-clase.
La primera cosa que voy a discutir es el selector ID.

A diferencia del Selector Clase, el cual discutí la lección pasada, el Selector ID es sólo un elemento en nuestra aplicación. Por ejemplo, el pié de página de nuestro documento.

Un selector ID siempre es precedido por un signo (#), seguido de un nombre.

En éste ejemplo voy hacer un pié de página para la página.
Hago click en el botón “Nueva Regla CSS” en la parte inferior del planel CSS.
Escojo la opción “Avanzadas” e introducir un nombre precedido por un signo (#) en el “Selector”.
En “Definir en”, escogemos nuestro archivo externo de estilo CSS “mystyle.css” y hacemos click en el botón Aceptar.

En “Tipo”, ajusto el tamaño del texto, por ejemplo, 9 pixeles, el pié de página no tiene que ser largo y escojo un color.
En “Fondo” escojo un color de fondo.

 

Selecciono lo que quiero formatear como el pié de página en mi documento.

Y hago click en el botón “Insertar Etiqueta Div” bajo la pestaña “Diseño” en el menu “Insertar”.
Más acerca de etiquetas Div en próximas lecciones.
¿Por qué coloco mi pié de página en una etiqueta Div?

Ahora, si colocamos texto en una ‘Etiqueta Div’, abre una ventana de diálogo de “Insertar Etiqueta Div”.
Y en éste cuadro de diálogo, haz click en el botón de la flecha que apunta hacia abajo, a un lado de la caja ID y selecciona la reciente creada “pié de página” opción.
Haz click en el botón Aceptar cuando termines.

El texto seleccionado es inmediatamente ajustado.

Bien, ¿qué podemos hacer con el Selector ID?

Actualmente, podemos ver todo lo que damos a un ID. Por ejemplo, una celda en la tabla.
Selecciona una celda en la tabla haciendo click en la etiqueta <td> en el Selector de Etiqueta. Si no recuerdas cómo, sólo regresa a Lección 2 de éste curso.

Abre la ventana “Etiqueta” haciendo click en el botón de la flecha que apunta hacia abajo y haz click en el signo más a un lado de “CSS / Accesibilidad” menu, entonces lo abrirá.

A parte de la caja “id”, tu tienes un nombre de celda como “RNavigation”.

Y haz click en el botón “Nueva Regla CSS” en la parte inferior del panel CSS.
Esto abre la ventana de diálogo “Nueva Regla CSS”.
Selecciona la casilla de verificación “Avanzadas” y escribe el nombre que introdujiste como un identificador para la celda, que es RNavigation, en el “Selector”. No olvides escribir en signo (#) antes del nombre.
Haz click en Aceptar.

En la caja de diálogo, escoge la categoría “Fondo”.
Hago click en el botón “Buscar” y navega y selecciona la imagen de fondo que deseo tener en ésta celda.

Después escoge la categoría “Bloqueo” y en “Alineación Vertical”, escojo “Arriba”.
Esto alineará mi texto en la parte superior de la celda.

Haz click en el botón Aceptar cuando termines con las configuraciones.

El resultado parece algo similar.
El texto, en éste caso los vínculos, están alineados en la parte de arriba de la imagen, ajusta para el fondo, si no está repetido.

En la siguiente lección, estableceremos esos vínculos a esos botones, sólo mediante CSS.

 

Cursos

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