Clases e IDs Axuda a ampliar o teu CSS
A construción de sitios web na actualidade require unha comprensión profunda do CSS (Cascading Style Sheets). Estas son as instrucións que vostede dá a un sitio web para determinar como se deseñará na xanela do navegador. Vostede aplica unha serie de "estilos" ao seu documento HTML que creará o aspecto da súa páxina web.
Hai moitas formas de aplicar estes estilos a través dun documento, pero a miúdo quere usar un estilo só en algúns dos elementos dun documento, pero non todas as instancias deste elemento.
Tamén pode querer crear un estilo que pode aplicar a varios elementos dun documento, sen ter que repetir a regra de estilo para cada instancia individual. Para acadar estes estilos desexados, usarás os atributos de clase e ID. Estes atributos son atributos globais que se poden aplicar a case todas as etiquetas HTML . Isto significa que se está estilizando divisións, parágrafos, ligazóns, listas ou calquera outra parte de HTML no documento, pode recorrer a atributos de clase e de identificación a axúdache a realizar esta tarefa!
Selección de clase
O selector de clase permítelle establecer varios estilos para o mesmo elemento ou etiqueta nun documento. Por exemplo, pode querer ter certas seccións do seu texto chamadas de cor diferente do resto do texto do documento. Estas seccións destacadas poden ser unha "alerta" que estás a configurar na páxina. Pode asignar os seus parágrafos a clases como esta:
p {cor: # 0000ff; }
p.alert {color: # ff0000; }
Estes estilos establecerían a cor de todos os parágrafos en azul (# 0000ff), pero calquera parágrafo con un atributo de clase de "alerta" sería, polo estilo, en vermello (# ff0000). Isto ocorre porque o atributo class ten unha especificidade máis alta que a primeira regra CSS, que só usa un selector de etiqueta.
Ao traballar con CSS, unha regra máis específica substituirá a unha menos específica. Así, neste exemplo, a regra máis xeral establece a cor de todos os parágrafos, pero a segunda, a regra máis específica que anula esa configuración só nalgúns parágrafos.
Velaquí como isto podería ser usado nalgún marco HTML:
Este parágrafo mostraríase en azul, que é o predeterminado para a páxina.
Este parágrafo tamén estaría en azul.
E este parágrafo sería amosado en vermello xa que o atributo da clase sobrescribiría a cor azul estándar do deseño do selector de elemento.
Nese exemplo, o estilo de "p.alert" só se aplicaría aos elementos de parágrafo que usan esa clase de "alerta". Se quería usar esa clase en varios elementos HTML, simplemente eliminaría o elemento HTML desde o inicio da páxina. (por favor asegúrese de deixar o período (.) no lugar), así:
.alert {background-color: # ff0000;}
Esta clase xa está dispoñible para calquera elemento que o precise. Calquera fragmento do teu HTML que ten un valor de atributo de clase de "alerta" agora obterá este estilo. No HTML seguinte, temos un parágrafo e un nivel de título 2 que usan a clase "alerta". Ambos terían unha cor de fondo de vermello baseado no CSS que acabamos de mostrar.
Este parágrafo estaría escrito en vermello.
E este h2 tamén sería vermello.
Nos sitios web de hoxe, os atributos de clase adoitan empregarse na maioría dos elementos porque son máis fáciles de traballar desde unha perspectiva de especificidade que as IDs son. Vai atopar a maioría das páxinas HTML actuais para ser cuberto con atributos de clase, algúns dos cales son repetidos varias veces nun documento e outros que só poden aparecer unha vez.
Selectores de ID
O selector de ID permítelle dar un nome a un estilo específico sen asocialo cunha etiqueta ou con outro elemento HTML . Digamos que tiña unha división no seu marcador HTML que contén información sobre un evento.
Podería darlle a esta división un atributo de ID de "evento" e, se quixese esbozar esa división cun bordo negro ancho de 1 píxel, escribe un código ID deste xeito:
#event {border: 1px sólido # 000; }
O desafío cos selectores de ID é que non se poden repetir nun documento HTML. Deben ser únicos (pode usar o mesmo ID en varias páxinas do seu sitio, pero só unha vez en cada documento HTML). Entón, se tiña 3 eventos que necesitaban este bordo, terían que darlles os atributos ID de "event1", "event2" e "event3" e o estilo de cada un deles. Sería, polo tanto, moito máis doado usar o atributo de clase anteriormente mencionado de "evento" e darlle estilo a unha soa vez.
Outro desafío cos atributos de ID é que teñen unha especificidade máis alta que os atributos de clase. Isto significa que se precisa ter CSS que anula un estilo previamente establecido, pode ser difícil facelo se confiaba demasiado nos ID. É por iso que moitos desenvolvedores web afastáronse do uso de IDs no seu marcado, mesmo se só pretenden usar ese valor unha vez e que se converteron aos atributos de clase menos específicos para case todos os estilos.
A única área onde os atributos de ID entran en xogo é cando quere crear unha páxina que teña enlaces na páxina. Por exemplo, se ten un sitio web de estilo parallax que contén todo o contido nunha única páxina con ligazóns que "saltan" a varias partes desa páxina. Isto faise usando atributos de ID e ligazóns de texto que usan estas ligazóns de ancoraxe.
Simplemente engadiría o valor dese atributo, precedido polo símbolo #, ao atributo href da ligazón, así:
Esta é a ligazón
Ao facer clic ou tocar, esta ligazón saltará á parte da páxina que ten este atributo ID. Se ningún elemento da páxina usou este valor de ID, a ligazón non faría nada.
Lembre, se desexa crear ligazón na páxina nun sitio, será necesario o uso de atributos de ID, pero tamén pode recorrer a clases para fins de estilo CSS en xeral. Así é como etiquetado páxinas hoxe: usei selectores de clase tanto como sexa posible e só volteo a IDs cando necesito que o atributo actúe non só como gancho para CSS senón tamén como unha ligazón na páxina.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 09/08/17