MŮJ ZÁPISNÍK

RECENZE KNIH

FILMOVÉ A SERIÁLOVÉ HODNOCENÍ

PEČENÍ A VAŘENÍ

12 července, 2017

Formátování textu

středa, července 12, 2017 čeká na komentář

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 <sup>horní index </sup>


text a dolní index

text a <sub>dolní index </sub>


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 :-)


Pokud vás článek zaujal, můžete sdílet

Lucy Lillianne
V posledních letech jsem neskutečně podlehla knihám. Nejen jejich čtení, blogování o nich, ale i nakupování. Ráda si rozšiřuji knihovničku a velice mě mrzí, když vidím tolik knih, které nemohu mít. Přesto jsem ráda za každý kousek, který se mi dostane do rukou. Největší radost mi dělají žánry fantasy a sci-fi, v poslední době hodně ujíždím na apokalyptických a dystopických knihách a když si potřebuji odpočinout, často sáhnu po nějakém thrilleru nebo jiné napínavé četbě... Samozřejmě nepohrdnu ani lehčí četbou. Nejméně mě lákají romantické knihy, i když i tam občas dojde k nějaké výjimce. Doufám, že čtení mě bude bavit ještě dlouho, protože můj seznam je téměř nekonečný... :-)

0 komentář(ů) v diskuzi:

Okomentovat

Každý vzkaz pro mě znamená mnoho, často vykouzlí úsměv na tváři a rozhodně potěší. Děkuji každému, kdo pro mě ztratí pár vteřin života :-)




@lucylillianne

@luculi87