Reguły CSS umożliwiające dostosowanie wyglądu listy na stronie HTML. Właściwość stylu listy (typ, obraz, pozycja). Prefabrykowana reguła w stylu listy CSS

Witam, drodzy czytelnicy bloga. Dziś w skarbonce pojawi się kolejny artykuł. Skupi się na projektowaniu z wykorzystaniem zasad kaskadowych arkuszy stylów. Tutaj wszystko jest bardzo proste, ale mimo to postanowiłem poświęcić temu tematowi osobny wpis.

Nieco wcześniej udało nam się już dowiedzieć, jak, jak i jak możesz pracować. Cóż, nieco wcześniej szczegółowo przyjrzeliśmy się wszystkim rodzajom i ich różnym kombinacjom, aby dokładnie wskazać ten element kodu HTML, dla którego trzeba będzie zastosować określone właściwości stylizujące.

Styl listy - projektowanie list w kodzie HTML

Tak więc w języku znaczników stylu istnieją trzy osobne reguły, począwszy od stylu list, które służą do konfiguracji wygląd listy (numerowane lub wypunktowane) w kodzie dokumentów internetowych. Dodatkowo istnieje prefabrykowana reguła w stylu listy CSS, która pozwala nieznacznie zmniejszyć ilość kodu. Ale najpierw sprawy.

To, co teraz rozważymy, można wykorzystać do obu celów Elementy HTML LI oraz dla elementów Ul i Ol (odpowiednio listy wypunktowane i numerowane). Jaka będzie różnica między używaniem stylu listy dla tych tagów?

Tak naprawdę o tym, czy właściwość jest dziedziczona, czy nie, możesz dowiedzieć się na stronie walidatora (przeczytaj o tym pod podanym linkiem) w sekcji poświęconej specyfikacji kaskadowych arkuszy stylów. W kolumnie „Dziedziczone” obok reguł dziedziczonych pojawi się „Tak”:

Zacznijmy typ-stylu listy, co pozwala ustawić rodzaj oznaczenia dla poszczególne elementy Lista HTML. Dla tej reguły obowiązują następujące wartości:

1. Brak - żadne oznaczenie nie zostanie wykonane (list-style-type:none; zastosowany do tego elementu i dlatego nie posiada on znacznika)
2. Dysk to wypełniony okrąg (list-style-type:disc; jest używany w tej linii)
3. Okrąg - okrąg jako znacznik
4. Kwadrat - kwadrat jako znacznik
5. Dziesiętny — cyfry arabskie (typ stylu listy: dziesiętny;)
6. low-alpha - małe litery
7. górna alfa - wielkie litery łacińskie
8. less-roman — małe cyfry rzymskie
9. Upper-Roman — cyfry rzymskie pisane wielkimi literami

Jak myślisz, czego użyto do stworzenia listy tuż powyżej, Ul czy Ol? Podchwytliwe pytanie. Okazuje się, że nie jest to już istotne, chociaż w tym konkretnym przypadku użyłem Ol, ale zmieniając go na Ul, wygląd pozostanie ten sam, ponieważ dla każdego elementu jest ustawiony własny Wartość CSS reguły typu listy.

W rzeczywistości Ul i Ol różnią się jedynie domyślnym zachowaniem (znaki Ul i liczby Ol). Ale jeśli chcesz, możesz łatwo przekształcić jeden styl listy w inny, używając typu listy-stylu. Czcionka używana do oznaczania cyfr lub liter jest dokładnie taka sama, jak ta, którą zdefiniowałeś dla treści znaczników LI. Przykładowo zmieniając kolor czcionki listy zmienimy i kolor znacznika:

1. Zmieniono kolor tekstu (typ-stylu listy:dolny-rzymski;kolor:czerwony) i zmieniono kolor znacznika

Przejdźmy dalej z następującą właściwością CSS − pozycja w stylu listy. Za jego pomocą można określić położenie (położenie) obszaru ze znacznikiem. Istnieją dla niego tylko dwie możliwe wartości:

Te. Zasadniczo w pozycji w stylu listy wskazujemy, gdzie powinien zostać umieszczony obszar ze znacznikami - na zewnątrz elementu LI (na zewnątrz) lub wewnątrz niego (wewnątrz). Domyślnie obszar ze znacznikiem jest wyjmowany poza granice, tj. używana jest wartość zewnętrzna.

Zobaczmy to na przykładzie. W pierwszym elemencie listy napiszę konkretnie list-style-position:inside i zobaczymy, co się stanie:

1. Tutaj wszystko jest domyślne
2. Tak będzie wyglądać umieszczenie obszaru znacznika z wnętrzem. Należy pamiętać, że druga linia w tym elemencie i znacznik znajdują się na tym samym poziomie
3. Tutaj wszystko jest domyślne

