Ders 11: Sınır

Sınırların birçok şeyler için, dekoratif bir unsur olarak, örneğin ya da iki şeylerin bir ayırma çizgi için kullanılabilir. Sayfalarınıza sınırları kullanırken CSS sınırsız seçenekler sunuyor.

• border-width
• border-color
• border-style
• sınır

Sınırlarının genişliği [border-width]

Sınırlarının genişliği özelliği tarafından tanımlanan sınır genişliği piksel cinsinden belirtilir, ince orta ve kalın değerlerini elde edebilirsiniz, ya da sayısal bir değer. Aşağıdaki şekil sistemi göstermektedir:

Sınırların renk [border-color]

Mülkiyet border-color border sahip olduğu rengini tanımlar. Değerleri, örneğin, normal renk değerlerini "# 123456", "RGB (123123123)" ya da "sarı" vardır.

Sınırları Türleri [border-style]

Seçim için sınırların farklı türleri vardır. Internet Explorer 5.5 bunları yorumlayan aşağıda sınırlarının 8 farklı türleri gösterilmektedir.Bütün örneklerde renk "altın" ve "kalınlığında" kalınlığı ile gösterilir fakat diğer doğal renkte gösterilmiştir ve kalınlıklarda edilebilir.

Herhangi bir sınır istemiyorsanız değerleri yok ya da gizli kullanılabilir.

Sınırları tanımlayan örnekleri

Yukarıda açıklanan üç özellik her eleman bir araya koymak ve böylece farklı sınırları üretmek olabilir. Bu göstermek için, biz farklı sınırları tanımlayan bir belge bir göz alacak <h1> , <h2> , <ul> ve <p> . Sonuçta bu güzel olmayabilir ama birçok olasılık bazıları gösterilmektedir:

	  	h1 {  		border-width: kalın;  		border-style: noktalı;  		border-color: altın;  	}    	h2 {  		border-width: 20px;  		border-style: Başlangıçta;  		border-color: red;  	}    	p {  		border-width: 1px;  		border-style: kesik;  		border-color: blue;  	}    	ul {  		border-width: ince;  		border-style: solid;  		border-color: turuncu;  	}  	  	

Bu üst, alt, sağ veya sol sınırları için özel nitelikleri ifade etmek de mümkündür. Aşağıdaki örnek gösterir:

	  	h1 {  		border-top-width: kalın;  		border-top-style: solid;  		border-top-color: red;    		border-bottom-width: kalın;  		border-bottom-style: solid;  		border-bottom-color: blue;    		border-right-width: kalın;  		border-right-style: solid;  		border-right-color: green;    		border-left-width: kalın;  		border-left-style: solid;  		border-left-color: turuncu;  	}  	  	

Derleme [sınır]

Aynı zamanda birçok diğer özellikleri için olduğu gibi, sen birini kullanarak sınır içine birçok özellikleri derleyebilirsiniz. Bize bir örneğe göz atalım:

	  	p {  		border-width: 1px;  		border-style: solid;  		border-color: blue;  	}  	  	

Içine derlenebilir:

	  	p {  		border: 1px solid mavi;  	}  	  	

Özet

Bu derste size sayfalarında sınırları kullanırken CSS verir sonsuz seçenekleri hakkında öğrendim.

Yüksekliği ve genişliği - Bir sonraki derste, size kutu modeli boyutları tanımlamak nasıl bakacağız.