0 Kč s DPH

Jak změnit barvu, velikost nebo typ písma pomocí CSS

Nelíbí se vám styl, velikost či barva písma v šabloně inPage? Přinášíme jednoduchý návod, jak pomocí vlastních CSS stylů změníte vzhled textu na celém webu a již nebudete muset upravovat každý nadpis na každé nově vytvořené stránce přímo v editoru.

WYSIWYG editor vs. náhled webu

Každá šablona v systému inPage má svůj vlastní vzhled a formátování textu, které je vidět při náhledu stránky. Toto formátování není shodné se zobrazením textů ve WYSIWYG editoru v administraci inPage. Zde vždy uvidíte pouze černé písmo na bílém podkladu.

Zobrazení textu ve WYSIWYG editoru

Zobrazení textu na webové stránce

Vlastní CSS styl

V administraci inPage lze definovat vlastní CSS styly v sekci Vzhled → Vlastní styly CSS. Můžete také nastavit odsazení, ať už v odstavcích nebo nadpisech, upravit barvu, typ a velikost písma a další.

Vlastní CSS styl pro změnu písma

Při práci s kaskádovými styly CSS je dobré mít alespoň základní znalost HTML znaků, které najdete v tabulce níže:

Označení písma: v inPage v HTML jazyce v CSS stylu
Změna pro celý web <html><body>obsah webu</body></html> html, html body
Nadpis 1. úrovně Nadpis 1 <h1>Nadpis</h1> h1
Nadpis 2. úrovně Nadpis 2 <h2>Nadpis</h2> h2
Nadpis 3. úrovně Nadpis 3 <h3>Nadpis</h3> h3
Odstavec Odstavec <p>Odstavec</p> p
Tučné ikona - B <strong>tučně</strong> strong
Kurzíva ikona - I <em>kurzíva</em> em
Odkaz ikona - řetěz <a>odkaz</a> a

Kompletní definici CSS stylů vámi zvolené šablony lze zobrazit různými způsoby. Nejjednodušší je zadat jeho URL adresu tedy např.  www.vase-domena.cz/styl/1. Další možností je zobrazit je v prohlížeči kliknutím pravým tlačítkem myši do webové stránky a výběrem položky Zobrazit zdrojový kód stránky. V mnoha webových prohlížečích je také nástroj pro vývojáře, který umožňuje úpravu a náhled html a css stylů. 

Úpravy písma pomocí CSS

Níže jsou základní úpravy textů a nadpisů. Zobrazené styly stačí zkopírovat, vložit do okna Definice stylů, upravit a uložit. Zobrazení zkontrolujte při náhledu webu.

Změna barvy

Pro změnu barvy písma např. na červenou se používá styl color:barva. Barva může být zadávána v anglickém jazyce (white, green, yellow, atd.) nebo lze použít hexa kód barvy (#70ca32, #CCC125, #000000, atd.) Chcete-li zjistit kód vaší oblíbené barvy, pak vám pomůže tabulka HTML kódu barev.

html, html body {color: black;} /*upraví písmo na celém webu včetně tabulek, odkazů apod.*/
h1 {color: green;}
p {color: black;} /*upraví písmo pouze pro odstavce*/
strong {color: red;}

Změna velikosti písma

Velikost písma upravíte stylem font-size a zadáním velikosti písma.  Doporučujeme používat jednotku px což je pevná velikost v pixelech nebo em pro možnost úpravy písma v prohlížeči (pro slabozraké uživatele).

html, html body {color: 15px;} /*upraví písmo na celém webu včetně tabulek, odkazů apod.*/
h1 {font-size: 20px;}

Změna typu písma (font)

Používejte na vašich stránkách maximálně dva typy písma, jeden např. pro nadpisy a druhý pro obyčejný text. Lze použít tzv. bezpečná písma 16 hezkých písem pro Vaše stránky nebo online písma Změna písma na webu. Stačí přidat do vlastního stylu font-family a typ písma.

html, html body {color: black;} /*upraví písmo na celém webu včetně tabulek, odkazů apod.*/
h1 { font-family: arial;}

Tučnější písmo

Písmo lze nastavit tučnější nebo také normální stačí přidat definici font-weight. Některá písma mohou být tenčí nebo tučnější, jsou to většinou online písma, viz výše. Hodnotu lze zadat slovně (lighter, normal, bold, bolder), a nebo číselnou hodnotou (300, 400, 500, 600, 700), vždy záleží na písmu.

h1 {font-weight: bold;}

Styl odkazů

Odkazy jsou aktivními prvky webu, které mohou mít jiný styl když jsou v klidu a jiný po najetí myší. Styl, který odkazy upravuje vypadá takto:

a {color:red; text-decoration:underline;} /*červený text; podtržený*/
a:hover {color:black; text-decoration:none;} /*odkaz po najetí myši; černý text; bez podtržení*/

Odsazení obsahu

Odsazením se myslí např. odstup nadpisů nebo odstavců. Odsazení lze nastavit vlastností margin. Dále je možné nastavit odsazení textu v prvním řádku odstavce vlastností text-indent.

h2 {margin: 10px 0 10px 0;} /*myšleno odsazení margin: nahoře vpravo dole vlevo*/
p {text-indent:20px;} /*odsazení prvního řádku odstavce*/

Zarovnání textů a nadpisů

Hromadně lze zarovnat i text vlastností text-align (left, right, center, justify). Zarovnání do bloku se na webových stránkách nedoporučuje, vytváří nevzhledné mezery především při změně šířky zobrazovacího zařízení.

h1 {text-align:center} 

Tým inPage
info(zav)inpage.cz

Přidat komentář