Johdatus html- ja css-luokkiin

Sanomattakin on selvää, että web-kehitys on valtava. Suuri osa siitä johtuu siitä, että melkein kaikki ovat Webissä. Alan kehittäjistä on kuitenkin pulaa, ja siksi web-kehitysohjelma on niin helposti saatavilla ja myös ilmainen. Tätä silmällä pitäen me näytämme sinulle vähän mitä HTML ja CSS tarkoittavat. Tarkemmin sanottuna aiomme näyttää sinulle kuinka "luokat" toimivat.

Emme aloita sinua alusta alkaen, koska siellä on jo tonnia ilmaisia ​​opetussuunnitelmia. Sen sijaan aiomme erityisesti näyttää sinulle, kuinka luokat toimivat, koska se on välttämätön osa verkkosivustosi muotoilua. Ajattelimme myös, että se kannattaa kattaa, ennen kuin lähetämme katsauksen Twitterin Bootstrap-sovellusliittymään, koska luokat ovat myös siinä vaadittava osa.

Vastuuvapauslauseke, jos olet täysin uusi HTML ja CSS, tämä ei todennäköisesti ole hyvä alku sinulle. Jos olet perehtynyt siihen, sen ei pitäisi olla liian vaikea poimia. Mutta jos etsit täydellistä aloittelijan opastusta, verkossa on paljon upeita vaihtoehtoja. Muutamia mainitaksemme ovat FreeCodeCamp, Odin-projekti, CodeAcademy, Code School, Team Treehouse, Udacity ja niin edelleen. Jos valitset aloittaaksesi kaivamisen johonkin näistä, suosittelen kiinni pitämistä yhdellä (kuten Free Code Camp) ja viimeistele se ennen toisen aloittamista, koska suuri osa "perussisällöstä" voi olla melko toistuvaa.

Ottakaa se pois tieltä, pohditaan mitä luokissa on kyse.

Kuinka luokat toimivat

Tunnit ovat erittäin hyödyllisiä. He poistavat toistettavuuden HTML-muotoilusta. Ilman luokkia, sinun tulisi muotoilla jokainen merkinnän elementti erikseen. Entä jos sinulla olisi kaksi samaa elementtiä, mutta haluat tyyliä molemmat niistä eri tavalla? Se olisi täydellinen sotku. Siksi meillä on luokkia. Luokat lisäävät HTML-koodiin organisaatiorakenteen, jonka avulla voit pitää koodisi suhteellisen puhtaana. Ei vain sitä, mutta luokkia voidaan käyttää useammin kuin kerran. Toisin sanoen sinun ei koskaan tarvitse luoda samoja muotoilusääntöjä kahdesti.

Tässä on mitä luokat näyttävät meidän luokassamme tag:

Kuten huomaat, vartalomerkillämme on kaksi

eri luokkien elementit. Ensimmäinen

tunnisteessa on luokka “head1”, kun taas toisessa tunnisteessa on luokka “head2”. Joten CSS: ssämme sen sijaan, että käyttäisimme muotoilua vain

elementtiä, voimme soveltaa muotoilua näihin yksittäisiin luokkiin. Miksi haluaisimme tehdä niin?

Ensisijainen syy on, että et halua kaikkia omia

elementteillä on sama tyyli. Se aiheuttaisi paljon päänsärkyä verkkosivustoa luotaessa, ja lisäksi sivustot eivät näytä kovin hyvältä. Luokat antavat meille mahdollisuuden käyttää muotoilua vain yhteen tunnisteen esiintymiseen, ei kaikkiin

tunnisteet koko asiakirjassa. Joten miten kirjoitat luokan HTML-muodossa? Kuten tämä:

Jotkut sisältö

Voit lisätä luokan ominaisuuden melkein mihin tahansa HTML-elementtiin.

Loistava! Joten, meillä on luokkia, mutta nykyisessä tilassaan he eivät todellakaan tee mitään. Tämä johtuu siitä, että emme ole vielä lisänneet luokan muotoilusääntöjä. Tätä varten meidän on luotava erillinen .css-dokumentti. Aion kutsua sitä vain main.css. Tuossa asiakirjassa tyylissimme luokan näin:

Valitsemalla luokan, jonka haluamme tyyliä, teemme tämän:

.head1 {väri: punainen; tekstin kohdistaminen: keskusta; }

Kihara-aukkojen sisällä on kaikki “säännöt” (tai muotoilut), joita sovellamme tähän luokkaan. Luokkaan voi laittaa paljon erilaisia ​​sääntöjä. Minun tapauksessani muutin tekstin värin punaiseksi käyttämällä “väri” -sääntöä ja keskitin tekstin ”teksti-kohdista” -sääntöä käyttämällä. Löydät täydellisen luettelon CSS-säännöistä ja niiden dokumentaatiosta Mozillan kehittäjäverkosta.

Nyt muotoilumme ei vieläkään ole sovellettu HTML-dokumentimme luokkiin, ja johtuu siitä, että emme ole vielä linkittäneet kahta tiedostoa toisiinsa. Palaa takaisin HTML-tiedostoosi ja tag, haluat linkittää CSS-tiedostosi tekemällä tämän:

HTML-asiakirjan tulisi näyttää tältä:

Ja testiprojektimme pitäisi näyttää tältä Webissä:

Katso tarkempi video, joka käy läpi nämä vaiheet, katso alla.

Video

johtopäätös

Ja siinä kaikki on luokissa! He ovat todella helppo ymmärtää. On selvää, että käymissillä isoilla ja suosituilla verkkosivustoilla luokkien säännöt ovat paljon monimutkaisempia kuin mitä käsittelemme, mutta niiden perusmuodossa, eli miten ne toimivat.

Jos sinulla on kysyttävää tai sinulla on vaikeuksia seurata kauan, muista ilmoittaa meille alla tai yli olevissa kommenteissa PCMech-foorumeilla! Tai jos olet kiinnostunut täydellisestä HTML / CSS-aloitusoppaasta PCMechissä, ilmoita meille myös siitä!