1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: Öğrendiklerini uygula
slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın
tags:
- Acemi
- Başlangıç
- Beginner
- CSS
- Eğitim
- Learn
- Playground
- oyun alanı
translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
---
<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<p class="summary">Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Ön Koşul:</th>
<td>Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış ve HTML temellerini anlamış olman gerekir (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>).</td>
</tr>
<tr>
<th scope="row">Amaç:</th>
<td>Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.</td>
</tr>
</tbody>
</table>
<h2 id="Başlangıç_noktası">Başlangıç noktası</h2>
<p>Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">örnek dosyayı </a>indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ve <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
<div class="blockIndicator note">
<p><strong>Not</strong>: Takıldığın noktalarda bizden yardım isteyebilirsin — <a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">Değerlendirme ve daha fazlası</a> bölümüne bakabilirsin.</p>
</div>
<h2 id="CSS_ile_çalışmak">CSS ile çalışmak</h2>
<p>Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.</p>
<ul>
<li>{{cssxref("font-family")}}</li>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("border-bottom")}}</li>
<li>{{cssxref("font-weight")}}</li>
<li>{{cssxref("font-size")}}</li>
<li>{{cssxref("text-decoration")}}</li>
</ul>
<p>Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.</p>
<p>Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.</p>
<ol>
<li>CSS <code>color</code> niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(<code>hotpink)</code> yap.</li>
<li>Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(<code>dotted</code>) çizgi atın ve rengini mor(<code>purple</code>) yap.</li>
<li>2. düzey başlığı italik yap.</li>
<li><code>ul</code> etikemizin arka plan renk {{cssxref("background-color")}} değerini #eeeeee yap ve ayrıca mor(<code>purple</code>) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için <code>paddin</code> niteliğine kullan.</li>
<li>Linklerin üzerine gelindiğinde renginin yeşil(<code>green</code>) olmasını sağla.</li>
</ol>
<p>Çıktının resimdeki gibi gözükmesi gerekmektedir.</p>
<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
<p><a href="/tr/docs/Web/CSS/Reference">MDN CSS reference</a> safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!</p>
<p>Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2>
<p>Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:</p>
<ol>
<li>Çalışmanı <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, veya <a href="https://glitch.com/" rel="noopener">Glitch</a> gibi çevrimiçi bir düzenleyiciye kaydet.</li>
<li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler:
<ul>
<li>"CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.</li>
<li>Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.</li>
<li>Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.</li>
<li>Yardım istediğin konunun <em><u>sorusunu</u> </em>içeren sayfanın bağlantısı.</li>
</ul>
</li>
</ol>
<h2 id="Sıradaki_ne">Sıradaki ne?</h2>
<p>Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan <a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşlarında</a>, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.</p>
<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<h2 id="Bu_ünitede">Bu ünitede</h2>
<ol>
<li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir</a></li>
<li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
<li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
<li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
<li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li>
</ol>
|
