Css boja teksta i pozadine : Online tečaj (css) : Bartol plus

Lekcija 1: Uvod u css, selektori i boje

Uvod u css [css] Umetanje css stilova u html kôd [css] Osnovni css selektori [css] Kombinirani css selektori [css] Css boja teksta i pozadine [css] Vježba 1.1: Osnovni css selektori Vježba 1.2: Kombinirani css selektori Vježba 1.3: Css promjena boje teksta i pozadine

CSS svojstvo color

Želimo li promijeniti boju teksta, koristimo css svojstvo color. Iza naziva css svojstva color, morate staviti dvotočku :, a iza nje oznaku boje.

nasljeđivanje svojstva color

Vrijednost css svojstva color se nasljeđuje. Ako smo nekom html elementu dodijelili vrijednost boje teksta, ona će se primjeniti i na sve njegove potomke.

Dopuštene vrijednosti oznake boje su:

engleski naziv boje

heksadecimalna vrijednost

skraćena heksadecimalna vrijednost

rgb vrijednost

rgba vrijednost

hls vrijednost

hlsa vrijednost

O svakoj od ovih vrijednosti možete pročitati u nastavku teksta.

CSS svojstvo background-color

nasljeđivanje svojstva background-color

Vrijednost css svojstva background-color se nasljeđuje. Ako smo nekom html elementu dodijelili vrijednost boje pozadine, ona će se primjeniti i na sve njegove potomke.

Želimo li promijeniti boju pozadine, koristimo css svojstvo background-color. Iza naziva css svojstva background-color, morate staviti dvotočku :, a iza nje oznaku boje.

Dopuštene vrijednosti oznake boje su:

engleski naziv boje

heksadecimalna vrijednost

skraćena heksadecimalna vrijednost

rgb vrijednost

rgba vrijednost

hls vrijednost

hlsa vrijednost

O svakoj od ovih vrijednosti možete pročitati u nastavku teksta.

1. Engleski naziv boje

Boju možemo odrediti uporabom engleskog naziva boje (npr. fuchsia, lime, maroon, purple, yellow...).

Postoji 146 naziva boja definiranih u HTML i CSS specifikacijama boja.

16 osnovnih boja abecednim redom su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.

Koji su dopušteni engleski nazivi boja i njihovi kôdovi (heksadecimalne i rgb vrijednosti) pročitajte u članku:

Html kôdovi i nazivi boja [html]

Želimo li tekst odlomka obojiti bojom čokolade, koristimo engleski naziv boje: chocolate.

p {
  color: chocolate;
}

Html nazivi boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Engleski nazivi boja</title>
  <style>
body {
  margin: 20px;
  color: yellow;
  background-color: darkgreen;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: lightslategray;
  background-color: ivory;
}
  </style>
</head>  
<body>
  <h1>Engleski nazivi boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

2. Heksadecimalna oznaka boje

Pomoću heksadecimalne oznake boje, svaku boju određujemo pomoću šest heksadecimalnih znamenki #RRGGBB (tri para po dvije heksadecimalne znamenke). Prve dvije heksadecimalne znamenke označavaju crvenu (engl. red), druge dvije zelenu (engl. green) i posljednje dvije plavu (engl. blue) sastavnicu boje.

Ispred znamenki nalazi se znak ljestve '#' koji označava da slijedi heksadecimalna vrijednost boje.

heksadecimalne znamenke

Heksadecimalna znamenka može imati 16 različitih vrijednosti: brojeve od 0 do 9 i slova od a do f. Gdje, slovo a označava broj 10, slovo b označava broj 11,... a slovo f je označava broj 15. Dakle heksadecimalne znamenke su: 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e i f, a njihove vrijednosti su brojevi od 0 do 15.

mala i velika slova

Heksadecimalna znamenka može imati unutar sebe i slova od a do f. Svejedno je, napišemo li ih kao malo ili veliko slovo! Dakle može bilo #d2691e ili #D2691E.

Želimo li tekst odlomka obojiti bojom čokolade, koristimo njezinu heksadekadecimalnu vrijednost: #d2691e.

p {
  color: #d2691e;
}

Heksadecimalne vrijednosti boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Heksadecimalne vrijednosti boja</title>
  <style>
/* Heksadecimalne vrijednosti boja:
darkgreen: #006400,
yellow: #ffff00,
ivory: #fffff0 i
lightslategray: #778899 */

body {
  margin: 20px;
  color: #ffff00;
  background-color: #006400;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: #778899;
  background-color: #fffff0;
}
  </style>
</head>  
<body>
  <h1>Heksadecimalne vrijednosti boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

3. Skraćena heksadecimalna oznaka boje

