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/fa/web/css/_colon_not/index.html | 117 ------- files/fa/web/css/_doublecolon_cue/index.html | 79 ----- .../web/css/adjacent_sibling_combinator/index.html | 80 ----- files/fa/web/css/all/index.html | 159 ---------- files/fa/web/css/attribute_selectors/index.html | 183 ----------- files/fa/web/css/css_box_model/index.html | 116 ------- .../mastering_margin_collapsing/index.html | 83 ----- .../basic_concepts_of_flexbox/index.html | 234 -------------- .../fa/web/css/css_flexible_box_layout/index.html | 163 ---------- files/fa/web/css/flex_value/index.html | 53 ---- files/fa/web/css/index.html | 84 ----- files/fa/web/css/margin/index.html | 208 ------------- files/fa/web/css/media_queries/index.html | 131 -------- .../media_queries/using_media_queries/index.html | 332 -------------------- files/fa/web/css/position/index.html | 173 ----------- files/fa/web/css/pseudo-elements/index.html | 97 ------ files/fa/web/css/specificity/index.html | 343 --------------------- files/fa/web/css/top/index.html | 194 ------------ files/fa/web/css/transform-function/index.html | 163 ---------- .../web/css/transform-function/rotate()/index.html | 85 ----- files/fa/web/css/type_selectors/index.html | 79 ----- files/fa/web/css/zoom/index.html | 135 -------- 22 files changed, 3291 deletions(-) delete mode 100644 files/fa/web/css/_colon_not/index.html delete mode 100644 files/fa/web/css/_doublecolon_cue/index.html delete mode 100644 files/fa/web/css/adjacent_sibling_combinator/index.html delete mode 100644 files/fa/web/css/all/index.html delete mode 100644 files/fa/web/css/attribute_selectors/index.html delete mode 100644 files/fa/web/css/css_box_model/index.html delete mode 100644 files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html delete mode 100644 files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/fa/web/css/css_flexible_box_layout/index.html delete mode 100644 files/fa/web/css/flex_value/index.html delete mode 100644 files/fa/web/css/index.html delete mode 100644 files/fa/web/css/margin/index.html delete mode 100644 files/fa/web/css/media_queries/index.html delete mode 100644 files/fa/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/fa/web/css/position/index.html delete mode 100644 files/fa/web/css/pseudo-elements/index.html delete mode 100644 files/fa/web/css/specificity/index.html delete mode 100644 files/fa/web/css/top/index.html delete mode 100644 files/fa/web/css/transform-function/index.html delete mode 100644 files/fa/web/css/transform-function/rotate()/index.html delete mode 100644 files/fa/web/css/type_selectors/index.html delete mode 100644 files/fa/web/css/zoom/index.html (limited to 'files/fa/web/css') diff --git a/files/fa/web/css/_colon_not/index.html b/files/fa/web/css/_colon_not/index.html deleted file mode 100644 index 838120d408..0000000000 --- a/files/fa/web/css/_colon_not/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':not()' -slug: 'Web/CSS/:not' -tags: - - سی اس اس - - شبه کلاس - - لایه - - مرجع - - وب -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -
not() CSS pseudo-class:  همه عناصر را انتخاب می‌کند بجز عناصری که به عنوان ورودی به این کلاس داده شود. از آنجایی که این کلاس از انتخاب عناصر خاصی جلوگیری می کند، به عنوان negation pseudo-class شناخته می شود.
- -
 
- -
/* paragraph همه عناصر را انتخاب می‌کند بجز عنصر */
-:not(p) {
-  color: blue;
-}
- -
-

Notes:

- - -
- -

Syntax

- -

ورودی‌های شبه‌کلاس ()not: با ویرگول از یکدیگر جدا می‌شود.

- -

 

- -

 

- -
-

The ability to list more than one selector is experimental and not yet widely supported.

-
- -{{csssyntax}} - -

Example

- -

HTML

- -
<p>این عنصر، عنصر پاراگراف است.</p>
-<p class="fancy">من چقدر خوبم!</p>
-<div>این عنصر، عنصر پاراگراف نیست.</div>
-
- -

CSS

- -
.fancy {
-  text-shadow: 2px 2px 3px gold;
-}
-
-/* نیستند `fancy` که دارای کلاس <p> ِتمام عنصار */
-p:not(.fancy) {
-  color: green;
-}
-
-/* <p> همه عناصر بجز عنصر */
-body :not(p) {
-  text-decoration: underline;
-}
-
-/* <span> یا <div> همه عناصر بجز عناصر */
-body :not(div):not(span) {
-  font-weight: bold;
-}
-/* را دارا هستند `fancy` یا `crazy` همه عناصر بجز عناصری که کلاس‌های */
-/* توجه داشته باشید که این نوع نوشتار هنوز پشتیبانی نمی‌شود. */
-body :not(.crazy, .fancy) {
-  font-family: sans-serif;
-}
- -

Result

- -

{{EmbedLiveSample('Example')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extends its argument to allow some non-simple selectors.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Initial definition.
- -

Browser compatibility

- -
- - -

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

-
diff --git a/files/fa/web/css/_doublecolon_cue/index.html b/files/fa/web/css/_doublecolon_cue/index.html deleted file mode 100644 index fdf7761c1f..0000000000 --- a/files/fa/web/css/_doublecolon_cue/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '::cue (:cue)' -slug: 'Web/CSS/::cue' -translation_of: 'Web/CSS/::cue' ---- -

 

- -
{{CSSRef}}
- -

 

- -

شبه عنصر {{ Cssxref("cue::") }} یک عنصر انتخاب شده با نشانه‌های WebVTT را تطابق می‌دهد. این شبه عنصر می‌تواند برای آرایش زیرنویس و دیگر موارد محتوای تصویری با VTT tracks مورد استفاده قرار گیرد.

- -
::cue {
-  color: yellow;
-  font-weight: bold;
-}
- -

Allowable properties

- -

Only a small subset of CSS properties can be used in a rule with ::cue in its selector:

- - - -

The properties are applied to the entire set of cues as if they were a single unit. The only exception is that background and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

- -

Syntax

- -{{csssyntax}} - -

Example

- -

The following CSS sets the cue style so that the text is white and the background is a translucent black box.

- -
::cue {
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
-}
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Initial definition.
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/fa/web/css/adjacent_sibling_combinator/index.html b/files/fa/web/css/adjacent_sibling_combinator/index.html deleted file mode 100644 index c988c47aed..0000000000 --- a/files/fa/web/css/adjacent_sibling_combinator/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Adjacent sibling combinator -slug: Web/CSS/Adjacent_sibling_combinator -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

ترکیب  (+) adjacent sibling combinator دو انتخابگر را از هم جدا می‌کند و زمانی تطابق انجام می‌شود که انتخابگر دوم بلافاصله بعد از انتخابگر اول آمده باشد و هر فرزند یک والد {{domxref("element")}} باشند.

- -
/* باشند img پارگراف‌هایی که بلافاصله بعد از */
-img + p {
-  font-style: bold;
-}
- -

Syntax

- -
former_element + target_element { style properties }
-
- -

Example

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

Result

- -

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

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renames it the "next-sibling" combinator.
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition.
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/fa/web/css/all/index.html b/files/fa/web/css/all/index.html deleted file mode 100644 index 4961b49511..0000000000 --- a/files/fa/web/css/all/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: all -slug: Web/CSS/all -translation_of: Web/CSS/all ---- -
{{CSSRef}}
- -

The all CSS shorthand property sets all of an element's properties (other than {{cssxref("unicode-bidi")}} and {{cssxref("direction")}}) to their initial or inherited values, or to the values specified in another stylesheet origin..

- -
/* Global values */
-all: initial;
-all: inherit;
-all: unset;
-
-/* CSS Cascading and Inheritance Level 4 */
-all: revert;
-
- -

{{cssinfo}}

- -

Syntax

- -

The all property is specified as one of the CSS global keyword values. Note that none of these values affect the {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} properties.

- -

Values

- -
-
{{cssxref("initial")}}
-
Specifies that all the element's properties should be changed to their initial values.
-
{{cssxref("inherit")}}
-
Specifies that all the element's properties should be changed to their inherited values.
-
{{cssxref("unset")}}
-
Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
-
{{cssxref("revert")}}
-
Specifies behavior that depends on the stylesheet origin to which the declaration belongs: -
-
User-agent origin
-
Equivalent to unset.
-
User origin
-
Rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
-
Author origin
-
Rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. For purposes of revert, the Author origin includes the Override and Animation origins.
-
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

HTML

- -
<blockquote id="quote">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</blockquote>
-Phasellus eget velit sagittis.
- -

CSS

- -
body {
-  font-size: small;
-  background-color: #F0F0F0;
-  color: blue;
-}
-
-blockquote {
-  background-color: skyblue;
-  color: red;
-}
-
- -

Result

- -
-

No all property

- - - - -{{EmbedLiveSample("ex0", "200", "125")}} - -

The {{HTMLElement("blockquote")}} uses the browser's default styling together with a specific background and text color. It also behaves as a block element: the text that follows it is beneath it.

-
- -
-

all:unset

- - - - -{{EmbedLiveSample("ex1", "200", "125")}} - -

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an inline element now (initial value), its {{cssxref("background-color")}} is transparent (initial value), but its {{cssxref("font-size")}} is still small (inherited value) and its {{cssxref("color")}} is blue (inherited value).

-
- -
-

all:initial

- - - - -{{EmbedLiveSample("ex2", "200", "125")}} - -

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an inline element now (initial value), its {{cssxref("background-color")}} is transparent (initial value), its {{cssxref("font-size")}} is normal (initial value) and its {{cssxref("color")}} is black (initial value).

-
- -
-

all:inherit

- - - - -{{EmbedLiveSample("ex3", "200", "125")}} - -

The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is a block element now (inherited value from its containing {{HTMLElement("body")}} element), its {{cssxref("background-color")}} is #F0F0F0 (inherited value), its {{cssxref("font-size")}} is small (inherited value) and its {{cssxref("color")}} is blue (inherited value).

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}Added the revert value.
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Initial definition.
- -

Browser compatibility

- - - -

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

- -

See also

- -

CSS global keyword values: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}

diff --git a/files/fa/web/css/attribute_selectors/index.html b/files/fa/web/css/attribute_selectors/index.html deleted file mode 100644 index b5ead5055f..0000000000 --- a/files/fa/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: انتخابگر ویژگی -slug: Web/CSS/Attribute_selectors -translation_of: Web/CSS/Attribute_selectors -original_slug: Web/CSS/انتخابگرـویژگی ---- -
{{CSSRef}}
- -

انتخابگر ویژگی بر اساس وجود ویژگی یا مقدار ویژگی انتخاب می‌کند.

- -
/* را داشته باشند title که ویژگی <a> عنصرهای */
-a[title] {
-  color: purple;
-}
-
-/* باشد "https://example.org" آن برابر با  href که ویژگی  <a> عنصرهای */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* باشد "example" آن در بردارنده‌ی href که ویژگی <a> عنصرهای */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* به پایان رسیده باشد ".org" آن با href که ویژگی <a> عنصرهای */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Represents elements with an attribute name of attr.
-
[attr=value]
-
Represents elements with an attribute name of attr whose value is exactly value.
-
[attr~=value]
-
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
-
[attr|=value]
-
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
-
[attr^=value]
-
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
-
[attr$=value]
-
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
-
[attr*=value]
-
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
-
[attr operator value i]
-
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
-
- -

Examples

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Internal links, beginning with "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links with "example" anywhere in the URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links with "insensitive" anywhere in the URL,
-   regardless of capitalization */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links that end in ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Result

- -

{{EmbedLiveSample('Links')}}

- -

Languages

- -

CSS

- -
/* All divs with a `lang` attribute are bold. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* All divs in US English are blue. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* All divs in Portuguese are green. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* All divs in Chinese are red, whether
-   simplified (zh-CN) or traditional (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* All divs with a Traditional Chinese
-   `data-lang` are purple. */
-/* Note: You could also use hyphenated attributes
-   without double quotes */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
-
- -

Result

- -

