Písmo v CSS
48 Questions
3 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Jaké jsou dva hlavní obory typografie?

  • Grafická úprava a font design
  • Digitální typografie a tisková typografie
  • Mikrotypografie a makrotypografie (correct)
  • Webová typografie a klasická typografie

    • Která vlastnost určuje prioritu rodiny písem?

  • font-weight
  • font-style
  • font-size
  • font-family (correct)

    • Jaký styl písma má čisté linie bez malých tahů?

  • Serif
  • Monospace
  • Sans-serif (correct)
  • Cursive

    • Jaký vzhled vytvářejí patková písma?

    <p>Formální a elegantní vzhled</p> Signup and view all the answers

    O jakou vlastnost se jedná, pokud se nastavuje tučnost písma?

    <p>font-weight</p> Signup and view all the answers

    Které z následujících písmen se nepovažuje za generickou rodinu písem?

    <p>Arial</p> Signup and view all the answers

    Jaký typ typografie se zaměřuje na umístění písma na stránce?

    <p>Makrotypografie</p> Signup and view all the answers

    Jaký je mechanický vzhled, který se vytváří pomocí monospace písem?

    <p>Stejná pevná šířka pro všechna písmena</p> Signup and view all the answers

    Jaký je účel vlastnosti border-spacing?

    <p>Určit horizontální i vertikální rozestupy mezi buňkami.</p> Signup and view all the answers

    Jaké hodnoty může nabývat vlastnost empty-cells?

    <p>show a hide</p> Signup and view all the answers

    Co určuje vlastnost width, pokud je box-sizing nastavena na border-box?

    <p>Šířku oblasti včetně okraje.</p> Signup and view all the answers

    Jaká výchozí hodnota se používá pro vlastnost height?

    <p>auto</p> Signup and view all the answers

    Co dělá vlastnost text-align s hodnotou justify?

    <p>Zarovná text rovnoměrně mezi levým a pravým okrajem.</p> Signup and view all the answers

    Jaká hodnota vlastnosti text-justify zajistí, že zarovnání textu bude vypnuto?

    <p>none</p> Signup and view all the answers

    Jaký vliv má vlastnost min-width na chování prvku?

    <p>Zabraňuje zmenšení pod stanovenou šířku.</p> Signup and view all the answers

    Jaké hodnoty mohou být přiřazeny vlastnosti height?

    <p>auto, délka, %, initial, inherit</p> Signup and view all the answers

    Jaký je efekt kladné hodnoty vlastnosti letter-spacing?

    <p>Způsobuje, že se znaky rozšiřují.</p> Signup and view all the answers

    Jaké hodnoty může nabývat vlastnost word-spacing?

    <p>normal a délka</p> Signup and view all the answers

    Jaká podmínka ovlivňuje hodnotu vlastnosti width?

    <p>Zda je box-sizing nastaven na border-box.</p> Signup and view all the answers

    Jaký význam má procentuální hodnota pro vlastnost width?

    <p>Určuje šířku na základě rodičovského bloku.</p> Signup and view all the answers

    Jaký je účel vlastnosti text-indent?

    <p>Nastavit délku prázdného prostoru před řádky textu.</p> Signup and view all the answers

    Jaká hodnota vlastnosti text-justify se snaží dosáhnout rovnováhy mezi výkonem a kvalitou?

    <p>auto</p> Signup and view all the answers

    Jaká je hodnota text-indent, když je nastavena na 20px?

    <p>Před textem bude 20 pixelů prázdného prostoru.</p> Signup and view all the answers

    Co znamená hodnota inter-word u vlastnosti text-justify?

    <p>Zarovnání přidáním mezery mezi slovy.</p> Signup and view all the answers

    Jaká je funkce vlastnosti font-size-adjust?

    <p>Upravuje velikost písma podle specifikované metriky.</p> Signup and view all the answers

    Které z následujících vlastností jsou součástí zkráceného zápisu vlastnosti font?

    <p>font-weight</p> Signup and view all the answers

    Jaký je primární účel vlastnosti font-variant-numeric?

    <p>Upravuje styl pro čísla a zlomky.</p> Signup and view all the answers

    Jaký typ písma je považován za webové písmo?

    <p>Písmo, které je načteno přes @font-face.</p> Signup and view all the answers

    Jaké jsou preferované formáty pro webová písma?

    <p>WOFF a WOFF2</p> Signup and view all the answers

    Co řídí vlastnost font-variant-ligatures?

    <p>Které ligatury a kontextové formy se používají.</p> Signup and view all the answers

    Jakým způsobem se vypočítává upravená velikost písma?

    <p>Pomocí vzorce s faktorem z různých metrik.</p> Signup and view all the answers

    Co se stane, když není uvedena metrika pro velikost písma?

    <p>Stejně se použije x-height jako metrika.</p> Signup and view all the answers

    Jakou vlastnost používáme k nastavení maximální šířky prvku?

    <p>max-width</p> Signup and view all the answers

    Která z následujících hodnot není platná pro vlastnost max-height?

    <p>min-width</p> Signup and view all the answers

    Co určuje vlastnost line-height?

    <p>výšku řádkového rámečku</p> Signup and view all the answers

    Jaká hodnota zabrání tomu, aby se šířka prvku zvětšila nad zadanou velikost v případě min-height?

    <p>min-content</p> Signup and view all the answers

    Která z následujících hodnot pro vlastnost max-width umožňuje využít veškerý dostupný prostor?

    <p>fit-content</p> Signup and view all the answers

    Jaká vlastnost nastavuje minimální výšku prvku?

    <p>min-height</p> Signup and view all the answers

    Jakou hodnotu může nabývat vlastnost max-width kromě délky a procenta?

    <p>fit-content</p> Signup and view all the answers

    Jaký je účel vlastnosti none v kontextu maximální šířky a výšky?

    <p>žádné omezení</p> Signup and view all the answers

    Jaké hodnoty může mít vlastnost outline-color?

    <p>barva a invert</p> Signup and view all the answers

    Jaký je účel vlastnosti outline-width?

    <p>Nastavit tloušťku obrysu</p> Signup and view all the answers

    Co se děje s obrysy u víceřádkového textu v závislosti na prohlížeči?

    <p>Obrys se může vykreslit pro každý řádek zvlášť</p> Signup and view all the answers

    Která z následujících hodnot není možnou hodnotou vlastnosti outline-style?

    <p>curved</p> Signup and view all the answers

    Jaké jsou možné hodnoty pro vlastnost outline-offset?

    <p>délka</p> Signup and view all the answers

    Proč se obrysy nevykreslují v rámci rámce ohraničení?

    <p>Aby obrysy nezabíraly místo v layoutu</p> Signup and view all the answers

    Jaký je význam nastavení vlastnosti resize?

    <p>Umožňuje uživateli měnit velikost prvku</p> Signup and view all the answers

    Jakým způsobem může být definována vlastnost outline?

    <p>Jako součet tloušťky, barvy a stylu</p> Signup and view all the answers

    Study Notes

    Písmo v CSS

    • Práce s písmem v CSS je popsána v modulu „CSS Fonts Module Level 3“.
    • Znak (character) – nejmenší složka psaného jazyka s sémantickou hodnotou. Není konkrétním vykreslením. Nejčastěji se používá standard Unicode s kódy pro znaky.
    • Glyf (glyph) – konkrétní vizuální reprezentace znaku. Může jeden znak reprezentovat více glyfů nebo jeden glyf vícero znaků (např. ligatury).
    • Font (písmo) – sada znaků jedné velikosti a stylu. Obsahuje glyfy mapované na znaky.
    • Rodina písma (font family) – skupina řezů jednoho typu písma. Řez je grafickou variantou (např. tučné, kurzíva). Některá písma mají pouze jeden řez. Rodina písma zajišťuje jednotný vzhled.
    • Řez písma (font-weight) – typ řezu, který slouží k zvýraznění textu. Může být kurziva, polotučný, tučný apod.
    • Grafém (grapheme) – nejmenší nedělitelná jednotka v pravopisu konkrétního jazyka. Často synonymum pro znak.
    • Kapitálky (capitals) – menší verzále (velká písmena).

    Vlastnosti CSS pro písma

    • font-family: Určuje prioritní seznam rodin písem. (např. Helvetica, Verdana, sans-serif).
    • font-weight: Nastavuje tučnost písma (od 100 - Thin do 900 - Black), např. bold, normal.
    • font-style: Určuje styl písma (normal, italic, oblique).
    • font-size: Nastavuje velikost písma. Lze použít jednotky jako px, em, %.
    • font-stretch: Nastavuje šířku písma (normal, condensed, expanded).
    • font-size-adjust: Umožňuje optimalizovat poměr mezi velkými a malými písmeny v textu.
    • font-variant: Řídí alternativní glyfy pro specifické symboly (normal, small-caps, lining-nums, oldstyle-nums).
    • letter-spacing: Nastavuje mezeru mezi písmeny.
    • word-spacing: Nastavuje mezery mezi slovy.
    • white-space: Spravuje, jak je bílý prostor v prvku interpretován (normal, pre-wrap, nowrap).
    • text-align: Nastavuje zarovnání textu (left, right, center, justify).
    • text-decoration: Dekorace textu (underline, overline, line-through).
    • text-transform: Nastavuje transformaci písmen (none, capitalize, uppercase, lowercase, full-width).
    • text-indent: Nastavuje odsazení prvního řádku.
    • table-layout: Nastavuje způsob rozložení buněk v tabulce (auto, fixed).
    • border-collapse: Určuje, zda se okraje buněk v tabulce sloučí (collapse, separate).
    • border-spacing: Nastavuje rozestup mezi okraji buněk v tabulce.
    • empty-cells: Nastavuje zobrazování prázdných buněk v tabulce (show, hide).

    Písmo

    • Fonty mohou být v různých formátech (např. WOFF, TTF, OTF).

    Uživatelské rozhraní

    • Vlastnost box-sizing: Definuje, jak se počítá celková šířka a výška prvku (content-box, border-box).
    • Vlastnost cursor: Nastavuje typ kurzoru pro prvek.

    Vizuální efekty

    • Přetečení – nastavení chování obsahu, který přetéká rámeček prvku (visible, hidden, clip, scroll).
    • Maskování – částečné nebo úplné skrytí obsahu pomocí masky (mask).
    • Ořezávání – definování oblasti pro zobrazení obsahu (clip-path).

    Tabulky CSS

    • Definují strukturu a styly tabulek.
    • table-layout: určuje způsob výpočtu šířky a výšky sloupců a řádků (auto, fixed).
    • border-collapse: sloučí okraje buněk v tabulce.
    • border-spacing: nastavení rozestupu me-zi okraji buněk.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    04_WWW_výukový text PDF

    Description

    V tomto kvízu se zaměříme na základní koncepty spojené s písmem v CSS podle modulů CSS Fonts Module Level 3. Prozkoumáme pojmy jako znak, glyf, font a rodina písma, které jsou klíčové pro efektivní práci s textem na webových stránkách.

    More Like This

    HTML and CSS Fonts Quiz
    5 questions

    HTML and CSS Fonts Quiz

    DesirableSatire avatar
    DesirableSatire
    CSS Font Family Property Guide
    12 questions

    CSS Font Family Property Guide

    CoolestHedgehog avatar
    CoolestHedgehog
    Písmo v CSS: Základní termíny
    47 questions

    Písmo v CSS: Základní termíny

    MarvelousQuartz4654 avatar
    MarvelousQuartz4654
    CSS Fonts Module Level 3
    48 questions

    CSS Fonts Module Level 3

    MarvelousQuartz4654 avatar
    MarvelousQuartz4654
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser