Wyświetlanie

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

• Wyświetlanie (display)
• Spacje (whitespace)
• Typ stylu wykazu (list style type)
• Obrazek jako wyróżnik wykazu (list style image)
• Zawijanie punktów wykazu (list style position)
• Mieszane atrybuty wykazu (list style)

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 <p style="display: inline">dalsze wyrazy w zdaniu.</p>

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

Spacje

Polecenie white-space określa, w jaki sposób mają być wyświetlane spacje w tekście.

white-space: normal powoduje zamianę wielu sąsiadujących spacji na jedną.
white-space: pre powoduje wyświetlenie wszstkich sąsiadujących spacji.
white-space: nowrap nie pozwala na przełamanie wiersza, do momentu napotkania polecenia <br>.

Przykłady (tylko NC4):

<p style="white-space: normal">Tutaj jest     pięć spacji</p>

Tutaj jest pięć spacji.

<p style="white-space: pre">Tutaj jest     pięć spacji</p>

Tutaj jest pięć spacji.

nowrap nie jest realizowane

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