1 / 38

CSS

CSS. Ing. Marián Pecko , PhD. 3 vrstvy moderného webu. Sémantický zdrojový kód. (X)HTML zbavený prezentačnej informácie vyhnúť sa značkám <font>, <i>, <b> a <u> obsahuje mnoho významových značiek odsek <p> nadpis < hx > zoznam s odkazmi <a> vo vnútri < li >

lillith-bond
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Ing. Marián Pecko, PhD.

  2. 3 vrstvy moderného webu

  3. Sémantický zdrojový kód • (X)HTML zbavený prezentačnej informácie • vyhnúť sa značkám <font>, <i>, <b> a <u> • obsahuje mnoho významových značiek • odsek <p> • nadpis <hx> • zoznam s odkazmi <a> vo vnútri <li> • <em>, <strong>, <th>, <thead>, <tfoot>, .... • pomáha zlepšovať prístupnosť stránok • čítačky obsahu „prečítajú“ stránky založené na zdrojovom kóde • zlepšené indexovanie robotmi vyhľadávačov

  4. Neutrálne značky • <div> • jednotka pre skupinu oblasti webového dokumentu • napr. spojuje hlavný obsah a potom sekundárny obsah • <span> • oddeľuje riadkový obsah od jeho rodičovského elementu • <h1>Kapitola 1: <span>Moderný zdrojový kód</span></h1>

  5. Pripojenie CSS do (X)HTML • externý súbor <link rel=˝stylesheet˝ type=˝text/css˝href=˝style.css˝ media=˝all˝ /> • v <head> <style type=˝text/css˝ media=˝screen, print˝> … </style> • riadkový štýl • atribút style=˝…˝

  6. Syntax CSS h1 { color: blue; } h2 { color: green; } blok deklarácií zoznam pravidiel selektor deklarácia => vlastnosť: hodnota;

  7. Selektory • definujú, ktorú časť dokumentu (X)HTML budú dané deklarácie ovplyvňovať

  8. Selektory elementov • ide o názov elementu (X)HTML, ktorý vyberá všetky takéto elementy v dokumente h1 { color: blue; } h2 { color: green; }

  9. Selektory triedy <h1 class=˝varovanie˝>Buďte opatrní!</h1> <p class=˝varovanie˝>Každých 108 minút musíte stlačiť tlačidlo</p> .varovanie { color: red; font-weight: bold; } h1.varovanie { font-size: 24px; }

  10. Selektory identifikátora <div id=˝hlavny-obsah˝> <p>Hlavný obsah stránky.</p> </div> #hlavny-obsah { width: 400px; background-color:#ccc; } • v (X)HTML môže byť len jeden identifikátor na označenie daného elementu

  11. Selektory následníka • umožňuje vytvárať pravidlá štýlov, ktoré ovplyvnia len elementy, ktoré sú následníkmi iného elementu <ul> <li>Prvá položka</li> <li>Druhá položka <ol> <li>Prvá položka vnoreného</li> <li>Druhá položka vnoreného</li> </ol> </li> </ul>

  12. Selektory následníka ul li { color: blue; } div#recepty ul.prisady li { font-size: 10px; }

  13. Selektory susediaceho súrodenca • umožňujú vybrať element, ktorý okamžite nasleduje za iným elementom a ktorý má rovnakého rodiča <body> <h1>Toto je nadpis</h1> <p>Toto je odsek.</p> <p>Toto je ďalší odsek.</p> </body> h1 + p { background-color:#333; }

  14. Selektory parametra • tento selektor spoznáme podľa hranatých zátvoriek • umožňuje vybrať elementy na základe ich parametrov • vybrať môžeme elementy podľa prítomnosti: • parametra v elemente, • presnej hodnoty parametra elementu, • časti hodnoty parametra elementu

  15. Prítomnosť parametra a[href] { color: red; } a[href][title] { color: orange; } *[src]

  16. Presná hodnota parametra <a href=˝http://fpedas.uniza.sk˝ title=˝FPEDAS˝>Domov</a> a[href=˝http://fpedas.uniza.sk˝] { color: red; } a[title=˝FPEDAS˝] { color: red; }

  17. Časť hodnoty parametra • pre parametre, pri ktorých je možné napísať zoznam viacerých hodnôt oddelených medzerou <p class=˝varovanienapoveda˝>Každých 108 minút musíte stlačiť tlačidlo</p> p[class~=˝napoveda˝] { color: red; } • ekvivalent k p.varovanie alebo p.napoveda

  18. Pseudotriedy • dve pseudotriedy pre hypertextové odkazy: • :link – odkazuje na dokumenty, ktoré užívateľ ešte nenavštívil • :visited – odkazuje na adresu, ktorú už užívateľ navštívil • ďalšie pseudotriedy: • :hover – stav prekreslenia, ktorý sa aktivuje keď sa užívateľ dostane na element • :focus – stav zamerania sa aktivuje, keď užívateľ daný element (napr. formulárové pole) zameria jeho vybraním tr:hover { background-color: #dfdfdf; }

  19. Pseudotriedy odkazov • správne poradie umiestňovania pseudotried (tzv. vzťah LoVe/Hate) • :link • :visited • :hover • :active a:link, a:visited { text-decoration:none; } a:hover, a:active { text-decoration:underline; }

  20. Pseudoelementy • :first-line – vyberá prvý riadok elementu • :first-letter – vyberá prvý znak vybraného elementu • :before, :after – umožňujú vložiť generovaný obsah pred alebo za element p:first-letter { font-size:30px; } <p class=˝poznamka˝>Gorily nie vždy jedia banány</p> p.poznamka:before { content:˝[˝; } p.poznamka:after { content:˝]˝; }

  21. Reťazenie selektorov #primarny-obsah div.pribeh h1 { color: orange; }

  22. Zoskupovanie selektorov h1 { color: orange; } h2 { color: orange; } h1, h2 { color: orange; }

  23. Blokový model margin-top border-top padding-top padding-right padding-left margin-right border-right margin-left border-left Obsah padding-bottom border-bottom margin-bottom Hrana obsahu (hrana vnútra) – obklopuje obdĺžnik daný šírkou a výškou bloku, ktorý často závisí na obsahu. 4 hrany obsahu tvoria blok obsahu bloku Každá hrana sa môže rozdeliť na hornú (top), pravú (right), dolnú (bottom) a ľavú (left) hranu. Hrana orámovania (border) – obklopuje orámovanie bloku. 4 hrany orámovania tvoria blok orámovania bloku Hrana vonkajšieho okraja (margin) – obklopuje vonkajší okraj bloku. 4 hrany vonkajšieho okraja tvoria blok vonkajšieho okraja bloku Hrana vnútorného okraja (padding) – obklopuje vnútorný okraj bloku. 4 hrany vnútorného okraju tvoria blok vnútorného okraja bloku

  24. Univerzálny selektor „hviezdička“ • selektor zodpovedá akémukoľvek elementu div#hlavicka * {...} div#hlavicka * p {...}

  25. @import • napr. pri správe viacerých súborov CSS • na začiatku súboru pred ostatnými pravidlami @import url(˝reset.css˝);

  26. Skrátené vlastnosti • spôsob kombinovania viacerých vlastností v jednom páre vlastnosť/hodnota • výhody: • šetrenie času • redukcia veľkosti súboru • šetrenie prenášaných dát • zvyšuje rýchlosť načítania border-width: 1px; border-style: solid; border-color: #dfdfdf; border: 1px solid #dfdfdf;

  27. Skrátené vlastnosti • vlastnosti týkajúce sa dĺžky idú v smere hodinových ručičiek: hore, vpravo, dole, vľavo margin: 20px 20px 20px 20px; margin: 20px; padding: 20px 10px 20px 10px; padding: 20px 10px;

  28. Komentáre /* Toto je komentár CSS */ /* Toto je komentár CSS cez viac riadkov */

  29. Hromadný reset html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0 }

  30. Hromadný reset li, dd, blockquote { margin-left: 1em; } form label { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; }

  31. Horizontálne centrovanie <body> <div id=˝obal˝> ... </div> </body> body { text-align: center; min-width: 800px; } #obal { margin: 0 auto; width: 800px; text-align: left; }

  32. Pružný obmedzený Layout • keď sa zmení veľkosť písma , ostatné elementy sa podľa toho zväčšia alebo zmenšia • používajú sa radšej jednotky em, ktoré súvisia priamo s veľkosťou písma • prvý krok je • body { font-size: 62.5%; } • 62,5% z 16 = 10 (16px je východisková veľkosť písma vo väčšine prehliadačov) • => 1em=10px • obmedzenie vyplýva zo zamedzenia nadmerného rastu blokov pomocou vlastnosti max-width

  33. Pružný obmedzený Layout body { margin: 0; padding: 0; text-align: center; background-color: #f0f0f0; font-size: 62.5%; } #obal { font-size: 1.4em; width: 56em; max-width: 95%; margin: 10px auto; text-align: left; background: #dade75; border: 1px solidsilver; }

  34. Pružný obmedzený Layout #hlavicka { background: #272727; padding: 10px 15px 10px 13px; color: #fff; } #obal_obsahu { float:right; background: #fff; width: 74%; max-width: 74%; } #vnutorny_obsah { padding: 5px 15px 0 15px; }

  35. Pružný obmedzený Layout #navigacia { width: 25%; max-width: 25%; float: left; padding-top: 15px; } #pata { clear: both; padding: 0.5em; background-color: #0099ff; }

  36. Vlastnosť position • relative • posunutie elementu v danom smere • vytvorenie nového obmedzujúceho bloku (začiatku súradníc) p.relativespan{ position: relative; top: -4px; }

  37. Vlastnosť position • absolute • vyberie element z dokumentu, takže ostatok stránky ním nie je ovplyvňovaný • dovoľuje prvok umiestniť presne na dané súradnice, ktoré sa počítajú od tzv. obmedzujúceho bloku p.absolute { position: absolute; left: 0; top: 0; } #obal { position: relative; }

  38. Prehliadače • Poradie podľa Web Browser Grand Prix: • Microsoft Windows 7, Ubuntu • Chrome • Firefox • Opera • Internet Explorer • Mac OS X • Safari • Chrome • Firefox • Opera • Politika najnovších prehliadačov • tretia verzia od vydania poslednej sa vytratí zo zoznamu podporovaných • od ½ novembra 2012 začne presadzovať i Google

More Related