Özel CSS İmleci

İmleç, ekranda kullanıcının tıklayabileceği veya metin girebileceği konumu gösterir. Farklı web sitesi bileşenleri için kullanılan farklı imleçler olabilir. Bir geliştirici, uygulamada kullanılan imleçlerin çekici olmasını sağlamalıdır. Örneğin, farenin üzerine gelindiğinde düğme üzerinde işaret eden bir el imleci kullanılabilir. Metin girilecek olan metin kutusunda metin (yanıp sönen çizgi) göstergesi kullanılır.

CSS'de yalnızca imleç özelliğinin değerini belirterek kullanılan birkaç imleç stili vardır. Ancak bir geliştirici, CSS kullanarak özelleştirilmiş bir imleç oluşturabilir.

Bu çalışma kılavuzu şunları sağlayacaktır:

- CSS imleci
- Özel imleç CSS'si

Konuya girmeden önce, pratik bir örnekle bazı CSS imleç şekillerini görelim.

CSS imleci

CSS “ imleç ” özelliği, işaretçi, hiçbiri, ilerleme ve daha fazlası gibi farklı değerlere sahiptir. Fareyle üzerine gelindiğinde farklı imleçlerin görüntüleneceği satırları içeren bir tablo oluşturalım.

Örnek: HTML'de Farklı CSS imleçlerini Temsil Eden Tablo Oluşturma

Önce

öğesini HTML'ye ekleyin. Bu öğenin içinde:

- Satır oluşturmak için

etiketi kullanılacaktır.

İlk satır başlıkları içerir.

Bu başlıklar

etiketleri, sütunları verilerle doldurmak için iki

