“Anın tadını çıkarıyordum.Tıpkı paraşütü açılmayan bir paraşütçünün rüzgarın tadını çıkarttığını gibi“

Halimclskn

cssders7

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> .

sponsor alanlar veya bağlantılar

popüler yazılar

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

hakkımda

istatistik

kopirayt

Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak)
Sitede toplam 36 yazı bulunmaktadır ayrıca 86 yorum ve 9 kategori bulunuyor bugün hava güneşli ama normal sayılır yani.
Sitemde yazılan , çizilen , eklenenlerin telif hakkı vs yoktur.Ç(alıntı) yapacaklarında kaynak göstermesi yeterlidir.Bakın dürüstüm size karşı "lütfen" çalmayın.

Çizen: Sefa Uygun
HTML/CSS: Tugay Tekeci - yapiyoruz.tr.gg
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol