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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: CSS Nedir?
slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir
tags:
- Beginner
- CSS
- CSS Giriş
- Introduction to CSS
- Learn
- Modules
- Modüller
- Ogrenim
- Ozellikler
- Sozdizimi
- Specifications
- Syntax
translation_of: Learn/CSS/First_steps/What_is_CSS
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
<p class="summary"><strong>{{Glossary("CSS")}}</strong>(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Ön Koşullar:</th>
<td><a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow noopener">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; <a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow noopener">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, <a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.</td>
</tr>
<tr>
<th scope="row">Amaç:</th>
<td>CSS'in ne olduğunu öğrenmek</td>
</tr>
</tbody>
</table>
<p><a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar, sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.</p>
<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
<p>Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.</p>
<p>Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.</p>
<p>{{EmbedYouTube("spK_S0HfzFw")}}</p>
<h2 id="CSS_ne_içindir">CSS ne içindir?</h2>
<p>Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.</p>
<p>Bir <strong>belge</strong> genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/HTML">HTML</a> en yaygın biçimlendirme dilidir, ancak <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/SVG">SVG</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/XML">XML</a> gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.</p>
<p>Bir dökümanı bir kullanıcıya <strong>sunmak</strong>, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Web_Taray%C4%B1c%C4%B1s%C4%B1">Tarayıcılar</a>, sevdiğim <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Mozilla_Firefox">Firefox</a>, <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Google_Chrome">Chrome</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Microsoft_Edge">Edge</a>, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.</p>
<div class="blockIndicator note">
<p><strong>Note</strong>: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.</p>
</div>
<p>CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/color_value" rel="nofollow">rengi</a> ve <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-size">boyutunu</a> değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Layout_cookbook/Column_layouts" rel="nofollow">tek bir metin sütununu bir düzene dönüştürmek</a>. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Animations" rel="nofollow">Animasyon</a> gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.</p>
<h2 id="CSS_sözdizimi">CSS sözdizimi</h2>
<p>CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".</p>
<p>Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:</p>
<pre class="brush: css notranslate">h1 {
color: red;
font-size: 5em;
}</pre>
<p>Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini <em>seçer</em>. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.</p>
<p>Daha sonra bir dizi süslü parantezimiz <code>{ }</code>var. Bunların içinde, <strong>nitelik</strong> ve <strong>değer</strong> çifti biçimini alan bir veya daha fazla <strong>beyan</strong> olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.</p>
<p>İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen <code>color</code> niteliğine sahibiz. Ayrıca <code>font-size</code> niteliğinede sahibiz. Bu nitelik, çeşitli <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages" rel="nofollow">boyut birimlerini</a> değer olarak alabilir. Fakat <code>color</code> niteliğine biri uzunluk birimi atamana izin verilmez.</p>
<p>Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.</p>
<pre class="brush: css notranslate">h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}</pre>
<p>Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.</p>
<div class="blockIndicator note">
<p><strong>Not</strong>: MDN <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Reference">CSS referans</a>'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn <em>css-feature-name</em>" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!</p>
</div>
<h2 id="CSS_modülleri">CSS modülleri</h2>
<p>CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Backgrounds_and_Borders" rel="nofollow">Arka Palanlar ve Kenarlıklar</a> modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).</p>
<p>Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.</p>
<p>Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak <code><a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/background-color">background-color</a></code> ve <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/border-color" rel="nofollow">border-color</a></code> nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!</p>
<h3 id="CSS_özellikleri">CSS özellikleri</h3>
<p>Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), <span class="ILfuVd"><span class="hgKElc">Standardizasyon</span></span> konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.</p>
<p>CSS'de farklı değildir — W3C içindeki <a class="external external-icon" href="https://www.w3.org/Style/CSS/" rel="noopener">CSS Working Group</a> adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, <em>davetli uzmanlar</em> olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.</p>
<p>Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.</p>
<p>CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.</p>
<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2>
<p>CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS Nasıl Çalışır</a> dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.</p>
<p>Aşağıda, CSS <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-family" rel="nofollow">font-family</a></code> niteliği için destek tablosu yer almaktadır.</p>
<p>{{Compat("css.properties.font-family")}}</p>
<h2 id="Sırada_ne_var">Sırada ne var?</h2>
<p>Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS ile Başlarken</a> bölümüne geçebiliriz.</p>
<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
<h2 id="Bu_kısımda">Bu kısımda</h2>
<ol>
<li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/What_is_CSS" rel="nofollow">CSS nedir?</a></li>
<li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS'ye başlarken</a></li>
<li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured" rel="nofollow">CSS nasıl yapılandırılır</a></li>
<li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS nasıl çalışır</a></li>
<li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge" rel="nofollow">Öğrendiklerimizi uygulamak</a></li>
</ol>
|
