Farklı Renklerle Çift Kenarlık Nasıl Eklenir?
CSS kullanarak herhangi bir şekle çift kenarlık eklemek için ' :önce ” seçici ünlüdür. Benzersiz kılmak için her iki sınırın da rengini değiştirir. Farklı renklerle çift kenarlık eklemek için aşağıda sağlanan adım adım prosedür:
1. Adım: Div Öğesi Ekleyin ve Sınıfları Atayın
HTML dosyasında,
etiketinin içine div öğesini ekleyin ve bir “ sınıf 'adıyla' çift sınır ”. Kullanıcılar kendi sınıf adlarını da oluşturabilirler:< div sınıf = 'çift sınır' >
< / div >
2. Adım: Stil Etiketi Oluşturun
Bu adımda, “ sınıfı için bir bölüm oluşturun. çift sınır ” ve “ ile bir kopya yapın :önce ” seçici. Bu şekilde, CSS özellikleri sınıflarımıza uygulanacaktır:
< stil >
.çift- sınır {
}
.çift- sınır :önce {
}
< / stil >
3. Adım: Sınıfa Stiller Ekleyin
CSS özellikleri, ' sınıfına sahip div öğesi için geçerlidir. çift sınır ”. Aşağıdaki stiller aşağıda belirtilmiştir:
.çift- sınır {
arka plan- renk : #ccc;
sınır : 4 piksel sabit yeşil;
dolgu: 50 piksel;
Genişlik : 16 piksel;
yükseklik : 16 piksel;
konum: göreli;
marj: 0 Oto;
}
CSS özelliklerinin açıklaması aşağıda verilmiştir:
- İlk olarak, “ arka plan rengi gri olan ' ve ' sınır ” 4px ağırlığında ve yeşil renktedir.
- “ dolgu malzemesi Her taraftan 50px iç boşluk oluşturmak için ” 50px.
- Sonunda, “ Genişlik ' Ve ' yükseklik' 16 piksel Ayrıca ' marj ” 0 otomatiktir, yani üst ve alt kenar boşlukları sıfır ve sol olacaktır.
Web sayfası şöyle görünür:
Çıktı, sınırın “div”e uygulandığını gösterir.
Adım 4: CSS Seçicinin Eklenmesi
Şimdi, stil etiketinde “ bulunan ikinci kutuya doğru ilerleyin. :önce ” seçici ekli ve aşağıdaki kodu yazın:
.çift- sınır :önce {arka plan : hiçbiri;
sınır : 4 piksel sabit mavi;
içerik : '' ;
pozisyon: mutlak;
üst: 4 piksel;
sol: 4 piksel;
sağ: 4 piksel;
alt: 4 piksel;
}
Özellikler aşağıda açıklanmıştır:
- Kullan ' konum ” özelliği, bir öğenin konumunu sabit hale getirir.
- Bundan sonra “ üst, sol, sağ ve alt ”, yeni oluşturulan öğenin orijinal öğeden kenar boşluğunu tanımlar.
- “:” adlı bir CSS seçici önce ”, seçilen bir öğenin önüne içerik ekler.
Çıktı şuna benzer:
Farklı renkler kullanılarak çift kenarlık bu şekilde eklenebilir.
Çözüm
Çift kenarlık eklemek için önce bir div öğesi oluşturun ve bunu bir sınıfa atayın. Ardından, CSS'yi ekleyin ' konum ” göreli olarak ayarlanması gereken özellik. Ardından, kullanıcıların seçilen bir öğeden önce içerik ekleyebilmesi için CSS Seçici ':before' ekleyin. Bu kılavuz, çeşitli renklerle çift bordürlerin kullanımını göstermiştir.