- PDF Free Download

Transkript

1 ve složce web/06 vytvořte stránku css.html dle předlohy níže. Nadpis druhé úrovně Nadpis druhé úrovně Nadpis první úrovně odstavec

2 Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tomu říkám přímý styl. Z hlediska optimalizace nevhodné. Příklad: <p style="color: red">tento odstavec bude červený.</p> Vysvětlení: <p> je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená.

3 Pomocí "stylopisu stylopisu" ("stylesheet") v hlavičce stránky. Stylopisje jakýsi seznam stylů. Obecný zápis, co má být jak zformátováno. Z hlediska optimalizace méně nevhodné. Do stránky se stylopispíše mezi tagy<style> a </style> Příklad Do hlavičky dokumentu se napíše stylopisuzavřený mezi tagy <style></style>: <style> p {color: red; background-color:yellow} </style>

4 Použitím externího stylopisu-- to je soubor *.css css, na který se stránka odkazuje tagem<link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně. Příklad: Vytvoří se soubor, který se pojmenuje třeba styly.css p {color: red} Do hlavičky htmldokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor: <link rel="stylesheet" type="text/css href="styly.css >

5 Pro položky seznamu nastavit v externím stylopisu styly.css následující vlastnosti: Výška řádku 150% Přeškrtnuté Velikost textu 13px Font Verdana

6 priklad06_1.html styl_a.css Ve složce web/06vytvořte soubor priklad06_1.html a složku styly, do které vytvořte externí stylopis styl_a.css

7 div se nejčastěji překládá jako oddíl. Zahrnuje v sobě libovolně velkou oblasttextu včetně nadpisů, obrázků a tabulek. Před a za oddílem se zalomí řádek. Podobné u tagu <p> Příklad: <div> Text </div>

8 URL zdroje Jak se proklikat k cíli V menu CSS 3. V podmenu Přehled hodnot

9 Adresa Zobrazený soubor index.html z mého hostinguze složky opakování soubor index.html URL obrázku

10 Stylopisyumožňují nadeklarovatvlastnosti pro více elementů najednou. Například deklarace H1, H2, H3{ color: green } obarví všechny nadpisy první, druhé i třetí úrovně na zeleno. Hromadnou deklaraci používám, pokud zadávám mnoho stejných vlastností pro mnoho elementů. Důležitá je čárkamezi selektory!

11 H3 A {font-style: italic} Tato deklarace by udělala kurzívou všechny odkazy uvnitřnadpisů třetí úrovně (elementy A uvnitř elementu H3). <h3>obyčejný text nadpisu s <a>odkazem kurzívou</a></h3> <p>obyčejný odstavec s <a>obyčejným odkazem</a></p> Odkazy v obyčejných odstavcích to nijak neovlivní, stejně tak obyčejný text trojkového nadpisu. Zápisy selektorů kontextového zápisu jsou odděleny pouze mezerou.

12 priklady priklad9.html styly styl9.css Zkopírujeme z portálu spocitacem.eu/lms obsah souboru priklad8.txt <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=windows-1250"> <META name="generator" content="pspadeditor, <TITLE></TITLE> <LINK rel="stylesheet" href="styly/styl8.css" type="text/css"> </HEAD> <BODY> <H1>Stylování tabulky</h1> <TABLE> <THEAD> <TR> <TH rowspan="2">typ</th> <TH rowspan="2">název</th> <TH colspan="3">počet přepravených osob za den</th> </TR> <TR> <TH>dlouhodobý<BR>přepravní průměr</th> <TH>pondělí</TH> <TH>úterý</TH> </TR> </THEAD> <TBODY> <TR> <TH rowspan="2">čtyřsedačka</th> <TD>Skalka</TD> <TD>1200</TD> <TD>2230</TD> <TD>1976</TD> </TR> <TR> <TD>Černý vrch</td> <TD>1000</TD> <TD>1567</TD> <TD>1454</TD> </TR> <TR> <TH>dvousedačka</TH> <TD>Nové pláně</td> <TD>500</TD> <TD>876</TD> <TD>450</TD> </TR> <TR> <TH rowspan="3">dvojkotva</th> <TD>Pod lany F10</TD> <TD>600</TD> <TD>765</TD> <TD>675</TD> </TR> <TR> <TD>Na hřeben</td> <TD>600</TD> <TD>997</TD> <TD>520</TD> </TR> <TR> <TD>Staré pláně</td> <TD>600</TD> <TD>189</TD> <TD>196</TD> </TR> <TR> <TH>jednokotva</TH> <TD>Bucharka</TD> <TD>320</TD> <TD>498</TD> <TD>315</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

