mozilla

Revision 549975 of CSS

  • Revision slug: Web/CSS
  • Revision title: CSS
  • Revision id: 549975
  • Created:
  • Creator: kazem82
  • Is current revision? No
  • Comment

Revision Content

شیوه نامه‌های آبشاری، بیشتر اوقات به CSS شناخته می‌شود، یک زبان شیوه نامه مورد استفاده شده برای نمایش یک سند در قالب HTML یا XML (شامل زبان‌های متنوع SVG یا XHTML). CSS نحوه ترجمه المان‌های ساخت یافته روی صفحه نمایش، روی کاغذ،  در سخن‌رانی، یا روی دیگر رسانه‌ها را شرح می‌دهد.

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

مرجع CSS

یک مرجع کامل برای توسعه دهندگان وب فصلی که هر خاصیت و مهفومی از CSS را شرح می‌هد.

آموزش CSS

یک معرفی گام به گام برای شروع و کمک به مبتدیان کامل. تمامی احتیاجات اولیه ارایه شده است.

نسخه‌های نمایشی CSS3

یک مجموعه نسخه‌های نمایشی که آخرین تکنولوژی‌های CSS را در عمل نمایش می‌دهد: افزایش برای خلاقیت.

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

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

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

  • سرویس تایید اعتبار W3C CSS چک می‌کند که یک CSS داده شده معتبر است. این یک ابزار ارزشمند است.
  • الحاقی فایرباگ فایرفاکس، یک الحاقی معروف برای هدایت ویرایش زنده CSS روی سایت‌های دیده شده است. برای تست بعضی تست‌ها خیلی کاربردی است، بهرحال این الحاقی کارهای بیشتری نیز انجام می‌دهد.
  • الحاقی توسعه وب نیز اجازه می‌دهد تا به‌صورت زنده CSS سایت‌های دیده شده را ببینید و ویرایش کنید. ساده‌تر از فایرباگ است، بهرحال قدرت کمتری دارد.
  • الحاقی EditCSS فایرفاکس اجازه ویرایش CSS در نوار کناری را می‌دهد.

 

  • 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)

Getting help from the community

You need help on a CSS-related problem and can't find the solution in the documentation?

  • Check the common CSS questions that give hints to solve common CSS problems.
  • Go to Stack Overflow, a collaboratively built and maintained Q&A site and look if you can find the answer to your question. If not you will be able to ask your question there.
  • Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

 

Revision Source

<p dir="rtl"><span class="seoSummary"><strong>شیوه نامه‌های آبشاری،</strong> بیشتر اوقات به <strong>CSS</strong> شناخته می‌شود، یک زبان <a href="/en-US/docs/DOM/stylesheet">شیوه نامه</a> مورد استفاده شده برای نمایش یک سند در قالب <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> یا <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (شامل زبان‌های متنوع <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> یا <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>)<span class="seoSummary">. CSS نحوه ترجمه المان‌های ساخت یافته روی صفحه نمایش، روی کاغذ،&nbsp; در سخن‌رانی، یا روی دیگر رسانه‌ها را شرح می‌دهد.</span></p>
<p dir="rtl">CSS یکی از زبان‌های اصلی <em>وب متن باز</em> و استاندارد شده برمبنای <a class="external" href="http://w3.org/Style/CSS/#specs">خصوصیات W3C</a>. در سطح‌های مختلف، CSS1 الان منسوخ شده است، CSS2.1 یک توصیه است و <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>، حالا به ماژول‌های کوچکتر شکسته شده است، که در حال پیشرفت در مسیر استانداردسازی است. اولین پیش‌نویس از ماژول‌های CSS4 در حال نوشتن و بازبینی است.</p>
<div dir="rtl" style="margin: auto; text-align: center;">
 <div class="callout-box action-driven">
  <div>
   مرجع CSS</div>
  <p>یک <a href="/en-US/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">مرجع کامل</a> برای <u>توسعه دهندگان وب فصلی</u> که هر خاصیت و مهفومی از CSS را شرح می‌هد.</p>
 </div>
 <div class="callout-box action-driven">
  <div>
   آموزش CSS</div>
  <p>یک <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">معرفی گام به گام</a> برای شروع و کمک به <u>مبتدیان کامل</u>. تمامی احتیاجات اولیه ارایه شده است.</p>
 </div>
 <div class="callout-box action-driven">
  <div>
   نسخه‌های نمایشی CSS3</div>
  <p>یک <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">مجموعه نسخه‌های نمایشی</a> که <u>آخرین تکنولوژی‌های CSS</u> را در عمل نمایش می‌دهد: افزایش برای خلاقیت.</p>
 </div>
