 Çerçeve ( border ) değerlerinin ayarlanması
Herhangi bir elemana çerçeve çizebilisiniz. Bunun için border özelliklerini kullanıyoruz. Birçok özelliği bu bölümde görebilirsiniz. border-width çerçeve kalınlığını ayarlar. Alabileceği değerler thin ( ince ), medium ( orta ), thick ( kalın ) ve kalınlık değeridir.
Kullanımı border-width : ustkalınlık sağkalınlık altkalınlık solkalınlık şeklindedir. Kullanılmayan değerler için eğer verildiyse karşı kenar değeri aksi halde ise varsayılan değer kullanılır. Bu özelliğin biraz gelişmişi her kanar için bir çerçeve kalınlığı belirlemektir. Bunun için üstkenarın kalınlığını belirlemek için border-top-width, sağkenarın çerçeve kalınlığını belirlemek için border-right-width, altkenarın çerçeve kalınlığını belirtmek için border-bottom-width ve sol kenarın çerçeve kalınlığını belirlemek için border-left-width özellikleri kullanılır. border-color çerçevenin hangi renkte çizileceğini belirtir. Renk ismi veya değeri girilebilir. Sırasıyla üst kenar rengi, sağ kenar rengi, alt kenar rengi ve sol kenar rengi verilir. Kullanılmayan renk değeri için karşı kenar rengi ve eğer yoksa varsayılan renk kullanılır. Bu özelliktede her kenar için ayrı bir renk tanımlanması yapılabilir. border-top-color üst kenar rengini belirler, border-right-color sağ kenar rengini belirler, border-bottom-color alt kenar rengini belirler ve border-left-color sol kenar rengini belirler. border-style çerçevenin hangi sitilde çizileceğini belirtir. Alabileceği değerler none, dotted, dashed, solid, double, groove, ridge, inset ve outset şeklindedir. Herkenar için ayrı ayrı çerçeve sitili belirtilebilir. Bunun için border-top-style üstkenarın, border-right-style sağ kenarın, border-bottom-style alt kenarın ve border-left-style sol kenarın çerçeve sitilini belirlemekte kullanılır. Kısayol tanımlamaları hem tüm kenarlar için ve her kenar için yapılabilir. Bunun için tüm kenarlarda kullanılmak üzere border özelliği kullanılabilir. Alabileceği değerler sırasıyla çerçeve kalınlığı, çerçeve sitili ve çerçeve rengidir.
<span style="border: 2px solid green">P { border : 2px solid green;}</span>
<span style="border: 2px inset ">DIV { border : 2 inset;}</span>
<span style="border: medium ridge yellow">.alan { border : ridge yellow;}</span> Ayrıca her kanar için bu özellikler ayrı ayrı verilebilir. Bunun için border-top üst kearın özelliklerini bir seferde belirlemek için, border-right sağ kenarın özellikleri için kısayol yazımı, border-bottom alt kenar için ve border-left ise sol kenar özelliklerini bir seferde belirtmek için kullanılabilir.
<span style="border-top: medium solid; border-left: 3px inset red">.alan { border-top : solid; border-left: 3 inset red;}</span>
<span style="border-left: 2px ridge; border-bottom: 3px outset blue">P { border-bottom : 3 outser blue; border-left: 2 ridge;}</span> widthUygulandığı elemanın genişliğini belirmekte kullanılır. Mesela bir paragraf için genişlik belirtildiği durumlarda bu genişliğin aşılmasında bir alt satıra geçilecektir. Alabileceği değerler auto varsayılan değerdir ve browser gerek gördüğü kadar bir genişlik ayarlaması yapar, istenilen uzunluk değeri girilebilir mesela 400px gibi ve ayrıca yüzdelik değer de atanabilir.
P { width: 600;}
.aciklama { width : 80%;} heihtUygulandığı elemanın yüksekliğini belirtmekte kullanılır. Auto ile browser kendi bir yükseklik değeri atar ve istenirse bir yükseklik değeri verilerek elemanın yüksekliği belirtilebilir.
DIV { height : auto;}
.aciklama { height : 100;} floatUygulandığı elemanın sola veya sağa dayanmasını sağlar. Alabileceği değerler right sağa dahalı gösterim için, left sola dayalı gösterim için ve none herhangi bir etki yapılmaması için.
.acikalam { float : right; } clearBu özelliğin uygulandığı elemanın kenarlarında kalan kayan elemanların konumunu ayarlar. Alacağı değerler left sol kenar boş, riht sağ kenar boş, both iki kenar boş ve none yani etkisiz kalınmasıdır.
 |
Bu içeriğe ait yorumları masaüstüne alabilirsiniz
