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
float
zarovnání prvku, nikoliv textu
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;
- 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-right
vnější odsazení prvku z pravé strany
margin-top
vnější odsazení prvku shora
margin-bottom
vnější odsazení prvku zdola
Padding – vnitřní odsazení
padding-left
vnitřní odsazení prvku zleva
padding-right
vnitřní odsazení prvku zprava
padding-bottom
vnitřní odsazení prvku zdola
padding-top
vnitřní odsazení prvku zhora
