Web Sitenizin Metin Rengini CSS ile Nasıl Değiştirirsiniz?

Web siteniz üzerinde kontrol sahibi olmak, web tasarımının önemli bir unsurudur. İdeal bir dünyada, bitmiş üründen ödün vermeden sitenizin tasarımının her yönünü değiştirebilmelisiniz.

Elbette, web siteleri genellikle inatçı olabilir. CSS dünyasına dalmadan istediğiniz sonuçları elde etmek her zaman mümkün değildir. CSS'nin gücüyle nasıl daha fazlasını başarabileceğiniz konusunda size bir fikir vermek için web sitenizde CSS ile metin rengini nasıl değiştirebileceğinize bir göz atalım.

CSS ile Web Sitesi Metin Rengini Değiştirme

CSS, tasarımcılara web sitesi projeleri üzerinde güç vermesini sağlamak için özenle tasarlanmıştır. Web sitenizde CSS ile metin rengini değiştirmek inanılmaz derecede kolaydır; Bunu yapmak için tek bir kurala ihtiyacınız var.

renk: mavi;

Tabii ki, yine de, CSS kuralları kendi başlarına pek iyi çalışmıyor. Web tarayıcılarının stilin ne için geçerli olduğunu bilmesini sağlamak için bunları öğe sınıfları, kimlikler ve tanımlayıcılarla eşleştirmeniz gerekir. Aşağıda bir H1 başlığı, P paragrafı ve bir düğme ile kullanılan bu kuralın örneklerini görebilirsiniz.

h1 { renk: mavi; }
p { renk: kırmızı; }
düğme { renk: kırmızı; }

Bu, web sitenizin metninin rengini CSS ile değiştirmek için ne yapılması gerektiğine dair temel bir anlayış sağlamalıdır. Özellikle web sitenizdeki farklı metinlere farklı renkler vermek istiyorsanız, genellikle bundan daha fazlasını alır.

İlgili: Örneklerle Açıklanan CSS Kutu Modeli

Doğru CSS Sınıfını Bulma

Web sitenizdeki belirli metni değiştirmeden önce, onu CSS'nizde nasıl tanımlayacağınızı bilmeniz gerekir. Çoğu web tarayıcısında, geliştiricilere yardımcı olmak için tasarlanmış bir dizi araç bulunur ve muhtemelen kullandığınızda Müfettiş. Bu, bir web sitesi oluşturan HTML'ye ve diğer kodlara göz atmak için kullanılabilir.

Müfettişin Açılması

Denetçiyi açmak, piyasadaki tarayıcıların her birinde farklıdır. Size bir başlangıç ​​yapmak için aşağıda en popüler tarayıcılardan birkaçını ele aldık:

• Google Chrome: CTRL + Üst Karakter + C veya Menü Noktaları > Diğer Araçlar > Geliştirici Araçları
• Microsoft Kenarı: CTRL + Üst Karakter + C veya Menü Noktaları > Diğer Araçlar > Geliştirici Araçları
• Mozilla Firefox: CTRL + Üst Karakter + C veya Menü Noktaları > Diğer Araçlar > Web Geliştirici Araçları
• elma safarisi: Tercihler > ileri > Menü çubuğunda Geliştirme menüsünü göster ve daha sonra Geliştirmek > Web Denetçisini Göster

Doğru CSS Metin Stilini Bulma

Inspector'ı tarayıcınızda ilk açtığınızda kafa karıştırıcı olabilir. Anlayamayacağınız çok şey olacak ama şimdilik bunun için endişelenmenize gerek yok. Değiştirmeye çalıştığınız metnin stil adını bulmanız yeterlidir.

Örnek olarak MakeUseOf Programming bölümünde ana başlık için kullanılan CSS metin stilini bulup değiştireceğiz. Değiştirilmesi gereken elemanı inceleyerek bu işleme başlayabilirsiniz.

• Google Chrome: Sağ tık > İncelemek
• Microsoft Kenarı: Sağ tık > İncelemek
• Mozilla Firefox: Sağ tık > İncelemek veya Q
• elma safarisi: Sağ tık > Öğeyi İncele

Bunu yapmak, web sitesi konsolunuzun/denetçi pencerenizin değiştirmeye çalıştığınız öğeye odaklanmasını sağlayacaktır. Chrome, Safari, Edge ve Firefox'ta etiketli bir bölüm görmelisiniz Stiller incelemekte olduğunuz öğenin tüm CSS kodunu içerir.

Bunun yanında bir bölmede vurgulanmış HTML öğenizi de görmelisiniz. Bu, değiştirdiğiniz öğenin sınıfını veya kimliğini bulmak için kullanılabilir. Bizim durumumuzda, sayfamızdaki ana H1 başlığına bakıyoruz ve bu, .listing-title adlı bir sınıfa ait.

Bu noktada web sitenize ekleyeceğiniz CSS metin stilini test edebilirsiniz. Web sitesi konsolundaki CSS stili bölümünün üst kısmı, hedeflediğiniz belirli öğeye kurallar uygulamak için kullanılabilir. Tabii ki, yine de, bu kalıcı değil.

İlgili: HTML ve CSS Kullanarak Duyarlı Gezinme Çubuğu Nasıl Oluşturulur

Yeni CSS'nizi Ekleme

Şimdi yeni CSS'nizi web sitenize ekleme zamanı. Bunu yapma şekliniz, kullandığınız web sitesi platformunun türüne bağlı olacaktır ve Shopify gibi dosyalarınızı değiştirmeden CSS eklemenize izin vermek için uzantılar gerektiren seçenekler.

Ancak CSS kodunuzu eklerseniz, doğru olduğundan emin olmanız gerekir. Metin stili CSS kurallarını kullanmak çok zor değil, ancak metin renginizi nasıl değiştireceğinizi bulamadığınızda sinir bozucu olabilir. Örneğimiz için, web sitemize eklememiz gereken kod budur.

.listing-title {
renk: mavi;
}

Ya Metin Renginiz Değişmezse?

CSS dosyanızı düzenledikten sonra, sayfanızı yeniler yenilemez yaptığınız değişikliği görebilmeniz gerekir. Yine de her zaman bu kadar basit değildir. CSS, insanların beklediğinden daha karmaşık olabilir ve bu aşamada daha fazlasını yapmanız gerekebilir.

• Önbelleği boşaltma: Web siteleri, yükleme sürelerini azaltmak için genellikle önbelleğe alma kullanır. Önbelleğiniz web sitesi değişikliklerini görmenizi engelliyor olabilir ve CSS'de değişiklik yaptığınızda önbelleği boşaltmanız gerekir.
• Stil sayfasında daha yüksek: CSS, stilleri sırayla yükler ve bu, stil sayfanızdaki ilk kuralların web sitenizde görüntülenen kurallar olacağı anlamına gelir. Hareketli stiller, onlara diğer stillere göre öncelik vermenin iyi bir yolu olabilir.
• Önemli etiketleri kullanma: Bu sonraki seçenek en iyi uygulama olarak kabul edilmez ve başka seçeneğiniz olmadığı zamanlar için ayrılmıştır. CSS metin stillerinize diğer tüm stillere göre öncelik vermek için önemli bir etiket ekleyebilirsiniz ve bu aşağıda görülebilir:

.listing-title {
renk: mavi !önemli;
}

Diğer Metin Stili CSS Eğlencesi

CSS, web sitenizdeki metin ve diğer öğelerle çalışırken bir dizi farklı seçeneğe erişmenizi sağlayan inanılmaz derecede güçlü bir araçtır. Bu sadece CSS metin rengiyle bitmiyor ve biraz CSS öğrenmeyi seçtiğinizde metninizle yüklemeler yapabilirsiniz. Daha temel CSS metin stili kurallarını aşağıda bulabilirsiniz:

• Yazı Boyutu: Bu, web sitenizdeki metnin boyutunu değiştirir, örneğin yazı tipi boyutu: 12 piksel;
• Yazı tipi ağırlığı: Ağırlık, bir yazı tipinin kalınlığını ifade eder; kalın, yüksek ağırlık ve ince metin düşük, örneğin yazı tipi ağırlığı: 400;
• Metin hizalama: Bu, üzerinde çalıştığınız metnin hizalamasını değiştirir, örneğin metin hizalama: sağa;
• Metin gölgesi: Bu, metninize bir dizi öznitelikle bir gölge eklemenize olanak tanır, örneğin, metin gölgesi: 2px 2px 3px siyah;
• Metin dönüştürme: Bu, üzerinde çalıştığınız metnin büyük/küçük harf durumunu değiştirir, ör. text-transform: büyük harf;
• Metin-dekorasyon: Bu, metne alt çizgiler, kısa çizgiler ve diğer süslemeler eklemenize olanak tanır, örneğin metin dekorasyonu: alt çizgi;

Bu, CSS'deki metin stilleriyle yapabileceklerinizin yalnızca yüzeyini çizmektir. Web'de bu süreçte size yardımcı olabilecek çok sayıda kılavuz vardır ve başlarken biraz araştırma yapmak her zaman iyi bir fikirdir.

İlgili: Web Sitenizin Metni CSS font-family Özelliği ile Nasıl Değiştirilir

CSS Metin Renginden Daha Fazlasını Öğrenin

Alıştırma, deneme ve deneme yanılma, CSS gibi bir aracı öğrenmenin en iyi yoludur. Stil sayfaları, onlarla ilk çalışmaya başladığınızda göz korkutucu görünebilir, ancak onlarla biraz zaman geçirdikten sonra üzerinde çalışmak inanılmaz derecede kolaydır.

10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

CSS ile ilgili yardıma mı ihtiyacınız var? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.

Sonrakini Oku

Yazar hakkında