انتقل إلى الدروس
ابدأ رحلتك
LEARN BY BUILDING
شروحات كلوز تاجمبتدئ

تعلّم لغة CSS.

افهم الأساس. وابنِ عليه.

دروس مرتّبة، شرح واضح، وخطوات صغيرة تصنع فرقًا. ابدأ من الأساسيات، وتقدّم في تعلّم لغة CSS على مهلك.

ابدأ التعلّم مجانًااستكشف المنهج

محتوى مجاني بالكاملتعلّم على مهلك

دروس مرتّبة
137
فصل تعليمي
23
لغة الشرح
عربي
مشاهدة للمادة
693,818

البداية اللي تبني عليها

خطوتك الجاية في لغة CSS

تركز مادة CSS على معرفة كيفية التحكم في الألوان والخلفيات وترتيب عناصر HTML على المتصفح بواسطة لغة CSS، فأهم ما يميز هذه اللغة هو تقسيم صفحة الويب إلى أقسام "sections"، وعرض كل section بطريقة منظمة وجذابة؛ مما يؤدي في النهاية إلى تصميم حديث وجذاب لصفحة الويب.

من المعرفة للتطبيق

ماذا ستتعلّم في لغة CSS؟

مهارات بتكبر مع كل درس
  • ستتعلم كيفية تنسيق النصوص، مثل: تغيير نمط الخط، وحجمه، ولونه، والمسافات بين الأسطر؛ لتحسين قراءة النصوص على صفحات الويب.
  • ستتعلم كيفية تنسيق الخلفيات، مثل: تعلم كيفية تعيين الصور كخلفية، وتطبيق تأثيرات مختلفة مثل التظليل والانعكاس.
  • ستتعلم كيفية جعل التصميم متجاوبًا مع مختلف أحجام الشاشات والأجهزة باستخدام تقنيات CSS.
  • ستتعلم كيفية تخطيط صفحة الويب وتقسيمها إلى أقسام وتنظيم كل قسم.
  • ستتعلم كيفية ضبط الهوامش والحواف.

جهّز نفسك

قبل ما تبدأ

  • الالتزام بالمهام المطلوبة.
  • إتمام مادة HTML بشكل كامل.

خطوتك لقدّام

هدفك بعد المادة

  • تعلم أساسيات CSS لجعل صفحات الويب أكثر جاذبية وإثارة للاهتمام.
  • القدرة على عمل واجهة مستخدم لتطبيقات الويب متجاوبة مع جميع الأجهزة.
  • تحسين تجربة المستخدم من خلال التنسيق والتنظيم الجيد للعناصر باستخدام CSS.
  • تطوير قدرة الطلاب على تحليل التصميمات وتحويلها إلى صفحات ويب حية.
  • القدرة على استخدام HTML مع CSS في بناء مشاريع حقيقية وتطويرها.

خريطة تعلّمك

محتوى المادة

ابدأ بالترتيب، أو اختَر الدرس اللي محتاجه.

23فصل 137درس

01

بنية CSS

6 دروس
  1. 01 مقدمة في لغة CSSCSS Introduction ابدأ الدرس
  2. 02 قواعد لغة CSSCSS Syntax ابدأ الدرس
  3. 03 تحديد عناصر HTML بلغة CSSCSS Selectors ابدأ الدرس
  4. 04 كيفية إستخدام لغة CSSCSS How To ابدأ الدرس
  5. 05 التعليقات في لغة CSSCSS Comments ابدأ الدرس
  6. 06 CSS Important ابدأ الدرس
02

نصوص CSS

8 دروس
  1. 07 ألوان النصوص في لغة CSSText Color ابدأ الدرس
  2. 08 محاذاة النصوص في لغة CSSText Alignment ابدأ الدرس
  3. 09 محاذاة النصوص رأسياً في لغة CSSVertical Alignment ابدأ الدرس
  4. 10 تحويل الحروف الكبيرة والصغيرة للنصوص في لغة CSSText Transformation ابدأ الدرس
  5. 11 تباعد النصوص في لغة CSSText Spacing ابدأ الدرس
  6. 12 المساحات البيضاء للنوص في لغة CSSWhite Space ابدأ الدرس
  7. 13 ظل النصوص في لغة CSSText Shadow ابدأ الدرس
  8. 14 إتجاه النصوص في لغة CSSText Direction ابدأ الدرس
03

تنسيق نصوص CSS

5 دروس
  1. 15 ديكور خطوط النصوص في CSSDecoration Line ابدأ الدرس
  2. 16 ديكور ألوان خطوط النصوص في لغة CSSDecoration Color ابدأ الدرس
  3. 17 سماكة خط النصوص في لغة CSSDecoration thickness ابدأ الدرس
  4. 18 ديكور شكل خطوط النصوص في لغة CSSDecoration Style ابدأ الدرس
  5. 19 خاصية text-decoration في لغة CSSDecoration Shorthand ابدأ الدرس
04

خطوط CSS

5 دروس
  1. 20 تغيير حجم الخطوط في لغة CSSFont Size ابدأ الدرس
  2. 21 أنواع الخطوط في لغة CSSFont Family ابدأ الدرس
  3. 22 أشكال الخطوط في لغة CSSFont Style ابدأ الدرس
  4. 23 إختصار خصائص font في لغة CSSFont Shorthand ابدأ الدرس
  5. 24 إدراج خطوط من google fonts في لغة CSSGoogle Font ابدأ الدرس
05

خلفيات CSS

7 دروس
  1. 25 خلفية لون في لغة CSSBackground Color ابدأ الدرس
  2. 26 خلفيات صور في لغة CSSBackground Image ابدأ الدرس
  3. 27 أحجام صور الخلفيات في لغة CSSBackground Size ابدأ الدرس
  4. 28 تكرار صور الخلفيات في لغة CSSBackground Repeat ابدأ الدرس
  5. 29 تحريك وثبات صورة الخلفية في لغة CSSBackground Attachment ابدأ الدرس
  6. 30 موقع صورة الخلفية في لغة CSSBackground Position ابدأ الدرس
  7. 31 إختصارات خاصية background في لغة CSSBackground Shorthand ابدأ الدرس
06

حدود CSS

7 دروس
  1. 32 الإطارات في لغة CSSCSS Borders ابدأ الدرس
  2. 33 تحديد نوع الإطار في لغة CSSBorder style ابدأ الدرس
  3. 34 عرض الإطار في لغة CSSBorder Width ابدأ الدرس
  4. 35 لون الإطار في لغة CSSBorder Color ابدأ الدرس
  5. 36 جوانب الإطارات في لغة CSSBorder Sides ابدأ الدرس
  6. 37 إختصار خصائص border في لغة CSSBorder Shorthand ابدأ الدرس
  7. 38 الإطارات المستديرة في لغة CSSRounded Borders ابدأ الدرس
07

الإطار الخارجي في CSS

6 دروس
  1. 39 الإطارات الخارجية في لغة CSSCSS Outline ابدأ الدرس
  2. 40 تحديد نوع الإطار الخارجي outline في لغة CSSOutline style ابدأ الدرس
  3. 41 عرض الإطار الخارجي outline في لغة CSSOutline Width ابدأ الدرس
  4. 42 لون الإطار الخارجي outline في لغة CSSOutline Color ابدأ الدرس
  5. 43 الفارق بين outline و border في لغة CSSOutline Offset ابدأ الدرس
  6. 44 إختصار خصائص outline في لغة CSSOutline Shorthand ابدأ الدرس
08

نموذج الصندوق في CSS

4 دروس
  1. 45 الهوامش في لغة جافا سكربتCSS Margin ابدأ الدرس
  2. 46 الهوامش الداخلية في لغة CSSCSS Padding ابدأ الدرس
  3. 47 خاصية box-sizing في لغة CSSBox Sizing ابدأ الدرس
  4. 48 نموذج العرض الصندوقي في لغة CSSBox Model ابدأ الدرس
09

أبعاد CSS

7 دروس
  1. 49 خاصية height للتحكم في طول العناصر في لغة CSSCSS Height ابدأ الدرس
  2. 50 خاصية width للتحكم في عرض العناصر في لغة CSSCSS Width ابدأ الدرس
  3. 51 خاصية max-height للتحكم في أقصي طول للعنصر بلغة CSSMax Height ابدأ الدرس
  4. 52 خاصية min-height للتحكم في أدني طول للعنصر بلغة CSSMin Height ابدأ الدرس
  5. 53 خاصية max-width للتحكم في أقصي عرض للعنصر بلغة CSSMax Width ابدأ الدرس
  6. 54 خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSSMin Width ابدأ الدرس
  7. 55 دالة calc في لغة CSSCalculator ابدأ الدرس
10

تموضع العناصر في CSS

7 دروس
  1. 56 عرض العناصر في لغة CSSCSS Display ابدأ الدرس
  2. 57 ظهور العنصر وإخفاؤه في لغة CSSCSS Visibility ابدأ الدرس
  3. 58 تعويم العناصر عن طريق خاصية float في لغة CSSCSS Float ابدأ الدرس
  4. 59 خاصية clear في لغة CSSCSS Clear ابدأ الدرس
  5. 60 التحكم في طبقات صفحة HTML بلغة CSSCSS Position ابدأ الدرس
  6. 61 ترتيب الطبقات في لغة CSSLayers Orders ابدأ الدرس
  7. 62 المحتوي الزائد عن العنصر في لغة CSSCSS Overflow ابدأ الدرس
11

أنماط CSS

5 دروس
  1. 63 الروابط في لغة CSSCSS Links ابدأ الدرس
  2. 64 الصور في لغة CSSCSS Images ابدأ الدرس
  3. 65 التحكم في شكل القوائم في لغة CSSCSS Lists ابدأ الدرس
  4. 66 التحكم في شكل الجداول في لغة CSSCSS Tables ابدأ الدرس
  5. 67 الشفافية في لغة CSSCSS Transparency ابدأ الدرس
12

التنقل باستخدام CSS

3 دروس
  1. 68 اشرطة التنقل في لغة CSSCSS Navigation Bar ابدأ الدرس
  2. 69 شريط التنقل العمودي في لغة CSSVertical Navigation ابدأ الدرس
  3. 70 شريط التنقل الأفقي في لغة CSSHorizontal Navigation ابدأ الدرس
13

التخطيط المرن في CSS

13 درس
  1. 71 الصناديق المرنة - فليكس بوكس في لغة CSSCSS Flexbox ابدأ الدرس
  2. 72 خاصية flex-direction في لغة CSSFlex Direction ابدأ الدرس
  3. 73 إلتفاف العناصر داخل حاوية flex box في لغة CSSFlex Wrap ابدأ الدرس
  4. 74 خاصية flex-flow في لغة CSSFlex Flow ابدأ الدرس
  5. 75 خاصية في justify-content مع flex box لغة CSSJustify Content ابدأ الدرس
  6. 76 خاصية align-items مع flex في لغة CSSAlign Items ابدأ الدرس
  7. 77 خاصية align-content مع flex في لغة CSSAlign Content ابدأ الدرس
  8. 78 خاصية order مع flex في لغة CSSFlex Order ابدأ الدرس
  9. 79 خاصية flex-basis مع flex box في لغة CSSFlex Basis ابدأ الدرس
  10. 80 خاصية flex-grow مع flex في لغة CSSFlex Grow ابدأ الدرس
  11. 81 خاصية flex-shrink مع flex في لغة CSSFlex Shrink ابدأ الدرس
  12. 82 خاصية align-self مع flex box في لغة CSSAlign Self ابدأ الدرس
  13. 83 خاصية flex في لغة CSSCSS Flex ابدأ الدرس
14

نظام Grid في CSS

3 دروس
  1. 84 النظام الشبكي Grid في لغة CSSGrid System ابدأ الدرس
  2. 85 حاوية grid في لغة CSSGrid Container ابدأ الدرس
  3. 86 عناصر حاوية grid في لغة CSSGrid Items ابدأ الدرس
15

أعمدة Grid في CSS

5 دروس
  1. 87 خاصية grid-template-columns في لغة CSSTemplate Columns ابدأ الدرس
  2. 88 خاصية grid-column-start في لغة CSSColumn Start ابدأ الدرس
  3. 89 خاصية grid-column-end في لغة CSSColumn End ابدأ الدرس
  4. 90 خاصية grid-column مع grid في لغة CSSGrid Column ابدأ الدرس
  5. 91 خاصية grid-auto-columns مع grid في لغة CSSAuto Columns ابدأ الدرس
16

صفوف Grid في CSS

6 دروس
  1. 92 خاصية grid-template-rows في لغة CSSTemplate Rows ابدأ الدرس
  2. 93 خاصية grid-row-start في لغة CSSRow Start ابدأ الدرس
  3. 94 خاصية grid-row-end في لغة CSSRow End ابدأ الدرس
  4. 95 خاصية grid-row مع grid في لغة CSSGrid Row ابدأ الدرس
  5. 96 خاصية grid-auto-rows مع grid في لغة CSSAuto Rows ابدأ الدرس
  6. 97 خاصية grid-template مع grid في لغة CSSGrid Template ابدأ الدرس
17

منطقة Grid في CSS

2 درسين
  1. 98 خاصية grid-template-areas مع grid في لغة CSSTemplate Areas ابدأ الدرس
  2. 99 خاصية grid-area مع grid في لغة CSSGrid Area ابدأ الدرس
18

فجوات Grid في CSS

3 دروس
  1. 100 خاصية grid-row-gap مع Grid في لغة CSSRow Gap ابدأ الدرس
  2. 101 خاصية grid-gap مع Grid في لغة CSSGrid Gap ابدأ الدرس
  3. 102 خاصية grid-column-gap مع Grid في لغة CSSColumn Gap ابدأ الدرس
19

شبكة CSS

3 دروس
  1. 103 محتوي حاوية grid في لغة CSSGrid Content ابدأ الدرس
  2. 104 خاصية grid-auto-flow مع grid في لغة CSSGrid Flow ابدأ الدرس
  3. 105 دالة repeat في لغة CSSRepeat Function ابدأ الدرس
20

CSS المتجاوب

9 دروس
  1. 106 التصميمات المتجاوبة في لغة CSSRWD Introduction ابدأ الدرس
  2. 107 نافذة عرض المستخدم في لغة CSSRWD Viewport ابدأ الدرس
  3. 108 نظام media queries في لغة CSSMedia Queries ابدأ الدرس
  4. 109 أمثلة علي Media Query في لغة CSSMedia Examples ابدأ الدرس
  5. 110 Grid View مع الصفحات المتجاوبة في لغة CSSRWD Grid View ابدأ الدرس
  6. 111 صفحات متجاوبة بنظام grid في لغة CSSRWD Grid Media ابدأ الدرس
  7. 112 فيديو متجاوب مع جميع الأجهزة في لغة CSSRWD Video ابدأ الدرس
  8. 113 الصور المتجاوبة مع جميع الأجهزة في لغة CSSRWD Image ابدأ الدرس
  9. 114 تجاوب العناصر مع نظام flex box في لغة CSSFlex Responsive ابدأ الدرس
21

تأثيرات نصوص CSS

3 دروس
  1. 115 خاصية text-overflow في لغة CSSText Overflow ابدأ الدرس
  2. 116 خاصية word-wrap في لغة CSSWord Wrap ابدأ الدرس
  3. 117 خاصية writing-mode في لغة CSSWriting Mode ابدأ الدرس
22

CSS المتقدم

18 درس
  1. 118 موضع الخلفيات الصور في لغة CSSBackground Origin ابدأ الدرس
  2. 119 ترقيم الصفحات بلغة CSSCSS Pagination ابدأ الدرس
  3. 120 الأزرار في لغة CSSCSS Buttons ابدأ الدرس
  4. 121 خاصية column-count في لغة CSSColumn Count ابدأ الدرس
  5. 122 تحويل العنصر إلي ثنائية أبعاد في لغة CSS2D Transforms ابدأ الدرس
  6. 123 تحويل العنصر إلي ثلاثي ابعاد في لغة CSS3D Transforms ابدأ الدرس
  7. 124 الانتقالات في لغة CSSCSS Transitions ابدأ الدرس
  8. 125 موضع الخلفيات الألوان في لغة CSSBackground Clip ابدأ الدرس
  9. 126 الزوايا المدورة في لغة CSSRounded Corners ابدأ الدرس
  10. 127 الألوان في لغة CSSCSS Colors ابدأ الدرس
  11. 128 خلفيات متعددة للعناصر في لغة CSSMultiple Backgrounds ابدأ الدرس
  12. 129 الكلمات المفتاحية مع الألوان في لغة CSSColor Keywords ابدأ الدرس
  13. 130 تدرج الألوان في لغة CSSColor Gradients ابدأ الدرس
  14. 131 الإطارات الصور في لغة CSSBorder Images ابدأ الدرس
  15. 132 المؤثرات الحركية في لغة CSSCSS Animations ابدأ الدرس
  16. 133 التلميحات في لغة CSSCSS Tooltip ابدأ الدرس
  17. 134 المتغيرات في لغة CSSCSS Variables ابدأ الدرس
  18. 135 CSS Dynamic ابدأ الدرس
23

محددات CSS

2 درسين
  1. 136 تحديد العناصر بالعلاقات في لغة CSSCombinator selectors ابدأ الدرس
  2. 137 تحديد العناصر عن طريق الحالة في لغة CSSPseudo Classes ابدأ الدرس

خطوة صغيرة كل يوم. فرق كبير مع الوقت.

جاهز تبدأ؟

تعلّم لغة CSS خطوة بخطوة من أول درس.

ابدأ بالدرس الأول المتاح وطبّق كل فكرة بنفسك، وبعدها كمّل المسار في معسكرات كلوز تاج.

تعلّم الآن استكشف المعسكرات