12. lekce - div, span
Pro vymezení části textu (odstavce) jsme použili tag <p>, vzpomeňte si na stránku s textovými vtipy. Ohraničit text (část textu) můžeme také tagem <span>, dalším tagem <div> můžeme omezit libovolnou část stránky.
Span
Tag <p> (pro odstavec) nejen ohraničí část textu, ale také provede na konci textu odřádkování a vynechá řádek. Pro tag <span> můžete ve stylu použít stejné vlastnosti, které jsme použili pro tag <p> (kromě například zarovnání textu, to pro span nemá význam), rozdíl mezi těmito dvěma tagy je ten, že <span> můžete použít uvnitř odstavce, věty, řádku či slova, neodřádkuje, je to tag řádkový, používá se jen na odlišení textu na řádku. Například na této stránce je <span> využitý ke zvýraznění důležitých pojmů (například názvů tagů).
Při tvorbě stylů musíte vždy pamatovat na takzvané "dědění" vlastností - pokud tag nemá určenou nějakou vlastnost, "zdědí" ji od nadřazeného tagu (do kterého je vložen).
Následující obrázek je výřez stránky, která má tento styl:
body {color: Maroon; font-size: 15px; font-family: Arial, Helvetica, sans-serif; background-color: Silver;}
p {color: Navy; font-size: 12px; background-color: Aqua;}
span {letter-spacing: 10px; font-weight: bold;}
Zdroj této části stránky je jednoduchý:
<p>
Volá rozhořčený pán do redakce novin:<br>
"Včera jste otiskli zprávu, že jsem zemřel!"<br>
Redaktor: "To máte pravdu... <span>Odkud voláte?</span>"
</p>
<span>text ohraničený tagem span mimo odstavec</span>
Všimněte si vlastností tagu <span> , ve stylu má definovanou mezeru mezi písmeny (10 px) a tloušťku písmen (bold), nemá definovanou ani velikost ani barvu textu. Když je použitý uvnitř tagu <p> , je modrý a menší - zdědil velikost i barvu textu tagu <p>, pokud je použitý mimo tag <p> , zdědil barvu a velikost textu tagu <body>. To začátečníkům občas přináší nejasnosti, ale profesionálové toho dokáží dokonale využít, například, pokud chcete mít na celé stránce (nebo většině) použitý stejný typ písma, potom ho nadefinujete pro tag <body> a ostatní tagy ho zdědí, změníte ho jen u tagů, které chcete odlišit.
Div
Tag <div> se na současných (novějších) stránkách vyskytuje velmi často, protože se používá pro tvorbu layoutu (grafického rozdělení, rozvržení) stránek, o tom ale až později. Je do něj totiž možné uzavřít jakýkoliv blok elementů stránky (nejen textu, ale leckdy i oblast celé stránky) a více "divů" potom na stránce libovolně uspořádat.
Stylové vlastnosti pro něj můžete využít všechny, které jsme doposud probírali, kromě vlastností textu také vlastnosti pozadí, rámečků atd., například:
div {width: 400px; color: blue; font-family: Arial CE, Verdana, sans-serif; font-style: italic; font-size: 11pt; font-weight: bold; background-color: #A0FFFF; border-width: 8px; border-color: red; border-style: solid}
Další zmatky může začátečníkům přinést také to, že je možné také načíst více souborů s definicí stylů, vlastnosti se postupně doplňují nebo přepisují (platí vždy ty později uvedené nebo načtené, také pokud máte v jednom souboru omylem jeden tag zapsaný víckrát). Autor firemního webu může vytvořit jeden soubor se styly společnými (spolecne.css) pro všechny stránky a potom v dalších souborech doplnit odlišující vlastnosti pro stránky prezentace firmy (prezentace.css), e-obchodu (obchod.css) a tak dále. Na stránce obchodu potom načte spolecne.css a obchod.css, na stránce prezentace načte spolecne.css a prezentace.css. Vzhled jednoho dokumentu může být určen větším počtem tabulek stylů (to je ono kaskádování - "skládání stylů na sebe"), navíc může být ovlivněn styly uživatele a také prohlížeče, z nichž se každý chová trochu jinak :-) .
Úkoly:
Úkol (2 body):
Na stránce učitelé.html pomocí tagu span a jeho stylu odlište barevně předměty, ve kterých byste se chtěli ve druhém pololetí zlepšit.
Úkol (3 body):
Na stránce media.html uzavřete všechny odkazy do jednoho tagu div. V jeho stylu mu určete šířku (o něco větší než šířka odkazů), barvu pozadí a vlastnosti rámečku.
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_12_10B_tvorba www12 |
| Autor: | Pavel Petr |