Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
CSS Cascading Style Sheets Kaskádové styly
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 <style> 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ý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. 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ů Přímý zápis Definice stylu v hlavičce (stylesheet)
Definice v externím souboru
7
Přímý zápis Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". <p style="color: red">Tento odstavec bude červený.</p>
8
Příklad přímo <html> <head>
<title>primo</title> </head> <body> <h1>Hlavní nadpis</h1> <h2 style="color: blue; font-style: italic">Nadpis druhé úrovně se stylem</h2> <p style="color: red; background-color:lightblue">Odstavec se stylem.</p> <h2>Další nadpis druhé úrovně bez stylu</h2> <p>Odstavec s dalším textem a bez stylu. </p> </body> </html>
9
Definice stylu v hlavičce
Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>: <style> p {color: red} h1 {color:blue} </style> <body> <h1>Nadpis modře</h1> <p>Tento odstavec bude červený. </p> <p>Tento mimochodem také, protože červené budou všechny.</p> </body> TAG STYL
10
Příklad stylopis <html> <head>
<title>stylopis</title> <style> h2 {color: blue; font-style: italic} p {color: red; background-color:lightblue} </style> </head> <body> <h1>Hlavní nadpis</h1> <h2>Nadpis druhé úrovně</h2> <p>Odstavec se stylem.</p> <h2>Další nadpis druhé úrovně</h2> <p>Odstavec s dalším textem. </p> </body> </html>
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: <head> <link rel="stylesheet" type="text/css“ href="styly.css"> </head>
12
Příklad externí soubor
<html> <head> <title>externi</title> <link rel="stylesheet" type="text/css" href="styl1.css"> </head> <body> <h1>Hlavní nadpis</h1> <h2>Nadpis druhé úrovně se stylem</h2> <p >Odstavec se stylem.</p> <h2>Další nadpis druhé úrovně</h2> <p>Odstavec s dalším textem. </p> </body> </html> 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: <h2 style=“color: green; background-color:yellow”>x</h2> V hlavičce nebo v souboru: h2 {color: green; background-color:yellow}
14
Tagy div a span <div style=“…”> abcd </div>
<span style= “…”> abcd < /span> Když nemáte vhodný tag na změnu stylu uvnitř textu. Příklad: Toto je <span style=“color:red”>modifikovaný </span> text . 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
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) <span style=“font-size:24pt”> …. </span>
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ě) <p style=“text-indent:10”>…..</p>
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í) <span style=“color:red;background-color:yellow> … </span>
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) <p style=“border-style:dotted;border-width:10;border-color:red”>…</p>
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) <li style=“list-style-image:url(obr.gif)”>…</li>
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) <img src=“obr.gif” style=“position:absolute;left:30px”>
Podobné prezentace
