Nyomtatás

CSS leírás és teljes referencia

1. fejezet: Bevezető

A HTML-nyelv elsősorban szövegek egyszerű leírására szolgál, formátumára és megjelenítésére igen csekély instrukcióval szolgál. Sokszor előfordul, hogy a megjelenítők nem képesek pontosan a szerző által megálmodott formátumban megjeleníteni a tartalmat. Ezért kell használni a stíluslapokat, amely először a Internet Explorer 3.0-ban, illetve a Netscape Navigator 4.0-ban jelent meg. Még egy indok a CSS-ek használata mellett: ha egyszerre párhuzamosan kell formázni sok lapot, akkor elegendő a stíluslapot átírni és máris egyszerre átformálódik az összes weblap. Ez egy hatalmas lehetőség – saját példámból is tudom. Ha például egyetlen weblapon belül van több tucatnyi HTML-lap, akkor nem kell minden stílus-igazításkor minden egyes lapot egyesével átbogarászni, vagy egy jobb minőségű HTML-szerkesztővel a megfelelő elemeket átírni, hanem elegendő a CSS-lap megfelelő kiigazítása.

Másik fontos lehetőség a CMS-rendszerek - pl.: Joomla, Drupal, Wordpress, stb. - által tárolt CSS-ek átírása. Ilyen esetben gyakorlatilag minden egyes apró tulajdonságot a CSS tárol és ha csak 1-2 apróságot szeretnénk átírni a kinézeten belül, akkor elő kell venni a megfelelően áttekinthető CSS referenciát.

 

Sokan írtak a HTML-lel, illetve a CSS-sel kapcsolatban. Többen hiányolták, hogy a HTML nem teljes, mivel több paraméter nincsen benne. Igen, ez szándékos volt, mivel ezt a HTML-könyvet elsősorban az emelt szintű informatika érettségire készülőknek írtam. Persze bárki informatika iránt érdeklődő is forgathatja és nyugodtan, önállóan megtanulhatja belőle a nyelv alapjait. A CSS más téma! Kérem, hogy csak az vágjon bele a CSS-be, akinek szüksége van rá! Ez már nem egy tankönyv, hanem egy referencia. Igyekszem minél pontosabb lenni, de még érthető!

Fontos megemlíteni, hogy eme írás elkészítésekor igen sokat használtam a következő oldalakat:

2. fejezet: A CSS három alapvető formája

A stílus leírását többféleképpen is bele lehet ágyazni a lapokba. A legegyszerűbb és a leggyakoribb megoldás, ha egy önálló, külső CSS-lapot használunk. Példa:

<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">

TITLE paraméterbe bele lehet írni egy tetszőleges címet a CSS fájlból, amelyet a böngészők felhasználnak az éppen aktuális lap megjelenítésére. Ha több ilyen is fel van sorolva, akkor a böngésző felajánlja a választást. Javaslat: az alapértelmezett stíluslap legyen az utolsó, mivel a legutolsó lesz mindig az érvényes. További paraméter még a HREF , ahová a stíluslap URL-je kerüljön! Az egész utalást a HEAD-szekcióba kell tenni. Most pedig lássunk egy konkrét példát:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Stilusok</title>
<link REL="StyleSheet" TYPE="text/CSS" HREF="Stilusok/Summer.css" TITLE="Minta33">
</head><body bgcolor="#FFFF00"> <h1>Csatolt CSS-p&eacute;lda</h1>
Ez a p&eacute;lda a TFeri.css 
nev&ucirc; st&iacute;luslapot haszn&aacute;lja a megjelen&iacute;t&eacute;shez..
</body>
</html>

A <LINK> paraméterei - az említetteken kívül - nem túl bonyolultak. Az említett REL paramétere stíluslapok használatánál érthetően kötelező: "stylesheet". Szintén kötelező a TYPE="text/css" is, mivel ez a link típusára utal. A TITLE és a HREF használatáról már szó esett. Lehet használni a DISABLED elemet is, amikor - például az oldal kipróbálásakor - semlegesíteni kell az elemet. Szintén használható a MEDIA paraméter, mely értékei szerint lehet SCREEN, PRINT vagy ALL is. (képernyős kimenet, csak nyomtató, mindkettő - alapértelmezés)

