Blog

Co je CSS
Obecně řečeno, CSS je nějaký zápis, který určuje vzhled (barvy, dekorační obrázky, rozmístění prvků) HTML dokumentu. CSS je zkratka slov Cascading Style Sheets. Do češtiny bychom to přeložili jako Tabulky kaskádových stylů. V praxi se pak častěji používají tyto názvy: Kaskádové styly, styly, CSS soubor(y). Soubor s kaskádovými styly má příponu css. Sám o sobě je k ničemu. Jeho funkčnost se projeví až po propojení s HTML souborem. A proč vlastně kaskádové? Protože při psaní CSS souboru se využívá tzv. kaskády. Co je tím myšleno si povíme dále. HTML dokumentu můžeme různými CSS soubory zajistit různé …

Připojení CSS k HTML
Způsoby připojení CSS k HTML 1. Přímé připojení stylu k prvku HTML Dělá se tak pomocí atributu style. Ukážeme si na příkladu:Nejprve zapíšeme zápis pro neostylovaný nadpis druhé úrovně. To je pro nás už hračka. <h2>Nadpis druhé úrovně</h2> Nyní si ho ostylujeme pomocí atributu style, určité vlastnosti a její hodnoty. <h2 style="color: green;">Nadpis druhé úrovně</h2> Pozn.: U noční verze webu má nadpis přidáno světlé pozadí, kvůli lepší čitelnosti. Na konci zápisu není nutné středník psát. Pokud ale chceme nějakou vlastnost přidat, středník je důležitý k jejímu oddělení. Je tedy lepší psát středník i …

Div a span
Div a span jsou neutrální tagy – nedávají obsahu v HTML dokumentu význam a sami o sobě nijak HTML dokument neformátují. Jedná se o párové tagy. Napíšeme-li do HTML dokumentu například <div>Div je neutrální tag.</div> a dokument poté zobrazíme v prohlížeči, uvidíme, že tag div se nijak zvlášť neprojevil. Obrovského využití však neutrální tagy naleznou ve spojení s CSS. Pomocí CSS vlastností se tyto tagy dají všemožně formátovat (můžeme jim přidělovat rozměry, umísťovat je na stránce, kam se nám zlíbí – pozicovat je, barvit je atd.). Především pomocí divů se pak tvoří layouty stránek …

Zápis CSS
Začneme hned příkladem. Chceme mít třeba odstavce modrou barvou s prostrkanými písmeny ve slovech (mezery určité velikosti mezi písmeny). p {  color: blue;  letter-spacing: 2px;  } Pozn.: U noční verze webu má odstavec přidáno světlé pozadí, kvůli lepší čitelnosti. Obecný zápis vypadá následovně: selektor {  css-vlastnost1: hodnota-css-vlastnosti1;  css-vlastnost2: hodnota-css-vlastnosti2;  } Vlastnosti mohou být zapsány v libovolné pořadí. Selektorem může být tag, třída, identifikátor nebo * (viz další kapitolu). Přehled CSS vlastností a jejich hodnot je v samostatné kapitole. Za hodnotou vlastnosti se pak píše středník sloužící k oddělění jednotlivých vlastností. Na konci tedy být nemusí, ale jak již jsem zmiňoval, …

Třídy a identifikátory
Třídy Mějme 3 odstavce z nichž jeden chceme mít červený: CSS .vyrazny {color: red;} Třída začíná tečkou a poté následuje název třídy (mezi tečkou a názvem není mezera!).Název píšeme bez diakritiky a mezer. Název může být libovolný, avšak neměl by obsahovat znaky jako otazník, vykřičník, … a neměl by začínat číslicí, nebo nám to nepojede. Možná teď někoho napadne, proč jsem zvolil slovo vyrazny a ne třeba cerveny. S barvami to je totiž trochu ošidnější. Co když se mi červený odstavec přestane líbit a předělám ho třeba na oranžový …

