Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

HTML CSS Cascading Style Sheets Kaskádové styly. CSS HTML kód je základ při tvorbě internetových stránek –Nelze udělat úplně vše CSS styly rozšiřují možnosti.

Podobné prezentace


Prezentace na téma: "HTML CSS Cascading Style Sheets Kaskádové styly. CSS HTML kód je základ při tvorbě internetových stránek –Nelze udělat úplně vše CSS styly rozšiřují možnosti."— Transkript prezentace:

1 HTML CSS Cascading Style Sheets Kaskádové styly

2 CSS HTML kód je základ při tvorbě internetových stránek –Nelze udělat úplně vše CSS styly rozšiřují možnosti HTML = vlastnosti, které rozšiřují současné tagy o nové možnosti Existuje mnoho mnoho stylů => toto je jen úvod do problematiky Nelze probrat vše, ani to neni cílem.

3 Kaskádové styly používá tag a obecný atribut "style", kterému se přiřazuje nějaká definice. Kaskádové: protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední.

4 Možnosti CSS stylů Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky Udělat odsazení prvního řádku odstavce, zvětšit řádkování Zrušit nebo zvětšit prázdný prostor po odstavci Automaticky formátovat nadpisy (například je všechny udělat zelené) Zvýrazňovat odkazy po přejetí myší Udělat automaticky grafické odrážky Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)

5 Možnosti CSS stylů Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici! Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývatpřekrývat Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.rozhýbání Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.

6 Definice CSS stylů 1.Přímý zápis 2.Definice stylu v hlavičce (stylesheet) 3.Definice v externím souboru

7 Přímý zápis Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tento odstavec bude červený.

8 Příklad přímo primo Hlavní nadpis Nadpis druhé úrovně se stylem Odstavec se stylem. Další nadpis druhé úrovně bez stylu Odstavec s dalším textem a bez stylu.

9 Definice stylu v hlavičce Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy : p {color: red} h1 {color:blue} Nadpis modře Tento odstavec bude červený. Tento mimochodem také, protože červené budou všechny. TAG STYL

10 Příklad stylopis stylopis h2{color: blue; font-style: italic} p {color: red; background-color:lightblue} Hlavní nadpis Nadpis druhé úrovně Odstavec se stylem. Další nadpis druhé úrovně Odstavec s dalším textem.

11 Definice v externím souboru Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude pouze tento text: p {color: red} h1 {color:blue} Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:

12 Příklad externí soubor externi Hlavní nadpis Nadpis druhé úrovně se stylem Odstavec se stylem. Další nadpis druhé úrovně Odstavec s dalším textem. H2 {color: blue; font-style: italic} p {color: red; background-color:lightblue}

13 Zápis stylu Je nutné všimnout si, kde se používají: uvozovky dvojtečky složené závorky středníky Pokud si některé znaménko popletete, nebude to fungovat. Přímý zápis: x V hlavičce nebo v souboru: h2 {color: green; background-color:yellow}

14 Tagy div a span abcd Když nemáte vhodný tag na změnu stylu uvnitř textu. Příklad: Toto je modifikovaný text. Div je pro odstavce, je zakončen enterem. Span je pro část textu, není zakončen enterem.

15 Styly přehled hodnoty-prehled.html prakticky.html

16 Styly pro úpravu textu font-family (typ písma) font-style (styl písma) font-variant (kapitálka a široké písmo) font-size (velikost písma) text-decoration (text s čarami) ….

17 Styly pro úpravu odstavce letter-spacing (proklad mezi písmeny) line-height (výška řádku) text-indent (odsazení prvního řádku odstavce) text-align (zarovnání odstavce) vertical-align (zarovnání textu vertikálně) …..

18 Styly pro úpravu barev a pozadí color (barva) background-color (barva pozadí) background-image (obrázek jako pozadí) background-repeat (opakování pozadí) background-attachment (rolující pozadí) background-position (obrázek na přesnou pozici pozadí) …

19 Styly pro definic čar a rámů border-style (typ rámečku) border-width (šířka čáry rámečku) border-color (barva rámečku) …

20 Styly pro číslování a odrážky list-style-type (styl číslování-odrážek) –disc,circle,square,decimal,lower-roman,lower- alpha,... list-style-image (obrázek jako odrážka) list-style-position (odsazení textu) …

21 Styly pozice objektů position (pozicování) –absolute, relative left (nastavení pozice od levého okraje) right (nastavení pozice od pravého okraje) top (nastavení pozice od horního okraje) bottom (nastavení pozice od dolního okraje)


Stáhnout ppt "HTML CSS Cascading Style Sheets Kaskádové styly. CSS HTML kód je základ při tvorbě internetových stránek –Nelze udělat úplně vše CSS styly rozšiřují možnosti."

Podobné prezentace


Reklamy Google