Kaskadowe arkusze stylów CSS: sposób wyświetlania elementów









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







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki






Sposób wyświetlania 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 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





Przykład oznaczenia obrazka jako bloku.

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





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 interpretuje Opera.


<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 interpretuje Opera.


<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