CSS verstecken Kugeln

Das Cascading Style Sheet ist ein zusätzlicher Typ der HTML. Eine Webseite, ob es sich um eine statische oder eine dynamische Website handelt, wird mithilfe der drei grundlegenden Sprachen entwickelt: HTML, CSS und JavaScript. Unser Anliegen ist jedoch die ersten beiden Sprachen HTML und CSS. Beide Sprachen ergänzen sich bei der Entwicklung und Gestaltung der Webseite durch Verwendung . CSS besteht hauptsächlich aus drei Arten: Inline-, interne und externe CSS.

In diesem Artikel verwenden wir die Inline- und internen CSS, um die Tags von CSS zu erklären. Der Benutzer muss über Kenntnisse über HTML- und CSS -Tags verfügen. Wenn wir in unserem Thema diskutiert werden, werden wir über die Kugeln sprechen, die eine wichtige Rolle bei der Ausrichtung und Zusammenstellung des Inhalts, entweder Text oder Bilder usw. spielen., Auf der Website, um dem Benutzer ein ästhetisches Erscheinungsbild der Website zu erstellen.

CSS -Listen

Wenn wir über die Anzeige einiger unserer Inhalte auf der Website in einer bestimmten Weise der vertikalen Demonstration sprechen, stoßen wir auf die HTML -Listen. Diese Funktion wird verwendet, um den Text in Form von Kugeln anzuzeigen. Die beiden Arten von Listen befinden sich in HTML.

