Lors de la mise en page d'une page , CSS est une partie indispensable du travail. J'entends souvent les gens dire : le HTML est à quoi ressemble une personne sans maquillage, et l'ajout de CSS est à quoi ressemble une personne après le maquillage. Cette phrase est facile à comprendre et explique très bien la relation entre CSS et HTML.
Il existe de nombreuses propriétés en CSS. Cet article explique principalement le style de la souris CSS, c'est-à-dire la propriété CSS du curseur, et ses nombreuses valeurs facultatives. Par exemple, la forme de la main du curseur utilise la propriété curseur:pointeur.
1. Syntaxe de base du curseur CSS
Qu'est-ce que l'attribut curseur ? Il fait référence à la forme du curseur qui apparaît lorsque le pointeur de la souris est placé dans la limite d'un élément. Il comprend des points d'interrogation, des petites mains et d'autres formes.
Lorsque vous l'utilisez, vous pouvez insérer style=cursor : une certaine valeur d'attribut dans n'importe quelle balise que vous souhaitez ajouter, ou vous pouvez l'ajouter dans le style CSS.
Par exemple:
pointeur, petite forme de main
aider, aider à façonner.
Il existe plus d'une douzaine de valeurs facultatives pour les valeurs d'attribut du curseur . Choisissez simplement la valeur appropriée en fonction de vos besoins pendant le travail.
2. Valeur de l'attribut du curseur CSS
Astuce : En raison des différents systèmes informatiques, il existe certaines différences dans les styles de souris.
Exemple:
<!DOCTYPEhtml><html><head><style>div{hauteur:30px;border:1pxsolidgreen;margin-top:10px;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{curseur :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>curseur:cell;</div><divclass=crosshair>curseur:crosshair;</div><divclass=text>curseur:texte;</ div> div><divclass=vertical-text>curseur:vertical-text;</div><divclass=alias>curseur:alias;</div><divclass=copy>curseur:copie;</div><divclass= move> curseur:déplacer;</div><divclass=no-drop>curseur:no-drop;</div></body></html>Vous pouvez l'exécuter et voir, c'est très intuitif.