HEX Renkleri
Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 26 / 76.
Onaltılık renkler, onaltılık değerler 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 rakam çifti, bu ana renklerden birinin 00 (yoğunluk yok) ile FF (tam yoğunluk) arasındaki yoğunluğunu temsil eder. Onaltılık renkler geniş bir renk seçeneği yelpazesi sunar ve web tasarımında yaygın olarak kullanılır.
CSS'de onaltılık renkleri kullanmanın temel söz dizimi şöyledir:
selector {
color: #RRGGBB;
background-color: #RRGGBB;
}Örneğin:
p {
color: #FF0000; /* Kırmızı */
background-color: #00FF00; /* Yeşil */
}Her çiftteki iki rakam aynı olduğunda onaltılık renkler için kısa gösterimi de kullanabilirsiniz. Örneğin:
p {
color: #F00; /* Kırmızı (#FF0000 ile eşdeğer) */
background-color: #0F0; /* Yeşil (#00FF00 ile eşdeğer) */
}Görev
KolaySize iki başlık (<h1> ve <h2>) ve bir paragraf (<p>) içeren bir HTML belgesi verilmiştir. Göreviniz arka plan renkleri için onaltılık renk kodları kullanmaktır. Aşağıdaki adımları izleyin:
<h1>öğesi için bir CSS kuralı yazın. Hex renk kodu#BF00FFkullanarak arka plan rengini elektrik moru olarak ayarlayın.<h2>öğesi için bir CSS kuralı yazın.#39FF14kullanarak arka plan rengini neon yeşili olarak ayarlayın.- Tüm
<p>öğeleri için bir CSS kuralı yazın.#D3D3D3kullanarak arka plan rengini 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