CSS styly Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín Tematická oblastTvorba WWW stránky v HTML Datum vytvoření2013 Ročník2 Stručný obsahPrincip tvorby CSS pravidel pro změnu vzhledu www stránky. Způsob využitíStudenti se seznámí s pojmem CSS a do své www stránky vloží pravidla pro změnu vzhledu stránky. AutorMgr. Michal Mikláš KódVY_32_INOVACE_35_IMIK09
CSS styly
CSS pravidla CSS – cascading style sheets Sada pravidel (stylů), která definují vzhled jednotlivých částí HTML stránky. Každé pravidlo se skládá ze dvou částí: – Selektor – označení toho, co chceme stylem ovlivnit – Vlastnosti – soubor vlastností, které určují vzhled
CSS pravidlo Selektor (nadpis 1. úrovně) – h1 Sada vlastností (barva textu bude červená) – color:red; V kódu stránky bude uvedeno CSS pravidlo: h1 { color:red; }
Vložení místa pro CSS pravidla do HTML stránky Do hlavičky vaší rozpracované HTML stránky si vložte pár značek a do první značky přidejte atribut type s hodnotou "text/css". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" … Untitled Document Nadpis vaší stránky
Úkol Vložte do místa pro CSS pravidla vaší stránky pravidlo, které změní barvu písma v hlavním nadpisu úrovně 1 na modrou a v nadpisech druhé úrovně na červenou. Změňte písmo stránky na nějaké bezpatkové.
Řešení úkolu Nejprve vyřešíme změnu písma stránky na bezpatkové písmo. Toho lze docílit pomocí vlastnosti font-family, kterou změníme u selektroru body (písmo chceme změnit v celém těle stránky). Je vhodné napsat více písem a zakončit jejich seznam obecným bezpatkovým písmem (sans-serif). Je to proto, že počítač se při zobrazení stránky snaží postupně najít požadované písmo zleva doprava a pokud žádné takové nenajde, tak použije - díky poslednímu obecnému příkazu - libovolné nalezené bezpatkové písmo. body{ font-family:Verdana, Geneva, sans-serif; }
Řešení úkolu Změnit barvy nadpisů první a druhé úrovně je snadné. Stačí pro každý uvést vlastnost color s požadovanou barevnou hodnotou. h1{ color:#06C; } h2{ color:#C33; }
Příklad výsledné HTML stránky iPad 4 – s retina displejem body{ font-family:Verdana, Geneva, sans-serif; } h1{ color:#06C; } h2{ color:#C33; } iPad 4 – s retina displejem Převratný retina displej Na Retina displeji iPadu vypadá vše jako ve skutečnosti. Text je ostrý jako břitva. Barvy doslova září. Fotky a videa jsou bohaté na detail. To vše díky jeho 3,1 miliónu pixelů – o milión pixelů víc než na HD televizi. Výkonný čip A6X Nový čip A6X v iPadu je až dvakrát rychlejší než čip A5X předchozí generace a podává až dvojnásobný grafický výkon, aniž by tím trpěla výdrž baterie.I nejnáročnější aplikace tak běží plynule, reagují okamžitě a neskutečně realisticky.
DALŠÍ ČTENÍ