HTML5'te Kenarlıklar ve Arka Planların Kullanımı

Var kenarlıklar ve arka planlar gibi HTML ve CSS'de yaygın olarak kullanılan özellikler, CSS3'ün dahil edilmesinden bu yana, örneğin yuvarlatılmış kenarlara sahip olabileceğimiz şekilde geliştirildiler, oldukça basit görünen bir şey olmasına rağmen, bu geçmişte mevcut değildi, bu nedenle bu işlevsellikler şimdi oldukça genişliyor hem tasarımcıların hem de geliştiricilerin işi.
Bir kenar uygularken çok önemli 3 özelliği dikkate almalıyız, bunlar:

• sınır genişliği: sınırın genişliğini başlatır.
• sınır stili: kenarlık çizme stilini başlatır.
• sınır rengi: kenarlık rengini başlatır.

Özellikleri öğrendikten sonra, basit bir kenar uygulaması örneğine bakalım:

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Sınırın genişliğini tanımlamak için, aşağıdaki gibi ölçü birimleri ile 3 ölçüme dayalı olarak çalışabiliriz. piksel, cm, em; yüzdelere ve ön ayarlara göre, ince, orta ve kalın.
Stil ile kenarlığın türünü tanımlarız, bunun için aşağıdaki seçeneklere sahibiz:

• Yok
• kesikli
• noktalı
• çift
• oluk
• iç metin
• başlangıç
• çıkıntı
• sağlam

Şimdi bu stillerin her birinin ne anlama geldiğini grafik olarak görelim:

Ayrıca, öğenin her bir kenarına bir kenarlık ve stil uygulama olasılığı da vardır, bunun için aşağıdaki talimatları kullanacağız:
[color = # d3d3d3] kenarlık-üst genişlik
kenarlıklı tarz
kenarlık-üst-renk [/ color]
sınır-alt-genişlik
sınır-alt-tarzı
kenarlık-alt-renk
[color = # d3d3d3] kenarlık-sol-genişlik
kenarlık-sol tarzı
border-sol-color [/ color]
[color = # d3d3d3] kenarlık-sağ genişlik
kenarlık-sağ-stili
kenarlık-sağ-renk [/ color]
Neresi Tepe üst anlamına gelir, alt alttakine, ayrıldı sola ve Sağ sağda.
Bununla, aynı elemanda kenar türlerinin kombinasyonlarını bile elde edebiliriz.
İkincisinin bir örneğini görelim:

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Kod bize aşağıdaki sonuçları verir:

Yuvarlatılmış kenarlar oluşturmak için özelliği kullanabiliriz yarıçap bu, kenarın eğrilik yarıçapını belirtmemize izin verir.
Şimdi kodun nasıl uygulanacağını görelim:

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Bu, aşağıdaki ekranla sonuçlanır:

Bununla, bu unsurlarla ilgili bu öğreticiyi tamamlıyoruz, artık CSS'mizdeki iyileştirmeleri çok fazla çaba harcamadan ve en son teknolojik araçlarla birleştirebiliriz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.