Web Tasarım Dersleri Kenar Çizgisi Rengi (Border-Color)

Web Tasarım Dersleri Kenar Çizgisi Rengi (Border-Color)

Kenarlık rengini belirlemek için kullanılır. Bu da tıpkı border genişliği gibi tek başına değil border stili ile birlikte kullanılır.

Örnek kod çalışması

(lütfen kodlama yaparken <code> etiketini kullanmayın.)

<code>

<head>

<style type=”text/css”>

p.red

{

border-style:solid;

border-color:red;

}

p.green

{

border-style:solid;

border-color:#98bf21;

}

</style>

</head>

<body>

<p class=”red”> Kenarlık rengi kırmızı olarak atanmıştır. </p>

<p class=”green”> Kenarlık rengi yeşil olarak atanmıştır. </p>

</body>

Her kenara farklı genişlikte farklı stilde çizgi atanır da farklı renkte atanmaz mı. Bunun için de border-top-color, border-right-color, border-bottom-color, border-left-color özelliklerini kullanacağız.

<head>

<style type=”text/css”>

p

{

border-style:solid;

border-top-color:red;

border-right-color:#98bf21;

border-bottom-color:blue;

border-left-color:gray

}

</style>

</head>

<body>

<p class=”kalin”> Her kenar için farklı bir kenarlık rengi kullanılmıştır. </p>

</body>

</code>

Kenar Çizgisi (Border)

Evet yine beklediğiniz bir cümle geliyor. Tüm border özelliklerini bir arada tabiki kullanabilirsiniz.

<code>

<head>

<style type=”text/css”>

p{border:5px solid red;}

</style>

</head>

<body>

<p> Burada 5px kalınlığında kırmızı renkli bir kenarlık kullanılmıştır. </p>

</body>

Dış-Çizgi (Outline) Özellikleri

Dış-çizgi özelliği, öğelerin etrafını kenar çizgileri dışından çizmek için kullanılır. Böylece öğe vurgulanarak ön plana çıkarılmış olur.

Dış-Çizgi stil (Outline-Style) Özelliği 

Bu özellik dış-çizginin stilini belirlemek için kullanılır. Border için kullandığımız gibi bu özellik için de dotted, dashed, solid, double, değerlerini kullanacağız.

<head>

<style type=”text/css”>

p

{

border:gray solid;

outline-style:double;

}

</style>

</head>

<body>

<p> Tüm bilindik tarayıcılar tarafından desteklenmesine rağmen outline özelliğini internet explorer sürümlerinden sadece <b> ie8</b> desteklemektedir </p>

</body>

</code>

Dış-Çizgi Renk (Outline-Color) Özelliği

Öğelerin etrafına çizilen dış çizginin rengini ayarlamak için kullanılır. Mutlaka outline-style özelliğini outline-color özelliğinden önce tanımlamalıyız. Olmayan bir çizginin rengini belirleyemeyiz değil mi?

Kullanılan Değerler

invert: Renkleri ters çevirir. Art alan rengi ne olursa olsun çizginin görünmesini sağlar. Bu değer aynı zamanda da varsayılan değerdir.

renk: Özelliğe verilebilecek ikinci değer renktir. Renk adı (örn:red), renk hex değeri (#ff0000) ya da renk rgb değeri (örn:255,0,0) kullanılabilir.

Dış-Çizgi (Outline) Özelliği

Yukarıda kullandığımız tüm özellikleri bir arada kullanmamızı sağlayan özelliktir.

<head>

<style type=”text/css”>

p {

border:red solid thin;

outline:#00ff00 dotted thick;

}

</style>

</head>

<body>

<p><b> Note: </b> Internet Explorer does not support the outline properties. </p>

Border Dış (Margin) Alanı

En başta da belirttiğimiz gibi margin öğenizi çevreleyen bir başka ifade ile border çizgisini çevreleyen alandır. Uzunluk değeri (em, px… vd) yüzdelik (%) değeri ve auto değerlerini alabilir margin-top, margin-bottom, margin-right, margin left özellikleri ile kullanılır.

<code>

<head>

<style type=”text/css”>

p.margin {

margin-top:100px;

margin-left:50px;

}

</style>

</head>

<body>

<p> Bu paragrafa herhangi bir margin değeri uygulanmamıştır. </p>

<p class=”margin”> Bu paragrafa üstten 100 px, soldan ise 50 px margin değeri uygulanmıştır. </p>

</body>

Birde bu döt özelliği bir arada kullanmamızı sağlayan margin özelliği bulunmaktadır.

Kullanımı

margin: 25px 50px 75px 100px;

şeklindedir.

Dört değer yan yana kullanıldığında ilk değer üst margin’i (top) ikincisi sağ margin’i (right), üçüncüsü alt margin’i (bottom) dördüncüsü de sol margin’i (left) ifade eder. Bir başka ifade ile değerler saat yönünde sınırlanırlar. (üst, sağ, alt, sol)

Üç değer yan yana kullanılırsa;(örn: margin: 25px 50px 75px) ilk değer üst margin’i (top), ikincisi sağ ve sol margin’i (right-left), üçüncüsü ise alt margin’i (bottom) ifade eder.

Sadece iki değer kullanılırsa (örn: margin: 25px  50px ) ilk değer üst ve alt margin’i (top-bottom), ikincisi ise sağ ve sol margin’i (right-left) ifade eder.

Tek değer kullanıldığında ise kullanılan değer dört yön içinde geçerli olacaktır.

<code>(lütfen kodlamanıza bu kodu yazmayın buradan sonrasıyla devam edin)

<head>

<style type=”text/css”>

p{ margin:100px };

</style>

</head>

<body>

<p> 100 px değeri tüm yönler için de geçerlidir. </p>

</body>

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

Web Tasarım Dersleri Kenar Çizgisi Rengi (Border-Color)
Bu yazıya oy ver

By | 2017-08-03T14:50:25+00:00 Aralık 7th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , |0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL