CSS Sınır Özellikleri
CSS border özellikleri bir elementin sınırın stil, genişlik ve rengini belirtmek için izin verir.
Bu eleman 15px geniş ve yeşil bir oluk sınırı vardır.
Sınır Stil
border-style özelliği sınırın tür neyin gösterileceğini belirtir.
Aşağıdaki değerler izin verilir:
-
dotted- noktalı sınır tanımlar -
dashed- kesikli sınır tanımlar -
solid- katı sınır tanımlar -
double- çift sınırını tanımlar -
groove- 3B yivli sınır tanımlar. etki border-color değerine bağlıdır -
ridge- 3B çıkıntılı sınırını tanımlar. etki border-color değerine bağlıdır -
inset- 3B gömme sınırını tanımlar. etki border-color değerine bağlıdır -
outset- 3B outset sınırını tanımlar. etki border-color değerine bağlıdır -
none- hayır sınır tanımlar -
hidden- gizli sınırını tanımlar
border-style özelliği bir ila dört değerlerden (üst sınırına doğru sınırında, alt sınırın ve sol sınır için) olabilir.
Örnek
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Sonuç:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Kendin dene " Note: sürece aşağıda açıklanan DİĞER CSS sınır özelliklerinin hiçbiri HERHANGİ etkisi olmayacaktır border-style özelliği ayarlandı!
Kenarlık Genişliği
border-width niteliği dört kenar genişliğini belirtir.
Genişliği belirli bir boyut olarak ayarlanabilir (in px, pt, cm, em , etc) , ince, orta veya kalın: ya da üç önceden tanımlanmış değerlerden birini kullanarak.
border-width özelliği, bir ila dört değerlerden (üst sınır, sağ sınır, alt sınır ve sol sınırı için) sahip olabilir.
Örnek
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Kendin dene " Sınır rengi
border-color niteliği dört kenar çizgisinin rengini ayarlamak için kullanılır.
renk ile ayarlanabilir:
- name - gibi bir renk adı belirtmek "red"
- Hex - gibi bir onaltılık değer belirtmek "#ff0000"
- RGB - gibi bir RGB değeri belirtmek " rgb(255,0,0) "
- transparent
border-color özelliği bir ila dört değerlerden (üst sınırına doğru sınırında, alt sınırın ve sol sınır için) olabilir.
Eğer border-color ayarlı değil, bu elementin rengini devralır.
Örnek
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Kendin dene " Sınır - Bireysel Sides
Yukarıdaki örneklerden her bir kenar için farklı bir sınır belirlemek mümkün olduğunu gördük.
CSS olarak, sınırların (üst, sağ, alt ve sol) her belirtilmesine ilişkin özellikleri de vardır:
Örnek
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Kendin dene " Yukarıdaki örnek bu aynı sonucu verir:
nasıl çalıştığını Yani, burada:
Eğer border-style özellik dört değer vardır:
- border-style : dotted solid double dashed;
- Üst sınır noktalı
- Sağ sınır katıdır
- alt sınır çift
- Sol sınır kesik olduğu
Eğer border-style mülkiyet üç değer vardır:
- border-style : dotted solid double;
- Üst sınır noktalı
- Sağ ve sol sınırlar katı
- alt sınır çift
Eğer border-style özellik iki değer vardır:
- border-style : dotted solid;
- Üst ve alt sınırlar noktalı vardır
- Sağ ve sol sınırlar katı
Eğer border-style özellik bir değeri vardır:
- border-style : dotted;
- Dört sınırları noktalı vardır
border-style özelliği yukarıdaki örnekte kullanılmıştır. Ancak, aynı zamanda çalışır border-width ve border-color .
Sınır - Steno Mülkiyet
Yukarıdaki örneklerde de görüldüğü gibi, sınırları ile uğraşırken dikkate birçok özellikleri vardır.
kodunu kısaltmak için, bir mülkte tüm bireysel sınır özelliklerini belirlemek de mümkündür.
border özelliği şu bireysel sınır özellikler için bir kestirme niteliktir:
-
border-width -
border-style(required) -
border-color
Diğer Örnekler
Tek bildiriminde Tüm üst sınır özellikleri
Bu örnek tek bildiriminde üst sınır için özelliklerin tümünü ayarlamak için bir kestirme özelliği gösterir.
Alt sınırın stilini ayarla
Bu örnek alt sınırın stilini ayarlama gösterilmiştir.
Sol sınırdan genişliğini ayarlayın
Bu örnek, sol sınırının genişliğini ayarlama gösterilmiştir.
Dört sınırın rengini ayarlayın
Bu örnek dört sınırın rengini ayarlama gösterilmiştir. Biri dört renge sahip olabilir.
Sağ sınırın rengini belirler
Bu örnek doğru sınırın rengini ayarlama gösterilmiştir.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»
Tüm CSS Sınır Özellikleri
| özellik | Açıklama |
|---|---|
| border | tek bildiriminde bütün sınır özelliklerini belirler |
| border-bottom | tek bildiriminde tüm alt sınır özelliklerini belirler |
| border-bottom-color | alt sınırın rengini ayarlar |
| border-bottom-style | alt sınırın stilini ayarlar |
| border-bottom-width | alt sınırın genişliğini ayarlar |
| border-color | Dört sınırların rengini ayarlar |
| border-left | tek bildiriminde tüm sol sınır özelliklerini belirler |
| border-left-color | Sol sınırın rengini ayarlar |
| border-left-style | Sol kenarlık stilini ayarlar |
| border-left-width | sol sınırdan genişliğini ayarlar |
| border-right | tek bildiriminde tamam sınır özelliklerini belirler |
| border-right-color | Sağ sınırın rengini ayarlar |
| border-right-style | Sağ kenarlık stilini ayarlar |
| border-right-width | Sağ sınırının genişliğini ayarlar |
| border-style | dört sınırın stilini ayarlar |
| border-top | tek bildiriminde tüm üst sınır özelliklerini belirler |
| border-top-color | Üst sınırın rengini ayarlar |
| border-top-style | Üst sınırın stilini ayarlar |
| border-top-width | Üst sınırın genişliğini ayarlar |
| border-width | dört kenar genişliğini belirler |