první odstavec na stránce bude zobrazen modře (Př. stylIV) n Přímo ve stránce je možno zapisovat styl do hlavičky mezi tagy n nebo přímo do všech elementů.

Selektor a Deklarace n p {color:white; background-color:black } (Př. styl_V) n Vše se musí zapisovat jako v příkladu nejdříve selektor a pak deklarace, deklarace musí být uzavřena do znaku { a } každá vlastnost od hodnoty se odděluje dvojtečkou : pokud zapisujete více vlastností musí se oddělit středníkem ; Více selektorů h1, h2, h3, h4 {color:green; background-color:gold } (Př. styl_VI) n Pokud chcete pro více selektorů napsat stejnou deklaraci např. u nadpisů napíšete selektory za sebou a oddělíte je čárkami. Následující příklad zajistí že nadpisy h1-h4 se budou zobrazovat zeleně se zlatým pozadím. Vlastnosti písma Vlastnost Hodnoty Standardní Aplikuje se Dědí se Popis hodnota na font-family seznam písem podle prohlížeče všechny ano rodina písma elementy font-style normal, italic, oblique normal všechny ano styl písma elementy font-variant normal, small-caps normal všechny ano varianta písma elementy normal, bold, bolder, font-weight lighter, 100, 200, 300, normal všechny ano síla písma(tloušťka) 400, 500, 600, 700, elementy 800, 900 procenta, délky, xx-small, x-small, všechny font-size small, medium, large, medium elementy ano velikost písma x-large, xx-large, larger, smaller všechny výše uvedené standardní všechny kompletní nastavení font vlastnosti hodnoty všech elementy ano písma vlastností písma font Jde o úspornější zápis vlastností písma. Při zápisu vlastností se musí dodržovat pořadí, jinak to nebude fungovat. Většina hodnot se může vynechat, jen velikost a rodina písma (font-family) jsou povinné. +------------------------------------------------------------------------------------------+ | font | |------------------------------------------------------------------------------------------| | hodnoty | souhrnné vlastnosti fontu | |-----------------------------------------------------------+------------------------------| |kurzíva verzálky tučnost velikost/výška_řádku rodina_písma|musí být v tomto pořadí | |-----------------------------------------------------------+------------------------------| |velikost rodina |všechno ostatní možno vynechat| |-----------------------------------------------------------+------------------------------| | | | +------------------------------------------------------------------------------------------+ Všechny Písma Písmo Náhled písma serif Náhled písma sans-serif Náhled písma cursive Náhled písma fantasy Náhled písma monospace Náhled písma "@Arial Unicode MS" Náhled písma @Batang Náhled písma "@MS Mincho" Náhled písma @SimSun Náhled písma Abbess Náhled písma Amethyst Náhled písma Addled Náhled písma Andorra Náhled písma Arial Náhled písma "Arial Black" Náhled písma "Arial Narrow" Náhled písma "Arial Unicode MS" Náhled písma Ballet Náhled písma Balthazar Náhled písma Batang Náhled písma Bering Náhled písma BolsterBold Náhled písma "Book Antiqua" Náhled písma "Bookman Old Style" Náhled písma "Broadway BT" Náhled písma Brussels Náhled písma Calligraphic Náhled písma Calvin Náhled písma Century Náhled písma "Century Gothic" Náhled písma "Comic Sans MS" Náhled písma Commons Náhled písma Coolsville Náhled písma Corporate Náhled písma Courier Náhled písma "Courier New" Náhled písma Crandall Náhled písma Dayton Náhled písma Default Náhled písma DicotMedium Náhled písma "Estrangelo Edessa" Náhled písma Fixedsys Náhled písma "Franklin Gothic Medium" Náhled písma Garamond Náhled písma Gautami Náhled písma Georgia Náhled písma "Geotype TT" Náhled písma Haettenschweiler Náhled písma Harvest Náhled písma Impact Náhled písma KlingBold Náhled písma Latha Náhled písma "Lucida Blackletter" Náhled písma Lissen Náhled písma "Lucida Bright" Náhled písma "Lucida Calligraphy" Náhled písma "Lucida Console" Náhled písma "Lucida Sans Unicode" Náhled písma Mangal Náhled písma Manorly Náhled písma Margaret Náhled písma Marlett Náhled písma "Microsoft Sans Serif" Náhled písma Mingle Náhled písma Modern Náhled písma "Monotype Corsiva" Náhled písma "MS Mincho" Náhled písma "MS Outlook" Náhled písma "MS Sans Serif" Náhled písma "MS Serif" Náhled písma "MT Extra" Náhled písma "MV Boli" Náhled písma Niamey Náhled písma "OCR A Extended" Náhled písma "Palatino Linotype" Náhled písma Palent Náhled písma Papyrus Náhled písma "Poor Richard" Náhled písma Raavi Náhled písma Roman Náhled písma Rondalo Náhled písma "Russel Write TT" Náhled písma Script Náhled písma Shruti Náhled písma SimSun Náhled písma "Small Fonts" Náhled písma Splash Náhled písma Sylfaen Náhled písma Symbol Náhled písma System Náhled písma Tahoma Náhled písma Tarzan Náhled písma Terminal Náhled písma "Times New Roman" Náhled písma "Trebuchet MS" Náhled písma Tunga Náhled písma Unpact Náhled písma Verdana Náhled písma "Viner Hand ITC" Náhled písma Webdings Náhled písma "Whimsy TT" Náhled písma Wingdings Náhled písma "Wingdings 2" Náhled písma "Wingdings 3" Náhled písma WST_Czec Náhled písma WST_Engl Náhled písma WST_Fren Náhled písma WST_Germ Náhled písma WST_Ital Náhled písma WST_Span Náhled písma WST_Swed Náhled písma Délkové jednotky Jednotky popis Jednotky px Pixel = 1 bod obrazovky em Výška aktuálního písma. Odpovídá šířce písmene M. ex Výška písmene x. in Palce 1palec=2,54cm cm Centimetr mm Milimetr pt 1pt=1/12pc pc Pica 1pc=12pt Jako délková jednotka se také mohou používat procenta. Vlastnosti textu Vlastnost Hodnoty Standardní Aplikuje se na Dědí se Popis hodnota word-spacing normal, délka normal všechny elementy ano o kolik se zvětší mezera mezi slovy o kolik se zvětší letter-spacing normal, délka normal všechny elementy ano mezera mezi písmeny none, underline, ozdoba textu, text-decoration overline, none všechny elementy ne podtržení line-throught, nadtržení, blink blikání baseline. sub, super, top, vertical-align text-top, middle, baseline inline elementy ne vertikální bottom, zarovnání text-bottom, procenta capitalize, zobrazení písma text-transform uppercase, none všechny elementy ano kapitálkami, lowercase, none malými a velkými písmeny text-align left, right, podle prohlížeče blokové elementy ano zarovnání textu center, justify velikost text-idented délka, procento 0 blokové elementy ano odstavcové zarážky normal, délka, výška řádky číslo line-height procenta, číslo normal všechny elementy ano udává násobek velikosti písma Tagy a

