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

3. oldal / 9

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