Inne działy

 

 

Konfigurowanie list za pomocą CSS

 

 Listy są bardzo pomocne w przekazywaniu zestawu wiadomości w postaci listy wypunktowanej lub numerowanej. Ten kurs uczy jak kontrolować typy list, pozycję, styl itd, za pomocą CSS

Istnieje następujących pięć właściwości CSS, które mogą być używane do kontrolowania listy:

  • Właściwość list-style-type pozwala na kontrolę kształtu lub wygląd znacznika.
  • Właściwość list-style-position określa, czy długi podpunkt, powinien być zawijany w drugi wiersz, który ma być wyrównany z pierwszą linią lub rozpocząć pod spodem na początku znacznika.
  • Właściwość list-style-image  określa obraz dla znacznika, zamiast wypunktowania lub liczby.
  • Właściwość list-style  służy, jako skrót dla poprzedniej właściwości.
  • Właściwość marker-offset  określa odległość między znacznikiem i tekstem w liście.

Teraz zobaczymy jak stosować te właściwości za pomocą przykładów.

Właściwość list-style-type:

Właściwość list-style-type pozwala na kontrolę kształtu lub styl wypunktowania (znany również, jako znacznik) w przypadku listy nieuporządkowanej i styl numeracji znaków w uporządkowanej liście.

Poniżej przedstawiono wartości, które mogą być używane dla listy nieuporządkowanej:

 

WartośćOpis
 none  NA
 disc (domyślnie)  Wypełniony okrąg
 circle  Pusty okręg
 square  Wypełniony kwadrat

 

Poniżej przedstawiono wartości, które mogą być używane dla uporządkowanej listy:

 

WartośćOpisPrzykład
 decimal  Liczba  1,2,3,4,5
 decimal-leading-zero  0 przed numerem  01, 02, 03, 04, 05
 lower-alpha  Małe znaki alfanumeryczne  a, b, c, d, e
 upper-alpha  Duże znaki alfanumeryczne  A, B, C, D, E
 lower-roman  Małe litery rzymskie  i, ii, iii, iv, v
 upper-roman  Duże litery rzymskie  I, II, III, IV, V
 lower-greek  Małe znaki alfabetu greckiego  alpha, beta, gamma
 lower-latin  Małe znaki alfabetu łacińskiego  a, b, c, d, e
 upper-latin  Duże znaki alfabetu łacińskiego  A, B, C, D, E
 hebrew  Znacznik jest numerowany po hebrajsku  
 armenian  Znacznik jest numerowany po ormiańsku  
 georgian  Znacznik jest tradycyjnej georgiańskiej numeracji  
 cjk-ideographic  Znacznik ma zwykłe ideograficzne numery  
 hiragana  Znacznik jest hiragany a, i, u, e, o, ka, ki
 katakana  Znacznik jest katakana  A, I, U, E, O, KA, KI
 hiragana-iroha  Znacznik jest hiragana-iroha  i, ro, ha, ni, ho, he, to
 katakana-iroha  Znacznik jest katakana-iroha  I, RO, HA, NI, HO, HE, TO

 

Oto przykład: 

<ul style="list-style-type:circle;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ul>

<ul style="list-style-type:square;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ul>

<ol style="list-style-type:decimal;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

<ol style="list-style-type:lower-alpha;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

<ol style="list-style-type:lower-roman;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

 Poniżej wynik działania kodu:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 

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

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

 

WartośćOpis
 none  NA
 inside  Jeśli tekst przechodzi do drugiej linii, tekst będzie zawijany pod markerem. 
 outside  Jeżeli tekst przechodzi do drugiej linii, tekst będzie wyrównany z początkiem pierwszej linii (na prawo od punktu).

 Oto przykład:

<ul style="list-style-type:circle; list-stlye-position:outside;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ul>

<ul style="list-style-type:square;list-style-position:inside;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ul>

<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

 Poniżej wynik działania kodu:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 

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

Właściwość list-style-image pozwala określić obraz, dzięki czemu można używać swojego własnego stylu punktora. Składnia jest następująca, podobna do właściwość background-image. Jeśli nie znajdzie podanego obrazu, są używane domyślne punktory.

Oto przykład:

<ul>
<li style="list-style-image: url(/images/bullet.gif);"> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ul>

<ol>
<li style="list-style-image: url(/images/bullet.gif);"> Matematyka </li>
<li> Nauki społeczne </li>
<li> Fizyka </li>
</ol>

 Poniżej wynik działania kodu:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 

Właściwość list-style:

Właściwość list-style pozwala na określenie wszystkich właściwości listy w wyrażeniu. Właściwości te mogą występować w dowolnym porządku.

Oto przykład:

<ul style="list-style: inside square;">
<li>Matematyka</li>
<li>Nauki społeczne</li>
<li>Fizyka</li>
</ul>

<ol style="list-style: outside upper-alpha;">
<li>Matematyka</li>
<li>Nauki społeczne</li>
<li>Fizyka</li>
</ol>

 Poniżej wynik działania kodu:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 

Właściwość marker-offset:

Właściwość marker-offset pozwala określić odległość pomiędzy znacznikiem i tekstem odnosząca się do tego znacznika. Jego wartość powinna być liczbowa, jak pokazano w następującym przykładzie:

Niestety jednak, ta właściwość jest nieobsługiwana w IE 6 lub Netscape 7.

Oto przykład:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 Poniżej wynik działania kodu:

  • Matematyka
  • Nauki społeczne
  • Fizyka
  1. Matematyka
  2. Nauki społeczne
  3. Fizyka

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.