2. Práce s barvami

Základní pojmenované barvy

Hodnota RGB	Název	Popis
#000000	Black	černá
#800000	Maroon	tmavě červená
#008000	Green	tmavě zelená
#808000	Olive	tmavě žlutá
#000080	Navy	tmavě modrá
#800080	Purple	tmavě fialová
#008080	Teal	tmavě tyrkysová
#808080	Gray	tmavě šedá
#C0C0C0	Silver	světle šedá
#FF0000	Red	červená
#00FF00	Lime	zelená
#FFFF00	Yellow	žlutá
#0000FF	Blue	modrá
#FF00FF	Fuchsia	fialová
#00FFFF	Aqua	tyrkysová
#FFFFFF	White	bílá

Vzorník barev

Umístěním kurzoru myši nad barevné pole získáte ve stavovém řádku prohlížeče odpovídající kód barvy vyjádřený v modelu RGB.

Zadávání barev

jménem barvy: red, aqua apod.
číslenou hodnotou v modelu RGB: #FF0000, #00FFFF apod.

Základní nastavení barev dokumentu

Formou atributů značky <BODY>:

bgcolor – barva pozadí: např. bgcolor="black" nebo bgcolor="#000000"
text – barva textu: např. text="white" nebo text="#FFFFFF"
link – barva ještě nenavštíveného odkazu: např. link="blue" nebo link="#0000FF"
vlink – barva již navštíveného odkazu: např. vlink="purple" nebo vlink="#800080"
alink – barva aktivního odkazu: např. alink="red" nebo alink="#FF0000"

Například: <BODY bgcolor="white" text="black">

Pokud bychom chtěli mít jako pozadí stránky nějaký obrázek, uvedeme jeho URL jako hodnotu atributu background.

Například: <BODY background="tapeta.jpg" text="white">

Příklad 2.1

Pokud budeme používat kaskádové styly (CSS), spousta věcí se nám bude dělat mnohem lépe. Nejdříve však musíme problematiku stylů zvládnout – viz skripta. Proto jen malá ukázka, která však může fungovat jen v některých prohlížečích.

<HTML>
  <HEAD>
    <TITLE>Malý pokus</TITLE>
    <STYLE type="text/css">
      BODY {
        background-color: #CCCCCC;
        scrollbar-face-color: #000066;
        scrollbar-shadow-color: #000066;
        scrollbar-highlight-color: #000066;
        scrollbar-3dlight-color: #000066;
        scrollbar-darkshadow-color: #CCCCFF;
        scrollbar-track-color: #CCCCFF;
        scrollbar-arrow-color: #CCCCFF }

     H1 {
       font-family: verdana, sans-serif;
       color: #FF0000;
       font-size: 14pt;
       text-align: center;
       padding: 10pt;
       border-width: 3;
       border-style: solid }
    </STYLE>
  </HEAD>

  <BODY>
    <H1>Nějaký nadpis psaný stylem H1</H1>
    <P>Tělo tohoto dokumentu má stylem předefinované vlastnosti.</P>
  </BODY>
</HTML>

Vyzkoušejte si v novém okně.

Jak si vyzkoušet výše uvedené příklady?

Označte myší zdrojový text libovolné ukázky.
Vybraný text zkopírujte do clipboardu.
Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
Zdrojový text můžete libovolně upravit.
Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: