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
|
---
title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)'
slug: Web/CSS
tags:
- CSS
- CSS3
- HTML
- Referans
- Stil
- Stil Sayfası
- Tasarım
- Yerleşim
translation_of: Web/CSS
---
<p>{{CSSRef}}</p>
<p><span class="seoSummary">Bir <a href="/tr/docs/DOM/stylesheet">stylesheet</a> (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan <strong>Cascading Style Sheets</strong>, <a href="/tr/docs/HTML" title="The HyperText Mark-up Language">HTML</a> ya da <a href="https://developer.mozilla.org/tr/docs/XML">XML</a> ile yazılmış (<a href="https://developer.mozilla.org/tr/docs/Web/SVG">SVG </a>ya da <a href="https://developer.mozilla.org/tr/docs/Glossary/XHTML">XHTML</a> gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS, yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. </span></p>
<p><strong>CSS</strong>, <em>open web'</em>in temel dillerinden biridir ve <a href="http://w3.org/Style/CSS/#specs">W3C standartlarına</a> sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.</p>
<p>CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, <a href="https://www.w3.org/Style/CSS/current-work">önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak</a> daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak <a href="https://www.w3.org/TR/css/">CSS spesifikasyonunun en son kararlı sürümünün</a> anlık görüntüsünü alıyor..</p>
<section id="sect1">
<ul class="card-grid">
<li><span>CSS Referansı</span>
<p>Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir <a href="/tr/docs/Web/CSS/Reference">referans</a>.</p>
</li>
<li><span>CSS Dersi</span>
<p>Tüm yeni başlayanlara yardım için bir <a href="/tr/docs/Web/Guide/CSS/Getting_started" title="tr/docs/CSS/Getting_Started">adım adım giriş </a>kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.</p>
</li>
<li><span>CSS3 Örnekleri</span>
<p>CSS teknolojilerini bir aksiyon içinde gösteren bir <a href="/tr/demos/tag/tech:css3" title="https://developer.mozilla.org/tr/demos/tag/tech:css3">demo kolleksiyonu</a> ki yaratıcılık için destekleyicidir.</p>
</li>
</ul>
<div class="in-page-callout webdev">
<h3 id="Bir_front-endArayüz_geliştiricisimi_olmak_istiyorsunuz">Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?</h3>
<p>Hedefinize ulaşabilmeniz 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">Buradan Başlayın</a></p>
</div>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Eğitim_Aşamaları">Eğitim Aşamaları</h2>
<p>Bu <a href="/tr/docs/Learn/CSS">CSS Eğitimi</a> CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.</p>
<dl>
<dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'ye ilk adım</a></dt>
<dd>CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin 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 kullanılır.</dd>
<dd>Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir. </dd>
<dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a></dt>
<dd>
<p class="summary">Bu adım <a href="/tr/docs/Learn/CSS/First_steps">ilk adımın</a> kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz 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ını inceler.</p>
<p class="summary">Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak 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 özgül kurallara geçmeden önce tüm temel kavramları anlamanıza 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ız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.</dd>
<dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt>
<dd>Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada 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 teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.</dd>
<dt><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek için CSS kullanın</a></dt>
<dd>Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" id="Kaynaklar">Kaynaklar</h2>
<ul>
<li><a href="/tr/docs/Web/CSS/Reference">CSS kaynağı</a>: Deneyimli Web geliştiricileri için, CSS'sin her özelliğini ve konseptini açıklayan kapsamlı bir kaynak.</li>
<li>CSS temel kavramları:
<ul>
<li><a href="/tr/docs/Web/CSS/Syntax">Dilin sözdizimi ve biçimleri</a></li>
<li><a href="/tr/docs/Web/CSS/Specificity">Özgüllük</a>, <a href="/tr/docs/Web/CSS/Inheritance">kalıtım</a> ve <a href="/tr/docs/Web/CSS/Cascade">Cascade</a></li>
<li><a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS birim ve değerleri</a></li>
<li><a href="/tr/docs/Web/CSS/box_model">Kutu modelelri</a> ve <a href="/tr/docs/Web/CSS/margin_collapsing">Kenar boşluğu</a></li>
<li>The <a href="/tr/docs/Web/CSS/All_About_The_Containing_Block">containing blok kapsamları</a></li>
<li><a href="/tr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Yığınlar</a> ve <a href="/tr/docs/Web/CSS/block_formatting_context" title="block formatting context">blok biçimlendirme</a> bağlamları</li>
<li><a href="/tr/docs/Web/CSS/initial_value">İlklendirilen</a>, <a href="/tr/docs/Web/CSS/computed_value">hesaplanan</a>, <a href="/tr/docs/Web/CSS/used_value">kullanılan</a>, ve <a href="/tr/docs/Web/CSS/actual_value">gerçek</a> değeler</li>
<li><a href="/tr/docs/Web/CSS/Shorthand_properties">CSS kısaltma özellikleri</a></li>
<li><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box özellikleri</a></li>
<li><a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid özellikleri</a></li>
<li><a href="/tr/docs/Web/CSS/Media_Queries">Medya sorguları</a></li>
<li><a href="/tr/docs/Web/CSS/animation">Animasyon</a></li>
</ul>
</li>
</ul>
<h2 class="Tools" id="Tarifler_kitabı">Tarifler kitabı</h2>
<p><a href="/tr/docs/Web/CSS/Layout_cookbook">CSS düzen tarifleri kitabı</a> sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.</p>
<h2 class="Tools" id="CSS_geliştirme_araçları">CSS geliştirme araçları</h2>
<ul>
<li>CSS'sinizin gerçeli olup olmadığını kontrol etmek için <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>'si kullanabilirsiniz. Bu, paha biçilemez bir hata ayıklama aracıdır.</li>
<li><a href="/tr/docs/Tools">Firefox Developer Tools</a>, <a href="/tr/docs/Tools/Page_Inspector">Denetçi</a> ve <a href="/tr/docs/Tools/Style_Editor">Stil Düzenleyici</a> araçlarıyla bir sayfanın canlı CSS'sini görüntülemenizi ve düzenlemenizi sağlar.</li>
<li>Firefox için <a class="link-https" href="https://addons.mozilla.org/tr/firefox/addon/web-developer/">Web Developer uzantısı</a>, izlenen sitelerde canlı CSS'si izlemenizi ve düzenlemenizi sağlar</li>
<li>Web topluluğu, kullanmanız için başka çeşitli <a href="/tr/docs/Web/CSS/Tools">CSS araçlarını</a>'da oluşturdu.</li>
</ul>
<h2 id="Meta_bugs">Meta bugs</h2>
<ul>
<li>Firefox: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>
<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2>
<ul>
<li><a href="/tr/docs/Web/Demos_of_open_web_technologies#CSS">CSS demoları</a>: En yeni CSS teknolojileri ile oluşturulmuş örnekleri keşfederek kendinize destek elde edin</li>
<li>CSS'nin sıklıkla uygulandığı web dilleri: <a href="/tr/docs/Web/HTML">HTML</a>, <a href="/tr/docs/Web/SVG">SVG</a>, <a href="/tr/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}}, and <a href="/tr/docs/XML_introduction">XML</a>.</li>
<li>CSS'den kapsamlı bir şekilde yararlanan Mozilla teknolojileri: <a href="/tr/docs/Mozilla/Firefox">Firefox</a>, ve <a href="/tr/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/tr/docs/Mozilla/Add-ons">euzantıları</a> ve <a href="/tr/docs/Mozilla/Add-ons/Themes">temaları</a>.</li>
<li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla e-posta listesi</a></li>
<li><a href="https://stackoverflow.com/questions/tagged/css">CSS hakkındaki Stack Overflow soruları</a></li>
</ul>
|
