CSS Kaskádové styly formátování webových stránek
Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení
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.
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 http://www.webdevout.net/css-hacks http://mike.treba.cz/css-hacky-do-kazdeho-pocasi/
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
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
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é
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)
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
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
CSS body nastavení primárních stylů pro celý dokument Co je vhodné? Barva pozadí Odkazy Text/Písmo Odrážky Nadpisy
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é
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(000000-ffffff) (např. #0000FF) CSS3 -gradienty (lineární, radiální atd.) např. pozadí stránek HSL, HSLA
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)
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;
Ř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; }
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
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ší
Ř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; }
Odstavce
Řešení p { color:#000000; text-indent:30px; margin:5px 5px 5px 5px; text-align:justify; }
Stylování seznamů
Odkazy
Ř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; }
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í
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*/
Třídy HTML: <h3 class="podtitul">text podtitulu</p> CSS: pseudotřídy a:hover{color: green} p:first-letter {font-size: 200%}
Identifikátory Identifikátory nejvyšší priorita CSS: #menu1 { text-align: center; font-weight: bold; textdecoration: overline} HTML: <span id= menu1">text podtitulu</span>
Třídy a identifikátory
Ř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; }
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
Ř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; }
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. http://www.vzhurudolu.cz/prirucka/css3-transitions http://www.colorzilla.com/gradient-editor/ https://developer.mozilla.org/en-us/docs/web/css/linear-gradient
Hotová řešení Lightbox fotogalerie CSS, JavaScript, HTML Odkazy do hlavičky HTML (JS, CSS) Složka s obrázky (images) http://lokeshdhakar.com/projects/lightbox2/ http://planetozh.com/projects/lightbox-clones/
Hotová řešení Číslovaný seznam http://print.wordpress.com/2006/02/22/cs s-beautifully-numbered-lists/
Hotová řešení Menu Kurzory http://www.free-css.com/free-css-menus/page1 http://www.echoecho.com/csscursors.htm
Hotová řešení Grafy http://applestooranges.com/goodies/css-for-bar-graphs/
Hotová řešení Formuláře http://web.natur.cuni.cz/pripravnykurzchemie/
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
Zdroje informací http://polopate.jakpsatweb.cz/ http://www.jakpsatweb.cz/ http://www.coffeecup.com/free-editor/ http://www.w3schools.com/ http://www.free-css.com/free-css-layouts