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:
