A fin de especificar estilos con el atributo class, aplicaremos el selector de clase en un documento CSS. En diferentes oportunidades, los creadores de páginas web tardan largas horas para especificar en cada elemento un diseño. Por este motivo y con base en las recomendaciones oficiales de CSS utilizaremos las clases para la especificación de estilos.

La utilidad de los selectores de tipo es realmente importante, sin embargo, cuando creamos estilos con una gran variedad de detalles es indispensable dominar los de clase, para simplificar instrucciones, con el propósito de optimizar el código CSS.

061-01_0507_ilu01. Marcado de documento HTML

En el código anterior HTML se ha creado una clase llamada ejemplo, la cual pertenece a la etiqueta párrafo p, es el primer paso para crear el selector de tipo clase.

Para aplicar la declaración de estilo con selectores de clase, es necesario hacer el llamado, para ello agregamos primero un punto y, seguidamente, el nombre de la misma. En el ejemplo siguiente, observamos la especificación de tamaño con fuente 15, letra de color azul y con el texto alineado a la izquierda. Mediante el navegador web verificamos la vista del usuario, donde el párrafo sin el atributo class es mostrado con las declaraciones especificadas en body, las cuales son: centrado, en color negro y tamaño de fuente 25 píxeles.

061-01_0507_ilu02. Creación de selector de clase

Una opción importante del selector de clase, es la posibilidad de aplicarse a diferentes etiquetas con el mismo nombre definido en el atributo class. De esta forma, en el mismo ejemplo creamos una etiqueta div, con el nombre igual al de clase especificada en la etiqueta p. Así, el navegador web muestra ambos textos con el mismo diseño.

061-01_0507_ilu03. Selector de clase en diferentes etiquetas

Las clases son utilizadas con frecuencia, sin embargo, también es posible utilizar el identificador único, mediante el atributo id. En este caso, para realizar el llamado en un documento CSS es necesario agregar primero el signo numeral, luego el nombre del id descrito en el documento HTML y, posteriormente, se definen las declaraciones. Por lo tanto, el navegador web muestra al usuario el párrafo llamado ejemplo2, en color rojo y centrado.

061-01_0507_ilu04. Ejemplo de identificador único

Keynotes

• La utilidad de los selectores de tipo es realmente importante, sin embargo, cuando creamos estilos con una gran variedad de detalles es indispensable dominar los de clase, para simplificar instrucciones, con el propósito de optimizar el código CSS.
• Para aplicar la declaración de estilo con selectores de clase, es necesario hacer el llamado, para ello agregamos primero un punto y, seguidamente, el nombre de la misma.
• Una opción importante del selector de clase, es la posibilidad de aplicarse a diferentes etiquetas con el mismo nombre definidio en el atributo class.
• Las clases son utilizadas con frecuencia, sin embargo, también es posible utilizar el identificador único, mediante el atributo id. En este caso, para realizar el llamado en un documento CSS es necesario agregar primero el signo numeral, luego el nombre del id descrito en el documento HTML.

A fin de aplicar correctamente selectores de clases implementa declaraciones de estilo en un documento CSS, mediante el atributo class definido previamente en un documento HTML.

Pasos a seguir:

• Crea un documento CSS.
• Inserta tres especificaciones de estilo mediante clases.
• Crea un documento HTML y realiza el resumen escrito de los pasos requeridos para definir selectores con clases, y divídelos con el atributo class.
• Muestra tu código y resumen a un especialista de la materia mediante vKonnect, y toma nota de sus sugerencias.

Sabrás que has tenido éxito, cuando presentes tu resumen y código a dos especialistas, y ellos entiendan con facilidad tu explicación.

Realiza las modifcaciones necesarias y, comparte tu código y resumen en vProfile y pide a tres compañeros una sugerencia para optimizar el procedimiento empleado. Ubica la publicación de un compañero y agrega un comentario de tu reacción al su resumen.

Tiempo disponible: 3 horas.

A través de la aplicación con precisión del selector de clase en un documento CSS, optimizamos el tiempo, cuando realizamos especificaciones de estilo a los elementos de HTML. Asimismo, implementamos correctamente el atributo class en las definiciones de diseño. Con paciencia y organización crearemos diseños de páginas web con excelencia.