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
|
---
title: CSS yapı taşları
slug: Learn/CSS/Building_blocks
tags:
- Başlangıç
- Beginner
- CSS
- Learn
- building blocks
- kutu oluşturmak
- Öğrenme
translation_of: Learn/CSS/Building_blocks
original_slug: Öğren/CSS/CSS_yapi_taslari
---
<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>
|
