Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Grafika

Sposób wyświetlania elementów

Email Drukuj PDF

Tematy: kadrowanie | kursory | sposób wyświetlania elementów | wypływanie zawartości | widzialność elementów

Dane w pigułce
Zastosowanie zmiana sposobu wyświetlania elementu
Dziedziczenie nie
Wartości none, block, inline, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
Wartość domyślna block
Przykład display:inline
Uwagi
Odpowiednik w HTML brak

Aby zdefiniować sposób wyświetlania elementu, należy wpisać w definicji stylu display: wartość.

Polecenie display reguluje sposób wyświetlania elementów, tworząc z nich, na żądanie autora strony, elementy blokowe, liniowe czy punkty wykazu, a więc modyfikując ich naturalne własności - przykładowo, akapit jako element z natury blokowy może zostać zmieniony na element liniowy, a grafika, jako element z natury liniowy, na element blokowy.

Lista wartości, jak widać w tabeli, jest bardzo obszerna, ale interpretacja w przeglądarkach jest na razie ograniczona do najważniejszych poleceń.

Kilka praktycznych przykładów:

Dwa akapity mogą być ustawione w jednym wierszu, gdy obu nadamy wartość inline. Normalnie nie jest możliwe, gdyż akapit jest blokiem rezerwującym dla siebie odrębny pojemnik.

<p style="display:inline"><strong>Akapit pierwszy </strong></p>
<p style="display:inline"><em>Akapit drugi</em></p>

Akapit pierwszy

Akapit drugi

Podobnie, w jednym rzędzie możemy ustawić dwie tabele, dodając w nich parametr display:inline (Firefox, Chrome i Opera realizują to z błędami).

111 222
333 444

 

111 222
333 444

Element nie będący z natury blokiem, jak obrazek, możemy oznaczyć jako blok, wskutek czego nie będzie sąsiadował poziomo z innym elementem.

Przykład dwóch obrazków bez podania display:block

PCQ Gambler

Przykład oznaczenia obrazka jako bloku.

<img src="pcq.gif" width="80" height="114" alt="" style="display:block">

PCQ Gambler

Polecenie display:none powoduje niewyświetlanie elementu, chociaż w źródle dokumentu w dalszym ciągu istnieje.

Tutaj ma się pojawić obrazek, ale display:none usuwa go z ekranu i nie rezerwuje nawet dla niego pustego miejsca (por. z widzialnością elementów), choć element dalej widnieje w kodzie źródłowym strony.

<img src="pcq.gif" width="80" height="114" alt="" style="display:none">

Polecenie display:list-item powoduje oznaczenie elementu punktorem, jak gdyby był częścią wykazu (listy) nienumerowanego.

<p style="display:list-item">tekst akapitu</p>

Akapit jako punkt wykazu.

Polecenie display:run-in powoduje, że element określony jako run-in jest wyświetlany jako element liniowy, jeśli następujący po nim obiekt jest blokiem (jak np. akapit). W przeciwnym razie staje się obiektem blokowym. Dzięki temu można np. wyświetlić w wierszu śródtytuł, a zaraz obok niego, w tym samym wierszu, akapit (a pamiętajmy, że oba elementy są z natury blokowe). Polecenie interpretują Opera, IE8 i Chrome.

<h3 style="display:run-in">Tekst śródtytułu stopnia 3. </h3>
<p>Zawartość akapitu wiążącego się z tym śródtytułem.</p>

I efekt:

Tekst śródtytułu stopnia 3.

Zawartość akapitu wiążącego się z tym śródtytułem. Zawartość akapitu wiążącego się z tym śródtytułem. Zawartość akapitu wiążącego się z tym śródtytułem. Zawartość akapitu wiążącego się z tym śródtytułem.

Polecenie display:inline-block powoduje, że element jest wyświetlany jako liniowy, choć sam ma w środku charakter elementu blokowego (można mu nadać np. odstęp i obramowanie), np. w środku bloku div można wyświetlić śródtytuł otoczony w tym samym wierszu, z lewej i prawej strony tekstem. Polecenie interpretują wszystkie przeglądarki.

<div>To jest jakaś tam treść w bloku. <h1 style="display:inline-block; border: dotted 1px; padding:10px; ">Tekst śródtytułu stopnia 1. </h1>, a to jest dalszy ciąg treści w bloku.</div>

I efekt:

Zawartość akapitu przed śródtytułem.

Tekst śródtytułu stopnia 1

i ciąg dalszy treści w bloku.

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15226309