☰ open

VSC + HTML + CSS

Jednotky v CSS

V CSS existuje několik jednotek pro měření velikostí, které lze rozdělit do dvou hlavních kategorií: absolutní a relativní jednotky.

Absolutní jednotky

Relativní jednotky

Při výběru jednotek je důležité zvážit kontext použití. Absolutní jednotky jsou vhodné pro tiskové styly, zatímco relativní jednotky jsou často preferovány pro webové stránky kvůli jejich flexibilitě a schopnosti přizpůsobit se různým zařízením a velikostem obrazovek.

Které jednotky použít v jakém kontextu?

Základní velikost písma v dokumentu: %

Výchozí velikost písma v prohlížečích je obvykle 16px. Nastavením velikosti písma na 100% v elementu <html> zajistíte, že základní velikost písma zůstane 16px, což usnadňuje použití relativních jednotek jako rem a em v celém dokumentu.

html {
    font-size: 100%; /* Základní velikost písma je 16px */
}   
body {
    font-size: 1rem; /* 1rem = 16px */
}

Rozměry vycházející z velikosti písma dokumentu: rem

Jednotka rem je relativní k velikosti písma kořenového elementu (<html>). Použití rem pro velikosti písma, okraje a výplně umožňuje snadné škálování celého designu změnou pouze velikosti písma v <html>.

html {
    font-size: 100%; /* Základní velikost písma je 16px */
}   
h1 {
    font-size: 2rem; /* 2rem = 32px */
}
p {
    margin-bottom: 1.5rem; /* 1.5rem = 24px */
}

Rozměry vycházející z velikosti písma rodiče: em

Jednotka em je relativní k velikosti písma rodičovského elementu. To je užitečné pro komponenty, které by měly být škálovatelné na základě svého kontextu.

.container {
    font-size: 16px; /* Základní velikost písma pro kontejner */
}       
.container h2 {
    font-size: 1.5em; /* 1.5em = 24px (1.5 * 16px) */
}
.container p {
    margin-top: 1em; /* 1em = 16px */
}

Media Queries: em

Použití em v media queries umožňuje, aby se breakpointy přizpůsobily velikosti písma uživatele, což zlepšuje přístupnost.

@media (min-width: 40em) {
    body {
        background-color: lightblue;
    }
}

Výška řádku: číslem bez jednotky

Nastavení výšky řádku pomocí čísla bez jednotky znamená, že výška řádku bude násobkem velikosti písma. To zajišťuje konzistentní vertikální rytmus bez ohledu na velikost písma.

p {
    line-height: 1.6; /* Výška řádku je 1.6 násobek velikosti písma */
}

Rámečky, dekorace: px

Pro přesné ovládání rámečků, stínů a dalších dekorativních prvků je vhodné použít pixely (px), protože poskytují pevnou velikost bez ohledu na kontext.

button {
    border: 2px solid black; /* Pevná velikost rámečku */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Pevná velikost stínu */
}

Typografie podle velikosti okna: vw

Použití jednotky vw pro velikost písma umožňuje, aby se text dynamicky přizpůsobil šířce okna prohlížeče, což je užitečné pro responzivní design.

h1 {
    font-size: 5vw; /* Velikost písma je 5% šířky viewportu */
}

HTML kousky

width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification

Jednotky v CSS

V CSS existuje několik jednotek pro měření velikostí, které lze rozdělit do dvou hlavních kategorií: absolutní a relativní jednotky.

Absolutní jednotky

Relativní jednotky

Při výběru jednotek je důležité zvážit kontext použití. Absolutní jednotky jsou vhodné pro tiskové styly, zatímco relativní jednotky jsou často preferovány pro webové stránky kvůli jejich flexibilitě a schopnosti přizpůsobit se různým zařízením a velikostem obrazovek.

Které jednotky použít v jakém kontextu?

Základní velikost písma v dokumentu: %

Výchozí velikost písma v prohlížečích je obvykle 16px. Nastavením velikosti písma na 100% v elementu <html> zajistíte, že základní velikost písma zůstane 16px, což usnadňuje použití relativních jednotek jako rem a em v celém dokumentu.

html {
    font-size: 100%; /* Základní velikost písma je 16px */
}   
body {
    font-size: 1rem; /* 1rem = 16px */
}

Rozměry vycházející z velikosti písma dokumentu: rem

Jednotka rem je relativní k velikosti písma kořenového elementu (<html>). Použití rem pro velikosti písma, okraje a výplně umožňuje snadné škálování celého designu změnou pouze velikosti písma v <html>.

html {
    font-size: 100%; /* Základní velikost písma je 16px */
}   
h1 {
    font-size: 2rem; /* 2rem = 32px */
}
p {
    margin-bottom: 1.5rem; /* 1.5rem = 24px */
}

Rozměry vycházející z velikosti písma rodiče: em

Jednotka em je relativní k velikosti písma rodičovského elementu. To je užitečné pro komponenty, které by měly být škálovatelné na základě svého kontextu.

.container {
    font-size: 16px; /* Základní velikost písma pro kontejner */
}       
.container h2 {
    font-size: 1.5em; /* 1.5em = 24px (1.5 * 16px) */
}
.container p {
    margin-top: 1em; /* 1em = 16px */
}

Media Queries: em

Použití em v media queries umožňuje, aby se breakpointy přizpůsobily velikosti písma uživatele, což zlepšuje přístupnost.

@media (min-width: 40em) {
    body {
        background-color: lightblue;
    }
}

Výška řádku: číslem bez jednotky

Nastavení výšky řádku pomocí čísla bez jednotky znamená, že výška řádku bude násobkem velikosti písma. To zajišťuje konzistentní vertikální rytmus bez ohledu na velikost písma.

p {
    line-height: 1.6; /* Výška řádku je 1.6 násobek velikosti písma */
}

Rámečky, dekorace: px

Pro přesné ovládání rámečků, stínů a dalších dekorativních prvků je vhodné použít pixely (px), protože poskytují pevnou velikost bez ohledu na kontext.

button {
    border: 2px solid black; /* Pevná velikost rámečku */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Pevná velikost stínu */
}

Typografie podle velikosti okna: vw

Použití jednotky vw pro velikost písma umožňuje, aby se text dynamicky přizpůsobil šířce okna prohlížeče, což je užitečné pro responzivní design.

h1 {
    font-size: 5vw; /* Velikost písma je 5% šířky viewportu */
}
Copyright PEON © 2001 - 2026,