CSS Kaskádové styly. formátování webových stránek

Rozměr: px

Začít zobrazení ze stránky:

Download "CSS Kaskádové styly. formátování webových stránek"

Emil Kolář
před 7 lety
Počet zobrazení:

1 CSS Kaskádové styly formátování webových stránek

2 Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení

4 Význam tagy HTML významová vs. formátovací fce oddělení vzhledu od struktury a obsahu barva a velikost písma, pozadí, zarovnání atd.

5 Výhody a nevýhody Výhody HTML vs. CSS formátování jednodušší při častém použití jednodušší na správu/změny Nevýhody možnost různého zobrazení v různých prohlížečích CSS hack

6 Způsob použití 1. Inline atribut style, součást tagů(font, center apod.) <body> <p style="color: blue">modrý odstavec </p> <p>normální odstavec </p> </body> Nutnost změny v každém tagu

7 Způsob použití 2. Hlavička tag style v hlavičce dokumentu (párový) <head> <style type="text/css"> p {color: red; font-style: italic} h1{color: blue; font-weight: bold; font-size: large} </style> </head> Nutnost změny v každé stránce

8 Způsob použití 3. Externí soubor Soubor New CSS Page Saveas soubor.css h2 {color: blue; font-style: italic;} a {color: red; text-decoration: none} Soubor New HTML Page Saveas stranka.html <head> <link href="soubor.css" rel="stylesheet" type="text/css" /> </head> atributy type a rel = typ a druh odkazu jsou povinné

9 Syntaxe tagydiva span(párové) pomoc při stylování celků neohraničených tagy span ohraničení jednotlivých slov či řádků div ohraničení větších celků syntaxe tagy p (selektor, jméno tagu) závorky{}(vymezují deklaraci formátu daného selektoru) dvojtečky: (odděluje vlastnosti a hodnoty) oddělovníky;(oddělují jednotlivé deklarace)

10 Stylování odkazů a Základy CSS deklarace {text-decoration: none} a:link {color: green} /*zelené odkazy*/ a:visited {color: navy} /*navštívené odkazy jsou tmavě modré*/ a:active {color: black} a:hover {color: red; text-decoration: underline} Komentáře v CSS souboru /**/ selektor vlastnost hodnota

11 Jak na to 1. vytvoříme stránku htmla libovolně ji nazveme a uložíme (stranka1.html) vytvoříme obsah 2. vytvoříme soubor cssa libovolně ho nazveme (format.css) a uložíme do stejné složky externí soubor nezačínáme tagem style, hned deklarace 3. do hlavičky stránky vložím odkaz na csssoubor (je fyzicky uložen ve stejné složce) <link href="format.css" rel="stylesheet" type="text/css" > 4. pozor na cache prohlížeče

12 CSS body nastavení primárních stylů pro celý dokument Co je vhodné? Barva pozadí Odkazy Text/Písmo Odrážky Nadpisy

13 CSS text vytvořte novou stránku v programu CoffeeCup Odstavec, Nadpis 1, 2, 3, Číslovaný seznam, Odkaz(y) Odstavce = tučné, černé písmo, šedě podbarvené, Times Nadpis 1 = červené písmo na modrém pozadí, arial Nadpis 2 = zelené písmo na modrém pozadí, arial, menší Nadpis 3 = žluté písmo na modrém pozadí, arial, nejmenší Číslovaný seznam = kurzíva, Times, odrážky malé římské

14 Barvy Klíčové slovo (např. red, green, blue, aqua, silver atd.) jen základní barvy Barvy RGB model Kód RGB, RGBA (např. rgba(0,0,255,0.75)) A-průhlednost Decimálně (desítkově) (0-255) Hexadecimálně (šestnáctkově) 0-9, A-F( ffffff) (např. #0000FF) CSS3 -gradienty (lineární, radiální atd.) např. pozadí stránek HSL, HSLA

15 Velikosti Velikosti: (hodnoty) zvětšování v prohlížečích (ne pt a px) jednotka význam příklad velikost písma příkladu px pixel, obrazovkovýbod, 0,75pt 12px dvanáct pixelů (obrazovkových bodů) pt typografický bod (jako ve Wordu), 1/72 palce 9pt devět typografických bodů (na windows 12px) mm milimetr 5mm pět milimetrů in palec(+/- 25mm).5in půl palce em výška písmena M 1.5em jeden a půl normální velkosti % procento 80% small, large, xx-large atd. klíčová slova x-small menší než malé osmdesát procent normální velikosti (nadřazeného prvku)

16 Border, margin, padding margin margin-top: 6px; margin-right: 12px; margin-bottom: 5px; margin-left: 3px; nebo margin: 6px 12px 5px 3px; border border: 1px dotted #009900;

17 Řešení p { color:#000000; text-indent:30px; margin:5px 5px 5px 5px; padding:10px 10px 10px 10px; text-align:justify; border: 4px dotted#009900; }

18 Deklarace Hromadná deklarce: H1,H2,H3 {color: green} důležitá je čárka mezi selektory platí pro všechny nadpisy 1, 2 i 3 Kontextová deklarce: H3 A {font-style: italic} bez čárky mezi selektory platí pro všechny odkazy v rámci nadpisů 3

19 Nadpisy Nadpis 1 = červené písmo na tmavě modrém pozadí, arial Nadpis 2 = červené písmo na modrém pozadí, arial, menší Nadpis 3 = červené písmo na světle modrém pozadí, arial, nejmenší

20 Řešení h1, h2, h3 { color: #ff0000; font-family: Arial; } h1 { font-size: 2em; background-color: #0000aa; } h2 { font-size: 1.5em; background-color: #20bbFF; } h3 { font-size: 1.2em; background-color: #80FFFF; }

21 Odstavce

22 Řešení p { color:#000000; text-indent:30px; margin:5px 5px 5px 5px; text-align:justify; }

23 Stylování seznamů

24 Odkazy

25 Řešení a { color: #0000ff; text-decoration:none; } a:hover { color: #ff0000; text-decoration: underline; } a:visited { color:#800080;} a:active { color:#ff0000;} li a { color: #00ff00; text-decoration:none; }

26 Třídy a identifikátory vlastní styly pro konkrétní prvky identifikátory = jedinečný výskyt, DHTML, menu třídy= možno vícero výskytů obdobná funkčnost lze kombinovat s kontextovou deklarací

27 Třídy Třídy vyšší priorita než zákl.tagy HTML atribut: class, CSS zápis:.podtitul CSS.podtitul{ text-align: center; font-weight: bold; font-style:italic;} /* zarovnání na střed, tučné písmo a kurzíva*/

28 Třídy HTML: <h3 class="podtitul">text podtitulu</p> CSS: pseudotřídy a:hover{color: green} p:first-letter {font-size: 200%}

29 Identifikátory Identifikátory nejvyšší priorita CSS: #menu1 { text-align: center; font-weight: bold; textdecoration: overline} HTML: <span id= menu1">text podtitulu</span>

30 Třídy a identifikátory

31 Řešení p { color:#000000; text-indent:30px; margin:5px 5px 5px 5px; text-align:justify; } p:first-letter {font-size: 200%} p.zvyrazneny{ background-color:#c0c0c0; color:#000000; font-weight: bold; font-style: italic; }

32 Vyzkoušejte si CSS vytvořte novou stránku v programu CoffeeCup Tabulku formátovanou s pomocí CSS první druhý třetí A a b c B d e f C g h i j k l

33 Řešení table { width:50%; color:#000000; background-color:#7dce5b; border-collapse: collapse; border:1px #000000;} td { border:1px solid #000000; } th{ border:5px double #000000; background-color:#008a00; }.orange { background-color:#ff5f11; }

34 Další možnosti CSS -SNIPPETS Pozadí body {background:#ffffffurl("img_tree.png") no-repeat right top;} Zaoblené hrany border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; nebo border-radius: 10px 10px 10px 10px; Stíny, 3D, animace (transitions), gradienty apod

35 Hotová řešení Lightbox fotogalerie CSS, JavaScript, HTML Odkazy do hlavičky HTML (JS, CSS) Složka s obrázky (images)

Hotová řešení Číslovaný seznam http://print.

36 Hotová řešení Číslovaný seznam s-beautifully-numbered-lists/

37 Hotová řešení Menu Kurzory

38 Hotová řešení Grafy

39 Hotová řešení Formuláře

40 Vyzkoušejte si Vytvořte: Novou HTML stránku Text + rovnice reakce Obrázek k reakci Video? k reakci Tabulku s vlastnostmi použitých chemikálií Nový CSS soubor Použijte kaskádové styly k formátování všech prvků Využijte i třídy případně identifikátory

41 Zdroje informací

Podobné dokumenty

Základy CSS (3. přednáška)

Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze