středa 12. července 2017

Formátování textu

středa, července 12, 2017 bez komentáře

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řestaně 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 :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

0 komentářů:

Okomentovat