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 Eigenschaften in CSS. In diesem Artikel werden hauptsächlich der CSS-Mausstil, also die CSS-Cursor-Eigenschaft, und ihre vielen optionalen Werte erläutert. Die Cursor-Handform verwendet beispielsweise die Cursor:Pointer-Eigenschaft.
1. Grundlegende Syntax des CSS-Cursors
Was ist das Cursor-Attribut? Es bezieht sich auf die Cursorform, die erscheint, wenn der Mauszeiger innerhalb der Grenze eines Elements platziert wird. Es umfasst Fragezeichen, kleine Hände und andere Formen.
Wenn Sie es verwenden, können Sie style=cursor: einen bestimmten Attributwert in jedes Tag einfügen, das Sie hinzufügen möchten, oder Sie können ihn im CSS-Stil hinzufügen.
Zum Beispiel:
Zeiger, kleine Zeigerform
helfen, mitgestalten.
Es gibt mehr als ein Dutzend optionale Werte für die Attributwerte des Cursors . Wählen Sie einfach den entsprechenden Wert entsprechend Ihren Anforderungen während der Arbeit aus.
2. CSS-Cursor-Attributwert
Tipp: Aufgrund unterschiedlicher Computersysteme kann es zu gewissen Unterschieden im Mausstil kommen.
Beispiel:
<!DOCTYPEhtml><html><head><style>div{height:30px;border:1pxsolidgreen;margin-top:10px;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{cursor :Text ;}.vertical-text{cursor:vertical-text;}.alias{cursor:alias;}.copy{cursor:copy;}.move{cursor:move;}.no-drop{cursor:no-drop;} </style></head><body><divclass =cell>cursor:cell;</div><divclass=crosshair>cursor:crosshair;</div><divclass=text>cursor:text;</div><divclass=vertical-text>cursor:vertical-text; </div>< divclass=alias>cursor:alias;</div><divclass=copy>cursor:copy;</div><divclass=move>cursor:move;</div><divclass=no-drop>cursor:no-drop ;</div></body></html>Sie können es ausführen und sehen, es ist sehr intuitiv.