Írjunk stíluslapot!
Az eddigiekben csak használtuk a stíluslapokat, de nem tudtunk írni egyet. Nos, éppen itt az ideje!A parancsok és a lehetséges értékek használhatósága nem nehéz. Aki már használta valaha az OOP-ot (objektum-orientált programozást), már érteni fogja az öröklõdési mechanizmust, de a többieknek kicsit nehezebb dolguk lesz ezúttal.
A lényeg: ha egy tagnak megadjuk a kinézetét, akkor azon belül az összes tag ezt örökölni fogja, hacsak felül nem írjuk ezt!
Például ha a BODY taget kékre állítjuk és a B taget döntöttre, akkor mivel a B a BODY-n belül van, ezért a <B> és a </B> közötti rész kéken és döntötten jelenik meg. Ezt természetesen tovább lehet kutyulni össze-vissza öröklõdõ tulajdonságokkal, de nem feltétlenül érdemes. Véleményem szerint a fenti példában emlegetett B taget nem érdemes átdefiniálni "csak a hecc" kedvéért, mivel késõbbiekben nem tudunk kiigazodni az össze-vissza kutyult tulajdonságokon. Amit én személy szerint igen hasznosnak tartok, az a fejezetcímek (Hn) megvariálása.
Szülõk.Név (Paraméter1: Érték1, Érték2, Érték3; Paraméter2: Érték1, Érték2, Érték3)
A lehetséges stílusdefiníciók listája nem rövid, de hasznos lehet:
Még valami: a HTML-kódban egy adott paraméter értéke beállítható, ha objektum=paraméter_érték sor segítségével, ám ha simán az objektum kerül a forráskódba, akkor visszaadja a paraméter_értéket. Javaslat: sokszor nézze meg a forráskódot!
22.15.a.) Betû- és szövegformázások
- font-family: Simán megadja a betûtípus családjának nevét.
Paraméterek: családnevek: Times, Helvetica, Zapf-Chancery, Western, vagy Courier.
általános nevek:serif, sans-serif, cursive, fantasy, vagy monospace.
HTML-minta: { font-family : Paraméter }
Scriptben: objectum.style.fontFamily [ = Paraméter ] - font-style: Betûtípus.
Paraméretek: normal (= normál; alapértelmezett), italic (= döntött), oblique (= ez is döntött).
HTML-minta: { font-style : paraméter }
Scriptben: objectum.style.fontStyle [ = paraméter ] - font-variant: A kisbetûs betûk típusát adják meg.
Paraméterek: normal (=normál; alapértelmezett), small-caps (=kisméretű nagybetűk).
HTML-minta: { font-variant : paraméter }
Scriptben: objectum.style.fontVariant [ = paraméter ] - font-weight: A szöveg vastagságát adja meg.
Paraméterek: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
(Érthetőbben: 400=normal / normális; 700=bold / kövér)
HTML-minta: { font-weight : paraméter }
Scriptben: objectum.style.fontWeight [ = paraméter ] - font-size: Betûméret. Paraméter: abszolút-méret | relatív-méret | hossz | százalék. Alapérték: medium (közepes).
Az abszolút méret számokkal értelmezhetõ vagy kulcsszavak: xx-small | x-small | small | medium | large | x-large | xx-large.
Relatív méret lehetséges értékei: larger | smaller.
Hosszúság: Egy abszolút (szám)érték a méret részére.
A százalékérték a szülõelem %-ában értendõ. Csak egész szám lehet, melyet közvetlenül követ a %-jel.
Lehetséges hosszúság-egységeket lásd itt: htmllang7.html.
HTML-minta: { font-size : paraméter }
Scriptben: objectum.style.fontSize [ = paraméter ]
Fontos megjegyzés: hacsak a "!DOCTYPE" deklarációjában másképp nem rendelkezik a programozó, akkor az Internet Explorer 6-tól fogva az addigi "medium" helyett a betűméret alapértéke "small" lett. - @font-face: Megadja a HTML-dokumentumba beágyazott betûtípust.
Paraméterek: @font-face {font-family: családnév; src:url(valós cím);}
HTML-minta: @font-face { paraméter }
Scriptben: nem támogatott!
Megjegyzés: célszerű a betűtípus mellett megadni a pontos (esetleg relatív) URL-t is, mivel így az extrémnek számító típusok is biztosan elérhetővé válnak. - font: Összesíti a különbözõ betûbeállításokat.
Paraméterek: { font: [ font-style || font-variant || font-weight ] font-size [ line-height ] font-family}
1. minta: SPAN {font: 24 'Comic Sans MS'}
2. minta: <SPAN STYLE="font:italic normal bolder 12pt Arial">
További érdekes paraméterek:
caption : A felhasználó által preferált betűstílus használható a feliratokban, a nyomógombokon, a címkéken, stb.
icon : Az ikon-címkék feliratának átgondolása.
menu : A menük betűinek átfogalmazása.
message-box : A párbeszéd(dialógus)-ablakok betűinek átvariálása.
small-caption : A kis irányító-billentyűk megjelenésének átírása.
status-bar : Az ablak státusz- (állapot-)sorának variálása.
HTML-minta: { font : paraméterlista }
Scriptben: objectum.style.font [ = paraméterlista ] - letter-spacing: A betûk közötti helyet adja meg.
Paraméterek: { letter-spacing: normal | hosszúság_egység }
HTML-minta: BLOCKQUOTE { letter-spacing: 1.0em }
További hosszúság-egységeket lásd itt: htmllang7.html.
HTML-minta: { letter-spacing : paraméter }
Scriptben: objectum.style.letterSpacing [ = paraméter ] - line-height: Bekezdésen belül a sorok távolságát adja meg.
Paraméterek: normal (alapértékek), szám, hossz, százalék.
Minta: P { line-height:8mm}
További hosszúság-egységeket lásd itt: htmllang7.html.
HTML-minta: { line-height : paraméter }
Scriptben: objectum.style.lineHeight [ = paraméter ] - text-align: Hogyan igazítsa a szöveget a tagen belül.
Paraméterek: left (balra; alapértelmezés), right (jobbra), center (középre), justify (hasábszerűen, de ez nem mindenhol működik megfelelően - ráadásul lassú!).
HTML-minta: { text-align : paraméter }
Scriptben: objectum.style.textAlign [ = paraméter ] - text-align-last: A szöveg igazítása az utolsó elemhez képest.
Új paraméterek a text-align-hoz képest: auto (automatikus; alapértelmezés; 100%-os öröklődés), inherit (rendezés olyan, mint a szülő-objektumban).
HTML-minta: { text-align-last : paraméter }
Scriptben: objectum.style.textAlignLast(v) [ = paraméter ] - text-autospace: A szövegsor automatikus feltöltése üres helyekkel.
Paraméterek: none (=nincs extra feltöltés; alapértelmezés), ideograph-alpha (extra üres helyek beszúrása betűk közé; javasolt nyelvek: latin-betűsök, cirill, görög, arab és héber), ideograph-numeric (extra ürtes helyek a betűk és a számok közé), ideograph-parenthesis (extra üres helyek a karakterek és az írásjelek közé), ideograph-space (üres helyek beszúrása minden lehetséges helyre).
HTML-minta: { text-align-last : paraméter }
Scriptben: objectum.style.textAlignLast(v) [ = paraméter ] - text-decoration: Szöveg diszítések.
Paraméterek: none (semmi), underline (aláhúzott), overline (föléhúzott), line-through (keresztülhúzott), blink (villogó, Explorer nem támogatja).
HTML-Minta: A:link, A:visited, A:active, A:hover { text-decoration: underline}
További minta: minta36.html.
HTML-minta: { text-decoration : paraméter }
Scriptben: objectum.style.textDecoration [ = paraméter ] - textDecorationBlink: Szöveg villog. Internet Explorer nem támogatja.
Paraméterek: true (=lehetséges); false (tiltott).
HTML-minta: Nem támogatott!
Scriptben: objectum.style.textDecorationBlink [ = paraméter ] - textDecorationLineThrough: Szöveg keresztülhúzott.
Paraméterek: true (=lehetséges); false (tiltott).
HTML-minta: Nem támogatott!
Scriptben: objectum.style.textDecorationLineThrough [ = paraméter ] - textDecorationNone: Szöveg diszítés nélkül.
Paraméterek: true (=lehetséges); false (tiltott).
HTML-minta: Nem támogatott!
Scriptben: objectum.style.textDecorationNone [ = paraméter ] - textDecorationOverline: Szöveg föléhúzva.
Paraméterek: true (=lehetséges); false (tiltott).
HTML-minta: Nem támogatott!
Scriptben: objectum.style.textDecorationOverline [ = paraméter ] - textDecorationUnderline: Szöveg aláhúzva.
Paraméterek: true (=lehetséges); false (tiltott).
HTML-minta: Nem támogatott!
Scriptben: objectum.style.textDecorationUnderline [ = paraméter ] - text-indent: Bekezdés elsõ sorának behúzása hosszmértékkel vagy százalékkal.
Minta: P { text-indent: 3em }
Lehetséges paramétereket lásd itt: htmllang7.html.
HTML-minta: { text-indent : paraméter }
Scriptben: objectum.style.textIndent [ = paraméter ] - text-justify: Egy adott objektumon belüli hasábrendezést teszi szabályozhatóvá.
Paraméterek: auto (A böngésző alapértelmezése szerint), distribute (újság-szerűen több SPACE beszúrásával; főleg ázsiai nyelveknél), distribute-all-lines (mint fent, de az utolsó sort is így rendezi), distribute-center-last (jelenleg nem támogatott), inter-cluster (nincsenek szavak közti felesleges üres helyek), inter-ideograph (a képírásos nyelvek igényei szerint rendezi a szöveget), inter-word (a szavak közti rést üres helyekkel tölti fel; ez a leggyorsabb módszer; nem üködik a bekezdés utolsó sorában.), kashida (a szöveg sorait rendezi egy kiválaszott ponthoz; főként az arab nyelveknél használt; minimum Explorer 5.5-nél), newspaper (csökkenti, illetve növeli a szavak és a betűk közti üres helyeket; ideális a latinbetűs nyelveknek)
További minta: minta37.html.
HTML-minta: { text-justify : paraméter }
Scriptben: objectum.style.textJustify [ = paraméter ] - text-kashida-space: Egy adott rendezési helyet jelöl ki a kashida-típusú rendezéshez.
Paraméterek: inherit (rendezési elv megegyezik a szülő-objektummal), százalék_érték (az adott sor %-ában; egész szám, melyet egy %-jel követ).
HTML-minta: { text-kashida-space : paraméter }
Scriptben: objectum.style.textKashidaSpace [ = paraméter ] - text-overflow: Jelzi (...) módszerrel, ha a szöveg nem fér ki a megadott keretbe.
Paraméterek: clip (nem jelez sehogy; alapértelmezés); ellipses (...) - jelzés.
HTML-minta: { text-overflow : paraméter }
Scriptben: objectum.style.textOverflow [ = paraméter ] - text-transform: A szöveg méretezését változtatja meg.
Paraméterek: capitalize (minden szó elsõ betûjét naggyá teszi), uppercase (minden betût naggyá tesz), lowercase (minden betût kicsivé teszi), none (semmi; alapértelmezés).
HTML-minta: { text-transform : paraméter }
Scriptben: objectum.style.textTransform [ = paraméter ] - text-underline-position: Dekorációs pozíció szövegeknél.
Paraméterek: above (felette), below (alatta), auto (alapértelmezés; Japán nyelvi dekorációnál fontos; többinél azonos a below-val; min. Explorer 6-osnál), auto-pos (azonos az auto-val).
HTML-minta: { text-underline-position : paraméter }
Scriptben: objectum.style.textUnderlinePosition [ = paraméter ] - vertical-align: A szöveg függõleges igazítását határozza meg.
Paraméterek: auto (automatikus), baseline (alapvonal), sub (alá), super (fölé), top (telejére), middle (középre), bottom (legalulra), text-top (szöveg telejére), text-bottom (szöveg legaljára).
HTML-minta: { vertical-align : paraméter }
Scriptben: objectum.style.verticalAlign [ = paraméter ] - white-space: A szöveg megtörését szabályozza.
Paraméterek: normal (alapértelmezett; a sorok automatikusan megtörnek), nowrap (nincs megtörés); pre (a sortörések elő vannak készítve; min. Explorer 6-nál)
HTML-minta: { white-space : paraméter }
Scriptben: objectum.style.whiteSpace [ = paraméter ] - width: Az adott objektum szélességét szabályozza.
Paraméterek: default (alapértelmezett; megegyezik a szülő-objektummal), width (hosszúság-egységek szerinti szélesség. Részletek: htmllang7.html), százalék_érték (egész szám, melyet egy %-jel követ)
HTML-minta: { width : paraméter }
Scriptben: objectum.style.width [ = paraméter ] - word-break: Szótörés. Magyarul szótagolás.
Paraméterek: normal (alapértelmezett; megengedett a sortörés a szavakon belül), break-all (értelem szerint törje meg a szöveget a nem-ázsiai nyelveknél), keep-all (Nem enged meg sortörést a kínai, japán és a koreai nyelvnél. Nem ázsiai nyelveknél azonos az alapértelmezett lehetőséggel.
HTML-minta: { word-break : paraméter }
Scriptben: objectum.style.wordBreak [ = paraméter ] - word-spacing: a szavak közötti üres hely méretét szabályozza.
Paraméterek: normal (alapértelmezett; a hagyományos méret), szabályozott_méret (szabályozott méretű beszúrási egység. Lehetséges paramétereket lásd itt: htmllang7.html)
HTML-minta: { word-spacing : paraméter }
Scriptben: objectum.style.wordSpacing [ = paraméter ] - word-wrap: túl hosszú szavak tördelésének engedélyezése.
Paraméterek: normal (alapértelmezett; a hosszú szavak megtörhetőek a határnál), break-word (lehetőség szerint elkerülendő a szótörés).
HTML-minta: { word-wrap : paraméter }
Scriptben: objectum.style.wordWrap [ = paraméter ] - writing-mode: Írási irány választása. Minimum Explorer 5.5-nél.
Paraméterek: lr-tb (alapértelmezett; balról jobbra, majd fentről lefelé), tb-rl (fentről lefelé, majd jobbról balra írás; főként kelet-ázsiai nyelveknél).
HTML-minta: { writing-mode : paraméter }
Scriptben: objectum.style.writingMode [ = paraméter ]
22.15.b.) Színek és háttérértékek
- color: A szöveg színének meghatározása. Minták:
EM { color: red } /* sima angol néven */
EM { color: #F00 } /* egyszerű RGB-kód */
EM { color: #FF0000 } /* #RRGGBB-típusú kód */
EM { color: rgb 1.0 0.0 0.0 } /* Lehetséges tartomány a színeknél: 0.0 - 1.0 */
További színkódok és minták itt!
HTML-minta: { color : paraméter }
Scriptben: objectum.style.color [ = paraméter ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 rendszer-színkódok - csak a CSS-ben!
- Activeborder
- Az aktív ablak fejlécének színe
- Activecaption
- Az aktív ablak fejlécén lévő cím színe
- Appworkspace
- Az aktív alkalmazás háttérszíne
- Background
- Az asztal háttérszíne
- Buttonface
- A gombok felületének színe
- Buttonhighlight
- Az ablakban található gombok árnyékának színe
- Buttontext
- Az ablakban található gombok feliratának színe
- Captiontext
- Ablakban a címsorok színe
- Graytext
- Inaktív szövegek színe
- Highlight
- Legördülő listában megjelölt elem színe
- Hightlighttext
- Kijelölt szövegrész színe
- Inactiveborder
- Inaktív ablak fejlécének színe
- Inactivecaption
- Inaktív ablak fejlécén található cím színe
- Infobackground
- A kis előugró súgók háttérszíne
- Infotext
- A ki előugró súgók szövegének színe
- Menu
- A menüsorok színe
- Menutext
- A menüelemek színe
- Scrollbar
- Az oldalsó gördítősáv színe
- Threeddarkshadow
- A térbeli elemek sötét árnyékának színe
- Threedface
- A térbeli elemek színe
- Threedhighlight
- Az éppen kiválasztott térbeli elem színe
- Threedlightshadow
- A térbeli elemek világos árnyékának színe
- Threedshadow
- A térbeli elemek sötét árnyékának színe
- Window
- Az aktuális dokumentumablak háttérszíne
- Windowframe
- Az ablakkeret színe
- Windowtext
- Az aktuális dokumentumablakban lévő normál szöveg színe
Eredeti | Magyarázat |
body { font-family: Courier New, Arial, Times New Roman, Times, Garamond; background-color: #00FA9A; color: #008000; text-align: left; scrollbar-arrow-color: green; scrollbar-face-color: #00FF8A; scrollbar-highlight-color: black; scrollbar-shadow-color: green; scrollbar-track-color: #32CD32; } | body { Betűtípus Háttérszín kódja Szövegszín kódja Szöveg rendezési módja Az oldalsó gördítő csík nyilának színe Az oldalsó gördítő csík gombjainak alapszíne Az oldalsó gördítő csík kiemelt részeinek színe Az oldalsó gördítő csík árnyékának színe Az oldalsó gördítő csík alapszíne } |
22.15.c.) Elemek határai
- border-top-width: Megadja az elem felsõ határának szélességét.
Paraméterek: thin (vékony), medium (közepes), thick (vastag) valamint méret (számmal és mértékegységgel).
HTML-minta: { border-top-width : paraméter }
Scriptben: objectum.style.borderTopWidth [ = paraméter ] - border-right-width: Megadja az elem jobb oldali határának szélességét.
Paraméterek: thin (vékony), medium (közepes), thick (vastag) valamint méret (számmal és mértékegységgel).
HTML-minta: { border-right-width : paraméter }
Scriptben: objectum.style.borderRightWidth [ = paraméter ] - border-bottom-width: Megadja az elem alsó határának szélességét.
Paraméterek: thin (vékony), medium (közepes), thick (vastag) valamint méret (számmal és mértékegységgel).
HTML-minta: { border-bottom-width : paraméter }
Scriptben: objectum.style.borderBottomWidth [ = paraméter ] - border-left-width: Megadja az elem bal oldali határának szélességét.
Paraméterek: thin (vékony), medium (közepes), thick (vastag) valamint méret (számmal és mértékegységgel).
HTML-minta: { border-left-width : paraméter }
Scriptben: objectum.style.borderLeftWidth [ = paraméter ] - border-width: Megadja az elem határainak szélességét - a 4 érték sorrendje: felső, jobb, alsó, bal.
Paraméterek: thin, medium, thick valamint méret (számmal).
HTML-minta: { border-width : paraméterek }
Scriptben: objectum.style.borderWidth [ = paraméterek ] - border-top-color: Megadja az elem felsõ határának színét a hagyományos paraméterekkel. További színkódok és minták itt!
HTML-minta: { border-top-color : paraméter }
Scriptben: objectum.style.borderTopColor [ = paraméter ] - 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!
HTML-minta: { border-right-color : paraméter }
Scriptben: objectum.style.borderRightColor [ = paraméter ] - 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!
HTML-minta: { border-bottom-color : paraméter }
Scriptben: objectum.style.borderBottomColor [ = paraméter ] - 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!
HTML-minta: { border-left-color : paraméter }
Scriptben: objectum.style.borderLeftColor [ = paraméter ] - border-color: Megadja az elem határainak színét a hagyományos paraméterekkel - mind a 4 értéket.
HTML-minta: { border-color : paraméter }
Scriptben: objectum.style.borderColor [ = paraméter ] - 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.
Konkrét példa: minta38.html. Ennél a példánál fokozottan javasolt a mintafájl megnézése.
HTML-minta: { border-top-style : paraméter }
Scriptben: objectum.style.borderTopStyle [ = paraméter ] - border-right-style: Megadja az elem jobb oldali határának stílusát. Paraméterek: Lásd border-top-style.
HTML-minta: { border-right-style : paraméter }
Scriptben: objectum.style.borderRightStyle [ = paraméter ] - border-bottom-style: Megadja az elem alsó határának stílusát. Paraméterek: Lásd border-top-style.
HTML-minta: { border-bottom-style : paraméter }
Scriptben: objectum.style.borderBottomStyle [ = paraméter ] - border-left-style: Megadja az elem bal oldali határának stílusát. Paraméterek: Lásd border-top-style.
HTML-minta: { border-left-style : paraméter }
Scriptben: objectum.style.borderLeftStyle [ = paraméter ] - border-style: Megadja az elem határainak stílusát - mind a 4 értéket. Paraméterek: Lásd border-top-style.
HTML-minta: { border-style : paraméterek }
Scriptben: objectum.style.borderStyle [ = paraméterek ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 ] - 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 - 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)
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).
Minimum Internet Explorer 5.5-tel!
Működő verziós minta: minta39.html.
HTML-minta: { float : paraméter }
Scriptben: objectum.style.styleFloat [ = paraméter ] - layoutGridChar: Az egyes karakterek 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)
Minimum Internet Explorer 5-tel!
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)
Minimum Internet Explorer 5-tel!
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 ez a beállítás Minimum Internet Explorer 5-tel!
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).
Minimum Internet Explorer 5-tel!
HTML-minta: { layout-grid-type : paraméter }
Scriptben: objectum.style.layoutGridType [ = paraméter ] - layoutGrid: A szöveg rendezési típusainak összesítése.
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 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).
HTML-minta: { margin-top : paraméter }
Scriptben: objectum.style.marginTop [ = paraméter ] - margin-right: Az elem jobb oldali margóját határozza meg.
Paraméterek: hosszúság a mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a bal és a jobb margók egyenlőek).
HTML-minta: { margin-right : paraméter }
Scriptben: objectum.style.marginRight [ = paraméter ] - margin-bottom: Az elem alsó margóját határozza meg.
Paraméterek: hosszúság a 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).
HTML-minta: { margin-bottom : paraméter }
Scriptben: objectum.style.marginBottom [ = paraméter ] - margin-left: Az elem bal oldali margóját határozza meg.
Paraméterek: hosszúság a mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ), auto (alapértelmezett; a bal és a jobb margók egyenlőek).
HTML-minta: { margin-left : paraméter }
Scriptben: objectum.style.marginLeft [ = paraméter ] - 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éternégyes ] - 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 mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ).
HTML-minta: { padding-top : paraméter }
Scriptben: objectum.style.paddingTop [ = paraméter ] - 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 mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ).
HTML-minta: { padding-right : paraméter }
Scriptben: objectum.style.paddingRight [ = paraméter ] - 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 mértékegységek szerint, percentage (százalék; egész érték, melyet egy %-jel követ).
HTML-minta: { padding-bottom : paraméter }
Scriptben: objectum.style.paddingBottom [ = paraméter ] - 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 ] - 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 ] - scrollbar-3dlight-color: Az oldalsó és az alsó gördítő sáv 3D-s megvilágított színeit adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-3dlight-color : szinkód }
Scriptben: objectum.style.scrollbar3dLightColor [ = szinkód ] - scrollbar-arrow-color: Az oldalsó és az alsó gördítő sáv nyilainak színeit adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-arrow-color : szinkód }
Scriptben: objectum.style.scrollbarArrowColor [ = szinkód ] - scrollbar-base-color: Az oldalsó és az alsó gördítő sáv alapszínét adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-base-color : szinkód }
Scriptben: objectum.style.scrollbarBaseColor [ = szinkód ] - scrollbar-darkshadow-color: Az oldalsó és az alsó gördítő sáv sötét háttérszínét adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-darkshadow-color : szinkód }
Scriptben: objectum.style.scrollbarDarkShadowColor [ = szinkód ] - 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.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-face-color : szinkód }
Scriptben: objectum.style.scrollbarFaceColor [ = szinkód ] - scrollbar-highlight-color: Az oldalsó és az alsó gördítő sáv háttérszínét adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-highlight-color : szinkód }
Scriptben: objectum.style.scrollbarHighlightColor [ = szinkód ] - scrollbar-shadow-color: Az oldalsó és az alsó gördítő sáv 3D-s háttérszínét adja meg.
Paraméterek: a hagyományos színkódok szerint. Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-shadow-color : szinkód }
Scriptben: objectum.style.scrollbarShadowColor [ = szinkód ] - scrollbar-track-color: Az oldalsó és az alsó gördítő sáv közötti tér színét adja meg.
Paraméterek: a hagyományos színkódok szerint.
Minimum Internet Explorer 5.5-től.
További kódok és minták itt!
HTML-minta: { scrollbar-track-color : szinkód }
Scriptben: objectum.style.scrollbarTrackColor [ = szinkód ] - 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).
Minimum Internet Explorer 5-től.
Csak a következő elemeknél használható: currentStyle, runtimeStyle, style, TABLE.
HTML-minta: { table-layout : paraméter }
Scriptben: objectum.style.tableLayout [ = paraméter ] - zoom: Nagyítás.
Paraméterek: normal (alapértelmezés; 1-szeres nagyítás), nagyítás a hagyományos mértékegységek szerint.
Működő példa: minta40.html.
Minimum Internet Explorer 5.5-től.
Csak a következő elemeknél használható: currentStyle, runtimeStyle, style, TABLE.
HTML-minta: { table-layout : paraméter }
Scriptben: objectum.style.tableLayout [ = paraméter ]
22.15.d.) Osztályozási tulajdonságok
- display: Meghatározza a megjelenített elem rendezési tulajdonságait.
Paraméterek: none (nincs rendezve), block (blokk-elemként), inline (egysorban; alapértelmezett), inline-block (egysorban, de blokk-elemként van rendezve), list-item (lista-elem előtag megjelenítése és blokk-elemként; min. Internet Explorer 6), table-header-group (táblázat fejléce; mindig a táblázat sorai előtt jelenik meg), table-footer-group (táblázat lábléce; mindig a táblázat sorai után jelenik meg).
HTML-minta: { display : paraméter }
Scriptben: objectum.style.display [ = paraméter ] - list-style-type: A definiált listaelem jelzését határozza meg. Fontos! Kizárólag a LI, OL, UL, currentStyle, runtimeStyle és style elemeknél használható.
Paraméterek: disc (alapértelmezett; egyszerű ovális), circle (sima kör), square (sima négyzet), decimal (pl.: 1,2,3, stb.), lower-roman (pl.: i, ii, iii, iv, stb.), upper-roman (pl.: I, II, III, IV, stb.) lower-alpha (pl.: a,b,c,d, stb.), upper-alpha (pl.: A,B,C,D, stb.) , none (semmilyen).
HTML-minta: { list-style-type : paraméter }
Scriptben: objectum.style.listStyleType [ = paraméter ] - list-style-image: Egy képet határoz meg, amely listaelem jelzõjeként szolgál. Fontos! Kizárólag a LI, OL, UL, currentStyle, runtimeStyle és style elemeknél használható.
Paraméterek: none (semmilyen), illetve url(pontosan).
HTML-minta: { list-style-image : paraméter }
Scriptben: objectum.style.listStyleImage [ = paraméter ] - list-style-position: Meghatározza a listaelem jelzõjének helyét. Fontos! Kizárólag a LI, OL, UL, currentStyle, runtimeStyle és style elemeknél használható.
Paraméterek: inside (a bekezdésen belül), outside (alapértelmezett; a bekezdésen kívül).
HTML-minta: { list-style-position : paraméter }
Scriptben: objectum.style.listStylePosition [ = paraméter ] - list-style: Meghatározza a listaelem három jellemzõjét. Sorban: típus, pozíció és kép - ebben a sorrendben! Paramétereket lásd fent! HTML-minta: { list-style : paraméterek }
Scriptben: objectum.style.listStyle [ = paraméter ]
22.15.e.) Pozícionálási tulajdonságok
- bottom: Megadja az objektum alsó szélét a következő pozicionálási műveletnek.
Paraméterek: auto (alapértelmezett; a HTML-összeállításától függő helyi érték), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { bottom : paraméter }
Scriptben: objectum.style.bottom [ = paraméter ] - top: Megadja az objektum felső szélét a következő pozicionálási műveletnek.
Paraméterek: auto (alapértelmezett; a HTML-összeállításától függő helyi érték), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { top : paraméter }
Scriptben: objectum.style.top [ = paraméter ] - left: Megadja az egyes elem bal oldali elhelyezkedését a dokumentum-hierarchiában. Igen hasznos a következő objektum pozicionálásához.
Paraméterek: auto (alapértelmezett), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { left : paraméter }
Scriptben: objectum.style.left [ = paraméter ]
Működő minta: minta43.html - right: Megadja az egyes elem jobb oldali elhelyezkedését a dokumentum-hierarchiában. Igen hasznos a következő objektum pozicionálásához.
Paraméterek: auto (alapértelmezett), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { right : paraméter }
Scriptben: objectum.style.right [ = paraméter ]
- height: Megadja az egyes elem magasságát.
Paraméterek: auto (alapértelmezett), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { height : paraméter }
Scriptben: objectum.style.height [ = paraméter ]
Működő minta: minta42.html - width: Megadja az egyes elem szélességét.
Paraméterek: auto (alapértelmezett), hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { width : paraméter }
Scriptben: objectum.style.width [ = paraméter ]
- clipLeft: Visszaadja az objektum bal oldali koordinátáját.
Használata: [ visszaadott_érték = ] currentStyle.clipLeft
Paraméterek: auto (automatikus érték), hosszúság-egység (számmal és mértékegységgel).
Csak a currentStyle elemen belül lehet használni!
Működő minta: minta41.html - clipRight: Visszaadja az objektum jobb oldali koordinátáját.
Használata: [ visszaadott_érték = ] currentStyle.clipRight
Paraméterek: auto (automatikus érték), hosszúság-egység (számmal és mértékegységgel).
Csak a currentStyle elemen belül lehet használni!
Működő minta: minta41.html - clipTop: Visszaadja az objektum felső koordinátáját.
Használata: [ visszaadott_érték = ] currentStyle.clipTop
Paraméterek: auto (automatikus érték), hosszúság-egység (számmal és mértékegységgel).
Csak a currentStyle elemen belül lehet használni!
Működő minta: minta41.html - clip: Az egyes elemek részeinek összekapcsolását, illetve levágását határozza meg.
Paraméterei: auto vagy téglalap leírása "rect(top right bottom left)" formátum sorrendben.
HTML-minta: { clip : paraméter }
Scriptben: objectum.style.clip [ = paraméter ]
Működő minta: minta41.html - min-height: Megadja a cellaelem minimális szélességét. Fontos! Kizárólag a TD, TH, TR, currentStyle, runtimeStyle és style elemeknél használható. Minimum Internet Explorer 6-nál!
Paraméter: hosszúság-egység (számmal és mértékegységgel), százalék_érték (egész szám, melyet %-jel követ).
HTML-minta: { min-height : paraméter }
Scriptben: objectum.style.minHeight [ = paraméter ]
- overflow-x: Meghatározza, hogy mi történjen az elem tartalmával, ha eléri a szélességét.
Paraméterek: visible (látható; alapértelmezett; a tartalom teljesen kiírásra kerül és az elemek mellé nem kerül oda a gördítőcsík; a méret átírható), scroll (gördíthető a tartalom teljesen kiírásra kerül és az elemek mellé odakerül a gördítőcsík is), hidden (rejtett; a tartóba be nem férő objektumok nem kerülnek kiírásra), auto (a gördítőcsík csak szükség esetén jelenik meg).
HTML-minta: { overflow-x : paraméter }
Scriptben: objectum.style.overflowX [ = paraméter ]
Működő minta: minta44.html - overflow-y: Meghatározza, hogy mi történjen az elem tartalmával, ha eléri a magasságát.
Paraméterek: visible (látható; alapértelmezett; a tartalom teljesen kiírásra kerül és az elemek mellé nem kerül oda a gördítőcsík; a méret átírható), scroll (gördíthető a tartalom teljesen kiírásra kerül és az elemek mellé odakerül a gördítőcsík is), hidden (rejtett; a tartóba be nem férő objektumok nem kerülnek kiírásra), auto (a gördítőcsík csak szükség esetén jelenik meg).
HTML-minta: { overflow-y : paraméter }
Scriptben: objectum.style.overflowY [ = paraméter ]
Működő minta: minta44.html - overflow: Meghatározza, hogy mi történjen az elem tartalmával, ha eléri a szélességét és a magasságát.
Paraméterek: visible (látható; alapértelmezett; a tartalom teljesen kiírásra kerül és az elemek mellé nem kerül oda a gördítőcsík; a méret átírható), scroll (gördíthető a tartalom teljesen kiírásra kerül és az elemek mellé odakerül a gördítőcsík is), hidden (rejtett; a tartóba be nem férő objektumok nem kerülnek kiírásra), auto (a gördítőcsík csak szükség esetén jelenik meg).
HTML-minta: { overflow : paraméter }
Scriptben: objectum.style.overflow [ = paraméter ]
Működő minta: minta44.html - position: Mi legyen az elem pozíciója a szülõhöz képest?
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Alkalmazható irányok: left (bal), right (jobb), top (teteje), bottom (alja).
Minta a bal felsõ sarokra:
<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">
Minta egy másik elhelyezkedésre:
<p>Felső index <SPAN STYLE="position: relative; top:-3px">xyz</SPAN> ebben a sorban.
- posLeft: A bal oldali pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "left" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posLeft [ = paraméter ] - posRight: A jobb oldali pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "right" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posRight [ = paraméter ] - posTop: A felső pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "top" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posTop [ = paraméter ] - posBottom: Az alsó oldali pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "bottom" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posBottom [ = paraméter ] - posHeight: A magassági pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "height" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posBottom [ = paraméter ] - posWidth: A szélességi pozíció a szülőhöz képest.
Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás számmal és mértékegységgel), relative (relatív pozicionálás számmal és mértékegységgel).
Használata azonos a "width" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.posWidth [ = paraméter ] - pixelHeight: Beállítja, vagy megadja az elem szélességi pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "height" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelHeight [ = paraméter ] - pixelBottom: Beállítja, vagy megadja az elem alsó pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "bottom" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelBottom [ = paraméter ] - pixelLeft: Beállítja, vagy megadja az elem bal oldali pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "left" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelLeft [ = paraméter ] - pixelRight: Beállítja, vagy megadja az elem jobb oldali pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "right" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelRight [ = paraméter ] - pixelTop: Beállítja, vagy megadja az elem felső pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "top" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelTop [ = paraméter ] - pixelWidth: Beállítja, vagy megadja az elem szélességi pozícióját.
Paraméter: egész_szám képpontban értve.
Használata azonos a "width" attribútummal!
HTML-minta: Nem támogatott!
Scriptben: objectum.style.pixelWidth [ = paraméter ] - visibility: A pozicionált elemek láthatóságának meghatározása.
Paraméterek: visible (látható), hidden (rejtett), inherit (örökölt; alapértelmezett).
HTML-minta: { visibility : paraméter }
Scriptben: objectum.style.visibility [ = paraméter ] - z-index: Megadja az egyes elemek sorrendjét.
Paraméterek: auto (ahogy a kódban következik; alapértelmezett) ,vagy egész_szám. Azonos értékû elemeknél a leírási sorrend számít.
HTML-minta: { z-index : paraméter }
Scriptben: objectum.style.zIndex [ = paraméter ]
22.15.f.) Nyomtatási tulajdonságok
- page-break-before: Az oldaltördeléseket állítja be - a megfelelõ elem elõtt.
Paraméterek: auto (oldaltörés automatikusan a szükséges helyen; alapértelmezett), always (mindig törje meg az oldalt az elem elõtt), left (ugyanaz, mint az always), right (ugyanaz, mint az always), empty string (ne szúrjon be oldaltörést).
HTML-minta: { page-break-before : paraméter }
Scriptben: objectum.style.pageBreakBefore [ = paraméter ] - page-break-after: Az oldaltördeléseket állítja be - a megfelelõ elem után.
Paraméterek: auto (oldaltörés automatikusan a szükséges helyen; alapértelmezett), always (mindig törje meg az oldalt az elem elõtt), left (ugyanaz, mint az always), right (ugyanaz, mint az always), empty string (ne szúrjon be oldaltörést).
HTML-minta: { page-break-after : paraméter }
Scriptben: objectum.style.pageBreakAfter [ = paraméter ]
22.15.g.) Pszeudo-osztályok és egyéb tulajdonságok
- !important deklaráció: A későbbi tulajdonságokat felülírja.
Működő minta: minta45.html
Paraméterek: Bármilyen CSS-attribútum.
HTML-minta: { paraméter!important }
Scriptben: Nem támogatott. - :active pszeudo-osztály: Az a HTML-tag stílusát határozza meg aktív állapotban.
Csak itt használható!
Mintapélda: <STYLE> A:active { font-weight:bold; color:purple } </STYLE>
HTML-minta: [A]:active { szabályok }
Scriptben: Nem támogatott. - :first-letter pszeudo-elem: Az objektum első betű stílusát határozza meg!
Minimum Internet Explorer 5.5-nél.
Működő minta: minta46.html
HTML-minta: :first-letter { szabályok }
Scriptben: Nem támogatott. - :first-line pszeudo-elem: Az objektum első sorának stílusát határozza meg.
Minimum Internet Explorer 5.5-nél.
Működő minta: minta46.html
HTML-minta: :first-line { szabályok }
Scriptben: Nem támogatott. - :hover pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az egérmutató a link felett van. Csak itt használható!
Mintapélda: <STYLE> A:hover { font-weight:bold; color:red } </STYLE>
HTML-minta: [A]:hover { szabályok }
Scriptben: Nem támogatott. - :link pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az elem még nem volt meglátogatva. Csak itt használható!
Mintapélda: <STYLE> A:link { color:#C0C0C0 } </STYLE>
HTML-minta: [A]:link { szabályok }
Scriptben: Nem támogatott. - :visited pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az elem már meg volt látogatva. Csak itt használható!
Mintapélda: <STYLE> A:visited { font-weight:bolder } </STYLE>
HTML-minta: [A]:visited { szabályok }
Scriptben: Nem támogatott. - @charset szabály: Meghatározza, hogy melyik külső karakterkészlet használható.
Mintapélda: @charset "Windows-1251";
HTML-minta: @charset KarakterkészletLeírás
Scriptben: Nem támogatott. - @font-face szabály: A HTML-dokumentumba beágyazott karakterkészlet meghatározása.
Paraméterek: font-family:fontFamilyName (betűkészlet neve), src:url(pontosan) (megtalálási helye; relatív vagy abszolút URL!)
Működő minta: minta47.html
HTML-minta: @charset KarakterkészletLeírás
Scriptben: Nem támogatott. - @import szabály: Importál egy külső stíluslapot.
Működő minta: minta48.html
HTML-minta: @import [url]PontosURL
Scriptben: Nem támogatott. - @media szabály:Meghatározza a kiviteli médiát.
Paraméterek: Médiatípusok: screen (képernyő), print (nyomtató), all (mindkettő).
Szabályok: Annál az adott médiatípusnál érvényes szabályok.
Működő minta: minta49.html
HTML-minta: @media MediaTípus { szabályok }
Scriptben: Nem támogatott. - @page szabály: Meghatározza megjelenített lap méreteit, irányát és margóit.
Paraméterek: VálasztottLap: :first (a gyűjtemény 1. lapjára érvényes), :left (összefűzésnél a bal oldalra kerülőknél érvényes), :right(összefűzésnél a jobb oldalra kerülőknél érvényes).
Szabályok: Annál az adott médiatípusnál érvényes szabályok.
Minimum Internet Explorer 5.5-nél.
HTML-minta: @page VálasztottLap { szabályok }
Scriptben: Nem támogatott. - cursor tulajdonságok: Megadja vagy visszaadja az egérkurzor tulajdonságait, amikor az adott objektum fölé kerül.
Paraméterek: auto (alapértelmezett; a böngésző szabályai érvényesek), all-scroll (min. IE 6; minden irányban gördíthatő-minta), col-resize (min. IE6; átméretezhető oszlopok-minta), crosshair (egyszerű célkereszt), default (platform-függő; általában mutató kéz), hand (mutatóujját kinyújtó kéz, amikor az objektum fölé megy az egér), help (segítségkérés-minta), move (irány-nyilak), no-drop (min. IE 6; mutató-kéz kis áthúzott körrel), not-allowed (min. IE 6; link nem követhető-minta), pointer (min. IE 6; mutató kéz), progress (min. IE 6; nyíl és homokóra), row-resize (min. IE 6; sorátmérezetés-minta), text (sima szöveg-kurzor), url(uri) (min. IE 6; pontosan URL-ben leírt cursorfájl; minta: url('myccursor.cur'); használható kiterjesztések: .CUR és .ANI), vertical-text (min. IE 6; függőlegesen javítható-szöveg minta), wait (homokóra), *-resize (átméretezés-minta a 8 alapirányba).
Működő minta: minta50.html
HTML-minta: { cursor : paraméter }
Scriptben: objectum.style.cursor [ = paraméter ]
0 megjegyzés:
Megjegyzés küldése