Bu şekilde, kutuların stilini değiştirebilir ve diğerlerini terk edebilirim.
#Oynatma. Widget {
/ * Stili buraya girin */
} Anlaması kolay, değil mi? Ayrıca, karma sembolü yerine sınıfın yazıldığını unutmayın. onların önünde. Kait teması adı verilen benzer bir kavram da var. Sınıf ve kimlik ile aynı şekilde çalışır, sadece CSS değil, işlevleri eklemenize izin verir. Hook teması hakkında daha fazla bilgi edinmek istiyorsanız, yeni başlayan rehberimize bakın. HTML ve IDS Sınıfı – Ne kullanıyorsunuz? Peki, sınıfı ve kimliği doğru şekilde nasıl kullanıyorsunuz? Dikkat edilmesi gereken ilk şey, bu seçimin tarayıcının kendisi için bir anlamı olmamasıdır. Her sitede işlev gören bir standart yoktur, yalnızca HTML ve CSS’de tanımlarsanız. Bu yeni başlayanları atan bir şey.
Ancak, şimdiye kadar HTML ve ID sınıfı temelde aynı şeyi yapıyor gibi görünüyor, değil mi? Ancak farklılıklar vardır. Yukarıda bir öğe ve sınıf için bir kimlik kullanmam tesadüf değil. Bunun nedeni kimliğin benzersiz olması amaçlanıyor, sınıf değil. Daha spesifik için: HTML öğelerinin yalnızca bir kimliği olabilir
Her sayfa bu kimliğe sahip yalnızca bir öğe içerebilir
Bunun yanında:
Bir öğenin birkaç sınıfı olabilir
HTML sınıfını istediğiniz kadar öğe olarak ayarlayabilirsiniz.
Bu neden önemli? Sorun şu ki, teorik olarak sınıf ve kimliği sırayla kullanabilirsiniz. Bunu geçmişte yapmış olmalıyım (daha iyi bilmeden). Aynı kimliği sınıf gibi birkaç öğeye ayarlayın ve aynı CSS özelliğini kullanacaktır. Tarayıcınıza zarar vermez ve ne istediğinizi görüntülemez. Ancak, bunu yapmamak için birkaç neden vardır. Her şeyden önce, kimlik benzersiz bir yeteneğe sahiptir: sayfadaki öğelere atlamak için kullanabilirsiniz. Örneğin, birçok WordPress teması, doğrudan yorumlar bölümüne gitmek için Meta Post’taki yorum sayısını tıklamanıza izin veren özelliklere sahiptir.
Bunu kendiniz gibi bir adrese göndererek yaparlar.postname#yorumlar. Bu URL ile tarayıcı, örneğin
öğesini otomatik olarak aşağı kaydırır. Ancak, kimliğe sahip birkaç öğeniz varsa, hangisinin sunulması gerektiğini bilmez. Dinamik platform onlar için bir kimlik oluşturduğundan, WordPress sitesindeki bireysel yorumlarla bağlantı kurabilmenin nedeni de budur. Sınıf ve HTML kimliği için belirtilen kurallara bağlı kalmanın ikinci nedeni, CSS’nin kimliğin benzersiz olup olmadığını umursamasa da JavaScript olmamasıdır. Aslında, programlama dili, kimliklerine göre öğeleri manipüle etmek için GetlementByID adlı bir işlevi vardır. Ancak, sınıf için aynı şey yok. JavaScript’e doğru ilerleyen gittikçe daha fazla web sitesi (WordPress dahil), bu kuralı takip etmeye devam etmek iyidir. Değilse, kodunuz doğrulamayı geçmeyecek, korumak daha zor, hatalara neden olma olasılığı daha yüksek olacak ve belki de gelecekte kanıt olmayacaktır. Ayrıca, profesyonelce görünmenizi sağlar. Yukarıdaki sınıfı ve kimliği kullanmak için en iyi uygulama, en önemli kuralları öğrendiniz: benzersiz bir kimlik oluşturun, ancak sınıfı istediğiniz sık kullanın. Ancak, sınıf seçmenlerini ve kimliğini doğru kullanmayı hatırlamanız gereken daha fazla şey var. Her şeyden önce, bunlardan birini yaptığınızda, açıklayıcı hale getirdiğinizden emin olun. Yani,
gibi şeylerden kaçının ve bunun yerine
gibi bir şey kullanın
. Sınıflar ve kimlikler sadece teknik araçlar değil, aynı zamanda site yapınızı daha kolay anlamanın iyi yollarıdır. İkincisi, sınıfı ve kimliği öğeye aynı anda belirleyebilirsiniz. Bu, örneğin, düzenleme için sınıf kullanıyorsanız, ancak JavaScript komut dosyaları için bir hedef yapmak için bir kimlik gerektiriyorsanız mantıklı olabilir. Ayrıca, birden fazla HTML sınıfını belirleme yeteneği oldukça yararlıdır. Aynı öğeyi birkaç kez kullanırsanız ve bunlardan birini bir şey değiştirmek istiyorsanız, bunu sadece öğe için ikinci sınıfı ayarlayarak yapabilirsiniz. Yukarıdaki widget örneğine dönerek, her şeyin aynı kalmasını istiyorsanız, ancak listedeki ilk öğe hakkında bir özniteliği değiştirirseniz, bunu yapıyorsunuz:
>