Tento odstavec bude červený.

Stylopis (pomocí značky V externím .css souboru odkazovaného značkou ">

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

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

Kaskádové styly - CSS.

Podobné prezentace


Prezentace na téma: "Kaskádové styly - CSS."— 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) <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=http://www.jakpsatweb.cz>internetový odkaz</a>který zdědil vlastnost definovanou odstavcem, tedy typ a velikost písma </p> Zde je <a href=“http://www.idnes.cz”>další 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("http://www.nekde.cz/podklad/obloha_velka.png"); background-image: url("c:/temp/obloha_velka.png");


Stáhnout ppt "Kaskádové styly - CSS."

Podobné prezentace


Reklamy Google