0 Kč s DPH

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

V minulých článcích z rubriky Hrajeme si s CSS jsme si ukázali tipy jak s využitím CSS upravit tabulku nebo jak zrušit postranní sloupec. Nyní vám přinášíme jednoduchý návod, jak pomocí kaskádových stylů CSS změnit vzhled textu na webu.

Pomocí CSS stylů můžete např. měnit velikost, barvu nebo typ písma (font). Můžete takénastavit odsazení, ať už v odstavcích nebo nadpisech. 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
Nadpis 1.úrovně Nadpis 1 <h1>Nadpis</h1>
Nadpis 2.úrovně Nadpis 2 <h2>Nadpis</h2>
Nadpis 3.úrovně Nadpis 3 <h3>Nadpis</h3>
Odstavec Odstavec <p>Odstavec</p>
Tučné ikona - B <strong>tučně</strong>
Kurzíva ikona - I <em>kurzíva</em>
Odkaz ikona - řetěz <a>odkaz</a>

Práce s WYSIWYG editorem v inPage

Každá šablona v systému inPage má nastaven svůj vlastní vzhled, tzv. formátování, které se projeví až při zobrazení webové prezentace.

Co se týče wysiwyg editoru v inPage do kterého píšete text, zde vždy uvidíte pouze černé písmo na bílém podkladu (obrázek vlevo). Větu v prvním řádku jsme si označili jako Nadpis 1.

Psaní textu do wysiwyg editoru - černé písmo na bílém podkladuPřednastavený vzhled písma u šablony č. 3 v inPage

Např. šablona s názvem MEDIA v oranžové barvě, má nastavenu barvu pro Nadpis 1 na oranžovou, proto na webu uvidíte nadpis v oranžové barvě (obrázek vpravo), a ne v černé jak je tomu ve wysiwyg editoru.

Chcete-li barvu nebo velikost písma změnit, pak použijte vlastní CSS styl.

Nastavení barvy či velikosti písma pomocí vlastních stylů CSS vám zaručí, že již nebudete muset obarvovat každý nadpis na každé nově vytvořené stránce přímo editoru.

Kde mohu v inPage editovat vlastní styl CSS

V administraci inPage lze definovat vlastní CSS styly v sekci VZHLED -> Vlastní CSS styl

Administrace inPage - VZHLED - Vlastní CSS styl

Kompletní definici CSS stylů vámi zvolené šablony zobrazíte tak, že za název vaší domény dosadíte výraz viz  příklad: www.vase-domena.cz/styl/1 (kompletní přehled CSS stylů šablony uvítají hlavně pokročilí uživatelé kaskádových stylů, kteří si tak mohou změnit nejen vzhled písma, ale i třeba pozadí stránek, změnit barvu prvků šablony a jiné.)

Příklady úpravy písma pomocí CSS

Při psaní textů se snažte používat nadpisy. V HTML se nadpisy označují jako <h1></h1> až <h6></h6>. Slovo či věta umístěná mezi těmito tzv. tagy <h1>... </h1> je text nadpisu první úrovně. Vlastní CSS styl vám umožní všechny takové nadpisy jednotně zformátovat, třeba aby byly zelené a tučné nebo měli požadovanou velikost. Jak na to?

Změna barvy

Přejděte v administraci inPage do editace vlastního CSS stylu [VZHLED -> Vlastní CSS styl], zaškrtněte volbu "Nastavit aktivní" a do okna editoru pro vlastní CSS styl vložte následující definici:

h1 {color: green;}
h2 {color: green;}
h3 {color: green;}
p {color: black;}
strong {color: red;}

Ve chvíli kdy vlastní styly uložíte, všechny nadpisy na vašich stránkách označené tagy <h1> až <h3> budou mít barvu zelenou. Odstavce <p> budou mít barvu černou a písmo označené tučně <strong> bude červené. Chcete-li barvu nadpisů jinou, zadejte vlastní název barvy v angličtině, nebo použijte barvu v hexa kódu #70ca32. Příklad:

h1 {color: #70ca32;}
p {color: #333c03;}

Poznámka: V CSS je možné vyznačit barvu dvěma způsoby:

  1. buď lze zadat název barvy v anglickém jazyce  (white, green, yellow, atd.)
  2. nebo lze použít tzv. HTML kód barvy (#70ca32, #CCC125, #000000, atd.)

Co je HTML kód barvy? Každá barva v různých odstínech má přiřazený svůj vlastní kód. Chcete-li zjistit kód vaší oblíbené barvy, pak vám pomůže tabulka HTML kódu barev, kterou najdete ZDE

Změna velikosti písma

Zjistíte-li, že např. nadpis druhé úrovně <h2></h2> je nevýrazný, pak jej pomocí CSS můžeme zvětšit tak, že do vlastního stylu CSS přidáme vlastní hodnotu pomocí definice "font-size", která určuje velikost písma:

h1 {color: green; font-size: 20pt;}
h2 {color: green; font-size: 17pt;}
h3 {color: green; font-size: 13pt;}
p {color: black; font-size: 10pt;}
strong {color: red; font-size: 10pt;}

Znovu platí, že všechny nadpisy na stránkách vyznačeny tagy <h1> až <h3> budou mít nastavenou novou velikost písma, dle zadaných parametrů. Zkontrolujte si tyto změny na webu. Bude-li se vám zdát že hlavní nadpis je moc velký, vráťte se k vlastnímu stylu CSS a hodnotu velikosti pro daný nadpis snižte.

Změna typu písma (font)

Standardně je v inPage použit typ (font) písma Verdana, mnoho uživatelů si však oblíbilo i jiné typy písma jako např. Arial či Georgia. Než složitě formátovat písmo ve wysiwyg editoru u každého nadpisu či odstavce, opět nám pomůže definice vlastního stylu CSS, kdy si nastavíme jednotný font písma pro všechny nadpisy i odstavce.

h1 {color: green; font-size: 20pt; font-family: arial;}
h2 {color: green; font-size: 17pt; font-family: arial;}
h3 {color: green; font-size: 13pt; font-family: arial;}
p {color: black; font-size: 10pt; font-family: arial;}
strong {color: red; font-size: 10pt; font-family: arial;}

Pokud můžete, používejte na vašich stránkách jednotný styl písma pro veškerý text. Pokud např. nadpisy ponecháte ve Verdaně a odstavce změníte na Arial, pak vzhled písma na stránkách může působit rušivým a ne jednotným dojmem.

Tučnější nadpis?

Mnohdy se vám může zdát, že např. nadpis 2. úrovně (Nadpis 2) je na stránkách nevýrazný, písmo je hubenější nežli u nadpisu 3. úrovně. V takovém případě můžete chtít, aby byl nadpis 2. úrovně tučnější. Jak na to? Stačí k CSS stylu pro výraz h2 přidat definici "font-weight: bold;", viz příklad:

h2 {color: green; font-weight: bold;}

Při kontrole stránek bude písmo na webu rázem výraznější, bez toho aniž bychom zvětšovali velikost písma.

 

 

Hanka Medková
hana.medkova(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • editor inPage

    26.12.2010 19:25:42 | Urso

    Ta ukázka editoru inPage nápadně připomíná komponentu tinyMCE, domnívám se, že je totožná. Viz http://tinymce.moxiecode.com/
    V tom případě ale nemáte vlastní editor ale pouze začleněnu již hotovou komponentu do stránek?

    Odpovědět

  • RE Editor inPage

    27.12.2010 11:52:25 | Hana Medková

    Dobrý den, ano, inPage využívá editor tinyMCE nejedná se o náš vlastní wysiwyg editor.

    Odpovědět

  • Tabulka ccs hover

    16.12.2011 16:54:50 | Jetty

    Nahoře na vaši stránce je tabulka
    tabulka mění barvu na urovni řádků po najetí myši:
    řeším teď obdobnou věc, ale nějak mi to nejde.:
    po najetí myši změnit barvu pouze od zadané buňky a to horizontálně i vertikálně. Můžete mi poradit ?
    děkuji Jetty

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.