etiketleri kullanılarak belirtilir. Diğer
etiketi içerir. İkinci	etiketi, bir CSS ile uygulanan düğme öğelerini temsil eder ' imleç ” farklı değerlere sahip özellik. Yukarıdaki senaryo için HTML kodu aşağıda verilmiştir: < masa > < tr > < inci stil = 'genişlik: 200 piksel;' > css imleç seçici inci > < inci stil = 'genişlik: 200 piksel;' > imleç stili inci > tr > < tr > < td > imleç: işaretçi td > < td >< buton stil = 'imleç: işaretçi;' > Işaretçi buton > td > tr > < tr > < td > imleç: ilerleme td > < td >< buton stil = 'imleç: ilerleme;' > ilerleme buton > td > tr > < tr > < td > imleç: izin verilmiyor td > < td >< buton stil = 'imleç: izin verilmedi;' > izin verilmedi buton > td > tr > < tr > < td > imleç: yok td > < td >< buton stil = 'imleç: yok;' > Yok buton > td > tr > < tr > < td > imleç: hareket ettir td > < td >< buton stil = 'imleç: taşı;' > hareket buton > td > tr > < tr > < td > imleç: kapmak td > < td >< buton stil = 'imleç: tut;' > yakalamak buton > td > tr > < tr > < td > imleç: kopyala td > < td >< buton stil = 'imleç: kopyala;' > kopyalamak buton > td > tr > < tr > < td > imleç: col-yeniden boyutlandırma td > < td >< buton stil = 'imleç: col-yeniden boyutlandırma;' > col-yeniden boyutlandırma buton > td > tr > < tr > < td > imleç: satır yeniden boyutlandırma td > < td >< buton stil = 'imleç: satır yeniden boyutlandırma;' > satır yeniden boyutlandırma buton > td > tr > < tr > < td > imleç: metin td > < td >< buton stil = 'imleç: metin;' > metin buton > td > tr > masa > Yukarıdaki kod aşağıdaki sonucu üretecektir: Bir sonraki bölümde, HTML öğelerine farklı stiller uygulayacağız. Stil 'tüm' Öğeler * { dolgu malzemesi: 0 ; marj: 0 ; yazı tipi ailesi: Arial, Helvetica, sans-serif; } Tüm HTML öğeleri, aşağıda açıklanan CSS stilleriyle uygulanır: “ dolgu malzemesi ” ile mülk 0 ” değeri, öğenin içeriğinin çevresinde boşluk içermez. “ marj ” ile mülk 0 ” değeri, öğelerin her birinin dışına boşluk eklemez. “ font ailesi 'özelliğe bir değer atanır' Arial, Helvetica, sans-serif ”. Yazı tipi stilleri listesi, ilk stilin tarayıcı tarafından desteklenmemesi durumunda diğer stillerin uygulanmasını sağlamak için verilmiştir. Stil 'tablo' Elemanı masa { kenar boşluğu: 0 piksel otomatik; kenarlık: 1px katı gainsboro; } HTML tablo öğesi, aşağıda açıklanan CSS özellikleriyle uygulanır: “ sınır ' özellik, ' değeriyle ayarlanır 1px katı gainsboro sırasıyla kenarlık genişliğini, kenarlık stilini ve kenarlık rengini temsil eder. “ marj ” özelliği yukarıda belirtildiği gibi davranır. Stil 'td' Elemanı td { metin hizalama: merkez; }	elemanı “ özelliği ile uygulanır. Metin hizalama 'değeri ile' merkez ”. Sütunun metnini ortaya hizalayacaktır. Stil 'düğme' Elemanı buton { arka plan rengi: cadetblue; dolgu: 10 piksel 10 piksel; renk: #ffffff; genişlik: 150 piksel; } Yukarıdaki HTML kodunda kullanılan düğme öğesi, aşağıda açıklanan yeni CSS özellikleriyle biçimlendirilmiştir: “ arka plan rengi ”, öğenin arka planının rengini belirtir. “ dolgu malzemesi ” olarak atanan değerlerle 10 piksel 10 piksel ”, öğenin öğelerinin üst-alt kısmına 10px ve sol-sağ taraflarına 10px boşluk ekler. “ renk ”, öğenin yazı tipi rengini ayarlar. “ Genişlik ”, elemanın genişliğini ayarlayan özelliktir. Yukarıdaki kod aşağıdaki sonucu üretecektir: Şimdiye kadar, CSS tarafından sağlanan imleçleri tartıştık. Gelecek bölümde, örnek, CSS ile özel bir imlecin nasıl oluşturulacağını açıklayacaktır. Özel imleç CSS'si Geliştiriciler, uygulamaları için uygun imleçler kullanmalıdır. İmleçler, kullanıcıların dikkatini çekecek şekilde çekici hale getirilmelidir. Ayrıca, bu amaç için özel imleç oluşturulabilir. Aşağıdaki örneğe bakın! Örnek: CSS ile Özel İmleç Nasıl Oluşturulur? HTML'de iki div öğesi ekleyin. sınıfla bir ' daire ” ve diğeri “ sınıfıyla puan ”. HTML < div sınıf = 'daire' > div > < div sınıf = 'puan' > div > CSS bölümüne doğru ilerleyelim. Stil 'vücut' Elemanı gövde { yükseklik: 100vh; } HTML dosyasının gövde elemanı “ stiliyle uygulanır. boy uzunluğu ” öğesinin yüksekliğini ayarlamak için özellik. Stil 'daire' div .daire { genişlik: 20 piksel; yükseklik: 20 piksel; kenarlık: 2 piksel düz beyaz; sınır yarıçapı: elli % ; } Aşağıda “ sınıfına sahip div öğesine uygulanan CSS özelliklerinin açıklaması yer almaktadır. daire ”: “ Genişlik ” özelliği, öğenin genişliğini ayarlar. “ sınır ' olarak belirtilen değere sahip özellik' 2 piksel katı beyaz ” kenarlık genişliğini, kenarlık stilini ve rengi temsil eder. “ sınır yarıçapı ” özelliği, öğenin kenarlık yuvarlaklığını değiştirir. Stil 'nokta' div .puan { genişlik: 5 piksel; yükseklik: 5 piksel; arka plan rengi: beyaz; sınır yarıçapı: elli % ; } Sınıf noktasına sahip div öğesi, aşağıda açıklanan farklı özelliklerle sağlanır: “ arka plan rengi ” özelliği, öğenin arka plan rengini belirtir. “ sınır yarıçapı ”, öğenin kenarlarını yuvarlak olarak ayarlar. Diğer özellikler tartışıldığı gibi çalışacaktır. Verilen kod, web sayfasında aşağıdaki imleci gösterecektir: İmleci HTML ve CSS kullanarak oluşturduk. Şimdi, bir sonraki bölümde, imlece gerekli işlevselliği eklemek için JavaScript kodu yazılır. JavaScript < senaryo > const imleçDairesi = belge.querySelector ( '.daire' ) ; const imleçPoint = belge.querySelector ( '.puan' ) ; const moveCursor = ( ve ) = > { sabit fareY = e.clientY; sabit fareX = e.clientX; imleçCircle.style.transform = ` Çevirmek ( ${mouseX} piksel, ${mouseY} piksel ) ` ; imleçPoint.style.transform = ` Çevirmek ( ${mouseX} piksel, ${mouseY} piksel ) ` ; } pencere.addEventListener ( 'fare hareketi' , İmleci hareket ettir ) senaryo > Yukarıdaki JavaScript kodunun açıklaması aşağıda verilmiştir: “ ” etiketi, JavaScript kodu yazmak için kullanılan etiketi ile eşleştirilir. “ sabit ” anahtar sözcüğü, ardından bir değişkenin geldiği const anahtar sözcüğünün yeniden atanamayacağını tanımlar. “ Document.querySelector('.circle') ”, belgede belirtilen seçiciyle eşleşen daire div öğesini döndürür. “ Document.querySelector('.point') ”, belgede belirtilen seçiciyle eşleşen nokta div öğesini döndürür. “ const moveCursor = (e) => ” bu işlev, imleç işlevini belirtir. “ e.clientY ”, fare olayı tetiklendiğinde dikey koordinatı döndürür. “ e.clientX ”, fare olayı tetiklendiğinde yatay koordinatı döndürür. “ imleçCircle.style.transform ” daire div, stil dönüşümü ile uygulanır. “ imleçPoint.style.transform ” noktası div, stil dönüşümü ile uygulanır. “ translate(${mouseX}px, ${mouseY}px) transform özelliğinin değeri yatay ve dikey koordinatları ayarlar. “ window.addEventListener('mouse', moveCursor) ” olay dinleyicisi yöntemi fare hareketini dinleyecektir. Global pencere nesnesinin bir parçasıdır. Yukarıdaki kod bloklarını sağladıktan sonra, imleç aşağıda gösterildiği gibi otomatik olarak ekranda hareket edecektir: Çok havalı! Farklı CSS özelliklerine sahip özel bir imleç oluşturduk. Çözüm CSS “ imleç ” özelliği, çeşitli imleç stillerini gösteren çok sayıda değere sahiptir. Ancak, HTML öğelerini ve CSS özelliklerini kullanarak özelleştirilmiş imleçler yapabiliriz. Ardından, işlevselliğini etkinleştirmek için JavaScript kodu uygulanır. Bu çalışma, pratik bir örnekle özel CSS imleçlerinin nasıl oluşturulacağını göstermiştir. Diğer Kategori Ahududu Pi Ethernet Başka Nano Yakınlaştırma Tarçın Yorumlar Zorinos Radyo Minecraft Ssh Açık Deniz Sıkıştırma Laravel Hava Çatlağı Ofis Verimlilik Yazılımı Bot Sistem Çağrıları Sistem Ağ Oluşturma Gpu Gimp Kat Uefi Liman Işçisi Güvenlik Duvarı Tel Köpekbalığı Sinoloji Pdf Ethereum Papağan Işletim Sistemi Yüce Selinux Hiper-V Telefon Kod Cüce Incelik Fare Nmap Metasploit Sel Tablet Şeytan Kıvrılmak Nerede Gcc Yazı Tipleri Ssl Nvidia Görüntüler Usb Kalamar Mat Vlc Medya Oynatıcı Dns Bitcoin Tuş Takımı Inkscape Şifreleme Fötr Şapka Owncloud Tarayıcı Atom Kırmızı Şapka Takım Görüntüleyici Skype Vpn Xfce Jüpiter Defter Nfs Blog Lvm Suse Medya Oynatıcılar Posix Buhar Jenkinler Güç Oracle Linux Netstat Metrekare Bluetooth Ssd Kavramak Gentoo Yolculuk Ses İşlemci Tensör Akışı Otomatik Masa Lubuntu Llvm Pencereler Microsoft Edge (Eski) Internet Explorer Ofis Başka Ahududu Pi web kamerası medya oynatıcılar Diğer cPanel haproksi cüce bot yüce Kaldırma Kılavuzları Ubuntu 24.04 sonraki bulut Erdem USB geçidi fötr şapka #Güvenli Önyükleme cihaz geçişi SDN Popüler Mesajlar Git'te Hızlı İleri Almadan Dalları Birleştirme Başka C++'da Hash Tablosu Diğer Linux'ta Takma Ad Nasıl Oluşturulur ve Kaldırılır Diğer Güncellemelerden Sonra Otomatik Windows 11/10 Yeniden Başlatma Nasıl Devre Dışı Bırakılır? Diğer NetworkManager Kullanarak Linux'ta Komut Satırından WiFi Ağında Statik IP Adresi Nasıl Kurulur Diğer ECS, Docker ile Aynı mı? Diğer Sorumlu Yapay Zeka Nedir? Diğer Docker ile MongoDB Enterprise Nasıl Kurulur? Diğer Windows Bilgisayarınızı Nasıl Uyutursunuz? Diğer Power BI IF Beyanı: Kapsamlı Bir Eğitim Diğer Rhythmbox 3.4.1'i Yükleyin - Linux'ta Ses Oynatıcı medya oynatıcılar LWC – Etkinlikler Diğer Boş Veri Çerçevesi Nasıl Oluşturulur? Diğer Aynı Dosyayı Yeni Bir Zaman Damgasıyla İtebilmem için 'git touch' var mı? Diğer Güvenlik Anahtarlarını Kullanarak 2 Faktörlü Kimlik Doğrulamayı Etkinleştirin – QR Kodu – Roblox Başka Excel Verilerini SQL Server'a Aktarma Diğer JavaScript kullanarak JSON dizisi aracılığıyla döngüyü yineleme Diğer C++ Üçlü Operatör Başka Matplotlib “imshow()” Metodu Kullanılarak Görüntü Nasıl Görüntülenir Diğer Raspberry Pi'ye Docker Yüklemenin 2 Kolay Yöntemi Başka

