Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Kaskádové styly - CSS. Způsoby vložení Přímý zápis (individuální definice u konkrétní značky pomocí atributu style) Tento odstavec bude červený. Stylopis.

Podobné prezentace


Prezentace na téma: "Kaskádové styly - CSS. Způsoby vložení Přímý zápis (individuální definice u konkrétní značky pomocí atributu style) Tento odstavec bude červený. Stylopis."— Transkript prezentace:

1 Kaskádové styly - CSS

2 Způsoby vložení Přímý zápis (individuální definice u konkrétní značky pomocí atributu style) Tento odstavec bude červený. Stylopis (pomocí značky na začátku dokumentu) p {color: red} V externím.css souboru odkazovaného značkou

3 Vlasnosti CSS  Rychlá změna celkového vzhledu dokumentů  Stránky se rychleji načítají  Jeden styl může být použit pro více stránek  Podpora jiných platforem  oddělení obsahu od formy

4 Priorita jednotlivých definic stylů  Nejmenší priorita stylu definovaného v externím souboru (styl definující obecné vlastnosti pro více HTML stránek).  Střední prioritu má styl definovaný v čísti … dokumentu (místní upřesnění pro daný dokument).  Nejvyšší prioritu má vložený inline style ve značce při konkrétním použití.  Za pomoci těchto tří úrovní priorit lze vytvářet hierarchicky propojené návrhy stylu k dílčímu konkrétnímu použití.

5 Inline styly  Definované při konkrétním použití Text nadpisu Další text v odstavci  Nejvyšší definiční priorita

6 Barvy  Vyjmenované:  Procentuelně RGB zápisem:  Desetinným RGB zápisem:  Šestnáctkovým RGB zápisem:  Zkráceně šestnáctkovým zápisem:

7 Element style v HTML dokumentu h1 {color: green;} h2 {color: blue;} nebo h1 { font-family: "Arial CE", "Helvetica CE", Arial; font-size: 14pt; color: #990000; font-weight: bold; }  Definici stylu je vhodné umístit do části

8 Seskupování selektorů  Seskupování selektorů umožňuje definovat společné vlastnosti pro více prvků. U konkrétního prvku může následně dojít k dílčímu upřesnění. h1, h2, h3 { font-family: verdana; } h2 { color: red }

9 Dědičnost  Schopnost prvků dědit stejné vlastnosti p { font-family: verdana; font-size: 15px; } Text v odstavci. Je zde také internetový odkaz který zdědil vlastnost definovanou odstavcem, tedy typ a velikost písmahttp://www.jakpsatweb.cz Zde je další odkaz, který nezdědil nic.

10 Třídy  Používají se tam, kde pro nějaký prvek máme nadefinované obecné vlastnosti, avšak u dílčího výskytu chceme nastavit jiné parametry. p { font-family: verdana; font-size: 20px; color: red; }.zmena_velikosti { font-size: 12px; } První odstavec. Druhý odstavec s jinou velikosti písma. Třetí odstavec.

11 Třídy - pokračování  Nastavení rámečku u zvoleného elementu lokálně. Lze taktéž řešit pro všechny globálně a to v definici stylu u konkrétního selektoru. h1 { font-size: 16px; text-align: center; }.ramecek { border-color: blue; border-style: solid; } Klasický nadpis dle definice Nadpis s orámováním  Styly orámování: style.htmlhttp://www.jakpsatweb.cz/css/border- style.html

12 Relativní a absolutní velikost písma  Vlastnost font-size  Relativní: px, em, ex, %  Absolutní: m, cm, mm, pt, pc (pt = 1/72 palce)  Vhodné používat relativní jednotky a to relativně třeba vzhledem k aktuální velikosti zobrazovaného okna prohlížeče. V tomto případě při změně velikosti dojde k přepočítání aktuální hodnoty a nastaví se adekvátní rozměr.  Podrobněji o této problematice s ukázkami použití najdete na:

13 Identifikátory  Pro jednoznačný popis nějakého elementu (skripty) existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, na rozdíl od třídy nezačíná tečkou, ale znakem #. V těle dokumentu by se element s daným identifikátorem měl vyskytovat pouze jednou. Pokud to nemá opodstatnění, vhodné používat spíše třídy. #obrazek {float: left; width: 300px} … Rok 2009 je pro nás velmi významný - slavíme 50. výročí vzniku naší fakulty. Při této příležitosti chystáme mnoho aktivit, např. 27. unora reprezentační ples, března mezinárodní konferenci

14 Identifikátory - pokračování  Pokud dojde k obtékání textu kolem obrázku, jak je zjevné v předešlém případě, lze toto napravit zrušením působnosti předchozího nastavení za pomoci následujícího elementu (odstavec). #obrazek {float: left; width: 300px} p {clear: left;}

15 Pozadí elementu  Lze zadat jako inline definice, nebo jako definice stylu dokumentu viz následující ukázka. h1 {background-color: red}.barvy {background-color: red; color: white} Informace o PEF

16 Pozadí elementu - pokračování  Načtení obrázku, bez opakování a s opakováním podkladu..pozadi { background-image: url("obloha.png"); background-repeat: no-repeat} Informace o PEF.pozadi { background-image: url("obloha.png"); } Informace o PEF

17 Pozadí elementu - pokračování  Základním elementem pro podklad může být i celý dokument, v tomto případě je nutno tuto skutečnost nastavit pro část. Obdobně se také dají nastavit i jiné globální vlastnosti pro celý dokument, třeba velikost písma. body { background-image: url("obloha_velka.png"); } img {clear: left} Informace o PEF  Dle potřeby nutno nastavit opakování atd.  Další podrobnosti na:

18 Nejčastěji užívané vlastnosti  font-family: definice typu písma  font-style: řez písma  font-size: velikost písma  color: definice barvy popředí, nebo písma  background-color: definice barvy pozadí  background-image: obrázek na pozadí  background-repeat: opakování obrázku na pozadí  background-position: umístění obrázku na pozadí  vertical-align: vertikální zarovnání textu  text-align: horizontální zarovnání textu  line-height: vzdálenost mezi řádky textu  border-top-style: styl rámečku  Podrobněji na adrese:

19 Definice cesty ke zdroji  Adresování zdrojů v rámci webových projektů můžeme provádět absolutně (adresa úplná včetně uvedení disku), nebo relativně (vzhledem k místu, kde se nalézáme-používaného HTML dokumentu). Neboť většinou nevíme, kde bude adresář s webovým projektem umístěn, provádíme odkazy na zdroje jen relativně.  Ukázka relativního adresování, zdroj je ve stejném adresáři jako spuštěný HTML dokument jež ho požaduje background-image: url("obloha_velka.png");  HTML dokument se nalézá ve stejném adresáři jako adresář podklad, v němž odkazujeme zdroj (obloha_velka.png) background-image: url("podklad/obloha_velka.png");  Je odkazován zdroj, který se nalézá v adresáři o úroveň výše, než je spuštěný HTML dokument background-image: url("../podklad/obloha_velka.png");  Absolutní odkazování, jednoznačné určení zdroje background-image: url("http://www.nekde.cz/podklad/obloha_velka.png"); background-image: url("c:/temp/obloha_velka.png");


Stáhnout ppt "Kaskádové styly - CSS. Způsoby vložení Přímý zápis (individuální definice u konkrétní značky pomocí atributu style) Tento odstavec bude červený. Stylopis."

Podobné prezentace


Reklamy Google