HTML és CSS kezdőknek (31. rész): Színek és háttér

A color tulajdonsággal írható le az elemek előtér színe (szövegszín). A színek megadása számos különböző módon lehetséges. Hagyományosan hexadecimális értékeket használunk. Ezek az értékek mindig # jel előtt kezdődnek. Ezután általában három számpár és/vagy betűpár következik. Ezek a vörös, zöld és kék színekért felelnek. Tehát a színadatok mindig az alábbi séma szerint történnek:

RRGGBB

A #ffffff érték fehér színt eredményez. Ha viszont #000000-et használunk, akkor a fekete jelenik meg színként. "Értelmes" HTML-szerkesztőkben színválasztók találhatók.

A hexadecimális kódokat ismerhetitek fel. Emellett számos webhelyen (pl. http://www.farbtabelle.net/) találhattok színtáblázatokat.

A CSS lehetőséget ad a hexadecimális színértékek rövidített megadására. Ez a módszer azonban nem alkalmazható minden színre. Ez csak akkor működik, ha az érték három azonos párból áll. Ezeknek a példáknak a megszokott megadási módszerei a fekete és fehér szín definiálására a következők:

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

Ezt a szintaxist lehet tovább rövidíteni.

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

A CSS-ben RGB értékek is megengedettek. Itt a szín meghatározása során a százalékos értékeket lehet megadni, amelyeket vessző választ el. A színértékek sorrendje megegyezik a hexadecimális színekével.

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

Mint a példa mutatja, a százalékos értékek is lehetségesek, bár a gyakorlatban ez kevésbé gyakori.

Az egyéb színmegadások másik változata a színkulcsszavak. Itt néhány példa:

• black

• red

• blue

• yellow

• white

• green

Egy ehhez hasonló meghatározás így nézhet ki:

p { 
 color: white; 
 background: black; 
}

Figyelem, hogy a CSS3-mal a rendelkezésre álló színkulcsszavak palettája jelentősen bővült. A CSS3 átvette a színnévadatokat az SVG-specifikációból. Az elérhető színnévlistát megtalálhatjátok itt: http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Háttér meghatározása

Az background összefoglalja az alábbi lehetséges értékeket, melyeket a továbbiakban részletesen bemutatunk ebben a kézikönyvben:

• háttér-lebegés

• background-color

• background-image

• background-position

• background-repeat

A feladatokat egyenként szóközzel kell elválasztva megadni. Az sorrendjük nem fontos. Nem kell mindegyik értéket megadni.

Egy példa:

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

Háttérszínek

Egy elem háttérszínének megadásához használjuk a background-color tulajdonságot.

div { 
   background-color: #009999;
}

Az értéket a kívánt színnel kell megadni.

Háttérképek

A background-image egy képet határoz meg háttérképként. Ha ezt a tulajdonságot külső CSS-fájlban adjuk meg, a relativ elérési utak a CSS-fájl mappájára vonatkoznak.

• none – nincs háttérkép

• URI – képfájl elérési útja

Erre is egy példa:

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

Vigyázzatok az háttérképek használatakor. Mert túl feltűnő háttérképek nem teszik könnyebbé a szövegek olvashatóságát.





Van persze olyan webhely is, ahol kizárólag a megjelenés számít. Ezeknél biztosan lehet szembetűnőbb háttérrel dolgozni.

Gördülő háttér

Hosszabb elemeknél a háttérkép görgetése az oldal görgetésekor is történik. A background-attachment tulajdonsággal ezt megakadályozhatjuk.

• fixed – görgetve marad

• scroll – a háttérgrafika mozdulatlan marad és az ablakhoz igazodik (Viewport).

A background-attachment tulajdonságot általában background-image tulajdonsággal együtt használjuk.

Egy példa:

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

A háttér pozíciója

A background-repeat tulajdonság meghatározza, hogy a háttérhol kell kezdődnie. A referencia pont az az elem, amelyre a grafikát meghatározták.

• Százalékos érték – egy vagy két érték, amely meghatározza a grafika távolságát az elem bal felső sarkától. Ha két értéket használunk, az első a vízszintes, a második a függőleges távolságot jelöli. A referencia pont nem a grafika bal felső sarka, hanem egy olyan pont a grafikán belül, amelyet az x/y értékekkel megadunk.

• Hosszúsági érték – meghatározza a grafika távolságát a bal felső sarkától a elem bal felső sarkáig. Lehet egy vagy két érték. Ha két értéket adunk meg, az első a vízszintes távolságot, a második a függőleges távolságot határozza meg.

Ezen felül a következő kulcsszavak is lehetségesek:

• left – vízszintesen balra

• center – középre igazítva

• right – vízszintesen jobbra

• top – függőlegesen fent

• bottom – függőlegesen lent

Itt egy példa, hogy hogyan lehet mindez kinézni:

p { 
   background-position: 8em top; 
}

Ismétlődő háttérképek

Az, hogy egy háttérgrafika ismétlődik-e, ha kisebb, mint a megjelenített terület, a background-repeat segítségével állítható be.

• repeat – a háttérkép vízszintesen és függőlegesen kitölti az elemet.

• repeat-x – a grafika csak vízszintesen ismétlődik.

• repeat-y – a grafika csak függőlegesen ismétlődik.

• no-repeat – a grafika nem ismétlődik.

Itt egy példa erre:

body { 
   background-repeat: repeat-y; 
}

Ebben az esetben a grafika csak függőlegesen ismétlődik.

Ha pedig repeat-y kerül felhasználásra, csak vízszintesen ismétlődik.





Ez a tutorial bemutatta, hogy a CSS milyen hatékony a színek és képek terén.