path: root/files/tr/learn/css/first_steps/getting_started/index.html

---
title: CSS'e başlarken
slug: Öğren/CSS/Ilk_adimlar/Getting_started
tags:
  - Acemi
  - Beginner
  - CSS
  - Classes
  - Durum
  - Elements
  - Example
  - Learn
  - Ogeler
  - Ornekler
  - Selectors
  - Sozdizimi
  - Syntax
  - Sınıflar
  - oğrenin
  - seçiciler
  - state
translation_of: Learn/CSS/First_steps/Getting_started
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>

<p class="summary">Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Ön koşullar:</th>
   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele)</td>
  </tr>
  <tr>
   <th scope="row">Amaç:</th>
   <td>Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.</td>
  </tr>
 </tbody>
</table>

<h2 id="HTML_ile_başlayalım">HTML ile başlayalım</h2>

<p>Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha iyi olacaktır). Aşağıdaki kodu dosya adı <code>index.html</code> olacak şekilde bir klasöre kaydedin.</p>

<pre class="brush: html notranslate">&lt;!doctype html&gt;
&lt;html lang="tr"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;CSS'ye başlarken&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;h1&gt;Ben birinci seviye bir başlığım&lt;/h1&gt;

    &lt;p&gt;Bu bir paragraf metnidir. Metinde bir &lt;span&gt;span etiketi&lt;/span&gt;
ve ayrıca bir &lt;a href="http://example.com"&gt;bağlantı&lt;/a&gt; var.&lt;/p&gt;

    &lt;p&gt;Bu ikinci paragraftır. &lt;em&gt;vurgulanan&lt;/em&gt; bir metin içerir.&lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;Öğe bir&lt;/li&gt;
        &lt;li&gt;Öğe iki&lt;/li&gt;
        &lt;li&gt;Öğe &lt;em&gt;üç&lt;/em&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Not</strong>: Bunu bir cihazda veya kolayca dosya oluşturamadığın bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.</p>
</div>

<h2 id="Belgene_CSS_eklemek">Belgene CSS eklemek</h2>

<p>Yapman gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağın bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — <em>CSS'i belgemizin başından bağlamak.</em></p>

<p>HTML belgenle aynı klasörde adı <code>styles.css</code> bir dosya oluşturun. <code>.css</code> dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.</p>

<p><code>index.html</code> belgesindeki {{htmlelement("head")}} etiketinin içinde <code>styles.css</code> dosyasına bağlantı oluşturmak için:</p>

<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>

<p>Bu {{htmlelement("link")}} etiketi tarayıcıya,  <code>rel</code> niteliği ile bu dosyanın bir stil sayfası olduğunu ve <code>href</code> niteliğiylede dosyanın bulunduğu konumu söyler. <code>styles.css</code> dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.</p>

<pre class="brush: css notranslate">h1 {
  color: red;
}</pre>

<p>HTML ve CSS dosyalarını kaydedin ve <code>index.html</code> dosyasını bir web tarayıcısında yükle. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladın. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.</p>

<p><code>styles.css</code> yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyiciyi kullanabilirsin. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk paneldeki CSS'i HTML belgesine bağlıymış gibi davranır.</p>

<h2 id="HTML_öğelerini_şekillendirme">HTML öğelerini şekillendirme</h2>

<p>Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir <em>öğe seçiciyle</em> yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için <code>p</code> seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:</p>

<pre class="brush: css notranslate">p {
  color: green;
}</pre>

<p>seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:</p>

<pre class="brush: css notranslate">p, li {
    color: green;
}</pre>

<p>Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>

<h2 id="Öğelerin_varsayılan_davranışlarını_değiştirme">Öğelerin varsayılan davranışlarını değiştirme</h2>

<p>İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.</p>

<p>Ancak, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <code>&lt;ul&gt;</code> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.</p>

<pre class="brush: css notranslate">li {
  list-style-type: none;
}</pre>

<p>Örneği CSS'e ekleme.</p>

<p><code>list-style-type</code> niteliğinin desteklediği değerleri görmek için MDN içerisindeki <code><a href="/tr/docs/Web/CSS/list-style-type">list-style-type</a></code> sayfasına bakabilirsin. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksın ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. </p>

<p>Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — <code>square</code> değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.</p>

<h2 id="Bir_sınıf_eklemek">Bir sınıf eklemek</h2>

<p>Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.</p>

<p>HTML belgende, ikinci liste(<code>&lt;ul&gt;</code>) öğeni bir <a href="/tr/docs/Web/HTML/Global_attributes/class">sınıf etiketi</a> ekle. Listeni oluşturan kodlar artık böyle gözükmeli:</p>

