abc HTML5 i CSS TUTORIAL

Boja teksta i pozadine numerisana lista - Atributi /ORDERED LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color


Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

Boja teksta i pozadine numerisana lista /ORDERED LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color   Sintaksa: <TAG style="background-color:naziv_boje | kod_boje;"> | <TAG style="color:naziv_boje | kod_boje;"> | <TAG style="background-color:naziv_boje | kod_boje; color:naziv_boje | kod_boje;">

Oznake:
ol - početak nenumerisne liste
/ol - kraj nenumerisne liste
li - Elementa liste

background-color - Atribut za boju pozadine
naziv_boje - engleski naziv boje - Popis kodova i naziva boja je u dodatku.
kod_boje - Vrijednosti boja su od 0 - 255 (>>) odnosno heksadimalno sa znakom # ispred broja (00 do FF)Heksadicimalni brojevi :
Red – crvena – 00 - 255 - #FF0000
Green – zelena – 00 - 255 - #00FF00
Blue – plava – 00 – 255 - #0000FF

Numerisana lista počinje sa TAG-om OL (ORDERED LIST) a ispred svakog elementa liste je <LI> (element liste /LIST ITEM/). Na kraju elementa lista je </LI> odnosno na kraju liste </OL>. >>


Slika 2. Numerisana lista - buliti /ORDERED LIST - OL & LI/

Primjer 1. Numerisana lista /ORDERED LIST/ u dokumentu, žuta pozadina.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja pozadine</title>
</head>
<body>
<OL style="background-color:yellow;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 2. Numerisana lista /ORDERED LIST/ u dokumentu, oranž pozadina.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja pozadine</title>
</head>
<body>
<OL style="background-color:orange;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 3. Numerisana lista /ORDERED LIST/ u dokumentu, kod boje pozadine je #C0C0C0:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja pozadine</title>
</head>
<body>
<OL style="background-color:#C0C0C0;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 4. Crveni tekst numerisane liste /ORDERED LIST/:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja teksta</title>
</head>
<body>
<OL style="color:red;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 5. Tamno plavi tekst numerisane liste /ORDERED LIST/, kod boje je #0000A0:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja teksta</title>
</head>
<body>
<OL style="color:#0000A0;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 6. Numerisana lista /ORDERED LIST/ u dokumentu, kod boje pozadine je orange a boja tektsa je crvena:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja pozadine i teksta</title>
</head>
<body>
<p>Vojskovođe Rimskog carstva:</p>
<OL style="background-color:orange;color:red;">
  <LI>Cezar</LI>
  <LI>Oktavijan</LI>
  <LI>Konstantin</LI>
</OL>
</body></html>

Vojskovođe Rimskog carstva:

  1. Cezar
  2. Oktavijan
  3. Konstantin

Primjer 7. Numerisana lista /ORDERED LIST/ u dokumentu, kod boje pozadine je #C0C0C0 a boja tektsa je tamno plava #0000A0:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Boja pozadine i teksta</title>
</head>
<body>
<p>Vojskovođe Rimskog carstva:</p>
<OL style="background-color:#C0C0C0;color:#0000A0;">
  <LI>Cezar</LI>
  <LI>Oktavijan</LI>
  <LI>Konstantin</LI>
</OL>
</body></html>

Vojskovođe Rimskog carstva:

  1. Cezar
  2. Oktavijan
  3. Konstantin

Primjer 2. Numerisana lista swa promjenom veličine fonta:

 

Daljnji rad: Napisati html kod za slijedeće primjere:

1. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst

Vojskovođe Rimskog carstva:

  1. Cezar
  2. Oktavijan
  3. Konstantin
   

2. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  1. Hard disk
  2. Monitor
  3. Disketna jedinica
  4. Tastatura
  5. Miš
    6.
   

3. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  1. Meni 1
        supa
        jelo
        dezert
  2. Meni 2

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index