Cómo usar las clases de estilo y los IDs para el estilo selectivo en CSS

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
VALORACIÓN DEL ARTÍCULO:
5/5


Construir sitios web en la Web de hoy en día requiere un profundo conocimiento de CSS (Cascading Style Sheets). Estas son las instrucciones que usted da a un sitio web para determinar cómo será su diseño en la ventana del navegador. Usted aplica una serie de “estilos” a su documento HTML que creará el aspecto de su página web.

Hay muchas maneras de aplicar los estilos mencionados anteriormente a lo largo de un documento, pero a menudo se desea utilizar un estilo sólo en algunos de los elementos de un documento, pero no en todas las instancias de ese elemento. También es posible que desee crear un estilo que pueda aplicar a varios elementos de un documento, sin tener que repetir la regla de estilo para cada instancia individual. Para lograr estos estilos deseados, se utilizarán los atributos HTML de la clase y del ID. Estos atributos son atributos globales que se pueden aplicar a casi todas las etiquetas HTML. Esto significa que si está diseñando divisiones, párrafos, enlaces, listas o cualquiera de las otras piezas de HTML en su documento, puede recurrir a atributos de clase e ID para ayudarle a realizar esta tarea.

Selectores de clase

El selector de clase le permite establecer múltiples estilos para el mismo elemento o etiqueta en un documento. Por ejemplo, es posible que desee que ciertas secciones del texto se muestren en un color diferente al resto del texto del documento. Estas secciones resaltadas podrían ser una “alerta” que usted está configurando en la página. Puede asignar sus párrafos con clases como ésta:

 p { color: #0000ff; }
p.alert { color: #ff0000; }

Estos estilos establecerían el color de todos los párrafos en azul (#0000ff), pero cualquier párrafo con un atributo de clase “alert” lo haría con un estilo en rojo (#ff0000). Esto se debe a que el atributo class tiene una especificidad mayor que la primera regla CSS, que sólo utiliza un selector de etiquetas. Cuando se trabaja con CSS, una regla más específica anulará otra menos específica. Así que en este ejemplo, la regla más general establece el color de todos los párrafos, pero la segunda regla, más específica, anula esa configuración sólo en algunos párrafos.

Cómo se puede usar esto en algunas marcas de revisión HTML:


Este párrafo se mostraría en azul, que es el valor por defecto para la página. / i> de laEste párrafo también estaría en azul. / i>
Y este párrafo se mostraría en rojo ya que el atributo class sobrescribiría el color azul estándar del elemento selector styling. / i> / i>.

En ese ejemplo, el estilo "p.alert" sólo se aplicaría a los elementos de párrafo que utilizan esa clase "alert". Si desea usar esa clase a través de múltiples elementos HTML, simplemente elimine el elemento HTML desde el principio de la llamada de estilo (sólo asegúrese de dejar el punto (

.

) en su lugar), así: .alert {color de fondo: #ff0000;}

Esta clase está ahora disponible para cualquier elemento que la necesite. Cualquier parte de su HTML que tenga un valor de atributo de clase “alert” obtendrá ahora este estilo. En el HTML de abajo, tenemos un párrafo y un encabezado de nivel 2 que utilizan la clase “alert”. Ambos tendrían un color de fondo rojo basado en el CSS que acabamos de mostrar.


Este párrafo estaría escrito en rojo. / i> En los sitios web actuales, los atributos de clase se utilizan a menudo en la mayoría de los elementos porque es más fácil trabajar con ellos desde una perspectiva de especificidad como lo son los IDs. Encontrará las páginas HTML más actuales para rellenar con atributos de clase, algunos de los cuales se repiten varias veces en un documento y otros que pueden aparecer sólo una vez.

Selectores de ID

El selector ID le permite dar un nombre a un estilo específico sin asociarlo con una etiqueta u otro elemento HTML. Supongamos que tiene una división en su marcado HTML que contiene información sobre un evento. Puede darle a esta división un atributo ID de "evento", y luego, si desea delinear esa división con un borde negro de 1 píxel de ancho, escriba un código ID como este:

#event { border: 1px sólido #000; }

El reto con los selectores de ID es que no se pueden repetir en un documento HTML. Deben ser únicos (puede utilizar el mismo ID en varias páginas de su sitio, pero sólo una vez en cada documento HTML individual). Así que si tuvieras 3 eventos que necesiten este borde, necesitarías darles atributos ID de “event1”, “event2” y “event3” y darle estilo a cada uno de ellos. Por lo tanto, sería mucho más fácil usar el atributo de clase de “evento” mencionado anteriormente y darle estilo a todos a la vez.

Complicaciones de los atributos de identificación

Otro reto con los atributos ID es que tienen una especificidad mayor que los atributos de clase. Esto significa que si necesita tener CSS que anula un estilo previamente establecido, puede ser difícil hacerlo si ha confiado demasiado en los IDs. Es por esta razón que muchos desarrolladores web se han alejado de usar IDs en sus marcas, incluso si sólo pretenden usar ese valor una vez, y en su lugar han recurrido a los atributos de clase menos específicos para casi todos los estilos.

La única área en la que los atributos ID entran en juego es cuando se desea crear una página que tenga enlaces de anclaje dentro de la página. Por ejemplo, si tiene un sitio web de estilo paralaje que contiene todo el contenido en una sola página con enlaces que “saltan” a varias partes de esa página. Esto se hace utilizando atributos ID y enlaces de texto que utilizan estos enlaces de anclaje. Simplemente añadiría el valor de ese atributo, precedido por el símbolo “#”, al atributo “href” del enlace, así:

Este es el link

Cuando se hace clic o se toca, este enlace salta a la parte de la página que tiene este atributo ID. Si ningún elemento de la página utiliza este valor de ID, el enlace no hará nada.

Recuerde, si desea crear un enlace dentro de la página en un sitio, se requerirá el uso de atributos de ID, pero aún así puede recurrir a las clases con fines de estilo CSS general. Así es como marcamos las páginas hoy en día – usamos selectores de clase tanto como nos es posible y sólo recurrimos a los IDs cuando necesitamos el atributo para actuar no sólo como un gancho para CSS sino también como un enlace dentro de la página.

Deja un comentario

TAMBIÉN TE INTERESA

5 pasos para configurar el monitor

Cómo configurar el monitor de tu PC en 5 sencillos pasos

Si la imagen está configurada incorrectamente, incluso el mejor monitor no ayudará. Te mostramos cinco sencillos pasos para configurar el monitor de tu PC. Solo una pantalla de PC calibrada muestra los colores tal como aparecen en una impresión. Al editar imágenes en la pantalla de la PC, todo se veía perfecto, pero los colores

Android TV

El sistema de Google Android TV

Televisión con Google: los dispositivos de televisión con Android TV ahora ofrecen a sus usuarios mucha comodidad. Por eso te vamos a explicar por qué es así. Diseño elegante, mucha visión general y muchas funciones: después de que Android TV tuvo un comienzo bastante accidentado a fines del otoño de 2014, el sistema operativo de televisión inteligente de Google se ha

satélites Starlink.

Internet satelital por Starlink, todo lo que necesitas saber

Por norma general, a principio del milenio solo se podría acceder a Internet mediante la banda ancha fija (fibra o cobre) o banda ancha móvil. En la actualidad, se cuenta con banda ancha inalámbrica y satelital. Y, a pesar de que las últimas dos han tenido problemas de velocidad, cobertura y latencia, debido a que

Cómo identificar buenos cables HDMI

HDMI 1.0 a 2.1: todo lo que necesita saber

Ya sea en la televisión o en la computadora, la conexión HDMI es omnipresente. Por eso te explicamos qué es importante con las conexiones y los cables y cómo se pueden resolver los problemas. La conexión HDMI se ha establecido como un todoterreno digital para imagen y sonido en un amplio frente. Los televisores están equipados

soluciones cookies

Mejores consejos de cookies para Firefox y Google Chrome

Las cookies son pequeños paquetes de datos necesarios para registrarse en los servicios web: si has desactivado las cookies en tu navegador, el registro fallará. Si las cookies están permitidas de acuerdo con la configuración estándar, los inicios de sesión generalmente funcionan. Si eliminas tus cookies existentes, cerrarás la sesión de los servicios web. Las cookies permiten

bloquear-anuncios-en-internet

Bloqueador de anuncios gratuito y seguro

¿Cansado de tanta publicidad mientras navegas por internet o visitas tus redes sociales? Usa un bloqueador de anuncios y con ello también podrás eliminarás posibles malware que pueden causarte un buen problema. No temas, existen herramientas para eliminar la publicidad. Aquí te hablaremos de una de ellas.   Hay muchos anuncios que están incrustados en