Ako používať HTML a CSS?
Pridanie CSS alebo kaskádových štýlov vám umožní oživiť štruktúru HTML štýlmi.
HTML a CSS sú hlavnými časťami štruktúry webových stránok. Ako nový webový vývojár je veľmi dôležité zvládnuť základy HTML CSS. Naučiť sa HTML znamená, že sa naučíte vytvárať štruktúru a drôtový model svojej webovej stránky. Pridanie CSS alebo kaskádových štýlov vám umožní oživiť štruktúru HTML štýlmi.
Časť 1 z 3: porozumenie HTML a CSS
- 1Predstavte si štruktúru HTML ako tri sekcie.
- Značka Head je prvou sekciou. Obsahuje všetky údaje súvisiace s účelom a informáciami o webovej stránke. To zahŕňa meta údaje, názov, externé zdroje súborov atď. Niekoľko webových stránok tiež obsahuje dôležité informácie týkajúce sa analýzy návštevnosti webových stránok, hodnotenia stránok atď. Všetky tieto položky sú zahrnuté v tomto segmente.
- Ďalej prichádza značka Body. Toto je hlavné centrum štruktúry webových stránok. Tu je uvedený drôtový model alebo stavebné prvky webových stránok. Tu v tomto priestore skutočne spomínate prvky a značky. Podľa poradia, v ktorom uvádzate, sa prvky umiestnia na konečnú webovú stránku.
- Ak napríklad napíšeme značku formulára a potom značku obrázka; našli by sme našu webovú stránku, ktorá zobrazuje formulár a pod ním obrázok (ale tieto objednávky a pozície je samozrejme možné zmeniť pomocou vysokokvalitného CSS). Ak teda máte dizajn v rukách, pokračujte v pridávaní prvkov podľa postupu návrhu.. S rôznymi segmentmi (vľavo, vpravo, v strede) webovej stránky je potrebné zaobchádzať zodpovedajúcim spôsobom. Na to máme značku tabuľky alebo značky zoznamu. Naučte sa všetky typy značiek dostupných v HTML a porozumejte ich implementácii.
- Nakoniec prichádza sekcia Foot. Táto sekcia zvyčajne obsahuje všetko, čo je viditeľné v oblasti päty webovej stránky. Bežne to však nezahŕňame samostatne. Namiesto toho je obsah päty pripojený k samotnému telu
- 2Pochopte, ako W3C zaviedol faktory CSS v CSS alebo kaskádových štýloch, aby zmenšil veľkosť súboru HTML, získal čistejší kód a synchronizoval štýly oddelene s HTML. Nejde o nič iné ako o samostatné súbory, ktoré sú súčasťou sekcie HTML head, a obsahujú definíciu štýlu pre rôzne prvky dokumentu HTML.
- Kódy štýlov definované v CSS zahrnujú správanie písma, farbu, výšku, šírku, štýl zobrazenia atď. Tiež obsahujú definíciu správania pre udalosti prejdenia myšou a myši. V skutočnosti s najnovším zahrnutím CSS3 bol štýl vylepšený na veľmi odlišnú úroveň. Teraz môžete vytvárať animácie, transformácie a prechody - všetko z kódov CSS. Väčšinou používame CSS na deklarovanie šírky, výšky, farby, písma atď. Toto sú najbežnejšie možnosti štýlu a pomáhajú nám definovať vzhľad a polohu niekoľkých prvkov HTML.
HTML a CSS sú hlavnými časťami štruktúry webových stránok.
Časť 2 z 3: Kombinácia alebo prepojenie HTML s CSS
- Jedna veľmi bežná a dôležitá otázka je - ako šablóna so štýlmi vie, aký štýl použiť pre konkrétny objekt? Toto je jedna veľmi dôležitá otázka, ktorá by mala nastať pre všetkých nováčikov. Existuje niekoľko postupov, vďaka ktorým kódu CSS porozumiete tomu, ku ktorému prvku chcete mať prístup pre svoj súčasný štýl.
- 1V prípade potreby to urobte pomocou tried a ID. Toto je najbežnejší postup a nasleduje ho ako hlavný úder v celom internetovom svete. Do dokumentu HTML pri deklarovaní prvku stačí pridať atribút „trieda“ a priradiť mu určitý názov. To isté pre „id“. Teraz do súboru CSS napíšte názov triedy alebo ID a definujte svoj štýl. Konkrétny prvok bude automaticky odvodzovať definície štýlov.
- Pri deklarovaní s názvom triedy v súbore CSS pridajte vpredu bodku. V prípade identifikátorov zadajte pred názov znak hash. To je syntax. Teraz najdôležitejšia časť.
- Aký je teda rozdiel medzi triedami a ID? Nemôžu byť rovnakí, ak existujú súčasne. Áno, je tu obrovský rozdiel. V dokumente HTML môžete pomenovať ľubovoľný počet prvkov s rovnakým názvom triedy. ID však musia byť vyhradené jednému jedinému prvku. Preto sa triedy používajú vtedy, keď potrebujeme rovnaký štýl pre viac položiek na stránke HTML, a identifikátory pre styling výlučne jednej položky.
- 2Pristupujte k prvkom DOM (model dátového objektu) alebo k prvkom HTML pomocou názvov značiek. Ak teda chceme odstrániť orámovanie zo všetkých značiek obrázkov na stránke; napíšeme „img“ a vyhlásime „border: none“. To však bude platiť pre všetky značky obrázkov v dokumente. Možno si hovoríte, existuje spôsob, akým by sme mohli poukázať na konkrétny prvok (napríklad obrázok), ale s jeho názvom? Áno, existuje spôsob. Ponorte sa do ďalšieho bodu.
- 3Prístup k konkrétnym prvkom získate aj podľa názvu značky. Musíte však prejsť všetkými ich rodičovskými prvkami až k nim. To bolo trochu ťažké, že? Dobre. Zoberme si príklad. Predpokladajme, že v ňom máme prvok formulára a potom vstupný prvok. Vstupné prvky máme aj mimo formulára, napríklad len rozptýlené. Ak sa teda riadime vyššie uvedeným bodom a deklarujeme určitý štýl na vstupných prvkoch; tieto štýly budú implementované na oboch vstupných prvkoch vo vnútri aj mimo formulára. Ja
- Ak chceme, aby bol štýl implementovaný iba na prvku vo formulári, môžeme to urobiť - vstup formulára { / * Štýl deklarujte tu * /}. Všimnite si teda, ako sme sa dostali k vstupnému prvku, ktorý chceme konkrétne štylizovať. Najprv rodič a potom hlavný prvok. Týmto spôsobom sa vonkajšie vstupné prvky zahodia.
Ako nový webový vývojár je veľmi dôležité zvládnuť základy HTML CSS.
Časť 3 z 3: posunutie sa o krok ďalej
- 1Dajte si čas na učenie. Veterán v kódovaní môže zabrať veľa času. Tu je však niekoľko tém, ktoré vám môžu pomôcť rýchlo porozumieť základným metodikám a navrhnúť štandardné stránky HTML.
- 2Naučte sa správne rozbiť štruktúru dizajnu svojej webovej stránky. Pochopte svoje dostupné značky a zistite, ako ich môžete použiť na rozdelenie stránky na najjednoduchšiu štruktúru.
- 3Vedzte, že model CSS boxu je veľmi dôležitý. Pochopenie šírky, výšky prvku je prvým krokom. Potom sa však musíte naučiť, ako nastaviť medzery pomocou vypchávky a okraja. Existujú určité prípady, keď nie sú marže použiteľné. Preto musíte používať vypchávky a naopak. Skúste zistiť, čo to vlastne je a ako sa používajú.
- 4Naučte sa plaváky a ich použitie. Plavák CSS je ďalším veľmi dôležitým aspektom štýlu. Plávajúci obsah vľavo a vpravo hrá dôležitú úlohu v štruktúre webových stránok.
Pristupujte k prvkom DOM (model dátového objektu) alebo k prvkom HTML pomocou názvov značiek.
- Vždy používajte externé súbory CSS. Pokúste sa vyhnúť vloženému štýlu a definíciám štýlu štítku hlavy. Môžu predĺžiť dobu načítania stránky a spomaliť váš web. Tieto boli W3C označené ako štandardy zlého kódovania
- Keď ste vo fáze učenia, skúste overiť kód pomocou validátora W3C - pre HTML aj CSS. Vďaka tomu sa môžete dozvedieť, aké chyby robíte v porovnaní s najlepšími štandardmi na internete.
Prečítajte si tiež: Ako pridať doplnok do wordpressu?
