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

HTML

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;