Download
1 / 16
160 likes | 367 Views
Štýly CSS. Vypracovali: Denisa Habrdová Zuzana Kubičková Skupina : 38U11. Čo je CSS. Cascading Style Sheets = kaskádové štýly (môžu sa na seba vrstviť jednotlivé definície štýlov )
E N D
Štýly CSS Vypracovali: Denisa Habrdová Zuzana Kubičková Skupina : 38U11
Čo je CSS • Cascading Style Sheets = kaskádové štýly (môžu sa na seba vrstviť jednotlivé definície štýlov) • Vznik okolo roku 1997. Dôvodom je oddelenie obsahovej časti od výsledného vzhľadu. Obsah má vždy prednosť pred formou. • Kolekcia metód pre grafickú úpravu web-stránok • Aplikácia pomocou tried, identifikátorov alebo značiek html elementov
Použitie CSS: • Nastavenie ľubovoľnej a presnej veľkosti písma • Odsadenie odstavca, zväčšenie riadkovania • Automatické formátovanie nadpisov • Odrážky • Zvýraznenie určitých častí textu • Formátovanie písma (kurzíva, tučné, podčiarknuté,...) • Nastavenie pozadia stránky, tabuľky, ale aj odstavca,... • Umiestnenie objektu kdekoľvek na stránke (môže sa aj prekrývať s iným objektom) • Pridanie rolovacích líšt, orámovanie, nastavenie okrajov • Vzhľad celého webu sa deklaruje jedným súborom
Použitie CSS: • priamo pri elemente, ktorý potrebujeme zmeniť, pričom využívame atribút style=”…” • Tento spôsob je považovaný za najmenej výhodný. Využíva sa napríklad pri odlišnom formátovaní nejakého odseku, ktorý chceme z rôznych dôvodov odlíšiť, či už farbou alebo inou vlastnosťou. • Príklad: <p style="color: red">Červený text </p>
2. zapísaním štýlov v hlavičke dokumentu prostredníctvom tagov <style></style> • Príklad: <html> <head> <title>Príklad pomocou atribútu style </title> <styletype="text/css"> h2 {color: blue; font-style: italic;} </style> </head> </html>
3. pripojením externého súbora CSS • Externý súbor CSS (taktiež nazývaný externý štýlopis) sa namiesto písania v hlavičke dokumentu napíše do nového súboru v Notepade či Poznámkovom bloku a uvedie sa prípona css. • Neskôr sa v dokumnte naňho iba odkazuje v hlavičke html dokumentu. Týmto spôsobom môžeme jeden štýlopis využiť na neobmedzený počet stránok. • Príklad: <html> <head> <title>Stránka s externým štýlopisom</title> <linkrel="stylesheet" type="text/css" href="style.css"> </head> </html>
Syntax Využívame 3 prvky: • selektory, názvy vlastností a ich hodnoty. Selektor je meno tagu, ktorý formátujeme. • Názvy vlastností - deklarácia vlastností jednotlivých selektorov sa oddeľuje zloženými zátvorkami ({}). Viacero deklarácií pri jednom selektore sa oddeľuje bodkočiarkov, medzi vlastnosťou a jej hodnotou sa udáva dvojbodka a medzera. • Hodnoty vlastností Riadok zapísaný v štýlopise takto: h2 {color: blue; font-style: italic;}, tak môžeme do ľudskej reči preložiť nasledovne: všetky nadpisy druhej úrovne budú modré a písané kurzívou. V tomto prípade je selektor h2, vlastnosti color (farba textu) a font-style (štýl písma) a ich hodnoty sú blue (modrá) a italic (kurzíva).
Color – farba textu • Nastavuje farbu textu, pomocou hexadecimalneho tvaru (#00000,...), alebo pomocou názvu (black,...) http://www.w3schools.com/cssref/css_colors.asp • Príklad : style="color: red”; Background-color – farba pozadia • Príklad: style="background-color: white“
Background-image - obrázok v pozadí • Príklad: style="background-image: url('../_img/pozadi.gif')„ Background-position - pozícia pozadia • background-positon:top| center| bottom| left center| right| 10px| 10%| 10pt Príklad: background-position: right 0px, top 50px;
Font-size – veľkosť písma <style> p {font-size: 13px} td {font-size: small} </style> Font-family - štýl písma body {font-family: "Geneva CE"; "Arial CE";}
Text-transform - štýl textu • text-transform: none | capitalize | uppercase | lowercase • Príklad: <spanstyle="text-transform: lowercase"> dolný index</span> Word-spacing – medzery medzi slovami • word-spacing: normal | dĺžka • style="word-spacing: 40px"
Text-align – zarovnanie textu (doľava, doprava, nastred, do bloku) • text-align: left | right | center | justify Text-indent – odsadenie riadku od ľavého okraja • text-indent: 30px | 15pt | 20% • Príklad: style="text-indent: 45px„ Line-height – výška riadku • line-height: normal | 10px | 10% • Príklad: style="line-height: 30px"
Tvorba tabuliek: <table></table> • Riadok <tr></tr> • Stĺpec <td></td> • Stĺpec ako hlavička <th></th> Príklad: <table style="border: 2px solid black; width: 70%;"> <tr> <td colspan="2" style="text-align: center"> </td> </tr>
Odkazy • Príklad: • Presmerovanie na stránku Google <a href=“http://www.google.sk"> googleee </a> • Štýl <style type=“text/css”> a { color:red; } a : hover { color:blue; } </style>
Zdroje • http://www.tvorba-webu.cz/ • http://www.jakpsatweb.cz/ • http://www.w3schools.com/ • http://pabi3.com/blog/css-co-to-je-1-diel/