etiketleri kullanılarak belirtilir. Diğer

etiketi içerir.

İkinci

etiketi, bir CSS ile uygulanan düğme öğelerini temsil eder ' imleç ” farklı değerlere sahip özellik.

Yukarıdaki senaryo için HTML kodu aşağıda verilmiştir:

< masa >
< tr >
< inci stil = 'genişlik: 200 piksel;' > css imleç seçici inci >
< inci stil = 'genişlik: 200 piksel;' > imleç stili inci >
tr >
< tr >
< td > imleç: işaretçi td >
< td >< buton stil = 'imleç: işaretçi;' > Işaretçi buton > td >
tr >
< tr >
< td > imleç: ilerleme td >
< td >< buton stil = 'imleç: ilerleme;' > ilerleme buton > td >
tr >
< tr >
< td > imleç: izin verilmiyor td >
< td >< buton stil = 'imleç: izin verilmedi;' > izin verilmedi buton > td >
tr >
< tr >
< td > imleç: yok td >
< td >< buton stil = 'imleç: yok;' > Yok buton > td >
tr >
< tr >
< td > imleç: hareket ettir td >
< td >< buton stil = 'imleç: taşı;' > hareket buton > td >
tr >
< tr >
< td > imleç: kapmak td >
< td >< buton stil = 'imleç: tut;' > yakalamak buton > td >
tr >
< tr >
< td > imleç: kopyala td >
< td >< buton stil = 'imleç: kopyala;' > kopyalamak buton > td >
tr >
< tr >
< td > imleç: col-yeniden boyutlandırma td >
< td >< buton stil = 'imleç: col-yeniden boyutlandırma;' > col-yeniden boyutlandırma buton > td >
tr >
< tr >
< td > imleç: satır yeniden boyutlandırma td >
< td >< buton stil = 'imleç: satır yeniden boyutlandırma;' > satır yeniden boyutlandırma buton > td >
tr >
< tr >
< td > imleç: metin td >
< td >< buton stil = 'imleç: metin;' > metin buton > td >
tr >
masa >

Yukarıdaki kod aşağıdaki sonucu üretecektir:

Bir sonraki bölümde, HTML öğelerine farklı stiller uygulayacağız.

Stil 'tüm' Öğeler

* {
dolgu malzemesi: 0 ;
marj: 0 ;
yazı tipi ailesi: Arial, Helvetica, sans-serif;
}

Tüm HTML öğeleri, aşağıda açıklanan CSS stilleriyle uygulanır:

- “ dolgu malzemesi ” ile mülk 0 ” değeri, öğenin içeriğinin çevresinde boşluk içermez.
- “ marj ” ile mülk 0 ” değeri, öğelerin her birinin dışına boşluk eklemez.
- “ font ailesi 'özelliğe bir değer atanır' Arial, Helvetica, sans-serif ”. Yazı tipi stilleri listesi, ilk stilin tarayıcı tarafından desteklenmemesi durumunda diğer stillerin uygulanmasını sağlamak için verilmiştir.

Stil 'tablo' Elemanı

masa {
kenar boşluğu: 0 piksel otomatik;
kenarlık: 1px katı gainsboro;
}

HTML tablo öğesi, aşağıda açıklanan CSS özellikleriyle uygulanır:

- “ sınır ' özellik, ' değeriyle ayarlanır 1px katı gainsboro sırasıyla kenarlık genişliğini, kenarlık stilini ve kenarlık rengini temsil eder.

