Style CSS display
Styl definiuje sposób wyświetlania/interpretowania elementu.
block - tworzy element blokowy, wartość domyślna
inline - tworzy element liniowy
inline-block - tworzy element liniowy z wnętrzem blokowym
list-item - tworzy listę
none - ukrywa element
compact - tworzy zagęszczony akapit bez odstępów
run-in - tworzy element liniowy, jeżeli następny jest element blokowy
marker - tworzy marker
table-header-group - tworzy nagłówek tabeli
table-footer-group - tworzy stopkę tabeli
table - tworzy tabelę
inline-table - tworzy tabelę
table-caption - tworzy podpis tabeli
table-cell - tworzy komórkę tabeli
table-row - tworzy rząd tabeli
table-row-group - tworzy grupę rzędów tabeli
table-column - tworzy kolumnę tabeli
table-column-group - tworzy grupę kolumn tabeli
inherit - przejęcie wartości "rodzica", np. display: inherit;
Przykłady jak zastosować
<p style="display: inline;"> akapity przekształcone są w zwykłe</p>
<p style="display: inline;"> elementy liniowe, co spowodowało </p>
<p style="display: inline;"> wyświetlenie tekstu w jednej linii</p>
akapity przekształcone są w zwykłe
elementy liniowe, co spowodowało
wyświetlenie tekstu w jednej linii
dla odmiany elementy u (podkreślenia) zostały
<u style="display: block;"> zamienione na elementy blokowe
<u style="display: block;"> i teraz przypominają w działaniu
<u style="display: block;"> elementy br (przejście do nowej linii)
dla odmiany elementy u (podkreślenia) zostały zamienione na elementy blokowe i teraz przypominają w działaniu elementy br (przejście do nowej linii)
a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę:
<b style="display: list-item;"> pierwsza pozycja
<b style="display: list-item;"> druga pozycja
<b style="display: list-item;"> trzecia pozycja
a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę: pierwsza pozycja druga pozycja trzecia pozycja
tutaj powinien być napis, ale został ukryty:
<span style="display: none;">napis</span>
tutaj powinien być napis, ale został ukryty: napis
Pierwsza linia tekstu
<u style="display: compact;">kolejna, wydzielona linia, która teraz
jest akapitem, pozbawionym odstępów na dole i powyżej
Ostatnia linijka tekstu
Pierwsza linia tekstu kolejna, wydzielona linia, która teraz jest akapitem, pozbawionym odstępów na dole i powyżej Ostatnia linijka tekstu
<p>To jest pierwszy akapit.</p>
<p style="display: run-in;">To jest drugi akapit jako "run-in",
czyli liniowy.</p>
<p>To jest trzeci akapit.</p>
To jest pierwszy akapit.
To jest drugi akapit jako "run-in", czyli liniowy.
To jest trzeci akapit.
<style type="text/css"><!--
.ukryty { display: none; }
--></style>