A második lehetőség a <HEAD> tagen belüli STYLE megoldás. Itt nincs külső fájl, így nem használhatjuk más file-okban, viszont a megadott stíluskompozíciót az egész HTML-oldalon belül könnyedén alkalmazhatjuk. Legyen példa az előző file - átírva eme módszerrel:

<HTML>
<HEAD>
<TITLE>Stílusok</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
body {background: blue; color: red}
p {color: red;font-size: 14 pt;font-family: Arial;font-weight: bold;margin-left: 5%}
H1 {font-family: "Times New Roman"; color: green; font-weight: bold; text-transform: capitalize; margin-left: 3; font-size:25; font-style: "bold"}
</STYLE>
</HEAD>
<BODY>
<H1>Be&aacute;gyazott CSS</H1>
<P>Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>

A <STYLE> lehetséges paraméterei, mint a fentiekben is látható, egyszerűek. A TYPE="TEXT/CSS" kötelező. Használható a TITLE is a stílus címének megadásához, de ez itt igen csekély jelentőségű. Ugyancsak használhatóak az előzőben (is) ismertetett DISABLED és MEDIA paraméterek.

A harmadik módszer az egyes HTML-szerkesztők által előszeretettel használt tagen belüli formázás. Lényege, hogy a stílus hatóköre pontosan addig terjed ki, amíg a tag lezárásra nem kerül. Íme az eddig kétszer használt fájl harmadik verziója:

<HTML>
<HEAD>
<TITLE>Stilusok</TITLE>
</HEAD>
<BODY style="background: blue; color: red">
<H1 style="font-family: "Times New Roman";color: green; font-weight: bold;
margin-left: 5%; text-transform: capitalize; margin-left: 3; font-size: 25; font-style: "bold">
Be&aacute;gyazott CSS</H1>
<P style="color: red; font-size: 14 pt; font-family: Arial; font-weight: bold; margin-left: 5%">
Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>

Véleményem szerint a három lehetséges módszer szerint a legjobban a legelsőt lehet kihasználni, de ez is, mint oly' sok minden a HTML-nyelvben, ízlés kérdése.

 


 

 

3. fejezet: Í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. Igen fontos az öröklődés, mivel a végső formázást a legutoljára használt CSS határozza meg. 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 bonyolítani ö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 a túlbonyolított tulajdonságokon.

A stíluslapok bejegyzései egyébként az alábbi formátumban jelennek meg:

Szülők.Név (Paraméter1: Érték1, Érték2, Érték3; Paraméter2: Érték1, Érték2, Érték3)

A fenti sorban 1 paraméterhez mindig 3 érték tartozik, de ez természetesen bármennyi lehet. (De azért minimum 1 legyen!) A 2 paraméter sem kötelező, mivel abból is csupán annyi a kikötés, hogy minimum 1 legyen. Ha a szülőt nem adjuk meg, akkor a beállított értékek a szülőtől függetlenül jelennek meg. Ha azt szeretnénk, hogy csak a H1-es fejlécben aláhúzott szövegek jelenjen meg kéken, akkor a következő sort kell kiadnunk:

H1.U {color="blue"}

Saját magunk is definiálhatunk alosztályokat. Ez ugyanolyan értékű része lesz a szülőosztálynak, mint bármi más része. Adjuk ki például a következő parancsot egy CSS-file-ban:

.alairas {Font-family="Arial, Times Nem Roman CE"; Font-size=15pt; color="red"; text-decoration="blink"}

Használata is egyszerű. Ha például a B tagben szeretnénk egy imént definiált stílust használni, akkor a következő részt kell betenni a HTML-file-ba:

<B> Ez már aláírás-stílus </b>

Érdemes kipróbálni a CLASS paramétert, mivel a HTML-tagek döntő többségében használhatók!
A lehetséges stílusdefiníciók listája nem rövid, de hasznos lehet!


4. fejezet: Betű- és formátumkódok

Van egy áttekintő oldal az MSDN-en, amiről sok felé lehet gyorsan eljutni:

http://msdn.microsoft.com/en-us/library/ms531207%28v=VS.85%29.aspx
Megjegyzés: igyekeztem minél pontosabban az összes paramétert leírni, de a kizárólag Internet Explorer 8-9-re vonatkozókat időnként elhagytam. Ilyenkor javasolt az MSDN oldalt is fellapozni!

  • 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 ]
    További minták:
    (Eredeti forráskód: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/font-family.htm)