“ marj ” özelliği yukarıda belirtildiği gibi davranır.

Stil 'td' Elemanı

td {
metin hizalama: merkez;
}

elemanı “ özelliği ile uygulanır. Metin hizalama 'değeri ile' merkez ”. Sütunun metnini ortaya hizalayacaktır.

Stil 'düğme' Elemanı

buton {
arka plan rengi: cadetblue;
dolgu: 10 piksel 10 piksel;
renk: #ffffff;
genişlik: 150 piksel;
}

Yukarıdaki HTML kodunda kullanılan düğme öğesi, aşağıda açıklanan yeni CSS özellikleriyle biçimlendirilmiştir:

- “ arka plan rengi ”, öğenin arka planının rengini belirtir.
- “ dolgu malzemesi ” olarak atanan değerlerle 10 piksel 10 piksel ”, öğenin öğelerinin üst-alt kısmına 10px ve sol-sağ taraflarına 10px boşluk ekler.
- “ renk ”, öğenin yazı tipi rengini ayarlar.
- “ Genişlik ”, elemanın genişliğini ayarlayan özelliktir.

Yukarıdaki kod aşağıdaki sonucu üretecektir:

Şimdiye kadar, CSS tarafından sağlanan imleçleri tartıştık. Gelecek bölümde, örnek, CSS ile özel bir imlecin nasıl oluşturulacağını açıklayacaktır.

Özel imleç CSS'si

Geliştiriciler, uygulamaları için uygun imleçler kullanmalıdır. İmleçler, kullanıcıların dikkatini çekecek şekilde çekici hale getirilmelidir. Ayrıca, bu amaç için özel imleç oluşturulabilir.

Aşağıdaki örneğe bakın!

Örnek: CSS ile Özel İmleç Nasıl Oluşturulur?

HTML'de iki div öğesi ekleyin. sınıfla bir ' daire ” ve diğeri “ sınıfıyla puan ”.

HTML

< div sınıf = 'daire' > div >
< div sınıf = 'puan' > div >

CSS bölümüne doğru ilerleyelim.

Stil 'vücut' Elemanı

gövde {
yükseklik: 100vh;
}

HTML dosyasının gövde elemanı “ stiliyle uygulanır. boy uzunluğu ” öğesinin yüksekliğini ayarlamak için özellik.

Stil 'daire' div

.daire {
genişlik: 20 piksel;
yükseklik: 20 piksel;
kenarlık: 2 piksel düz beyaz;
sınır yarıçapı: elli % ;
}

