CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

Transkript

1 CSS styly - úvod Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem Formátování HTML Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text. 1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob -- CSS styly -- používá obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale všeobecné. Dají se s tím dělat různé fígle, které budu popisovat níže. Mimochodem, co je CSS? CSS vzniklo někdy kolem roku Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. To teď není důležité. (Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale zatím moc nefungují v nejrozšířenějším prohlížeči Internet Exploreru.) Kdy používat CSS V první řadě je potřebná znalost HTML (alespoň částečná). Pokud HTML ani trochu neznáte, není třeba číst dál. Ale i pak je pouze pět případů, kdy se opravdu vyplatí zajímat se o CSS styly: buďto si chcete dát na stránku nějaký formátovací špek, který se nedá udělat normálně, často píšete texty určené pro Internet a nechcete ztrácet čas složitým formátováním, zabýváte se skriptováním, zejména Javascriptem spravujete (či zatím jen plánujete) větší web s mnoha stránkami, které by měly vypadat podobně, nebo prostě nechcete být mimo mísu, když se mluví o stavbě stránek. Jinak se to asi nevyplatí.

2 Nástin možností CSS Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou: Nastavit libovolnou a přesnou velikost písma, p r o k l á d á n í, KAPITÁLKY Udělat odsazení prvního řádku odstavce, řádkování Zrušit prázdný prostor po odstavci, takže to pak vypadá jako normální text (ne jako americký) 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ě) Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat! 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.

3 Trojí použití CSS Styl se může nadeklarovat třemi způsoby, stačí, když se naučíte jeden: 1. Přímo v textu zdroje u formátovaného elementu. Anglicky je to "in-line" styl, já tomu říkám přímý styl. Je to nešikovné, ale občas se to používá. 2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. 3. Použitím externího stylopisu -- to je soubor *.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ě. Samozřejmě stačí ovládnout jenom jeden způsob. Já nejčastěji používám externí css soubor. Příklady Chci udělat odstavec červeným písmem pomocí CSS. Jak už jsem popsal, jde to třemi způsoby: Přímo (in-line) Do zdroje se napíše tato deklarace odstavce: <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 podobný třeba atributu "align", jenže je mocnější. Stylopisem Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy : p {color: red} a do těla stránky se mohou psát odstavce: <p>tento odstavec bude červený. </p> <p>tento mimochodem také, protože červené budou všechny.</p> Externím CSS souborem Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude tento text: p {color: red} Do hlavičky html dokumentu, který chci stylovat, musím napsat odkaz na tento soubor: <link rel="stylesheet" type="text/css" href="styly.css">

4 Syntaxe CSS nejsou součástí HTML, a tak se zapisují zcela jiným způsobem, jak už jste si možná všimli. Pokud vám tabulka přijde příliš teoretická, všimněte si pouze příkladů ve spodní části. Přímý styl: Ve stylopisu: <tag style="zápis vlastností">stylovaný element</tag> tag {zápis vlastností} 2.tag {zápis vlastností} Zápis vlastností zjednodušeně: vlastnost: hodnota; 2.vlastnost: 2.hodnota Zápis vlastností obecně: vlastnost: hodnota [, hodnota2] [; další zápis vlastností] Příklady: Příklad přímého stylu Příklad stylopisu <p style="color: red">text červeného odstavce</p> p {color: red} body {background-color: yellow} Příklad jednoduchého zápisu vlastností color: red a složitějšího font-family: Arial, Arial CE, sans-serif; color: red Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude to pravděpodobně fungovat. Příklad správného zápisu: h2 {color: green; background-color: yellow} Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen nehraje roli. K dispozici je seznam vlastností a jejich hodnot. Hodnoty, které prohlížeč nezná, ignoruje. Komentáře ve stylopisech se dělají podobně jako v Javě mezi znaky /* a */. Nefungují dvě lomítka. Příklad s nadpisem Deklarovat formát nadpisů přímým stylem je hloupost (to není usnadnění, ale ztížení práce). Ale ve stylopisu nebo v externím css souboru se to dá udělat docela snadno. H1 H2 {color: green} {color: blue} Potom v celém dokumentu budou nadpisy první úrovně zelené a nadpisy druhé úrovně modré. To ovšem pouze za předpokladu, že při psaní textu byly použity tagy <H1> a <H2>. Jinými slovy, stylopisy se dají efektivně použít pouze u dobře strukturovaných textů.