Spodní lišta jako na Facebooku
Tato kapitola ukazuje možné řešení lišty naspodu okna prohlížeče, která neroluje spolu s obsahem. Její šřka je 90 % šířky okna prohlížeče – je tedy natahovací. Řešení je funkční i v IE 6 s téměř nepostřehnutelným nedostatkem (viz dále). Nevím, jak to mají uděláno na Facebooku, ale tam se lišta chová perfetně i v IE 6. CSS * {margin: 0; padding: 0;}html {height: 100%; font-size: 62.5%;}body {   height: 100%;   background-color: #FFFFFF;   color: #101010;   text-align: center;   font: 1.6em Verdana, Arial, Helvetica, sans-serif;   }#wrapper {height: 100%; margin: 0 auto;}#page {width: 86%; margin: 0 auto; text-align: left;}p {margin: 0 …

Změna obrázku při najetí kursoru
Často na Internetu narážím na dotaz, jak udělat, aby se obrázek, na který najedu kursorem myši změni, změnil na jiný. Nejčastější odpovědí bývá, že to lze řešit pomocí JavaScriptu. JavaScript však někdo má v prohlížeči vypnutý. I když se jedná o malou část uživatelů/uživatelek, proč to neudělat tak, aby to fungovalo i jim. Navíc, kvalitní JS řešení je krapánek složitější. Řešit se to dá pomocí CSS. Ano, ano, i styly mohou mít někteří vypnuty, ale to už je pouze minimum případů. Následující …

Analysér kontrastu barev
Jedná se o užitečný nástroj, který nám poví, zda máme na stránkách dostatečně kontrastní text. Trocha teorie Analysér kontrastu barev počítá vzájemný kontrast dvou barev. Můžeme tak zjistit kontrast textu vůči jeho pozadí. Nejvyššího kontrastu pak dosáhneme, pokud porovnáme černou a bílou „barvu“. Kontrast je počítán pomocí algoritmu založeného na světelnosti. Starší verze analyséru využívala jiného algoritmu – rozdíl jasu/rozdíl barvy. Na který si můžeme v novější verzi přepnout. Kolik je dostatečný kontrast Pokud chceme na svých stránkách mít dostatečně kontrastní písmo, měli bychom …

Přístupnost a použitelnost
Přístupný a použitelný web je ukázka práce dobrého webdesignera. Naopak nepřístupný a málo použitelný web je ukázkou práce špatné a odfláknuté. Přístupnost a použitelnost spolu souvisejí a nejsou od sebe striktně odděleny. POUŽITELNOST Řekneme si několik vlastností použitelného webu: Pokud na web přijdu, vím, kde jsem, vím, o čem web je. Navigace na webu (menu) je zřetelná a je umístěna na lehce povšimnutelném místě. Rozhodně bych neměl na stránce rolovat, abych se k menu dostal (ani na menších monitorech). Písmo je dostatečně velké (číst blechy opravdu …

Validátor
Validátor je obecně nástroj ke kontrole platnosti (správnosti) něčeho. V této kapitole bude řeč o validátoru HTML kódu. Jedná se o on-line program (existují ale i validátory ke stažení a instalaci či jako doplňky pro webový prohlížeč Firefox), který prověří, zda náš zdrojový kód vyhovuje předepsaným pravidlům. Oficiální validátor od W3C W3C – World Wide Web Consorcium je sdružení, které vyvíjí standardy ohledně tvorby www. W3C také provozuje validátor, který umí zkontrolovat správnost zdrojového kódu našich stránek (vždy zkontroluje danou html stránku). Kód lze kontrolovat třemi …

Velikost písma
Písmo se dá na stránkách definovat různými způsoby. Nejprve si povíme trochu teorie a pak si ukážeme konkrétní způsob definice velikosti písma. Jednotky Velikost písma můžeme definovat: 1. absolutně (absolutními jednotkami): mm, cm, in (palec = 2,54 cm), pt (1/72 palce),pc (pica = 1/6 palce), xx-small, x-small, small, medium, large, x-large, xx-large2. relativně (relativními jednotkami): ex (výška malého písmene x), em (šířka velkého písmene M), %, smaller, larger, px (pixel) Pixely (malé čtverečky, ze kterých je složen obraz na monitorech) jsou jednotky relativní – na různých zobrazovacích …

Správná struktura kódu
HTML kód lze psát v podstatě dvojím způsobem. Buď hezky, nebo prasácky (přestože se toto slovo může někomu zdát trochu drsnější, označení „prasácký kód“ pro špatně sestavený HTML kód je poměrně zažité). Takový kód tvoří většinou WYSIWYG editory, a někteří „webdesigneři“. My si ukážeme, jak tvořit kód správný a hezký. Podstatou je zachování logické struktury. Ukázka prozradí víc. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="cs">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8">  <title></title>  <meta name="description" content="">  <meta name="robots" content="all,follow">  </head>  <body>  <h1>Nadpis (název) mého webu</h1>  <h2>Název kapitoly</h2>    <p>Obsah kapitoly…</p>    <p>Další odstavec obsahu…</p>  <h3>Podnadpis kapitoly</h3>  <ul>    <li></li>    <li></li>    <li></li>  </ul>  <hr>  <h2>Název další kapitoly na …