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.

TAMBIÉN TE INTERESA

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.