HOME    SKRIPTY
4. díl seriálu o CSS - Blokové vlastnosti
Alpin | 31. května 2007

Letter-spacing
Tato textová vlastnost ovlivňuje mezery mezi písmeny. Jako její hodnotu můžete udávat pouze číslo se standardní délkovou jednotkou CSS.

        letter-spacing: 10px;

Word-spacing
Téměř stejná vlastnost jako letter-spacing. Určuje mezery mezi slovy.

        word-spacing: 12px;

Text-align
Zarovnání obsahu elementu je velice používaná vlastnost. Můžeme pomocí něj určit, na jaké straně bude obsah umístěn. (touto vlastností jde zarovnávat pouze obsah elementu, na který je aplikována, ne element samotný, proto třeba nemůžete zarovnat tabulku, pokud vlastnost použijete přímo na ní. Většinou se to řeší „zabalením" tabulky do jednoho tagu <span>, a požitím vlastnosti na ten tag.
Hodnoty vlastnosti text-align jsou:

        Left - zarovnání vlevo, nejčastější případ
        Right - zarovnání doprava
        Center - zarovnání na střed
        Justify - zarovnání do bloku (text se snaží vyplnit celý prostor a roztahují se mezery mezi slovy)

        text-align: center;

Text-indent
Vlastnost Text-indent nám zprostředkovává nastavení odsazení prvního řádku textu v odstavci od levého okraje stránky. Spolehlivě vlastnost funguje jenom na tagu <p>, na některých jiných tagach se ani neprojeví. Vzdálenost se opět udává ve standardních délkových jednotkách CSS.

        text-indent: 50pt;


Vertical-align
Tato vlastnost nám udává vertikální zarovnání textu na řádce. Její hodnotu můžeme udávat v procentech, nebo klíčovými slovy.

        Baseline
        Sub
        Super
        Top
        Text-top
        Middle
        Bottom
        Text-bottom

        vertical-align: 50%;

White-space
Slouží pro ovlivnění zobrazení bílých znaků (white-spaces; mezery, tabulátory a konce řádků) a zalamování dlouhých řádků.
Jako hodnota této vlastnosti můžeme použít tri klíčová slova:

        Normal - bílé znaky se zobrazí tak, jak jsme zvyklí z normálního HTML. (pokud uděláme víc mezer, zobrazí se jenom jedna, u tabulátorů to samé, konce řádků se nezobrazují vůbec)
        Nowrap - dlouhé řádky se nebudou zalamovat automaticky a uživatel tak bude muset po vaší stránce horizontálně scrollovat, což je celkem nepříjemné)
        Pre - text se zobrazí přesně tak, jak byl napsaný ve zdrojovém kódu i s bílými znaky.

        white-space: nowrap;


Display
Vlastnost display se v CSS používá velmi často. Určuje různé způsoby zobrazování elementů na stránce. Typy zobrazení se udávají pomocí klíčových slov.
Klíčových slov pro vlastnost je hodně, ale zatím vám představím jen ty nejpoužívanější a nejužitečnější:

        None - slouží pro skrytí objektu - objekt se na zobrazení stránky vůbec neprojeví (pokud je tímto způsobem skrytý obrázek, některé prohlížeče ho ze serveru vůbec nestahují)
        Block - slouží pro překonvertování řádkových objektů do blokových
        Inline - slouží pro překonvertování blokových objektů do řádkových

        display: inline;