Lista CSS

Arkusz stylów kaskadowych to język używany do ulepszenia bieżącej zawartości utworzonej przez język HTML. Oba języki działają razem, tworząc stronę internetową. HTML zajmuje się tworzeniem, a CSS projektuje wszystkie elementy HTML. HTML ma wiele treści, które pomagają w tworzeniu strony internetowej. We wszystkich z nich tekst jest podstawową treścią używaną przez każdą stronę internetową do wyświetlania wszelkiego rodzaju informacji. Jedna z zawartości używanych do wyświetlania tekstu jest listy. W tym artykule porozmawiamy o listach, które mają właściwość indentną tekstową i o tym, jak ta właściwość działa na liście.

Listy CSS:

Pionowa demonstracja danych HTML w formie uporządkowanej lub nieopisanej jest reprezentowana za pomocą specjalnej zawartości HTML znanej jako listy. Treść napisana w liście jest wymieniona z kulami. Ostatecznie listy są podzielone na dwa główne typy: uporządkowana i nieopisana lista. Jeśli chcemy podać numerację danych, jest to uporządkowana lista

. Dane z dowolnym rodzajem pocisku bez liczb to lista nieuporządkowana
. Tych dwóch
I
są odpowiedzialne tylko za wyświetlanie typu listy. Prosta składnia, która służy do utworzenia listy:


• dane



Jest to fragment strony internetowej posiadającej nieorządkowaną listę. Możesz zobaczyć, że wszystkie dane są reprezentowane tworząc małą listę z pociskami, która pokazuje, że jest to lista nieopisana.

CSS Własność i lista:

Jest to właściwość zastosowana do zawartości HTML, głównie w tekście. Służy do wyparcia tekstu z pierwotnego punktu do określonego miejsca. Ta właściwość służy do zwracania uwagi użytkownika na określoną treść. Być może widziałeś niektóre strony z akapitem, zaczynając od odległości w porównaniu do nagłówka, co czyni go bardziej widocznym przed widzem. Składnia używana do zastosowania tej właściwości jest prosta. Dodajemy tylko parametr długości do tej właściwości w pikselach lub z jednostkami procentowymi.

Tekst-Indent: Długość;

Przykład 1:
Ten przykład dotyczy wyświetlania listy elementów generowanych jak normalna lista, a także druga lista zawierająca elementy wypierane z ich pierwotnej pozycji. Zobaczmy kod nadwozia HTML, aby utworzyć listę.
Nagłówek jest dodawany do strony internetowej za pomocą

Tag nagłówka. Następnie użyliśmy uporządkowanej listy.



1. przedmiot


2. przedmiot



Ta uporządkowana lista utworzy domyślne cyfry numeracyjne z elementami na tagach listy. Kolejna nagłówek jest ponownie zadeklarowana, a następnie uporządkowana lista. Klasa CSS jest zadeklarowana w drugim

.

To jest tylko nazwa klasy CSS, jest ona zadeklarowana w sekcji głównej kodu HTML. Ilekroć ta nazwa klasy jest używana w dowolnym znaczniku, wszystkie filtry lub efekty wymienione w tej klasie są stosowane.

W głowę na stronie podaje się tytuł. Do zastosowania efektów służy do zastosowania efektów. Ten rodzaj stylizacji jest znany jako wewnętrzny CSS.

Zadeklarowany jest klasę. W opisie klasy nie użyliśmy bezpośrednio właściwości tekstu tekstowego. W rzeczywistości możemy wymienić elementy listy za pomocą właściwości wyściółki w dowolnym wymiarze. Tak więc, ponieważ chcemy, aby lista była wyświetlana z jej zawartością we właściwym kierunku, użyjemy właściwości wyściółki do wcięcia tekstu od lewej pozycji w kierunku właściwego kierunku.

Właściwość wyściółka to odległość zawartości HTML od określonej granicy zawartości zewnętrznej lub strony HTML.

Zamknij wszystkie tagi na głowie. Zapisz plik z rozszerzeniem HTML, aby utworzyć stronę internetową w przeglądarce za każdym razem, gdy ten plik jest otwierany za pomocą przeglądarki. A kiedy otworzymy go w edytorze tekstu, wyświetli tylko kod.

Zobaczysz, że prosta lista jest wyświetlana bez żadnego efektu wcięcia, ponieważ nie zastosowaliśmy do niej nazwy klasy CSS. Ale druga lista z niestandardowym wcięciem jest przeciągana w stronę właściwej pozycji. Dzieje się tak z powodu wyściółki.

Przykład 2:
W tym przykładzie używamy tego samego przykładu, ale z różnymi właściwościami CSS do wcięcia tekstu na liście. Wewnątrz stylu klasa CSS ma właściwość marginesu. Ten margines jest odległością treści od granicy strony. W takim przypadku mamy tekst HTML, więc tekst wewnątrz listy zostanie przeniesiony zgodnie z wartością.

.customindent
Margines -lew: -15px;

W tym przykładzie chcemy, aby lista była z lewym marginesem. Więc wzięliśmy wartość marży w kierunku lewej strony. Wartość jest pobierana w znaku ujemnym, aby cofnąć się. Jeśli odległość została przyjęta z dodatnim znakiem, lista będzie po prawej stronie strony.

Ten styl jest ponownie zastosowany do drugiej listy, którą utworzyliśmy z niestandardową klasą indeksu.

Teraz wykonamy stronę internetową, aby zobaczyć wynik. Zobaczysz, że uporządkowana lista utknęła po lewej stronie strony.

Przykład 3:
Ten przykład dotyczy użycia listy nieopisanej na stronie internetowej. Wewnątrz listy wzięliśmy 4 rzędy przedmiotów. W tym przykładzie nie będziemy korzystać z stylizacji CSS w klasie. Nie będziemy stosować właściwości tekstowej wskaźnika do całej listy. Pojedynczy wiersz na liście zostanie dokonany za pośrednictwem właściwości tekstowej. Zostanie to zrobione przy użyciu innej właściwości CSS, która jest właściwością „pierwszego w rodzaju”.

Ta właściwość dotyczy wybrania pierwszego wystąpienia elementu w tej samej zawartości HTML. Na przykład ta właściwość wpłynie tylko na pierwszy wiersz linii, nie wspominając o nazwie dowolnej listy lub klasy wewnątrz znacznika.

Pisząc instrukcję stylu w sekcji głównej kodu, użyjemy

1. Ponieważ chcemy zastosować wpływ na Li.
   Li: Pierwszy typu
   Tekst-indent: 50px;
   Typ w stylu listy: gwiazda;
   

   Pierwszy element zostanie przeniesiony w prawo z określoną odległością wspomnianą powyżej. A także podaliśmy liczbę tego elementu dla dyskryminacji.

   Podczas wykonania zauważysz, że pierwszy element listy jest przesunięty we właściwym kierunku, a kula jest również określana jako liczba dziesiętna.

   Wniosek

   Ten artykuł ma na celu opisanie celu i wykorzystania właściwości wcięcia na liście treści HTML. Zaczynamy od krótkiego wyjaśnienia list i ich typów. Właściwość wcięcia można zastosować do dowolnego z typów listy. Następnie zastosowaliśmy trzy podstawowe przykłady, w tym efekt wyściółki, margines i wcięcie tekstu wpływające. Wszystkie te przykłady pokazują również wcięcie całej listy i pojedynczy wiersz listy.