logo

Typy CSS

CSS (Cascading Style Sheet) popisuje prvky HTML, které jsou zobrazeny obrazovka, papír , nebo v jiná média . Ušetří to spoustu času. Řídí rozvržení více webových stránek najednou. Nastavuje to font-size, font-family, color, background color na stránce.

Umožňuje nám přidat efekty nebo animace na webovou stránku. Používáme CSS zobrazit animace jako tlačítka, efekty, zavaděče nebo přadleny , a také animované pozadí .

Bez použití CSS , web nebude vypadat atraktivně. Existují 3 typy CSS které jsou níže:

  • Inline CSS
  • Interní / vložené CSS
  • Externí CSS
Typy CSS

1. Interní CSS

Interní CSS má značka v sekce HTML dokument. Tento styl CSS je efektivní způsob stylování jednotlivých stránek. Použití stylu CSS pro více webových stránek je časově náročné, protože vyžadujeme umístění styl na každé webové stránce.

Interní CSS můžeme použít pomocí následujících kroků:

1. Nejprve otevřete HTML stránku a najděte

2. Vložte následující kód za

 

3. Přidejte pravidla CSS na novém řádku.

Příklad:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Zavřete značku stylu.

 

Po přidání interního CSS vypadá kompletní soubor HTML takto:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Můžeme použít i selektory (třída a ID) ve stylovém listu.

Příklad:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Výhody interního CSS

    Interní CSSnelze nahrát více souborů, když přidáme kód se stránkou HTML.

Nevýhody interního CSS:

  • Přidání kódu do HTML dokument sníží velikost stránky a doba načítání webové stránky.

2. Externí CSS

V externím CSS propojujeme webové stránky s externím .css soubor. To je vytvořeno textový editor . CSS je efektivnější metoda pro stylování webu. Úpravou souboru .css soubor, můžeme změnit celý web najednou.

Chcete-li použít externí CSS, postupujte podle následujících kroků:

1. Vytvořte nový .css soubor s textový editor a přidejte Kaskádové styly pravidla taky.

Například:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Přidejte odkaz na externí .css soubor hned poté značka v sekce HTML list :

 

Výhody externího CSS:

  • Naše soubory mají čistší strukturu a menší velikost.
  • Používáme to samé .css soubor pro více webových stránek v externím CSS.

Nevýhody externích CSS:

  • Stránky nelze správně doručit před načtením externího CSS.
  • V externím CSS může nahrání mnoha souborů CSS prodloužit dobu stahování webu.

3. Inline CSS

Inline CSS se používá ke stylování konkrétního HTML živel. Přidat styl atribut ke každé značce HTML bez použití selektorů. Správa webových stránek může být obtížná, pokud používáme pouze inline CSS . Nicméně, Inline CSS v HTML je v některých situacích užitečné. Nemáme přístup k CSS soubory nebo použít styly na prvek.

V následujícím příkladu jsme použili inline CSS in

bfs vs dfs
a

Tady to bude užitečné.

Výhody inline CSS:

  • Na stránce HTML můžeme vytvořit pravidla CSS.
  • Nemůžeme vytvořit a nahrát samostatný dokument v inline CSS.

Nevýhody inline CSS:

  • Inline CSS, přidávání CSS pravidla pro prvky HTML je časově náročné a nepořádky zvýšit strukturu HTML.
  • Stylizuje více prvků současně, což může ovlivnit velikost stránky a dobu stahování stránky.