Tekst i czcionki.

   powrót    naprzód   menu

Tekst - wyrównania.


Omówione tutaj selektory i deklaracje służą do formatowania tekstu objętego znacznikami blokowymi.

Nazwa deklaracjiKod w headKod w bodyEfekt formatowania
text-align:lefth5 {text-align:left}<h5">Tekst na lewo.</h5>
Tekst na lewo.
text-align:righth5 {text-align:right}<h5>Tekst na prawo.</h5>
Tekst na prawo.
text-align:centerh5 {text-align:center}<h5>Tekst pośrodku.</h5>
Tekst pośrodku.
text-align:justifyh5 {text-align:justify}<h5>Tekst wyjustowany.</h5>
Tekst wyjustowany.
vertical-align:baselineh5 {vertical-align:baseline}Tekst <h5>domyślnie.</h5>Tekst domyślnie.
vertical-align:subh5 {vertical-align:sub}Tekst <h5>index dolny.</h5>Tekst index dolny.
vertical-align:text-bottomh5 {vertical-align:text-bottom}Tekst <h5>do dołu.</h5>Tekst do dołu.
vertical-align:superh5 {vertical-align:super}Tekst <h5>index górny.</h5>Tekst index górny.
vertical-align:text-toph5 {vertical-align:text-top}Tekst <h5>u góry.</h5>Tekst u góry.
vertical-align:middleh5 {vertical-align:middle}Na <h5><img src="../css.png"></h5> środku.Na środku.
vertical-align:toph5 {vertical-align:top}Na <h5><img src="../css.png"></h5> górze.Na górze.
vertical-align:bottomh5 {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:4pxh5 {vertical-align:4px}Do <h5><img src="../css.png"></h5> góry.Do góry.
vertical-align:-4pxh5 {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:2emp {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.


Tekst - odstępy.


Nazwa deklaracjiKod w headKod w bodyEfekt formatowania
white-space:prep.pre {white-space:pre}<p class="pre">aaa
bbb
ccc</p>

aaa bbb ccc

white-space:normalp.normal {white-space:normal}<p class="normal">aaa
bbb
ccc</p>

aaa bbb ccc

white-space:nowrapp.nowrap {white-space:nowrap}<p class="nowrap">Nie
zawija
tekstu, który wyjdzie
za okno przeglądarki.</p>

Nie zawija tekstu...

word-spacing:2emp.word-spacing {word-spacing:2em}<p class="word-spacing">A od B.</p>

A od B.

letter-spacing:1emp.letter-spacing {letter-spacing:1em}<p class="letter-spacing">Odstępy liter.</p>

Odstępy liter.

line-height:8ptp.line-height {line-height:8pt}<p class="line-height">
Odstępy
pionowe
lini</p>


Odstępy
pionowe
lini


Tekst - ozdobniki.


Nazwa deklaracjiKod w headKod w bodyEfekt formatowania
text-transform:uppercasep.uppercase {text-transform:uppercase}<p class="uppercase"> DuŻe.</p>

DuŻe.

text-transform:lowercasep.lowercase {text-transform:lowercase}<p class="lowercase"> MaŁe.</p>

MaŁe.

text-transform:capitalizep.capitalize {text-transform:capitalize}<p class="capitalize"> ola ma kota.</p>

ola ma kota.

text-decoration:underlinep.underline {text-decoration:underline}<p class="underline"> Podkreślenie.</p>

Podkreślenie.

text-decoration:overlinep.overline {text-decoration:overline}<p class="overline"> Nadkreślenie.</p>

Nadkreślenie.

text-decoration:line-throughp.line-through {text-decoration:line-through}<p class="line-through"> Przekreślenie.</p>

Przekreślenie.

text-decoration:blinkp.blink {text-decoration:blink}<p class="blink"> Pulsowanie.</p>
text-shadow:brown 2px 2px,orange -2px -2pxp.cien {text-shadow:brown 2px 2px,orange -2px -2px}<p class="cien"> Cieniowanie.</p>

Cieniowanie.


Efekt stempla, czyli tekst wgłębiony w tło.


Nazwa deklaracji Kod w head Kod w body Efekt formatowania
color:
text-shadow:
background-color:
#stempel {
color:rgba(255,0,0,0.4);
text-shadow: 1px 4px 6px #ffffcc,
0 0 0 black,
1px 4px 6px #ffffcc;
background-color:#ffffcc;
font-size:7em;
text-align:center;
}
<div id="stempel">
STEMPEL
</div>
Efekt jest widoczny poniżej
STEMPEL

do góry   menu   powrót   naprzód