From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../ogrendiklerinizi_uygulay\304\261n/index.html" | 105 +++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" (limited to 'files/tr/öğren/css/ilk_adimlar/ogrendiklerinizi_uygulayın') diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" new file mode 100644 index 0000000000..3282953c36 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" @@ -0,0 +1,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 +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

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.

+ + + + + + + + + + + + +
Ön Koşul:Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (HTML'ye Giriş).
Amaç:Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.
+ +

Başlangıç noktası

+ +

Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için örnek dosyayı 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: CodePen, jsFiddle, ve Glitch.

+ +
+

Not: Takıldığın noktalarda bizden yardım isteyebilirsin — Değerlendirme ve daha fazlası bölümüne bakabilirsin.

+
+ +

CSS ile çalışmak

+ +

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.

+ + + +

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.

+ +

Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.

+ +
    +
  1. CSS color niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(hotpink) yap.
    2. +
  2. Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(dotted) çizgi atın ve rengini mor(purple) yap.
    3. +
  3. 2. düzey başlığı italik yap.
    4. +
  4. ul etikemizin arka plan renk {{cssxref("background-color")}}  değerini #eeeeee yap ve ayrıca mor(purple) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için paddin niteliğine kullan.
    5. +
  5. Linklerin üzerine gelindiğinde renginin yeşil(green) olmasını sağla.
    6. +
+ +

Çıktının resimdeki gibi gözükmesi gerekmektedir.

+ +

Screenshot of how the example should look after completing the assessment.

+ +

MDN CSS reference safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!

+ +

Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Değerlendirme ve daha fazlası

+ +

Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:

+ +
    +
  1. Çalışmanı CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir düzenleyiciye kaydet.
    2. +
  2. MDN Discourse forum Learning category sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler: +
      +
    • "CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.
      • +
    • 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.
      • +
    • 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.
      • +
    • Yardım istediğin konunun sorusunu içeren sayfanın bağlantısı.
      • +
    +
    3. +
+ +

Sıradaki ne?

+ +

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 CSS'in yapı taşlarında, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Bu ünitede

+ +
    +
  1. CSS nedir
    2. +
  2. CSS'e başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır
    5. +
  5. Öğrendiklerini uygulama
    6. +
-- cgit v1.2.3-54-g00ecf