Někdy je ale potřeba zformátovat kus textu, který není vymezen žádným konkrétním tagem. Proto se tam vloží nový tag. Zahrnuje-li formátovaná oblast více odstavců, použije se párový tag

, v rámci jednoho odstavce se používá , protože

by to roztrhal do více odstavců. Tagy nesou význam V začátcích vývoje HTML se každý tag o lišil svou funkcí o a lišil se vzhledem. Například tag

znamená nejdůležitější nadpis a zobrazuje se velkým tučným písmem. Tag
znamená adresu a sám od sebe se v prohlížečích kreslí kurzívou. Atd. Div a span jsou výjimkou. Význam nenesou. Obálky bez významu Časem začalo být evidentní, že by se hodně hodily tagy, o které nic neznamenají o a nijak se neformátují. Prostě neutrální tagy. Proto vznikly HTML tagy
a . Jsou užitečné zejména v kombinaci s CSS Když chci třeba několika po sobě jdoucím odstavcům (tag
) nastavit společné vlastnosti, nemůžu je prostě obalit do dalšího odstavce, protože by to prohlížeče nepochopily. Obálky bez významu Časem začalo být evidentní, že by se hodně hodily tagy, o které nic neznamenají o a nijak se neformátují. Prostě neutrální tagy. Proto vznikly HTML tagy
a . Jsou užitečné zejména v kombinaci s CSS Když chci třeba několika po sobě jdoucím odstavcům (tag
) nastavit společné vlastnosti, nemůžu je prostě obalit do dalšího odstavce, protože by to prohlížeče nepochopily. Rozdíl mezi
a o Div je element blokový o span je element řádkový. Jinak řečeno tag
před sebou a za sebou udělá konec řádku. Span se bez problému může vyskytovat v jednom řádku. text text text
obsah divu
text text text obsah spanu stále v jednom řádku. To není jediný rozdíl, ale je nejdůležitější. Kdy použít div a kdy span? Řádkový element span v sobě nemůže obsahovat blokové elementy. To je hlavní pravidlo. Je-li třeba obalit například skupinu odstavců, jednoznačně se používá
. Pokud se má třeba jenom vybarvit kus textu, je na to . Například: ...
...
... A druhý příklad:
Normální text a text kurzívou a zase normální text.
se zobrazí takto: Normální text a text kurzívou a zase normální text. Komentáře Aby byl styl více čitelný a jasný můžete si do něj přidávat komentáře které prohlížeč ignoruje, komentář se vkládá mezi znaky /* a */ a může být i přes několik řádků. Je dobré se v komentářích vyvarovat psaní písmen ě š č ř ž, protože některé prohlížeče s tím mají problémy 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 , 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: a potom v těle dokumentu to vypadá 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: 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. Takto je možné vytvořit si mnoho vlastních tříd -- stylů.