Snippety

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

Autor příspěvku Zdeněk Vojáček

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;

O autorovi

Zdeněk Vojáček

Milovník žen, masa a PHP kódu

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.