Web Tasarım Dersleri Kenarlık Çizgisi (Border)

Web Tasarım Dersleri Kenarlık Çizgisi (Border), Kenar çizgisi (border), içerik alanını çerçeveleyen çizgi olarak tanımlayabiliriz. Border ile ilgili olarak çizgi genişliği, çizgi rengi, çizgi stili… vb birçok özellik vardır. İşte Onlar:

Kenar Çizgisi Stili (Border – Style)

Border çizgisini hiç göstermeyebileceğimiz gibi (none), noktalı(dot-ted), kesik çizgili (dashed) normal, (solid) ve çit çizgili (double) olarak da gösterebiliriz.

<code>

<head>

<style type=”text/css”>

p.normal1 {border-style:solid;}

p.nokta {border-style:dotted;}

p.cizgi {border-style:dashed;}

p.cift {border-style:double;}

</style>

</head>

<body>

<p class=”normal”> Bu çerçeve genel çerçeve yapısını ifade eder. </p>

<p class “nokta”> Bu çerçeve noktalarla çizilmiştir. </p>

<p class “cizgi”> Bu çerçeve kesik çizgilerle çizilmiştir.</p>

<p class=”cift”> Bu metnin etrafına çift çizgili border atanmıştır </p>

</body>

</code>

Örnekte gördüğünüz gibi değişik border stilleri kullandık. Fakat border hep çreçeve şeklinde idi yani içeriğimizin tam olarak çerçeveliyordu. CSS ile istersek her kennara ayrı stil de tanımlayabiliriz.

Bunun için; border-top-style, border-right-style, border-bottom-style, border-left-style özelliklerini kullanacağız.

<code>

<head>

<style type=”text/css”>

p {border-top-style:solid;

border-right-style:dotted;

border-bottom-style:dashed;

borderleft-style:none;

}

</style>

</head>

<body>

<p> Bu çerçevenin her kenarına farklı bir siti uygulanmıştır. </p>

</body>

</code>

Kenar Çizgisi Genişliği (Border-Width)

Çizgi genişliğini belirlemek için kullanılır. Tek başına değil stil tanımlaması ile birlikte kullanılır.

thin: İnce kenar çizgisi içindir

medium:Orta kalınlıkta kenar çizgisi için

thick: kalın kenar çizgisi için

Ayrıca kenarlık kalınlığı için piksel (px) olarak da değer atanabilir.

<code>

<head>

<style type=”text/css”>

p.kalin

{

border-style:solid;

border-width:5px;

}

p.orta

{

border-style:solid;

border-width:medium;

}

p.ince

{

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

<p class=”kalin”> Kenarlık çizgisi 5px değerinde atanmıştır. </p>

<p class=”orta”> Kenarlık çizgisi için medium değeri kullanımıştır. </p>

<p class=”ince”> Kenarlık çizgisi 1px değerinde atanmıştır. </p>

</body>

</code>

şeklindedir.

Bize ulaşmak isterseniz eğer,

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

Web Tasarım Dersleri Kenarlık Çizgisi (Border)
Bu yazıya oy ver

By | 2017-08-03T16:04:43+00:00 Aralık 7th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL