CSS boje
CSS boje
h1 {
color: white;
background-color: blue;
}
Četiri načina određivanja boja
Svaka boja se sastoji od crvene, zelene i plave komponente. Primjeri boja različitih komponenti su:
color:White; color:#FFFFFF;
color:#FFF; color:rgb(255,255,255);
color:Black; color:#000000;
color:#000; color:rgb(0,0,0);
color:Yellow; color:#FFFF00;
color:#FF0; color:rgb(255,255,0);
color:Indigo; color:#4B0082; color:rgb(75,0,130);
color:OrangeRed; color:#FF4500; color:rgb(255,69,0);
1. način: engleski naziv boje
color:Red; color:Green;
color:Blue; color:Pink;
color:Gold; color:Violet;
color:ForestGreen; color:Purple;
color:Black; color:White;
2. način: Puni HEX kod boje
Svaki par znamenki određuje jednu od komponenti boje #RRGGBB
color:#FF0000; color:Red;
color:#00FF00; color:Green;
color:#0000FF; color:Blue;
color:#FFD700; color:Gold;
color:#228B22; color:ForestGreen;
color:#FFFFFF; color:White;
color:#000000; color:Black;
3. način: Skraćeni HEX kod boje
Svaki znamenka zamjenjuje dvije iste komponente boje #RRGGBB, npr #048 zamjenjuje #004488
color:#F00; color:#FF0000; color:Red;
color:#0F0; color:#00FF00; color:Green;
color:#00F; color:#0000FF; color:Blue;
color:#F0F; color:#FF00FF; color:Fuchsia;
color:#FF0; color:#FFFF00; color:Yellow;
color:#FFF; color:#FFFFFF; color:White;
color:#000; color:#000000; color:Black;
4. Dekadski unos RGB boje
Svaki decimalni broj sastoji se od crvene, zelene i plave komponente
color:rgb(255,0,0); color:#FF0000; color:Red;
color:rgb(0,255,0); color:#00FF00; color:Green;
color:rgb(0,0,255); color:#0000FF; color:Blue;
color:rgb(255,0,255); color:#FF00FF; color:Fuchsia;
color:rgb(255,255,0); color:#FFFF00; color:Yellow;
color:rgb(255,255,255); color:#FFFFFF; color:White;
color:rgb(0,0,0); color:#000000; color:Black;
Zadatak 1
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="vjezba1.css" />
</head>
<body>
<h1>Glavni naslov na stranici</h1>
<h2>Elementi selektori</h2>
<p class="sivo">Lorem ipsum</p>
<h2 id="zeleno">Identifikatori selektori</h2>
<p>Lorem ipsum</p>
<h2 class="sivo">Klase selektori</h2>
<p>Lorem ipsum</p>
</body>
</html>Primjer oblikovanja boja
Zadatak 2
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="vjezba2.css" />
</head>
<body>
<h1>Glavni naslov na stranici</h1>
<h2>Elementi selektori</h2>
<p class="sivo">Lorem ipsum</p>
<h2 id="zeleno">Identifikatori selektori</h2>
<p>Lorem ipsum</p>
<h2 class="sivo">Klase selektori</h2>
<p class="bk-sivo">Lorem ipsum</p>
</body>
</html>Boje pozadine
Zadatak 3
<body>
<h1>Glavni <span class="plavo">naslov</span> boja</h1>
<h2>Elementi selektori</h2>
<p class="sivo">Lorem ipsum <span class="plavo"> euis nam sint cum officiis</span> impetus nobis</p>
<h2 id="zeleno">Identifikatori selektori</h2>
<p class="sivo">Lorem ipsum <span class="plavo"> euis nam sint cum officiis</span> impetus nobis</p>
<h2 class="sivo">Klase selektori</h2>
<p class="bk-sivo">Lorem ipsum <span class="zuto"> euis nam sint cum officiis</span> impetus nobis </p>
</body>
<span> strukturni element
