CSS seçici ve biçimlendirme html belgede rolü

bir web sitesi oluşturma ve bir web sayfasının belirli unsurları ile doldurma, herkes gibi CSS seçici olarak bir dönem karşı karşıya gelecek.En doğru sayfada kendi tasarımı ve konumu html dosyasının tüm unsurları belirlemek amacıyla hizmet vermektedir.Renk, boyut, pozisyon ve diğer: Bunu yapmak için, belirli seçicileri ve biçimlendirme seçeneklerini dile CSS-bir belge oluşturmak.Her web tasarımcısı bilmek ve düzgün seçiciler tarihleri girin gerekir.Onlar türüne göre aşağıda ele hangi main ayrılır.Html-eleman biçimlendirme uygular ne bağlı CSS

içinde

Çeşitleri seçiciler, CSS seçici aşağıdaki gruplardan birine başvurabilirsiniz:

seçici etiketler;

sınıf seçici;

id-seçici;

seçici bağlıyor.

Etiket seçici

Aynı zamanda en basit ve yaygın ise, "öğe üzerinde" "türü seçme" ve denir.Onun CSS belge olarak biz tarif html dosyası elemanlarının isimleri.Biz paragraf stilini ayarlamak gerekiyorsa Örneğin, biz özellikleri ve eleman p {background kendi değerlerini belirtin: x;Renk: y;boyutu: z}.Bu durumda, tüm paragraf web sayfası aynı formata (arka plan rengini, metin boyutunu ve benzeri. D.) sahip olacaktır.

sınıf seçici

Ama sen her paragraf diğer stilleri farklı olduğunu sormak gerekirse ne olacak?Bu amaç için, bir sınıf seçici vardır.P.first {color:

CSS belge, bu durumda aşağıdakine benzer bir girdi içerir x;font-size: y}.Böylece, sadece birinci sınıf bir paragraf için "renk" ve "büyüklük" özelliklerini tanımlar.Bu durumda html belgesinde

, ilk stil adına class özniteliği girin.Sınıflar web sayfası elemanları için uygulamak istediğiniz stili kadar olabilir.

seçici id

Genellikle bir sayfanın herhangi bir elemanına ya da örnek olarak, örneğin, daha kesin olarak bir stil tanımı için bir ihtiyaç vardır.Bu durumda, yardım id-seçici geliyor.html dosyası diğerleri arasında tanımlayan istenen öğe adı atayın.Örneğin, istediğimiz eleman diğerlerinden farklı bir stil, manşetini makale ayarlayın.

Sonra html belge başlığı h1 tanımlayıcı gibi ArticleName atayın.#articlename {Renk: Ve CSS dosyasındaki isim tanımlayıcı ızgarası ekleyerek, stilini ayarlamak için mavi;text-align: center}.Şimdi başlık mavi ve renk merkezli olacaktır.

Yukarıdaki tiplerinin her biri "Basit bir CSS seçici." DenebilecekOnlar belirli bir parametre html belge için Biçimlemeyi: birbirine benzer elementler (örneğin, makalenin tüm paragraflar), bir sınıf (örneğin, sadece ilk paragrafı) veya belirli bir öğe (örneğin, makalenin başlığı).

seçici yukarıda

addition nitelikleri, CSS öznitelik seçicileri var - stilleri kullanmak için daha sofistike bir yol.Bu seçilen öznitelik veya değer html biçimlendirme öğelerini tanır.Bu seçicinin birkaç çeşidi vardır:

bir niteliğin varlığı ile;Onun tam değeri
;Kısmi öznitelik değeri
;Kendi özel değer
.

bize bu çeşitlerin her düşünelim:

ilk vaka.Html kodu, belirli bir nitelik varsa Biçimlendirme uygulanır (bu p, div, başlık, vs olabilir).Değilse, bu tarzda tüm elemanları için bir genel kullanır.Örneğin, elementler başlık (tooltip) sahip.
İkinci olgu.tarzı, sadece tam eşleme nitelik değerleri html elemanları için de geçerlidir.Örneğin, tip değeri göndermek için eşit özellik girdi bu unsurların, için.
üçüncü vaka.Biçimi altında belli bir kelime var değerler listedeki öğeleri içerecektir.Örneğin, elemanlar div sideBar niteliği "sınıfı".
dördüncü durumda.Stil yalnızca bu unsurların belirli bir nitelik belli bir değeri vardır, ve onunla birlikte başladığı html belge için tanımlanır.Örneğin, tüm unsurları Belirtilen renk kullanımı, İngilizce dil (o en, tr-rus, en-au vb. D. olabilir) hangi bağlıyor.