CSS referencia - 5.: Színek és hátterek

4. oldal / 9

5. fejezet: Színek és hátterek

<HEAD>
<STYLE>
    .color1 { color:red }
    .color2 { color:gray}
</STYLE>
</HEAD>
<BODY>
<SPAN STYLE="font-size:14" onmouseover="this.className='color1'"
    onmouseout="this.className='color2'">Színváltó szöveg</SPAN>
<SPAN STYLE=”font-size:14” onmouseover=”this.style.color='red'” onmouseout=”this.style.out='gray'”>
</BODY>

  • background-attachment: Háttérminta-parancs.
    Paraméterek: scroll (alapértelmezett; a háttérminta is gördíthető), fixed (a háttérminta helyben marad = vízjel)
    HTML-minta: { background-attachment : paraméter }
    Scriptben: objectum.style.backgroundAttachment [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530715%28v=VS.85%29.aspx

  • background-color: Háttérszín.
    Paraméterek: transparent (a szülő háttrszíne öröklődik; alapértelmezés) vagy színkód meghatározása: minták itt!
    HTML-minta: { background-color : paraméter }
    Scriptben: objectum.style.backgroundColor [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530716%28v=VS.85%29.aspx)

    <span style="font-size: 14px" onmouseover="this.style.backgroundColor='lime'" onclick="this.style.backgroundColor='orange'" ondblclick="this.style.backgroundColor=''"> Föléhúzáskor, egyszeres és kétszeres kattintáskor vált háttérszínt.</span>

  • background-image: Háttérkép.
    Paraméterek: pontos URL vagy none (semmi).
    HTML-minta: BODY { background-image: url(/marble.gif) }
    HTML-minta: { background-image : paraméter }
    Scriptben: objectum.style.backgroundImage [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530717%28v=VS.85%29.aspx

  • background-repeat: A háttérkép ismétlődésének szabályozása.
    Paraméterek: repeat (alapértelmezés; mindkét irányba ismétlődik) , repeat-x (csak vízszintesen), repeat-y (csak függőlegesen), no-repeat (nincs ismétlődés).
    HTML-minta: { background-repeat : paraméter }
    Scriptben: objectum.style.backgroundRepeat [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530721%28v=VS.85%29.aspx

  • background-attachment: Meghatározza a háttérkép kapcsolatát a dokumentumon belüli szülő-objektummal.
    Paraméterek: scroll (görgethető), fixed. (állandó)
    HTML-minta: { background-attachment : paraméter }
    Scriptben: objectum.style.backgroundAttachment [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530715%28v=VS.85%29.aspx

  • background-position-x: A háttérkép vízszintes pozíciójának adatai.
    Paraméterek: length (hosszúság a mértékegységek szerint), percentage (százalék; egész érték, melyet egy %-jel követ), left/center/right (igazítás balra/középre/jobbra).
    HTML-minta: { background-position-x : paraméter }
    Scriptben: objectum.style.backgroundPositionX [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530719%28v=VS.85%29.aspx

  • background-position-y: A háttérkép függőleges pozíciójának adatai.
    Paraméterek: length (hosszúság a mértékegységek szerint), percentage (százalék; egész érték, melyet egy %-jel követ), top/center/bottom (igazítás tetejére/közepére/aljára).
    HTML-minta: { background-position-y : paraméter }
    Scriptben: objectum.style.backgroundPositionY [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530720%28v=VS.85%29.aspx

  • background-position: Az egyes elemek háttérképének együttes pozícióját határozza meg. 2 érték kell: vízszintes és függőleges.
    Paraméterek: Lásd: az előző 2 objektum!
    HTML-minta: { background-position : paraméterpár }
    Scriptben: objectum.style.backgroundPosition [ = paraméterpár ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530718%28v=VS.85%29.aspx

  • background: A háttér teljes meghatározása.
    Leírás: { background: background-color || background-image || background-repeat || background-attachment || background-position}
    HTML-Minta: BODY {background: blue url(sample.gif) fixed}
    HTML-minta: { background : paraméter_sorozat }
    Scriptben: objectum.style.background [ = paraméter_sorozat ]
    További ötletek és minták: http://msdn.microsoft.com/en-us/library/ms530722%28v=VS.85%29.aspx

  • További rendszer-színkódok - csak a CSS-ben! (A böngészők egy része nem támogatja!)

    ActiveborderAz aktív ablak fejlécének színeActivecaptionAz aktív ablak fejlécén lévő cím színeAppworkspaceAz aktív alkalmazás háttérszíneBackgroundAz asztal háttérszíneButtonfaceA gombok felületének színeButtonhighlightAz ablakban található gombok árnyékának színeButtontextAz ablakban található gombok feliratának színeCaptiontextAblakban a címsorok színeGraytextInaktív szövegek színeHighlightLegördülő listában megjelölt elem színeHightlighttextKijelölt szövegrész színeInactiveborderInaktív ablak fejlécének színeInactivecaptionInaktív ablak fejlécén található cím színeInfobackgroundA kis előugró súgók háttérszíneInfotextA ki előugró súgók szövegének színeMenuA menüsorok színeMenutextA menüelemek színeScrollbarAz oldalsó gördítősáv színeThreeddarkshadowA térbeli elemek sötét árnyékának színeThreedfaceA térbeli elemek színeThreedhighlightAz éppen kiválasztott térbeli elem színeThreedlightshadowA térbeli elemek világos árnyékának színeThreedshadowA térbeli elemek sötét árnyékának színeWindowAz aktuális dokumentumablak háttérszíneWindowframeAz ablakkeret színeWindowtextAz aktuális dokumentumablakban lévő normál szöveg színe

Konkrét megvalósítási minta:

{
        font-family: Courier New, Arial, Times New Roman, Times, Garamond; // Betűtípus
        background-color: #00FA9A; // Háttérszín RGB-kódja
        color: #008000;			// Szövegszín kódja
        text-align: left;		// Szöveg rendezési módja
        scrollbar-arrow-color: green;    		// Az oldalsó gördítő csík nyilának színe
        scrollbar-face-color: #00FF8A;		// Az oldalsó gördítő csík gombjainak alapszíne
        scrollbar-highlight-color: black; 	// Az oldalsó gördítő csík kiemelt részeinek színe
        scrollbar-shadow-color: green; 		// Az oldalsó gördítő csík árnyékának színe
        scrollbar-track-color: #32CD32;		// Az oldalsó gördítő csík alapszíne
}