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