Omówione tutaj selektory i deklaracje służą do formatowania tekstu objętego znacznikami blokowymi.
Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
text-align:left | h5 {text-align:left} | <h5">Tekst na lewo.</h5> | Tekst na lewo. |
text-align:right | h5 {text-align:right} | <h5>Tekst na prawo.</h5> | Tekst na prawo. |
text-align:center | h5 {text-align:center} | <h5>Tekst pośrodku.</h5> | Tekst pośrodku. |
text-align:justify | h5 {text-align:justify} | <h5>Tekst wyjustowany.</h5> | Tekst wyjustowany. |
vertical-align:baseline | h5 {vertical-align:baseline} | Tekst <h5>domyślnie.</h5> | Tekst domyślnie. |
vertical-align:sub | h5 {vertical-align:sub} | Tekst <h5>index dolny.</h5> | Tekst index dolny. |
vertical-align:text-bottom | h5 {vertical-align:text-bottom} | Tekst <h5>do dołu.</h5> | Tekst do dołu. |
vertical-align:super | h5 {vertical-align:super} | Tekst <h5>index górny.</h5> | Tekst index górny. |
vertical-align:text-top | h5 {vertical-align:text-top} | Tekst <h5>u góry.</h5> | Tekst u góry. |
vertical-align:middle | h5 {vertical-align:middle} | Na <h5><img src="../css.png"></h5> środku. | Na środku. |
vertical-align:top | h5 {vertical-align:top} | Na <h5><img src="../css.png"></h5> górze. | Na górze. |
vertical-align:bottom | h5 {vertical-align:bottom} | Na <h5><img src="../css.png"></h5> dole. | Na dole. |
vertical-align:90% | h5 {vertical-align:90%} | Do <h5><img src="../css.png"></h5> góry. | Do góry. |
vertical-align:-90% | h5 {vertical-align:-90%} | Do <h5><img src="../css.png"></h5> dołu. | Do dołu. |
vertical-align:4px | h5 {vertical-align:4px} | Do <h5><img src="../css.png"></h5> góry. | Do góry. |
vertical-align:-4px | h5 {vertical-align:-4px} | Do <h5><img src="../css.png"></h5> dołu. | Do dołu. |
text-indent:20% | p {text-indent:20%} | <p>Ala ma kota. Ola ma psa. Ewa ma psa i kota.</p> | Ala ma kota. Ola ma psa. Ewa ma psa i kota. |
text-indent:2em | p {text-indent:2em} | <p>Ala ma kota. Ola ma psa. Ewa ma psa i kota.</p> | Ala ma kota. Ola ma psa. Ewa ma psa i kota. |
Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
white-space:pre | p.pre {white-space:pre} | <p class="pre">aaa bbb ccc</p> | aaa
bbb
ccc
|
white-space:normal | p.normal {white-space:normal} | <p class="normal">aaa bbb ccc</p> | aaa
bbb
ccc
|
white-space:nowrap | p.nowrap {white-space:nowrap} | <p class="nowrap">Nie zawija tekstu, który wyjdzie za okno przeglądarki.</p> |
Nie
zawija
tekstu...
|
word-spacing:2em | p.word-spacing {word-spacing:2em} | <p class="word-spacing">A od B.</p> | A od B. |
letter-spacing:1em | p.letter-spacing {letter-spacing:1em} | <p class="letter-spacing">Odstępy liter.</p> | Odstępy liter.
|
line-height:8pt | p.line-height {line-height:8pt} | <p class="line-height"> Odstępy pionowe lini</p> |
Odstępy
pionowe
lini
|
Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
text-transform:uppercase | p.uppercase {text-transform:uppercase} | <p class="uppercase"> DuŻe.</p> | DuŻe. |
text-transform:lowercase | p.lowercase {text-transform:lowercase} | <p class="lowercase"> MaŁe.</p> | MaŁe. |
text-transform:capitalize | p.capitalize {text-transform:capitalize} | <p class="capitalize"> ola ma kota.</p> | ola ma kota. |
text-decoration:underline | p.underline {text-decoration:underline} | <p class="underline"> Podkreślenie.</p> | Podkreślenie. |
text-decoration:overline | p.overline {text-decoration:overline} | <p class="overline"> Nadkreślenie.</p> | Nadkreślenie. |
text-decoration:line-through | p.line-through {text-decoration:line-through} | <p class="line-through"> Przekreślenie.</p> | Przekreślenie. |
text-decoration:blink | p.blink {text-decoration:blink} | <p class="blink"> Pulsowanie.</p> | Pulsowanie. |
text-shadow:brown 2px 2px,orange -2px -2px | p.cien {text-shadow:brown 2px 2px,orange -2px -2px} | <p class="cien"> Cieniowanie.</p> | Cieniowanie. |