Manipulacja właściwością "display"
- Data publikacji
- Ostatnio edytowano
W poprzedniej części kursu CSS poznaliśmy dwie wartości właściwości display, były to wartości inline oraz block, dzięki czemu znamy różnicę pomiędzy elementem HTML, który jest pokazywany w oknie naszej przeglądarki internetowej jako element wyświetlony w bloku (display:block;) oraz elementem HTML, który jest pokazywany w oknie naszej przeglądarki internetowej jako element wyświetlony w linii (display:inline;).
Każdy element HTML domyślnie posiada w sobie jakąś wartość właściwości display (podobnie jak wartość domyślną każdej innej właściwości CSS). Najczęściej tą wartością domyślną właściwości display jest wartość inline lub block, jednak nie są to wszystkie wartości, jakie występują w języku CSS wraz z właściwością display, dlatego w tej części kursu CSS przyjrzymy się pozostałym wartościom właściwości display.
Właściwość display należy rozumieć jako właściwość, dzięki której możemy manipulować interpretacją danego elementu HTML przez przeglądarkę internetową, dlatego zmieniając domyślną wartość właściwości display danego elementu HTML sami możemy określić czy dany element HTML ma być interpretowany, czyli "rozumiany" przez przeglądarkę internetową, np. jako element inline, element block lub inny typ elementu HTML.
W jednej z początkowych części tego kursu CSS powiedziałem, że elementy HTML, które umieścimy w części body dokumentu HTML, tworzą wygląd danej strony internetowej. Poprzednie twierdzenie jest oczywiście prawdą, lecz co się dzieje z częścią head dokumentu HTML? Co się dzieje z elementem head i pozostałymi elementami HTML, które znajdują się w elemencie head? Dlaczego ich nie widzimy?
Odpowiedź na powyższe pytania jest bardzo prosta. Element head oraz wszystkie elementy HTML, jakie znajdą się we wspomnianym elemencie head, są dla nas niewidoczne, ponieważ domyślnie posiadają one właściwość display wraz z wartością none.
Poniżej został zaprezentowany przykładowy dokument HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:50%;
margin:15px auto;
padding:15px;
border:3px solid green;
background-color:gold;
text-align:center;
}
</style>
</head>
<body>
<div>to jest przykładowy element - div</div>
<div>to jest kolejny przykładowy element - div</div>
</body>
</html>Gdy wyświetlimy nasz przykładowy dokument HTML w oknie przeglądarki internetowej zobaczymy następujący rezultat:
W naszej przeglądarce internetowej ukazały się dwa elementy div, które znajdują się w elemencie body. Czy są to jedyne elementy HTML, które zostały wyświetlone?
Odpowiedź na to pytanie brzmi: nie!
W oknie naszej przeglądarki internetowej ukazały się tak naprawdę wszystkie elementy HTML, jakie zostały umieszczone w elemencie html, włączając w to również sam element html.
Elementy html, head, body nie są dla nas dostrzegalne gołym okiem, ponieważ element html oraz element body nie posiadają w sobie żadnej domyślnej właściwości CSS, jaka zaznaczyłaby nam ich granice. Natomiast element head oraz wszystkie elementy HTML, jakie zostały w nim umieszczone, nie są pokazywane w oknie naszej przeglądarki internetowej, ponieważ wspomniane elementy HTML posiadają w sobie domyślną wartość właściwości display, która jest równa none.
Czas sprawić, aby elementy html, head, body stały się dla nas dostrzegalne. Na początek zajmiemy się elementami html oraz body. Dodamy do nich marginesy zewnętrzne oraz różny kolor obramowania.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
margin:15px;
border:3px dashed blue;
}
body {
margin:15px;
border:3px dashed black;
}
div {
width:50%;
margin:15px auto;
padding:15px;
border:3px solid green;
background-color:gold;
text-align:center;
}
</style>
</head>
<body>
<div>to jest przykładowy element - div</div>
<div>to jest kolejny przykładowy element - div</div>
</body>
</html>Rezultat:
W tym momencie możemy dostrzec granice elementów html oraz body. W jaki sposób sprawić, aby element head stał się dla nas widoczny?
Spróbujmy dodać do niego czerwone obramowanie oraz marginesy zewnętrzne.
head {
margin:15px;
border:3px dashed red;
}Rezultat:
Niestety nie widzimy żadnych zmian. Wciąż nie widzimy elementu head. Czas zmienić jego domyślną wartość właściwości display z wartości none na wartość block.
head {
display:block;
margin:15px;
border:3px dashed red;
}Rezultat:
W tym momencie element head stał się dla nas widoczny, ponieważ nie posiada on w sobie właściwość display:none; lecz posiada właściwość display:block;. Widzimy tylko jego czerwone obramowanie, które utworzyliśmy dla niego wcześniej.
Wszystkie elementy HTML umieszczone w elemencie head z reguły posiadają w sobie właściwość display:none; dlatego nie są one dla nas widoczne, nawet gdy sprawimy, aby element head stał się dla nas widoczny. Elementem, który ma w sobie jakąś zawartość, w części head, w naszym przykładzie, jest element title oraz style. Spróbujmy zmienić domyślną wartość none właściwości display elementu title.
title {
display:block;
margin:15px;
padding:15px;
border:3px dashed gold;
text-align:center;
}Rezultat:
Od tej pory widzimy zarówno element html oraz element body, jak również element head oraz element title. Oczywiście sam element head nie został stworzony po to, aby tworzył on jakąś istotną wizualną część naszej strony internetowej, która byłaby przeznaczona dla użytkownika, który odwiedzi naszą stronę internetową, dlatego domyślnie posiada on w sobie właściwość display wraz z wartością none. Natomiast warto wiedzieć, że niektóre elementy HTML domyślnie posiadają w sobie właściwość display wraz z wartością none. Właściwość display wraz z wartością none oraz block wykorzystuje się do budowania rozwijanego menu, lecz tym zagadnieniem zajmiemy się dopiero w dziale czwartym.
Czas zająć się nieco inną wartością właściwości display, a mianowicie wartością list-item. W języku HTML istnieje element HTML, który domyślnie posiada w sobie właściwość display wraz z wartością list-item. Tym elementem jest elementem li. Element li tworzy wyróżnik listy HTML, listy ul lub ol, tzn. do elementu HTML, który jest interpretowany przez przeglądarkę internetową jako element list-item, domyślnie jest dodawany wyróżnik listy, graficzny, alfanumeryczny itp.
Przykładową listę HTML możemy utworzyć w następujący sposób:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
ul > li {
margin:15px;
padding:15px;
background-color:tomato;
}
</style>
</head>
<body>
<ul>
<li>pierwszy wyróżnik</li>
<li>drugi wyróżnik</li>
<li>trzeci wyróżnik</li>
</ul>
</body>
</html>Rezultat:
- pierwszy wyróżnik
- drugi wyróżnik
- trzeci wyróżnik
A co w wypadku gdybyśmy chcieli z jakiś powodów, aby inne elementy HTML były interpretowane przez przeglądarkę internetową jako elementy listy? Oczywiście taka sytuacja nie powinna mieć z reguły miejsca, bo do tego celu zostały stworzone elementy ul, ol, li, lecz gdyby jednak taka sytuacja zdarzyła się?
W takiej sytuacji możemy wykorzystać, do wspomnianego celu, właściwość display wraz z wartością list-item, która sprawi, że dany element HTML będzie interpretowany przez przeglądarkę internetową jako element listy HTML.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div > p {
display:list-item;
margin:15px;
padding:15px;
background-color:tomato;
}
</style>
</head>
<body>
<div>
<p>pierwszy wyróżnik</p>
<p>drugi wyróżnik</p>
<p>trzeci wyróżnik</p>
</div>
</body>
</html>Rezultat:
pierwszy wyróżnik
drugi wyróżnik
trzeci wyróżnik
Ponadto właściwość display posiada wartości, które należą do grupy table. Jak łatwo można się domyślić, służą one do określenia tabeli HTML oraz jej elementów.
Najprostszą tabelę HTML możemy utworzyć w następujący sposób:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
table > tr > td {
background-color:gold;
}
</style>
</head>
<body>
<table>
<tr>
<td>komórka - 1</td>
<td>komórka - 2</td>
<td>komórka - 3</td>
</tr>
<tr>
<td>komórka - 4</td>
<td>komórka - 5</td>
<td>komórka - 6</td>
</tr>
<tr>
<td>komórka - 7</td>
<td>komórka - 8</td>
<td>komórka - 9</td>
</tr>
</table>
</body>
</html>Rezultat:
| komórka - 1 | komórka - 2 | komórka - 3 |
| komórka - 4 | komórka - 5 | komórka - 6 |
| komórka - 7 | komórka - 8 | komórka - 9 |
Gdybyśmy chcieli w formie ćwiczenia zbudować tabelę HTML z innych elementów HTML, to moglibyśmy wykorzystać do tego celu właściwość display oraz jej wartości, które należą do grupy table.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
display:table;
}
div > p {
display:table-row;
}
div > p > span {
display:table-cell;
background-color:gold;
}
</style>
</head>
<body>
<div>
<p>
<span>komórka - 1</span>
<span>komórka - 2</span>
<span>komórka - 3</span>
</p>
<p>
<span>komórka - 4</span>
<span>komórka - 5</span>
<span>komórka - 6</span>
</p>
<p>
<span>komórka - 7</span>
<span>komórka - 8</span>
<span>komórka - 9</span>
</p>
</div>
</body>
</html>Rezultat:
komórka - 1 komórka - 2 komórka - 3
komórka - 4 komórka - 5 komórka - 6
komórka - 7 komórka - 8 komórka - 9
Przykłady zaprezentowane w tej części kursu CSS miały na celu pomóc nam w zrozumieniu właściwości display oraz jej różnych wartości. Przykłady dotyczące widocznego elementu head, tworzenia listy HTML oraz tabeli HTML za pomocą innych elementów HTML, należy traktować jako ciekawostkę.
Najbardziej przydatnymi wartościami właściwości display, które będziemy często wykorzystywać do manipulowania sposobem wyświetlania elementów HTML w oknie naszej przeglądarki internetowej będą wartości: inline, block, none oraz inline-block.
Wartość inline-block łączy w sobie cechy zarówno wartości inline, jak i wartości block, dzięki czemu możemy wyświetlić kilka elementów HTML obok siebie, lecz zanim poznamy wartość inline-block, dobrze będzie, jeżeli zapoznamy się z najczęstszym sposobem, za pomocą którego możemy wyświetlić kilka elementów HTML obok siebie. Temat ten rozpocznie tzw. unoszący się element HTML, który poznamy w następnej części tego kursu CSS.