--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST url: https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/ date: 2014-07-09 modified: 2014-07-09 author: Zdeněk Vojáček type: post categories: [Snippety] tags: [css, Programování, WordPress návody] --- Snippety # SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST [ZV **Zdeněk Vojáček**](https://www.wplama.cz/author/wojda/) Publikováno 9. 7. 2014 2 min čtení Pozor: Článek je z roku 2014. Některé postupy se mohly změnit. ![HTML](https://www.wplama.cz/wp-content/uploads/2014/06/HTML.jpg "HTML") Obsah článku (9 kapitol) 1. [Background – pozadí](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#background-pozadi) 2. [Color – barvy](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#color-barvy) 3. [Font písma](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#font-pisma) 4. [Text](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#text) 5. [float](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#float) 6. [Display – způsoby zobrazení](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#display-zpusoby-zobrazeni) 7. [Border – rámečky okolo prvků](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#border-ramecky-okolo-prvku) 8. [Margin – vnější odsazení prvků](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#margin-vnejsi-odsazeni-prvku) 9. [Padding – vnitřní odsazení](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#padding-vnitrni-odsazeni) 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](http://www.w3schools.com/cssref/ "CSS"). 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í ![pozadi](https://www.wplama.cz/wp-content/uploads/2014/06/pozadi.png "pozadi") ## 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; - [#css](https://www.wplama.cz/stitek/css/) - [#Programování](https://www.wplama.cz/stitek/programovani/) - [#WordPress návody](https://www.wplama.cz/stitek/navody/) Sdílet - - [](mailto:?subject=SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST&body=SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fserial-zaciname-s-programovanim-css-2-cast%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fserial-zaciname-s-programovanim-css-2-cast%2F) ZV Autor Zdeněk Vojáček Milovník žen, masa a PHP kódu 11 článků [Všechny články autora →](https://www.wplama.cz/author/wojda/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/serial-zaciname-s-programovanim-css-2-cast/#respond) [← Předchozí článek Vyberte s námi hashtag české WordPress komunity](https://www.wplama.cz/vyberte-s-nami-hashtag-ceske-wordpress-komunity/) [Další článek → Evropský WordCamp 2014 se blíží, budete tam?](https://www.wplama.cz/evropsky-wordcamp-2014-se-blizi-budete-tam/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Snippety →](https://www.wplama.cz/wordpress/kodovani/) ![wordpress programovani](https://www.wplama.cz/wp-content/uploads/2025/10/wordpress-programovani.jpg "wordpress programovani") Snippety ### [Jak ve WordPressu (včetně Gutenberg) automaticky nahradit „a, i, k, o, s, u, v, z“ pevnou mezerou](https://www.wplama.cz/jak-ve-wordpressu-vcetne-gutenberg-automaticky-nahradit-a-i-k-o-s-u-v-z-pevnou-mezerou/) 8. 10. 2025 3 min čtení --- ![wordpress editor](https://www.wplama.cz/wp-content/uploads/2024/02/wordpress-editor.png "wordpress editor") Snippety ### [Editor souborů ve WordPress](https://www.wplama.cz/editor-souboru-ve-wordpress/) 25. 3. 2024 2 min čtení --- ![cookies](https://www.wplama.cz/wp-content/uploads/2023/06/cookies.jpg "cookies") WordPress návody ### [Jak u pluginu Complianz upravit lištu a zvýšit počet lidí, který s použitím cookies souhlasí](https://www.wplama.cz/jak-u-pluginu-complianz-upravit-listu-a-zvysit-pocet-lidi-ktery-s-pouzitim-cookies-souhlasi/) 3. 7. 2023 1 min čtení ---