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ı: 16003127Toplam Puan: 37770 / Yorum Sayısı: 412003127 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.

Uzun süredir yorumlara cevap veremediğim için sistem yeni yorumlara kapatılmıştır. Anlayışınız için teşekkürler.
Yorumlar
Bu makale için henüz hiç yorum yapılmamış.