Курсор означава позицију на екрану где корисник може да кликне или унесе текст. Могу се користити различити курсори за различите компоненте веб странице. Програмер мора осигурати да курсори који се користе у апликацији морају бити атрактивни. На пример, показивач руком се може користити на дугмету при лебдењу мишем. Индикатор текста (трепћућа линија) се користи у оквиру за текст у који треба да се унесе текст.
Постоји неколико стилова курсора у ЦСС-у који се користе само навођењем вредности својства курсора. Међутим, програмер може креирати прилагођени курсор користећи ЦСС.
Овај водич за учење ће пружити:
-
- ЦСС курсор
- Прилагођени курсор ЦСС
Пре него што налетимо на тему, хајде да видимо неке од облика ЦСС курсора са практичним примером.
ЦСС курсор
ЦСС “ курсор ” својство има различите вредности, као што су показивач, ниједан, напредак и још много тога. Хајде да направимо табелу која садржи редове на којима ће различити курсори бити приказани при лебдењу мишем.
Пример: Креирање табеле која представља различите ЦСС курсоре у ХТМЛ-у
Прво додајте елемент <табле> у ХТМЛ. Унутар овог елемента:
-
- Ознака <тр> ће се користити за прављење редова.
- Први ред садржи наслове.
- Ови наслови су специфицирани коришћењем ознака <тх>. Друге ознаке <тр> садрже две ознаке <тд> за попуњавање колона подацима.
- Друга ознака <тд> представља елементе дугмета који се примењују помоћу ЦСС-а “ курсор ” својство са различитим вредностима.
ХТМЛ код за горњи сценарио је дат у наставку:
< сто >< тр >
< тх стил = 'ширина: 200 пиксела;' > цсс селектор курсора тх >
< тх стил = 'ширина: 200 пиксела;' > стил курсора тх >
тр >
< тр >
< тд > курсор: показивач тд >
< тд >< дугме стил = 'курсор: показивач;' > показивач дугме > тд >
тр >
< тр >
< тд > курсор: напредак тд >
< тд >< дугме стил = 'курсор: напредак;' > напредак дугме > тд >
тр >
< тр >
< тд > курсор: није дозвољено тд >
< тд >< дугме стил = 'курсор: није дозвољено;' > није дозвољено дугме > тд >
тр >
< тр >
< тд > курсор: нема тд >
< тд >< дугме стил = 'курсор: нема;' > ниједан дугме > тд >
тр >
< тр >
< тд > курсор: померити тд >
< тд >< дугме стил = 'курсор: помери;' > потез дугме > тд >
тр >
< тр >
< тд > курсор: зграби тд >
< тд >< дугме стил = 'курсор: зграби;' > граб дугме > тд >
тр >
< тр >
< тд > курсор: копија тд >
< тд >< дугме стил = 'курсор: копија;' > копија дугме > тд >
тр >
< тр >
< тд > курсор: цол-ресизе тд >
< тд >< дугме стил = 'курсор: цол-ресизе;' > цол-ресизе дугме > тд >
тр >
< тр >
< тд > курсор: промена величине реда тд >
< тд >< дугме стил = 'курсор: промена величине реда;' > ред-промена величине дугме > тд >
тр >
< тр >
< тд > курсор: текст тд >
< тд >< дугме стил = 'курсор: текст;' > текст дугме > тд >
тр >
сто >
Горњи код ће генерисати следећи резултат:
У следећем одељку применићемо различите стилове на ХТМЛ елементе.
Стилизирајте „све“ елементе
* {паддинг: 0 ;
маргина: 0 ;
породица фонтова: Ариал, Хелветица, санс-сериф;
}
Сви ХТМЛ елементи се примењују са ЦСС стиловима који су објашњени у наставку:
-
- “ паддинг “ имовина са “ 0 ” вредност не укључује простор око садржаја елемента.
- “ маргина “ имовина са “ 0 ” вредност не додаје простор изван сваког од елемената.
- “ породица фонтова ” својству је додељена вредност “ Ариал, Хелветица, санс-сериф ”. Листа стилова фонта је дата да би се осигурало да ако претраживач не подржава први стил, морају се применити други стилови.
Стилски елемент „табела“.
сто {маргина: 0пк ауто;
граница: 1пк солид гаинсборо;
}
Елемент ХТМЛ табеле се примењује са ЦСС својствима која су описана у наставку:
-
- “ граница ” својство је постављено са вредношћу “ 1пк солид гаинсборо ” који представља ширину ивице, стил ивице и боју ивице.
“ маргина ” својство се понаша као што је горе наведено.
Елемент стила „тд“.
тд {тект-алигн: центар;
}
Елемент <тд> се примењује са својством “ Поравнање текста ” са вредношћу “ центар ”. То ће поравнати текст колоне у средини.
Стилски елемент „дугме“.
дугме {боја позадине: кадетско плава;
паддинг: 10пк 10пк;
боја: #фффффф;
ширина: 150пк;
}
Елемент дугмета који се користи у горњем ХТМЛ коду је стилизован новим ЦСС својствима која су објашњена у наставку:
-
- “ боја позадине ” одређује боју позадине елемента.
- “ паддинг ” са вредностима додељеним као „ 10пк 10пк ” додаје простор од 10пк на врху-дону и 10пк на левој и десној страни ставки елемента.
- “ боја ” прилагођава боју фонта елемента.
- “ ширина ” је својство које прилагођава ширину елемента.
Горњи код ће генерисати следећи резултат:
До сада смо разговарали о курсорима које обезбеђује ЦСС. У наредном одељку, пример ће описати како да креирате прилагођени курсор помоћу ЦСС-а.
Прилагођени курсор ЦСС
Програмери морају користити одговарајуће курсоре за своје апликације. Курсоре треба учинити атрактивним како би привукли пажњу корисника. Штавише, прилагођени курсор се може креирати за ову сврху.
Погледајте пример испод!
Пример: Како направити прилагођени курсор са ЦСС-ом?
У ХТМЛ-у додајте два елемента див. Један са класом „ круг ” а други са класом “ тачка ”.
ХТМЛ
< див класа = 'круг' > див >< див класа = 'тачка' > див >
Идемо даље ка одељку ЦСС.
Стилски елемент „тело“.
тело {висина: 100вх;
}
Елемент тела ХТМЛ датотеке се примењује са стилом „ висина ” својство за подешавање висине елемента.
Стил „круг“ див
.круг {ширина: 20пк;
висина: 20пк;
ивица: 2пк пуна бела;
радијус границе: педесет % ;
}
Испод је објашњење ЦСС својстава која се примењују на див елемент који има класу „ круг ”:
-
- “ ширина ” својство прилагођава ширину елемента.
- “ граница ” својство са вредношћу наведеном као „ 2пк пуна бела ” представља ширину ивице, стил ивице и боју.
- “ граница-радијус ” својство мења ивицу елемента.
Стил „поинт“ див
.тачка {ширина: 5пк;
висина: 5пк;
боја позадине: бела;
радијус границе: педесет % ;
}
Елемент див са тачком класе има различита својства која су описана у наставку:
-
- “ боја позадине ” својство одређује боју позадине елемента.
- “ граница-радијус ” поставља ивице елемента заокружене.
- Остала својства ће радити исто као што је дискутовано.
Дати код ће приказати следећи курсор на веб страници:
Направили смо курсор користећи ХТМЛ и ЦСС. Сада, у следећем одељку, ЈаваСцрипт код је написан да би се курсору додала потребна функционалност.
ЈаваСцрипт
< скрипта >цонст цурсорЦирцле = доцумент.куериСелецтор ( '.цирцле' ) ;
цонст цурсорПоинт = доцумент.куериСелецтор ( '.тачка' ) ;
цонст мовеЦурсор = ( и ) = > {
цонст моусеИ = е.цлиентИ;
цонст моусеКс = е.цлиентКс;
цурсорЦирцле.стиле.трансформ = ` превести ( ${моусеКс} пк, ${моусеИ} пк ) ` ;
цурсорПоинт.стиле.трансформ = ` превести ( ${моусеКс} пк, ${моусеИ} пк ) ` ;
}
виндов.аддЕвентЛистенер ( 'моусемове' , мовеЦурсор )
скрипта >
Опис горе наведеног ЈаваСцрипт кода је дат у наставку:
-
- “ <сцрипт> ” ознака је упарена са ознаком , која се користи за писање ЈаваСцрипт кода.
- “ конст ” кључна реч идентификује да се кључна реч цонст иза које следи променљива не може поново доделити.
- “ доцумент.куериСелецтор(‘.цирцле’) ” враћа елемент круга див који одговара наведеном селектору у документу.
- “ доцумент.куериСелецтор(‘.поинт’) ” враћа тачка див елемент који одговара наведеном селектору у документу.
- “ цонст мовеЦурсор = (е) => ” ова функција специфицира функцију курсора.
- “ е.цлиентИ ” враћа вертикалну координату када је активиран догађај миша.
- “ е.цлиентКс ” враћа хоризонталну координату када се покрене догађај миша.
- “ цурсорЦирцле.стиле.трансформ ” круг див се примењује са трансформацијом стила.
- “ цурсорПоинт.стиле.трансформ ” тачка див се примењује са трансформацијом стила.
- “ транслате(${моусеКс}пк, ${моусеИ}пк) ” вредност својства трансформације поставља хоризонталне и вертикалне координате.
- “ виндов.аддЕвентЛистенер('миш', мовеЦурсор) ” метод слушаоца догађаја ће слушати кретање миша. То је део глобалног објекта прозора.
Након што обезбедите горе наведене блокове кода, курсор ће се аутоматски померити на екрану као што је приказано у наставку:
То је кул! Направили смо прилагођени курсор са различитим ЦСС својствима.
Закључак
ЦСС “ курсор ” својство има бројне вредности које указују на различите стилове курсора. Међутим, користећи ХТМЛ елементе и ЦСС својства, можемо направити прилагођене курсоре. Затим се имплементира ЈаваСцрипт код да би се активирала његова функционалност. Ова студија је на практичном примеру показала како да креирате прилагођене ЦСС курсоре.