Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
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) <p style="color: red">Tento odstavec bude červený.</p> Stylopis (pomocí značky <style> na začátku dokumentu) <style> p {color: red} </style> V externím .css souboru odkazovaného značkou <link> <head> <link rel="stylesheet" type="text/css" href="styly.css"> </head>
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 <style>…</style> 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í <h1 style = "font-family: verdana; color#0066ff; text-align: center; font-size: 18 pt">Text nadpisu</h1> <p>Další text v odstavci</p> Nejvyšší definiční priorita
6
Barvy Vyjmenované: <font color="red"> Procentuelně RGB zápisem:
<font color="rgb(100%,0%,0%)"> Desetinným RGB zápisem: <font color="rgb(255,0,0)”> Šestnáctkovým RGB zápisem: <font color="#ff0000"> Zkráceně šestnáctkovým zápisem: <font color="#f00">
7
Element style v HTML dokumentu
h1 {color: green;} h2 {color: blue;} </style> 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 <body> </body>
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í. <style> h1, h2, h3 { font-family: verdana; } h2 { color: red </style>
9
Dědičnost Schopnost prvků dědit stejné vlastnosti <style> p {
font-family: verdana; font-size: 15px; } </style> <p>Text v odstavci. Je zde také <a href= odkaz</a>který zdědil vlastnost definovanou odstavcem, tedy typ a velikost písma </p> Zde je <a href=“ odkaz</a>, 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. <body> <style> p { font-family: verdana; font-size: 20px; color: red; } .zmena_velikosti { font-size: 12px; </style> <p>První odstavec.</p> <p class="zmena_velikosti">Druhý odstavec s jinou velikosti písma.</p> <p>Třetí odstavec.</p> </body>
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. <style> h1 { font-size: 16px; text-align: center; } .ramecek { border-color: blue; border-style: solid; </style> <h1>Klasický nadpis dle definice</h1> <h1 class="ramecek">Nadpis s orámováním</h1> Styly orámování:
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. <style> #obrazek {float: left; width: 300px} </style> … <p> <img id="obrazek" src="grafika/budovq.jpg" alt="budova PEF"> </p> <p>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). <style> #obrazek {float: left; width: 300px} p {clear: left;} </style>
15
Pozadí elementu <style>
Lze zadat jako inline definice, nebo jako definice stylu dokumentu viz následující ukázka. <style> h1 {background-color: red} .barvy {background-color: red; color: white} </style> <h1>Informace o PEF</h1> <h1 class="barvy">Informace o PEF</h1> <h1 style="background-color: blue; color: white">Informace o PEF</h1>
16
Pozadí elementu - pokračování
Načtení obrázku, bez opakování a s opakováním podkladu. <style> .pozadi { background-image: url("obloha.png"); background-repeat: no-repeat} </style> <h1 class="pozadi">Informace o PEF</h1> }
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 <body>. Obdobně se také dají nastavit i jiné globální vlastnosti pro celý dokument, třeba velikost písma. <style> body { background-image: url("obloha_velka.png"); } img {clear: left} </style> <h1 class="pozadi">Informace o PEF</h1> 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(" background-image: url("c:/temp/obloha_velka.png");
Podobné prezentace
