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

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

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

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

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,