CSS Internetové publikování 1
Problémy Spousta zbytečného kódu Omezená podpora minoritních platforem, počítačů Přemíra grafiky dlouhá doba načítání Závislost na rozlišení Obtížná údržba dokumentů Drobné změny v designu je třeba opravovat na mnoha místech najednou
Špatný příklad formátování Proč je uvedený způsob špatný? Pokyny pro formátování jsou promíchány s informací Kód je velmi špatně udržovatelný TIP zkuste si změnit barvu zvýraznění na červenou http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/spatny-priklad.html
Lepší příklad formátování Proč je uvedený způsob lepší než předchozí? Pokyny pro formátování jsou oddělené od informace Kód je dobře udržovatelný Změnou stylu se změní formátování všech instancí http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/lepsi-priklad.html
Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru
Styl v hlavičce HTML Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css"> <!--... definice stylu... --> </style> </head>
Struktura pravidla v CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } Selektor Nejjednodušší selektor je jméno objektu (např. elementu, kterého se definice týká) Vlastnost Jméno nastavitelné vlastnosti (> 90 v CSS 2.1) Hodnota Hodnota na kterou se má daná vlastnost nastavit Typ hodnoty je dán podle typu vlastnosti
Hodnoty vlastností v CSS Délkové míry URL Řetězec řetězec řetězec Klíčové slovo Barva
Jednotky délky v CSS Relativní Jednotka em ex px Význam Odpovídá velikosti písma v aktuálním elementu (pokud se používá pro nastavení velikosti písma, odpovídá velikosti písma mateřského elementu) Odpovídá výšce písmene x pixel jeden bod definovaný relativně vzhledem k rozlišení zařízení (bod na obrazovce)
Jednotky délky v CSS Absolutní Jednotka in cm mm pt pc Význam Palec Centimetr Millimetr bod (1 pt = 1/72 inch) pica (1 pc = 12 point) Tyto hodnoty má význam používat, pouze je-li známo fyzické rozlišení zařízení
Jednotky délky v CSS Procenta Jednotka Význam % Určuje délku relativně vzhledem k jiné délce Každá vlastnost která může přijmout hodnotu v procentech definuje tuto referenční délku
URL url(text_url) Text URL může být uzavřen do uvozovek, takže je správně obojí background: url("http://www.example.com/pinkish.png") background: url(http://www.example.com/pinkish.png)
Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif }
Barvy v CSS Způspb zápisu Vysvětlivky color_name Jméno barvy (red, green, blue, magenta,...) rgb(x,x,x) Složky palety RGB 0-255 rgb(y%, y%, y%) Procentuální složky palety RGB 0-100% #rrggbb Hexadecimální číslo vyjadřující složky palety RGB 00-ff Více o barvách
Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family family-name Čárkami oddělený seznam písem v sestupném pořadí priority Použije se první dostupné písmo Bezpečnější je vkládat názvy do uvozovek jsou to řetězce Např. font-family: "Franklin Gothic Book", "Arial"; Je-li na klientském počítači dostupný font Franklin Gothic Book použije se, jinak se použije Arial
Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family generic-family Generické rodiny písem jsou vždy dostupné (i když nemusí vypadat vždy stejně Možnosti 'serif' (např. Times) 'sans-serif' (např. Helvetica) 'cursive' (např. Zapf-Chancery) 'fantasy' (např. Western) 'monospace' (např. Courier) Výčet by měl vždy končit písmem z generické rodiny font-family: "Franklin Gothic Book", "Arial", sans-serif;
Vlastnosti písma Vlastnost Popis Hodnoty font-style styl písma normal italic oblique font-variant varianta písma normal small-caps font-weight síla tahu písma normal bold bolder lighter 100 200... 900
Vlastnosti písma Vlastnost Popis Hodnoty font-size velikost písma xx-small x-small small medium large x-large xx-large smaller larger délková jednotka % Velikosti xx-small xx-large jsou absolutní Smaller / larger indikují o jednotku menší / větší písmo oproti rodičovskému elementu Podobně se chovají %
Vlastnosti pozadí a barev Vlastnost Popis Hodnoty color Barva textu barva background-attachment nastavuje, zda mají obrázky na pozadí rolovat se zbytkem stránky scroll fixed background-color barva pozadí elementu barva transparent background-image obrázek na pozadí url none background-position poloha obrázku na pozadí top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat opakování obrázku na pozadí repeat repeat-x
Vlastnosti textu Vlastnost Popis Hodnoty letter-spacing Mezery mezi písmeny normal length text-align Zarovnání left right center justify text-decoration Ozdoba písma none underline overline line-through blink text-indent Odsazení 1. řádky length % text-transform Transformace velikosti písma none capitalize uppercase lowercase white-space Interpretace mezer a ostatních "bílých" znaků normal pre nowrap word-spacing Velikost mezer mezi slovy normal
Formátovací model margin (vnější okraj) border (rámeček) padding (vnitřní okraj) Obsah elementu
Vlastnosti okrajů Vlastnost Popis Hodnoty margin Zkratka pro nastavení všech okrajů margin-top margin-right margin-bottom margin-left margin-bottom Spodní okraj auto length % margin-left Levý okraj auto length % margin-right Pravý okraj auto length % margin-top Horní okraj auto length % Podobně pro vnitřní okraje se margin nahradí padding Např. padding-left
Vlastnosti ohraničení Vlastnost Popis Hodnoty border-color Barva ohraničení color border-style Styl ohraničení none hidden dotted dashed solid double groove ridge inset outset border-width Tloušťka ohraničení thin medium thick length Možno též nastavovat vlastnosti každého ze 4 ohraničení zvlášť Názvy vlastností mají vložené top-, -bottom-, -left-, -right- Např. border-left-width
Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru
Styl v hlavičce HTML Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css"> <!--... definice stylu... --> </style> </head>
Styl v externím souboru Umožňuje využití jedné definice stylu mnoha HTML dokumenty <head>... <link href="jméno_souboru_se_stylem.css" type="text/css" rel="stylesheet">... </head>
Styl u každého elementu Atribut style Odporuje filozofii CSS, používat vyjímečně... <p style="definice stylu">tento jediný odstavec bude formátován podle definice.</p>...
Opakování - struktura definice CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } Selektor Doposud jsme znali pouze typový selektor odpovídá názvu elementu platí pro všechny elementy daného typu
Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif } POZOR neplést z dalšími typy selektorů při seskupování je oddělovačem vždy čárka
Další selektory Univerzální selektor * - týká se každého elementu v dokumentu Např: * {color: blue} Všechny elementy budou mít nastaveno modré písmo
Další selektory - třída Třída = podskupina elementů V HTML definována atributem class Např. <p class="modry">modry text</p> Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota }.modry { color: blue; }
Příslušnost k více třídám Jednotlivé třídy odděleny mezerami Např. <p class="modry inverzni">modry text</p> Definice v CSS pro třídu: p.modry {color: blue;} p.inverzni {background-color: blue;} Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow;}
Další selektory id elementu id = identifikátor jednoho konkrétního elementu na stránce V HTML definován atributem id Např. <p id="1odstavec">modry text</p> Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } #1odstavec { color: blue; }
Pseudotřídy Odkazy a:link dosud nenavštívený odkaz a:visited navštívený odkaz a:hover na odkaz se ukazuje myší a:active link je aktivní (vybrán klávesou TAB) :first-child Element, který je prvním potomkem jiného elementu
Dědění vlastností <head> <style type="text/css"> p { color: red } </style> </head> <body> <p>červený <em>text<em></p> </body> I slovo 'text' v příkladě se zobrazí červeně, protože tuto vlastnost zdědil od svého rodičovského elementu
Priorita dědění vlastností - Kaskáda Definuje-li více selektorů stejnou vlastnost různě a týkajíli se stejného objektu má prioritu selektor s nejvyšší specifičností Specifičnost klesá v řadě 1. vlastnosti definované v atributu style="" 2. podle počtu ID atributů (#) 3. podle počtu jiných atributů (class) a pseudotříd 4. podle počtu názvů elementů
Vlastnosti seznamů Vlastnost Popis Hodnoty list-style-image nastaví zvolený obrázek jako odrážku seznamu none url list-style-position poloha odrážky inside outside list-style-type typ odrážky-číslování none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana
Výška a šířka elementu height: délková míra width: délková míra Uplatní se pouze na blokové elementy
Zarovnání Zarovnání textu v elementu text-align Zarovnání elementu na střed margin-left: auto; margin-right: auto; Zarovnání elementu doprava margin-left: auto; margin-right: 0px;
Vertikální zarovnání Týká se řádkového elementu Řeší vertikální zarovnání prvku Vertical-align: baseline middle sub super text-top text-bottom <procenta> <délka> top bottom
Vztahy mezi elementy Parent Rodič Child Dítě An element A is called the parent of element B if B is directly contained by A. Element A je rodičem elementu B, je-li element B přímo obsažen v elementu A An element A is called the child of element B if and only if B is the parent of A. Element A je dítětem elementu B, platí-li že B je rodičem A
Vztahy mezi elementy Descendant An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B. Následník, Potomek Element A je následníkem (potomkem) elementu B, platí-li buď (1) že A je dítětem B, nebo (2) že A je dítětem nějakého elementu C, který je následníkem B
Následnické (Descendant) selektory Selektor, který se vztahuje pouze na elementy, které jsou následníky jiného elementu K vyjádření následnictví se používá mezera Např: h1 em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy v elementu h1 a to i nepřímo <h1>typografie<em>na</em>internetu</h1> <h1><span>typografie<em>na</em>internetu</span></h1> <h2>typografie<em>na</em>internetu</h2>
Následnické (Descendant) selektory Selektor může specifikovat i vícestupňové následnictví a může zahrnovat univerzální selektor Např: div * p {color: blue;} Selektor se týká těch elementů <p>, které jsou vnuky a pozdějšímimi potomky elementu <div>
Child selektory Selektor, který se vztahuje pouze na elementy, které jsou dětmi jiného elementu K vyjádření následnictví se používá > Např: H1>em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy přímo v elementu h1 <h1>typografie<em>na</em>internetu</h1> <h1><span>typografie<em>na</em>internetu</span></h1> <h2>typografie<em>na</em>internetu</h2>
Adjacent sibling selektory Selektor, který se vztahuje pouze na elementy, které jsou společnými dětmi nějakého elementu s jiným elementem a s tímto elementem sousedí K vyjádření sourozenectví se používá znak + Např: p {text-indent: 2em;} h1+p {text-indent: 0em;}!!!Nefunguje v MSIE 6 V MSIE 7,8 pouze ve standardovém modu (správný doctype)
Atributové selektory Selektor, který se vztahuje pouze na elementy, které mají přiřazenu hodnotu danému atributu K vyjádření vztahu se používá [atribut] nebo [atribut=hodnota] Např: h1[title] {color: red;}!!!nefunguje v MSIE 6
Pseudoelementy :first-line Vztahuje se na první řádek nějakého elementu Např: p:first-line { font-variant: small-caps; } :first-letter Vztahuje se na první písmeno nějakého elementu
Tabulky U tabulek často využijete různé typy zarovnání Dva modely tvorby okrajů tabulky border-collapse: collapse separate border-spacing (pro separate) Pro okraje elementů tabulky lze použít standardní vlastnosti border margin padding
Obtékané elementy Element může být nastaven tak, že jej budou následující elementy obtékat vlastností float: left right none Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none left right both
Vizuální formátovací model Každý element vytvoří nula nebo více boxů obdélníků, které se podle daných pravidel skládají a tvoří vzhled dokumentu
Vybrané typy boxů Block Inline (viz příklad 1) Run-in Typ boxu, který bude vytvořen určuje vlastnost display: inline block list-item run-in http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad01.html
Typy boxů
Typy boxů v MSIE
Příklad použití inline boxu a { border: 1px red dashed; background-image: url(external.png); background-position: right; background-repeat: no-repeat; padding-right: 15px; } http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad02.html
Skrytí elementu display: none schová element a nevyhrazuje pro něj prostor visibility: hidden element normálně existuje, alokuje prostor, ale obsah není vidět
Width a šířka boxu Vlastnosti nastavení šířky a výšky elementu (width, height) se týkají pouze vlastního obsahu Šířka a výška boxu jsou dány připočtením 2* (margin + padding + border)
Outline (CSS 2.0) Např: p { outline:#00ff00 dotted 1px; } Kreslí ještě další linku okolo border
Pružný design Design stránky s proměnlivou šířkou, která se přizpůsobí šířce okna Problém 1: při příliš širokém okně jsou řádky velmi dlouhé a špatně se čtou Řešení: vlastnost max-width maximální šířka elementu Podobně i min-width min-height max-height MSIE jen ve standardovém módu
Obtékané elementy Element může být nastaven tak, že jej budou následující elementy obtékat vlastností float: left right none Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none left right both http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad03.html
CSS pozicování Absolutní nebo relativní nastavení pozice elementu Vlastnost position, nabývá hodnot static implicitní chování relative posun oproti standardnímu umístění absolute přesná specifikace pozice vzhledem k obsahujícímu bloku fixed specifikace vzhledem k oknu prohlížeče (IE jen ve std režimu!!!)
Určení pozice Vlastnosti top horní okraj left levý okraj bottom spodní okraj right pravý okraj Hodnota auto procenta% délka
Relativní určení pozice #outer { color: red } #inner { color: blue } #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }
Absolutní určení pozice element { position: absolute; top: 0px; left: 0px;} Prvek se umístí přímo na souřadnice zadané nejčastěji jako [top, left] Počátek souřadnic je levý horní okraj nejbližšího nadřazeného elementu s position jinou než static
Vrstvení elementů Pozicované elementy se mohou překrývat Jejich vrstvení lze ovlivnit vlastností z-index: číslo
Pružné logo Šířka stránky se přizpůsobuje prohlížeči, ale logo zůstává fixní Řešení: logo implementujeme jako pozadí elementu <div> <img src="logo.gif" border="0" alt="" width="754" height="144" /> </div> <div class="hlavicka"> </div>.hlavicka { background-image : url(logo.gif); background-repeat : no-repeat; background-position : left; height : 144px; }
CSS rozlišení prohlížečů triky( hacks ) Využití nedostatků v podpoře CSS standardu <head> <style type="text/css"> #alpha {width: 170px; height: 113px; filter:progid:dximagetransform.microsoft. AlphaImageLoader(src='alpha.png', sizingmethod='scale')} body>#alpha { background-image: url(alpha.png); background-repeat: no-repeat; } </style> </head> <body bgcolor="#ffcccc"> <img id="alpha" alt="transparant PNG" width="170" height="113" src="prazdny.gif" /> </body>
CSS rozlišení prohlížečů Podmíněné komentáře HTML <link rel="stylesheet" href="styly.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" href= ie-styly.css" type="text/css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" href= ie6-styly.css" type="text/css" /> <![endif]-->
Média v CSS Aplikace různých stylů podle média <LINK REL="stylesheet" href="styly.css" type="text/css" media="screen"> <LINK REL="stylesheet" href="styly_tisk.css" type="text/css" media="print"> <STYLE type="text/css" media="screen">... styly pro obrazovku... </STYLE> <STYLE type="text/css" media="print">... styly pro tisk... </STYLE>
Média v CSS Aplikace různých stylů podle média <STYLE type="text/css > @media screen { BODY { margin: 1em; background: red; color: white } } @media print { BODY { margin: 1.5cm; background: tansparent; color: black } } </STYLE>
Typy médií all aural braille všechny typy médií; styly definované v sekci uvozené media="all" budou použity (pokud je to možné) na všech typech výstupních zařízení pro hlasové syntezátory (zvukový výstup). Viz samostatnou kapitolu věnovanou zvukovým CSS dále. pro braillovská taktilní výstupní zařízení (slepecký dotykový "displej") embossed pro braillovské tiskárny handheld print pro kapesní počítače (typicky displej s nízkým rozlišením, nízká přenosová rychlost) pro stránkový tisk a pro náhledu tisku na obrazovce. Viz samostatnou kapitolu věnovanou stylům pro tisk. projection screen tty tv pro výstup na promítací zařízení (projektory, tisk na průsvitný materiál atd.). Viz kapitolu věnovanou stylům pro tisk. pro výstup na barevnou obrazovku počítače pro zařízení používající síť znaků pevné šířky (neproporciální písmo) - dálnopisy, terminály atd. Ve stylech pro zařízení typu tty by se neměly používat pixelové jednotky [px]. pro televizní obrazovky (nízké rozlišení v barvě, omezené možnosti pohybu po stránce, možnost zvukového výstupu)
CSS3 prvek širší rodiny HTML5 technologií stále ve vývoji, moderní prohlížeče však částečně podporují http://findmebyip.com vývojové vlastnosti s vendor prefixy -moz- (Mozilla, potažmo celé jádro Gecko) -webkit- (Safari, Google Chrome a další prohlížeče na jádře Webkit) -o- (Opera) -ms- (IE9) 72
Kulaté rohy border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 73
Gradient např. background-image: -moz-linear-gradient(top, #aa0000 0%, #ffffff 100%); široké možnosti lineárních gradientů do budoucna i radiální gradienty složitá syntaxe generátory http://www.colorzilla.com/gradient-editor/ 74
Stín textu text-shadow: 1px 1px 2px #FF0000; posun X posun Y velikost stínu (rozmytí) barva box-shadow: 5px 5px 10px #000; -webkit-box-shadow: 5px 5px 10px #000; -moz-box-shadow: 5px 5px 10px #000; 75
Pozadí Více pozadí u jednoho elementu background: url('left.jpg') top left no-repeat, url('right.jpg') top right no-repeat, url('middle.jpg') top center repeat-x; Velikost obrázku pozadí background:url(obrazek.png) bottom right no-repeat; -moz-background-size: 100px 100px; -o-background-size: 100px 100px; -webkit-background-size: 100px 100px; background-size: 100px 100px; 76
Barvy s alfa kanálem color: rgba(200, 54, 54, 0.5); color: hsla(200, 54, 54, 0.5); 77
Media queries Pokročilejší možnosti úpravy stylu podle schopností zobrazovacího zařízení třeba šířky <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> podrobnosti např. http://www.alistapart.com/articles/responsive-web-design/ 78
CSS3 Atributové selektory E[att^= val ] Element E, jehož hodnota atributu začíná val. E[att$= val ] Element E, jehož hodnota atributu končí val. E[att*= val ] Element E, jehož hodnota atributu obsahuje val. 79
CSS3 Pseudotřídy E:root Vybere kořenový element daného dokumentu. V HTML to tedy vždy bude <html>. Jediný rozdíl: :root má větší specificitu než klasické html. Podporu nabízí všechny prohlížeče kromě IE. Do IE přináší podporu až IE9. E:empty Vybere prázdný element. Např. tedy prázdný <span></span>. Podporu znovu nabízí všechny prohlížeče kromě IE8-. E:target Vybere element, který cílíme v URI. Takže když odkazujeme konkrétní část dokumentu přes dokument.html#cast-dokumentu, tak ji můžeme uživateli zvýraznit. Podporu nabízí Mozilla, Webkit, IE9 a částečně i Opera (implementace má drobné chybky). 80
CSS3 Pseudotřídy E:enabled x E:disabled Vybere element formuláře, do kterého je povolené/zakázané zapisovat. Podporu nabízí znovu všechny prohlížeče kromě IE8-. E:checked Vybere checkbox, který je zaškrtnutý. Podpora je stejná jako u :enabled a :disabled. E::selection Když vybíráte text myší, tak se nějakým způsobem zvýrazňuje. Typicky podbarvuje nějakou barvou. Pomocí ::selection to můžeme ovlivnit. Podporu nabízí znovu všichni kromě IE8-, u Mozilly musíte použít -moz-::selection. E:not(s) Vybere element E, který neodpovídá jednoduchému selektoru s. Podporu nabízí všichni kromě IE8-. E:last-child, E:only-child CSS2 přinesla :first-child, který vybere prvního potomka daného elementu, CSS3 zavádí :last-child, který vybere posledního potomka. :only-child pak vybere jediného potomka daného elementu. Podpora je standardně všude kromě IE8-. 81
CSS3 Pseudotřídy E:first-of-type x E:last-of-type x E:only-of-type Vybere daný typ elementu, který splňuje řečenou podmínku. Tedy buď je první svého typu (např. první prvek seznamu), je poslední svého typu (poslední prvek seznamu) a nebo je jediný svého typu (seznam, který má jen jedno li). Podporují všechny prohlížeče, IE až od verze 9. E:nth-child(n) x E:nth-last-child(n) Element, který je n-tým potomkem svého rodiče. První pravidlo počítá od začátku, druhé od konce. Podpora v prohlížečích není ideální. Nabízí ji IE9, Firefox 3.5+, Safari. Opera má problémy s :nth-child(n). E:nth-of-type(n) x E:nth-last-of-type(n) Element, který je n-tým svého typu. První pravidlo počítá od začátku, druhé od konce. Podpora je stejná jako u :nth-child(n). S čím můžeme u předchozích selektorů kouzlit, je parametr n. Tam totiž můžeme dosadit matematickou operaci, dle které se pak spočítá, co to vlastně cílí. Například tedy pomocí p:nth-child(5n+1) mohu vybrat první odstavec na stránce a pak každý o pět dál (tedy první, šestý, jedenáctý, ). Kromě číselných operací tam také lze dosadit dvě klíčková slova odd a even, tedy lichý a sudý, což logicky bude vybírat každý lichý, či každý sudý element. E ~ F 82
CSS Frameworky Základ pro tvorbu návrhu Frameworky Blueprint http://www.blueprintcss.org/ http://constructyourcss.com/ YUI http://developer.yahoo.com/yui/grids/ 960 GS http://960.gs/ Pěkný článek o CSS Frameworcích http://zdrojak.root.cz/clanky/css-frameworky-pro-masy-dilprvni/ 83