Snippety

SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část

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

Abychom mohli pokračovat s HTML, musíme si říci i něco málo o CSS kvůli formátování a struktuře těla stránky.

CSS – Cascading Style Sheets

CSS styly použijeme v podstatě kdekoliv, kde potřebujeme nějak ovlivnit vzhled webu. Ať už umístění jednotlivých prvků, jejich barvu či typ písma.

Napojení

externí soubor – Použití externího souboru pro CSS styly je nejpřehlednější a nejlepší způsob. Styly se Vám pak nemotají nikde v kódu a snadno je použijete kdekoliv na webu. Soubor se připojuje v hlavičce webu pomocí jednoduchého příkazu

<link rel=”stylesheet” type=”text/css” href=”styly.css”>

v hlavičce – Tyto styly se zapisují do hlavičky webu mezi tagy <style></style>

<style>

a { color:blue; }

</style>

přímý zápis – Slouží pouze k ovlivnění prvku, u kterého jsou zapsány. Nepíše se zde, co má ovlivnit pouze, jak to má ovlivnit. V našem případě barvu textu, který je v tagu <span> nastaví na modrou.

<span style=”color:blue;”>text</span>

class, id, tag

tagy – Styly můžeme napojit přímo na HTML tagy. V takovém případě nám daný styl ovlivní všechny takové tagy na stránce.

a { color:red;}

Takto zapsaný styl nám u všech odkazů na webu nastaví červené písmo.

class – Použijeme-li class, tak vytvoříme třídu, kterou následně můžeme přiřadit HTML prvkům, které chceme ovlivnit.

.podrtzeni { text-decoration:underline; }

<span class=”podtrzeni”>nějaký ten text</span>
<span>nějaký ten text</span>
<span class=”podtrzeni”>nějaký ten text</span>

id – Používá se velmi podobně class. Class definuje celou třídu prvků, “id” se používá pro nastylování jednoho prvku (například konkrétní container pro menu).

#tucne { font-weight:bold; }

<span class=”tucne”>nějaký ten text</span>
<span>nějaký ten text</span>
<span class=”tucne”>nějaký ten text</span>

Kombinace

Při používání můžeme zápisy libovolně skládat a kombinovat.

p a { color:red }   ->   všechny odkazy uvnitř odstavce obarví na červeno, ale ty, které v odstavci nejsou, zůstanou v původní barvě

.blok .cervene { color:red }  ->  Najde prvky které mají třídu blok a v nich najde prvky, které mají třídu cervene a obarví je na červeno

 

Příště si povíme něco nejpoužívanějších stylech a co znamenají.

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.