0 Kč bez DPH

CSS – uživatelské základy

Seznamte se s nejpoužívanějšími CSS vlastnostmi, které využijete při úpravách šablon systému inPage. Projděte si článek, přejděte do vlastních CSS stylů v sekci Vzhled, zapněte vlastní vlastní CSS styl a upravujte svůj web.

Zapnutí vlastních CSS stylů

Nadpisy

V systému inPage jsou definovány vždy nejméně tři základní nadpisy:

  • nadpis h1 používaný pro hlavní nadpis článku nebo stránky, měl by být ve stránce jen jeden a má největší vliv z hlediska vyhledávačů, v editoru se jmenuje Nadpis 1
  • nadpis h2, kterým se nadepisují jednotlivá témata, označen v editoru Nadpis 2
  • nadpis h3, který doplňuje nadpisy h2, označen Nadpis 3
  • dále existují ještě nadpisy h4, h5 a h6, avšak v systému inPage nejsou ve výchozím nastavení použity
  • více o nadpisech a jejich použití se dozvíte v našem článku zde na blogu

Příklad zápisu nadpisu <h1> se zeleným pozadím a bílou barvou textu:

h1 {background: green; color: white;}

Barvy

Barvy na webu můžete zadávat dvěma způsoby:

  • názvem barvy v anglickém jazyce (např.: black; white; red; yellow;), zde najdete kompletní seznam barev
  • jedinečným hexadecimálním kódem barvy (např.: #ffffff; #d00000; #eee;), tabulka kódů barev
  • zadáním pomocí RGBA modelu (např. 255, 255, 255, 0.7), kde poslední hodnota je průhlednost, více se dozvíte na jakpsatweb.cz

Příklad zápisu odstavce <p> s červeným pozadím a černou barvou textu:

p {background: red; color: black;}

Obrázky

Obrázek je definován buď relativní, nebo absolutní adresou:

  • relativní - např. url("/obrazek/3/pozadi-jpg/") - nastaví jako pozadí soubor obrázku nahraný do systému inPage pod názvem pozadi.jpg
  • absolutní - např. url("http://janablah.rajce.idnes.cz/Orli_hnizdo/#DSCN7472.jpg") - nastaví jako pozadí obrázek na jiném webu, v tomto případě na rajce.idnes.cz
  • zde se dozvíte více o nahrávání obrázků a jejich vkládání do stránek

Příklad zápisu odstavce <p> s obrázkovým pozadím a modrou barvou textu:

p {background: url("/obrazek/3/pozadi-jpg/"); color: blue;}

Jednotky

Používání jednotek na webu

  • pixely (obrazové body) - nejčastější a jednoduché zadání
  • procenta - vztahují se vždy k nadřazenému prvku, např. 50% z šířky stránky, z výšky buňky apod.
  • em - velikost malého písmene "m", používá se pro zadávání vzhledem k velikosti písma

Příklad zápisu odstavce <p> s velikostí písma zadanou em, šířkou v procentech a výškou v pixelech:

p {font-size: 1.6em; width: 80%; height: 26 px;}

Slovníček častých CSS vlastností

Vlastnost

Význam a hodnota
background pozadí prvku obecně, lze zadat jako obrázek nebo barva
background-image obrázek na pozadí - může být zadán jen obrázek
background-color barva na pozadí - může být zadána jen barva, např. #ff0000;
border rámeček okolo prvku (okraj prvku) - např. 1px solid red; 
color barva textu uvnitř prvku
float obtékání textu - hodnoty none, left nebo right
font-family typ písma (používejte bezpečná webová písma, nebo online písma)
font-size velikost písma - hodnota v px, procentech nebo em
font-style kurzíva písma - hodnota normal nebo italic (kurzíva)
font-weight tučnost písma - hodnota normal nebo bold (tučné)
height výška prvku 
line-height výška řádku
margin vnější okraje, ovlivńuje jak jsou vzdáleny okolní prvky
padding vnitřní okraje, ovlivňuje odsazení obsahu
text-align zarovnání obsahu (nejenom textu) - hodnoty right (vpravo), left (vlevo), center (na střed) a justify (do bloku)
text-decoration podtržení písma - hodnota none nebo underline (podtržení)
width šířka prvku
   

Tým inPage
info@inpage.cz

Web s doménou ZDARMA

Přidat komentář

Přehled komentářů

  • jiný vzhled šablony

    2. 11. 2017 19:53:08 | Jana

    Dobrý den,

    ráda bych se optala, zda je možné si vytvořit vlastní šablonu? Mám určitou představu, jak bych si přála, aby můj web vypadal - bohužel neodpovídá tomu ani jedna šablona, kterou nabízíte. Mohu šablonu nějakým způsobem vložit sama nebo je nutné, abyste to udělali za mě? Pokoušela jsem se vložit kod šablony do css stylu - nijak se však změna neprojevila. Případně pokud bych vám zaslala představu šablony, za kolik byste mi ji mohli vytvořit? Mockrát děkuji za informace. Přeji krásný den. J.

    Odpovědět

  • Barva boxů

    10. 8. 2016 13:48:26 | Eliška Hrubá

    Dobrý den, ráda bych na šabloně ONE změnila barvu boxů na 90875C, poradíte mi kde najdu návod?
    Děkuji,
    Eliška

    Odpovědět

inPage

Webhosting

Domény

Ostatní