abc HTML5 i CSS TUTORIAL

Boja teksta i pozadine nenumerisane liste /UNORDERED LIST COLOR & BACKGROUND COLOR/ { background-color } & { color }


Korištenje atributa - Interni CSS /INTERNAL CSS/

Boja teksta i pozadine nenumerisane liste /UNORDERED LIST COLOR & BACKGROUND COLOR/ { background-color } & { color }

Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

Sintaksa:

  • HEAD dio (za nenumerisanu listu /UNORDERED LIST/):
    <style> UL {background-color: Naziv_boje | #kod_boje;} | (color:naziv_boje | kod_boje;) | (background-color:naziv_boje | kod_boje; color:naziv_boje | kod_boje;) </style>
  • BODY dio: <UL>

Oznake:
ul - početak nenumerisne liste
/ul - 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

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

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u


Slika 2. Nenumerisana lista - buliti /UNORDERED LIST - UL & LI/

Primjer 1. Nenumerisana lista /UNORDERED LIST/ u dokumentu, žuta pozadina.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {background-color:yellow; }
</style>
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

Primjer 2. Nenumerisana lista /UNORDERED LIST/ u dokumentu, oranž pozadina.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {background-color:orange; }
</style>
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {background-color:#C0C0C0; }
</style>
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

Primjer 4. Crveni tekst nenumerisane liste /UNORDERED LIST/:

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {color:red; }
</style>
</head>
<body>
<UL">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {color:#0000A0; }
</style>
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {background-color:orange; color:red;}
</style>
</head>
<body>
<p>Vojskovođe Rimskog carstva:</p>
<UL>
  <LI>Cezar</LI>
  <LI>Oktavijan</LI>
  <LI>Konstantin</LI>
</UL>
</body></html>

Vojskovođe Rimskog carstva:

  • Cezar
  • Oktavijan
  • Konstantin

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Boja pozadine</title>
<style>
  UL {background-color:#C0C0C0;color:#0000A0;; }
</style>
</head>
<body>
<p>Vojskovođe Rimskog carstva:</p>
<UL>
  <LI>Cezar</LI>
  <LI>Oktavijan</LI>
  <LI>Konstantin</LI>
</UL>
</body></html>

Vojskovođe Rimskog carstva:

  • Cezar
  • Oktavijan
  • Konstantin

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:

  • Cezar
  • Oktavijan
  • Konstantin
   

2. Provjerite svoje znanje:

 

Zadatak

Ispis

Napišite kod koji ispisuje tekst
  • Hard disk
  • Monitor
  • Disketna jedinica
  • Tastatura
  • Miš
   

3. Provjerite svoje znanje:

 

Zadatak

Ispis

Napišite kod koji ispisuje tekst
  • Meni 1
        supa
        jelo
        dezert
  • 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