Det sier seg selv, webutvikling er enorm. En stor del av det skyldes at nesten alle er på nettet. Imidlertid er det mangel på utviklere i feltet, og det er derfor læreplanen for nettutvikling er så lett tilgjengelig, og gratis også. Med det i tankene, skal vi vise deg litt av hva HTML og CSS handler om. Mer spesifikt, skal vi vise deg hvordan “klasser” fungerer.
Vi starter ikke deg fra begynnelsen, for det er mange gratis læreplaner der ute allerede. I stedet skal vi spesifikt vise deg hvordan klasser fungerer, ettersom det er en nødvendig komponent for å style nettstedet ditt. Vi tenkte også at det kunne være verdt å dekke før vi legger ut blikket på Twitter Bootstrap API, ettersom klasser også er en nødvendig komponent.
Som ansvarsfraskrivelse, hvis du er helt ny på HTML og CSS, er dette sannsynligvis ikke en god start for deg. Hvis du er kjent med det, bør det ikke være for vanskelig å hente det. Men hvis du leter etter en komplett opplæring for nybegynnere, er det mange gode alternativer på nettet. For å nevne noen, er det FreeCodeCamp, Odin-prosjektet, CodeAcademy, Code School, Team Treehouse, Udacity, og så mange flere. Hvis du velger å begynne å grave i en av disse, vil jeg på det sterkeste anbefale å holde seg til en (for eksempel Free Code Camp) og fullføre den før du starter en annen, siden mye av det "grunnleggende" innholdet kan være ganske repeterende.
Med det ute av veien, la oss grave i hva klasser handler om.
Hvordan klasser fungerer
Klassene er ekstremt nyttige. De tar gjentagelsen ut av styling av HTML. Uten kurs, ville du styling hvert element i markeringen din individuelt. Og hva om du hadde to av de samme elementene, men ville style hver av dem på en annen måte? Det ville være et fullstendig rot. Derfor har vi klasser. Klasser legger til en viss organisasjonsstruktur din HTML, slik at du kan holde koden relativt ren. Ikke bare det, men klasser kan brukes mer enn en gang. Med andre ord, du trenger aldri å lage de samme stylingsreglene to ganger.
Slik ser klassene ut i vår
stikkord:
Som du kan se, under kroppskoden, har vi to
elementer med forskjellige klasser. Den førstetaggen har klassen “head1” mens den andre taggen har klassen “head2.” Så i CSS vår, i stedet for å bruke styling på bareelement, kan vi bruke styling på de individuelle klassene. Hvorfor vil vi gjøre det?
element, kan vi bruke styling på de individuelle klassene. Hvorfor vil vi gjøre det?
Den viktigste grunnen er at du ikke vil ha alt
elementer for å ha samme styling. Det ville skapt mye hodepine når du lager et nettsted, og i tillegg til at nettsteder ikke ville se veldig bra ut. Klasser lar oss bruke styling på bare den ene forekomsten av taggen, ikke allekoder på tvers av dokumentet. Så hvordan skriver du en klasse i HTML? Som dette:
Noe innhold
Du kan legge til "klasse" -egenskapen til nesten alle HTML-elementer.
Flott! Så vi har klasser, men i deres nåværende tilstand, gjør de faktisk ikke noe. Det er fordi vi ikke har lagt noen stylingsregler til klassen ennå. For å gjøre det, må vi lage et eget .css-dokument. Jeg skal bare kalle det main.css. I det dokumentet vil vi style en klasse som dette:
For å velge en klasse vi vil style, gjør vi dette:
.head1 {farge: rød; tekstjustering: sentrum; }
Innenfor krøllete seler er alle "regler" (eller styling) vi bruker i den klassen. Det er mange forskjellige regler du kan sette i den klassen. I mitt tilfelle endret jeg fargen på teksten til rød ved å bruke “farge” -regelen, og jeg sentrerte teksten ved å bruke “text-align” -regelen. Du kan finne en fullstendig liste over CSS-regler så vel som dokumentasjonen deres fra Mozillas Developer Network.
Nå brukes ikke stylingen på klassene i HTML-dokumentet vårt, og det er fordi vi ikke har koblet de to filene sammen ennå. Gå tilbake til HTML-filen din og i
tag, vil du koble CSS-filen din ved å gjøre dette:
HTML-dokumentet ditt skal se slik ut:
Og testprosjektet ditt skal se slik ut på nettet:
For en mer detaljert video som går gjennom disse trinnene, vennligst se nedenfor.
video
Konklusjon
Og det er alt det er for klasser! De er veldig enkle å forstå. Det er klart, på store og populære nettsteder du besøker, er reglene i klassene mye mer kompliserte enn hva vi dekket, men i deres mest grunnleggende form, er det slik de fungerer.
Hvis du har spørsmål eller har hatt problemer med å følge lenge, husk å gi oss beskjed i kommentarfeltet nedenfor eller over i PCMech Forums! Eller, hvis du vil være interessert i en komplett HTML / CSS nybegynnerveiledning på PCMech, må du huske å gi oss beskjed om det også!
