unslug tr: move

18 files changed, 0 insertions, 3799 deletions

diff --git a/files/tr/öğren/css/css_yapi_taslari/backgrounds_and_borders/index.html b/files/tr/öğren/css/css_yapi_taslari/backgrounds_and_borders/index.html
deleted file mode 100644
index 79cd3c0a36..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/backgrounds_and_borders/index.html
+++ /dev/null
@@ -1,324 +0,0 @@
----
-title: Arka planlar ve kenarlıklar
-slug: Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders
-tags:
-  - Arka Plan
-  - Background
-  - Başlangıç
-  - Beginner
-  - CSS
-  - Eğitim
-  - Image
-  - Kenarlık
-  - Konum
-  - Learn
-  - Position
-  - Renk
-  - Resim
-  - borders
-  - color
-translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktı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>Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="CSSde_arka_planların_stilini_ayarlama">CSS'de arka planların stilini ayarlama</h2>
-
-<p>CSS'deki {{cssxref("background")}} niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} </code>
-</pre>
-
-<p>Bu eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.</p>
-
-<h3 id="Arka_plan_renkleri">Arka plan renkleri</h3>
-
-<p>CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <code><a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a></code> değerini kabul eder. <code>background-color</code>, öğenin içeriğinin ve dolgusunun altını boyar.</p>
-
-<p>Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.</p>
-
-<p><strong>Geçerli olan <a href="/tr/docs/Web/CSS/color_value">&lt;color&gt;</a> değerlerini kullanarak bunlarla oynayın.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
-
-<h3 id="Arka_plan_resimleri">Arka plan resimleri</h3>
-
-<p>{{cssxref("background-image")}} niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.</p>
-
-<p>Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
-
-<p><strong>Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte <code>background-color</code> niteliğine renk bildiriminde bulun.</strong></p>
-
-<h4 id="Arka_plan_tekrarını_kontrol_etme">Arka plan tekrarını kontrol etme</h4>
-
-<p>{{cssxref("background-repeat")}} niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:</p>
-
-<ul>
- <li><code>no-repeat</code> — arka planın tekrarlanmasını durdur.</li>
- <li><code>repeat-x</code> — yatay olarak tekrarla.</li>
- <li><code>repeat-y</code> — dikey olarak tekrarla.</li>
- <li><code>repeat</code> — varsayılan değer; her iki yönde de tekrarlayın.</li>
-</ul>
-
-<p><strong>Bu değerleri aşağıdaki örnekte deneyin. Biz değerini <code>no-repeat</code> olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene. </strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
-
-<h4 id="Arka_plan_resmini_boyutlandırma">Arka plan resmini boyutlandırma</h4>
-
-<p>Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için <a href="/tr/docs/Web/CSS/length">uzunluk</a> veya <a href="/tr/docs/Web/CSS/percentage">yüzde</a> değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.</p>
-
-<p>Ayrıca anahtar kelimeleri de kullanabiliriz:</p>
-
-<ul>
- <li><code>cover</code> — tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplaycak şekilde boyutlandırır. Bu durumda, görüntünün bir kısmı muhtemelen kutunun dışında kalacaktır.</li>
- <li><code>contain</code> — tarayıcı, resmi kutunun içine sığacak şekilde boyutlandıracaktır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün iki yanında veya üstünde ve altında boşluklar oluşabilir.</li>
-</ul>
-
-<p>Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.</p>
-
-<p>Uygula.</p>
-
-<ul>
- <li>Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.</li>
- <li>Uzunluk birimlerini sil ve  <code>background-size: cover</code> veya <code>background-size: contain</code> tanımlamalarını yap.</li>
- <li>Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için <code>background-repeat</code> niteliğinin değerini değiştir.</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
-
-<h4 id="Arka_plan_resmini_konumlandırma">Arka plan resmini konumlandırma</h4>
-
-<p>{{cssxref("background-position")}} niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (<code>x</code>) ve dikey (<code>y</code>) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Varsayılan olarak <code>background-position</code>'ın başlangıç değeri<code>(0,0)</code> dır.</p>
-</div>
-
-<p><code>background-position</code> yatay ve dikey olarak iki ayrı değer alır.</p>
-
-<p><code>top</code> ve <code>right</code> gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} </code>
-</pre>
-
-<p><a href="/tr/docs/Web/CSS/length">Uzunluk</a> ve <a href="/tr/docs/Web/CSS/percentage">yüzdeler</a>:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} </code>
-</pre>
-
-<p>Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:</p>
-
-<pre class="brush: css notranslate">.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}</pre>
-
-<p>Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla konumlandırıyoruz:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-} </code></pre>
-
-<p><strong>Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: <code>background-position</code> is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.</p>
-</div>
-
-<h3 id="Degrade_arka_planlar">Degrade arka planlar</h3>
-
-<p>Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca  {{cssxref("background-image")}} niteliği kullanılarak tanımlanır.</p>
-
-<p><code><a href="/tr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>  veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan <a href="https://cssgradient.io/">birini kullanmaktır</a>.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.</p>
-
-<p>Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
-
-<h3 id="Birden_çok_arka_plan_görüntüsü">Birden çok arka plan görüntüsü</h3>
-
-<p>Birden çok arka plan görüntüsüne sahip olmak da mümkündür — <code>background-image</code> niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.</p>
-
-<p>Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir</p>
-</div>
-
-<p>Diğer <code>background-*</code> nitelikleride <code>background-image</code> gibi virgülle ayrılmış değerlere sahip olabilirler:</p>
-
-<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;</pre>
-
-<p>Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki <code>image1</code>'in <code>background-repeat</code> değeri <code>no-repeat</code> olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki <code>background-position</code> değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — <code>image3</code>'e ilk konum değeri <code>image4</code>'de de ikinci konum değeri verilecektir.</p>
-
-<p><strong>Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
-
-<h3 id="Arka_plan_sabitleme">Arka plan sabitleme</h3>
-
-<p>Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan <span>{{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.</span></p>
-
-<ul>
- <li><code>scroll</code>: Arka plan tanımlandığı öğeye değilde, sayfaya sabitlenir. Bu yüzden sayfa kaydırılırsa hareket eder. Öğenin içeriğinin kaydırılması arka planın hareket etmesini sağlamaz.</li>
- <li><code>fixed</code>: Bir öğenin arka planının, sayfa veya öğe içeriği kaydırıldığında kaymaması için görünüm alanına sabitlenmesine neden olur. Ekrandaki arka plan daima aynı konumda kalacaktır.</li>
- <li><code>local</code>: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü <code>scroll</code> değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. <code>local</code> değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kutu içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket eder.</li>
-</ul>
-
-<p>{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (ayrıca <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">kaynak koduda</a> burada).</p>
-
-<h3 id="Arka_plan_tanımı_için_kısatanım_kullanımı">Arka plan tanımı için kısatanım kullanımı</h3>
-
-<p>Bu dersin başında bahsettiğim gibi, genellikle {{cssxref("background")}} niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.</p>
-
-<p>Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından <code>no-repeat</code> değerine sahip bir görüntü ve en altta bir renk var.</p>
-
-<p>Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin</p>
-
-<ul>
- <li><code>background-color</code>, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.</li>
- <li>
-  <p><code>background-size</code> değeri, sadece <code>background-position</code> değerinden sonra '<code>/</code>' karakteriyle ayırarak tanımlanabilir.</p>
- </li>
-</ul>
-
-<p>{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
-
-<h3 id="Arka_planla_erişilebilirlikle_ilgili_hususlar">Arka planla erişilebilirlikle ilgili hususlar</h3>
-
-<p>Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de <code>background-color</code> tanımlamalısın.</p>
-
-<p>Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.</p>
-
-<h2 id="Kenarlıklar">Kenarlıklar</h2>
-
-<p>Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.</p>
-
-<p>Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border: 1px solid black;
-} </code></pre>
-
-<p>Veya kutunun bir kenarını hedefleyebiliriz, örneğin:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border-top: 1px solid black;
-} </code></pre>
-
-<p>Bu kısatanımların bireysel nitelikleride böyle olacaktır:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-} </code></pre>
-
-<p>Ve daha detaylı tanımlama için:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-} </code></pre>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan <em>mantıksal</em> niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">farklı metin yönleri</a>'ni ele alan bir sonraki derste işleyeceğiz.</p>
-</div>
-
-<p><strong>Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stilini, genişliğini ve rengini değiştirin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
-
-<h3 id="Yuvarlatılmış_köşeler">Yuvarlatılmış köşeler</h3>
-
-<p>{{cssxref("border-radius")}}, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.</p>
-
-<p>Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border-radius: 10px;
-} </code></pre>
-
-<p>Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  border-top-right-radius: 1em 10%;
-} </code></pre>
-
-<p>Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. {{cssxref("border-radius")}}'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
-
-<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2>
-
-<p>Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders">Becerilerini test edin: Arka Planlar ve Kenarlıklar</a>.</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.</p>
-
-<p>Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? </p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/cascade_and_inheritance/index.html b/files/tr/öğren/css/css_yapi_taslari/cascade_and_inheritance/index.html
deleted file mode 100644
index 2e70a368d6..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/cascade_and_inheritance/index.html
+++ /dev/null
@@ -1,357 +0,0 @@
----
-title: Kaynak sırası ve miras
-slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance
-tags:
-  - Acemi
-  - Art arda
-  - Beginner
-  - CSS
-  - Cascade
-  - Inheritance
-  - Learn
-  - Miras
-  - Oğitim
-  - kaynak siparişi
-  - kurallar
-  - ozgüllük
-  - rules
-  - source order
-  - specificity
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan  <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve kalıtım hakkındaki bilgilerini geliştirmektir.</p>
-
-<p>Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.</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 href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Amaç:</th>
-   <td><a title="Cascade: Adım adım kontrol">ardarda denetim</a> ve <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Çakışan_kurallar">Çakışan kurallar</h2>
-
-<p>CSS, <strong>Basamaklı Stil Sayfaları</strong> anlamına gelir ve <em>basamaklandırmanın(<a title="Cascade: Basamaklama - adım adım kontrol">art arda denetimin</a>)</em> anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.</p>
-
-<p>Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. <strong><a title="Cascade: Basamaklama - adım adım kontrol">Art arda Denetim</a></strong> ve <strong><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a></strong> denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.</p>
-
-<p>Burada ayrıca önemli olan <strong>kalıtım</strong> kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.</p>
-
-<p>Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.</p>
-
-<h3 id="Art_arda_denetim"><a title="Cascade: Basamaklama - adım adım kontrol">Art arda denetim</a></h3>
-
-<p>Stil sayfaları <strong>basamaklıdır</strong> — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllüğe</a> sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.</p>
-
-<p>Aşağıdaki örnekte, <code>h1</code> seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(<code>blue</code>) olan kırmızı(<code>red</code>)'dan sonra geldiği için bu yarışı kazanır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
-
-<p>Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen <code>h1</code> etiketimizi seçip <code>color</code> niteliğini 2. satırda belirtiğimiz  kırmızı(<code>red</code>) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki }  süstlü parantezle birlikte  <code>h1</code> öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki <code>h1</code> öğesinin  <code>color</code> niteliğini 5. satırdaki mavi(<code>blue</code>) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. <code>h1</code> öğesinin <code>color</code> değişkeninde en son atanan değer mavi(<code>blue</code>) olduğu için HTML sayfamızdaki <code>h1</code> öğemizin renk değeri mavi olur.</p>
-
-<p>Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.</p>
-
-<h3 id="Özgüllük"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">Özgüllük</a></h3>
-
-<p>Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:</p>
-
-<ul>
- <li>öğe seçici daha az belirsizdir — HTML sayfasında bulunan kendi türündeki tüm öğeleri seçer — bu yüzden daha düşük puan alır.</li>
- <li>Sınıf seçici daha belirgindir — sadece HTML sayfasındaki <code>class</code> nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.</li>
-</ul>
-
-<p>Örnek zamanı! Aşağıda <code>.main-heading</code> sınıfına dahil <code>&lt;h1&gt;</code> etiketi seçicimiz  var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
-
-<p>Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce <code>.main-heading</code> sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda <code>h1</code> öğemizin <code>color</code> nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler.  Sayfadaki tüm <code>h1</code> öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir <code>h1</code> öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.</p>
-
-<p>Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.</p>
-
-<h3 id="Miras">Miras</h3>
-
-<p>Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından <strong>miras</strong> olarak alınır.</p>
-
-<p>Örneğin, <code>color</code> ve <code>font-family</code> niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
-
-<p>Bazı özellikler miras olarak alınmaz  — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. <a href="/tr/docs/Web/CSS/color#Specifications">Renk özelliği ayrıntıları</a>, bölümüne bakın.</p>
-</div>
-
-<h2 id="Kavramların_birlikte_nasıl_çalıştığını_anlamak">Kavramların birlikte nasıl çalıştığını anlamak</h2>
-
-<p>Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.</p>
-
-<p>Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:</p>
-
-<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>
-
-<h2 id="Mirası_anlamak">Mirası anlamak</h2>
-
-<p>Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki <code>ul</code> öğemize bir sınır, dolgu ve yazı tipi rengi verdik.</p>
-
-<p>Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <code>&lt;li&gt;</code>. Daha sonra ikinci listemizi <code>special</code> sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
-
-<p>Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!</p>
-
-<p>Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.</p>
-
-<h3 id="Mirası_kontrol_etmek">Mirası kontrol etmek</h3>
-
-<p>CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.</p>
-
-<dl>
- <dt>{{cssxref("inherit")}}</dt>
- <dd>Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.</dd>
- <dt>{{cssxref("initial")}}</dt>
- <dd>Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek <a href="/tr/docs/Web/CSS/initial_value">başlangıç değerine</a> ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).</dd>
- <dt>{{cssxref("unset")}}</dt>
- <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.</dd>
- <dt>{{cssxref("revert")}}</dt>
- <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.</dd>
-</dl>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.</p>
-</div>
-
-<p>Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.</p>
-
-<p>Örnek:</p>
-
-<ol>
- <li>İkinci liste öğesine  <code>my-class-1</code> sınıfı uygulanmıştır. Bu sınıf  <code>&lt;a&gt;</code> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?</li>
- <li>Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.</li>
- <li><code>&lt;a&gt;</code>  öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek <code>a { color: red; }</code>?</li>
-</ol>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
-
-<h3 id="Tüm_öğelerin_değerlerini_sıfırlama">Tüm öğelerin değerlerini sıfırlama</h3>
-
-<p>CSS'in <code>all</code> niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(<code>inherit</code>, <code>initial</code>, <code>unset</code> veya <code>revert</code>). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.</p>
-
-<p>Aşağıdaki örnekte iki adet alıntı bloğu var(<code>blockquote</code>). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde <code>unset</code> değerini atayan bir bildirimimiz var:  <code>all</code>: <code>unset</code>.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
-
-<p> <code>all</code> niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.</p>
-
-<h2 id="Ardarda_kontrolü_anlamak">Ardarda kontrolü anlamak</h2>
-
-<p>HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.</p>
-
-<p>Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:</p>
-
-<ol>
- <li><strong>Kaynak sırası</strong></li>
- <li><strong>Özgüllük</strong></li>
- <li><strong>Önem</strong></li>
-</ol>
-
-<p>Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.</p>
-
-<h3 id="Art_arda_denetim_2">Art arda denetim</h3>
-
-<p>Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.</p>
-
-<h3 id="Özgüllük_2"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçiciyi belirleme">Özgüllük</a></h3>
-
-<p>Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın <strong>daha yüksek özgüllüğe</strong> sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(<code>class</code>, <code>id</code> vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.</p>
-
-<p>Bu derste daha önce gördüğümüz gibi, sınıf seçicinin  ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.</p>
-
-<p>Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.</p>
-
-<p>Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
-
-<p>Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.</p>
-
-<p>Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.</p>
-
-<ol>
- <li><strong>Binler basamağı</strong>: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.</li>
- <li><strong>Yüzler basamağı</strong>: Öğeye tanımlanmış bir kimlik için seçici <code>(id</code>) varsa, bu sütuna bir puan eklenir.</li>
- <li><strong>Onlar Basamağı</strong>: Her bir sınıf(<code>class</code>), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.</li>
- <li><strong>Birler</strong>: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.</li>
-</ol>
-
-<div class="note">
-<p><strong>Not</strong>: Evrensel seçici (<code>*</code>), birleştirici seçiciler (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), ve olumsuzluk ifadesi sözde sınıfının (<code>:not</code>) özgüllük üzerinde herhangi bir etkisi yoktur.</p>
-</div>
-
-<p>Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN  <a href="/tr/docs/Web/CSS/CSS_Selectors">seçiciler kaynağına </a>bakabilirsin.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Seçici</th>
-   <th scope="col">Binler</th>
-   <th scope="col">Yüzler</th>
-   <th scope="col">Onlar</th>
-   <th scope="col">Birler</th>
-   <th scope="col">Toplam özgüllük</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>h1</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>1</td>
-   <td>0001</td>
-  </tr>
-  <tr>
-   <td><code>h1 + p::first-letter</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>3</td>
-   <td>0003</td>
-  </tr>
-  <tr>
-   <td><code>li &gt; a[href*="tr"] &gt; .inline-warning</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>2</td>
-   <td>2</td>
-   <td>0022</td>
-  </tr>
-  <tr>
-   <td><code>#identifier</code></td>
-   <td>0</td>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0100</td>
-  </tr>
-  <tr>
-   <td>{{htmlattrxref("style")}} niteliği. İçinde seçici yok.</td>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>1000</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Devam etmenden önce bir örneğe bakalım.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
-
-<p>Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.</p>
-
-<ul>
- <li>İlk iki seçici, bağlantının arka plan renginin stili üzerinde rakabet ediyor — ikincisi kazanır ve arka plan rengi mavi yapar çünkü zincirde fazladan bir kimlik <code>id</code> seçicisi vardır: özgüllüğü 201'e karşı 101'dir.</li>
- <li>Üçüncü ve dördüncü seçiciler, bağlantının metin rengi üzerinde rekabet ediyor — ikincisi kazanır ve metni beyaz yapar çünkü bir tane daha az öğe seçiciye sahip olmasına rağmen, eksik olanın yerine bir tane sınıf seçiciye sahip. Yani kazanan özgüllük 113'e 104'tür.</li>
- <li>Seçiciler 5-7, üzerine gelindiğinde bağlantının kenarlığının üzerinde rekabet ediyor. Seçici altı, 23'e 24'le beşe kaybeder — zincirde bir adet daha az seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hemde altıyı yener — zincirde beşle aynı sayıda alt seçiciye sahip olmasına rağmen bir öğe seçicinin yerinde bir sınıf seçici vardır. Yani kazanan 23 ve 24'de karşı 33'tür.</li>
-</ul>
-
-<ol>
-</ol>
-
-<div class="note">
-<p><strong>Not</strong>: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir <em>milyon</em> <strong>sınıf(<code>class</code>) </strong>seçici, bir <strong>kimlik(<code>id</code>) </strong>seçicinin üzerine yazamaz.</p>
-
-<p>Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.</p>
-</div>
-
-<h3 id="!important_!önemli">!important (!önemli)</h3>
-
-<p>Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS <em>bildirimi</em> var, ancak onu kullanırken çok dikkatli olmalısın — <code>!important</code>. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.</p>
-
-<p>Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
-
-<p>Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:</p>
-
-<ol>
- <li>Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.</li>
- <li>Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.</li>
- <li>Her iki elamanda <code>better</code> sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi <code>winning</code> kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan <em>daha yüksek bir özgüllüğü</em> olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.</li>
- <li>2. elamanın arka planı kırmızı (<code>red)</code> ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: <code>!important</code> — Kimlik(<code>ID</code>) daha yüksek bir özgüllüğe sahip olsa bile, <code>border: none</code> nitelik tanımlaması <code>!important</code> bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.</li>
-</ol>
-
-<div class="note">
-<p><strong>Not</strong>: <code>!important</code> bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir <code>!important</code> bildiriminde bulunmak.</p>
-</div>
-
-<p><code>!important</code> bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. <strong>Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim</strong>. <code>!important</code> Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.</p>
-
-<p>Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.</p>
-
-<h2 id="CSS_konumunun_etkisi">CSS konumunun etkisi</h2>
-
-<p>Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:</p>
-
-<ol>
- <li>Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).</li>
- <li>Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).</li>
- <li>Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).</li>
- <li>Yazar stil sayfalarındaki önemli bildirimler.</li>
- <li>Kullanıcı stil sayfalarındaki önemli bildirimler.</li>
-</ol>
-
-<p>Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da <code>!important</code> bildirimini kullanarak sağlayabilirler.</p>
-
-<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>
-
-<p>Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_tasks">Becerilerini test edin: Kaynak sırası.</a></p>
-
-<h2 id="Sıradaki_ne">Sıradaki ne</h2>
-
-<p>Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.</p>
-
-<p>Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.</p>
-
-<p>Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.</p>
-
-<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/debugging_css/index.html b/files/tr/öğren/css/css_yapi_taslari/debugging_css/index.html
deleted file mode 100644
index 05b5c9a4ab..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/debugging_css/index.html
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: CSS'de hata ayıklamak
-slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-  - DOM
-  - Debugging
-  - DevTools
-  - Eğitim
-  - Hata Ayıklama
-  - Kaynak kod
-  - Learn
-  - source
-translation_of: Learn/CSS/Building_blocks/Debugging_CSS
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan  DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.</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>Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Tarayıcılarda_DevToolsa_nasıl_erişilir">Tarayıcılarda DevTools'a nasıl erişilir</h2>
-
-<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirici araçları nelerdir</a> dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.</p>
-
-<p>Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için,  <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Izgara Düzeni</a>, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>'ı ve <a href="/tr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Biçimleri</a> incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.</p>
-
-<p>Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">örnek bir dosya</a> kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.</p>
-
-<h2 id="DOM_ve_görüntüleme_kaynağı_karşılaştırması">DOM ve görüntüleme kaynağı karşılaştırması</h2>
-
-<p>Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının <a href="/tr/docs/Tools/View_source">kaynağını görüntülediğinde</a> veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Panelinde</a> görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.</p>
-
-<p>Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <code>&lt;h2&gt;</code><font><font> etiketini </font></font><code>&lt;/h3&gt;</code> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan <code>&lt;/h3&gt;</code>'ü <code>&lt;/h2&gt;</code> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.</p>
-
-<p>Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ağacı</a>'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.</p>
-
-<h2 id="Uygulanan_CSSi_inceleme">Uygulanan CSS'i inceleme</h2>
-
-<p>Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden <em>öğeyi incele</em>'yi seçerek veya <em>Araçlar</em> menüsündeki <em>Web geliştirici</em> sekmesinde bulunan seçeneklerden birini seçerek <em>DevTools'a</em> geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki <code>box1</code> sınıfına atanmış öğeyi seçip <em>DevTools'u </em>aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.</p>
-
-<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
-
-<p>Açılan <em>DevTools</em> ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde <em>Denetçi</em> sekmesinde bulunan HTML alanının sağındaki <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Kurallar görünümüne</a> bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan <code>box1</code> sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <code>&lt;body&gt;</code>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.</p>
-
-<p>Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım <code>margin</code> kısa tanımı üzerinden ilerleyelim.</p>
-
-<p><strong>Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.</strong></p>
-
-<p><strong>Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, <code>border-radius</code> niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve <em>DevTools</em> bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.</strong></p>
-
-<p>Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve <code>box1</code> sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.</p>
-
-<p>Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:</p>
-
-<p>{{EmbedYouTube("O3DAm82vIvU")}}</p>
-
-<h2 id="Değerleri_düzenleme">Değerleri düzenleme</h2>
-
-<p>Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.</p>
-
-<p><strong>Seçtimiz <code>box1</code> sınıfına ait öğemizin <em>Kurallar görünümündeki</em> <code>color</code> niteliğinin yanıda ki küçük renkli daireye tıklayalım.</strong><strong> Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.</strong></p>
-
-<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
-
-<h2 id="Yeni_nitelik_eklemek">Yeni nitelik eklemek</h2>
-
-<p><em>DevTools'u</em> kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <code>&lt;body&gt;</code> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.</p>
-
-<p><strong>Yeni bir bildirim girebilmek için kuralın sonunda bulunan <code>}</code> süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle <code>font-size</code> niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.</strong></p>
-
-<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS'i inceleme ve düzenleme</a> dersine bakın.</p>
-</div>
-
-<h2 id="Kutu_modelini_anlamak">Kutu modelini anlamak</h2>
-
-<p>Önceki derslerde <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeline</a> verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.</p>
-
-<p><a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Düzen görünümde(Layout)</a> seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile  kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.</p>
-
-<p>Bu panelde, kutu modeli özelliklerinden biri olan <code>box-sizing</code> öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.</p>
-
-<p><strong><code>box1</code></strong><strong> ve <code>box2</code> sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak <code>box1</code> sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin <code>context-box</code> değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.</strong></p>
-
-<p><strong><code>box2</code> sınıfına dahil olan öğemizin kutu modeli <code>border-box</code> olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.</strong></p>
-
-<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Kutu Modelini İnceleme ve Düzenleme</a> bölümünden daha fazla bilgi edinebilirsin.</p>
-</div>
-
-<h2 id="Özgüllük_sorunlarını_çözme">Özgüllük sorunlarını çözme</h2>
-
-<p>Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.</p>
-
-<p>Örnek dosyamızda bir <code>&lt;em&gt;</code> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:</p>
-
-<pre class="brush: css notranslate">em {
-  color: hotpink;
-  font-weight: bold;
-}</pre>
-
-<p>Bunla birlikte stil sayfamda <code>.special</code> sınıf seçicisine sahip bir kuralım daha var:</p>
-
-<pre class="brush: css notranslate">.special {
-  color: orange;
-}</pre>
-
-<p><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a> dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.</p>
-
-<p><strong>Kontrol görünümünde <code>&lt;em&gt;</code> öğe ve <code>.special</code> sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan <code>color</code> niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.</strong></p>
-
-<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
-
-<h2 id="Firefox_Geliştirici_Araçları_hakkında_daha_fazla_bilgi_edinin">Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin</h2>
-
-<p>MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için <a href="/tr/docs/Tools">DevTools bölümüne</a> ve <a href="/tr/docs/Tools/Page_Inspector#How_to">Nasıl Yapılır Rehberi'ne</a> bakın.</p>
-
-<h2 id="CSSde_hata_ayıklama_sorunları">CSS'de hata ayıklama sorunları</h2>
-
-<p>DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.</p>
-
-<h3 id="Sorundan_bir_adım_uzaklaşın">Sorundan bir adım uzaklaşın</h3>
-
-<p>Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.</p>
-
-<h3 id="HTML_ve_CSS_kodların_geçerli_mi">HTML ve CSS kodların geçerli mi?</h3>
-
-<p>Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.</p>
-
-<ul>
- <li><a href="https://jigsaw.w3.org/css-validator/">CSS doğrulayıcı</a></li>
- <li><a href="https://validator.w3.org/">HTML doğrulayıcı</a></li>
-</ul>
-
-<h3 id="Nitelik_ve_değer_test_ettiğin_tarayıcı_tarafından_destekleniyor_mu">Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?</h3>
-
-<p>Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.</p>
-
-<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
-
-<p>MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.</p>
-
-<p>{{Compat("css.properties.shape-outside")}}</p>
-
-<h3 id="CSSini_geçersiz_kılan_başka_bir_etken_mi_var">CSS'ini geçersiz kılan başka bir etken mi var?</h3>
-
-<p>Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.</p>
-
-<h3 id="İndirgenmiş_test_senaryosu">İndirgenmiş test senaryosu</h3>
-
-<p>Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.</p>
-
-<p>İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.</p>
-
-<p>İndirgenmiş bir test senaryosu oluşturmak:</p>
-
-<ol>
- <li>Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. <a href="https://codepen.io/">CodePen</a> gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.</li>
- <li>JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.</li>
- <li>Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.</li>
- <li>Sorunu etkilemeyen tüm CSS'leri kaldırın.</li>
-</ol>
-
-<p>Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.</p>
-
-<p>Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.</p>
-
-<p>Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın <a href="https://bugzilla.mozilla.org">bugzilla</a> sitesi).</p>
-
-<p>CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/handling_different_text_directions/index.html b/files/tr/öğren/css/css_yapi_taslari/handling_different_text_directions/index.html
deleted file mode 100644
index 372e9d8f6b..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/handling_different_text_directions/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: Farklı metin yönlerini kullanma
-slug: Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions
-tags:
-  - Başlangıç
-  - Beginner
-  - CSS
-  - Eğitim
-  - Learn
-  - logical properties
-  - mantıksal ozellikler
-  - writing modes
-  - yazma modu
-translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
-
-<p>CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.</p>
-
-<p>Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içeriklerde(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağız.</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>Modern CSS için yazma modlarının önemini anlamak.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Yazma_modları_nelerdir">Yazma modları nelerdir?</h2>
-
-<p>CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder.  {{cssxref("writing-mode")}} niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.</p>
-
-<p>Aşağıdaki örnekte <code>writing-mode: vertical-rl</code> kullanılarak görüntülenen bir başlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımına daha ilginç bir görünüm ve his katmanın bir yolu olabilir.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
-
-<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> niteliği için olası üç değer şunlardır:</p>
-
-<ul>
- <li><code>horizontal-tb</code>: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.</li>
- <li><code>vertical-rl</code>: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.</li>
- <li><code>vertical-lr</code>: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.</li>
-</ul>
-
-<p>Yani <code>writing-mode</code> niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.</p>
-
-<h2 id="Yazma_modları_ve_blok_ve_satır_içi_düzen">Yazma modları ve blok ve satır içi düzen</h2>
-
-<p><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">Blok ve satır içi düzeni</a>, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan,  bloklar sayfanın üstünden altına doğru görüntülenir.</p>
-
-<p>Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, bir başlık ve bir paragraf içeren iki kutum var. İlki <code>writing-mode: horizontal-tb</code>, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi <code>writing-mode: vertical-rl</code>; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
-
-<p>Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir <code>horizontal-tb</code> yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir <code>vertical-rl</code> yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; <strong>block dimension:</strong> yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. <strong>inline dimension: </strong>Satır içi ise paragrafların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.</p>
-
-<p>Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.</p>
-
-<p>,<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png"></p>
-
-<p>Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.</p>
-
-<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
-
-<p>CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğiz.</p>
-
-<h3 id="Yön">Yön</h3>
-
-<p><span>Yazma moduna ek olarak metin  yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağın bir uygulama değildir </span>— bir metni sağ taraftan başlatmak istiyoran, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.</p>
-
-<p>Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte <em>başlangıç</em> ve <em>bitiş</em>  tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.</p>
-
-<h2 id="Mantıksal_özellikler_ve_değerler">Mantıksal özellikler ve değerler</h2>
-
-<p>Öğreniminin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında fikir sahibi olmandır.</p>
-
-<p>İki kutumuza tekrar bir göz atalım — biri <code>horizontal-tb</code> ve diğeride <code>vertical-rl</code> değerlerine sahip. Bu iki kutuya da bir {{cssxref("width")}} değeri verdim. Gördüğün gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
-
-<p>Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun blok boyutunun da genişlemesini istiyoruz.</p>
-
-<p>Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — <code>width</code> ve <code>height</code> gibi — <strong>mantıksal</strong> veya <strong> akışla ilgili</strong> sürümlerle değiştirir.</p>
-
-<p>Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki <code>width</code>'yi ifade eder.  {{cssxref("block-size")}} niteliği ise blok boyuttaki <code>height</code> boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. <code>inline-size</code> ile <code>width</code>.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
-
-<h3 id="Mantıksal_kenar_boşluğu_kenarlık_ve_dolgu_nitelikleri">Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri</h3>
-
-<p>Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel niteliklerin bir çok örneklerini bulacaksın {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, ve {{cssxref("border-bottom")}}. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.</p>
-
-<p><code>margin-top</code> niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.</p>
-
-<p>{{cssxref("padding-left")}} niteliğinin eşlemesi olan {{cssxref("padding-inline-start")}}, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlar. {{cssxref("border-bottom")}} niteliğinin eşlemsi olan {{cssxref("border-block-end")}} ise blok boyutunun sonunda bir sınır koymamızı sağlar.</p>
-
-<p>Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.</p>
-
-<p><strong>Eğer <code>.box</code> sınıfı içerisindeki <code>writing-mode</code>'u </strong><strong><code>vertical-rl</code> olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.</strong></p>
-
-<p><strong>Ayrıca </strong><strong>{{htmlelement("h2")}} etiketinin <code>border-bottom</code> niteliğine sahip olduğunu görebilirsin. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağını bulabilir misin?</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
-
-<p>Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Mantıksal Özellikler ve Değerler</a> için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.</p>
-
-<h3 id="Mantıksal_değerler">Mantıksal değerler</h3>
-
-<p>Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır <code>top</code>, <code>right</code>, <code>bottom</code>, ve <code>left</code>. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, ve <code>inline-start</code>.</p>
-
-<p>Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. <code>left</code> değerinin yerini  <code>inline-start</code> değerinin aldığını görebilirsin</p>
-
-<p><strong>Resim üzerinde nasıl bir etkisi olduğunu görebilmek için <code>horizontal-tb</code> değerini <code>vertical-rl</code> ile değiştirebilirsin. Ayrıca <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace;'>float</span><span style="background-color: #ffffff;"> niteliğindeki </span><code>inline-start</code> değerini <code>inline-end</code> ile değiştirin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
-
-<p>Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.</p>
-
-<div class="blockIndicator note">
-<p>Şu anda, yalnız"ca Firefox için <code>float</code> akış kontrol değerleri desteklenmektedir. Eğer <strong>Google Chrome</strong> veya <strong>Microsoft Edge</strong> kullanıyorsan, metnin kaymadığını fark edebilirsin.</p>
-</div>
-
-<h3 id="Fiziksel_veya_mantıksal_özellikleri_kullanmalı_mısın">Fiziksel veya mantıksal özellikleri kullanmalı mısın?</h3>
-
-<p>Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.</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 musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Becerilerini test edin: yazma modları</a>.</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasan bile CSS'i anlamana yardımcı olacaktır.</p>
-
-<p>Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "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 öğeler</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 öğelerin 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>
- <li>/ol&gt;</li>
-</ol>
diff --git a/files/tr/öğren/css/css_yapi_taslari/images_media_form_elements/index.html b/files/tr/öğren/css/css_yapi_taslari/images_media_form_elements/index.html
deleted file mode 100644
index 44d6747ddd..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/images_media_form_elements/index.html
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: 'Görseller, medya ve form öğeleri'
-slug: Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-  - Eğitim
-  - Forms
-  - Gorüntü
-  - Images
-  - Learn
-  - Media
-  - Medya
-  - değiştirilen içerik
-  - form
-  - replaced content
-translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Görseller, diğer ortamlar ve form öğeleri, CSS ile biçimlendirme de şimdiye kadar öğrendiğin kutu davranışlarından biraz farklı davranırlar. Neyin yapılıp neyin yapılamadığını anlamak bazı karmaşıklıklardan seni kurtarabilir. Burada dikkat etmemiz gereken bazı ana konulara değineceğiz.</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>Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Yenilenen_öğeler">Yenilenen öğeler</h2>
-
-<p>Görüntüler ve medyalar <strong><a href="/en-US/docs/Web/CSS/Replaced_element">yenilenen öğeler</a></strong> olarak tanımlanır. Bu, CSS'in bu öğeleri dahili düzenini etkileyemeceği anlamına gelir — yalnızca sayfadaki diğer öğelerle arasındaki konumlarına müdahale edebilir. Ancak göreceğimiz gibi, CSS'in bir görüntüye yapabileceği çeşitli şeyler de vardır.</p>
-
-<p>Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir <strong>en boy oranına</strong> sahip olarak var olurlar. Bu, hem yatay(x) hem de dikey(y) boyutlara sahip olduğu ve varsayılan olarak dosyanın iç boyutları kullanılarak görüntüleneceği anlamına gelir.</p>
-
-<h2 id="Görüntüleri_boyutlandırma">Görüntüleri boyutlandırma</h2>
-
-<p>Bu zamana kadar ki derslerden öğrendiğin gibi, CSS'deki her öğe bir kutudan oluşturulur. Her iki yönde de görüntü dosyasının iç boyutlarından daha küçük veya daha büyük bir kutunun içine bir görüntü yerleştirirsen, ya kutudan daha küçük görünür yada kutunun sınırları dışına taşar. Taşma ile ne yapılacağı konusunada bizim karar vermemiz gerekir.</p>
-
-<p>Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:</p>
-
-<ul>
- <li>Biri 200 pikselden daha küçük bir görüntü içeriyor — kutudan daha küçük ve onu doldurmak için genişlemiyor.</li>
- <li>Diğeri 200 pikselden büyüktür ve kutunun sınırları dışına taşmaktadır.</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
-
-<p>Öyleyse taşma konusu hakkında ne yapabiliriz?</p>
-
-<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Önceki dersimizde</a> öğrendiğimiz gibi, yaygın bir teknik olan {{cssxref("max-width")}} niteliğinin değerinine %100 değerini tanımlayabiliriz. Bu, görüntünün boyut olarak kutudan daha küçük olmasını ancak daha büyük olmamasını sağlayacaktır. Bu teknik, <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>lar ve  <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>ler içinde geçerlidir.</p>
-
-<p><strong>Yukarıdaki örnekte bulunan <code>&lt;img&gt;</code> öğesine <code>max-width: 100%;</code> niteliğini tanımlayın. Daha küçük görüntünün değişmeden kaldığını, ancak daha büyük olanın kutuya sığabilmek için küçüldüğünü göreceksin.</strong></p>
-
-<p>Kutuların içindeki görüntülerle ilgili başka seçimler de yapabilirsin. Örneğin, bür görüntüyü bir kutuya tamamen kaplayacak şekilde boyutlandırmak isteyebilirsin.</p>
-
-<p>Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. <code>object-fit</code> niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..</p>
-
-<p>Aşağıda <code>cover</code>, en boy oranını koruyarak, görüntüyü küçülten ve kutuyu düzgün bir şekilde dolduran değeri kullandık. En-boy oranı korunduğu için, görüntünün kutudan taşan kısımları kırpılacaktır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
-
-<p>Değer olarak <code>contain</code>'nu kullanırsak, görüntü kutunun içine tamamen sığabileceği kadar küçültülür. Görüntü, kutuyla aynı en-boy oranına sahip değilse "sinemaskop" şeklinde görüntülenecektir.</p>
-
-<p><code>fill</code> değeri ise, kutuyu tamamen dolduracak fakat görüntü, kutuyla aynı en-boy oranına sahip değilse görüntüyü büzüp gerecektir. Yukarıdaki örnekte kutunun birinde bu değeri kullanıp nasıl sonuçlandığını görebilirsin.</p>
-
-<h2 id="Düzende_yenilenebilen_öğeler">Düzende yenilenebilen öğeler</h2>
-
-<p>Yenilenebilen öğeler üzerinde çeşitli CSS mizanpaj tekniklerini kullanırken, diğer öğelere göre biraz farklı davrandıklarını fark edebilirsin. Örneğin, esnek veya ızgara düzeninde öğeler varsayılan olarak tüm alanı dolduracak şekilde boyutlandırılır. Görüntüler yeniden boyutlandırılmazlar, bunun yerine ızgara alanının veya esnek kabın başlangıcına hızalanırlar.</p>
-
-<p>Bunu aşağıdaki, içinde dört öğe bulunan iki sütun ve iki satırdan oluşan bir ızgara örneğinde görebilirsin. Tüm <code>&lt;div&gt;</code> öğelerinin bir arka plan rengi vardır, satır ve sütunu doldurmak için öğemiz boyutlandırılır. Ancak görüntünün boyutunda bir değişim olmaz.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
-
-<p>Bu dersleri sırayla takip ediyorsan, henüz düzene bakmamışsındır. Değiştirilen öğelerin bir ızgara veya esnek mizanpajın parçası olduklarında, dahil oldukları düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olduklarını unutmayın.</p>
-
-<p>Görüntüyü, içinde bulunduğu ızgara hücresini dolduracak şekilde uzatmaya zorlamak için aşağıdaki gibi bir tanımlama yapman gerekir:</p>
-
-<pre class="brush: css notranslate">img {
-  width: 100%;
-  height: 100%;
-}</pre>
-
-<p>Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.</p>
-
-<h2 id="Form_öğeleri">Form öğeleri</h2>
-
-<p>Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve <a href="/en-US/docs/Learn/Forms">Web Formları dersi</a>, burada yeniden anlatamayacağım kadar karmaşık yönlerine yönelik ayrıntılı kılavuzlar içerir. Makalenin bu bölümünde vurgulanmaya değer bir kaç temel var.</p>
-
-<p><code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> etiketi aracılığıyla sayfana birçok form denetimi eklenir — bu, renk ve tarih seçiciler gibi HTML5'e eklenen daha karmaşık alanlara kadar ve metin girişleri gibi basit form alanlarını tanımlar. Ayrıca <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> gibi satırlı metin girişine izin veren ek unsurlar ve ek unsurlar için kullanılan form üzerindeki öğelerin gruplandırılması ve etiketlenmesini sağlayan ek tanımlar da vardır — <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> ve <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code> gibi.</p>
-
-<p>HTML5 ayrıca web geliştiriclerinin hengi alanların gerekli olduğunu ve hatta girilmesi gereken içerik türünü belirtmesine olanak tanıyan nitelikler içerir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa, tarayıcı hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil ve özelleştirmeye izin verdikleri konusunda tutarsızdır.</p>
-
-<h3 id="Metin_giriş_öğelerini_şekillendirme">Metin giriş öğelerini şekillendirme</h3>
-
-<p>Metin girişine izin veren <code>&lt;input type="text"&gt;</code> gibi, belirli türlerin girişine izin veren <code>&lt;input type="email"&gt;</code> gibi ve birden fazla satıra sahip metin girişine izin veren <code>&lt;textarea&gt;</code> etiketi gibi öğelerin stillendirilmesi oldukça kolaydır ve sayfandaki diğer kutular gibi davranma eğilimindedirler. Bu öğelerin varsayılan stili kullanıcının, siteyi ziyaret ettiği işletim sistemi ve tarayıcıya bağlı olarak farklılıklar gösterecektir.</p>
-
-<p>Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerine stil uyguladık. Kenarlık, kenar boşlukları ve dolgu gibi stillerin beklediğin gibi uygulandığını ve farklı girdi türlerini hedeflemek için nitelik seçicilerin kullanıldığını görebilirsin. Kenarlıkları, arka plan renklerini, yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi denebilirsin.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
-
-<div class="blockIndicator warning">
-<p><strong>Önemli</strong>: Form öğelerinin kullanıcı için görülebilir olması için form öğelerinin görümünü değiştirirken dikkatli olmalısın. Çevresindeki diğer nesnelerden neredeyse ayırt edilemeyen kenarlık ve arka planna sahip bir form girişi oluşturulabilir, ancak bu fark edilmesini ve bilgi girişi yapılmasını zorlaştırır.</p>
-</div>
-
-<p>Bu kursun HTML bölümündeki <a href="/en-US/docs/Learn/Forms/Styling_web_forms">form stiliyle</a> ilgili derslerde açıklandığı gibi, daha karmaşık giriş türlerinin çoğu işletim sistemi tarafından oluşturulur ve şekillendirme için erişilemez. Bu nedenle her zaman formların farklı ziyaretçiler için oldukça farklı görüneceğini varsaymalı ve çeşitli tarayıcılarda karmaşık formları test etmelisin.</p>
-
-<h3 id="Kalıtım_ve_form_öğeleri">Kalıtım ve form öğeleri</h3>
-
-<p>Bazı tarayıcılar, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarının gövdede veya bir ana öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsan, bu kuralı CSS'ine eklemelisin.</p>
-
-<pre class="brush: css notranslate"><code>button,
-input,
-select,
-textarea {
-  font-family : inherit;
-  font-size : 100%;
-} </code></pre>
-
-<h3 id="Form_öğeleri_ve_kutu_boyutlandırma">Form öğeleri ve kutu boyutlandırma</h3>
-
-<p>Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli dersimizde</a> <code>box-sizing</code> niteliği hakkında bilgi edindin ve bu bilgiyi form öğelerinde genişlik ve yükseklileri ayarlarken tutarlı bir görünüm sağlamak için formları şekillendirirken kullanabilirsin.</p>
-
-<p>Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini <code>0</code> olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.</p>
-
-<pre class="brush: css notranslate"><code>button,
-input,
-select,
-textarea {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}</code></pre>
-
-<h3 id="Diğer_kullanışlı_ayarlar">Diğer kullanışlı ayarlar</h3>
-
-<p>Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <code>&lt;textarea&gt;</code> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, <code>overflow: auto</code> tanımını yapın:</p>
-
-<pre class="brush: css notranslate">textarea {
-  overflow: auto;
-}</pre>
-
-<h3 id="Hepsini_bir_araya_getirerek_sıfırlamak">Hepsini bir araya getirerek "sıfırlamak"</h3>
-
-<p>Son bir adım olarak, çalışmak ortamında tutarlı bir temel sağlamak için, yukarıda tartışılan çeşitli özellikleri aşağıdaki "form sıfırlama" ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:</p>
-
-<pre class="brush: css notranslate"><code>button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  padding: 0; margin: 0;
-}
-
-textarea {
-  overflow: auto;
-} </code></pre>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Normalleştirme stil sayfaları, birçok geliştirici tarafından projelerinde bir dizi temel stil şablonu oluşturmak için kullanılır. Salt olarak bunlar, CSS üzerinde kendi stilini oluşturmadan önce, tarayıcılar arasında ki farklı varsayılan değerler için ve yukarıda bahsettiğimiz davranışlar için tutarlı bir varsayılana sahip olmanı sağlar. Tarayıcılar tipik olarak geçmişe göre daha tutarlı olduğundan, eskisi kadar önemli değiller. Bununla birlikte, bir örneğe göz atmak istersen, bir çok popüler stil sayfasından biri olan ve pekçok projede kullanılan <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> bakabilirsin.</p>
-</div>
-
-<p>Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Web formlarını şekillendirme</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Gelişmiş form stili</a></li>
-</ul>
-
-<h2 id="Becerilerini_test_edin!">Becerilerini test edin!</h2>
-
-<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Images_tasks">Becerilerini test et: Görüntüler ve form öğeleri.</a></p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Bu ders, CSS'de görseller, medya ve diğer alışılmadık unsurlarla çalışırken karşılaşacağın bazı farklılıkları ele aldı. Sonraki makalede, HTML tablolarını biçimlendirmen gerektiğinde yararlı bulacağın birkaç ipucuna bakacağız.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/index.html b/files/tr/öğren/css/css_yapi_taslari/index.html
deleted file mode 100644
index e898c37760..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: CSS yapı taşları
-slug: Öğren/CSS/CSS_yapi_taslari
-tags:
-  - Başlangıç
-  - Beginner
-  - CSS
-  - Learn
-  - building blocks
-  - kutu oluşturmak
-  - Öğrenme
-translation_of: Learn/CSS/Building_blocks
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Bu derste, <a href="/tr/docs/Learn/CSS/First_steps">CSS'in ilk adımlarının</a> kaldığı yerden devam ediyor. Artık dile ve sözdizimine aşinalık kazandın ve onu kullanma konusunda bazı temel deneyimler edindin, biraz daha derine dalma zamanı. Bu bölüm, art arda denetime ve mirasa, sahip olduğun tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasına bakar.</p>
-
-<p class="summary">Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak</p>
-
-<div class="in-page-callout webdev">
-<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3>
-
-<p><span>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık</span>.</p>
-
-<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p>
-</div>
-
-<h2 id="Gereksinimler">Gereksinimler</h2>
-
-<p>Bu üniteye başlamadan önce şunlara sahip olmalısın:</p>
-
-<ol>
- <li>Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)</li>
- <li><a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli uygulamaların yüklenmesi</a> bölümünde ayrıntılı olarak verilen çalışma ortamı ve  <a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a> bölümünde ayrıntılarıyla anlatıldığı gibi dosyanın nasıl oluşturulacağının ve yönetileceğinin anlaşılması</li>
- <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde tartışıldığı gibi alt yapıya sahip olmak.</li>
- <li><a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adımlar</a> ünitesinde açıklanan temellerin anlaşılması.</li>
-</ol>
-
-<div class="note">
-<p><strong>Not</strong>: Kendi dosyalarını oluşturma imkanının olmadığı bir bilgisayar/table/başka bir çihaz üzerinde çalışıyorsan; çevrim içi kod düzenleyip deneyebileceğin şu siteleri kullanabilirsin: <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a>.</p>
-</div>
-
-<h2 id="Kılavuzlar">Kılavuzlar</h2>
-
-<p>Bu ünite, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Ders boyunca, gördüklerini denemene izin verecek bir çok alıştırmalarla karşılaşacaksın.</p>
-
-<dl>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a></dt>
- <dd>
- <p>Bu dersin amacı, CSS'in HTML'ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden CSS'in en temel kavramlarından bazıları olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve miras anlayışını geliştirmektir.</p>
- </dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a></dt>
- <dd>CSS'de, stil verilecek öğeleri seçerken yüksek hassasiyetli birçok seçici mevcuttur. Bu makale ve alt makalelerinde, seçicilerin farklı türlerinin nasıl çalıştığını görerek incelemiş olacağız. Alt makalelerin bağlantıları aşağıdadır:
- <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çicileri</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 öğeler</a></li>
-  <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
- </ul>
- </dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></dt>
- <dd>CSS'deki herşeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin ve öğelerin diğer öğelerle hizlanmasının anahtarıdır. Bu derste, nasıl çalıştığını ve bununla ilgili terminolojiyi anlayarak daha karmaşık tasarımların üstesinden gelebilmen için CSS <em>Kutu Modeline</em> derinlemesine bakacağız.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></dt>
- <dd>Bu derste CSS arka planları ve kenarlıkları ile yapabileceğin bazı yenilikçi özelliklere bir göz atacağız. Renk geçişleri, arka plan resimleri ve yuvarlatılmış köşeler yapabilmek. CSS'deki arka planlar ve kenarlıklar bir çok stil sorunun çözümüdür.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a></dt>
- <dd>Son yıllarda, sağdan sola ve yukarıdan aşağıya doğru(japonca gb.) içeriklerinde dahil olduğu farklı yönlülüğü daha iyi desteklemek için CSS gelişti. Bu farklı yönlere <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarının anlamak sana çok yardımcı olacaktır. Bu nedenle bunları bu makalede tanıtacağız.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></dt>
- <dd>Bu derste CSS'deki başka bir önemli soruna bakacağız — <strong>taşma</strong>. Taşma, bir kutunun sınırları içerisinde tutabileceğinden daha fazla içerik olduğunda olan davranıştır. Bu makalede ne olduğunu ve nasıl yönetileceğini öğreneceksin.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a></dt>
- <dd>CSS'de kullanılan her nitelik, o nitelik için izin verilen bir değere veya değerler kümesine sahiptir. Bu derste, kullanılan en yaygın değerlerden ve birimlerden bazılarına göz atacağız.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutlandırma</a></dt>
- <dd>Şimdiye kadarki derslerde, CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarına az buçuk aşına oldun. Tasarımındaki farklı özelliklerin ne kadar büyük olacağını anlamak gerçekten önemlidir ve bur derste, nesnelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yolarını özetleyeceğiz ve gelecete size yardımcı olacak boyutlandırma ile ilgili bir kaç terim tanıtacağız.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form nesneleri</a></dt>
- <dd>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Resimler, diğer ortamlar ve form nesneleri gibi. CSS ile biçimlendirme becerin açısından normal kutulardan biraz farklı davranırlar. Neyin mümkün olup neyin mümkün olmadığını anlamak bazı hayal kırıklıklarından seni kurtarabilir. Bu ders bilmen gereken bazı ana konuları vurgular.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></dt>
- <dd>Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı işi değildir, ancak bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin uygulanmasıyla HTML tablolarının güzel görünmesi için sana bir klavuz sağlar.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></dt>
- <dd>Bazen CSS yazarken, CSS'nin istediğin şeyi yapmadığı bir sorunla karşılaşırsın. Bu makale, bir CSS sorununu nasıl gidereceğin konusunda sana rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini göstereceğiz.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></dt>
- <dd>Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığında, büyük bir CSS dosyasını korumanın ne kadar zor olabileceğini keşfedeceksin. Bu makalede, CSS'ini yazmak için kullanılan en iyi uygulamalara  ve bakımı iyileştirmeye yardımcı olmak için başkaları tarafından kullanılan çözümlerden bazılarına kısa bir göz atacağız.</dd>
-</dl>
-
-<h2 id="Değerlendirmeler">Değerlendirmeler</h2>
-
-<p>CSS becerilerini test etmek ister misin? Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda anlatılan CSS hakkında edindiğin bilgileri sınayacak.</p>
-
-<dl>
- <dt><a href="/tr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Temel CSS anlayışı</a></dt>
- <dd>Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Süslü antetli kağıt oluşturma</a></dt>
- <dd>Doğru izlenimi bırakmak istiyorsan, güzel bir antetli kağıda bir mektup yazmak gerçekten iyi bir başlangıç olabilir. Bu değerlendirme, böyle bir görünüm elde etmek için seni çevrimiçi bir şablon oluşturmaya davet edeceğim.</dd>
- <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Harika görünümlü bir kutu</a></dt>
- <dd>Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.</dd>
-</dl>
-
-<h2 id="Göz_at">Göz at</h2>
-
-<dl>
- <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Gelişmiş stil efektleri</a></dt>
- <dd>Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir <em>numara kutusu</em> görevi görür.</dd>
-</dl>
diff --git a/files/tr/öğren/css/css_yapi_taslari/organizing/index.html b/files/tr/öğren/css/css_yapi_taslari/organizing/index.html
deleted file mode 100644
index 383d4db9e5..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/organizing/index.html
+++ /dev/null
@@ -1,376 +0,0 @@
----
-title: CSS planlama
-slug: Öğren/CSS/CSS_yapi_taslari/Organizing
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-  - CodingScripting
-  - Eğitim
-  - Learn
-  - biçimlendirme
-  - comments
-  - formatting
-  - methodologies
-  - organizing
-  - post-processor
-  - pre-processor
-  - stil rehberi
-  - styleguide
-  - yorumlar
-translation_of: Learn/CSS/Building_blocks/Organizing
----
-<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağız.</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>Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="CSSi_düzenli_tutmak_için_ipuçlar">CSS'i düzenli tutmak için ipuçlar</h2>
-
-<p>Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler</p>
-
-<h3 id="Projende_kodlama_stili_rehberin_var_mı">Projende kodlama stili rehberin var mı?</h3>
-
-<p>mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.</p>
-
-<p>Örneğin, <a href="/tr/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN kod örnekleri için CSS yönergelerine</a> bir göz atın.</p>
-
-<h3 id="Tutarlı_olmasını_sağlayın">Tutarlı olmasını sağlayın</h3>
-
-<p>Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)</p>
-
-<p>Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.</p>
-
-<h3 id="CSS_biçimlendirmen_okunabilir_olsun">CSS biçimlendirmen okunabilir olsun</h3>
-
-<p>CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:</p>
-
-<pre class="brush: css  notranslate">.box { background-color: #567895; }
-h2 { background-color: black; color: white; }</pre>
-
-<p>Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:</p>
-
-<pre class="brush: css  notranslate">.box {
-  background-color: #567895;
-}
-
-h2 {
-  background-color: black;
-  color: white;
-}</pre>
-
-<p>Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.</p>
-
-<h3 id="CSS_hakkında_yorumlarda_bulun">CSS hakkında yorumlarda bulun</h3>
-
-<p>CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.</p>
-
-<pre class="brush: css  notranslate">/* Bu bir CSS yorumudur
-Birden fazla satıra bölünebilir. */</pre>
-
-<p>Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda <code>||</code> mantıksal işaretini kullandım.</p>
-
-<pre class="brush: css  notranslate">/* || Genel stiler */
-
-...
-
-/* || Yazıları şekillendir */
-
-...
-
-/* || Üst bilgi ve ana gezinti bölmesi */
-
-...
-
-</pre>
-
-<p>CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.</p>
-
-<p>Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:</p>
-
-<pre class="brush: css  notranslate">.box {
-  background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */
-  background-image: linear-gradient(to right, #ff0000, #aa0000);
-}
-</pre>
-
-<p>Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.</p>
-
-<h3 id="Stil_sayfanda_mantıksal_bölümler_oluştur.">Stil sayfanda mantıksal bölümler oluştur.</h3>
-
-<p>Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:</p>
-
-<ul>
- <li><code>body</code></li>
- <li><code>p</code></li>
- <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
- <li><code>ul</code> ve <code>ol</code></li>
- <li><code>table</code> özellikleri</li>
- <li>Bağlantılar</li>
-</ul>
-
-<p>Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.</p>
-
-<pre class="brush: css  notranslate">/* || Genel Stiller */
-
-body { ... }
-
-h1, h2, h3, h4 { ... }
-
-ul { ... }
-
-blockquote { ... }
-</pre>
-
-<p>Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.</p>
-
-<pre class="brush: css  notranslate">/* || Araçlar */
-
-.nobullets {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-...
-
-</pre>
-
-<p>Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.</p>
-
-<pre class="brush: css  notranslate">/* || Site geneli */
-
-.main-nav { ... }
-
-.logo { ... }
-</pre>
-
-<p>Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.</p>
-
-<pre class="brush: css  notranslate">/* || Site sayfaları */
-
-.product-listing { ... }
-
-.product-box { ... }
-</pre>
-
-<p>Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.</p>
-
-<h3 id="Aşırı_karakteristik_seçicilerden_kaçının">Aşırı karakteristik seçicilerden kaçının</h3>
-
-<p>Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, <code>main</code> sınıfına dahil <code>&lt;article&gt;</code> öğesinin torunlarından <code>box</code> sınıfına dahil <code>&lt;p&gt;</code> öğeleri için bir kuralımız olabilir.</p>
-
-<pre class="brush: css  notranslate">article.main p.box {
-  border: 1px solid #ccc;
-}</pre>
-
-<p>Fakat daha sonra aynı kuralları <code>main</code> sınıfına dahil olmayan ebeveyne sahip öğeye veya <code>&lt;p&gt;</code> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için <code>.box</code> seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri <code>box</code> sınıfına dahil ederiz.</p>
-
-<pre class="brush: css  notranslate">.box {
-  border: 1px solid #ccc;
-}</pre>
-
-<p>Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.</p>
-
-<h3 id="Büyük_stil_sayfalarını_daha_küçük_parçalara_bölün">Büyük stil sayfalarını daha küçük parçalara bölün</h3>
-
-<p>Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.</p>
-
-<p>Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.</p>
-
-<p>CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.</p>
-
-<h2 id="Yardımcı_olabilecek_diğer_araçlar">Yardımcı olabilecek diğer araçlar</h2>
-
-<p>CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.</p>
-
-<h3 id="CSS_metodolojileri">CSS metodolojileri</h3>
-
-<p>CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.</p>
-
-<p>bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.</p>
-
-<h4 id="OOCSS">OOCSS</h4>
-
-<p>Karşılaşacağın yaklaşımların çoğu, <a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan'ın çalışmasıyla</a> popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, <a href="/tr/docs/Web/CSS/Layout_cookbook/Media_objects">Media Nesnesi</a> olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.</p>
-
-<p>OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip <code>comment</code> adlı bir sınıf ve neredeyse <code>comment</code> sınıfıyla arasında bazı farklılıklar haricinde aynı olan  <code>list-item</code> sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.</p>
-
-<pre class="brush: css  notranslate">.comment {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.comment .content {
-  font-size: .8rem;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  border-bottom: 1px solid grey;
-}
-
-.list-item .content {
-  font-size: .8rem;
-}</pre>
-
-<p>OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan <code>media</code> adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.</p>
-
-<pre class="brush: css  notranslate">.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.media .content {
-  font-size: .8rem;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.list-item {
-  border-bottom: 1px solid grey;
-} </pre>
-
-<p>HTML'emizdeki yorum kısmının hem <code>media</code>, hem de <code>comment</code> sınıflarına dahil edilmesi gerekir:</p>
-
-<pre class="brush: html  notranslate">&lt;div class="media comment"&gt;
-  &lt;img /&gt;
-  &lt;div class="content"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Liste öğelerinin de hem <code>media</code>, hem de <code>list-item</code> sınıfklarına dahil edilmesi gerekir:</p>
-
-<pre class="brush: html  notranslate">&lt;ul&gt;
-  &lt;li class="media list-item"&gt;
-    &lt;img /&gt;
-    &lt;div class="content"&gt;&lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<p>Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.</p>
-
-<h4 id="BEM">BEM</h4>
-
-<p>BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, <a href="http://getbem.com/naming/">BEM Adlandırma kuralları</a> sayfasındaki HTML'ye uygulanan sınıflara bakın:</p>
-
-<pre class="brush: html  notranslate">&lt;form class="form form--theme-xmas form--simple"&gt;
-  &lt;input class="form__input" type="text" /&gt;
-  &lt;input
-    class="form__submit form__submit--disabled"
-    type="submit" /&gt;
-&lt;/form&gt;</pre>
-
-<p>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.</p>
-
-<p>BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.</p>
-
-<p>Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine <a href="https://css-tricks.com/bem-101/">BEM 101'i</a> okuyun.</p>
-
-<h4 id="Diğer_yaygın_sistemler">Diğer yaygın sistemler</h4>
-
-<p>Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan <a href="http://smacss.com/">Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS)</a>, Harry Roberts'tan <a href="https://itcss.io/">ITCSS</a> ve Yahoo! tarafından oluşturulan <a href="https://acss.io/">Atomic CSS (ACSS)</a> bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.</p>
-
-<p>Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.</p>
-
-<h3 id="CSS_için_bir_sistem_oluşturun.">CSS için bir sistem oluşturun.</h3>
-
-<p>CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.</p>
-
-<p>Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.</p>
-
-<p>En popüler ön işlemci <a href="https://sass-lang.com/">Sass</a>'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, <a href="https://sass-lang.com/guide">Sass Temelleri</a> makalesi ile başlayın ve ardından diğer belgelerine geçin.</p>
-
-<h4 id="Değişken_tanımlama">Değişken tanımlama</h4>
-
-<p>CSS artık yerel <a href="/tr/docs/Web/CSS/Using_CSS_custom_properties">özel özelliklere</a> sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.</p>
-
-<p>Aşağıdaki ilk satırdaki gibi bir <code>$base-color</code> değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.</p>
-
-<pre class="brush: css  notranslate"><code>$base-color: #c6538c;
-
-.alert {
-  border: 1px solid $base-color;
-}</code></pre>
-
-<p>CSS derlendikten sonra aşağıdaki gibi gözükecektir.</p>
-
-<pre class="brush: css  notranslate"><code>.alert {
-  border: 1px solid #c6538c;
-}</code></pre>
-
-<h4 id="Birleşen_stil_sayfalarını_derlemek">Birleşen stil sayfalarını derlemek</h4>
-
-<p>Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.</p>
-
-<p>Örneğin, <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials(kısımlar)</a> ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code> vb. dosyaların olsun. Bunları Sass'da kullanmak için <code>@use</code> bildirimini kullanabilirsin:</p>
-
-<pre class="brush: css  notranslate">// foundation/_index.sass
-@use 'code'
-@use 'lists'
-@use 'footer'
-@use 'links'</pre>
-
-<p>Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:</p>
-
-<pre class="brush: css  notranslate">// style.sass
-@use 'foundation'</pre>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Sass'ı denemenin basit bir yolu  <a href="https://codepen.io">CodePen</a> kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek,  CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.</p>
-</div>
-
-<h4 id="Optimizasyon_için_son_işlem">Optimizasyon için son işlem</h4>
-
-<p>Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek <a href="https://cssnano.co/">cssnano</a>.</p>
-
-<h2 id="Bundan_sonra">Bundan sonra</h2>
-
-<p>Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.</p>
-
-<p>CSS'de mizanpaj hakkında daha fazla bilgi edinmek için <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Mizanpajını Hakkında</a> bölümüne bakabilirsin.</p>
-
-<p>Artık <a href="/tr/docs/Web/CSS">MDN CSS</a> materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için <a href="/tr/docs/Web/CSS/Layout_cookbook">CSS YemekKitabını</a> inceleyebilir ve <a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Izgara Düzeni Rehberi</a> gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.</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 öğeler</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 öğelerin 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'inizi düzenleme</a></li>
-</ol>
diff --git a/files/tr/öğren/css/css_yapi_taslari/overflow_tasks/index.html b/files/tr/öğren/css/css_yapi_taslari/overflow_tasks/index.html
deleted file mode 100644
index 7ee1ceaad0..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/overflow_tasks/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 'Becerilerinizi test edin: Taşma'
-slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-translation_of: Learn/CSS/Building_blocks/Overflow_Tasks
----
-<div>{{LearnSidebar}}</div>
-
-<div></div>
-
-<p>Bu görevlerin amacı, CSS'deki taşma konusundaki 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>Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.</p>
-
-<p><img alt="A small box with a border and a vertical scrollbar." src="https://mdn.mozillademos.org/files/17133/mdn-overflow1.png" style="height: 456px; width: 632px;"></p>
-
-<p>Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.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/overflow/overflow-scroll-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 bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.</p>
-
-<p><img alt="A box with an image which fills the box but does not spill out the edges." src="https://mdn.mozillademos.org/files/17134/mdn-overflow2.png" style="height: 389px; width: 565px;"></p>
-
-<p>Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.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/overflow/overflow-hidden-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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/overflowing_content/index.html b/files/tr/öğren/css/css_yapi_taslari/overflowing_content/index.html
deleted file mode 100644
index 5f332ca348..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/overflowing_content/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: İçerik taşması
-slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content
-tags:
-  - Acemi
-  - Beginner
-  - Block Formatting Context
-  - CSS
-  - Data Loss
-  - Eğitim
-  - Learn
-  - Veri kaybı
-  - overflow
-  - taşma
-translation_of: Learn/CSS/Building_blocks/Overflowing_content
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.</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>Taşmayı ve onu nasıl yöneteceğini anlamak.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Taşma_nedir">Taşma nedir?</h2>
-
-<p>CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. <strong>Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız.</strong> CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.</p>
-
-<h2 id="CSS_veri_kaybını_önlemeye_çalışır">CSS, "veri kaybını" önlemeye çalışır</h2>
-
-<p>Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.</p>
-
-<p>İlk örnek, <code>height</code> niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
-
-<p>İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
-
-<p>CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?</p>
-
-<p>Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.</p>
-
-<p>Bir kutuya <code>width</code> veya <code>height</code> ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)</p>
-
-<p>Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.</p>
-
-<h2 id="Taşma_niteliği_overflow">Taşma niteliği: <code>overflow</code></h2>
-
-<p>{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri <code>visible</code>'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.</p>
-
-<p>Taşan içeriği gizlemek için de ayarlayabilirsin; <code>overflow: hidden</code>. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
-
-<p>Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; <code>overflow: scroll</code>. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.</p>
-
-<p><strong>Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
-
-<p>Yukarıdaki örnekte, sadece <code>y</code> ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece <code>y</code> ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama <code>overflow-y: scroll</code>.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
-
-<p>{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğeleri boyutlandırma bölümünde</a> tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
-
-<p><code>scroll</code>'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>:  <code>overflow</code> niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, <code>overflow: scroll hidden</code>'nin açılımı: <code>overflow-x: scrool</code> ve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">overflow-y: hidden</span></font> olacak şekilde yorumlanacaktır.</p>
-</div>
-
-<p>Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, <code>overflow:auto</code> kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.</p>
-
-<p><strong>Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Not:</strong> Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -&gt; Genel -&gt; Sarma çubuklarını göster" ayarı)</p>
-</div>
-
-<h2 id="Taşma_Blok_Biçimlendirme_Kapsamı_oluşturur">Taşma, Blok Biçimlendirme Kapsamı oluşturur</h2>
-
-<p><code>scroll</code> veya <code>auto</code> gibi bir taşma değeri kullandığında, <strong>Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC)</strong> oluşturursun. <code>overflow</code> olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.</p>
-
-<h2 id="Web_tasarımında_istenmeyen_taşma">Web tasarımında istenmeyen taşma</h2>
-
-<p>Modern yerleşim yöntemleri (<a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeninde</a> açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.</p>
-
-<p>Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.</p>
-
-<p>Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)</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 musun? 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/Overflow_Tasks">Becerilerini test edin: taşma</a>.</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/selectors/index.html b/files/tr/öğren/css/css_yapi_taslari/selectors/index.html
deleted file mode 100644
index a7f89d5c85..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/selectors/index.html
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: CSS seçiciler
-slug: Öğren/CSS/CSS_yapi_taslari/Selectors
-tags:
-  - Başlangıç
-  - CSS
-  - Nitelik
-  - Sozde
-  - id
-  - oğrenin
-  - seçiciler
-  - sınıf
-translation_of: Web/CSS/CSS_Selectors
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
-
-<p class="summary">Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız</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 href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Amaç:</th>
-   <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Seçici_nedir">Seçici nedir?</h2>
-
-<p>Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin <em>konusu</em> olarak anılır.</p>
-
-<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
-
-<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici <code>h1</code> veya sınıf seçici <code>.special</code> gibi.</p>
-
-<p>CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler spesifikasyonunda</a> tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.</p>
-
-<h2 id="Seçici_listeleri">Seçici listeleri</h2>
-
-<p>Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi,  bir <em>seçici listesinde</em> birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan <code>h1</code> eleman seçicim ve <code>.special</code> sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.</p>
-
-<pre class="brush: css notranslate"><code>h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-} </code></pre>
-
-<p>Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p>
-
-<pre class="brush: css notranslate"><code>h1, .special {
-  color: blue;
-} </code></pre>
-
-<p>Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.</p>
-
-<pre class="brush: css notranslate"><code>h1,
-.special {
-  color: blue;
-} </code></pre>
-
-<p>Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
-
-<p>Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p>
-
-<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> şekillendirmesi hala uygulanacaktır.</p>
-
-<pre class="brush: css notranslate"><code>h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-} </code></pre>
-
-<p>Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de <code>h1</code> elemanı biçimlendirilmez</p>
-
-<pre class="brush: css notranslate"><code>h1, ..special {
-  color: blue;
-} </code></pre>
-
-<h2 id="Seçici_türleri">Seçici türleri</h2>
-
-<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..</p>
-
-<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3>
-
-<p>Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <code>&lt;h1&gt;</code>:</p>
-
-<pre class="brush: css notranslate">h1 { }</pre>
-
-<p>Ayrıca bir sınıfı hedefleyen seçicileri de içerir <code>class</code>:</p>
-
-<pre class="brush: css notranslate">.box { }</pre>
-
-<p>veya bir kimlik <code>id</code>:</p>
-
-<pre class="brush: css notranslate">#unique { }</pre>
-
-<h3 id="Nitelik_seçiciler">Nitelik seçiciler</h3>
-
-<p>Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:</p>
-
-<pre class="brush: css notranslate">a[title] { }</pre>
-
-<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:</p>
-
-<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
-
-<h3 id="Sözde_sınıflar_ve_sözde_elemanlar">Sözde sınıflar ve sözde elemanlar</h3>
-
-<p>Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin <code>:hover</code> sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:</p>
-
-<pre class="brush: css notranslate">a:hover { }</pre>
-
-<p>Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin <code>::first-line</code> her zaman bir elemanın içindeki ilk metin satırını seçer (<code>&lt;p&gt;</code> şağıdaki durumda, sanki ilk satırın etrafı <code>&lt;span&gt;</code> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.</p>
-
-<pre class="brush: css notranslate">p::first-line { }</pre>
-
-<h3 id="Birleştiriciler">Birleştiriciler</h3>
-
-<p>Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <code>&lt;article&gt;</code> eleman etiketi  (<code>&gt;</code>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:</p>
-
-<pre class="brush: css notranslate">article &gt; p { }</pre>
-
-<h2 id="Sonraki_adımlar">Sonraki adımlar</h2>
-
-<p>Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> makalesine devam ederek yolculuğunuza başlayabilirsiniz.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="Seçicilerin_referans_tablosu">Seçicilerin referans tablosu</h2>
-
-<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Seçici</th>
-   <th scope="col">Örnek</th>
-   <th scope="col">CSS makaleleri</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Type_selectors">Tür seçici</a></td>
-   <td><code>h1 {  }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td>
-   <td><code>* {  }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Class_selectors">Sınıf seçici</a></td>
-   <td><code>.box {  }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf seçici</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td>
-   <td><code>#unique { }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçici</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td>
-   <td><code>a[title] {  }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçici</a></td>
-   <td><code>p:first-child { }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Pseudo-elements">Sözde elelman seçici</a></td>
-   <td><code>p::first-line { }</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde eleman</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Descendant_combinator">Torun birleştiricisi</a></td>
-   <td><code>article p</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Child_combinator">Çocuk birleştiricisi</a></td>
-   <td><code>article &gt; p</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştiricisi</a></td>
-   <td><code>h1 + p</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td>
-  </tr>
-  <tr>
-   <td><a href="/tr/docs/Web/CSS/General_sibling_combinator">Genel kardeş birleştiricisi</a></td>
-   <td><code>h1 ~ p</code></td>
-   <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td>
-  </tr>
- </tbody>
-</table>
-
-<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'inizi düzenleme</a></li>
-</ol>
diff --git a/files/tr/öğren/css/css_yapi_taslari/sizing_items_in_css/index.html b/files/tr/öğren/css/css_yapi_taslari/sizing_items_in_css/index.html
deleted file mode 100644
index 9da820f78a..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/sizing_items_in_css/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: CSS'de öğeleri boyutlandırma
-slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-  - Eğitim
-  - Intrinsic size
-  - Learn
-  - boyutlandırma
-  - goruntu alanı birimleri
-  - maksimum boyut
-  - max size
-  - min size
-  - minimum boyut
-  - percentage
-  - sizing
-  - viewport units
-  - yüzde
-  - İç boyut
-translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
----
-<p>https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit</p>
-
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
-
-<p>Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi ele alacağız.</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'de nesneleri boyutlandırmanın farklı yollarını anlamak.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Nesnelerin_doğal_veya_içsel_boyutu">Nesnelerin doğal veya içsel boyutu</h2>
-
-<p>HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <code>&lt;image&gt;</code>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen <strong>gerçek boyut</strong> olarak tanımlanır.</p>
-
-<p>Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <code>&lt;img&gt;</code> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
-
-<p>Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
-
-<p>Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <code>&lt;div&gt;</code> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.</p>
-
-<h2 id="Belirli_bir_boyut_belirleme">Belirli bir boyut belirleme</h2>
-
-<p>Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna <strong>dışsal boyut</strong> denir. Yukarıdaki <code>&lt;div&gt;</code> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşma konusundaki dersimizde</a> öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
-
-<p>Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.</p>
-
-<h3 id="Yüzdeler_kullanma">Yüzdeler kullanma</h3>
-
-<p>Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve <a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">değerler ve birimlerle ilgili derste</a> tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
-
-<p>Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <code>&lt;div&gt;</code>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.</p>
-
-<h3 id="Yüzde_kenar_boşlukları_ve_dolgu">Yüzde kenar boşlukları ve dolgu</h3>
-
-<p>Eğer <code>margins</code> ve <code>padding</code> niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}}  %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
-
-<p>Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!</p>
-
-<p>Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin <strong>satır içi boyutundan</strong> hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.</p>
-
-<h2 id="min-_ve_max-_boyutlar">min- ve max- boyutlar</h2>
-
-<p>Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman <em>en azından</em> belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.</p>
-
-<p>Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
-
-<p>Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.</p>
-
-<p>Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.</p>
-
-<p>Misal; <code>width: 100%</code> olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.</p>
-
-<p>Bunun yerine <code>max-width: 100%</code> tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.</p>
-
-<p>Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye <code>width: 100%</code> tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü <code>max-width: 100%</code> tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine <code>max-width: 100%</code> tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
-
-<p>Bu teknik, görüntüleri <em>duyarlı</em> hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: <a href="/tr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Duyarlı görüntüleme teknikleri</a> hakkında daha fazla bilgi edinin.</p>
-</div>
-
-<h2 id="Görüntü_alanı_birimleri">Görüntü alanı birimleri</h2>
-
-<p>Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(<code>vw</code>) ve görüntüleme alanı yüksekliği(<code>vh</code>) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.</p>
-
-<p><code>1vw</code> görüntüleme alanının genişliğinin %1'ine, <code>1vh</code>'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde <code>font-size</code>'ı 10vh olan bir "A" harfi var.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
-
-<p><strong>Eğer <code>vh</code> ve <code>vw</code> değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">örneği yeni bir pencerede açın</a>(yukarıdaki örnek <code>&lt;iframe&gt;</code> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)</strong></p>
-
-<p>Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği <strong>100vh</strong> olarak tanımlarsan,  içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.</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 musun? 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/Sizing_tasks">Becerilerini test et: Boyutlandırma</a>.</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Düzenine</a> geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/sizing_tasks/index.html b/files/tr/öğren/css/css_yapi_taslari/sizing_tasks/index.html
deleted file mode 100644
index ffccae6a72..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/sizing_tasks/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 'Becerilerinizi test edin: Boyutlandırma'
-slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks
-tags:
-  - Acemi
-  - Beginner
-  - CSS
-  - Example
-  - Örnek
-translation_of: Learn/CSS/Building_blocks/Sizing_tasks
----
-<div>{{LearnSidebar}}</div>
-
-<div></div>
-
-<p>Bu görevin amacı <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de Öğeleri Boyutlandırma</a> dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi 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 iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.</p>
-
-<p>İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.</p>
-
-<p><img alt="Two boxes one with overflowing content" src="https://mdn.mozillademos.org/files/17140/mdn-sizing-height-min-height.png" style="height: 551px; width: 746px;"></p>
-
-<p>Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.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/sizing/height-min-height-download.html">Kaynak Kodu</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 başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.<img alt="A box with another box nested inside" src="https://mdn.mozillademos.org/files/17141/mdn-sizing-percentages.png" style="height: 274px; width: 720px;"></p>
-
-<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.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/sizing/percentages-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
-</div>
-
-<h2 id="Görev_Üç">Görev Üç</h2>
-
-<p>Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.</p>
-
-<p><img alt="Two boxes with images in" src="https://mdn.mozillademos.org/files/17142/mdn-sizing-max-width.png" style="height: 807px; width: 742px;"></p>
-
-<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}</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/sizing/max-width-download.html">kaynak kodu</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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/styling_tables/index.html b/files/tr/öğren/css/css_yapi_taslari/styling_tables/index.html
deleted file mode 100644
index c7fb4335d7..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/styling_tables/index.html
+++ /dev/null
@@ -1,330 +0,0 @@
----
-title: Tabloları şekillendirme
-slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables
-tags:
-  - Acemi
-  - Article
-  - Beginner
-  - CSS
-  - CodingScripting
-  - Guide
-  - Komut Dosyası
-  - Makale
-  - NeedsUpdate
-  - Rehber
-  - Stil
-  - Styling
-  - Tables
-  - Tablo
-translation_of: Learn/CSS/Building_blocks/Styling_tables
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
-
-<p class="summary">Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.</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>HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Standart_bir_HTML_tablosu">Standart bir HTML tablosu</h2>
-
-<p>Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;Band&lt;/th&gt;
-      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
-      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
-      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
-      &lt;td&gt;1976&lt;/td&gt;
-      &lt;td&gt;9&lt;/td&gt;
-      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
-      &lt;td&gt;1976&lt;/td&gt;
-      &lt;td&gt;6&lt;/td&gt;
-      &lt;td&gt;London Calling&lt;/td&gt;
-    &lt;/tr&gt;
-
-      ... some rows removed for brevity
-
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
-      &lt;td&gt;1974&lt;/td&gt;
-      &lt;td&gt;17&lt;/td&gt;
-      &lt;td&gt;No More Heroes&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
-      &lt;td colspan="2"&gt;77&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-&lt;/table&gt;</pre>
-
-<p>Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> sayfasına bakın.):</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.</p>
-
-<h2 id="Tablomuzu_şekillendirmek">Tablomuzu şekillendirmek</h2>
-
-<p>Tablo örneğimizi birlikte şekillendirmeye çalışalım.</p>
-
-<ol>
- <li>Başlangıç olarak, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">kaynak kodları</a> ve iki adet resmi(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.</li>
- <li>Ardından, adı <code>style.css</code> olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.</li>
- <li>Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın.
-  <pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
- </li>
-</ol>
-
-<h3 id="Aralık_ve_düzen">Aralık ve düzen</h3>
-
-<p>Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi <code>style.css</code> dosyasına eklemelisin:</p>
-
-<pre class="brush: css notranslate">/* spacing */
-
-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  border: 3px solid purple;
-}
-
-thead th:nth-child(1) {
-  width: 30%;
-}
-
-thead th:nth-child(2) {
-  width: 20%;
-}
-
-thead th:nth-child(3) {
-  width: 15%;
-}
-
-thead th:nth-child(4) {
-  width: 35%;
-}
-
-th, td {
-  padding: 20px;
-}</pre>
-
-<p>Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:</p>
-
-<ul>
- <li>Bir {{cssxref("table-layout")}} niteliğine atanan <code>fixed</code> değeri tablonun daha öngürülebilir davranmasına sağlayarak çalışma alanımızda daha iyi bir ortam oluşturmuş oluruz. Normalde, tablo sütunları içerdikleri içeriğe göre boyutlandırılma eğilimindedirler ve bu da bazı garip sonuçlar doğurabilir. Biz de <code>tablo-layout: fixed</code> ile sütunlarımızı başlıkların genişliğine göre boyutlandırmış oluruz. Bu sāyede içeriklerle uygun şekilde ilgilenebiliriz. Daha sonra <code>thead th:nth-child(<em>n</em>)</code> bildirmiyle {{htmlelement("thead")}} öğemizin {{htmlelement("th")}} çocuklarını sırasıyla seçebilmek için {{cssxref(":nth-child")}} sözde öğe seçimizle başlıklarımızın genişliklerini yüzdelik olarak belirliyoruz. Sütun genişliklerinin tamamı başlıkların genişliklerine göre ayarlamak tablo sütunlarını boyutlandırmanın güzel bir yoludur. Chris Coyier bu tekniği daha ayrıntılı olarak ele aldığı <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> makâlesinin çevirisine bakabilirsiniz.</li>
- <li>Tablo genişliğini {{cssxref("width")}} niteliğine 100% uzunluk değeri vererek tablonun içinde bulunduğu kutunun genişliği kadar genişlik alması sağlandı(Her ne kadar dar ekranlarda genişliğin üzerinde biraz daha ek çalışmaya ihtiyaç duysa da)</li>
- <li>{{cssxref("border-collapse")}} niteliğine <code>collapse</code> değeri atayarak tablonun sınır çizgisi tek çizgi olacak şekilde ayarlanıyor. Varsayılan olarak, tablo öğelerinde kenarlık ayarladığınızda, aşağıdaki resimde gösterildiği gibi, çizgilerin arasında boşuklar olacaktır: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) <code>border-collapse: collapse;</code> bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:</li>
-</ul>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></p>
-
-<ul>
- <li>{{cssxref("border")}} niteliğimizle tablonun etrafına bir kenarlık koyduk, çünkü daha sonra tablo başlığının ve altbilginin etrafına bazı kenarlıklar koyacağız — etrafını çevreleyen bir sınır olmadığında gerçekten tuhaf ve kopu görünür.</li>
-</ul>
-
-<p>Bu noktada, tablomuz biraz daha iyi görünür:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
-
-<h3 id="Basit_bir_tipografi">Basit bir tipografi</h3>
-
-<p>Şimdi metnimizi biraz şekillendirelim.</p>
-
-<p><a href="https://www.google.com/fonts">Google Fonts</a>'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.</p>
-
-<p>Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <code>&lt;link&gt;</code> tanımının hemen üstüne eklemelisin:</p>
-
-<pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
-
-<p>Şimdi, aşağıdaki CSS'i <code>style.css</code> dosyasının önceki eklemenin altına eklemelisin:</p>
-
-<pre class="brush: css notranslate">/* typography */
-
-html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
-}
-
-th {
-  letter-spacing: 2px;
-}
-
-td {
-  letter-spacing: 1px;
-}
-
-tbody td {
-  text-align: center;
-}
-
-tfoot th {
-  text-align: right;
-}</pre>
-
-<p>Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.</p>
-
-<ul>
- <li>Genel bir sans-serif yazı tipi kümesi belirledik; bu tamamen biçimsel bir seçimdir. Ayrıca hoş bir eski/serseri bir görünüm için özel yazı tipimizi {{htmlelement("thead")}} ve {{htmlelement("tfoot")}} etiketleri içindeki başlıklara tanımladım.</li>
- <li>{{cssxref("letter-spacing")}} niteliğimizi okunabilirliliğe yardımcı olduğunu düşündüğüm için başlıklara ve hücrelere tanımladım. Bu da stilistik bir seçim.</li>
- <li>Tablodaki {{htmlelement("tbody")}} etiketi içerisindeki hücrelerin içeriklerini, başlıklarla aynı hizaya gelecek şekilde ortaladım. Varsayılan olarak hücrelerin {{cssxref("text-align")}} nitelik değeri <code>left</code> olarak gelir. Ancak başlıkların varsayılan değerleri <code>center</code> olarak gelmektedir. Genellikle hizalamaların her ikisi için de aynı olması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalınlık görünümlerinin farklılaştırmak için yeterlidir. Bunun için ayrı bir tanım yapma ihtiyacımız bu örnek için bulunmamakta.</li>
- <li>{{htmlelement("tfoot")}} etiketimizdeki veri hücresiyle başlığın daha iyi ilişkilendirilmesi için başlığı sağa hizaladım. Veri hücresi varsayılan olarak zaten sola dayalı.</li>
-</ul>
-
-<p>Sonuç biraz daha düzgün görünüyor:</p>
-
-
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
-
-<h3 id="Grafikler_ve_renler">Grafikler ve renler</h3>
-
-<p>Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade  ve zevkli bir tasarım tercik edebilirsin.</p>
-
-<p>Aşağıdaki CSS'i <code>style.css</code> dosyanıza eklemelisin:</p>
-
-<pre class="brush: css notranslate">/* graphics and colors */
-
-thead, tfoot {
-  background: url(leopardskin.jpg);
-  color: white;
-  text-shadow: 1px 1px 1px black;
-}
-
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
-  border: 3px solid purple;
-}
-</pre>
-
-<p>Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.</p>
-
-<p>{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.</p>
-
-<h4 id="Zebra_çizgisi">Zebra çizgisi</h4>
-
-<p><strong>Zebra çizgilerinin</strong> nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i <code>sytle.css</code> dosyasına eklemelisin:</p>
-
-<pre class="brush: css notranslate">/* zebra striping */
-
-tbody tr:nth-child(odd) {
-  background-color: #ff33cc;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #e495e4;
-}
-
-tbody tr {
-  background-image: url(noise.png);
-}
-
-table {
-  background-color: #ff33cc;
-}</pre>
-
-<ul>
- <li>Daha önce, {{cssxref(":nth-child")}} seçicinin belirli alt öğeleri seçmek için kullanıldığını gördün. Parametre olarak bir formül de verilerek bir dizi öğe seçebilir. Formül <code>2n-1</code> ile tüm tek sayılı çocukları (1, 3, 5, vb), <code>2n</code> formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda <code>odd</code>(tek) ve <code>even</code>(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.</li>
- <li>Ayrıca, tüm gövde sıralarına tekrar eden bir arka plan döşemesi ekledim, bu şekilde tablomuza yarı saydam bir doku kazandırmış oldum.</li>
- <li>Son olarak, tüm tabloya düz bir arka plan rengi verdim ki <code>:nth-child</code> seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.</li>
-</ul>
-
-<p>Bu renk cümbüşü aşağıdaki görünüme neden olur:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.</p>
-
-<h3 id="Başlığın_stilini_ayarlamak">Başlığın stilini ayarlamak</h3>
-
-<p>Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri <code>style.css</code> dosyasına eklemelisin.</p>
-
-<pre class="brush: css notranslate">/* caption */
-
-caption {
-  font-family: 'Rock Salt', cursive;
-  padding: 20px;
-  font-style: italic;
-  caption-side: bottom;
-  color: #666;
-  text-align: right;
-  letter-spacing: 1px;
-}</pre>
-
-<p>Burada <code>bottom</code> değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> görmek için bakın):</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
-
-<h2 id="Tablo_şekillendirme_için_hızlı_ipuçları">Tablo şekillendirme için hızlı ipuçları</h2>
-
-<p>Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:</p>
-
-<ul>
- <li>Tablo işaretlemeni olabildiğince basit hale getirmelisin; örneğin yüzdeleri kullanarak işleri esnek tutmalısın, böylece tasarımın daha duyarlı olsun.</li>
- <li>{{cssxref("table-layout")}}<code>: fixed;</code> bildirimini kullanarak sütun genişliklerini({{cssxref("width")}}) başlıklarının({{htmlelement("th")}}) genişliğine ayarlanmasını sağlayarak daha tahmin edilebilir bir tablo düzeni oluşturabilirsin.</li>
- <li>{{cssxref("border-collapse")}}<code>: collapse;</code> kullanarak daha sāde kenarlıklar eklemelisin.</li>
- <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}}, ve {{htmlelement("tfoot")}} etiketlerini kullanarak ve böylece mantıksal alanlara bölerek oluşturduğun tablo üzerinde daha fazla CSS uygulamak için imkan sağlamış olursun.</li>
- <li>Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.</li>
- <li>{{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.</li>
-</ul>
-
-<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 musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Becerilerini test et: Tablolar</a>.</p>
-
-<h2 id="Sıradaki">Sıradaki</h2>
-
-<p>Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_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 öğeler</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 öğelerin 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'inizi düzenleme</a></li>
-</ol>
diff --git a/files/tr/öğren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html b/files/tr/öğren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html
deleted file mode 100644
index b144c19470..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar'
-slug: Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders
-tags:
-  - Arka Plan
-  - Assessment
-  - Başlangıç
-  - Beginner
-  - Değerlendirme
-  - Eğitim
-  - Kenarlık
-  - Learn
-  - Skill test
-  - backgrounds
-  - beceri testi
-  - borders
-translation_of: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders
----
-<p>Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için <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ı yararlı olabilir.</p>
-
-<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazla yardım")}} bölümüne bakın.</p>
-</div>
-
-<h2 id="Arka_Planlar_ve_Kenarlıklar_1">Arka Planlar ve Kenarlıklar 1</h2>
-
-<p>Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:</p>
-
-<ol>
- <li>Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.</li>
- <li>Bir arka plan resmi ekleyin (<code>balloons.jpg</code>'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.</li>
- <li><code>&lt;h2&gt;</code> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.</li>
-</ol>
-
-<p>Bitmiş örnek aşağıdaki gibi görünmelidir.</p>
-
-<p><img alt="Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background." src="https://mdn.mozillademos.org/files/16946/backgrounds-task1.png" style="height: 236px; width: 911px;"></p>
-
-<p>Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds1-download.html">kaynak kodunu</a> indirin.</p>
-</div>
-
-<h2 id="Arka_Planlar_ve_Kenarlıklar_2">Arka Planlar ve Kenarlıklar 2</h2>
-
-<p>Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:</p>
-
-<ul>
- <li>Kutuya 5 piksellik açık mavi bir kenarlık verin ve sol üst köşesyi 20 piksel ve sağ alt köşeyi 40 piksel yuvarlayın.</li>
- <li>Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak <code>star.png</code> kullanın.</li>
- <li>Başlık metninin resmin üzerine gelmediğinden ve ortalanmış olduğundan emin olun — bunları yapabilmek için önceki derslerde kullandığınız teknikleri kullanmanız gerekecektir.</li>
-</ul>
-
-<p>İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:</p>
-
-<p><img alt="Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars." src="https://mdn.mozillademos.org/files/16947/backgrounds-task2.png" style="height: 300px; width: 534px;"></p>
-
-<p>Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds2-download.html"> Kaynak kodunu </a>indirin.</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>"Flexbox düzen 1 beceri testi 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/the_box_model/index.html b/files/tr/öğren/css/css_yapi_taslari/the_box_model/index.html
deleted file mode 100644
index 016c021985..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/the_box_model/index.html
+++ /dev/null
@@ -1,367 +0,0 @@
----
-title: Kutu Modeli
-slug: Öğren/CSS/CSS_yapi_taslari/The_box_model
-tags:
-  - Başlangıç
-  - Beginner
-  - CSS
-  - Dolgu
-  - Eğitim
-  - Gorüntü
-  - Kenar payı
-  - Kutu Modeli
-  - Learn
-  - Sınır
-  - border
-  - box model
-  - display
-  - margin
-  - padding
-translation_of: Learn/CSS/Building_blocks/The_box_model
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
-
-<p>CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, <em>CSS Kutu Modeline</em> giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.</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 Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Blok_ve_satır_içi_kutular">Blok ve satır içi kutular</h2>
-
-<p>CSS'de genel olarak iki tür kutuya sahibiz — <strong>blok kutular</strong> ve <strong>satır içi kurular</strong>. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davranacağını ifade etmek için yapılır.</p>
-
-<p>Bir kutunun türü blok(<code>block</code>) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:</p>
-
-<ul>
- <li>Kutu yeni bir satıra geçer.</li>
- <li>Kutu, içinde bulunduğu satırın genişliği kadar uzar. Bu kutunun satırdaki mevcut alanın %100'ünü dolduracağı anlamına gelir.</li>
- <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.</li>
- <li>Dolgu (<code>padding</code>), kenar boşluğu (<code>margin</code>) ve kenarlık (<code>border</code>) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.</li>
-</ul>
-
-<p>Görüntü türünü satır içi olarak değiştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(<code>block</code>) olan öğelere örnektir.</p>
-
-<p>Eğer kutunun görüntüleme türü satır içi(<code>inline</code>) olacak şekilde tanımlanmışsa:</p>
-
-<ul>
- <li>Kutu yeni bir satıra geçmeyecektir.</li>
- <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.</li>
- <li>Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden <strong><u>olmayacaktır</u></strong>.</li>
- <li>Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak ve diğer satır içi kutuların kutudan uzaklaşmasına neden <strong><u>olacaktır</u></strong>.</li>
-</ul>
-
-<p>Bağlantılar için kullanılan <code>&lt;a&gt;</code>  öğesi, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> ve <code>&lt;strong&gt;</code> varsayılan tür olarak satır içi(<code>inline</code>) görüntülenecek öğelere örnektir.</p>
-
-<p>Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine <code>block</code> ve <code>inline</code> değerleri kullanılır.</p>
-
-<h2 id="Ayrıca_İç_ve_dış_görüntüleme_türleri">Ayrıca: İç ve dış görüntüleme türleri</h2>
-
-<p>Bu noktada <strong>iç</strong> ve <strong>dış</strong> gösterim türlerini de açıklamamız yerinde olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir <em>dış</em> gösterim türüne sahiptir.</p>
-
-<p>Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir <em>iç</em> gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler <strong><a href="/tr/docs/Learn/CSS/CSS_layout/Normal_Flow">normal aşkışta</a></strong> düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).</p>
-
-<p>Bu özellikler sayesinde, bir öğenin <code>display</code> niteliğine <code>flex</code> değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi <code>display: flex</code> şeklinde tanımlarsak, öğenin dış görünümü <code>block</code> olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü <code>flex</code> olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız <a href="/tr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> özelliklerinde belirtilen kurallara göre düzenlenir.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki <a href="/tr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Blok ve Satır İçi Düzen'e</a> bir göz at.</p>
-</div>
-
-<p>CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, <code>flex</code>'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin <code><a href="/tr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
-
-<p>Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi <em>normal akış</em> olarak anılır, çünkü başka bir talimat olmadan, kutularımız varsayılan blok veya satır içi değerlerine göre düzenlenirler.</p>
-
-<h2 id="Farklı_görüntüleme_türlerine_örnekler">Farklı görüntüleme türlerine örnekler</h2>
-
-<p>Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü <code>block</code> olan öğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.</p>
-
-<p>İkincisi, görüntüleme türü olarak <code>display: flex</code> tanımlanmış bir listemiz var. Bu, <code>ul</code> etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe kadar genişler.</p>
-
-<p>Bununda altında, içinde iki adet <code>&lt;span&gt;</code> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde <code>inline</code> türüne sahipler, içlerinden bir tanesini <code>.block</code> sınıfına dahil edip görüntü türünü <code>display: block</code> olarak tanımlıyoruz ve <code>inline</code> türüne sahip bir öğe <code>block</code> türüne sahip bir öğe gibi davranmaya başlıyor.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
-
-<p>Bir sonraki örnekte, <code>inline</code> görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <code>&lt;span&gt;</code> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.</p>
-
-<p>Bir de <code>&lt;ul&gt;</code> öğemiz var. Bu öğemisin görüntüleme türünü <code>display:inline-flex</code> tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.</p>
-
-<p>Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü <code>display: inline</code> olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değil de satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlarlar.</p>
-
-<p><strong>Değiştirin! sizde farklılıkları daha iyi görebilmek için <code>display: inline</code></strong> <strong>tanımı</strong><strong>nı <code>display: block</code> ve <code>display: inline-flex</code> tanımını da <code>display: flex</code> olarak değiştirin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
-
-<p>İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, <code>display</code> niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpajdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.</p>
-
-<p>Dersin geri kalanında, dış ekran türüne odaklanacağız.</p>
-
-<h2 id="CSS_kutu_modeli_nedir">CSS kutu modeli nedir?</h2>
-
-<p>CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.</p>
-
-<h3 id="Bir_kutunun_parçaları">Bir kutunun parçaları</h3>
-
-<p>Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:</p>
-
-<ul>
- <li><strong>İçerik(<em>Content</em>)</strong>: İçeriğin görüntülendiği alandır. {{cssxref("width")}} ve {{cssxref("height")}} gibi nitelikler kullanılarak boyutlandırılabilir.</li>
- <li><strong>Dolgu(<em>Padding</em>)</strong>: İçeriği saran bir boşluktur. boyutu {{cssxref("padding")}} ve ilişkili niteliklerle belirlenir.</li>
- <li><strong>Kenarlık(<em>Border</em>)</strong>: İçeriği ve dolguyu sarar. Boyutu ve stili {{cssxref("border")}} ve ilişkili niteliklerle belirlenir.</li>
- <li><strong>Kenar boşluğu(<em>Margin</em>)</strong>: İçeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına mesafe koyan en dış katmandır. {{cssxref("margin")}} ve ilişkili niteliklerle belirlenir.</li>
-</ul>
-
-<p>Aşağıdaki şema bu katmanları göstermektedir:</p>
-
-<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
-
-<h3 id="Standart_CSS_kutu_modeli">Standart CSS kutu modeli</h3>
-
-<p>Standart kutu modelinde, bir kutuya <code>width</code> ve <code>height</code> niteliklerine değer verirsen, bu <u><em>içeriğin</em></u> genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.</p>
-
-<p>Aşağıda bir kutunun modelini tanımlayan <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> niteliklerini CSS kodu bulunmakta:</p>
-
-<pre class="brush: css notranslate">.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-</pre>
-
-<p>Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.</p>
-
-<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.</p>
-</div>
-
-<h3 id="Alternatif_CSS_kutu_modeli">Alternatif CSS kutu modeli</h3>
-
-<p>Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, kutunun genişlik  ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanının genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)</p>
-
-<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
-
-<p>Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için  <code>box-sizing: border-box</code> tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  box-sizing: border-box;
-} </code></pre>
-
-<p>Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan <code>box-sizing</code> özelliğini <code>&lt;html&gt;</code> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmen için,<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a</a> bakın.</p>
-
-<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizması mevcut değildi.</p>
-</div>
-
-<h2 id="Kutu_modelleriyle_oynamak">Kutu modelleriyle oynamak</h2>
-
-<p>Aşağıda iki kutu görüyorsun. Bu kutular aynı <code>.box</code> sınıfına dahiller ve bu sınıf ikisinede aynı  <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.</p>
-
-<p><strong>İkinci kutunun boyutunu(<code>.alternate</code> sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
-
-<div class="blockIndicator note">
-<p><strong>Not</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">Burada</a>, bu görev için bir çözüm bulabilirsin..</p>
-</div>
-
-<h3 id="Kutu_modelini_görüntüleyebilmek_için_tarayıcı_DevToolsu_kullanın">Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın</h3>
-
-<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirme araçlarıyla(developer tools)</a> kutu modelini daha rahat anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin harika bir yoludur.</p>
-
-<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
-
-<h2 id="Kenar_boşluğu_dolgu_ve_kenarlıklar">Kenar boşluğu, dolgu ve kenarlıklar</h2>
-
-<p>Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler <strong>kısayollardır</strong> ve kutunun dört kenarını da aynı anda ayarlamana olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.</p>
-
-<p>Şimdi bu nitelikleri daha detaylı inceleyelim.</p>
-
-<h3 id="Kenar_boşluğumargin">Kenar boşluğu(margin)</h3>
-
-<p>Kenar boşluğu, kutunun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kutunun bir tarafına, negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.</p>
-
-<p>{{cssxref("margin")}} niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsin:</p>
-
-<ul>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
-</ul>
-
-<p><strong>Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
-
-<h4 id="Kenar_boşluğunun_daralması">Kenar boşluğunun daralması</h4>
-
-<p>Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer, sayısal değeri büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.</p>
-
-<p>Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta <code>margin-bottom: 50px</code> olarak tanımlanmış. İkinci paragraf ise <code>margin-top: 30px</code> olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan <strong>50px</strong> kadar boşluk oluşmuştur.</p>
-
-<p><strong><code>margin-top</code> niteliğine 0 değerini atayarakta bunu test edebilirsin. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan <code>bottom-margin: 50px</code> değeri korunur. Eğer <code>margin-top: -10px</code> olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
-
-<p>Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, <a href="/tr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">kenar boşluğu daraltmayla</a> ilgili sayfaya bakın. Şimdilik hatırlaman gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, muhtemelen olan budur.</p>
-
-<div class="blockIndicator note">
-<p><strong>Not:</strong> Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.</p>
-</div>
-
-<h3 id="Kenarlık">Kenarlık</h3>
-
-<p>Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun <code>width</code> ve <code>heigh</code> niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmını küçültür.</p>
-
-<p>Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğin stil, renk ve genişlik özellikleri vardır.</p>
-
-<p>{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.</p>
-
-<p>Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:</p>
-
-<ul>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-left")}}</li>
-</ul>
-
-<p>Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:</p>
-
-<ul>
- <li>{{cssxref("border-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-color")}}</li>
-</ul>
-
-<p>Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:</p>
-
-<ul>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
-</ul>
-
-<p><strong>Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğin farklı kenarlık stilleri hakkında bilgi verir.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
-
-<h3 id="Dolgu">Dolgu</h3>
-
-<p>Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğene uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.</p>
-
-<p>{{cssxref("padding")}} niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.</p>
-
-<ul>
- <li>{{cssxref("padding-top")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
-</ul>
-
-<p><strong>Aşağıdaki örnekte bulunan <code>.box</code> sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebilirsin.</strong></p>
-
-<p><strong>Ayrıca <code>.container</code> sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılmasını sağlar.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
-
-<h2 id="Kutu_modeli_ve_satır_içi_kutular">Kutu modeli ve satır içi kutular</h2>
-
-<p>Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <code>&lt;span&gt;</code> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.</p>
-
-<p>Aşağıdaki örnekte, paragraf içerisinde bir adet <code>&lt;span&gt;</code> var. Bu satır içi kutuya <code>width</code><font><font>,<span> </span></font></font><code>height</code><font><font>,<span> </span></font></font><code>margin</code><font><font>,<span> </span></font></font><code>border</code><font><font>, ve<span> </span></font></font><code>padding</code> uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsin. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
-
-<div class="blockIndicator note">
-<p>Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.</p>
-</div>
-
-<h2 id="display_inline-block_kullanımı">display: inline-block kullanımı</h2>
-
-<p><code>display</code> niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.</p>
-
-<p><code>display: inline-block</code> bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:</p>
-
-<ul>
- <li><code>width</code> ve <code>height</code> nitelikleri uygulanır.</li>
- <li><code>padding</code>, <code>margin</code>, ve <code>border</code> nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.</li>
-</ul>
-
-<p>Bunlarla birlikte, yeni bir satıra bölünmez ve sadece,  <code>width</code> ve <code>height</code> nitelikleri belirtilirse içeriğinden daha büyük hale gelir.</p>
-
-<p><strong>Bu sonraki örnekte, <code>&lt;span&gt;</code> öğesine eklediğimiz <code>display: inline-block</code>  komutunu <code>display: block</code> olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
-
-<p>Bunun yararının görülebileceği bir örnek vermek gerekirse; <code>padding</code> uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <code>&lt;a&gt;</code> öğesi <code>&lt;span&gt;</code> gibi bir satır içi öğesidir ve <code>padding</code> istediğimiz gibi davranmayacaktır. Bunun için, <code>display: inline-block</code> tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.</p>
-
-<p>Bunu gezinme çubuklarında oldukça sık görüyorsun. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <code>&lt;a&gt;</code> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğin gibi <u>dolgu</u>, <code>&lt;ul&gt;</code> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <code>&lt;a&gt;</code>'nın bir satır içi öğe olmasıdır.</p>
-
-<p><strong><code>.links-list a</code></strong> <strong>seçicisine <code>display: inline-block</code> kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
-
-<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>
-
-<p>Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Becerilerini test et: Kutu Modeli</a>.</p>
-
-<h2 id="Özet">Özet</h2>
-
-<p>Kutu modeli hakkında bilmen gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığında kafan karışırsa, bu derse geri dönmek isteyebilirisn.</p>
-
-<p>Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">arka planların ve kenarlıkların</a> nasıl kullanılabileceğine bir göz atacağız.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "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 öğeler</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 öğelerin 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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/values_and_units/index.html b/files/tr/öğren/css/css_yapi_taslari/values_and_units/index.html
deleted file mode 100644
index 9d42ba1317..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/values_and_units/index.html
+++ /dev/null
@@ -1,414 +0,0 @@
----
-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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/values_tasks/index.html b/files/tr/öğren/css/css_yapi_taslari/values_tasks/index.html
deleted file mode 100644
index 138fd5a290..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/values_tasks/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-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>
diff --git a/files/tr/öğren/css/css_yapi_taslari/writing_modes_tasks/index.html b/files/tr/öğren/css/css_yapi_taslari/writing_modes_tasks/index.html
deleted file mode 100644
index a28339307f..0000000000
--- a/files/tr/öğren/css/css_yapi_taslari/writing_modes_tasks/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler'
-slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks
-tags:
-  - Başlangıç
-  - Beginner
-  - CSS
-translation_of: Learn/CSS/Building_blocks/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>