So stylen Sie die Eingabe und senden Sie die Schaltfläche mit CSS
CSS ist eine Sprache zum Erstellen von Stilblättern, die beschreiben, wie ein Dokument in einer Markup -Sprache wie HTML oder XML dargestellt wird. Zusammen mit HTML und JavaScript ist CSS eine Schlüsselkomponente des World Wide Web. Mit CSS können Benutzer alle HTML -Elemente stylen, einschließlich Tabellen, Schaltflächen, Eingabefeldern, Formularen und vielem mehr.
Dieser Beitrag wird erklären:
- So stylen Sie Eingabefelder mit CSS?
- So stylen Sie die Schaltfläche Senden mit CSS?
So stylen Sie Eingabefelder mit CSS?
Probieren Sie das genannte Verfahren aus, um das Eingangsfeld mit CSS zu stylen.
Schritt 1: Erstellen Sie das Eingabebuchformular
Erstellen Sie zunächst eine Form in HTML. Befolgen Sie dazu die unten aufgeführten Anweisungen:
- Erstellen Sie zunächst eine Form mit Hilfe des “" Schild.
- Innerhalb der Form, die “Element wird definiert, um Bildunterschriften für die “anzugebenEingangElemente. Die Etiketten "für"Attribut wird verwendet, um das Etikettelement mit Element durch" anzuhängen "Ausweis”.
- Der "TypDas Attribut bestimmt den Eingabetyp, z. B. Text oder Nummer.
- Der "KlasseDas Attribut wird zugewiesenEingang" Name, "PlatzhalterDas Attribut zuordnet den Platzhaltertext im Eingabebuch zu:
Ausgang
Schritt 2: Style -Eingangstaste in CSS
Um die Eingangstaste in CSS zu stylen, lesen Sie die angegebenen Eigenschaften:
Eingang
Polsterung: 8px;
Border-Radius: 10px;
Rand: 5px Auto;
Grenze: 1PX Solid #918383;
Hintergrundfarbe: #87b8b8;
Box-Shadow: 1PX 2PX 1PX 2PX RGB (230, 229, 229);
Farbe: #C9C2C2;
Umriss: Keine;
Schriftgröße: 18px;
Greife auf ... zu "EingangKlasse und anwenden Sie anschließend unten erwähnte Eigenschaften:
- Satz "PolsterungDas gibt den Raum um den Inhalt des Elements an.
- “GrenzradiusDie Eigenschaft legt die Kanten des Elements um.
- “Rand”Eigenschaft mit dem Wert“5px Auto"Fügt Platz hinzu"5px"Oben und unten und"Auto”Wird verwendet, um den gleichen Raum um das Element links und rechts zu setzen.
- “Grenze”Eigenschaft gibt den Rand um den Tisch an.
- “HintergrundfarbeDie Eigenschaft wird verwendet, um die Farbe des Hintergrunds anzugeben.
- “Box Schatten”Fügt einen Schatten um das Element hinzu. Es handelt.
- “FarbeEigenschaft bezieht sich auf die Schriftfarbe des Elements.
- “UmrissPasst die Linie um die Elemente an, um sie dominant zu machen.
- “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße des Elements festzulegen.
Ausgang
Als nächstes greifen Sie auf die “zu"EtikettElement zum Styling:
Etikett
Schriftgröße: 18px;
Farbe: RGB (15, 15, 15);
Rand: 20px;
Wenden Sie nach dem Zugriff auf das Etikettelement das Styling Ihrer Wahl an. Zum Beispiel haben wir uns beworben “Schriftgröße","Farbe", Und "Rand" Eigenschaften.
Ausgang
Bewegen wir uns in den nächsten Abschnitt, um die Schaltfläche Senden mit CSS zu stylen.
So stylen Sie die Schaltfläche Senden mit CSS?
Untersuchen Sie die folgende Beispiele, um die Schaltfläche Senden mit CSS zu stylen, das eine schrittweise Anleitung zum Erstellen und Stylen der HTML-Taste zeigt.
Schritt 1: Schaltfläche Senden erstellen
Fügen Sie zunächst den Überschrift Text in das Überschriften -Tag hinzu”. Erstellen Sie dann eine Schaltfläche, indem Sie die „verwenden“Element ”und setzen Sie den Schaltflächentyp als"einreichen”:
Style Button Element
Ausgang
Schritt 2: Style "Button" Element
Um die Taste in CSS zu stylen, lesen Sie die unten beschriebenen Eigenschaften:
Taste
Polsterung: 12px 40px;
Border-Radius: 8px;
Box-Shadow: 2px 2px 2px 1px RGB (131, 131, 219);
Grenze: 1px Festgrau;
Schriftgröße: 20px;
Greifen Sie mit dem Tag -Namen auf das Schaltflächenelement zu und wenden Sie die Eigenschaften auf der Schaltfläche gemäß Ihrer Präferenz an. Zum Beispiel haben wir uns beworben “Polsterung","Grenzradius","Box Schatten","Grenze", Und "Schriftgröße" Eigenschaften.
Ausgang
Fügen wir den Schwebeeffekt auf das Tastenelement hinzu:
Taste: Hover
Hintergrundfarbe: CadetBlue;
Farbe: RGB (246, 244, 248);
Der "Taste: SchwebeDer Selektor wird verwendet. Mit Hilfe der “schwebenSelektor können Benutzer in Echtzeit den CSS-Effekt generieren. Zum Beispiel haben wir die "festgelegt"Hintergrundfarbe" Und "FarbeEigenschaften wie oben beschrieben:
Wir haben besprochen, um das Eingabefeld zu stylen und die Schaltfläche mit CSS zu senden.
Abschluss
Um das Eingangselement zu stylen und mit CSS die Taste einzureichen, werden verschiedene Eigenschaften von CSS verwendet, einschließlich „Polsterung“, „Border-Radius“, „Box-Shadow“, „Rand“, „Rand“, „Hintergrundfarbe“, “ Schriftgröße “und vieles mehr. Benutzer können die angegebenen Eigenschaften anwenden, indem sie über den Tag -Namen auf die Elemente zugreifen. Dieser Beitrag hat die Methode zum Styling der Eingabetextfelder und der Einreichung von Schaltflächen mit CSS demonstriert.