mozilla

Revision 484589 of ورقة الأنماط الإنسيابية

  • Revision slug: Web/CSS
  • Revision title: ورقة الأنماط الإنسيابية
  • Revision id: 484589
  • Created:
  • Creator: Qlbaz
  • Is current revision? نعم
  • Comment

Revision Content

ورقة الأنماط الإنسيابية, تعمل على اختصار معظم الوقت، هي «ورقة الأنماط» التي تستخدم لوصف عرض وثيقة مكتوبة بـ HTML أو XML (ويتضمن ذلك لغات مشابهة لـ XML مثل:  SVG أو XHTML.) تصف «ورقة الأنماط» كيف يتم عرض عنصر منظم ومتناسق على الشاشة، على ورقة كلام، أو في وسيلة أخرى.

«ورقة الأنماط» هي واحدة من اللغات الرئيسية على شبكة الإنترنت المفتوحة، ولها مواصفات W3C الموحدة، تطورت على مستويات، «ورقة الأنماط 1» وقد عفى عنها الزمن، «ورقة الأنماط 2.1» ونوصيك بها، و«ورقة الأنماط 3»، وتم تقسيمها إلى وحدة صغيرة، وأخرى تسير على المسار القياسي.

CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track.

  • CSS Reference

    An exhaustive reference for seasoned Web developers describing every property and concept of CSS.

  • CSS Tutorial

    A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.

  • CSS3 Demos

    A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

Documentation and tutorials

CSS key concepts
Describes the syntax and forms of the language and introduces fundamentals like specificity and inheritance, the box model and margin collapsing, stacking and block-formatting contexts, or the initial, computed, used and actual values. Entities like CSS shorthand properties are also defined.
CSS developer guide
Articles to help you learn CSS techniques to make your content shine.

Tools for CSS development

  • The W3C CSS Validation Service checks if a given CSS is valid. It is an invaluable debugging tool.
  • Firefox' Firebug extension, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.
  • Firefox' Web Developer extension also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.
  • Firefox' EditCSS extension allows editing CSS in the sidebar.
  • CSS Text-decoration Level 3 reached the Candidate Recommandation status, defining that the text-decoration-* and text-emphasis-* properties. The long known {{cssxref("text-shadow")}} is also defined in it. (August 1st, 2013)
  • Gecko's now support {{cssxref("background-origin")}}: local. It will be available from Firefox 25 (and already is in Nightly). (July 25th, 2013)
  • 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 {{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)

Getting help

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><span class="seoSummary"><strong>ورقة الأنماط الإنسيابية</strong></span><span class="seoSummary" style="line-height: inherit;">, تعمل على اختصار معظم الوقت،&nbsp;هي «</span><span style="line-height: inherit;">ورقة الأنماط</span><span class="seoSummary" style="line-height: inherit;">» التي تستخدم لوصف عرض وثيقة مكتوبة بـ <a href="/ar/docs/HTML">HTML</a> أو <a href="/ar/docs/XML">XML</a></span><span style="line-height: inherit;">&nbsp;(ويتضمن ذلك لغات مشابهة لـ </span><a href="/ar/docs/XML" style="line-height: inherit;">XML</a><span style="line-height: inherit;"> مثل: &nbsp;</span><a href="/en-US/docs/SVG" style="line-height: inherit;" title="en-US/docs/SVG">SVG</a><span style="line-height: inherit;"> أو&nbsp;</span><a href="/en-US/docs/XHTML" style="line-height: inherit;" title="en-US/docs/XHTML">XHTML.</a><span style="line-height: inherit;">) تصف&nbsp;</span><span style="line-height: inherit;">«ورقة الأنماط» كيف يتم عرض عنصر منظم ومتناسق على الشاشة، على ورقة كلام، أو في وسيلة أخرى.</span></p>
<p style="direction: rtl; ">«ورقة الأنماط» هي واحدة من اللغات الرئيسية على شبكة الإنترنت المفتوحة، ولها مواصفات <a href="http://w3.org/Style/CSS/#specs">W3C الموحدة</a>، تطورت على مستويات،&nbsp;«ورقة الأنماط 1» وقد عفى عنها الزمن،&nbsp;<span style="line-height: inherit;">«ورقة الأنماط 2.1» ونوصيك بها، و</span><span style="line-height: inherit;">«ورقة الأنماط 3»، وتم تقسيمها إلى وحدة صغيرة، وأخرى تسير على المسار القياسي.</span></p>
<p>CSS is one of the core languages of the <em>open web</em> and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standard track.</p>
<section id="sect1">
 <ul class="card-grid">
  <li><span>CSS Reference</span>
   <p>An <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p>
  </li>
  <li><span>CSS Tutorial</span>
   <p>A <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p>
  </li>
  <li><span>CSS3 Demos</span>
   <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p>
  </li>
 </ul>
 <div class="row topicpage-table">
  <div class="section">
   <h2 class="Documentation" id="Documentation" name="Documentation">Documentation and tutorials</h2>
   <dl>
    <dt>
     CSS key concepts</dt>
    <dd>
     Describes the <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntax and forms of the language</a> and introduces fundamentals like <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> and <a href="/en-US/docs/CSS/inheritance" title="inheritance">inheritance</a>, the <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a> and <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> and <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts, or the <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> and <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a> values. Entities like <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> are also defined.</dd>
    <dt>
     <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt>
    <dd>
     Articles to help you learn CSS techniques to make your content shine.</dd>
   </dl>
   <h2 class="Tools" id="Tools" name="Tools">Tools for CSS development</h2>
   <ul>
    <li><span class="external">The </span><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> checks if a given CSS is valid. It is an invaluable debugging tool.</li>
    <li>Firefox' <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span class="external">, a popular</span> extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.</li>
    <li><span class="external">Firefox' </span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</li>
    <li>Firefox' <a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> allows editing CSS in the sidebar.</li>
   </ul>
   <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">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/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> reached the <em>Candidate Recommandation</em> status, defining that the <code>text-decoration-*</code> and <code>text-emphasis-*</code> properties. The long known {{cssxref("text-shadow")}} is also defined in it. (<em>August 1st, 2013)</em></li>
    <li>Gecko's now support {{cssxref("background-origin")}}<code>: local</code>. It will be available from Firefox 25 (and already is in Nightly). <em>(July 25th, 2013)</em></li>
    <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 {{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>
   </ul>
   <h2 class="Community" id="Community" name="Community">Getting help</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>&nbsp;</p>
</section>
Revert to this revision