13 třída modrá <p> Třída žlutá

14 Kromě definice vlastností tagů, lze tagzařadit do třídy, která má nějaké vlastnosti. Element se stejnou classse v dokumentu může vyskytovat mnohokrát a mají stejné vlastnosti. Atribut class(třída) se může použít u libovolného elementu (tagu). Symbolicky <tag class="jmeno_tridy"> Deklarace vlastností třídy začíná tečkou!.jmeno_tridy{ vlastnost1:hodnota; vlastnost2:hodnota; }

15

16 Třídy modrya zlutybudeme mocipoužít pouze u tagů<p>

17 priklady priklad10.html styly styl10.css <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=windows-1250"> <META name="generator" content="pspadeditor, <TITLE></TITLE> <LINK rel="stylesheet" href="styly/styl8.css" type="text/css"> </HEAD> <BODY> <H1>Stylování tabulky</h1> <TABLE> <THEAD> <TR> <TH rowspan="2">typ</th> <TH rowspan="2">název</th> <TH colspan="3">počet přepravených osob za den</th> </TR> <TR> <TH>dlouhodobý<BR>přepravní průměr</th> <TH>pondělí</TH> <TH>úterý</TH> </TR> </THEAD> <TBODY> <TR> <TH rowspan="2">čtyřsedačka</th> <TD>Skalka</TD> <TD>1200</TD> <TD>2230</TD> <TD>1976</TD> </TR> <TR> <TD>Černý vrch</td> <TD>1000</TD> <TD>1567</TD> <TD>1454</TD> </TR> <TR> <TH>dvousedačka</TH> <TD>Nové pláně</td> <TD>500</TD> <TD>876</TD> <TD>450</TD> </TR> <TR> <TH rowspan="3">dvojkotva</th> <TD>Pod lany F10</TD> <TD>600</TD> <TD>765</TD> <TD>675</TD> </TR> <TR> <TD>Na hřeben</td> <TD>600</TD> <TD>997</TD> <TD>520</TD> </TR> <TR> <TD>Staré pláně</td> <TD>600</TD> <TD>189</TD> <TD>196</TD> </TR> <TR> <TH>jednokotva</TH> <TD>Bucharka</TD> <TD>320</TD> <TD>498</TD> <TD>315</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

18 Když potřebuji, aby nějaký prvek stránky přebral formátování dvou tříd, pak je prostě stačí uvést obě v atributu classa oddělit je mezerou. Styl může například vypadat takto:.zlutepozadi{background-color: yellow;}.vlevo{float: left; width: 150px;} Prvek dostane obě třídy: <div class="zlutepozadi vlevo"> obsah prvku </div>

19 Hlavička Barva pozadí rgb(23,55,93), Vnitřní okraj 10px, barva textu bílá, zarovnání střed 1. Sloupec Barva pozadí rgb(55,96,145) Vnitřní okraj 10px, barva textu bílá, zarovnání střed H1 Tabulkana střed, rámeček 5px bílý, font Calibri velikost 13px, barva textu černá styl_tabulka.css Řádky Barva pozadí rgb(219,229,241) Vnitřní okraj 10px, barva textu černá

20 Pseudotřídy jsou speciálním typem tříd (class class), které jsou aktivovány obvykle nějakou speciální událostí nebo speciálním stavem. Narozdílod pseudoelementůjsou aplikovány vždy na celý obsah elementu, nikoli pouze na jeho část. Pseudotřídy odkazů Nejvíce pseudotřídje definováno pro odkazy. :link - třída aplikovaná na ještě nenavštívený odkaz :visited visited- značí již navštívený odkaz :active active- daný odkaz byl uživatelem aktivován :hover hover-tato třída je aktivovaná, pokud uživatel přejede kurzorem nad odkazem :focus focus- odkaz byl "zaměřen"(např. pomocí klávesy TAB)

21 a:link {color: black; text-decoration: none; font-weight: bold;} a:hover, a:focus {color: red; text-decoration: underline;} a:visited {color: blue;}

22 Ve specifikaci CSS1 se vyskytují pseudoelementy :first first-line a :first first-letter letter. Znamenají první řádek a první písmeno. Například zápis: p:first-line {color: blue} p:first-letter {font-size: 200%} by měl způsobit, že odstavce budou mít první řádek modrý a první písmeno dvakrát větší.

23 DIV je element blokový SPAN je element řádkový Jinak řečeno tag<div> <div>před sebou a za sebou udělá konec řádku. <span>se bez problému může vyskytovat v jednom řádku. text texttext <div>obsah divu</div>  text text text <span span>obsah spanu</ </span span>stále v jednom řádku.