<HTML>
<HEAD>
<STYLE>
P {font-family:"ARIAL"}
.other {font-family:"COURIER"}
</STYLE>
</HEAD>
<BODY>
<P tabindex="1" onkeydown="this.className='other'"
onmousedown="this.className='other'"
onmouseup="this.className=''" onkeyup="this.className=''">

A TAB-bal kiválaszthatja ezt a bekezdést, majd egy billentyűlenyomással
vagy az egérrel kattintással megváltozik a a betűtípus neve Courier-re.</P>
</BODY>
</HTML>

<STYLE>
H3 { font-style:italic }
</STYLE>

--------------------------

<DIV onmousedown="this.style.fontStyle='italic'"> Kattintáskor lesz döntött!</DIV>
  • 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 ]
    További minta:
    (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms533765%28v=VS.85%29.aspx)

    <P STYLE="font-variant:small-caps">kis kapitális</P>
    <DIV onmousedown="this.style.fontVariant='small-caps'">Egér kattintáskor vális kiskapitálissá</DIV>

  • 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 ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms533767%28v=VS.85%29.aspx)

<body onload="setInterval('s1.innerText = p1.currentStyle.fontWeight',200)">
<p id="p1">Kattintson az alábbi gombokra.</p>
<button onclick="p1.style.fontWeight='lighter';">Lighter</button> <button onclick="p1.style.fontWeight='normal';">Normal</button> <button onclick="p1.style.fontWeight='bold';">Bold</button> <button onclick="p1.style.fontWeight='bolder';">Bolder</button> <br>Current Weight: <span id="s1"></span> </body>
  • 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 ]
    További minták: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530759%28v=VS.85%29.aspx)

<HEAD>
<STYLE>
BODY{font-size: 10pt }
.P1 {font-size: 14pt } .P2 {font-size: 75% } .P3 {font-size: xx-large } .P4 {font-size: larger } </STYLE>
</HEAD>
<BODY>
<P>P1-es</P>
<P>P2-es</P>
</BODY>
------------------------------

<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='14pt'">Méretváltoztatás</DIV>
  • @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 ]
    További minta:

<DIV onmouseover="this.style.font = 'italic small-caps bold 12pt serif'">Vigye fölé az egeret!</DIV>
  • 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 ]
    További minták: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530780%28v=VS.85%29.aspx)

<HEAD>
<STYLE>
BLOCKQUOTE { letter-spacing:-0.2mm }
</STYLE>
</HEAD>
<BODY>
<DIV STYLE="font-size:14" onmouseover="this.style.letterSpacing='1mm'">Vigye fölé az egeret!</DIV>
</BODY>
  • 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 ]
    További minták: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530784%28v=VS.85%29.aspx)

<HEAD>
<STYLE>
P { line-height:8mm}
BLOCKQUOTE { line-height:4mm } </STYLE>
</HEAD>
<BODY>
<DIV STYLE="font-size:14" onmouseover="this.style.lineHeight='6mm'">Vigye fölé az egeret</DIV>
</BODY>
  • 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 ]
    További minta:

    <p onmouseover="this.style.textAlign='center'" onmouseout="this.style.textAlign='right'">Bekezdés</p>

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531163%28v=VS.85%29.aspx

  • 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 üres 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531164(v=VS.85).aspx

  • text-decoration: Szöveg díszítések.
    Paraméterek: none (semmi), underline (aláhúzott), overline (föléhúzott), line-through (keresztülhúzott), blink (villogó, pár böngésző nem támogatja).
    HTML-Minta: A:link, A:visited, A:active, A:hover { text-decoration: underline}
    HTML-minta: { text-decoration : paraméter }
    Scriptben: objectum.style.textDecoration [ = paraméter ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms536949%28v=VS.85%29.aspx)

