Styl CSS: display











Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier •
ostatnia aktualizacja kursu: 2003.06.01


[Start] •
[Elementy HTML] •
[Atrybuty HTML] •
[Style CSS] •
[Porady online]

[A]
[B]
[C]
[D]
[E]
[F]
[H]
[I]
[K]
[L]
[M]
[N]
[O]
[P]
[Q]
[R]
[S]
[T]
[U]
[V]
[W]
[Z]

[kolory] •
[tekst] •
[czcionki] •
[rozmiary] •
[pozycje] •
[tabele] •
[listy] •
[formularze]

[struktura] •
[linki] •
[multimedia] •
[bloki] •
[obramowania] •
[tła] •
[synteza] •
[druk]

display

Styl definiuje sposób wyświetlania/interpretowania elementu.

Wartości:

• block (wartość domyślna) - CSS1 / IE5, N4, O3.5
tworzy element blokowy
• inline - CSS1 / IE5, N6, O3.5
tworzy element liniowy
• list-item - CSS1 / IE6, N4, O4
tworzy listę
• none - CSS1 / IE4, N4, O3.5
ukrywa element
• compact - CSS2 / O4
tworzy zagęszczony akapit bez odstępów
• run-in - CSS2 / O4
tworzy element liniowy, jeżeli następny jest element blokowy
• marker - CSS2 / O4
tworzy marker
• table-header-group - CSS2 / IE5, N6, O4
tworzy nagłówek tabeli
• table-footer-group - CSS2 / IE5, N6, O4
tworzy stopkę tabeli
• table - CSS2 / N6, O4
tworzy tabelę
• inline-table - CSS2 / O4
tworzy tabelę
• table-caption - CSS2 / N6, O4
tworzy podpis tabeli
• table-cell - CSS2 / N6, O4
tworzy komórkę tabeli
• table-row - CSS2 / N6, O4
tworzy rząd tabeli
• table-row-group - CSS2 / N6, O4
tworzy grupę rzędów tabeli
• table-column - CSS2 / N6, O4
tworzy kolumnę tabeli
• table-column-group - CSS2 / N6, O4
tworzy grupę kolumn tabeli
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. display:inherit;

Pozostałe cechy:

• CSS/przeglądarki: CSS1 / IE4, N4, O3.5

Przykładowe zastosowania:

• Przykład 1:

<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

• Przykład 2:

dla odmiany elementy u (podkreślenia) zostały
<u style="display:block;"> zamienione na elementy blokowe </u>
<u style="display:block;"> i teraz przypominają w działaniu </u>
<u style="display:block;"> elementy br (przejście do nowej linii)</u>

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)

• Przykład 3:

a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę:
<b style="display:list-item;"> pierwsza pozycja </b>
<b style="display:list-item;"> druga pozycja </b>
<b style="display:list-item;"> trzecia pozycja </b>

a gdyby tak z elementów b (pogrubienie) zrobić listę? proszę:
pierwsza pozycja
druga pozycja
trzecia pozycja

• Przykład 4:

tutaj powinien być napis, ale został ukryty:
<span style="display:none;">napis</span>


tutaj powinien być napis, ale został ukryty:
napis



• Przykład 5:

Pierwsza linia tekstu
<u style="display:compact;">kolejna, wydzielona linia, która teraz
jest akapitem, pozbawionym odstępów na dole i powyżej</u>
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

• Przykład 6:

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


• Przykład 7:

<style type="text/css"><!--
.ukryty {display:none;}
--></style>


 • • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!