HEX Renkleri
Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 26 / 76.
Hex renkleri, onaltılık değerleri kullanarak renkleri belirtmenin bir yoludur. Onaltılık renk kodu, bir rengi oluşturan kırmızı, yeşil ve mavi ışık miktarını temsil eden, önünde kare sembolü (#) bulunan altı basamaklı bir koddur.
Koddaki her basamak çifti, bu ana renklerden birinin 00 (yoğunluk yok) ile FF (tam yoğunluk) arasında değişen yoğunluğunu temsil eder. HEX renkleri geniş bir renk seçenekleri yelpazesi sunar ve web tasarımında yaygın olarak kullanılır.
CSS'de onaltılık renkleri kullanmanın temel sözdizimi şöyledir:
selector {
color: #RRGGBB;
background-color: #RRGGBB;
}Örneğin:
p {
color: #FF0000; /* Red */
background-color: #00FF00; /* Green */
}Her çiftteki iki rakam aynı olduğunda hex renkler için kısa gösterimi de kullanabilirsiniz. Örneğin:
p {
color: #F00; /* Red (equivalent to #FF0000) */
background-color: #0F0; /* Green (equivalent to #00FF00) */
}Görev
Kolayİki başlık (<h1> ve <h2>) ve bir paragraf (<p>) içeren bir HTML belgeniz var. Göreviniz arka plan renkleri için onaltılık renk kodlarını kullanmaktır. Aşağıdaki adımları izleyin:
<h1>öğesi için bir CSS kuralı yazın. Arka plan rengini,#BF00FFonaltılık rengini kullanarak elektrik moru olarak ayarlayın.<h2>öğesi için bir CSS kuralı yazın. Arka plan rengini,#39FF14kullanarak neon yeşili olarak ayarlayın.- Tüm
<p>öğeleri için bir CSS kuralı yazın. Arka plan rengini,#D3D3D3kullanarak açık gri olarak ayarlayın.
Kendin dene
<html>
<head>
<title>HEX Colors</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This heading has an electric purple background!</h1>
<h2>This heading has a neon green background.</h2>
<p>This paragraph has a light gray background.</p>
</body>
</html>Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.
CSS ile Stil Verme bölümündeki tüm dersler
4Metin Temelleri
Metin RengiYazı Tipi AilesiYazı Tipi BoyutuYazı Tipi KalınlığıMetin HizalamaMetin SüslemesiTekrar Mücadelesi #1Tekrar Mücadelesi #2Kendi başına pratik yap: Web playground