SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST

Představme si několik základních CSS vlastností. Kaskádové styly jsou soupisem příkazů pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. „Jazyk“ CSS byl navržen standardizační organizací W3C. CSS obsahuje velké množství vlastností. V tomto článku si představíme pouze ty nejdůležitější CSS vlastnosti, seznam všech najdete na stránkách W3Cschools.com.

Všechny uvedené CSS vlastnosti jsou užitečné při lehkém dostylování šablony WordPressu. Často se totiž stane, že potřebujete upravit nějaké odsazení, změnit velikost obrázku, písma apod.

Background – pozadí

background-color

barva pozadí prvky

background-color:yellow;

background-image

obrázek na pozadí

Color – barvy

barva textu

color:#00f;

Font písma

font-size

velikost písma

font-size:20px;

font-weight

tloušťka písma

font-weight:900;
font-weight:100;

font-family

styl písma

font-family: Georgia, Arial, sans-serif
font-family: Courier New, Courier, monotype

Text

text decoration

úprava textu

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

text align

zarovnání textu

text-align:left;
text-align:right;
text-align:center;

float

zarovnání prvku, nikoliv textu

float:left;
float:right;

 

Display – způsoby zobrazení

display block

Prvek se zobrazí do bloku. Jedná se v podstatě o základní zobrazení.

  • 1.display:block;
  • 2.display:block;
  • 3.display:block;

display none

Prvek se nezobrazí.

  • 1.display:block;
  • 2.display:none;
  • 3.display:block;

2. prvek má display:none;

display inline

Prvky se zobrazí v řadě za sebou.

  • 1.display:inline;
  • 2.display:inline;
  • 3.display:inline;

Border – rámečky okolo prvků

border-color

přidá prvku rámeček určité barvy
border-color:red;

border-width

přidá prvku rámeček určité tloušťky
border-width:4px;

border-style

Přidá prvku rámeček určitého typu
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:bouble;

Zkrácený zápis

Ve většině případů se pro rámeček používá zkrácený zápis, který je kombinací všech tři.
border: 5px dotted #f0f;

Margin – vnější odsazení prvků

margin-left

vnější odsazení prvku z levé strany

margin-left:20px;

margin-right

vnější odsazení prvku z pravé strany

margin-right:20px;

margin-top

vnější odsazení prvku shora

margin-top:10px;

margin-bottom

vnější odsazení prvku zdola

margin-bottom:10px;

Padding – vnitřní odsazení

padding-left

vnitřní odsazení prvku zleva

     padding-left:20px;

padding-right

vnitřní odsazení prvku zprava

padding-right:20px;

padding-bottom

vnitřní odsazení prvku zdola

padding-bottom:20px;

padding-top

vnitřní odsazení prvku zhora

padding-top:20px;

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte email, ať o nic nepřijdete!

Nespamujeme! Další informace naleznete v našich zásadách ochrany osobních údajů.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík
Přejít nahoru