CSS de Sınır Çizgisi
Sınır Çizgi Şekilleri
CSSde sınır çizgilerinin şeklini belirlemek için border-style
özelliğinden yararlanırız. Bu özelliğin değerleri şunlardır: none,
dotted, dashed, solid, double, groove, ridge, inset, ve outset.
Aşağıdaki uygulama bu değerlerin nasıl sonuç verdiğini gösteriyor. NOT:
Bu özelliği Netscape desteklemiyor.
Kod Alanı:<html>
<head>
<title>Sınır çizgi şekilleri,</title>
</head>
<body>
<p style="border-style: none">none</p>
<p style="border-style: dotted">dotted</p>
<p style="border-style: dashed">dashed</p>
<p style="border-style: solid">solid</p>
<p style="border-style: double">double</p>
<p style="border-style: groove">groove</p>
<p style="border-style: ridge">ridge</p>
<p style="border-style: inset">inset</p>
<p style="border-style: outset">outset</p>
</body>
</html>
Uygulamada sonuçlarını gördüğümüz bu özellik değerlerinin listesini aşağıda bulabilirsiniz.
none Sınır çizgisinin olmamasını sağlar.
border-style: none
dotted Sınır çizgisini noktalı formatta gösterir. Çoğu gözatıcıda (browserda ) katı formatta çıkar.
border-style: dotted
dashed Sınır çizgisini kesikli formatta gösterir. Çoğu gözatıcıda (browserda ) katı formatta çıkar.
border-style: dashed
solid Sınır çizgisini katı formatta gösterir.
border-style: solid
solid Sınır çizgisini katı formatta gösterir.
border-style: double
solid Sınır çizgisini çift çizgili formatta gösterir.
border-style: double
groove Sınır çizgisini oluk formatında gösterir.
border-style: groove
ridge Sınır çizgisini tümsek formatında gösterir.
border-style: ridge
inset Sınır çizgisini 3D basılmış düğme formatında gösterir.
border-style: inset
outset Sınır çizgisini 3D düğme formatında gösterir.
border-style: outset
Bunların yanısıra dilersek birkaç değeri birden yazarak melez sınır
çizgileri de oluşturabiliriz: border-style: değer1 değer2 değer3.
Sınır Çizgi Rengi
Sınır çizgilerinin rengini belirlemek için border-color özelliğine
renk değerleri veririz. Eğer border-color özelliğine tek bir renk değeri
verirsek, sınır çizgisi o renkte olur. Eğer iki renk değeri verirsek,
sınırın üst ve alt çizgileri ilk rengi, sınırın sol ve sağ çizgileri
ikinci rengi alırlar. Eğer özelliğe üç renk değeri verirsek, üst sınır
çizgisi ilk rengi, sol ve sağ çizgiler ikinci rengi, alt çizgi üçüncü
rengi alır. Eğer özelliğe dört renk değeri atarsak, üst çizgi ilk rengi,
sağ çizgi ikinci rengi, alt çizgi üçüncü rengi ve sol çizgi dördüncü
rengi alır. NOT: Bu özelliği Netscape desteklemiyor.
Kod Alanı:<html>
<head>
<title>Sınır çizgi renkleri,</title>
</head>
<body>
<p style="border-style: solid; border-color:red">Tek renk</p>
<p style="border-style: solid; border-color:red blue">İki renk</p>
<p style="border-style: solid; border-color:red blue green">Üç renk</p>
<p style="border-style: solid; border-color:red blue green yellow">Dört renk</p>
</body>
</html>
Sınır Çizgi Kalınlığı
Sınır çizgisinin kalınlığını border-width özelliği ifade eder. Bu
özelliğe thick (kalın ), medium (orta kalın ), thin (ince ) gibi
standart değerler verebileceğimiz gibi, birimsel değerler de
verebiliriz. (bak. CSS birimleri ) Eğer tek bir değer verilmişse, sınır
çizgisinin her yanı o değeri alır. Eğer iki değer verilmişse, üst ve alt
çizgiler ilk değeri, sol ve sağ çizgiler ikinci değeri alır. Eğer üç
değer verilmişse, üst çizgi ilk değeri, sol ve sağ çizgiler ikinci
değeri, alt çizgi üçüncü değeri alır. Eğer dört değer verilmişse, üst
çizgi ilk değeri, sağ çizgi ikinci değeri, alt çizgi üçüncü değeri alır,
sol çizgi dördüncü değeri alır.
Kod Alanı:<html>
<head>
<title>Sınır çizgi kalınlığı,</title>
</head>
<body>
<p style="border-style: solid; border-width: thick">Tek kalınlık değeri</p>
<p style="border-style: solid; border-width: thin thick">İki kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px">Üç kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px medium">Dört kalınlık değeri</p>
</body>
</html>
border-width özelliğine değerler vererek, sınır çizgilerinin dört
tarafına değerler verebileceğimiz gibi, aşağıdaki özelliklerle sınır
çizgisinin tek bir tarafına da değerler verebiliyoruz.
border-top-width Üst sınır çizgisinin kalınlığını ifade eder.
border-top-width: thin
border-right-width Sağ sınır çizgisinin kalınlığını ifade eder.
border-right-width: 1 cm
border-left-width sol sınır çizgisinin kalınlığını ifade eder.
border-left-width: thick
border-bottom-width Alt sınır çizgisinin kalınlığını ifade eder.
border-bottom-width: 20px
Sınır Çizgi Özelliklerini Tek Kodla İfade Etme
Sayfanın finalinde, yine bütün bu özellikleri aynı anda barındıran
bir özellik sunuyoruz: border. Bu özelliğe şu şekilde değer veririz:
border: (border-width değeri ) (border-style değeri ) (border-color
değeri ). Bu özelliğin sınır kenarlarına indirgendiği aşağıdaki
özellikleri de kullanabilirsiniz.
border-top Üst sınır çizgisinin özelliklerini ifade eder.
border-top: thin outset green
border-right Sağ sınır çizgisinin özelliklerini ifade eder.
border-right: 12px solid rgb(100%, 20%, 20% )
border-left Sol sınır çizgisinin özelliklerini ifade eder.
border-left: thick dotted #ccffff
border-bottom Alt sınır çizgisinin özelliklerini ifade eder.
border-bottom: 1cm double #DA61FF
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
c# . javascript . C . xmlhttprequest . xml . xmlhttprequest nedir . c# ile yazma . c# kod çalıştırma . while . c# kodları . integer . c# string . c# tipler . value . type . reference type . console . const . decimal . boolean . writelene . printf . include . scanf . ajax nedir . http . http istemleri . ajax örneği . ajax tarayıcı desteği . activexobject . ajax ile sunucuya istek göndermek . null . showhint . getxmlhttpobject . statechanged . ajax php örneği . ajax asp örneği . ajax html sayfası . c# doğuşu . c# programlama sanatı . c# atama işlemleri . c# kuralları . c# türlerin tanımlanması . int . programlama . c# program kodları . c# döngü . c# ile ekrana yazı yazdırmak . c# aritmetik . c# operatörler . c# int . casting . byte . c# console . c# konsoldan veri girişi . static void main . c# decimal veri tipi . c# kayar nokta verileri . IEEE . c# yazı biçimlendirme . currency . general . c# char . compareTo . equals . c# while döngüsü . c# for döngüsü . c# foreach döngüsü . döngüler . hata yakalama . catch . pperatörler . .net framework . delphi . c++ builder . write . c# deki string dönüşümler . C nedir . C fonkisyonlar . getch .
Yeni yorum gönder