페이지 레이아웃을 할 때 CSS는 작업에 없어서는 안 될 부분입니다. HTML은 화장하지 않은 사람의 모습이고, CSS를 추가하면 화장한 후의 모습이라는 말을 자주 듣습니다. 이 문장은 이해하기 쉽고 CSS와 HTML의 관계를 매우 잘 설명합니다.
CSS에는 많은 속성이 있습니다. 이 글에서는 주로 CSS 마우스 스타일, 즉 CSS 커서 속성과 그 많은 선택적 값에 대해 설명합니다. 예를 들어 커서 손 모양은 커서:포인터 속성을 사용합니다.
1. CSS 커서의 기본 구문
커서 속성이란 무엇입니까? 마우스 포인터가 요소의 경계 내에 위치할 때 나타나는 커서 모양을 말하며 여기에는 물음표, 작은 손 및 기타 모양이 포함됩니다.
이를 사용할 때 style=cursor: 특정 속성 값을 추가하려는 태그에 삽입하거나 CSS 스타일에 추가할 수 있습니다.
예를 들어:
포인터, 작은 손 모양
도와주세요, 모양을 만들어주세요.
커서의 속성값에는 12개 이상의 선택값이 있습니다 . 작업 중 필요에 따라 적절한 값을 선택하면 됩니다.
2. CSS 커서 속성 값
팁: 컴퓨터 시스템이 다르기 때문에 마우스 스타일에 차이가 있을 수 있습니다.
예:
<!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> div> div><divclass=vertical-text>커서:세로 텍스트;</div><divclass=alias>커서:별칭;</div><divclass=copy>커서:복사;</div><divclass= move> 커서:이동;</div><divclass=no-drop>커서:no-drop;</div></body></html>실행해 보면 매우 직관적입니다.