Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start] • [Elementy XHTML/HTML] • [Atrybuty XHTML/HTML] • [Style CSS]

cursor

OPIS

Styl definiuje wygląd kursora.

WARTOŚCI

• auto - CSS: 2.1, 2.0

wygląd uzależniony od kontekstu, wartość domyślna

• default - CSS: 2.1, 2.0

wygląd domyślny, zwykle strzałka

• URL - CSS: 2.1, 2.0

adres własnego wyglądu kursora

• n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize - CSS: 2.1, 2.0

zmiana orientacji kursora wyznaczona przez strony świata

• crosshair - CSS: 2.1, 2.0

kursor w postaci krzyża

• progress - CSS: 2.1

kursor postępu podczas przetwarzania danych

• pointer - CSS: 2.1, 2.0

kursor w postaci wskaźnika (np. strzałka)

• move - CSS: 2.1, 2.0

kursor dla elementów, które można przemieszczać

• text - CSS: 2.1, 2.0

kursor dla elementów tekstowych

• wait - CSS: 2.1, 2.0

kursor oczekiwania (np. zegarek lub klepsydra)

• help - CSS: 2.1, 2.0

kursor pomocy (np. znak zapytania)

• inherit - CSS: 2.1, 2.0

przejęcie wartości "rodzica", np. cursor:inherit;

POZOSTAŁE CECHY

• CSS: 2.1, 2.0
• dziedziczony: tak

PRZYKŁADY ZASTOSOWAŃ

• Przykład 1:

<p style="cursor: help;">Najedź tutaj i zobacz kursor "help"</p>

Najedź tutaj i zobacz kursor "help"

• Przykład 2:

<p style="cursor: wait;">Najedź tutaj i zobacz kursor "wait"</p>

Najedź tutaj i zobacz kursor "wait"

• Przykład 3:

<p style="cursor: text;">Najedź tutaj i zobacz kursor "text"</p>

Najedź tutaj i zobacz kursor "text"

• Przykład 4:

<p style="cursor: move;">Najedź tutaj i zobacz kursor "move"</p>

Najedź tutaj i zobacz kursor "move"

• Przykład 5:

<p style="cursor: pointer;">Najedź tutaj i zobacz kursor "pointer"</p>

Najedź tutaj i zobacz kursor "pointer"

• Przykład 6:

<p style="cursor: crosshair;">Najedź tutaj i zobacz kursor "crosshair"</p>

Najedź tutaj i zobacz kursor "crosshair"

• Przykład 7:

<p style="cursor: hand;">Najedź tutaj i zobacz kursor "hand"</p>

Najedź tutaj i zobacz kursor "hand"

• Przykład 8:

<style type="text/css"><!--
body { cursor: crosshair; }
--></style>