En introduktion till klasser i html och css

Det säger sig självt, webbutveckling är enorm. En stor del av detta beror på att nästan alla finns på webben. Men det finns en brist på utvecklare på området, och det är därför webbutvecklingsplanen är så lättillgänglig och gratis också. Med det i åtanke kommer vi att visa dig lite av vad HTML och CSS handlar om. Mer specifikt kommer vi att visa dig hur "klasser" fungerar.

Vi börjar inte dig från början, eftersom det redan finns massor av gratis läroplaner. Istället ska vi specifikt visa dig hur klasser fungerar, eftersom det är en nödvändig komponent för att utforma din webbplats. Vi trodde också att det kan vara värt att täcka innan vi lägger upp vår titt på Twitter Bootstrap API, eftersom klasser också är en nödvändig komponent i det.

Som friskrivningsklausul är detta förmodligen inte en bra start för dig om du är helt ny i HTML och CSS. Om du är bekant med det borde det dock inte vara för svårt att plocka upp. Men om du letar efter en fullständig tutorial för nybörjare finns det många fantastiska alternativ online. För att nämna några är det FreeCodeCamp, Odin-projektet, CodeAcademy, Code School, Team Treehouse, Udacity och så många fler. Om du väljer att börja gräva i ett av dessa, skulle jag starkt rekommendera att hålla sig till ett (som Free Code Camp) och avsluta det innan du startar ett annat, eftersom mycket av det "grundläggande" innehållet kan vara ganska repetitivt.

Med det ur vägen, låt oss gräva in vad klasser handlar om.

Hur klasser fungerar

Klasser är oerhört användbara. De tar repetitiviteten ur styling-HTML. Utan klasser skulle du utforma varje element i din markering individuellt. Och vad händer om du hade två av samma element, men ville utforma var och en av dem annorlunda? Det skulle vara en fullständig röra. Det är därför vi har klasser. Klasser lägger till någon organisationsstruktur din HTML, så att du kan hålla din kod relativt ren. Inte bara det, utan klasser kan användas mer än en gång. Med andra ord kommer du aldrig att behöva skapa samma stylingregler två gånger.

Så här ser klasser ut inom vår märka:

Som ni kan se har vi två under vår body-tagg

element med olika klasser. Den första

taggen har klassen "head1" medan den andra taggen har klassen "head2." Så i vår CSS istället för att tillämpa styling på bara

element, kan vi tillämpa styling på de enskilda klasserna. Varför skulle vi vilja göra det?

Det främsta skälet är att du inte vill ha alla dina

element för att ha samma styling. Det skulle skapa mycket huvudvärk när du skapar en webbplats, och utöver det skulle webbplatser inte se så bra ut. Klasser tillåter oss att tillämpa styling på bara den ena instansen av taggen, inte alla

taggar över hela dokumentet. Så hur skriver du en klass i HTML? Så här:

Lite innehåll

Du kan lägga till "klass" -egenskapen till nästan alla HTML-element.

Bra! Så vi har klasser, men i deras nuvarande tillstånd gör de egentligen ingenting. Det beror på att vi inte har lagt till några stylingregler till klassen ännu. För att göra det måste vi skapa ett separat .css-dokument. Jag ska bara kalla det main.css. I det dokumentet skulle vi utforma en klass som denna:

För att välja en klass vi vill utforma gör vi det här:

.head1 {färg: röd; text-align: center; }

Inom de lockiga hängslen finns alla "regler" (eller styling) som vi tillämpar för den klassen. Det finns många olika regler du kan sätta i den klassen. I mitt fall ändrade jag färgen på texten till röd med "färg" -regeln och jag centrerade texten genom att använda "text-align" -regeln. Du kan hitta en fullständig lista över CSS-regler samt deras dokumentation från Mozillas utvecklarnätverk.

Nu är vår styling fortfarande inte tillämplig på klasserna i vårt HTML-dokument, och det beror på att vi inte har länkat de två filerna just nu. Gå tillbaka till din HTML-fil och i tagg, du vill länka din CSS-fil genom att göra detta:

Ditt HTML-dokument ska se ut så här:

Och ditt testprojekt ska se ut så här på webben:

För en mer detaljerad video som går igenom dessa steg, se nedan.

Video

Slutsats

Och det är allt som finns för klasserna! De är verkligen enkla att förstå. Uppenbarligen på stora och populära webbplatser som du besöker är reglerna inom klasserna mycket mer komplicerade än vad vi täckte, men i deras mest grundläggande form är det så att de fungerar.

Om du har några frågor eller har haft problem med länge, var noga med att meddela oss i kommentarerna nedan eller över i PCMech-forumet! Eller om du skulle vara intresserad av en komplett HTML / CSS-nybörjarguide på PCMech, var noga med att låta oss veta det också!