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.
