Günümüzün web'inde iyi tasarlanmış web siteleri oluşturmak, derin bir anlayış gerektirir. Basamaklı Stil Şablonu. Web sayfanızın görünümünü ve hissini bilgilendirmek için HTML belgenize bir dizi CSS stili uygulayın.
Sınıf ve Kimlik Nitelikleri
Tasarımcılar bazen yalnızca biraz bir belgedeki öğelerin sayısı, ancak o öğenin tüm örnekleri değil. Bu istenen stilleri elde etmek için sınıf ve İD HTML özellikleri. Bu nitelikler, hemen hemen her şeye uygulanabilen küresel niteliklerdir. HTML etiketi—böylece belgenizdeki bölümleri, paragrafları, bağlantıları, listeleri veya diğer HTML parçalarını biçimlendirin, bu görevi tamamlamanıza yardımcı olacak sınıf ve kimlik özelliklerine 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 uyarı olarak farklı bir renkte çağırmak için paragraflarınızı aşağıdaki gibi sınıflarla atayın:
p { renk: #0000ff; }
p.alert { renk: #ff0000; }
Bu stillerherşey paragraflar maviye (#0000ff), ancak sınıf özniteliği olan herhangi bir paragraf
uyarmak bunun yerine kırmızı (#ff0000) stiliyle yazılır. Bunun nedeni, class niteliğinin yalnızca bir etiket seçici kullanan ilk CSS kuralından daha yüksek bir özgüllüğe sahip olmasıdır. ile çalışırken CSS, 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, daha spesifik kural yalnızca bazı paragraflarda bu ayarı geçersiz kılar.Bunun bazı HTML işaretlemelerinde 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ülenir.
Bu paragraf da mavi olacaktır.
Ve bu paragraf kırmızı olarak gösterilecektir, çünkü class niteliği, eleman seçici stilindeki standart mavi rengin üzerine yazacaktır.
Bu örnekte, tarzı p.uyarı 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şlangıcından şu şekilde kaldırın:
.alert {arka plan rengi: #ff0000;}
Bu sınıf artık ihtiyacı olan herhangi bir öğe için kullanılabilir. HTML'nizin sınıf öznitelik değerine sahip herhangi bir parçası uyarmak şimdi bu stili alacak. Aşağıdaki HTML'de, hem bir paragrafa hem de aşağıdakileri kullanan ikinci düzey bir başlığa sahibiz: uyarmak sınıf. Her ikisi de kırmızı bir arka plan rengi görüntüler:
Bu paragraf kırmızı ile yazılacaktır.
Bugün web sitelerinde sınıf nitelikleri çoğu öğede kullanılmaktadır çünkü kimliklere göre belirli bir bakış açısıyla çalışmak daha kolaydır. Çoğu güncel HTML sayfasının, bazıları bir belgede sık sık tekrarlanan ve bazıları yalnızca bir kez görünebilen sınıf nitelikleriyle doldurulduğunu göreceksiniz.
Kimlik Seçiciler
Kimlik seçici belirli bir stili bir etiketle veya başka bir şeyle ilişkilendirmeden adlandırır. HTML öğesi.
HTML işaretlemenizde bir olay hakkında bilgi içeren bir bölüm olduğunu varsayalım. Bu bölüme bir verebilirsin kimlik özelliği nın-nin Etkinlikve ardından bu bölmeyi 1 piksel genişliğinde siyah bir kenarlıkla ana hatlarıyla belirtin:
#event { border: 1px katı #000; }
ile meydan okuma kimlik seçiciler bir HTML belgesinde tekrarlanamayacaklarıdır. Benzersiz olmaları gerekir (aynı kimliği sitenizin birkaç sayfasında, ancak her bir HTML belgesinde yalnızca bir kez kullanabilirsiniz). Bu nedenle, tümü bu sınıra ihtiyaç duyan üç olay için, kimlik özniteliklerini tanımlamanız gerekir. 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 stillendirin.
Kimlik Niteliklerinin Komplikasyonları
Kimlik öznitelikleriyle ilgili diğer bir zorluk, sınıf özniteliklerinden daha yüksek özgüllüğe sahip olmalarıdır. Önceden oluşturulmuş bir stili geçersiz kılmak için, kimliklere çok fazla güveniyorsanız bunu yapmak zor olabilir. Birçok web geliştiricisi, kimliklerini işaretlemelerinde kullanma, bu değeri yalnızca bir kez kullanmayı amaçlasalar ve bunun yerine neredeyse tümü için daha az spesifik sınıf özelliklerine dönmüş olsalar bile stiller.
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, tüm içeriği tek bir sayfada içeren ve o sayfanın çeşitli bölümlerine "atlayan" bağlantılara sahip paralaks tarzı bir web sitesi düşünün. Kimlik öznitelikleri ve metin bağlantıları bu bağlantı bağlantılarını kullanır. Bu özniteliğin değerini, önüne # sembolüne, href bağlantının özelliği, şöyle:
bağlantı bu
Tıklandığında veya dokunulduğunda, bu bağlantı, sayfanın bu ID özniteliğine sahip kısmına 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ı gerekecektir, ancak yine de genel CSS stil amaçları için sınıflara dönebilirsiniz. Tasarımcılar bugün sayfaları bu şekilde işaretliyorlar - mümkün olduğunca sınıf seçicileri kullanıyorlar ve yalnızca özniteliğin yalnızca CSS için bir kanca olarak değil, aynı zamanda bir sayfa içi bağlantı olarak da işlev görmesi gerektiğinde kimliklere dönüyorlar.