Do implementacji używany jest znacznik ol. Przykłady stylowego wyglądu ul li list CSS

Witam, drodzy czytelnicy bloga. Dzisiaj w ramach tej sekcji chcę poruszyć temat różnorodnych list HTML, które można stworzyć w oparciu o specjalnie zaprojektowane tagi UL, OL, LI i DL. Pary UL i LI tworzą listy punktowane, pary OL i LI tworzą listy numerowane, a elementy DL, DT i DD tworzą tak zwane listy definicji. Pokrótce rozważymy także zasady tworzenia struktur zagnieżdżonych.

Przypominam, że udało nam się już porozmawiać o podstawach układu nowoczesnego, a także tabelarycznego (). Ponadto dotknęliśmy podstaw i nauczyliśmy się.

Listy punktowane oparte na znacznikach UL i LI

Znacznik UL służy do tworzenia list punktowanych, a znacznik OL służy do tworzenia list numerowanych. Te znaczniki są znacznikami parami i blokowymi, podobnie jak element LI.

Pomiędzy znacznikami otwierającym i zamykającym znajdują się pojedyncze elementy listy, które z kolei są zawarte w otwierającym i zamykającym elemencie LI. Góra i dół Listy HTML Przeglądarka dodaje wcięcie do pojedynczej linii, podobnie jak wcięcie utworzone przez znacznik akapitu.

Przyjrzyjmy się na przykład opcji punktowanej, która może wyglądać tak:

• Pierwsza linia
• Drugi
• Ostatni element

Wewnątrz otwierających i zamykających znaczników UL mogą znajdować się wyłącznie elementy LI, a wewnątrz tych elementów (klauzul) można wstawić dowolną treść (tekst, obrazy, nagłówki, akapity, linki, a nawet inne listy).

Te. UL służy jedynie do przedstawienia listy wypunktowanej (nie uporządkowanej) i wszystkiego, co zobaczysz strona internetowa w nim jest realizowany przy użyciu zawartości elementów LI.

W przypadku UL można zmienić typ znacznika, podając różne wartości atrybutu „Typ”. Jeżeli dla elementu UL nie zostanie podany „Typ” (sterujący wyglądem oznaczeń), wówczas wyświetlony zostanie domyślny wygląd oznacznika (krążek – okrąg wypełniony kolorem tekstu):

1. — wypełnione kółko (domyślnie);
   • - niewypełnione kółko;
     • - kwadrat

W powyższych przykładach określiliśmy atrybut „Typ” w elemencie UL za pomocą ten typ znaczniki dla wszystkich elementów. Ale atrybut „Typ” można również określić dla każdego pojedynczego znacznika LI, ustawiając własny typ znacznika dla tego elementu.

Przykład listy punktowanej z różne typy znacznik dla każdego elementu:

1. Marker w formie wypełnionego krążka
2. Marker w formie niepomalowanego krążka
3. Kwadrat

Listy numerowane w HTML na podstawie znacznika OL

Do stworzenia zestawienia numerowanego wykorzystywane są znaczniki OL, w obrębie których ponownie będą znajdować się elementy LI. OL i LI, jak już wspomniałem, są oparte na blokach (to znaczy zajmują całą dostępną im przestrzeń na szerokość) i wewnątrz OL nie można umieścić niczego poza elementami LI.

Okazuje się, że OL i UL to znaczniki usług, które potrzebne są jedynie do wskazania przeglądarce, jakiego typu listę tworzymy (wypunktowaną czy numerowaną). W przypadku pozycji numerowanej, po lewej stronie każdej pozycji zobaczymy nie znacznik, a liczbę i kropkę za nią:

1. Pierwsza linia
2. Drugi punkt
3. Trzecia linia

Jak wspomniałem powyżej, elementy UL, OL i LI mają możliwość wykorzystania atrybutu TYPE. Pozwala skonfigurować rodzaj znacznika lub określić, jakie cyfry lub litery będą używane do numerowania pozycji aukcji. W przypadku listy numerowanej parametry tego atrybutu mogą przyjmować następujące wartości:

