Kod HTML zawiera dwie podstawowe części: i . Część główna zawiera znacznik tytułu i tag, jeśli używamy wewnętrznego CSS. Tag zawiera tagi wszystkich treści, które chcemy utworzyć na stronie internetowej. Znacznik listy jest również zapisany wewnątrz znacznika ciała.
Podobnie kod CSS jest klasyfikowany jako CSS inline, wewnętrzny i zewnętrzny. Efektem zapisanym znacznikiem wewnątrz znacznika zawartości jest wbudowany CSS. Ten, który jest zapisany wewnątrz sekcji HTML, to wewnętrzne CSS. A trzeci, zewnętrzny CSS, jest zadeklarowany w pliku innego edytora tekstu za pomocą „.rozszerzenie CSS ”.
Co to jest lista HTML?
Hypertext Markup Język tworzy treść, aby stworzyć stronę internetową, w tym tekst, obrazy, tabele, kształty, akapity itp. Tekst jest elementem konstrukcyjnym dowolnej strony internetowej. Można to napisać na kilka sposobów, a jednym podejściem jest „Lista” HTML. Lista to pionowa demonstracja tekstu wraz z kulami lub bez. Lista HTML pojawia się po prostu w taki sam sposób, jak tworzymy listę ręczną. Lista jest podzielona na kolejne kategorie. Gdy tekst jest reprezentowany liczbami, jest to wykonywane przez uporządkowaną listę
Składnia listy nie uporządkowanej jest podana w poprzednim przykładzie. Pierwsze tagi otwarcia i zamykania listy są zadeklarowane. Te zewnętrzne znaczniki decydują, czy lista jest zamówiona czy nie zamówiona. Wewnątrz obu tagów,
Własność w stylu listy
Właściwość CSS List Style to efekty stosowane do pocisków listy. Istnieje kilka rodzajów właściwości stylu list. Niektóre z nich są tutaj wyjaśnione. Podstawowa składnia jest napisana jako:
Wdrożyćmy i wyjaśnijmy działanie tej nieruchomości.
Lista typu stylu dla nieuporządkowanej listy
Najpierw stosujemy pewne efekty do pocisków nieuporządkowanej listy. Te kule są symbolami i kształtami. Na przykład koła, kwadraty, dyski itp.
Wartość właściwości: dysk
Tworzymy prostą stronę internetową, na której nagłówek jest podawany w części ciała. Używamy znacznika akapitowego do napisania tekstu. Następnie tworzona jest lista nieopisana, jak wcześniej opisaliśmy. Ta sama składnia następuje. W środku
Wewnątrz znacznika, trzy elementy listy są zadeklarowane. Zamknij listę i zewnętrzny znacznik. To wszystko z sekcji ciała kodu HTML.
Teraz prowadzimy do sekcji głównej. W głowę podajemy tytuł strony. Następnie zadeklarowany jest wewnętrzny tag stylu CSS. Wewnątrz, „sub”, nazwa używana wewnątrz nieuznosego znacznika listy, jest zadeklarowana. Wszystkie efekty są stosowane w tej klasie.
Identyfikatory i klasy są tworzone w celu zbiorowego wykorzystania efektów, które chcesz zastosować. Następnie użyj tych nazw wewnątrz znaczników, w których chcemy zastosować te efekty.
.podUżywany tutaj styl listy to dysk. Jeśli nie używamy tej właściwości w tworzeniu listy, tworzone domyślne pociski są w kształcie dysku.
Dalsze efekty są na nagłówku. Kolor czcionki jest dodawany do nagłówka. Oprócz ciała stosuje się kolor tła i kolor czcionki.
Zapisz kod w edytorze tekstu z rozszerzeniem HTML, aby utworzyć stronę internetową, która ma być wykonana w przeglądarce. Korzystając z tego rozszerzenia, zobaczysz, że symbol zapisanego pliku edytora tekstu jest zmieniany na ikonę przeglądarki. Jest to wskazanie, że jest to strona internetowa.
Wykonasz, że utworzona strona internetowa zawiera listę nazw przedmiotów, a elementy te są zadeklarowane przez pociski dysku.
Wartość właściwości: okrąg
Po użyciu domyślnej wartości pocisku dysku, używamy innego kształtu do stylizowania listy nieopisanej. Tym razem właściwość Style zawiera klasę z typem stylu List Circle. Podczas gdy reszta kodu, niezależnie od tego, czy część głowy, czy sekcja ciała, jest taka sama. Dokonaj tylko zmian w stylu, aby zobaczyć działające efekty.
List typu stylu: Circle;Kod CSS: | Wyjście: |
Zamknij znacznik stylu i wykonaj kod w przeglądarce. Zobaczysz, że wypełnione pociski dysku są zastępowane przez pociski w kształcie koła.
Lista typu stylu dla uporządkowanej listy
Teraz używamy wartości numerycznych i alfabetycznych, aby zastosować wpływ na pociski uporządkowanej listy.
Wartość właściwości: dziesiętne
Jeśli chodzi o utworzenie uporządkowanej listy, używamy dowolnej wartości liczbowej. Tym, który jest zwykle używany w manualnym liczeniu lub numeracji, jest notacja dziesiętna. Najpierw wybierzemy liczbę dziesiętną. Cały kod HTML jest taki sam, a kod CSS jest rozrywany tylko za pomocą nazwy pocisku, określanego jako „dziesiętne”. Efekt typu stylu listy wymieniony w klasie CSS to dziesiętne.
Typ w stylu listy: dziesiętny;Kod CSS | Wyjście: |
Po wykonaniu zobaczysz, że pociski są zmieniane z okręgu na liczby dziesiętne.
Wartość właściwości: niższy greek
Właściwość w stylu listy jest wymieniona w Lower Greek w celu zastosowania tego efektu i zmodyfikowania właściwości w stylu listy listy.
Kod CSS | Wyjście: |
Wartość właściwości: Brak
Możemy również ukryć pociski listy za pomocą słów kluczowych „Brak” w właściwości typu stylu listy.
Kod CSS | Wyjście |
Wartość nieruchomości: Gruzin
Ostatnia, ale nie najmniej, stosowana wartość to wartość „gruzińska”, która jest dodawana do pocisków listy.
Kod CSS | Wyjście |
Wniosek
Właściwość CSS List Style to efekt stosowany na pociskach listy, niezależnie od tego, czy lista jest zamówiona, czy nie uporządkowana. Zaczęliśmy od prostego wprowadzenia języków HTML, jak i CSS, w tym ich deklaracji tagów. Następnie opracowaliśmy strukturę list HTML wraz z ich typami. Właściwość typu stylu listy jest opracowana i wdrożyliśmy kilka stylów, aby zobaczyć, jak działa ta właściwość. Wykorzystaliśmy kilka przykładów zarówno dla uporządkowanych, jak i nieopisanych list osobno.