WordPress’te ilginç bir tablo oluşturmak için nasıl kullanılır ve garip CSS kuralları
Basamaklı Stil Sayfaları (CSS), ilgili uzmanlığınız varsa bazı harika efektler oluşturmanıza olanak tanır. Bununla birlikte, o kadar çok unsur vardır ki, usta dilin zor olabileceğini ayarlayabilirsiniz. Örneğin, CSS’nin eşit ve garip kurallarını ele alalım. Onlar, tabloların, listelerin ve aklınıza gelebilecek neredeyse tüm diğer şeylerin eşit unsurlarını hedeflemenize izin veren daha az bilinen seçmenlerdir. Bu makalede, kuralların nasıl çalıştığı ve garip bir şekilde CSS ve onu nasıl kullanabileceğiniz hakkında konuşacağız. O zaman size daha iyi sonuçlar için etkilerini çoğaltmak için divi’yi nasıl kullanacağınızı öğreteceğiz. Hadi çalışalım!
Eşit ve garip kurallara giriş
Bu tür CSS seçmeninin adı amaç verir. Hat ve garip kurallar, hemen hemen tüm durumlarda her iki öğeyi de hedeflemenize ve stili her ikisine de uygulamanıza olanak tanır. Örneğin bu bölümün üstünde ele alın – tüm sütunlar aynı metin rengine sahipken, eşit olmayan sayılar farklı renkler kullanır. Etki mümkündür, çünkü her bir unsur türünü hedeflemek ve onlar için benzersiz bir arka plan rengi uygulamak için garip seçmenleri kullanırız.
Şu anda böyle seçmenler için başvuruları bilmek isteyebilirsiniz, bu yüzden örneği kullanarak açıklayalım:
Fiyat Tablosu. En iyi fiyat tablosu, dikkatinizi kaydetmek istedikleri plana çekmek için renkler kullanır. Bu durumda, belirli planların öne çıkması için eşit ve garip seçimi kullanabilirsiniz.
Genişletilmiş bir veri toplamanın okunmasını kolaylaştırmak için. Verilerle dolu uzun tabloyu anlamaya çalıştığınızı hayal edin. Biraz CSS ile, okumayı kolaylaştırmak için satırlar veya sütunlar arasında kontrast yapmak için kurallar ve fırsatlar bile uygulayabilirsiniz. Listedeki belirli öğeleri vurgulamak için. Bir makalede uzun bir liste girerseniz, hatta ve garip kurallar belirli girişleri vurgulamak için yararlı olabilir. Arka plan rengiyle oynamak yerine, belirli öğeleri kalınlaştırabilir, yazı tipi boyutunu değiştirebilir ve daha fazlasını yapabilirsiniz.
Adil olmak gerekirse, eşit ve garip CSS kuralları vahşi doğada sık sık gördüğünüz bir şey değildir. Bununla birlikte, uygulanması kolaydır, bu yüzden silahlarınızın bir parçası olmamaları için hiçbir neden yoktur. Nasıl uygulanacağından bahsedelim!
Eşit ve tek CSS kurallarının tablo uygulamalarında nasıl çalıştığı, CSS’nin eşit ve garip kuralları için en yaygın kullanım vakalarıdır, çünkü bunlar net görsel sınırlara sahip unsurlardır. Ayrıca, tablolar, ilgili seçim için mükemmel bir aday haline getiren birkaç unsurdan oluşma eğilimindedir. İşte ona uygulanan minimum stil ile hızlı ve kirli bir masa örneği. Okuması kolay ve gerekli bilgileri elde edin, ancak oldukça fazla:
Hatta ve garip kuralları uygulamak istiyorsak, CSS: TR: N-Child (eşit) {arka plan: #ccc} TR: nth-child (tek) {arka plan: #4d4d4d} Burada, TR tabloınızdaki her satır için HTML öğesini ifade eder. Yukarıdaki kod, beyaz arka planı herkes için ve gri çizgileri tekil sayılar için ayarlayacaktır:
Bu örnekte, görüntünün açısındaki yeşil hücreler sadece vurgulanır. Ayrıca, fiyat tablosundaki benzersiz paketleri vurgularken kullanışlı olan satırları değil sütunları da hedefleyebilirsiniz. Aşağıdakiler öncekiyle aynı kod, sadece sütunlarla, satırlarla değil: col: nth-child (eşit) {arka plan: #ccc} col: nth-child (tek) {arka plan: #4d4d4d} Aşağıdakiler sonuçlar sonuçlar gibi görünecek: Daha önce de belirttiğimiz gibi, öğeleri hedeflemek için eşit ve garip kuralları kullanabilirsiniz. Anahtar, satırlar veya sütunlar gibi alt öğeleri içermesi gerektiğidir-seçmenler hangisinin hedefleneceğini bilmeyecektir. Örneğin, her bir giriş için HTML LI öğeleri içerir. İşte örnekler: İlk eleman.
İkinci eleman.
Üçüncü eleman.
Dördüncü eleman.
Bu durumda, Eşit ve Garip Seçiminizin özellikle LI öğesini hedeflemesini istiyorsunuz, böylece CSS’iniz şöyle görünecek: Li: nth-child (eşit) {arka plan: #ccc}
Li: nth-child (tek) {arka plan: #4D4D4D} Tabii ki, liste öğesine arka plan rengi eklemek yaygın bir uygulama değildir, bu nedenle diğer ayar türlerini kullanmak isteyebilirsiniz. Örneğin, öne çıkması için listenizdeki garip unsurları kalınlaştırabilirsiniz:
İlk eleman.
İkinci eleman.
Üçüncü eleman.
Dördüncü eleman.
Gördüğünüz gibi, kullanılması gereken hileler ve garip seçmenler yok. Gereken tek şey doğru öğeleri hedeflemektir ve istediğiniz değişiklikleri diğer sayfalarınızı etkilemeden uygulayabilirsiniz.
Divi kullanan divi kullanarak nasıl çoğaltılır ve tek CSS kuralları Divi kullanıcısıysanız, modül sistemi, iletişim formları, fiyat tabloları, galeriler ve diğerleri gibi sofistike öğeler eklemenizi sağlar. Dahası, bu öğeleri kişiselleştirmek için güçlü özelleştirme özelliklerine erişebilirsiniz. Örneğin, fiyat tablosuna gelirken, Divi sayesinde herhangi bir kod kullanmadan eşit ve tek CSS kurallarının etkilerini çoğaltmak çok kolaydır. Aşağıda, Divi Builder ile yaptığımız Barebone Fiyat Tablosuna bir örnektir:
Şimdi, masaya biraz kontrast eklemek için her sütuna farklı bir renk uygulamak istediğimizi varsayalım. CSS’nin eşit ve garip kurallarını kullanarak, sonunda korkunç görünecek aynı renkteki tüm sütunları hedefledik. Divi ile hedeflemek istediğiniz belirli parçaları ayarlayabilirsiniz. Birinci ve üçüncü sütunlar için başlığa mavi bir arka plan eklemeye çalışalım. Bunu yapmak için, düzenlediğiniz sayfadaki fiyat tablosu modülünü bulun ve Modül Ayarları düğmesini tıklayın:
Şimdi hedeflemek istediğiniz belirli bir sütunu arayın ve Ayarlar düğmesini bir kez daha tıklayın:
Gelişmiş sekmesine atlarsanız, fiyatlandırma başlığı adlı bir alan bulacaksınız. Bu parçanın arka plan rengini basit bir CSS hattı ile değiştirebilirsiniz: Arka plan: #0C71C3; Şimdi bu masamızın gösterimi:
