Sözde öğeler, CSS'de kullanılabilen daha gelişmiş seçicilerden biridir. Bu seçicilerin arkasındaki temel amaç, belirli bir web sayfasının temel yapısını oluşturmak için kullanılan HTML belgesini değiştirmeden benzersiz stil oluşturmaktır.

CSS'de sözde öğeleri nasıl kullanacağınız aşağıda açıklanmıştır.

Ortak Sözde öğeler

Bir web geliştiricisinin hayatını kolaylaştırmak için geniş bir sözde unsurlar listesi mevcuttur. Bu sözde unsurlardan bazıları şunları içerir:

• Önce
• Sonra
• Zemin
• İlk satır
• İlk harf

Belirli durumlarda, bazı sözde öğeler diğerlerinden daha uygun olacaktır, ancak sabit kalan tek şey, herhangi bir sözde öğeyi kullanmak için genel yapıdır.

Sözde elemanlar Yapı Örneği

selector:: pseudo-element {
/ * css kodu * /
} 

Yapabilirsin seçici olarak bir HTML öğesi kullanın, mizanpajınızdaki istenmeyen öğeleri hedeflemekten kaçınmak için bir sınıf veya kimlik kullanmanız önerilir. İstenilen konuma eklemek istediğiniz öğe, stil veya veriler küme parantezlerinin arasına yerleştirilmelidir.

Önceki ve sonraki sözde öğeler listedeki en popüler öğelerdir ve bunları kullanmanın birçok pratik yolu olduğu göz önüne alındığında - nedenini anlamak zor değildir.

CSS'de Önceki Sözde öğesini kullanma

İmkansız olmasa da, görüntüleri CSS'de okunabilir metinle kaplamak zordur. Bunun nedeni çoğunlukla görselin ve metnin bir web sayfasında aynı konumda yer almasıdır.

Nispeten kolaydır bir grup metnin arka planına bir resim gönder, ancak bu görüntü çok parlak olduğunda, üstündeki metni boğma eğilimindedir. Bu durumlarda, sonraki adım, opaklık özelliğini kullanarak görüntüyü daha az opak yapmaya çalışmaktır.

Tek sorun, görüntü ve metin aynı konumda olduğundan, metnin de bir şekilde şeffaf hale gelmesidir.

Bu sorunu çözmenin birkaç etkili yolundan biri, önceki sözde öğeyi kullanmaktır.

Önceki Sözde öğe Örneğini Kullanma

.Açılış sayfası{
/ * Görüntü bindirmesindeki metni düzenler * /
ekran: esnek;
esnek yön: sütun;
haklı içerik: merkez;
hizalama öğeleri: merkez;
metin hizalama: merkez;
/ * sayfayı farklı ekran boyutlarına göre ayarlar * /
yükseklik: 100vh;
}
.landingPage:: before {
içerik: '';
/ * bir görüntüyü içe aktarır * /
arka plan: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
tekrarsız merkez / kapak;
/ * resmin üstüne bir yer paylaşımı yerleştirir * /
opaklık: 0.4;
/ * resmi görünür kılar * /
konum: mutlak;
üst: 0;
sol: 0;
genişlik:% 100;
yükseklik:% 100;
}

Yukarıdaki kod, aşağıdaki HTML landingPage sınıfıyla birlikte kullanılmak üzere oluşturulmuştur. Yukarıdaki kodda gösterildiği gibi, önceki sözde elemanı kullanarak görüntüyü hedefleyebilir ve görüntü metinle birleştirilmeden önce üzerindeki opaklık özelliğini kullanabiliriz.

Before sözde öğesini kullanma


Bu, önceki sözde öğeyi kullanmanın sonucudur
okunabilir metinle bindirme ve görüntü için.

Bu, aşağıdaki resimde gösterildiği gibi, görüntünün üzerine bir bindirmenin yerleştirilmesine ve üstte temiz metnin görüntülenmesine neden olacaktır:

CSS'de After Sözde öğesini kullanma

Sonraki sözde öğenin pratik bir kullanımı, bir HTML formunun oluşturulmasına yardımcı olmaktır. Çoğu form, formun başarıyla gönderilmesi için veri gerektiren bir dizi alanla oluşturulur.

Formdaki bir alanın veri gerektirdiğini göstermenin bir yolu, bu alan için etiketten sonra bir yıldız işareti koymaktır. Sonraki sözde öğe, bunu yapmanız için pratik bir yol sağlar.

After Pseudo-element Örneğini Kullanma

.required:: after {
içerik: '*';
kırmızı renk;
} 

Yukarıdaki kodu formunuzun CSS bölümüne eklemek, gerekli sınıfı içeren her etiketin doğrudan kırmızı bir yıldızla devam etmesini sağlayacaktır. Sonraki sözde öğe de bu örnekte pratiktir çünkü stili yapıdan ayırmaya yardımcı olur (bu, yazılım geliştirmede her zaman idealdir.)

İçerik Özelliği

Yukarıdaki sözde öğe örneğinde gösterildiği gibi, content özelliği, bir web sayfasına yeni içerik eklemek için kullanılan araçtır. Bu özellik yalnızca sözde öğelerden önce ve sonra kullanılır.

Content özelliğine beslenebilecek herhangi bir içerik olmasa bile (sözde öğe örneğinden önceki gibi) unutulmamalıdır. yukarıda), içerik özelliğini, sözde öğeden önceki veya sonraki parametreler içinde kullanmanız gerekir. amaçlanan.

Artık CSS'de Sözde Öğeleri Kullanabilirsiniz

Bu makalede, CSS programlarınızdaki sözde öğeleri nasıl tanımlayacağınızı ve kullanacağınızı öğrendiniz. Sözde öğelerden önce ve sonra size tanıtıldınız ve her ikisini de kullanmanın pratik yolları verildi. Ayrıca sözde öğelerden önce ve sonra başarılı kullanım için content özelliğinin neden gerekli olduğunu da görebildiniz.

10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kod Örneği

CSS kullanımı hakkında daha fazla bilgi edinmek ister misiniz? Başlamak için bu temel CSS kod örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.

Sonrakini Oku

Yazar hakkında