07 – Szín- és háttértulajdonságok


Color: az adott elem színét adhatjuk meg vele. Pl.

1
H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }

Background Color: az adott elem háttérszínét lehet vele beállítani. Pl.

1
BODY { background-color: blue } H5   { background-color: #0000ff }

Background Image: az adott elemhez háttérképet rendelhetünk vele. Pl.

1
2
BODY { background-image: url(../kepek/kep.gif)
P { background-image: url(http://www.valahol.hu/kep.jpg)

Background Repeat: megadhatjuk, hogy a background-image-nél definiált háttérképet hogyan ismételje meg a böngésző. A lehetséges értékek: repeat (ismétlés folyamatosa, amennyiszer elfér, mindkét irányban), repeat-x (ismétlés csak vízszintesen), repeat-y (ismétlés csak függőlegesen), no-repeat (nem ismétlődik). Pl.

1
2
BODY { background: blue url(kep.gif);
background-repeat: repeat-x; }

Background Attachment: megadhatjuk, hogy a háttérkép együtt gördüljön-e a felette levő oldal tartalmával, vagy sem. Lehetséges értékei: scroll (gördül), fixed (nem gördül). Pl.

1
2
BODY { background: blue url(kep.gif);
background-attachment: fixed }

Background Position: megadhatjuk vele a háttérkép pozícióját, százalékos vagy hosszúság értékekben, illetve az elhelyezését vízszintesen balra (left), jobbra (right), illetve középre (center), függőlegesen pedig felülre (top), középre (center), illetve alulra (bottom) igazítva. Csak blokkszintű elemeknél használható.

Background: ez a tulajdonság rövidítésként, ill. összevonásként használható a többi fenti tulajdonság (background-color, background-image, background-repeat, background-attachment, background-position) megadásához. Pl.

1
2
3
4
BODY { background: blue url(http://www.valahol.hu/kep.gif) } 
BLOCKQUOTE { background: #ff00ff } 
P { background: url(../hatter/kep.jpg) #00ff00 fixed } 
TABLE { background: #0c0 url(masikkep.jpg) no-repeat bottom right}

A szerző honlapja: http://fodorsi.ini.hu

Kapcsolódó bejegyzések:
  • Ha azt szeretnéd, hogy a lapodon az egyes linkekhez 1-1 megfelelő ikon társuljon (pl. PDF-re mutató linkhez egy kis PDF ikon kerüljön), használd az alábbi kódot …

  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • Használható mértékegységek, egységekHosszúságmértékek (Length Units): meg lehet adni abszolút és relatív formában. Használhatjuk a + és ” előjeleket, és nem …

  • Menüt listával? Sokaknak ez már régóta természetes, mások meg vakarják a fejüket, hogy most mi van? Pedig ha belegondolunk miről is van szó? egy menülistáról, a …

  • Háttérként egyéni képek használata egyszerű módja annak, hogy érdekesebbé tedd az űrlapjaidat. CSS-vel ezt pár soros egyszerű kóddal megtehetjük.…

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a 07 – Szín- és háttértulajdonságok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>