From 8f2731905212f6e7eb2d9793ad20b8b448c54ccf Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:31 +0100 Subject: unslug tr: move --- files/tr/web/css/box_model/index.html | 67 ------ files/tr/web/css/class_selectors/index.html | 124 +++++++++++ .../introduction_to_the_css_box_model/index.html | 67 ++++++ .../using_css_counters/index.html | 102 +++++++++ files/tr/web/css/css_selectors/index.html | 232 +++++++++++++++++++++ files/tr/web/css/margin/index.html | 224 ++++++++++++++++++++ files/tr/web/css/marjin/index.html | 224 -------------------- .../index.html" | 124 ----------- files/tr/web/css/tip_secicileri/index.html | 125 ----------- files/tr/web/css/type_selectors/index.html | 125 +++++++++++ 10 files changed, 874 insertions(+), 540 deletions(-) delete mode 100644 files/tr/web/css/box_model/index.html create mode 100644 files/tr/web/css/class_selectors/index.html create mode 100644 files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/tr/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/tr/web/css/css_selectors/index.html create mode 100644 files/tr/web/css/margin/index.html delete mode 100644 files/tr/web/css/marjin/index.html delete mode 100644 "files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" delete mode 100644 files/tr/web/css/tip_secicileri/index.html create mode 100644 files/tr/web/css/type_selectors/index.html (limited to 'files/tr/web/css') diff --git a/files/tr/web/css/box_model/index.html b/files/tr/web/css/box_model/index.html deleted file mode 100644 index 38245c8af4..0000000000 --- a/files/tr/web/css/box_model/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

Özet

- -

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

- -

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

- -

CSS Box model

- -

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

- -

Eğer CSS'in  {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.

- -

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

- -

Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.

- -

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.

- -

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

- -

Margin alanının boyutları  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

- -

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

- -

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.

- -

Özellikleri

- - - - - - - - - - - - - - - - - - - - - -
ÖzellikDurumComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }} -

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

-
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Bunlara da bakın

- - diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html new file mode 100644 index 0000000000..d735ceed7c --- /dev/null +++ b/files/tr/web/css/class_selectors/index.html @@ -0,0 +1,124 @@ +--- +title: Sınıf seçicileri +slug: Web/CSS/Sınıf_seçicileri +tags: + - CSS + - CSS Referans + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Sınıf (class) seçicisi, bir HTML belgesindeki elementin {{htmlattrxref("class")}} özniteliğinin içeriği ile eşleşir. {{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.

+ +

Sözdizimi

+ +
.sınıfismi { style properties }
+ +

Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=sınıfismi] { style properties }
+ +

Örnek

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Here's a span with some text.</span>
+<span>Here's another.</span>
+
+ +

{{EmbedLiveSample('Example', 200, 50)}}

+ +

Spesifikasyon

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..38245c8af4 --- /dev/null +++ b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,67 @@ +--- +title: Kutu modeli +slug: Web/CSS/box_model +tags: + - CSS + - Kutu Modeli +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Özet

+ +

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

+ +

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

+ +

CSS Box model

+ +

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

+ +

Eğer CSS'in  {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.

+ +

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

+ +

Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.

+ +

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.

+ +

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

+ +

Margin alanının boyutları  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

+ +

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

+ +

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.

+ +

Özellikleri

+ + + + + + + + + + + + + + + + + + + + + +
ÖzellikDurumComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }} +

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

+
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
+ +

Bunlara da bakın

+ + diff --git a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..d31a159a27 --- /dev/null +++ b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,102 @@ +--- +title: CSS Sayaçlarını Kullanmak +slug: Web/Guide/CSS/Sayaçlar +tags: + - CSS + - CSS Counter + - CSS Sayaçlar + - MDN + - Sayaçlar +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +

{{CSSRef}}

+

CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

+

The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the counter() or counters() function of the content property.

+

Sayaçları kullanmak

+

To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".

+
body {
+  counter-reset: bolum;                   /* bolum adlı sayacın değerini 0 olarak ayarla */
+}
+h3:before {
+  counter-increment: bolum;               /* bolum adlı sayacı arttır */
+  content: "Bölüm" counter(bolum) ": ";   /* Sayacı görüntüle */
+}
+
+

Örnek:

+
<h3>Giriş</h3>
+<h3>Gövde</h3>
+<h3>Sonuç</h3>
+

{{ EmbedLiveSample('Using_counters', 300,200) }}

+

Nesting counters

+

A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the counters() function, a string can be inserted between different levels of nested counters. For example this CSS:

