---
title: 'Becerilerinizi test edin: değerler ve birimler'
slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks
tags:
  - Acemi
  - Beginner
  - CSS
  - Example
  - Örnek
translation_of: Learn/CSS/Building_blocks/Values_tasks
---
<div>{{LearnSidebar}}</div>

<div></div>

<p>Bu görevin amacı, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Değerleri ve Birimleri</a> dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p>

<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p>
</div>

<h2 id="Birinci_Görev">Birinci Görev</h2>

<p>bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.</p>

<ul>
 <li>İkinci liste öğesini RGB rengini kullanmalıdır.</li>
 <li>üçüncüsü HSL rengini kullanmalıdır.</li>
 <li>Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.</li>
</ul>

<p>Onaltılık renk için dönüşümleri <a href="https://convertingcolors.com/hex-color-86DEFA.html">Bu bağlantıda</a> bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.</p>

<p><img alt="Four list items. The first three with the same background color and the last with a lighter background." src="https://mdn.mozillademos.org/files/17135/mdn-value-color.png" style="height: 535px; width: 1270px;"></p>

<p>Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p>

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

<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/color-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="İkinci_görev">İkinci görev</h2>

<p>Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.</p>

<ul>
 <li>{{HTMLElement("h1")}} 50 piksel olmalıdır.</li>
 <li>{{HTMLElement("h2")}} 2em olmalıdır.</li>
 <li>{{HTMLElement("p")}} 16 piksel olmalıdır.</li>
 <li>{{HTMLElement("h1")}}'in ilk kardeşi olan {{HTMLElement("p")}}, {{HTMLElement("h1")}} %120'si olmalıdır.</li>
</ul>

<p><img alt="Some text at varying sizes." src="https://mdn.mozillademos.org/files/17136/mdn-value-length.png" style="height: 845px; width: 1267px;"></p>

<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:</p>

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

<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/length-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="Üçüncü_görev">Üçüncü görev</h2>

<p>Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.</p>

<p><img alt="A stat centered horizontally in a box and a short distance from the top of the box." src="https://mdn.mozillademos.org/files/17137/mdn-value-position.png" style="height: 383px; width: 734px;"></p>

<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:</p>

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

<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/position-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2>

<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p>

<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p>

<ol>
 <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li>
 <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
  <ul>
   <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li>
   <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li>
   <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li>
   <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li>
  </ul>
 </li>
</ol>