Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Sınır (border) Özelliği

CSS sınır özelliği bir öğenin sınırına ilişkin stil ve renk tanımlamada kullanılır. HTML içinde yazıların çevresine sınır koymak tablolarla yapılır. Fakat CSS sınır özelliği güzel etkileriyle yazıların çevresini sınırlama olanağı oluşturur ve her öğeye uyarlanabilir.

Özellik Açıklama Değerler IE F N W3C
border Bir tanımda her dört yöndeki sınırları belirlemeye yarayan kısaltılmış bir özelliktir. sınır-eni
sınır-stili
sınır-rengi		 4 1 4 1
border-bottom Bir tanımda alt sınırın tüm özelliklerini bir arada tanımlamaya yarayan kısaltılmış tanımdır. sınır-alt-eni
sınır-stili
sınır-rengi		 4 1 6 1
border-bottom-color Alt sınırın rengini belirler sınır-rengi 4 1 6 2
border-bottom-style Alt sınırın stilini tanımlar sınır-stili 4 1 6 2
border-bottom-width Alt sınırın enini tanımlar thin
medium
thick
uzunluk		 4 1 4 1
border-color Dört sınır için renk belirten değerlerdir. Tek ya da dört renge kadar tanım yapılabilir. renk 4 1 6 1
border-left sol sınır için tüm değerleri tanımlamaya yarayan bir kısaltmadır sol-sınır-eni
sınır-stili
sınır-rengi		 4 1 6 1
border-left-color Sol sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-left-style Sol sınırın stilini tanımlar sınır-stili 4 1 6 2
border-left-width Sol sınırın enini tanımlar thin
medium
thick
uzunluk		 4 1 4 1
border-right Sağ sınır için tüm değerlerin tanımlanabildiği bir kısaltmadır. sağ-sınır-eni
sınır-stili
sınır-rengi		 4 1 6 1
border-right-color Sağ sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-right-style Sağ sınırın stilini tanımlar sınır-stil 4 1 6 2
border-right-width Sağ sınırın enini tanımlar thin
medium
thick
uzunluk		 4 1 4 1
border-style Dört sınırın stillerini tanımlar. birden dörde kadar stil tanımı yapılabilir. none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset		 4 1 6 1
border-top Üst sınırın tüm özelliklerini tanımlamak için kullanılan bir kısaltmadır. üst-sınır-eni
sınır-stili
sınır-rengi		 4 1 6 1
border-top-color Üst sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-top-style Üst sınırın stilini tanımlar sınır-stili 4 1 6 2
border-top-width Üst sınırın enini tanımlar thin
medium
thick
uzunluk		 4 1 4 1
border-width Bir tanımdaki dört sınırın özelliklerinin belirtildiği kısaltılmış özelliktir. Birden dörde kadar tüm değerler yazılabilir thin
medium
thick
uzunluk		 4 1 4 1

Sınır (border) Özelliği

Bir tanımlamada dört sınır için ayarları atamakda kullanılan bir kısaltmadır.
Yalnız 'border' özelliğini kullanarak dört değeri de ayrı biçimde ayarlamak oalanağı yoktur. Eğer bu özellik istenizse, ayrı ayrı tanımlanmalıdır.
 
p
{ 
border: thin dotted #00FF00
}

span
{ 
border: solid #0000FF
}
Olası değerler:
sınır-eni: Dört sınır için bu değer atanır
sınır-stili: Dört sınır için bu değer atanır
sınır-rengi: Dört sınır için bu değer atanır

Alt Sınır (border-bottom) Özelliği

Bir tanımlama öğenin alt-sınır özelliklerini atamak için kullanılan kıslatmadır. 
table
{ 
border-bottom: thin dotted #00FF00
}

span
{ 
border-bottom: solid #0000FF
}
Olası değerler:
alt-sınır-eni sınır-stili sınır-rengi: alt sınır için bu değerleri atar.

Alt Sınır Renk (border-bottom-color) Özelliği

Bir öğenin alt sınırının rengini atamak için kullanılır.

Not: Her zaman border-style özelliğini border-color özelliğinden önce tanımlayın. Bir öğenin önce sınırları olmalı ki siz o sınırın rengini değiştirebilesiniz. 
p
{
border-style: solid;
border-bottom-color: #ff0000
}

p
{
border-style: solid;
border-bottom-color: rgb(255,0,0)
}
Olası değerler:
renk: Renk değer renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir.

Alt Sınır Stil (border-bottom-style) Özelliği

Bir ögenin alt sınır stilini tanımlamakta kullanılır. 
table
{ 
border-bottom-style: solid
}
Olası değerler:
none: sınır olmadığını anlatır.
hidden: tablo öğeleri için sınır karışmasını önlemekte kullanılır "none" gibidir.
dotted: Noktalı sınır tanımlamak için kullanılır. Pekçok tarayıcıda düz çizgi olarak görüntülenebilir.
dashed: Kesik çizgili sınırı tanımlar. Pekçok tarayıcıda düz çizgi olarak görüntülenir.
solid: Düz çizgi
double: İkili sınırı tanımlar. İkili sınırın eni sınır-eni değeri gibidir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.
vascript

Alt Sınır En (border-bottom-width) Özelliği

Alt sınır eni bir öğenin alt sınır enini belirlemekte kullanılır. 
able
{ 
border-style: solid;
border-bottom-width: thin
}

table
{ 
border-style: solid;
border-bottom-width: 0.5px
}
Olası değerler:
thin: İnce alt sınırı tanımlar
medium: Varsayılan değer. Orta kalınlıkta sınırı tanımlar.
thick: Kalın alt sınırı tanımlar
uzunluk: Alt sınırın kalınlığını belirlemekte kullanılır.

Sınır rengi (border-color) Özelliği

The border-color property sets the color of the four borders. This property can take one to four colors. 
table {border-color: red}
dört sınırın rengi kırmızıdır

table {border-color: red green}
üst ve alt sınır kırmızı,
sol ve sağ sınırlarsa yeşil...

table {border-color: red green blue}
üst sınır kırmızı, sol ve sağ sınır yeşil,
alt sınır mavidir.

table {border-color: red green blue yellow}
üst sınır kırmızı, sağ sınır yeşil,
alt sınır mavi, sol sınır sarıdır
Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)),
ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir

Sol sınır (border-left) Özellikleri

Sol sınır özelliği bir tanımlamayla sol sınırın tüm özelliklerini birden atamaya yarar. 
table
{ 
border-left: thin dotted #00FF00
}

table
{ 
border-left: thick #0000FF
}
Olası değerler: Sol-sınır-eni Sınır-stili sınır-rengi: Sol sınırın özelliklerini atar.

Sol Sınır Renk (border-left-color) Özelliği

Sol sınır renk özelliği öğenin sol sınırının rengini saptar. 
p
{
border-style: solid;
border-left-color: #ff0000
}

p
{
border-style: solid;
border-left-color: rgb(255,0,0)
}
Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sol sınır stil (border-left-style) Özelliği

