Ús de classes i identitats d'estil

Classes i identitats Ajuda Amplieu el vostre CSS

La creació de llocs web a la web actual requereix una comprensió profunda de CSS (Cascading Style Sheets). Aquestes són les instruccions que proporcioneu a un lloc web per determinar com es distribuirà a la finestra del navegador. Apliqui una sèrie de "estils" al vostre document HTML que crearà l'aparença de la vostra pàgina web.

Hi ha moltes maneres d'aplicar aquests estils a través d'un document, però sovint voleu utilitzar un estil només en alguns dels elements d'un document, però no totes les instàncies d'aquest element.

També podeu crear un estil que podeu aplicar a diversos elements d'un document, sense haver de repetir la regla d'estil per a cada instància individual. Per aconseguir aquests estils desitjats, utilitzarà els atributs HTML de classe i d'identificació. Aquests atributs són atributs globals que es poden aplicar a gairebé totes les etiquetes HTML . Això vol dir que si esteu dissenyant divisions, paràgrafs, enllaços, llistes o qualsevol altra part d'HTML del vostre document, podeu activar els atributs de classe i d'identitat a t'ajudaràs a dur a terme aquesta tasca!

Selectors de classes

El selector de classe us permet establir diversos estils al mateix element o etiqueta d'un document. Per exemple, és possible que vulgueu tenir determinades seccions del text que es diuen en un color diferent de la resta del text del document. Aquestes seccions ressaltades podrien ser una "alerta" que esteu configurant a la pàgina. Podeu assignar els vostres paràgrafs a classes com aquesta:

p {color: # 0000ff; }
p.alert {color: # ff0000; }

Aquests estils configurarien el color de tots els paràgrafs en blau (# 0000ff), però qualsevol paràgraf amb un atribut de classe de "alerta", en canvi, es dissenyaria en vermell (# ff0000). Això es deu al fet que l'atribut class té una especificitat més alta que la primera regla CSS, que només utilitza un selector d'etiquetes.

Quan es treballa amb CSS, una regla més específica substituirà una altra menys específica. Així, en aquest exemple, la regla més general estableix el color de tots els paràgrafs, però la segona, la regla més específica que invalida aquesta configuració només en alguns paràgrafs.

A continuació s'explica com es pot utilitzar en alguns marcadors HTML:

Aquest paràgraf es mostrarà en blau, que és el valor predeterminat de la pàgina.

Aquest paràgraf també estaria en blau.

I aquest paràgraf es mostrarà en vermell ja que l'atribut de classe sobreescriurà el color blau estàndard a partir de l'estil del selector d'elements.

En aquest exemple, l'estil de "p.alert" només s'aplicaria als elements del paràgraf que utilitzen aquesta classe "alert". Si voleu utilitzar aquesta classe en diversos elements HTML, simplement n'hi hauria d'eliminar l'element HTML des del principi (simplement assegureu-vos de deixar el període (.) en el lloc), així:

.alert {background-color: # ff0000;}

Aquesta classe ja està disponible per a qualsevol element que ho necessiti. Qualsevol element del vostre codi HTML que tingui un valor d'atribut de classe de "alerta" ara obtindrà aquest estil. A l'HTML següent, tenim un paràgraf i un nivell de capçalera 2 que utilitzen la classe "alerta". Tots dos tindrien un color de fons de color vermell basat en el CSS que acabem de mostrar.

Aquest paràgraf es redactarà en vermell.

I aquest h2 també seria de color vermell.

En els llocs web d'avui, els atributs de classe s'utilitzen sovint a la majoria dels elements perquè són més fàcils de treballar des d'una perspectiva d'especificitat que les identificacions són. Trobareu la majoria de les pàgines HTML actuals que s'han d'omplir amb atributs de classe, alguns dels quals es repeteixen diverses vegades en un document i altres que només poden aparèixer una vegada.

Selectors d'identificació

El selector d' identificació us permet donar un nom a un estil específic sense associar-lo a una etiqueta o a un altre element HTML . Suposem que teniu una divisió en el marcat HTML que conté informació sobre un esdeveniment.

Podríeu donar a aquesta divisió un atribut d'identificació de "esdeveniment" i, si volgués resumir aquesta divisió amb una vora negra d'1 píxel, escriviu un codi d'identificació com aquest:

#event {border: 1px solid # 000; }

El repte amb els selectors d'identificació és que no es poden repetir en un document HTML. Han de ser únics (podeu utilitzar la mateixa ID en diverses pàgines del vostre lloc, però només una vegada en cada document HTML individual). Per tant, si teniu 3 esdeveniments que necessitaven aquesta frontera, us caldria donar-los els atributs ID de "event1", "event2" i "event3" i d'estil a cadascun d'ells. Per tant, seria molt més fàcil utilitzar l'atribut de classe de "esdeveniment" abans esmentat i fer-ho tot alhora.

Un altre repte amb els atributs d'identificació és que tenen una especificitat més alta que els atributs de classe. Això vol dir que si necessiteu tenir CSS que invalideix un estil prèviament establert, pot ser difícil fer-ho si heu confiat massa en els identificadors. És per aquest motiu que molts desenvolupadors web han allunyat l'ús d'identificadors en el seu marcat, fins i tot si només tenen intenció d'utilitzar aquest valor una vegada, i s'han convertit en els atributs de classes menys específics per a gairebé tots els estils.

L'única àrea on els atributs d'identificació es posen en joc és quan voleu crear una pàgina que tingui enllaços d'ancoratge a la pàgina. Per exemple, si teniu un lloc web d'estil parallax que conté tot el contingut d'una sola pàgina amb enllaços que "salten" a diverses parts d'aquesta pàgina. Això es fa amb atributs d'identificació i enllaços de text que utilitzen aquests enllaços d'ancoratge.

Només cal afegir el valor d'aquest atribut, precedit pel símbol #, a l'atribut href de l'enllaç, com aquest:

Aquest és l'enllaç

Quan es fa clic o es toca, aquest enllaç saltarà a la part de la pàgina que té aquest atribut ID. Si cap element de la pàgina utilitza aquest valor d'identificació, el vincle no farà res.