CSS Odporúčané tutoriály: http://www.jakpsatweb.cz/css/ http://www.w3schools.com/css/ Čo je CSS Cascading Style Sheet súbor kaskádnych štýlov definuje, ako sa majú zobrazovať HTML elementy. Zapisujú sa priamo do elementov, alebo do html súboru alebo do samostatných súborov s príponou.css. Práve zápis štýlov do samostatných súborov a ich oddelenie od html elementov umožňuje rovnaký obsah html stránky zobrazovať rozdielnym spôsobom a naopak, viac html súborov zobrazovať v jednotnom formáte. Vzhľad (css) sa takto oddelil od obsahu (html). Zapojenie css do html súboru - externý.css súbor sa prilinkuje v <head> elemente: <link rel="stylesheet" type="text/css" href="styles.css"> - interné štýly sa tiež definujú v <head> elemente: <head>... <style type="text/css"> div.ex { border: 1px solid blue; }... </style>... </head> Pojmy Selektor označenie elementov, ktorých vzhľad štýl ovplyvňuje. Môže to byť tag, id (vtedy selektor začína znakom #), trieda (class, selektor začína bodkou), pseudotrieda, prípadne ich kombinácia. Tiež to môže byť atribút - vtedy je selektor v hranatých zátvorkách. Vlastnosť (property) konkrétna vlastnosť, ktorú treba nastaviť, Hodnota (value) hodnota, ktorá sa vlastnosti má nastaviť. Väčšina vlastností má vymenovanú množinu hodnôt (napr. pre vlastnosť text-align sú prípustné hodnoty left, right, center, justify). Jednotky Farba definuje sa: - buď slovom (z tzv. color table, príklad je na http://msdn.microsoft.com/enus/library/system.windows.media.colors.aspx ), avšak pozor, W3C štandard obsahuje len 17 farieb: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
- alebo kombináciou RGB, a to buď v šestástkovom tvare #rrggbb, alebo v desiatkovom tvare rgb (r, g, b), prípadne v percentuálnom tvare rgb (r%, g%, b%). Upozornenie ak sa dá, treba použiť web safe farby (paletu tých farieb ponúka napríklad GIMP), príklad palety je na http://answers.oreilly.com/topic/721-the-web-palette/ Rozmer dá sa definovať v rôznych jednotkách. Najpoužívanejšie sú pixel (px), em (1 em je štandardná výška písma), metrické jednotky, palce (in) a percentá. Jednotky treba písať hneď za číslom, inak to prehliadače nezvládnu (takže správne je 100px, 70%, nesprávne je 45 pt a podobne). Syntax [/* komentar */] selector [, selector2,...][:pseudo-class] { property: value; [property2: value2; [/* komentar */]...] } Príklady: div { background-color: #FF0000; } /*elementy div majú červené pozadie*/.ram {border: 1px solid blue; } /*elementy s class= ram majú modré orámovanie*/ #prvy { color: rgb (0%, 0%, 100%); } /*element s id= prvy má červené písmo*/ span#kontakt { font-weight: bold; } /*span s id= kontakt má tučné písmo*/ input[type=text] { height: 25px; } /*textové polia majú výšku 25 pixelov*/ a:link { text-decoration: none; } /*linky nebudú podčiarknuté*/ Kaskádovosť Vzhľad elementu môže byť ovplyvnený viacerými pravidlami, zvyčajne platí to posledné. Preto záleží na poradí definovania selektorov a aj na tom, kde je štýl definovaný. Priorita prebratia štýlov podľa umiestnenia v súboroch je nasledujúca: 1. inline (napr. <span style= background-color: red; >...</span>), 2. štýl definovaný v <head>...<style> span { background-color: blue; }... </style>...</head> 3. externe definovaný štýl v css súbore: span { background-color: yellow; }, 4. prednastavená hodnota prehliadača. Samozrejme, to by platilo, ak sú externé štýly prilinkované pred definovaním interných (v head elemente) štýlov. Ale ak sú prilinkované neskôr, majú prednosť. Preto pozor na poradie! Priorita prebratia štýlov podľa selektora (ešte viac to zamotá):
1. podľa id selektora 2. podľa class selektora 3. podľa elementového selektora No a navyše platí pravidlo čím podrobnejšie špecifikovanie, tým vyššia priorita. Ak je podrobnosť špecifikovania rovnaká, záleží aj na poradí definovania (berie sa posledná hodnota). Keďže takýchto kombinácií je veľmi veľa, pre prehľadnosť sa odporúča používať kombinácie len v nutných prípadoch a zároveň sústrediť štýly na jedno miesto. Ak majú byť štýly na viacerých miestach, potom sa treba snažiť o ich logické rozdelenie (sústrediť rovnaké veci do jedného súboru). Externý príklad - priklad-kombinacia-selektorov.html
Základné CSS vlastnosti Vlastností je veľmi veľa, preto sa ich len niektorých dotkneme hlavne s dôrazom na pochopenie podstaty a nie referenčné vymenovanie. Samozrejme dôraz kladieme na vhodnosť použitia pre AJAX aplikácie. Mnohé CSS vlastnosti umožňujú skrátené zápisy, príklad bude uvedený pre background: Pozadie - background - background-color definuje farbu pozadia elementu, - background-image, background-position a background-repeat umožňujú definovať obrázok na pozadie (prípadne aj jeho časť), jeho opakovanie a pozíciu, backgroundattachment umožňuje obrázok ukotviť. background je skrátený zápis. Nasledujúce dve definície znamenajú to isté: body { background: #ffffff url('obrazok.png') no-repeat right top; } body { background-color: #ffffff; background-image: url('obrazok.png'); background-repeat: no-repeat; background-position: right top; } Text - color definuje farbu textu, - text-align horozintálne zarovnanie (right, left, center, justify), vertical-align vertikálne zarovnanie, - text-decoration podčiarkuje, prečiarkuje atď. a text-transformation mení malé písmená na veľké, - letter-spacing a word-spacing definujú medzery medzi písmenami a slovami, lineheight výšku riadka, Font Písmo rozdeľujeme na skupiny (generic family) - bezpätkové (sans-serif) a pätkové (serif), s pevnou šírkou písmen (monospace, neproporcionálny font) alebo s písmenami rôznej šírky. Pätkové písmo sa používa na dlhé texty, pretože pätky vytvárajú linku, ktorej sa môžu čitateľove oči držať. Bezpätkové je vhodné na nadpisy, krátke texty, linky... Príklady: monospace, neproporcionálny font proporcionálny font serif Courier Times New Roman sans-serif Lucida Console Arial
- font-family definuje konkrétny názov fontu. Zvyčajne sa uvádza viac a na konci aj to, či pätkový alebo nie. Prehliadač totiž nemusí mať uvedené fonty definované, ak nenájde ani jeden vymenovaný, použije default serif / sans-serif. Hovorí sa tomu fallback systém, príklad: p.serif { font-family: "Times New Roman", Times, serif; } - font-style, font-variant a font-weight hovoria o kurzíve, kapitálkach a tučnom písme, - font-size o veľkosti písma. Odkazy Element <a> vyzerá inak, keď odkazovaný dokument bol navštívený a inak, keď je aktívny. Aj toto sa dá upraviť pomocou CSS a to použitím pseudotried. Ak sú použité, musia nasledovať v tomto poradí (v príklade je zrušené podčiarknutie odkazov okrem toho, cez ktorý prechádza myš): a:link { text-decoration: none; } /* nenavštívený odkaz */ a:visited { text-decoration: none; } /* navštívený odkaz */ a:hover { text-decoration: underline; } /* prechod myšou nad odkazom*/ a:active { text-decoration: none; } /* aktívny odkaz */ Box model šírka a výška, orámovanie, odsadenie, okraje Vo všeobecnosti každý element zaberá na ploche prehliadača nejaký obdĺžnik. Koľko miesta zaberá, určujú vlastnosti margin (okraj), border (rám), padding (odsadenie obsahu), width (šírka obsahu = šírka elementu) a height. - margin je odsadenie elementu od okolitých elementov, je vždy transparentný, - outline je zvýraznenie okolo orámovania, je súčasťou marginu, prípadne okolitých elementov, nezväčšuje rozmer elementu, v skrátenom zápise je dôležité poradie (color, style, width), - border (border-width, border-style, border-color) definujú orámovanie. Príklad skráteného zápisu obraničenia len zhora, poradie je dôležité (width, style, color): border-top: 1px solid blue; - padding je odsadenie obsahu elementu od jeho orámovania.
Vo všetkých troch prípadoch sa dá definovať šírka aj zvlášť pre všetky štyri strany (v prípade skráteného tvaru je poradie top, right, bottom, left, teda v smere hodinových ručičiek). Celková šírka elementu je teda margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Problém zobrazenia v prehliadačoch Internet Explorer používa iný box model, v ktorom width zahsňa aj border a padding. Samozrejme je to potom veľký rozdiel v zobrazení oproti iným prehliadačom. Tento problém sa dá riešiť tým, že sa v html použije taký DOCTYPE, vďaka ktorému je zobrazený html súbor v štandardnom móde. Špecialita orámovania v tabuľkách - border-collapse: vlastnosť border sa dá nastaviť na jednotlivé bunky, to ale znamená, že každá z nich bude orámovaná a rámček medzi nimi sa zdvojí. Použitím border-collapse: collapse sa tieto rámčeky zlúčia, separate ich nechá oddelené. - cellspacing a cellpadding pozor, tu nejde o CSS vlastnosti, ale atribúty elementu table. Prvý hovorí o vzdialenosti medzi bunkami a druhý o odsadení obsahu vnútri buniek, teda majú CSS správanie, preto sú tu uvedené. Zobrazenie / skrytie elementu - visibility konkrétne visibility: hidden - skryje element tak, že plocha, ktorú element zaberá, ostane pre lement vyhradená, len bude prázdna, - display konkrétne display: none skryje element tak, že sa plocha, ktorú element zaberá, nahradí inými elementami, teda obsah stránky sa posunie. Display má ešte hodnoty inline a block, ktorých nastavenie môže zobraziť blokové elementy ako inline a podobne, inline elementy ako blokové. - opacity - čiastočná priehľadnosť je to vlastnosť CSS 3, ale už teraz ju Firefox, podporuje. Zápis opacity: x, kde 0 <= x <= 1, kde nepriehľadné je 1. MSIE používa filter: alpha (opacity=x), kde 0 <= x <= 100. Poziciovanie Keď nie je nijako špecifikované, elementy sa zobrazujú v poradí, ako nasledujú (normálny tok stránky). Z tohto toku sa dajú vyňať elementy, aby sa zobrazili na určitých pozíciách: - position + top, right, bottom a left: default hodnota pre position je static, teda normálny tok. Ak nie je hodnota static, berú sa do úvahy hodnoty vlastností top, right, bottom a left zobrazí element relatívne k prehliadaču. Hodnota position: absolute zobrazí element v absolútnej pozícii voči prvému rodičovskému elementu (od elementu), ktorý má poziciovanie iné ako static. Hodnota position: relative zobrazí element relatívne k normálnemu toku. - z-index v prípade z porušenia normálneho toku sa môžu niektoré elementy prekrývať, z- indexom sa určí, ktorý má byť nad ktorým, externý príklad priklad-absolutne-poziciovanie.html
- overflow, clip ak sa obsah do elementu nevmestí (pretečie), overflow pomáha vytvoriť scrollbar, alebo proste prebytočný obsah oreže. Naopak, clip oreže vnútorný obsah elementu, aby na rodičovskom elemente nenastalo pretečenie. - float (right, left), clear (left, right, both) element s float sa nalepí na pravú / ľavú stranu rodičovského elementu a ostatný obsah okolo neho obteká (v normálnom toku). Obtekanie sa dá natvrdo ukončiť elementom, ktorý má nastavenú vlastnosť clear: both. Zmena kurzoru myši Vlastnosť cursor umožňuje zobraziť klasickú šípku, ruku, dvojšípky, presýpačky a podobne. Dokonca sa dajú použiť vlastné obrázky. Obrázky Hoci s CSS vôbec nesúvisia, HTML aj CSS ich využívajú, preto pár rád: - pre fotky a skeny používame komprimovaný formát (jpg), obrázkom.bmp sa treba úplne vyhnúť, - pre ikonky, navigačné obrázky a podobne radšej formát png alebo gif (ten umožňuje transparentnosť), - v prípade, že treba použiť sadu malých obrázkov, CSS umožňuje zobraziť len časť obrázku, preto sa dá sada vytvoriť ako jeden obrázok zníži sa tým počet requestov na server. Záver Pre potreby seminára a teda AJAX aplikácií budeme využívať: - strict DOCTYPE, ktorý prepne prehliadač do štandardného módu, - štýly box modelu, pozadia, textu a fontov, čiastočne aj poziciovanie a schovávanie elementov, - štýly v.css súboroch s tým, že budú rozdelené na spoločné štýly (poziciovanie, rozmery) a skinovacie štýly (farby, fonty, orámovanie). Skinovacích štýlov by malo byť viac a malo by sa dať medzi nimi prepínať, - odporúčané tutoriály a testovacie stránky (uvedené na začiatku dokumentu).