Con la finalidad de especificar minuciosamente estilos
a elementos de páginas web,
aplicaremos el selector de tipo en un documento CSS. En ciertas oportunidades
existen páginas web con códigos
redundantes, debido al desconocimiento exacto de selectores de tipo. Por lo
tanto, según las reglas del lenguaje de diseños de proyectos para internet,
crearemos correctamente selectores de tipo, a fin de optimizar el diseño web.
Cuando creamos un documento CSS, previamente
es necesario esforzarnos por obtener en el documento HTML un resultado
profesional, a fin de lograr pulcritud en ambos y asegurar una página web de calidad al usuario. Esto conlleva
a definir con precisión los selectores de tipo, como los mostrados en la imagen:
061-01_0506_ilu01. Documento CSS y HTML
En la ilustración anterior se
aprecia la declaración de estilo realizada a la etiqueta body y p del documento
HTML.
Los selectores de tipo son
realmente útiles, pues solo con especificar una vez el estilo de una
determinada etiqueta, el navegador web la
mostrará al usuario de la misma forma en todas las partes del documento donde ésta
se encuentre. Por lo tanto, permite una simplificación de código CSS.
Para ver la aplicación de éstos creamos
una sola vez el selector con la etiqueta párrafo y la declaración color azul
con número hexadecimal, a la izquierda de la pantalla con left y tamaño de fuente 11. Por lo tanto, mediante el navegador web Google Chrome, observamos a continuación cómo ambos bloques marcados por la
etiqueta p se muestran con el mismo
estilo.
061-01_0506_ilu02. Creación de selector de tipo
Lo común en internet cuando se
resaltan textos es el fondo de color amarillo, sin embargo, a través del
selector de tipo es posible crear una regla para resaltar de un color diferente
todo texto con esta etiqueta.
061-01_0506_ilu03. Selector de tipo con la etiqueta mark
En el ejemplo anterior de documento
CSS especificamos el selector de tipo con la etiqueta mark y la declaración de diseño con la letra de tamaño 20 píxeles, background en español fondo, y con color
fucsia.
Los selectores se agrupan en una
declaración por medio de la separación con una coma, a fin de crear una
instrucción para varias etiquetas. En este ejemplo, tanto la etiqueta mark como la etiqueta p, tienen declarado el tamaño de letra
20 y fondo fucsia, por lo tanto, es como se presenta al usuario. Un detalle
importante para cuidar cuando se agrupan etiquetas es, la última declaración
tiene relevancia con las anteriores, por este motivo el párrafo es de tamaño 20,
aunque anteriormente se declaró 15.
061-01_0506_ilu04. Agrupación de selectores
Keynotes
- Cuando creamos un documento CSS, previamente
es necesario esforzarnos por obtener en el documento HTML un resultado
profesional, a fin de lograr pulcritud en ambos y asegurar una página web de calidad al usuario.
- Los selectores de tipo son realmente útiles,
pues solo con especificar una vez el estilo de una determinada etiqueta, el
navegador web la mostrará al usuario
de la misma forma en todas las partes del documento donde ésta se encuentre.
- Los selectores se agrupan en una declaración
por medio de la separación con una coma, a fin de crear una instrucción para
varias etiquetas.
- Un detalle importante para cuidar cuando se
agrupan etiquetas es, la última declaración tiene relevancia con las
anteriores.
RetoCrea dos selectores de tipo en un documento CSS, según las reglas de
este lenguaje.
¡Comparte el resultado final de tu reto en vPages, e invita a tus compañeros a sugerir
una optimización de tu código!
Tiempo disponible: entre 15 y 30 minutos.
CierreLa aplicación correcta de selector de tipo en un documento CSS,
permite crear códigos eficientes con instrucciones precisas y óptimas. Además,
tenemos la capacidad de especificar estilos de forma minuciosa a determinados
elementos. Con precisión y organización aplicaremos estilos correctamente a un
documento CSS.