<span style="font-size: 14px" onmouseover="this.style.textDecoration='underline'" 
onmouseout="this.style.textDecoration='blink'" onclick="this.style.textDecoration='overline'"
ondblclick="this.style.textDecoration='line-through'"> Effektek: egér föléhúzva, elhúzva, egyszer és kétszer kattintva.</span>
<HEAD>
<STYLE>
DIV { text-indent:2cm }
.click1 { text-indent:50% } .click2 { text-indent:20% } </STYLE> </HEAD> <BODY> <DIV onclick="this.className='click1'" ondblclick="this.className='click2'"> Események: 1-2 kattintásra</DIV>
<DIV onmouseover=this.style.textIndent="2cm">Másik lehetőség</DIV>
</BODY>
  • 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 működik a bekezdés utolsó sorában.), kashida (a szöveg sorait rendezi egy kiválasztott ponthoz; főként az arab nyelveknél használt), newspaper (csökkenti, illetve növeli a szavak és a betűk közti üres helyeket; ideális a latin betűs nyelveknek)
    HTML-minta: { text-justify : paraméter }
    Scriptben: objectum.style.textJustify [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531172(v=VS.85).aspx

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531173(v=VS.85).aspx

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531174(v=VS.85).aspx

  • 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 ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531175%28v=VS.85%29.aspx)

<HEAD><STYLE>
    .transform1 { text-transform:uppercase }
    .transform2 { text-transform:lowercase }
    .transform3 { text-transform:none }
</STYLE>
</HEAD>
<BODY> 
<DIV STYLE="font-size:14" 
    onmouseover="this.className='transform1'" 
    onclick= "this.className='transform2'"
    ondblclick="this.className='transform3'"> 
Események: egér föléhúzása, illetve 1-2 kattintás</DIV><br>
<DIV STYLE="font-size:14"
    onmouseover="this.style.textTransform='uppercase'"
    onmouseout="this.style.textTransform='lowercase'"
    onclick="this.style.textTransform='none'">
Ugyanez másképpen</DIV>
</BODY>
  • 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), auto-pos (azonos az auto-val).
    HTML-minta: { text-underline-position : paraméter }
    Scriptben: objectum.style.textUnderlinePosition [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531176(v=VS.85).aspx

  • vertical-align: A szöveg vagy objektum 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 ]
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531179%28v=VS.85%29.aspx )

<TABLE BORDER width=100>
<TR>
<TD onmouseover="this.style.verticalAlign='bottom'" onmouseout="this.style.verticalAlign=''"> Irányított szöveg</TD> </TR> </TABLE>
  • white-space: A szöveg megtörését szabályozza.
    Paraméterek: normal (alapértelmezett; a sorok automatikusan megtörnek), nowrap (nincs sortörés); pre (a sortörések elő vannak készítve); pre-line (a sortörések megmaradnak); pre-wrap (a sortörések nem maradnak meg)
    HTML-minta: { white-space : paraméter }
    Scriptben: objectum.style.whiteSpace [ = paraméter ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531182%28v=VS.85%29.aspx

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531184%28v=VS.85%29.aspx

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531185%28v=VS.85%29.aspx

  • 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 ]
    További ötletek: http://msdn.microsoft.com/en-us/library/ms531186%28v=VS.85%29.aspx )

  • writing-mode: Írási irány választása.
    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 ]
    További ötletek és paraméterek: http://msdn.microsoft.com/en-us/library/ms531187%28v=VS.85%29.aspx


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
}

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>

 


7. fejezet: Osztályozási tulajdonságok és felsorolások

  • 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 ]
    További ötletek és beállítások: http://msdn.microsoft.com/en-us/library/ms533736%28v=VS.85%29.aspx

  • list-style-type: A definiált listaelem jelzését határozza meg. Fontos! Csak pár elemnél 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.), decimal-leading-zero: csak az Internet Explorer 8-ban és utána (pl.: 01,02,03,04, stb.) lower-roman (pl.: i, ii, iii, iv, stb.), upper-roman (pl.: I, II, III, IV, stb.), lower-greeek: csak Internet Explorer 8 és utána (pl.: alpha, beta, gamma, stb.) lower-alpha (pl.: a,b,c,d, stb.), upper-alpha (pl.: A,B,C,D, stb.), armenian: csak Internet Explorer 8 és utána (örmény karakterek), georgian: csak Internet Explorer 8 és utána (grúz karakterek), none (semmilyen).
    HTML-minta: { list-style-type : paraméter }
    Scriptben: objectum.style.listStyleType [ = paraméter ]

    További ötletek: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530797%28v=VS.85%29.aspx )

    <UL onmouseover="this.style.listStyleType='circle'"> valami</ul>
  • list-style-image: Egy képet határoz meg, amely listaelem jelzőjeként szolgál. Fontos! Csak pár elemnél használható.
    Paraméterek: none (semmilyen), illetve url(pontosan).
    HTML-minta: { list-style-image : paraméter }
    Scriptben: objectum.style.listStyleImage [ = paraméter ]
    További ötletek és beállítások: http://msdn.microsoft.com/en-us/library/ms530793%28v=VS.85%29.aspx

  • list-style-position: Meghatározza a listaelem jelzőjének helyét. Fontos! Csak pár elemné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 ]
    További ötletek és beállítások: http://msdn.microsoft.com/en-us/library/ms534125%28v=VS.85%29.aspx

  • 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 ]
    További ötletek és beállítások: http://msdn.microsoft.com/en-us/library/ms534121%28v=VS.85%29.aspx


8. fejezet: Pozicionálási tulajdonságok


9. fejezet: 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), avoid (tiltja az oldaltörést az objektum előtt, ha ez lehetséges – csak Internet Explorer 8 és utána), inherit (az objektum örökli a szülő tulajdonságait – csak Internet Explorer 8 és utána).
    HTML-minta: { page-break-before : paraméter }
    Scriptben: objectum.style.pageBreakBefore [ = paraméter ]
    További beállítások: http://msdn.microsoft.com/en-us/library/ms534323%28v=VS.85%29.aspx

  • 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 után), left (ugyanaz, mint az always), right (ugyanaz, mint az always), empty string (ne szúrjon be oldaltörést), avoid (tiltja az oldaltörést az objektum előtt, ha ez lehetséges – csak Internet Explorer 8 és utána), inherit (az objektum örökli a szülő tulajdonságait – csak Internet Explorer 8 és utána).
    HTML-minta: { page-break-after : paraméter }
    Scriptben: objectum.style.pageBreakAfter [ = paraméter ]
    További beállítások: http://msdn.microsoft.com/en-us/library/ms534323%28v=VS.85%29.aspx

  • orphans: Megadja vagy beállítja a minimálisan szükséges sorok számát ahhoz, hogy a bekezdés az oldal alján megjelenjen. Csak Internet Explorer 8 és utána.
    További beállítások: http://msdn.microsoft.com/en-us/library/cc196966%28v=VS.85%29.aspx

  • widows: Megadja vagy beállítja a minimálisan szükséges sorok számát ahhoz, hogy a bekezdés az oldal tetején megjelenjen. Csak Internet Explorer 8 és utána.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/cc196972%28v=VS.85%29.aspx)

    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <style type="text/css">
    @media print
    {
    p {
    widows:3;
    orphans:3;
    }
    }
    </style>
  • page-break-inside: Megadja vagy beállítja, hogy objektum beljesén megengedett-e az oldaltörés. Csak Internet Explorer 8 és utána.
    További minta: http://msdn.microsoft.com/en-us/library/cc196971%28v=VS.85%29.aspx


