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
|
---
title: CSS kullanarak HTML şekillendirmeyi öğrenin
slug: Öğren/CSS
tags:
- Başlangıç
- Beginner
- CSS
- CodingScripting
- Debugging
- Hata Ayıklama
- Landing
- Scrip Kodlama
- Stil
- Style
- Tema
- Topic
- başlık
- length
- specificity
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>
<p class="summary">Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya {{glossary("CSS")}} — {{glossary("HTML")}}'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.</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>Hedefine ulaşabilmen için ihtiyanıcın 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şla</a></p>
</div>
<h2 id="Önkoşullar">Önkoşullar</h2>
<p>CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için <a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:</p>
<ul>
<li><a href="/tr/docs/Learn/CSS/Introduction_to_CSS">CSS'ye Giriş</a> kısmı ile CSS başlangıç</li>
<li>Daha gelişmiş <a href="/tr/docs/Learn/HTML#Modules">HTML modülleri</a></li>
<li><a href="/tr/docs/Learn/JavaScript">JavaScript</a>, ve web sayfalarına dinamik işlevsellik eklemek için nasıl kullanılacağını</li>
</ul>
<p>HTML'nin temellerini anladıktan sonra, iki konu arasında gidip gelerek aynı anda HTML ve CSS öğrenmeni öneririm. Bunun nedeni, HTML'eye CSS'i uyguladığın da, öğrenmesi çok daha ilginç ve daha eğlenceli olmasıdır. Ayrıca HTML'yi bilmeden CSS'yi gerçenten öğrenemezsin.</p>
<p>Bu konuya başlamadan önce, bilgisayarları kullanma ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın. <a href="/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli yazılımların kurulumu</a> bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve <a href="/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışma</a> bölümünde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olman gerekir — her ikiside <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitiminin bir parçasıdır.</p>
<p>Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitimini adım adım çalışmanı öneririz. Bununla birlikte <a href="/tr/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS'in temelleri</a> dersinde anlatılanların çoğu, <a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a> bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.</p>
<h2 id="Bölümler">Bölümler</h2>
<p>Bu konunun daha iyi anlaşılması için öğrenmeye aşağıda belirtilen sıra ile ilerlenmesi gerekmektedir. Hakkında bilgi sahibi olduğunu düşündüğün bölümleri atlama, Sırasıyla ilerleyerek bilgilerinide pekiştirmiş olursun.</p>
<dl>
<dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a></dt>
<dd>CSS (Cascading Style Sheets) web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn. içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için. Bu kısım, CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML'ye stil eklemek için nasıl kullanacağın hakkında temel bilgiler verecektir.</dd>
<dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yap taşları</a></dt>
<dd>
<p class="summary">Bu bölüm <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a>'ın kaldığı yerden devam ediyor- artık dile ve sözdizimine aşina oldun ve onu kullanma konusunda bazı temel bilgiler edindin, biraz daha derine dalmanın vakti geldi. Bu bölümde, <a class="external external-icon" title="Cascade">art arda denetim</a> ve mirası, tüm seçici türlerini, birimleri, boyutlandırmayı, arka planların ve kenarlıkların stilini belirlemeyi, hata ayıklamayi ve çok daha fazlasını inciler</p>
<p class="summary">Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.</p>
</dd>
<dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt>
<dd>CSS dilinin temelleri ele alındığında, odaklanman gereken bir sonraki CSS konusu, CSS ile yapacağın en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipini, kalınğı, italiği, satır ve harf aralığını, alt gölgeler ve diğer metin özelliklerini ayarlama da dahil olmak üzere metin stilinin temellerine bakıyoruz. Sayfana özel yazı tiplerini uygulamaya; listeleri ve bağlantıları şekillendirmeye bakarak bu bölümü tamamlıyoruz.</dd>
<dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt>
<dd>Bu kısma kadar CSS'in temellerini, metnin stilini ve içeriğinin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğini inceledik. Şimdi, kutularını görüntü alanına ve bir birlerine göre yerleşimlerini düzenlemeye bakma zamanı. CSS düzenine derinlemesine dalarak; farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına, ayrıca hala bilmek isteyebileceğin bazı eski tekniklerin ön koşullarını ele alacağız.</dd>
</dl>
<h2 id="Yaygın_sorunları_CSS_ile_çözme">Yaygın sorunları CSS ile çözme</h2>
<p><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek</a> için CSS kullanma; bir web sayfası oluştururken çok yaygın sorunları çözmek için CSS'in nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</p>
<p>Başlangıçtan itibaren, renkleri öncelikle HTML öğelerine ve arka planlarına uygula, öğelerin boyutunu, şeklini ve konumunu değiştirin ve öğeler üzerinde kenarlık ekle ve bunları tanımla. CSS'in temellerini sağlam bir şekilde anladıktan sonra yapamayacağın pek bir şey yoktur. CSS öğrenmenin en iyi yanlarından biri, temelleri öğrendikten sonra, aslında nasıl yapılacağını henüz bilmesen bile, genellikle neyin yapılabileceği ve yapılamayacağı konusunda oldukça iyi bir öngörüye sahip olmandır.</p>
<h2 id="CSS_tuhaf">"CSS tuhaf"</h2>
<p>CSS, karşılaşacağın çoğu programlama dilinden ve tasarım aracından biraz farklı çalışır. Aşağıdaki videoda, Miriam Suzanne CSS hakkında yararlı bir kaç açıklamada bulunuyor.</p>
<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
<h2 id="Göz_at">Göz at</h2>
<dl>
<dt><a href="/tr/docs/Web/CSS">MDN'de CSS</a></dt>
<dd>CSS dilinin tüm özellikleri içn ayrıntılı kaynak belgeleri bulacağın MDN, CSS eğitimine ana giriş noktasıdır. Burası ziyaret etmek için harika bir yer.</dd>
</dl>
|
