CSS referencia - 6.: Elemek és határai

5. oldal / 9

6. fejezet: Elemek határai

<HEAD><STYLE>
    TD { border-top-width:3mm }
    .changeborder1 { border-top-width:1cm }
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
    <TD onclick="this.className='changeborder1'"
        ondblclick="this.className=''">
        <IMG src="/valamilyenkep.jpg">
    </TD>
<TD onclick="this.style.borderTopWidth='1cm'">
<IMG src=”valamilyenkpe.jpg”></TD>
</TR>
</TABLE>
<HEAD><STYLE>
    TD { border-top-color: red;
        border-width: 0.5cm; border-style: groove }
    .blue { border-top-color: blue }  
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
    <TD onmouseover="this.className='blue'"
        onmouseout="this.className=''">valami
    </TD>
<TD onmouseover="this.style.borderWidth='0.5cm';  this.style.borderTopColor='blue'">valami</TD>
</TR>
</TABLE>

  • border-right-color: Megadja az elem jobb oldali határának színét a hagyományos paraméterekkel.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { border-right-color : paraméter }
    Scriptben: objectum.style.borderRightColor [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530735%28v=VS.85%29.aspx

  • border-bottom-color: Megadja az elem alsó határának színét a hagyományos paraméterekkel.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { border-bottom-color : paraméter }
    Scriptben: objectum.style.borderBottomColor [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530725%28v=VS.85%29.aspx

  • border-left-color: Megadja az elem bal oldali határának színét a hagyományos paraméterekkel.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { border-left-color : paraméter }
    Scriptben: objectum.style.borderLeftColor [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530731%28v=VS.85%29.aspx

  • border-color: Megadja az elem határainak színét a hagyományos paraméterekkel - mind a 4 értéket.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { border-color : paraméter }
    Scriptben: objectum.style.borderColor [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530729%28v=VS.85%29.aspx)

    <td onmouseover="this.style.borderWidth='0.5cm';      this.style.borderColor='blue';this.style.borderStyle='solid'">valami</td>

  • border-top-style: Megadja az elem felső határának stílusát.
    Paraméterek: none (semmi; alapértelmezett), dotted (pontozott; min. Explorer 5.5), dashed (szaggatott vonalak), solid (sima vonal), double (dupla vonal; legalább 3 képpont vastag keret szükséges).
    3-dimenziós kerettípusok paraméterei: groove, ridge, inset, outset, window-inset, hidden. Ezt nem minden böngésző támogatja!
    HTML-minta: { border-top-style : paraméter }
    Scriptben: objectum.style.borderTopStyle [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530741%28v=VS.85%29.aspx)

    <TD onmouseover="this.style.borderWidth='0.5cm'; this.style.borderTopStyle='groove'">valami</td>

  • border-right-style: Megadja az elem jobb oldali határának stílusát. Paraméterek: mint fent.
    HTML-minta: { border-right-style : paraméter }
    Scriptben: objectum.style.borderRightStyle [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530736%28v=VS.85%29.aspx

  • border-bottom-style: Megadja az elem alsó határának stílusát. Paraméterek: mint fent.
    HTML-minta: { border-bottom-style : paraméter }
    Scriptben: objectum.style.borderBottomStyle [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530726(v=VS.85).aspx

  • border-left-style: Megadja az elem bal oldali határának stílusát. Paraméterek: mint fent.
    HTML-minta: { border-left-style : paraméter }
    Scriptben: objectum.style.borderLeftStyle [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530732(v=VS.85).aspx

  • border-style: Megadja az elem határainak stílusát - mind a 4 értéket. Paraméterek: mint fent.
    HTML-minta: { border-style : paraméterek }
    Scriptben: objectum.style.borderStyle [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530738%28v=VS.85%29.aspx

  • border-top: A felső határ leírása width (szélesség), style (stílus) és color (szín) szerint. Részletesebb beállításokat lásd feljebb!
    HTML-minta: { border-top : paraméterek }
    Scriptben: objectum.style.borderTop [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530739%28v=VS.85%29.aspx

  • border-right: A jobb oldali határ leírása width (szélesség), style (stílus) és color (szín) szerint. Részletesebb beállításokat lásd feljebb!
    HTML-minta: { border-right : paraméterek }
    Scriptben: objectum.style.borderRight [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530734(v=VS.85).aspx

  • border-bottom: Az alsó határ leírása width (szélesség), style (stílus) és color (szín) szerint. Részletesebb beállításokat lásd feljebb!
    HTML-minta: { border-bottom : paraméterek }
    Scriptben: objectum.style.borderBottom [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530724(v=VS.85).aspx

  • border-left: A bal oldali határ leírása width (szélesség), style (stílus) és color (szín) szerint. Részletesebb beállításokat lásd feljebb!
    HTML-minta: { border-left : paraméterek }
    Scriptben: objectum.style.borderLeft [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530730(v=VS.85).aspx

  • border: Az elem minden határának leírása width (szélesség), style (stílus) és color (szín) szerint. Részletesebb beállításokat lásd feljebb!
    HTML-minta: { border : paraméterek }
    Scriptben: objectum.style.border [ = paraméterek ]
    További ötletek és minták: http://msdn.microsoft.com/en-us/library/ms530744(v=VS.85).aspx

  • clear: A lebegő elemeket tünteti el a paraméter szerinti oldalról.
    Paraméterek: none (sehonnan), left (balról), right (jobbról), both (mindkettő).
    HTML-minta: { clear : paraméter }
    Scriptben: objectum.style.clear [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530747%28v=VS.85%29.aspx

  • hasLayout: Melyik elem van teljes szélességre pozicionálva? Csak lekérdezhető érték!
    Válasz-paraméterek: false (hamis), true (igaz).
    HTML-minta: Nem támogatott
    Scriptben: [ válasz_paraméter = ] objectum.currentStyle.hasLayout
    További ötletek és minták: http://msdn.microsoft.com/en-us/library/ms530764%28v=VS.85%29.aspx

  • styleFloat: Melyik oldalon lebeg az objektum?
    Paraméterek: horizontal (vízszintes; alapértelmezett; a legtöbb nyelvnél ez használatos), vertical-ideographic (a kelet-ázsiai nyelveknél szokásos írási módszer) Nem minden böngésző támogatja!
    HTML-minta: { layout-flow : paraméter }
    Scriptben: objectum.style.layoutFlow(v) [ = paraméter ]

  • layoutFlow: Megadja a tartalom írási irányát az adott objektumon belül
    Paraméterek: none (sehol; alapértelmezett), left (bal), right (jobb). Nem minden böngésző támogatja!
    HTML-minta: { float : paraméter }
    Scriptben: objectum.style.styleFloat [ = paraméter ]

  • layoutGridChar: Az egyes karakterek közti kötelező üres hely mérete. Nem minden böngésző támogatja!
    Paraméterek: none (alapértelmezés; nincs üres hely), auto (a legnagyobb karakterméret lesz megadva), százalék (egész szám, utána %-jel), méret (hosszúság a hagyományos mértékegységek szerint)
    HTML-minta: { layout-grid-char : paraméter }
    Scriptben: objectum.style.layoutGridChar [ = paraméter ]

  • layoutGridLine: Az egyes karaktersorok közti kötelező üres hely mérete.
    Paraméterek: none (alapértelmezés; nincs üres hely), auto (a legnagyobb karakterméret lesz megadva), százalék (egész szám, utána %-jel), méret (hosszúság a hagyományos mértékegységek szerint)
    HTML-minta: { layout-grid-line : paraméter }
    Scriptben: objectum.style.layoutGridLine [ = paraméter ]

  • layoutGridMode: Szabályozza, hogy melyik karakteres rendezésmód legyen aktuális.
    Paraméterek: line (csak sorban van rendezve), char (csak karakter-szerint van rendezve), both (alapértelmezés; mindkettő rendezés egyszerre) none (alapértelmezés; nincs üres hely).
    Főleg egyes ázsiai (pl.: kínai vagy japán) nyelveknél használt. Nem minden böngésző támogatja!
    HTML-minta: { layout-grid-mode : paraméter }
    Scriptben: objectum.style.layoutGridMode [ = paraméter ]

  • layoutGridType: A szöveg tartalmi elemeinek rendezési típusa.
    Paraméterek: loose (alapértelmezés; főleg japán és koreai nyelvnél használt), strict (egyaránt használt a kínai, a genko-japán és a koreai nyelveknél), fixed (egyéb ázsiai nyelveknél, illetve azonos távsort kívánó írásmódnál). Nem minden böngésző támogatja!
    HTML-minta: { layout-grid-type : paraméter }
    Scriptben: objectum.style.layoutGridType [ = paraméter ]

  • layoutGrid: A szöveg rendezési típusainak összesítése. Nem minden böngésző támogatja!
    Paraméterek: lásd az előző négy paramétert!
    HTML-minta: { layout-grid : paraméterek }
    Scriptben: objectum.style.layoutGrid [ = paraméterek ]

  • margin-top: Az elem felső margóját határozza meg.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { margin-top : paraméter }
    Scriptben: objectum.style.marginTop [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530808%28v=VS.85%29.aspx)

    <HR onclick="this.style.marginTop='2cm'" ondblclick="this.style.marginTop=''">

  • margin-right: Az elem jobb oldali margóját határozza meg.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { margin-right : paraméter }
    Scriptben: objectum.style.marginRight [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530806(v=VS.85).aspx

  • margin-bottom: Az elem alsó margóját határozza meg.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { margin-bottom : paraméter }
    Scriptben: objectum.style.marginBottom [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530802(v=VS.85).aspx

  • margin-left: Az elem bal oldali margóját határozza meg.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { margin-left : paraméter }
    Scriptben: objectum.style.marginLeft [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530804(v=VS.85).aspx

  • margin: Megadja az elemek margóinak 4 értékét felső, jobb, alsó, bal sorrendben.
    Paraméterek: mint az előző 4 esetben!
    HTML-minta: { margin : paraméternégyes }
    Scriptben: objectum.style.margin [ = paraméter-négyes ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530799(v=VS.85).aspx

  • padding-top: Megadja a szükséges helyet az objektum teteje és az egyéb tartalom között.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { padding-top : paraméter }
    Scriptben: objectum.style.paddingTop [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530839%28v=VS.85%29.aspx)

    <TD onmouseover="this.style.paddingTop='1cm'"    onmouseout="this.style.paddingTop=''"><IMG src="/valamikep.jpg"></TD>

  • padding-right: Megadja a szükséges helyet az objektum jobb oldala és az egyéb tartalom között.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { padding-right : paraméter }
    Scriptben: objectum.style.paddingRight [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530837(v=VS.85).aspx

  • padding-bottom: Megadja a szükséges helyet az objektum alja és az egyéb tartalom között.
    Paraméterek: hosszúság a szokásos mértékegységek szerint: percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a felső és az alsó margók egyenlőek).
    Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    HTML-minta: { padding-bottom : paraméter }
    Scriptben: objectum.style.paddingBottom [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530832(v=VS.85).aspx

  • paddign-left: Megadja a szükséges helyet az objektum bal oldala és az egyéb tartalom között.
    Paraméterek: hosszúság a mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ).
    HTML-minta: { padding-left : paraméter }
    Scriptben: objectum.style.paddingLeft [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530835(v=VS.85).aspx

  • paddign: Megadja a szükséges helyet az objektum oldalai és az egyéb tartalom között, a 4 érték sorrendje: felső, jobb, alsó, bal.
    Paraméterek: hosszúság a mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ).
    HTML-minta: { padding : paraméterek }
    Scriptben: objectum.style.padding [ = paraméterek ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms530830(v=VS.85).aspx

  • scrollbar-3dlight-color: Az oldalsó és az alsó gördítő sáv 3D-s megvilágított színeit adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-3dlight-color : színkód }
    Scriptben: objectum.style.scrollbar3dLightColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531153%28v=VS.85%29.aspx

  • scrollbar-arrow-color: Az oldalsó és az alsó gördítő sáv nyilainak színeit adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-arrow-color : színkód }
    Scriptben: objectum.style.scrollbarArrowColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531154(v=VS.85).aspx

  • scrollbar-base-color: Az oldalsó és az alsó gördítő sáv alapszínét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-base-color : színkód }
    Scriptben: objectum.style.scrollbarBaseColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531155(v=VS.85).aspx

  • scrollbar-darkshadow-color: Az oldalsó és az alsó gördítő sáv sötét háttérszínét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-darkshadow-color : színkód }
    Scriptben: objectum.style.scrollbarDarkShadowColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531156(v=VS.85).aspx

  • scrollbar-face-color: Az oldalsó és az alsó gördítő sáv gördülő téglájának színét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További kódok és minták itt!
    HTML-minta: { scrollbar-face-color : színkód }
    Scriptben: objectum.style.scrollbarFaceColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531157(v=VS.85).aspx

  • scrollbar-highlight-color: Az oldalsó és az alsó gördítő sáv háttérszínét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-highlight-color : színkód }
    Scriptben: objectum.style.scrollbarHighlightColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531158(v=VS.85).aspx

  • scrollbar-shadow-color: Az oldalsó és az alsó gördítő sáv 3D-s háttérszínét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-shadow-color : színkód }
    Scriptben: objectum.style.scrollbarShadowColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531159(v=VS.85).aspx

  • scrollbar-track-color: Az oldalsó és az alsó gördítő sáv közötti tér színét adja meg. Nem minden böngésző támogatja!
    Paraméterek: a hagyományos színkódok szerint.
    További színkódok és minták itt: http://tferi.hu/html-konyv/html-szinkiosztas
    HTML-minta: { scrollbar-track-color : színkód }
    Scriptben: objectum.style.scrollbarTrackColor [ = színkód ]
    További minták: http://msdn.microsoft.com/en-us/library/ms531160(v=VS.85).aspx

  • tableLayout: Az egyes speciális elemek szélességének megválasztása.
    Paraméterek: auto (alapértelmezés; a legnagyobb lehetséges cellaszélesség), fixed (a táblázat és az egyes oszlopok adott szélességűek lesznek).
    Csak a következő elemeknél használható: currentStyle, runtimeStyle, style, TABLE.
    HTML-minta: { table-layout : paraméter }
    Scriptben: objectum.style.tableLayout [ = paraméter ]
    További ötletek és minták: http://msdn.microsoft.com/en-us/library/ms531161%28v=VS.85%29.aspx

  • zoom: Nagyítás.
    Paraméterek: normal (alapértelmezés; 1-szeres nagyítás), nagyítás a hagyományok szerint. Minta itt: http://tferi.hu/html-konyv/css-mertektablazat
    Csak a következő elemeknél használható: currentStyle, runtimeStyle, style, TABLE.
    HTML-minta: { table-layout : paraméter }
    Scriptben: objectum.style.tableLayout [ = paraméter ]
    Nem minden böngésző támogatja!
    További minta: (Eredeti verzió: http://msdn.microsoft.com/en-us/library/ms531189(v=VS.85).aspx)

    <p align="center" onmouseover="this.style.zoom='200%'" onmouseout="this.style.zoom='100%'">
    <img src="/valamilyenkep.jpg" align="left"></p>