Chrome Geliştirici Araçları'nın CSS görüntüleme ve değiştirmeyle ilgili özelliklerine ilişkin bu kapsamlı referansı inceleyerek yeni iş akışlarını keşfedin.
Temel bilgileri öğrenmek için CSS'yi görüntüleme ve değiştirme başlıklı makaleye bakın.
Öğe seçin
Geliştirici Araçları'nın Öğeler paneli, aynı anda bir öğenin CSS'sini görüntülemenizi veya değiştirmenizi sağlar.
Ekran görüntüsünde, DOM Ağacı'nda mavi renkle vurgulanan h1
öğesi seçili öğedir.
Sağ tarafta, öğenin stilleri Stiller sekmesinde gösterilir. Sol tarafta, öğe görüntü alanında vurgulanır, ancak bunun tek nedeni DOM Ağacı'nda fare imleci bu öğenin üzerine getirmesidir.
Eğitim için Bir öğenin CSS'sini görüntüleme konusuna bakın.
Öğeleri seçmenin birçok yolu vardır:
- Görüntünüzde öğeyi sağ tıklayın ve İncele'yi seçin.
- DevTools'da Öğe seçin'i tıklayın veya Command+Üst Karakter+C (Mac) ya da Control+Üst Karakter+C (Windows, Linux) tuşlarına basın ve ardından görüntü alanındaki öğeyi tıklayın.
- Geliştirici Araçları'nda, DOM Ağacı'ndaki öğeyi tıklayın.
- DevTools'un Konsol'unda
document.querySelector('p')
gibi bir sorgu çalıştırın, sonucu sağ tıklayın ve Öğeler panelinde göster'i seçin.
CSS'yi göster
CSS kurallarını görüntülemek ve CSS sorunlarını teşhis etmek için Öğeler > Stiller ve Hesaplanan sekmelerini kullanın.
Bağlantılar ile gezinin
Stiller sekmesi, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli yerlerde çeşitli yerlere giden bağlantıları görüntüler:
- CSS kurallarının yanında, stil sayfaları ve CSS kaynaklarına. Bu tür bağlantılar Kaynaklar panelini açar. Stil sayfası küçültülmüşse Küçültülmüş dosyayı okunabilir hale getirme konusuna bakın.
- ...öğesinden devralındı bölümlerinde, üst öğelere.
var()
çağrılarında özel mülk bildirimlerine.animation
stenografi özelliğinde,@keyframes
olarak değiştirin.- Belge ipuçlarındaki daha fazla bilgi bağlantıları.
- Ve daha fazlası.
Bunlardan bazıları vurgulanmıştır:
Bağlantıların stili farklı olabilir. Bir öğenin bağlantı olup olmadığından emin değilseniz öğrenmek için tıklamayı deneyin.
CSS dokümanları, belirginlik ve özel özellik değerleri içeren ipuçlarını görüntüleyin
Öğeler > Stiller, fareyle belirli öğelerin üzerine geldiğinizde yararlı bilgiler içeren ipuçları gösterir.
CSS belgelerini göster
Kısa bir CSS açıklaması olan ipucunu görmek için fareyle Stiller sekmesinde özellik adının üzerine gelin.
Bu mülkte bir MDN CSS Referansı'na gitmek için Daha fazla bilgi'yi tıklayın.
İpuçlarını devre dışı bırakmak için Göster seçeneğini işaretleyin.
Tekrar etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanları ipucunu göster'i kontrol edin.
Seçici belirginliğini göster
Spesifik olma ağırlığıyla ilgili ipucunu görmek için fareyle bir seçicinin üzerine gelin.
Özel özelliklerin değerlerini görüntüleme
Değerini ipucunda görmek istediğiniz --custom-property
simgesinin üzerine gelin.
Geçersiz, geçersiz kılınmış, etkin olmayan ve diğer CSS'leri görüntüleyin
Stiller sekmesi birçok CSS sorununu tanır ve farklı şekillerde vurgular.
Stiller sekmesinde CSS'yi anlama konusuna bakın.
Yalnızca gerçekten bir öğeye uygulanan CSS'yi görüntüleme
Stiller sekmesi, geçersiz kılınan bildirimler de dahil olmak üzere bir öğe için geçerli olan tüm kuralları gösterir. Geçersiz kılınan bildirimlerle ilgilenmiyorsanız yalnızca gerçekten bir öğeye uygulanan CSS'yi görüntülemek için Hesaplanan sekmesini kullanın.
- Bir öğe seçin.
- Öğeler panelindeki Hesaplanan sekmesine gidin.
Tüm özellikleri görmek için Tümünü Göster onay kutusunu işaretleyin.
Hesaplanan sekmesinde CSS'yi anlama bölümüne bakın.
CSS özelliklerini alfabetik sırada görüntüleme
Hesaplanan sekmesini kullanın. Yalnızca gerçekten bir öğeye uygulanan CSS'yi görüntüleme konusuna bakın.
Devralınan CSS özelliklerini göster
Hesaplanan sekmesinde Tümünü Göster onay kutusunu işaretleyin. Yalnızca gerçekten bir öğeye uygulanan CSS'yi görüntüleme konusuna bakın.
Alternatif olarak, Stiller sekmesini kaydırarak Inherited from <element_name>
adlı bölümleri bulun.
CSS at-kurallarını görüntüle
İ-kurallar, CSS davranışını kontrol etmenizi sağlayan CSS ifadeleridir. Öğeler > Stiller, aşağıdaki i-kuralları özel bölümlerde gösterir:
@property
kuralını görüntüle
@property
CSS şu kuralı, CSS özel özelliklerini açık bir şekilde tanımlamanıza ve bunları JavaScript çalıştırmadan bir stil sayfasında kaydetmenize olanak tanır.
Stiller sekmesinde bu tür bir mülkün adının üzerine gelerek özelliğin değerini, tanımlayıcılarını ve Stiller sekmesinin alt kısmındaki daraltılabilir @property
bölümünde mülk kaydına yönelik bir bağlantı görebilirsiniz.
Bir @property
kuralını düzenlemek için kural adını veya değerini çift tıklayın.
@supports
kuralını görüntüle
Stiller sekmesi, bir öğeye uygulandıkları takdirde @supports
CSS kuyruklarını gösterir. Örneğin, aşağıdaki öğeyi inceleyin:
Tarayıcınız lab()
işlevini destekliyorsa öğe yeşildir, aksi takdirde mordur.
@scope
kuralını görüntüle
Stiller sekmesinde, bir öğeye uygulanan CSS @scope
kuralları gösterilir.
Yeni @scope
kuralları, CSS Geçişli ve Devralma Düzeyi 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerini kapsama almanıza olanak tanır. Başka bir deyişle, stilleri belirli öğelere açıkça uygulayabilirsiniz.
@scope
kuralını şu önizlemede görüntüleyin:
- Önizlemede karttaki metni inceleyin.
- Stiller sekmesinde
@scope
kuralını bulun.
Bu örnekte @scope
kuralı, card
sınıfı bulunan öğelerdeki tüm <p>
öğeleri için genel CSS background-color
bildirimini geçersiz kılar.
@scope
kuralını düzenlemek için kuralı çift tıklayın.
@font-palette-values
kuralını görüntüle
@font-palette-values
kuyruklu CSS kuralı, font-palette
özelliğinin varsayılan değerlerini özelleştirmenize olanak tanır. Öğeler > Stiller bu @ karakterini özel bir bölümde gösterir.
Bir sonraki önizlemede @font-palette-values
bölümünü görüntüleyin:
- Önizlemedeki metnin ikinci satırını inceleyin.
- Stiller bölümünde
@font-palette-values
bölümünü bulun.
Bu örnekte, --New
yazı tipi paleti değerleri, renkli yazı tipinin varsayılan değerlerini geçersiz kılar.
Özel değerlerinizi çift tıklayarak düzenleyin.
@position-try
kuralını görüntüle
position-try-options
özelliğiyle birlikte @position-try
CSS kuralı, öğeler için alternatif bağlama konumları tanımlamanıza olanak tanır. Daha fazla bilgi edinmek için Karşınızda CSS bağlayıcı konumlandırma API'si bölümüne bakın.
Öğeler > Stiller, position-try-options
değerlerini çözümler ve her seçeneği özel bir @position-try --name
bölümüne bağlar.
Bir sonraki önizlemede position-try-options
değerlerini ve @position-try
bölümlerini inceleyin:
- Önizlemede alt menüyü açın. HESABINIZ ve ardından VİTRİN'i tıklayın.
- Önizlemede
id="submenu"
ile öğeyi inceleyin. - Stiller bölümünde
position-try-options
özelliğini bulup--bottom
değerini tıklayın. Stiller sekmesi sizi ilgili@position-try
bölümüne götürür.
Bölümdeki değerleri düzenlemek için çift tıklayın.
Bir öğenin kutu modelini görüntüleme
Bir öğenin kutu modelini görüntülemek için Stiller sekmesine gidin ve işlem çubuğunda Kenar çubuğunu göster düğmesini tıklayın.
Bir değeri değiştirmek için ilgili değeri çift tıklayın.
Bir öğenin CSS'sini arama ve filtreleme
Belirli CSS özelliklerini veya değerlerini aramak için Stiller ve Hesaplanan sekmelerindeki Filtre kutusunu kullanın.
Devralınan mülkleri Hesaplanan sekmesinde de aramak için Tümünü Göster onay kutusunu işaretleyin.
Hesaplanan sekmesine gitmek için Grup'u işaretleyerek filtrelenmiş özellikleri daraltılabilir kategoriler halinde gruplandırın.
Odaklanılmış sayfa emülasyonu
Odağı, sayfadan Geliştirici Araçları'na değiştirirseniz bazı yer paylaşımı öğeleri odak tarafından tetiklendiğinde otomatik olarak gizlenir. Örneğin açılır listeler, menüler veya tarih seçiciler. check_box Odaklanmış sayfa emülasyonu seçeneği, böyle bir öğede odaktaymış gibi hata ayıklamanızı sağlar.
Bu demo sayfasındaki odaklanılmış bir sayfayı taklit etmeyi deneyin:
- Giriş öğesine odaklanın. Altında başka bir öğe görünür.
- Geliştirici Araçları'nı açın. Artık sayfa yerine Geliştirici Araçları penceresi odakta olduğundan öğe tekrar kayboluyor.
- Öğeler > Stiller bölümünde :hov öğesini tıklayın, check_box Odaklanmış sayfa emülasyonu'nu işaretleyin ve giriş öğesinin seçili olduğundan emin olun. Artık altındaki öğeyi inceleyebilirsiniz.
Aynı seçeneği Oluşturma panelinde de bulabilirsiniz.
Sözde sınıfı aç/kapat
:active
, :focus
, :focus-within
, :target
, :hover
, :visited
veya focus-visible
gibi sözde bir sınıfı açmak/kapatmak için:
- Bir öğe seçin.
- Öğeler panelinde Stiller sekmesine gidin.
- :hov'u tıklayın.
- Etkinleştirmek istediğiniz sözde sınıfı işaretleyin.
Görüntü alanında, fareyle öğenin üzerine gelmese bile Geliştirici Araçları'nın background-color
bildirimini öğeye uyguladığını görebilirsiniz.
Etkileşimli bir eğitim için Sınıfa sözde durum ekleme bölümüne bakın.
Devralınan, vurgulu sözde öğeleri görüntüle
Sahte öğeler, öğelerin belirli bölümlerini şekillendirmenize olanak tanır. Vurgulama sözde öğeleri, durumu "seçildi" olan doküman bölümleridir ve kullanıcıya bu durumu belirtmek için "vurgulu" olarak biçimlendirilir. Örneğin, bu tür sözde öğeler ::selection
, ::spelling-error
, ::grammar-error
ve ::highlight
'dir.
Spesifikasyonda belirtildiği gibi, birden fazla stil çakıştığında kazanan stili kademeli olarak belirler.
Kuralların devralınmasını ve önceliğini daha iyi anlamak için devralınan vurgulu sözde öğeleri görüntüleyebilirsiniz:
-
Üst öğemin vurgulama sözde öğesinin stilini devraldım. Beni seç!
Yukarıdaki metnin bir kısmını seçin.
Stiller sekmesinde
Inherited from ::selection pseudo of...
bölümünü bulmak için aşağı kaydırın.
Basamaklı katmanları görüntüleme
Basamaklı katmanlar, stile özgü çakışmaları önlemek için CSS dosyalarınızın daha açık bir şekilde kontrol edilmesini sağlar. Bu özellik, büyük kod tabanları ve tasarım sistemleri için ve uygulamalarda üçüncü taraf stillerini yönetirken kullanışlıdır.
Basamaklı katmanları görüntülemek için sonraki öğeyi inspect ve Öğeler > Stiller'i açın.
Stiller sekmesinde, 3 basamaklı katmanı ve stillerini görüntüleyin: page
, component
ve base
.
Katman sırasını görüntülemek için katman adını veya CSS katmanları görünümünü aç/kapat düğmesini tıklayın.
page
katmanı en yüksek belirliliğe sahip olduğundan öğenin arka planı yeşildir.
Sayfayı yazdırma modunda görüntüleme
Bir sayfayı yazdırma modunda görüntülemek için:
- Komut Menüsü'nü açın.
Rendering
yazmaya başlayın veShow Rendering
seçeneğini belirleyin.- CSS Medyası emülasyonu açılır menüsü için yazdır'ı seçin.
Kapsam sekmesiyle kullanılan ve kullanılmayan CSS'yi görüntüleme
Kapsam sekmesi, bir sayfanın gerçekte hangi CSS'yi kullandığını gösterir.
- Geliştirici Araçları odaktayken Komut Menüsü'nü açmak için Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basın.
coverage
yazmaya başlayın.Kapsamı Göster'i seçin. Kapsam sekmesi görünür.
Yeniden yükle'yi tıklayın. Sayfa yeniden yüklenir ve Kapsam sekmesi, tarayıcının yüklediği her bir dosyadan ne kadar CSS (ve JavaScript) kullanıldığına dair genel bir bakış sunar.
Yeşil renk, kullanılan CSS'yi gösterir. Kırmızı, kullanılmayan CSS'yi gösterir.
Yukarıdaki önizlemede bir CSS'nin kullandığı CSS'nin satır satır dökümünü görmek için ilgili CSS dosyasını tıklayın.
Ekran görüntüsünde,
devsite-google-blue.css
için 55-57 ve 65-67 arasındaki satırlar kullanılmamış, 59-63 arasındaki satırlar kullanılmıştır.
Baskı önizleme modunu zorla
DevTools'u Yazdırma Önizleme Moduna Zorunlu Kılma başlıklı makaleyi inceleyin.
CSS'yi kopyala
Stiller sekmesindeki tek bir açılır menüden ayrı CSS kurallarını, bildirimleri, özellikleri, değerleri kopyalayabilirsiniz.
Buna ek olarak, JavaScript söz dizimindeki CSS özelliklerini kopyalayabilirsiniz. CSS-in-JS kitaplıklarını kullanıyorsanız bu seçenek kullanışlıdır.
CSS'yi kopyalamak için:
- Bir öğe seçin.
- Öğeler > Stiller sekmesinde bir CSS özelliğini sağ tıklayın.
Açılır menüde aşağıdaki seçeneklerden birini belirleyin:
- Beyanı kopyala. Özelliği ve değerini CSS söz diziminde kopyalar:
css property: value;
- Mülkü kopyala. Yalnızca
property
adını kopyalar. - Değeri kopyala. Yalnızca
value
öğesini kopyalar. - Kuralı kopyala. CSS kuralının tamamını kopyalar:
css selector[, selector] { property: value; property: value; ... }
- Tanımlamayı JS olarak kopyala. Özelliği ve değerini JavaScript söz diziminde kopyalar:
js propertyInCamelCase: 'value'
- Tüm beyanları kopyala. CSS kuralındaki tüm özellikleri ve değerlerini kopyalar:
css property: value; property: value; ...
Tüm tanımlamaları JS olarak kopyala. JavaScript söz dizimindeki tüm özellikleri ve değerlerini kopyalar: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
Tüm CSS değişikliklerini kopyala. Stiller sekmesinde yaptığınız değişiklikleri tüm beyanlarda kopyalar.
Hesaplanan değeri görüntüleyin. Sizi Hesaplanan sekmesine yönlendirir.
- Beyanı kopyala. Özelliği ve değerini CSS söz diziminde kopyalar:
CSS'yi değiştir
Bu bölümde, Öğeler > Stiller'de CSS'yi değiştirebileceğiniz tüm yollar listelenmiştir.
Ayrıca:
- Sayfa yüklemelerinde CSS'yi geçersiz kılın.
- Değiştirilen CSS'yi bir çalışma alanındaki yerel kaynaklarınıza kaydedin.
Bir öğeye CSS bildirimi ekleme
Bildirimlerin sırası bir öğenin nasıl biçimlendirileceğini etkilediğinden bildirimleri farklı şekillerde ekleyebilirsiniz:
- Satır içi bildirim ekleyin. Öğenin HTML'sine
style
özelliği eklemeye eşdeğerdir. - Stil kuralına bildirim ekleyin.
Hangi iş akışını kullanmalısınız? Çoğu senaryoda satır içi bildirim iş akışını kullanmak isteyebilirsiniz. Satır içi bildirimler harici bildirimlerden daha yüksek spesifikliğe sahiptir. Bu nedenle satır içi iş akışı, değişikliklerin öğede beklediğiniz gibi geçerli olmasını sağlar. Belirlilik hakkında daha fazla bilgi için Seçici Türleri bölümüne bakın.
Bir öğenin stillerinde hata ayıklayorsanız ve bir bildirim farklı yerlerde tanımlandığında ne olduğunu özel olarak test etmeniz gerekiyorsa diğer iş akışını kullanın.
Satır içi bildirim ekleme
Satır içi bildirim eklemek için:
- Bir öğe seçin.
- Stiller sekmesinde element.style bölümünün köşeli parantezlerini tıklayın. İmleç odaklanarak metin girmenizi sağlar.
- Bir mülk adı girin ve Enter tuşuna basın.
Söz konusu özellik için geçerli bir değer girip Enter tuşuna basın. DOM Ağacı'nda öğeye bir
style
özelliğinin eklendiğini görebilirsiniz.Ekran görüntüsünde,
margin-top
vebackground-color
özellikleri seçilen öğeye uygulanmıştır. DOM Ağacı'nda, bildirimlerin öğeninstyle
özelliğinde yansıtıldığını görebilirsiniz.
Stil kuralına bildirim ekleme
Mevcut bir stil kuralına bildirim eklemek için:
- Bir öğe seçin.
- Stiller sekmesinde, bildirimi eklemek istediğiniz stil kuralının köşeli parantezlerini tıklayın. İmleç odaklanarak metin girmenizi sağlar.
- Bir mülk adı girin ve Enter tuşuna basın.
- Söz konusu özellik için geçerli bir değer girip Enter tuşuna basın.
Ekran görüntüsünde, bir stil kuralı yeni border-bottom-style:groove
bildirimini alıyor.
Bildirim adını veya değerini değiştirme
Değiştirmek istediğiniz bildirimin adını veya değerini çift tıklayın. Bir değeri 0, 1, 1, 10 veya 100 birim hızla artırmak veya azaltmak için kısayollarla ilgili Klavye kısayolları ile numaralandırılabilir değerleri değiştirme sayfasına göz atın.
Klavye kısayollarıyla numaralandırılabilir değerleri değiştirme
Bir bildirimin numaralandırılabilir bir değerini (örneğin, font-size
) düzenlerken değeri sabit bir miktar artırmak için aşağıdaki klavye kısayollarını kullanabilirsiniz:
- 0,1 artırmak için Option+Yukarı (Mac) veya Alt+Yukarı (Windows, Linux) tuşlarına basın.
- Değeri 1 değiştirmek için Yukarı, geçerli değer -1 ile 1 arasındaysa 0,1 değerini girin.
- 10 artırmak için Üst Karakter+Yukarı.
- Değeri 100 artırmak için Üst Karakter+Command+Yukarı (Mac) veya Control+Üst Karakter+Page Up (Windows, Linux) tuşlarına basın.
Küçültme de işe yarar. Daha önce bahsedilen tüm Up örneklerini Down ile değiştirmeniz yeterlidir.
Uzunluk değerlerini değiştir
Genişlik, yükseklik, dolgu, kenar boşluğu veya kenarlık gibi uzunluğu olan herhangi bir özelliği değiştirmek için işaretçinizi kullanabilirsiniz.
Uzunluk birimini değiştirmek için:
- İmleci birim adının üzerine getirin ve altı çizili olduğuna dikkat edin.
Açılır listeden bir birim seçmek için birim adını tıklayın.
Uzunluk değerini değiştirmek için:
- İmleci birim değerinin üzerine getirin ve işaretçinizin çift başlı yatay bir oka dönüştüğüne dikkat edin.
Değeri artırmak veya azaltmak için yatay olarak sürükleyin.
Değeri 10 değerine ayarlamak için sürüklerken Üst Karakter tuşunu basılı tutun.
Bir öğeye sınıf ekleme
Bir öğeye sınıf eklemek için:
- DOM Ağacı'nda öğeyi seçin.
- .cls'yi tıklayın.
- Yeni Sınıf Ekle kutusuna sınıfın adını girin.
- Enter tuşuna basın.
Açık ve koyu tema tercihlerini emüle et ve otomatik koyu modu etkinleştir
Otomatik koyu modu açmak veya kullanıcının açık ya da koyu tema tercihini emüle etmek için:
- Öğeler > Stiller sekmesinde Genel oluşturma emülasyonlarını aç/kapat'ı tıklayın.
Açılır listeden aşağıdakilerden birini seçin:
- prefers-color-scheme: açık değerini seçin. Kullanıcının açık temayı tercih ettiğini belirtir.
- prefers-color-scheme: koyu olarak ayarlayın. Kullanıcının koyu temayı tercih ettiğini belirtir.
- Otomatik koyu mod. Uygulamadığınız halde sayfanızı koyu modda görüntüler. Ayrıca,
prefers-color-scheme
değerini otomatik olarakdark
değerine ayarlar.
Bu açılır menü, Oluşturma sekmesindeki CSS medya özelliği prefers-color-scheme
ve Otomatik koyu modu etkinleştir seçeneklerinin kısayoludur.
Sınıfları aç/kapat
Bir öğedeki sınıfı etkinleştirmek veya devre dışı bırakmak için:
- DOM Ağacı'nda öğeyi seçin.
- Öğe Sınıfları bölümünü açın. Bir öğeye sınıf ekleme bölümüne bakın. Yeni Sınıf Ekle kutusunun altında, bu öğeye uygulanan tüm sınıflar yer alır.
- Etkinleştirmek veya devre dışı bırakmak istediğiniz sınıfın yanındaki onay kutusunu işaretleyin veya işaretini kaldırın.
Stil kuralı ekle
Yeni bir stil kuralı eklemek için:
- Bir öğe seçin.
- Yeni Stil Kuralı 'nı tıklayın. Geliştirici Araçları, element.style kuralının altına yeni bir kural ekler.
Ekran görüntüsünde, Geliştirici Araçları Yeni Stil Kuralı'nı tıkladıktan sonra h1.devsite-page-title
stil kuralını ekliyor.
Kuralın ekleneceği stil sayfasını seçin
Yeni bir stil kuralı eklerken Yeni Stil Kuralı simgesini tıklayıp basılı tutarak stil kuralının ekleneceği stil sayfasını seçin.
Beyanı aç/kapat
Tek bir beyanı açmak veya kapatmak için:
- Bir öğe seçin.
- Stiller sekmesinde imleci bildirimi tanımlayan kuralın üzerine getirin. Her bildirimin yanında onay kutuları görünür.
- Bildirimin yanındaki onay kutusunu işaretleyin veya kutunun işaretini kaldırın. Bir bildirimi temizlediğinizde Geliştirici Araçları, artık etkin olmadığını belirtmek için beyanın üstünü çizer.
Ekran görüntüsünde, geçerli olarak seçili olan öğe için color
özelliği kapalıdır.
Animasyon sırasında ::view-transition
sözde öğeyi düzenleme
Animasyonlar bölümünde ilgili bölüme bakın.
Daha fazla bilgi için View Transitions API ile sorunsuz ve basit geçişler başlıklı makaleye bakın.
Izgara öğelerini ve içeriklerini Izgara Düzenleyici ile hizalama
CSS'yi denetleme tablosunda ilgili bölüme bakın.
Renk Seçici ile renkleri değiştirin
Renk Seçici ile HD ve HD olmayan renkleri inceleme ve hata ayıklama başlıklı makaleyi inceleyin.
Açılı Saat ile açı değerini değiştirin
Açılı Saat, CSS özellik değerlerindeki <angle>
değerlerini değiştirmek için bir GUI sağlar.
Açılı Saat'i açmak için:
- Açı bildirimi olan bir öğe seçin.
Stiller sekmesinde, değiştirmek istediğiniz
transform
veyabackground
bildirimini bulun. Açı değerinin yanındaki Açı Önizleme kutusunu tıklayın.-5deg
ve0.25turn
öğelerinin solundaki küçük saatler, açılı önizlemelerdir.Açılı Saat'i açmak için önizlemeyi tıklayın.
Açı Saati dairesini tıklayarak açı değerini değiştirin veya açı değerini 1 artırmak / azaltmak için farenizi kaydırın.
Açı değerini değiştirmek için başka klavye kısayolları da vardır. Stiller bölmesi klavye kısayollarından daha fazla bilgi edinebilirsiniz.
Gölge Düzenleyici ile kutu ve metin gölgelerini değiştirme
Gölge Düzenleyici, text-shadow
ve box-shadow
CSS bildirimlerini değiştirmek için bir GUI sağlar.
Gölge Düzenleyici ile gölgeleri değiştirmek için:
Gölge bildirimi olan bir öğe seçin. Örneğin, sonraki öğeyi seçin.
Stiller sekmesinde,
text-shadow
veyabox-shadow
bildiriminin yanında bir gölge simgesi bulun.Gölge düzenleyiciyi açmak için gölge simgesini tıklayın.
Gölge özelliklerini değiştirin:
- Tür (yalnızca
box-shadow
için). Dış veya İç'i seçin. - X ve Y ofsetleri. Mavi noktayı sürükleyin veya değerleri belirtin.
- Bulanıklaştır. Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
- Dağıt (yalnızca
box-shadow
için). Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
- Tür (yalnızca
Öğeye uygulanan değişiklikleri gözlemleyin.
Yumuşak Geçiş Düzenleyici ile animasyon ve geçiş zamanlamalarını düzenleme
Yumuşak Geçiş Düzenleyici, transition-timing-function
ve animation-timing-function
değerlerini değiştirmek için bir GUI sağlar.
Yumuşak Geçiş Düzenleyici'yi açmak için:
- Bu sayfadaki
<body>
öğesi gibi zamanlama işlevi bildirimi olan bir öğe seçin. - Stiller sekmesinde
transition-timing-function
,animation-timing-function
bildirimlerinin veyatransition
kısayol özelliğinin yanındaki mor simgesini bulun. - Yumuşak Geçiş Düzenleyicisi'ni açmak için simgeyi tıklayın:
Zamanlamaları ayarlamak için hazır ayarları kullanma
Tek tıklamayla zamanlamaları ayarlamak için Yumuşak Geçiş Düzenleyicisi'ndeki hazır ayarları kullanın:
- Yumuşak Geçiş Düzenleyicisi'nde anahtar kelime değeri belirlemek için seçici düğmelerinden birini tıklayın:
- doğrusal
- yumuşak giriş çıkış
- yumuşatma
- yumuşak çıkış
Hazır ayar değiştiricide, veya düğmesini tıklayarak aşağıdaki hazır ayarlardan birini seçin:
- Doğrusal hazır ayarlar:
elastic
,bounce
veyaemphasized
. - Kübik Bezier hazır ayarları:
- Doğrusal hazır ayarlar:
Zamanlama anahtar kelimesi | Ön ayarlı | Kübik Bezier |
---|---|---|
yumuşak giriş çıkış | İçinde, Sinüs | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
Yayında, İkinci dereceden | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
İçeride, Kübik | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
Hızlı Giden, Yavaş Giriş | cubic-bezier(0.4, 0, 0.2, 1) |
|
İçeri, Dışarı, Geri | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
yumuşak giriş | İçinde, Sinüs | cubic-bezier(0.47, 0, 0.75, 0.72) |
İçinde, İkinci dereceden | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
İçinde, Kübik | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
İçeri, Geri | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
Hızlı Giden, Doğrusal Giriş | cubic-bezier(0.4, 0, 1, 1) |
|
yumuşak çıkış | Haydi, Sine | cubic-bezier(0.39, 0.58, 0.57, 1) |
Dışarı, İkinci dereceden | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
Out, Cubic | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
Doğrusal Çıkış, Yavaş Giriş | cubic-bezier(0, 0, 0.2, 1) |
|
Dışarı, Geri | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Özel zamanlamaları yapılandır
Zamanlama işlevleri için özel değerler ayarlamak üzere çizgiler üzerindeki denetim noktalarını kullanın:
Doğrusal fonksiyonlarda, bir denetim noktası eklemek ve onu sürüklemek için çizginin herhangi bir yerini tıklayın. Noktayı kaldırmak için çift tıklayın.
Kübik Bezier işlevleri için denetim noktalarından birini sürükleyin.
Herhangi bir değişiklik, düzenleyicinin üst kısmındaki Önizleme'de bir top animasyonu tetikler.
(Deneysel) CSS değişikliklerini kopyalama
Bu deneme etkinleştirildiğinde, CSS değişiklikleriniz Stiller sekmesinde yeşil renkle vurgulanır.
Tek bir CSS bildirim değişikliğini kopyalamak için fareyle vurgulanan bildirimin üzerine gelin ve Kopyala düğmesini tıklayın.
Bildirimlerdeki tüm CSS değişikliklerini aynı anda kopyalamak için herhangi bir bildirimi sağ tıklayıp Tüm CSS değişikliklerini kopyala'yı seçin.
Ayrıca, yaptığınız değişiklikleri Değişiklikler sekmesiyle izleyebilirsiniz.