Ako vytvoriť CSS?

Nájdite ďalšie stránky špeciálne zamerané na výučbu a výučbu HTML a CSS. Stránky ako CSS tricks.com sú konkrétne zamerané na výučbu CSS a webového dizajnu.

Kaskádových štýlov (CSS) je systém pre webové stránky kódovanie, ktoré umožňuje návrhárom manipulovať niekoľko funkcií naraz priradením určité prvky do skupín. Napríklad pomocou kódu na pozadí webovej stránky môžu dizajnéri zmeniť farbu alebo obrázok na pozadí na všetkých stránkach webu jedinou zmenou súboru CSS. Tu je postup, ako vytvoriť CSS pre základnú webovú stránku.

Časť 1 zo 4: písanie vložených css

1

Uistite sa, že rozumiete značkám HTML. Mali by ste vedieť, ako značky fungujú a aké sú atribúty srca href.
2
Naučte sa niektoré zo základných vlastností CSS. Uvidíte, že nehnuteľností je veľmi veľa. Nie je však potrebné naučiť sa ich všetky.
- Niektoré dobré základné vlastnosti CSS, ktoré je potrebné vedieť, sú colora font-family.
3

Získajte informácie o hodnotách pre každé príslušné vlastníctvo. Všetky vlastnosti vyžadujú hodnotu. Napríklad pre colornehnuteľnosť môžete zadať redhodnotu.
4

Získajte informácie o styleatribúte HTML. Používa sa v prvku ako hrefalebo src. Ak ho chcete použiť, do úvodzoviek za znamienkom rovnosti vložte atribút CSS, dvojbodku a potom hodnotu vlastnosti. Toto je známe ako pravidlo CSS.
5

Pochopte, že vložený CSS zvyčajne nepoužívajú na webové stránky profesionálni weboví vývojári. Vložené CSS môžu do dokumentu HTML pridať zbytočný neporiadok. Je to však skvelý spôsob, ako sa zoznámiť s fungovaním CSS.

Tu je postup, ako vytvoriť CSS pre základný web.

Časť 2 zo 4: písanie základných css

1
Spustite program, ktorý chcete použiť. Malo by vám to umožniť vytvárať súbory HTML a CSS.
- Ak nemáte nainštalovaný špeciálny program, môžete použiť Poznámkový blok alebo iný textový editor. Jednoducho uložte súbor ako textový súbor aj ako súbor CSS.
2
Otvorte súbor HTML pre svoj web. Mali by ste to otvoriť aj pomocou editora HTML, ak máte nainštalovaný.
- HTML editory vám umožňujú upravovať HTML a CSS súčasne.
3

Vytvorte <style>značku v hlavičke HTML. To vám umožní písať CSS bez potreby samostatného súboru.
4

Vyberte prvok, ku ktorému chcete pridať štýl, a zadajte názov prvku, za ktorým nasleduje sada zložených zátvoriek (). Aby bol váš kód čitateľnejší, vždy položte druhú zloženú zátvorku na vlastný riadok. { }
5
Do zátvoriek zadajte svoje pravidlá CSS tak, ako by ste použili styleatribút. Každý riadok musí končiť bodkočiarkou (;). Aby bol váš kód čitateľný, každé pravidlo by malo začínať na vlastnom riadku a každý riadok by mal byť odsadený.
- Je veľmi dôležité poznamenať, že tento štýl ovplyvní všetky prvky vybratého typu na stránke. Konkrétnejší štýl bude popísaný v nasledujúcej časti.

Malo by vám to umožniť vytvárať súbory HTML a CSS.

Časť 3 zo 4: pokročilejšie css

1

Vytvorte súbor CSS, nie súbor HTML, a uložte ho pomocou .cssrozšírenia. Otvorte aj svoj súbor HTML.
2
Vytvorte <link>značku v hlavičke HTML. To vám umožní prepojiť samostatný dokument CSS s vašim dokumentom HTML. Váš link tag potrebuje tri atribúty: rel, typea href.
- relznamená „vzťah“ a hovorí prehliadaču, aký je vzťah k dokumentu HTML. Tu by mala mať hodnotu "stylesheet".
- typeuvádza, s akým typom média sa spája. Tu by mala mať hodnotu"text/css"
- hrefTu sa používa podobne ako v <a>prvku, ale tu musí odkazovať na súbor CSS. Ak je súbor CSS umiestnený v rovnakom priečinku ako súbor HTML, v úvodzovkách je potrebné napísať iba názov súboru.
3

Vyberte prvky rôznych typov, ku ktorým chcete pridať rovnaký štýl. K classtýmto prvkom pridajte atribút a nastavte ich na rovnaký názov triedy, aký si vyberiete. Vďaka tomu budú mať vaše prvky rovnaký štýl.
4

Priraďte, aký štýl trieda získa. Zadajte názov triedy do súboru CSS tak, aby . mu predchádzala bodka () (tj .class).
5
Vyberte jednotlivé prvky, ku ktorým chcete pridať špeciálny štýl, a pridajte idatribút. Id sú vytvárané v CSS pomocou symbolu libry (#) a nie bodky.
- Id sú špecifickejšie ako triedy, takže id prepíše akýkoľvek štýl triedy, ak má atribút s inou hodnotou ako trieda.

Vytvorte súbor CSS, nie súbor HTML, a uložte ho pomocou súboru.

Časť 4 zo 4: dozvedieť sa viac

1

Navštívte školy w3. Je to oficiálna webová stránka zameraná na výučbu zručností vývoja webu. W3 má množstvo referencií uvedených pre HTML a CSS, ako aj pre ďalšie webové jazyky.
2

Nájdite ďalšie stránky špeciálne zamerané na výučbu a výučbu HTML a CSS. Stránky ako CSS tricks.com sú konkrétne zamerané na výučbu CSS a webového dizajnu. Nájdenie renomovaných zdrojov vám pomôže na vašej vzdelávacej ceste.
3

Spojte sa s webovými dizajnérmi a vývojármi. Ich skúsenosti a know-how vás môžu naučiť cenné znalosti a zručnosti.
4

Pozrite si zdrojový kód webových stránok, na ktoré narazíte. Zobrazenie CSS dobre vyvinutých webových stránok vám môže ukázať spôsoby, ako navrhnúť časti webových serverov. Kopírovanie ju ako prax a pohrával sa s kódom vám môže pomôcť naučiť sa používať rôzne atribúty CSS.

Tipy

Existuje mnoho rôznych vlastností, s ktorými môžete manipulovať s CSS. Nájdite webovú stránku so štýlom, ktorý sa vám páči, a zobrazte zdrojový súbor. Ak je v hornej časti značiek HEAD prepojený názov súboru CSS, kliknutím naň zobrazíte rôzne vlastnosti a hodnoty priradené prvkom.

Varovania

Priame kopírovanie kódovania HTML a CSS vám môže pomôcť naučiť sa, ale musíte použiť svoje vlastné nápady na dizajn. Vziať niekoho iného je krádež a plagiátorstvo.

Prečítajte si tiež: Ako prečiarknuť text na Reddite na PC alebo Mac?