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ář

Přehled komentářů

  • problém s nejednotnou velikostí písma

    9. 1. 2020 0:13:28 | Markéta Pešťáková

    Dobrý den, na webu se mi nedaří zadat všude velikost písma 1. chtěla bych ji všude v rubrikách u běžného textu i na stránkách.
    V nabídce rolovacího menu velikosti písma není. Přesto mám (nevím jak) 2 strany s touto velikostí.
    Jak postupovat? Šablona Hanami, do CSS se sama pouštět nechci.
    Díky za podporu

    Odpovědět | Zobrazit odpovědi

    • Re: problém s nejednotnou velikostí písma

      9. 1. 2020 7:25:56 | R

      Pokud chcete změnit písmo na všech místech stránek, tak v podstatě jediná možnost je zápis do vlastních stylů CSS.

      Odpovědět

  • Pokus o změnu písma

    22. 9. 2020 21:08:11 | Hana Jeništová

    Tak to zkouším, ale někde dělám chybu. Toto jsem si vložila do definice stylů, ale žádná změna se neudála. Co s tím? Ostatní úpravy m i fungují...
    html, html body {color: #E9AC59;} /*upraví písmo na celém webu včetně tabulek, odkazů apod.*/
    h1 {color: #F9DCOO;}
    p {color: #0F0415;} /*upraví písmo pouze pro odstavce*/
    strong {color: #F10E00;}

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

    { font-family: "Courier New", Courier, monospace; }

    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í*/

    Odpovědět | Zobrazit odpovědi

    • Re: Pokus o změnu písma

      23. 9. 2020 8:41:33 | Tým inPage

      Dobrý den,
      v zápise máte uvedenu jen závorku , což je neplatný zápis.
      { font-family: "Courier New", Courier, monospace; }
      Doporučuji zapsat styl takto:

      /*upraví písmo na celém webu včetně tabulek, odkazů apod.*/
      html, html body {
      color: #E9AC59;
      font-size: 40px;
      font-family: "Courier New", Courier, monospace;
      }
      h1 {color: #F9DCOO; font-size: 40px;}
      p {color: #0F0415;} /*upraví písmo pouze pro odstavce*/
      strong {color: #F10E00;}
      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í*/

      V případě potřeby nás kontaktujte emailem na admin@zoner.cz s uvedením domény o kterou se jedná.

      Odpovědět

    • Re: Pokus o změnu písma

      23. 9. 2020 8:45:46 | Tým inPage

      Dobrý den,
      pošlete nám ideálně požadavek na e-mail info@inpage.cz a upřesněte, jak se jmenuje Vaše doména. V některých šablonách se může zápis stylu mírně lišit. Může se také stát, že se Vám do zápisu CSS stylu vloudila chyba a proto se změna neprojeví.

      pěkný den

      Odpovědět