Kaskádové styly - CSS
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>
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
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í.
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
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"> http://www.computerhope.com/htmcolor.htm http://www.jakpsatweb.cz/html/barva.html
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>
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>
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.
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>
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í: http://www.jakpsatweb.cz/css/border-style.html
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: http://www.jakpsatweb.cz/css/font-size.html
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, 12.-13. března mezinárodní konferenci
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>
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>
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> }
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: http://www.jakpsatweb.cz/css/background-image.html
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: http://www.jakpsatweb.cz/css/
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");