• Bestellliste
  1. Ungeordnete Liste

     Beide Typen werden durch die CSS -Kugeln gestylt. Immer wenn wir die Listen erstellen, wird sie durch Verwendung von Kugeln oder Markierungen gebildet. Die geordnete Liste enthält die Nummerierung der Daten. Während die ungeordnete Liste Scheiben, Kreise, Quadrate oder eine andere Form enthält, indem die Kugelform anpassbar ist.

     Manchmal brauchen wir keine Kugel, um zur Liste hinzugefügt werden zu werden. Wir möchten einfach, dass der Text ohne Symbol oder Zeichen auf der Seite angezeigt wird. Wir wünschen nur eine einfache Liste mit keinen Kugeln. Dies geschieht durch die Verwendung einer CSS-Eigenschaft, die die Eigenschaft vom Typ CSS-Listenstil ist.

     CSS-Listen-Syle-Eigenschaft

     Dies ist Eigentum von CSS, das sich mit dem Styling der Marker der Listenelemente befasst. Diese Eigenschaft ist unerlässlich, wenn wir eine Kugel auf die Liste anwenden müssen oder wenn wir die Standardkugel entfernen oder ausblenden möchten. Wir verwenden diese Eigenschaft mit den Klassen und IDs, um die Liste anzugeben, auf der wir den Stil der Kugeln anwenden müssen. Die für die CSS -List -Eigenschaft verwendete grundlegende Syntax lautet wie folgt:

     Listenstil-Typ: Disc;

     Dies ist in dem Style -Tag geschrieben, auf den dieser Effekt angewendet werden soll. Es gibt verschiedene Arten von Eigenschaftswerten, die sowohl auf den geordneten als auch auf ungeordneten Listen angewendet werden. Nur wenige von ihnen sind im Folgenden erwähnt:

     Scheibe, Kreis, Quadrat, Dezimaler, Unterroman, Oberroman, untere Latin und Oberlatin, Lower-Alpha, keine.

     Jetzt verwenden wir eine der Kugeln, um die Beispielimplementierung der Liste mit einer dischalen Kugel anzuzeigen.

     Wir verwenden einen Code, um einfach die Liste und die Kugeln anzuzeigen, mit denen standardmäßig eine Liste definiert wird. Es ist nicht notwendig, den Kugelnstyp für die Liste immer zu beschreiben. Standardmäßig wird in HTML eine bestimmte Art von Kugel ausgewählt. Aber hier verwenden wir die di.förmige Kugel im Code, um die Erklärung der Liste zu erläutern. Betrachten Sie zunächst den Abschnitt der HTML. Nachdem wir eine einfache Überschrift verwendet haben, verwenden wir eine ungeordnete Liste. Hier wird ein Inline -Stil verwendet.

     Dies zeigt die Art der Kugel, die auf die ungeordnete Liste angewendet werden soll. In der

     Tag, wir verwenden die drei Listen. Jede Zeile verwendet die
     • Tag zu deklarieren. Und dann die
     Tag ist geschlossen. Im Kopfabschnitt haben wir einige Styling der Überschrift gemacht, indem wir ihr Farbe gegeben haben. Wir können den Listenstil auch im Kopfabschnitt als internes Styling verwenden.

     HTML- und CSS -Code

     Speichern Sie diesen Code und führen dann diesen Texteditor HTML -Datei im Browser aus.

     Ausgang:

     Sie werden sehen, dass alle Elemente in der Liste geschrieben sind. Für die bestellte Liste können Sie das Dezimal, das untere Alpha, das untere Roman usw. verwenden. Durch die Verwendung derselben Eigenschaft im Listenstil.

     Kugeln verstecken

     Durch die Verwendung der Funktionstyp-Funktion im CSS-Listenstil können wir auch die Kugeln verbergen. Zu diesem Zweck werden wir den Namen der Kugel nicht angeben, aber wir werden das „Keine“ als Wert für die Eigenschaft verwenden. Die grundlegende Stilsyntax für die Liste, um die Kugeln auszublenden, lautet wie folgt:

     In dieser Implementierung verwenden wir eine ungeordnete Liste, um beide Listen mit Kugeln und einer ohne Kugeln anzuzeigen. Beginnen Sie also mit dem Kopfabschnitt des HTML -Code. Fügen Sie der Überschrift einen Stil hinzu. Der nächste Stil ist für die ungeordnete Liste mit einer ID entfernt. In der ID verwenden wir die Eigenschaft vom Typ Listenstil ohne Wert.

     Ul # entfernen
     Typ-Typ-Typ: Keine;
     Polsterung: 0;

     Polsterung ist der Abstand zwischen den Zeilen in der Liste. Diese Funktion, die wir hinzugefügt haben, verbirgt die Kugeln aus der Liste. In ähnlicher Weise verwenden wir für beide Listen die Ausrichtungen für die linke und die rechte Seite der Seite.

     HTML CSS -Code:

     Nach dem Kopfteil im Körper verwenden wir zuerst eine Überschrift. Ein Div wird nach CSS erstellt und ausgerichtet. Dann wird eine einfache, ungeordnete Liste deklariert, die Kugeln enthält, da wir die ID mit dieser Liste nicht entfernen. Alle Betreffnamen sind in jeder Liste geschrieben. Dann schließen wir die ungeordnete Liste und den Div -Container.

     Als nächstes ist die Div -Klasse wieder, die neben dem vorherigen Div platziert wird. Wir verwenden eine ID mit der Liste. Aufgrund dieser ID wird der Stil „None“ angewendet und die Kugeln versteckt.

     Alle Elemente auf der Liste werden in der Liste deklariert. Schließen Sie die Liste, Div und den HTML -Körper.

     HTML -Körpercode:

     Führen Sie die HTML -Datei im Browser aus. Sie werden sehen, dass eine Webseite gebildet wird. Eine Seite der Liste hat Kugeln und die andere Seite keine Kugeln. Auf diese Weise hilft uns dieses CSS-Listenstil-Typ, die Kugeln zu stylen oder sie aus der Liste zu entfernen.

     Ausgang:

     Abschluss

     In diesem Artikel wollten wir einige grundlegende und dennoch wichtige Eigenschaften in CSS und HTML beleuchten. Zu Beginn haben wir einige Grundkenntnisse über CSS und HTML eingeführt, indem wir die Arten von CSS hervorheben. Unter allen drei Typen haben wir uns auf das interne Styling mit der Eigenschaft von CSS konzentriert. Anschließend haben wir einen wichtigen Teil der HTML -Webseite erläutert, mit der der Inhalt der Seite in einer vertikalen Zeile erstellt und ausgerichtet ist, die eine Liste bildet. Beide Arten der Listen werden auch mit unterschiedlichen Formen und Kugelnstypen eingeführt. Anschließend wird die Eigenschaft im CSS-Listenstil erklärt, die ein wesentlicher Bestandteil beim Styling oder Entfernen des Layouts von Kugeln ist.

     Bei der Implementierung des Teils des Codes haben wir zunächst ein Beispiel implementiert. Das zweite Beispiel erläutert die kombinierte Verwendung der Style -Eigenschaft, um die Kugeln aus der Liste hinzuzufügen oder zu entfernen.