Takip Edin

CSS

CSS’te Yorumlar ve Renkler

CSS’ te Yorumlar

Bir CSS yorumu, koda açıklayıcı notlar eklemek veya tarayıcının, stil sayfasının belirli bölümlerini değerlendirmesini önlemek için kullanılır.

Söz Dizimi

  • Bir CSS yorumu,   / *   ile başlar,   */   ile biter.
  • Yorumları, bir stil sayfasının içinde istediğiniz yere yerleştirebilirsiniz.
  • Yorumlar, tek bir satır üzerinde kullanılabilir, ayrıca birden fazla satıra da yayılabilirler.
/* Tek Satırlık Yorum */

/* Birden Fazla
Satıra Yayılan
Yorum */

/* Aşağıdaki Yorum, Belirli
Bir Stili Devre Dışı
Bırakmak İçin Kullanılmıştır: */

/*
p{
    color: indigo;
    font-size: large;
}
*/

Bir stil sayfasında CSS yorumlarını kullanmak, kodu yazmayan biri için anlaşılması zor olabilecek kısımları tanımlamaya yardımcı olur.

CSS’te Renkler

CSS, bir renk belirtmek için renk değerlerini kullanır. Genellikle, bir elemanın metin rengini ya da arka plan rengini ayarlamak için kullanılırlar. Örneğin, body seçicisinde belirtilen color özelliği, sayfanın tamamı için varsayılan metin rengini tanımlar. Ayrıca, kenarlıkların rengini ya da diğer dekoratif efektleri belirlemek için de kullanılabilirler.

Not : color özelliği, normalde renk değerini bağlantı elemanları haricinde üst ögesinden alır. Örneğin, body elemanı için bir renk belirlerseniz bu renk değeri, otomatik olarak paragraflara, başlıklara vb. aktarılır.

Bir renk, aşağıdaki yolların herhangi biriyle tanımlanabilir:

  • Anahtar kelime tanımlamak (transparent, kırmızı vb.),
  • RGB kübik koordinat sistemini kullanmak (heksadesimal veya rgb() ve rgba() fonksiyonel gösterimleri aracılığıyla),
  • HSL silindirik koordinat sistemini kullanmak (hsl() ve hsla() fonksiyonel gösterimleri aracılığıyla)

Renklerle Alakalı Anahtar Kelimeler

CSS, renk değerlerini kolay bir şekilde belirlemenizi sağlayan renklerle alakalı anahtar sözcüklere sahiptir: maroon, olive, black, silver, teal, purple vb. Renk isimleri, büyük/küçük harfe duyarlı değildir.

Modern web tarayıcıları, CSS standartında tanımlanandan çok daha fazla renk adını destekler, bununla birlikte heksadesimal renk değerlerini kullanmak daha güvenli bir yoldur.

Heksadesimal Renk Değerleri

Heksadesimal renk kodları, CSS kullanarak bir HTML öğesine renk eklemenin en yaygın yöntemidir.

Heksadesimal renkler, önünde # karakteri bulunan altı basamaklı bir kod kullanılarak temsil edilir. Örneğin; #ffff00 renk kodu, sarı rengi temsil eder.

Her bileşenin değeri, heksadesimal gösterimde 00(renksiz) ve FF(tam renkli) arasında, ondalık eşdeğer gösterimde ise 0 ve 255 arasında değişmektedir. Buradan hareketle, #ffffff renk kodunun beyaz rengi, #000000 renk kodunun ise siyah rengi temsil ettiği sonucuna ulaşılmaktadır.

Not: Heksadesimal, temel olarak 16 karakter kullanan bir numaralandırma düzenine sahiptir. 0’dan 9’a kadar sayıları ve sırasıyla 10, 11, 12, 13, 14, 15 sayılarına karşılık gelen A, B, C, D, E ve F harflerini kullanır.

Not: Eğer bir rengin heksadesimal kodu değer çiftlerine sahipse fazla yazımdan kaçınmak için kısaltmayla gösterilebilir: #ff0000 => #f00, #000000 => #000 vb.

RGB Renk Değerleri

Renkler, rgb() fonksiyonel gösterimini kullanarak RGB(Red, Green, Blue) modelinde tanımlanabilir.

rgb() fonksiyonu, rengin kırmızı, yeşil ve mavi bileşen miktarını belirten virgülle ayrılmış 3 tane değerini tanımlar. Bu değerler, 0 ile 255 arasında tam sayılar olarak belirtilir. Burada 0 değeri renk içermez, 255 ise maksimum rengi temsil eder.

Not: RGB() değerlerini, rgb() fonksiyonlarının içerisinde yüzde olarak belirtebilirsiniz. Örneğin, mavi rengi rgb(0, 0, 255) olarak belirtebileceğiniz gibi rgb(0%, 0%, 100%) olarak ta belirtebilirsiniz. Burada %0, hiçbir rengi temsil etmezken %100 ise tam rengi temsil eder.

RGBA Renk Değerleri

RGBA renk değerleri, bir renk için opaklığı belirleyen bir alfa kanalıyla RGB renk değerlerinin bir uzantısıdır.

Bir RGBA renk değeri, rgba(red, green, blue, alpha) ile belirtilir.

Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (hiç şeffaf değil) arasında bir sayıdır.

HSL Renk Değerleri

HSL renk modeli belirli bir rengi ton, doygunluk ve açıklık bileşenlerine göre tanımlar. İsteğe bağlı bir alfa bileşeni rengin saydamlığını temsil eder.

Ton, renk tekerleğinde 0 ila 360 arasında bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Doygunluk, yüzde değeri olarak belirtilir. %0, gri bir gölge ve %100 ise tam renkli anlamına gelir.

Açıklık ta aynı şekilde yüzde olarak belirtilir. 0% siyah, 50% ne açık ne de koyu, 100% ise beyaz rengi temsil eder.

Birçok tasarımcı HSL’nin anlaşılmasını ve kullanımını RGB’den daha kolay bulur, çünkü HSL; ton, doygunluk ve açıklığın her birinin bağımsız olarak ayarlanmasına olanak tanır. HSL, ayrıca bir dizi eşleşen renk oluşturmayı da kolaylaştırabilir. Örneğin, bir tonun birden çok gölgesini oluşturmak istediğinizde.

HSLA Renk Değerleri

HSLA renk değerleri, bir rengin opaklığını belirten bir alfa kanalıyla HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri, hsla(ton, doygunluk, açıklık, alfa) ile belirtilir. Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (hiç şeffaf değil) arasında bir sayıdır:

Renk Özelliğinin Kenarlıklar ve Ana Hatlar Üzerindeki Etkisi

Renk özelliği, yalnızca metin içeriği için değil, ön plandaki renk değerini alan herhangi bir şey için de geçerlidir. Örneğin, eleman için kenarlık renginin veya ana hat renginin değerleri açıkça tanımlanmadıysa, bunun yerine renk değeri kullanılır.

Devamını oku

Popüler

error: Content is protected !!