Je samozrejmé, že vývoj webových aplikácií je obrovský. Veľká časť toho je preto, že takmer každý je na webe. V tejto oblasti je však nedostatok vývojárov, a preto sú kurikulum pre vývoj webových aplikácií tak ľahko dostupné a tiež bezplatné. S ohľadom na to vám ukážeme trochu toho, o čom sú HTML a CSS. Konkrétnejšie vám ukážeme, ako fungujú „triedy“.
Nezačíname vás od začiatku, pretože už existuje veľa bezplatných učebných osnov. Namiesto toho vám konkrétne ukážeme, ako triedy fungujú, pretože je to nevyhnutná súčasť úpravy vášho webu. Tiež sme si mysleli, že by sa malo oplatiť pokryť pred uverejnením nášho prehľadu rozhrania API Bootstrap na Twitteri, pretože triedy sú v tom tiež nevyhnutnou súčasťou.
Ako vylúčenie zodpovednosti, ak ste v oblasti HTML a CSS úplne nový, pravdepodobne to pre vás nie je dobrý začiatok. Ak ste s tým oboznámení, nemalo by byť príliš ťažké ho vyzdvihnúť. Ak však hľadáte kompletný kurz pre začiatočníkov, existuje veľa skvelých možností online. Aby sme vymenovali aspoň niektoré, existuje FreeCodeCamp, projekt Odin, CodeAcademy, kódová škola, Team Treehouse, Udacity a mnoho ďalších. Ak sa rozhodnete začať kopať do jedného z nich, dôrazne odporúčam držať sa jedného (napríklad Free Code Camp) a dokončiť ho pred začatím ďalšieho, pretože veľa „základného“ obsahu môže byť dosť opakujúce sa.
S tým z cesty, poďme sa pustiť do toho, o čom všetky triedy sú.
Ako triedy fungujú
Triedy sú veľmi užitočné. Vyberajú opakovanie zo stylingu HTML. Bez tried by ste stylizovali každý prvok vo svojom značkovaní individuálne. A čo keby ste mali dva rovnaké prvky, ale chceli ste každý z nich zmeniť inak? Bol by to úplný chaos. Preto máme hodiny. Triedy pridávajú nejakú organizačnú štruktúru vášho HTML, čo vám umožňuje udržiavať váš kód relatívne čistý. Nielen to, ale triedy môžu byť použité viackrát. Inými slovami, nikdy nebudete musieť vytvárať rovnaké pravidlá stylingu dvakrát.
Takto vyzerajú triedy v našom
tag:
Ako vidíte, pod našou značkou tela máme dve
prvky s rôznymi triedami. Prvýznačka má triedu „head1“, zatiaľ čo druhá značka má triedu „head2“. Takže v našom CSS namiesto toho, aby sa štýl použil iba naprvok, môžeme aplikovať styling na tieto jednotlivé triedy. Prečo by sme to chceli urobiť?
prvok, môžeme aplikovať styling na tieto jednotlivé triedy. Prečo by sme to chceli urobiť?
Hlavným dôvodom je to, že nechcete všetky svoje
prvky, ktoré majú rovnaký štýl. Pri vytváraní webovej stránky by to vyvolalo veľa bolesti hlavy a okrem toho by webové stránky nevyzerali veľmi dobre. Triedy nám umožňujú aplikovať štýl iba na jednu inštanciu značky, nie na všetkyznačky v celom dokumente. Ako teda píšete triedu v HTML? Páči sa ti to:
Niektorý obsah
Vlastnosť „class“ môžete pridať takmer do ľubovoľného prvku HTML.
Skvelé! Máme triedy, ale v ich súčasnom stave vlastne nerobia nič. Je to preto, že sme do triedy nepridali žiadne pravidlá stylingu. Aby sme to mohli urobiť, musíme vytvoriť samostatný dokument .css. Budem to hovoriť main.css. V tomto dokumente by sme navrhli takúto triedu:
Pri výbere triedy, ktorú chceme štylizovať, robíme toto:
.head1 {farba: červená; zarovnanie textu: stred; }
V zložených zátvorkách sú všetky „pravidlá“ (alebo štýl), ktoré aplikujeme na túto triedu. Do tejto triedy môžete vložiť veľa rôznych pravidiel. V mojom prípade som zmenil farbu textu na červenú pomocou pravidla „farba“ a text som vycentroval na stred pomocou pravidla „zarovnanie textu“. Úplný zoznam pravidiel CSS a ich dokumentáciu nájdete v sieti vývojárov spoločnosti Mozilla.
Teraz sa náš štýl stále neuplatňuje na triedy v našom HTML dokumente, a to preto, že sme tieto dva súbory zatiaľ neprepojili. Vráťte sa do svojho súboru HTML a do súboru
značku, budete chcieť prepojiť svoj súbor CSS takto:
Váš dokument HTML by mal vyzerať takto:
Váš testovací projekt by mal na webe vyzerať takto:
Podrobnejšie video, ktoré prechádza týmito krokmi, nájdete nižšie.
video
záver
A to je všetko, čo sa týka hodín! Je to naozaj jednoduché pochopiť. Pravdepodobne na veľkých a populárnych webových stránkach, ktoré navštevujete, sú pravidlá v rámci tried omnoho zložitejšie ako to, čo sme si prečítali, ale v ich najzákladnejšej podobe tak fungujú.
Ak máte akékoľvek otázky alebo ste mali problémy s tým, že budete mať problémy, dajte nám vedieť v komentároch nižšie alebo znovu vo fórach PCMech! Alebo, ak by ste mali záujem o úplnú začiatočnú príručku HTML / CSS pre PCMech, dajte nám o tom vedieť!
