From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/tr/web/css/@import/index.html | 125 - files/tr/web/css/_colon_active/index.html | 96 - files/tr/web/css/_colon_first-of-type/index.html | 156 -- files/tr/web/css/_colon_focus/index.html | 117 - files/tr/web/css/_colon_last-child/index.html | 147 - files/tr/web/css/_colon_link/index.html | 106 - files/tr/web/css/_colon_not/index.html | 145 - files/tr/web/css/_colon_root/index.html | 60 - .../web/css/_doublecolon_first-letter/index.html | 160 -- files/tr/web/css/background-color/index.html | 154 -- files/tr/web/css/background/index.html | 153 -- files/tr/web/css/class_selectors/index.html | 125 - .../box-shadow_generator/index.html | 2882 -------------------- .../introduction_to_the_css_box_model/index.html | 68 - .../using_css_counters/index.html | 103 - files/tr/web/css/css_selectors/index.html | 233 -- files/tr/web/css/display/index.html | 446 --- files/tr/web/css/font-size/index.html | 239 -- files/tr/web/css/index.html | 123 - files/tr/web/css/margin/index.html | 225 -- files/tr/web/css/reference/index.html | 73 - files/tr/web/css/right/index.html | 157 -- files/tr/web/css/shape-outside/index.html | 208 -- files/tr/web/css/type_selectors/index.html | 126 - 24 files changed, 6427 deletions(-) delete mode 100644 files/tr/web/css/@import/index.html delete mode 100644 files/tr/web/css/_colon_active/index.html delete mode 100644 files/tr/web/css/_colon_first-of-type/index.html delete mode 100644 files/tr/web/css/_colon_focus/index.html delete mode 100644 files/tr/web/css/_colon_last-child/index.html delete mode 100644 files/tr/web/css/_colon_link/index.html delete mode 100644 files/tr/web/css/_colon_not/index.html delete mode 100644 files/tr/web/css/_colon_root/index.html delete mode 100644 files/tr/web/css/_doublecolon_first-letter/index.html delete mode 100644 files/tr/web/css/background-color/index.html delete mode 100644 files/tr/web/css/background/index.html delete mode 100644 files/tr/web/css/class_selectors/index.html delete mode 100644 files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html delete mode 100644 files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/tr/web/css/css_lists_and_counters/using_css_counters/index.html delete mode 100644 files/tr/web/css/css_selectors/index.html delete mode 100644 files/tr/web/css/display/index.html delete mode 100644 files/tr/web/css/font-size/index.html delete mode 100644 files/tr/web/css/index.html delete mode 100644 files/tr/web/css/margin/index.html delete mode 100644 files/tr/web/css/reference/index.html delete mode 100644 files/tr/web/css/right/index.html delete mode 100644 files/tr/web/css/shape-outside/index.html delete mode 100644 files/tr/web/css/type_selectors/index.html (limited to 'files/tr/web/css') diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html deleted file mode 100644 index 130d0b186d..0000000000 --- a/files/tr/web/css/@import/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -
{{CSSRef}}
- -

CSS @-kurallarıdan olan @import diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

- -
@import url("fineprint.css") print;
-@import url("bluish.css") projection, tv;
-@import 'custom.css';
-@import url("chrome://communicator/skin/");
-@import "common.css" screen, projection;
-@import url('landscape.css') screen and (orientation:landscape);
- -

So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

- -

Syntax

- -
@import url;
-@import url list-of-media-queries;
-
- -

where:

- -
-
url
-
Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). See here for more information.
-
list-of-media-queries
-
Is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.
-
- -

Formal syntax

- -{{csssyntax}} - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}} 
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extended the syntax to support any media query and not only simple media types.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,
- and requirement to insert the @import rule at the beginning of the CSS document.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html deleted file mode 100644 index fe5563e036..0000000000 --- a/files/tr/web/css/_colon_active/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -
{{CSSRef}}
- -

:active CSS pseudo-class'ı kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder. Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur.  :active seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.

- -
/* Aktif edilmiş bir <a> elementinin seçicisidir. */
-a:active {
-  color: red;
-}
- -

:active pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için,  :active kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.
-
- LVHA-order: :link — :visited — :hover — :active.

- -
Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
- -

Syntax

- -{{csssyntax}} - -

Example

- -
-

HTML

- -
<a href="#">This link will turn lime while you click on it.</a>
-
- -

CSS

- -
a:link { color: blue; }          /* Unvisited links */
-a:visited { color: purple; }     /* Visited links */
-a:hover { background: yellow; }  /* User hovers */
-a:active { color: lime; }        /* Active links */
-
- -

Result

- -
{{EmbedLiveSample('Example')}}
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.active")}}

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index ad4ee056d6..0000000000 --- a/files/tr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -translation_of: 'Web/CSS/:first-of-type' ---- -
{{CSSRef}}
- -

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

- -
/* Selects the first <p> to appear inside a parent element
-   regardless of its position inside the siblings */
-p:first-of-type {
-  color: red;
-}
- -
-

Not: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.

-
- -

Sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

Örnek 1: Temel ilk paragraf

- -

Aşağıdaki HTML'i baz alalım:

- -
<h2>Başlık</h2>
-
-<p>Paragraf</p>
-
-<p>Paragraf</p>
- -

Ve CSS:

- -
p:first-of-type {
-  color: red;
-}
- -

Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:

- -

{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}

- -

Örnek 2: Evrensel seçici olarak..

- -

This example shows how the universal selector is assumed when no simple selector is written.

- -

Önce biraz HTML:

- -
<div>
-  <span>Bu ilk `span`!</span>
-  <span>Ama bu `span` değil.</span>
-  <span>Bu <em>element içinde `em`</em>!</span>
-  <span>Ve bu da <span>element içinde `span`</span>!</span>
-  <b>Bu `b` niteliği!</b>
-  <span>This final `span` does not.</span>
-</div>
-
- -

Şimdi de CSS:

- -
div :first-of-type {
-  background-color: lime;
-}
- -

Sonuç şöyle görünecek:

- -

{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}

- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel destek2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
-
- -

Şunlar da var

- - diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html deleted file mode 100644 index 05ebc35ead..0000000000 --- a/files/tr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - ':focus' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus' ---- -
{{CSSRef}}
- -

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

- -
/* Selects any <input> when focused */
-input:focus {
-  color: red;
-}
- -
-

Note: This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that contains a focused element.

-
- -

Syntax

- -{{CSSSyntax}} - -

Examples

- -

HTML

- -
<input class="red-input" value="I'll be red when focused."><br>
-<input class="blue-input" value="I'll be blue when focused.">
- -

CSS

- -
.red-input:focus {
-  background: yellow;
-  color: red;
-}
-
-.blue-input:focus {
-  background: yellow;
-  color: blue;
-}
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Make sure the visual focus indicator can be seen by people with low vision.  This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

- - - -

:focus { outline: none; }

- -

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}No change.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.focus")}}

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html deleted file mode 100644 index b068bb7de8..0000000000 --- a/files/tr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS S - - CSS Sozde-sınıflar - - Yerleşim -translation_of: 'Web/CSS/:last-child' ---- -
{{CSSRef}}
- -

Özet

- -

:last-child CSS pseudo-class bir grup çocuğun sonuncusunu temsil eder.

- -
-

Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.

-
- -

Yazım Şekli

- -{{csssyntax}} - -

Örnek

- -

HTML İçerik

- -
<ul>
-  <li>Bu kısım yeşermedi</li>
-  <li>Bu da yeşermedi.</li>
-  <li>Burası yeşerdi :)</li>
-</ul>
- -

CSS İçerik

- -
li:last-child {
-  background-color: green;
-}
- -

{{EmbedLiveSample('Example', '100%', 100)}}

- -

Detaylar

- - - - - - - - - - - - - - - - - - - - - -
DetayDurumYorum
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Eşleşen elemanların atası olması zorunlu değil.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}İlk tanımlama.
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Seviyede Destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Seviyede Destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
-
- -

Ayrıca Bakınız

- - diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html deleted file mode 100644 index d9cd1502eb..0000000000 --- a/files/tr/web/css/_colon_link/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:link' ---- -
{{ CSSRef }}
- -

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an href attribute.

- -
/* Selects any <a> that has not been visited yet */
-a:link {
-  color: red;
-}
- -

Styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

- -
-

Note: Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.

-
- -

Syntax

- -{{csssyntax}} - -

Examples

- -

By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.

- -

HTML

- -
<a href="#ordinary-target">This is an ordinary link.</a><br>
-<a href="">You've already visited this link.</a><br>
-<a>Placeholder link (won't get styled)</a>
-
- -

CSS

- -
a:link {
-  background-color: gold;
-  color: green;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}No change.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Lift the restriction to only apply it for {{ HTMLElement("a") }} element.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.link")}}

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html deleted file mode 100644 index e4eb3e5d93..0000000000 --- a/files/tr/web/css/_colon_not/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 'CSS :not() Seçicisi' -slug: 'Web/CSS/:not' -tags: - - ':not() seçicisi' - - CSS - - CSS Pseudo-class - - Web -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

Özet

- -

Olumsuzluk CSS pseudo-class seçicisi, :not(X), seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak X yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.

- -

Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.

- -
Notlar: - - -
- -

Syntax

- -{{csssyntax}} - -

Örnek

- -

HTML

- -
<p>Bu bir paragraf.</p>
-<p class="classy">İşte sihir burada!</p>
-<div>Burası yeşil olacak </div>
- -

CSS

- -
.classy { text-shadow: 1px 1px 2px gold; }
-p:not(.classy) { color: red; }
-body :not(p) { color: green; }
- -

Sonuç

- -

{{EmbedLiveSample('Example','100%',160)}}

- -

Özelleştirmeler

- - - - - - - - - - - - - - - - - - - - - -
ÖzelleştirmeDurumAçıklama
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Çeşitli karışık seçiciler için ifadeyi genişletir.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Standart Tanımlama.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Özellikler1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.53.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Özellikler2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.010.03.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html deleted file mode 100644 index de77ef2a6a..0000000000 --- a/files/tr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS -translation_of: 'Web/CSS/:root' ---- -
{{CSSRef}}
- -

:root CSS sözde-sınıfı dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de :root dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve html seçicisi ile aynıdır, ancak önceliği daha yüksektir.

- -
/* Dökümandaki kök elemanı seçer:
-   Bu HTML'de <html> oluyor. */
-:root {
-  background: royalblue;
-}
- -

Sözdizimi

- -{{csssyntax}} - -

Örnek

- -

:root global CSS değişkenleri tanımlarken kullanışlı olabilir:

- -
:root {
-  --ana-renk: green;
-  --paragraf-boslugu: 5px 0;
-}
-
- -

Tanımlamalar

- - - - - - - - - - - - - - - - - - - - - -
TanımlamaDurumAçıklama
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Başlangıç ​​tanımı.
- -

Tarayıcı Uyumluluğu

- - - -

{{Compat("css.selectors.root")}}

diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 8cf9b5be47..0000000000 --- a/files/tr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -translation_of: 'Web/CSS/::first-letter' ---- -
{{CSSRef}}
- -

 ::first-letter CSS sözde-elementi bir blok seviyeli elementin ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).

- -
/* Bir <p> elementinin ilk harfini seçiyoruz. */
-p::first-letter {
-  font-size: 130%;
-}
- -

Bir elementin ilk harfini belirlemek her zaman kolay değildir:

- - - -
-

CSS3 ile birlikte, sözde-sınıfları sözde-elementlerden ayırmak amacıyla iki noktalı ::first-letter gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, :first-letter yazımını da kabul ediyorlar.

-
- -

İzin verilen nitelikler

- -

::first-letter pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:

- - - -

Söz dizimi(Syntax)

- -{{csssyntax}} - -

Örnekler

- -

Basit drop-cap(Satırdan taşan büyük harf)

- -

Bu örneğimizde <h2> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için ::first-letter sözde elementini kullanacağız

- -

HTML

- -
<h2>My heading</h2>
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
- -

CSS

