Geliştiriciler, web sayfalarını daha çekici hale getirmek için birden çok CSS özelliği uygulayabilir, örneğin ' yükseklik ' Ve ' Genişlik ” boyutu ayarlamak için özellikler, “ Metin hizalama ” metni ayarlamak için, “ kenarlık stili ' Ve ' sınır yarıçapı ” öğenin etrafındaki kenarlığı ayarlamak için özellikler. Ek olarak, yalnızca nesnelerin arkasındaki şeyleri daha görünür kılmak için, gereksinimlerinize göre öğenin bir tarafında olduğu gibi bir kenarlık ekleyebilirsiniz.
Bu gönderi şunları gösterecektir:
Yöntem 1: Kenarlığı Bir Tarafa Ayarlayın
CSS'de kullanıcılar, istenen öğenin bir tarafında kenarlık ayarlayabilir. Bu amaçla “ sol kenar ”, “ sağ sınır ”, “ sınır üstü ' Ve ' sınır-alt ” özellikleri sol, sağ, üst veya alt tarafa kenarlık eklemek için kullanılır.
Bu bölümde özellikle container'ın sol tarafındaki kenarlığı ayarlayacağız. Bunu yapmak için aşağıda belirtilen talimatları izleyin.
1. Adım: Bir div Kapsayıcısı oluşturun
İlk olarak, “ yardımıyla bir div kabı oluşturun. 2. Adım: Başlık Girin Ardından, “< h1> ” etiketi, div kabının içine bir başlık eklemek için. Ayrıca ihtiyaca göre diğer başlık etiketlerini de kullanabilirsiniz, örneğin “< h1> ” ila “< h6> ” etiketleri: Şimdi, HTML div kapsayıcısına erişin ve sınıf adına erişin. Bunu yapmak için bir sınıf seçici “ # ”, sınıf adıyla birlikte kullanılır. 4. Adım: Kenarlığı Yalnızca Bir Tarafa Ekleyin Div kapsayıcısına eriştikten sonra aşağıda belirtilen CSS özelliklerini uygulayın: Ortaya çıkan görüntü, yalnızca bir tarafı olan sınırı gösterir: Her tarafta kenarlığı farklı renklerle ayarlamak için yukarıdaki HTML kodunu kullanın. Ardından, id adı ve seçici yardımıyla div kabına erişin: Sonuç olarak, her iki tarafta farklı stillere sahip kenarlık uygulanacaktır: Kenarlığı yalnızca bir tarafa ayarlamak için, önce “ kullanarak bir div oluşturun.
< h1 > Bir Tarafta Sınır h1 >
div >
Kapsayıcının başarıyla oluşturulduğu görülebilir:
3. Adım: div Container'a erişin
sol kenarlık: 5 piksel katı kırmızı ;
arka plan: rgb ( 56 , 239 , 245 ) ;
kenar boşluğu: 20 piksel 100 piksel;
genişlik:200 piksel; yükseklik: 150 piksel
}
Burada:
Yöntem 2: Farklı Stillerle Her Kenarda Kenarlık Ayarlayın
kenar boşluğu: 80 piksel;
kenarlık genişliği: 8px 2px 1px 10px;
sınır yarıçapı: 50px;
kenarlık stili: iç metin, çift noktalı;
kenarlık rengi: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Yukarıda verilen kodda:
Bu makalede, CSS kenarlığını bir ve birden çok kenarda ayarlamanın farklı yollarını öğrendiniz. Çözüm