blob: 3a56c013351db1b05b12b502b0cbaea077878883 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
---
title: CSS
slug: Learn/CSS
tags:
- Beginner
- CSS
- CodingScripting
- Debugging
- Landing
- NeedsContent
- NeedsTranslation
- Topic
- TopicStub
- length
- specificity
translation_of: Learn/CSS
---
<p class="summary" dir="rtl">الترجمة الحرفية للـ {{glossary("CSS")}} لن تفيدك كثيراً ولكن من باب العلم بها فمعناها (أوراق النمط المتعاقب)، لكن دعنا نتعرف أكثر ما هي الـ CSS وما الذي تقوم به، هي التقنية الأولى من تقنيات الويب التي يجب أن تبدأ بها رحلتك في تعلم تطوير الويب، في حين تقوم بإستخدام الـ HTML في إنشاء العناصر الأساسية للصفحة (هيكلة صفحة الويب)، تقوم بإستخدام الـ CSS في إضفاء الشكل الجمالي لصفحات الويب من خلال إضافة الألوان والمساحات وأماكن العناصر المختلفة، أو إضافة تأثيرات الحركة على بعض العناصر في صفحة الويب.</p>
<h2 dir="rtl" id="مسار_التعلم_المتبع">مسار التعلم المتبع</h2>
<p dir="rtl">يجب عليك تعلم اساسيات HTML أولاً قبل الشروع في تعلم الـ CSS، فكيف تقوم بإضافة الجماليات على صفحة ويب لم يتم إنشاءها بعد؟ لذلك ننصحك بتعمل أساسيات الـ HTML من هنا <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ HTML</a> بعد ذلك يمكنك تعلم:</p>
<ul dir="rtl">
<li>تبدأ بتعلم <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ CSS</a></li>
<li><a href="/ar/Learn/HTML#Modules">نماذج الـ HTML الأكثر تقدماً</a></li>
<li><a href="/ar/docs/Learn/JavaScript">جافاسكربت</a>، وكيف تقوم بإستخدامها في إضافة وظائف ديناميكية لصفحات الويب.</li>
</ul>
<p dir="rtl">مباشرةً عندما تجد نفسك مستوعباً لأساسيات الـ HTML, ننصحك بتعلم الـ HTML والـ CSS بشكل متزامن (في نفس الوقت) لانك غالباً ستحتاج إلى تطوير نفسك في كليهما بشكل مستمر. وأيضاً لان الـ HTML شيقة في التعلم لسهولة تطبيقها خلال رحلة تعلمك، وستجد أنك تستوعبها سريعاً، وستجد أيضاً انها اكثر متعه عندما تقوم بتطبيق ما تعلمته من الـ CSS. وتذكر دائماً انك لن تستطيع تعلم الـ CSS بدون معرفة الـ HTML.</p>
<p dir="rtl">قبل البداية في تعمل هذه التقنية، لابد من تعلم أساسيات التعامل مع الحاسب وإستخدام الويب، أيضاً لابد من تهيئة بيئة العمل التي تحتاجها لإنشاء صفحات الويب كما تم شرحها في<a href="/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> تنصيب البرامج المستخدمة في بيئة العمل</a>، وكيفية إنشاء وإدارة الملفات كما تم شرحنا في<a href="/ar/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> التعامل مع الملفات</a>، هذين المقالين أجزاء من ملف شرح<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> للمبتدئين.</p>
<p dir="rtl">وننصحك أيضاً أن تقوم بتعلم<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> قبل الشروع في هذا المقال، على كل حال هذا ليس ضرورياً للغاية، كثيرا مما تم شرحه في أساسيات CSS تم شرحه أيضاً في مقدمة CSS ولكن بشكل أكثر تفصيلاً.</p>
<h2 dir="rtl" id="العناصر">العناصر</h2>
<p dir="rtl">هذا الموضوع يحتوى على العناصر التالية، نقترح عليك أن تبدأ في تعلمهم بهذا الترتيب، ويجب عليك بشكل مؤكد أن تبدأ بالعنصر الأول لأهميته.</p>
<dl>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في CSS</a></dt>
<dd dir="rtl">في هذا الجزء سنبدأ في تعلم أساسيات كيفية عمل الـ CSS وسنقوم بشرح المحددات (Selectors) والخصائص (Properties) وكيفية كتاب قواعد الـ CSS وكيفية تطبيق CSS على عناصر HTML، كيف تحدد الطول واللون والوحدات الأخرى في CSS وسنقوم أيضاً بشرح وراثة القيم وأساسيات العناصر الأساسية في الصفحة (Box Model) وكيفية معالجة الأخطاء في CSS.</dd>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق/شكل الخطوط</a></dt>
<dd dir="rtl">هنا ، ننظر إلى أساسيات تصميم النصوص ، بما في ذلك ضبط الخط ، السماكة ، والميول ; الخط والمسافات بين الحروف </dd>
<dd dir="rtl">هنا نلقي نظرة على أساسيات تصميم النص ، بما في ذلك تعيين الخط والخط الجريء والخط المائل وتباعد الأسطر والحروف والظلال المسقطة وميزات النص الأخرى. ننهي الوحدة من خلال النظر في تطبيق الخطوط المخصصة على صفحتك وقوائم التصميم والروابط.</dd>
<dt dir="rtl"><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
<dd dir="rtl">بعد ذلك ، نلقي نظرة على مربعات التصميم ، وهي إحدى الخطوات الأساسية نحو تخطيط صفحة الويب. في هذه الوحدة ، نلخص نموذج الصندوق ثم ننظر إلى التحكم في تخطيطات الصندوق عن طريق تعيين المساحة المتروكة والحدود والهوامش ، وتعيين ألوان خلفية مخصصة وصور وميزات أخرى ، وميزات فاخرة مثل الظلال المسقطة والمرشحات على الصناديق.</dd>
<dt dir="rtl"><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
<dd dir="rtl">في هذه المرحلة ، اطلعنا بالفعل على أساسيات CSS ، وكيفية تصميم النص ، وكيفية تصميم ومعالجة المربعات الموجودة في المحتوى الخاص بك. حان الوقت الآن للنظر في كيفية وضع مربعاتك في المكان المناسب بالنسبة إلى إطار العرض ، وبعضها البعض. لقد قمنا بتغطية المتطلبات الأساسية اللازمة حتى تتمكن الآن من التعمق في تخطيط CSS ، والنظر في إعدادات العرض المختلفة ، وطرق التخطيط التقليدية التي تتضمن العوامة وتحديد المواقع ، وأدوات التخطيط الجديدة المتشعبة مثل flexbox.</dd>
<dt dir="rtl">Responsive design (TBD)</dt>
<dd dir="rtl">مع وجود العديد من الأنواع المختلفة من الأجهزة التي يمكنها تصفح الويب هذه الأيام ،<a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) أصبحت مهارة تطوير الويب الأساسية. ستغطي هذه الوحدة المبادئ والأدوات الأساسية لـ RWD ، وتشرح كيفية تطبيق CSS مختلفة على مستند اعتمادًا على ميزات الجهاز مثل عرض الشاشة ، والتوجيه ، والدقة ، واستكشاف التقنيات المتاحة لتقديم الفيديو والصور المختلفة اعتمادًا على هذه الميزات.</dd>
</dl>
<h2 dir="rtl" id="Solving_common_CSS_problems">Solving common CSS problems</h2>
<p dir="rtl"><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p>
<h2 dir="rtl" id="See_also">See also</h2>
<dl>
<dt dir="rtl"><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt>
<dd dir="rtl">The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd>
</dl>
|