- -
p {
-  width: 500px;
-  line-height: 1.5;
-}
-
-h2 + p::first-letter {
-  color: white;
-  background-color: black;
-  border-radius: 2px;
-  box-shadow: 3px 3px 0 red;
-  font-size: 250%;
-  padding: 6px 3px;
-  margin-right: 6px;
-  float: left;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

- -

Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki

- -

Aşağıdaki örnek, ::first-letter sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. 

- -

HTML

- -
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>-The beginning of a special punctuation mark.</p>
-<p>_The beginning of a special punctuation mark.</p>
-<p>"The beginning of a special punctuation mark.</p>
-<p>'The beginning of a special punctuation mark.</p>
-<p>*The beginning of a special punctuation mark.</p>
-<p>#The beginning of a special punctuation mark.</p>
-<p>「特殊的汉字标点符号开头。</p>
-<p>《特殊的汉字标点符号开头。</p>
-<p>“特殊的汉字标点符号开头。</p>
- -

CSS

- -
p::first-letter {
-  color: red;
-  font-size: 150%;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Allows the use of {{cssxref("text-shadow")}} with ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}No change.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Initial definition, using the one-colon syntax.
- -

Tarayıcı Uyumluluğu

- -
- - -

{{Compat("css.selectors.first-letter")}}

-
- -

Ayrıca göz at

- - diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html deleted file mode 100644 index a8e0b081d1..0000000000 --- a/files/tr/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Arka plan rengi -slug: Web/CSS/background-color -tags: - - CSS - - CSS arka plan - - CSS özellikler - - arka plan rengi -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

The background-color CSS özellik, bir ögenin arkaplan rengini ayarlar.

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

Syntax

- -
/* Anahtar Kelime Değerler */
-background-color: red;
-background-color: indigo;
-
-/* Onaltılık Değer */
-background-color: #bbff00;    /* Tamamen opak */
-background-color: #11ffee00;  /* Tamamen şeffaf */
-background-color: #11ffeeff;  /* Tamamen opak */
-
-/* RGB Değer */
-background-color: rgb(255, 255, 128);        /* Tamamen opak */
-background-color: rgba(117, 190, 218, 0.5);  /* 50% şeffaf */
-
-/* HSL Değer */
-background-color: hsl(50, 33%, 25%);         /* Tamamen opak */
-background-color: hsla(50, 33%, 25%, 0.75);  /* 75% şeffaf */
-
-/* Özel Anahtar  Değerler */
-background-color: currentcolor;
-background-color: transparent;
-
-/* Evrensel values */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
- -

arka plan rengi özellik tek olarak belirtilir <renk>  değer.

- -

Değerler

- -
-
{{cssxref("<renk>")}}
-
Arka planın tek tip rengi. Herhangi bir belirtilen  {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..
-
- -

Resmi sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<div class="exampleone">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

Erişilebilirlik endişeleri

- -

Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..

- -

Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için Web Content Accessibility Guidelines (WCAG), metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Initial definition
- -
{{cssinfo}}
- -

Browser compatibility

- - - -

{{Compat("css.properties.background-color")}}

- -

See also

- - diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html deleted file mode 100644 index 8bfef1e9fb..0000000000 --- a/files/tr/web/css/background/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: background -slug: Web/CSS/background -translation_of: Web/CSS/background ---- -
{{CSSRef("CSS Background")}}
- -

background kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.

- -
{{EmbedInteractiveExample("pages/css/background.html")}}
- - - -

Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir  shorthand 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.

- -

Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller ilk değerlerini almaya devam eder.

- -

Syntax

- -
/* Using a <background-color> */
-background: green;
-
-/* Using a <bg-image> and <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Using a <box> and <background-color> */
-background: border-box red;
-
-/* A single image, centered and scaled */
-background: no-repeat center/80% url("../img/image.png");
-
- -

background özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.

- -

Her katmanın sentaksı aşağıdaki gibidir:

- - - -

Values(Değerler)

- -
-
<attachment>
-
See {{cssxref("background-attachment")}}
-
<box>
-
See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
-
<background-color>
-
See {{cssxref("background-color")}}
-
<bg-image>
-
See {{Cssxref("background-image")}}
-
<position>
-
See {{cssxref("background-position")}}
-
<repeat-style>
-
See {{cssxref("background-repeat")}}
-
<bg-size>
-
See {{cssxref("background-size")}}.
-
- -

Formal syntax

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<p class="topbanner">
-  Starry sky<br/>
-  Twinkle twinkle<br/>
-  Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
- -

CSS

- -
.warning {
-  background: pink;
-}
-
-.topbanner {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Initial definition
- -

{{cssinfo}}

- -

Browser compatibility

- - - -

{{Compat("css.properties.background")}}

- -

See also

- - diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html deleted file mode 100644 index 7db7988ab8..0000000000 --- a/files/tr/web/css/class_selectors/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sınıf_seçicileri ---- -
{{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_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 0e3e4b1b25..0000000000 --- a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2882 +0,0 @@ ---- -title: Box-shadow Oluşturucu -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - box-shadow oluşturucu -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Bu araç {{cssxref("box-shadow")}}  CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

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 deleted file mode 100644 index f93bbe1292..0000000000 --- a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/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 deleted file mode 100644 index bc33ddb4dd..0000000000 --- a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Sayaçlar ---- -

{{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 deleted file mode 100644 index af5308fe63..0000000000 --- a/files/tr/web/css/css_selectors/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: CSS seçiciler -slug: Web/CSS/CSS_Selectors -tags: - - Başlangıç - - CSS - - Nitelik - - Sozde - - id - - oğrenin - - seçiciler - - sınıf -translation_of: Web/CSS/CSS_Selectors -original_slug: Öğren/CSS/CSS_yapi_taslari/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/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/display ---- -
{{CSSRef}}
- -

Özet

- -

display özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan display değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan display değeri inline'dır.

- -

Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, none değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.

- -

{{cssinfo}}

- -

Sözdizimi kuralları

- -
display: none;
-display: inline;
-display: block;
-display: inline-block;
-display: contents;
-display: list-item;
-display: inline-list-item;
-display: table;
-display: inline-table;
-display: table-cell;
-display: table-column;
-display: table-column-group;
-display: table-footer-group;
-display: table-header-group;
-display: table-row;
-display: table-row-group;
-display: table-caption;
-display: flex;
-display: inline-flex;
-display: grid;
-display: inline-grid;
-display: ruby;
-display: ruby-base;
-display: ruby-text;
-display: ruby-base-container;
-display: ruby-text-container;
-display: run-in;
-
-/* Global values */
-display: inherit;
-display: initial;
-display: unset;
-
- -

Değerler

- -

display-value bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Değer kümesiDeğerTanım
Basic values (CSS 1)none -

Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.

- -

Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.

-
inlinebir veya daha fazla satıriçi kutusu oluşturur.
blockblok element kutusu oluşturur.
list-itemElement içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.
Gelişletilmiş değerler (CSS 2.1)inline-blockinline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.
Table model değerler (CSS 2.1)inline-tableinline-table  değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.
tableBu elementler block {{HTMLElement("table")}} gibi davranır.
table-captionBu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.
table-cellBu elementler {{HTMLElement("td")}} gibi davranır..
table-columnBu elementler {{HTMLElement("col")}} gibi davranır.
table-column-groupBu elementler {{HTMLElement("colgroup")}} gibi davranır.
table-footer-groupBu elementler {{HTMLElement("tfoot")}} gibi davranır.
table-header-groupBu elementler {{HTMLElement("thead")}} gibi davranır.
table-rowBu elementler {{HTMLElement("tr")}} gibi davranır.
table-row-groupBu elementler {{HTMLElement("tbody")}} gibi davranır.
CSS3 liste değerleri (CSS3)inline-list-itemThe inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.
Flexbox model değerleri (CSS3)flexElement, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.
inline-flexElement inline element gibi davranır ve flexbox modeline uygun olarak görünür.
Grid box model değerleri (CSS3) {{experimental_inline}}grid -

Element, block elementi gibi davranır ve
- grid modeline uygun olarak görünür.

- -
Deneyimlenebileceği üzere, çoğu tarayıcı henüz desteklememektedir. Özellikle -moz-grid 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid XUL layout model 'de belirtilen ve kullanmamanız gereken bir prefix'tir.
-
inline-gridElement inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.
Ruby formatting model values (CSS3){{experimental_inline}}rubyElement inline element gibi davranır ve
- içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.
ruby-baseBu elementler {{HTMLElement("rb")}} gibi davranır.
ruby-textBu elementler {{HTMLElement("rt")}} gibi davranır
ruby-base-containerThese elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.
ruby-text-containerThese elements behave like {{HTMLElement("rtc")}} elements.
Experimental values {{experimental_inline}}run-in -
    -
  • If the run-in box contains a block box, same as block.
    • -
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
    • -
  • If an inline box follows, the run-in box becomes a block box.
    • -
-
contentsThese elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

View Live Examples

- -
p.secret  { display: none }
-<p style="display:none"> invisible text </p>
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}{{Spec2('CSS3 Lists')}}Added the inline-list-item values.
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Added the run-in and contents values.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Added the ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Added the grid box model values.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Added the flexible box model values.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Added the table model values and inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Initial definition. Basic values: none, block, inline, and list-item.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
none, inline and block1.0{{CompatGeckoDesktop("1.0")}}4.07.01.0 (85)
inline-block1.0{{CompatGeckoDesktop("1.9")}}5.5 [4]7.01.0 (85)
list-item1.0{{CompatGeckoDesktop("1.0")}}6.07.01.0 (85)
inline-list-item{{CompatNo}}{{CompatNo}} [6]{{CompatNo}}{{CompatNo}}{{CompatNo}}
run-in {{experimental_inline}}1.0 [5]{{CompatNo}}8.07.01.0 (85) [5]
-

4.0

- -

Removed in 32

- 		-

5.0 (532.5)

- -

Removed in 8.0

-
inline-table1.0{{CompatGeckoDesktop("1.9")}}8.07.01.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption1.0{{CompatGeckoDesktop("1.0")}}8.07.01.0 (85)
flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
inline-flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{experimental_inline}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}} [3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contents {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("37")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}7.0{{property_prefix("-webkit")}}
-
- -

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

- -

[2] In Firefox 36, it the preference governing this feature was off by default.

- -

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

- -

[4] Natural inline elements only

- -

[5] Not before inline-elements

- -

[6] See {{bug(1105868)}}

- -

See also

- - diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html deleted file mode 100644 index 89ce88d475..0000000000 --- a/files/tr/web/css/font-size/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS Fontlar - - CSS özelliği - - Referans -translation_of: Web/CSS/font-size ---- -
{{CSSRef}}
- -

font-size CSS'in bir özelliği olup yazı boyutunu ayarlar. This property is also used to compute the size of em, ex, and other relative {{cssxref("<length>")}} units.

- -
{{EmbedInteractiveExample("pages/css/font-size.html")}}
- - - -

Syntax

- -
/* <absolute-size> values */
-font-size: xx-small;
-font-size: x-small;
-font-size: small;
-font-size: medium;
-font-size: large;
-font-size: x-large;
-font-size: xx-large;
-font-size: xxx-large;
-
-/* <relative-size> values */
-font-size: smaller;
-font-size: larger;
-
-/* <length> values */
-font-size: 12px;
-font-size: 0.8em;
-
-/* <percentage> values */
-font-size: 80%;
-
-/* Global values */
-font-size: inherit;
-font-size: initial;
-font-size: unset;
-
- -

The font-size property is specified in one of the following ways:

- - - -

Değerler

- -
-
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
-
Absolute-size keywords, based on the user's default font size (which is medium).
-
larger, smaller
-
Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.
-
{{cssxref("<length>")}}
-
-

A positive {{cssxref("<length>")}} value. For most font-relative units (such as em and ex), the font size is relative to the parent element's font size.

- -

For font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.

-
-
{{cssxref("<percentage>")}}
-
-

A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.

-
-
- -
-

Note: To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

-
- -

Formal syntax

- -{{csssyntax}} - -

Açıklama

- -

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

- -

Anahtar Kelimeler

- -

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

- -

Pixels

- -

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

- -

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

- -
Note: Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.
- -

Ems

- -

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the font size of the element on which the em is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

- -

In order to calculate the em equivalent for any pixel value required, you can use this formula:

- -
em = desired element pixel value / parent element font-size in pixels
- -

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

- -

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

- -

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6em;
-}
- -
<div>
-<span>Outer <span>inner</span> outer</span>
-</div>
-
- -

The result is:

- -

{{EmbedLiveSample("Ems", 400, 40)}}

- -

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s font-size is 1.6em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.

- -

Rems

- -

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

- -

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6rem;
-}
-
- -

Then we apply this CSS to the same HTML, which looks like this:

- -
<span>Outer <span>inner</span> outer</span>
- -

{{EmbedLiveSample("Rems", 400, 40)}}

- -

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px).

- -

Örnekler

- -

Örnek 1

- -
/* Paragraf boyutunu çok büyük yapar */
-p { font-size: xx-large; }
-
-/* <h1> etiketininin boyutunu kendisini kaplayan
-   etikete göre 2.5 kat daha büyük yapar */
-h1 { font-size: 250%; }
-
-/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */
-span { font-size: 16px; }
-
- -

Örnek 2

- -

CSS

- -
.small {
-  font-size: xx-small;
-}
-.larger {
-  font-size: larger;
-}
-.point {
-  font-size: 24pt;
-}
-.percent {
-  font-size: 200%;
-}
-
- -

HTML

- -
<h1 class="small">Small H1</h1>
-<h1 class="larger">Larger H1</h1>
-<h1 class="point">24 point H1</h1>
-<h1 class="percent">200% H1</h1>
- -

Sonuç

- -

{{EmbedLiveSample('Example_2','600','200')}}

- -

Notlar

- -

em and ex units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{cssxref("font-size")}}.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}Adds xxx-large keyword.
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition.
- -

