Sınıflar ve Kimlikler CSS'nizi Genişletme Yardımı
Bugünün Web sitesinde web siteleri oluşturmak, CSS (Basamaklı Stil Sayfaları) hakkında derin bir anlayış gerektirir. Bunlar, tarayıcı penceresinde nasıl düzenleneceğini belirlemek için bir web sitesi verdiğiniz talimatlardır. HTML belgenize web sayfanızın görünümünü ve hissini yaratacak bir dizi "stil" uygularsınız.
Söz konusu stilleri bir belgede uygulamak için birçok yol vardır, ancak çoğu zaman bir belgede yalnızca bir öğe üzerinde bir stil kullanmak istediğinizde, ancak bu öğenin tüm örnekleri üzerinde bir stil kullanmak istemezsiniz.
Her bir örnek için stil kuralını tekrarlamak zorunda kalmadan, bir belgedeki birkaç öğeye uygulayabileceğiniz bir stil oluşturmak da isteyebilirsiniz. Bu istenen stillere ulaşmak için, sınıf ve ID HTML niteliklerini kullanacaksınız. Bu nitelikler, hemen hemen her HTML etiketine uygulanabilecek genel niteliklerdir. Bu, bölümler, paragraflar, bağlantılar, listeler veya belgenizdeki diğer HTML öğelerinden herhangi birini oluşturuyor olmanız anlamına gelir. Sınıf ve kimlik özelliklerine dönebilirsiniz. Bu görevi yerine getirmenize yardımcı olun!
Sınıf Seçiciler
Sınıf seçici, bir belgede aynı öğeye veya etikete birden çok stil ayarlamanıza izin verir. Örneğin, metninizin belirli bölümlerinin belgede metnin geri kalanından farklı bir renkte çağrılmasını isteyebilirsiniz. Bu vurgulanan bölümler, sayfada belirlediğiniz "uyarı" olabilir. Paragraflarınızı aşağıdaki gibi sınıflarla atayabilirsiniz:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Bu stiller, tüm paragrafların rengini maviye (# 0000ff) ayarlayacaktı, ancak "alert" sınıf özniteliğine sahip herhangi bir paragraf kırmızı (# ff0000) ile stillenmiş olacaktı. Bunun nedeni, sınıf özniteliğinin yalnızca bir etiket seçici kullanan ilk CSS kuralından daha yüksek bir özgüllüğe sahip olmasıdır.
CSS ile çalışırken, daha spesifik bir kural daha az spesifik olanı geçersiz kılar. Bu örnekte, daha genel kural, tüm paragrafların rengini ayarlar, ancak ikinci, daha belirli bir kural, yalnızca bazı paragraflarda ayarlamayı geçersiz kılar.
Bu, bazı HTML biçimlendirmesinde nasıl kullanılabilir:
Bu paragraf, sayfanın varsayılanı olan mavi renkte görüntülenir.
Bu paragraf da mavi renktedir.
Ve bu paragraf kırmızı renkle gösterilecektir çünkü sınıf özniteliği, öğe seçim stilinden standart mavi renk üzerine yazacaktır.
Bu örnekte, "p.alert" stili yalnızca bu "alert" sınıfını kullanan paragraf öğeleri için geçerli olacaktır. Eğer bu sınıfı birden çok HTML öğesine kullanmak istiyorsanız, HTML öğesinin başından stil çağrısı (sadece periyodu (.) yerinde bıraktığınızdan emin olun), bunun gibi:
.alert {background-color: # ff0000;}
Bu sınıf, buna ihtiyaç duyan herhangi bir öğe için kullanılabilir. "Alert" sınıf özniteliği değerine sahip HTML'nizin herhangi bir parçası şimdi bu stili alacaktır. Aşağıdaki HTML'de, hem "paragraf" hem de "uyarı" sınıfını kullanan bir başlık seviyesi 2 var. Bunların her ikisi de az önce gösterdiğimiz CSS'ye dayanan kırmızı bir arka plan rengine sahip olacaktı.
Bu paragraf kırmızıyla yazılacaktır.
Ve bu h2 de kırmızı olur.
Günümüzde web sitelerinde, sınıf özelliklerinin çoğu öğe üzerinde sıklıkla kullanıldığı için kimlikleri olduğu bir özellik perspektifi ile çalışmak daha kolaydır. Sınıf öznitelikleriyle doldurulacak en güncel HTML sayfalarını bulacaksınız, bunlardan bazıları bir belgede birkaç kez tekrarlanır ve diğerleri yalnızca bir kez görünebilir.
Kimlik Seçicileri
Kimlik seçici , bir etiketi veya başka bir HTML öğesiyle ilişkilendirmeden belirli bir stile bir isim vermenizi sağlar. Bir etkinlik hakkında bilgi içeren HTML işaretlemenizde bir bölümünüz olduğunu varsayalım.
Bu bölüme "olay" ın bir ID özniteliğini verebilirdiniz ve bu bölmeyi 1 piksel genişliğinde siyah bir kenarlıkla çizmek isterseniz, aşağıdaki gibi bir kimlik kodu yazarsınız:
#event {border: 1px katı # 000; }
Kimlik seçicilerin zorluğu, bir HTML belgesinde tekrarlanamamasıdır. Benzersiz olmaları gerekir (aynı kimliği, sitenizin birden çok sayfasında kullanabilirsiniz, ancak her bir HTML belgesinde yalnızca bir kez kullanabilirsiniz). Dolayısıyla, bu sınırın hepsine ihtiyaç duyulan 3 etkinliğiniz varsa, onlara "event1", "event2" ve "event3" kimlik özniteliklerini vermeniz ve bunların her birini stil etmeniz gerekir. Bu nedenle, "olay" ın yukarıda belirtilen sınıf özniteliğini kullanmak ve hepsini aynı anda stillemek çok daha kolay olurdu.
ID özniteliklerine sahip bir diğer sorun ise, sınıf özelliklerinden daha yüksek bir özgüllüğe sahip olmalarıdır. Bu, önceden belirlenmiş bir stili geçersiz kılan CSS'ye sahip olmanız gerekiyorsa, kimliklere çok fazla güveniyorsanız, bunu yapmak zor olabilir. Bu nedenle, birçok web geliştiricisi, bu değeri yalnızca bir kez kullanmaya niyetli olsalar bile, neredeyse tüm stiller için daha az spesifik sınıf özniteliklerine dönmüş olsalar bile, işaretlemeleri kullanarak kimlikleri kullanmaktan uzaklaşmıştır.
Kimlik özelliklerinin oynatıldığı tek alan, sayfa içi bağlantı bağlantılarına sahip bir sayfa oluşturmak istediğinizde. Örneğin, tek bir sayfada tüm içeriği içeren paralaks stilinde bir web siteniz varsa, bu sayfanın çeşitli bölümlerine "atlayan" bağlantılar içerir. Bu kimlik bağlantıları ve bu bağlantıyı kullanan metin bağlantıları kullanılarak yapılır.
Bu özelliğin değerini, # sembolü tarafından önce, bağlantının href özelliğine şu şekilde eklersiniz:
Bu bağlantıdır
Tıklandığında veya dokunduğunda, bu bağlantı, bu ID özelliğine sahip sayfanın bölümüne gider. Sayfada hiçbir öğe bu ID değerini kullanmamışsa, bağlantı hiçbir şey yapmaz.
Unutmayın, bir sitedeki sayfa içi bağlantı oluşturmak istiyorsanız, kimlik özniteliklerinin kullanılması gerekecektir, ancak yine de genel CSS stilleri için sınıflara dönebilirsiniz. Bugün sayfaları nasıl işaretlerim? - Sınıf seçicilerini olabildiğince çok kullandım ve yalnızca CSS için bir kanca değil, aynı zamanda bir sayfa içi bağlantı olarak davranmak için özniteliğe ihtiyaç duyduğumda sadece ID'lere dönüyorum.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 8/9/17 tarihinde düzenlenmiştir.