diff options
Diffstat (limited to 'files/ar/learn/css/first_steps')
| -rw-r--r-- | files/ar/learn/css/first_steps/how_css_is_structured/index.html | 179 | ||||
| -rw-r--r-- | files/ar/learn/css/first_steps/index.html | 46 |
2 files changed, 0 insertions, 225 deletions
diff --git a/files/ar/learn/css/first_steps/how_css_is_structured/index.html b/files/ar/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index 53b455f460..0000000000 --- a/files/ar/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Readable CSS -slug: Learn/CSS/First_steps/How_CSS_is_structured -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS -original_slug: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p dir="rtl">{{ CSSTutorialTOC() }}</p> - -<p dir="rtl">{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.</span></p> - -<h2 class="clearLeft" dir="rtl" id="معلومة_CSS_مقروء_(قابل_للقراءة_سهل_القراءة)">معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)</h2> - -<p dir="rtl">يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.</p> - -<h3 dir="rtl" id="المساحة_الفارغة">المساحة الفارغة</h3> - -<p dir="rtl">المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.</p> - -<p dir="rtl">في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.</p> - -<p dir="rtl">يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.</p> - -<p dir="rtl">التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.</p> - -<p dir="rtl"> </p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Examples</div> - -<p>بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:</p> - -<p dir="ltr">.carrot {color: orange; text-decoration: underline; font-style: italic;}</p> - -<p><br> - بعض الناس يفضلون خاصية واحدة لكل سطر:</p> - -<pre class="brush: css" dir="rtl">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - -<p>بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:</p> - -<pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - -<p><br> - (بعض الأشخاص يفضلون جعل كل شيء عموديا (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.</p> - -<pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - -<p>بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.</p> - -<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } -.vegetable.carrot { color: orange; height: 90px; width: 10px } -.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } -</pre> -</div> - -<p dir="rtl">بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.</p> - -<h3 dir="rtl" id="التعليقات">التعليقات<br> - </h3> - -<p dir="rtl">التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».<br> - <br> - يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.<br> - <br> - التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.</p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Example</div> - -<pre class="brush: css">/* style for initial letter C in first paragraph */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> - -<h3 dir="rtl" id="تجميع_العناصر_عندما_يكون_لمجموعة_من_العناصر_عدد_من_الخصائص_المتشابهة_في_النمط،_يمكنك_تجميع_العناصر_مع_الفصل_بينهم_بعلامة_فاصلة._وتـنطبق_هذة_الخصائص_على_جميع_العناصر_المجمعة.">تجميع العناصر<br> - <br> - <span style="font-size: 14px;">عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.</span><br> - </h3> - -<p dir="rtl">في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.</p> - -<div class="tuto_example" dir="rtl"> -<div class="tuto_type">Example</div> - -<p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p> - -<p>إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.</p> - -<pre class="brush: css">/* color for headings */ -h1, h2, h3 {color: navy;} -</pre> -</div> - -<h2 dir="rtl" id="العمل_إضافة_تعليقات_و_تحسين_التخطيط">العمل: إضافة تعليقات و تحسين التخطيط</h2> - -<ol dir="rtl"> - <li>قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li>جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.</li> - <li>قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" dir="rtl"> -<div class="tuto_type">تحدي</div> - -<div class="tuto_type"> </div> - -<p class="tuto_type">ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>(هناك العديد من الطرق لفعل ذلك)</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:</p> - -<pre class="brush: css">/*.carrot { - color: orange; -}*/</pre> - -<p><a class="hideAnswer" href="#challenge">Hide solution</a></p> -</div> - -<p><a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></p> -</div> - -<h2 dir="rtl" id="ما_التالي؟">ما التالي؟</h2> - -<h2 dir="rtl" id="nextPage(en-USdocsWebGuideCSSGetting_StartedText_styles_Text_styles)_Your_sample_stylesheet_has_used_italic_text_and_underlined_text._The_next_page_describes_more_ways_to_specify_the_appearance_of_text_in_your_document.">{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" style="font-size: 14px; font-weight: normal;" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a><span style="color: #3b3c40; font-size: 14px; font-weight: normal;"> in your document</span><strong style="color: #3b3c40; font-size: 14px;">.</strong></h2> diff --git a/files/ar/learn/css/first_steps/index.html b/files/ar/learn/css/first_steps/index.html deleted file mode 100644 index 34b8e9fefb..0000000000 --- a/files/ar/learn/css/first_steps/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: CSS first steps -slug: Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should have:</p> - -<ol> - <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li> - <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> - <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt> - <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt> - <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt> - <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt> - <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt> - <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> - <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> -</dl> |