0 Kč s DPH

CSS – uživatelské základy

Obsahuje významy nejpoužívanějších CSS vlastností, které využijete při vlastních úpravách šablon systému inPage. Nezapomeňte mít zatrženo Nastavit vlastní styl jako aktivní, a následně potvrdit zeleným tlačítkem Upravit, jak ukazuje následující obrázek.

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;)
  • 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)
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
   

Vladimír Souš
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • 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.cz - webové stránky, doména a webhosting snadno.