CSS - listy

Listy są bardzo pomocne w przekazywaniu zestawu punktów numerowanych lub wypunktowanych. W tym rozdziale dowiesz się, jak kontrolować typ, pozycję, styl itp. Listy za pomocą CSS.

Mamy pięć następujących właściwości CSS, których można używać do kontrolowania list -

  • Plik list-style-type pozwala kontrolować kształt lub wygląd markera.

  • Plik list-style-position określa, czy długi punkt przechodzący w drugą linię powinien być wyrównany z pierwszą linią, czy zaczynać się poniżej początku znacznika.

  • Plik list-style-image określa obraz dla znacznika, a nie punktor lub numer.

  • Plik list-style służy jako skrót dla poprzednich właściwości.

  • Plik marker-offset określa odległość między znacznikiem a tekstem na liście.

Teraz zobaczymy, jak używać tych właściwości z przykładami.

Właściwość typu stylu listy

Właściwość list-style-type umożliwia kontrolowanie kształtu lub stylu punktora (zwanego również znacznikiem) w przypadku list nieuporządkowanych oraz stylu znaków numeracji na listach uporządkowanych.

Oto wartości, których można użyć w przypadku listy nieuporządkowanej -

Sr.No. Wartość i opis
1

none

NA

2

disc (default)

Wypełnione kółko

3

circle

Puste koło

4

square

Wypełniony kwadrat

Oto wartości, których można użyć dla uporządkowanej listy -

Wartość Opis Przykład
dziesiętny Numer 1,2,3,4,5
dziesiętne wiodące zero 0 przed liczbą 01, 02, 03, 04, 05
niższa alfa Małe litery alfanumeryczne a, b, c, d, e
górna alfa Wielkie litery alfanumeryczne A, B, C, D, E.
mała litera rzymska Małe cyfry rzymskie I, II, III, IV, V
duża litera rzymska Wielkie cyfry rzymskie I, II, III, IV, V
niższy grecki Znacznik jest dolno-grecki alfa, beta, gamma
niższa łacina Znacznik jest napisany małą łaciną a, b, c, d, e
górna łacina Znacznik jest łaciński A, B, C, D, E.
hebrajski Znacznik jest tradycyjną numeracją hebrajską  
ormiański Znacznikiem jest tradycyjna numeracja ormiańska  
gruziński Znacznik to tradycyjna numeracja gruzińska  
cjk-ideographic Znacznik to zwykłe liczby ideograficzne  
hiragana Znacznik to hiragana a, ja, u, e, o, ka, ki
katakana Marker to katakana A, I, U, E, O, KA, KI
hiragana-iroha Znacznik to hiragana-iroha ja, ro, ha, ni, ho, he, to
katakana-iroha Znacznik to katakana-iroha I, RO, HA, NI, HO, HE, TO

Oto przykład -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

To da następujący wynik -

Właściwość list-style-position

Właściwość list-style-position wskazuje, czy znacznik powinien pojawiać się wewnątrz, czy na zewnątrz pola zawierającego punktory. Może mieć jedną z dwóch wartości -

Sr.No. Wartość i opis
1

none

NA

2

inside

Jeśli tekst znajdzie się w drugiej linii, zostanie zawinięty pod znacznikiem. Pojawi się również z wcięciem w miejscu, w którym tekst zaczynałby się, gdyby lista miała wartość outside.

3

outside

Jeśli tekst trafi do drugiej linii, zostanie wyrównany do początku pierwszej linii (po prawej stronie punktora).

Oto przykład -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

To da następujący wynik -

Właściwość list-style-image

Obraz w stylu listy umożliwia określenie obrazu, dzięki czemu można użyć własnego stylu punktora. Składnia jest podobna do właściwości background-image z literami url rozpoczynającymi się od wartości właściwości, po których następuje adres URL w nawiasach. Jeśli nie znajdzie podanego obrazu, używane są domyślne punktory.

Oto przykład -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

To da następujący wynik -

Właściwość stylu listy

Styl listy umożliwia określenie wszystkich właściwości listy w jednym wyrażeniu. Te właściwości mogą pojawiać się w dowolnej kolejności.

Oto przykład -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

To da następujący wynik -

Właściwość marker-offset

Właściwość odsunięcia znacznika umożliwia określenie odległości między znacznikiem a tekstem odnoszącym się do tego znacznika. Jego wartość powinna być długością, jak pokazano w poniższym przykładzie -

Niestety ta właściwość nie jest obsługiwana w przeglądarce IE 6 ani Netscape 7.

Oto przykład -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

To da następujący wynik -