path: root/files/tr/learn/css/building_blocks/values_and_units/index.html

---
title: CSS değerleri ve birimleri
slug: Öğren/CSS/CSS_yapi_taslari/Values_and_units
tags:
  - Acemi
  - Beginner
  - CSS
  - Durum
  - Eğitim
  - Function
  - Image
  - Learn
  - Number
  - Position
  - Renk
  - Resim
  - birimler
  - color
  - değerler
  - fonksiyon
  - length
  - numara
  - percentage
  - units
  - uzunluk
  - values
  - yüzde
translation_of: Learn/CSS/Building_blocks/Values_and_units
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>

<p>CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Ön koşullar:</th>
   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
  </tr>
  <tr>
   <th scope="row">Amaç:</th>
   <td>CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek</td>
  </tr>
 </tbody>
</table>

<h2 id="CSS_değeri_nedir">CSS değeri nedir?</h2>

<p>CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <code><a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a></code> veya <code><a href="/tr/docs/Web/CSS/length">&lt;length&gt;</a></code> gibi. <code>&lt;color&gt;</code>  veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <code><a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a></code> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: <em>Veri türleri</em> olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.</p>
</div>

<div class="blockIndicator note">
<p><strong>Note</strong>: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.</p>
</div>

<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi <code>rgb()</code> fonksiyonunu kullanarak ayarladık:</p>

<pre class="brush: css notranslate"><code>h1 {
  color: black;
  background-color: rgb(197,93,161);
} </code>
</pre>

<p>CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <code>&lt;color&gt;</code> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, <code>rgb()</code> fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <code>&lt;color&gt;</code> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <code><a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a></code> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).</p>

<p>Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.</p>

<h2 id="Sayılar_uzunluklar_ve_yüzdeler">Sayılar, uzunluklar ve yüzdeler</h2>

<p>CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Veri tipi</th>
   <th scope="col">Açıklama</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="/tr/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
   <td><code>&lt;integer&gt;</code> bir tamsayıyı temsil eder, <code>1024</code> veya <code>-55</code> gibi.</td>
  </tr>
  <tr>
   <td><code><a href="/tr/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
   <td><code>&lt;number&gt;</code> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, <code>0.255</code>, <code>128</code> veya <code>-1.2</code>.</td>
  </tr>
  <tr>
   <td><code><a href="https://developer.mozilla.org/tr/docs/Web/CSS/dimension">&lt;dimension&gt;</a></code></td>
   <td> <code>&lt;dimension&gt;</code> bir birime bağlı olan <code>&lt;number&gt;</code> tipinde bir sayıdır. Örn., <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code>&lt;dimension&gt;</code>; <code><a href="/tr/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/tr/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/tr/docs/Web/CSS/time">&lt;time&gt;</a></code>, ve <code><a href="/tr/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> değer türlerini içeren bir kapsayıcı kategoridir<a href="/tr/docs/Web/CSS/resolution">.</a></td>
  </tr>
  <tr>
   <td><code><a href="/tr/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
   <td><code>&lt;percentage&gt;</code> başka bir değerin bir kısmını temsil eder. Örn., <code>50%</code>. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.</td>
  </tr>
 </tbody>
</table>

<h3 id="Uzunluklar">Uzunluklar</h3>

<p>En sık karşılaşacağın sayısal tür <code>&lt;length&gt;</code>'dir. Örn. <code>10px</code> (pixels) veya <code>30em</code>. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.</p>

<h4 id="Mutlak_uzunluk_birimleri">Mutlak uzunluk birimleri</h4>

<p>Aşağıdakilerin tümü <strong>mutlak</strong> uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Birim</th>
   <th scope="col">İsim</th>
   <th scope="col">Eşittir</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>cm</code></td>
   <td>Santimetre</td>
   <td>1cm = 96px/2.54</td>
  </tr>
  <tr>
   <td><code>mm</code></td>
   <td>Milimetre</td>
   <td>1mm = 1/10th of 1cm</td>
  </tr>
  <tr>
   <td><code>Q</code></td>
   <td>Çeyrek milimetre</td>
   <td>1Q = 1/40th of 1cm</td>
  </tr>
  <tr>
   <td><code>in</code></td>
   <td>İnç</td>
   <td>1in = 2.54cm = 96px</td>
  </tr>
  <tr>
   <td><code>pc</code></td>
   <td>Picas</td>
   <td>1pc = 1/6th of 1in</td>
  </tr>
  <tr>
   <td><code>pt</code></td>
   <td>Point</td>
   <td>1pt = 1/72th of 1in</td>
  </tr>
  <tr>
   <td><code>px</code></td>
   <td>Piksel</td>
   <td>1px = 1/96th of 1in</td>
  </tr>
 </tbody>
