La creación de sitios web con buen estilo en la web actual 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
Los diseñadores a veces deben aplicar un estilo solo algunos de los elementos de 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 diseñe divisiones, párrafos, enlaces, listas o cualquiera de las otras partes de HTML en su documento, puede recurrir a los atributos de clase e ID para ayudarlo a realizar esta tarea.
Selectores de clases
El selector de clases establece varios estilos para el mismo elemento o etiqueta en un documento. Por ejemplo, para llamar a ciertas secciones de su texto en un color diferente como una alerta, asigne sus párrafos con clases como esta:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Estos estilos establecerían el color detodas párrafos a azul (# 0000ff), pero cualquier párrafo con un atributo de clase de alerta en su lugar, estaría con estilo en rojo (# ff0000). Esto se debe a que el atributo de clase tiene una mayor especificidad que la primera regla CSS, que solo usa un selector de etiquetas. Al trabajar con CSS, una regla más específica anulará otra 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 algunas marcas HTML:
Este párrafo se mostraría en azul, que es el 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 sólo se aplicaría a los elementos de párrafo que utilizan ese alerta clase. Para usar esa clase en varios elementos HTML, elimine el elemento HTML del comienzo de la llamada de estilo, así:
.alert {color de fondo: # 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 dos que usan el alerta clase. Ambos muestran un color de fondo rojo:
Este párrafo estaría escrito en rojo.
En los sitios web de hoy, 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 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 con frecuencia en un documento y otros que solo pueden aparecer una vez.
Selectores de ID
La identificación selector nombra un estilo específico sin asociarlo con una etiqueta u otra Elemento HTML.
Suponga una división en su marcado HTML que contiene información sobre un evento. Podrías darle a esta división una Atributo de ID de eventoy luego delinee esa división con un borde negro de 1 píxel de ancho:
#event {border: 1px solid # 000; }
El desafío con Selectores de ID 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, event2, y event3 y estiliza cada uno de ellos. Por lo tanto, sería mucho más fácil utilizar el atributo de clase antes mencionado de evento y diseñarlos todos a la vez.
Complicaciones de los atributos de identificación
Otro desafío con los atributos de identificación 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 ID. Muchos desarrolladores web se han alejado de usando 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 estilos.
La única área en la que entran en juego los atributos de ID es cuando desea crear una página que tenga enlaces de anclaje dentro de la página. Por ejemplo, considere un sitio web de estilo paralaje que contenga todo el contenido en una sola página con enlaces que "salten" a varias partes de esa página. Los atributos de identificación y los enlaces de texto utilizan estos enlaces de anclaje. Sume el valor de ese atributo, precedido por el # símbolo, al href atributo del enlace, así:
Este es el enlace
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 clases para fines 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 los ID cuando necesitan que el atributo actúe no solo como un enlace para CSS sino también como un enlace en la página.