CSS -Eingangsbreite
Cascading -Stilblätter verwenden mehrere Eigenschaften, um alle HTML -Inhalte zu stylen. Eine der verwendeten grundlegenden Effekte besteht darin, die Dimension des Inhalts nur in einer bestimmten Richtung zu erhöhen (e.G., Breite und Höhe.) In diesem Artikel wird die Breite Eigenschaft erörtert, die die Verschiebung in der ursprünglichen Größe des Inhalts in horizontaler Richtung ist.
Eingabefeld:
Während wir ein Formular auf der Webseite erstellen, verwenden wir häufig verschiedene Textfelder, um die vom Benutzer in dieses Feld eingegebenen Daten zu erhalten. Dies geschieht durch den Eingabetyp des Feldes, "Text". Wir werden die Breiteneigenschaft verwenden, um die Größe der Eingangsfelder von HTML zu verbessern.
Beispiel 1:
Dieses Beispiel enthält die Beispielimplementierung eines Textfelds, das im HTML -Körper zusammen mit einem Inline -CSS deklariert ist. Inline CSS ist die Art von CSS, die im HTML -Tag des Körpers deklariert wird. Zunächst werden wir ein einfaches Textfeld deklarieren, indem wir die Breite Eigenschaft direkt im Eingabetyp -Tag verwenden. Dieser Code hat einen Körperteil direkt im Code, da keine Kopfabschnitt verwendet werden muss. Im Körper wird eine Hintergrundfarbe angewendet.
Während Sie ein Online -Formular ausfüllen, müssen Sie festgestellt haben, dass ein kleiner Text mit dem Textfeld oder dem Textfeld beiseite geschrieben wird. Dieser Text beschreibt den Zweck des Textfelds und den Texttyp, den der Benutzer eingeben soll. Zum Beispiel sind Name, Alter und Adresse die erforderlichen Informationsfelder des Textes. Diese Namen aller Felder sind als Etikett bezeichnet. In HTML wird ein angegebenes Etikett -Tag verwendet, um das Etikett für jedes Textfeld zu deklarieren.
| 1 | < label for = "name"> Einen Wert eingeben: |
Dieses Tag verwendet den Namen des Textfelds, zu dem es gehört, und erscheint, bevor dieses angegebene Feld auf der Webseite deklariert wird. Dann wird der Name des Etiketts erwähnt. Danach werden wir den Inhalt des Textfelds deklarieren. Während wir den Text schreiben, wird das Eingabefeld vom System gespeichert oder abgerufen. Die Art der Eingabe wird durch die Verwendung der ID ein Text mit dem Namen des Feldes sein.
| 1 |
Die dritte Eigenschaft in diesem Tag gehört zum CSS. Die Breite Eigenschaft wird mit der Style -Anweisung hinzugefügt, um die horizontale Dimension des Textfelds hinzuzufügen. Dies geschieht durch die Breite.
Speichern Sie diesen Code im Texteditor mit der HTML -Erweiterung, um die Webseite dieses Codes in einem beliebigen Browser anzuzeigen. Öffnen Sie diesen Code mit einer Option im Browser.
Sie werden sehen, dass ein einfaches Textfeld mit dem Etikett gebildet wird. Der Schachtel wird eine bestimmte Breite gegeben.
Dieses Konzept kann auch durch die Verwendung eines separaten Stilcodes im Kopfabschnitt durchgeführt werden, um den Code leicht verständlich zu machen. Diese Art von CSS, in der der Stil im Kopfabschnitt getrennt hinzugefügt wird, wird als interne CSS bezeichnet. Dies wird durch die Verwendung von IDs und Klassen für das spezifische Tag erreicht, zu dem wir den Effekt hinzufügen möchten. Beispiel.
| 1 2 3 4 5 6 7 8 9 |
Der Name dieser Klasse 'Helo' wird dem Eingabetag als Referenz hinzugefügt, um alle Eigenschaften zu diesem Textfeld Eingabetyp hinzuzufügen.
| 1 |
Bei der Ausführung wird das gleiche Textfeld erstellt.
Beispiel 2: CSS -Selektor
Im Gegensatz zum vorherigen Konzept, die Breite Eigenschaft in das Textfeld als Inline- und interne CSS durch das Klassenphänomen zu deklarieren. Dies ist ein CSS -Selektor. Dieser Selektor ist für jeden HTML -Inhalt unterschiedlich. Die Selektordeklaration erfolgt auch wie das interne CSS im Style -Tag im Kopfabschnitt.
| 1 2 3 4 5 | Input [type = "text"] Breite: 200px; |
Dies erfolgt mit dem Schlüsselworteingang in den Klammern. Der Eingangstyp wird erwähnt, der die Erklärung eines Textfelds angibt. In dieser Erklärung wird die Breite des Feldes angewendet.
Im Körper müssen keinen Klassennamen oder weitere Details zur Referenz hinzufügen. Wenn wir den Eingabetyp für die Erstellung von Textfeld deklarieren, wird er automatisch mit dem Style -Tag im Kopfabschnitt verbunden.
Beispiel 3:
Es gibt ein weiteres Beispiel für die Anwendung der Breite auf das Textfeld. Dies erfolgt durch die Verwendung des Style -Tags im HTML -Eingabinhalts -Tag und mit dem Hinzufügen von Margen und Polsterung zu den Textfeldern, um die Breite Eigenschaft zu verbessern. Die Breite Eigenschaft wird nur auf ein Textfeld angewendet, während der andere die Standardeinstellungen enthält. Dies zeigt den Unterschied bei der Erklärung eines Text -Posteingangs -Feldes mit und ohne Breite, ohne Breite. Beginnen wir nun mit dem HTML -Körpercode, um die Funktionsweise des Breitenstil -Tags auszuarbeiten.
Zuerst haben wir im Körper eine Überschrift deklariert. Verwenden Sie dann einen DIV -Container zur Webseite. Die Hauptfunktion dieses Containers besteht darin, HTML -Inhalte mit fester Ausrichtung hinzuzufügen, um sie an der richtigen Stelle zu halten. Verwenden Sie im Tag das Etikett -Tag, um den Namen hinzuzufügen. Verwenden Sie dann das Eingabe -Tag für das Textfeld und fügen Sie ihm eine Größe von 10 hinzu. Der Unterschied in Größe und Breite besteht darin, dass die Breite das Textfeld in Pixel vergrößert. Die Größe wird auch verwendet, um die Abmessungen eines jeden Objekts zu erhöhen, aber sie gilt für vertikale und horizontale Vergrößerung.
Machen Sie eine Pause durch die
Schild. Verwenden Sie dann erneut ein anderes Textfeld für die Daten. Fügen Sie das Feld "Datentyp" hinzu, damit der Benutzer nur das Datum dem Format hinzufügen kann. Das Kalendersymbol wird ebenfalls gebildet, was eine integrierte Funktion ist.
Im CSS -Teil wird die Schriftart für das Etikett hinzugefügt. Und im Eingangsfeld haben wir die Margen- und Polstereigenschaften verwendet.
| 1 2 3 4 5 6 7 | Eingabe Rand: 7px; Polsterung: 2px; |
Bei der Ausführung sehen Sie, dass das Größenattribut die Gesamtgröße des Textfelds des Namens vergrößert hat. Während die Breiteneigenschaft die horizontale Größe erhöht hat.
Abschluss:
Eine CSS -Eingangsbreite ist eine Funktion, mit der die Größe der Felder der Eingangstyp verbessert wird. Diese Felder sind auch Textfelder, Textbereiche und Kontrollkästchen. Wir haben die Textfelder verwendet, um die Arbeit der Breite in CSS Inline und internem CSS zu erarbeiten. Der Unterschied zwischen der Größe und der Breite wird ebenfalls erklärt. Die Breite Eigenschaft spielt eine wichtige Rolle bei der Ausrichtung der Form, indem der Wert des Breitenverhältnisses für alle Textfelder gleich bleibt.