{{EmbedLiveSample('Languages')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adds modifier for ASCII case-insensitive attribute value selection
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/fa/web/css/css_box_model/index.html b/files/fa/web/css/css_box_model/index.html deleted file mode 100644 index ed6760a26a..0000000000 --- a/files/fa/web/css/css_box_model/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: CSS Basic Box Model -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - CSS Box Model - - Guide - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

CSS Basic Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

- -

Reference

- -

Properties

- -

Properties controlling the flow of content in a box

- -
- -
- -

Properties controlling the size of a box

- -
- -
- -

Properties controlling the margins of a box

- -
- -
- -

Properties controlling the paddings of a box

- -
- -
- -

Other properties

- -
- -
- -

Guides

- -
-
Introduction to the CSS box model
-
Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
-
Mastering margin collapsing
-
Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
-
Visual formatting model
-
Explains the visual formatting model.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
diff --git a/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html deleted file mode 100644 index 95cced5f62..0000000000 --- a/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Mastering margin collapsing -slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

- -

Margin collapsing occurs in three basic cases:

- -
-
هم نیا
-
margin هم نیا ها با یکدیگر ادغام نمیشوند. (except when the latter sibling needs to be cleared past floats).
-
No content separating parent and descendants
-
If there is no border, padding, inline part, block formatting context created, or clearance to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of one or more of its descendant blocks; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
-
Empty blocks
-
If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.
-
- -

Some things to note:

- - - -

Examples

- -

HTML

- -
<p>The bottom margin of this paragraph is collapsed …</p>
-<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
-
-<div>This parent element contains two paragraphs!
-  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
-  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
-</div>
-
-<p>I am <code>2rem</code> below the element above.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Result

- -

{{EmbedLiveSample('Examples', 'auto', 350)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition.
- -

See also

- - diff --git a/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index 40e7937e9e..0000000000 --- a/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: مفاهیم اولیه فلکس باکس -slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -tags: - - فلکس - - فلکس باکس - - قالب بندی - - محور -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

فلکسیبل باکس ماژول که معمولا به آن فلکس‌باکس می‌گویند، به عنوان یک قالب‌بندی تک بعدی طراحی شد و به عنوان راهی برای تقسیم فضا بین بخش‌های داخل یک جعبه و ابزار قدرتمندی برای ترازبندی. این مقاله یک طرح کلی از امکانات اصلی فلکس‌باکس را ارائه می‌دهد.

- -

When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.

- -

دو محور فلکس‌باکس

- -

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the {{cssxref("flex-direction")}} property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.

- -

محور اصلی

- -

محور اصلی که با flex-direction مشخص می‌شود, چهار مقدار می‌پذیرد:

- - - -

اگر row یا row-reverse را انتخاب کنید, محور اصلی در جهت طبیعی متن‌ها (inline) خواهد بود

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

اگر column یا column-reverse را انتخاب کنید محور اصلی در جهت بالا به پایین (block direction) خواهد بود.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

محور قطع‌کننده

- -

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

If your main axis is column or column-reverse then the cross axis runs along the rows.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other.

- -

خط‌های شروع و پایان

- -

Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other.

- -

You can read more about the relationship between flexbox and the Writing Modes specification in a later article, however the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.

- -

If the flex-direction is row and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.

- -

Working in English the start edge is on the left.

- -

If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.

- -

The start edge in a RTL language is on the right.

- -

In both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both languages have a horizontal writing mode.

- -

After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.

- -

جعبه محتوی از نوع فلکس

- -

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

- - - -

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

- -

You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

تغییر جعهت فلکس

- -

Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

- -

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

- -

The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

جعبه محتوی فلکس از نوع چندسطری با flex-wrap

- -

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

- -

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

- -

مختصرنویسی با flex-flow

- -

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

- -

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

مشخصات آیتم‌های داخلی فلکس

- -

To have more control over flex items we can target them directly. We do this by way of three properties:

- - - -

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

- -

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

- -

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

- -

This flex container has available space after laying out the items.

- -

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

- -

مشخصه flex-basis

- -

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

- -

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

- -

مشخصه flex-grow

- -

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

- -

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

- -

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

- -

مشخصه flex-shrink

- -

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

- -

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

- -
-

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

-
- -

مختصرنویسی مقادیر برای مشخصه‌های فلکس

- -

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

- -

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

- - - -

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

- -

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

- -

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

- -

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

- -

Try these shorthand values in the live example below.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

ترازبندی, هم‌ترازی و تقسیم فضا بین بخش‌های داخلی جعبه محتوی فلکس

- -

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

- -

align-items

- -

The {{cssxref("align-items")}} property will align the items on the cross axis.

- -

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

- -

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

- -

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

- -

Try the following values of justify-content in the live example:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

- -

مراحل بعدی

- -

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/fa/web/css/css_flexible_box_layout/index.html b/files/fa/web/css/css_flexible_box_layout/index.html deleted file mode 100644 index ffb152df28..0000000000 --- a/files/fa/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: CSS Flexible Box Layout -slug: Web/CSS/CSS_Flexible_Box_Layout -tags: - - CSS - - CSS Flexible Boxes - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Flexible_Box_Layout ---- -
{{CSSRef}}
- -

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

- -

Basic Example

- -

In the following example a container has been set to display: flex, which means that the three child items become flex items. The value of justify-content has been set to space-between in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

- -

Reference

- -

CSS Properties

- -
- -
- -

Glossary entries

- -
- -
- -

Guides

- -
-
Basic Concepts of Flexbox
-
An overview of the features of flexbox
-
Relationship of flexbox to other layout methods
-
How flexbox relates to other layout methods, and other CSS specifications
-
Aligning items in a flex container
-
How the Box Alignment properties work with flexbox.
-
Ordering flex items
-
Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.
-
Controlling Ratios of flex items along the main axis
-
This article explains the flex-grow, flex-shrink and flex-basis properties.
-
Mastering wrapping of flex items
-
How to create flex containers with multiple lines and control the display of the items in those lines.
-
Typical use cases of flexbox
-
Common design patterns that are typical flexbox use cases.
-
Backwards compatibility of Flexbox
-
Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec
-
- - - -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		10.0{{property_prefix("-ms")}}
- 11.0		12.106.1{{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
-
- -

 

- -

See also

- -
-
Flexbugs
-
a community-curated list of flexbox browser bugs and workarounds
-
Cross-browser Flexbox mixins
-
This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax
-
- -

 

diff --git a/files/fa/web/css/flex_value/index.html b/files/fa/web/css/flex_value/index.html deleted file mode 100644 index 2dd81e4740..0000000000 --- a/files/fa/web/css/flex_value/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: -slug: Web/CSS/flex_value -tags: - - سی اس اس - - قالب بندی - - وب -translation_of: Web/CSS/flex_value ---- -
{{CSSRef}}
- -

<flex> CSS data type یک فاصله طولی منعطف را در یک جعبه محتوی گرید مشخص می‌کند. این نوع مقدار در {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} و سایر موارد مشابه استفاده می‌شود.

- -

سینتکس

- -

نوع داده <flex> به صورت {{cssxref("<number>")}} و در ادامه fr استفاده می‌شود. واحد fr کسری از فضای باقیمانده در جعبه محتوی گرید است. مانند سایر مقادیر در سی‌اس‌اس، بین مقدار و واحد فاصله‌ای نیست.

- -

مثال

- -
1fr    /* استفاده از یک عدد طبیعی */
-2.5fr  /* استفاده از یک عدد اعشاری */
-
- -

خصوصیات

- - - - - - - - - - - - - - - - -
خصوصیتوضعیتتوضیحات
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}{{Spec2("CSS Grid")}}تعریف اولیه.
- -

سازگاری با مرورگرها

- - - -

{{Compat("css.types.flex")}}

- -

مقالات مرتبط

- - diff --git a/files/fa/web/css/index.html b/files/fa/web/css/index.html deleted file mode 100644 index bfddd551f0..0000000000 --- a/files/fa/web/css/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 'CSS: شیوه‌نامه‌های آبشاری' -slug: Web/CSS -tags: - - CSS - - Design - - Layout - - NeedsTranslation - - References - - TopicStub -translation_of: Web/CSS ---- -

شیوه نامه‌های آبشاری (CSS) یک زبان شیوه نامه است که نحوه نمایش یک سند در قالب HTML یا XML (شامل زبان‌های متنوعی مثل SVG یا MathML  یا {{Glossary("XHTML", "", 1)}}) را شرح می دهد. CSS نحوه رندر شدن عناصر روی صفحه نمایش، روی کاغذ، در گفتار ، یا روی دیگر رسانه‌ها را شرح می‌دهد.

- -

CSS یکی از زبان‌های اصلی وب متن باز و دارای استاندارد برمبنای خصوصیات W3C است. در سطح‌های مختلف، CSS1 که الان منسوخ شده است، CSS2.1 که یک توصیه است و CSS3، که حالا به ماژول‌های کوچکتر شکسته شده است، و در حال پیشرفت در مسیر استانداردسازی است توسعه داده شده است.

- - - -
-
-

مستندات و آموزش‌ها در مورد CSS

- -
-
مفاهیم کلیدی CSS
-
نحو و قالب زبان و معرفی مفاهیم بنیادی مثل ویژگی و ارث‌بری، مدل جعبه‌ای و حاشیه سقوط، پشته‌سازی و محتوای فرمت‌دهی جعبه‌ای، یا مقادیر اولیه، محاسبه شده، استفاده شده و واقعی را شرح می‌دهد. موجودیت‌هایی مثل خصوصیات مختصر شده CSS نیز تعریف شده‌اند.
-
راهنمای توسعه دهنده CSS
-
مقالاتی برای کمک به شما تا تکنیک‌های CSS را یاد بگیرید و محتوی خودتان را درخشان کنید.
-
- -

ابزارهای ساده‌سازی توسعه CSS

- -
    -
  • سرویس تایید اعتبار W3C CSS چک می‌کند که یک CSS داده شده معتبر است. این یک ابزار ارزشمند است.
    • -
  • الحاقی فایرباگ فایرفاکس، یک الحاقی معروف برای هدایت ویرایش زنده CSS روی سایت‌های ملاقات شده است. برای تست بعضی تست‌ها خیلی کاربردی است، بهرحال این الحاقی کارهای بیشتری نیز انجام می‌دهد.
    • -
  • الحاقی توسعه وب نیز اجازه می‌دهد تا به‌صورت زنده CSS سایت‌های دیده شده را ببینید و ویرایش کنید. ساده‌تر از فایرباگ است، بهرحال قدرت کمتری دارد.
    • -
  • الحاقی EditCSS فایرفاکس اجازه ویرایش CSS در نوار کناری را می‌دهد.
    • -
- - - -
    -
  • منابع CSS را بدانید.
    • -
  • زبان‌های وب بازی که اغلب CSS روی آن‌ها اعمال شده است: HTML، SVG، XHTML، XML.
    • -
  • تکنولوژی‌های موزیلا که استفاده وسیعی از  CSS می‌کنند: XUL، الحاقی‌ها و تم‌ها‌ی فایرفاکس و تاندربیرد.
    • -
-
- -
- - -
    -
  • Pointer Events reached the Candidate Recommandation status, meaning that the CSS property touch-action, currently only implemented in IE10 (with the -ms- prefix), is no more experimental. (May 6th, 2013)
    • -
  • Gecko's support of flexible boxes has been adapted to match a recent specification clarification: from Firefox 23, and already in Nightly, {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. (May 3rd, 2013)
    • -
  • The CSSWG published a new working draft of the Selectors Level 4 specification. It still is in the exploring phase and most of the new features are not supported anywhere, but it refines the behavior of scoped selectors and added two new ones: :blank, a relaxed {{cssxref(":empty")}} matching elements only containing spaces and carriage returns, and :placeholder-shown. The two pseudo-classes :matches() and {{cssxref(":not", ":not()")}} have been tweaked to allow more complex parameters. But beware, as this is still a very early draft, these features may change in the future. (May 2nd, 2013)
    • -
- -

کمک گرفتن از کمیته‌ها

- -

شما در مورد مشکلات مربوط به  CSS احتیاج به کمک دارید و نمی‌توانید راه‌حل را در مستندات پیدا کنید؟

- -
    -
  • سوالات معمول CSS که تذکراتی جهت حل مشکلات معمول CSS را ارایه می‌دهد.
    • -
  • به Stack Overflow بروید، یک سایت مشترک ساحته شده و نگه‌دارنده Q&A است و می‌توانید پاسخ سوال خودتان را جستجو و پیدا کنید. اگر نه شما قادر خواهید بود که سوال خود را در آن‌جا مطرح کنید.
    • -
  • طرح مشورت در انجمن‌، که CSS و HTML را پوشش می‌دهند: سوال خود را در کانال IRC موزیلا بپرسید: #css - -
    • -
-
-
- -

diff --git a/files/fa/web/css/margin/index.html b/files/fa/web/css/margin/index.html deleted file mode 100644 index 99ad6b8b4e..0000000000 --- a/files/fa/web/css/margin/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: margin -slug: Web/CSS/margin -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -
{{CSSRef()}}
- -

خلاصه مطلب

- -

خواصیت margin درCSS حاشیه را برای چهار طرف عنصر مشخص می کند. این خواصیت خلاصه شده چهار خواصیت {{ Cssxref("margin-top") }} ،  {{ Cssxref("margin-right") }} ، {{ Cssxref("margin-bottom") }} و {{ Cssxref("margin-left") }} می باشد که برای جلوگیری از مقدار دهی به هر کدام از این خواص تعبیه شده است.

- -

همچنین قابلیت مقداردهی با مقادیر منفی را نیز داراست.

- -

روش استفاده

- -
/* به هر چهار جهت این مقدار اعمال می گردد */
-margin: 1em;
-
-/*افقی (قسمت چپ و راست) | عمودی (قسمت بالا و پایین) */
-margin: 5% auto;
-
-/* پایین | افقی(چپ و راست) | بالا */
-margin: 1em auto 2em;
-
-/* چپ | پایین | راست | بالا */
-margin: 2px 1em 0 auto;
-
-margin: وارث;
-
- -

مقادیر

- -

یک، دو، سه و یا چهار عدد از مقادیر زیر را می پذیرد:

- -
-
<length>
-
مقدار ثابتی را مشخص می کند. مقادیر منفی مورد قبول هستند. مقادیر قابل قبول را در {{cssxref("<length>")}} مشاهده کنید.
-
<percentage>
-
A {{cssxref("<percentage>")}} relative to the width of the containing block. Negative values are allowed.
-
auto
-
auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
- div { width:50%;  margin:0 auto; } centers the div container horizontally.
-
- - - -

Formal syntax

- -{{csssyntax("margin")}} - -

Examples

- -

Simple example

- -

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('Margin_Exemples') }}

- -

Another example

- -
margin: 5%;                /* all sides 5% margin */
-
-margin: 10px;              /* all sides 10px margin */
-
-margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */
-
-margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */
-
-margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
-
-margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */
-
-margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */
-
- -

Horizontal centering with margin: 0 auto;

- -

To center something horizontally in modern browsers, use display: flex; justify-content: center; .

- -

However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use margin: 0 auto;

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
-
- -

See also

- - diff --git a/files/fa/web/css/media_queries/index.html b/files/fa/web/css/media_queries/index.html deleted file mode 100644 index e1f92ab511..0000000000 --- a/files/fa/web/css/media_queries/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Media_Queries -tags: - - CSS - - CSS3 Media Queries - - Media Queries - - NeedsTranslation - - Overview - - Reference - - Responsive Design - - TopicStub -translation_of: Web/CSS/Media_Queries ---- -
{{CSSRef("CSS3 Media Queries")}}
- -

Media Queries are a key component of responsive design, which make it possible for CSS to adapt based on various parameters or device characteristics. For example, a media query can apply different styles if the screen is smaller than a certain size, or based on whether the user is holding their device in portrait or landscape mode. The {{cssxref("@media")}} at-rule is used to conditionally apply styles to a document.

- -

In addition, the media query syntax is also used in other contexts, such as in the {{HTMLElement("source")}} element's {{htmlattrxref("media", "source")}} attribute, which can be set to a media query string to use to determine whether or not to use that source when selecting the specific image to use in a {{HTMLElement("picture")}} element.

- -

In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

- -

You can learn more about programmatically using media queries in Testing media queries.

- -

Reference

- -

At-rules

- -
-
    -
  • {{cssxref("@import")}}
    • -
  • {{cssxref("@media")}}
    • -
-
- -

Guides

- -
-
Using media queries
-
Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
-
Testing media queries
-
Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
-
diff --git a/files/fa/web/css/media_queries/using_media_queries/index.html b/files/fa/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 9b6cdc27c1..0000000000 --- a/files/fa/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: ابزار تست رسانه پاسخگو -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries -original_slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو ---- -
{{cssref}}
- -

 ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.

- -

هدف قرار دادن انواع رسانه ها

- -

انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها  یا  صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS  چاپگر ها را هدف قرار میدهد :

- -
@media print { ... }
- -

همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور@media با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:

- -
@media screen, print { ... }
- -

برای مشاهده لیستی از رسانه های مختلف روی انواع رسانه کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از ویژگی های رسانه استفاده کنید.

- -

Targeting media features

- -

Media features describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

- -
@media (hover: hover) { ... }
- -

Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:

- -
@media (max-width: 12450px) { ... }
- -

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:

- -
@media (color) { ... }
- -

If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

- -
@media speech and (aspect-ratio: 11/5) { ... }
- -

For more media feature examples, please see the reference page for each specific feature.

- -

Creating complex media queries

- -

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not, and, and only. Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.

- -

In the previous example, we've already seen the and operator used to group a media type with a media feature. The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

- -
-

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

-
- -

and

- -

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
- -

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
- -

comma-separated lists

- -

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels or is a screen device in portrait mode:

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
- -

Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.

- -

not

- -

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

- -
@media not all and (monochrome) { ... }
-
- -

... so that the above query is evaluated like this:

- -
@media not (all and (monochrome)) { ... }
-
- -

... rather than like this:

- -
@media (not all) and (monochrome) { ... }
- -

As another example, the following media query:

- -
@media not screen and (color), print and (color) { ... }
-
- -

... is evaluated like this:

- -
@media (not (screen and (color))), print and (color) { ... }
- -

only

- -

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

- -
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
-
- -

Mozilla-specific media features

- -

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.

- - - -

WebKit-specific media features

- -

For WebKit-specific media features, please see the reference page for each specific feature.

- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
- {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatGeckoMobile(47)}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] grid media type is not supported.

- -

[2] Supports {{cssxref("<integer>")}} values only.

- -

[3] Supports {{cssxref("<number>")}} values, as per the spec.

- -

[4] tv media type is not supported.

- -

[5] See {{WebKitBug(22494)}}.

- -

[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference layout.css.prefixes.webkit defaulting to false. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

- -

[7] Implemented as aliases for min--moz-device-pixel-ratio and max--moz-device-pixel-ratio for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences layout.css.prefixes.webkit and layout.css.prefixes.device-pixel-ratio-webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

- -

[8] Only the fullscreen and browser values of display-mode were supported in 47. minimal-ui and standalone were added in Firefox 57.

- -

See also

- - diff --git a/files/fa/web/css/position/index.html b/files/fa/web/css/position/index.html deleted file mode 100644 index d0ccad0e5f..0000000000 --- a/files/fa/web/css/position/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: موقعیت -slug: Web/CSS/position -translation_of: Web/CSS/position ---- -

{{CSSRef}}

- -

خلاصه

- -

ویژگی position CSS قوانین دیگری برای موقعیت دادن به عناصر انتخاب می‌کند، طراحی شده تا برای افکت‌های انیمیشن نوشته شده مفید باشد.

- -

{{cssinfo}}

- -

یک عنصر  موقعیت گرفته عنصری است که ویژگی موقعیت محاسبه شده relative، absolute، یا fixed است.

- -

یک عنصر مستقل موقعیت گرفته شده عنصری است که ویژگی موقعیت محاسبه شده absolute یا fixed است.

- -

{{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} ویژگی‌هایی هستند که موقعیت عناصر موقعیت داده شده را مشخص می‌کنند.

- -

نحو

- -

 

- -
Formal syntax: {{csssyntax("position")}}
- -
position: static position: relative position: absolute position: fixed position: inherit
- -

مقادیر

- -

static

- -

رفتار عادی. ویژگی‌های top، right، bottom، و left اعمال نمی‌شوند.

- -

relative

- -

عناصر را طوری روی سطح پخش می‌کند گویی موقعیت داده نشدند، و  سپس موقعیت عنصر را تنظیم می‌کند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار می‌گذارد). position: relative روی عناصر table-*-group، table-row، table-column، table-cell، و table-caption بی تاثیر است.

- -

absolute

- -

برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نزدیک‌ترین والد موقعیت داده شده یا نسبت به بلوک شامل موقعیت می‌دهد. جعبه‌هایی که موقعیت مستقل دارند می‌توانند حاشیه/margin داشته باشند، آنها با هیچ یک از حواشی دیگر فروپاشی نمی‌کنند.

- -

fixed

- -

برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نما/viewport صفحه‌ی نمایش موقعیت می‌دهد و با حرکت دادن صفحه/scroll حرکت نمی‌کند. در زمان چاپ، در همان موقعیت روی هر صفحه ثابت می‌ماند.

- -

نمونه‌ها

- -

موقعیت دادن نسبی

- -

برای نسبی موقعیت دادن یک عنصر که از بالا و چپ ۲۰ پیکسل از موقعیت عادی خودش تفاوت دارد، دستور CSS زیر استفاده می‌شود.

- -
#two { position: relative; top: 20px; left: 20px; }
- -

به عناصر دیگر توجه کنید که چطور نمایش داده می‌شوند در حالی که "Two" در موقعیت عادی خودش بود و فضا درنظر می‌گیرد.

- -

- -

موقعیت دادن مستقل

- -

عناصری که نسبی موقعیت داده شدند همچنان در روند عادی عناصر در سند درنظر گرفته می‌شوند. در مقابل، عنصری که مستقل موقعیت داده شده از روند خارج شده بنابراین زمانی که عناصر دیگر قرار داده می‌شود هیچ فضایی نمی‌گیرد. عنصری که موقعیت مستقل گرفته است موقعیت نسبی نسبت به نزدیک‌ترین والد موقعیت داده شده دارد. اگر والدی که موقعیت گرفته باشه وجود نداشته باشد، ظرف آغازین استفاده می‌شود.

- -

در مثال زیر، والد آبی رنگ div موقعیت نسبی گرفته است (پس نزدیک‌ترین والد موقعیت گرفته شده خواهد بود) و جعبه‌ی Two مستقل موقعیت گرفته است:

- -
#ancestor { position: relative; background: #ddf; width: 500px; }
-
-#two { position: absolute; top: 20px; left: 20px; }
- -

- -

اگر #ancestor موقعیت نسبی نداشته بود، جعبه‌ی Two با موقعیت نسبی نسبت به بالاترین گوشه سمت چپ صفحه ظاهر می‌شد.

- -

موقعیت دادن ثابت

- -

موقعیت ثابت مشابه موقعیت دادن مستقل است، با این استثنا که بلوک شامل عنصر همان نما/viewport است. این موقعیت اغلب برای ساخت یک عنصر شناوری که حتی پس از حرکت دادن صفحه/scroll در همان موقعیت می‌ماند استفاده می‌شود. در مثال زیر جعبه‌ی "One" با فاصله‌ی ۸۰ پیکسل از بالا و صفحه و ۲۰ پیکسل از سمت چپ موقعیت ثابت دارد:

- -
#one { position: fixed; top: 80px; left:20px; }
- -

وقتی بالای صفحه را نگاه می‌کنید، جعبه در بالاترین گوشه سمت چپ ظاهر می‌شود، و پس از حرکت دادن صفحه، در همان جایگاه نسبی نسبت به نما باقی می‌ماند:

- -

- -

- -

نکات

- -

برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}}  جابجایی عمودی از موقعیت عادی و ویژگی {{Cssxref("left")}} یا {{Cssxref("right")}} جابجایی افقی را تعیین می‌کنند.

- -

برای عناصری که موقعیت مستقل دارند، ویژگی‌های {{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} جابجایی‌ها از ضلع بلوک شامل عنصر(عنصری که نسبت به آن موقعیت نسبی دارد) تعیین می‌کنند. حاشیه برای آن عنصر اگر وجود داشته باشد نخست حاشیه‌ها اعمال می‌شوند سپس جابجایی‌ها.

- -

اکثر اوقات، عناصر مستقل موقعیت گرفته شده مقادیر خودکار/auto برای {{Cssxref("height")}} و {{Cssxref("width")}} دارند تا طول و عرض عنصر متناسب با محتوای آن تغییر کند.

- -

اگر {{Cssxref("top")}} و {{Cssxref("bottom")}} هر دو تعیین شوند(فنی، نه خودکار)، {{Cssxref("top")}} برنده می‌شود.

- -

اگر }}Cssxref("left")}} و {{Cssxref("right")}} هر دو تعیین شوند، {{Cssxref("left")}} وقتی {{Cssxref("direction")}} ltr/چپ به راست هست (انگلیسی، ژاپنی افقی، غیره.) و {{Cssxref("right")}} برنده خواهد شد وقتی {{Cssxref("direction")}} rtl/راست به چپ هست(پارسی، عبری، غیره.).

- -

مشخصات

- - - - - - - - - - - - - - - - -
دیدگاهوضعیتمشخصات
 {{Spec2('CSS2.1')}}{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}
- -

سازگاری مرورگر

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0) ({{anch("Gecko notes", "See notes")}})4.04.01.0 (85)
fixed value1.01.0 (1.0)7.04.01.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0 (1.0) ({{anch("Gecko notes", "See notes")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

 

diff --git a/files/fa/web/css/pseudo-elements/index.html b/files/fa/web/css/pseudo-elements/index.html deleted file mode 100644 index ab3de8d597..0000000000 --- a/files/fa/web/css/pseudo-elements/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Pseudo-elements -slug: Web/CSS/Pseudo-elements -translation_of: Web/CSS/Pseudo-elements ---- -
{{CSSRef}}
- -

یک CSS pseudo-element کلمه کلیدی است که به انتخابگر اضافه می‌شود و اجازه می‌دهد قسمت خاصی از عنصر انتخاب شده را آرایش کنید. برای مثال، {{ Cssxref("first-line::") }} می‌تواند برای تغییر نوشتار و رنگ خط اول یک پاراگراف مورد استفاده قرار گیرد.

- -
/* The first line of every <p> element. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

Note: In contrast to pseudo-elements, {{cssxref("pseudo-classes")}} can be used to style an element based on its state.

-
- -

Syntax

- -
selector::pseudo-element {
-  property: value;
-}
- -

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

- -
-

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

-
- -

Index of standard pseudo-elements

- -
-
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ cssxref("::cue")}}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::slotted") }}
    • -
  • {{ Cssxref("::backdrop") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BrowserLowest VersionSupport of
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

See also

- - diff --git a/files/fa/web/css/specificity/index.html b/files/fa/web/css/specificity/index.html deleted file mode 100644 index fe692075a4..0000000000 --- a/files/fa/web/css/specificity/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Specificity -slug: Web/CSS/Specificity -translation_of: Web/CSS/Specificity ---- -

 

- -
{{CSSRef}}
- -

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

- -

How is specificity calculated?

- -

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

- -
-

Note: Proximity of elements in the document tree has no effect on the specificity.

-
- -

Selector Types

- -

The following list of selector types increases by specificity:

- -
    -
  1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
    2. -
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
    3. -
  3. ID selectors (e.g., #example).
    4. -
- -

Universal selector ({{CSSxRef("Universal_selectors", "*")}}), combinators ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) and negation pseudo-class ({{CSSxRef(":not", ":not()")}}) have no effect on specificity. (The selectors declared inside :not() do, however.)

- -

For more information, visit: https://specifishity.com

- -

Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

- -

The !important exception

- -

When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

- -

Some rules of thumb:

- - - -

Instead of using !important, consider:

- -
    -
  1. Make better use of the CSS cascade
    2. -
  2. -

    Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority:

    - - 
    <div id="test">
-  <span>Text</span>
-</div>
-
    - - 
    div#test span { color: green; }
-div span { color: blue; }
-span { color: red; }
    - -

    No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)

    -
    3. -
  3. As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. - 
    #myId#myId span { color: yellow; }
-.myClass.myClass span { color: orange; }
    -
    4. -
- -

How !important can be used:

- -
A) Overriding inline styles
- -

Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.

- -

In this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.

- -
<div class="foo" style="color: red;">What color am I?</div>
-
- -
.foo[style*="color: red"] {
-  color: firebrick !important;
-}
-
- -

Many JavaScript frameworks and libraries add inline styles. Using !important with a very targeted selector is one way to override these inline styles.

- -
B) Overriding high specificity
- -
#someElement p {
-  color: blue;
-}
-
-p.awesome {
-  color: red;
-}
- -

How do you make awesome paragraphs always turn red, even ones inside #someElement? Without !important, the first rule will have more specificity and will win over the second rule.

- -

How to override !important

- -

A) Add another CSS rule with !important, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.

- -

Some examples with a higher specificity:

- -
table td    { height: 50px !important; }
-.myTable td { height: 50px !important; }
-#myTable td { height: 50px !important; }
-
- -

B) Or add the same selector after the existing one:

- -
td { height: 50px !important; }
- -

C) Or, preferably, rewrite the original rule to avoid the use of !important altogether.

- -
[id="someElement"] p {
-  color: blue;
-}
-
-p.awesome {
-  color: red;
-}
- -

Including an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. Both selectors above now have the same weight. In a specificity tie, the last rule defined wins.

- -

For more information, visit:

- - - -

The :is() and :not() exceptions

- -

The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are not considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.

- -
-

This chunk of CSS ...

- -
div.outer p {
-  color: orange;
-}
-
-div:not(.outer) p {
-  color: blueviolet;
-}
-
- -

... when used with the following HTML ...

- -
<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-
- -

... appears on the screen like this:

- -

{{EmbedLiveSample("The_not_exception-example")}}

-
- -

The :where() exception {{Experimental_Inline}}

- -

{{SeeCompatTable}}

- -

The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.

- -

This chunk of CSS ...

- -
div:where(.outer) p {
-  color: orange;
-}
-
-div p {
-  color: blueviolet;
-}
-
- - - -

... when used with the following HTML ...

- - - -
<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-
- -

... appears on the screen like this:

- -

{{EmbedLiveSample("The_where_exception")}}

- -

Form-based specificity

- -

Specificity is based on the form of a selector. In the following case, the selector *[id="foo"] counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.

- -

The following CSS styles ...

- -
*#foo {
-  color: green;
-}
-
-*[id="foo"] {
-  color: purple;
-}
-
- -

... when used with this markup ...

- -
<p id="foo">I am a sample text.</p>
-
- -

... end up looking like this:

- -

{{EmbedLiveSample("Form-based_specificity")}}

- -

This is because it matches the same element but the ID selector has a higher specificity.

- -

Tree proximity ignorance

- -

The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...

- -
body h1 {
-  color: green;
-}
-
-html h1 {
-  color: purple;
-}
-
- -

... with the following HTML ...

- -
<html>
-  <body>
-    <h1>Here is a title!</h1>
-  </body>
-</html>
-
- -

... will render as:

- -

{{EmbedLiveSample("Tree_proximity_ignorance")}}

- -

This is because the two declarations have equal selector type counts, but the html h1 selector is declared last.

- -

Directly targeted elements vs. inherited styles

- -

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. This CSS ...

- -
#parent {
-  color: green;
-}
-
-h1 {
-  color: purple;
-}
- -

... with the following HTML ...

- -
<html>
-  <body id="parent">
-    <h1>Here is a title!</h1>
-  </body>
-</html>
- -

... will also render as:

- -

{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}

- -

This is because the h1 selector targets the element specifically, but the green selector is only inherited from its parent.

- -

Specifications

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}Add pseudo-elements.
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}Add pseudo-classes.
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}Initial definition.
-
- -

See also

- - diff --git a/files/fa/web/css/top/index.html b/files/fa/web/css/top/index.html deleted file mode 100644 index b0b4af4e6f..0000000000 --- a/files/fa/web/css/top/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: بالا -slug: Web/CSS/top -tags: - - top - - بالا -translation_of: Web/CSS/top ---- -
{{CSSRef}}
- -

خلاصه مطلب

- -

ویژگی CSS top قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.

- -

برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}: absolute یا {{Cssxref("position")}}: fixed هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.

- -

برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}}: relative هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.

- -

وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شده‌ی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته می‌شود.

- -

{{cssinfo}}

- -

روش استفاده

- -
Formal syntax: {{csssyntax("top")}}
-
- -
top: 3px         /* <length> مقادیر */
-top: 2.4em
-
-top: 10%         /* <percentages> of the height of the containing block */
-
-top: auto
-
-top: inherit
-
- -

مقادیر

- -
-
<طول>
-
یک عدد منفی، null، یا مثبت  هست که {{cssxref("<length>")}} نشان می‌دهد:
-
-
    -
  • برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛
    • -
  • برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow)  موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.
    • -
-
-
<درصد>
-
یک {{cssxref("<percentage>")}} از ارتفاع بلوک شامل است، همانطور که در خلاصه شرح داده شد مورد استفاده قرار می‌گیرد.
-
خودکار
-
کلیدواژه‌ای است که بیان می‌کند:
-
-
    -
  • برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم می‌شود: auto بعنوان ارتفاع بر مبنای محتوا.
    • -
  • برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای  ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم auto باشد، عنصر را جابجا نمی‌کند.
    • -
-
-
به ارث بردن
-
کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).
-
مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{cssxref("<length>")}}، {{cssxref("<percentage>") }}، یا کلیدواژه‌ی auto است بکار می‌رود.
-
- -

نمونه‌ها

- -
/* body می‌تواند با واحد px تعیین شود همینطور برای div */
-body{
-  width: 100%;
-  height: 100%;
-}
-
-/* برای div هم می‌توان از واحد ٪ استفاده کرد */
-div {
-  position: absolute;
-  left: 15%;
-  top: 30%;
-  bottom: 30%;
-  width: 70%;
-  height: 40%;
-  text-align: left;
-  border: 3px rgb(0,0,0) solid;
-}
- -
 <?xml version="1.0" encoding="utf-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-   <head>
-     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
-     <title>Mozilla.org height top left width percentage CSS</title>
-     <style type="text/css">
-       /* body می‌تواند با واحد px تعیین شود همینطور برای div */
-       body {
-         width: 100%;
-         height: 100%;
-       }
-       /* برای div هم می‌توان از واحد ٪ استفاده کرد */
-       div {
-         position: absolute;
-         left: 15%;
-         top: 30%;
-         bottom: 30%;
-         width: 70%;
-         height: 40%;
-         text-align: left;
-         border: 3px rgb(0,0,0) solid;
-       }
-     </style>
-   </head>
-   <body>
-      <center>
-        <div>
-             ...محتوای آزمایشی...
-        </div>
-      </center>
-
-   </body>
- </html>
- -