Svaka boja je određena pomoću tri heksadecimalne znamenke #RGB. Skraćenu heksadecimalnu oznake boje ne možemo koristiti za sve boje.

Ispred znamenki nalazi se znak ljestve '#' koji označava da slijedi heksadecimalna vrijednost boje.

Kada su unutar sva tri para heksadecimalnih sastavnica boja #RRGGBB, obje znamenke svake sastavnice boje (red, green i blue) iste vrijednosti, tada možemo koristiti skraćenu oznaku. Nju dobivamo tako, da umjesto dvije iste znamenke svake sastavnice boje (RR, GG i BB) napišemo samo jednu znamenku (#RGB).

Umjesto pune heksadecimalne vrijednosti #115588, možemo koristiti skraćenu heksadecimalnu oznaku #158.

Želimo li tekst odlomka obojiti purpurnom Rebekinom bojom (engl. rebeccapurple), čija je puna heksadekadecimalna vrijednost boje #9966cc, možemo koristiti skraćenu heksadecimalnu vrijednost #96c.

p {
  color: #96c;
}

Skraćena heksadecimalna vrijednost

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Skraćena heksadecimalna vrijednost boja</title>
  <style>
/* Skraćene heksadecimalne vrijednosti boja:
Red: #f00 za #ff0000,
Yellow: #ff0 za #ffff00, 
White: #fff za #ffffff i
LightSlateGray: #789 za #778899 */

body {
  margin: 20px;
  color: #ff0;
  background-color: #f00;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: #fff;
  background-color: #789;
}
  </style>
</head>  
<body>
  <h1>Skraćena heksadecimalna vrijednost boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

4. RGB(red, green, blue) oznaka boje

RGB je kratica od prvih slova engleskih naziva boja: crvene, zelene i plave (engl. red, green i blue). Svaka sastavnica RGB boje je cijeli broj od 0 do 255.

Označimo heksadecimalni broj oznakom #RRGGBB, gdje su slova rgb oznake za crvenu (engl. red), zelenu (engl. green) i za plavu (engl. blue) sastavnicu boje.

Rgb vrijednost dobivamo tako da svaki od tri para heksadecimalnih brojeva boja: RR GG i BB pretvorimo u tri cijela decimalna broja.

Rgb oznaku boje čokolade je: rgb(210, 105, 30).

hex kôd -> rgb vrijednosti

Kako smo dobili vrijednosti 210, 105 i 30? Heksadecimalna vrijednost boje čokolade je #d2691e. Heksadecimalni broj #d2 ima decimalnu vrijednost 210. Broj #69 ima decimalnu vrijednost 105, a broj #1e ima decimalnu vrijednost 30.

Želimo li tekst odlomka obojiti bojom čokolade, koristimo rgb oznaku boje: rgb(210, 105, 30).

p {
  color: rgb(210, 105, 30);
}

rgb vrijednosti boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>RGB vrijednosti boja</title>
  <style>
/* Koristimo rgb vrijednosti boja:
darkgreen: rgb(0, 100, 0),
violet: rgb(238, 130, 238),
lightslategray: rgb(119, 136, 153) i
yellow: rgb(255, 255, 0) */

body {
  margin: 20px;
  color: rgb(238, 130, 238);
  background-color: rgb(0, 100, 0);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: rgb(255, 255, 0);
  background-color: rgb(119, 136, 153);
}
  </style>
</head>  
<body>
  <h1>RGB vrijednosti boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

5. RGBA(red, green, blue, alpha) oznaka boje

RGBA je kratica od prvih slova engleskih naziva boja: crvene, zelene i plave (engl. red, green i blue) kojima je dodana oznaka prozirnosti (engl. alpha channel). Kao i kod RGB oznake, svaka sastavnica RGB boje je cijeli broj od 0 do 255.

Alpha vrijednost označava stupanj prozirnosti. Stupanj prozirnosti je realan broj između 0 i 1. Tako npr. alpha vrijednost 0.5 označava 50% prozirnosti.

kôd ne prikazuje rgb i rgba boje

