Kaskádové styly Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Ditta Kukaňová.

Prezentace na téma: "Kaskádové styly Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Ditta Kukaňová."— Transkript prezentace:

1 Kaskádové styly Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Ditta Kukaňová

2 Anotace Název školy Gymnázium a Jazyková škola s právem státní jazykové zkoušky Svitavy Adresa školySokolovská 1638, 568 02 Svitavy IČO62033026 Operační programOP Vzdělávání pro konkurenceschopnost Registrační číslo CZ.1.07/1.1.28/01.0050 Označení vzdělávacího materiálu 1.IT - K_INOVACE_1.IT.09 Tematická oblast Název vzdělávacího materiáluKaskádové styly Druh učebního materiáluVýukový materiál Anotace Prezentace pro výuku CSS stylů Klíčová slova Html, CSS, tagy, selektory, vlastnosti, třídy, pseudotřídy Ročník3. Typická věková skupina17–18 let Speciální vzdělávací potřebyŽádné AutorDitta Kukaňová Zhotovenoduben 2013 Celková velikost355 kB

3 Kaskádové styly CSS

4 Připojení stylů do stránky 1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tzv. přímý styl. Je to nešikovné, ale občas se to používá. 2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy a. 3. Použitím externího stylopisu -- to je soubor *.css, na který se stránka odkazuje tagem. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně.link příklad

5 Chci udělat odstavec červeným písmem pomocí CSS. Jde to třemi způsoby: Přímý zápis Do zdroje se napíše tato deklarace odstavce: Tento odstavec bude červený. Vysvětlení: je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená. Stylopisem Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy : p {color: red} a do těla stránky se mohou psát odstavce: Tento odstavec bude červený. Tento mimochodem také, protože červené budou všechny. To, jak zařídit, aby nebyly červené všechny, ale jenom některé odstavce, se dá pomocí "tříd" a "identifikátorů""tříd" a "identifikátorů", o tom později. Externím CSS souborem Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude pouze tento text: p {color: red} Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:

6 Přiřazení definic prvkům stránky Prvky, pro které má definice platit, popisují selektory. Selektorem může být: název prvku – např. p, body, h1, atd. – pravidlo se pak vztahuje na všechny prvky tohoto typu prvek dané třídy (class) – zapisuje se tečkou za jménem prvku – např. h1.nadpis nebo p.poznamka v html: … nadpis a v CSS definujeme např.: h1.nadpis { color: red} prvek s daným pojmenováním (id) – každý prvek na stránce můžeme pojmenovat pomocí atributu id (pozor, id stejné hodnoty se může na stránce vyskytovat pouze jednou) – v CSS se zapisuje dvojitým křížkem za názvem prvku, např. div#zahlavi a v html: záhlaví

7 Pravidla kaskády přednost mají přesnější, konkrétnější pravidla před pravidly obecnějšími p { color: blue} p.poznamka { color: red} p#pozn1 { color: green} v případě, že se sejdou stejně konkrétní definice téže vlastnosti, záleží na jejich pořadí – použije se ta, která je zapsaná později styly definované přímo ve značkách prvků mají nejvyšší prioritu, tedy i přednost před definicemi v hlavičce nebo ve stylopisu

8 Formátování textu Typ písma Velikost písma Barva písma Řez písma Dekorace písma Zarovnávání textu

9 Formátování bloků stránky Blokové prvky jsou například:,, -,, Blokové vlastnosti CSS umožňují definovat odstupy mezi bloky rozměry pozadí rámečky pozicování na stránce Blokové vlastnosti se nedědí!

10 Oblasti blokových prvků OBSAH výška (height) šířka (width) předchozí blok další blok odstup od rámu (padding) rámeček (border) okraje (margin)

11 Rozměry blokuwidth Pokud není určeno jinak, bloky zabírají vodorovně celý prostor, který mají k dispozici. Určíme-li jejich šířku (width), zbylý prostor se rozdělí mezi postranní okraje Definujeme-li menší rozměr a shodné okraje, zajistíme si tak vystředění prvku Nulový okraj na jedné straně pak způsobí zarovnání vpravo nebo vlevo

12 Rámečkyborder Definujeme : barvu, sílu a typ čáry rámečku Definujeme buď zvlášť pro každou stranu (border-top, border-right, border- bottom, border–left) nebo jeden parametr pro všechny strany ( např. border-style, border-color, border-width) anebo použijeme sdružených definic např: border: 1px solid black

13 Odstup od rámečku padding Definujeme buď zvlášť pro každou stranu (padding-top, padding-right, padding-bottom, padding-left) Anebo ve sdružené definici: padding: 1px 2px 3px 4px; ( = odstup postupně nahoře, vpravo, dole, vlevo) padding: 1px 2px 3px; ( = hodnota pro chybějící směr se určí jako stejná, pro směr protější) padding: 1px 2px; ( nahoře, dole 1px, vpravo a vlevo 2px) padding: 1px; ( všude stejná hodnota)

14 Okraje margin Stejně jako u definice odstupu od rámečku Buď definujeme každou stranu zvlášť (margin-top, margin-right, margin-bottom, margin-left) Nebo pomocí sdružené definice margin: (4,3,2 nebo 1 číselná hodnota)

15 Styl pozadí background Můžeme definovat barvu pozadí, obrázek na pozadí, jeho opakování ve směru vodorovném nebo svislém a jeho pozici Definujeme buď po jednotlivých vlastnostech (backround-color, background-image,..) Nebo ve sdružené definici (dílčí vlastnosti se mohou uvádět v libovolném pořadí oddělené mezerami Např: background: white url(“logo.gif”) no-repeat fixed top right

16 Plovoucí prvkyfloat Vlastnost float ( má hodnotu left, right nebo none) zajistí, že se z prvku stane plovoucí prvek Plovoucí prvek se přesune k levému (resp. pravému) okraji nadřazeného prvku a všechny další prvky budou zobrazeny ve zbývajícím prostoru vpravo (resp. vlevo) od něj. Má-li být prvek obtékán, musí být jeho šířka definovaná užší, aby se vedle něj ještě další obsah vešel. příklad

17 Vlastnost clear Zatímco vlastnost float řídí, zda prvek sám bude plovoucí a bude moci být obtékán okolním obsahem, tak vlastnost clear naopak určuje, zda obsah takové plaváčky bude obtékat, nebo ne. Výchozí hodnotou je none, s níž budou všechny plovoucí prvky obtékány. Další možné hodnoty už ale umožnují nastavit, že se nebudou obtékat prvky plovoucí vlevo (clear:left), vpravo (clear:right) nebo dokonce vůbec žádné (clear:both). Při formátování stránky to znamená, že prvek, kterému nastavíme řekněme clear:left, musí zvětšit svůj horní okraj (margin-top) tak, aby začínal až pod spodním okrajem všech předchozích vlevo plovoucích prvků. Jinými slovy, prvek s clear:left se zobrazí až pod všemi předchozími levostrannými plaváčky — prvek s clear:right si počká až na konec těch pravostranných a má-li clear:both, zobrazí se až pod všemi předchozími floaty.

18 Vztah plaváčků k neplavcům a naopak Podstatnou informací, na kterou se často zapomíná, je onen fakt, že bloky si plovoucích prvků nevšímají. O jimi zabraný prostor pouze zmenší plochu určenou svému obsahu, ale samy se formátují, jako by nikde žádný plaváček nebyl. Díky tomu mohou být vyšší obrázky obtékány třeba dvěma třemi odstavci — ale ze stejného důvodu se může klidně stát, že bude plovoucí prvek vyčnívat z rámečku, do nějž jsme ho chtěli umístit. To se ale dá celkem snadno ošetřit (viz dále).viz dále Druhá, méně patrná "zákeřnost" se skrývá v informaci, že plovoucí prvky jsou vyjímány z ostatního obsahu. Velmi markatní to bude hlavně v situaci, kdy v rodičovském bloku po vyjmutí všech plaváčků už nic nezbude. Takový blok se pak bude formátovat jako prázdný; může mít nulovou výšku, může dokonce zcela zmizet. Není to však žádná chyba, ale — jak je vidět — naprosto korektní chování. A existuje opět celkem snadná cesta, jak to ošetřit (viz dále).viz dále

19 Vynucené včlenění plaváčka dovnitř rodičovského bloku Pokud potřebujeme, aby rodičovský blok skončil, teprve až skončí i všechny plovoucí prvky uvnitř něj (např. aby nepřesahovaly jeho rámeček, nebo aby sám neměl nulovou výšku — viz výše), postačí za poslední plovoucí prvek umístit jakýkoli (neplovoucí) prvek s příslušnou hodnotou clear. Ten se pak zobrazí až za předchozími plaváčky a teprve potom se ukončí rodičovský blok. Tento prvek nemusí být ani viditelný (dáme-li mu visibility:hidden) a dokonce nemusí ani zabírat moc prostoru na výšku (nastavíme-li mu např. záporný margin-top). Řešení pak může vypadat třeba takto:.boxik { padding: 1em; background: yellow; border: 1px solid black; }.imgvlevo { float: left; margin: 0 1em 0 0; } hr.cistic { clear: both; height: 1px; border: none; margin: -1em 0 0 0; visibility: hidden; }... Text text text text text text text text text. Úplně stejně můžeme vyřešit problém v sazbě, máme-li sloupce tvořeny dvěma floaty a jejich rodičovský blok má zobrazit pozadí pod nimi:...

20 Hodnoty a jednotky 1/2 klíčová slova: obvykle zastupují jinou hodnotu, nepíšou se do uvozovek např: yellow, red, green, none,… čísla: celá – pomocí číslic 0-9 a znaménka + nebo - desetinná – desetinná část se odděluje tečkou, nikoli des.čárkou (0.9 i.9 nulu je možné vynechat) relativní jednotky: em – velikost písma právě používaného prvku ex – výška malého písmene x u použitého fontu, věšina prohlížečů jej ale interpretuje jako polovinu em px – jeden bod obrazu (záleží na výstupním zařízení) absolutní jednotky: mm, cm, in (25,4mm) pt – typografický bod (point) 1/72 palce ( =0,3528mm) pc – typografická jednotka pica 1 pc = 12 pt

21 Hodnoty a jednotky 2/2 URL adresa: pomocí funkce url(adresa), url(“adresa”), url(‘adresa’) absolutně – včetně protokolu (http://...) relativně – v rámci adresářové struktury (např.: obr.gif, img/obr.gif,../obr.gif) barva: klíčovým slovem hexadecimálním kódem #rrggbb (#ff6633) nebo i #rgb (#f63) dekadické a procentní hodnoty rgb(127,0,255) nebo rgb(50%,0,100%) http://wellstyled.com/tools/colorscheme2/index.html

22

23 Příklad použití vlastnosti clear:.main { width: 380px; background-image: url("background.gif"); }.leftColumn { float: left; width: 150px; text-align: justify; }.rightColumn { float: left; margin-left: 10px; width: 200px; text-align: justify; }.correct { clear: left; height: 1px; } ….. Levý sloupec Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed wisi. Sed dapibus Pravý sloupec Aliquam turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer erat. Donec dignissim nunc ut risus. Donec commodo mauris in libero. Fusce malesuada tincidunt tellus. Aliquam sodales erat quis purus. Aliquam pretium mattis nulla. Aliquam ullamcorper tincidunt risus. Nunc euismod, quam sed hendrerit. …..

24 Sklon písma:normal, italic,obligue, inherit Síla písma: normal, bold, bolder, lighter, inherit Řez písmafont-style font-weight

25 Zarovnávání textutext-align left - vlevo right- vpravo center- na střed justify- do bloku

26 Barva písmacolor Klíčovým slovem – red, green, yellow,… Hexadecimálním kódem barvy - #336633,… http://wellstyled.com/tools/colorscheme2/index.html

27 Dekorace písmatext-decoration podtržení - underline nadtržení- overline přeškrtnutí- underline blikající text - blink žádný efekt- none

28 Velikost písmafont-size velikost písma se nastavuje: klíčovými slovy číselně s jednotkou (font-size: 12px;) procenty (font-size: 75%;)

29 Typ písma font-family CSS definuje pět obecných typů písma. V prohlížeči se pak nahrazují konkrétním fontem podle nastavení programu nebo uživatele. Jsou to: serif – patkové písmo sans-serif – bezpatkové písmo cursive – kurzíva mono-space – neproporční písmo fantasy – dekorativní písmo Příklad: font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;