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

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="vjezba1.css" />
    <title>Vježbam CSS</title>
</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

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="vjezba2.css" />
    <title>Vježbam CSS</title>
</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




Hvala na pozornosti!


Pitanja?