PC.sk

Počítačová ąkola . sk

Ponuka
Návštevnosť
CSS v kocke

CSS - nastavenie písma HTML dokumentu alebo - aneb CSS hrátky s psaním a texty

Dobrý deň

Dnes si položíme na ,,tacku " použitie CSS - čiže kaskádových štylov aplikovaných na text. Pre česky ,,mluvíci" -- budeme aplikovat kaskádoví styly na obyčejnej text



Pokusný text Popis Uplatnená
hodnota štýlu
font:

Pokusný text

1.35em Verdana, Ariel, sans-serif

Pokusný text

1.80em 'Times New Roman',
Times, serif
font-family:

Pokusný text

Verdana

Pokusný text

Courier

Pokusný text

'Times New Roman'

Pokusný text

Ariel

Pokusný text

sans-serif
font-size:

Pokusný text

100%

Pokusný text

75%

Pokusný text

120%

Pokusný text

1em

Pokusný text

.75em

Pokusný text

1.25em

Pokusný text

12px

Pokusný text

15px

Pokusný text

12pt

Pokusný text

15pt
font-weight:

Pokusný text

normal

Pokusný text

lighter

Pokusný text

bold

Pokusný text

900
font-style:

Pokusný text

normal

Pokusný text

italic

Pokusný text

oblique
font-variant:

Pokusný text

normal

Pokusný text

small-caps

Pokusný text


initial
/*-nastaví
default hodnotu
IE - nepodporuje */

Pokusný text


inherit
/*-nastaví
podľa rodica
IE 8+ */
word-spacing:

Pos slovo v texte

normal

Pos slovo v texte

20px
letter-spacing:

Pos pism v texte

normal

Pos pism v texte

8px
text-decoration:

Pokusný text

none

Pokusný text

overline

Pokusný text

underline

Pokusný text

line-through
text-ident:
Podpora od verzie:
Chrome 1.0 <> IE 3.0 <> Mozilla 1.0 <
Safari 1.0 <> Opera 3.5

Odsadenie 1. riadku odstavca, za ktorým nasleduje text

0

Odsadenie 1. riadku odstavca, za ktorým nasleduje text

50px
text-transform:
Podpora od verzie:
Chrome 1.0 <> IE 4.0 <
> Mozilla 1.0 <> Safari 1.0 <> Opera 7.0

Tran nasl text. Dal.

none

Tran nasl text. Dal.

capitalize

Tr nasl text. Dal.

lowercase

Tr nasl text. Dal.

uppercase
-webkit-animation: /* Chrome 4.0, Safari 4.0,
Opera 15.0 */
animation: /* IE 10.0, Mozilla 16.0 */

Pokusný text

mymove 5s infinite

Pokusný text

mymove 1s infinite
 
PSEUDOTRIEDY:

input :focus
rôzne hodnty
:first-letter

Pokusný text

rôzne hodnty

Pokusný text

rôzne hodnty
:first-line

Pokusný text
pokračuje na ďalšom r.

rôzne hodnty

Pokusný text
pokračuje na ďalšom r.

rôzne hodnty
:first-child {};
:last-child {};
:nth-child(3) {};
:nth-child(odd) {};
:nth-child(even) {};
:nth-child(3) {3n+1};

= kazde tretie
posunute o 1
POZOR: n- poradie
počítane od 0

Pokusný text

Pokusný text

Pokusný text

Pokusný text

Pokusný text


p.dieta:first-child {color:red;}

p.dieta:last-child {color:green;}

p.dieta:nth-child(3) {color:blue;}

p.dieta:nth-child(odd) {
font-size:125%}

p.dieta:nth-child(even) {
font-size:85%; color:gold;}

Prevažne, ktorým vyučovacím predmetom by sa mali tieto Vaše učiteľské a žiacké stránky zaoberať?

Matematika (Počet hlasov: 572)
(41.27 %)

Informatika (Počet hlasov: 52)
(3.75 %)

Slovenský jazyk a literatúra (Počet hlasov: 613)
(44.23 %)

Anglický jazyk (Počet hlasov: 108)
(7.79 %)

Iný neuvedený jazyk (Počet hlasov: 11)
(0.79 %)

Iný neuvedený technický predmet (Počet hlasov: 16)
(1.15 %)

Iný neuvedený výchovný predmet (Počet hlasov: 14)
(1.01 %)



Celkem hlasovalo: 1386
Súvisiace články:
POCITADLO WEBZDARMA V AKCII (07.06.2014)
CSS-3 H. Rieš. - článok 020 - Špeciálne rámčeky, guľatý rám, polopriehľadné bloky (26.05.2014)
CSS-3 H. Rieš. - článok 019 - Riešenie detailov, prekrytie textu obrázkom (26.05.2014)
CSS-3 H. Rieš. - článok 018 - Fixná pozícia prvku v IE (riešenie) (26.05.2014)
CSS-3 H. Rieš. - článok 017 - Zvislé centrobanie prvkov v bloku (26.05.2014)
CSS-3 H. Rieš. - článok 016 - Inicialy, formátovanie zoznamov (26.05.2014)
CSS-3 H. Rieš. - článok 015 - Efektné nadpisy, záložky (TABS) (23.05.2014)
CSS-3 H. Rieš. - článok 014 - Layout Svätý grál - 02 - pokračovanie (23.05.2014)
CSS-3 H. Rieš. - článok 013 - Layout Svätý grál - 01 - úvod (23.05.2014)
CSS-3 H. Rieš. - článok 012 - Kombinovanie Layoutov (23.05.2014)
CSS-3 H. Rieš. - článok 011 - Riešenie vzhľadu stránok - Plávajúce karty (23.05.2014)
CSS-3 H. Rieš. - článok 010 - Riešenie vzhľadu stránok (23.05.2014)
CSS-3 H. Rieš. - článok 009 - Explorerové sito (23.05.2014)
CSS-3 H. Rieš. - článok 008 - Chyby prehliadačov - Ako na ich ošetriť (23.05.2014)
CSS-3 H. Rieš. - článok 007 - Pozíciovanie - Absolútne a relatívne (23.05.2014)
CSS-3 H. Rieš. - článok 006 - Štýlovanie tabuliek (23.05.2014)
CSS-3 H. Rieš. - článok 005 - Vlastnosti písma (23.05.2014)
CSS-3 H. Rieš. - článok 004 - Všeobecné riešenia (23.05.2014)
CSS-3 H. Rieš. - článok 003 - Dedičnosť a kaskáda v praxi (23.05.2014)
CSS-3 H. Rieš. - článok 002 - Dedičnosť a kaskáda (21.05.2014)
CSS-3 H. Rieš. - článok 001 - Typy priradenia štýlopisu (21.05.2014)
[Akt. známka: 0 / Počet hlasov: 0] 1 2 3 4 5