+
ol {
+  counter-reset: section;                /* Creates a new instance of the
+                                            section counter with each ol
+                                            element */
+  list-style-type: none;
+}
+li:before {
+  counter-increment: section;            /* Increments only this instance
+                                            of the section counter */
+  content: counters(section,".") " ";    /* Adds the value of all instances
+                                            of the section counter separated
+                                            by a ".". */
+                                         /* if you need to support < IE8 then
+                                            make sure there is no space after
+                                            the ','
+}
+
+

Combined with the following HTML:

+
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+

Yields this result:

+

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}} 
+

See also

+ +

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

+

 

diff --git a/files/tr/web/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a7f89d5c85 --- /dev/null +++ b/files/tr/web/css/css_selectors/index.html @@ -0,0 +1,232 @@ +--- +title: CSS seçiciler +slug: Öğren/CSS/CSS_yapi_taslari/Selectors +tags: + - Başlangıç + - CSS + - Nitelik + - Sozde + - id + - oğrenin + - seçiciler + - sınıf +translation_of: Web/CSS/CSS_Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla ç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?

+ +

Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin konusu olarak anılır.

+ +

Some code with the h1 highlighted.

+ +

Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici h1 veya sınıf seçici .special gibi.

+ +

CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler spesifikasyonunda tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.

+ +

Seçici listeleri

+ +

Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi,  bir seçici listesinde birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan h1 eleman seçicim ve .special sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.

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

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

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

Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.

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

Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.

+ +

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

+ +

Seçicileri bu şekilde gruplandığınızda, 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 şekillendirmesi hala uygulanacaktır.

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

Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de h1 elemanı biçimlendirilmez

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

Seçici türleri

+ +

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..

+ +

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

+ +

Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <h1>:

+ +
h1 { }
+ +

Ayrıca bir sınıfı hedefleyen seçicileri de içerir class:

+ +
.box { }
+ +

veya bir kimlik id:

+ +
#unique { }
+ +

Nitelik seçiciler

+ +

Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:

+ +
a[title] { }
+ +

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

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

Sözde sınıflar ve sözde elemanlar

+ +

Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin :hover sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:

+ +
a:hover { }
+ +

Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin ::first-line her zaman bir elemanın içindeki ilk metin satırını seçer (<p> şağıdaki durumda, sanki ilk satırın etrafı <span> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.

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

Birleştiriciler

+ +

Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <article> eleman etiketi  (>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:

+ +
article > p { }
+ +

Sonraki adımlar

+ +

Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya tür, sınıf ve kimlik seçicileri makalesine devam ederek yolculuğunuza başlayabilirsiniz.

+ +

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

+ +

Seçicilerin referans tablosu

+ +

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekCSS makaleleri
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çici
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicip:first-child { }Sözde sınıflar
Sözde elelman seçicip::first-line { }Sözde eleman
Torun birleştiricisiarticle pTorun birleştirici
Çocuk birleştiricisiarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricisih1 + pBitişik kardeş
Genel kardeş birleştiricisih1 ~ pGenel kardeş
+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de elemanların boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html new file mode 100644 index 0000000000..356c738f48 --- /dev/null +++ b/files/tr/web/css/margin/index.html @@ -0,0 +1,224 @@ +--- +title: marjin +slug: Web/CSS/marjin +tags: + - CSS + - CSS özelliği + - Referans +translation_of: Web/CSS/margin +translation_of_original: Web/CSS/margin-new +--- +
{{CSSRef}}
+ +

Özet

+ +

 

+ +

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.

+ +

Eksi değerlere müsade edilir.

+ +

{{cssinfo}}

+ +

Sözdizimi

+ +
/* Her dört kenara uygulanır */
+margin: 1em;
+
+/* dikey | yatay */
+margin: 5% auto;
+
+/* üst | yatay | alt */
+margin: 1em auto 2em;
+
+/* üst | sağ | alt | sol */
+margin: 2px 1em 0 auto;
+
+/* Genel değerler */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

Değer Atamaları

+ +

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

+ +
+
<length>
+
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .
+
<percentage>
+
{{cssxref("<percentage>")}} içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
+
auto
+
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
+ div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
+
+ + + +

Formel sözdizimi

+ +
{{csssyntax}}
+ +

Örnekler

+ +

Basit bir örnek

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

başka bir örnek daha

+ +
margin: 5%;                /* tüm kenarlar 5% marjinli */
+
+margin: 10px;              /* tüm kenarlar 10px marjinli */
+
+margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
+
+margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
+
+margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
+
+margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
+
+margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
+
+ +

Yatay olarak merkeze konumlama margin: 0 auto;

+ +

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

+ +

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

+ +

Spesifikasyonlar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Belirgin değişiklik yok
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}"margin" transitions ta animasyon özellikiği kullanılabilir
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Inline elementeki efekleri kaldırıldı
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}başlangic değeri atandı
+ +

Tarayıcı Uyumluluğu

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Ayrıca bakınız

+ + diff --git a/files/tr/web/css/marjin/index.html b/files/tr/web/css/marjin/index.html deleted file mode 100644 index 356c738f48..0000000000 --- a/files/tr/web/css/marjin/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: marjin -slug: Web/CSS/marjin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -
{{CSSRef}}
- -

