adambard/learnxinyminutes-docs
1
1
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-11-23 06:03:07 +03:00
Code Issues Projects Releases Wiki Activity

Edit some translation behavior in links and codes

Browse Source
This commit is contained in:
Arashk-A 2015-10-22 02:16:31 +03:30
parent debf4073bd
commit ce85711575
1 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
fa-ir/css.html.markdown
View File

@ -34,6 +34,7 @@ selector { property: value; /* more properties...*/ }
<p dir='rtl'>با استفاده از ستاره می توان برای همه عناصر روی صفحه استایل تعریف کرد</p> <p dir='rtl'>با استفاده از ستاره می توان برای همه عناصر روی صفحه استایل تعریف کرد</p>
```CSS ```CSS
* { color:red; } * { color:red; }
``` ```
@ -45,7 +46,8 @@ selector { property: value; /* more properties...*/ }
``` ```
<p dir='rtl'>شما میتوانید با استفاده از نام کلاس آنرا انتخاب کنید</p> <p dir='rtl'>شما میتوانید با استفاده از نام کلاس آنرا انتخاب کنید</p>
‍‍```CSS
```CSS
.some-class { } .some-class { }
``` ```
@ -67,37 +69,37 @@ selector { property: value; /* more properties...*/ }
div { } div { }
``` ```
<p dir='rtl'>یا با استفاده از 'attr'</p> <p dir='rtl'>یا با استفاده از `attr`</p>
```CSS ```CSS
[attr] { font-size:smaller; } [attr] { font-size:smaller; }
``` ```
<p dir='rtl'>یا با استفاده از ارزشی که برای 'attr' مشخص شده</p> <p dir='rtl'>یا با استفاده از ارزشی که برای `attr` مشخص شده</p>
```CSS ```CSS
[attr='value'] { font-size:smaller; } [attr='value'] { font-size:smaller; }
``` ```
<p dir='rtl'>با استفاده از ارزشی که برای 'attr' مشخص شده و آن ارزش با 'val' شروع میشود در CSS3</p> <p dir='rtl'>با استفاده از ارزشی که برای `attr` مشخص شده و آن ارزش با `val` شروع میشود در CSS3</p>
```CSS ```CSS
[attr^='val'] { font-size:smaller; } [attr^='val'] { font-size:smaller; }
``` ```
<p dir='rtl'>با استفاده از ارزشی که برای 'attr' مشخص شده و آن ارزش با 'ue' به پایان میرسد در CSS3</p> <p dir='rtl'>با استفاده از ارزشی که برای `attr` مشخص شده و آن ارزش با `ue` به پایان میرسد در CSS3</p>
```CSS ```CSS
[attr$='ue'] { font-size:smaller; } [attr$='ue'] { font-size:smaller; }
``` ```
<p dir='rtl'>یا با انتخاب بوسیله یکی از ارزشهایی که در لیست 'otherAttr' بوسیله فاصله از هم جدا شده اند در CSS3</p> <p dir='rtl'>یا با انتخاب بوسیله یکی از ارزشهایی که در لیست `otherAttr` بوسیله فاصله از هم جدا شده اند در CSS3</p>
```CSS ```CSS
[attr$='ue'] { font-size:smaller; } [attr$='ue'] { font-size:smaller; }
``` ```
<p dir='rtl'>یا ارزش('value') دقیقاً خود ارزش('value') یا بوسیله '-' که یونیکد (U+002D) از حرف بعدی جدا شود</p> <p dir='rtl'>یا ارزش(`value`) دقیقاً خود ارزش(`value`) یا بوسیله `-` که یونیکد (U+002D) از حرف بعدی جدا شود</p>
```CSS ```CSS
[otherAttr|='en'] { font-size:smaller; } [otherAttr|='en'] { font-size:smaller; }
@ -110,14 +112,14 @@ div.some-class[attr$='ue'] { }
``` ```
<p dir='rtl'>CSS این امکان را به شما میدهد که یک عنصر را بوسیله والدین آن انتخاب کنید</p> <p dir='rtl'>CSS این امکان را به شما میدهد که یک عنصر را بوسیله والدین آن انتخاب کنید</p>
<p dir='rtl'>برای مثال دستور زیر همه عناصری را که نام کلاس آنها <span dir="ltr">'.class-name'</span> و دارای پدر و مادری با این مشخصه <span dir="ltr">'div.some-parent'</span> هستند را انتخاب میکند.</p> <p dir='rtl'>برای مثال دستور زیر همه عناصری را که نام کلاس آنها <span dir="ltr">`.class-name`</span> و دارای پدر و مادری با این مشخصه <span dir="ltr">`div.some-parent`</span> هستند را انتخاب میکند.</p>
```CSS ```CSS
div.some-parent > .class-name {} div.some-parent > .class-name {}
``` ```
<p dir='rtl'>یا دستور زیر که همه عناصری را که نام کلاس آنها <span dir="ltr">'.class-name'</span> و داخل عنصری با مشخصه <span dir="ltr">'div.some-parent'</span> هستند را در هر عمقی که باشند (یعنی فرزندی از فرزندان <span dir="ltr">'div.some-parent'</span><span dir="ltr"> باشند) انتخاب میکند.</p> <p dir='rtl'>یا دستور زیر که همه عناصری را که نام کلاس آنها <span dir="ltr">`.class-name`</span> و داخل عنصری با مشخصه <span dir="ltr">`div.some-parent`</span> هستند را در هر عمقی که باشند (یعنی فرزندی از فرزندان <span dir="ltr">`div.some-parent`</span><span dir="ltr"> باشند) انتخاب میکند.</p>
```CSS ```CSS
div.some-parent .class-name {} div.some-parent .class-name {}
@ -129,13 +131,13 @@ div.some-parent .class-name {}
div.some-parent.class-name {} div.some-parent.class-name {}
``` ```
<p dir='rtl'>دستور زیر همه عناصری را که نام کلاس آنها <span dir="ltr">'.this-element'</span> و بلافاصله بعد از عنصری با مشخصه <span dir="ltr">'.i-am-before'</span> قرار دارد را انتخاب میکند.</p> <p dir='rtl'>دستور زیر همه عناصری را که نام کلاس آنها <span dir="ltr">`.this-element`</span> و بلافاصله بعد از عنصری با مشخصه <span dir="ltr">`.i-am-before`</span> قرار دارد را انتخاب میکند.</p>
```CSS ```CSS
.i-am-before + .this-element { } .i-am-before + .this-element { }
``` ```
<p dir='rtl'>هر خواهر یا برادری که بعد از <span dir="ltr">'.i-am-before'</span> بیاید در اینجا لازم نیست بلافاصله بعد از هم قرار بگیرند ولی باید دارای پدر و مادری یکسان باشند.</p> <p dir='rtl'>هر خواهر یا برادری که بعد از <span dir="ltr">`.i-am-before`</span> بیاید در اینجا لازم نیست بلافاصله بعد از هم قرار بگیرند ولی باید دارای پدر و مادری یکسان باشند.</p>
```CSS ```CSS
.i-am-any-before ~ .this-element {} .i-am-any-before ~ .this-element {}
@ -178,8 +180,8 @@ selector {
width: 5cm; /* بر اساس سانتیمتر */ width: 5cm; /* بر اساس سانتیمتر */
min-width: 50mm; /* بر اساس میلیمتر */ min-width: 50mm; /* بر اساس میلیمتر */
max-width: 5in; /* بر اساس اینچ. max-(width|height) */ max-width: 5in; /* بر اساس اینچ. max-(width|height) */
height: 0.2vh; /* بر اساس ارتفاع دید 'vh = نسبت به 1٪ از ارتفاع دید' (CSS3) */ height: 0.2vh; /* بر اساس ارتفاع دید `vh = نسبت به 1٪ از ارتفاع دید` (CSS3) */
width: 0.4vw; /* بر اساس عرض دید 'vw = نسبت به 1٪ از عرض دید' (CSS3) */ width: 0.4vw; /* بر اساس عرض دید `vw = نسبت به 1٪ از عرض دید` (CSS3) */
min-height: 0.1vmin; /* بر اساس کوچکترین مقدار از ارتفاع یا عرض دید (CSS3) */ min-height: 0.1vmin; /* بر اساس کوچکترین مقدار از ارتفاع یا عرض دید (CSS3) */
max-width: 0.3vmax; /* مانند مثال بالا برای بیشترین مقدار (CSS3) */ max-width: 0.3vmax; /* مانند مثال بالا برای بیشترین مقدار (CSS3) */
@ -208,13 +210,13 @@ selector {
<h2 dir='rtl'>نحوه استفاده</h2> <h2 dir='rtl'>نحوه استفاده</h2>
<p dir='rtl'>هر دستور CSS را که می خواهید در فایلی با پسوند <span dir="ltr">.css</span> ذخیره کنید </p> <p dir='rtl'>هر دستور CSS را که می خواهید در فایلی با پسوند <span dir="ltr">.css</span> ذخیره کنید </p>
<p dir='rtl'>حالا با استفاده از کد زیر آنرا در قسمت 'head' داخل فایل html خود تعریف کنید </p> <p dir='rtl'>حالا با استفاده از کد زیر آنرا در قسمت `head` داخل فایل html خود تعریف کنید </p>
```html ```html
<link rel='stylesheet' type='text/css' href='path/to/style.css' /> <link rel='stylesheet' type='text/css' href='path/to/style.css' />
``` ```
<p dir='rtl'>یا میتوان با استفاده از تگ 'style' درون 'head' دستورات CSS را به صورت درون برنامه ای تعریف کرد اما توسیه میشود تا جای ممکن از این کار اجتناب کنید. </p> <p dir='rtl'>یا میتوان با استفاده از تگ `style` درون `head` دستورات CSS را به صورت درون برنامه ای تعریف کرد اما توسیه میشود تا جای ممکن از این کار اجتناب کنید. </p>
```html ```html
<style> <style>
@ -252,6 +254,7 @@ p {}
/*E*/ /*E*/
p { property: value !important; } p { property: value !important; }
``` ```
<p dir='rtl'>و همچنین به کد زیر:</p> <p dir='rtl'>و همچنین به کد زیر:</p>
@ -259,16 +262,17 @@ p { property: value !important; }
```html ```html
<p style='/*F*/ property:value;' class='class1 class2' attr='value'> <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p> </p>
``` ```
‍‍ ‍‍
<p dir='rtl'>حق تقدم یا اولویت برای مثال بالا به این صورت است:</p> <p dir='rtl'>حق تقدم یا اولویت برای مثال بالا به این صورت است:</p>
<p dir='rtl'>توجه داشته باشید که حق تقدم برای هر کدام از ویژگیها است نه برای کل مجموعه.</p> <p dir='rtl'>توجه داشته باشید که حق تقدم برای هر کدام از ویژگیها است نه برای کل مجموعه.</p>
<p dir='rtl'>E دارای بیشترین الویت برای اینکه از <span dir="ltr">'!important'</span> استفاده کرده.</p> <p dir='rtl'>E دارای بیشترین الویت برای اینکه از <span dir="ltr">`!important`</span> استفاده کرده.</p>
<p dir='rtl'>اما توصیه میشود تا جای ممکن از این کار اجتناب کنید مگر اینکه اینکار ضرورت داشته باشد</p> <p dir='rtl'>اما توصیه میشود تا جای ممکن از این کار اجتناب کنید مگر اینکه اینکار ضرورت داشته باشد</p>
<p dir='rtl'>اولویت بعدی با F است زیرا که از روش درون برنامه ای استفاده کرده </p> <p dir='rtl'>اولویت بعدی با F است زیرا که از روش درون برنامه ای استفاده کرده </p>
<p dir='rtl'>اولویت بعدی با A است زیرا که بیشتر از بقیه مشخص تر تعریف شپه </p> <p dir='rtl'>اولویت بعدی با A است زیرا که بیشتر از بقیه مشخص تر تعریف شپه </p>
<p dir='rtl'>مشخص تر = مشخص کننده بیشتر. دارای ۳ مشخص کننده: ۱ تگ <span dir="ltr">'p'</span> + ۱ کلاس با نام <span dir="ltr">'class1'</span> + ۱ خاصیت <span dir="ltr">'attr="value"'</span></p> <p dir='rtl'>مشخص تر = مشخص کننده بیشتر. دارای ۳ مشخص کننده: ۱ تگ <span dir="ltr">`p`</span> + ۱ کلاس با نام <span dir="ltr">`class1`</span> + ۱ خاصیت <span dir="ltr">`attr="value"`</span></p>
<p dir='rtl'>اولویت بعدی با C است که مشخصه یکسانی با B دارد ولی بعد از آن تعریف شده است.</p> <p dir='rtl'>اولویت بعدی با C است که مشخصه یکسانی با B دارد ولی بعد از آن تعریف شده است.</p>
<p dir='rtl'>اولویت بعدی با B</p> <p dir='rtl'>اولویت بعدی با B</p>
<p dir='rtl'>و در آخر D</p> <p dir='rtl'>و در آخر D</p>
@ -277,23 +281,19 @@ p { property: value !important; }
<p dir='rtl'>بسیار از ویژگیهای CSS2 (و به تدریج CSS3) بر روی تمام مرورگرها و دستگاه ها سازگارند.اما همیشه حیاتی است که سازگاری CSS مورد استفاده خود را با مرورگر هدف چک کنید.</p> <p dir='rtl'>بسیار از ویژگیهای CSS2 (و به تدریج CSS3) بر روی تمام مرورگرها و دستگاه ها سازگارند.اما همیشه حیاتی است که سازگاری CSS مورد استفاده خود را با مرورگر هدف چک کنید.</p>
<p dir='rtl'><span dir="ltr">[QuirksMode CSS](http://www.quirksmode.org/css/)</span> یک منبع خوب برای این کار است</p> <p dir='rtl'> یک منبع خوب برای این کار است</p>
[QuirksMode CSS](http://www.quirksmode.org/css/)
<p dir='rtl'>برای یک تست سازگاری سریع, <span dir="ltr">[CanIUse](http://caniuse.com/)</span> منبع بزرگی برای این کار است.</p> <p dir='rtl'>برای یک تست سازگاری سریع, منبع زیر میتواند کمک بزرگی برای این کار باشد.</p>
[CanIUse](http://caniuse.com/)
<h2 dir='rtl'> منابع دیگر </h2> <h2 dir='rtl'> منابع دیگر </h2>
<ul>
<li> [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
<p>[Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)</p>
</li> [QuirksMode CSS](http://www.quirksmode.org/css/)
<li>
<p>[QuirksMode CSS](http://www.quirksmode.org/css/)</p> [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
</li>
<li>
<p>[Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)</p>
</li>
</ul>
<hr>