CSS styly Cascading Style Sheets kaskádové styly
Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen v roce 1996
Kdy používat CSS Často píšete texty na web Chcete jednotný formát Web bude předmětem častých úprav Spravujete (či zatím jen plánujete) větší web s mnoha stránkami, které by měly vypadat podobně
Jako ve Wordu (: Přesné pozicování Nástin možností CSS Odsazení prvního řádku odstavce, řádkování Automaticky formátovat nové nadpisy Měnit styl prvků po přejetí myší [:hover] Grafické odrážky - pohodlně Části textu zneviditelnit, zprůhlednit nebo nezobrazit Předefinovat grafický význam běžných tagů (co je kurzívou, bude i tučně) Nastavit pozadí (stránky, tabulky i odstavce) pozadí se nemusí opakovat! Přidat k některým prvkům stránky rolovací lišty, oříznout je, orámovat, nastavit okraje
Kde se dá psát CSS Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Použitím externího stylesheetu to je soubor *.css, na který se stránka odkazuje tagem link. Přímo do textu zdroje u formátovaného elementu. Anglicky je to "in-line" styl.
Příklad 1 Stylopisem Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>: <style> p { color: red; } </style> a do těla stránky se mohou psát odstavce: <p>tento odstavec bude červený. </p>
Příklad 2 Externím CSS souborem Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude tento text: p { color: red; } Do hlavičky html dokumentu, který chci stylovat, musím napsat odkaz na tento soubor: <link rel="stylesheet" type="text/css" href="styly.css">
Příklad 3 Přímo (in-line) Do zdroje se napíše tato deklarace odstavce: <p style="color: red">tento odstavec bude červený.</p>
Syntaxe Přímý styl: <tag style="zápis vlastností">stylovaný element</tag> Ve stylopisu: <style> tag1 {zápis vlastností} tag2 {zápis vlastností} </style>
Syntaxe Zápis vlastností: vlastnost: hodnota; 2.vlastnost: 2.hodnota <style> h2 {color: blue; font-style: italic} </style> h2 je selektor = jméno tagu, jehož formátování se mění {} složené závorky vymezují deklaraci formátu onoho selektoru color je vlastnost a blue jeho hodnota (barva: modrá), vlastnost a hodnota jsou odděleny dvojtečkou a mezerou font-slyle je další vlastnost a italic je její hodnota (řezfontu: kurzíva) Dvě vlastnosti se oddělují středníkem.
Příklad s nadpisem <style> h1 { color: green; } h2 { color: blue; } </style>
Třídy Třídy umožňují ve stylopisech vytvářet několik různých stylů pro jedinou značku Rozeznáváme třídy regulérní a generické
Regulérní třídy H1.cervene { color: red; } H1.modre { color: blue; } Příslušná třída se v HTML kódu použije pomocí parametru class= uvedeného u značky <H1 class= cervene >
Generické třídy.cervene { color: red; }.modre { color: blue; } Příslušná třída se v HTML kódu použije pomocí parametru class= uvedeného u značky <H1 class= cervene >
Pseudotřídy Používají k definici stylu zobrazení pro určité stavy značek. Jméno značky se odděluje od názvu pseudotřídy dvojtečkou. Jednotlivé názvy tříd jsou předdefinovány, takže nemůžeme vytvářet další pseudotřídy. A:link - pro nenavštívený odkaz A:active - pro odkaz, který je právě vyvoláván A:visited - pro navštívený odkaz A:hover - pro odkaz, nad nímž se právě nachází kurzor myši P:first-line - pro zvýraznění prvního řádku odstavce P:first-letter - pro zvýraznění prvního znaku odstavce
Tagy <span> a <div> Někdy je potřeba zformátovat kus textu, který není vymezen žádným konkrétním tagem. Zahrnuje-li formátovaná oblast více odstavců, použije se párový tag <div>, v rámci jednoho odstavce se používá <span>. <html><head><title>soš veterinární a zemědělská</title></head> <body>... <!--normální odstavce --> <div style="color: maroon">... <!-- mnoho různých odstavců, všechny budou hnědé --> </div>... <!--normální odstavce --> <p>normální text a <span style="font-style: italic">text kurzívou</span> a zase normální text.</p> </body> </html>
Délkové jednotky používané Jednotka Px In Pt Pc cm mm v CSS stylech Popis Pixel (1 pixel = 1 bod) Palec (1 palec = 2,54cm = 72pt) Bod (1 bod = 1/72in = 1/12pc) Pica (1 pica = 12pt) Corresponding to 1/72 of foot, and therefore to 1/6 of an inch. Centimetry Milimetry
Barvy používané v CSS stylech Zápis Popis #rrggbb pro každou barvu číslo 1-16 hexadecimálně #rgb pro každou barvu číslo 1-16 hexadecimálně rgb(r, g, b) r, g, b jsou od 0 do 255 rgb(r%, g%, b%) r, g, b jsou od 0 do 100
Okraje Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky tabulky nebo odstavce. Obrázek ilustruje významy vlastností. Blokový model v CSS:
CSS pozicování Pomocí CSS pozicování lze jakýkoliv objekt (obrázek, tabulka, text, odstavec) umístit kamkoliv na stránku a mohou se překrývat. Existují dva druhy pozicování. Absolutní pozicování umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze.
CSS pozicování <tag style="position:(absolute relative); [top: délka]; [left: délka]; [z-index: číslo]">pozicovaný element</tag> top - určuje posunutí objektu směrem dolů left - určuje posunutí objektu směrem doprava Pro posouvání nahoru a doprava se nepoužívá down a right, nýbrž top a left se zápornými hodnotami. Velikost posunu můžete zadat ve všech jednotkách, které CSS podporuje (nejčastěji px, pt nebo cm). Protože při přesouvání objektů může dojít k překryvu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání.
CSS pozicování - příklad <body> Normální text, <span style="position: relative; top: 20px"> relativně umístěný text a</span> <span style="position: absolute; top: 100px; left: 150px">absolutně umístěný text.</span> </body>
Filtry (IE only??) Filtry se používají ke změně vzhledu zvolené HTML značky pomocí určitého efektu. Filtry lze aplikovat pouze na některé značky (na ty, které definují nějakou čtvercovou plochu). Lze je například použít na značky: IMG, TABLE, TR, TD, TEXTAREA, INPUT, BUTTON.. Filtry se dají aplikovat také na značky SPAN a DIV. Těmto značkám musíme definovat šířku a výšku. <style> SPAN { filter:glow(color:#ff9900, strength:3); width:100%; height:100% } </style>
Barevný posuvník Rozšíření příkazu BODY SCROLLBAR-TRACK-COLOR: fff8e4; SCROLLBAR-FACE-COLOR: f9e6ac; SCROLLBAR-HIGHLIGHT-COLOR: 660033; SCROLLBAR-SHADOW-COLOR: 5e5e5e; SCROLLBAR-ARROW-COLOR: 660033; SCROLLBAR-DARKSHADOW-COLOR: 660033;
Validace HTML a CSS http://validator.w3.org/