24 80px 50px 600px 50px 600px 150px hlavicka menu levy stredni paticka 200px pravy

25 Všechny prvky na stránce, které nemají uvedeno jinak, budou mít vlastnosti definované níže. Příklad zápisu v externím stylopisu *{ padding:0px; margin:0px; }

26 Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou. Symbolicky <tag id= identifikator"> Deklarace identifikátorů začíná # #identifikator{ vlastnost1:hodnota; vlastnost2:hodnota; }

27

28

29 Pravidla kaskádování 1. Přednastavený vzhled 2. Dědičnost 3. Pozdější vyhrává 4. Podrobnější selektor 5.!important 6. Priorita vnitřního elementu

30 Kaskádové styly respektují původní vzhled htmlelementů. Pokud styly něco nemění, tak to zůstane. Například když u taguh2 změním barvu h2 {color: green} tak se sice změní barva, ale zůstane původní velikost písma. Prostě co styly výslovně neupravují, to zůstává.

31 Podřízený element přejímá formátování nadřazeného elementu. Například když se nastaví barva písma těla dokumentu na červenou, body {color color: red} tak budou červené i všechny odstavce, prostě všechno. Některé vlastnosti se nedědí (například border). Ve specifikaci je to u každé vlastnosti napsáno. Některé prohlížeče v dědičnosti chybují (např. obsah tabulky nedědí nastavení body).

32 Pokud se zapisuje vlastnost nějakého elementu vícekrát za sebou (a třeba různě), tak platí ten zápis, který je uveden nejpozději. To se stává hlavně tak, že něco deklaruji ve stylopisustránky a pak to potřebuji na určitém místě změnit. <style> p {color: red; font-style: italic} </style> <body> <p style="color: blue">modrý odstavec kurzívou</p> <p>normální červený odstavec kurzívou</p> </body>

33 Pravidlo pozdější vyhrává neplatív případě, když je nějaký zápis uveden podrobnějším selektorem. Podrobnost selektoru se počítá takto: sto bodů priority za zápis identifikátoru (zápisů s #) deset bodů priority za zápis třídy (začínajících tečkou) jeden bod priority za název tagu půl bodu za pseudotřídu(u odkazů) Nejvyšší řádky vyhrají, i když jsou v zápisu první: h1#logo {color: blue;}/* 101 bodů priority*/ div.hlavni h1 {color: red;} /* 12 bodů priority*/ div h1 {color: black;} /* 2 body priority */ h1 {color: green;} /* 1 bod priority */

34 Dá se nastavit, aby vlastnost nebyla později přepsána. Dělá se to klauzulí!importantza zápisem CSS vlastnosti. Např. h1 {color: red!important} h1 {color: blue}

35 Bližší košile než kabát znamená, že v případě konfliktu vyhrává ten element, který je "vnitřnější", je blíže formátovanému obsahu. Když mám třeba zápis <spanstyle="color: red"><spanstyle="color: green">obsah</span></span>, tak obsah bude zelený, nikoliv červený.přebíjí to i dědičnost (s výjimkou vlastnosti display: none).

36 Media= print print Uvedu-li v tagu <style> atribut medias hodnotou print, říkám tím, že se instrukce tohoto stylopisubudou vztahovat jenom na tisk. <style media="print"> /* zápis stylu */ </style> Další hodnoty atributu media screen pro monitor page pro papírovou stránku

37 <html> <head> <title>pokus s media=print</title> <style media="print"> p {font-style: italic} </style> </head> <body> <p>tento text bude na monitoru zobrazen normálním stojatým písmem, ale při tisku vyleze kurzívou.</p> </body> </html>

38 Alternativní zápisy Vztahuje-li se k tisku celý externí stylopis odkazovaný tagem<link rel=stylesheet>, prostě se také přidá media=print, stejně jako do <style>: <link rel=stylesheet href= styl_tisk. = styl_tisk.css css" media="print print"> Stylopis přiřazený všem médiímmedia= all <link rel=stylesheethref="někam.css" media="all">

39 @Media Horší situace nastává, pokud chci pro tisk určit část stávajícího stylopisunebo když styl zadávám přímo. Pak musím využít print. p {color: blue}/* Normální print{ p {text-indent: 10%} } /* Pokračování normálního stylopisu*/

40 Internet Explorer od verze 4 umí určitým způsobem změnit vzhled obrázku. Říká se tomu filtry. Bohužel většina jiných prohlížečů filtry nepodporuje. Příklady na:

41 120px 80px 40px Hlavička Menu Tělo Výška je závislá na obsahu divu. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Patička Hlavní 600px /web/index.php