1. — numeracja będzie realizowana zwykłymi cyframi arabskimi (ta sama opcja będzie domyślnie stosowana w przypadku braku atrybutu „Typ”);
   1. — wielkie litery jako numeracja;
      1. - małe litery;
         1. - duże cyfry rzymskie;
            1. - małe cyfry rzymskie;

               Przykład listy numerowanej z różnymi typami numeracji dla każdej pozycji:

               

               1. numerowane dużymi cyframi rzymskimi
               2. Numeracja małymi literami łacińskimi
               3. Numeracja małymi cyframi rzymskimi

               Tworząc listy numerowane, możliwe jest także rozpoczęcie numeracji nie od jedynki, a od numeru określonego w atrybucie START. Na przykład:

               1. Pierwszy element, którego numer jest określony w znaczniku OL z atrybutem start="23".
               2. Następna pozycja, o numer jeden wyżej
               3. Jeszcze jeden

               W przypadku OL można także rozpocząć nową numerację od dowolnej wartości, zaczynając od dowolnej pozycji, wpisując atrybut VALUE z wymaganą liczbą w otwierającym LI tej pozycji. Na przykład:

               1. Pierwszy punkt z numerem jeden
               2. Element ten otrzyma liczbę określoną w atrybucie wartość="32".
               3. Pozycja z dużą liczbą

               Projektowanie wyglądu list w CSS (arkusze stylów)

               Ale zwykle teraz wygląd znaczniki są określone nie poprzez atrybut TYPE, ale dla którego określone są odpowiednie właściwości.

               Tutaj podam tylko przykład różnych punktorów dla list nienumerowanych, których wygląd jest określony osobny plik z kaskadowymi arkuszami stylów.

               • Pierwszy punkt
               • Drugi
               • Ostatni

               Ale o tym porozmawiamy w kolejnych artykułach. Tak ustawiony jest wygląd oznaczeń UL na tym blogu. Obrazy służą jako znaczniki: dla zwykłych pozycji listy nienumerowanej - , dla zagnieżdżonych pozycji listy nienumerowanej - .

               Listy specjalne i zagnieżdżone w kodzie HTML

               Trzeci i ostatni typ nazywany jest „listami definicji” i określa się je za pomocą trzech znaczników – DL, DT i DD. DL informuje przeglądarkę, że poniżej znajduje się lista definicji.

               Typowo ten typ służy (lub miał być używany) do zapisywania haseł słownikowych składających się z terminów (ujętych w znacznikach DT) i ich opisów (ujętych w znacznikach DD).

               Pierwszy termin

               Opis

               Drugi termin

               Jego opis

               

               Jeśli spojrzysz na powyższy przykład, zauważysz, że element DD (opis terminu) jest przesunięty (o 40 pikseli) w stosunku do elementu DT (samego terminu).

               Ogólnie rzecz biorąc, DL, DT i DD są znacznikami blokowymi i wewnątrz elementu DT można wstawić tylko treść ze znacznikami wbudowanymi (okazuje się, że wewnątrz elementu DT nie można używać elementów blokowych nagłówków i akapitów). Wewnątrz tagów DD możesz wstawić dowolne elementy, zarówno wbudowane, jak i blokowe.

               Zagnieżdżona lista w HTML jest on tworzony analogicznie do prostego, z tą różnicą, że wewnątrz listy głównej część pozycji jest ponownie zamknięta w tagu otwierającym i zamykającym UL lub OL.

               Należy pamiętać, że zamykający LI elementu, w którym zostanie utworzony element zagnieżdżony, umieszczany jest dopiero po całym kodzie listy zagnieżdżonej (jest to bardzo ważne ze względu na jego prawidłowe wyświetlanie na stronie internetowej). Zagnieżdżona lista może wyglądać mniej więcej tak:

               

               1. Pierwszy akapit głównego numeru
               2. Drugi punkt
                  • Pierwszy element zagnieżdżonego punktowania
                  • Drugi
                  • Punkt trzeci i ostatni
               3. Numer trzeciego elementu

               Powodzenia! Do zobaczenia wkrótce na stronach bloga

               Możesz być zainteresowany

               Jak wstawić link i obraz (zdjęcie) do znaczników HTML - IMG i A Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda - tagi Formularze HTML listy rozwijane i pole tekstowe
               Formularze HTML dla witryny - tagi Form, Input and Select, Option, Textarea, Label i inne do tworzenia elementów formularzy internetowych
               Jak ustawiane są kolory w kodzie HTML i CSS, wybór odcieni RGB w tabelach, dane wyjściowe Yandex i inne programy
               Osadź i obiekt - Znacznik HTML oraz do wyświetlania treści multimedialnych (wideo, flash, audio) na stronach internetowych
               Tagi nagłówka i atrybuty H1-H6, linia pozioma Hr, podział wiersza Br i podział akapitu P zgodnie ze standardem HTML 4.01
               Tabele w HTML - Tagi Table, Tr i Td oraz Colspan, Cellpadding, Cellspacing i Rowspan do ich tworzenia
               Co to jest hipertekstowy język znaczników Html i jak wyświetlić listę wszystkich tagów w walidatorze W3C
               Czcionka (twarz, rozmiar i kolor), cytaty blokowe i znaczniki wstępne — starsze formatowanie tekstu w czystym formacie HTML (bez użycia CSS)
               Iframe i Frame - czym są i jak najlepiej wykorzystać ramki w HTML
               Img - znacznik HTML służący do wstawiania obrazka (Src), wyrównywania i owijania wokół niego tekstu (align), a także ustawiania tła (background)

               Hipertekstowy język znaczników HTML ma znacznik

               , używany do tworzenia list punktowanych. Jest wspierany przez wszystkich nowoczesne przeglądarki i umożliwia wyświetlanie elementów w kolejności niewymagającej numerowania. Na przykład bardzo często wyświetla na stronie pozycje menu i wszystko, co jest powiązane z listami: dania, produkty, sprzęt, narzędzia i wiele innych, które należy wymienić bez wskazywania priorytetu konkretnej pozycji.

               Składnia tagu

               • Element nr 1
               • Element nr 2
               • Element nr 3
               • ...

               Ten kod przekłada się na listę punktowaną w witrynie:

               • Element nr 1
               • Element nr 2
               • Element nr 3

               Etykietka

               wymaga obowiązkowe użycie znacznik zamykający
               .

               Aby utworzyć elementy listy, używany jest sparowany znacznik. Pomiędzy znacznikami otwierającymi i zamykającymi znajdują się pojedyncze słowa, frazy, akapity, obrazy, fragmenty kodu i wiele innych elementów, które stanowią treść listy punktowanej.

               Jaka może być zawartość listy punktowanej?

               Może to być różnorodny tekst, w tym pojedyncze słowa, frazy i akapity, obrazy, zagnieżdżone listy, fragmenty kodu PHP i wiele innych, które wymagają prostego oznakowania.

               Każdy element listy punktowanej jest domyślnie wcięty o 40 pikseli w prawo. Używanie Style CSS, możemy zmienić sposób wyświetlania tę listę według własnego uznania. Etykietka

               ma charakter blokowy, a więc zajmuje cały dostępny mu obszar, ograniczony krawędzią ekranu, ramą tabeli lub innymi elementami strony.
               Załączniki typu lista w liście są dozwolone.

               Na przykład

               • Element nr 1
               • • Pozycja nr 2-1
                 • Element #2-2
                 • Element #2-3
               • Element nr 3
               • ...

               Atrybuty i właściwości znaczników

               Powszechnie używany atrybut tagu

               to atrybut typu wskazujący, jak będzie wyglądał znacznik listy. Może przyjmować następujące wartości

               1. type="disc" - znacznik w postaci wypełnionego okręgu (ta wartość jest domyślna). Przykład dysku był nieco wyższy.

               2. type="circle" - znacznik w postaci przezroczystego okręgu

               Na przykład:

               • Element nr 1
               • Element nr 2

               • Element nr 1
               • Element nr 2

               3. type="square" - znacznik w formie kwadratu

               Na przykład:

               • Element nr 1
               • Element nr 2

               A tak to wygląda na stronie:

               • Element nr 1
               • Element nr 2
               Uwaga 1

               W CSS typ punktora jest określany za pomocą atrybutu typu listy:

               • ...

               Przyjrzyjmy się, jakie wartości może przyjmować typ listy:

               • dysk - znacznik w formie okręgu (przykład był powyżej)
               • okrąg - znacznik w postaci przezroczystego okręgu (przykład był powyżej)
               • kwadrat - znacznik w postaci kwadratu (przykład był powyżej)
               • dziesiętny - znacznik w postaci listy numerowanej za pomocą cyfr arabskich: 1, 2, 3, ...
               • dziesiętne-wiodące-zero - znacznik w postaci listy numerowanej za pomocą cyfr arabskich z zerem wiodącym: 01, 02, 03, ...
               • dolny-rzymski - znacznik w postaci listy numerowanej w alfabecie łacińskim, pisanymi małymi literami: i, ii, iii, iv, v
               • górno-rzymskie - znacznik w formie listy numerowanej w alfabecie łacińskim pisanymi wielkimi literami: I, II, III, IV, V
               • dolny-łaciński - znacznik w formie listy w alfabecie łacińskim małymi literami: a, b, c, d, ...
               • górno-łaciński - znacznik w formie listy w alfabecie łacińskim wielkimi literami: A, B, C, D, ...
               • dolny-grecki - znacznik w formie listy zapisanej małymi literami w alfabecie greckim
               • górno-grecki - znacznik w formie listy w alfabecie greckim pisanym wielkimi literami

               Uwaga 2

               Atrybut można przypisać do samego tagu

               i tagi
               • . Podczas ustawiania atrybutu dla tagu
                 wszystkie elementy listy zostaną wyświetlone zgodnie z atrybutem. Ale możemy nadać temu lub innemu elementowi własny wyświetlacz. Przykład na zdjęciu:

                 Kod wygląda następująco:

                 • Element nr 1
                 • Element nr 2
                 • Element nr 3

                 • Element nr 1
                 • Element nr 2
                 • Element nr 3

                 Zmiana znaczników tagów

                 za pomocą CSS

                 Elementy listy punktowanej utworzone przez tag

                 , można oznaczyć dowolnymi obrazami. CSS służy do zmiany typu znacznika. Na przykład

                 • Element nr 1
                 • Element nr 2
                 • Element nr 3

                 A tak to wygląda na stronie:

                 • Element nr 1
                 • Element nr 2
                 • Element nr 3

                 C za pomocą CSS możemy ustawić inne typy wyświetlania znaczników. Ale musisz o tym pamiętać, określając dowolny styl tagu

                 , dotyczy to wszystkich elementów listy.

                 Listy numerowane to zbiór elementów wraz z ich numerami seryjnymi. Rodzaj i rodzaj numeracji zależny jest od atrybutów znacznika

                 , który służy do tworzenia listy. Każda pozycja na liście numerowanej jest oznaczona znacznikiem
                 1. jak pokazano poniżej.
                    1. Pierwszy punkt
                    2. Drugi punkt
                    3. Trzeci punkt

                    Jeśli nie określisz żadnych dodatkowych atrybutów i po prostu napisz tag

                    , wówczas domyślnie jest to lista z liczbami arabskimi (1, 2, 3,...), jak pokazano w przykładzie 11.3.

                    Przykład 11.3. Utwórz listę numerowaną

                    Praca z czasem

                    1. tworzenie punktualności (nigdy na nic się nie spóźnisz);
                    2. lekarstwo na punktualność (nigdy się nie spieszysz);
                    3. zmiana postrzegania czasu i zegarów.

                    Wynik tego przykładu pokazano na ryc. 11.3.

                    Ryż. 11.3. Widok listy numerowanej

                    Należy pamiętać, że lista numerowana dodaje również automatyczne wcięcia u góry, u dołu i po lewej stronie tekstu.

                    Jako elementy numeracyjne mogą służyć następujące wartości:

                    • Liczby arabskie (1, 2, 3, ...);
                    • wielkie litery łacińskie (A, B, C, ...);
                    • małe litery łacińskie (a, b, c, ...);
                    • wielkie cyfry rzymskie (I, II, III, ...);
                    • małe cyfry rzymskie (i, ii, iii, ...).

                    Aby wskazać typ listy numerowanej, użyj atrybutu type znacznika

                    . Jego możliwe wartości podano w tabeli. 11.2.
                    Tabela 11.2. Rodzaje list numerowanych

                    Typ listy	Kod HTML	Przykład
                    Cyfry arabskie		1. Czeburaszka 2. Krokodyl Gena 3. Shapoklyak
                    Wielkie litery alfabetu łacińskiego		A. Czeburaszka B. Krokodyl Gena C. Szapoklak
                    Małe litery alfabetu łacińskiego		A. Czeburaszka B. Krokodyl Gena C. Szapoklak
                    Cyfry rzymskie w wielkie litery		I. Czeburaszka II. Krokodyl Gena III. Szapoklak
                    Cyfry rzymskie pisane małymi literami		I. Czeburaszka II. Krokodyl Gena iii. Szapoklak

                    Aby rozpocząć listę od określonej wartości, użyj atrybutu start znacznika

                    . Nie ma znaczenia, jaki typ listy jest ustawiony przy użyciu type , atrybut start działa tak samo z cyframi rzymskimi i arabskimi. Przykład 11.4 pokazuje, jak utworzyć listę przy użyciu wielkich cyfr rzymskich, zaczynając od ośmiu.

                    Przykład 11.4. Numeracja list

                    8. Król Magnum XLIV
                    9. Król Zygfryd XVI
                    10. Król Zygmunt XXI
                    11. Król Husbrandt I

                    Wynik tego przykładu pokazano na ryc. 11.4.

                    

                    Ryż. 11.4. Lista numerowana z cyframi rzymskimi

                    Listy mogą być numerowane lub nienumerowane.

                    Listy numerowane są wyprowadzane z kodem:

                    Lista z liczbami
                    1. punkt 1
                    2. punkt 2
                    3. punkt 3

                    Listy nienumerowane są wyświetlane z następującym kodem:

                    Lista ze znacznikami wyboru lub innymi symbolami
                    • punkt 1
                    • punkt 1
                    • punkt 1

                    Każdy element dowolnej listy jest zamknięty w znaczniku li. Wszystkie elementy listy są ujęte w jeden wspólny znacznik ul lub ol. Style tych znaczników są zapisane w arkuszu stylów.

                    Każdemu znacznikowi przypisano określone style projektowania. Wskazują wcięcia w tekście.

                    W przypadku listy numerowanej style numerowania są określone dla każdego elementu.

                    Standardowe cyfry arabskie są opisywane wartością dziesiętną.

                    typ-stylu listy: dziesiętny; /*Cyfry arabskie*/

                    W przypadku listy punktowanej określ styl znaku — kwadraty lub okręgi.

                    typ-stylu listy: okrąg; /*kółka*/
                    typ-stylu listy: kwadratowy; /*kwadraty*/

                    Każdej pozycji menu można przypisać obraz.

                    obraz w stylu listy: url('ścieżka do obrazu');

                    Zwykle w szablonach lista numerowana jest formatowana za pomocą prostych liczb, a lista nienumerowana jest formatowana za pomocą czarnych kwadratów i okręgów. Jest nudno i bez wyrazu. Naprawmy to.
                    

                    Gdzie znajdują się style list zapisane w szablonie Twenty Eleven?

                    Otwórz plik style.css. Znajdź sekcję o nazwie /* Elementy tekstowe */

                    Standardowy kod wygląda następująco:

                    Jak stworzyć listę numerowaną?

                    Lista numerowana z użyciem tła

                    Spójrz na ten ładny projekt listy numerowanej.

                    Tak jak? Powtórzmy.

                    Znajdź style dla tagu ol. Dodaj do niego nowe właściwości.

                    Ol ( dopełnienie: 0px 0 0 20px; margines: 0,5em 0 1,571em 1,9em; kolor: #2E2E2E; typ-stylu listy: brak; czcionka: 15px/17px Verdana, Arial, Helvetica, bezszeryfowy; indeks Z : 2; reset licznika: punkt; ) ol li ( margines na dole: 4px; wysokość linii: 1,6; kolor: #2E2E2E; pozycja: względna; ) ol li:before ( margines na dole: 4px; licznik-przyrost: punkt 1; wysokość linii: 24px; po lewej: 0px; tło: #BDC3C7; pozycja: absolutna;

                    Abyś wiedział, gdzie i co musisz zmienić, aby pasował do Twojego projektu, rozbijmy ten kod na kawałki.

                    typ-stylu listy: brak; — wyłącza wyświetlanie liczb standardowych
                    licznik resetujący: punkt; — ustawia zmienną dla licznika numerującego
                    pozycja: względna; — umieszcza numerację obok samych pozycji

                    before jest pseudoelementem znacznika ol li. Ma następujące style:
                    treść: licznik(punkt); — wyświetla wartość zmiennej
                    przeciwprzyrost: punkt 1; — zwiększa licznik o 1
                    pozycja: absolutna;
                    tło: #BDC3C7; — tło dla liczb (tło można ustawić za pomocą koloru lub pięknej ikony
                    marża – marże zewnętrzne
                    wyściółka – wyściółka wewnętrzna
                    kolor – kolor tekstu elementu
                    tło – tło
                    text-align – wyrównanie tekstu
                    Font-weight – grubość czcionki (nasycenie)

                    W swoich stylach możesz ustawić dowolne kolory, wyrównania, rozmiary czcionek i wcięcia.

                    Lista numerowana z unikalnym obrazem dla każdego elementu

                    Jedna z witryn dla kobiet zawiera bardzo atrakcyjne listy numerowane.

                    Jak to jest realizowane? Spójrzmy na następujący kod:

                    /*pierwsza liczba*/ ol li:pierwsze-dziecko ( obraz w stylu listy: url(ścieżka do obrazu z numerem 1); ) /*druga liczba*/ ol li:n-dziecko(2n) ( styl listy- image: url(ścieżka do obrazka o numerze 2); ) /*trzecia liczba*/ ol li:nth-child(3n) ( obraz w stylu listy: url(ścieżka do obrazka o numerze 3); ) /* czwarta liczba */ ol li:nth-child(4n) ( list-style-image: url(ścieżka do obrazka z liczbą 4); ) /*Następnie piszemy dokładnie to samo tylko dla kolejnych numerów pozycji*/

                    W kodzie takiej listy numerowanej należy wyszczególnić wszystkie numery pozycji i przypisać do każdego z nich unikalną ikonę.

                    Jeśli używasz do 20 numerowanych pozycji na listach w artykułach, to musisz napisać pseudoklasę nth-child(An) 20 razy. Zatem ostatnią w stylach jest pseudoklasa n-tego-dziecka(20n).

                    Znajdź linie w pliku stylów opisujące projekt listy numerowanej (znaczniki ol li).

                    Dodaj do niej pseudoklasę pierwszego dziecka. Skopiuj i wklej go raz, następnie zmień tę właściwość na nth-child(An) i skopiuj tyle liczb, ile chcesz mieć własną ikonę. Wprowadź numery pozycji.

                    Dla każdej liczby dodaj właściwość list-style-image z własną unikalną ikoną.

                    Jeśli ikony na stronie znajdują się daleko od elementów lub nachodzą na nie, należy edytować wyrównanie i wcięcie ikon cyfrowych lub tekstu elementów.
                    

                    Jak utworzyć listę punktowaną (nienumerowaną)?

                    Lista punktowana ul li z naprzemiennymi ikonami

                    Bardzo spodobała mi się ta wypunktowana lista.

                    Ul ( dopełnienie: 11px 0 5px 0; ) ul li ( dopełnienie po lewej: 32px; margines na dole: 10px; czcionka: normalna 15px Verdana, bezszeryfowa; kolor: #2E2E2E; wysokość linii: 1,6; obramowanie na dole: 1px przerywany #ccc; dopełnienie-dół: 10px; ul li:before (treść: ""; pozycja: bezwzględna; szerokość: 27px; wysokość: 24px; lewy margines: -35px; margines górny: -2px; tło: adres URL ("images/sprite.jpg") 0px 2px bez powtórzeń; typ stylu listy: okrąg; ) ul li:nth-child(2n):before (treść: ""; pozycja: bezwzględna; szerokość: 27px; wysokość : 43px; lewy margines: -35px; tło: url("images/sprite.jpg") 0px -17px bez powtórzeń;

                    Zamiast standardowego typu listy, możesz przypisać właściwość „ścieżka do ikony” - obraz w stylu listy:url. Ale wtedy musisz określić zewnętrzny lewy margines od krawędzi witryny - bez tego ikony nie będą wyświetlane i wyjdą poza obszar zawartości.

                    Na potrzeby eksperymentu możesz przypisać wcięcia:

                    Ul li(obraz w stylu listy: url(images/radio.png); lewy margines: 30px; )

                    Naprzemienność ikon można ustawić za pomocą właściwości nth-child(An). W powyższym przykładzie użyto pseudoelementu before.

                    Kod zawiera jedną pseudoklasę n-te-dziecko(2n). Jego wartość wynosi 2. Okazuje się, że każdemu punktowi parzystemu odpowiada inna ikona. Jeśli zamiast 2n napiszesz 2n+1, to na punktach nieparzystych pojawi się kolejna ikona.

                    Dla każdego elementu listy można określić podkreślenie. W powyższym przykładzie punkty podkreślono liniami przerywanymi.

                    Do każdego elementu możesz także przypisać ramki, tła i ikony. Tylko nie przesadzaj. Naszym celem nie jest zachwycenie wszystkich fantazyjnym designem, ale poprawa jakości odbioru treści.
                    

                    Jak wyświetlić na stronie kilka list o różnych wzorach?

                    Czasami trzeba umieścić kilka list o różnych stylach.

                    Jeśli przypiszesz wspólne style, ten sam projekt zostanie przypisany do wszystkich list. Różne listy może zostać wyświetlony jeśli przypiszesz osobny identyfikator do tagu ol lub ul i wprowadzisz go w trybie html edycji artykułu. Cóż, w pliku stylu dla tego identyfikatora musisz napisać osobne style.

                    Oto na przykład jedna fajna opcja projektowania treści:

                    W HTML napisałbyś listę w ten sposób:

                    Treść
                    1. punkt 1
                    2. punkt 2
                    3. punkt 3

                    W CSS pisałbyś takie style:

                    Ol#sod( dopełnienie: 0px 20px 10px 51px; margines: 0,5em 0 0em 1em; kolor: #2E2E2E; typ stylu listy: brak; tło: #f1f4f5; lewa krawędź: #BDC3C7 4px solidna; wyświetlacz: inline- blok; ) ol#sod li() ol#sod li:before(waga czcionki:normalna!ważne)

                    Nowy styl różni się od głównego projektem tagu ol: tłem, stylem wyświetlania, linią po lewej stronie treści.

                    Dzięki zastosowaniu w tekście kilku zestawień o różnej konstrukcji, prezentacja informacji stanie się jeszcze ciekawsza. Podczas wystawiania dowolnych przedmiotów możesz ustawić niektóre ikony, a podczas wystawiania akcji możesz ustawić inne. Tutaj projekt jest ograniczony tylko przez Twoją wyobraźnię.

                    Metody te mają również zastosowanie przy projektowaniu pozycji menu, nagłówków i wszelkich innych elementów witryny.
                    

                    Jak utworzyć linki zakotwiczone na liście treści?

                    Jak zapisać je w kodzie HTML? Jeden fragment kodu otacza kotwicę linku, a drugi fragment kodu umieszczany jest obok miejsca, do którego mamy zostać przekierowani po kliknięciu w link.

                    Treść
                    1. Nagłówek 1
                    2. Nagłówek 2
                    3. Nagłówek 3

                    A w tekście artykułu musisz napisać to:

                    Nagłówek 1… Nagłówek 2… Nagłówek 3…

                    Może bardziej doświadczeni webmasterzy mogliby mnie w czymś poprawić. Po prostu radzę to, co sam wypróbowałem w praktyce.

                    Jeśli nadal masz jakieś pytania, chętnie je zobaczę w komentarzach.

                    Ageeva Weronika.

                    Możesz być także zainteresowany:

                    Tagi HTML

                    Znaczenie i zastosowanie

                    Lista numerowana (uporządkowana) dotyczy pozycji, które pojawiają się w określonej kolejności. Lista numerowana zaczyna się od znacznika

                    (skrót od angielskiego uporządkowana lista- lista uporządkowana). Każdy element listy zaczyna się od tagu
                    1. (element listy).

                       Obsługa przeglądarki

                       Atrybut			Opera		Eksplorator	Krawędź
                       zacznij, wpisz	Tak	Tak	Tak	Tak	Tak	Tak
                       wywrócony	Tak	Tak	Tak	Tak	NIE	NIE

                       Atrybuty

                       Atrybut	Oznaczający	Opis
                       kompaktowy	kompaktowy	Nieobsługiwane w HTML5. Określa, że ​​lista powinna być mniejsza niż normalny rozmiar (wysokość linii: 80%). Użyj CSS zamiast tego atrybutu.
                       	wywrócony	Określa, że ​​kolejność na liście numerowanej (posortowanej) powinna być malejąca. Atrybut nie jest obsługiwany Przeglądarki internetowe Odkrywca i Edge.
                       start	numer	Określa wartość początkową listy numerowanej (uporządkowanej). Wartości muszą być liczbami całkowitymi, dozwolone są wartości ujemne. W przypadku użycia z literami (typ = „A” i typ = „a”) liczba określona w wartości atrybutu jest liczbą porządkową litery w alfabecie. Na przykład start = „4” dopasuje literę "D" i lista zacznie się od niej. W przypadku użycia wartości start = „27” licznik jest resetowany do zera, a lista staje się dwucyfrowa („27” = „AA”, „28” = „AB”, „29” = „AC”. .).
                       typ	1 (domyślny) A (duży) a (małe litery) I (rzymski duży) ja (rzymski mały)	Określa typ punktora używany przy konstruowaniu listy numerowanej (uporządkowanej).

                       Przykład użycia

                       1. Pierwszy punktDrugi punkt
                       2. Trzeci punkt

                       Na stronie będzie to wyglądało następująco:

                       1. Pierwszy punkt.
                       2. Drugi punkt.
                       3. Trzeci punkt.

                       Jeśli chcesz, aby lista zaczynała się od określonej liczby (nie od 1), to musisz określić atrybut start dla tagu

                       .

                       Na przykład:

                       Kolejnym ciekawym atrybutem jest type , który pozwala określić numerację alfabetyczną („A” – wielkie litery, „a” – małe litery) lub numerację rzymską („I” – wielkie litery, „i” – małe litery).

                       Spójrzmy na przykład prezentujący wszystkie możliwe wartości atrybutu type (inne niż wartość domyślna):

                       >
                       1. Pierwszy punktDrugi punkt
                       2. Trzeci punkt
                       >
                       1. Pierwszy punktDrugi punkt
                       2. Trzeci punkt
                       >
                       1. Pierwszy punktDrugi punkt
                       2. Trzeci punkt
                       >
                       1. Pierwszy punktDrugi punkt
                       2. Trzeci punkt

                       Należy pamiętać, że dozwolone jest tworzenie list numerowanych (uporządkowanych) zagnieżdżonych w innych listach numerowanych (wewnątrz elementu listy

                       3. ):
                          1. Pierwszy punkt
                             1. Pierwszy punktDrugi punkt
                             2. Trzeci punkt
                             Drugi punkt
                             3. Trzeci punkt

                             Będzie to wyglądać tak na stronie.