1 / 21

Návrh a tvorba WWW Cvičení 2

Návrh a tvorba WWW Cvičení 2. CSS 3. Cascading Style Sheet. Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných značkovacím jazykem.

evadne
Download Presentation

Návrh a tvorba WWW Cvičení 2

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. Návrh a tvorba WWWCvičení 2 CSS 3

  2. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných značkovacím jazykem. Nejčastěji se CSS používá pro grafickou prezentaci HTML stránek. Další použití lze nalézt např. u XML. Podpora nových CSS vlastností je v prohlížečích diskutabilní. U některých vlastností je i rozdíl v samotné implementaci (stejná vlastnost se v různých prohlížečích chová odlišně). logo CSS 3 dle w3c

  3. Syntaxe CSS Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. selektor {vlastnost: hodnota_vlastnosti} Příklad: html: css: výsledek: Můj první styl.

  4. Použití CSS v HTML Přímý styl Styl zaveden přímo ke konkrétnímu tagu prostřednictvím atributu style. Stylopis v hlavičce HTML Styly uvedeny jako obsah tagu style v hlavičce HTML. Externí soubor Nevizuální připojení externího souboru se stylopisem.

  5. Délkové jednotky • Absolutní jednotky • milimetr (1mm = 3.78px) - mm • centimetr (1cm = 37.8px) - cm • palec (1in = 96px) - in • typografický bod - pt • cicero – pc • Relativní jednotky - mění svou velikost v závislosti na aktuální velikosti písma • Šířka velkého písmene M - em • Výška malého písmene x – ex • Procenta – značíme %, počítají se z velikosti nadřazeného elementu • Pixly – značíme px, základní jednotka Délková jednotka se píše hned za číslo, desetinná místa se oddělují tečkou.

  6. Barvy v CSS • Název barvy • Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow • RGB zápis • Procentuálně • Desítkově • Šestnáctkově Paletu barev si můžete vytvořit například pomocí aplikace http://colorschemedesigner.com/ nebo http://kuler.adobe.com/.

  7. Třída, Identifikátor Třída • v CSS vytváříme třídu selektor.trida • v HTML přiřazujeme vlastnosti CSS přes třídu pomocí atributu class Identifikátor • v CSS vytváříme identifikátor selektor#trida • v HTML přiřazujeme vlastnosti CSS přes identifikátor pomocí atributu id

  8. Třída, Identifikátor * – univerzální selektor (lze vynechat)

  9. body zdrojový kód: blok_2/css/basic02.htm

  10. Písmo

  11. Blok

  12. Pozadí

  13. Hranice

  14. Box

  15. Header I. zdrojový kód: blok_2/css/basic03.htm

  16. Header II. zdrojový kód: blok_2/css/basic04.htm

  17. Sectionmiddle zdrojový kód: blok_2/css/basic05.htm

  18. Sectioncustomers zdrojový kód: blok_2/css/basic06.htm

  19. Footer I. zdrojový kód: blok_2/css/basic07.htm

  20. Validace stylů Validátor • http://http://jigsaw.w3.org/css-validator/

  21. Kontrolní otázky • Co znamená akronym CSS? • Co je to selektor? • Jaké máme v CSS délkové jednotky? • Jaký je rozdíl mezi řádkovými a blokovými elementy? • Jakou vlastností můžeme změnit blokový element na řádkový element? • Jak vypadá v CSS box model?

More Related