Kurzor označuje pozíciu na obrazovke, kde môže používateľ kliknúť alebo zadať text. Pre rôzne komponenty webovej stránky môžu byť použité rôzne kurzory. Vývojár musí zabezpečiť, aby kurzory používané v aplikácii boli atraktívne. Napríklad kurzor ukazujúcej ruky možno použiť na tlačidlo pri umiestnení kurzora myši. Indikátor textu (blikajúca čiara) sa používa na textovom poli, do ktorého sa má text zadať.
Existuje niekoľko štýlov kurzora v CSS, ktoré sa používajú iba zadaním hodnoty vlastnosti kurzora. Vývojár však môže vytvoriť prispôsobený kurzor pomocou CSS.
Táto študijná príručka vám poskytne:
-
- CSS kurzor
- Vlastný kurzor CSS
Predtým, ako prejdeme k téme, pozrime si niektoré tvary kurzora CSS s praktickým príkladom.
CSS kurzor
CSS ' kurzor ” vlastnosť má rôzne hodnoty, ako napríklad ukazovateľ, žiadny, priebeh a ďalšie. Vytvorme tabuľku, ktorá obsahuje riadky, na ktorých sa budú zobrazovať rôzne kurzory pri umiestnení kurzora myši.
Príklad: Vytvorenie tabuľky predstavujúcej rôzne kurzory CSS v HTML
Najprv pridajte do HTML prvok
| . Ostatné značky | |||
|---|---|---|---|
na vyplnenie stĺpcov údajmi.
| predstavuje prvky tlačidiel, ktoré sa aplikujú pomocou CSS “ kurzor ” majetok s rôznymi hodnotami.
| HTML kód pre vyššie uvedený scenár je uvedený nižšie: < tabuľky >< tr > < th štýl = 'width: 200px;' > css volič kurzora th > < th štýl = 'width: 200px;' > štýl kurzora th > tr > < tr > < td > kurzor: ukazovateľ td > < td < tlačidlo štýl = 'kurzor: ukazovateľ;' > ukazovateľ tlačidlo > td > tr > < tr > < td > kurzor: pokrok td > < td < tlačidlo štýl = 'kurzor: pokrok;' > pokrok tlačidlo > td > tr > < tr > < td > kurzor: nepovolený td > < td < tlačidlo štýl = 'kurzor: nepovolené;' > nepovolené tlačidlo > td > tr > < tr > < td > kurzor: žiadny td > < td < tlačidlo štýl = 'kurzor: žiadny;' > žiadny tlačidlo > td > tr > < tr > < td > kurzor: pohyb td > < td < tlačidlo štýl = 'kurzor: pohyb;' > pohybovať sa tlačidlo > td > tr > < tr > < td > kurzor: uchopiť td > < td < tlačidlo štýl = 'kurzor: chytiť;' > uchmatnúť tlačidlo > td > tr > < tr > < td > kurzor: kopírovať td > < td < tlačidlo štýl = 'kurzor: copy;' > kopírovať tlačidlo > td > tr > < tr > < td > kurzor: zmena veľkosti td > < td < tlačidlo štýl = 'kurzor: col-size;' > col-size tlačidlo > td > tr > < tr > < td > kurzor: veľkosť riadku td > < td < tlačidlo štýl = 'kurzor: row-size;' > veľkosť riadku tlačidlo > td > tr > < tr > < td > kurzor: text td > < td < tlačidlo štýl = 'kurzor: text;' > text tlačidlo > td > tr > tabuľky > Štýl „všetky“ prvky * {vypchávka: 0 ; okraj: 0 ; rodina písiem: Arial, Helvetica, bezpätkové; }
Štýlový prvok „stôl“. tabuľky {okraj: 0px auto; hranica: 1px solid gainsboro; }
“ marža ” sa správa tak, ako je uvedené vyššie. Štýlový prvok „td“. td {text-align: center; } sa použije s vlastnosťou “ zarovnanie textu “ s hodnotou “ stred “. Zarovná text stĺpca na stred.
| Štýlový prvok „tlačidlo“. tlačidlo {farba pozadia: kadetská modrá; padding: 10px 10px; farba: #ffffff; šírka: 150px; }
Vyššie uvedený kód vygeneruje nasledujúci výsledok: Vlastný kurzor CSSVývojári musia pre svoje aplikácie používať vhodné kurzory. Kurzory by mali byť atraktívne, aby získali pozornosť používateľov. Okrem toho je možné na tento účel vytvoriť vlastný kurzor. Pozrite sa na príklad nižšie! Príklad: Ako vytvoriť vlastný kurzor pomocou CSS? V HTML pridajte dva prvky div. Jeden s triedou ' kruh “ a druhý s triedou “ bod “. HTML < div trieda = 'kruh' > div >< div trieda = 'bod' > div > Štýlový prvok „telo“. telo {výška: 100vh; } Štýl „kruh“ div .kruh {šírka: 20px; výška: 20px; orámovanie: 2px plné biele; hraničný polomer: päťdesiat % ; }
Štýl „bod“ div .bod {šírka: 5px; výška: 5px; farba pozadia: biela; hraničný polomer: päťdesiat % ; }
Daný kód zobrazí na webovej stránke nasledujúci kurzor: JavaScript < skript >const cursorCircle = document.querySelector ( '.kruh' ) ; const cursorPoint = document.querySelector ( '.point' ) ; const moveCursor = ( a ) = > { const mouseY = e.clientY; const mouseX = e.clientX; kurzorCircle.style.transform = ` preložiť ( ${mouseX} px, ${mouseY} px ) ` ; kurzorPoint.style.transform = ` preložiť ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , presuňte kurzor ) skript >
Po poskytnutí vyššie uvedených blokov kódu sa kurzor automaticky presunie na obrazovku, ako je znázornené nižšie: ZáverCSS ' kurzor ” má množstvo hodnôt, ktoré označujú rôzne štýly kurzora. Využitím prvkov HTML a vlastností CSS však môžeme vytvárať prispôsobené kurzory. Potom sa implementuje kód JavaScript na aktiváciu jeho funkčnosti. Táto štúdia na praktickom príklade ukázala, ako vytvoriť vlastné kurzory CSS. |
