CSS Seçiciler. seçiciler tipleri

, belirli bir renk ayarlamak istediğiniz her biri. Nasıl yapmalı? Standart CSS seçicileri onlar hepsini birden bloklar için parametreleri göstermektedir etiketler için uygun değildir. çözüm basit. sınıf üyelerini atayın. class = 'mavi', üçüncü - - class = 'yeşil' Örneğin, ilk 'kırmızı', ikinci = div class aldı. Şimdi CSS tabloları kullanarak seçilebilir.

sözdizimi aşağıdaki gibidir: sınıfın adını yazarak Ardından bir noktaya ( ""), gösterir. İlk birimini yönetmek için .red yapım kullanıyoruz. İkincisi - vb .blue ve.

Bu çok önemli! Sınıf özelliğinin anlamlı değerler kullanılması önerilir. Çevirisini (örneğin krasiviy-blok) veya harfler / sayılar rastgele kombinasyonları (ojfh834871) kullanmak için kötü formu olarak kabul edilir. Bu kodda, senden sonra proje yapan edilecektir olanların karşı karşıya gelecek zorlukları söz değil, karışık bağlanmıştır. En iyi seçenek - Böyle BEM gibi herhangi bir metodoloji kullanmak.

Avantajları - nispeten yüksek esneklik.

Dezavantajlar - Birden çok eleman ve eş zamanlı olacak şekilde düzenlenir, bunun anlamı sınıfı olabilir. Sorun önişlemciler metodoloji yanı sıra miras kullanılarak çözülmektedir. bunlar büyük ölçüde işi basitleştirmek, küstahlık veya başka önişlemci, ellerin az olsun emin olun.

kimlik seçici

Bu versiyonda Hakkında görüş kodlayıcılar ve programcılar belirsizdir. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. yanlış uygulamada bunlar miras ile ilgili sorunlara neden olabilir, çünkü bazı CSS öğreticiler, ID kullanılmasını tavsiye etmiyoruz. Ancak bir çok uzman aktif olan düzen boyunca düzenleyin. Siz karar verin. # »), затем имя блока. pound işareti ( "#"), bloğun ardından adı: sözdizimi aşağıdaki gibidir. #red. Örneğin, #red.

отличается от класса по нескольким параметрам. Kimlik çeşitli şekillerde sınıfından farklıdır. ID. Birincisi, sayfa iki özdeş kimlik olamaz. Onlar benzersiz bir ad atanır. İkinci olarak, bu tür bir seçici, bir daha yüksek önceliğe sahiptir. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Bu kırmızı bir birim sınıfını belirtmek ve CSS tablolarda kırmızı belirtirseniz demektir arka plan rengini, ve sonra mavi kendisine aynı kimliği atamak ve mavi rengini belirtmek, birim maviye döner.

Avantajları - Eğer etiketleri ve sınıfların stilleri göz ardı ederek belirli öğeyi kontrol edebilirsiniz.

ID и class. Dezavantajları - Kolay kimliği ve sınıfın çok sayıda kaybolmak.

Önemli! ID вам, в общем-то, не нужны. Size BEM metodolojisini (veya benzerlerini), kimliği kullanıyorsanız, genel olarak, gerekli değildir. Bu teknik düzen benzersiz sınıflar çok daha rahat kullanımını içerir.

evrensel seçici

{}. Söz dizimi: Starlets ( "*") ve parantez, oturum, yani {} * ...

Belirli bir kez özelliklerini sayfanın tüm unsurları atamak için kullanılır. Bu yararlı olabilir ne zaman? box-sizing: border-box. Örneğin, sayfa özellik kutu boyutlandırma ayarlamak isterseniz: border-box. div *{}. yalnızca belgenin tüm bileşenleri, yönetmek için kullanılamaz aynı zamanda örneğin belirtilen bloğun tüm çocukları kontrol etmek, div * {}.

Avantajları - Bir kerede öğelerin çok sayıda kontrol edebilirsiniz.

Dezavantajları - yetmez esnek bir seçenek. Buna ek olarak, bu seçicinin kullanımı bazı durumlarda sayfa çalışmalarını yavaşlatmak.

özelliklere göre

Mümkün belirli bir özellik ile elemanını kontrol etmek olun. Örneğin, farklı bir özellik türü giriş etiketlerinin bir dizi var. Bunlardan biri - metin, ikinci - şifre, üçüncü - numarası. Tabii ki, her sınıf veya kimliğini ayarlayabilirsiniz, ama her zaman uygun değildir. niteliklerin CSS seçicileri mümkün maksimum hassasiyetle belli etiketleri değerlerini belirtir kolaylaştırır. Örneğin, bu gibi:

Giriş [tipi = 'metin'] {}