Özet

- -

 

- -

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.

- -

Eksi değerlere müsade edilir.

- -

{{cssinfo}}

- -

Sözdizimi

- -
/* Her dört kenara uygulanır */
-margin: 1em;
-
-/* dikey | yatay */
-margin: 5% auto;
-
-/* üst | yatay | alt */
-margin: 1em auto 2em;
-
-/* üst | sağ | alt | sol */
-margin: 2px 1em 0 auto;
-
-/* Genel değerler */
-margin: inherit;
-margin: initial;
-margin: unset;
-
- -

Değer Atamaları

- -

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

- -
-
<length>
-
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .
-
<percentage>
-
{{cssxref("<percentage>")}} içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
-
auto
-
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
- div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
-
- - - -

Formel sözdizimi

- -
{{csssyntax}}
- -

Örnekler

- -

Basit bir örnek

- -

HTML

- -
<div class="ex1">
-  margin:     auto;
-  background: gold;
-  width:      66%;
-</div>
-<div class="ex2">
-  margin:     20px 0 0 -20px;
-  background: gold;
-  width:      66%;
-</div>
- -

CSS

- -
.ex1 {
-  margin: auto;
-  background: gold;
-  width: 66%;
-}
-.ex2 {
-  margin: 20px 0px 0 -20px;
-  background: gold;
-  width: 66%;
-}
- -

{{ EmbedLiveSample('Simple_example') }}

- -

başka bir örnek daha

- -
margin: 5%;                /* tüm kenarlar 5% marjinli */
-
-margin: 10px;              /* tüm kenarlar 10px marjinli */
-
-margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
-
-margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
-
-margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
-
-margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
-
-margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
-
- -

Yatay olarak merkeze konumlama margin: 0 auto;

- -

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

- -

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Belirgin değişiklik yok
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}"margin" transitions ta animasyon özellikiği kullanılabilir
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Inline elementeki efekleri kaldırıldı
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}başlangic değeri atandı
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
-
- -

Ayrıca bakınız

- - diff --git "a/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" "b/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" deleted file mode 100644 index d735ceed7c..0000000000 --- "a/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Sınıf_seçicileri -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef("Selectors")}}
- -

Sınıf (class) seçicisi, bir HTML belgesindeki elementin {{htmlattrxref("class")}} özniteliğinin içeriği ile eşleşir. {{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.

- -

Sözdizimi

- -
.sınıfismi { style properties }
- -

Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=sınıfismi] { style properties }
- -

Örnek

- -

CSS

- -
span.classy {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<span class="classy">Here's a span with some text.</span>
-<span>Here's another.</span>
-
- -

{{EmbedLiveSample('Example', 200, 50)}}

- -

Spesifikasyon

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/css/tip_secicileri/index.html b/files/tr/web/css/tip_secicileri/index.html deleted file mode 100644 index f24f899681..0000000000 --- a/files/tr/web/css/tip_secicileri/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Tip_secicileri -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef("Selectors")}}
- -

Tanım

- -

Tip (type) seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden HTML tags diye de bahsedilebilir. Örneğin, HTML'de <h1>, <a>, <p> tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.

- -

Sözdizim

- -
element { stil özellikleri }
-
- -

Örnek

- -

CSS

- -
span {
-  background-color: DodgerBlue;
-  color: #ffffff;
-}
- -

HTML

- -
<span>span elementi</span>
-<p>p (paragraf) elementi</p>
-<span>tekrar span elementi</span>
- -

{{ EmbedLiveSample('Örnek', 200, 150) }}

- -

 

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasyonDurumYorum
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Değişiklik yok
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Baştaki tanım
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid için ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Temel destek{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html new file mode 100644 index 0000000000..f24f899681 --- /dev/null +++ b/files/tr/web/css/type_selectors/index.html @@ -0,0 +1,125 @@ +--- +title: Tip Seçicileri +slug: Web/CSS/Tip_secicileri +tags: + - CSS + - CSS referansı + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Tanım

+ +

Tip (type) seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden HTML tags diye de bahsedilebilir. Örneğin, HTML'de <h1>, <a>, <p> tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.

+ +

Sözdizim

+ +
element { stil özellikleri }
+
+ +

Örnek

+ +

CSS

+ +
span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+ +

HTML

+ +
<span>span elementi</span>
+<p>p (paragraf) elementi</p>
+<span>tekrar span elementi</span>
+ +

{{ EmbedLiveSample('Örnek', 200, 150) }}

+ +

 

+ +

Spesifikasyonlar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasyonDurumYorum
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Değişiklik yok
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Baştaki tanım
+ +

Tarayıcı uyumluluğu

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ÖzellikAndroidAndroid için ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Temel destek{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
-- cgit v1.2.3-54-g00ecf