04_WWW_výukový text PDF

World Wide Web Studijní blok: 4, čas potřebný pro studium: 2 hod. Písmo Práce s písmem v CSS je popsáno v modulu „CSS Fonts Module Level 3“. Zdroj: https://www.w3.org/TR/css-fonts-3/ Základní termíny používané v modulu: Znak (character) – nejmenší složka psan...

World Wide Web Studijní blok: 4, čas potřebný pro studium: 2 hod. Písmo Práce s písmem v CSS je popsáno v modulu „CSS Fonts Module Level 3“. Zdroj: https://www.w3.org/TR/css-fonts-3/ Základní termíny používané v modulu: Znak (character) – nejmenší složka psaného jazyka, která má sémantickou hodnotu. Je to abstraktní pojem, nejedná se o konkrétní způsob vykreslení. Na počítačích se dnes nejčastěji odkazujeme na standard Unicode, který obsahuje znaky a jim přiřazené kódy. Téměř všechna písmena jsou znakem, ale ne všechny znaky jsou písmena. Znakem může být kromě písmene, číslo, interpunkce, diakritické znaménko, různé symboly, emotikony. Glyf (glyph) – je konkrétní vizuální reprezentace znaku. Někdy může být jeden znak reprezentován více glyfy nebo jeden glyf může reprezentovat více znaků. Příkladem, kdy jeden glyf vyjadřuje dva znaky může být ligatura (ligature), kdy jsou dvě písmena obvykle nějak propojena či upravena, například z důvodu lepší čitelnosti. Font – je sada znaků abecedy jedné velikosti a jednotného stylu. Font představuje sloty, ve kterých jsou umístěny glyfy, které jsou mapovány na znaky. Rodina písma – je skupina řezů odvozených z jednoho typu písma. Řez písma je grafická varianta základního typu písma. Je to např. tučné písmo nebo kurziva. Některé písma mohou být vytvořeny pouze v jednom řezu. Používání jedné rodiny písma zajišťuje jednotný vzhled sazby. Vyznačovací verze 1.1.2  řez je typ řezu, který slouží ke zvýraznění důležitých slov nebo celých částí textu. Tento typ řezu se odvozuje ze základního řezu. Vyznačovacím řezem může být: ▪ Kurziva – je řez s mírným sklonem. Pozor na nepravá kurziva, která se vytváří nakloněním písma což deformuje tvar písma. ▪ duktus – písmo polotučné, tučné nebo velmi tučné (zesílený duktus); tenké, slabé (zeslabený duktus); ▪ kapitálky – menší verze normálních verzálek (velkých písmen). Grafém (grapheme) - je nejmenší, dále už nedělitelnou jednotkou psaného jazyka. Představuje cokoli, co je znakem v pravopisu konkrétního jazyka. Ve většině případů je grafém synonymem pro znak. Rozdíl může být například „ch”, které ve španělštině je považováno za jednu jednotku (grafém), ale v angličtině jsou to již dva grafémy. Pro ilustraci je níže je uveden příklad rodiny písma Roboti. Zdroj: https://fonts.google.com/specimen/Roboto Zdroj: https://fonts.google.com/specimen/Roboto/glyphs verze 1.1.2 Při práci s písmem na webové stránce (jejich rozvržení a výběr písma) je nutné dodržovat pravidla typografie1. Na rozdíl o tradiční typografie čelí webová typografie technickým výzvám, jako je například dynamická schopnosti měnit vzhled prezentace (různé velikosti zobrazení) nebo různé, předem neznámé parametry klientského zařízení (rychlost připojení, hustota pixelů, …). Zdroj: https://m2.material.io/design/typography/understanding-typography.html#type-properties Vlastnost font-family Vlastnost font-family určuje prioritní seznam názvů rodin písem. Názvy rodin písem: konkrétní název rodiny písma, např. Helvetica, Verdana, generický název rodiny písma: ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, ‘monospace’ Příklad použití vlastnosti viz ukázka níže. Zdroj: https://www.w3.org/TR/css-fonts-3/ V následující tabulce je uvedeno pět základních generických rodin písem. 1 Typografie je umělecko-technický obor, který se zabývá tiskovým písmem. Dělí se na mikrotypografii a makrotypografii. Mikrotypografie se zabývá uměleckou tvorbou písma. Makrotypografie se zabývá umístěním písma na stránce, proporcemi titulků, textů a ilustrací, v češtině se tradičně tato disciplína nazývá grafická úprava. (Zdroj: https://cs.wikipedia.org/wiki/Typografie) verze 1.1.2  Rodina Popis Serif Patková písma mají na okrajích každého písmene malý tah. Vytvářejí smysl pro formálnost a eleganci. Sans-serif Bezpatková písma mají čisté linie (bez malých tahů). Vytvářejí moderní a minimalistický vzhled. Monospace V Monospace fontech mají všechna písmena stejnou pevnou šířku. Vytvářejí mechanický vzhled. Cursive Kurzivní písma napodobují lidský rukopis. Fantasy Fantasy fonty jsou dekorativní/hravá písma. Příklady konkrétních rodin písem: verze 1.1.2  Zdroj: https://www.w3.org/TR/css-fonts-3/ Vlastnost font-weight Vlastnost font-weight nastavuje tučnost písma. Dostupná tučnost závisí na aktuálně nastavené rodině písem. Vlastnost může nabývat hodnot: 100-900 o 100 - Thin o 200 - Extra Light (Ultra Light) o 300 - Light o 400 - Normal o 500 - Medium o 600 - Semi Bold (Demi Bold) o 700 - Bold o 800 - Extra Bold (Ultra Bold) o 900 - Black (Heavy) normal - Stejné jako ‘400’. bold - Stejné jako ‘700’. bolder - Určuje tučnější váhu než zděděná hodnota. lighter - Určuje nižší váhu, než je zděděná hodnota. Vlastnost font-stretch Vlastnost font-stretch nastavuje normální, zhuštěný nebo rozšířený řez rodiny písem. Vlastnost může nabývat hodnot (od nejužšího po nejširší): ultra-condensed extra-condensed condensed verze 1.1.2  semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded Zdroj: https://www.w3.org/TR/css-fonts-3/#font-stretch-prop Vlastnost font-style Vlastnost font-style umožňuje vybrat styl fontu. Vlastnost může nabývat hodnot: normal – vybere podobu, která je klasifikována jako normální podoba italic – vybere písmo, které je označeno jako kurzíva nebo šikmý řez, pokud kurzíva není k dispozici oblique – vybere písmo, které je označeno jako šikmý řez nebo kurzíva, pokud šikmý řez není k dispozici Italic má obecně kurzívní charakter, zatímco šikmé řezy jsou typicky šikmé verze běžné podoby písma. Šikmé řezy lze simulovat umělým nakloněním glyfů běžné podoby. Zdroj: https://www.w3.org/TR/css-fonts-3/#font-style-prop Vlastnost font-size Vlastnost font-size udává požadovanou výšku glyfů písma. Vlastnost může nabývat hodnot: klíčová slova absolutních a relativních velikostí (absolutní velikost: xx-small, x-small, small, medium, large, x-large, xx-large; relativní velikost: larger, smaller) verze 1.1.2  přímé hodnoty (např. 10px, 3em, 15% a podobně.) Zdroj: https://www.w3.org/TR/css-fonts-3/#font-size-prop Vlastnost font-size-adjust Vlastnost font-size-adjust je způsob, jak zachovat čitelnost textu, když dojde k výpadku písma. Zachování čitelnosti se provádí prostřednictvím úpravy hodnoty poměru mezi velkými a malými písmeny. Vlastnost může nabývat hodnot: none – velikost písma nebude upravována metrika a číslo – pokud není metrika uvedena, bude jako metrika použita x-height; velikost písma se upraví jako násobek písma dle příslušné metriky from-font – použije číslo pro zadanou metriku z prvního dostupného písma Níže je uveden příklad textu s použitím a bez použití „font-size-adjust“. Zdroj: https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop verze 1.1.2 Upravená velikost písma se vypočítá pomocí vzorce: Zdroj: https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop Vlastnost font-variant Vlastnost font-variant je zkráceným zápisem pro vlastnosti: font-variant-alternates – řídí použití alternativních glyfů. Na tyto alternativní glyfy mohou odkazovat alternativní názvy definované v @font-feature-values. font-variant-caps – řídí použití alternativních glyfů pro velká písmena. font-variant-east-asian – řídí použití alternativních glyfů pro východoasijské skripty jako je japonština a čínština. font-variant-emoji – určuje výchozí styl prezentace pro zobrazování emotikonů. font-variant-ligatures – řídí, které ligatury a kontextové formy se používají v textovém obsahu prvků na které se vztahuje. font-variant-numeric – řídí použití alternativních glyfů pro čísla, zlomky a pořadové značky. font-variant-position – řídí použití alternativních menších glyfů, které jsou umístěny jako horní nebo dolní index. Vlastnost font Vlastnost font je vlastností pro zkrácený zápis hodnot vlastností: font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family. Zdroj písma Webové písmo je jakékoli písmo použité v návrhu webu, které není standardně nainstalováno na zařízení koncového uživatele. V CSS je možné prostřednictvím @font-face připojit fonty, která budou automaticky načtena a aktivována v případě potřeby užití na webové stránce. verze 1.1.2  Zdroj: https://www.w3.org/TR/css-fonts-3/#font-resources Fonty mohou být v různých formátech. V současné době je upřednostňován formát WOFF (a jeho nástupce WOFF2), což je komprimovaný formát vytvořený speciálně pro webová písma. Pro web je možné použít i běžná písma OpenType (soubory TTF a OTF), nicméně se to nedoporučuje, protože jejich užití může být v rozporu s licenčními smlouvami. Taktéž jsou tyto písma výrazně větší. V případě, že soubor s písmem bude klientským agentem stahován z externího zdroje, bude velikost tohoto souboru negativně ovlivňovat dobu načítání stránky. Je proto vhodné tuto skutečnost zohledňovat při designu stránky a omezit počet stahovaných písem. Zdroj: https://www.w3.org/TR/css-fonts-3/#font-resources verze 1.1.2 Text Modul „CSS Text Module Level 3“ popisuje ovládací prvky sazby CSS (tedy funkce CSS, které řídí překlad zdrojového textu na formátovaný, řádkově zalomený text). Různé vlastnosti CSS poskytují kontrolu nad transformací velkých a malých písmen, sbalením mezer, zalamováním textu, pravidly pro zalamování řádků a dělením slov, zarovnáním, mezerami a odsazením. Zdroj: https://www.w3.org/TR/css-text-3/ Vlastnost text-transform Vlastnost text-transform určuje, jak má být v textu zacházeno s velkými a malými písmeny. Lze jej použít k tomu, aby se text zobrazoval pouze velkými nebo malými písmeny nebo s velkým písmenem každého slova. Může také pomoci zlepšit čitelnost rubínových notací. Vlastnost může nabývat hodnota: none – zabraňuje změně velikosti všech znaků capitalize – převádí první písmeno každého slova na velká uppercase – převádí všechny znaky na velká písmena lowercase – převádí všechny znaky na malá písmena full-width – vynucuje psát znak (hlavně ideogramy a latinská písma) do čtverce, což umožňuje jejich zarovnání do obvyklých východoasijských písem (jako je čínština nebo japonština) full-size-kana – převádí všechny malé znaky Kana na ekvivalentní Kana v plné velikosti, aby se kompenzovaly problémy s čitelností při malých velikostech písma verze 1.1.2 Vlastnost white-space Vlastnost white-space nastavuje, jak se zachází s bílým prostorem uvnitř prvku. Vlastnost může nabývat hodnota: normal – sekvence prázdného místa jsou sbalené nowrap – sbalí bílé místo jako u normálního, ale potlačí zalomení řádků (zalomení textu) ve zdroji. pre – sekvence prázdného místa jsou zachovány. Řádky jsou přerušovány pouze u znaků nového řádku ve zdroji a u prvků. pre-wrap – sekvence prázdného místa jsou zachovány. Řádky jsou přerušovány u znaků nového řádku, u a podle potřeby k vyplnění řádkových polí. pre-line – sekvence prázdného místa jsou sbalené. Řádky jsou přerušovány u znaků nového řádku, u a podle potřeby k vyplnění řádkových polí break-spaces – stejné jako hodnota pre-wrap s určitými výjimkami Vlastnost tab-size Vlastnost tab-size se používá k přizpůsobení šířky znaků tabulátoru (U+0009). Vlastnost může nabývat hodnot: Číslo – násobek šířky posunu mezery (U+0020), který se použije jako šířka tabulátorů Délka – šířka tabulátoru Hodnoty musí být nezáporné. Vlastnost word-break Vlastnost word-break nastavuje, zda se zalomení řádků objeví všude tam, kde by text jinak přetékal obsah boxu. Vlastnost může nabývat hodnot: normal – použije se výchozí pravidlo pro zalomení řádků break-all – any nedošlo k přetečení, slovo se zalomí keep-all – pro čínské/japonské/korejské texty se nepoužije zalomení, pro ostatní texty se tato hodnota chová jako hodnota normal Vlastnost line-break Vlastnost line-break nastavuje, jak zalomit řádky čínského, japonského nebo korejského (CJK) textu při práci s interpunkcí a symboly. Vlastnost může nabývat hodnot: auto – text rozdělí pomocí výchozího pravidla zalomení řádku loose – text rozdělí pomocí nejméně omezujícího pravidla zalomení řádku normal – text rozdělí pomocí nejběžnějšího pravidla pro zalomení řádku strict – text rozdělí pomocí nejpřísnějšího pravidla pro zalomení řádku verze 1.1.2  anywhere – u rozdělení textu je možnost použít měkkého zalomení kolem každé typografické znakové jednotky Vlastnost hyphens Vlastnost hyphens určuje, jak mají být slova rozdělována, když se text zalamuje přes více řádků. Může zcela zabránit dělení slov, rozdělovat je na ručně zadaných bodech v textu nebo nechat prohlížeč automaticky vkládat pomlčky tam, kde je to vhodné. Vlastnost může nabývat hodnot: none – slova nejsou na zalomení řádků přerušována, i když znaky uvnitř slov naznačují zalomení řádků. Řádky se zalomí pouze mezerami. manual – slova se pro zalamování řádků přerušují pouze tam, kde znaky uvnitř slova naznačují možnosti zalomení řádků (U+2010 (HYPHEN) - tvrdý spojovník, je viditelný; U+00AD (SHY) - měkký spojovník, je neviditelný) auto – automatické dělení slov v příslušných bodech dělení slov, podle jakýchkoli pravidel, která si agent zvolí Vlastnost overflow-wrap Vlastnost overflow-wrap se vztahuje na vložené prvky a nastavuje, zda má prohlížeč vložit konce řádků do jinak nerozbitného řetězce, aby se zabránilo přetečení textu z jeho řádkového boxu. Vlastnost může nabývat hodnot: normal – řádky se mohou lámat pouze v normálních bodech zlomu slov (jako je mezera mezi dvěma slovy) anywhere – aby se zabránilo přetečení, může být jinak nerozbitný řetězec znaků (např. dlouhé slovo nebo adresa URL) kdykoli přerušen, pokud v řádku nejsou žádné jinak přijatelné body přerušení break-word – stejné jako hodnota anywhere s tím rozdílem, že body měkkého zalamování nejsou zohledněny při výpočtu vnitřních velikostí minimálního obsahu Vlastnost text-align Vlastnost text-align nastavuje vodorovné zarovnání obsahu na úrovni řádku uvnitř bloku prvku nebo pole buňky tabulky. To znamená, že funguje jako vertikální zarovnání, ale ve vodorovném směru. Vlastnost může nabývat hodnot: start – stejně jako doleva, pokud je směr zleva doprava, a doprava, pokud je směr zprava doleva end – stejné jako vpravo, pokud je směr zleva doprava, a doleva, pokud je směr zprava doleva left – doleva right – doprava verze 1.1.2  center – na střed justify – do bloku justify-all – do bloku včetně vynucení zarovnání posledního řádku match-parent – stejné jako hodnota inherit, ale hodnoty start a end se vypočítají podle směru rodiče a nahradí se příslušnou levou nebo pravou hodnotou Vlastnost text-align-last Vlastnost text-align-last nastavuje, jak je zarovnán poslední řádek bloku nebo řádku těsně před vynuceným zalomením řádku. Vlastnost může nabývat hodnot: auto – text je zarovnán podle hodnoty vlastnosti text-align, pokud text-align je justify, v takovém případě je účinek stejný jako text-align-last s hodnotou start start – stejně jako doleva, pokud je směr zleva doprava, a doprava, pokud je směr zprava doleva end – stejné jako vpravo, pokud je směr zleva doprava, a doleva, pokud je směr zprava doleva left – do leva right – do prava center – na střed justify – text by měl být zarovnán k levému nebo pravému okraji obsahu odstavce Vlastnost text-justify Vlastnost text-justify nastavuje, jaký typ zarovnání by měl být aplikován na text, když pro prvek platí vlastnost text-align: justify;. Vlastnost může nabývat hodnot: none – zarovnání textu je vypnuto auto – agent vybere nejlepší typ zarovnání pro aktuální situaci na základě rovnováhy mezi výkonem a kvalitou, ale také podle toho, co je nejvhodnější pro jazyk textu inter-word – text je zarovnán přidáním mezery mezi slova inter-character – text je zarovnán přidáním mezery mezi znaky Vlastnost word-spacing Vlastnost word-spacing nastavuje délku mezery mezi slovy a mezi značkami. Vlastnost může nabývat hodnot: normal – normální mezery mezi slovy, jak jsou definovány aktuálním písmem a/nebo prohlížečem. délka – konkrétní zadaná velikost mezery verze 1.1.2 Vlastnost letter-spacing Vlastnost letter-spacing nastavuje chování vodorovných mezer mezi znaky textu. Tato hodnota se přičte k přirozeným mezerám mezi znaky při vykreslování textu. Kladné hodnoty mezer mezi písmeny způsobují, že se znaky rozšiřují, zatímco záporné hodnoty mezer mezi písmeny přibližují znaky k sobě. Vlastnost může nabývat hodnot: normal – normální mezery mezi písmeny pro aktuální písmo délka – konkrétní zadaná velikost mezery Vlastnost text-indent Vlastnost text-indent nastavuje délku prázdného prostoru (odsazení), který je umístěn před řádky textu v bloku. Vlastnost může nabývat hodnot: délka – konkrétní zadaná velikost mezery procento – konkrétní zadaná velikost mezery vypočtená jako procento šířky nadřazeného prvku Hodnoty mohou být upřesněny následujícími klíčovými slovy: each-line – odsazení ovlivňuje první řádek kontejneru bloku i každý řádek po vynuceném zalomení řádku, ale neovlivňuje řádky po měkkém zalomení hanging – invertuje, které řádky jsou odsazeny. Všechny řádky kromě prvního budou odsazeny verze 1.1.2 Tabulky Tabulkový model CSS Tabulkový model se v CSS skládá z volitelného titulku a libovolného počtu řádků buněk. O tabulkovém modelu se říká, že je „primárně řádkový“, protože autoři určují řádky, nikoli sloupce, explicitně v jazyce dokumentu. Sloupce jsou odvozeny, jakmile jsou specifikovány všechny řádky (první buňka každého řádku patří do prvního sloupce, druhá do druhého sloupce atd.). Řádky a sloupce mohou být strukturálně seskupeny a toto seskupení se odráží v prezentaci (např. kolem skupiny řádků může být nakresleno ohraničení). Model tabulky se tedy skládá z tabulek, titulků, řádků, skupin řádků (včetně skupin záhlaví a zápatí), sloupců, skupin sloupců a buněk. Mapování elementů na prvky CSS tabulky Model CSS nevyžaduje, aby jazyk dokumentu obsahoval prvky, které odpovídají každé z těchto komponent. U jazyků dokumentů (jako jsou aplikace XML), které nemají předdefinované prvky tabulky, musí autoři namapovat prvky jazyka dokumentu na prvky tabulky. Toho lze docílit pomocí hodnot vlastnosti display: table (In HTML: TABLE) inline-table (In HTML: TABLE) table-row (In HTML: TR) table-row-group (In HTML: TBODY) table-header-group (In HTML: THEAD) table-footer-group (In HTML: TFOOT) table-column (In HTML: COL) table-column-group (In HTML: COLGROUP) table-cell (In HTML: TD, TH) table-caption (In HTML: CAPTION) Zdroj: https://www.w3.org/TR/CSS22/tables.html#table-display verze 1.1.2 Sloupce Buňky tabulky mohou patřit do dvou kontextů: řádků a sloupců. Ve zdrojovém dokumentu jsou však buňky potomky řádků, nikoli sloupců. Nicméně některé aspekty buněk lze ovlivnit nastavením vlastností na sloupcích. Následující vlastnosti se vztahují na prvky sloupce a skupiny sloupců: border background width visibility Tabulky v modelu vizuálního formátování Ve vizuálním formátovacím modelu se tabulka může chovat jako blokový prvek (display: table) nebo jako řádkový prvek (display: inline-table). Vypočítané hodnoty vlastností position, float, margin-*, top, right, bottom a left se aplikují na obálku tabulky, nikoli na box tabulky. Všechny ostatní hodnoty nedědičných vlastností se použijí na box tabulky. Pokud hodnoty prvku tabulky nejsou použity v polích tabulky a obalu tabulky, použijí se místo toho počáteční hodnoty. Zdroj: https://www.w3.org/TR/CSS22/tables.html#model Vlastnost caption-side Vlastnost caption-side určuje polohu pole titulků vzhledem k tabulce. Vlastnost může nabývat hodnot: top – umístí pole titulků nad pole tabulky bottom – umístí pole titulků pod pole tabulky verze 1.1.2  Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side Vlastnost table-layout Vlastnost table-layout nastavuje způsob rozložení buněk, řádků a sloupců tabulky. Vlastnost může nabývat hodnot: auto – automatické rozložení tabulky, šířka tabulky a jejích buněk se přizpůsobí obsahu (většina prohlížečů používá toto rozložení ve výchozím nastavení) fixed – pevné rozložení tabulky za pomoci vlastnosti width Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout Ohraničení tabulky Existují dva odlišné modely pro nastavení ohraničení buněk tabulky v CSS. První je vhodnější pro tzv. oddělené okraje kolem jednotlivých buněk, druhý je vhodnější pro okraje, které jsou průběžné od jednoho konce tabulky ke druhému. S oběma modely lze dosáhnout mnoha stylů okrajů, takže je často věcí vkusu, který z nich je použit. Vlastnost border-collapse Vlastnost border-collapse stanovuje model ohraničení tabulky. Vlastnost může nabývat hodnoty: verze 1.1.2  separate – model ohraničení oddělených hranic collapse – model srážejících se hranic Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse Vlastnost border-spacing Vlastnost border-spacing určuje vzdálenost, která odděluje okraje sousedních buněk. Pokud je zadána jedna délka, udává horizontální i vertikální rozestup. Pokud jsou zadány dvě hodnoty, první udává vodorovnou vzdálenost a druhá svislou vzdálenost. Délky nesmí být záporné. Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing verze 1.1.2 Vlastnost empty-cells Vlastnost empty-cells nastavuje, zda se okraje a pozadí objeví kolem buněk, které nemají žádný viditelný obsah. Vlastnost může nabývat hodnot: show – ohraničení a pozadí nebude zobrazeno hide – ohraničení a pozadí nebude zobrazeno Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells verze 1.1.2 Podrobnosti modelu vizuálního formátování Vlastnost width Vlastnost width nastavuje šířku prvku. Ve výchozím nastavení nastaví šířku obsahu boxu, ale pokud je vlastnost box-sizing nastavena na border-box, nastaví šířku oblasti včetně okraje. Přípustné hodnoty vlastností width: auto – výchozí hodnota, konečnou délku vypočítá prohlížeč délka – délka definována číslem a délkovou jednotkou % – délka je procento z bloku, který prvek obsahuje initial – nastaví rozměr na výchozí hodnotu inherit – délka zděděna z nadřazené hodnoty Vlastnost height Vlastnost height určuje výšku prvku. Ve výchozím nastavení vlastnost definuje výšku obsahu boxu. Pokud je však vlastnost box-sizing nastavena na hodnotu border-box, nastaví výšku oblasti včetně okraje. Přípustné hodnoty vlastností height: auto – výchozí hodnota, konečnou délku vypočítá prohlížeč délka – délka definována číslem a délkovou jednotkou % – délka je procento z bloku, který prvek obsahuje initial – nastaví rozměr na výchozí hodnotu inherit – délka zděděna z nadřazené hodnoty Vlastnost min-width Vlastnost min-width nastavuje minimální šířku prvku. Zabraňuje tomu, aby se použitá hodnota vlastnosti width zmenšila než hodnota určená pro min-width. Vlastnost může nabývat hodnot: délka, procento auto – agent vypočítá a vybere minimální šířku pro zadaný prvek max-content – maximální vlastní šířka obsahu min-content – minimální vlastní šířka obsahu fit-content - – box využije dostupný prostor, ale nikdy více než skutečnou maximální šířku nebo výšku obsahu verze 1.1.2 Vlastnost max-width Vlastnost max-width nastavuje maximální šířku prvku. Zabraňuje tomu, aby se použitá hodnota vlastnosti width stala větší než hodnota určená parametrem max-width. Vlastnost může nabývat hodnot: délka, procento none – maximální šířka není omezena max-content – maximální vlastní šířka obsahu min-content – minimální vlastní šířka obsahu fit-content – box využije dostupný prostor, ale nikdy více než skutečnou maximální šířku nebo výšku obsahu Vlastnost min-height Vlastnost min-height nastavuje minimální výšku prvku. Zabraňuje tomu, aby se použitá hodnota vlastnosti height stala menší než hodnota určená pro min-height. Vlastnost může nabývat hodnot: délka, procento auto – agent vypočítá a vybere minimální výšku pro zadaný prvek max-content – maximální vlastní výška obsahu min-content – minimální vlastní výška obsahu fit-content – box využije dostupný prostor, ale nikdy více než skutečnou maximální šířku nebo výšku obsahu Vlastnost max-height Vlastnost max-height nastavuje maximální výšku prvku. Zabraňuje tomu, aby se použitá hodnota vlastnosti height stala větší než hodnota určená pro max-height. Vlastnost může nabývat hodnot: délka, procento none – maximální výška není omezena max-content – maximální vlastní výška obsahu min-content – minimální vlastní výška obsahu fit-content – box využije dostupný prostor, ale nikdy více než skutečnou maximální šířku nebo výšku obsahu Vlastnost line-height Vlastnost line-height nastavuje výšku řádkového rámečku. Běžně se používá k nastavení vzdálenosti mezi řádky textu. U prvků na úrovni bloku určuje minimální výšku řádkových polí v prvku. Vlastnost může nabývat hodnot: normal – závisí na uživatelském agentovi (zhruba 1,2 v závislosti na rodině písem prvku) verze 1.1.2  číslo – velikost řádku dle zadané hodnoty, pokud není uvedena jednotka, tak se jedná o bezrozměrné číslo, které se vynásobí aktuální velikosti písma procento – procento aktuální velikosti písma prvku Zdroj: https://www.webappers.com/2013/04/02/css-units-of-measure-going-beyond-the-pixel/ Vlastnost vertical-align Vlastnost vertical-align nastavuje svislé zarovnání inline, inline-block nebo table-cell boxu. Vlastnost může nabývat hodnot: baseline sub super text-top text-bottom middle top bottom, délka procenta Zdroj: https://bitsofco.de/the-vertical-align-property/ verze 1.1.2 Uživatelské rozhraní Modul „CSS Basic User Interface Module Level “ popisuje vlastnosti CSS, které umožňují autorům stylizovat vlastnosti a hodnoty související s uživatelským rozhraním. Modul zahrnuje a rozšiřuje funkce související s uživatelským rozhraním CSS 2.1. https://www.w3.org/TR/2018/REC-css-ui-3-20180621/ Vlastnost box-sizing Vlastnost box-sizing nastavuje způsob výpočtu celkové šířky a výšky prvku. Ve výchozím nastavení v box modelu CSS se šířka a výška, kterou přiřadíte prvku, použijí pouze na pole obsahu prvku. Pokud má prvek nějaké ohraničení nebo odsazení, přičte se to k šířce a výšce. Tato velikost zaujímá plochu, která je vykreslena na obrazovce. Vlastnost může nabývat hodnot: content-box – výchozí nastavení box modelu. border-box – do celkové šířky a výšky prvku se započítává i border a padding (box-sizing: border-box je výchozí styl, který prohlížeče používají pro prvky , , a pro prvky , jejichž typ je radio, checkbox, reset, button, submit, color nebo search) verze 1.1.2  Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing Vlastnosti obrysu Obrys je vizuální prvek kolem objektů, jako jsou tlačítka, aktivní pole formuláře, obrazové mapy a podobně. Obrysy se liší od ohraničení následujícími způsoby: Obrysy nezabírají místo. Obrysy mohou být nepravoúhlé. Agenti často vykreslují obrysy na prvcích ve stavu :focus. verze 1.1.2 Vykreslování obrysů je výslovně ponecháno na implementacích, aby bylo zajištěno lepší uživatelský prožitek na konkrétní platformě. Vlastnost outline Vlastnost outline je zkrácená deklarace vlastností outline-color, outline-style, outline-width. Obrys je čára, která je nakreslena kolem prvku mimo ohraničení. Na rozdíl od jiných oblastí boxu obrysy nezabírají místo, takže žádným způsobem neovlivňují rozvržení dokumentu. Obrys nemusí být obdélníkový. Při práci s víceřádkovým textem některé prohlížeče nakreslí obrys pro každý řádek zvlášť, zatímco jiné zalomí celý text jedním obrysem. Specifikace nedefinuje přesnou polohu nebo tvar obrysu, ale obvykle se kreslí bezprostředně mimo rámeček ohraničení. Vlastnost outline-color Vlastnost outline-color nastavuje barvu obrysu prvku. Vlastnost může nabývat hodnot: barva – konkrétní hodnota barvy invert – provede barevnou inverzi pozadí Vlastnost outline-width Vlastnost outline-width nastavuje tloušťku obrysu prvku. Obrys je čára, která je nakreslena kolem prvku mimo ohraničení. Vlastnost může nabývat hodnot: délka – konkrétní hodnota tloušťky thin – tenká medium – střední thick – tlustá Vlastnost outline-style Vlastnost outline-style nastavuje styl obrysu prvku. Obrys je čára, která je nakreslena kolem prvku mimo ohraničení. Vlastnost může nabývat hodnot: auto none dotted dashed solid double groove ridge inset verze 1.1.2  outset Zdroj: https://www.tutorialstonight.com/assets/css/css-outline-style.webp Vlastnost outline-offset Vlastnost outline-offset nastavuje velikost prostoru mezi obrysem a okrajem nebo okrajem prvku. Vlastnost může nabývat hodnot: délka Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset Vlastnost resize Vlastnost resize nastavuje, zda lze velikost prvku měnit, a pokud ano, v jakých směrech. Vlastnost může nabývat hodnot: none – velikost prvku nelze měnit both – velikost prvku lze měnit v horizontálním i vertikálním směru horizontal – velikost prvku lze měnit v horizontální směru vertical – velikost prvku lze měnit ve vertikálním směru Vlastnost text-overflow Vlastnost text-overflow nastavuje, jak je skrytý obsah přetečení signalizován uživatelům. Může být oříznut, zobrazit tři tečky ('…'). verze 1.1.2 Vlastnost může nabývat hodnot: clip – zkrátí text na hranici oblasti obsahu, takže ke zkrácení může dojít uprostřed znaku ellipsis – zobrazí tři tečky ('…', U+2026 HORIZONTAL ELIPSIS) představující oříznutý text. V oblasti obsahu se zobrazí '…', která snižuje množství zobrazeného textu. Pokud není dostatek místa pro zobrazení ‘…’, tak je symbol '…’ oříznut. Zdroj: https://www.w3.org/TR/2023/WD-css-overflow-3-20230329/#ellipsis-interaction Vlastnost cursor Vlastnost cursor určuje typ kurzoru, který se má zobrazit pro ukazovací zařízení. Vlastnost může nabývat hodnot: auto default none context-menu Help pointer progress wait verze 1.1.2  cell crosshair text vertical-text alias copy move no-drop not-allowed grab grabbing e-resize n-resize ne-resize nw-resize s-resize se-resize sw-resize w-resize ew-resize ns-resize nesw-resize nwse-resize col-resize row-resize all-scroll zoom-in zoom-out Zdroj: https://o7planning.org/12505/css-cursor verze 1.1.2 Vizuální efekty Zdroj: https://www.w3.org/TR/2023/WD-css-overflow-3-20230329/ Přetečení a ořezávání Obecně je obsah boxu omezen okraji boxu. V určitých případech však může obsah přetékat okraje boxu, což znamená, že obsah leží částečně nebo zcela mimo box. Kdykoli dojde k přetečení, vlastnost overflow určuje, zda je rámeček oříznut k okraji výplně, a pokud ano, zda je k dispozici mechanismus posouvání pro přístup k obsahu. Vlastnost overflow Vlastnost overflow je zkrácenou vlastností pro overflow-x a overflow-y. Nastavuje požadované chování obsahu při přetečení (obsah se nevejde do boxu nadřazeného prvku) v horizontálním a/nebo vertikálním směru. Vlastnost může nabývat hodnot: visible – přetečený obsah není oříznutý a může být viditelný mimo rámeček výplně prvku hidden – přetečený obsah je oříznut v poli výplně prvku clip – přetečený obsah je oříznut na hraně clipu, kterou definuje vl. overflow-clip-margin scroll – přetečený obsah je oříznut, ale obsah přetečení lze posouvat pomocí scrollbarů verze 1.1.2  auto – přetečený obsah je oříznut a obsah přetečení lze posouvat (scrollbar se zobrazí pouze v případě přetékajícího obsahu, scroolbar je ve výchozím nastavení skryt) Vlastnost overflow je specifikována jako jedna nebo dvě hodnoty. Pokud je zadána pouze jedna hodnota, overflow-x i overflow-y se nastaví na stejnou hodnotu. Pokud jsou zadány dvě hodnoty, první hodnota platí pro overflow-x ve vodorovném směru a druhá hodnota platí pro overflow-y ve vertikálním směru. Vlastnosti overflow-block a overflow-inline Vlastnosti overflow-block a overflow-inline nastavuje, co se zobrazí, když obsah přeteče počáteční a koncovou hranu blokového/řádkového boxu. Vlastnost overflow-block a overflow-inline se mapuje na overflow-y nebo overflow-x v závislosti na režimu zápisu dokumentu. Zatím slabá podpora v prohlížečích. Vlastnost overflow-clip-margin Vlastnost overflow-clip-margin určuje, jak daleko mimo své hranice může být prvek s přetečením. Vlastnost může nabývat hodnot: content-box, padding-box, border-box – určují hranu rámečku, která se má použít jako počátek okraje přetečení. Pokud je vynechán, výchozí hodnota je padding-box. délka – určuje posun, o kolik se přetečení okraje klipu rozšíří od určeného okraje rámečku. Záporné hodnoty jsou neplatné. Pokud je hodnota vynechána, výchozí hodnota je nula. Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin Vlastnost scroll-behavior Vlastnost scroll-behavior nastavuje chování scrolling boxu, když je rolování spuštěno navigačními nebo rolovacími API CSSOM. Vlastnost může nabývat hodnot: auto – posouvací rámeček se posouvá okamžitě verze 1.1.2  smooth – posouvací rámeček se posouvá plynule pomocí funkce náběhu definovaného uživatelem po dobu definovanou uživatelem. Uživatelští agenti by se měli toto řídit konvencemi platformy, pokud existují. Vlastnost scrollbar-gutter Vlastnost scrollbar-gutter umožňuje autorům vyhradit si místo pro posuvník, čímž se zabrání nechtěným změnám rozvržení s rostoucím obsahem a zároveň se vyhneme zbytečným vizuálním prvkům v případě, že posouvání není potřeba. Vlastnost může nabývat hodnot: auto – pokud je hodnota overflow scroll nebo auto, tak je obsah přetékající a jsou vytvořeny klasické posuvníky. Překryvné posuvníky nezabírají místo. stable – pokud je hodnota overflow auto, scroll nebo hidden, tak budou přítomny klasické posuvníky i když text nebude přetékat. Při použití překryvných posuvníků nebude oblast posuvníku přítomna. both-edges – pokud na jedné nebo druhé straně boxu bude přítomna oblast posuvníku, automaticky bude zobrazena i na přilehlé straně. verze 1.1.2  Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter Ořezávání Uzavřená vektorová cesta, tvar nebo mnohoúhelník definuje tzv. ořezovou cestu. Tato ořezová cesta ohraničuje oblast, kterou je možné zobrazit. Vše okolo této oblasti nebude zobrazeno. Zdroj: https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#clipping Vlastnost clip-path Vlastnost clip-path vytváří ořezovou oblast, která nastavuje, jaká část prvku má být zobrazena. Části, které jsou uvnitř oblasti, jsou zobrazeny, zatímco ty vnější jsou skryté. Vlastnost může nabývat hodnot: clip-source – url adresa basic-shape – základní funkce tvaru, jak je definována v modulu CSS Shapes verze 1.1.2  geometry-box – margin-box, border-box, padding-box, content-boxfill-box, stroke-box, view- box none – nevytváří se ořezová cesta Zdroj: https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#the-clip-path Maskování Efekt aplikace masky na grafický objekt je takový, jako by byl grafický objekt namalován na pozadí přes masku, čímž se zcela nebo částečně zamaskují části grafického objektu. Zdroj: https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#masking Vlastnost mask Vlastnost mask je zkráceným zápisem vlastností mask-clip, mask-composite, mask-image, mask- mode, mask-origin, mask-position, mask-repeat, mask-size. Vlastnostmi mask-* lze prvek částečně nebo úplně skrýt prostřednictvím aplikace masky. verze 1.1.2