مشخصات

- - - - - - - - - - - - - - - - - - - - - -
مشخصاتوضعیتدیدگاه
{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}{{Spec2('CSS3 Transitions')}}Defines top as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}{{Spec2('CSS2.1')}}Initial specification
- -

سازگاری مرورگر

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fa/web/css/transform-function/index.html b/files/fa/web/css/transform-function/index.html deleted file mode 100644 index 8e2080e302..0000000000 --- a/files/fa/web/css/transform-function/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: -slug: Web/CSS/transform-function -tags: - - CSS - - CSS Data Type - - CSS Transforms - - Layout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/CSS/transform-function ---- -
{{CSSRef}}
- -

The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.

- -

Describing transformations mathematically

- -

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

- -

Cartesian coordinates

- -

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

- -

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

- -

Transformation functions

- -

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:

- -
-

ac bd

-
- -

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

- -
- -


- It is even possible to apply several transformations in a row:

- -
- -


- With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

- -

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

- -
-

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3x3 transformation matrices, and can simply express translations as linear functions.

-
- -

Syntax

- -

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

- -

Matrix transformation

- -
-
{{cssxref("transform-function/matrix","matrix()")}}
-
Describes a homogeneous 2D transformation matrix.
-
{{cssxref("transform-function/matrix3d","matrix3d()")}}
-
Describes a 3D transformation as a 4x4 homogeneous matrix.
-
- -

