---
title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler'
slug: Learn/CSS/Building_blocks/Writing_Modes_Tasks
tags:
  - Başlangıç
  - Beginner
  - CSS
translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks
original_slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks
---
<div>{{LearnSidebar}}</div>

<div></div>

<p>Bu görevin amacı, Yazma Modları ve Mantıksal özellikler konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır. Bu görevleri tamamlamak için bilmeniz gerekenler, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a> dersinde ele alınmaktadı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="1._Görev">1. Görev</h2>

<p>Örnekteki kutu, yatay bir yazma modu ile görüntülenir. Sağdan sola dikey yazma modunu kullanması için CSS satırı ekleyebilir misiniz? Öreneğiniz aşağıdaki resme benzemelidir.</p>

<p><img alt="A box with a vertical writing mode" src="https://mdn.mozillademos.org/files/17129/mdn-writing-modes1.png" style="height: 537px; width: 1163px;"></p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.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/writing-modes/writing-mode-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="2._Görev">2. Görev</h2>

<p>Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için <code>width</code> ve <code>height</code> nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.</p>

<p><img alt="Two boxes one horizontal the other vertical" src="https://mdn.mozillademos.org/files/17130/mdn-writing-modes2.png" style="height: 994px; width: 1163px;"></p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}</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/writing-modes/logical-width-height-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="3._Görev">3. Görev</h2>

<p>Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için <code>top</code>, <code>left</code>, <code>bottom</code> ve <code>right</code> yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.</p>

<p>Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.</p>

<p><img alt="Two boxes one horizontal one vertical with different margin, border and padding" src="https://mdn.mozillademos.org/files/17131/mdn-writing-modes3.png" style="height: 704px; width: 1246px;"></p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}</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/writing-modes/logical-mbp-download.html">kaynak kodlarını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>