Predmetová komisia ELT a INF

Učebnica HTML - Kaskádové štýly - CSS

HTML - Basic - CSS

« Predchádzajúca Ďalšia kapitola »

CSS je skratka pre Cascading Style Sheets (= Kaskádové štýly). Ide o jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov (HTML súborov).

Príklad

Sledujte! Štýly a farby

Tento text je font Verdana a je červený

Tento text je font Times a je zelený

Tento text je vysoký 30 pixelov

Vyskúšajte si to »

Štýly v HTML pomocou CSS

CSS bol vytvorený pre spoluprácu s HTML 4 s cieľom zabezpečiť štýlovanie pomocou HTML prvkov.

CSS štýl sa môže nadeklarovať tromi spôsobmi:

  • Pomocou externého štýlopisu - to je súbor.*css, na ktorý sa zo stránky odkazuje značkou <link>
  • Pomocou "štýlopisu" (angl. "stylesheet") v hlavičke stránky. Je v ňom napísané čo má byť ako sformátované napr. že nadpisy budú zelené. Do stránky sa štylopis píše medzi značky <style></style>
  • Priamo v texte zdroja u formátovného prvku pomocou atribútu style=".." Tomu sa hovorí priamy link.

Štýly v HTML pomocou atribútov

Je to časovo náročný spôsob a nie príliš praktický. Preferovaný spôsob pridanie CSS do HTML, ako sme spomenuli je CSS syntaxia v samostatných súboroch CSS. Avšak v tomto HTML tutoriály vás zoznáme s použitím CSS štýlu pomocou atribútu. Je do z dôvodu zjednodušenia príkladov. Je to pre vás jednoduchšie - upraviť si sám kód a hneď vidieť výsledky. Ďalšiie informácie o CSS nájdete v našej CSS Učebnici.

Štýl - Farba pozadia

Farba pozadia je prvok ktorý definuje vlastnosť pozadia.

Príklad

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">Toto je nadpis</h2>
<p style="background-color:green">Toto je odsek.</p>
</body>

</html>

Vyskúšajte si to »

HTML Štýl Príklad - Font, Farba, Veľkosť

Font-family, farba a veľkosť fontu definuje vlastnosti písma, farbu a veľkosť textu v prvku.

Príklad

<html>

<body>
<h1 style="font-family:verdana">A nadpis</h1>
<p style="font-family:arial;color:red;font-size:20px;">A odsek.</p>
</body>

</html>

Vyskúšajte si to »

Štýl atribútu <font> je značka je zastaraná.

HTML Štýl Príklad - Zarovnanie textu

Text-align vlastnosť určuje vodorovné zarovnanie textu v prvku.

Príklad

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

Vyskúšajte si to »

Zastarané značky a atributy

V HTML 4 je zastaraných niekoľko značiek a atribútov. To znamená, že nebudú podporované v budúcich verziách HTML a XHTML.

Poznámka - Posolstvo je jasné: Vyvarujte sa používania zastaraných značiek a atribútov!

Týmto značkám a atributom je potrebné sa vyhnúť:

Tag Popis
<center> Definuje centrovanie textu
<font> and <basefont> Definuje základný HTML font
<s> and <strike> Definuje prečiarknutý text
<u> Definuje podčiarknutý text
Attribúty Popis
align Definuje zarovnaie textu
bgcolor Definuje farbu pozadia
color Definuje farbu textu

Pre všetky vyššie uvedené značky platí: Namiesto nich použite štýly!

« Predchádzajúca Ďalšia kapitola »