Najnowsze tutoriale tworzenie stron internetowych
 

CSS wykazy

❮ Poprzedni Następny rozdział ❯
  1. Kawa
  2. herbata
  3. Coca cola
  • Kawa
  • herbata
  • Coca cola

Listy HTML i CSS Properties Lista

W HTML, istnieją dwa główne typy list:

  • nieuporządkowane listy (<ul>) - elementy listy są oznaczone kulami
  • uporządkowane listy (<ol>) - elementy listy są oznaczone numerami lub literami

Właściwości lista CSS pozwalają na:

  • Ustaw różne markery przedmiot na uporządkowanych list
  • Ustaw różne markery przedmiot na listach nieuporządkowanych
  • Ustawianie obrazu jako znacznik elementu listy
  • Dodaj do listy kolorów tła i elementów listy

Różne znaczniki Wykaz egzemplarzy

list-style-type właściwość określa typ znacznika elementu listy.

Poniższy przykład pokazuje niektóre z dostępnych markerów elementu listy:

Przykład

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
Spróbuj sam "

Uwaga: Niektóre wartości są dla list nieuporządkowanych, a niektórzy za zamówione list.

Obraz jako marker Wykaz egzemplarzy

list-style-image właściwość określa obraz jako znacznik elementu listy:

Przykład

ul {
    list-style-image: url('sqpurple.gif');
}
Spróbuj sam "

Stanowisko Markery Wykaz egzemplarzy

list-style-position właściwość określa, czy znaczniki list-item powinien pojawić się wewnątrz lub na zewnątrz przepływu treści:

Przykład

ul {
    list-style-position: inside;
}
Spróbuj sam "

Lista - Skrócona forma

list-style nieruchomość jest skróconą własnością. Jest on stosowany, aby ustawić wszystkie właściwości listy w jednej deklaracji:

Przykład

ul {
    list-style: square inside url("sqpurple.gif");
}
Spróbuj sam "

Przy użyciu właściwości skrótowej, kolejność wartości nieruchomości są:

  • list-style-type (jeśli list-style-image jest określony, wartość tej właściwości zostanie wyświetlone, jeśli obraz z jakiegoś powodu nie mogą być wyświetlane)
  • list-style-position (określa, czy znaczniki list-item powinien pojawić się wewnątrz lub na zewnątrz przepływu treści)
  • list-style-image (obraz określa jako znacznik elementu listy)

Jeśli jeden z tych wartości majątkowych powyżej brakuje, wartość domyślna dla właściwości brakującego zostanie wstawiony, jeśli w ogóle.

Lista Styling Z Colors

Możemy również styl listy z kolorami, aby wyglądały trochę bardziej interesująca.

Wszystko dodany do <ol> i <ul> tagu, wpływa na całą listę, natomiast właściwości dodany do <li> tag wpłynie na poszczególne elementy listy:

Przykład

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

Wynik:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
Spróbuj sam "
Przykłady

Więcej przykładów

Pełna lista szerokości graniczy
Ten przykład pokazuje, jak utworzyć listę graniczy bez kul.

Wszystkie różne markery list-item na listach
Ten przykład pokazuje wszystkie inne znaczniki list-przedmiot w CSS.

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »

Wszystkie Właściwości listy CSS

Nieruchomość Opis
list-style Ustawia wszystkie właściwości listy w jednej deklaracji
list-style-image Określa obraz jako marker list-item
list-style-position Określa, czy znaczniki list-item powinien pojawić się wewnątrz lub na zewnątrz przepływu zawartości
list-style-type Określa typ markera list-item

❮ Poprzedni Następny rozdział ❯