Wyświetlanie
Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
Wyświetlanie
Elementy dokumenty mogą być wyświetlane na kilka sposobów w stosunku do innych elementów. Stosujemy tutaj polecenie display: wartość.
Wartości są następujące:
display: block powoduje wstawienie przełamania wiersza przed i po elemencie.
display: inline powoduje wyświetlanie elementów w jednym wierszu, nawet jeśli element z definicji ma postać bloku.
display: list-item powoduje wyświetlenie elementu jako punktu wykazu.
display: none powoduje usunięcie elementu z ekranu.
Przykłady:
Pierwsze wyrazy w zdaniu <span style="display: block">dalsze wyrazy w zdaniu.</span>
Pierwsze wyrazy w zdaniu dalsze wyrazy w zdaniu.
Pierwsze wyrazy w zdaniu <p style="display: inline">dalsze wyrazy w zdaniu.</p>
Pierwsze wyrazy w zdaniu dalsze wyrazy w zdaniu.
<p style="display: list-item">Element jako punkt wykazu (odsunięty w prawo)</p>.
Element jako punkt wykazu (odsunięty w prawo)
<p style="display: none">Element, którego nie widać</p>.
Element, którego nie widać.
Typ stylu wykazu
Punkty wykazy mogą być wyróżniane na kilka sposobów:
<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: circle
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: square
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: decimal
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: lower-roman
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: upper-roman
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: lower-alpha
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: upper-alpha
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: none
- pierwszy punkt
- drugi punkt
- trzeci punkt
Obrazek jako wyróżnik wykazu
Możliwe jest zastosowanie grafiki jako wyróżnika pozycji wykazu. Na przykład (tylko IE4):
<ul style="list-style-image: url(greendot.gif)">
- pierwszy punkt
- drugi punkt
- trzeci punkt
Zawijanie punktów wykazu
Style pozwalają określić, czy punkty wykazu dłuższe niż jeden wiersz na ekranie będą zawijane z wcięciem do pozycji pierwszego wiersza (outside), czy też bez wcięcia, a więc do pozycji wyróżnika (markera) punktu (inside). Polecenie realizuje tylko IE4.
<ul style="list-style-position: wartość">
list-style-position: inside
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
list-style-position: outside
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
Mieszane atrybuty wykazu
Podobnie jak w przypadku wielu innych elementów, możemy się posługiwać mieszanymi definicjami wykazu. Zamiast kolejno wyliczać poszczególne własności, możemy podać polecenie list-style, za którym znajdą się od razu wartości. Na przykład:
Zamiast
list-style-image: url(greendot.gif); list-style-type: circle; list-style-position: outside
Możemy użyć
list-style: url(greendot.gif) circle outside