CSS ile , bir belgede metnin rengini ayarlamak kolaydır. Sayfanızdaki paragrafların belirli bir renkte oluşturulmasını istiyorsanız, yalnızca harici stil sayfanızda ve tarayıcının metninizi bu seçili renkte göstereceğini belirtmeniz yeterlidir. Bir metnin paragrafındaki tek bir sözcüğün rengini (veya belki sadece birkaç kelimeyi) değiştirmek istediğinizde ne olur? Bunun için etiket gibi satır içi bir öğe kullanmanız gerekecektir.
Sonuçta, tek bir sözcüğün veya cümle içindeki küçük bir kelime grubunun renginin değiştirilmesi CSS kullanarak kolaydır ve etiketler geçerli HTML'dir, bu nedenle bu tür bir hack olmanın endişesi yoktur. Bu yaklaşımla, geçmiş bir HTML çağının ürünü olan "font" gibi kullanım dışı etiketler ve öznitelikler kullanmaktan da kaçınabilirsiniz.
Bu makale, HTML ve CSS için yeni olan web geliştiricilerini başlatmak içindir. Sayfalarınızdaki belirli metnin rengini değiştirmek için HTML etiketini ve CSS'yi nasıl kullanacağınızı öğrenmenize yardımcı olacaktır. Bu makalenin sonunda ele alacağım, bu yöntemin bazı dezavantajları vardır. Şimdilik, bu metin rengini değiştirme adımlarını öğrenmek için okumaya devam edin! Bu çok kolay ve yaklaşık 2 dakika sürmeli.
Adım Adım Talimat
- Favori metin HTML düzenleyicinizde güncellemek istediğiniz web sayfasını açın. Bu, Adobe Dreamweaver veya Notepad, Notepad ++, TextEdit vb. Gibi basit bir metin editörü gibi bir program olabilir.
- Belgede, görüntülenmesini istediğiniz kelimeleri sayfada farklı bir renkte bulun. Bu öğreticinin hatırı için, metnin daha büyük bir paragrafında bulunan bazı kelimeleri kullanalım. Bu metin thetag çiftinde yer alacaktır. Rengini düzenlemek istediğiniz iki kelimeden birini bulun.
- İmlecinizi, rengi değiştirmek istediğiniz kelimelerin veya kelime gruplarının ilk harfinden önce yerleştirin. Unutmayın, Dreamweaver gibi bir WYSIWYG düzenleyicisi kullanıyorsanız, şimdi "kod görünümü" alanında çalışıyorsunuz.
- Rengini değiştirmek istediğimiz metni bir sınıf özniteliği dahil olmak üzere bir etiketle sarın. Paragrafın tamamı şöyle görünebilir: Bu, bir cümleye odaklanmış metindir.
- Yalnızca belirli bir metni, CSS'de kullanabileceğimiz belirli bir metni "kanca" vermek için kullanmıştık. Bir sonraki adımımız yeni bir kural eklemek için harici CSS dosyasına atlamaktır.
- CSS dosyasımızda şunları ekleyelim:
- .focus-text {
- renk: # F00;
- }
- Bu kural, kırmızı renkte görüntülenecek satır içi öğeyi belirler. Belgemizin metnini siyah olarak belirleyen daha önceki bir stilimiz varsa, bu satır içi stil, metin metninin odaklanmasına ve farklı renklerle öne çıkmasına neden olur. Bu kurala başka stilleri de ekleyebiliriz, belki de metni italik ya da daha da vurgulamak için cesur hale getirebilir miyiz?
- Sayfanızı kaydedin.
- Geçerli değişiklikleri görmek için sayfayı sık kullanılan web tarayıcısında test edin .
- Buna ek olarak, bazı web profesyonellerinin veya etiket çiftleri gibi diğer öğeleri kullanmayı tercih ettiğini unutmayın. Bu etiketler özellikle "kalın" ve "italik" için kullanılır, ancak kullanımdan kaldırılmış ve yerine kullanılmıştır. Etiketler hala modern tarayıcılarda çalışır, ancak birçok web geliştiricisi bunları satır içi stil kancaları olarak kullanır. Bu, en kötü yaklaşım değildir, ancak kullanımdan kaldırılmış öğelerden kaçınmak istiyorsanız, bu tür stil gereksinimleri için etikete bağlı kalmanızı öneririz.
Dikkat Edilecek İpuçları ve Şeyler
Bu yaklaşım küçük stil ihtiyaçları için iyi çalışır, ancak bir belgede yalnızca küçük bir metin parçasını değiştirmeniz gerekiyorsa, hızlı bir şekilde kontrolden çıkabilir. Sayfanızın CSS dosyanızda kullandığınız benzersiz sınıfları olan satır içi elemanlarla dolu olduğunu fark ederseniz, yanlış yapıyor olabilirsiniz, Hatırlayın, sayfanızdaki bu etiketlerin daha fazlası, daha zor Bu sayfanın ileriye taşınması muhtemeldir. Ek olarak, iyi web tipografisi nadiren sayfa boyunca birçok renk çeşidini, vb.