Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Dışçizgi (outline)

Dışçizgi özelliğii, bir öğenin sınırları dışını çizmek için kullanılır.

Genel

Dışçizgi, öğelerin çevresine sınırların dışından çizilen ve öğeyi kendi başınaymışcasına ortaya çıkaran bir tanımlamadır.

Bu özellik öğelerin çevresine dışçizgi çizer. Çizginin stilini, rengini ve enini tanımlayabilirsiniz.

Not: Dışçizgi ayrıca bir alan gerektirmez ve her zaman dikdörtgen olmaları gerekmez.
Destekleyen Tarayıcılar:IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Özellik Açıklama Değerler IE F N W3C
outline Bir tanımlamada tüm özellikleri yazabilme olanağı sağlayan kısaltılmış bir bildirimdir. dışçizgi-rengi
dışçizgi-stili
dışçizgi-eni		 - 1.5 - 2
outline-color Bir öğenin çevresindeki dışçizginin rengini belirtir. renk
invert		 - 1.5 - 2
outline-style Bir öğenin çevresindeki dışçizginin stilini tanımlar. none
dotted
dashed
solid
double
groove
ridge
inset
outset		 - 1.5 - 2
outline-width Bir öğenin çevresindeki dışçizginin enini belirtir. thin
medium
thick
uzunluk		 - 1.5 - 2

Dışçizgi (outline) Özelliği

Bir dışçizgi, öğenin çevresine çizilir. Dışçizgi sınır çizgileri dışında kalır ve öğeyi kendi başınaymış gibi gösterir. Bu özellik öğelerin çevresine dışçizgi tanımlamak için kullanılır.

Not: Dışçizgiler alan istemez ve dikdörtgen olmaları da gerekmez. 
button
{ 
outline: red solid thin
}
Olası değerler:
dışçizgi-rengi dışçizgi-stili dışçizgi-eni: Bir tanımda tüm dışçizgi özelliklerini tanımlayabilmek için bir kısaltmadır.

Varsayılan değer: "invert none medium" değerleridir

Dışçizgi renk (outline-color) Özelliği

Bir dışçizgi, öğenin çevresindeki çizgidir. Bu çizgi, sınır çizgileri dışında kalır ve öğeyi kendi başınaymış gibi gösterir. Bu özellik öğelerin çevresindeki dışçizginin rengini tanımlamak için kullanılır.

Not: Her zaman outline-style özelliğini outline-color özelliğinden önce tanımlayın. Bir öğenin dış çizgisi olmalı ki çizginin rengini değiştirebilin.

Not: Dışçizgiler yer tutmaz ve dikdörtgen olmaları da gerekmez.
 
button
{ 
outline-style: solid;
outline-color: red
}
Olası değerler:
invert: Varsayılan değer. Renk ters çevirme işlemini yapar. Bu sınırın görünmesi için bir oyundur. Art alanın rengine rağmen sınır görünebilir.
renk: Renk, renk adıdır (red), rgb değer (rgb(255,0,0)), ya da hex sayı (#ff0000)

Dışçizgi stil (outline-style) Özelliği

Dışçizgi bir öğenin çevresine çizilen çizgidir. Bu özellik dışçizginin stilini tanımlamakta kullanılır.

Not: Dışçizgiler yer tutmaz ve dikdörtgen olmaları da gerekmez.
 
button
{ 
outline-style: solid
}
Olası değerler:
none: Hiç sınır olmadığı belirtir
hidden: "none" ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar.
dotted: noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur.
dashed: kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur.
solid: Düz çizgiyi tanımlar
double: İkili sınır çizgisini tanımlar. İkili dışçizginin eni outline-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi dışçizgi renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı dışçizgiyi tanımlar. Etkisi dışçizgi renginin değerine bağlıdır.
inset: Üç boyutlu ek dışçizgiyi tanımlar. Etkisi dışçizgi rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç dışçizgiyi tanımlar. Etkisi dışçizgi renginin değerine bağlıdır.

Dışçizgi Eni (outline-width) Özelliği

Dışçizgi bir öğenin çevresine çizilen çizgidir. Bu özellik dışçizginin enini tanımlamakta kullanılır.

Not: Her zaman dışçizgi stil özelliğini dışçizgi en özelliğinden önce tanımlamak gerekir. Bir öğenin dışçizgisi tanımlanmış olmalı ki kalınlığını değiştirebilesiniz.

Not: Dışçizgiler yer tutmaz ve dikdörtgen olmaları da gerekmez.
 
p
{
outline-style: solid;
outline-width: medium
}
Olası değerler:
thin: dışçizginin ince olduğunu tanımlar
medium: Varsayılan değer. dışçizginin değeri medium olur.
thick: dışçizgi kalındır tanımı.
uzunluk: dışçizginin kalınlığını belirlemenizi sağlar