CSS (Cascading Style Sheet) popisuje prvky HTML, na ktorých sa zobrazujú obrazovka, papier , alebo v iné médiá . Ušetrí to veľa času. Ovláda rozloženie viacerých webových stránok naraz. Nastavuje to font-size, font-family, color, background color na stránke.
Umožňuje nám pridať účinky alebo animácií na webovú stránku. Používame CSS zobraziť animácií Páči sa mi to tlačidlá, efekty, nakladače alebo rotačky , a tiež animované pozadia .
Bez použitia CSS , webová stránka nebude vyzerať atraktívne. Existujú 3 druhy CSS ktoré sú nižšie:
- Inline CSS
- Interné/vložené CSS
- Externý CSS
1. Interné CSS
Interný CSS má tag v časť HTML dokument. Tento štýl CSS je efektívny spôsob úpravy jednotlivých stránok. Používanie štýlu CSS pre viacero webových stránok je časovo náročné, pretože vyžadujeme umiestnenie štýl na každej webovej stránke.
Interný CSS môžeme použiť pomocou nasledujúcich krokov:
1. Najprv otvorte HTML stránku a nájdite
2. Vložte nasledujúci kód za
3. Pridajte pravidlá CSS v novom riadku.
Príklad:
body { background-color: black; } h1 { color: white; padding: 50px; }
4. Zatvorte značku štýlu.
Po pridaní interného CSS vyzerá celý súbor 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žiť aj selektory (trieda a ID) v predlohe.
Príklad:
.class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; }
Výhody interného CSS
Nevýhody interného CSS:
- Pridanie kódu do HTML dokument zníži veľkosť stránky a čas načítania webovej stránky.
2. Externé CSS
V externom CSS prepájame webové stránky s externým .css súbor. Je vytvorený podľa textový editor . CSS je efektívnejšia metóda na úpravu štýlu webovej stránky. Úpravou súboru .css súbor, môžeme zmeniť celý web naraz.
Ak chcete použiť externý CSS, postupujte podľa krokov uvedených nižšie:
1. Vytvorte nový .css súbor s textový editor a pridajte Kaskádové štýly pravidlá tiež.
Napríklad:
.xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; }
2. Pridajte odkaz na externé .css súbor hneď potom tag v časť HTML list :
Výhody externého CSS:
- Naše pilníky majú čistejšiu štruktúru a menšiu veľkosť.
- Používame to isté .css súbor pre viacero webových stránok v externom CSS.
Nevýhody externého CSS:
- Stránky nie je možné správne doručiť pred načítaním externého CSS.
- V externom CSS môže nahranie mnohých súborov CSS predĺžiť čas sťahovania webovej lokality.
3. Inline CSS
Inline CSS sa používa na vytvorenie štýlu HTML element. Pridaj štýl atribút ku každej značke HTML bez použitia selektorov. Správa webovej stránky môže byť náročná, ak ju používame iba inline CSS . Avšak, Inline CSS v HTML je v niektorých situáciách užitočný. Nemáme prístup k CSS súbory alebo použiť štýly na prvok.
V nasledujúcom príklade sme použili inline CSS v Tu to bude užitočné. Výhody inline CSS: Nevýhody inline CSS: str.nahradiť v jave
a