Obraz w stylu listy i prefabrykowana reguła CSS

Następnie mamy obraz w stylu listy - pozwala określić obraz, który będzie używany jako znacznik. Ta reguła jest domyślnie ustawiona na Brak (tzn. żaden obraz nie jest używany jako znacznik), ale możesz napisać funkcję Url() podając ścieżkę do obrazu, który później będzie pełnił rolę znacznika na tej liście:

Może to wyglądać tak:

Obraz w stylu listy: url(https://site/images/list_star.png);

1. Tutaj wszystko jest domyślne
2. Tak może wyglądać użycie obrazu jako znacznika. Oczywiste jest, że możesz wybrać bardziej odpowiedni obraz do tego celu.
3. Na przykład tak jak tutaj.

Jak pamiętacie, w artykule o tym powiedziałem, że obrazy należą do elementów inline (właściwie dla przeglądarki jest to ta sama litera, ale czasami bardzo duża).

Tutaj obraz zastępuje znacznik (litery lub cyfry). W tym przypadku wysokość linii z elementem listy zostanie zwiększona, jeśli jako znacznik wstawisz duży obrazek (tak jak miało to miejsce w drugim elemencie przykładu podanego tuż powyżej).

W funkcjonalności obrazu w stylu listy można określić oba obrazy. Jeśli obraz nie zostanie załadowany, zostanie użyty domyślny znacznik lub numeracja lub to, co jest określone w typie stylu listy dla tego elementu listy.

Aby zapisać wszystkie trzy reguły CSS opisane powyżej w jedną, możesz użyć stylu List, który jest prefabrykowanym stylem do projektowania list. Kolejność podawania wartości nie ma znaczenia. Wartości, których nie określisz w stylu listy, zostaną jawnie zinterpretowane przez przeglądarkę z wartościami domyślnymi.

Gdzie mogę zobaczyć wartości domyślne? Tak, wszystko tam jest - w specyfikacji CSS walidatora W3C w kolumnie „Wartość początkowa” obok interesujących Cię właściwości:

Wartości poszczególnych właściwości w regule prefabrykatów w stylu listy są oddzielone spacjami. Lokalizacja, jak już wspomniano, nie jest istotna:

W praktyce może to wyglądać następująco:

Styl listy:wewnątrz górnego rzymskiego adresu URL (https://site/images/list_star.png);

Możesz używać wartości w dowolnej kolejności i dowolnej liczbie (zaczynając od jednego). Nawiasem mówiąc, menu są najczęściej tworzone na stronach internetowych przy użyciu list i do tego przyzwyczajona jest właściwość List-style aby usunąć znaczniki z list menu, które są tam zupełnie niepotrzebne:

Typ stylu listy: brak;

Styl listy: brak;

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

Wyświetl (blok, brak, inline) w CSS - ustaw typ wyświetlania elementów HTML na stronie internetowej Jak skonfigurować naprzemienny kolor tła wierszy tabel, list i innych elementów HTML na stronie przy użyciu pseudoklasy nth-child
Płynnie i przejrzyście w CSS - narzędzia do układania bloków
Pozycjonowanie za pomocą indeksu Z i reguły kursora CSS w celu zmiany kursora myszy
Pozycja (bezwzględna, względna i stała) - sposoby pozycjonowania elementów HTML w CSS (reguły lewa, prawa, góra i dół)
Do czego służy CSS i jak łączyć kaskadowe arkusze stylów Dokument HTML i podstawowa składnia tego języka
Właściwości CSS dekoracja tekstu, wyrównanie do pionu, wyrównanie tekstu, wcięcie tekstu do dekoracji tekstu w HTML
Reguły dotyczące czcionek (waga, rodzina, rozmiar, styl) i wysokości linii do stylizacji czcionek w CSS
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obrazu tła elementów HTML
CSS - co to jest, jak łączyć się z kaskadowymi arkuszami stylów Kod HTML za pomocą stylu i łącza
Priorytety w CSS i ich wzrost dzięki Ważnym, kombinacji i grupowaniu selektorów, stylów użytkownika i autora

Ustawia adres obrazu, który służy jako znacznik listy. Ta właściwość jest dziedziczona, więc dla poszczególnych elementów listy do przywrócenia znacznika używana jest wartość none.

krótka informacja

Składnia

obraz w stylu listy: brak | adres URL(<адрес>)

W tym rozdziale przestudiujemy atrybuty stylu używane do definiowania opcje akapitu. Akapity w szerokim znaczeniu tego słowa - które obejmują zarówno nagłówki, jak i listy i znaczniki adresowe oraz duże cudzysłowy. Ogólnie rzecz biorąc, elementy blokowe omówione w rozdziale 2 i przeznaczone do strukturyzacji tekstu.

Na koniec przyjrzymy się dwóm bardzo specyficznym atrybutom stylu, które pozwalają nam ustawić sposób wyświetlania elementu strony internetowej (tzn. czy jest on oparty na blokach czy wbudowany) i sprawić, że element będzie niewidoczny. Te atrybuty stylu są używane rzadko i tylko w połączeniu z określonymi zachowaniami (patrz część III).

Opcje wyjściowe tekstu

Zaczniemy od atrybutów stylu, które kontrolują wyjście tekstowe w elementach blokowych tworzących strukturę tekstu. Jest ich bardzo mało. I wszystkie dotyczą tylko elementów blokowych.

Atrybut style-align style określa poziome wyrównanie tekstu:

wyrównanie tekstu: do lewej|do prawej|do środka|wyrównaj|dziedzicz

Dostępne tutaj wartości to lewy (wyrównany do lewej; normalne zachowanie przeglądarki internetowej), prawy (wyrównany do prawej), środkowy (do środka) i justowanie (pełne wyrównanie).

Przykłady:

P (wyrównanie tekstu: justowanie)
H1 (wyrównanie tekstu: do środka)

Atrybut stylu wcięcia tekstu określa wcięcie „czerwonej linii”:

wcięcie tekstu:<отступ "красной строки">

Dopuszczalne są tutaj bezwzględne i względne (w stosunku do szerokości akapitu) wartości wcięć. Domyślnie wcięcie czerwonej linii wynosi zero. Należy pamiętać, że atrybut stylu wcięcia tekstu nie obsługuje wartości dziedziczenia.

Przykład:

P (wcięcie tekstu: 5 mm)

Teraz akapity będą miały „czerwoną linię”.

Listy wśród elementów blokowych wyróżniają się. Przede wszystkim dlatego, że po pierwsze zawierają inne elementy blokowe (pojedyncze elementy), a po drugie zawierają znaczniki i numerację, które umieszcza sama przeglądarka internetowa. Teraz porozmawiamy o znacznikach i numeracji, a dokładniej o atrybutach stylu, które służą do ustawiania ich parametrów.

Atrybut stylu list-style-type style określa typ punktorów lub numeracji elementów listy:

typ-listy: dysk|okrąg|kwadrat|dziesiętny|dziesiętny-zero wiodące|

niższy-rzymski|wyższy-rzymski|niższy-grecki|niższy-alfa|niższy-łaciński|

górna alfa|górna-łacińska|ormiańska|gruzińska|brak|dziedziczy

Jak widać, dostępnych wartości tego atrybutu stylu jest bardzo dużo. Reprezentują one zarówno różne typy oznaczeń, jak i różne sposoby numeracji.

Znacznik dysku w postaci czarnego koła (zwykłe zachowanie w przypadku list punktowanych).

Okrąg - znacznik w formie jasnego koła.

Kwadrat - znacznik w formie kwadratu. Może być jasny lub ciemny, w zależności od przeglądarki internetowej.

Dziesiętny — numeracja cyframi arabskimi (typowe zachowanie w przypadku list numerowanych).

Zero dziesiętne-wiodące - numeracja cyframi arabskimi od 01 do 99 z zerem wiodącym.

Dolna rzymska - numeracja małymi cyframi rzymskimi.

Górna rzymska - numeracja dużymi cyframi rzymskimi.

Dolno-grecki - numeracja małymi greckimi literami.

Niższa alfa i dolna łacina - numeracja małymi literami łacińskimi.

Górna alfa i górna łacina - numeracja wielkimi literami łacińskimi.

Ormiański - numeracja przy użyciu tradycyjnych cyfr ormiańskich.

Gruziński - numeracja przy użyciu tradycyjnych cyfr gruzińskich.

Brak — nie ma znacznika ani numeracji (zwykłe zachowanie w przypadku obiektów niebędących listami).

NA UWAGA

Przyjrzeliśmy się tylko wartościom atrybutów typu list-style dostarczonych przez CSS 3. Jednak CSS 2 dostarczył kilka dodatkowych wartości, które nadal są obsługiwane przez przeglądarki internetowe. Można je znaleźć na stronie internetowej https://developer.mozilla.org/en/CSS/list-style-type.

Atrybut stylu typu listy można ustawić dla obu listy oraz dla poszczególnych elementów listy. W tym drugim przypadku tworzona jest lista, w której pozycje mają różne oznaczenia lub numerację. Czasami może się to przydać.

Oto definicja listy punktowanej ze znacznikiem kwadratowym:

UL (typ listy: kwadratowy)

Na Listingu 9.1 ustawiliśmy ten sam znacznik dla jednego z elementów listy wypunktowanej.

Atrybut styl list-style-image style umożliwia określenie dowolnego obrazu graficznego jako znacznika elementów listy (utwórz znacznik graficzny). W tym przypadku wartość atrybutu stylu typu listy, jeśli jest określony, jest ignorowana:

obraz w stylu listy: brak|<интернет-адрес файла изображения>|dziedziczyć

Adres internetowy pliku znacznika graficznego jest podawany w tym samym formacie, co adres internetowy pliku obrazu tła (patrz rozdział 8):

UL ( obraz w stylu listy: url(/markers/dot.gif) )

Wartość none usuwa znacznik graficzny i zwraca prosty, niegraficzny znacznik. To jest normalne zachowanie.

Atrybut styl-obrazu listy można także ustawić zarówno dla samych list, jak i dla ich poszczególnych elementów.

Atrybut stylu listy-style-pozycji umożliwia określenie położenia punktora lub numeracji w elemencie listy:

pozycja w stylu listy: wewnątrz|na zewnątrz|dziedzicz

Dostępne są dwie wartości:

Wewnątrz - znacznik lub numeracja znajduje się niejako wewnątrz elementu listy, jest jego częścią;

Na zewnątrz - znacznik lub numeracja przesunięte poza element lista(jest to normalne zachowanie).

Nie jest jasne, dlaczego ten atrybut stylu jest potrzebny, ponieważ listy, w których znacznik lub numeracja znajdują się poza punktami, są łatwiejsze do odczytania. Cóż, skoro jest obecny w standardzie CSS, niech tak będzie…

Przykład:

OL (pozycja w stylu listy: wewnątrz)

Uniwersalna właściwość, która pozwala jednocześnie ustawić styl znacznika, jego położenie i obraz, który będzie używany jako znacznik listy.

krótka informacja

Właściwość STYL LISTY

Nieruchomość Styl listy— skrócona forma zapisu właściwości, które definiują wszystkie style znaczników dla elementów listy. Właściwości te dotyczą zarówno list numerowanych, jak i wypunktowanych – należy je rozpatrywać osobno. Krótka forma zapisu nie może zawierać żadnej indywidualnej właściwości, należy jednak zachować kolejność ich zapisu: rodzaj znacznika – jego położenie – ścieżka obrazu.

Obszar zastosowań*: elementy listy i wszelkie inne, dla których wartość właściwości Wyświetlacz Jest element listy.

Typ stylu listy

Zestawy właściwości typ znacznika dla każdego elementu listy. Typy punktorów różnią się w przypadku list punktowanych i numerowanych.

Wartości:

dysk— znacznik punktu.
koło- znacznik koła.
kwadrat— znacznik kwadratowy.
dziesiętny— Liczby arabskie: 1, 2, 3….
dziesiętne-zero wiodące- Liczby arabskie zaczynające się od zera: 01, 02, 03 ... 09.
Lowel-romans- Numeracja rzymska pisana małymi literami.
górno-rzymskie- Numeracja rzymska pisana wielkimi literami.
lowel-łac— małe litery łacińskie: a, b, c….
górno-łacińska— wielkie litery łacińskie: A, B, C….
ormiański- Numeracja ormiańska.
gruziński- Numeracja gruzińska.
nic- anulowanie.
dziedziczyć

W przykładzie zastosowano dwa różne znaczenia nieruchomości Typ stylu listy:

Pozycja w stylu listy

Właściwość określa położenie znacznika elementu. Znacznik znajduje się wewnątrz elementu lub na zewnątrz.

Wartości:

wewnątrz— znacznik znajduje się wewnątrz elementu listy.
poza— znacznik zostaje przesunięty poza blok tekstu.
dziedziczyć— dziedziczenie z elementu nadrzędnego.

Przykład wyraźnie pokazuje różnicę pomiędzy wartościami wewnątrz I poza nieruchomości Pozycja w stylu listy:

Obraz w stylu listy

Właściwość określa ścieżkę do obrazu, który będzie służył jako znacznik dla numerowanego lub lista punktowana. Położenie obrazu znacznika można kontrolować za pomocą tej właściwości Pozycja w stylu listy.

Wartości:

Adres URL- sposób na plik graficzny.
nic— anuluje obraz znacznika, na przykład dla elementu nadrzędnego.
dziedziczyć— dziedziczenie z elementu nadrzędnego.

Ul (obraz w stylu listy: url(papka/find.png); pozycja w stylu listy: wewnątrz;)

W przykładzie użyliśmy obrazu jako znacznika mały rozmiar, co wyraźnie pokazuje możliwości nieruchomości Obraz w stylu listy: