3.2 Formátování textu pomocí style=

S textem se na webových stánkách dá různě "kouzlit". My se naučíme několik základních úprav.

Již umíme vytvořit:

tučné písmo pomocí párového tagu <b> a </b>
kurzívu pomocí párového tagu <i> a </i>
nadpisy pomocí párových tagů <h1> a </h1>

Další formátování textu budeme dělat pomocí atributu style= tagů, které označují text.

Atribut style=

se může použít na:
 - vybraný text pomocí párového tagu <span> a </span>
 - odstavec pomocí párového tagu <p> a </p>
 - blok pomocí párového tagu <div> a </div>

Parametry atributu style=

Pomocí atibutu style= lze nastavit mnoho různých parametrů (vlastností) textu, ukážeme si pouze nejpoužívanější:

barva písma: style="color: red" 
Barva se píše anglicky nebo pomocí kódu.

velikost písma: style="font-size: 12px" 
Velikost písma se udává v pixelech (bodech na monitoru).

font písma: style="font-family: Arial, Calibri, Lucida" 
Uvedou se písma, kterým se má text zobrazit - prohlížeč použije první písmo, které je v počítači nainstalované. Písma se oddělují čárkou!

barva pozadí: style="background-color: red" 
Barva se píše anglicky nebo pomocí kódu.

Použití atributu style=

Kód atributu se vloží do tagu za klíčové slovo tagu.
Příklady:

na  vybraný text:
 Pouze <span style="color: green"> vyznačený text je napsaný zeleně, </span> ostatní text ne.
Pouze vyznačený text je napsaný zeleně, ostatní text ne.

na odstavec: 
 <p style="font-size: 20px"> Celý text odstavce bude napsaný písmem o velikosti 20 pixelů. </p>

Celý text odstavce bude napsaný písmem o velikosti 20 pixelů.

Použití více parametů v atributu style=

Pokud chceme v jednom atributu použít více paramerů textu, píšeme je za sebou oddělené středníkem!

Příklad:
V následujícím textu chceme napsat slova kombinované atibuty velkým písmem, hnědou barvou a se žlutým pozadím:
Ukázka <span style="color: sienna; font-size: 30px; background-color: yellow"> kombinovaných parametrů </span>v textu.

Ukázka  kombinovaných parametrů v textu.

Pravidla psaní style= a jeho parametrů: 

1) kód atibutu se vkládá do tagu s textem: <p style="......">

2) jeden nebo více parametrů atributu se píší do uvozovek: <p style="......">

3) každý parametr tvoří název-bez-mezer-s-dvojtečkou-na-konci: a hodnota parametru (s jednotkou): 
     <p style="font-size: 20px; color: blue; font-family: Times New Roman, Courier, Arial">

4) více parametrů se odděluje středníkem:  
     <p style="font-size: 20px; color: blue; font-family: Times New Roman, Courier, Arial">