페이지 레이아웃을 할 때 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 :텍스트 ;}.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>커서:별칭;</div><divclass=copy>커서:복사;</div><divclass=move>커서:이동;</div><divclass=no-drop>커서:no-drop ;</div></body></html>실행해 보면 매우 직관적입니다.