21.2. fejezet: Szövegformázások

color: a szöveg színe. Lehetséges paraméterek:

-          szöveg színe, pl.: „red”

-          16-os formátumú (hexa) kódja, pl.: „FF0000”

-          RGB-értéke, pl.: „rgb(255,0,0)”

Konkrét példa:

body {
    color: blue;
}
h1 {
    color: c0c0c0;
}

p {

   color: rgb(14,120,201);

}

A színek kiválasztásához ötletadónak érdemes használni a következő oldalt: http://tferi.hu/weblapkeszites-html-alapokon-1/weblapkeszites-html-alapokon-5?start=3

Megjegyzés: ha használjuk a fenti (color) paramétert, akkor használni kell a háttérszínt (background-color) is!

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 néha hibás!).
HTML-minta: { text-align : paraméter }
Scriptben: objectum.style.textAlign [ = paraméter ]

Konkrét példa:

h1 {
    text-align: center;
}
h2 {
    text-align: left;
}
h3 {
    text-align: right;
}

p {
    text-align: justify;
}

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ó, sokszor nem támogatott).
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 ]

Konkrét példa:

a {
    text-decoration: none;
}

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Megjegyzés: az aláhúzott szövegdíszítést nem érdemes használni, mivel könnyen keverhető a linkkel.

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 ]

Konkrét példa:

p.uppercase {
    text-transform: uppercase;
}
p.lowercase {
    text-transform: lowercase;
}
p.capitalize {
    text-transform: capitalize;
}

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 ]

Konkrét példa:

p {
    text-indent: 50px;
}

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 ]

Konkrét példa:

h1 {
    letter-spacing: 3px;
}
h2 {
    letter-spacing: -2px;
}

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 ]

Konkrét példa:

p.kicsi {
    line-height: 0.8;
}
p.nagy {
    line-height: 1.8;
}

text-direction: A szöveg írási irányát adja meg.  
Paraméterek: ltr (balról jobbra - alapértékek), rtl (jobbról balra).
Konkrét példa:

p {
    direction: rtl;
}

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 ]

Konkrét példa:

h1 {
    word-spacing: 10px;
}
h2 {
    word-spacing: -5px;
}

text-shadow: a szöveg árnyékolását adja meg.

Paraméterek: vízszintes_méret függőleges_méret szín.

Konkrét példa:

h1 {
    text-shadow: 3px 2px red;
}

Ebben a példában a vízszintes árnyék három képpont, míg a függőleges kettő. Az árnyék színe: piros.

 

text-overflow: szabályozza az esetlegesen túlcsordult (pl.: túl hosszú) szöveg helyett mit írjon ki a böngésző.

Paraméterek: clip|ellipsis|string|initial|inherit;

-          clip: a szöveget elcsípi.

-          ellipsis: egy ellipszist renderel a megszokott három pont helyett.

-          string: egy adott szöveget ír ki.

-          initial: Ezt állítja be alapértelmezettnek.

-          inherit: ez a tulajdonság a szülőelemből származik.

Konkrét példa:

div {
    text-overflow: ellipsis;
}

A fejezet leghitesebb forrása: https://www.w3schools.com/css/css_text.asp