{{cssinfo}}

- -

Tarayıcı uyumluluğu

- - - -

{{Compat("css.properties.font-size")}}

diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html deleted file mode 100644 index f1cd50e15c..0000000000 --- a/files/tr/web/css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' -slug: Web/CSS -tags: - - CSS - - CSS3 - - HTML - - Referans - - Stil - - Stil Sayfası - - Tasarım - - Yerleşim -translation_of: Web/CSS ---- -

{{CSSRef}}

- -

Bir stylesheet (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan Cascading Style Sheets,  HTML ya da XML ile yazılmış  (SVG ya da XHTML gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS,  yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. 

- -

CSS, open web'in temel dillerinden biridir ve  W3C standartlarına sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.

- -

CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak CSS spesifikasyonunun en son kararlı sürümünün anlık görüntüsünü alıyor..

- -
- - -
-

Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?

- -

Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Buradan Başlayın

-
- -
-
-

Eğitim Aşamaları

- -

Bu CSS Eğitimi CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.

- -
-
CSS'ye ilk adım
-
CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.
-
Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir.  
-
CSS'in yapı taşları
-
-

Bu adım ilk adımın kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.

- -

Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.

-
-
Metin stilini belirleme
-
CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.
-
CSS düzeni
-
Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.
-
Yaygın sorunları çözmek için CSS kullanın
-
Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.
-
-
- -
-

Kaynaklar

- - - -

Tarifler kitabı

- -

CSS düzen tarifleri kitabı sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.

- -

CSS geliştirme araçları

- - - -

Meta bugs

- -
    -
  • Firefox: {{bug(1323667)}}
    • -
-
-
-
- -

Ayrıca Bakınız

- - diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html deleted file mode 100644 index e226907d8a..0000000000 --- a/files/tr/web/css/margin/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: marjin -slug: Web/CSS/margin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new -original_slug: Web/CSS/marjin ---- -
{{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/reference/index.html b/files/tr/web/css/reference/index.html deleted file mode 100644 index 4d415d65a6..0000000000 --- a/files/tr/web/css/reference/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Referansı -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referans -translation_of: Web/CSS/Reference ---- -

Bu CSS Referansı, bütün standart CSS özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her CSS3 ile bağlantılı özellik için de bir referans niteliğindedir.

- -

Ayrıca -moz prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan Mozilla CSS Eklentileri sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan  WebKit CSS Eklentileri sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için Vendor-prefixed CSS Property Overview ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.

- -
{{CSS_Ref}}
- -

Seçiciler

- - - -

CSS3 özelleştirmeleri için tüm seçicilerin listesi.

- -

CSS3 Kullanımı

- -

Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.

- - - -

Kavramlar

- - diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html deleted file mode 100644 index 3c5c003132..0000000000 --- a/files/tr/web/css/right/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: right -slug: Web/CSS/right -translation_of: Web/CSS/right ---- -
{{CSSRef}}
- -

Özet

- -

Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.

- -

{{Cssxref("position")}}: absolute or position: fixed olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.

- -

right değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.

- -

Hem right hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise right değeri geçerli kabul edilir. Soldan sağa yerleşimlerde right değeri -left, sağdan sola yerleşimlerde left değeri -right olarak tekrar hesaplanır.

- -

{{cssinfo}}

- -

Yazım

- -
Formal syntax: {{csssyntax("right")}}
-
- -
right: 3px         /* <uzunluk> değeri */
-right: 2.4em
-
-right: 10%         /* barındıran bloğun yüzdesi olarak */
-
-right: auto
-
-right: inherit
-
- -

Değerler

- -
-
<uzunluk>
-
Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. -
    -
  • Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;
    • -
  • Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.
    • -
-
-
<yüzde>
-
Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. 
-
auto
-
Is a keyword that represents: -
    -
  • for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat width: auto as a width based on the content.
    • -
  • for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if left is also auto, do not offset it at all.
    • -
-
-
inherit
-
Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the auto keyword.
-
- -

Examples

- - -
#example_3 {
-  width: 600px;
-  height: 400px;
-  background-color: #FFC7E4;
-  position: relative;
-  top: 20px;
-  left: 20px;
-}
-
-#example_4 {
-  width:200px;
-  height:200px;
-  background-color: #FFD7C2;
-  position:absolute;
-  bottom:10px;
-  right: 20px;
-}
- -
 <div id="example_3">Example 3</div>
- <div id="example_4">Example 4</div>
-
- -

{{LiveSampleLink('Examples', 'Example Demo Link')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines right as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}5.55.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html deleted file mode 100644 index 4a05560e8a..0000000000 --- a/files/tr/web/css/shape-outside/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: shape-outside -slug: Web/CSS/shape-outside -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Property - - Reference - - Shape - - margin - - 'recipe:css-property' - - shape-outside - - wrapping -translation_of: Web/CSS/shape-outside ---- -
{{CSSRef}}
- -

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

- -
{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
- - - -

Syntax

- -
/* Keyword values */
-shape-outside: none;
-shape-outside: margin-box;
-shape-outside: content-box;
-shape-outside: border-box;
-shape-outside: padding-box;
-
-/* Function values */
-shape-outside: circle();
-shape-outside: ellipse();
-shape-outside: inset(10px 10px 10px 10px);
-shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
-shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
-
-/* <url> value */
-shape-outside: url(image.png);
-
-/* <gradient> value */
-shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
-
-/* Global values */
-shape-outside: initial;
-shape-outside: inherit;
-shape-outside: unset;
-
- -

The shape-outside property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.

- -

Values

- -
-
none
-
The float area is unaffected. Inline content wraps around the element's margin box, like usual.
-
<shape-box>
-
The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be margin-box, border-box, padding-box, or content-box. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).
-
-
-
margin-box
-
Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)).
-
border-box
-
-

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

-
-
padding-box
-
-

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

-
-
content-box
-
-

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

-
-
-
-
{{cssxref("<basic-shape>")}}
-
The float area is computed based on the shape created by of one of inset(), circle(), ellipse(),  polygon(), or as added in the level 2 specification path(). If a <shape-box> is also supplied, it defines the reference box for the <basic-shape> function. Otherwise, the reference box defaults to margin-box.
-
{{cssxref("<image>")}}
-
The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.
-
-
Note: {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
-
-
- -

Interpolation

- -

When animating between one <basic-shape> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate.

- - - -

Formal definition

- -

{{CSSInfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Funneling text

- -

HTML

- -
<div class="main">
-  <div class="left"></div>
-  <div class="right"></div>
-  <p>
-    Sometimes a web page's text content appears to be
-    funneling your attention towards a spot on the page
-    to drive you to follow a particular link. Sometimes
-    you don't notice.
-  </p>
-</div>
- -

CSS

- -
.main {
-  width: 530px;
-}
-
-.left,
-.right {
-  width: 40%;
-  height: 12ex;
-  background-color: lightgray;
-}
-
-.left {
-  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  float: left;
-  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
-  clip-path: polygon(0 0, 100% 100%, 0 100%);
-}
-
-.right {
-  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  float: right;
-  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
-  clip-path: polygon(100% 0, 100% 100%, 0 100%);
-}
-
-p {
-  text-align: center;
-}
- -

Result

- -

{{EmbedLiveSample("Funneling_text", "100%", 130)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Initial definition.
{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes 2')}}Adds the path() value
- -

Browser compatibility

- -
- - -

{{Compat("css.properties.shape-outside")}}

-
- -

See also

- - diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html deleted file mode 100644 index 8c375757ba..0000000000 --- a/files/tr/web/css/type_selectors/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Type_selectors -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/Tip_secicileri ---- -
{{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