Lista stylów CSS (UL)
CSS Właściwości listy rola jest w następujący sposób:
- Ustaw inny element listy jest oznaczony jako uporządkowanej listy
- Ustaw inny element listy jest oznaczony jako listy nieuporządkowanej
- Set lista marker Obrazek
lista
W HTML, istnieją dwa typy list:
- Nieuporządkowane list - Elementy listy oznaczone są specjalną grafiką (takich jak czarne plamki, małe pudełka, itp)
- Lista numerowana - elementy listy są oznaczone numerami lub literami
Z CSS, można wymienić styl dalej, i może zrobić znacznik obrazu Wykaz egzemplarzy.
Different marker element listy
atrybutu list-style-type określa rodzaj znacznika elementu listy jest ::
Przykłady
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Spróbuj »
Niektóre wartości są nieuporządkowane listy, a część jest uporządkowana lista.
Jako marker obrazu Wykaz egzemplarzy
Aby określić znacznik obrazu Wykaz egzemplarzy, należy użyć właściwości list-style-image:
Powyższy przykład nie pokazuje tak samo we wszystkich przeglądarkach, IE i Opera wyświetla tagi obrazu niż Firefox, Chrome i Safari nieco wyższym.
Jeśli chcesz umieścić ten sam obraz logo we wszystkich przeglądarkach, należy użyć rozwiązania zgodnością przeglądarki, w następujący sposób
Zgodność z przeglądarkami Solutions
Również we wszystkich przeglądarkach, następujący przykład pokaże znacznik obrazka:
Przykłady
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Spróbuj »
Przykład wyjaśnił:
- uL:
- Ustaw list-style-type nie jest, aby usunąć znacznik elementu listy
- Ustawianie padding i margin 0px (kompatybilność przeglądarki)
- Wszystko ul li:
- Określ adres URL obrazu i ustawić go pojawia się tylko raz (bez powtarzania)
- Musisz zlokalizować położenie obrazu (lewa 0px i pionową 5px)
- Z padding-left atrybut tekstu na liście
Lista - skróconą własnością
Można określić listę wszystkich właściwości w jednym obiekcie. To się nazywa skróconą własnością.
Użyj własności Skróty do listy, lista atrybutów typu są ustawione w następujący sposób:
Jeśli używasz skrótowej wartość właściwości zamówienia jest:
- list-style-type
- list-style-position (aby uzyskać instrukcje, patrz poniższa tabela atrybutów CSS)
- list-style-image
Jeśli te wartości są brakuje jednego z pozostałej kolejności jest wciąż określona, to nie ma znaczenia.
Więcej przykładów
Każdy inny marker element listy
Ten przykład pokazuje cały inny znacznik CSS Wykaz egzemplarzy.
Wszystkie Właściwości listy CSS
| nieruchomość | opis |
|---|---|
| list-style | Skrócona forma. Aby uzyskać listę wszystkich właściwości podano w oświadczeniu |
| list-style-image | Obraz jest podpisać listę elementów. |
| list-style-position | Ustaw pozycję na liście znacznik elementu listy. |
| list-style-type | Ustaw typ flagi elementu listy. |