Jedan od mogućih razloga zašto nije prikazana željena boja može biti u tome što ste stavili razmak između rgb i otvorene zagrade (. Dakle ne rgb (..., nego rgb(...! I ne rgba (..., nego rgba(...!

Želimo li tekst odlomka obojiti bojom čokolade, prozirnosti 50%, koristimo rgba oznaku boje: rgba(210, 105, 30, 0.5).

p {
  color: rgba(210, 105, 30, 0.5);
}

rgba vrijednosti boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>RGBA vrijednosti boja</title>
  <style>
/* Koristimo rgb vrijednosti boja
!!! dodana im je alpha prozirnost:
darkgreen: rgb(0, 100, 0),
lightslategray: rgb(119, 136, 153),
violet: rgb(238, 130, 238) i
yellow: rgb(255, 255, 0) */

body {
  margin: 20px;
  color: rgba(119, 136, 153, 0.8);
  background-color: rgba(0, 100, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: rgba(255, 255, 0, 0.85);
  background-color: rgba(238, 130, 238, 0.75);
}
  </style>
</head>  
<body>
  <h1>RGBA vrijednosti boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

6. HSL (hue, saturation, lightness) oznaka boje

HSL oznaka sastoji se od tri sastavnice: hue, saturation i lightness.

Hue vrijednost određuje samu boju. Raspon njezinih vrijednosti je cijeli broj od 0 do 360. Vrijednost 0 označava crvenu boju (engl. red), 120 zelenu boju (engl. green), a vrijednost 240 označava plavu boju (engl. blue).

Saturation vrijednost označava zasićenost/jasnoću izabrane boje (engl. hue). Vrijednost može biti između 0% i 100%. Vrijednost 0% označava sjenu sive (engl. gray), a vrijednost 100% čistu odabranu boju.

Lightness vrijednost označava svjetlinu boje. Vrijednost može biti između 0% i 100%. Vrijednost 0% označava crnu zatamljenost (engl. black), a vrijednost 100% označava bijelu svjetlinu (engl. white).

hex ili rgb -> hsl vrijednosti

Pretvorba iz hex ili rgb vrijednosti u hsl vrijednosti je stvar izračuna matematičkih formula i izlazi izvan sadržaja koji je obuhvaćen ovim tečajem.

Želimo li obojiti tekst odlomka bojom čokolade, koristimo hsl oznaku boje, hsl(25, 75%, 47.1%).

p {
  color: hsl(25, 75%, 47.1%);
}

hsl vrijednosti boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HSL vrijednosti boja</title>
  <style>
/* Koristimo hsl vrijednosti boja:
darkgreen: hsl(120, 100%, 19%),
yellow: hsl(60, 100%, 50%),
violet: hsl(300, 76.1%, 72.2%) i
ivory: hsl(60, 100%, 97%) */

body {
  margin: 20px;
  color: hsl(60, 100%, 50%);
  background-color: hsl(120, 100%, 19%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  padding: 20px;
  margin: 20px;
  color: hsl(60, 100%, 97%);
  background-color: hsl(300, 76.1%, 72.2%);
}
  </style>
</head>  
<body>
  <h1>HSL vrijednosti boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

7. HSLA (hue, saturation, lightness, alpha) boje

HSLA vrijednosti boja označavaju HSL vrijednost boje, kojoj je dodana prozirnost (engl. alpha channel).

Alpha vrijednost označava stupanj prozirnosti. Stupanj prozirnosti je realan broj između 0 i 1. Tako npr. alpha vrijednost 0.5 označava 50% prozirnosti.

kôd ne prikazuje hsl i hsla boje

Jedan od mogućih razloga zašto nije prikazana željena boja može biti u tome što ste stavili razmak između hsl i otvorene zagrade (. Dakle ne hsl (..., nego hsl(...! I ne hsla (..., nego hsla(...!

Želimo li obojiti odlomak bojom čokoladne, prozirnosti 50%, koristimo oznaku boje hsla(25, 75%, 47.1%, 0.5).

p {
  color: hsla(25, 75%, 47.1%, 0.5);
}

hsla vrijednosti boja

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HSLA vrijednosti boja</title>
  <style>
/* Koristimo hsl vrijednosti boja
!!! dodana im je alpha prozirnost:
DarkGreen: hsl(120, 100%, 19%),
Yellow: hsl(60, 100%, 50%),
Violet: hsl(300, 76.1%, 72.2%) i
Ivory: hsl(60, 100%, 97%) */

body {
  margin: 20px;
  color: hsla(60, 100%, 50%, 1);
  background-color: hsla(120, 100%, 19%, 0.7);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  font-weight: 100;
  text-align: center;
}
div li {
  margin: 20px;
  padding: 20px;
  color: hsla(60, 100%, 97%, 0.8);
  background-color: hsla(300, 76.1%, 72.2%, 0.75);
}
  </style>
</head>  
<body>
  <h1>HSLA vrijednosti boja</h1>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

Možda će vas zanimati?

Prethodi Kombinirani css selektori Slijedi Css model kutije

Vježba 1.3: Css promjena boje teksta i pozadine

CSS boja teksta i pozadine

Za promjenu boje teksta, koristimo css svojstvo color. Želimo li promijeniti boju pozadine, tada koristimo css svojstvo background-color.