From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../selectors/attribute_selectors/index.html | 166 +++++++++ .../selectors/box_model_tasks/index.html | 86 +++++ .../selectors/combinators/index.html | 120 ++++++ .../learn/css/building_blocks/selectors/index.html | 238 ++++++++++++ .../pseudo-classes_and_pseudo-elements/index.html | 414 +++++++++++++++++++++ .../type_class_and_id_selectors/index.html | 135 +++++++ 6 files changed, 1159 insertions(+) create mode 100644 files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html create mode 100644 files/tr/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/tr/learn/css/building_blocks/selectors/index.html create mode 100644 files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html (limited to 'files/tr/learn/css') diff --git a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..224b5b181a --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,166 @@ +--- +title: Nitelik seçiciler +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +tags: + - Attrubute + - Başlangıç + - Beginner + - CSS + - Learn + - Nitelik + - Ogrenim + - Selectors + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.
+ +

Durum ve değer seçiciler

+ +

Bu seçiciler, tek başına bir niteliğin varlığına (örneğin href) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekAçıklama
[nitelik]a[title]Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)
[nitelik=değer]a[href="https://example.com"]Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.
[nitelik~=değer]p[class~="special"] +


+ Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.

+
[nitelik|=değer]div[lang|="zh"]Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.
+ +

Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Alt dize eşleştirme seçicileri

+ +

Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin,  box-warning ve box-error sınıfların olsun ve siz box- dizesiyle başlayan her şeyi hedeflemek istiyorsan,  [class^="box-"] ile ikisini birde seçebilirsin. (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi).

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekAçıklama
[nitelik^=value]li[class^="box-"]nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.
[nitelik$=value]li[class$="-box"]nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.
[nitelik*=value]li[class*="box"]nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.
+ +

(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır ^ ile başlayanlar ve $ ile bitenler.)

+ +

Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Büyük küçük harf duyarlılığı

+ +

Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan i bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.

+ +

Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Not: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(s). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.

+
+ +

Sonraki adımlar

+ +

Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve  sözde sınıf ve sözde öğe seçiciler hakkında bilgi edinebilirsin.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
  2. +
  3. CSS seçicileri + +
  4. +
  5. Kutu modeli
  6. +
  7. Arka planlar ve kenarlıklar
  8. +
  9. Farklı metin yönleri kullanma
  10. +
  11. Taşan içerik
  12. +
  13. Değerler ve birimler
  14. +
  15. CSS'de öğelerin boyutları
  16. +
  17. Görseller, medya ve form öğeleri
  18. +
  19. Tabloları şekillendirme
  20. +
  21. CSS'de hata ayıklama
  22. +
  23. CSS'ini düzenleme
  24. +
diff --git a/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html new file mode 100644 index 0000000000..8e47528ca3 --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html @@ -0,0 +1,86 @@ +--- +title: 'Becerilerinizi test edin: Kutu Modeli' +slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +tags: + - Başlangıç + - CSS +translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için CodePen, jsFiddle veya Glitch gibi çevrimiçi bir araç kullanmakta faydalı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.

+
+ +

Kutu Model Bir

+ +

Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.

+ +

Two boxes of the same size

+ +

Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Kutu Modeli İki

+ +

Bu görevde kutuya şunları ekleyin:

+ + + +

Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Kutu Modeli Üç

+ +

Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?

+ +

An inline box with space between it and the text around it.

+ +

Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
  2. +
  3. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
    • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
    • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
    • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
    • +
    +
  4. +
diff --git a/files/tr/learn/css/building_blocks/selectors/combinators/index.html b/files/tr/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..5141688e8e --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,120 @@ +--- +title: Birleştiriciler +slug: Learn/CSS/Building_blocks/Selectors/Combinators +tags: + - Birleştiriciler + - CSS + - Selectors + - combinators + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.
+ +

Soy(torun) birleştirici

+ +

Soy birleştiricisi — tipik olarak tek bir boşluk ( ) karakterinden oluşur — en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir. Örneğin; aşağıda body'nin soyundan gelen article'nin soyundaki p ile eşleşirlir. article body'nin 50. torunu olabilir, p'de article'nin 15. torunu olabilir burada dikkat edilecek durum p ile body arasında herhengi bir yerde article'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.

