Bilinmesi gereken
- Renk anahtar kelimesi: Bir HTML dosyasına şunu girin p { renk: siyah;} her paragrafın rengini değiştirmek için siyah seçtiğiniz rengi ifade eder.
- onaltılık: Bir HTML dosyasına şunu girin p { renk: #000000;} rengi değiştirmek için, nerede 000000 seçtiğiniz onaltılık değeri ifade eder.
- RGBA: Bir HTML dosyasına şunu girin p { renk: rgba (47,86,135,1);} rengi değiştirmek için, nerede 47,86,135,1 seçtiğiniz RGBA değerini ifade eder.
CSS, oluşturduğunuz ve yönettiğiniz web sayfalarındaki metnin görünümü üzerinde kontrol sahibi olmanızı sağlar. Bu kılavuzda, renk anahtar sözcüklerini, onaltılık renk kodlarını veya RGB renk numaralarını kullanarak CSS'de yazı tipi renklerini nasıl değiştireceğinizi gösteriyoruz.
Yazı Tipi Rengini Değiştirmek için CSS Stilleri Nasıl Kullanılır
Renk değerleri, renk anahtar sözcükleri, onaltılık renk numaraları veya RGB renk numaraları olarak ifade edilebilir. Bu derste, CSS değişikliklerini görmek için bir HTML belgesine ve o belgeye eklenmiş ayrı CSS dosyası. Özellikle paragraf öğesine bakacağız.
Yazı Tipi Renklerini Değiştirmek için Renk Anahtar Sözcüklerini Kullanın
HTML dosyanızdaki her paragrafın metin rengini değiştirmek için harici stil sayfasına gidin ve şunu yazın p { }. yerleştirin renk stilde özellik, ardından iki nokta üst üste, gibi p { renk: }. Ardından, özellikten sonra renk değerinizi noktalı virgülle sonlandırarak ekleyin. Bu örnekte, paragraf metni siyah renge değiştirilmiştir:
p {
siyah renk;
}
Yazı Tipi Renklerini Değiştirmek için Onaltılık Değerler Kullanın
Metni kırmızı, yeşil, mavi veya başka bir temel renkle değiştirmek için renkli anahtar sözcükleri kullanmak, bu renklerin farklı tonlarını oluştururken aradığınız kesinliği size sağlamayacaktır. Onaltılık değerler bunun içindir.
Bu CSS stili, paragraflarınızı siyaha boyamak için kullanılabilir, çünkü #000000 hex kodu siyaha dönüşür. Hatta bu onaltılık değerle stenografi kullanabilir ve aynı sonuçlarla #000 olarak yazabilirsiniz.
p {
renk: #000000;
}
Yalnızca siyah veya beyaz olmayan bir renge ihtiyacınız olduğunda onaltılık değerler iyi çalışır. Örneğin, bu onaltılı kod size çok özel bir mavi tonu (orta aralık, arduvaz benzeri bir mavi) ayarlama yeteneği verir:
p {
renk: #2f5687;
}
Hex, bir rengin RGB (kırmızı, yeşil, mavi) değerlerini on altı taban değerlerle ayrı ayrı ayarlayarak çalışır. Bu yüzden mektupları içeriyorlar bir vasıtasıyla F rakamlara ek olarak 0 vasıtasıyla 9.
Her renk, kırmızı, yeşil ve mavi, kendi iki basamaklı değerini alır. 00 mümkün olan en düşük değer iken, FF en yükseği. Renkler RGB düzeninde onaltılı olarak listelenmiştir, bu nedenle ilk iki basamak kırmızı değeri temsil eder vb.
Yazı Tipi Renklerini Değiştirmek için RGBA Renk Değerlerini Kullanın
Son olarak, yazı tipi renklerini düzenlemek için RGBA renk değerlerini kullanabilirsiniz. RGCA tüm modern tarayıcılarda desteklenir, bu nedenle çoğu izleyici için çalışacağından emin olarak bu değerleri kullanabilirsiniz, ancak aynı zamanda kolay bir geri dönüş de ayarlayabilirsiniz.
Bu RGBA değeri, yukarıda belirtilen arduvaz mavisi rengiyle aynıdır:
p {
renk: rgba (47,86,135,1);
}
İlk üç değer Kırmızı, Yeşil ve Mavi değerleri belirler ve son sayı şeffaflık için alfa ayarıdır. Alfa ayarı yüzde 100 anlamına gelecek şekilde 1'e ayarlanmıştır, bu nedenle bu rengin saydamlığı yoktur. Bu değeri .85 gibi bir ondalık sayıya ayarlarsanız, yüzde 85 opaklığa dönüşür ve renk biraz şeffaf olur.
Renk değerlerinizi kurşun geçirmez hale getirmek istiyorsanız, bu CSS kodunu kopyalayın:
p {
renk: #2f5687;
renk: rgba (47,86,135,1);
}
Bu sözdizimi önce onaltılı kodu ayarlar ve ardından RGBA numarasıyla bu değerin üzerine yazar. Bu, RGBA'yı desteklemeyen herhangi bir eski tarayıcının ilk değeri alacağı ve ikincisini yok sayacağı anlamına gelir.
color özelliğinin CSS'deki herhangi bir HTML metin öğesinde çalıştığını akılda tutmak önemlidir. Örneğin, tüm bağlantı renklerinizi değiştirebilirsiniz. Bu örnek, bağlantılarınızı parlak yeşil yapacaktır:
bir {
renk: #16c616;
}
Bu, aynı anda birden fazla öğeyle de çalışır. Her başlık seviyesini aynı anda ayarlayabilirsiniz. Örneğin, bu, tüm başlık öğelerinizi gece mavisi rengine ayarlayacaktır:
h1, h2, h3, h4, h5, h6 {
renk: #020833;
}
Renkleriniz için onaltılık veya RGBA değerleri bulmak her zaman kolay değildir. Çoğu web tasarımcısı, tam kodları oluşturmak için Photoshop veya GIMP gibi bir görüntü düzenleme programı kullanır. Ayrıca, aşağıdakiler gibi uygun renk seçici araçlarını çevrimiçi olarak da bulabilirsiniz: bu w3schools'dan.
Bir HTML Sayfasına Stil Vermenin Diğer Yolları
Yazı tipi renkleri, HTML belgesi içinde harici bir stil sayfası, bir dahili stil sayfası veya satır içi stil ile değiştirilebilir. Ancak 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 dahili stil sayfası, genellikle yalnızca küçük, tek sayfalık web siteleri için kullanılır. Yıllar önce ele aldığımız eski "font" etiketlerine benzedikleri için satır içi stillerden kaçınılmalıdır. Bu satır içi stiller, satır içi stilin her örneğinde bunları değiştirmeniz gerektiğinden yazı tipi stilini yönetmeyi çok zorlaştırır.