Uso de clases de estilo e ID
Las clases y los ID amplían su CSS
E+/imágenes falsas
Construir sitios web bien diseñados en la web de hoy requiere una comprensión profunda de Hojas de estilo en cascada . Aplique una serie de estilos CSS a su documento HTML para informar la apariencia de su página web.
Atributos de clase e ID
En ocasiones, los diseñadores deben aplicar un estilo solo alguno de los elementos en un documento, pero no todas las instancias de ese elemento. Para lograr estos estilos deseados, use el clase y IDENTIFICACIÓN Atributos HTML. Estos atributos son atributos globales aplicables a casi todos los etiqueta HTML —así que, ya sea que aplique estilo a divisiones, párrafos, enlaces, listas o cualquier otra pieza de HTML en su documento, ¡puede recurrir a los atributos de clase e ID para ayudarlo a realizar esta tarea!
Selectores de clase
El selector de clase establece varios estilos para el mismo elemento o etiqueta en un documento. Por ejemplo, para llamar ciertas secciones de su texto en un color diferente como una alerta, asigne sus párrafos con clases como esta:
|_+_|Estos estilos establecerían el color de todos párrafos a azul (#0000ff), pero cualquier párrafo con un atributo de clase de alerta en su lugar, se diseñaría en rojo (#ff0000). Esto se debe a que el atributo de clase tiene una especificidad mayor que la primera regla CSS, que solo usa un selector de etiquetas. al trabajar 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, anula esa configuración solo en algunos párrafos.
Así es como esto podría usarse en algún marcado HTML:
|_+_|
Este párrafo se mostraría en azul, que es el valor predeterminado de 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.alerta solo se aplicaría a los elementos de párrafo que usan ese alerta clase. Para usar esa clase en varios elementos HTML, elimine el elemento HTML del comienzo de la llamada de estilo, así:
|_+_|
Esta clase ya 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 dos que usan el alerta clase. Ambos muestran un color de fondo rojo:
|_+_|
Este párrafo se escribiría en rojo.
En los sitios web actuales, los atributos de clase se usan a menudo en la mayoría de los elementos porque es más fácil trabajar con ellos desde una perspectiva de especificidad que con 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 con frecuencia en un documento y otros que pueden aparecer solo una vez.
Selectores de identificación
La identificación selector nombra un estilo específico sin asociarlo con una etiqueta u otro elemento HTML .
Suponga una división en su marcado HTML que contiene información sobre un evento. Podrías darle a esta división un atributo de identificación de evento y, a continuación, delinee esa división con un borde negro de 1 píxel de ancho:
|_+_|el reto con selectores de identificación es que no se pueden repetir en un documento HTML. Deben ser únicos (puede usar el mismo ID en varias páginas de su sitio, pero solo una vez en cada documento HTML individual). Entonces, para tres eventos que necesitan este borde, debe identificar los atributos de ID de evento 1 , evento2 , y evento3 y el estilo de cada uno de ellos. Por lo tanto, sería mucho más fácil usar el atributo de clase antes mencionado de evento y peinarlos todos a la vez.
Complicaciones de los atributos de identificación
Otro desafío con los atributos de ID es que tienen una mayor especificidad que los atributos de clase. Para anular un estilo previamente establecido, puede ser difícil hacerlo si ha confiado demasiado en las identificaciones. Muchos desarrolladores web han dejado de usar ID en su marcado, incluso si solo tienen la intención de 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 donde los atributos de ID entran en juego es cuando desea crear una página que tenga enlaces de anclaje en la página. Por ejemplo, considere un sitio web estilo parallax que contiene todo el contenido en una sola página con enlaces que 'saltan' a varias partes de esa página. Los atributos de ID y los enlaces de texto utilizan estos enlaces de anclaje. Agregue el valor de ese atributo, precedido por el # símbolo, a la href atributo del enlace, así:
|_+_|Cuando se hace clic o se toca, este enlace salta 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.
Para crear enlaces 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 los diseñadores marcan las páginas hoy en día: usan selectores de clase tanto como sea posible y solo recurren a las ID cuando necesitan que el atributo actúe no solo como un gancho para CSS sino también como un enlace en la página.