Sol sınır stil tanımı öğenin sol sınırını tanır. 
table
{ 
border-left-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 sınır çizgisinin eni border-width tanımındaki değere eşittir. groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sol sınır eni (border-left-width) Özelliği

The border-left-width property sets the width of an element's left border. 
table
{ 
border-style: solid;
border-left-width: thin
}

table
{ 
border-style: solid;
border-left-width: 0.5cm
}
Olası değerler:
thin: Sol sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sol sınırın değeri medium olur.
thick: Sol sınır kalındır tanımı.
uzunluk: Sol sınırın kalınlığını belirlemenizi sağlar

Sağ sınır (border-right) Özelliği

Sağ sınır özelliği sağ sınırın enini, stilini ve rengini tanımlamak için kullanılan kısaltılmış bir tanımlamadır. 
table
{ 
border-right: thin dotted #00FF00
}

table
{ 
border-right: thick #0000FF
}
Olası değerler:
sağ-sınır-eni sınır-stili sınır-rengi: Sağ sınırın özelliklerini atar.

Sağ sınır renk (border-right-color) özelliği

Sağ sınır rengi özelliği bir öğenin sağ sınırının rengini tanımlar. 
p
{
border-style: solid;
border-right-color: #ff0000
}

p
{
border-style: solid;
border-right-color: rgb(255,0,0)
}
Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sağ sınır stil (border-right-style) Özelliği

Sağ sınır stil özelliği bir öğenin sağ sınırının stilini tanımlar. 
able
{ 
border-right-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 sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sağ Sınır eni (border-right-width) Özelliği

Sağ sınır eni öğenin sağ sınırındaki eni tanımlar. 
able
{ 
border-style: solid;
border-right-width: thin
}

table
{ 
border-style: solid;
border-right-width: 0.5cm
}
Olası değerler:
thin: Sağ sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sağ sınırın değeri medium olur.
thick: Sağ sınır kalındır tanımı.
uzunluk: Sağ sınırın kalınlığını belirlemenizi sağlar

Sınır stili (border-style) Özelliği

Sınır-stili özelliği, dört sınır için stil tanımlar. 
table {border-style: dotted}
her dört sınır noktalıdır

table {border-style: dotted dashed}
üst ve alt sınırlar noktalıdır,
sol ve sağ sınır kesik çizgisidir

table {border-style: dotted dashed solid}
üst sınır noktalı,
sol ve sağ sınır kesik çizgisidir,
alt sınır kesintisiz çizgidir.

table {border-style: dotted dashed solid double}
üst sınır noktalı,
sağ sınır kesik çizgili,
alt sınır kesintisiz çizgi,
sol sınır ise çift çizgidir.
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 sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir. 
table
{ 
border-top: thin dotted #00FF00
}

table
{ 
border-top: solid #0000FF
}
Olası değerler:
üst-sınır-eni sınır-stili sınır-rengi: üst sınırın özellikleridir.

Üst Sınır Renk (border-top-color) Özelliği

Öğenin üst sınır rengini tanımlamakta kullanılır. 
p
{
border-style: solid;
border-top-color: #ff0000
}

p
{
border-style: solid;
border-top-color: rgb(255,0,0)
}
Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Üst Sınır Stil (border-top-style) Özelliği

Bir öğenin üst sınırının stilini tanımlamakta kullanılır. 
table
{ 
border-top-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 sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir.

Üst Sınır Eni (border-top-width) Özelliği

Üst Sınır eni özelliği bir öğenin üst sınırının enini belirtir. 
table
{ 
border-style: solid;
border-top-width: thin
}

table
{ 
border-style: solid;
border-top-width: 0.5cm
}
Olası değerler:
thin: Üst sınırın ince olduğunu tanımlar
medium: Varsayılan değer. üst sınırın değeri medium olur.
thick: Üst sınır kalındır tanımı.
uzunluk: Üst sınırın kalınlığını belirlemenizi sağlar

Sınır Eni (border-width) Özelliği

Sınır-eni özelliği, bir tanımda dört sınırın enini tanımlamaya yarayan kısaltmadır. 
table {border-width: thin}
dört sınır da incedir.

table {border-width: thin medium}
üst ve alt sınır incedir,
sol ve sağ sınırlar orta kalınlıktadır.

table {border-width: thin medium thick}
üst sınır incedir,
sol ve sağ sınır orta kalınlıktadır,
alt sınır ise kalındır.

table {border-width: thin medium thick none}
Üst sınır ince,
sağ sınır orta kalınlıkta,
alt sınır kalın ve
sol kenarda sınır yoktur.
Olası değerler:
thin: Sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sınırın değeri medium olur.
thick: Sınır kalındır tanımı.
uzunluk: Sınırın kalınlığını belirlemenizi sağlar