CSS -Benutzer auswählen
Beispiel 1
Zunächst erstellen wir eine neue Datei in der Software, die in diesem Handbuch Visual Studio Code ist. Wenn wir eine neue Datei erstellen, können wir die Sprache auswählen und HTML auswählen. Der HTML -Code muss dann erstellt werden. Mit Visual Studio -Code können wir die grundlegenden Tags sofort durch Eingabe erwerben!"Und dann auf" Eingeben "klicken. Wir nutzen also diese Fähigkeit und sammeln all diese grundlegenden Tags. Wir werden die Benutzereigenschaft in CSS verwenden und diese Datei mit der CSS-Datei verknüpfen, indem wir das Tag "Link" im HTML-Head-Tag hinzufügen. Wir haben eine einfache Überschrift und eine DIV in diesem HTML -Code. Wir schreiben auch einen Text in das Überschriften -Tag "H1" und auch im "DIV" -Tag. Speichern Sie ihn nach Abschluss dieses Codes und fahren Sie mit der CSS -Datei fort. Jetzt werden wir die Eigenschaft „Benutzerauswahl“ in den CSS-Datei auf diese Texte anwenden.
Wir wählen „RGB“ als „Farbe“ des Überschriftens und die Werte, die wir hier verwenden. Dann wird „Algerian“ als „Schriftfamilie“ ausgewählt, und wir dekorieren diese Überschrift auch, indem wir hier „Untersteuerung“ einstellen. Wir fügen diese „Unterstreichung“ hinzu, indem wir die Eigenschaft „Textdekoration“ verwenden. Wir werden diesen Überschriftentext auswählen, indem wir darauf doppelklicken. Der Standardwert dieser Eigenschaft ist "automatisch". Wir haben nur "keine" als Wert dieser "Benutzer-Select" -Sache für das "Div" -Element festgelegt.
Wir werden die Eigenschaft „Webkit-User-Select“ platzieren, da Chrome diesen Präfix nur unterstützt und seinen Wert auf "None" festlegen wird. Anschließend verwenden wir die "MS-User-Select", die zum Angeben des Schlüsselwortwerts verwendet wird, das "keine" ist. Dies bedeutet, dass der Benutzer nicht in der Lage ist, den im Div geschriebenen Text auszuwählen. Wir verwenden auch nur die Eigenschaft "Benutzerauswahl" und setzen sie auf "Keine" fest. Wenn nun dieses Div -Element auf dem Bildschirm angezeigt wird, wählt der Benutzer das Div -Element nicht zum Text aus.
Die Ausgabe dieses Codes zeigt, dass in diesem Bild keinen ausgewählten Text angezeigt wird, da der Benutzer nicht den Text der DIV auswählen kann. Dies liegt an dem Wert "None" der Eigenschaft "Benutzerauswahl".
Beispiel 2
Wir haben hier eine einfache Überschrift und eine DIV. Wir fügen auch einen Text in das H1 -Überschriften -Tag sowie das "Div" -Tag ein. Jetzt werden wir die Eigenschaft „Benutzerauswahl“ auf diesen Div-Text anwenden.
Wir haben "RGB" als "Farbe" der Überschriften ausgewählt, und die Zahlen, die wir ausgewählt haben. Dann wählen wir "algerisch" als "Schriftfamilie" und fügen dieser Überschrift auch "Untersteuer" hinzu. Für das "Div" -Element haben wir einfach die Eigenschaft "Benutzer-Select" auf "automatisch" festgelegt. Wir verwenden hier die Eigenschaft „Webkit-User-Select“, da Chrome dieses Präfix nur zulässt und seinen Wert in „automatisch“ ändert.
Anschließend verwenden wir "ms-user-select", um den Schlüsselwortwert anzugeben, der in diesem Fall "automatisch" ist. Wir geben auch an, dass der Benutzer den Text auswählen dürfen. Wir setzen auch die Eigenschaft "Benutzer-Select" auf "automatisch" fest. Wenn dieses DIV-Element auf dem Bildschirm angezeigt wird, wählt der Benutzer diesen Text durch Doppelklicken aus. Dann setzen wir den Wert "20px" für die "Schriftgröße" der "Div" und "Times New Roman" als "Schriftfamilie".
Wenn die Ausgabe dieses Codes auf dem Bildschirm auf den Bildschirm wird, sieht es aus wie der erste Screenshot. Wir können diese Texte auswählen, indem wir auf sie doppelklicken, da wir das Schlüsselwort „Auto“ als Wert der Eigenschaft „Benutzerauswahl“ verwendet haben.
Im zweiten Screenshot können Sie auch den ausgewählten Text sehen, wenn wir den Text auswählen, indem wir darauf doppelklicken. Der ausgewählte Text wird in diesem Screenshot hervorgehoben.
Beispiel 3
Die HTML -Datei ist die gleiche wie oben. Wir ersetzen nur das DIV -Element durch den Absatz und ändern den Text, der in diesem Absatz -Tag geschrieben ist.
Wir richten alle "Körper" -Elemente im „Zentrum“ aus. Verwenden Sie dann „RGB (96, 18, 199)“ als „Farbe“ der Überschrift und die „Schriftfamilie“ entspricht den obigen Beispielen. Als Chrome akzeptiert nur das Präfix "Webkit", sodass wir die Eigenschaft "Webkit-User-Select" verwenden und ihren Wert auf "Text" festlegen, um den Wert "Text" zu setzen. Der Wert der „Moz-User-Select“ wird auf "Text" gesetzt. Anschließend verwenden wir "ms-user-select", um den Schlüsselwortwert anzugeben, der "Text" ist. Die Eigenschaft „Benutzerauswahl“ wird auch auf "Text" gesetzt, was bedeutet, dass der Benutzer den Text mit dieser Eigenschaft auswählen kann. Es hindert den Benutzer nicht daran, Text auszuwählen. Die "Schriftgröße" dieses "P" ist "22px" und "Calibri" wird hier als "Schriftfamilie" ausgewählt und wählen "grün" als "Farbe" des Textes.
Die Ausgabe zeigt, dass wir den Text von überall aus auswählen, von dem wir gewünscht werden möchten, wenn wir den Wert der Benutzer-Auswahleigenschaft in diesem Beispiel auf „Text“ festlegen.
Beispiel 4
In diesem Code ändern wir nur den Text, der im Div -Container geschrieben ist. Jetzt werden wir in diesem Beispiel auch die Eigenschaft „Benutzerauswahl“ anwenden, jedoch mit einem anderen Wert.
Alle "Körper" -Elemente sind im „Zentrum“ ausgerichtet. Verwenden Sie dann "Maroon" als "Farbe" des Übergangs, und die „Schriftfamilie“ ist die gleiche wie in den Beispielen zuvor. Wir setzen das Schlüsselwort "All" für den Wert "Webkit-User-Select", "Moz-User-Select", "MS-User-Select" und auch für die Standardsyntax, die "Benutzer-Select" ist. Wenn wir "All" als Wert dieser Eigenschaft "Benutzerauswahl" verwenden, wählt er den Text mit einem einzelnen Mausklick und nicht einem Doppelklick aus. Daher können wir den DIV-Text mit nur einem einzigen Klick auswählen und müssen nicht darauf doppelklicken, um diesen Text auszuwählen. Wir verwenden auch "23px" für die Schriftgröße und stylen diesen Text in "italic" -Fontstyle und "Fett" diesen Text mit Hilfe der Eigenschaft "Schriftgewicht".
Die Ausgabe vor der Textauswahl wird im ersten Screenshot angezeigt. Wir stellen den anderen Screenshot an, in dem wir den gesamten Text mit nur einem einzelnen Mausklick auswählen.
In diesem Screenshot wird der Text ausgewählt. Oder wir können sagen, dass der Text hervorgehoben wird, wenn wir eine einzelne Maus verwenden. Klicken Sie auf diesen Text. Wir müssen nicht auf den Text doppelklicken, um ihn auszuwählen, da wir das Schlüsselwort „All“ verwenden und es auch den gesamten Text ausgewählt.
Abschluss
Diese Anleitung wurde erstellt, um Ihnen zu helfen, die CSS-Eigenschaft „Benutzerauswahl“ zu verstehen. Wir haben dieses Thema ausführlich durchgesehen und viele Beispiele dafür angesehen, wie wir die Eigenschaft „Benutzerauswahl“ im CSS-Code verwendet haben. Wir haben bereits behandelt, wie die Benutzeranlage verwendet wird, um zu steuern. Wir haben auch behandelt, wie die Werte für diese Eigenschaft festgelegt werden, und alle Werte dieser Eigenschaft im Detail erläutert. Wir haben einen umfassenden Leitfaden für Sie zusammengestellt, in dem wir den Code und die detaillierten Erklärungen zur Verwendung ergeben haben, sowie die Ergebnisse.