“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

cssders8

Ders 8: elemanları Gruplandırılması (span ve div)

Elemanlar <span> ve <div> grubu ve yapının bir belge için kullanılır ve genellikle nitelikleri sınıfı ve id ile birlikte kullanılır.

Bu derste, biz tam olarak bu iki HTML öğelerini CSS ile ilgili olarak merkezi bir öneme sahip olarak <span> ve <div> kullanımı daha yakından bakacağız.

<span> Ile gruplama

Eleman <span> belgenin kendisine bir şey eklemek değil tarafsız bir unsur diyebiliriz şeydir. Ama CSS ile, <span> belgelerinizi metin belirli bölümlerine görsel özellikler eklemek için kullanılabilir.

Bunun bir örneği bu Benjamin Franklin tırnak olabilir:

	  	Erken yatmak ve güne erken başlamak <p> 
bir insanı sağlıklı, varlıklı ve akıllı yapar. </ p>

Bize Sayın Franklin kırmızı vurgulanmıştır uzak gününüzü uyumuyor faydaları olarak gördüğü istediğini söylüyorsun. Lets Bu amaçla, biz faydaları işaretleyebilirsiniz <span> . Her açıklıklı sonra eklenir sınıf bizim stil sayfasında tanımlayabilirsiniz:

	  	<p> Erken yatmak ve güne erken başlamak 
bir adam yapar <span class="benefit"> sağlıklı </ span> , <span class="benefit"> zengin </ span> ve <span class="benefit"> bilge </ span> . </ p>

CSS ona ait:

	  	span.benefit {  		color: red;  	}  	  	

Tabii ki de stil eklemek için id kullanabilir <span> -element. Sadece sürece hatırlıyorum gibi, size üç her birine benzersiz bir id uygulamak gerekir <span> önceki derste öğrendikleri gibi, elementler.

<div> Ile gruplama

Oysa <span> önceki örnekte görüldüğü gibi bir blok seviyesinden eleman içinde kullanılır, <div> grup bir veya daha fazla blok seviyesinden elemanlar için kullanılır.

Bunun yanında farkı ile gruplama <div> az ya da çok aynı şekilde çalışır. Bizim politik bağları bölünmüş ABD başkanlarının iki liste ile örnek bir göz atalım:

	  	<div id="democrats">  	<ul>  	<li> Franklin D. Roosevelt </ li>  	<li> Harry S. Truman </ li>  	<li> John F. Kennedy </ li>  	<li> Lyndon B. Johnson </ li>  	<li> Jimmy Carter </ li>  	<li> Bill Clinton </ li>  	</ Ul>  	</ Div>    	<div id="republicans">  	<ul>  	<li> Dwight D. Eisenhower </ li>  	<li> Richard Nixon </ li>  	<li> Gerald Ford </ li>  	<li> Ronald Reagan </ li>  	<li> George Bush </ li>  	<li> George W. Bush </ li>  	</ Ul>  	</ Div>  	  	

Ve bizim stil sayfasında, yukarıda tam olarak aynı şekilde gruplandırma yararlanabilirler:

	  	# Demokratlar {  		Arka plan: mavi;  	}    	# Cumhuriyetçiler {  		background: red;  	}  	  	

Yukarıdaki örneklerde, sadece kullanmış <div> ve <span> gibi metin ve arka plan renkleri gibi çok basit şeyler. Her iki unsur çok daha gelişmiş şeyler yapmak potansiyeline sahiptir. Ancak bu derste tanıtılan edilmeyecektir. Bu eğitim daha sonra bu bakacağız.

Özet

Olarak ders 7 ve 8, sen seçiciler hakkında öğrendim id ve sınıf ve elementler açıklıklı ve div .

Artık grup edebilmek ve tanımlamak, daha fazla veya daha az, mastering CSS yönünde büyük bir adım olan bir belge, tüm parçaları. Olmalıdır Olarak ders 9 biz kutu modelini tanıtacağım.

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