Bu selektör giriş metnin türüne sahip tüm özelliklerini seçecektir.

araç oldukça esnektir ve nitelikleri olabilir hangi etiketleri, herhangi biriyle kullanılabilir. Ama hepsi bu değil! CSS şartname daha kolaylık unsurlarını kontrol etme yeteneği vardır!

"Bir ad girin" ve giriş tutucu = "parola girin" = sayfanızın nitelik yer tutucu ile girişine sahip olduğunu düşünün. Onlar da seçici kullanılarak seçilebilir! Bunu yapmak için, aşağıdaki yapıyı kullanın:

giriş [tutucu = "adını"] {} veya giriş [tutucu = "şifre girme"]

özelliklere sahip Belki de daha esnek çalışma. Diyelim ki benzer nitelikler başlığı (örneğin, "Hazar" ve "Hazar") etiketlere ilişkin bir dizi var diyelim. Her iki seçmek için aşağıdaki seçimleri kullanın:

[Başlığı * = "Kaspiysk"]

CSS "Hazar", yani. E. Ve "Hazar" ve "Hazar" sembolleri vardır ki başlığında tüm öğeleri seçecektir.

Ayrıca belli bir karakter niteliklerini ile başlayan etiketleri seçebilirsiniz:

[Title ^ = "karakteri istediğiniz"] {}

veya bunları sonlandırmak:

[Title $ = "right karakter"] {}.

Avantajları - Maksimum esneklik. Sen sınıfları ile karışıklık olmadan varolan herhangi sayfa öğelerini seçebilirsiniz.

Dezavantajları - yalnızca belirli durumlarda nispeten nadiren kullandı. nokta sınıfı sayısız düzenlemek daha kolaydır çünkü Pek çok web tasarımcıları, metodoloji tercih köşeli parantez "eşit" ve işaretler. Ayrıca, bu seçiciler Internet Explorer sürüm 7 ve aşağıda çalışmaz. Ancak, artık eski Internet Explorer ihtiyaç kimsin?

Sözde sınıf seçiciler

bir psödo-durum elemanı belirtir. örnek ,: vurgulu için - getirdiğinizde sayfasının bir parçası ne olur ,: ziyaret - ziyaret edilen bağlantısı. Birinci çocuk ve: son çocuğa Ayrıca gibi unsurları kapsamaktadır.

Bunun sayesinde JavaScript kullanmadan bir sayfa "canlı" yapabilir çünkü seçicinin Bu tür aktif modern düzen kullanılır. Örneğin, onun rengi değişti btn sınıfına ile düğmenin üzerine geldiğinizde emin olmak istiyorum. Bunu yapmak için, aşağıda belirtilen yapıyı kullanın:

.btn: vurgulu {

background-color: red;

}

bu durumda, düğme anında allık vermez ve yarım saniye içinde - Güzellik örneğin 0.5s, düğme, geçiş özelliğinin temel özelliklerinde belirtilebilir.

Erdemler - yaygın sayfaların "canlanma" için kullanılır. Kullanımı kolay.

Dezavantajları - değiller. Bu gerçekten kullanışlı bir araçtır. Ancak, deneyimsiz web tasarımcıları sözde sınıflar bolca kaybolabilir. Sorun çalışmak ve pratik çözüldü.

yalancı seçiciler

"Sözde" - bunlar HTML olmayan sayfa kısımları vardır, ama yine de yönetilebilir. Sen anlamadın? Bu sesler daha çok daha kolaydır. Örneğin, diğer küçük ve siyah metin bırakarak dizede ilk harfi büyük ve kırmızı yapmak istiyorum. Tabii ki, bu belli sınıfı ile bir süre içinde o mektubu sonucuna varılabilir, ama uzun ve sıkıcı. Tüm paragrafı seçin ve sahte :: birinci harfi kullanmak çok daha kolaydır. İlk harfi görünümünü kontrol etme fırsatı verir.

sözde elemanların oldukça çok sayıda vardır. Tek bir makalede onlara Liste başarılı olmak mümkün değildir. En sevdiğiniz arama motoru alakalı bilgileri bulabilirsiniz.

Avantajları - sayfanın görünümünü özelleştirmek için esneklik sağlar.

Dezavantajları - Onlara yeni sık sık karıştırılır. Sadece belirli tarayıcılarda bu tip iş çoğu seçimleri.

özetlemek gerekirse

Seçici - belge akışı kontrolü için güçlü bir araç. Onun sayesinde sayfanın her bileşenini seçebilir (sadece kısmen bile vardır). Mevcut tüm seçenekleri öğrenmek, hatta bunları yazmak emin olun. karmaşık modern bir tasarıma sahip sayfaları ve etkileşimli öğeler bir sürü oluşturmak, bu özellikle önemlidir.