Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Sposób wyświetlania obiektów

Za pomocą właściwości display możemy ustalić w jaki sposób dany element HTML ma być interpretowany przez przeglądarkę internetową. Na przykład dany element może być interpretowany przez przeglądarkę jako element wyświetlany w linii, czy też w bloku. Różne obiekty posiadają różne wartości domyślne tej właściwości - omówimy najczęściej stosowane.

Elementy blokowe - display:block

Element blokowy, jest traktowany jako prostokąt i domyślnie znajduje się sam w linii, co możemy zmienić to za pomocą position Uwzględnione zostają wymiary width i height.

Ćwiczenie 3_2_2_1

Zaprezentuj wyświetlanie block. Do wykonania zadania zastosuj następujący kod HTML:

<body>
  <div class="display_block" style="background-color:black;">
    To jest pierwszy tekst
  </div>
  <div class="display_block" style="background-color:red;">
    To jest drugi tekst
  </div>
</body>

Kod CSS w zewnętrznym arkuszu stylów:

.display_block, .display_inline, .display_inline_block
{
  width:100px;
  height:100px;
  color:white;
}
.display_block 
{
  display:block;
}
.display_inline
{
  display:inline;
}    
.display_inline_block
{
  display:inline-block;
}

Tak powinna wyglądać wykonana strona:

  • Każdy z obiektów zajął oddzielną linię.
  • Uwzględnione są wartości width oraz height
  • Można było pominąć display:block, ponieważ div posiada taką właśnie wartość domyślną.

Elementy liniowe - display:inline

Elementy liniowe zachowują się jak tekst i mogą być przenoszone do nowej linii. Wymiary width i height nie są uwzględniane.

Ćwiczenie 3_2_2_2

Zmodyfikuj poprzednie ćwiczenie tak, aby zaprezentować wyświetlanie inline. Do wykonania zadania zastosuj kod CSS z poprzedniego ćwiczenia oraz następujący kod HTML:

<body>
  <div class="display_inline" style="background-color:black;">
    To jest pierwszy tekst
  </div>
  <div class="display_inline" style="background-color:red;">
    To jest drugi tekst
  </div>
</body>

Tak powinna wyglądać wykonana strona:

  • Obiekty znajdują się w jednej linii, jeden za drugim - układają się dokładnie tak jak tekst w nich zawarty.
  • Wartości width oraz height nie są uwzględniane.

Elementy liniowo-blokowe - display:inline-block

Są umieszczane w linii tekstu tak, jak elementy liniowe ale inaczej jak liniowe posiadają nadane wymiary width i height.

Ćwiczenie 3_2_2_3

Zmodyfikuj poprzednie ćwiczenie tak, aby zaprezentować wyświetlanie inline. Do wykonania zadania zastosuj kod CSS z poprzedniego ćwiczenia oraz następujący kod HTML:

<body>
  <div class="display_inline_block" style="background-color:black;">
    To jest pierwszy tekst
  </div>
  <div class="display_inline_block" style="background-color:red;">
    To jest drugi tekst
  </div>
</body>

Tak powinna wyglądać wykonana strona:

  • Obiekty znajdują się w jednej linii, jeden za drugim - układają się tak jak wyrazy w zdaniu.
  • Wartości width oraz height są uwzględniane.

Elementy niewidoczne - display:none

Zastosowanie display:none czyni obiekt niewidocznym. Jest ono zbliżone do visibility:hidden. Różnica polega na tym, że pierwsze z nich całkowicie usuwa obiekt z ekranu, natomiast drugie tylko go ukrywa, natomiast w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce. Stosując display:none można osiągnąć ciekawe efekty, np. pokazany w poniższym ćwiczeniu.

Ćwiczenie 3_2_2_4

Zaprezentuj przykład wykorzystania display:none. Do wykonania zadania zastosuj następujący kod HTML:

<body>
    <div class="menu">
      menu
      <div class="submenu">
        submenu
      </div>
    </div>
</body>

Kod CSS w zewnętrznym arkuszu stylów:

.menu, .submenu
{
  display:block;
  position:absolute;
  width:100px;
  height:40px;
  left:20px;
  top:20px;
  line-height:40px;
  text-align:center;
  background-color:black;
  color:white;
}    
  .menu .submenu
  {
    display:none;
    left: 100px;
    top:0;
    background-color:red;
  }    
  .menu:hover > .submenu
  {
    display:block;
  }

Tak powinna wyglądać wykonana strona:

Spróbuj odpowiedzieć na pytanie: dlaczego submenu pojawia się z chwilą najechania wskaźnikeim myszki na menu?

Praca domowa

Wykonaj stronę prezentującą różne sposoby wyświetlania, stosując obiekty inne jak ćwiczeniach wykonywanych podczas zajęć.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.