İyi tipografik tasarım başarılı bir web sitesinin önemli bir parçasıdır. CSS , oluşturduğunuz web sayfalarındaki web sayfalarındaki metnin görünümü üzerinde mükemmel kontrol sağlar. Bu, kullandığınız yazı tiplerinin rengini değiştirme yeteneğini içerir.
Yazı tipi renkleri, harici stil sayfası , dahili stil sayfası kullanılarak değiştirilebilir veya HTML belgesindeki satır içi stil kullanılarak değiştirilebilir. En iyi uygulamalar, CSS stilleriniz için harici bir stil sayfası kullanmanız gerektiğini belirtir. Doğrudan belgenizin "başlığına" yazılan stiller olan bir dahili stil sayfası genellikle yalnızca küçük, tek sayfalık siteler için kullanılır. Satır içi stillerden, yıllar önce ele aldığımız eski "font" etiketlerine benzer olduklarından kaçınılmalıdır. Satır içi stilleri, satır içi stilinin her örneğinde değiştirmeniz gerektiğinden, yazı tipi stilini yönetmeyi çok zorlaştırır.
Bu makalede, harici bir stil sayfasını ve paragraf etiketinde kullanılan stili kullanarak yazı tipi rengini nasıl değiştireceğinizi öğreneceksiniz.
etiketi de dahil olmak üzere, metni çevreleyen herhangi bir etiketteki yazı tipi rengini değiştirmek için aynı stil özelliğini uygulayabilirsiniz.Yazı tipi rengini değiştirmek için stil ekleme
Bu örnekte, sayfa işaretlemeniz için bir HTML belgesine ve bu belgeye eklenmiş ayrı bir CSS dosyasına sahip olmanız gerekir. HTML belgesi büyük olasılıkla bir dizi öğe oluşturacaktır. Bu makalenin amacı ile ilgilendiğimiz paragraf elemanıdır.
Dış stil sayfanızı kullanarak paragraf etiketleri içindeki metnin yazı tipi rengini nasıl değiştireceğiniz aşağıda açıklanmıştır.
Renk değerleri, renk anahtar kelimeleri, RGB renk numaraları veya onaltılık renk sayıları olarak ifade edilebilir.
- Paragraf etiketi için stil özelliğini ekleyin:
- p {}
- Renk özelliğini stile yerleştirin. Bu mülkten sonra bir kolon yerleştirin:
- p {color:}
- Ardından, mülkünüzün ardından renk değerinizi ekleyin. Bu değeri yarım kolon ile bitirdiğinizden emin olun:
- p {color: black;}
Sayfanızdaki paragraflar artık siyah olacak.
Bu örnekte, "siyah" renkli bir anahtar kelime kullanılmıştır. Bu, CSS'ye renk eklemenin bir yoludur, ancak çok sınırlıdır. Bu iki renk çok spesifik olduğundan "siyah" ve "beyaz" için anahtar kelimeleri kullanmak çok basittir, ancak "kırmızı", "mavi" veya "yeşil" gibi anahtar kelimeler kullanırsanız ne olur? Kırmızı, mavi veya yeşilin tam gölgesi ne alacak? Anahtar kelimelerle tam olarak istediğiniz renk gölgesini belirleyemezsiniz. Bu nedenle, renkli anahtar kelimeler yerine onaltılı değerler kullanılır.
p {color: # 000000; }
Bu CSS stili, paragraflarınızın rengini de siyah olarak belirleyecektir, çünkü # 000000'in hex kodu siyaha dönüşür. Hatta bu hex değeriyle kestirebilir ve sadece # 000 olarak yazabilir ve aynı şeyi alırsınız.
Daha önce de belirttiğimiz gibi, sadece siyah veya beyaz olmayan bir renge ihtiyaç duyduğunuzda, onaltılık değerler iyi çalışır. İşte bir örnek:
p {color: # 2f5687; }
Bu onaltılı değer paragrafları mavi bir renge ayarlayacaktır, ancak "mavi" anahtar kelimesinin aksine, bu onaltılık kod size mavi için çok özel bir renk tonu ayarlama olanağı verir - muhtemelen tasarımcının arabirimi oluştururken seçtiği bu web sitesi. Bu durumda, renk orta menzil, kayrak benzeri bir mavi olurdu.
Son olarak, RGBA renk değerlerini yazı tipi renkleri için de kullanabilirsiniz. RGCA şimdi tüm modern tarayıcılarda desteklenmektedir, bu nedenle bu değerleri bir web tarayıcısında desteklenmeyeceği konusunda çok az endişeyle kullanabilirsiniz, ancak aynı zamanda kolay bir geri dönüş sağlayabilirsiniz.
p {color: rgba (47,86,135,1); }
Bu RGBA değeri, daha önce belirtilen kayrak mavi rengi ile aynıdır. İlk 3 değer Kırmızı, Yeşil ve Mavi değerlerini belirler ve son sayı alfa ayardır. "% 100" anlamına gelen "1" değerine ayarlanır, bu yüzden bu rengin saydamlığı olmaz. Bunu bir ondalık sayıya (.85 gibi) ayarlarsanız, bu% 85 opaklığa dönüşür ve renk biraz saydam olur.
Renk değerlerinizi kurşun geçirmez yapmak isterseniz, bunu yaparsınız:
p {
renk: # 2f5687;
renk: rgba (47,86,135,1);
}
Bu sözdizimi ilk olarak hex kodunu ayarlar. Daha sonra bu değeri RGBA numarasıyla üzerine yazar. Bu, RGBA'yı desteklemeyen eski tarayıcıların ilk değeri alacağı ve ikincisini görmezden geleceği anlamına gelir. Modern tarayıcılar, CSS çağlayanı başına ikincisini kullanırdı.