Det siger sig selv, webudvikling er enorm. En stor del af det skyldes, at næsten alle er på Internettet. Der er dog en mangel på udviklere i området, og det er derfor, webudviklingsplanen er så let tilgængelig og også gratis. Med det i tankerne viser vi dig en lille smule af, hvad HTML og CSS handler om. Mere specifikt vil vi vise dig, hvordan "klasser" fungerer.
Vi starter ikke dig fra starten, da der allerede er masser af gratis læseplaner derude. I stedet vil vi specifikt vise dig, hvordan klasser fungerer, da det er en nødvendig komponent til at style dit websted. Vi troede også, at det måske var værd at dække, før vi udsender vores kig på Twitter's Bootstrap API, da klasser også er en påkrævet komponent.
Som en ansvarsfraskrivelse, hvis du er helt ny med HTML og CSS, er dette sandsynligvis ikke en god start for dig. Hvis du er bekendt med det, skal det dog ikke være for svært at afhente. Men hvis du leder efter en komplet tutorial til begyndere, er der masser af gode muligheder online. For at nævne nogle få er der FreeCodeCamp, Odin-projektet, CodeAcademy, Code School, Team Treehouse, Udacity og så mange flere. Hvis du vælger at begynde at grave i en af dem, vil jeg varmt anbefale at holde sig til en (som f.eks. Free Code Camp) og afslutte den, inden du starter en anden, da en masse af det "basale" indhold kan være ret gentagne.
Med det ude af vejen, lad os grave i hvad klasser handler om.
Sådan fungerer klasser
Klasser er ekstremt nyttige. De tager gentagelsesevnen ud af styling HTML. Uden klasser ville du style hvert element i din markering individuelt. Og hvad hvis du havde to af de samme elementer, men ville style hver af dem anderledes? Det ville være et komplet rod. Derfor har vi klasser. Klasser tilføjer en vis organisationsstruktur din HTML, så du kan holde din kode relativt ren. Ikke kun det, men klasser kan bruges mere end én gang. Med andre ord behøver du aldrig at oprette de samme stylingsregler to gange.
Her er, hvordan klasser ser ud i vores
tag:
Som du kan se, under vores kropskode, har vi to
elementer med forskellige klasser. Den førstetag har klassen “head1”, mens det andet tag har klassen “head2.” Så i vores CSS, i stedet for at anvende styling til bareelement, kan vi anvende styling til disse individuelle klasser. Hvorfor ønsker vi at gøre det?
element, kan vi anvende styling til disse individuelle klasser. Hvorfor ønsker vi at gøre det?
Den primære årsag er, at du ikke ønsker alt dit
elementer, der skal have den samme styling. Det ville skabe en masse hovedpine, når man opretter et websted, og ud over det ser websteder ikke særlig godt ud. Klasser tillader os at anvende styling på netop den ene instans af tagget, ikke alletags på tværs af dokumentet. Så hvordan skriver du en klasse i HTML? Sådan her:
Noget indhold
Du kan tilføje egenskaben "klasse" til næsten ethvert HTML-element.
Store! Så vi har klasser, men i deres nuværende tilstand gør de faktisk ikke noget. Det er fordi vi endnu ikke har tilføjet nogen stylingsregler til klassen. For at gøre det, skal vi oprette et separat .css-dokument. Jeg vil bare kalde det main.css. I dette dokument vil vi style en klasse som denne:
For at vælge en klasse, vi vil style, gør vi dette:
.head1 {farve: rød; tekstjustering: center; }
Inden i de krøllede seler er alle de "regler" (eller styling), vi anvender til den klasse. Der er masser af forskellige regler, som du kan sætte i klassen. I mit tilfælde ændrede jeg farven på teksten til rød ved hjælp af “farve” -reglen, og jeg centrerede teksten ved hjælp af “text-align” -reglen. Du kan finde en komplet liste over CSS-regler såvel som deres dokumentation fra Mozilla's Developer Network.
Nu bruges vores styling stadig ikke på klasserne i vores HTML-dokument, og det er fordi vi ikke lige har knyttet de to filer sammen endnu. Gå tilbage til din HTML-fil og i
tag, skal du linke din CSS-fil ved at gøre dette:
Dit HTML-dokument skal se sådan ud:
Og dit testprojekt skal se sådan ud på Internettet:
For en mere detaljeret video, der går gennem disse trin, se venligst nedenfor.
video
Konklusion
Og det er alt, hvad der er til klasser! De er virkelig enkle at forstå. Naturligvis på store og populære websteder, du besøger, er reglerne i klasserne meget mere komplicerede end hvad vi dækkede, men i deres mest basale form er det sådan, de fungerer.
Hvis du har spørgsmål eller har haft problemer med at følge længe, skal du sørge for at give os besked i kommentarerne nedenfor eller over i PCMech-fora! Eller, hvis du vil være interesseret i en komplet HTML / CSS begyndervejledning på PCMech, så sørg for at fortælle os det også!
