- Katılım
- 29 Haz 2019
- Konular
- 482
- Mesajlar
- 2,156
- Çözüm
- 182
- Reaksiyon Skoru
- 1,087
- Altın Konu
- 0
- TM Yaşı
- 6 Yıl 11 Ay 15 Gün
- Başarım Puanı
- 212
- MmoLira
- 2,582
- DevLira
- 33
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
Css border nedir ve nasıl kullanılır ? border-style, border-width ve border-color kullanımını nasıl yaparım ?
Css border html nesnelerinin etrafına kenarlık eklemek için kullanılır.
Border' a verebileceğimiz 3 özellik vardır. Bunlar border-style, border-width ve border-color özellikleridir.
1-) border-style: çizgi türünü temsil eder.
** Border-style' nin alabileceği değerler;
2-) border-width: çizgi kalınlığını temsil eder.
3-) border-color: çizgi rengini temsil eder.
Örneğimizde border-color dediğimizde 4 köşeden bir renklendirme yapabiliyoruz. Alternatif olarak her köşe için bir renklendirme de yapabiliriz.
** border-color: red blue green yellow; (top,right,bottom,left şeklinde saat yönünde)
Örneklerimizde olduğu gibi bir border uygulamak istediğimizde border-style, border-width ve border-color özelliklerini tek tek belirtiyoruz ki bunun daha kısa bir yolu var.
border: çizgi kalınlığı çizgi türü çizgi rengi, şeklinde 3 özelliği de aynı satırda verebiliriz.
Css border html nesnelerinin etrafına kenarlık eklemek için kullanılır.
Border' a verebileceğimiz 3 özellik vardır. Bunlar border-style, border-width ve border-color özellikleridir.
1-) border-style: çizgi türünü temsil eder.
** Border-style' nin alabileceği değerler;
Kod:
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: dotted dashed solid double;}2-) border-width: çizgi kalınlığını temsil eder.
Kod:
<p class="one">Some text.</p>
<p class="two">Some text.</p>
.one {
border-style: solid;
border-width: 5px;
padding:5px;
}
.two {
border-style: solid;
border-width: 2px;
padding:5px;
}3-) border-color: çizgi rengini temsil eder.
Kod:
.one {
border-style: solid;
border-width: 5px;
padding:5px;
border-color:red;
}
.two {
border-style: solid;
border-width: 2px;
padding:5px;
border-color:red blue green yellow;
}Örneğimizde border-color dediğimizde 4 köşeden bir renklendirme yapabiliyoruz. Alternatif olarak her köşe için bir renklendirme de yapabiliriz.
** border-color: red blue green yellow; (top,right,bottom,left şeklinde saat yönünde)
Örneklerimizde olduğu gibi bir border uygulamak istediğimizde border-style, border-width ve border-color özelliklerini tek tek belirtiyoruz ki bunun daha kısa bir yolu var.
border: çizgi kalınlığı çizgi türü çizgi rengi, şeklinde 3 özelliği de aynı satırda verebiliriz.
Kod:
.one {
border:1px solid red;
}
.two {
border:5px solid green;
}
Son düzenleme: