Css ile Çizgi Rengini,Kalınlığını ve Şeklini Ayarlama


08.01.2012-21:03 Tarihinde Eklendi.
www.seyfettinkahveci.com Derecelendirme: 10 / 10 Oy Sayısı: 16002892Toplam Puan: 35420 / Yorum Sayısı: 412002892 adet.


Kodlar:

<html>
<head>
<style type="text/css">
p.Yok {border-style:none;border-width:2px;border-color:red;}
p.noktanokta {border-style:dotted;border-width:2px;border-color:red;}
p.TireTire {border-style:dashed;border-width:2px;border-color:red;}
p.tekcizgi {border-style:solid;border-width:2px;border-color:red;}
p.Ciftcizgi {border-style:double;border-width:2px;border-color:red;}
p.Golgeli1 {border-style:groove;border-width:2px;border-color:red;}
p.Golgeli2 {border-style:ridge;border-width:2px;border-color:red;}
p.Golgeli3 {border-style:inset;border-width:2px;border-color:red;}
p.Golgeli4 {border-style:outset;border-width:2px;border-color:red;}
p.Gizli {border-style:hidden;border-width:2px;border-color:red;}
</style>
</head>

<body>
<p class="Yok">Çizgi Yok Seyfettin KAHVECİ</p>
<p class="noktanokta">Nokta Nokta Çizgi Seyfettin KAHVECİ</p>
<p class="TireTire">--Tire Tire Çizgi Seyfettin KAHVECİ</p>
<p class="tekcizgi">Tek Çizgi Seyfettin KAHVECİ</p>
<p class="Ciftcizgi">Çift Çizgi Seyfettin KAHVECİ</p>
<p class="Golgeli1">Gölgeli 1 Seyfettin KAHVECİ</p>
<p class="Golgeli2">Gölgeli 2 Seyfettin KAHVECİ</p>
<p class="Golgeli3">Gölgeli 3 Seyfettin KAHVECİ</p>
<p class="Golgeli4">Gölgeli 4 Seyfettin KAHVECİ</p>
<p class="Gizli">Gizli Seyfettin KAHVECİ</p>
</body>
</html>

Kodların Ekran Çıktısı:
css ile çizgi rengi verme
Kod ile ilgili Önemli Kısımlar:
 
Border-style:Çizginin tipi belirlenir. Aldığı parametreleri yukarıdaki örnekte bulunmaktadır.
Border-width:Çizginin kalınlığı belirlenir. Piksel(px) olarak kullanıldığı gibi diğerlerine oranla kaç katı olacağı(em) ve Yüzde(%) olarakda kullanılabilir.
Örneğin:
           border-width:10px;/*10piksel çizgi kalınlığı*/
           border-width:10em;/*Normal Çizgi Kalınlığının 10 katı*/
           border-width:10%;/*10piksel çizgi kalınlığı*/
Border-color: Çizginin Rengini belirler. Direk Red, Green, Blue tarzı yazabileceğiniz gibi #ff00ff olarak veya rgb(255,0,0) olarak da yazabilirsiniz. Eğer #ff00ff gibi tekrarlayan kodları tek sıraya düşürmek yani #f0f olarak kullanmanız hız olarak size olumlu şekilde yansıyacaktır.
Örneğin:
           border-color:red;
           border-color:#ff00ff; /* veya border-color:#f0f; de yazabilirsiniz */
           border-color:rgb(255,0,0);

Not: Ayrıca istedğiniz köşeye de bu uygulamaları yapabilirsiniz.
Örneğin:
border-left-style:solid;
border-left-width:2px;
border-left-color:red;
Bu örnekte sol kısma 2 piksel genişlikte kırmızı renkte ve tek çizgili bir kenarlık verilmiştir.Left yerine Aşağıdaki verdiklerimi kullanabilirsiniz.
Top: Üst,
Bottom: Alt;
Left: Sol;
Right: Sağ;

Not2:Çizgi özelliklerini ayrı ayrı kullanmaktansa aşağıdaki verilen örnekteki gibi de kullanabilirsiniz.
Border:2px Solid Red;/*Kırmızı renkte 2 piksel genişlikte Tek Çizgi Kenarlık Uygulanmıştır.Bu Örnekle 4 köşeyede uygulama yapılır*/
Border-Left:2px Solid Red;/*Kırmızı renkte 2 piksel genişlikte Tek Çizgi Kenarlık Uygulanmıştır.Bu Örnekle sadece sol köşeye uygulama yapılır*/

Arkadaşlar anlamadığınız herhangi bir konu olursa yorumlar kısmına yazın en kısa sürede cevap vermeye çalışırım.

Seyfettin KAHVECİ
Balıkesir Üniversitesi
NEF-BOTE



Yazının tamamının kopyalanması yasaktır. En baştaki birkaç paragrafı kopyalayıp, yazıya link verebilirsiniz. Aksi durumda uyarılmaksızın yasal yollara gidilecektir.

Yorum Ekle

Ad Soyad:
Şehir:
Yorum:
Yorumlar
Bu makale için henüz hiç yorum yapılmamış.
Unutmayın Makalelere Yorum Yazmak Yeni Makalelere Teşviktir.