Formátování textu

Dneska jsem vám sestavila návod, jak si pohrát s textem. Co všechno si můžete nastavit a aplikovat, abyste si ulehčili práci....

Můj návod.

Kopírovat se zdrojem!

Některé základní úpravy písma

Tyto styly používáte přímo v článku, v textu. Jde o základní změny, které můžete v článcích provést. Já však vždycky doporučuji, neprovádět je v článcích, ale přes css styly. Když totiž časem změníte šablonu, nebo budete chtít provést nějakou změnu, všechno zůstává v textu a vy pak budete muset procházet desítky či stovky článků...

škrtnutý text

<strike>škrtnutý text </strike>

podtržený text

<u>podtržený text </u>

tučný text

<b>tučný text </b>

kurzíva textu
 

<i>kurzíva textu </i>

text a ^{horní index}

text a ^{horní index}

text a _{dolní index}

text a _{dolní index}

nadtržený text

<span style="text-decoration: overline">nadtržený text </span>

text obyčejný a text jako kapitálky 

text obyčejný a <span style="font-variant: small-caps">text jako kapitálky </span>

text obyčejný a všechna písmena velká

text obyčejný a <span style="text-transform: uppercase">všechna písmena velká </span>

rozdíl mezi obyčejným textem, textem kapitálky a velkými písmeny

rozdíl mezi obyčejným textem, <span style="font-variant: small-caps">textem kapitálky </span>a <span style="text-transform: uppercase">velkými písmeny </span>

Lepší varianta přes CSS

Pokud vás totiž nějaký tento styl omrzí, můžete ho kdykoli změnit či smazat. Po smazání daný styl prostě přestane fungovat, ale nastavený v článcích zůstane, po smazaní však už nebude vidět. Takže se k němu můžete zase kdykoli vrátit... Pojmenování je vždy na vás. Například v první ukázce SKRT, můžete pojmenovat SKRTLY_TEXT, PRESKRT, atd... Cokoli vás napadne. Ale vždy musíte mít stejný název v CSS a v textu...

Následující kódy vkládáte do css, tedy nad ] ] ></b:skin>



A zbytek do textu článku...

Škrtnutý text

do CSS

.skrt
{
text-decoration: line-through;
}

do textu

text text text text text text <span class="skrt">text text text text text text</span> text text text text text text text text

Podtržený text

do CSS

.podtrz
{
text-decoration: underline;
}

do textu

text text text text text text <span class="podtrz">text text text text text text</span> text text text text text text text text

Tučný text

do CSS

.tucny
{
font-weight: bold;
}

do textu

text text text text text text <span class="tucny">text text text text text text</span> text text text text text text text text

Kurzíva

do CSS

.kurziva
{
font-style: italic;
}

do textu

text text text text text text <span class="kurziva">text text text text text text</span> text text text text text text text text

Dolní index

do CSS

.d_index
{
vertical-align: sub;
}

do textu

text text text text text text <span class="d_index">text text text text text text</span> text text text text text text text text

Horní index

do CSS

.h_index
{
vertical-align: sup;
}

do textu

text text text text text text <span class="h_index">text text text text text text</span> text text text text text text text text

Kapitálky

do CSS

.kapitalky
{
font-variant: small-caps;
}

do textu

text text text text text text <span class="kapitalky">text text text text text text</span> text text text text text text text text

Velká písmena

do CSS

.velke_pismo
{
text-transform: uppercase;
}

do textu

text text text text text text <span class="velke_pismo">text text text text text text</span> text text text text text text text text

Nějaký ten praktický příklad, na co lze toto aplikovat. Třeba když máte text a budete v něm chtít něco velice důležitého zvýraznit. V případě změny šablony, si tak díky tomuto můžete v CSS změnit barvu písma, aby se vám k dané šabloně hodila a změna se automaticky provede ve všech článcích :-)

do CSS

.zvyrazneni
{
text-transform: uppercase;
font-weight: bold;
text-decoration: underline;
color: #000;
}

do textu

text text text text text text text text text text <span class="zvyrazneni">důležitá část textu</span> text text text text text text text text text text text text text

Dalšími možnostmi, které můžete vkládat do CSS jsou (můžete měnit tučnou část):
typ písma (viz tento návod) - font-family: verdana; 
velikost písma - font-size: 10px;
barvu písma (můžete hledat barvy zde) - color: #000000;
zarovnání textu (možnosti center, left, right) - text-align: center;
stín textu - text-shadow: 1px 1px 0 #EAE1D8;

a mnoho dalšího....

A ještě jeden příklad, jak toho využít. Píšete někdy recenzi a opravdu potřebujete vyjádřit všechno i se spoilery? Tak třeba toho využijte takto, nastavte si písmo stejné jako barva pozadí....

do CSS

.spoiler
{
color: #fff;
}

do textu

text text text text text text text text text text <span class="spoiler">ukrytý text</span> text text text text text text text text text text text text text

A to je asi momentálně všechno. Snad se vám hodí i tento návod :-)