Základná syntax, vkladanie štýlu

CSS – Kaskádové štýly

Kaskádové štýly slúžia na formátovanie obsahu webových stránok. Umožňujú efektívne oddelenie obsahu od formy, čoho výsledkom je aj sprehľadnenie zdrojového kódu. Vetšinu definovaných štýlov môžme mať umiestnenú na jednom mieste v hlavičke stánky a nie roztrúsené po celej stránke. Má to aj ďalšiu výhodu a to centrálnu správu designu. Zmena jednej vlastnosti sa hneď prejaví na celom dokumente, vďaka čomu je výzor celej stránky jednotný.

Vkladanie css do html dokumentu

Štýl môžeme vložiť do html troma spôsobmi, ktoré môžeme navzájom kombinovať:

  1. Vložením do hlavičky
  2. Vložením priamo do textu
  3. Externý štýl

Štýly vložené do hlavičky

Štýly sa zadefinujú v hlavičke html dokumentu medzi párový prvok style. Prvok style má parameter type, ktorý definuje typ štýlu ( type=”text/css” ).

Priklad:

<html><head>
<style type=”text/css”>
h1 {color: red;}
</style>
</head> <body>
<h1>tento text bude červený</h1>
</body> </html>

Vložené štýly

Tieto štýly sa vkladajú priamo do tagu a platia iba pre tag v ktorom boli použité..

Príklad

<html><head></head>
<body>
<h1 style=”color: red; >červený text veľkosti h1</h1>
</body>
</html>

Externé štýly

Tento spôsob používame vtedy ak potrebujeme použiť tie isté nadefinovane štýly pre viac html dokumentov. Nahrať externe štýly môžeme dvoma spôsobmi:

  1. Vložením pomocou prvku <link>
  2. Importovaním

Príklady

1.Vložením pomocou prvku <link >
<head >
<link rel=stylesheet type=”text/css” href=”cesta”>
</head >
2.Importovaním
<head> < style >
@import url(http://www.aaa/styly/styl.css);
@import url(styl.css);
< /style > </head >

Syntax štýlu

Pridelenie štýlu prvku:

html_prvok {
parameter1: hodnota1;
parameter2: hodnota1 hodnota2;
…
parameter n: hodnota;
}

Vytvorenie nového štýlu

.nazov {
parameter1:hodnota1;
parameter2: hodnota1 hodnota2;
…
parameter n: hodnota1;
}

Priklad:

<html><head>
<style type=”text/css”>
h1 {color: red;}
h2, h3{color: blue;}
.novy_styl{color: green;}
</style>
</head> <body>
<h1>tento text bude červený</h1>
<span>tento text bude zeleny</span>
</body> </html>

id-identifikátor

Id identifikátorom definujeme vlastnosti iba pre jeden prvok s daným id. Ma rovnakú syntax ako štýl iba sa nezačína bodkov(.styl) ale mriežkov (#nadpis).

Príklad:

<html><head>
<style type=”text/css”>
#nadpis{color: red; font-style: italic; }
</style>
</head>
<body>
<div id=”nadpis”>červený nadpis napísaný kurzívou</div>
</body></html>