Pokročilé formátování textu pomocí CSS zadaných přímým stylem

pomocí kaskádových stylů můžeme zadávat nejen barvy, zarovnání, ale i většinu formátování, pro které máme v HTML speciální značky
zvláště u CSS zadávaných přímým stylem můžeme pro jednotné formátování více odstavců s větším množstvím vlastností a jednotným stylem u všech odstavců využít povinně párovou značku <DIV> </DIV>, do které v atributu STYLE zadáme všechny vlastnosti, které odstavce mají jednotně mít a všechny odstavce do této značky umístíme
- poznámka: při využití HTML atributů, tato značka rozumí jen atributu ALIGN - tedy zarovnání, jiné vlastnosti (např. barva) neumí

Nyní se vrátíme k úryvku básně, kterou jsme již jednou využili a máme uloženou pod názvem: "basen-1.html", uložíme pod jiným jménem a upravíme ho následovně:

nadpis bude modrý, proložený, velikosti H3, zarovnaný na střed a podbarvený světlejší šedou barvou
všechny tři odstavce (sloky) "uzavřeme" do značky <DIV> a zadáme požadované parametry:
- všechny tři sloky budou zarovnány na střed
- všechny tři sloky budou psány tučnou kurzívou
- písmo bude modré

<html>

<head>
<TITLE>Pokročilé formátování</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
</head>

<body>

<H3 STYLE="TEXT-ALIGN: CENTER; COLOR: #0000FF; LETTER-SPACING: 8pt; BACKGROUND-COLOR: #CCCCCC;">HOJ, TY ŠTĚDRÝ VEČERE</H3>

<DIV STYLE="TEXT-ALIGN: CENTER; FONT-STYLE: ITALIC; FONT-WEIGHT: BOLD; COLOR: #0000FF;">

<P>Hoj, ty Štědrý večere,<BR>
ty tajemný svátku,<BR>
cože komu dobrého<BR>
neseš na památku?</P>

<P>Hospodáři štědrovku,<BR>
kravám po výslužce,<BR>
kohoutovi česneku<BR>
hrachu jeho družce.</P>

<P>Ovocnému stromoví<BR>
od večeře kosti<BR>
a zlatoušky na stěnu<BR>
tomu, kdo se postí.</P>

</DIV>

</body>

</html>

Zobrazení

Vysvětlení jednotlivých deklarací:

TEXT-ALIGN: CENTER;
- zarovnání (hodnoty mohou být i: right, left, justify)
COLOR: #0000FF;
- barva písma
LETTER-SPACING: 8pt;
- proložení znaků o daný počet bodů, v našem případě 8
BACKGROUND-COLOR: #CCCCCC;
- barva pozadí
FONT-STYLE: ITALIC;
- kurzíva - použito místo značky <I>, kterou bychom museli použít u každého odstavce - hodnoty deklarace mohou být i:
  - normal [normální]
  - oblique [skloněné])
FONT-WEIGHT: BOLD;
- tučné písmo - použito místo značky <B>, kterou bychom museli použít u každého odstavce - hodnoty deklarace mohou být i::
  - normal [obyčejná síla]
  - bold [tučné písmo]
  - bolder [mezi tučným a obyčejným písmem]
  - lighter [písmo tenčí než obyčejné]
  - číslem [velikost tučnosti se zadá číslem - čím větší, tím tlustší]

Poznámky:

přehled většího množství deklarací pro úpravu textu naleznete na konci této kapitoly na stránce "Deklarace CSS"
pokud použijete značku <BR> a zároveň zarovnání do bloku, řádky se značkou <BR> nejsou roztaženy a zarovnány do bloku!!! - můžete vyzkoušet záměnou hodnoty deklarace z CENTER; na JUSTIFY;
pokud bychom některý odstavec chtěli zarovnat jinak, můžeme u daného odstavce ve značce <P> nařídit jiné zarovnání - ostatní odstavce před i po tomto odstavci se řídí značkou <DIV>
již zde vidíte, že některá formátování lze zajistit pouze CSS a neexistuje pro ně alternativa v HTML atributech (např. proložení znaků)
pokud bychom chtěli pouze odstavce zarovnat na střed a nic jiného, lze je všechny napsat do párové značky <CENTER>, která umožňuje zarovnání na střed
- značka <CENTER> se považuje za zastaralou