Uvod v razrede html in css

Samoumevno je, da je razvoj spleta ogromen. Velik del tega je, ker so skoraj vsi v spletu. Vendar razvijalcev na tem področju primanjkuje, zato je učni načrt spletnega razvoja tako na voljo in brezplačen tudi. S tem v mislih vam bomo pokazali malo o tem, kaj sploh pomeni HTML in CSS. Natančneje, pokazali vam bomo, kako delujejo "razredi".

Ne začenjamo te od začetka, saj je na voljo že na voljo več brezplačnih učnih načrtov. Namesto tega vam bomo posebej pokazali, kako deluje pouk, saj je to potrebna sestavina za oblikovanje vašega spletnega mesta. Prav tako smo mislili, da bi bilo morda vredno zajeti, preden objavimo Twitterjev Bootstrap API, saj so tudi tečaji obvezen sestavni del.

Če ste popolnoma novi v HTML in CSS, verjetno to ni dober začetek za vas. Če ga poznate, pa ga ne bi smelo biti preveč težko. Če pa iščete popolno vadnico za začetnike, je na spletu veliko odličnih možnosti. Če jih naštejemo samo, so tu še FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity in še mnogo drugih. Če se odločite za začetek kopanja v enem od teh, toplo priporočam, da se lepite z enim (kot je Free Code Camp) in ga dokončate, preden začnete z drugim, saj se lahko veliko "osnovne" vsebine precej ponavlja.

S tem ne bomo pozabili, o katerih razredih gre.

Kako delujejo razredi

Razredi so izredno uporabni. Ponovljivost jemljejo iz HTML-ja za oblikovanje. Brez razredov bi vsak element v svojem označevanju oblikovali posebej. In kaj, če bi imeli dva ista elementa, vendar bi želeli vsakega od njih slog drugače? To bi bila popolna zmešnjava. Zato imamo pouk. Razredi dodajo neko organizacijsko strukturo HTML-ja, kar vam omogoča, da ohranite svojo kodo relativno čisto. Ne samo to, ampak razrede je mogoče uporabljati večkrat. Z drugimi besedami, nikoli vam ne bo treba dvakrat ustvariti istih pravil za oblikovanje.

Tukaj je, kako izgledajo razredi znotraj našega oznaka:

Kot vidite, imamo pod oznako telesa dva

elementi z različnimi razredi. Prvi

tag ima razred "head1", medtem ko ima druga oznaka razred "head2". Torej, v našem CSS-ju namesto da bi styling uporabili samo za

element, lahko uporabimo stajlinge za posamezne razrede. Zakaj bi to radi storili?

Primarni razlog je, da ne želite vsega svojega

elementi, da imajo isti slog. Pri ustvarjanju spletnega mesta bi ustvarilo veliko glavobolov, poleg tega pa spletna mesta ne bi izgledala prav veliko. Razredi nam omogočajo, da styling uporabimo samo za en primerek oznake, ne za vse

oznake čez dokument. Kako torej napišete razred v HTML? Všečkaj to:

Nekaj ​​vsebine

Lastnost »class« lahko dodate v skoraj kateri koli element HTML.

Super! Torej, imamo pouk, toda v svojem trenutnem stanju pravzaprav ne počnejo ničesar. To je zato, ker še nismo dodali nobenih pravil za oblikovanje v razred. Da bi to naredili, bomo morali ustvariti ločen dokument .css. Samo to bom poklical main.css. V tem dokumentu bi oblikovali takšen razred:

Če želite izbrati razred, ki ga želimo oblikovati, naredimo to:

.head1 {barva: rdeča; poravnava besedila: sredina; }

Znotraj curly naramnic so vsa "pravila" (ali stajlingi), ki jih uporabljamo za ta razred. V tem razredu je veliko različnih pravil. V mojem primeru sem barvo besedila spremenil v rdečo s pravilom "color" in besedilo osredotočil s pravilom "poravnava besedila". Celoten seznam pravil CSS in njihovo dokumentacijo najdete v razvijalski mreži Mozilla.

Zdaj naš slog še vedno ne velja za razrede v našem dokumentu HTML, in to zato, ker dve datoteki še nismo povezali skupaj. Vrnite se do datoteke HTML in v oznako, boste želeli povezati datoteko CSS tako:

Vaš dokument v HTML mora izgledati tako:

In naš testni projekt bi moral biti videti tako v spletu:

Podrobnejši videoposnetek, ki poteka skozi te korake, si oglejte spodaj.

Video

Zaključek

In to je vse, kar je na predavanjih! Res jih je enostavno razumeti. Na velikih in priljubljenih spletnih straneh, ki jih obiščete, so očitno pravila znotraj razredov veliko bolj zapletena od tistega, kar smo pokrivali, vendar v njihovi najbolj osnovni obliki, to je, kako delujejo.

Če imate kakršna koli vprašanja ali imate težave dolgo časa, nam to sporočite v komentarjih spodaj ali več na forumih PCMech! Če pa vas bo zanimal celoten vodnik za začetnike HTML / CSS v PCMech, nam to sporočite!