Úvod do tříd v html a css

Je samozřejmé, že vývoj webových stránek je obrovský. Velká část toho je proto, že téměř každý je na webu. V této oblasti je však nedostatek vývojářů, a proto jsou kurikulum pro vývoj webových aplikací tak snadno dostupné a také zdarma. S ohledem na to vám ukážeme trochu toho, o čem jsou HTML a CSS. Konkrétně vám ukážeme, jak fungují „třídy“.

Nezačínáme od začátku, protože už tam jsou tuny volných učebních osnov. Místo toho vám konkrétně ukážeme, jak třídy fungují, protože je to nezbytná součást stylingu vašeho webu. Také jsme si mysleli, že by stálo za to pokrýt dříve, než zveřejníme svůj pohled na rozhraní Bootstrap API na Twitteru, protože třídy jsou také povinnou součástí.

Zřeknutí se odpovědnosti, pokud jste v HTML a CSS úplně nová, to pro vás pravděpodobně není dobrý začátek. Pokud to dobře znáte, nemělo by být příliš těžké ho vyzvednout. Ale pokud hledáte kompletní kurz pro začátečníky, existuje spousta skvělých možností online. Jmenujme například FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity a mnoho dalších. Pokud se rozhodnete začít kopat do jednoho z nich, vřele doporučuji držet se jednoho (například Free Code Camp) a dokončit ho před zahájením dalšího, protože mnoho „základního“ obsahu může být docela opakující se.

S tím z cesty, pojďme se pustit do toho, o čem všude jsou.

Jak třídy fungují

Třídy jsou velmi užitečné. Vyjímají opakování ze stylingu HTML. Bez tříd byste stylizovali každý prvek ve svém značení samostatně. A co kdybyste měli dva stejné prvky, ale chtěli jste každý z nich odlišně upravit? Byl by to úplný nepořádek. Proto máme třídy. Třídy přidávají nějakou organizační strukturu vašeho HTML, což vám umožňuje udržovat váš kód relativně čistý. Nejen to, ale třídy lze použít vícekrát. Jinými slovy, nikdy nebudete muset vytvářet stejná pravidla stylingu dvakrát.

Tady je, jak třídy vypadají v naší značce:

Jak vidíte, pod naší značkou těla máme dva

prvky s různými třídami. První

značka má třídu „head1“, zatímco druhá značka má třídu „head2“. Takže v našem CSS místo použití stylingu pouze na

element, můžeme aplikovat styling na tyto jednotlivé třídy. Proč bychom to chtěli udělat?

Hlavním důvodem je, že nechcete všechny své

prvky, které mají stejný styl. Při vytváření webových stránek by to vyvolalo mnoho bolesti hlavy a kromě toho by webové stránky nevypadaly moc skvěle. Třídy nám umožňují aplikovat styl pouze na jednu instanci značky, ne na všechny

značky v dokumentu. Jak tedy píšete třídu v HTML? Takhle:

Nějaký obsah

Vlastnost „class“ můžete přidat do téměř jakéhokoli prvku HTML.

Skvělý! Máme třídy, ale ve svém současném stavu ve skutečnosti nic nedělají. To proto, že jsme do třídy ještě nepřidali žádná pravidla pro styling. K tomu musíme vytvořit samostatný dokument .css. Jdu to nazvat main.css. V tomto dokumentu bychom vytvořili třídu takto:

Chcete-li vybrat třídu, kterou chceme stylovat, uděláme toto:

.head1 {color: red; zarovnání textu: střed; }

Uvnitř složených závorek jsou všechna „pravidla“ (nebo styling), které aplikujeme na tuto třídu. Do této třídy můžete vložit spoustu různých pravidel. V mém případě jsem změnil barvu textu na červenou pomocí pravidla „color“ a text jsem vystředil pomocí pravidla „zarovnání textu“. Úplný seznam pravidel CSS a jejich dokumentaci naleznete v Mozilla's Developer Network.

Nyní náš styl stále není aplikován na třídy v našem HTML dokumentu, a to proto, že jsme tyto dva soubory zatím vzájemně nepropojili. Vraťte se do svého souboru HTML a do tag, budete chtít propojit svůj soubor CSS takto:

Váš dokument HTML by měl vypadat takto:

A váš testovací projekt by měl vypadat takto na webu:

Podrobnější video, které prochází těmito kroky, naleznete níže.

Video

Závěr

A to je vše, co se týká tříd! Je to opravdu snadné pochopit. Pravděpodobně na velkých a populárních webových stránkách, které navštěvujete, jsou pravidla v rámci tříd mnohem složitější než to, co jsme pokryli, ale v jejich nejzákladnější podobě je to, jak fungují.

Pokud máte nějaké dotazy nebo jste měli potíže s pokračováním, dejte nám vědět v komentářích níže nebo znovu na fóru PCMech! Nebo, pokud by vás zajímal kompletní průvodce HTML / CSS pro začátečníky na PCMech, dejte nám vědět také!