CSS Layout – vlastnost zobrazení
Vlastnost display
je nejdůležitější vlastností CSS pro ovládání rozvržení.
Vlastnost zobrazení
Vlastnost display
určuje, zda/jak je prvek zobrazen.
Každý prvek HTML má výchozí hodnotu zobrazení podle toho, o jaký typ prvku se jedná. Výchozí hodnota zobrazení pro většinu prvků je block
nebo
inline
.
Kliknutím zobrazíte panel
This panel contains a <div> element, which is hidden by default (display: none
).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block
).
Prvky na úrovni bloku
Prvek na úrovni bloku vždy začíná na novém řádku a zabírá celou dostupnou šířku (roztahuje se doleva a doprava, jak jen to jde).
Příklady prvků na úrovni bloku:
- <div>
- <h1> - <h6>
- <p>
- <formulář>
- <záhlaví>
- <zápatí>
- <sekce>
Vložené prvky
Vložený prvek nezačíná na novém řádku a zabírá pouze nezbytnou šířku.
Toto je vložený prvek <span> uvnitř odstavce.
Příklady vložených prvků:
- <span>
- <a>
- <img>
Displej: žádný;
display: none;
se běžně používá s JavaScriptem ke skrytí a zobrazení prvků bez jejich mazání a opětovného vytváření. Chcete-li vědět, jak toho lze dosáhnout, podívejte se na náš poslední příklad na této stránce.
Prvek se <script>
používá display: none;
jako výchozí.
Přepsat výchozí zobrazovanou hodnotu
Jak již bylo zmíněno, každý prvek má výchozí zobrazovanou hodnotu. Můžete to však přepsat.
Změna vloženého prvku na blokový prvek nebo naopak může být užitečná pro to, aby stránka vypadala specificky a stále dodržovala webové standardy.
Běžným příkladem je vytváření vložených <li>
prvků pro horizontální nabídky:
Příklad
li {
display: inline;
}
Poznámka: Nastavení vlastnosti zobrazení prvku změní pouze způsob zobrazení prvku , NIKOLI druh prvku. Takže vložený prvek s display: block;
nesmí mít v sobě další prvky bloku.
Následující příklad zobrazuje prvky <span> jako prvky bloku:
Příklad
span {
display: block;
}
Následující příklad zobrazuje prvky <a> jako prvky bloku:
Příklad
a {
display: block;
}
Skrýt prvek – zobrazení:žádné nebo viditelnost:skryté?
display:none
visibility:hidden
Resetovat
Skrytí prvku lze provést nastavením display
vlastnosti na
none
. Prvek bude skrytý a stránka se zobrazí, jako by tam prvek nebyl:
Příklad
h1.hidden {
display: none;
}
visibility:hidden;
také skrývá prvek.
Prvek však bude stále zabírat stejný prostor jako doposud. Prvek bude skrytý, ale stále ovlivní rozvržení:
Příklad
h1.hidden {
visibility: hidden;
}
Další příklady
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
Property | Description |
---|---|
display | Specifies how an element should be displayed |
visibility | Specifies whether or not an element should be visible |