La creación de sitios web en la web de hoy requiere una comprensión profunda de CSS (hojas de estilo en cascada). Estas son las instrucciones que le da a un sitio web para determinar cómo se diseñará en la ventana del navegador. Usted aplica una serie de "estilos" a su documento HTML que creará la apariencia de su página web.
Hay muchas formas de aplicar los estilos mencionados anteriormente en un documento, pero muchas veces desea utilizar un estilo solo en algunos de los elementos en un documento, pero no todas las instancias de ese elemento. También es posible que desee crear un estilo que pueda aplicar a varios elementos en un documento, sin tener que repetir la regla de estilo para cada instancia individual. Para lograr estos estilos deseados, utilizará los atributos de clase e ID HTML. Estos atributos son atributos globales que se pueden aplicar a casi todas las etiquetas HTML. Eso 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 los atributos de clase e identificación para ayudarlo a realizar esta tarea.
Selectores de clase
El selector de clase le permite establecer varios estilos en el mismo elemento o etiqueta en un documento. Por ejemplo, es posible que desee que ciertas secciones de su texto se muestren en un color diferente al resto del texto del documento. Estas secciones resaltadas podrían ser una "alerta" que está configurando en la página. Podrías asignar tus párrafos con clases como esta:
p {color: # 0000ff; } p.alert {color: # ff0000; } Estos estilos establecerían el color de todos los párrafos a azul (# 0000ff), pero cualquier párrafo con un atributo de clase de "alerta" en lugar de un estilo en rojo (# ff0000). Esto se debe a que el atributo de clase tiene una especificidad más alta que la primera regla de CSS, que solo utiliza un selector de etiqueta. Cuando se trabaja con CSS, una regla más específica anulará una menos específica. Entonces, en este ejemplo, la regla más general establece el color de todos los párrafos, pero la segunda regla, más específica que reemplaza esa configuración solo en algunos párrafos. Aquí es cómo se podría utilizar esto en algunas marcas HTML: Este párrafo se mostrará en azul, que es el valor predeterminado para la página.
Este párrafo también estaría en azul.
Y este párrafo se mostraría en rojo, ya que el atributo de clase sobrescribiría el color azul estándar del estilo del selector de elementos.
En ese ejemplo, el estilo de "p.alert" solo se aplicaría a los elementos de párrafo que usan esa clase de "alerta". Si quisiera usar esa clase en varios elementos HTML, simplemente eliminaría el elemento HTML desde el comienzo de la llamada de estilo (solo asegúrese de dejar el período). .) en el lugar), así: .alert {background-color: # ff0000;} Esta clase ahora está disponible para cualquier elemento que la necesite. Cualquier parte de su HTML que tenga un valor de atributo de clase de "alerta" ahora obtendrá este estilo. En el HTML a continuación, tenemos un párrafo y un encabezado de nivel 2 que usan la clase de "alerta". Ambos tendrían un color de fondo de rojo basado en el CSS que acabamos de mostrar.
Este párrafo estaría escrito en rojo.
En los sitios web de hoy, los atributos de clase a menudo se usan en la mayoría de los elementos porque son más fáciles de trabajar desde una perspectiva de especificidad que los ID. Encontrará que la mayoría de las páginas HTML actuales se llenan con atributos de clase, algunos de los cuales se repiten varias veces en un documento y otros que pueden aparecer solo una vez. El selector de ID le permite dar un nombre a un estilo específico sin asociarlo con una etiqueta u otro elemento HTML. Digamos que tenía una división en su marca HTML que contiene información sobre un evento. Puede asignar a esta división un atributo de ID de "evento", y luego, si desea delinear esa división con un borde negro ancho de 1 píxel, escriba un código de identificación como este: #event {border: 1px solid # 000; } El desafío con los selectores de ID es que no se pueden repetir en un documento HTML. Deben ser únicos (puede usar la misma ID en varias páginas de su sitio, pero solo una vez en cada documento HTML individual). Por lo tanto, si tenía 3 eventos que necesitaban este borde, tendría que darles los atributos de ID de "evento1", "evento2" y "evento3" y diseñar cada uno de ellos. Por lo tanto, sería mucho más fácil usar el atributo de clase antes mencionado de "evento" y diseñarlos todos a la vez. Otro desafío con los atributos de ID es que tienen una especificidad más alta que los atributos de clase. Esto significa que si necesita tener CSS que invalida un estilo establecido previamente, puede ser difícil hacerlo si ha confiado demasiado en las ID. Es por esta razón que muchos desarrolladores web se han alejado del uso de ID en su marca, incluso si solo pretenden usar ese valor una vez, y en cambio han optado por atributos de clase menos específicos para casi todos los estilos. El área en la que los atributos de ID entran en juego es cuando se quiere crear una página que tenga enlaces de anclaje en la página. Por ejemplo, si tiene un sitio web de estilo de 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 usando atributos de ID y enlaces de texto que usan estos enlaces de anclaje. Simplemente debe agregar el valor de ese atributo, precedido por el símbolo "#", al atributo "href" del enlace, de esta manera: Este es el enlace Cuando se hace clic o se toca, este enlace saltará a la parte de la página que tiene este atributo de ID.Si ningún elemento de la página utiliza este valor de ID, el enlace no haría nada. Recuerde, si desea crear un enlace en la página en un sitio, se requerirá el uso de atributos de ID, pero aún puede recurrir a las clases para propósitos generales de estilo CSS. Así es como marcamos las páginas hoy: usamos los selectores de clase tanto como sea posible y solo recurrimos a las ID cuando necesitamos que el atributo actúe no solo como un gancho para CSS sino también como un enlace en la página.Y este h2 también sería rojo.
Selectores de ID
Complicaciones de los atributos de identificación
