Con la finalidad de aplicar con precisión diseños a
páginas web, identificaremos el
impacto del selector CSS en el proceso de implementación. En ocasiones, al
terminar el diseño de un proyecto para internet, los creadores se encuentran
inconformes con el resultado, debido a la discordia entre el producto y sus
deseos. Por este motivo, señalaremos las consecuencias de selectores cuando son
ingresados en un documento CSS, según las reglas de este lenguaje.
El selector es uno de los bloques
utilizados para las reglas CSS, mediante el cual especificamos las etiquetas de
HTML para aplicar estilo al documento. Es necesario mantener orden al momento
de crear la estructura de la página web
y su marcado, a fin de facilitar la creación de selectores y lograr documentos
pulcros.
061-01_0505_ilu01. Identificación de un selector
Para comprender el efecto causado
por un selector, primero es necesario describir la palabra herencia, pues es un
concepto utilizado en diferentes lenguajes con un mismo significado. Al
asociarlo a la vida diaria, equivaldrÃa a cuando un niño nace y tiene
caracterÃsticas de ambos padres, este es el proceso de heredar.
La estructura de un documento HTML
puede conformarse de la siguiente manera:
061-01_0505_ilu02. Estructura de un documento HTML
En la ilustración anterior observamos
con facilidad cuáles son las etiquetas dentro de otra, debido al rango de cada
una. Por lo tanto, al aplicar una regla CSS a la etiqueta section, todas las que están dentro de ella se ven afectadas, en
este caso cite.
Es necesario cuidar los detalles del
proceso de herencia, pues existen algunas reglas de CSS, las cuales solo afectan
directamente a la etiqueta especificada y omiten las internas. Por ejemplo, en
la imagen siguiente tenemos especificado un borde en el elemento p y solo se visualiza un cuadro alrrededor
del párrafo, sin agregar uno adicional en el texto delimitado por la etiqueta b. Por lo tanto, con el check se muestra la forma en la cual el
navegador web mostrará la declaración
realizada en el documento CSS.
061-01_0505_ilu03. Herencia con la etiqueta de párrafo
Entre los diferentes tipos de
selectores tenemos:
- Selector de
tipo: son las reglas para una sola etiqueta, por lo tanto, se ven afectadas en
todos los bloques del documento, donde aparezca.
- Selector de
clase: son las reglas para diferentes etiquetas con el mismo nombre descrito mediante
el atributo class.
- Selector de
identificación: son reglas para diferentes etiquetas con el mismo nombre
descrito mediante el atributo id.
061-01_0505_ilu04. Tipos de selectores
Aunque el selector de
identificación se utiliza con menos frecuencia en comparación con los demás, es
importante saber su existencia, pues según el nivel conocimiento es posible crear
proyectos más detallistas y profesionales.
Keynotes
- El selector es uno de los bloques utilizados
para las reglas CSS, mediante el cual especificamos las etiquetas de HTML para
aplicar estilo al documento.
- Es necesario mantener orden al momento de
crear la estructura de la página web
y su marcado, a fin de facilitar la creación de selectores y lograr documentos
pulcros.
- Selector de tipo: son las reglas para una
sola etiqueta, por lo tanto, se ven afectadas en todos los bloques del
documento, donde aparezca.
- Selector de clase: son las reglas para
diferentes etiquetas con el mismo nombre descrito mediante el atributo class.
- Selector de identificación: son reglas para
diferentes etiquetas con el mismo nombre descrito mediante el atributo id.
RetoCrea una sentencia en un documento
CSS, con la finalidad de observar el impacto de un selector, y explica la razon
por la cual ocurrió esa modificación de estilo mediante un comentario en el
mismo.
¡Comparte el resultado final de tu
reto en VKTV e invita a dos compañeros
a comentar una sugerencia de optimización a tu sentencia!
Tiempo disponible: entre 15 y 30
minutos.
CierreLa identificación del impacto de
un selector CSS permite crear páginas web
con resultados finales acordes a las necesidades. Además, aplicamos con
precisión los diseños requeridos a proyectos para internet. Con precisión y
organización especificaremos estilos pulcros en documentos CSS.
