Ako pridať súbor CSS do HTML?
Súbor CSS je možné pridať do HTML ako externý hárok štýlov, CSS zahrnutý v samostatnom súbore od HTML alebo interný hárok štýlov, CSS zahrnutý v súbore HTML.
HyperText Markup Language (HTML) definuje, aké sú rôzne časti webovej stránky. Tieto kaskádových štýlov (CSS) kódovanie jazyka popisuje, čo tieto kúsky by mali vyzerať. Súbor CSS je možné pridať do HTML ako externý hárok štýlov, CSS zahrnutý v samostatnom súbore od HTML alebo interný hárok štýlov, CSS zahrnutý v súbore HTML. Zistite, ako pridať súbor CSS do HTML, aby ste si mohli prispôsobiť vzhľad svojich webových stránok.
Metóda 1 z 2: Pridajte externý list štýlov do html
- 1Vytvorte súbor CSS. Pripravte a uložte svoj súbor CSS s typom súboru „.css“.
- 2Nahrajte svoj súbor CSS na svoj web.
- 3Skopírujte URL svojho súboru CSS. Adresa URL môže vyzerať takto: www.yoursite.com/stylesheet.css.
- Je vhodné odstrániť z odkazu (URL) názov hlavnej domény. Preto by bola adresa URL „http://mysite.com/css/default.css“ skrátená na „/css/default.css“. Musíte zahrnúť úvodnú lomku („/“). Toto sa nazýva relatívna cesta.
- 4Pridajte odkaz na súbor. Nájdite v súbore HTML značku </head> a nad značkou vytvorte prázdny riadok. Pridajte <LINK rel = stylesheet type = "text/css" href = "LnlvdXJzaXRlLmNvbS9zdHlsZXNoZWV0LmNzcw =="> do prázdneho riadka a zmeňte "www.your..." na odkaz na váš súbor CSS.
- 5Uložte súbor HTML a nahrajte ho na svoj web.
- 6Overte, či všetko na vašom webe vyzerá tak, ako by malo vyzerať. Ak nie, možno sa budete musieť vrátiť a hľadať všetky opravy alebo úpravy, ktoré musíte vykonať.
Pripravte a uložte svoj súbor CSS s typom súboru „.css“.
Metóda 2 z 2: Pridajte interný list štýlov do html
- 1Vytvorte značku <style>. V súbore HTML nájdite značku </head>. Pridajte nad to niekoľko riadkov navyše a zadajte nasledujúci príkaz:
<STYLE type = "text/css"> </STYLE> - 1Pridajte všetky svoje CSS medzi tieto dve značky, ktoré ste práve pridali.
- 2Uložte súbor HTML (ako HTML).
- 3Overte, či vaša webová stránka vyzerá, ako by mala vyzerať. Ak nie, vykonajte potrebné zmeny.
- Vždy skontrolujte vzhľad svojich webových stránok v rôznych webových prehliadačoch a v rôznych počítačových systémoch. Niektoré prehliadače používajú internetové CSS trochu inak, dokonca aj medzi edíciami Mac a Windows rovnakého prehliadača. Ak váš web vyzerá v rôznych prehliadačoch odlišne, najmä v tom, ako sú určité objekty, ako napríklad zoznamy, rozmiestnené, problémom sú predvolené nastavenia prehliadača. Nájdite hlavný hárok štýlov, ktorý pridáte na začiatok CSS a prepíšete všetky predvolené nastavenia prehliadača, aby vaše nastavenia nepridávali nič, čo už prehliadač nastavil.
- Ak máte možnosť, použite externý list štýlov. To vám umožní upraviť vzhľad stránky zmenou kódu v pomenovanom súbore, namiesto toho, aby ste museli meniť CSS na každej stránke vášho webu.
- Ak váš web nereaguje na váš CSS podľa očakávania, dvakrát skontrolujte celý kód, aby ste nezabudli na detaily. Zvlášť dávajte pozor na bodkočiarky (";") a zátvorky so šípkami ("}"). Nie je neobvyklé, že vám jeden chýba vo vašom CSS.
- Ak súbor HTML uložíte do počítača, môžete ho otvoriť vo webových prehliadačoch a pred odoslaním skontrolovať vzhľad vo svojom počítači, ale pravdepodobne budete musieť mať svoj CSS ako internú šablónu štýlov v súbore HTML pre vzhľad načítať.
- Keď si šablóna štýlov protirečí - napríklad ak najskôr hovorí, že text bude modrý a neskôr bude červený, bude vždy platiť neskoršia podmienka. Ak je jeden príkaz v externom hárku štýlov a druhý je vo vnútornom hárku štýlov, použije sa interný.
- Nepoužívajte „vložené“ CSS, CSS, ktoré sú súčasťou značky HTML. (Napríklad: „align = 'center'" je vložený CSS.) Je zastaraný, má zlú syntax a je ťažké ho upravovať, keď potrebujete web neskôr aktualizovať.
Prečítajte si tiež: Ako pridať metaznačky?
Otázky a odpovede
- Ako prepojím CSS s HTML v mobile?CSS prepojíte rovnakým spôsobom pre všetky operačné systémy (mobilné, stolné počítače atď.).
