CSS -Tastegröße

Dieser Artikel wird das Konzept der Schaltflächengröße im CSS -Ansatz durchlaufen. Wie wir wissen, ist die Standardtaste klein und nicht sichtbar. Wir werden das CSS also auf zwei separate Weise verwenden, um die Knopfgröße zu erhöhen und sie bei einem Effekt wie dem Schwebeffekt zu ändern. Alle diese Beispiele werden in der Notepad ++ -Engebung durchgeführt.

Beispiel 01:

In diesem Beispiel werden wir die Eigenschaft Breite und Höhe für das Tastenelement verwenden, um seine Größe zu erhöhen. Wir werden den CSS -Style -Tag -Ansatz in diesem Beispiel verwenden, um mehrere Eigenschaften hinzuzufügen. Zunächst werden wir uns die Standardgröße des in einer HTML -Datei vorhandenen Schaltflächenelements ansehen.

Wie wir im angegebenen Skript sehen können, haben wir die Größe der Schaltfläche nicht verändert. In der folgenden Ausgabe können wir feststellen, dass die Schaltflächengröße sehr klein ist und für eine Webseite nicht möglich ist.

Also fügen wir jetzt das Styling zur Schaltfläche hinzu. Zunächst öffnen wir das Head -Tag für die Datei. In diesem Tag heißt das Style -Tag für CSS. In diesem Tag fügen wir alle Eigenschaften für das Schaltflächenelement hinzu. Wir schreiben alle Eigenschaften für das Schaltflächenelement in der Klassenklasse der Schaltflächenklasse. Zuerst setzen wir die Hintergrundfarbe auf „Gelb“ ein. Dann setzen wir die Breite im Pixelformat auf "100px". Schließlich setzen wir die Höhe im Pixelformat auf "30px". Wir schließen die Stil- und Kopf -Tags, nachdem alle Formatierungen abgeschlossen sind. Dann gehen wir zum Körpermarke. Wir schreiben die Überschrift der Seite mit dem H1 -Tag im Body -Tag und öffnen dann das Schaltflächen -Tag. Die Klasse aus dem Style -Tag wird im Schaltflächen -Tag aufgerufen. Anschließend schließen wir das Schaltflächen -Tag mit dem Text, der auf der Taste dazwischen angezeigt wird, sowie mit dem Body -Tag.

Wie bereits erläutert, haben wir den Code im vorherigen Skript hinzugefügt. Jetzt öffnen wir dieses neue Skript in unserem Browser, nachdem wir es im richtigen Format gespeichert haben.

In der angegebenen Ausgabe können wir sehen, dass die Schaltfläche alle Formatierung enthält, einschließlich der Größe, die wir in der Stilklasse im Dateiheader angegeben haben.

Beispiel 02: Verwenden von Inline -CSS, um die Größe einer Schaltfläche in einer HTML -Datei zu ändern

In diesem Beispiel werden wir das Inline -CSS verwenden, um die Größe des Standard -Tastelelements einer HTML -Datei zu ändern. Alle Stileigenschaften werden im Schaltflächen -Tag zugewiesen. Dies ist eine unkonventionelle Methode, um CSS zu jedem Element hinzuzufügen und nur dem aktuellen Element zugeordnet ist.

Wie wir im vorherigen Snippet sehen können, haben wir uns direkt in den Körper der Datei umgezogen. Zuerst öffnen wir das H1 -Tag, um eine Überschrift für die Seite zu schreiben und dann zu schließen. Dann öffnen wir das Button -Tag. In diesem Tag nennen wir das Style -Attribut nach seinem Schlüsselwort. Danach schreiben wir alle Eigenschaften für das Button -Element in den umgekehrten Kommas und trennen sie mit dem Semikolon -Zeichen. Zunächst weisen wir die Hintergrundfarbe „Gelb“ zu. Dann weisen wir die Breite im Pixelformat zu. Am Ende weisen wir die Höhe auch im Pixelformat zu. Danach schließen wir das Schaltflächen -Tag mit dem dazwischen liegenden Text, der auf der Schaltfläche angezeigt wird. Und schließen Sie das Körpermarke zusammen mit ihm. Jetzt speichern wir diese Datei in der “.HTML ”-Format und öffnen Sie es in unserem Browser, um das folgende Ergebnis zu erhalten:

Wie wir in der Ausgabe unseres Skripts sehen können. Die Taste enthält alle im Tag definierten Werte, einschließlich der Höhe und Breite.

Beispiel 03: Erhöhen Sie die Größe einer Taste, wenn sie mit unserem Cursor in einer HTML -Datei schwebt

In diesem Beispiel werden wir die Breite und Höheneigenschaften des Tastenelements verwenden, um es größer zu machen, nur wenn der Zeiger darüber dran ist. In diesem Beispiel werden wir die CSS -Style -Tags verwenden, um dem Schaltflächenelement zahlreiche Attribute und Effekte hinzuzufügen.

In diesem Beispiel passen wir die Schaltfläche mit den CSS -Style -Tags an. Zunächst öffnen wir das Kopf -Tag der Datei. Und dann nennen wir das CSS -Style -Tag von dort aus. Wir fügen alle Attribute des Schaltflächenelements in diesem Tag hinzu. In der Klammung der Schaltflächenklasse geben wir alle Eigenschaften für das Tastenelement ein. In diesem Beispiel setzen wir die Hintergrundfarbe auf „Gelb."Dann öffnen wir eine Schaltflächenklasse, die eine Methode namens" Hover "erbt. In dieser Funktion machen wir Folgendes: Wir setzen die Breite im Pixelformat auf "100px" und die Höhe im Pixelformat auf "30px" eingestellt, die Höhe im Pixelformat einstellen. Nachdem wir die Formatierung beendet haben, schließen wir die Stil- und Kopf -Tags. Dann gehen wir zum Körpermarke. Wir verwenden das H1 -Tag, um den Titel der Seite im Body -Tag zu erstellen und dann das Schaltflächen -Tag zu öffnen. Das Schaltflächen -Tag verwendet die Klasse aus dem Style -Tag und hat den Text, der auf der Taste dazwischen angezeigt wird. Anschließend schließen wir das Schaltflächen -Tag und das Body -Tag.

Wie wir in der vorherigen Ausgabe sehen können, haben sich die Größe und die Hintergrundfarbe geändert, als wir mit unserem Cursor auf dem Knopf schwebten. Dies liegt daran.

Beispiel 04: Verwenden der Schriftgröße, um die Größe einer Taste mit CSS zu verbessern

In diesem Beispiel entscheiden wir uns für eine andere Methode, um die Größe einer Taste zu ändern. Die Eigenschaft der Schriftgröße wird verwendet, um die Größe einer Taste mit dem Style Tag CSS zu erhöhen.

Zunächst öffnen wir das Style -Tag im Dateiheader und erstellen eine Styling -Klasse für die Schaltfläche. In dieser Klasse weisen wir der Schaltfläche eine Hintergrundfarbe zu. Danach weisen wir auch die Schriftgröße zu. In diesem Fall ist es auf "25px" eingestellt. Dann schließen wir die Klasse und die Stil- und Kopf -Tags. Dann enthält das Body -Tag eine Überschrift und ein Knopf -Tag, bei dem die Style -Tag -Klasse darin geerbt wird. Danach schließen wir die Tags und speichern die Datei, um sie in unserem Browser zu öffnen.

Im Ausgabebildschirm können wir feststellen, dass die Schaltfläche eine erhöhte Größe aus der Standardtaste hat, die das HTML aufgrund der Änderung der Schriftart der Schriftgröße bietet.

Abschluss

In diesem Artikel haben wir die Größe des in der Hypertext -Markup -Sprache vorhandenen Schaltflächenelements erörtert. Die Standardschaltfläche hat eine sehr kleine Größe, die es schwierig macht, auf einer Webseite zu navigieren. Also haben wir die verschiedenen Ansätze in CSS wie dem Style Tag und Inline CSS -Ansatz verwendet. Die häufigste Eigenschaft, die zur Veränderung der Größe verwendet wird. Wir haben dieses Konzept diskutiert und dies im Notizblock implementiert++. Wir haben auch den Ansatz der Schriftgröße implementiert, um die Größe einer Taste zu erhöhen.