Skip to content

Stil Sınıflarını ve Kimlikleri Kullanma

16 de Mayıs de 2021

Günümüzün web sitesinde iyi tasarlanmış web siteleri oluşturmak, Basamaklı Stil Sayfalarının derinlemesine anlaşılmasını gerektirir. Web sayfanızın görünümünü ve hissini bildirmek için HTML belgenize bir dizi CSS stili uygulayın.

Sınıf ve Kimlik Özellikleri

Tasarımcılar bazen yalnızca biraz bir belgedeki öğelerin tüm örneklerini değil. İstenen bu stilleri elde etmek için, sınıf ve İD HTML özellikleri. Bu öznitelikler, hemen hemen her HTML etiketine uygulanabilen genel özniteliklerdir; bu nedenle, belgenizdeki bölümleri, paragrafları, bağlantıları, listeleri veya diğer HTML parçalarını biçimlendirseniz de, bu görevi gerçekleştirmenize yardımcı olacak sınıf ve kimlik özniteliklerine dönebilirsiniz. !

Sınıf Seçiciler

Sınıf seçici, bir belgedeki aynı öğeye veya etikete birkaç stil ayarlar. Örneğin, metninizin belirli bölümlerini farklı bir renkte bir uyarı olarak çağırmak için, paragraflarınıza aşağıdaki gibi sınıflar atayın: p {color: # 0000ff; }
p.alert {renk: # ff0000; }

Bu stiller, herşey maviye paragraflar (# 0000ff), ancak sınıf özniteliğine sahip herhangi bir paragraf: uyarmak bunun yerine kırmızı stil (# ff0000) ile olur. 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. Dolayısıyla bu örnekte, daha genel kural tüm paragrafların rengini belirler, ancak ikinci kural, yalnızca bazı paragraflarda bu ayarı geçersiz kılmaktan daha özel bir kuraldır. Bazı HTML biçimlendirmelerinde bunun nasıl kullanılabileceği aşağıda açıklanmıştır:

Bu paragraf, sayfa için varsayılan olan mavi renkte görüntülenecektir.

Bu paragraf da mavi olacaktır.

Ve bu paragraf, sınıf özelliği öğe seçici stilinden standart mavi rengin üzerine yazılacağı için kırmızı renkte görüntülenecektir.
type = “code”> Bu örnekte, p.alert yalnızca bunu kullanan paragraf öğelerine uygulanır uyarmak sınıf. Bu sınıfı birkaç HTML öğesinde kullanmak için, HTML öğesini stil çağrısının başından şu şekilde kaldırın:

.alert {background-color: # ff0000;}

type = “code”> Bu sınıf, artık ihtiyacı olan her eleman için mevcuttur. HTML’nizin class öznitelik değerine sahip herhangi bir parçası uyarmak şimdi bu stili alacak. Aşağıdaki HTML’de, hem paragrafımız hem de ikinci düzey başlığımız var. uyarmak sınıf. Her ikisi de kırmızı arka plan rengini görüntüler:

Bu paragraf kırmızı ile yazılacaktır.
type = “code”> Bugün web sitelerinde, sınıf öznitelikleri çoğu öğede kullanılır çünkü özgüllük açısından çalışmak kimliklere göre daha kolaydır. En güncel HTML sayfalarının, bazıları bir belgede sık sık yinelenen ve diğerleri yalnızca bir kez görünebilen sınıf öznitelikleriyle doldurulduğunu göreceksiniz.

Kimlik Seçiciler

Kimlik seçici, belirli bir stili bir etiket veya başka bir HTML öğesi ile ilişkilendirmeden adlandırır. HTML işaretlemenizde bir olay hakkında bilgi içeren bir bölüm olduğunu varsayın. Bu bölüme bir kimlik özelliği verebilirsiniz: Etkinlikve sonra bu bölümü 1 piksel genişliğinde siyah bir kenarlıkla ana hatlarıyla belirtin: #event {border: 1px solid # 000; }

type = “code”> Kimlik seçicilerle ilgili sorun, bunların bir HTML belgesinde tekrarlanamamasıdır. Benzersiz olmaları gerekir (sitenizin birkaç sayfasında aynı kimliği kullanabilirsiniz, ancak her bir HTML belgesinde yalnızca bir kez). Bu nedenle, hepsinin bu sınıra ihtiyaç duyduğu üç olay için, kimlik özelliklerini tanımlamalısınız. olay 1, olay2, ve olay3 ve her birine stil verin. Bu nedenle, yukarıda belirtilen sınıf özniteliğini kullanmak çok daha kolay olacaktır. Etkinlik ve hepsini aynı anda biçimlendirin.

Kimlik Özelliklerinin Komplikasyonları

Kimlik öznitelikleriyle ilgili diğer bir zorluk, sınıf özniteliklerinden daha yüksek bir özgüllüğe sahip olmalarıdır. Önceden belirlenmiş bir stili geçersiz kılmak için, kimliklere çok fazla güveniyorsanız, bunu yapmak zor olabilir. Birçok web geliştiricisi, bu değeri yalnızca bir kez kullanmayı düşünseler bile, işaretlemelerinde kimlik kullanmaktan uzaklaştı ve bunun yerine neredeyse tüm stiller için daha az spesifik sınıf niteliklerine yöneldi. Kimlik özelliklerinin devreye girdiği tek alan, sayfa içi bağlantı bağlantılarına sahip bir sayfa oluşturmak istediğiniz zamandır. Örneğin, tek bir sayfadaki tüm içeriği, o sayfanın çeşitli bölümlerine “atlayan” bağlantılar içeren paralaks tarzı bir web sitesi düşünün. Kimlik nitelikleri ve metin bağları bu bağlantı bağlarını kullanır. Başına şu özniteliğin değerini ekleyin # sembolüne href bağlantının özelliği, şöyle: Bu bağlantıdır

type = “code”> Tıklandığında veya dokunduğunuzda, bu bağlantı sayfanın bu kimlik özniteliğine sahip bölümüne atlar. Sayfadaki hiçbir öğe bu kimlik değerini kullanmıyorsa, bağlantı hiçbir şey yapmaz. Bir sitede sayfa içi bağlantı oluşturmak için kimlik özniteliklerinin kullanılması gerekir, ancak yine de genel CSS stilleme amaçları için sınıflara dönebilirsiniz. Tasarımcılar bugün sayfaları bu şekilde işaretliyor – sınıf seçicilerini olabildiğince çok kullanıyorlar ve yalnızca özniteliğin sadece CSS için değil, aynı zamanda bir sayfa içi bağlantı olarak işlev görmesine ihtiyaç duyduklarında kimliklere dönüyorlar.

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “Stil Sınıflarını ve Kimlikleri Kullanma.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/using-style-classes-and-ids-3466836.
Kyrnin, Jennifer. (2021, 14 Mayıs). Stil Sınıflarını ve Kimlikleri Kullanma. Https://www.thoughtco.com/using-style-classes-and-ids-3466836 adresinden erişildi
Kyrnin, Jennifer. “Stil Sınıflarını ve Kimlikleri Kullanma.” ThoughtCo. https://www.thoughtco.com/using-style-classes-and-ids-3466836 (16 Mayıs 2021’de erişildi).