Bu özellik, WordPress.com Explorer, Creator ve Entrepreneur paketlerimize ve eski Pro paketimize sahip sitelerde mevcuttur. Ücretsiz veya Starter paketlerine sahip sitelerde bu özelliğe erişmek için paketinizi yükseltin.
CSS veya Basamaklı Stil Sayfaları, HTML içeriğine stil kuralları uygulamanın bir yoludur. Bu sayfa, seçiciler ve sıralama gibi CSS ile ilgili birkaç temel bilgiyi kapsar.
WordPress.com panonuzun sol kenar çubuğundaki Görünüm → Ek CSS‘ye giderek özel CSS ekleyebilirsiniz.
İçerik tablosu
Seçiciler
Sıralama Önemlidir
Test İle İlgili İpuçları
Ek Kaynaklar
Seçiciler
Seçiciler, hangi HTML’in stilinin değiştirileceğini hedeflemek için kullanılır. Stil kurallarını ayarlamak için özellikler ve değerler kullanılır.
Üç tür seçici vardır:
| Etiket | h1 veya p gibi bir HTML etiketi. |
| Sınıf | <p class="class-name">Örnek metin.</p>. CSS’de, öncesine “.” konarak başvuru belirtilmiştir. |
| Kimlik | gibi yalnızca bir kez kullanılan benzersiz bir öğenin niteliği <section id="intro"> . CSS’de, önüne “#” konarak belirtilmiştir. |
Aşağıda bazı örnekleri görebilirsiniz.
HTML etiketi seçici:
<p>Örnek paragraf.</p>
HTML etiketi seçici CSS’si:
p {
color: red;
font-size: 200%;
}
Burada, metni kırmızı olarak ve %200 yazı tipi boyutuyla, HTML etiketi seçicinin nasıl olduğunu görüyorsunuz:
Örnek paragraf.
Sınıf ve kimlik seçici HTML’i:
<p class="warning">Bu, "warning" (uyarı) sınıfında paragraftır.</p>
<p id="danger">Bu, "danger" (tehlike) adlı kimliğe sahip bir paragraftır.</p>
Sınıf ve kimlik seçici CSS’si:
.warning {
background-color: #ccf;
}
#danger {
background-color: #fcc;
}
Burada söz konusu sınıf ve kimlik seçicilerin nasıl olduğunu görüyorsunuz:
Bu, “uyarı” adlı bir sınıfa sahip paragraftır.
Bu, “tehlike” adlı bir kimliğe sahip paragraftır.
WordPress düzenleyicideki Ek CSS Sınıfları özelliğini kullanarak sitenizdeki öğelere kendi CSS sınıflarınızı ekleyebilirsiniz.
Sıralama Önemlidir
CSS’deki “basamaklı”, bir tarayıcının hangi stil kurallarının uygulanacağını nasıl belirlediğini ifade eder. Her stil, seçicinin ne kadar önemli olduğuna, ne kadar spesifik olduğuna ve CSS’nin sırasına göre uygulanır.
Kimlik seçiciler sınıf seçicilerden daha önemlidir, sınıf seçiciler de HTML etiketi seçicilerden daha önemlidir. Bu nedenle, aşağıdaki örnekte, kimlik seçici en önemli öğe olduğu için paragraf kırmızı olarak görünür.
#danger { color: red; }
.warning { color: orange; }
p { color: green; }
Değere “!important” ifadesini ekleyerek önemi geçersiz kılabilirsiniz, ancak bu kesinlikle gerekli olmadıkça önerilmez, çünkü çok fazla !important kuralı eklemeye başlarsanız, düzenleme ve hata ayıklama çok hızlı bir şekilde kafa karıştırıcı hale gelebilir.
#danger { color: red; }
.warning { color: orange; }
p { color: green !important; }
Daha spesifik seçiciler, daha az spesifik olanlardan önce uygulanır. En içteki HTML öğeleri en spesifik olanlardır.
<p>Bu bir <strong><em>good</em></strong> bir örnek paragraftır.</p>
em etiketi, iç HTML’ye strong etiketinden daha yakın olduğundan em kuralı kullanılacaktır:
strong { color: limegreen; }
em { color: tomato; }
Ancak “p strong em” gibi daha spesifik bir seçici kullanırsanız, em gibi bir tür seçiciden daha spesifik olduğu için o kullanılır.
p strong em { color: limegreen; }
em { color: tomato; }
Son olarak, kuralların sırası önemlidir. Aynı kural birden fazla kez görünüyorsa, son kural kullanılır. Aşağıdaki örnekte, yalnızca son kural geçerli olacak ve WordPress.com CSS düzenleyicisi ilk iki kopyayı kaldıracaktır.
p { color: indigo; }
p { color: aqua; }
p { color: teal; }
Test İle İlgili İpucu
Herhangi bir CSS teması uygulanmadan temanızın nasıl göründüğünü anlamak için Görünüm → Ek CSS‘ye gidin, düzenleyicideki her şeyi geçici olarak kaldırın ve ‘ Temanın orijinal CSS’sini kullanma‘yı seçin. Tümüyle sade, yalnızca HTML içeren, stili olmayan bir web sayfası görürsünüz. Bu size mevcut temanın HTML yapısı hakkında temel bir fikir verecektir. Yalnızca temel yapıyı önizlemek istiyorsanız değişiklikleri kaydetmeyin. Yeni başlama ve CSS temasını değiştirme seçeneği, herhangi bir WordPress.com temasını CSS ile sıfırdan tamamen yeniden biçimlendirmek için kullanılabilecek gelişmiş bir seçenektir.
Ek Kaynaklar
Yeterli oranda CSS bilginiz varsa WordPress.com’da CSS kullanmaya başlayabilirsiniz. Diğer WordPress.com CSS düzenleme seçenekleri ve ayarları hakkında bilgi edinmek için CSS Düzenleme sayfasına gidin.
Ayrıca aşağıdaki diğer harika CSS kaynaklarına da göz atmak isteyebilirsiniz:
- HTML Dog tarafından CSS Başlangıç Eğitimi
- CSS öğrenin – Codecademy
- Temamın CSS’sini nasıl bulabilirim?
- CSS’ye Giriş veya Her Şeyi Nasıl İstediğiniz Hale Getirirsiniz?
- CSS’ye Giriş: CSS Seçicilerini Bulma
- CSS’ye Giriş: Eşleşen Kural Panelinden Değişiklikleri Önizleme
- CSS Öğrenmeli miyim?
Yukarıdaki örneklerde kullanılan renk adları, SVG 1.0’dan gri/gri varyantları eklenmiş, popüler tarayıcılar tarafından desteklenen bir X11 renkleri listesinden alınmıştır. Aynı sayfada temel renkli anahtar sözcüklerinin listesini de görebilirsiniz.
WordPress.com Destek 