10. fejezet: Pszeudo-osztályok és egyéb tulajdonságok

  • !important deklaráció: A későbbi tulajdonságokat felülírja.
    Paraméterek: Bármilyen CSS-attribútum.
    HTML-minta: { paraméter!important }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530769%28v=VS.85%29.aspx)

    <STYLE>
    P { color:red!important }
    </STYLE>
    <P STYLE="color:green">Piros szöveg.</P>
  • :active pszeudo-osztály: Az a HTML-tag stílusát határozza meg aktív állapotban.
    Csak itt használható!
    HTML-minta: [A]:active { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530714%28v=VS.85%29.aspx)

    <style>
    A:active { font-weight:bold; color:purple }
    </style>
  • :first-letter pszeudo-elem: Az objektum első betűjének stílusát határozza meg!
    HTML-minta: :first-letter { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530753%28v=VS.85%29.aspx)

    <style>
    P.Iniciale:first-letter { font-size: 200%; float: left }
    </style>
    <p>A bekezdés első betűje kétszeres méretben lesz látható.</p>
  • :first-line pszeudo-elem: Az objektum első sorának stílusát határozza meg.
    HTML-minta: :first-line { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530754%28v=VS.85%29.aspx)

    <style>
    .CapFirst:first-line { text-transform: uppercase }
    </style>
    <p>Az első sor a bekezdésben csupa nagybetű lesz, az összes többi normális marad.</p>
  • :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ó!
    HTML-minta: [A]:hover { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530766%28v=VS.85%29.aspx)

     <STYLE> A:hover { font-weight:bold; color:red } </STYLE>
  • :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ó!
    HTML-minta: [A]:link { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530787%28v=VS.85%29.aspx )

    <STYLE> A:link { color:#C0C0C0 } </STYLE>
  • :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ó!
    HTML-minta: [A]:visited { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531181%28v=VS.85%29.aspx )

    <STYLE> A:visited { font-weight:bolder } </STYLE>
  • @charset szabály: Meghatározza, hogy melyik külső karakterkészlet használható.
    HTML-minta: @charset KarakterkészletLeírás
    Scriptben: Nem támogatott.
    További példa:

    @charset "Windows-1251";
  • @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!), Internet Explorer 9 esetén újabb paraméterek is vannak.
    HTML-minta: @charset KarakterkészletLeírás
    Scriptben: Nem támogatott.
    További minták: http://msdn.microsoft.com/en-us/library/ms530757%28v=VS.85%29.aspx

  • @import szabály: Importál egy külső stíluslapot.
    HTML-minta: @import [url]PontosURL
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530768%28v=VS.85%29.aspx)

    <STYLE TYPE="text/css">
    @import url("URL");
    P {color:blue}
    </STYLE>
  • @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.
    HTML-minta: @media MediaTípus { szabályok }
    Scriptben: Nem támogatott.
    További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530813%28v=VS.85%29.aspx)

    // Képernyős karakterméret legyen 12-es.
    @media screen {
       BODY {font-size:12pt;}
    }
    // Nyomtatón pedig 8-as.
    @media print {
       BODY {font-size:8pt;}
    }
  • @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.
    HTML-minta: @page VálasztottLap { szabályok }
    Scriptben: Nem támogatott.
    További minták: http://msdn.microsoft.com/en-us/library/ms530841%28v=VS.85%29.aspx

  • 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 (mutató-kéz kis áthúzott körrel), not-allowed (link nem követhető-minta), pointer (mutató kéz), progress (nyíl és homokóra), row-resize (sorátmérezetés-minta), text (sima szöveg-kurzor), url(uri) (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; csillag helyett: N, NE, NW, S, SE, SW, E, vagy W ).
    HTML-minta: { cursor : paraméter }
    Scriptben: objectum.style.cursor [ = paraméter ]
    További minták: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms533701%28v=VS.85%29.aspx)

    <h1>Vigye a szövegek fölé a cursort!</h1>
    <p title="all-scroll" onmouseover="this.style.cursor='all-scroll'">all-scroll</p>
    <p title="col-resize" onmouseover="this.style.cursor='col-resize'">col-resize</p>
    <p title="crosshair" onmouseover="this.style.cursor='crosshair'">crosshair</p>
    <p title="default" onmouseover="this.style.cursor='default'">default</p>
    <p title="hand" onmouseover="this.style.cursor='hand'">hand</p>
    <p title="help" onmouseover="this.style.cursor='help'">help</p>
    <p title="move" onmouseover="this.style.cursor='move'">move</p>
    <p title="no-drop" onmouseover="this.style.cursor='no-drop'">no-drop</p>
    <p title="not-allowed" onmouseover="this.style.cursor='not-allowed'">not-allowed</p>
    <p title="pointer" onmouseover="this.style.cursor='pointer'">pointer</p>
    <p title="progress" onmouseover="this.style.cursor='progress'">progress</p>
    <p title="row-resize" onmouseover="this.style.cursor='row-resize'">row-resize</p>
    <p title="text" onmouseover="this.style.cursor='text'">text</p>
    <p title="vertical-text" onmouseover="this.style.cursor='vertical-text'">vertical-text</p>
    <p title="wait" onmouseover="this.style.cursor='wait'">wait</p><p title="*-resize" onmouseover="this.style.cursor='*-resize'">*-resize</p>

     

© TFeri.hu, 2011