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
|
---
title: CSS layout
slug: Öğren/CSS/CSS_layout
tags:
- Beginner
- CSS
- Floating
- Grids
- Guide
- Landing
- Layout
- Learn
- Module
- Multiple column
- NeedsTranslation
- Positioning
- TopicStub
- flexbox
- float
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>
<p class="summary">Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.</p>
<div class="in-page-callout webdev">
<h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end) geliştiricisi mi olmak istiyorsun?</h3>
<p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başlayın</a></p>
</div>
<h2 id="Ön_koşullar">Ön koşullar</h2>
<p>Bu üniteye başlamdan önce şunları yapmalısınız:</p>
<ol>
<li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.</li>
<li><a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a> bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.</li>
<li><a href="/tr/docs/Öğren/CSS/Styling_boxes">Kutuları şekillendirme</a> hakkında bilgi sahibi olun.</li>
</ol>
<div class="note">
<p><strong>Not</strong>: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.</p>
</div>
<h2 id="Dersler">Dersler</h2>
<p>Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.</p>
<dl>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Introduction">CSS mizanpajına giriş</a></dt>
<dd>bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı {{cssxref("display")}} nitelik değerleri gibi — özetleyecek ve bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Normal_Flow">Normal akış(Normal Flow)</a></dt>
<dd>Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini açıklayacağız.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox">Esnek kutular (Flexbox)</a></dt>
<dd><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için <a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox_skills">flexbox becerilerinizi test</a> edebilirsiniz.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Grids">Izgaralar(Grids)</a></dt>
<dd>CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_layout/Grid_skills">ızgara(grid) becerilerinizi test</a> edecektir.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Floats">Yüzen nesneler (Floats)</a></dt>
<dd>Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan {{cssxref("float")}} niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Positioning">Konumlandırma(Positioning)</a></dt>
<dd>Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı {{cssxref("position")}} değerlerinin nasıl kullanılacağını açıklamaktadır.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Multiple-column_Layout">Birden çok sütun düzeni</a></dt>
<dd>Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Responsive_Design">Duyarlı tasarım</a></dt>
<dd>Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Media_queries">Acemiler için medya sorguları klavuzu</a></dt>
<dd><strong>CSS Medya Sorugusu</strong> size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Legacy_Layout_Methods">Eski düzen yönetmleri</a></dt>
<dd>Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Supporting_Older_Browsers">Eski tarayıcıları desteklemek</a></dt>
<dd>Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.</dd>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Fundamental_Layout_Comprehension">Değerlendirme: Temel düzeni anlama</a></dt>
<dd>Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.</dd>
</dl>
<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
<dl>
<dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Practical_positioning_examples">Pratik konumlandırma örnekleri</a></dt>
<dd>Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.</dd>
</dl>
|
