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