Kaskádový štýl (CSS) je systém na kódovanie webových stránok, ktorý umožňuje dizajnérom manipulovať s niekoľkými funkciami naraz priradením určitých prvkov do skupín. Napríklad pomocou kódu na pozadí webovej stránky môžu návrhári zmeniť farbu alebo obrázok na pozadí na všetkých stránkach webovej stránky jedinou zmenou súboru CSS. Tu je návod, ako vytvoriť CSS pre základnú webovú stránku.
Kroky
Časť 1 zo 4: Písanie vloženého CSS
Krok 1. Uistite sa, že rozumiete značkám HTML
Mali by ste vedieť, ako značky fungujú a
src
a
href
atribúty.
Krok 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.
-
Poznáte niekoľko dobrých základných vlastností CSS
farba
a
font-rodina
- .
Krok 3. Získajte informácie o hodnotách pre každú príslušnú vlastnosť
Všetky vlastnosti vyžadujú hodnotu. Pre
farba
nehnuteľnosť, môžete napríklad vložiť
červená
hodnotu.
Krok 4. Získajte informácie o súbore
štýl
Atribút HTML.
Používa sa v prvku ako
href
alebo
src
. Ak ho chcete použiť, vložte do úvodzoviek za znamienkom rovnosti atribút CSS, dvojbodku a potom hodnotu vlastnosti. Toto je známe ako pravidlo CSS.
Krok 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.
Časť 2 zo 4: Písanie základov CSS
Krok 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 alebo súbor CSS
Krok 2. Otvorte súbor HTML pre svoju webovú stránku
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
Krok 3. Vytvorte značku v hlavičke HTML
To vám umožní písať CSS bez potreby samostatného súboru.
Krok 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.
Krok 5. Medzi zátvorky zadajte svoje pravidlá CSS rovnako ako pomocou
štýl
atribú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
Časť 3 zo 4: Pokročilejšie CSS
Krok 1. Vytvorte súbor CSS, nie súbor HTML, a uložte ho pomocou súboru
.css
predĺženie.
Otvorte aj svoj súbor HTML.
Krok 2. Vytvorte značku v hlave HTML
To vám umožní prepojiť samostatný dokument CSS s vašim dokumentom HTML. Značka odkazu potrebuje tri atribúty:
rel
typ
a
href
-
rel
znamená „vzťah“a hovorí prehliadaču, aký je vzťah k dokumentu HTML. Tu by mala mať hodnotu
"šablóna štýlov"
- .
-
typ
uvádza, s akým typom média sa spája. Tu by mala mať hodnotu
"text/css"
-
href
- tu sa používa podobne ako v prvku, ale tu musí odkazovať na súbor CSS. Ak je súbor CSS umiestnený v rovnakom priečinku ako súbor HTML, do úvodzoviek je potrebné zapísať iba názov súboru.
Krok 3. Vyberte prvky rôznych typov, do ktorých chcete pridať rovnaký štýl
Pridaj
trieda
priraďte tieto prvky a nastavte ich na rovnaký názov triedy, aký si vyberiete. Vďaka tomu budú mať vaše prvky rovnaký štýl.
Krok 4. Priraďte, aký štýl dostane trieda
Zadajte názov triedy do súboru CSS s bodkou (.), Ktorá mu predchádza (t.j.
.trieda
).
Krok 5. Vyberte jednotlivé prvky, ku ktorým chcete pridať špeciálny štýl, a pridajte
id
atribú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
Časť 4 zo 4: Viac informácií
Krok 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.
Krok 2. Nájdite ďalšie stránky špeciálne zamerané na učenie 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.
Krok 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.
Krok 4. Zobrazte 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 stránok. Praktické skopírovanie a manipulácia s kódom vám môže pomôcť naučiť sa používať rôzne atribúty CSS.
