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 -