CSS příručka.
Definice písma v CSS
Font písma
se zadává CSS vlastností font-family. Použitelné jsou jenom taková písma, která jsou běžně rozšířená. U českých písem je to např. Times New Roman, Arial Courier New, Verdana a MS Sans Serif.
Sekundární font:
Pokud systém nenajde písmo zadané ve stránce, zkusí najít písmo další, které je uvedeno jako druhé za čárkou.
Takto můžeme určit i několik alternativních písem. Pro případ, že by prohlížeč neměl k dispozici žádné z určených písem ještě použijeme obecnou rodinu (tu bychom měli použít vždy a to na konci výpisu písem).
Velikost písma
lze zadávat absolutně (v bodech = pt nebo pixelech px) nebo relativně (v procentech nebo ve stupních). Základní rozdíl je pak ten, že relativně zadané písmo si může uživatel zvětšit v prohlížeči (velikost písma), což u absolutně zadaných velikostí (pt, px apod.) nemůže.
Vlastností font-size můžeme určit 7 různých velikostí:
Tip: při nastavování velikosti písma nastavte také výšku řádku vlastností line-height. Není to nutné, ale text se při vyšším řádku stává čitelnějším. Obvykle se dává výška řádku přibližně o polovinu větší, než je výška písma.
Styl písma
určujeme vlastností font-style která nám určí, zda se bude jednat o písmo normální, kurzívu, nebo skloněné písmo. Rozdíl mezi kurzívou a skloněným písmem je mimo jiné v tom, že kurzíva je jedinečným řezem písma, kdežto skloněné písmo vzniká transformací normálního řezu.
Varianty písma
jsou dvě: normální písmo a kapitálky. Určuje se vlastností font-variant.
Duktus písma
je poměr tloušťky písmových tahů k výšce písma, tedy to, jak je písmo silné. Určuje se vlastností font-weight.
Odkazy v CSS
Publikováno na stránkách Web Tvorba.
Odkazy by měly být od okolního textu velmi dobře odlišeny, tak, aby byly na první pohled viditelné. Návštěvník stránek se totiž na webu orientuje především podle odkazů, text třeba ani nečte, sleduje jen kam směřují odkazy. Proto je dobré, když odkazy z okolního textu jasně vyčnívají.
Barva odkazu:
Defaultně se odkazy v prohlížeči zobrazují modré, podtržené. Navštívené odkazy jsou fialové a aktivní odkazy červené. Při přejetí myší přes odkaz se jeho vzhled nijak nemění. To vše jde samozřejmě snadno změnit.
Ozdobení textu:
Bývá dobrým zvykem odkazy podtrhávat. Ne pro každého uživatele je barevné odlišení odkazů od okolního textu dostačující. Stejně tak dobrým zvykem je nepodtrhávat žádný jiný text. K definování stylu ozdobení slouží vlastnost text-decoration. Má vlastnosti none (bez ozdobení), underline (podtržení), overline (nadtržení), line-through (přeškrtnutí). Použít můžeme i všechny hodnoty najednou.
Pseudotřídy:
Psudotřídy slouží k odlišnému definování vlastností odkazů (link), navštívených odkazů (visited) a aktivnách odkazů (active). Zapisují se s dvojtečkou za tag a.
Pokud chceme, aby odkazy svůj vzhled změnili při přejetí myší, použijeme hover.
Barvy v CSS
Publikováno na stránkách Web Tvorba.
Barvu pozadí volíme tak, aby text byl dobře čitelný, tedy kontrastní k textu, barva by neměla být příliš jasná, vysloveně nevhodné je použití jasně červené, opatrně i s modrou. Signální barvy jsou dobré pro zvýraznění textu nebo odkazů. Pokud předpokládáme, že uživatelé si budou stránku tisknout, je třeba dát pozor na podobnou sytost barev (aby se barvy "neslily").
Na stránce se barví text, odkazy, pozadí a ohraničení. Barvit můžeme buď celý dokument selektorem body nebo jednotlivé elementy.
Zápis barvy:
Pro zápis barvy můžeme použít:
Barvení dokumentu:
U většiny elementů můžeme barvit pozadí pomocí vlastnosti background-color.
Text barvíme vlastností color. Například:
Pokud nedefinujeme žádné barvy, budou použity defaultní barvy prohlížeče, což je obvykle transparentní pro pozadí, černá pro text, modrá pro odkazy, fialová pro navštívené odkazy a červená pro aktivní odkazy.
Bezpečné barvy:
Bezpečné barvy (též tzv. Netscape paleta) jsou takové barvy, které by měl podporovat jakýkoliv WWW klient na jakémkoliv operačním systému, podporujícím alespoň 256 barev. Jinými slovy, pokud použijete na svých stránkách tyto barvy, máte vpodstatě zaručeno, že každý, kdo si vaše stránky bude prohlížet, si je bude prohlížet v barvách, v jakých jste je vytvořili. Jinak, v případě, že WWW klient nemá k dispozici vámi definovanou barvu, snáží se jí "poskládat" z jiných barev (tzv. dithering).
Použití ID nebo CLASS
Publikováno na stránkách Dlouhý Web dne 19.2.2005
Kdy se má použít atribut class a kdy id?
Patrně nejčastější otázka pokládaná v souvislosti s CSS. Stačí si však pamatovat jednoduché pravidlo:
Vyskytuje-li se prvek na stránce více než jednou, použijte class (třídu).
Vyskytuje-li se prvek na stránce pouze jednou, použijte id (identifikátor).
Podle standardů není možné použít atribut id pro prvek, vyskytující se na stránce více než jednou (validátor zahlásí chybu ID "main" already defined). Identifikátory se zpravidla používají pro animace ve Flashi, nebo JavaScriptové kódy - tedy unikátní prvky.
Značení
Identifikátory se ve stylopisu zapisují mřížkou (#):
<div id="vlevo"> _ </div>
Třídy se zapisují tečkou (.):
<span class="vlevo"> _ </span>
Může být zároveň id a class?
Zápis typu: <h1 id="_" class="_"> není chybný, je to naprosto korektní řešení! Jedná se o unikátní prvek (id), na který se uplatňuje ještě nějaké obecné formátování (class).
Okraje objektů margin a padding.
Rozlišujeme dva druhy okrajů: vnější a vnitřní.
Vnějšímu okraji se anglicky a webově říká margin, vnitřnímu padding (česky též výplň).
Mezi paddingem a marginem se zobrazuje rámeček (border).
U tabulek se namísto padding a margin objevují pojmy cellpadding (vnitřní okraj buněk) a cellspacing (vnější), což jsou atributy tagu <table>.
V Internet Exploreru do verze 6 pozor na jiný (chybný) význam šířky v css. IE do šířky počítá i border a padding.
Rozdíly mezi padding a margin:
- jsou odděleny rámečkem
- pod paddingem se zobrazuje pozadí objektu, pod marginem ne
- v některých prohlížečích jsou jinak podporovány
Zápis v CSS:
Okraje objektů se zapisují jako všechny CSS vlastnosti. Např:
udělá odstavec s okraji. K dispozici jsou všechny možné délkové jednotky. Je dobré připomenout, že na rozdíl od většiny jiných CSS vlastností se okraje nedědí, což je ovšem většinou logické.
Každý okraj jiný:
CSS ale navíc umožňují udělat na každé straně elementu rozdílné okraje. K dispozici jsou vlastnosti:
padding-top, padding-right, padding-bottom, padding-left.
Chcete-li šetřit klávesami, můžete zadat různé okraje jednou deklarací. Například zápis:
Hodnoty se uvádějí v pořadí horní, pravá, dolní, levá.
Platí stejně pro padding i margin (a navíc border).
Pokud je hodnot méně než čtyři, pak chybějící údaj přebírá hodnotu protilehlé strany.
Nulové odrážky v seznamech
Publikováno na stránkách Dlouhý Web dne 26.2.2004
Jak vytvořit klasický seznam (tag ul) bez odsazení z levé strany?
Internet Explorer i Mozilla počítají zmíněné odsazení trochu jinak. Nastavíme-li ul{margin:0}, Internet Explorer seznam posune doleva, ale ořeže i odrážky. V Mozille se nic nezmění (pokud bychom nastavili ul{padding:0}, tak se situace obrátí).
Řešením je nastavení nulového vnějšího okraje a vnitřního okraje na přibližnou šířku odrážky (doporučuji udávat v relativních jednotkách, nejlépe v EM - rozměr odsazení se tak bude udržovat konstantní i při změně velikosti písma).
Pro "oříznutí" typických odrážek přidejte jednu definici:
li { list-style-type: none }