</table>

<p>Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekranda<code>cm</code>(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer <code>px</code>(piksel)'dir.</p>

<h4 id="Bağıl_uzunluk_birimleri">Bağıl uzunluk birimleri</h4>

<p>Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Birim</th>
   <th scope="col">Bağıl</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>em</code></td>
   <td>Öğenin veya ebeveyninin yazı tipi boyutuna.</td>
  </tr>
  <tr>
   <td><code>ex</code></td>
   <td>mevcut yazı tipinin x harfinin yüksekliğine.</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>Kök(root) öğenin yazı tipi boyutu.</td>
  </tr>
  <tr>
   <td><code>lh</code></td>
   <td>Öğenin satır yüksekliği.</td>
  </tr>
  <tr>
   <td><code>vw</code></td>
   <td>Görüntü alanı genişliğinin %1'i.</td>
  </tr>
  <tr>
   <td><code>vh</code></td>
   <td>Görüntü alanı yüksekliğinin %1'i.</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>Görüntü alanında küçük olan değerin %1'i.</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>Görüntü alanının büyük olan değerin %1!i</td>
  </tr>
 </tbody>
</table>

<h4 id="Bir_örnekle_keşfedelim">Bir örnekle keşfedelim</h4>

<p>Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun {{cssxref("width")}} niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.</p>

<p>İkinci kutu, <code>vw</code>(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <code>&lt;iframe&gt;</code> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir</a>.</p>

<p>Üçücü kutu <code>em</code> birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. <code>.wrapper</code> sınıfının yazı tipi boyutunu <code>1em</code> olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>

<h4 id="ems_ve_rems">ems ve rems</h4>

<p><code>em</code> ve <code>rem</code> kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de <a href="/tr/docs/Learn/CSS/Styling_text">stil metni</a> veya <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.</p>

<p>HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir <em>ems</em> sınıfına ve ikicinin bir <em>rems</em> sınıfına sahip olmasıdır.</p>

<p>Başlangıç olarak, <code>&lt;html&gt;</code> öğenin yazı tipi boyutu olarak 16px ayarladık.</p>

<p><strong>Özetlemek gerekirse</strong>, tipografi durumunda <strong>em birimi "ana öğenin yazı tipi boyutu" anlamına gelir</strong>. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri <code>ems</code> sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu <code>1.3</code><code>em</code>'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.</p>

<p><strong>Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir</strong> (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını <code>rems</code> sınıfındaki <code>rem</code> tanımından dolayı kök öğenin<code>&lt;html&gt;</code> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.</p>

<p>Bununla birlikte, <code>&lt;html&gt;</code> öğesinin <code>font-size</code> niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem <code>rem</code>, hemde <code>em</code> buyutlu metinler.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>

<h3 id="Yüzdeler">Yüzdeler</h3>

<p>Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi <code>font-size</code> yüzde olarak ayarlarsan, bu öğenin üst öğesinin <code>font-size</code> nitelik değerinin bir yüzdesi olacaktır. Bir <code>width</code> değer için yüzde kullanırsan, üst öğenin <code>width</code> nitelik değerinin yüzdesi olacaktır.</p>

<p>Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.</p>

<p>Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!</p>

<p><strong>Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>

<p>Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <code>&lt;li&gt;</code> öğesinin <code>font-size</code> nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>

<p>Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <code><a href="/tr/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <code>&lt;length&gt;</code> içeriyorsa, yüzde kullanmak mümkün değildir.</p>

<h3 id="Sayılar">Sayılar</h3>

<p>Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, <code>opacity</code> bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik <code>0</code>(tamamen şeffaf) ve <code>1</code>(şeffaflık yok) arasında bir sayıyı kabul eder.</p>

<p><strong>Aşağıdaki örnekte, <code>opacity</code> değerini değiştirmeyi deneyin. <code>0</code> ve <code>1</code> arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>

<div class="blockIndicator note">
<p><strong>Not</strong>:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine <u>alınmamalıdır</u>.</p>
</div>

<h2 id="Renk">Renk</h2>

<p>CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.</p>

<p>Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.</p>
</div>

<h3 id="Anahtar_kelime_renkleri">Anahtar kelime renkleri</h3>

<p>Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <code><a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a></code> değer türü için sayfada tam bir liste görebilirsin.</p>

<p><strong>Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.</strong></p>

<h3 id="Onaltılık_RGB_değerleri">Onaltılık RGB değerleri</h3>

<p>Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani <code>0123456789abcdef</code>. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).</p>

<p>Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>

<p><strong>Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.</strong></p>

<h3 id="RGB_ve_RGBA_deperleri">RGB ve RGBA deperleri</h3>

<p>Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — <code>rgb()</code>. onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.</p>

<p>RGB renklerini kullanmak için son örneğimizi yeniden yazalım:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>

<p>Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri <code>0</code> olarak ayarlarsan rengi tamamen şeffaf hale getirir, <code>1</code> olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>:  Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız {{cssxref("opacity")}} niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.</p>
</div>

<p>Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>

<p><strong>Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin. </strong></p>

<div class="blockIndicator note">
<p><strong>Not</strong>: <code>rgba()</code> ile <code>rgb()</code>  ve <code>hsl()</code> ile <code>hsla()</code>(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem <code>rgba()</code>, hemde <code>rgb()</code> ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin <code>rgba()</code> fonksiyonunu <code>rgb()</code> olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.</p>
</div>

<h3 id="HSL_ve_HSLA_değeri">HSL ve HSLA değeri</h3>

<p>RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. <code>hsl()</code> fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:</p>

<ul>
 <li><strong>Ton</strong>: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.</li>
 <li><strong>Doygunluk</strong>: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.</li>
 <li><strong>Hafiflik</strong>: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır</li>
</ul>

<p>HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>

<p>RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>

<p>Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!</p>

<h2 id="Görüntüler">Görüntüler</h2>

<p><code><a href="/tr/docs/Web/CSS/image">&lt;image&gt;</a></code> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir <code>url()</code> fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.</p>

<p>Aşağıdaki örnekte, CSS <code>background-image</code> niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>

<div class="blockIndicator note">
<p><strong>Not</strong>: <code>&lt;image&gt;</code> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <code><a href="/tr/docs/Web/CSS/image">&lt;image&gt;</a></code> sayfasına bakabilirsin.</p>
</div>

<h2 id="Konum">Konum</h2>

<p><code><a href="/tr/docs/Web/CSS/position_value">&lt;position&gt;</a></code> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(<code><a href="/tr/docs/Web/CSS/background-position">background-position</a></code> üzerinden) için kullanılan bir değerdir. Değer türü, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, ve <code>center</code> gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.</p>

<p>Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: <code>center</code>.</p>

<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>

<p><strong>Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.</strong></p>

<h2 id="Dizeler_ve_tanımlayıcılar">Dizeler ve tanımlayıcılar</h2>

<p>Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <code>&lt;color&gt;</code> değer türünde kullandığımız <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, ve <code>goldenrod</code>  anahtar kelimeleri gibi). Bu anahtar kelimeler, <em>tanımlayıcılar</em> olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, <a title="Tırnak içine alınmamış.">alıntı</a> yapılmaz — dizeler olarak değerlendirilmezler.</p>

<p>CSS'de dizeleri kullandığımız yerler de var. örneğin <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">oluşturulan içeriği belirtirken</a>. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte <a title="Tırnak içine alınmamış.">alıntılanmamış</a> renk anahtar sözcükleri kullanıyoruz.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>

<h2 id="Fonksiyonlar">Fonksiyonlar</h2>

<p>Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — <code>rgb()</code>, <code>hsl()</code> ve bir dosyadan görüntüyü döndürmek için kullanılan <code>url()</code> gibi.</p>

<p><code>calc()</code> geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.</p>

<p>Örneğin, aşağıda <code>calc()</code> fonksiyonunu kutunun genişliğini <code>%20 + 100px</code> yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. <code>.wrapper</code> sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden <code>calc()</code> fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>

<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>

<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Values_tasks">Becerilerini test et: Değerler ve birimler</a>.</p>

<h2 id="Özet">Özet</h2>

<p>Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. <a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS Değerleri ve birimleri</a> referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.</p>

<p>Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.</p>

<p>Örneğin <code><a href="/tr/docs/Web/CSS/image">&lt;image&gt;</a></code>  bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>

<h2 id="Bu_kısımda">Bu kısımda</h2>

<ol>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
  <ul>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
  </ul>
 </li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
</ol>