Ders 7: Kimlik ve elementlerin gruplama (sınıf ve id)

Bazen belirli bir elemanın veya elemanların belirli bir grup için özel bir stil uygulamak istiyorum. Bu derste, size nasıl kullanabileceğinizi daha yakından bakacağız sınıf ve id seçilen elemanlar niteliklerini belirlemek için.

Nasıl web sitenize diğer başlıkları farklı belirli bir başlık renk olabilir? Nasıl Farklı kategoriler halinde bağlantıları gruplandırmak ve her kategoride özel bir stil verebilir? Bunlar sadece bu derste cevap verecektir sorular örnekleridir.

Sınıf ile Gruplama elemanları

Diyelim ki beyaz şarap ve kırmızı şarap için kullanılan farklı üzüm bağların iki liste olduğunu söylüyorlar. HTML kodu şu şekilde olabilir:

	  	beyaz şarap için <p> Üzüm: </ p>  	<ul>  	<li> href="ri.htm"> Riesling </ a> </ li>  	<li> href="ch.htm"> Chardonnay </ a> </ li>  	<li> href="pb.htm"> Pinot Blanc </ a> </ li>  	</ Ul>    	kırmızı şarap için <p> Üzüm: </ p>  	<ul>  	<li> href="cs.htm"> Cabernet Sauvignon </ a> </ li>  	<li> href="me.htm"> Merlot </ a> </ li>  	<li> href="pn.htm"> Pinot Noir </ a> </ li>  	</ Ul>  	  	

Sonra beyaz şarap bağlantıları sarı olmak istiyorum, kırmızı şarap bağlantıları kırmızı olmak ve web sayfasında mevcut bağlantıları geri kalanını mavi kalmak.

Bunu başarmak için, iki kategoride bağlantıları bölün. Bu özellik kullanılarak her bağlantı için bir sınıf atayarak yapılır sınıf .

Bize Yukarıdaki örnekte bazı sınıfları belirtmek için çalışalım:

	  	beyaz şarap için <p> Üzüm: </ p>  	<ul>  	<li> <a href = "ri.htm" class = "whitewine" > Riesling </ a> </ li>  	<li> <a href = "ch.htm" class = "whitewine" > Chardonnay </ a> </ li>  	<li> <a href = "pb.htm" class = "whitewine" > Pinot Blanc </ a> </ li>  	</ Ul>    	kırmızı şarap için <p> Üzüm: </ p>  	<ul>  	<li> <a href = "cs.htm" class = "redwine" > Cabernet Sauvignon </ a> </ li>  	<li> <a href = "me.htm" class = "redwine" > Merlot </ a> </ li>  	<li> <a href = "pn.htm" class = "redwine" > Pinot Noir </ a> </ li>  	</ Ul>  	  	

Biz bundan sonra sırasıyla whitewine ve redwine ait bağlantılar için özel özellikler tanımlayabilirsiniz.

	  	Bir {  		color: blue;  	}    	Bir. whitewine {  		color: # ffbb00;  	}    	Bir. redwine {  		color: # 800000;  	}  	  	

Örnekte gösterildiği gibi kullanarak belli bir sınıfa ait elemanların özelliklerini tanımlayabilirsiniz . sınıfadı belgenin stil sayfasında.

Kimliği kullanarak elemanın belirlenmesi

Gruplama elemanlarına ek olarak, tek ve özgün bir öğeyi tanımlamak için gerekebilir. Bu özellik kullanılarak yapılır id .

Ne özniteliği hakkında özel bir id ile aynı aynı belgede iki unsur olamaz olduğunu id . Her kimliği benzersiz olmak zorundadır. Diğer durumlarda, kullanmanız gereken sınıf yerine özniteliği. Şimdi, bize olası bir kullanımı için bir örnek bir göz atalım id :

	  	<h1> Bölüm 1 </ h1>  	...  	<h2> Bölüm 1.1 </ h2>  	...  	<h2> Bölüm 1.2 </ h2>  	...  	<h1> Bölüm 2 </ h1>  	...  	<h2> Bölüm 2.1 </ h2>  	...  	<h3> Bölüm 2.1.2 </ h3>  	...  	  	

Yukarıdaki bölümlere ya da paragraflara ayrılmıştır herhangi bir belge başlıkları olabilir. Bir atamak doğal olurdu id aşağıdaki gibi her bölüm için:

	  	<H1 id = "c1" > Bölüm 1 </ h1>  	...  	<H2 id = "c1-1" > Bölüm 1.1 </ h2>  	...  	<H2 id = "c1-2" > Bölüm 1.2 </ h2>  	...  	<H1 id = "c2" > Bölüm 2 </ h1>  	...  	<H2 id = "c2-1" > Bölüm 2.1 </ h2>  	...  	<H3 id = "c2-1-2" > Bölüm 2.1.2 </ h3>  	...  	  	

Bizim bölüm 1.2 için başlık kırmızı olması gerektiğini söyleyelim. Bu CSS ile uygun şekilde gerçekleştirilebilir:

	  	# C1-2 {  		color: red;  	}  	  	

Yukarıdaki örnekte de görüldüğü gibi belgenin stil içerisinde kimliği kullanarak belirli bir öğe özellikler tanımlayabilirsiniz.

Özet

Bu derste seçiciler, kullanımı yoluyla öğrendim sınıf ve kimliği , belirli elemanları niteliklerini belirlemek için edebiliyoruz.

In sonraki derste :, biz yaygın CSS ile bağlantılı olarak kullanılan iki HTML elementleri daha yakından bakacağız <span> ve<div> .