blob: 34e33dcf4f205eb73824f3a0364e4eff0509aa01 (
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: صفحات الأنماط الانسيابية
slug: Web/CSS
tags:
- CSS
- صفحات الأنماط الانسيابية
- صفحة هبوط
- مرجع
translation_of: Web/CSS
---
<p class="summary" dir="rtl"><span class="seoSummary"><strong>صفحات الأنماط الانسيابية</strong> <strong>(CSS)</strong> هي لغة <a href="/ar/docs/DOM/stylesheet">أنماط</a> تستخدم لوصف طريقة عرض الوثيقة المكتوبة <a href="/ar/docs/HTML">بلغة ترميز النص الفائق</a></span> أو <a href="/ar/docs/XML">بلغة الترميز القابلة للإمتداد </a> (بالإضافة إلى نكهاتها). تصف هذه التقنيّة كيف يجب على العناصر أن تظهر على الشاشة، الورقة، الكلام، أو على الوسائط الأخرى.</p>
<p dir="rtl">صفحات الأنماط الانسيابية هي أحد اللغات الأساسيّة <em>للويب المفتوح</em>،<em> </em>وهي لغة قياسيّة في جميع المتصفحات بناءً على <a href="http://w3.org/Style/CSS/#specs">معايير W3C</a>. طوِّرت هذه اللغة في عدة إصدارا، الأول الآن مهجور، الثاني (2.1) موصى به، و <a href="/ar/docs/CSS/CSS3" title="CSS3">الثالث</a>، هو الآن منقسم إلى عدة وحدات، وهذا الإصدار على طريقه لصبح قياسياً في جميع المتصفحات.</p>
<section id="sect1">
<ul class="card-grid">
<li dir="rtl"><span>مقدمة عن صفحات الأنماط الانسيابية</span>
<p dir="rtl">إن كنت جديداً على تطوير الويب، فاحرص أن تقرأ مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات اللغة</a> لتتعرف على ماهيَّة هذه اللغة وكيف يمكنك استخدامها.</p>
</li>
<li dir="rtl"><span>دورات عن صفحات الأنماط الانسيابية</span>
<p>يحتوي <a href="/ar/docs/Learn/CSS">قسم تعلم هذه اللغة</a> على ثروة من الدورات التي تأخذك من الصفر إلى الإحتراف، مغطيةً جميع الأساسيات.</p>
</li>
<li><span>مرجع صفحات الأنماط الانسيابية</span>
<p>يصف <a href="/ar/docs/Web/CSS/Reference">مرجع اللغة الشامل</a> لمطورين الويب المخضرمين كل خاصيّة ومفهوم في هذه اللغة.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" dir="rtl" id="دورات">دورات</h2>
<p dir="rtl">يمتاز <a href="/ar/docs/Learn/CSS">قسم تعلم صفحات الأنماط الانسيابية</a> بوحدات متعددة تُدرِس هذه التقنيّة من الألف إلى الياء، ولا يتطلب معرفة مسبقة.</p>
<dl>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في صفحات الأنماط الانسيابية</a></dt>
<dd dir="rtl">تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) الخواص (properties)، كتابة التعليمات، تطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، كيفيّة تحديد الطول واللون وأمور أخرى، التتالي (cascade)، الوراثة (inheritance)، أساسيات نموذج الصندوق (box model)، والتنقيح (debugging).</dd>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق النصوص</a></dt>
<dd dir="rtl">تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً إعداد الخطوط الغامقة والمائلة، المسافات بين الحروف والسطور، الظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.</dd>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_boxes">صناديق التصميم</a></dt>
<dd dir="rtl">سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، الحواف (border) الهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.</dd>
<dt dir="rtl"><a href="/ar/docs/Learn/CSS/CSS_layout">النماذج</a></dt>
<dd dir="rtl">في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، التعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).</dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" dir="rtl" id="مراجع">مراجع</h2>
<ul dir="rtl">
<li><a href="/ar/docs/Web/CSS/Reference">مرجع صفحات الأنماط الانسيابية</a>: مرجع شامل لمطورين الويب المخضرمين. يشرح هذا المرجع كل خاصيّة ومفهوم تحتويه هذه اللغة.</li>
<li>المفاهيم الأساسية في اللغة:
<ul dir="rtl">
<li><a href="/ar/docs/CSS/Syntax">البنيّة والصيغ الكتابيّة للغة</a>.</li>
<li><a href="/ar/docs/CSS/Specificity">اﻷولويّة</a> (Specificity) و<a href="/ar/docs/CSS/inheritance">الوراثة</a>.</li>
<li><a href="/ar/docs/CSS/box_model">نموذج الصندوق</a> و<a href="/ar/docs/CSS/margin_collapsing">تداخل الهوامش</a> (margin collapse).</li>
<li><a href="/ar/docs/Web/CSS/All_About_The_Containing_Block">الكتلة الحاويّة</a> (Containing Block).</li>
<li><a href="/ar/docs/CSS/Understanding_z-index/The_stacking_context">التكديس</a> (Stacking) و<a href="/ar/docs/CSS/block_formatting_context">تنسيق كتلة السياقات</a> (block-formatting context).</li>
<li>القيم <a href="/ar/docs/CSS/initial_value">المبدئية</a> (intial)، <a href="/ar/docs/CSS/computed_value">المحسوبة</a> (computed)، <a href="/ar/docs/CSS/used_value">المُستخدمة</a> (used)، <a href="/ar/docs/CSS/actual_value">الفعليّة</a> (actual).</li>
<li><a href="/ar/docs/CSS/Shorthand_properties">الخصائص المُختزلة</a> (shorthand properties).</li>
<li><a href="/ar/docs/Web/CSS/CSS_Flexible_Box_Layout">خاصيّة الصندوق المرن</a> (flexbox).</li>
<li><a href="/ar/docs/Web/CSS/CSS_Grid_Layout">شبكة التخطيط</a> (grid layout).</li>
</ul>
</li>
</ul>
<h2 class="Tools" dir="rtl" id="أدوات_تطوير">أدوات تطوير</h2>
<ul dir="rtl">
<li>يمكنك استخدام <a href="https://jigsaw.w3.org/css-validator/">خدمة التحقق من W3C</a> للتحقق مما إذا كانت شيفرتك سليمة (قياسيّة وخالية من الأخطاء). تعد هذه الأداة مهمة في عمليّة التنقيح.</li>
<li>تتيح لك مجموعة <a href="/ar/docs/Tools">أداة موزيلا للمطورين</a> بالعرض والتعديل الحي لشيفرة صفحات الأنماط الانسيابية باستخدام <a href="/ar/docs/Tools/Page_Inspector">الفاحص</a> (Inspector) و<a href="/ar/docs/Tools/Style_Editor">محرر الأنماط/التصميم</a> (Style Editor).</li>
<li>تتيح لك <a href="https://addons.mozilla.org/en-US/firefox/addon/60">إضافات مطورين الويب</a> القيام بالتتبع والتعديل الحي لشيفرتك.</li>
<li>قام مجتمع الويب بصنع <a href="/ar/docs/Web/CSS/Tools">أدوات متنوعة</a> أخرى لتتمكن من استخدامها.</li>
</ul>
<h2 dir="rtl" id="علل">علل</h2>
<ul>
<li>: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>
<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2>
<ul dir="rtl">
<li><a href="/ar/docs/Web/Demos_of_open_web_technologies#CSS">أمثلة عن اللغة</a>: احصل على دفعة إبداعيّة من خلال استكشاف أمثلة لآخر تقنيات اللغة.</li>
<li>اللغات التي غالباً ما تستخدم مع هذه التقنيّة: <a href="/ar/docs/HTML">لغة ترميز النص الفائق</a>، <a href="/ar/docs/SVG">لغة الرسوميات المتجهيّة المتغيرة</a>، <a href="/ar/docs/XHTML">لغة ترميز النص الفائق القابلة للامتداد</a>، <a href="/ar/docs/XML">لغة الترميز القابلة للامتداد</a>.</li>
<li>تقنيات موزيلا التي تجعل استخدام اللغة واسع النطاق: <a href="/ar/docs/Mozilla/Tech/XUL">لغة واجهة المستخدم للغة الترميز القابلة للإمتداد</a> (XUL)، <a href="/ar/Firefox">فايرفوكس</a>، <a href="/ar/docs/Mozilla/Thunderbird">ثندربرد</a>، <a href="/ar/Add-ons">الإضافات</a>، و<a href="/ar/Add-ons/Themes">السمات</a>.</li>
</ul>
|
