diff options
Diffstat (limited to 'files/tr/learn/css/building_blocks/selectors/index.html')
| -rw-r--r-- | files/tr/learn/css/building_blocks/selectors/index.html | 238 |
1 files changed, 0 insertions, 238 deletions
diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index d78c248dbf..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: CSS seçicileri -slug: Learn/CSS/Building_blocks/Selectors -tags: - - Acemi - - Attribute - - Beginner - - CSS - - Class - - Eğitim - - Learn - - Nitelik - - Pseudo - - Selectors - - Sozde - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.</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ü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Seçici_nedir">Seçici nedir?</h2> - -<p>Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin <em>konusu</em> olarak anılır.</p> - -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir <code>h1</code> birinci dereceden başlıkları seçen seçiciyle <code>.special</code> gibi bir sınıf seçici.</p> - -<p>CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler standardizasyonunda</a> tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.</p> - -<h2 id="Seçici_listeleri">Seçici listeleri</h2> - -<p>Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı <em>seçici listelerinde</em> birleştirebiliriz. Örn.i hem <code>h1</code> hemde <code>.special</code> sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> - -<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> öğesine stil uygulanmaya devam edecektir.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Seçici_türleri">Seçici türleri</h2> - -<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.</p> - -<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> - -<p>Bu grup, HTML öğesini hedefleyen seçicileri <code><h1></code>.</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>Sınıfı hedefleyen seçicileri:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>ve bir kimliği hedefleyen seçicileri içerir:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="nitelik_seçicileri">nitelik seçicileri</h3> - -<p>Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Sözde_sınıf_ve_sözde_öğeler">Sözde sınıf ve sözde öğeler</h3> - -<p>Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., <code>:hover</code> sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.</p> - -<pre class="brush: css notranslate">a:hover { }</pre> - -<p>Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., <code>::first-line</code> her zaman bir öğenin (<code><p></code> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <code><span></code> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Birleştiriciler">Birleştiriciler</h3> - -<p>Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<code><article></code> öğesini alt birleştirici (<code>></code>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> sayfasına geçerek yolculuğuna başlayabilirsin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Seçiciler_referans_tablosu">Seçiciler referans tablosu</h2> - -<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">CSS Eğitim sayfası</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Type_selectors">Tür seçici</a></td> - <td><code>h1 { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> - <td><code>* { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf Seçici</a></td> - <td><code>.box { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf Seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> - <td><code>#unique { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçiciler</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Sözde öğe seçiciler</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Torun birleştiricil</a></td> - <td><code>article p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Child_combinator">Çocuk birleştirici</a></td> - <td><code>article > p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştirici</a></td> - <td><code>h1 + p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Genel Kardeş birleştirici</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> - </tr> - </tbody> -</table> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <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çiciler</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> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> |