Perspective

- -
-
{{cssxref("transform-function/perspective","perspective()")}}
-
Sets the distance between the user and the z=0 plane.
-
- -

Rotation

- -
-
{{cssxref("transform-function/rotate","rotate()")}}
-
Rotates an element around a fixed point on the 2D plane.
-
{{cssxref("transform-function/rotate3d","rotate3d()")}}
-
Rotates an element around a fixed axis in 3D space.
-
{{cssxref("transform-function/rotateX","rotateX()")}}
-
Rotates an element around the horizontal axis.
-
{{cssxref("transform-function/rotateY","rotateY()")}}
-
Rotates an element around the vertical axis.
-
{{cssxref("transform-function/rotateZ","rotateZ()")}}
-
Rotates an element around the z-axis.
-
- -

Scaling (resizing)

- -
-
{{cssxref("transform-function/scale","scale()")}}
-
Scales an element up or down on the 2D plane.
-
{{cssxref("transform-function/scale3d","scale3d()")}}
-
Scales an element up or down in 3D space.
-
{{cssxref("transform-function/scaleX","scaleX()")}}
-
Scales an element up or down horizontally.
-
{{cssxref("transform-function/scaleY","scaleY()")}}
-
Scales an element up or down vertically.
-
{{cssxref("transform-function/scaleZ","scaleZ()")}}
-
Scales an element up or down along the z-axis.
-
- -

