Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

Rozměr: px

Začít zobrazení ze stránky:

Download "Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda"

Magdalena Pokorná
před 7 lety
Počet zobrazení:

1 Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

2 Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML

3 Význam CSS Šiřší formatovací možnosti Oddělení struktury a stylu Vyšší přístupnost dokumentu Dynamická práce se styly Formátování XML dokumentů

4 Verze CSS CSS1 barva textu, pozadí Margin, padding, mezery mezi slovy, pismeny, radky, obrazky, odkazy CSS2 Pozicovani fixni, absolutni relativni, stin CSS3

5 Vstupní zařízení media= hodnota" all - Všechny typy výstupních zařízení braille - Dotyková zařízení s Braillovým písmem embossed - Platický tisk na tiskárně Braillovým písmem handheld - Kapesní počítač, PDA print - Tisk na papír (a náhled tisku na monitoru) projection Data projektorem promítaný obraz screen - Obrazovka počítače aural čtecí zařízení tty - Znakový výstup neproporčním typem písma (dálnopis, terminal) tv - Televizní obrazovky apod.

6 Možnosti CSS ACID1, ACID2 a ACID3 test Schopnosti prohlížečů správně vykreslit webové stránky vytvořené podle standardů Lampa Tužky

7 Připojení CSS do HTML <html> <head> <title>stránka se styly</title> <link rel="stylesheet" type="text/css" href="soubor.css"> <style url(soubor.css) </style> <style type="text/css"> styl psaný v jazyce CSS </style> </head> <body> <p style="color:blue">první odstavec na stránce bude zobrazen modře </body> </html>

8 Více CSS na jedné stránce <style type="text/css "/monitor.css"; </style> <style type="text/css" url(/print.css); </style>

9 Nebo <link rel="stylesheet" type="text/css" href="monitor.css media="screen,projection" /> <link rel="stylesheet" type="text/css" href="tisk.css" media="print" />

10 Terminologie Stylový předpis stylesheet Definice satement Sada pravidel rules At-pravidlo at-rule Selektor selektor Deklarace declaration Vlastnost property Hodnota - value

11 Klíčová slova Bez hačků a čarek anglický Bez uvozovek Např. width: auto; border: none; Font-family: serif; background: red;

12 CSS syntaxe Styl se skládá ze dvou částí: selektor a deklarace /*Typove selektory:*/ P { Color:white; Blackground-color:white } h1,h2,h3,h4 {

13 Selektor třídy (class) Možné použít v HTML opakovaně v CSS.modre {color:blue} nebo h1.modre {color:blue} v HTML <h1 class = modre >modry text</h1>

14 Selektor identifikátoru (ID) ID lze použít na stránce pouze jednou! v CSS #modre {color:blue} nebo h1.#modre {color:blue} v HTML <h1 id= modre >modry text</h1>

15 Selektor následníka ID lze použít na stránce pouze jednou! v CSS a img {border:1px} v HTML <a href=.. ><img src= alt=.. /></a>

16 Komentář /* komentář*/

17 Uspořadání selektorů

18 Pseudo třídy :link vybere odkazy, které ještě nebyly navštívené :visited vybere již navštívené odkazy :hover vybere element, který je pod kurzorem myši :active vybere element, který je aktivovaný uživatelem :focus vybere element, který má fokus (přijímá vstup z klávesnice) :lang(cs) vybere elementy v určitém jazyce (v tomto případě v češtině)

19 Rodičovská pseudotřída CSS p {color: blue;} p:first-child {color: yellow; } <div> <p>toto je první odstavec příslušného oddílu div. Měl by být napsán žlutým písmem.</p> <p>další odstavec by už měl být napsán modře.</p> </div> <div> <h1>nadpis odstavce</h1> <p>pozor! Tento odstavec bude napsán modře, neboť prvním dítětem oddílu div je tentokrát nadpis h1!!!</p> </div>

20 Relativní jednotky Relativní (relativně k jiné velikosti) em velikost přislušného písma ex střední výška příslušného písma px pixely obrazové body

21 Absolutní jednotky in palece (1 inch cca 2,54cm) cm centimetry mm milimetry pt typografický body(point) 1pt cca 1/72 palce Pc pica; 1pc=12pt

22 procenta Udavají poměr velikosti předchůdce, rodiče (%) např. p {font-size: 120%} p {line-height: 120%}

23 CSS: Jednotky velikostí

24 Zápis URL v CSS url( url( ) url( )

25 Barvy Aqua tyrkysová Black černá Blue modrá Fuchsia růžová Gray šedá Green zelená Lime světlozelená Maroon hněda? Navy tmavomodrá Olive olivově zelená Purple purpurová Red červená Silver střibrná (světle šedá) Teal šedozelená White bílá Yellow žlutá

26 Systemové barvy ActiveBorder - orámování aktivního okna ActiveCaption titulek aktivního okna AppWorkspace pozadáí hlavního okna aplikace MenuText text menu Atd...

27 Zadávání barev EM {color: #f00} /* #RGB */ EM {color: #ff0000} /* #RRGGBB */ EM {color: rgb(255,0,0)} /* #RGB */ EM {color: rgb(100%,0%,0%)} /* #RGB */

28 Otázky Rozdíl mezi ID a CLASS? Výhody CSS Selektor a deklarace? Typové selektory Vstupní media

Podobné dokumenty

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se