WordPress'te İlgi Çekici Tablolar Oluşturmak için CSS Çift ve Tek Kuralları Nasıl Kullanılır

Basamaklı Stil Sayfaları (CSS), ilgili uzmanlığa sahipseniz bazı harika efektler oluşturmanıza olanak tanır. Ancak, özelleştirebileceğiniz o kadar çok öğe var ki, dilde uzmanlaşmak zor olabilir.

Örneğin, CSS çift ve tek kurallarını alın. Tablolarda, listelerde ve aklınıza gelebilecek hemen hemen her şeyde çift ve tek öğeleri hedeflemenizi sağlayan az bilinen seçicilerdir. Bu yazıda, CSS çift ve tek kurallarının nasıl çalıştığından ve bunları nasıl kullanabileceğinizden bahsedeceğiz. Ardından, daha da iyi sonuçlar elde etmek için etkilerini çoğaltmak için Divi'yi nasıl kullanacağınızı öğreteceğiz. Hadi çalışalım!

CSS Çift ve Tek Kurallarına Giriş

Bu tür CSS seçicinin adı amacını ele verir. Çift ve tek kurallar, hemen hemen her durumda bu iki tür öğeyi hedeflemenize ve bunlara stiller uygulamanıza olanak tanır.

Bu bölümün başındaki örneği ele alalım – çift sütunların tümü aynı metin rengini paylaşırken, tek olmayan sayılar farklı bir renk kullanır. Bu etki mümkündür, çünkü her bir öğe türünü hedeflemek ve onlara benzersiz arka plan renkleri uygulamak için çift ve tek seçiciler kullandık.

Şu anda muhtemelen bu tür seçiciler için uygulamaların neler olabileceğini merak ediyorsunuz, o yüzden bunları örneklerle inceleyelim:

• Fiyatlandırma tabloları. En iyi fiyatlandırma tabloları, gözlerinizi kaydolmanızı istedikleri planlara çekmek için renkleri kullanır. Bu durumda, belirli planların öne çıkması için çift ve tek seçicileri kullanabilirsiniz.
• Genişletilmiş veri kümelerini daha okunabilir hale getirmek için. Verilerle dolu uzun bir tabloyu anlamlandırmaya çalıştığınızı hayal edin. Küçük bir CSS ile, işleri daha okunaklı hale getirmek için satırlar veya sütunlar arasında bir kontrast oluşturmak için çift ve oran kuralları uygulayabilirsiniz.
• Bir listedeki belirli öğeleri vurgulamak için. Bir makaleye uzun bir liste eklerseniz, belirli girişleri vurgulamak için çift ve tek kurallar kullanışlı olabilir. Arka plan renkleriyle oynamak yerine belirli öğeleri kalınlaştırabilir, yazı tipi boyutlarını değiştirebilir ve daha fazlasını yapabilirsiniz.

Adil olmak gerekirse, CSS çift ve tek kuralları, vahşi doğada sıklıkla gördüğünüz bir şey değildir. Ancak, uygulanmaları kolaydır, bu nedenle cephaneliğinizin bir parçası olmamaları için hiçbir neden yoktur. Bunları nasıl uygulamaya koyacağımız hakkında konuşalım!

CSS Çift ve Tek Kuralları Uygulamada Nasıl Çalışır?

Tablolar, net görsel sınırları olan öğeler olduklarından, CSS çift ve tek kuralları için en yaygın kullanım durumudur. Ayrıca, tablolar birden çok öğeden oluşma eğilimindedir, bu da onları söz konusu seçiciler için mükemmel adaylar haline getirir.

İşte minimal stil uygulanmış hızlı ve kirli bir tablo örneği. Okuması kolay ve geçmesi gereken bilgileri alıyor, ancak hemen hemen bu kadar:

Buna çift ve tek kurallar uygulamak istersek, CSS'nin nasıl görüneceğine dair bir örnek:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #4D4D4D}

Burada tr , tablonuzdaki her satır için HTML öğelerini ifade eder. Yukarıdaki kod, tüm çift satırlar için beyaz arka planlar ve tek sayılar için gri olanlar için aşağıdaki gibi ayarlayacaktır:

Bu örnekte, görüntünün köşesindeki yeşil hücre basitçe vurgulanmıştır.

Fiyat tablolarında benzersiz planları vurgularken kullanışlı olan satırlar yerine sütunları da hedefleyebilirsiniz. İşte öncekiyle aynı kod, yalnızca satırlar yerine sütunlarla:

