เมื่อวางเค้าโครงหน้า CSS เป็นส่วนสำคัญของงาน ฉันมักจะได้ยินคนพูดว่า: HTML คือลักษณะที่บุคคลไม่มีการแต่งหน้า และการเติม CSS คือลักษณะที่บุคคลนั้นมีลักษณะหลังการแต่งหน้า ประโยคนี้เข้าใจง่ายและอธิบายความสัมพันธ์ระหว่าง CSS และ HTML ได้เป็นอย่างดี
มีคุณสมบัติมากมายใน CSS บทความนี้จะอธิบายลักษณะเมาส์ CSS เป็นหลัก นั่นคือคุณสมบัติเคอร์เซอร์ CSS และค่าทางเลือกมากมาย ตัวอย่างเช่น รูปร่างมือของเคอร์เซอร์ใช้คุณสมบัติเคอร์เซอร์:ตัวชี้
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 =เซลล์>เคอร์เซอร์:เซลล์;</div><divclass=crosshair>เคอร์เซอร์: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>เคอร์เซอร์:no-drop ;</div></body></html>คุณสามารถเรียกใช้และดูว่ามันใช้งานง่ายมาก