From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/tr/web/css/display/index.html | 446 ++++++++++++++++++++++++++++++++++++ 1 file changed, 446 insertions(+) create mode 100644 files/tr/web/css/display/index.html (limited to 'files/tr/web/css/display/index.html') diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html new file mode 100644 index 0000000000..b6ee8f9389 --- /dev/null +++ b/files/tr/web/css/display/index.html @@ -0,0 +1,446 @@ +--- +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

+ + -- cgit v1.2.3-54-g00ecf