HTML & CSS pro začátečníky (část 31): Barvy a pozadí

Pomocí vlastnosti color je popsána barva popředí (textová barva) prvků. Udání barev je možné různými způsoby. Klasicky se používají hexadecimální hodnoty. Tyto hodnoty začínají vždy s představovaným křížkem. Za ním obvykle následují tři páry čísel a/nebo písmen. Tyto stojí za Červenou, Zelenou a Modrou. Udání barev tedy probíhá vždy podle následujícího schématu:

RRGGBB

Udání #ffffff způsobuje bílou barvu. Pokud se použije #000000, je zobrazena černá barva. V „rozumných“ HTML editorech jsou dostupné odpovídající výběry barev.

Přes můžete zjistit hexadecimální kódy. Existuje také mnoho webových stránek (např. http://www.farbtabelle.net/), kde jsou k dispozici příslušné přehledy barev.

V CSS je možné zkrátit zápis hexadecimálních barevných hodnot. Tento princip však nelze aplikovat na všechny barvy. To vlastně funguje pouze tehdy, pokud hodnota sestává ze tří stejných dvojic. Typickými příklady jsou definice barev pro černou a bílou. Obvykle jsou vypsány následovně:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Tento zápis lze také zkrátit.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

V CSS jsou také povoleny RGB hodnoty. Zde se udávají desetinné hodnoty od 0 do 255, které jsou odděleny čárkami. Pořadí barevných údajů odpovídá pořadí hexadecimálních barev.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Jak ukazuje příklad, jsou možné také procentuální údaje, které v praxi však zřídka najdeme.

Další variantou pro definování barev jsou klíčová slova barev. Zde jsou některé příklady:

• black

• red

• blue

• yellow

• white

• green

Příslušná definice by mohla vypadat následovně:

p { 
 color: white; 
 background: black; 
}

Upozorňujeme, že s CSS3 se paleta dostupných klíčových slov pro barvy opět výrazně rozšířila. CSS3 převzal názvy barev z SVG specifikace. Přehled dostupných barevných jmen naleznete na http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definování pozadí

U vlastnosti background se jedná o seskupení následujících možných hodnot, které budou podrobněji představeny v dalším průběhu tohoto tutoriálu:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Individuální údaje se oddělují mezerami. Není důležité, jakým pořadím jsou zapsány. Nemusí být udány všechny hodnoty.

Příklad:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Barvy pozadí

Pro přidělení barvy pozadí prvku se použije vlastnost background-color.

div { 
   background-color: #009999;
}

Jako hodnotu se zadá požadovaná barva.

Obrázky pozadí

background-image stanoví obrázek jako pozadí. Pokud je tato vlastnost uvedena v externím souboru CSS, relativní cesty se vztahují k adresáři, ve kterém se nachází soubor CSS.

• none – žádný pozadí

• URI – cesta k obrázku

I k tomu příklad.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Při používání obrázků pozadí však prosím postupujte opatrně. Příliš nápadité pozadí neusnadňují čtení textů.





Samozřejmě existují webové stránky, kde záleží pouze na vzhledu. Zde lze určitě pracovat s nápaditějšími pozadími.

Posúvající se pozadí

U delších prvků se obrázek pozadí posouvá při posunu stránky. S background-attachment lze tento jev zamezit.

• fixed – posouvat se

• scroll – obrázek pozadí zůstává na svém místě a je zarovnán na okno prohlížeče (viewport).

Vlastnost background-attachment se obvykle používá ve spojení s background-image.

Příklad:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Poloha pozadí

Pomocí vlastnosti background-repeat se určuje, kde má pozadí začít. Referenčním bodem je prvek, pro který byl obrázek definován.

• Procentuální údaj - jeden nebo dva hodnoty určující vzdálenost obrázku od horního levého rohu prvku. Při dvou hodnotách první znamená horizontální, druhá vertikální odstup. Referenčním bodem není horní levý roh obrazu, ale bod uvnitř obrázku, který je také určen x/y hodnotami.

• Délkový údaj - určuje vzdálenost obrázku od jeho levého horního rohu k levému hornímu rohu prvku. Povoleny jsou jedna nebo dvě hodnoty. Pokud jsou určeny dvě hodnoty, první určuje vodorovný odstup, druhý svislý odstup.

Dále jsou možné také následující klíčová slova:

• left - horizontálně nalevo

• center - vycentrováno

• right - horizontálně napravo

• top - vertikálně nahoře

• bottom - vertikálně dole

Zde je příklad, jak by to mohlo vypadat:

p { 
   background-position: 8em top; 
}

Opakující se pozadí

Zda a jak je pozadí opakováno, pokud je menší než zobrazená oblast, lze určit pomocí vlastnosti background-repeat.

• repeat - obrázek pozadí se opakuje vertikálně a horizontálně vyplňuje prvek.

• repeat-x – obrázek je opakován pouze horizontálně.

• repeat-y – obrázek je opakován pouze vertikálně.

• no-repeat – obrázek se neopakuje.

Zde je také příklad:

body { 
   background-repeat: repeat-y; 
}

V tomto případě je obrázek opakován pouze vertikálně.

Pokud použijete repeat-y, opakování probíhá pouze horizontálně.





Tento tutoriál ukázal, jak moc je CSS silný i v oblasti barev a obrázků.