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
styl.css
a vlož ten tento text./* š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 */
}
body
je jednoduchý selektor - definuje prvok stránky, ktorému ideme meniť vlastnosti h1, h2
je viacnásobný selektor - obsahuje vymenované viaceré značky{ zátvorkách }
sú uvedené v tvare vlastnosť: hodnota
názvy vlastností a ich nové hodnoty;
syntax css treba pedantne dodržiavať, ak niekde spravíte v zápise chybu, prehliadač zvyšok súboru bude ignorovať
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>
Keď obnovíš stránku, mala by sa sformátovať pomocou štýlopisu zo súboru styl.css, takže červené nadpisy na žltom pozadí.
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
Nájdi si na stránke jakpsatweb.cz si nejaké, čo sa ti páčia.