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.
MisiónA 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.
CierreA 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.