col:nth-child(even) {background: #CCC}
col:nth-child(odd) {background: #4D4D4D}

İşte sonucun nasıl görüneceği:

Daha önce bahsettiğimiz gibi, temelde herhangi bir öğeyi hedeflemek için çift ve tek kuralları kullanabilirsiniz. Anahtar, satırlar veya sütunlar gibi alt öğeler içermesi gerektiğidir – aksi takdirde seçici hangilerini hedefleyeceğini bilemez. Örneğin listeler, her giriş için li HTML öğeleri içerir. İşte bir örnek:

<ul>
<li>First element.</li>
<li>Second element.</li>
<li>Third element.</li>
<li>Fourth element.</li>
</ul>

Bu durumda, çift ve tek seçicilerinizin özellikle li öğelerini hedeflemesini istersiniz, bu nedenle CSS'niz şöyle görünmelidir:

li:nth-child(even) {background: #CCC}
li:nth-child(odd) {background: #4D4D4D}

Elbette, liste öğelerine arka plan renkleri eklemek yaygın bir uygulama değildir, bu nedenle muhtemelen diğer özelleştirme türlerini kullanmak isteyebilirsiniz. Örneğin, listenizdeki tek öğelerin göze çarpmasını sağlamak için kalınlaştırabilirsiniz:

• İlk eleman.
• İkinci unsur.
• Üçüncü unsur.
• Dördüncü öğe.

Gördüğünüz gibi, çift ve tek seçicileri kullanmanın hiçbir hilesi yoktur. Tek yapmanız gereken doğru öğeleri hedeflemek ve sayfanızın geri kalanını etkilemeden istediğiniz değişiklikleri uygulayabilirsiniz.

Divi Kullanarak CSS Çift ve Tek Kuralları Nasıl Çoğaltılır

Divi kullanıcısıysanız, modül sistemi, birkaç tıklamayla herhangi bir sayfanıza iletişim formları, fiyat tabloları, galeriler ve daha fazlası gibi karmaşık öğeler eklemenize olanak tanır. Dahası, bu öğeleri kişiselleştirmek için güçlü özelleştirme özelliklerine erişim elde edersiniz.

Örneğin, fiyat tabloları söz konusu olduğunda, Divi sayesinde herhangi bir kod kullanmadan CSS çift ve tek kurallarının etkilerini çoğaltmak çok kolay. Divi Builder ile hazırladığımız bir barebone fiyatlandırma tablosu örneği:

Şimdi, tabloya biraz kontrast eklemek için her sütuna farklı renkler uygulamak istediğimizi varsayalım. CSS çift ve tek kurallarını kullanarak, tüm sütunları aynı renkle hedeflemiş oluruz ki bu korkunç görünür. Divi ile hedeflemek istediğiniz belirli bölümleri özelleştirebilirsiniz. Birinci ve üçüncü sütunların başlıklarına mavi arka planlar eklemeyi deneyelim. Bunu yapmak için, düzenlemekte olduğunuz sayfada fiyatlandırma tablosu modülünü bulun ve Modül Ayarları düğmesine tıklayın:

Şimdi hedeflemek istediğiniz belirli sütunu bulun ve bir kez daha ayarlar düğmesine tıklayın:

Gelişmiş sekmesine atlarsanız, Fiyatlandırma Başlığı adlı bir alan bulacaksınız . Bu bölümün arka plan rengini basit bir CSS satırı ile değiştirebilirsiniz:

background: #0C71C3;

Şimdi tablomuz şöyle görünüyor:

Aynı değişikliği Geliştirici sütununa uygularsanız, söz konusu satır için temel olarak çift ve tek kuralları uygulamış olursunuz:

Tablonun geri kalanı iyi görünüyor, peki ya her planın bazı özelliklerini de vurgulamak isterseniz? Bu, genellikle fiyatlandırma tablolarında gördüğünüz bir şeydir, böylece ziyaretçiler her planın sunduğu özellikleri karşılaştırabilir. Sen satırları hedefleme çift ve tek kurallarını kullanabilir ve planınızın özelliklerini dışarı duracak istiyorum bu yüzden sadece onlar sendeleyip başladı. Divi ile bu efekti basit artı ve eksi işaretleri ile çoğaltabilirsiniz.

Bunu yapmak için, değiştirmek istediğiniz sütunun ayarlar bölümlerine gidin. Bu örnek için, Temel sütununu bir kez daha hedefleyeceğiz. Ana ayarlar ekranını aşağı kaydırırsanız, daha önce gördüğünüz özelliklerin listesini içeren bir metin düzenleyici bulacaksınız:

Gördüğünüz gibi, her öğenin önünde artı işaretleri var. Bunları eksi işaretleri ile değiştirirseniz, ön uçta şöyle görünürler:

Artı ve eksi işaretlerini kademelendirirseniz, kendi çift ve tek tasarımınızı uygulayabilirsiniz. Ayrıca, işleri daha da özelleştirmek için metin düzenleyiciyle oynayabilirsiniz. Biraz daha ince ayar yaptıktan sonra tablomuz şöyle görünüyor:

Doğal olarak, gerçek bir fiyatlandırma tablosunda hangi unsurları vurgulayacağınız konusunda daha seçici olmak isteyeceksiniz. Bu şekilde, kullanıcılar her bir planın kendilerine tam olarak ne sunduğunu ve diğerleriyle nasıl karşılaştırıldığını bir bakışta bilecekler.

Son olarak, Fiyatlandırma Tablosu modülünün, öne çıkan tablolar olarak belirli sütunları vurgulamanıza olanak tanıdığını unutmayın:

Hangi sütunları vurgulamak istediğinizi seçmek için ayarlarına gidin ve ardından Tasarım sekmesine atlayın. Seçeneği en üstte bulacaksınız.

Çözüm

CSS öğrenmesi kolaydır, ancak ustalaşması zordur. Biraz sabırla herkes dili kullanarak harika tasarımlar ve efektler yaratabilir. Tablolar gibi çok gösterişli olmayan öğeler bile CSS kullanılarak doğru şekilde – bu durumda çift ve tek kurallarla – hayata geçirilebilir.

Her şey yolunda görünene kadar kod üzerinde ince ayar yapmak için oturmuyorsanız, Divi teması basit menüler kullanarak web sitenizin neredeyse her yönünü özelleştirmenize olanak tanır. Ayrıca, değişikliklerinizi saniyeler içinde önizleyebilirsiniz. Bu kadar çok özelleştirme ayarıyla, CSS çift ve tek kurallarının etkilerini makul ölçüde kolay bir şekilde çoğaltmak mümkündür.

WordPress'te çift ve tek kuralları çoğaltmak için Divi'nin nasıl kullanılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

Ket4up / Shutterstock.com'dan makale küçük resmi