Aşağıda “ sınıfına sahip div öğesine uygulanan CSS özelliklerinin açıklaması yer almaktadır. daire ”:

- “ Genişlik ” özelliği, öğenin genişliğini ayarlar.
- “ sınır ' olarak belirtilen değere sahip özellik' 2 piksel katı beyaz ” kenarlık genişliğini, kenarlık stilini ve rengi temsil eder.
- “ sınır yarıçapı ” özelliği, öğenin kenarlık yuvarlaklığını değiştirir.

Stil 'nokta' div

.puan {
genişlik: 5 piksel;
yükseklik: 5 piksel;
arka plan rengi: beyaz;
sınır yarıçapı: elli % ;
}

Sınıf noktasına sahip div öğesi, aşağıda açıklanan farklı özelliklerle sağlanır:

- “ arka plan rengi ” özelliği, öğenin arka plan rengini belirtir.
- “ sınır yarıçapı ”, öğenin kenarlarını yuvarlak olarak ayarlar.
- Diğer özellikler tartışıldığı gibi çalışacaktır.

Verilen kod, web sayfasında aşağıdaki imleci gösterecektir:

İmleci HTML ve CSS kullanarak oluşturduk. Şimdi, bir sonraki bölümde, imlece gerekli işlevselliği eklemek için JavaScript kodu yazılır.

JavaScript

< senaryo >
const imleçDairesi = belge.querySelector ( '.daire' ) ;
const imleçPoint = belge.querySelector ( '.puan' ) ;
const moveCursor = ( ve ) = > {
sabit fareY = e.clientY;
sabit fareX = e.clientX;

imleçCircle.style.transform = ` Çevirmek ( ${mouseX} piksel, ${mouseY} piksel ) ` ;
imleçPoint.style.transform = ` Çevirmek ( ${mouseX} piksel, ${mouseY} piksel ) ` ;
}
pencere.addEventListener ( 'fare hareketi' , İmleci hareket ettir )
senaryo >

Yukarıdaki JavaScript kodunun açıklaması aşağıda verilmiştir:

- “ ” etiketi, JavaScript kodu yazmak için kullanılan etiketi ile eşleştirilir.
- “ sabit ” anahtar sözcüğü, ardından bir değişkenin geldiği const anahtar sözcüğünün yeniden atanamayacağını tanımlar.
- “ Document.querySelector('.circle') ”, belgede belirtilen seçiciyle eşleşen daire div öğesini döndürür.
- “ Document.querySelector('.point') ”, belgede belirtilen seçiciyle eşleşen nokta div öğesini döndürür.
- “ const moveCursor = (e) => ” bu işlev, imleç işlevini belirtir.
- “ e.clientY ”, fare olayı tetiklendiğinde dikey koordinatı döndürür.
- “ e.clientX ”, fare olayı tetiklendiğinde yatay koordinatı döndürür.
- “ imleçCircle.style.transform ” daire div, stil dönüşümü ile uygulanır.
- “ imleçPoint.style.transform ” noktası div, stil dönüşümü ile uygulanır.
- “ translate(${mouseX}px, ${mouseY}px) transform özelliğinin değeri yatay ve dikey koordinatları ayarlar.
- “ window.addEventListener('mouse', moveCursor) ” olay dinleyicisi yöntemi fare hareketini dinleyecektir. Global pencere nesnesinin bir parçasıdır.

Yukarıdaki kod bloklarını sağladıktan sonra, imleç aşağıda gösterildiği gibi otomatik olarak ekranda hareket edecektir:

Çok havalı! Farklı CSS özelliklerine sahip özel bir imleç oluşturduk.

Çözüm

CSS “ imleç ” özelliği, çeşitli imleç stillerini gösteren çok sayıda değere sahiptir. Ancak, HTML öğelerini ve CSS özelliklerini kullanarak özelleştirilmiş imleçler yapabiliriz. Ardından, işlevselliğini etkinleştirmek için JavaScript kodu uygulanır. Bu çalışma, pratik bir örnekle özel CSS imleçlerinin nasıl oluşturulacağını göstermiştir.

Özel CSS İmleci

CSS imleci

Özel imleç CSS'si

Çözüm

Kategori

Popüler Mesajlar