ページをレイアウトするとき、CSS は不可欠な要素です。「HTML は化粧をしていない人の姿であり、CSS を追加することは化粧後の人の姿を表します」という言葉をよく聞きます。この文章はCSSとHTMLの関係をわかりやすく説明しています。
CSS には多くのプロパティがあります。この記事では主に CSS マウス スタイル、つまり CSS カーソル プロパティとその多くのオプションの値について説明します。たとえば、カーソルの手の形状では、cursor:pointer プロパティが使用されます。
1. CSSカーソルの基本構文
カーソル属性とは何ですか? マウス ポインターを要素の境界内に置いたときに表示されるカーソルの形状を指します。疑問符、小さな手、その他の形状が含まれます。
使用する場合は、追加したいタグに style=cursor: 特定の属性値を挿入するか、CSS スタイルに追加できます。
例えば:
ポインター、小さな手の形
助けて、形を作るのを助けてください。
カーソルの属性値には十数個のオプション値があります。作業中の必要に応じて適切な値を選択してください。
2.CSSカーソル属性値
ヒント: コンピュータ システムが異なるため、マウスのスタイルには一定の違いがあります。
例:
<!DOCTYPEhtml><html><head><style>div{height:30px;border:1pxsolidgreen;margin-top:10px;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{cursor :文章;}.vertical-text{cursor:vertical-text;}.alias{cursor:alias;}.copy{cursor:copy;}.move{cursor:move;}.no-drop{cursor:no-drop;} </style></head><body><divclass =cell>カーソル:セル;</div><divclass=crosshair>カーソル:クロスヘア;</div><divclass=text>カーソル:テキスト;</div><divclass=vertical-text>カーソル:垂直テキスト; </div>< divclass=alias>カーソル:エイリアス;</div><divclass=copy>カーソル:コピー;</div><divclass=move>カーソル:移動;</div><divclass=no-drop>カーソル:no-drop ;</div></body></html>
実行して確認すると、非常に直感的です。