Resimlerin veya metinlerin etrafına yerleştirilen çerçeveler siteyi süsler ve tasarımına çeşitlilik katar. Kenarlık oluşturmak için tablolar kullanırsanız, her bir kenarlığın kodu çok fazla yer kaplar. Ayrıca, bu durumda, her çerçeve için HTML kodunu yeniden yazmanız gerekecektir. CSS ile bu bordür ile çevrelenecek tüm elemanlar için bir kere basit bir kod yazarak istediğiniz kalınlıkta ve renkte kolayca bordür oluşturabilirsiniz. Bu teknoloji, gerekirse sitedeki çerçevelerin türünü birkaç dakika içinde değiştirmeye izin verecektir.
Bu gerekli
- - kendi web sitenizin olması;
- - CSS'nin ne olduğunu ve bu stillerin sitede nerede yazıldığını öğrenin.
Talimatlar
Aşama 1
Kenarlık oluşturmak için önce aşağıdaki kodu CSS'ye yazın:
ramka {}
Adım 2
Kenarlığı istediğiniz boyuta getirmek için, çizgi genişliğini piksel olarak ayarlayan border-width parametresini kullanın. Örneğin, çerçeve çizgisinin 3 piksel genişliğinde olması gerekiyorsa, giriş şöyle görünecektir:
ramka {sınır genişliği: 3 piksel;}
Aşama 3
Şimdi border-style parametresini kullanarak border-style parametresini tanımlayın. Kenarları düz düz çizgiler olan bir kenarlık oluşturmak istiyorsanız, koda şu girişi kaşlı ayraçlar arasına yerleştirin - border-style: solid.
4. Adım
Noktalı bir kenarlık, şu şekilde yazılarak elde edilebilir: border-style: noktalı. border-style: dashed öğesinin kontrol edilmesi size kesikli bir kenarlık verecektir.
Adım 5
Kenarlığı şu şekilde bir çift düz çizgi yapabilirsiniz: border-style: double. Kenarlık stilini kullanın: oluk veya kenarlık stili: metni veya görüntüleri 3B yan efektlerle çerçeveler halinde çerçevelemek için çıkıntı. Bu iki seçenek arasındaki fark, ilk durumda çerçevenin girintili çizgilerden ve ikincisinde dışbükey olanlardan oluşmasıdır.
6. Adım
Bu kodu kullanın: border-style: inset, bir site öğesinin kenarlığı ile bir iç metin efekti oluşturmak için. Kenarlığın içeriğini kenarlıkla birlikte tam tersine dışbükey yapmak için border-style: outset yazın.
7. Adım
Ayrıca kaşlı ayraçlar arasına yerleştirilen border-color parametresini kullanarak çerçeveye istediğiniz rengi ekleyebilirsiniz. Kenarlığı kırmızı yapmak istiyorsanız, border-color: red, blue - border-color: blue, orange - border-color: orange yazın.
8. Adım
Tüm seçenekleri içeren CSS sınır kodu şöyle görünür:
ramka {sınır genişliği: 3 piksel; kenarlık stili: katı; kenarlık rengi: mavi;}
9. Adım
Şimdi, HTML'de şunu yazın:
Çerçeve içeriği "Çerçeve içeriği" ifadesi yerine, istediğiniz resmin metnini veya kodunu girin.
Adım 10
Böylece sitede sınırsız sayıda eleman tasarlayabilirsiniz. Çerçevenin görünümünü değiştirmek için sadece CSS kodunu değiştirmeniz yeterlidir.
