Harun İstenci
Harun İSTENCİ
Kurucu ve Yönetici
 1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...

Kişisel Web Sitesi: harunistenci.com

Öne Çıkan Şehirler

İstanbul
Sivas
Safranbolu
Kastamonu
Eskişehir
Edirne
Denizli
A320 Ailesi Aero Spacelines Afyonkarahisar Airbus Akıllı TV'ler Aliya İzzetbegoviç Almanya Amasya Android Android TV Ankara Antik Kent Antivirüs Antonov Araç Arkadaşlar Arkeoloji Avrupa AWACS Aydın Aydın Çufaoğlu Ayvalık Azdavay Baden-Württemberg BAE Systems Balıkesir Basın Açıklaması Bedesten Bergama Beşiktaş Beyoğlu Bilecik BioShock Blog Blogger Boeing Bolu Bombardier Bosna Hersek Breguet Bursa Cami Cide Concorde CSS Eğitimleri Çamlıca Tepesi Çarşı Çeşme Çevre Defender Denizli Doğa Douglas Aircraft Company EADS Edirne Efes Eğitim Eğlence Elektronik Aletler Eminönü Erasmus Erzincan Eskişehir Fatih Fokker Fransa Galeri Gar Gebze Göl Göynük Grand Theft Auto Guppy Gürün Haber Hamam Han Harun İstenci Havacılık Hayvanlar Heidelberg Heykel Ilgaz Ilyushin İğdir İnsanlar İnternet İsmail Ulukaya İstanbul İstenci Developer İstenci Education İstenci Security İstenci SEO İstenci Studios İşletim Sistemleri İzmir İzmit Jumbo Jet Kadıköy Kale Kanyon Karaağaç Karabük Karşılaştırma Kartepe Kastamonu Kastamonu Türbe Kemaliye Keşfet Kilise Kocaeli Konak Konya Köprü Köyler Kule Külliye Küre Linus Torvalds Linux Lockheed Lockheed Martin Logitech Ludwigshafen Maltepe Mannheim Marmaris McDonnell Douglas Medrese Merak Edilenler Microsoft Moda Motivasyon Muğla Muhammet Ali Sağlar Müze Nedir Ortaköy Osmangazi Oyun Oyunlar Paris PC PHP Saat Kulesi Safranbolu Sakarya Salgın Sapanca SEO Siber Güvenlik Sivas Sivrihisar Siyaset Sorun Çözümü Strasbourg Stratolaunch Suhoy Sukhoi Süpersonik Şelale Şile Tarih Tarihe Yön Verenler Taşköprü Teknoloji Trakya Tupolev Türbe TV TV Kutuları Ubuntu Uçaklar United Aircraft Coorparation Üsküdar Veba Vickers Vickers-Armstrongs Limited Video Web Tasarım Wilfrid Voynich Windows Windows 11 Windows10 Windows7 WooCommerce WordPress Yardım ve Destek Yazılım Yelken Yerler Yollar Yurt dışı

CSS - Border Kullanımı
 CSS’te border etiketini hedeflenen bir öğenin sınırlarını belirlemede, şekli, rengini ve genişliği gibi değerler vermek için kullanırız. CSS border(kenar) çizgisi özellikleri ile kenar çizgisi biçimi, rengi ve kalınlığı ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır;
  • border - Temel kenarlık için kullanılır.
  • border-style - Kenar çizgisi
  • border-top-style - Üst kenar çizgisi
  • border-right-style -  Sağ kenar çizgisi
  • border-bottom-style - Alt kenar çizgisi
  • border-left-style - Sol kenar çizgisi
  • border-width - Kenar çizgi genişliği-kalınlığı
  • border-top-width - Üst kenar çizgi genişliği-kalınlığı
  • border-right-width - Sağ kenar çizgi genişliği-kalınlığı
  • border-bottom-width - Alt kenar çizgi genişliği-kalınlığı
  • border-left-width - Sol kenar çizgi genişliği-kalınlığı
  • border-color - Kenar çizgi rengi
  • border-top-color - üst kenar çizgi rengi
  • border-right-color - sağ kenar çizgi rengi
  • border-bottom-color - alt kenar çizgi rengi
  • border-left-color - sol kenar çizgi rengi

CSS Kenar Biçimleri

 Kenar çizginin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler Herhangi bir değer yazılmadığı zaman none varsayılan olarak geçerlidir. Aşağıdaki değerleri alabilir;

Not: Kenar biçimlerindeki ayrıntıların daha net görünmesi için altın (gold) rengi kullandık.

dotted: Noktalı kenarlık vermek için kullanılır.
dashed: Kesikli kenarlık vermek için kullanılır.
solid: Düz kenarlık vermek için kullanılır.
double: Çift kenarlık vermek için kullanılır.
groove: 3B oluklu kenarlık vermek için kullanılır.
ridge: 3B düz kenarlık vermek için kullanılır.
inset: 3D yerleştirme kenarlık vermek için kullanılır.
outset: 3D başlangıç kenarlık vermek için kullanılır.
none: Kenarlık vermez.
hidden: Gizli bir kenarlık vermek için kullanılır.

Yukarıdaki kenarlıkların bir de kodlarını inceleyelim...

[code type="CSS"].kutu-dotted { width:100%; border:4px dotted gold; margin-bottom:8px; } .kutu-dashed { width:100%; border:4px dashed gold; margin-bottom:8px; } .kutu-solid { width:100%; border:4px solid gold; margin-bottom:8px; } .kutu-double { width:100%; border:4px double gold; margin-bottom:8px; } .kutu-groove { width:100%; border:4px groove gold; margin-bottom:8px; } .kutu-ridge { width:100%; border:4px ridge gold; margin-bottom:8px; } .kutu-inset { width:100%; border:4px inset gold; margin-bottom:8px; } .kutu-outset { width:100%; border:4px outset gold; margin-bottom:8px; } .kutu-none { width:100%; border:4px none; margin-bottom:8px; } .kutu-hidden { width:100%; border:4px hidden; margin-bottom:8px; }[/code] [code type="HTML"]<div class="kutu-dotted"><center><b>dotted</b>: Noktalı kenarlık vermek için kullanılır.</center></div> <div class="kutu-dashed"><center><b>dashed</b>: Kesikli kenarlık vermek için kullanılır.</center></div> <div class="kutu-solid"><center><b>solid</b>: Düz kenarlık vermek için kullanılır.</center></div> <div class="kutu-double"><center><b>double</b>: Çift kenarlık vermek için kullanılır.</center></div> <div class="kutu-groove"><center><b>groove</b>: 3B oluklu kenarlık vermek için kullanılır.</center></div> <div class="kutu-ridge"><center><b>ridge</b>: 3B düz kenarlık vermek için kullanılır.</center></div> <div class="kutu-inset"><center><b>inset</b>: 3D yerleştirme kenarlık vermek için kullanılır.</center></div> <div class="kutu-outset"><center><b>outset</b>: 3D başlangıç kenarlık vermek için kullanılır.</center></div> <div class="kutu-none"><center><b>none</b>: Kenarlık vermez.</center></div> <div class="kutu-hidden"><center><b>hidden</b>: Gizli bir kenarlık vermek için kullanılır.</center></div>[/code]

Kenarları Ayrı Ayrı Şekillendirmek

 İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendire biliriz.
  • border-left-style - Sol kenarın şekli.
  • border-right-style - Sağ kenarın şekli.
  • border-top-style - Üst kenarın şekli.
  • border-bottom-style - Alt kenarın şekli.
 Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:
[code type="CSS"]border-style: dotted solid double dashed;[/code]
  1. Üst kenar - dotted,
  2. Sağ kenar - solid,
  3. Alt kenar - double,
  4. Sol kenar - dashed.
 Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

Kenar Belirtmenin Kısa Yolu

 Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneği inceleyelim: [code type="CSS"].kutum { border: 1px #0000CC solid; }[/code]

border-radius - Yuvarlak Kenarlık

 border-radius etiketi ile kenarlıklarımızı yumuşatabiliriz.

border-radius: Kenarlıklarımızı yumuşatabiliriz.
[code type="CSS"].kutu-radius { width:100%; border: 2px solid gold; border-radius: 25px; margin-bottom:8px; }[/code] [code type="HTML"]<div class="kutu-radius"><center><b>border-radius</b>: Kenarlıklarımızı yumuşatabiliriz.</center></div>[/code]
Bu içerik Harun İstenci tarafından aşağıda belirtilmiş olan kategoriler altında oluşturulmuş ve yayınlanmıştır. İçeriğin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu'na göre suçtur. | İstenci Systems
Yazar Bilgisi: Harun İstenci Hakkında
Harun İstenci Hakkında
1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...
Harun İstenci Resmi Web Sitesi Hakkında Daha Fazla >

CSS’te border etiketini hedeflenen bir öğenin sınırlarını belirlemede, şekli, rengini ve genişliği gibi değerler vermek için kullanırız. CSS border(kenar) çizgisi özellikleri ile kenar çizgisi biçimi, rengi ve kalınlığı ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz...

Yorum Gönder

Yorum alanı herkese açıktır. Olağan dışı bir yorum algılandığında topluluk politikalarımız gereğince 24 saat içinde kaldırılacaktır.

[disqus][blogger]

Author Name

İletişim Formu

Ad

E-posta *

Mesaj *

Blogger tarafından desteklenmektedir.