CSS ukryj kule
W tym artykule używamy wbudowanego i wewnętrznego CSS do wyjaśnienia tagów CSS. Użytkownik musi mieć pewną wiedzę na temat tagów HTML i CSS. Przechodząc do naszego omawianego tematu, porozmawiamy o pociskach, które odgrywają znaczącą rolę w wyrównaniu i montażu treści, tekstu lub obrazów itp., na stronie internetowej, aby stworzyć estetyczny wygląd witryny dla użytkownika.
Listy CSS
Kiedy mówimy o wyświetlaniu niektórych naszych treści na stronie internetowej w określony sposób demonstracji pionowej, napotykamy listy HTML. Ta funkcja służy do wyświetlania tekstu w postaci pocisków. Dwa typy list są w HTML.
- Uporządkowana lista
- Lista nieopisana
Oba typy są stylizowane przez pociski CSS. Za każdym razem, gdy tworzymy listy, powstaje one przy użyciu pocisków lub znaczników. Lista uporządkowana zawiera numerowanie danych. Podczas gdy lista nieopisana zawiera dyski, kółka, kwadraty lub jakikolwiek inny kształt, dzięki czemu kształt pocisku można dostosowywać.
Czasami do listy nie potrzebujemy żadnej kuli. Po prostu chcemy, aby tekst pojawił się na stronie bez żadnego symbolu lub znaku. Po prostu pragniemy prostej listy nie ma pocisków. Odbywa się to poprzez wykorzystanie właściwości CSS, która jest właściwością typu CSS List Style.
Nieruchomość typu CSS-SYL-SYL
To jest własność CSS, która zajmuje się stylem znaczników pozycji listy. Ta właściwość jest niezbędna, gdy musimy zastosować dowolną kulę na listę lub jeśli chcemy usunąć lub ukryć domyślną kulę. Używamy tej właściwości z klasami i identyfikatorami, aby określić listę, na której musimy zastosować styl pocisków. Podstawowa składnia używana dla właściwości listy CSS jest następująca:
Typ w stylu listy: Disc;Jest to zapisane w znaczniku stylu, do którego należy zastosować ten efekt. Istnieją różne typy wartości właściwości, które są stosowane zarówno na listach uporządkowanych, jak i nieopisanych. Niewiele z nich jest wspomnianych następująco:
Dysk, okrąg, kwadrat, dziesiętne, dolna-rzymska, górna rzymska, dolna i górna latyna, dolna alfa, brak.Teraz używamy jednej z pocisków, aby pokazać przykładową implementację listy z kulą w kształcie dysku.
Używamy kodu, aby po prostu wyświetlić listę i pociski używane do domyślnie zdefiniowania listy. Nie jest konieczne opisanie typu pocisków dla listy. Domyślnie w HTML wybierany jest określony rodzaj kuli. Ale tutaj używamy kuli w kształcie dysku w kodzie, aby wyjaśnić deklarację listy. Najpierw rozważ sekcję HTML. Po użyciu prostego nagłówka używamy listy nieopisanej. Używany jest tutaj styl wbudowany.
- tag do zadeklarowania. A potem
To pokazuje rodzaj pocisku, który należy zastosować do listy nieopisanej. W środku
- tag, używamy trzech list. Każda linia używa
Kod HTML i CSS
Zapisz ten kod, a następnie wykonujemy ten plik HTML edytora tekstu w przeglądarce.
Wyjście:
Zobaczysz, że wszystkie elementy są zapisane na liście. W przypadku uporządkowanej listy możesz użyć dziesiętnego, niższego alfa, niższego rzymskiego itp. Korzystając z tej samej właściwości typu w stylu listy.
Ukryj pociski
Korzystając z funkcji typu CSS List Style, możemy również ukryć pociski. W tym celu nie określimy nazwy pocisku, ale użyjemy „brak” jako wartości właściwości. Podstawowa składnia stylu dla listy do ukrycia pocisków jest następująca:
W tej implementacji używamy listy nieopisanej, aby wyświetlać zarówno listy z kulami, jak i jedną bez pocisków. Zacznij więc od części kodu HTML. Dodaj styl do nagłówka. Następny styl dotyczy listy nieopisanej z usuniętym identyfikatorem. Wewnątrz identyfikatora używamy właściwości w stylu listy bez wartości.
Ul # UsuńTyp w stylu listy: Brak;
Wyściółka: 0;
Wyściółka to odległość między liniami na liście. Ta funkcja, którą dodaliśmy, ukrywa pociski z listy. Podobnie dla obu list używamy wyrównania dla lewej i prawej strony strony.
Kod HTML CSS:
Po części na ciele najpierw używamy nagłówka. Div jest tworzony i wyrównany w lewo według CSS. Następnie zadeklarowana jest prosta lista nieuporządkowana, która ma z nią pociski, ponieważ nie użyliśmy identyfikatora usuwania z tą listą. Wszystkie nazwy przedmiotów są zapisane na każdej liście. Następnie zamykamy listę nieopisaną i kontener Div.
Następnie jest klasa DIV, która jest ponownie umieszczona obok poprzedniego Div. Używamy identyfikatora z listą. Z powodu tego identyfikatora stosuje się styl „brak”, a pociski są ukryte.
Wszystkie elementy na liście są zadeklarowane w liście. Zamknij listę, div i korpus HTML.
Kod nadwozia HTML:
Uruchom plik HTML w przeglądarce. Zobaczysz, że utworzona jest strona internetowa. Jedna strona listy ma pociski, a druga strona nie ma pocisków. W ten sposób ten typ CSS w stylu List pomaga nam stylizować pociski lub usunąć je z listy.
Wyjście:
Wniosek
W tym artykule staraliśmy się rzucić światło na podstawowe, ale ważne właściwości w CSS i HTML. Na początku wprowadziliśmy podstawową wiedzę na temat CSS i HTML, podkreślając rodzaje CSS. Spośród wszystkich trzech rodzajów skupiliśmy się na wewnętrznej stylizacji z przedmiotem dyskusji CSS. Następnie wyjaśniliśmy ważną część strony internetowej HTML, która służy do tworzenia i wyrównania zawartości strony w linii pionowej, tworząc listę. Oba typy list są również wprowadzane z różnymi kształtami i rodzajami pocisków. Następnie wyjaśniono właściwość typu CSS w stylu listy.
Podczas wdrażania części kodu najpierw zaimplementowaliśmy przykład, aby opracować działanie tej właściwości stylu wraz z pociskami na liście nieopisanej. Drugi przykład wyjaśnia połączone użycie właściwości stylu do dodania lub usunięcia pocisków z listy.