</div>
<div class="row topicpage-table" dir="rtl">
 <div class="section">
  <h2 class="Documentation" id="Documentation" name="Documentation">مستندات و آموزش‌ها در مورد CSS</h2>
  <dl>
   <dt>
    مفاهیم کلیدی CSS</dt>
   <dd>
    <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">نحو و قالب زبان</a> و&nbsp; معرفی مفاهیم بنیادی مثل <a href="/en-US/docs/CSS/Specificity" title="Specificity">ویژگی</a> و <a href="/en-US/docs/CSS/inheritance" title="inheritance">ارث‌بری</a>، <a href="/en-US/docs/CSS/box_model" title="Box model">مدل جعبه‌ای</a> و <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">حاشیه سقوط</a>، <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">پشته‌سازی</a> و محتوای <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">فرمت‌دهی جعبه‌ای</a>، یا مقادیر <a href="/en-US/docs/CSS/initial_value" title="initial value">اولیه</a>، <a href="/en-US/docs/CSS/computed_value" title="computed value">محاسبه شده</a>، <a href="/en-US/docs/CSS/used_value" title="used value">استفاده شده</a> و <a href="/en-US/docs/CSS/actual_value" title="actual value">واقعی</a> را شرح می‌دهد. موجودیت‌هایی مثل <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">خصوصیات مختصر شده CSS</a> نیز تعریف شده‌اند.</dd>
   <dt>
    <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">راهنمای توسعه دهنده CSS</a></dt>
   <dd>
    مقالاتی برای کمک به شما تا تکنیک‌های CSS را یاد بگیرید تا محتوی خودتان را درخشان کنید.</dd>
  </dl>
  <h2 class="Tools" id="Tools" name="Tools">ابزارهای ساده‌سازی توسعه CSS</h2>
  <ul>
   <li><a class="external" href="http://jigsaw.w3.org/css-validator/">سرویس تایید اعتبار W3C CSS</a> چک می‌کند که یک CSS داده شده معتبر است. این یک ابزار ارزشمند است.</li>
   <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">الحاقی فایرباگ</a><span class="external"> فایرفاکس، یک الحاقی معروف برای هدایت ویرایش زنده</span> CSS روی سایت‌های دیده شده است. برای تست بعضی تست‌ها خیلی کاربردی است، بهرحال این الحاقی کارهای بیشتری نیز انجام می‌دهد.</li>
   <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">الحاقی توسعه وب</a> نیز اجازه می‌دهد تا به‌صورت زنده CSS سایت‌های دیده شده را ببینید و ویرایش کنید. ساده‌تر از فایرباگ است، بهرحال قدرت کمتری دارد.</li>
   <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">الحاقی EditCSS</a> فایرفاکس اجازه ویرایش CSS در نوار کناری را می‌دهد.</li>
  </ul>
  <p>&nbsp;</p>
  <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات وابسته</h2>
  <ul>
   <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li>
   <li>Open Web languages on which CSS is often applied: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
   <li>Mozilla technologies which make extensive use of CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox and Thunderbird <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes" title="en-US/docs/Themes">themes</a>.</li>
  </ul>
 </div>
 <div class="section">
  <h2 class="Related_Topics" id="News" name="News">News</h2>
  <ul>
   <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li>
   <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> 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")}}. <em>(May 3rd, 2013)</em></li>
   <li>The CSSWG published a <a href="http://www.w3.org/TR/2013/WD-selectors4-20130502/">new working draft</a> of the Selectors Level 4 specification. It still is in the <em>exploring phase</em> and most of the new features are not supported anywhere, but it refines the behavior of scoped selectors and added two new ones: <code>:blank</code>, a relaxed {{cssxref(":empty")}} matching elements only containing spaces and carriage returns, and <code>:placeholder-shown</code>. The two pseudo-classes <code>:matches()</code> 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. <em>(May 2nd, 2013)</em></li>
  </ul>
  <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
  <p>You need help on a CSS-related problem and can't find the solution in the documentation?</p>
  <ul>
   <li>Check the <a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">common CSS questions</a> that give hints to solve common CSS problems.</li>
   <li>Go to <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, a collaboratively built and maintained Q&amp;A site and look if you can find the answer to your question. If not you will be able to ask your question there.</li>
   <li>Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
    <ul>
     <li>Ask your question on the Mozilla IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
     <li>Ask your question on the <a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a></li>
    </ul>
   </li>
  </ul>
 </div>
</div>
<p dir="rtl">&nbsp;</p>
Revert to this revision