Una introducció a les classes en html i css

Val a dir, el desenvolupament web és enorme. Una gran part d’això es deu al fet que gairebé tots estan al web. Tanmateix, hi ha una escassetat de desenvolupadors en el camp, i és per això que el currículum de desenvolupament web està tan fàcilment disponible, i també gratuït. Tenint en compte això, us mostrarem una mica de què es tracta HTML i CSS. Més concretament, us mostrarem com funcionen les "classes".

No el comencem des del principi, ja que hi ha tones de currículum gratuït. En lloc d'això, us mostrem específicament com funcionen les classes, ja que és un component necessari per dissenyar el vostre lloc web. També vam pensar que potser val la pena cobrir-ho abans de publicar la nostra revisió a l'API Bootstrap de Twitter, ja que les classes també són un component obligatori.

Com a exempció de responsabilitat, si ets completament nou a HTML i CSS, probablement no sigui un bon començament per a vosaltres. Si esteu familiaritzats amb això, no hauria de ser massa difícil recollir-lo. Però, si busqueu un tutorial complet per a principiants, hi ha moltes opcions fantàstiques en línia. Per citar-ne alguns, hi ha FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity, entre molts altres. Si decidiu començar a excavar-vos en un, us recomanaria encomanar-vos amb un (com ara Free Code Camp) i acabar-lo abans de començar-ne un altre, ja que molts continguts “bàsics” poden ser força repetitius.

Amb això, aprofundim en què es tracta de les classes.

Com funcionen les classes

Les classes són extremadament útils. Treuen la repetitivitat de l'estil HTML. Sense classes, dissenyaria cada element de la vostra marca individualment. I si passessis dos dels mateixos elements, però volguessis dissenyar-los de manera diferent? Seria un desastre complet. Per això, tenim classes. Les classes afegeixen una estructura d’organització del vostre HTML, el que us permet mantenir el vostre codi relativament net. No només això, sinó que les classes es poden utilitzar més d'una vegada. En altres paraules, mai no haureu de crear les mateixes regles d’estil dues vegades.

A continuació, es mostren les classes a la nostra etiqueta:

Com veieu, sota la nostra etiqueta corporal, en tenim dos

elements amb diferents classes. El primer

l'etiqueta té la classe "head1" mentre que la segona etiqueta té la classe "head2". Així, en el nostre CSS, en lloc d'aplicar l'estil a només

element, podem aplicar l’estil a aquelles classes individuals. Per què voldríem fer això?

El principal motiu és que no les voleu totes

elements per tenir el mateix estil. Crearia molts mals de cap quan creeu un lloc web i, a més d'això, els llocs web no es veuen gaire bé. Les classes ens permeten aplicar l’estil a una sola instància de l’etiqueta, no a totes

etiquetes al document. Aleshores, com s’escriu una classe en HTML? Com això:

Algun contingut

Podeu afegir la propietat "classe" a gairebé qualsevol element HTML.

Genial! Per tant, tenim classes, però en el seu estat actual, en realitat no estan fent res. Això és perquè encara no hem afegit cap regla d’estil a la classe. Per fer-ho, haurem de crear un document .css separat. Només vaig a anomenar-lo main.css. En aquest document, dissenyaríem una classe com aquesta:

Per seleccionar una classe que volem dissenyar, fem això:

.head1 {color: vermell; alineació de text: centre; }

Dins de les clapes, hi ha totes les "regles" (o estil) que apliquem a aquesta classe. Hi ha moltes regles diferents que podeu posar dins d'aquesta classe. En el meu cas, vaig canviar el color del text a vermell mitjançant la regla "color" i vaig centrar el text mitjançant la regla "alinear text". Podeu trobar una llista completa de les normes CSS i la documentació de la xarxa de desenvolupadors de Mozilla.

Ara, el nostre estil encara no s'aplica a les classes del nostre document HTML, i és perquè encara no hem enllaçat els dos fitxers junts. Torneu al fitxer HTML i al document etiqueta, voldreu enllaçar el fitxer CSS fent això:

El document HTML hauria de ser així:

I el nostre projecte de prova hauria de ser així a la xarxa:

Si voleu un vídeo més detallat que es recorre a continuació, vegeu més avall.

Vídeo

Conclusió

I tot el que hi ha per fer classes! Són realment senzills d’entendre. Bviament, als llocs web grans i populars que visiteu, les regles de les classes són molt més complicades que les que vam cobrir, però en la seva forma més bàsica, és com funcionen.

Si teniu cap dubte o teniu problemes per seguir-ho, assegureu-vos-ho que ens ho comuniqueu als comentaris següents o posteriors als fòrums de PCMech! O si us interessaria una guia completa per a principiants en HTML / CSS a PCMech, assegureu-vos que també ens ho informem!