CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS Layout – vlastnost zobrazení


Vlastnost displayje nejdůležitější vlastností CSS pro ovládání rozvržení.


Vlastnost zobrazení

Vlastnost displayurč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 blocknebo 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).

Prvek <div> je prvek na úrovni bloku.

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

Itálie

visibility:hidden

Les

Resetovat

Světla

Skrytí prvku lze provést nastavením displayvlastnosti 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.


Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible