Kaskádové štýly (CSS)

1. Pomocou štýlov vieme zmeniť prezentáciu, t.j. grafickú alebo zvukovú podobu stránky.

Keď chceš zažiť krásu CSS - Cascading Style Sheets (tabuľky kaskádových štýlov), zájdi na stránku CSS Zen Garden
Na tejto stránke je jediný ukážový html dokument sformátovaný stovkami štýlov
Vyber si štýl z menu a sleduj zmenu prezentácie stránky
jeden jediný html súbor
sformátovaný pomocou rôznych súborov so štýlmi
zmena štýlu spôsobí zmenu vzhľadu súboru

2. Vytvor prázdny súbor `styl.css` a vlož ten tento text.

súbor ulož do rovnakého priečinka ako súbor html.

/* štýlopis */
body {
  background-color: yellow;
  font-family: Arial;
}

h1, h2 {
  color: red;   /* css farebná konštanta - iné spôsoby určenia farby pozri nižšie  */
}

v tomto súbore sú za sebou zapísané css pravidlá
body je jednoduchý selektor - definuje prvok stránky, ktorému ideme meniť vlastnosti
h1, h2 je viacnásobný selektor - obsahuje vymenované viaceré značky
v { zátvorkách } sú uvedené v tvare vlastnosť: hodnota názvy vlastností a ich nové hodnoty
jednotlivé pravidlá sú oddelené bodkočiarkou ;
hodnotu RGB farby možno zadať aj hexa farebnou konštantou: #FF0033, alebo funkciou: rgb(255, 0, 51) a pod.
správnosť zápisu m online službou CSS Lint

syntax css treba pedantne dodržiavať, ak niekde spravíte v zápise chybu, prehliadač zvyšok súboru bude ignorovať

Prepojenie CSS štýlu s HTML dokumentom

Do hlavičky html dokumentu daj značku link, ktorý prepojí stránku so štýlom:

<head>
  <title>Jojo Mrkvička - osobná stránka</title>
  <link rel="stylesheet" href="styl.css">
</head>

atribút rel hovorí, že pripájaný súbor obsahuje štýlopis,
atribút href obsahuje URL súboru styl.css. Keďže náš súbor sa nachádza v tom istom priečinku ako stránka, stačí dať len relatívnu adresu - meno súboru.

Keď obnovíš stránku, mala by sa sformátovať pomocou štýlopisu zo súboru styl.css, takže červené nadpisy na žltom pozadí.

Chceš to mať hotové a pekné za pár minút?

Prečítaj si Web Design in 4 minutes od CSS guru Jeremyho Thomasa, ktorý stojí za projektom Bulma CSS

CSS vlastnosti

Prehľad CSS vlastností a hodnôt nájdeš na stránke Jak psát web.

Úloha. Pomocou selektorov v súbore styl.css skús niektorým prvkom na stránke zmeniť vlastnosti. Zisti čo robia tieto vlastnosti:

Písmo

font-family: Arial;
font-family: Helvetica, "Comic Sans MS", sans-serif;
font-size: 20px;

Farba a pozadie

color: teal;
color: #aaff00;
background-color: #af0;
background-image: url(maciatko.gif);
background-repeat: no-repeat;

Text a odstavec

text-align: center;
line-height: 150%;
text-decoration: underline; 
text-transform: uppercase;
text-shadow: 5px 5px 3px black;
box-shadow: 5px 5px 3px rgb(255, 0, 0);

Veľkosť a obtekanie

height: 300px;
width: 33.3%;

Okraje, rámiky

border-width: 5px;
border-style: dashed;
border-color: rgba(100, 255, 255);

border: 1px dotted #00ff00;  /* limetkova zelena */

Zoznamy

list-style-image:url(img/mybullet.png);
list-style-position
list-style-type

Tabuľky

Obtekanie

float: rigth;

Spôsob zobrazenia

display: inline;
display: block;

Pozicovanie

position: absolute; position: fixed;

top: 200px; right: 500px; left: 200px; bottom: 5px;

Ďalšie vlastnosti