<pre class="brush: html; highlight[3] notranslate">&lt;ul&gt;
  &lt;li&gt;Öğe bir&lt;/li&gt;
  &lt;li class="special"&gt;Öğe iki&lt;/li&gt;
  &lt;li&gt;Öğe &lt;em&gt;üç&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>CSS'nde nokta ile başlayan <code>special</code> seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:</p>

<pre class="brush: css notranslate">.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>Sonucun ne olduğunu görmek için kaydedin ve yenile.</p>

<p><code>special</code> sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <code>&lt;span&gt;</code> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin <code>class</code> niteliğine <code>special</code> değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.</p>

<p>Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:</p>

<pre class="brush: css notranslate">li.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>Bu sözdizimi, "special sınıfana dahil bir <code>li</code> öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <code>&lt;span&gt;</code> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:</p>

<pre class="brush: css notranslate">li.special,
span.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.</p>

<h2 id="Belgedeki_konumlarına_göre_öğeleri_şekillendirme">Belgedeki konumlarına göre öğeleri şekillendirme</h2>

<p>Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <code>&lt;em&gt;</code> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <code>&lt;li&gt;</code> öğesinin içerisine yerleştirilen <code>&lt;em&gt;</code> öğesini seçmek için, diğer  seçiciyle arasına <strong>boşluk karakterini</strong> koyarak, <code>soy birleştirici</code> adı verilen bir seçici kullanabilirim.</p>

<p>Aşağıdaki kuralı stil sayfana ekle.</p>

<pre class="brush: css notranslate">li em {
  color: rebeccapurple;
}</pre>

<p>Bu seçici <code>&lt;li&gt;</code> içindeki (soyundan gelen) <code>&lt;em&gt;</code> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <code>&lt;em&gt;</code> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. </p>

<p>Denemek isteyebileceğin başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektir. Bunu yapmak için seçiciler arasına bir <code>+</code> (<strong>Komşu kardeş birleştirici</strong>) yerleştirin.</p>

<p><span>Bu kuralı stil sayfana eklemeyi dene:</span></p>

<pre class="brush: css notranslate">h1 + p {
  font-size: 200%;
}</pre>

<p>Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <code>&lt;span&gt;</code> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Gördünüz gibi, CSS bize öğeleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Konumuzun ilerleyen bölümlerinde <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">Seçiciler</a> dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.</p>
</div>

<h2 id="Öğeleri_durumuna_göre_şekillendirme">Öğeleri durumuna göre şekillendirme</h2>

<p>Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <code>&lt;a&gt;</code> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.</p>

<pre class="brush: css notranslate">a:link {
  color: pink;
}

a:visited {
  color: green;
}</pre>

<p>Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.</p>

<pre class="brush: css notranslate">a:hover {
  text-decoration: none;
}</pre>

<p>Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini kalın yapabilir misin?</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>

<p>Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Bu derslerde ve MDN genelinde <a href="/tr/docs/Learn/Accessibility">erişilebilirlilikten</a> sık sık bahsedildiğini göreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.</p>

<p>Ziyaretcin, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler, ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.</p>

<p>Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığında onu daha az erişilebilir hale getirmemen önemlidir.</p>
</div>

<h2 id="Seçicileri_ve_birleştiricileri_birleştirmek">Seçicileri ve birleştiricileri birleştirmek</h2>

<p>Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:</p>

<pre class="brush: css notranslate">/* &lt;article&gt; içinde bulunan &lt;p&gt;'nin içndeki &lt;span&gt; seçer  */
article p span { ... }

/* &lt;h1&gt;'den sonra gelen &lt;ul&gt;'den sonraki &lt;p&gt;'yi seçer.  */
h1 + ul + p { ... }</pre>

<p>Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:</p>

<pre class="brush: css notranslate">body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}</pre>

<p>Bu kural, <code>&lt;body&gt;</code> öğesinin içerisinde bulunan <code>&lt;h1&gt;</code> öğesinden sonra ilk gelen <code>special</code> sınıfına dahil <code>&lt;p&gt;</code> öğesini seçer. Vay be!</p>

<p>Orjinal HTML'de şekil verilmeyen tek öğe <code>&lt;span class="special"&gt;</code>dir.</p>

<p>Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.</p>

<h2 id="Özet">Özet</h2>

<p>Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.</p>

<p>Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>

<h2 id="Bu_kısımda">Bu kısımda</h2>

<ol>
 <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li>
 <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
 <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
 <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></li>
 <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerimizi uygulamak</a></li>
</ol>