Al verificar el código fuente de algunas páginas de
internet observamos cómo algunas tienen redundancia de instrucciones, debido a
la especificación línea por línea del diseño. Para evitar largos códigos y
optimizar el tiempo, identificaremos las consideraciones y el proceso de
combinar selectores básicos, según las reglas del lenguaje CSS.
A fin de aplicar estilos profesionalmente con la
simplificación de código, combinaremos selectores básicos en un documento CSS.
Al manejar correctamente los
selectores creamos diversidades de instrucciones, a fin de realizar páginas web vistosas, sin embargo, cuando tenemos
grandes proyectos es necesario optimizar el código.
Existen diferentes tipos de
selectores, para agregarlos a un documento CSS debemos:
- Con el de
tipo, agregar el nombre de la etiqueta.
- Con el de
clases, preceder el nombre de la clase por un punto.
- Con el de
identificador único, preceder el nombre del id
por el signo numeral.
En la ilustración observaremos un
ejemplo de cada uno, los cuáles son los más básicos del lenguaje CSS.
061-01_0508_ilu01. Tipos de selectores
Los selectores se combinan entre
sí con la finalidad de simplificar el código y aplicar una misma declaración a
más de una etiqueta. Esto favorece al momento de crear el proyecto, debido a la
minimización de errores. En el siguiente código de documento CSS, se encuentra
resaltado.
061-01_0508_ilu02. Código de combinación de selectores
Al utilizar clases, es posible especificar
el mismo nombre a diferentes etiquetas en el código HTML y aplicar a todas un
mismo estilo, sin embargo, cuando tenemos la necesidad de mostrar solo en
algunas partes un diseño, hacemos la declaración con mayor detalle. Para ello, primero
definimos el nombre de la etiqueta, luego un punto, el nombre de la clase y,
posteriormente, las declaraciones de estilo correspondiente, como se observa en
el siguiente código CSS.
061-01_0508_ilu03. Código de clases iguales en diferentes
etiquetas
De esta forma queremos decir, toda
etiqueta p con nombre de clase ejemplo, debe ser mostrada en color azul
y a la izquierda. Por esta instrucción, la etiqueta div, aunque tiene el mismo nombre, se muestra con las declaraciones
realizadas en la etiqueta body.
En diferentes oportunidades cuando
redactamos documentos HTML, definimos etiquetas dentro de otras y debido a
ello, para hacer especificaciones mediante CSS, requerimos tomar en cuenta el
rango creado, este procedimiento se llama selectores descendientes.
Al visualizar el código HTML de la
siguente imagen vemos cómo la etiqueta mark
se encuentra en dos partes, una dentro de la etiqueta div y otra dentro de la etiqueta p. Con ello apreciamos que aunque etiqueta mark es la misma, desciende de dos elementos diferentes. Por lo
tanto, en el documento CSS se encuentra la declaración para los elementos mark dentro de la etiqueta div. De esta forma, solo cuando esta
regla se cumple, el marcado tendrá color rosado.
061-01_0508_ilu04. Creación de selector descendiente
Keynotes
- Existen diferentes tipos de selectores, para
agregarlos a un documento CSS debemos: Con el de tipo, agregar el nombre de la
etiqueta. Con el de clases, preceder el nombre de la clase por un punto. Con el
de identificador único, preceder el nombre del id por el signo numeral.
- Los selectores se combinan entre sí con la
finalidad de simplificar el código y aplicar una misma declaración a más de una
etiqueta. Esto favorece al momento de crear el proyecto, debido a la
minimización de errores.
- Al utilizar clases, es posible especificar
el mismo nombre a diferentes etiquetas en el código HTML y aplicar a todas un
mismo estilo, sin embargo, cuando tenemos la necesidad de mostrar solo en algunas
partes un diseño, hacemos la declaración con mayor detalle.
- En diferentes oportunidades cuando
redactamos documentos HTML, definimos etiquetas dentro de otras y debido a
ello, para hacer especificaciones mediante CSS, requerimos tomar en cuenta el
rango creado, este procedimiento se llama selectores descendientes.
Reto
Crea una sentencia en un documento
CSS, donde se vea reflejada una combinación de selectores y dos de tipo
descendiente, además, ingresa mediante un comentario el beneficio de crear la
instrucción de esa forma.
¡Comparte el resultado final de tu
reto en vPages y pide a un experto en
la materia, un comentario de optimización de la sentencia!
Tiempo disponible: entre 15 y 30
minutos.
CierreMediante la combinación de selectores básicos en un
documento CSS, creamos instrucciones eficientes y obtenemos códigos óptimos,
debido a la aplicación de estilos con profesionalidad. Mediante la
concentración y organización, uniremos con excelencia diferentes tipos de
selectores.