+ +
body article p
+
+ +

Aşağıdaki örnekte, sadece .box sınıfının içindeki <p> öğesini eşleştiriyoruz.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Çocuk birleştirici

+ +

Çocuk birleştirici, iki seçici arasına yerleştirilen büyüktür işaretidir (>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <article> öğesinin doğrudan bir alt öğesi olan <p> öğesiyle eşleşen bir kural yazmak istersek:

+ +
article > p
+ +

Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <ul> öğe seçicimin doğrudan bir alt öğesi olan <li> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.

+ +

Buradaki <li> seçicinin çocuk olduğunu belirten > işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Bitişik kardeş birleştirici

+ +

Bitişik kardeş seçici (+), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <p> öğesinden sonra gelen <img> öğesini seçmek için:

+ +
p + img
+ +

Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <h1> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.

+ +

Eğer <h1> ve <p> arasına <h2> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.

+ +

 {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Genel kardeş birleştirici

+ +

Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (~) kullanabilirsin. <p> öğesinden sonra gelen tüm <img> öğelerini seçmek için şunu yapardık.

+ +
p ~ img
+ +

Aşağıdaki örnekte,  <h1> öğesinden sonra gelen <p>'yi seçip, daha sonra gelen <div>'i atlıyoruz ve bir sonra ki <p> öğesinide seçiyoruz.

+ +
+

Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.

+
+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Birleştiricileri kullanma

+ +

Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <ul> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.

+ +
ul > li[class="a"]  {  }
+ +

ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.

+ +

Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.

+ +

Beçerilerini test et!

+ +

Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin —  Becerilerini test et: Seçiciler.

+ +

Sıradaki

+ +

Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz —  CSS Kutu Modeli.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
  2. +
  3. CSS seçicileri + +
  4. +
  5. Kutu modeli
  6. +
  7. Arka planlar ve kenarlıklar
  8. +
  9. Farklı metin yönleri kullanma
  10. +
  11. Taşan içerik
  12. +
  13. Değerler ve birimler
  14. +
  15. CSS'de öğelerin boyutları
  16. +
  17. Görseller, medya ve form öğeleri
  18. +
  19. Tabloları şekillendirme
  20. +
  21. CSS'de hata ayıklama
  22. +
  23. CSS'ini düzenleme
  24. +
diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d78c248dbf --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,238 @@ +--- +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 +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

{{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.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek
+ +

Seçici nedir?

+ +

Ş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 konusu olarak anılır.

+ +

Some code with the h1 highlighted.

+ +

Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir h1 birinci dereceden başlıkları seçen seçiciyle .special gibi bir sınıf seçici.

+ +

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 Seviye 3 Seçiciler standardizasyonunda tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.

+ +

Seçici listeleri

+ +

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ı seçici listelerinde birleştirebiliriz. Örn.i hem  h1 hemde .special sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} 
+ +

Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.

+ +
h1, .special {
+  color: blue;
+} 
+ +

Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.

+ +
h1,
+.special {
+  color: blue;
+} 
+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.

+ +

Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa h1 öğesine stil uygulanmaya devam edecektir.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} 
+ +

Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.

+ +
h1, ..special {
+  color: blue;
+} 
+ +

Seçici türleri

+ +

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.

+ +

Tür, sınıf ve kimlik seçicileri

+ +

Bu grup, HTML öğesini hedefleyen seçicileri <h1>.

+ +
h1 { }
+ +

Sınıfı hedefleyen seçicileri:

+ +
.box { }
+ +

ve bir kimliği hedefleyen seçicileri içerir:

+ +
#unique { }
+ +

nitelik seçicileri

+ +

Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:

+ +
a[title] { }
+ +

Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:

+ +
a[href="https://example.com"] { }
+ +

Sözde sınıf ve sözde öğeler

+ +

Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., :hover sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.

+ +
a:hover { }
+ +

Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., ::first-line her zaman bir öğenin (<p> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <span> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.

+ +
p::first-line { }
+ +

Birleştiriciler

+ +

Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<article> öğesini alt birleştirici (>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:

+ +
article > p { }
+ +

Sıradaki

+ +

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 tür, sınıf ve kimlik seçicileri sayfasına geçerek yolculuğuna başlayabilirsin.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Seçiciler referans tablosu

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekCSS Eğitim sayfası
Tür seçicih1 {  }Tür seçiciler
Evrensel seçici* {  }Evrensel seçici
Sınıf Seçici.box {  }Sınıf Seçici
Kimlik seçici#unique { }Kimlik seçiciler
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicilerp:first-child { }Sözde sınıflar
Sözde öğe seçicilerp::first-line { }Sözde sınıflar
Torun birleştiricilarticle pTorun birleştirici
Çocuk birleştiriciarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricih1 + pBitişik kardeş
Genel Kardeş birleştiricih1 ~ pGenel kardeş
+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
  2. +
  3. CSS seçicileri + +
  4. +
  5. Kutu modeli
  6. +
  7. Arka planlar ve kenarlıklar
  8. +
  9. Farklı metin yönleri kullanma
  10. +
  11. Taşan içerik
  12. +
  13. Değerler ve birimler
  14. +
  15. CSS'de öğelerin boyutları
  16. +
  17. Görseller, medya ve form öğeleri
  18. +
  19. Tabloları şekillendirme
  20. +
  21. CSS'de hata ayıklama
  22. +
  23. CSS'ini düzenleme
  24. +
diff --git a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..5b2ecb8a1f --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,414 @@ +--- +title: Sözde sınıflar ve sözde öğeler +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +tags: + - Başlangıç + - Beginner + - CSS + - Eğitim + - Learn + - Pseudo + - Pseudo-class + - Pseudo-element + - Selectors + - Sozde Ogeler + - Sozde sınıflar + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

Bakacağımız bir sonraki seçici kümesi, sözde sınıflar ve sözde öğeler olarak adlandıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.
+ +

Sözde sınıf nedir?

+ +

Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki  fazla sınıfları azaltmana yardımcı olur ve  daha esnek, bakımı kolay bir kod sağlarlar.

+ +

Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:

+ +
:pseudo-class-name
+ +

Basit sözde sınıf örneği

+ +

Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine {{cssxref(":first-child")}} sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:

+ + + +
+

Not: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan :first-child'ı doğrudan yazabilirsin ve artık kural <article> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. first-child ile *:first-child'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.

+
+ +

Kullanıcı eylemi sözde sınıfları

+ +

Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. Bazen dinamik sözde sınıflar olarak adlandırılan bu kullanıcı eylemi sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklemiş gibi davranır. Örnek verirsek:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Sözde öğe nedir?

+ +

Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar  ::.

+ +
::pseudo-element-name
+ +
+

Not: İlk kullanılmaya başlanan bazı  sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.

+
+ +

Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <span>  öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.

+ +

::first-line Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Sanki bir <span>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.

+ +

Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.

+ +

Sözde sınıfları ve sözde öğeleri birleştirmek

+ +

İlk paragrafın ilk satırını kalın yapmak istersen, :first-child ve ::first-line seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <article> öğesi içinde bulunan ilk öğenin<p> ilk satırını seçmek istediğimizi söylüyoruz.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

::before ve ::after ile içerik oluşturmak

+ +

CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: content.

+ +

Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. content özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca ::before sözde öğesini ::after olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

CSS'den metin dizeleri eklemek aslında web'de çok sık yaptığımız bir şey değildir. Çünkü bu metne bazı ekran okuyucular tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.

+ +

Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.

+ +

Bu sonraki örnekte, ::before sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu display: block olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

Özellik ile birlikte ::before ve ::after sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. CSS Arrow Please, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, {{cssxref("::before")}} ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için {{cssxref("content")}} özelliğine bak.

+ +

Referans bölümü

+ +

Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.

+ +

Sözde sınıflar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciAçıklama
{{ Cssxref(":active") }}Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.
{{ Cssxref(":any-link") }}Bağlantının herhangi bir durumuyla eşleşir :link ve :visited her iki bağlantı durumunun ikisiylede eşleşir.
{{ Cssxref(":blank") }}herhangi kullanıcı girişi olmayan  <input> öğesiyle eşleşir.
{{ Cssxref(":checked") }}Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.
{{ Cssxref(":current") }}O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.
{{ Cssxref(":default") }}Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.
{{ Cssxref(":dir") }}Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML dir niteliğinin değerine veya CSS direction özelliğindeki değere göre).
{{ Cssxref(":disabled") }}Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.
{{ Cssxref(":empty") }}Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.
{{ Cssxref(":enabled") }}Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.
{{ Cssxref(":first") }}Basılı Medya, içerisindeki ilk sayfayla eşleşir.
{{ Cssxref(":first-child") }}Kardeşler arasında birinci olan öğeyle eşleşir
{{ Cssxref(":first-of-type") }}Türdeş kardeşler arasındaki ilk öğeyi seçer.
{{ Cssxref(":focus") }}Odaklanmış bir öğeyle eşleşir.
{{ Cssxref(":focus-visible")}}Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.
{{ Cssxref(":focus-within") }}Odaklanılabilen bir çocuğu olan öğeyle eşleşir.
{{ Cssxref(":future") }}Geçerli öğeden sonraki öğe ile eşleşir.
{{ Cssxref(":hover") }}Kullanıcının üzerine geldiği öğe ile eşleşir.
{{ Cssxref(":indeterminate") }}Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle checkboxes.
{{ Cssxref(":in-range") }}Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.
{{ Cssxref(":invalid") }}Geçersiz bir değer girilmiş olan <input> öğesiyle eşleşir.
{{ Cssxref(":lang") }}Dil tanımı olan bir öğe ile eşleşir (HTML'nin lang niteliğindeki değerleri baz alır).
{{ Cssxref(":last-child") }}Kardeşler arasındaki en son öğe ile eşleşir.
{{ Cssxref(":last-of-type") }}Türdeş kardeşler arasındaki en son öğe ile eşleşir.
{{ Cssxref(":left") }}Basılı Medya, içersindeki soldaki sayfalarla eşleşir.
{{ Cssxref(":link")}}Ziyaret edilmeyen bağlantılar ile eşleşir.
{{ Cssxref(":local-link")}}Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.
{{ Cssxref(":is", ":is()")}}Seçicide belirtilen seçilerden herhangi biriyle eşleşir.
{{ Cssxref(":not") }}Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.
{{ Cssxref(":nth-child") }}Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
{{ Cssxref(":nth-of-type") }}Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
{{ Cssxref(":nth-last-child") }}Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
{{ Cssxref(":nth-last-of-type") }}Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
{{ Cssxref(":only-child") }}Kardeşi olmayan bir öğeyle eşleşir.
{{ Cssxref(":only-of-type") }}Türdeş kardeşi olmayan bir öğeyle eşleşir.
{{ Cssxref(":optional") }}Örnek girişlerin gösterildiği öğeler ile eşleşir.
{{ Cssxref(":out-of-range") }}Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.
{{ Cssxref(":past") }}Geçerli öğeden önceki öğelerle eşleşir.
{{ Cssxref(":placeholder-shown") }}Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.
{{ Cssxref(":playing") }}Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..
{{ Cssxref(":paused") }}Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.
{{ Cssxref(":read-only") }}Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.
{{ Cssxref(":read-write") }}Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.
{{ Cssxref(":required") }}Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.
{{ Cssxref(":right") }}Basılı Medya, sağ sayfalarla eşleşir.
{{ Cssxref(":root") }}Belgenin kök öğesiyle eşleşir.
{{ Cssxref(":scope") }}scope öğesi olan herhangi öğeyle eşleşir.
{{ Cssxref(":valid") }}Geçerli bir değer girilmiş <input> öğesiyle eşleşir.
{{ Cssxref(":target") }}Geçerli bir URL'yi hedefleyen öğeyle eşleşir.
{{ Cssxref(":visited") }}Daha önceden ziyaret edilmiş bağlantılarla öşleşir.
+ +

Sözde öğeler

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciAçıklama
{{ Cssxref("::after") }}Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.
{{ Cssxref("::before") }}Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.
{{ Cssxref("::first-letter") }}Öğe içeriğinin ilk harfiyle eşleşir.
{{ Cssxref("::first-line") }}Öğe içeriğinin ilk satırıyla eşleşir.
{{ Cssxref("::grammar-error") }}HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .
{{ Cssxref("::marker") }}Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.
{{ Cssxref("::selection") }}Belgenin seçilen kısmıyla eşleşir.
{{ Cssxref("::spelling-error") }}HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
  2. +
  3. CSS seçicileri + +
  4. +
  5. Kutu modeli
  6. +
  7. Arka planlar ve kenarlıklar
  8. +
  9. Farklı metin yönleri kullanma
  10. +
  11. Taşan içerik
  12. +
  13. Değerler ve birimler
  14. +
  15. CSS'de öğelerin boyutları
  16. +
  17. Görseller, medya ve form öğeleri
  18. +
  19. Tabloları şekillendirme
  20. +
  21. CSS'de hata ayıklama
  22. +
  23. CSS'ini düzenleme
  24. +
diff --git a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..e5260643f8 --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,135 @@ +--- +title: 'Tür, sınıf ve Kimlik seçicileri' +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +tags: + - Başlangıç + - Beginner + - CSS + - Class + - Kimlik + - Learn + - Ogrenim + - Selectors + - id + - seçiciler + - sınıf +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını inceleyeceğiz.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Farklı CSS seçicileri hakkında bilgi edinmek.
+ +

Tür seçiciler

+ +

Bir tür seçici, belgende bir HTML öğesini seçtiği için bazen etiket seçici veya  öğe seçici olarak anılır. Aşağıdaki örnekte, span, em ve strong seçicilerini kullandık.

+ +

<h1> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

Evrensel seçici

+ +

Evrensel seçici bir yıldız işaretiyle (*) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.

+ +

Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma

+ +

Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin,  <article> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, {{cssxref(":first-child")}} sözde sınıfını kullanabilirsin. <article> öğe seçiciyle birlikte bir alt seçici olarak Sözde sınıflar ve sözde öğeler kullanımı:

+ +
article :first-child {
+  font-weight: bold;
+}
+ +

Bunla birlikte, bir öğenin ilk çocuğu olan <article> öğesini  seçmek için kullanılan  article:first-child ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.

+ +

Bu karışıklığı önlemek için, :first-child sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <article> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.

+ +
article *:first-child {
+  font-weight: bold;
+} 
+ +

Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.

+ +

Sınıf seçiciler

+ +

Sınıf seçici bir nokta (.) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; highlight adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Belirli unsurlara göre sınıfları hedeflemek

+ +

Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, highlight sınıfına sahip <span> ve <h1> öğelerimize farklı stillerle vurgulayacağız.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.

+ +

Birden fazla sınıf uygulanmış bir öğeyi hedeflemek

+ +

Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.

+ +

Aşağıdaki örnekte, <div> içerisinde bir notumuz var. Gri kenar, kutu bir notebox sınıfına dahilse uygulanır. Kutu ayrıca warning veya danger sınıflarından birine dahilse {{cssxref("border-color")}}'unu değiştirebiliriz.

+ +

Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <div>'in sadece danger sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Kimlik seçiciler

+ +

Kimlik seçici nokta karakterinden ziyade diyez # karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere  tek bir kimlik(id) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Uyarı: Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.

+
+ +
+

Not: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.

+
+ +

Sonraki derste

+ +

Nitelik seçicileri inceleyerek seçicileri keşfetmeye devam edeceğiz.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
  2. +
  3. CSS seçicileri + +
  4. +
  5. Kutu modeli
  6. +
  7. Arka planlar ve kenarlıklar
  8. +
  9. Farklı metin yönleri kullanma
  10. +
  11. Taşan içerik
  12. +
  13. Değerler ve birimler
  14. +
  15. CSS'de öğelerin boyutları
  16. +
  17. Görseller, medya ve form öğeleri
  18. +
  19. Tabloları şekillendirme
  20. +
  21. CSS'de hata ayıklama
  22. +
  23. CSS'ini düzenleme
  24. +
-- cgit v1.2.3-54-g00ecf