Skewing (distortion)

- -
-
{{cssxref("transform-function/skew","skew()")}}
-
Skews an element on the 2D plane.
-
{{cssxref("transform-function/skewX","skewX()")}}
-
Skews an element in the horizontal direction.
-
{{cssxref("transform-function/skewY","skewY()")}}
-
Skews an element in the vertical direction.
-
- -

Translation (moving)

- -
-
{{cssxref("transform-function/translate","translate()")}}
-
Translates an element on the 2D plane.
-
{{cssxref("transform-function/translate3d","translate3d()")}}
-
Translates an element in 3D space.
-
{{cssxref("transform-function/translateX","translateX()")}}
-
Translates an element horizontally.
-
{{cssxref("transform-function/translateY","translateY()")}}
-
Translates an element vertically.
-
{{cssxref("transform-function/translateZ","translateZ()")}}
-
Translates an element along the z-axis.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
- -

Browser compatibility

- -

 

- - - -

{{Compat("css.types.transform-function")}}

- -

 

- -

See also

- -
    -
  • CSS {{cssxref("transform")}} property
    • -
diff --git a/files/fa/web/css/transform-function/rotate()/index.html b/files/fa/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 28c924605d..0000000000 --- a/files/fa/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

تابع ()rotate یک جابجایی که چرخشی دوبعدی نسبت به نقطه‌ای ثابت است را بوجود می‌آورد. نوع خروجی این تابع از جنس {{cssxref("<transform-function>")}} می‌باشد.

- -

- -

محور چرخش از طریق مقدار دهی خاصیت {{ cssxref("transform-origin") }} مشخص می‌شود.

- -

نحو

- -

مقدار ساخته شده با تابع ()rotate برای چرخش، توسط {{cssxref("<angle>")}} مشخص می‌شود. اگر علامت آن مثبت باشه در جهت ساعتگرد حرکت می‌کند؛ اگر منفی باشد در جهت پاد ساعتگرد حرکت می‌کند. چرخش  °180 بازتاب نقطه نامیده می‌شود.

- -
rotate(a)
-
- -

مقادیر

- -
-
a
-
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

مثال‌ها

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples", "auto", 180)}}

- -

سازگاری مرورگرها

- -

برای اطلاعات مربوط به سازگاری، لطفا <transform-function> را ببنید.

- -

See also

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • rotate3d()
    • -
diff --git a/files/fa/web/css/type_selectors/index.html b/files/fa/web/css/type_selectors/index.html deleted file mode 100644 index 210bb4d78e..0000000000 --- a/files/fa/web/css/type_selectors/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: انتخابگر نوع -slug: Web/CSS/Type_selectors -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/انتخابگرـنوع ---- -
{{CSSRef}}
- -

انتخابگر نوع با نوع عنصر انتخاب می‌کند. به عبارت دیگر این انتخابگر به وسیله نوع عنصر، تمام عنصرهای تطابق داده شده را انتخاب می‌کند.

- -
/* را انتخاب می‌کند <a> همه عنصرهای */
-a {
-  color: red;
-}
- -

Syntax

- -
element { style properties }
-
- -

Example

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Here's a span with some text.</span>
-<p>Here's a p with some text.</p>
-<span>Here's a span with more text.</span>
-
- -

Result

- -

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

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- - - -

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

diff --git a/files/fa/web/css/zoom/index.html b/files/fa/web/css/zoom/index.html deleted file mode 100644 index c2a14b9bbf..0000000000 --- a/files/fa/web/css/zoom/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: بزرگنمایی -slug: Web/CSS/zoom -translation_of: Web/CSS/zoom -original_slug: Web/CSS/بزرگنمایی ---- -
{{CSSRef}}{{Non-standard_header}}
- -

The non-standard zoom CSS property can be used to control the magnification level of an element. {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

- -
/* Keyword values */
-zoom: normal;
-zoom: reset;
-
-/* <percentage> values */
-zoom: 50%;
-zoom: 200%;
-
-/* <number> values */
-zoom: 1.1;
-zoom: 0.7;
-
-/* Global values */
-zoom: inherit;
-zoom: initial;
-zoom: unset;
- -

{{cssinfo}}

- -

Syntax

- -

Values

- -
-
normal
-
Render this element at its normal size.
-
reset {{non-standard_inline}}
-
Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-- or Ctrl++ keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).
-
{{cssxref("<percentage>")}}
-
Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
-
{{cssxref("<number>")}}
-
Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

First example

- -

HTML

- -
<p class="small">Small</p>
-<p class="normal">Normal</p>
-<p class="big">Big</p>
- -

CSS

- -
p.small {
-  zoom: 75%;
-}
-p.normal {
-  zoom: normal;
-}
-p.big {
-  zoom: 2.5;
-}
-p {
-  display: inline-block;
-}
-p:hover {
-  zoom: reset;
-}
-
- -

Result

- -

{{EmbedLiveSample('First_example')}}

- -

Second example

- -

HTML

- -
<div id="a" class="circle"></div>
-<div id="b" class="circle"></div>
-<div id="c" class="circle"></div>
- -

CSS

- -
div.circle {
-  width: 25px;
-  height: 25px;
-  border-radius: 100%;
-  text-align: center;
-  vertical-align: middle;
-  display: inline-block;
-  zoom: 1.5;
-}
-div#a {
-  background-color: gold;
-  zoom: normal;
-}
-div#b {
-  background-color: green;
-  zoom: 200%;
-}
-div#c {
-  background-color: blue;
-  zoom: 2.9;
-}
-
- -

Result

- -

{{EmbedLiveSample('Second_example')}}

- -

Specifications

- -

This property is nonstandard and originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.

- -

Browser compatibility

- - - -

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

- -

See also

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