Wy¶wietlanie 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 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æ. 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 - tylko IE4 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