Wie verwende ich den Cursor? So verwenden Sie das Cursor-Attribut in CSS und analysieren optionale Werte

Beim Entwerfen einer Seite ist CSS ein unverzichtbarer Bestandteil der Arbeit. Ich höre oft Leute sagen: „HTML ist, wie eine Person ohne Make-up aussieht, und das Hinzufügen von CSS ist, wie eine Person nach Make-up aussieht.“ Dieser Satz ist leicht zu verstehen und erklärt die Beziehung zwischen CSS und HTML sehr gut. Es gibt viele Attribute in CSS. Heute konzentrieren wir uns auf ein Attribut, das CSS-Cursor-Attribut und seine vielen optionalen Werte. Die Cursor-Handform verwendet beispielsweise das Cursor:Pointer-Attribut.

Wie verwende ich den Cursor?

1. Grundlegende Syntax des CSS-Cursors

Was ist das Cursorattribut: Bezieht sich auf die Cursorform, die angezeigt wird, wenn der Mauszeiger innerhalb der Grenzen platziert wird eines Elements. Es enthält Fragezeichen, kleine Hände und andere Formen.
Wenn Sie es verwenden, können Sie style="cursor: ein bestimmter Attributwert" in jedes Tag einfügen, das Sie hinzufügen möchten, oder Sie können es im CSS-Stil hinzufügen.

Zum Beispiel:

pointer, kleine Handform

help, Hilfe Gestalten

Der Attributwert des Cursors verfügt über mehr als ein Dutzend optionale Werte. Wählen Sie einfach den entsprechenden Wert entsprechend Ihren Anforderungen während der Arbeit aus.

2. CSS-Cursor-Attributwert

1. Der am häufigsten verwendete Cursor: Zeiger, der Cursor nimmt die Form einer kleinen Hand an.

<p style="cursor:pointer">pointer</p>

2. Cursor: Hilfe, Fragezeichen-Cursor

<p style="cursor:help;">pointer</p>

3. Cursor: Fadenkreuz, Kreuzcursor

<p style="cursor:crosshair;">pointer</p>

stellt diese häufig verwendeten und andere Attributwerte vor im Detail Sie sind alle auf die gleiche Weise geschrieben, ändern Sie einfach den Attributwert. Die spezifischen Werte und ihre Bedeutung finden Sie weiter unten.

Standard: Der Standardcursor, normalerweise ein Pfeil
Auto: Standard, der vom Browser festgelegte Cursor
Fadenkreuz: Der Cursor stellt das Fadenkreuz dar
Zeiger: Der Cursor stellt den Zeiger dar (eins Hand)
Verschieben: Der Cursor zeigt an, dass das Objekt verschoben werden kann.
E-Größenänderung: Der Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts verschoben werden kann.
Ne-Größenänderung: Der Cursor zeigt dies an Der Rand des rechteckigen Rahmens kann nach oben und nach rechts verschoben werden. Verschieben
nw-resize: Der Cursor zeigt an, dass der Rand des rechteckigen Rahmens nach oben und nach links verschoben werden kann.
n-resize: Der Cursor zeigt an dass der Rand des rechteckigen Rahmens nach oben verschoben werden kann
se-resize: Der Cursor zeigt den Rand des rechteckigen Rahmens an. Der Rand kann nach unten und nach rechts verschoben werden
sw-resize: Der Cursor zeigt den Rand an des rechteckigen Felds kann nach unten und links verschoben werden
s-resize: Der Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten verschoben werden kann
w-resize: Der Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten verschoben werden kann kann nach links verschoben werden
Text: Der Cursor zeigt Text an
Warten: Der Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr)
Hilfe: Der Cursor zeigt Hilfe an (normalerweise ein Fragezeichen)

Das Obige stellt hauptsächlich die Verwendung des Cursor-Attributs in CSS und die Bedeutung verschiedener Attributwerte im Editor vor, um zu sehen, was passiert Dir helfen.

Das obige ist der detaillierte Inhalt vonWie verwende ich den Cursor? So verwenden Sie das Cursor-Attribut in CSS und analysieren optionale Werte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!