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.
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ší.
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@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