5 Vlastní styly v CSS aneb třídy, identifikátory a složené deklarace Příklad s podtitulem - Identifikátor - Složené deklarace - Skládání stylů - Pseudoelementy - Shrnující příklad - Nejisté znaky V HTML existuje několik podporovaných stylů textu (tagů), například nadpisy, seznamy, definice. Jejich zobrazení a formátování se dá ovlivnit pomocí CSS stylů, o tom byly minulé kapitoly. Aby se mohl potenciál kaskádových stylů rozvinout do krajnosti, mohou si tvůrci webových stránek definovat styly vlastní. Příklad: podtitul Příkladem vlastního stylu může být podtitul. (Nepatří do nadpisu a přece by měl být formátován odlišně než normální text.) Dá se formátovat přímo, ale aby byl ve všech dokumentech stejný, je dobré nadefinovat jej jako styl. HTML ale nemá pro podtitul žádný tag <podtitul>, a tak si musím pomoci jinak. Vytvořím třídu s názvem podtitul, ve stylopisu mu nadefinuji vlastnosti (třeba tučnost, zarovnání na střed) a u daného textu jenom řeknu, že patří do třídy podtitul. Jak vypadá stylopis:.podtitul { text-align: center; font-weight: bold; text-decoration: overline} /* zarovnání na střed, tučné písmo a nadtržení*/ a potom v těle dokumentu to vypadá takhle: <p class="podtitul">text podtitulu</p> A v prohlížeči potom takhle: Text podtitulu Text uvnitř "zaklasovaného" elementu se bude formátovat podle definice ve stylopisu. Ještě je třeba všimnout si tečky na začátku deklarace ve stylopisu. Ta vyjadřuje, že deklarace se nebude týkat html tagu, ale třídy. Atribut class (třída) se může použít u libovolného elementu (tagu). Symbolicky: <tag class="jméno_třídy"> Element se stejnou class se v dokumentu může vyskytovat mnohokrát (na rozdíl od ID -- identifikátoru, o tom později). Potom se tento element zformátuje podle definice.

6 Takto je možné vytvořit si mnoho vlastních tříd -- stylů. Já mám například kromě podtitulu nadeklarovaný formát poznámek, odkazových lišt a důležitějších odstavců. Je možné toho vymyslet desítky, to se dočtete v kapitole o strukturovaném textu. Identifikátor Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, ale na rozdíl od třídy nezačíná tečkou, ale dvojkřížkem #. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou. Kdybych v předchozím příkladu použil identifikátoru namísto třídy, deklarace by vypadala takhle: #podtitul { text-align: center; font-weight: bold; text-decoration: overline} a v těle by se odstavci přiřadila identifikace atributem id: <p id="podtitul">text podtitulu</p> Identifikátor id se z hlediska CSS chová stejně jako třída class. Rozdíly jsou právě jen ve skriptech a v parsování dokumentu. Osobně identifikátory pro formátování nepoužívám, stačí mi třídy. Složené deklarace Hromadná deklarace Stylopisy umožňují nadeklarovat vlastnosti 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 čárka mezi selektory! Kdyby tam nebyla, šlo by o něco jiného, totiž o kontextový selektor. Kontextová deklarace Vysvětlím příkladem: 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. Osobně tuto vlastnost považuji za nejfantastičtější a výborně použitelnou vlastnost CSS. Použil jsem ji třeba v příkladu o různých barvách odkazů.

7 Skládání stylů Díky CSS se na jeden element může navrstvit mnoho různých deklarací (proto styly kaskádové), někdy i protichůdných. Jak se rozhodne, která deklarace převládne? Zpravidla ta poslední. Když chci, aby nějaká dřívější deklarace převládla, napíšu do deklarace řetězec "! important". Taková deklarace potom nebude přehlušena žádnou pozdější. (Tuto vlastnost doporučuji používat s rozvahou, protože způsobuje zmatek při pozdějším ladění designu.) Pseudoelementy Ve specifikaci CSS1 se vyskytují pseudoelementy :first-line a :first-letter. Znamenají první řádek a první písmeno. Například zápis: p:first-line {color: blue} p:first-line {font-size: 200%} by měl způsobit, že odstavce budou mít první řádek modrý a první písmeno dvakrát větší. Ale ve většině prohlížečů to nefunguje. Hodně lidí nad tím strávilo x hodin ve snaze to rozchodit. Je to marné. Z prohlížečů to podporují pouze Mozilla 5, NN 6 a Internet Explorer 5.5 (nikoliv IE 5.0) Shrnující příklad Ve stylopisu (v hlavičce či v externím souboru) se mohou vyskytovat i takovéhle věci: #prvniodstavec {text-ident: 20 px} A:visited A:link a:hover.velke A.zalozka {color: teal} {color: navy} {color: red} {font-weight: bold} {font-style: oblique}.zalozka A:visited {color: navy! important} H1, H2 {color: #33ff66; font-variant: small-caps} H2 {font-size: 18pt} Důležité je v příkladu snad jen to, že se může jeden element deklarovat vícekrát a že kontextová deklarace se může kombinovat s třídami a pseudotřídami. Nejisté znaky Ve jménech tříd a identifikátorů se vyvarujte používání podtržítka _ (a raději i češtiny a jiných pochybných znaků, ale mínus je v pohodě). Internet Explorer 5 podtržítko v názvu třídy nebo ID snese a správně zobrazí, žádný jiný prohlížeč ale ne!!! Název třídy ani identifikátoru by podle specifikace neměl začínat číslicí, Internet Exploreru 6 se to opravdu nelíbí.