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.
